Allow users to permanently dismiss the referral banners

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -41,6 +41,9 @@ const propTypes = {
     /** Whether referral CTA should be displayed */
     shouldShowReferralCTA: PropTypes.bool,
 
+    /** A method triggered when the user closes the call to action banner */
+    onCallToActionClosed: PropTypes.func,
+
     /** Referral content type */
     referralContentType: PropTypes.string,
 
@@ -53,6 +56,7 @@ const propTypes = {
 const defaultProps = {
     shouldDelayFocus: false,
     shouldShowReferralCTA: false,
+    onCallToActionClosed: () => {},
     referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND,
     safeAreaPaddingBottomStyle: {},
     contentContainerStyles: [],
@@ -68,7 +72,7 @@ class BaseOptionsSelector extends Component {
         this.updateFocusedIndex = this.updateFocusedIndex.bind(this);
         this.scrollToIndex = this.scrollToIndex.bind(this);
         this.selectRow = this.selectRow.bind(this);
-        this.handleReferralModal = this.handleReferralModal.bind(this);
+        this.closeReferralModal = this.closeReferralModal.bind(this);
         this.selectFocusedOption = this.selectFocusedOption.bind(this);
         this.addToSelection = this.addToSelection.bind(this);
         this.updateSearchValue = this.updateSearchValue.bind(this);
@@ -262,8 +266,9 @@ class BaseOptionsSelector extends Component {
         this.props.onChangeText(value);
     }
 
-    handleReferralModal() {
+    closeReferralModal() {
         this.setState((prevState) => ({shouldShowReferralModal: !prevState.shouldShowReferralModal}));
+        this.props.onCallToActionClosed(this.props.referralContentType);
     }
 
     handleFocusIn() {
@@ -652,7 +657,7 @@ class BaseOptionsSelector extends Component {
                     <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
                         <ReferralProgramCTA
                             referralContentType={this.props.referralContentType}
-                            onCloseButtonPress={this.handleReferralModal}
+                            onCloseButtonPress={this.closeReferralModal}
                         />
                     </View>
                 )}

src/libs/API/parameters/DismissReferralBannerParams.ts

@@ -0,0 +1,10 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type ContentTypes = ValueOf<typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES>;
+
+type DismissReferralBannerParams = {
+    type: ContentTypes;
+};
+
+export default DismissReferralBannerParams;

src/libs/API/parameters/index.ts

@@ -14,6 +14,7 @@ export type {default as ConnectBankAccountWithPlaidParams} from './ConnectBankAc
 export type {default as DeleteContactMethodParams} from './DeleteContactMethodParams';
 export type {default as DeletePaymentBankAccountParams} from './DeletePaymentBankAccountParams';
 export type {default as DeletePaymentCardParams} from './DeletePaymentCardParams';
+export type {default as DismissReferralBannerParams} from './DismissReferralBannerParams';
 export type {default as ExpandURLPreviewParams} from './ExpandURLPreviewParams';
 export type {default as GetMissingOnyxMessagesParams} from './GetMissingOnyxMessagesParams';
 export type {default as GetNewerActionsParams} from './GetNewerActionsParams';

src/libs/API/types.ts

@@ -8,6 +8,7 @@ import type UpdateBeneficialOwnersForBankAccountParams from './parameters/Update
 type ApiRequest = ValueOf<typeof CONST.API_REQUEST_TYPE>;
 
 const WRITE_COMMANDS = {
+    DISMISS_REFERRAL_BANNER: 'DismissReferralBanner',
     UPDATE_PREFERRED_LOCALE: 'UpdatePreferredLocale',
     RECONNECT_APP: 'ReconnectApp',
     OPEN_PROFILE: 'OpenProfile',
@@ -120,6 +121,7 @@ const WRITE_COMMANDS = {
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
 
 type WriteCommandParameters = {
+    [WRITE_COMMANDS.DISMISS_REFERRAL_BANNER]: Parameters.DismissReferralBannerParams;
     [WRITE_COMMANDS.UPDATE_PREFERRED_LOCALE]: Parameters.UpdatePreferredLocaleParams;
     [WRITE_COMMANDS.RECONNECT_APP]: Parameters.ReconnectAppParams;
     [WRITE_COMMANDS.OPEN_PROFILE]: Parameters.OpenProfileParams;

src/libs/actions/User.ts

@@ -843,9 +843,31 @@ function clearDraftCustomStatus() {
     Onyx.merge(ONYXKEYS.CUSTOM_STATUS_DRAFT, {text: '', emojiCode: '', clearAfter: ''});
 }
 
+function dismissReferralBanner(type: ValueOf<typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES>) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                dismissedReferralBanners: {
+                    [type]: true,
+                },
+            },
+        },
+    ];
+    API.write(
+        WRITE_COMMANDS.DISMISS_REFERRAL_BANNER,
+        {type},
+        {
+            optimisticData,
+        },
+    );
+}
+
 export {
     clearFocusModeNotification,
     closeAccount,
+    dismissReferralBanner,
     resendValidateCode,
     requestContactMethodValidateCode,
     updateNewsletterSubscription,

src/pages/NewChatPage.js

@@ -21,6 +21,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
+import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import personalDetailsPropType from './personalDetailsPropType';
@@ -36,6 +37,9 @@ const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
+    /** An object that holds data about which referral banners have been dismissed */
+    dismissedReferralBanners: PropTypes.objectOf(PropTypes.bool),
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -46,14 +50,15 @@ const propTypes = {
 
 const defaultProps = {
     betas: [],
+    dismissedReferralBanners: {},
     personalDetails: {},
     reports: {},
     isSearchingForReports: false,
 };
 
 const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
 
-function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, isSearchingForReports}) {
+function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, isSearchingForReports, dismissedReferralBanners}) {
     const styles = useThemeStyles();
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
@@ -230,6 +235,10 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
         updateOptions();
     }, [didScreenTransitionEnd, updateOptions]);
 
+    const dismissCallToAction = (referralContentType) => {
+        User.dismissReferralBanner(referralContentType);
+    };
+
     const {inputCallbackRef} = useAutoFocusInput();
 
     return (
@@ -265,8 +274,9 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
                             shouldShowOptions={isOptionsDataReady && didScreenTransitionEnd}
                             shouldShowConfirmButton
-                            shouldShowReferralCTA
+                            shouldShowReferralCTA={!dismissedReferralBanners[CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]}
                             referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT}
+                            onCallToActionClosed={dismissCallToAction}
                             confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
                             textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                             onConfirmSelection={createGroup}
@@ -291,6 +301,10 @@ export default compose(
     withLocalize,
     withWindowDimensions,
     withOnyx({
+        dismissedReferralBanners: {
+            key: ONYXKEYS.ACCOUNT,
+            selector: (data) => data.dismissedReferralBanners || {},
+        },
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },

src/pages/SearchPage/SearchPageFooter.tsx

@@ -1,20 +1,32 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as User from '@userActions/User';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {DismissedReferralBanners} from '@src/types/onyx/Account';
 
-function SearchPageFooter() {
-    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true);
+type SearchPageFooterOnyxProps = {
+    dismissedReferralBanners: DismissedReferralBanners;
+};
+function SearchPageFooter({dismissedReferralBanners}: SearchPageFooterOnyxProps) {
+    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(!dismissedReferralBanners[CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]);
     const themeStyles = useThemeStyles();
 
+    const closeCallToActionBanner = () => {
+        setShouldShowReferralCTA(false);
+        User.dismissReferralBanner(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND);
+    };
+
     return (
         <>
             {shouldShowReferralCTA && (
                 <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
                     <ReferralProgramCTA
                         referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
-                        onCloseButtonPress={() => setShouldShowReferralCTA(false)}
+                        onCloseButtonPress={closeCallToActionBanner}
                     />
                 </View>
             )}
@@ -24,4 +36,9 @@ function SearchPageFooter() {
 
 SearchPageFooter.displayName = 'SearchPageFooter';
 
-export default SearchPageFooter;
+export default withOnyx<SearchPageFooterOnyxProps, SearchPageFooterOnyxProps>({
+    dismissedReferralBanners: {
+        key: ONYXKEYS.ACCOUNT,
+        selector: (data) => data?.dismissedReferralBanners ?? {},
+    },
+})(SearchPageFooter);

src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

@@ -19,13 +19,17 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
+import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
+    /** An object that holds data about which referral banners have been dismissed */
+    dismissedReferralBanners: PropTypes.objectOf(PropTypes.bool),
+
     /** Callback to request parent modal to go to next step, which should be split */
     onFinish: PropTypes.func.isRequired,
 
@@ -64,6 +68,7 @@ const defaultProps = {
     safeAreaPaddingBottomStyle: {},
     reports: {},
     betas: [],
+    dismissedReferralBanners: {},
     didScreenTransitionEnd: false,
 };
 
@@ -76,12 +81,14 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     safeAreaPaddingBottomStyle,
     iouType,
     iouRequestType,
+    dismissedReferralBanners,
     didScreenTransitionEnd,
 }) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [searchTerm, setSearchTerm] = useState('');
-    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true);
+    const referralContentType = iouType === CONST.IOU.TYPE.SEND ? CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY : CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST;
+    const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(!dismissedReferralBanners[referralContentType]);
     const {isOffline} = useNetwork();
     const personalDetails = usePersonalDetails();
 
@@ -251,7 +258,6 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const hasPolicyExpenseChatParticipant = _.some(participants, (participant) => participant.isPolicyExpenseChat);
     const shouldShowSplitBillErrorMessage = participants.length > 1 && hasPolicyExpenseChatParticipant;
     const isAllowedToSplit = iouRequestType !== CONST.IOU.REQUEST_TYPE.DISTANCE;
-    const referralContentType = iouType === CONST.IOU.TYPE.SEND ? CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY : CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST;
 
     const handleConfirmSelection = useCallback(() => {
         if (shouldShowSplitBillErrorMessage) {
@@ -261,14 +267,19 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
         onFinish();
     }, [shouldShowSplitBillErrorMessage, onFinish]);
 
+    const closeCallToActionBanner = useCallback(() => {
+        setShouldShowReferralCTA(false);
+        User.dismissReferralBanner(referralContentType);
+    }, [referralContentType]);
+
     const footerContent = useMemo(
         () => (
             <View>
                 {shouldShowReferralCTA && (
                     <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
                         <ReferralProgramCTA
                             referralContentType={referralContentType}
-                            onCloseButtonPress={() => setShouldShowReferralCTA(false)}
+                            onCloseButtonPress={closeCallToActionBanner}
                         />
                     </View>
                 )}
@@ -292,7 +303,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                 )}
             </View>
         ),
-        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, shouldShowReferralCTA, styles, translate],
+        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, shouldShowReferralCTA, styles, translate, closeCallToActionBanner],
     );
 
     const itemRightSideComponent = useCallback(
@@ -356,6 +367,10 @@ MoneyTemporaryForRefactorRequestParticipantsSelector.defaultProps = defaultProps
 MoneyTemporaryForRefactorRequestParticipantsSelector.displayName = 'MoneyTemporaryForRefactorRequestParticipantsSelector';
 
 export default withOnyx({
+    dismissedReferralBanners: {
+        key: ONYXKEYS.ACCOUNT,
+        selector: (data) => data.dismissedReferralBanners || {},
+    },
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },