Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Share Code page update #36120

Merged
merged 6 commits into from
Feb 9, 2024
Merged

Share Code page update #36120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ad1bb7d
Share Code page adjustments
filip-solecki Feb 8, 2024
9c17c44
Fix transaltions
filip-solecki Feb 8, 2024
e753e3d
Update src/components/ContextMenuItem.tsx
filip-solecki Feb 8, 2024
f2fb11d
Full width QRCode
filip-solecki Feb 9, 2024
29c9d4e
Remove top margin
filip-solecki Feb 9, 2024
f565b02
Add top padding for profile i shareCode
filip-solecki Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions src/components/ContextMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -93,7 +108,7 @@ function ContextMenuItem(
title={itemText}
icon={itemIcon}
onPress={triggerPressAndUpdateSuccess}
wrapperStyle={styles.pr9}
wrapperStyle={[styles.pr9, wrapperStyle]}
success={!isThrottledButtonActive}
description={description}
descriptionTextStyle={styles.breakWord}
Expand Down
6 changes: 5 additions & 1 deletion src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down Expand Up @@ -1984,7 +1988,7 @@ export default {
parentNavigationSummary: ({rootReportName, workspaceName}: ParentNavigationSummaryParams) => `From ${rootReportName}${workspaceName ? ` in ${workspaceName}` : ''}`,
},
qrCodes: {
copy: 'Copy',
copy: 'Copy URL',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this discussed?
Seems like "Copy" was approved by marketing team here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taken from Figma cc @shawnborton @dubielzyk-expensify

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also ccing @jamesdeanexpensify

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, I guess we should go with Copy. Though I feel like "Copy URL" is more appropriate, because that's what actually happens. You don't copy the image, you copy the url (I think). cc @trjExpensify @dannymcclain for thoughts too

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fair. If it just says "Copy" I'd personally expect it to copy the full image somehow, but that's what "Download" does already, so I can see us being a bit more specific there.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, let's do Copy URL then. Thanks James!

copied: 'Copied!',
},
moderation: {
Expand Down
6 changes: 5 additions & 1 deletion src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down Expand Up @@ -2470,7 +2474,7 @@ export default {
parentNavigationSummary: ({rootReportName, workspaceName}: ParentNavigationSummaryParams) => `De ${rootReportName}${workspaceName ? ` en ${workspaceName}` : ''}`,
},
qrCodes: {
copy: 'Copiar',
copy: 'Copiar URL',
copied: '¡Copiado!',
},
actionableMentionWhisperOptions: {
Expand Down
88 changes: 52 additions & 36 deletions src/pages/ShareCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -82,45 +83,60 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP
shouldShowBackButton={isReport || isSmallScreenWidth}
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>
<ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
<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={[isSmallScreenWidth ? themeStyles.workspaceSectionMobile : 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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/settings/Profile/ProfilePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ function ProfilePage(props) {
shouldShowBackButton={props.isSmallScreenWidth}
icon={Illustrations.Profile}
/>
<ScrollView>
<ScrollView style={styles.pt3}>
<View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
title={props.translate('profilePage.publicSection.title')}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2608,6 +2608,10 @@ const styles = (theme: ThemeColors) =>
alignItems: 'center',
},

qrShareSection: {
width: 264,
},

sectionMenuItemTopDescription: {
...spacing.ph8,
...spacing.mhn8,
Expand Down
Loading