Merge pull request #32362 from rezkiy37/feature/32187-referral-page-r…

…edesign [Wave 6: Referral Program] Promote referral program messaging in NewDot Redesign the Referral page
Expensify · Dec 12, 2023 · d9ea439 · d9ea439
2 parents 207e9de + 3d4b568
commit d9ea439
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 81 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1971,31 +1971,30 @@ export default {
             buttonText1: 'Start a chat, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Start a chat, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Get paid to talk to your friends! Start a chat with a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
+            body: `Get paid to talk to your friends! Start a chat with a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: {
             buttonText1: 'Request money, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Request money, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `It pays to get paid! Request money from a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
+            body: `It pays to get paid! Request money from a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: {
             buttonText1: 'Send money, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Send money, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `You gotta send money to make money! Send money to a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
+            body: `You gotta send money to make money! Send money to a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: {
             buttonText1: 'Invite a friend, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Invite a friend, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Send your Expensify invite link to a friend or anyone else you know who spends too much time on expenses. When they start an annual subscription, you'll get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+            body: 'Be the first to invite a friend (or anyone else) to Expensify and get $250 if they become an Expensify customer. Share your invite link by text, email, or post it on social media!',
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE]: {
             buttonText1: `Get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            header: `Get $${CONST.REFERRAL_PROGRAM.REVENUE} for every referral`,
-            body1: 'If you know anyone who’s spending too much time on expenses (literally anyone – your neighbor, your boss, your friend in accounting), send them your Expensify referral link:',
-            body2: `When they start an annual subscription, you’ll get $${CONST.REFERRAL_PROGRAM.REVENUE}. Easy as that.`,
+            header: `Invite a friend, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
+            body: `Be the first to invite a friend (or anyone else) to Expensify and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer. Share your invite link by text, email, or post it on social media!`,
         },
         copyReferralLink: 'Copy invite link',
     },

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2457,31 +2457,30 @@ export default {
             buttonText1: 'Inicia un chat y ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Inicia un chat y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `¡Gana dinero por hablar con tus amigos! Inicia un chat con una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
+            body: `¡Gana dinero por hablar con tus amigos! Inicia un chat con una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: {
             buttonText1: 'Pide dinero, ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Pide dinero y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `¡Vale la pena cobrar! Pide dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
+            body: `¡Vale la pena cobrar! Pide dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: {
             buttonText1: 'Envía dinero, ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Envía dinero y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `¡Hay que enviar dinero para ganar dinero! Envía dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
+            body: `¡Hay que enviar dinero para ganar dinero! Envía dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: {
             buttonText1: 'Invita a un amigo y ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            header: `Invita a un amigo y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Envía tu enlace de invitación de Expensify a un amigo o a cualquier otra persona que conozcas que dedique demasiado tiempo a los gastos. Cuando comiencen una suscripción anual, obtendrás $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+            header: `Invita a un amigo y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE}`,
+            body: `Sé el primero en invitar a un amigo (o a cualquier otra persona) a Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierte en cliente de Expensify. Comparte tu enlace de invitación por SMS, email o publícalo en las redes sociales.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE]: {
             buttonText1: `Recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            header: `Recibe $${CONST.REFERRAL_PROGRAM.REVENUE} por cada recomendación`,
-            body1: 'Si conoces a alguien que dedique demasiado tiempo a los gastos (literalmente cualquiera: tu vecino, tu jefe, tu amigo de contabilidad), envíale tu enlace de invitación de Expensify:',
-            body2: `Cuando comiencen una suscripción anual, obtendrás $${CONST.REFERRAL_PROGRAM.REVENUE}. Así de fácil.`,
+            header: `Invita a un amigo y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE}`,
+            body: `Sé el primero en invitar a un amigo (o a cualquier otra persona) a Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierte en cliente de Expensify. Comparte tu enlace de invitación por SMS, email o publícalo en las redes sociales.`,
         },
         copyReferralLink: 'Copiar enlace de invitación',
     },

diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
@@ -1,23 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
+import React, {useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import Button from '@components/Button';
-import CopyTextToClipboard from '@components/CopyTextToClipboard';
-import FixedFooter from '@components/FixedFooter';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ContextMenuItem from '@components/ContextMenuItem';
+import HeaderPageLayout from '@components/HeaderPageLayout';
 import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
 import {PaymentHands} from '@components/Icon/Illustrations';
-import ScreenWrapper from '@components/ScreenWrapper';
+import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
-import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import Navigation from '@libs/Navigation/Navigation';
+import useSingleExecution from '@hooks/useSingleExecution';
+import Clipboard from '@libs/Clipboard';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+import {CONTEXT_MENU_TYPES} from './home/report/ContextMenu/ContextMenuActions';
+import * as ReportActionContextMenu from './home/report/ContextMenu/ReportActionContextMenu';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -40,81 +42,63 @@ const defaultProps = {
 };
 
 function ReferralDetailsPage({route, account}) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const popoverAnchor = useRef(null);
+    const {isExecuting, singleExecution} = useSingleExecution();
     let {contentType} = route.params;
 
     if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) {
         contentType = CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
     }
 
     const contentHeader = translate(`referralProgram.${contentType}.header`);
-    const contentBody = translate(`referralProgram.${contentType}.body1`);
+    const contentBody = translate(`referralProgram.${contentType}.body`);
     const isShareCode = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE;
-    const shouldShowBody2 = isShareCode;
     const shouldShowClipboard = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND || isShareCode;
-
-    function generateReferralURL(email) {
-        return `${CONST.REFERRAL_PROGRAM.LINK}/?thanks=${encodeURIComponent(email)}`;
-    }
-
-    function getFallbackRoute() {
-        const fallbackRoutes = {
-            [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: ROUTES.MONEY_REQUEST_PARTICIPANTS.getRoute(CONST.IOU.TYPE.REQUEST),
-            [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: ROUTES.MONEY_REQUEST_PARTICIPANTS.getRoute(CONST.IOU.TYPE.SEND),
-            [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]: ROUTES.NEW_CHAT,
-            [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: ROUTES.SEARCH,
-        };
-
-        return fallbackRoutes[contentType];
-    }
+    const referralLink = `${CONST.REFERRAL_PROGRAM.LINK}/?thanks=${encodeURIComponent(account.primaryLogin)}`;
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={ReferralDetailsPage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('common.referral')}
-                onBackButtonPress={() => Navigation.goBack(getFallbackRoute())}
-            />
-            <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5, styles.flex1]}>
+        <HeaderPageLayout
+            title={translate('common.referral')}
+            headerContent={
                 <Icon
                     src={PaymentHands}
                     width={178}
                     height={232}
                 />
-                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mb3, styles.mt8]}>{contentHeader}</Text>
-                <Text style={[styles.textAlignCenter, styles.inlineSystemMessage, styles.mb6]}>{contentBody}</Text>
-                {shouldShowClipboard && (
-                    <View style={[styles.border, styles.pv2, styles.ph3, styles.mb6]}>
-                        <CopyTextToClipboard
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            text={translate('referralProgram.copyReferralLink')}
-                            textStyles={[styles.colorMuted]}
-                            urlToCopy={generateReferralURL(account.primaryLogin)}
-                        />
-                    </View>
-                )}
-                {shouldShowBody2 && (
-                    <Text style={[styles.textAlignCenter, styles.inlineSystemMessage, styles.mb6]}>
-                        {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.body2`)}
-                    </Text>
-                )}
-                <TextLink href={CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK}>{translate('requestorStep.learnMore')}</TextLink>
-            </View>
-            <FixedFooter>
-                <Button
-                    success
-                    style={[styles.w100]}
-                    text={translate('common.buttonConfirm')}
-                    onPress={() => Navigation.goBack(getFallbackRoute())}
-                    pressOnEnter
-                    enterKeyEventListenerPriority={1}
+            }
+            headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor}
+        >
+            <Text style={[styles.textHeadline, styles.mb3, styles.mt3, styles.ph4]}>{contentHeader}</Text>
+            <Text style={[styles.inlineSystemMessage, styles.ml0, styles.mb6, styles.ph4]}>{contentBody}</Text>
+
+            {shouldShowClipboard && (
+                <ContextMenuItem
+                    isAnonymousAction
+                    text={translate('referralProgram.copyReferralLink')}
+                    icon={Expensicons.Copy}
+                    successIcon={Expensicons.Checkmark}
+                    successText={translate('qrCodes.copied')}
+                    onPress={() => Clipboard.setString(referralLink)}
                 />
-            </FixedFooter>
-        </ScreenWrapper>
+            )}
+
+            <MenuItem
+                wrapperStyle={styles.mb4}
+                ref={popoverAnchor}
+                title={translate('requestorStep.learnMore')}
+                icon={Expensicons.QuestionMark}
+                shouldShowRightIcon
+                iconRight={Expensicons.NewWindow}
+                disabled={isExecuting}
+                shouldBlockSelection
+                onPress={singleExecution(() => Link.openExternalLink(CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK))}
+                onSecondaryInteraction={(e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK, popoverAnchor.current)}
+            />
+        </HeaderPageLayout>
     );
 }
 

diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
@@ -127,6 +127,10 @@ const darkTheme = {
             backgroundColor: colors.productDark200,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.REFERRAL]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
 
     statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,

diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
@@ -127,6 +127,10 @@ const lightTheme = {
             backgroundColor: colors.productLight200,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.REFERRAL]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
 
     statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,