Merge pull request Expensify#62355 from nkdengineer/fix/62070

lakchote · web-flow · commit 0a8ae6b3f6f8 · 2025-05-30T17:30:21.000+02:00
feat: Add QR code to app download links screen
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -24,6 +24,7 @@ const CLOUDFRONT_DOMAIN = 'cloudfront.net';
 const CLOUDFRONT_URL = `https://d2k5nsl2zxldvw.${CLOUDFRONT_DOMAIN}`;
 const ACTIVE_EXPENSIFY_URL = addTrailingForwardSlash(Config?.NEW_EXPENSIFY_URL ?? 'https://new.expensify.com');
 const USE_EXPENSIFY_URL = 'https://use.expensify.com';
+const EXPENSIFY_MOBILE_URL = 'https://expensify.com/mobile';
 const EXPENSIFY_URL = 'https://www.expensify.com';
 const PLATFORM_OS_MACOS = 'Mac OS';
 const PLATFORM_IOS = 'iOS';
@@ -1061,6 +1062,7 @@ const CONST = {
     DEFAULT_NUMBER_ID,
     USE_EXPENSIFY_URL,
     EXPENSIFY_URL,
+    EXPENSIFY_MOBILE_URL,
     GOOGLE_MEET_URL_ANDROID: 'https://meet.google.com',
     GOOGLE_DOC_IMAGE_LINK_MATCH: 'googleusercontent.com',
     IMAGE_BASE64_MATCH: 'base64',
@@ -3217,6 +3219,10 @@ const CONST = {
         LARGE: 'large',
     },
 
+    QR_CODE_SIZE: {
+        APP_DOWNLOAD_LINKS: 172,
+    },
+
     AVATAR_SIZE: {
         X_LARGE: 'xlarge',
         LARGE: 'large',
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
@@ -80,11 +80,11 @@ function QRCode({
             logo={logo}
             logoSVG={svgLogo}
             logoColor={svgLogoFillColor}
-            logoBackgroundColor={logoBackgroundColor ?? theme.highlightBG}
+            logoBackgroundColor={logoBackgroundColor ?? theme.appBG}
             logoSize={size * logoRatio}
             logoMargin={size * logoMarginRatio}
             logoBorderRadius={size}
-            backgroundColor={backgroundColor ?? theme.highlightBG}
+            backgroundColor={backgroundColor ?? theme.appBG}
             color={color ?? theme.text}
         />
     );
diff --git a/src/components/QRShare/QRShareWithDownload/index.native.tsx b/src/components/QRShare/QRShareWithDownload/index.native.tsx
@@ -18,7 +18,8 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
     useImperativeHandle(
         ref,
         () => ({
-            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title), translate('fileDownload.success.qrMessage'))),
+            download: () =>
+                qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? 'QRCode'), translate('fileDownload.success.qrMessage'))),
         }),
         [props.title, translate],
     );
diff --git a/src/components/QRShare/QRShareWithDownload/index.tsx b/src/components/QRShare/QRShareWithDownload/index.tsx
@@ -23,7 +23,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
                         return;
                     }
 
-                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title))));
+                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title ?? 'QRCode'))));
                 }),
         }),
         [props.title],
diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
@@ -14,7 +14,10 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
-function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBackgroundColor, logoRatio, logoMarginRatio}: QRShareProps, ref: ForwardedRef<QRShareHandle>) {
+function QRShare(
+    {url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBackgroundColor, logoRatio, logoMarginRatio, shouldShowExpensifyLogo = true, additionalStyles, size}: QRShareProps,
+    ref: ForwardedRef<QRShareHandle>,
+) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -39,16 +42,18 @@ function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBac
 
     return (
         <View
-            style={styles.shareCodeContainer}
+            style={[styles.shareCodeContainer, additionalStyles]}
             onLayout={onLayout}
         >
-            <View style={styles.expensifyQrLogo}>
-                <ImageSVG
-                    contentFit="contain"
-                    src={ExpensifyWordmark}
-                    fill={theme.QRLogo}
-                />
-            </View>
+            {shouldShowExpensifyLogo && (
+                <View style={styles.expensifyQrLogo}>
+                    <ImageSVG
+                        contentFit="contain"
+                        src={ExpensifyWordmark}
+                        fill={theme.QRLogo}
+                    />
+                </View>
+            )}
 
             <QRCode
                 getRef={(svg) => (svgRef.current = svg)}
@@ -57,19 +62,21 @@ function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBac
                 svgLogoFillColor={svgLogoFillColor}
                 logoBackgroundColor={logoBackgroundColor}
                 logo={logo}
-                size={qrCodeSize}
+                size={size ?? qrCodeSize}
                 logoRatio={logoRatio}
                 logoMarginRatio={logoMarginRatio}
             />
 
-            <Text
-                family="EXP_NEW_KANSAS_MEDIUM"
-                fontSize={variables.fontSizeXLarge}
-                numberOfLines={2}
-                style={styles.qrShareTitle}
-            >
-                {title}
-            </Text>
+            {!!title && (
+                <Text
+                    family="EXP_NEW_KANSAS_MEDIUM"
+                    fontSize={variables.fontSizeXLarge}
+                    numberOfLines={2}
+                    style={styles.qrShareTitle}
+                >
+                    {title}
+                </Text>
+            )}
 
             {!!subtitle && (
                 <Text
diff --git a/src/components/QRShare/types.ts b/src/components/QRShare/types.ts
@@ -1,7 +1,9 @@
 import type React from 'react';
-import type {ImageSourcePropType} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import type {Svg, SvgProps} from 'react-native-svg';
+import type {ValueOf} from 'type-fest';
 import type {QRCodeLogoMarginRatio, QRCodeLogoRatio} from '@components/QRCode';
+import type CONST from '@src/CONST';
 
 type QRShareProps = {
     /**
@@ -12,7 +14,7 @@ type QRShareProps = {
     /**
      * The title that is displayed below the QR Code (usually the user or report name)
      */
-    title: string;
+    title?: string;
 
     /**
      * The subtitle which will be shown below the title (usually user email or workspace name)
@@ -49,6 +51,21 @@ type QRShareProps = {
      * The size ratio of margin around logo to QR code
      */
     logoMarginRatio?: QRCodeLogoMarginRatio;
+
+    /**
+     * If true, the Expensify logo will be displayed
+     */
+    shouldShowExpensifyLogo?: boolean;
+
+    /**
+     * Additional styles to be applied to the QR code
+     */
+    additionalStyles?: StyleProp<ViewStyle>;
+
+    /**
+     * The size of the QR code
+     */
+    size?: ValueOf<typeof CONST.QR_CODE_SIZE>;
 };
 
 type QRShareHandle = {
diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx
@@ -1,9 +1,11 @@
 import React, {useRef} from 'react';
 import type {View} from 'react-native';
+import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import type {MenuItemProps} from '@components/MenuItem';
+import QRShare from '@components/QRShare';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
@@ -61,6 +63,17 @@ function AppDownloadLinksPage() {
                 title={translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
+
+            <QRShare
+                url={CONST.EXPENSIFY_MOBILE_URL}
+                logo={expensifyLogo}
+                logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
+                logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
+                shouldShowExpensifyLogo={false}
+                additionalStyles={[styles.qrCodeAppDownloadLinksStyles, styles.shareCodeContainerDownloadPadding]}
+                size={CONST.QR_CODE_SIZE.APP_DOWNLOAD_LINKS}
+            />
+
             <ScrollView style={[styles.mt3]}>
                 {menuItems.map((item: DownloadMenuItem) => (
                     <MenuItem
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4482,7 +4482,17 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
             borderColor: theme.borderFocus,
             borderWidth: 2,
-            backgroundColor: theme.highlightBG,
+        },
+
+        shareCodeContainerDownloadPadding: {
+            paddingHorizontal: 12,
+            paddingVertical: 12,
+        },
+
+        qrCodeAppDownloadLinksStyles: {
+            width: 200,
+            height: 200,
+            margin: 'auto',
         },
 
         splashScreenHider: {

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD`
`23`	`23`	`return;`
`24`	`24`	`}`
`25`	`25`
`26`		`- svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title))));`
	`26`	`+ svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title ?? 'QRCode'))));`
`27`	`27`	`}),`
`28`	`28`	`}),`
`29`	`29`	`[props.title],`