Merge pull request #33925 from gijoe0295/gijoe-32499

Make referral banner dismissible
Expensify · Jan 24, 2024 · bcd5939 · bcd5939
2 parents 90d54c0 + bdc980d
commit bcd5939
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 24 deletions.
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -91,7 +91,7 @@ class BaseOptionsSelector extends Component {
             allOptions,
             focusedIndex,
             shouldDisableRowSelection: false,
-            shouldShowReferralModal: false,
+            shouldShowReferralModal: this.props.shouldShowReferralCTA,
             errorMessage: '',
             paginationPage: 1,
             disableEnterShortCut: false,
@@ -660,9 +660,12 @@ class BaseOptionsSelector extends Component {
                         </>
                     )}
                 </View>
-                {this.props.shouldShowReferralCTA && (
+                {this.props.shouldShowReferralCTA && this.state.shouldShowReferralModal && (
                     <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
-                        <ReferralProgramCTA referralContentType={this.props.referralContentType} />
+                        <ReferralProgramCTA
+                            referralContentType={this.props.referralContentType}
+                            onCloseButtonPress={this.handleReferralModal}
+                        />
                     </View>
                 )}
 

diff --git a/src/components/ReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx
@@ -6,7 +6,7 @@ import CONST from '@src/CONST';
 import Navigation from '@src/libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 import Icon from './Icon';
-import {Info} from './Icon/Expensicons';
+import {Close} from './Icon/Expensicons';
 import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 
@@ -16,9 +16,12 @@ type ReferralProgramCTAProps = {
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
+
+    /** Method to trigger when pressing close button of the banner */
+    onCloseButtonPress?: () => void;
 };
 
-function ReferralProgramCTA({referralContentType}: ReferralProgramCTAProps) {
+function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}}: ReferralProgramCTAProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -28,7 +31,7 @@ function ReferralProgramCTA({referralContentType}: ReferralProgramCTAProps) {
             onPress={() => {
                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType));
             }}
-            style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]}
+            style={[styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5]}
             accessibilityLabel="referral"
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
         >
@@ -41,12 +44,22 @@ function ReferralProgramCTA({referralContentType}: ReferralProgramCTAProps) {
                     {translate(`referralProgram.${referralContentType}.buttonText2`)}
                 </Text>
             </Text>
-            <Icon
-                src={Info}
-                height={20}
-                width={20}
-                fill={theme.icon}
-            />
+            <PressableWithoutFeedback
+                onPress={onCloseButtonPress}
+                onMouseDown={(e) => {
+                    e.preventDefault();
+                }}
+                style={[styles.touchableButtonImage]}
+                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                accessibilityLabel={translate('common.close')}
+            >
+                <Icon
+                    src={Close}
+                    height={20}
+                    width={20}
+                    fill={theme.icon}
+                />
+            </PressableWithoutFeedback>
         </PressableWithoutFeedback>
     );
 }

diff --git a/src/pages/SearchPage/SearchPageFooter.tsx b/src/pages/SearchPage/SearchPageFooter.tsx
@@ -1,16 +1,24 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 function SearchPageFooter() {
+    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true);
     const themeStyles = useThemeStyles();
 
     return (
-        <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
-            <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />
-        </View>
+        <>
+            {shouldShowReferralCTA && (
+                <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
+                    <ReferralProgramCTA
+                        referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
+                        onCloseButtonPress={() => setShouldShowReferralCTA(false)}
+                    />
+                </View>
+            )}
+        </>
     );
 }
 

diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -80,6 +80,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [searchTerm, setSearchTerm] = useState('');
+    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true);
     const {isOffline} = useNetwork();
     const personalDetails = usePersonalDetails();
 
@@ -265,9 +266,14 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const footerContent = useMemo(
         () => (
             <View>
-                <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
-                    <ReferralProgramCTA referralContentType={referralContentType} />
-                </View>
+                {shouldShowReferralCTA && (
+                    <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
+                        <ReferralProgramCTA
+                            referralContentType={referralContentType}
+                            onCloseButtonPress={() => setShouldShowReferralCTA(false)}
+                        />
+                    </View>
+                )}
 
                 {shouldShowSplitBillErrorMessage && (
                     <FormHelpMessage
@@ -288,7 +294,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                 )}
             </View>
         ),
-        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
+        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, shouldShowReferralCTA, styles, translate],
     );
 
     const itemRightSideComponent = useCallback(

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -85,6 +85,7 @@ function MoneyRequestParticipantsSelector({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [searchTerm, setSearchTerm] = useState('');
+    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true);
     const {isOffline} = useNetwork();
     const personalDetails = usePersonalDetails();
 
@@ -284,9 +285,14 @@ function MoneyRequestParticipantsSelector({
     const footerContent = useMemo(
         () => (
             <View>
-                <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
-                    <ReferralProgramCTA referralContentType={referralContentType} />
-                </View>
+                {shouldShowReferralCTA && (
+                    <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
+                        <ReferralProgramCTA
+                            referralContentType={referralContentType}
+                            onCloseButtonPress={() => setShouldShowReferralCTA(false)}
+                        />
+                    </View>
+                )}
 
                 {shouldShowSplitBillErrorMessage && (
                     <FormHelpMessage
@@ -307,7 +313,7 @@ function MoneyRequestParticipantsSelector({
                 )}
             </View>
         ),
-        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
+        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, shouldShowReferralCTA, styles, translate],
     );
 
     const itemRightSideComponent = useCallback(