From ad1bb7d4aee57c646e91f7926abb0c1c2b387dc2 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Thu, 8 Feb 2024 11:55:01 +0100 Subject: [PATCH 1/6] Share Code page adjustments --- src/components/ContextMenuItem.tsx | 21 ++++++-- src/languages/en.ts | 4 ++ src/languages/es.ts | 4 ++ src/pages/ShareCodePage.tsx | 86 ++++++++++++++++++------------ src/styles/index.ts | 4 ++ 5 files changed, 81 insertions(+), 38 deletions(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index d292f80d135e..50ff33b16ff6 100644 --- a/src/components/ContextMenuItem.tsx +++ b/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,6 +41,9 @@ type ContextMenuItemProps = { /** Whether the width should be limited */ shouldLimitWidth?: boolean; + + /** Styles to apply to ManuItem wrapper */ + wrapperStyle?: StyleProp; }; type ContextMenuItemHandle = { @@ -48,7 +51,19 @@ type ContextMenuItemHandle = { }; 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, ) { 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} diff --git a/src/languages/en.ts b/src/languages/en.ts index 0781bb6b19f3..5e5dca48ccc7 100755 --- a/src/languages/en.ts +++ b/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.', diff --git a/src/languages/es.ts b/src/languages/es.ts index f31bc4c367fc..8fcdf46f57f8 100644 --- a/src/languages/es.ts +++ b/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.', diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 9ed8bf3d76a1..6a40f3fd9e30 100644 --- a/src/pages/ShareCodePage.tsx +++ b/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} /> - - - + +
+ + + - - Clipboard.setString(url)} - shouldLimitWidth={false} - /> + + Clipboard.setString(url)} + shouldLimitWidth={false} + wrapperStyle={themeStyles.sectionMenuItemTopDescription} + /> - {isNative && ( - qrCodeRef.current?.download?.()} - /> - )} + {isNative && ( + qrCodeRef.current?.download?.()} + wrapperStyle={themeStyles.sectionMenuItemTopDescription} + /> + )} - Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))} - /> + Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))} + wrapperStyle={themeStyles.sectionMenuItemTopDescription} + shouldShowRightIcon + /> + +
diff --git a/src/styles/index.ts b/src/styles/index.ts index d1c7b5a5d8d7..1bea3d298cd4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2608,6 +2608,10 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + qrShareSection: { + width: 264, + }, + sectionMenuItemTopDescription: { ...spacing.ph8, ...spacing.mhn8, From 9c17c444fba31f53f5f9bf7b8538a529c6c9f745 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Thu, 8 Feb 2024 12:18:13 +0100 Subject: [PATCH 2/6] Fix transaltions --- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 5e5dca48ccc7..847576d0d134 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1988,7 +1988,7 @@ export default { parentNavigationSummary: ({rootReportName, workspaceName}: ParentNavigationSummaryParams) => `From ${rootReportName}${workspaceName ? ` in ${workspaceName}` : ''}`, }, qrCodes: { - copy: 'Copy', + copy: 'Copy URL', copied: 'Copied!', }, moderation: { diff --git a/src/languages/es.ts b/src/languages/es.ts index 8fcdf46f57f8..665fdf570f6e 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2474,7 +2474,7 @@ export default { parentNavigationSummary: ({rootReportName, workspaceName}: ParentNavigationSummaryParams) => `De ${rootReportName}${workspaceName ? ` en ${workspaceName}` : ''}`, }, qrCodes: { - copy: 'Copiar', + copy: 'Copiar URL', copied: '¡Copiado!', }, actionableMentionWhisperOptions: { From e753e3da7b928970a954a137d4fb4983708f10f9 Mon Sep 17 00:00:00 2001 From: filip-solecki <153545991+filip-solecki@users.noreply.github.com> Date: Thu, 8 Feb 2024 13:19:03 +0100 Subject: [PATCH 3/6] Update src/components/ContextMenuItem.tsx Co-authored-by: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> --- src/components/ContextMenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index 50ff33b16ff6..d6c8fd973983 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -108,7 +108,7 @@ function ContextMenuItem( title={itemText} icon={itemIcon} onPress={triggerPressAndUpdateSuccess} - wrapperStyle={[wrapperStyle, styles.pr9]} + wrapperStyle={[styles.pr9, wrapperStyle]} success={!isThrottledButtonActive} description={description} descriptionTextStyle={styles.breakWord} From f2fb11dd28b460957c059069aa3147d3a25276a7 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 9 Feb 2024 10:11:09 +0100 Subject: [PATCH 4/6] Full width QRCode --- src/pages/ShareCodePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 6a40f3fd9e30..95c581d04b92 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -93,7 +93,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP childrenStyles={themeStyles.pt5} titleStyles={themeStyles.accountSettingsSectionTitle} > - + Date: Fri, 9 Feb 2024 10:34:12 +0100 Subject: [PATCH 5/6] Remove top margin --- src/pages/ShareCodePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 95c581d04b92..085d61430623 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -83,7 +83,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP shouldShowBackButton={isReport || isSmallScreenWidth} icon={Illustrations.QrCode} /> - +
Date: Fri, 9 Feb 2024 18:25:43 +0100 Subject: [PATCH 6/6] Add top padding for profile i shareCode --- src/pages/ShareCodePage.tsx | 2 +- src/pages/settings/Profile/ProfilePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 085d61430623..b3a4f37b9820 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -83,7 +83,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP shouldShowBackButton={isReport || isSmallScreenWidth} icon={Illustrations.QrCode} /> - +
- +