Wired up basic settings in AdminX portal settings (#17191)

refs https://github.com/TryGhost/Team/issues/3545

apps/admin-x-settings/src/admin-x-ds/global/form/Toggle.stories.tsx

@@ -13,50 +13,42 @@ export default meta;
 type Story = StoryObj<typeof Toggle>;
 
 export const Default: Story = {
-    args: {
-        id: 'default-toggle'
-    }
+    args: {}
 };
 
 export const Checked: Story = {
     args: {
-        id: 'default-toggle',
         checked: true
     }
 };
 
 export const Small: Story = {
     args: {
-        id: 'default-toggle',
         size: 'sm'
     }
 };
 
 export const Large: Story = {
     args: {
-        id: 'default-toggle',
         size: 'lg'
     }
 };
 
 export const WithLabel: Story = {
     args: {
-        id: 'default-toggle',
         label: 'Check me'
     }
 };
 
 export const WithLabelAndHint: Story = {
     args: {
-        id: 'default-toggle',
         label: 'Check me',
         hint: 'But only if you dare'
     }
 };
 
 export const LeftToRight: Story = {
     args: {
-        id: 'default-toggle',
         label: 'Check me',
         hint: 'But only if you dare',
         direction: 'rtl'
@@ -65,7 +57,6 @@ export const LeftToRight: Story = {
 
 export const WithSeparator: Story = {
     args: {
-        id: 'default-toggle',
         label: 'Check me',
         hint: 'But only if you dare',
         direction: 'rtl',
@@ -75,11 +66,10 @@ export const WithSeparator: Story = {
 
 export const Error: Story = {
     args: {
-        id: 'default-toggle',
         label: 'Check me',
         hint: 'But only if you dare',
         direction: 'rtl',
         error: true,
         separator: true
     }
-};
+};

apps/admin-x-settings/src/admin-x-ds/global/form/Toggle.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, {useId} from 'react';
 import Separator from '../Separator';
 
 type ToggleSizes = 'sm' | 'md' | 'lg';
 type ToggleDirections = 'ltr' | 'rtl';
 
 interface ToggleProps {
-    id: string;
     color?: string;
     checked?: boolean;
     disabled?: boolean;
@@ -18,7 +17,9 @@ interface ToggleProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const Toggle: React.FC<ToggleProps> = ({id, size, direction, label, hint, separator, error, checked, onChange}) => {
+const Toggle: React.FC<ToggleProps> = ({size, direction, label, hint, separator, error, checked, onChange}) => {
+    const id = useId();
+
     let sizeStyles = '';
     let labelStyles = '';
     switch (size) {
@@ -59,4 +60,4 @@ const Toggle: React.FC<ToggleProps> = ({id, size, direction, label, hint, separa
     );
 };
 
-export default Toggle;
+export default Toggle;

apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx

@@ -1,12 +1,12 @@
 import Button, {ButtonProps} from '../Button';
 import ButtonGroup from '../ButtonGroup';
-import ConfirmationModal from './ConfirmationModal';
 import Heading from '../Heading';
-import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect} from 'react';
 import StickyFooter from '../StickyFooter';
 import clsx from 'clsx';
 import useGlobalDirtyState from '../../../hooks/useGlobalDirtyState';
+import {confirmIfDirty} from '../../../utils/modals';
+import {useModal} from '@ebay/nice-modal-react';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed' | number;
 
@@ -34,8 +34,6 @@ export interface ModalProps {
     stickyFooter?: boolean;
     scrolling?: boolean;
     dirty?: boolean;
-    closeConfrimationTitle?: string;
-    closeConfirmationPrompt?: React.ReactNode;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -56,14 +54,7 @@ const Modal: React.FC<ModalProps> = ({
     backDropClick = true,
     stickyFooter = false,
     scrolling = true,
-    dirty = false,
-    closeConfrimationTitle = 'Are you sure you want to leave this page?',
-    closeConfirmationPrompt = (
-        <>
-            <p>{`Hey there! It looks like you didn't save the changes you made.`}</p>
-            <p>Save before you go!</p>
-        </>
-    )
+    dirty = false
 }) => {
     const modal = useModal();
     const {setGlobalDirtyState} = useGlobalDirtyState();
@@ -75,21 +66,7 @@ const Modal: React.FC<ModalProps> = ({
     let buttons: ButtonProps[] = [];
 
     const removeModal = () => {
-        if (!dirty) {
-            modal.remove();
-        } else {
-            NiceModal.show(ConfirmationModal, {
-                title: closeConfrimationTitle,
-                prompt: closeConfirmationPrompt,
-                okLabel: 'Leave',
-                cancelLabel: 'Stay',
-                okColor: 'red',
-                onOk: (confirmationModal) => {
-                    modal.remove();
-                    confirmationModal?.remove();
-                }
-            });
-        }
+        confirmIfDirty(dirty, () => modal.remove());
     };
 
     if (!footer) {

apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx

@@ -4,17 +4,20 @@ import Heading from '../Heading';
 import MobileChrome from '../chrome/MobileChrome';
 import Modal, {ModalSize} from './Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import Select, {SelectOption} from '../form/Select';
 import TabView, {Tab} from '../TabView';
+import useGlobalDirtyState from '../../../hooks/useGlobalDirtyState';
 import {ButtonProps} from '../Button';
+import {confirmIfDirty} from '../../../utils/modals';
 
 export interface PreviewModalProps {
     testId?: string;
     title?: string;
     size?: ModalSize;
     sidebar?: boolean | React.ReactNode;
     preview?: React.ReactNode;
+    dirty?: boolean
     cancelLabel?: string;
     okLabel?: string;
     okColor?: string;
@@ -44,6 +47,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     size = 'full',
     sidebar = '',
     preview,
+    dirty = false,
     cancelLabel = 'Cancel',
     okLabel = 'OK',
     okColor = 'black',
@@ -66,7 +70,11 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     onSelectMobileView
 }) => {
     const modal = useModal();
-    let buttons: ButtonProps[] = [];
+    const {setGlobalDirtyState} = useGlobalDirtyState();
+
+    useEffect(() => {
+        setGlobalDirtyState(dirty);
+    }, [dirty, setGlobalDirtyState]);
 
     const [view, setView] = useState('desktop');
 
@@ -140,12 +148,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
         );
     }
 
+    let buttons: ButtonProps[] = [];
+
     if (!sidebarButtons) {
         buttons.push({
             key: 'cancel-modal',
             label: cancelLabel,
             onClick: (onCancel ? onCancel : () => {
-                modal.remove();
+                confirmIfDirty(dirty, () => modal.remove());
             }),
             disabled: buttonsDisabled
         });

apps/admin-x-settings/src/components/settings/general/LockSite.tsx

@@ -60,7 +60,6 @@ const LockSite: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 checked={passwordEnabled}
                 direction='rtl'
                 hint='All search engine optimization and social features will be disabled.'
-                id='enable-password-protection'
                 label='Enable password protection'
                 onChange={handleToggleChange}
             />

apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx

@@ -198,7 +198,6 @@ const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user, setUserData}
                 checked={user.comment_notifications}
                 direction='rtl'
                 hint='Every time a member comments on one of your posts'
-                id='comments'
                 label='Comments'
                 onChange={(e) => {
                     setUserData?.({...user, comment_notifications: e.target.checked});
@@ -208,7 +207,6 @@ const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user, setUserData}
                 checked={user.free_member_signup_notification}
                 direction='rtl'
                 hint='Every time a new free member signs up'
-                id='new-signups'
                 label='New signups'
                 onChange={(e) => {
                     setUserData?.({...user, free_member_signup_notification: e.target.checked});
@@ -218,7 +216,6 @@ const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user, setUserData}
                 checked={user.paid_subscription_started_notification}
                 direction='rtl'
                 hint='Every time a member starts a new paid subscription'
-                id='new-paid-members'
                 label='New paid members'
                 onChange={(e) => {
                     setUserData?.({...user, paid_subscription_started_notification: e.target.checked});
@@ -228,7 +225,6 @@ const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user, setUserData}
                 checked={user.paid_subscription_canceled_notification}
                 direction='rtl'
                 hint='Every time a member cancels their paid subscription'
-                id='paid-member-cancellations'
                 label='Paid member cancellations'
                 onChange={(e) => {
                     setUserData?.({...user, paid_subscription_canceled_notification: e.target.checked});
@@ -238,7 +234,6 @@ const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user, setUserData}
                 checked={user.milestone_notifications}
                 direction='rtl'
                 hint='Occasional summaries of your audience & revenue growth'
-                id='milestones'
                 label='Milestones'
                 onChange={(e) => {
                     setUserData?.({...user, milestone_notifications: e.target.checked});

apps/admin-x-settings/src/components/settings/membership/Analytics.tsx

@@ -32,7 +32,6 @@ const Analytics: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 checked={trackEmailOpens}
                 direction='rtl'
                 hint='Record when a member opens an email'
-                id='newsletter-opens'
                 label='Newsletter opens'
                 onChange={(e) => {
                     handleToggleChange('email_track_opens', e);
@@ -42,7 +41,6 @@ const Analytics: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 checked={trackEmailClicks}
                 direction='rtl'
                 hint='Record when a member clicks on any link in an email'
-                id='newsletter-clicks'
                 label='Newsletter clicks'
                 onChange={(e) => {
                     handleToggleChange('email_track_clicks', e);
@@ -52,7 +50,6 @@ const Analytics: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 checked={trackMemberSources}
                 direction='rtl'
                 hint='Track the traffic sources and posts that drive the most member growth'
-                id='member-sources'
                 label='Member sources'
                 onChange={(e) => {
                     handleToggleChange('members_track_sources', e);
@@ -62,7 +59,6 @@ const Analytics: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 checked={outboundLinkTagging}
                 direction='rtl'
                 hint='Make it easier for other sites to track the traffic you send them in their analytics'
-                id='outbound-links'
                 label='Outbound link tagging'
                 onChange={(e) => {
                     handleToggleChange('outbound_link_tagging', e);

apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx

@@ -1,30 +1,35 @@
 import AccountPage from './portal/AccountPage';
 import LookAndFeel from './portal/LookAndFeel';
-import NiceModal from '@ebay/nice-modal-react';
+import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import PortalPreview from './portal/PortalPreview';
 import React, {useState} from 'react';
 import SignupOptions from './portal/SignupOptions';
 import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
+import useSettingGroup from '../../../hooks/useSettingGroup';
 import {PreviewModalContent} from '../../../admin-x-ds/global/modal/PreviewModal';
+import {Setting, SettingValue} from '../../../types/api';
 
-const Sidebar: React.FC = () => {
+const Sidebar: React.FC<{
+    localSettings: Setting[]
+    updateSetting: (key: string, setting: SettingValue) => void
+}> = ({localSettings, updateSetting}) => {
     const [selectedTab, setSelectedTab] = useState('signupOptions');
 
     const tabs: Tab[] = [
         {
             id: 'signupOptions',
             title: 'Signup options',
-            contents: <SignupOptions />
+            contents: <SignupOptions localSettings={localSettings} updateSetting={updateSetting} />
         },
         {
             id: 'lookAndFeel',
             title: 'Look & feel',
-            contents: <LookAndFeel />
+            contents: <LookAndFeel localSettings={localSettings} updateSetting={updateSetting} />
         },
         {
             id: 'accountPage',
             title: 'Account page',
-            contents: <AccountPage />
+            contents: <AccountPage localSettings={localSettings} updateSetting={updateSetting} />
         }
     ];
 
@@ -40,13 +45,16 @@ const Sidebar: React.FC = () => {
 };
 
 const PortalModal: React.FC = () => {
+    const modal = useModal();
+
     const [selectedPreviewTab, setSelectedPreviewTab] = useState('signup');
+    const {localSettings, updateSetting, handleSave, saveState} = useSettingGroup();
 
     const onSelectURL = (id: string) => {
         setSelectedPreviewTab(id);
     };
 
-    const sidebar = <Sidebar />;
+    const sidebar = <Sidebar localSettings={localSettings} updateSetting={updateSetting} />;
     const preview = <PortalPreview selectedTab={selectedPreviewTab} />;
 
     let previewTabs: Tab[] = [
@@ -57,14 +65,19 @@ const PortalModal: React.FC = () => {
 
     return <PreviewModalContent
         deviceSelector={selectedPreviewTab !== 'links'}
+        dirty={saveState === 'unsaved'}
         preview={preview}
         previewToolbarTabs={previewTabs}
         selectedURL={selectedPreviewTab}
         sidebar={sidebar}
         testId='portal-modal'
         title='Portal'
+        onOk={async () => {
+            await handleSave();
+            modal.remove();
+        }}
         onSelectURL={onSelectURL}
     />;
 };
 
-export default NiceModal.create(PortalModal);
+export default NiceModal.create(PortalModal);