Feature/35716 changing owner flow

src/CONST.ts

@@ -1501,6 +1501,15 @@ const CONST = {
             DISABLE: 'disable',
             ENABLE: 'enable',
         },
+        OWNERSHIP_ERRORS: {
+            NO_BILLING_CARD: 'noBillingCard',
+            AMOUNT_OWED: 'amountOwed',
+            HAS_FAILED_SETTLEMENTS: 'hasFailedSettlements',
+            OWNER_OWES_AMOUNT: 'ownerOwesAmount',
+            SUBSCRIPTION: 'subscription',
+            DUPLICATE_SUBSCRIPTION: 'duplicateSubscription',
+            FAILED_TO_CLEAR_BALANCE: 'failedToClearBalance',
+        },
         TAX_RATES_BULK_ACTION_TYPES: {
             DELETE: 'delete',
             DISABLE: 'disable',

src/ONYXKEYS.ts

@@ -290,6 +290,9 @@ const ONYXKEYS = {
     // Paths of PDF file that has been cached during one session
     CACHED_PDF_PATHS: 'cachedPDFPaths',
 
+    /** Holds the checks used while transferring the ownership of the workspace */
+    POLICY_OWNERSHIP_CHANGE_CHECKS: 'policyOwnershipChangeChecks',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -620,6 +623,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;
     [ONYXKEYS.SHOULD_STORE_LOGS]: boolean;
     [ONYXKEYS.CACHED_PDF_PATHS]: Record<string, string>;
+    [ONYXKEYS.POLICY_OWNERSHIP_CHANGE_CHECKS]: Record<string, OnyxTypes.PolicyOwnershipChangeChecks>;
     [ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE]: OnyxTypes.QuickAction;
 };
 

src/ROUTES.ts

@@ -612,6 +612,23 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/members/:accountID/role-selection',
         getRoute: (policyID: string, accountID: number, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/members/${accountID}/role-selection`, backTo),
     },
+    WORKSPACE_OWNER_PAYMENT_CARD_FORM: {
+        route: 'settings/workspaces/:policyID/add-payment-card/:accountID',
+        getRoute: (policyID: string, accountID: number) => `settings/workspaces/${policyID}/add-payment-card/${accountID}` as const,
+    },
+    WORKSPACE_OWNER_CHANGE_SUCCESS: {
+        route: 'settings/workspaces/:policyID/change-owner/:accountID/success',
+        getRoute: (policyID: string, accountID: number) => `settings/workspaces/${policyID}/change-owner/${accountID}/success` as const,
+    },
+    WORKSPACE_OWNER_CHANGE_ERROR: {
+        route: 'settings/workspaces/:policyID/change-owner/:accountID/failure',
+        getRoute: (policyID: string, accountID: number) => `settings/workspaces/${policyID}/change-owner/${accountID}/failure` as const,
+    },
+    WORKSPACE_OWNER_CHANGE_CHECK: {
+        route: 'settings/workspaces/:policyID/change-owner/:accountID/:error',
+        getRoute: (policyID: string, accountID: number, error: ValueOf<typeof CONST.POLICY.OWNERSHIP_ERRORS>) =>
+            `settings/workspaces/${policyID}/change-owner/${accountID}/${error}` as const,
+    },
     WORKSPACE_TAX_CREATE: {
         route: 'settings/workspaces/:policyID/taxes/new',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/taxes/new` as const,

src/SCREENS.ts

@@ -242,6 +242,10 @@ const SCREENS = {
         MORE_FEATURES: 'Workspace_More_Features',
         MEMBER_DETAILS: 'Workspace_Member_Details',
         MEMBER_DETAILS_ROLE_SELECTION: 'Workspace_Member_Details_Role_Selection',
+        OWNER_CHANGE_CHECK: 'Workspace_Owner_Change_Check',
+        OWNER_CHANGE_SUCCESS: 'Workspace_Owner_Change_Success',
+        OWNER_CHANGE_ERROR: 'Workspace_Owner_Change_Error',
+        OWNER_PAYMENT_CARD_FORM: 'Workspace_Owner_Payment_Card_Form',
         DISTANCE_RATES: 'Distance_Rates',
         CREATE_DISTANCE_RATE: 'Create_Distance_Rate',
         DISTANCE_RATES_SETTINGS: 'Distance_Rates_Settings',

src/components/ConfirmationPage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type {TextStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
@@ -26,9 +27,24 @@ type ConfirmationPageProps = {
 
     /** Whether we should show a confirmation button */
     shouldShowButton?: boolean;
+
+    /** Additional style for the heading */
+    headingStyle?: TextStyle;
+
+    /** Additional style for the description */
+    descriptionStyle?: TextStyle;
 };
 
-function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, description, buttonText = '', onButtonPress = () => {}, shouldShowButton = false}: ConfirmationPageProps) {
+function ConfirmationPage({
+    animation = LottieAnimations.Fireworks,
+    heading,
+    description,
+    buttonText = '',
+    onButtonPress = () => {},
+    shouldShowButton = false,
+    headingStyle,
+    descriptionStyle,
+}: ConfirmationPageProps) {
     const styles = useThemeStyles();
 
     return (
@@ -40,8 +56,8 @@ function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, desc
                     loop
                     style={styles.confirmationAnimation}
                 />
-                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{heading}</Text>
-                <Text style={styles.textAlignCenter}>{description}</Text>
+                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2, headingStyle]}>{heading}</Text>
+                <Text style={[styles.textAlignCenter, descriptionStyle]}>{description}</Text>
             </View>
             {shouldShowButton && (
                 <FixedFooter>

src/components/Icon/Expensicons.ts

@@ -100,6 +100,7 @@ import Menu from '@assets/images/menu.svg';
 import Meter from '@assets/images/meter.svg';
 import MoneyBag from '@assets/images/money-bag.svg';
 import MoneyCircle from '@assets/images/money-circle.svg';
+import MoneyWaving from '@assets/images/money-waving.svg';
 import Monitor from '@assets/images/monitor.svg';
 import Mute from '@assets/images/mute.svg';
 import NewWindow from '@assets/images/new-window.svg';
@@ -257,6 +258,7 @@ export {
     Megaphone,
     MoneyBag,
     MoneyCircle,
+    MoneyWaving,
     Monitor,
     Mute,
     ExpensifyLogoNew,

src/components/Section/index.tsx

@@ -18,6 +18,7 @@ import IconSection from './IconSection';
 
 const CARD_LAYOUT = {
     ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_LEFT: 'iconOnLeft',
     ICON_ON_RIGHT: 'iconOnRight',
 } as const;
 
@@ -121,6 +122,12 @@ function Section({
             )}
             <View style={[styles.w100, isCentralPane && (isSmallScreenWidth ? styles.p5 : styles.p8)]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1]}>
+                    {cardLayout === CARD_LAYOUT.ICON_ON_LEFT && (
+                        <IconSection
+                            icon={icon}
+                            iconContainerStyles={[styles.flexGrow0, styles.justifyContentStart, iconContainerStyles]}
+                        />
+                    )}
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}>{title}</Text>
                     </View>

src/languages/en.ts

@@ -312,6 +312,7 @@ export default {
         update: 'Update',
         member: 'Member',
         role: 'Role',
+        currency: 'Currency',
     },
     location: {
         useCurrent: 'Use current location',
@@ -1938,6 +1939,7 @@ export default {
             removeMemberButtonTitle: 'Remove from workspace',
             removeMemberPrompt: ({memberName}) => `Are you sure you want to remove ${memberName}`,
             removeMemberTitle: 'Remove member',
+            transferOwner: 'Transfer owner',
             makeMember: 'Make member',
             makeAdmin: 'Make admin',
             selectAll: 'Select all',
@@ -2086,6 +2088,45 @@ export default {
             updateCurrencyPrompt: 'It looks like your Workspace is currently set to a different currency than USD. Please click the button below to update your currency to USD now.',
             updateToUSD: 'Update to USD',
         },
+        changeOwner: {
+            changeOwnerPageTitle: 'Transfer owner',
+            addPaymentCardTitle: 'Enter your payment card to transfer ownership',
+            addPaymentCardButtonText: 'Accept terms & add payment card',
+            addPaymentCardReadAndAcceptTextPart1: 'Read and accept',
+            addPaymentCardReadAndAcceptTextPart2: 'policy to add your card',
+            addPaymentCardTerms: 'terms',
+            addPaymentCardPrivacy: 'privacy',
+            addPaymentCardAnd: '&',
+            addPaymentCardPciCompliant: 'PCI-DSS compliant',
+            addPaymentCardBankLevelEncrypt: 'Bank level encryption',
+            addPaymentCardRedundant: 'Redundant infrastructure',
+            addPaymentCardLearnMore: 'Learn more about our',
+            addPaymentCardSecurity: 'security',
+            amountOwedTitle: 'Outstanding balance',
+            amountOwedButtonText: 'OK',
+            amountOwedText: 'This account has an outstanding balance from a previous month.\n\nDo you want to clear balance and take over billing of this workspace?',
+            ownerOwesAmountTitle: 'Outstanding balance',
+            ownerOwesAmountButtonText: 'Transfer balance',
+            ownerOwesAmountText: ({email, amount}) =>
+                `The account owning this workspace (${email}) has an outstanding balance from a previous month.\n\nDo you want to transfer this amount (${amount}) in order to take over billing for this workspace? Your payment card will be charged immediately.`,
+            subscriptionTitle: 'Take over annual subscription',
+            subscriptionButtonText: 'Transfer subscription',
+            subscriptionText: ({usersCount, finalCount}) =>
+                `Taking over this workspace will merge its associated annual subscription with your current subscription. This will increase your subscription size by ${usersCount} users making your new subscription size ${finalCount}. Would you like to continue?`,
+            duplicateSubscriptionTitle: 'Duplicate subscription alert',
+            duplicateSubscriptionButtonText: 'Continue',
+            duplicateSubscriptionText: ({email, workspaceName}) =>
+                `It looks like you may be trying to take over billing for ${email}'s workspaces, but to do that, you need to be an admin on all their workspaces first.\n\nClick "Continue" if you only want to take over billing for the workspace ${workspaceName}.\n\nIf you want to take over billing for their entire subscription, please have them add you as an admin to all their workspaces first before taking over billing.`,
+            hasFailedSettlementsTitle: 'Cannot transfer ownership',
+            hasFailedSettlementsButtonText: 'Got it',
+            hasFailedSettlementsText: ({email}) =>
+                `You cannot take over billing because ${email} has an overdue expensify Expensify Card settlement. Please advise them to reach out to [email protected] to resolve the issue. Then, you can take over billing for this workspace.`,
+            failedToClearBalanceTitle: 'Failed to clear balance',
+            failedToClearBalanceButtonText: 'OK',
+            failedToClearBalanceText: 'We were unable to clear the balance. Please try again later.',
+            successTitle: 'Woohoo! All set.',
+            successDescription: "You're now the owner if this workspace.",
+        },
     },
     getAssistancePage: {
         title: 'Get assistance',

src/languages/es.ts

@@ -302,6 +302,7 @@ export default {
         update: 'Actualizar',
         member: 'Miembro',
         role: 'Role',
+        currency: 'Divisa',
     },
     location: {
         useCurrent: 'Usar ubicación actual',
@@ -1965,6 +1966,7 @@ export default {
             removeMemberButtonTitle: 'Quitar del espacio de trabajo',
             removeMemberPrompt: ({memberName}) => `¿Estás seguro de que deseas eliminar a ${memberName}`,
             removeMemberTitle: 'Eliminar miembro',
+            transferOwner: 'Transferir la propiedad',
             makeMember: 'Hacer miembro',
             makeAdmin: 'Hacer administrador',
             selectAll: 'Seleccionar todo',
@@ -2115,6 +2117,46 @@ export default {
                 'Parece que tu espacio de trabajo está configurado actualmente en una moneda diferente a USD. Por favor, haz clic en el botón de abajo para actualizar tu moneda a USD ahora.',
             updateToUSD: 'Actualizar a USD',
         },
+        changeOwner: {
+            changeOwnerPageTitle: 'Dueño de la transferencia',
+            addPaymentCardTitle: 'Ingrese su tarjeta de pago para transferir la propiedad',
+            addPaymentCardButtonText: 'Aceptar términos y agregar tarjeta de pago',
+            addPaymentCardReadAndAcceptTextPart1: 'Lea y acepte',
+            addPaymentCardReadAndAcceptTextPart2: 'para agregar su tarjeta',
+            addPaymentCardTerms: 'los términos',
+            addPaymentCardPrivacy: 'la política de privacidad',
+            addPaymentCardAnd: 'y',
+            addPaymentCardPciCompliant: 'PCI-DSS obediente',
+            addPaymentCardBankLevelEncrypt: 'Cifrado a nivel bancario',
+            addPaymentCardRedundant: 'Infraestructura redundante',
+            addPaymentCardLearnMore: 'Conozca más sobre nuestra',
+            addPaymentCardSecurity: 'seguridad',
+            // TODO: add spanish translations below
+            amountOwedTitle: 'Saldo pendiente',
+            amountOwedButtonText: 'OK',
+            amountOwedText: 'Esta cuenta tiene un saldo pendiente de un mes anterior.\n\n¿Quiere liquidar el saldo y hacerse cargo de la facturación de este espacio de trabajo?',
+            ownerOwesAmountTitle: 'Saldo pendiente',
+            ownerOwesAmountButtonText: 'Transferir saldo',
+            ownerOwesAmountText: ({email, amount}) =>
+                `La cuenta propietaria de este espacio de trabajo (${email}) tiene un saldo pendiente de un mes anterior.\n\n¿Desea transferir este monto (${amount}) para hacerse cargo de la facturación de este espacio de trabajo? Su tarjeta de pago se cargará inmediatamente.`,
+            subscriptionTitle: 'Asumir la suscripción anual',
+            subscriptionButtonText: 'Transferir suscripción',
+            subscriptionText: ({usersCount, finalCount}) =>
+                `Al hacerse cargo de este espacio de trabajo se fusionará su suscripción anual asociada con su suscripción actual. Esto aumentará el tamaño de su suscripción en ${usersCount} usuarios, lo que hará que su nuevo tamaño de suscripción sea ${finalCount}. ¿Te gustaria continuar?`,
+            duplicateSubscriptionTitle: 'Alerta de suscripción duplicada',
+            duplicateSubscriptionButtonText: 'Continuar',
+            duplicateSubscriptionText: ({email, workspaceName}) =>
+                `Parece que estás intentando hacerte cargo de la facturación de los espacios de trabajo de ${email}, pero para hacerlo, primero debes ser administrador de todos sus espacios de trabajo.\n\nHaz clic en "Continuar" si solo quieres tomar sobrefacturación para el espacio de trabajo ${workspaceName}.\n\nSi desea hacerse cargo de la facturación de toda su suscripción, pídales que lo agreguen como administrador a todos sus espacios de trabajo antes de hacerse cargo de la facturación.`,
+            hasFailedSettlementsTitle: 'No se puede transferir la propiedad',
+            hasFailedSettlementsButtonText: 'Entiendo',
+            hasFailedSettlementsText: ({email}) =>
+                `No puede hacerse cargo de la facturación porque ${email} tiene una liquidación vencida de la tarjeta Expensify. Avíseles que se comuniquen con [email protected] para resolver el problema. Luego, podrá hacerse cargo de la facturación de este espacio de trabajo.`,
+            failedToClearBalanceTitle: 'Failed to clear balance',
+            failedToClearBalanceButtonText: 'OK',
+            failedToClearBalanceText: 'We were unable to clear the balance. Please try again later.',
+            successTitle: '¡Guau! Todo listo.',
+            successDescription: 'Ahora eres el propietario de este espacio de trabajo.',
+        },
     },
     getAssistancePage: {
         title: 'Obtener ayuda',

src/libs/API/parameters/AddBillingCardAndRequestWorkspaceOwnerChangeParams.ts

@@ -0,0 +1,12 @@
+type AddBillingCardAndRequestWorkspaceOwnerChangeParams = {
+    policyID: string;
+    cardNumber: string;
+    cardYear: string;
+    cardMonth: string;
+    cardCVV: string;
+    addressName: string;
+    addressZip: string;
+    currency: string;
+};
+
+export default AddBillingCardAndRequestWorkspaceOwnerChangeParams;

src/libs/API/parameters/RequestWorkspaceOwnerChangeParams.ts

@@ -0,0 +1,7 @@
+import type {PolicyOwnershipChangeChecks} from '@src/types/onyx';
+
+type RequestWorkspaceOwnerChangeParams = PolicyOwnershipChangeChecks & {
+    policyID: string;
+};
+
+export default RequestWorkspaceOwnerChangeParams;

src/libs/API/parameters/index.ts

@@ -187,6 +187,8 @@ export type {default as UpdatePolicyDistanceRateValueParams} from './UpdatePolic
 export type {default as SetPolicyDistanceRatesEnabledParams} from './SetPolicyDistanceRatesEnabledParams';
 export type {default as DeletePolicyDistanceRatesParams} from './DeletePolicyDistanceRatesParams';
 export type {default as CreatePolicyTagsParams} from './CreatePolicyTagsParams';
+export type {default as RequestWorkspaceOwnerChangeParams} from './RequestWorkspaceOwnerChangeParams';
+export type {default as AddBillingCardAndRequestWorkspaceOwnerChangeParams} from './AddBillingCardAndRequestWorkspaceOwnerChangeParams';
 export type {default as SetPolicyTaxesEnabledParams} from './SetPolicyTaxesEnabledParams';
 export type {default as DeletePolicyTaxesParams} from './DeletePolicyTaxesParams';
 export type {default as UpdatePolicyTaxValueParams} from './UpdatePolicyTaxValueParams';

src/libs/API/types.ts

@@ -188,6 +188,8 @@ const WRITE_COMMANDS = {
     UPDATE_POLICY_TAX_VALUE: 'UpdatePolicyTaxValue',
     RENAME_POLICY_TAX: 'RenamePolicyTax',
     CREATE_POLICY_DISTANCE_RATE: 'CreatePolicyDistanceRate',
+    REQUEST_WORKSPACE_OWNER_CHANGE: 'RequestWorkspaceOwnerChange',
+    ADD_BILLING_CARD_AND_REQUEST_WORKSPACE_OWNER_CHANGE: 'AddBillingCardAndRequestPolicyOwnerChange',
     SET_POLICY_DISTANCE_RATES_UNIT: 'SetPolicyDistanceRatesUnit',
     SET_POLICY_DISTANCE_RATES_DEFAULT_CATEGORY: 'SetPolicyDistanceRatesDefaultCategory',
     UPDATE_POLICY_DISTANCE_RATE_VALUE: 'UpdatePolicyDistanceRateValue',
@@ -378,6 +380,8 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.DELETE_POLICY_TAXES]: Parameters.DeletePolicyTaxesParams;
     [WRITE_COMMANDS.UPDATE_POLICY_TAX_VALUE]: Parameters.UpdatePolicyTaxValueParams;
     [WRITE_COMMANDS.CREATE_POLICY_DISTANCE_RATE]: Parameters.CreatePolicyDistanceRateParams;
+    [WRITE_COMMANDS.REQUEST_WORKSPACE_OWNER_CHANGE]: Parameters.RequestWorkspaceOwnerChangeParams;
+    [WRITE_COMMANDS.ADD_BILLING_CARD_AND_REQUEST_WORKSPACE_OWNER_CHANGE]: Parameters.AddBillingCardAndRequestWorkspaceOwnerChangeParams;
     [WRITE_COMMANDS.RENAME_POLICY_TAX]: Parameters.RenamePolicyTaxParams;
     [WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_UNIT]: Parameters.SetPolicyDistanceRatesUnitParams;
     [WRITE_COMMANDS.SET_POLICY_DISTANCE_RATES_DEFAULT_CATEGORY]: Parameters.SetPolicyDistanceRatesDefaultCategoryParams;