Merge pull request #7771 from Expensify/ckt_cpa_addNewImage

Add the Expensify CPA Card to the NewDot homepage and redirect to use dot
Expensify · Feb 17, 2022 · 18ff4f8 · 18ff4f8
2 parents 671a2e9 + 90bc0cd
commit 18ff4f8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/src/CONST/index.js b/src/CONST/index.js
@@ -4,6 +4,7 @@ import ENVIRONMENT from './ENVIRONMENT';
 import * as Url from '../libs/Url';
 
 const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net';
+const USE_EXPENSIFY_URL = 'https://use.expensify.com';
 const ACTIVE_ENVIRONMENT_NEW_EXPENSIFY_URL = Url.addTrailingForwardSlash(lodashGet(Config, 'EXPENSIFY_URL_CASH', 'https://new.expensify.com'));
 const PLATFORM_OS_MACOS = 'Mac OS';
 const ANDROID_PACKAGE_NAME = 'com.expensify.chat';
@@ -185,20 +186,21 @@ const CONST = {
     },
     CONCIERGE_CHAT_NAME: 'Concierge',
     CLOUDFRONT_URL,
+    USE_EXPENSIFY_URL,
     NEW_ZOOM_MEETING_URL: 'https://zoom.us/start/videomeeting',
     NEW_GOOGLE_MEET_MEETING_URL: 'https://meet.google.com/new',
     DEEPLINK_BASE_URL: 'new-expensify://',
     PDF_VIEWER_URL: '/pdf/web/viewer.html',
     EXPENSIFY_ICON_URL: `${CLOUDFRONT_URL}/images/favicon-2019.png`,
     UPWORK_URL: 'https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22',
     GITHUB_URL: 'https://github.com/Expensify/App',
-    TERMS_URL: 'https://use.expensify.com/terms',
-    PRIVACY_URL: 'https://use.expensify.com/privacy',
-    LICENSES_URL: 'https://use.expensify.com/licenses',
+    TERMS_URL: `${USE_EXPENSIFY_URL}/terms`,
+    PRIVACY_URL: `${USE_EXPENSIFY_URL}/privacy`,
+    LICENSES_URL: `${USE_EXPENSIFY_URL}/licenses`,
     PLAY_STORE_URL: `https://play.google.com/store/apps/details?id=${ANDROID_PACKAGE_NAME}&hl=en`,
     ADD_SECONDARY_LOGIN_URL: encodeURI('settings?param={"section":"account","openModal":"secondaryLogin"}'),
     MANAGE_CARDS_URL: 'domain_companycards',
-    FEES_URL: 'https://use.expensify.com/fees',
+    FEES_URL: `${USE_EXPENSIFY_URL}/fees`,
     CFPB_PREPAID_URL: 'https://cfpb.gov/prepaid',
     STAGING_SECURE_URL: 'https://staging-secure.expensify.com/',
     NEWDOT: 'new.expensify.com',

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -1,11 +1,13 @@
+import _ from 'underscore';
 import React from 'react';
-import {View} from 'react-native';
+import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import SignInPageContent from './SignInPageContent';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import SVGImage from '../../../components/SVGImage';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import * as Link from '../../../libs/actions/Link';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -37,23 +39,30 @@ const SignInPageLayout = (props) => {
         return content;
     }
 
+    const hasRedirect = !_.isEmpty(backgroundStyle.redirectUri);
+
     return (
         <View style={[styles.flex1, styles.signInPageInner]}>
             <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
                 {content}
-                <View style={[
-                    styles.flexGrow1,
-                    StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-                    props.isMediumScreenWidth && styles.alignItemsCenter,
-                ]}
+                <Pressable
+                    style={[
+                        styles.flexGrow1,
+                        StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+                        props.isMediumScreenWidth && styles.alignItemsCenter,
+                    ]}
+                    onPress={() => {
+                        Link.openExternalLink(backgroundStyle.redirectUri);
+                    }}
+                    disabled={!hasRedirect}
                 >
                     <SVGImage
                         width="100%"
                         height="100%"
                         src={backgroundStyle.backgroundImageUri}
                         resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}
                     />
-                </View>
+                </Pressable>
             </View>
         </View>
     );

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -337,8 +337,13 @@ function getLoginPagePromoStyle() {
             backgroundColor: colors.blue,
             backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`,
         },
+        {
+            backgroundColor: colors.floralwhite,
+            backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/cpa-card.svg`,
+            redirectUri: `${CONST.USE_EXPENSIFY_URL}/accountants`,
+        },
     ];
-    return promos[_.random(0, 3)];
+    return promos[_.random(0, 4)];
 }
 
 /**

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -8,6 +8,7 @@ export default {
     black: '#000000',
     blue: '#0185ff',
     blueHover: '#0063bf',
+    floralwhite: '#fffaf0',
     green: '#03d47c',
     greenHover: '#03c775',
     orange: '#ff7101',