Share Code page update

src/components/ContextMenuItem.tsx

@@ -1,6 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useImperativeHandle} from 'react';
-import type {GestureResponderEvent} from 'react-native';
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
@@ -41,14 +41,29 @@ type ContextMenuItemProps = {
 
     /** Whether the width should be limited */
     shouldLimitWidth?: boolean;
+
+    /** Styles to apply to ManuItem wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 type ContextMenuItemHandle = {
     triggerPressAndUpdateSuccess?: () => void;
 };
 
 function ContextMenuItem(
-    {onPress, successIcon, successText = '', icon, text, isMini = false, description = '', isAnonymousAction = false, isFocused = false, shouldLimitWidth = true}: ContextMenuItemProps,
+    {
+        onPress,
+        successIcon,
+        successText = '',
+        icon,
+        text,
+        isMini = false,
+        description = '',
+        isAnonymousAction = false,
+        isFocused = false,
+        shouldLimitWidth = true,
+        wrapperStyle,
+    }: ContextMenuItemProps,
     ref: ForwardedRef<ContextMenuItemHandle>,
 ) {
     const styles = useThemeStyles();
@@ -93,7 +108,7 @@ function ContextMenuItem(
             title={itemText}
             icon={itemIcon}
             onPress={triggerPressAndUpdateSuccess}
-            wrapperStyle={styles.pr9}
+            wrapperStyle={[wrapperStyle, styles.pr9]}
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakWord}

src/languages/en.ts

@@ -722,6 +722,10 @@ export default {
             subtitle: 'These details are used for travel and payments. They are never shown on your public profile.',
         },
     },
+    shareCodePage: {
+        title: 'Your code',
+        subtitle: 'Invite members to Expensify by sharing your personal QR code or referral link.',
+    },
     loungeAccessPage: {
         loungeAccess: 'Lounge access',
         headline: 'The Expensify Lounge is closed.',

src/languages/es.ts

@@ -716,6 +716,10 @@ export default {
             subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.',
         },
     },
+    shareCodePage: {
+        title: 'Tu código',
+        subtitle: 'Invita a miembros a Expensify compartiendo tu código QR personal o enlace de invitación.',
+    },
     loungeAccessPage: {
         loungeAccess: 'Acceso a la sala vip',
         headline: 'La sala vip de Expensify está cerrada.',

src/pages/ShareCodePage.tsx

@@ -11,6 +11,7 @@ import MenuItem from '@components/MenuItem';
 import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
 import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
@@ -83,44 +84,59 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP
                 icon={Illustrations.QrCode}
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.mt3]}>
-                <View style={[isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection, themeStyles.ph4]}>
-                    <QRShareWithDownload
-                        ref={qrCodeRef}
-                        url={url}
-                        title={title}
-                        subtitle={subtitle}
-                        logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
-                        logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
-                        logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                    />
-                </View>
+                <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
+                    <Section
+                        title={translate('shareCodePage.title')}
+                        subtitle={translate('shareCodePage.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        childrenStyles={themeStyles.pt5}
+                        titleStyles={themeStyles.accountSettingsSectionTitle}
+                    >
+                        <View style={[themeStyles.qrShareSection]}>
+                            <QRShareWithDownload
+                                ref={qrCodeRef}
+                                url={url}
+                                title={title}
+                                subtitle={subtitle}
+                                logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
+                                logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                                logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                            />
+                        </View>
 
-                <View style={{marginTop: 36}}>
-                    <ContextMenuItem
-                        isAnonymousAction
-                        text={translate('qrCodes.copy')}
-                        icon={Expensicons.Copy}
-                        successIcon={Expensicons.Checkmark}
-                        successText={translate('qrCodes.copied')}
-                        onPress={() => Clipboard.setString(url)}
-                        shouldLimitWidth={false}
-                    />
+                        <View style={{marginTop: 36}}>
+                            <ContextMenuItem
+                                isAnonymousAction
+                                text={translate('qrCodes.copy')}
+                                icon={Expensicons.Copy}
+                                successIcon={Expensicons.Checkmark}
+                                successText={translate('qrCodes.copied')}
+                                onPress={() => Clipboard.setString(url)}
+                                shouldLimitWidth={false}
+                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                            />
 
-                    {isNative && (
-                        <MenuItem
-                            isAnonymousAction
-                            title={translate('common.download')}
-                            icon={Expensicons.Download}
-                            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                            onPress={() => qrCodeRef.current?.download?.()}
-                        />
-                    )}
+                            {isNative && (
+                                <MenuItem
+                                    isAnonymousAction
+                                    title={translate('common.download')}
+                                    icon={Expensicons.Download}
+                                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                                    onPress={() => qrCodeRef.current?.download?.()}
+                                    wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                                />
+                            )}
 
-                    <MenuItem
-                        title={translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
-                        icon={Expensicons.Cash}
-                        onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
-                    />
+                            <MenuItem
+                                title={translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
+                                icon={Expensicons.Cash}
+                                onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
+                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                                shouldShowRightIcon
+                            />
+                        </View>
+                    </Section>
                 </View>
             </ScrollView>
         </ScreenWrapper>

src/styles/index.ts

@@ -2608,6 +2608,10 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        qrShareSection: {
+            width: 264,
+        },
+
         sectionMenuItemTopDescription: {
             ...spacing.ph8,
             ...spacing.mhn8,