[SAML Configuration] Domain settings page

src/CONST/index.ts

@@ -1025,6 +1025,7 @@ const CONST = {
     MERGE_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Merge-Accounts',
     CONNECT_A_BUSINESS_BANK_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Connect-a-Business-Bank-Account',
     DOMAIN_VERIFICATION_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/domains/Claim-And-Verify-A-Domain',
+    SAML_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/domains/Managing-Single-Sign-On-(SSO)-in-Expensify',
     REGISTER_FOR_WEBINAR_URL: 'https://events.zoom.us/eo/Aif1I8qCi1GZ7KnLnd1vwGPmeukSRoPjFpyFAZ2udQWn0-B86e1Z~AggLXsr32QYFjq8BlYLZ5I06Dg',
     TEST_RECEIPT_URL: `${CLOUDFRONT_URL}/images/fake-receipt__tacotodds.png`,
     // Use Environment.getEnvironmentURL to get the complete URL with port number
@@ -5382,6 +5383,7 @@ const CONST = {
             /** These action types are custom for RootNavigator */
             DISMISS_MODAL: 'DISMISS_MODAL',
             OPEN_WORKSPACE_SPLIT: 'OPEN_WORKSPACE_SPLIT',
+            OPEN_DOMAIN_SPLIT: 'OPEN_DOMAIN_SPLIT',
             SET_HISTORY_PARAM: 'SET_HISTORY_PARAM',
             REPLACE_PARAMS: 'REPLACE_PARAMS',
             TOGGLE_SIDE_PANEL_WITH_HISTORY: 'TOGGLE_SIDE_PANEL_WITH_HISTORY',

src/NAVIGATORS.ts

@@ -14,6 +14,7 @@ export default {
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',
     WORKSPACE_SPLIT_NAVIGATOR: 'WorkspaceSplitNavigator',
+    DOMAIN_SPLIT_NAVIGATOR: 'DomainSplitNavigator',
     SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
     SHARE_MODAL_NAVIGATOR: 'ShareModalNavigator',
     PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator',

src/ROUTES.ts

@@ -3367,6 +3367,22 @@ const ROUTES = {
         route: 'workspaces/domain-verified/:accountID',
         getRoute: (accountID: number) => `workspaces/domain-verified/${accountID}` as const,
     },
+    DOMAIN_INITIAL: {
+        route: 'domain/:accountID',
+        getRoute: (accountID: number) => `domain/${accountID}` as const,
+    },
+    DOMAIN_SAML: {
+        route: 'domain/:accountID/saml',
+        getRoute: (accountID: number) => `domain/${accountID}/saml` as const,
+    },
+    DOMAIN_VERIFY: {
+        route: 'domain/:accountID/verify',
+        getRoute: (accountID: number) => `domain/${accountID}/verify` as const,
+    },
+    DOMAIN_VERIFIED: {
+        route: 'domain/:accountID/verified',
+        getRoute: (accountID: number) => `domain/${accountID}/verified` as const,
+    },
 } as const;
 
 /**

src/SCREENS.ts

@@ -824,6 +824,12 @@ const SCREENS = {
     },
     WORKSPACES_VERIFY_DOMAIN: 'Workspaces_Verify_Domain',
     WORKSPACES_DOMAIN_VERIFIED: 'Workspaces_Domain_Verified',
+    DOMAIN: {
+        VERIFY: 'Domain_Verify',
+        VERIFIED: 'Domain_Verified',
+        INITIAL: 'Domain_Initial',
+        SAML: 'Domain_SAML',
+    },
 } as const;
 
 type Screen = DeepValueOf<typeof SCREENS>;

src/components/Domain/DomainMenuItem.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -43,10 +45,16 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isAdmin, isValidated} = item;
+    const theme = useTheme();
 
     const threeDotsMenuItems: PopoverMenuItem[] | undefined =
         !isValidated && isAdmin
             ? [
+                  {
+                      icon: Expensicons.Globe,
+                      text: translate('domain.goToDomain'),
+                      onSelected: item.action,
+                  },
                   {
                       icon: Expensicons.Globe,
                       text: translate('domain.verifyDomain.title'),
@@ -74,6 +82,23 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
                         badgeText={isAdmin && !isValidated ? translate('domain.notVerified') : undefined}
                         isHovered={hovered}
                         menuItems={threeDotsMenuItems}
+                        rightIcon={
+                            isValidated ? (
+                                <Icon
+                                    src={Expensicons.NewWindow}
+                                    fill={hovered ? theme.iconHovered : theme.icon}
+                                    isButtonIcon
+                                />
+                            ) : (
+                                <Icon
+                                    src={Expensicons.ArrowRight}
+                                    fill={theme.icon}
+                                    additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
+                                    isButtonIcon
+                                    medium
+                                />
+                            )
+                        }
                     />
                 )}
             </PressableWithoutFeedback>

src/components/Domain/DomainsListRow.tsx

@@ -1,3 +1,4 @@
+import type {ReactElement} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -24,11 +25,14 @@ type DomainsListRowProps = {
     /** Items for the three dots menu */
     menuItems?: PopoverMenuItem[];
 
-    /** The type of brick road indicator to show. */
+    /** The type of brick road indicator to show */
     brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
+
+    /** Icon to display at the end of the row */
+    rightIcon: ReactElement<typeof Icon>;
 };
 
-function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) {
+function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems, rightIcon}: DomainsListRowProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -79,13 +83,7 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt
                         )}
                     </View>
                 </View>
-                <View style={styles.touchableButtonImage}>
-                    <Icon
-                        src={Expensicons.NewWindow}
-                        fill={isHovered ? theme.iconHovered : theme.icon}
-                        isButtonIcon
-                    />
-                </View>
+                <View style={styles.touchableButtonImage}>{rightIcon}</View>
             </View>
         </View>
     );

src/components/FeatureList.tsx

@@ -24,6 +24,9 @@ type FeatureListProps = {
     /** The text to display in the subtitle of the section */
     subtitle?: string;
 
+    /** The component to display custom subtitle */
+    renderSubtitle?: () => ReactNode;
+
     /** Text of the call to action button */
     ctaText?: string;
 
@@ -76,6 +79,7 @@ function FeatureList({
     contentPaddingOnLargeScreens,
     footer,
     isButtonDisabled = false,
+    renderSubtitle,
 }: FeatureListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -92,6 +96,7 @@ function FeatureList({
             titleStyles={titleStyles}
             illustrationContainerStyle={illustrationContainerStyle}
             contentPaddingOnLargeScreens={contentPaddingOnLargeScreens}
+            renderSubtitle={renderSubtitle}
         >
             <View style={styles.flex1}>
                 <View style={[styles.flex1, styles.flexRow, styles.flexWrap, styles.rowGap4, styles.pv4, styles.pl1]}>

src/components/Icon/Illustrations.ts

@@ -25,6 +25,7 @@ import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_l
 import Computer from '@assets/images/computer.svg';
 import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import LaptopOnDeskWithCoffeeAndKey from '@assets/images/laptop-on-desk-with-coffee-and-key.svg';
 import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
@@ -85,6 +86,7 @@ import Luggage from '@assets/images/simple-illustrations/simple-illustration__lu
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
 import ExpensifyMobileApp from '@assets/images/simple-illustrations/simple-illustration__mobileapp.svg';
 import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
+import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import PaperAirplane from '@assets/images/simple-illustrations/simple-illustration__paperairplane.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
@@ -226,4 +228,6 @@ export {
     CardReplacementSuccess,
     EmptyShelves,
     BlueShield,
+    OpenSafe,
+    LaptopOnDeskWithCoffeeAndKey,
 };

src/components/Navigation/NavigationTabBar/index.tsx

@@ -35,7 +35,7 @@ import {buildCannedSearchQuery, buildSearchQueryJSON, buildSearchQueryString} fr
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
 import navigationRef from '@navigation/navigationRef';
-import type {RootNavigatorParamList, SearchFullscreenNavigatorParamList, State, WorkspaceSplitNavigatorParamList} from '@navigation/types';
+import type {DomainSplitNavigatorParamList, RootNavigatorParamList, SearchFullscreenNavigatorParamList, State, WorkspaceSplitNavigatorParamList} from '@navigation/types';
 import NavigationTabBarAvatar from '@pages/home/sidebar/NavigationTabBarAvatar';
 import NavigationTabBarFloatingActionButton from '@pages/home/sidebar/NavigationTabBarFloatingActionButton';
 import variables from '@styles/variables';
@@ -44,7 +44,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import type {Policy} from '@src/types/onyx';
+import type {Domain, Policy} from '@src/types/onyx';
 import NAVIGATION_TABS from './NAVIGATION_TABS';
 
 type NavigationTabBarProps = {
@@ -78,20 +78,25 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatin
     const initialNavigationRouteState = getWorkspaceNavigationRouteState();
     const [lastWorkspacesTabNavigatorRoute, setLastWorkspacesTabNavigatorRoute] = useState(initialNavigationRouteState.lastWorkspacesTabNavigatorRoute);
     const [workspacesTabState, setWorkspacesTabState] = useState(initialNavigationRouteState.workspacesTabState);
-    const params = workspacesTabState?.routes?.at(0)?.params as WorkspaceSplitNavigatorParamList[typeof SCREENS.WORKSPACE.INITIAL];
+    const params = workspacesTabState?.routes?.at(0)?.params as
+        | WorkspaceSplitNavigatorParamList[typeof SCREENS.WORKSPACE.INITIAL]
+        | DomainSplitNavigatorParamList[typeof SCREENS.DOMAIN.INITIAL];
     const {typeMenuSections} = useSearchTypeMenuSections();
     const subscriptionPlan = useSubscriptionPlan();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['ExpensifyAppIcon', 'Inbox', 'MoneySearch', 'Buildings'] as const);
 
+    const paramsPolicyID = params && 'policyID' in params ? params.policyID : undefined;
+    const paramsDomainAccountID = params && 'accountID' in params ? params.accountID : undefined;
+
     const lastViewedPolicySelector = useCallback(
         (policies: OnyxCollection<Policy>) => {
-            if (!lastWorkspacesTabNavigatorRoute || lastWorkspacesTabNavigatorRoute.name !== NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR || !params?.policyID) {
+            if (!lastWorkspacesTabNavigatorRoute || lastWorkspacesTabNavigatorRoute.name !== NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR || !paramsPolicyID) {
                 return undefined;
             }
 
-            return policies?.[`${ONYXKEYS.COLLECTION.POLICY}${params.policyID}`];
+            return policies?.[`${ONYXKEYS.COLLECTION.POLICY}${paramsPolicyID}`];
         },
-        [params?.policyID, lastWorkspacesTabNavigatorRoute],
+        [paramsPolicyID, lastWorkspacesTabNavigatorRoute],
     );
 
     const [lastViewedPolicy] = useOnyx(
@@ -103,6 +108,26 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatin
         [navigationState],
     );
 
+    const lastViewedDomainSelector = useCallback(
+        (domains: OnyxCollection<Domain>) => {
+            if (!lastWorkspacesTabNavigatorRoute || lastWorkspacesTabNavigatorRoute.name !== NAVIGATORS.DOMAIN_SPLIT_NAVIGATOR || !paramsDomainAccountID) {
+                return undefined;
+            }
+
+            return domains?.[`${ONYXKEYS.COLLECTION.DOMAIN}${paramsDomainAccountID}`];
+        },
+        [paramsDomainAccountID, lastWorkspacesTabNavigatorRoute],
+    );
+
+    const [lastViewedDomain] = useOnyx(
+        ONYXKEYS.COLLECTION.DOMAIN,
+        {
+            canBeMissing: true,
+            selector: lastViewedDomainSelector,
+        },
+        [navigationState],
+    );
+
     const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {selector: reportsSelector, canBeMissing: true});
     const {login: currentUserLogin} = useCurrentUserPersonalDetails();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -189,8 +214,8 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatin
      * If the user clicks on the settings tab while on this tab, this button should go back to the previous screen within the tab.
      */
     const showWorkspaces = useCallback(() => {
-        navigateToWorkspacesPage({shouldUseNarrowLayout, currentUserLogin, policy: lastViewedPolicy});
-    }, [shouldUseNarrowLayout, currentUserLogin, lastViewedPolicy]);
+        navigateToWorkspacesPage({shouldUseNarrowLayout, currentUserLogin, policy: lastViewedPolicy, domain: lastViewedDomain});
+    }, [shouldUseNarrowLayout, currentUserLogin, lastViewedPolicy, lastViewedDomain]);
 
     if (!shouldUseNarrowLayout) {
         return (

src/languages/de.ts

@@ -7426,6 +7426,16 @@ ${amount} für ${merchant} - ${date}`,
             description: ({domainName}: {domainName: string}) =>
                 `<muted-text><centered-text>Die Domain <strong>${domainName}</strong> wurde erfolgreich verifiziert und Sie können jetzt SAML und andere Sicherheitsfunktionen einrichten.</centered-text></muted-text>`,
         },
+        saml: 'SAML',
+        samlFeatureList: {
+            title: 'SAML-Einmalanmeldung (SSO)',
+            subtitle: ({domainName}: {domainName: string}) =>
+                `<muted-text><a href="${CONST.SAML_HELP_URL}">SAML SSO</a> ist eine Sicherheitsfunktion, die Ihnen mehr Kontrolle darüber gibt, wie sich Mitglieder mit E-Mail-Adressen unter <strong>${domainName}</strong> bei Expensify anmelden. Um sie zu aktivieren, müssen Sie sich als autorisierte/r Unternehmensadministrator/in verifizieren.</muted-text>`,
+            fasterAndEasierLogin: 'Schnelleres und einfacheres Anmelden',
+            moreSecurityAndControl: 'Mehr Sicherheit und Kontrolle',
+            onePasswordForAnything: 'Ein Passwort für alles',
+        },
+        goToDomain: 'Zur Domain wechseln',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/en.ts

@@ -7367,6 +7367,16 @@ const translations = {
             description: ({domainName}: {domainName: string}) =>
                 `<muted-text><centered-text>The domain <strong>${domainName}</strong> has been successfully verified and you can now set up SAML and other security features.</centered-text></muted-text>`,
         },
+        saml: 'SAML',
+        samlFeatureList: {
+            title: 'SAML Single Sign-On (SSO)',
+            subtitle: ({domainName}: {domainName: string}) =>
+                `<muted-text><a href="${CONST.SAML_HELP_URL}">SAML SSO</a> is a security feature that gives you more control over how members with <strong>${domainName}</strong> emails log into Expensify. To enable it, you'll need to verify yourself as an authorized company admin.</muted-text>`,
+            fasterAndEasierLogin: 'Faster and easier login',
+            moreSecurityAndControl: 'More security and control',
+            onePasswordForAnything: 'One password for everything',
+        },
+        goToDomain: 'Go to domain',
     },
 };
 

src/languages/es.ts

@@ -7508,6 +7508,16 @@ ${amount} para ${merchant} - ${date}`,
             description: ({domainName}: {domainName: string}) =>
                 `<muted-text><centered-text>El dominio <strong>${domainName}</strong> se ha verificado correctamente y ahora puedes configurar SAML y otras funciones de seguridad.</centered-text></muted-text>`,
         },
+        saml: 'SAML',
+        samlFeatureList: {
+            title: 'Inicio de sesión único SAML (SSO)',
+            subtitle: ({domainName}: {domainName: string}) =>
+                `<muted-text><a href="${CONST.SAML_HELP_URL}">SAML SSO</a> es una función de seguridad que te da más control sobre cómo los miembros con correos <strong>${domainName}</strong> inician sesión en Expensify. Para habilitarla, deberás verificarte como administrador autorizado de la empresa.</muted-text>`,
+            fasterAndEasierLogin: 'Inicio de sesión más rápido y sencillo',
+            moreSecurityAndControl: 'Más seguridad y control',
+            onePasswordForAnything: 'Una sola contraseña para todo',
+        },
+        goToDomain: 'Ir al dominio',
     },
 };
 

src/languages/fr.ts

@@ -7430,6 +7430,16 @@ ${amount} pour ${merchant} - ${date}`,
             description: ({domainName}: {domainName: string}) =>
                 `<muted-text><centered-text>Le domaine <strong>${domainName}</strong> a été vérifié avec succès et vous pouvez maintenant configurer SAML et d'autres fonctionnalités de sécurité.</centered-text></muted-text>`,
         },
+        saml: 'SAML',
+        samlFeatureList: {
+            title: 'Authentification unique SAML (SSO)',
+            subtitle: ({domainName}: {domainName: string}) =>
+                `<muted-text><a href="${CONST.SAML_HELP_URL}">SAML SSO</a> est une fonctionnalité de sécurité qui vous donne davantage de contrôle sur la manière dont les membres ayant des adresses e‑mail <strong>${domainName}</strong> se connectent à Expensify. Pour l’activer, vous devrez confirmer que vous êtes un administrateur d’entreprise autorisé.</muted-text>`,
+            fasterAndEasierLogin: 'Connexion plus rapide et plus simple',
+            moreSecurityAndControl: 'Plus de sécurité et de contrôle',
+            onePasswordForAnything: 'Un seul mot de passe pour tout',
+        },
+        goToDomain: 'Accéder au domaine',
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,