[Held requests] Hold Request education modal reappears after relogin

src/ONYXKEYS.ts

@@ -147,8 +147,8 @@ const ONYXKEYS = {
     /** Whether the user has tried focus mode yet */
     NVP_TRY_FOCUS_MODE: 'nvp_tryFocusMode',
 
-    /** Whether the user has been shown the hold educational interstitial yet */
-    NVP_HOLD_USE_EXPLAINED: 'holdUseExplained',
+    /** Whether the user has dismissed the hold educational interstitial */
+    DISMISSED_HOLD_USE_EXPLANATION: 'dismissedholdUseExplanation',
 
     /** Store preferred skintone for emoji */
     PREFERRED_EMOJI_SKIN_TONE: 'nvp_expensify_preferredEmojiSkinTone',
@@ -595,7 +595,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE]: OnyxTypes.BlockedFromConcierge;
     [ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID]: string;
     [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
-    [ONYXKEYS.NVP_HOLD_USE_EXPLAINED]: boolean;
+    [ONYXKEYS.DISMISSED_HOLD_USE_EXPLANATION]: boolean;
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];

src/components/MoneyRequestHeader.tsx

@@ -38,7 +38,7 @@ type MoneyRequestHeaderOnyxProps = {
     parentReportActions: OnyxEntry<ReportActions>;
 
     /** Whether we should show the Hold Interstitial explaining the feature */
-    shownHoldUseExplanation: OnyxEntry<boolean>;
+    dismissedholdUseExplanation: OnyxEntry<boolean>;
 };
 
 type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
@@ -52,7 +52,7 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
     parentReportAction: OnyxEntry<ReportAction>;
 };
 
-function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) {
+function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, dismissedholdUseExplanation = false, policy}: MoneyRequestHeaderProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -132,8 +132,8 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     }
 
     useEffect(() => {
-        setShouldShowHoldMenu(isOnHold && !shownHoldUseExplanation);
-    }, [isOnHold, shownHoldUseExplanation]);
+        setShouldShowHoldMenu(isOnHold && !dismissedholdUseExplanation);
+    }, [isOnHold, dismissedholdUseExplanation]);
 
     useEffect(() => {
         if (!shouldShowHoldMenu) {
@@ -150,7 +150,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     }, [isSmallScreenWidth, shouldShowHoldMenu]);
 
     const handleHoldRequestClose = () => {
-        IOU.setShownHoldUseExplanation();
+        IOU.dismissHoldUseExplanation();
     };
 
     if (canDeleteRequest) {
@@ -218,20 +218,20 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
 
 MoneyRequestHeader.displayName = 'MoneyRequestHeader';
 
-const MoneyRequestHeaderWithTransaction = withOnyx<MoneyRequestHeaderProps, Pick<MoneyRequestHeaderOnyxProps, 'transaction' | 'shownHoldUseExplanation'>>({
+const MoneyRequestHeaderWithTransaction = withOnyx<MoneyRequestHeaderProps, Pick<MoneyRequestHeaderOnyxProps, 'transaction' | 'dismissedholdUseExplanation'>>({
     transaction: {
         key: ({report, parentReportActions}) => {
             const parentReportAction = (report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : {}) as ReportAction & OriginalMessageIOU;
             return `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID ?? 0}`;
         },
     },
-    shownHoldUseExplanation: {
-        key: ONYXKEYS.NVP_HOLD_USE_EXPLAINED,
+    dismissedholdUseExplanation: {
+        key: ONYXKEYS.DISMISSED_HOLD_USE_EXPLANATION,
         initWithStoredValues: true,
     },
 })(MoneyRequestHeader);
 
-export default withOnyx<Omit<MoneyRequestHeaderProps, 'transaction' | 'shownHoldUseExplanation'>, Omit<MoneyRequestHeaderOnyxProps, 'transaction' | 'shownHoldUseExplanation'>>({
+export default withOnyx<Omit<MoneyRequestHeaderProps, 'transaction' | 'dismissedholdUseExplanation'>, Omit<MoneyRequestHeaderOnyxProps, 'transaction' | 'dismissedholdUseExplanation'>>({
     session: {
         key: ONYXKEYS.SESSION,
     },

src/libs/actions/IOU.ts

@@ -18,6 +18,7 @@ import type {
     ReplaceReceiptParams,
     RequestMoneyParams,
     SendMoneyParams,
+    SetNameValuePairParams,
     SplitBillParams,
     StartSplitBillParams,
     SubmitReportParams,
@@ -5839,8 +5840,23 @@ function setMoneyRequestParticipants(participants: Participant[], isSplitRequest
     Onyx.merge(ONYXKEYS.IOU, {participants, isSplitRequest});
 }
 
-function setShownHoldUseExplanation() {
-    Onyx.set(ONYXKEYS.NVP_HOLD_USE_EXPLAINED, true);
+function dismissHoldUseExplanation() {
+    const parameters: SetNameValuePairParams = {
+        name: ONYXKEYS.DISMISSED_HOLD_USE_EXPLANATION,
+        value: true,
+    };
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.DISMISSED_HOLD_USE_EXPLANATION,
+            value: true,
+        },
+    ];
+
+    API.write(WRITE_COMMANDS.SET_NAME_VALUE_PAIR, parameters, {
+        optimisticData,
+    });
 }
 
 /**
@@ -6036,7 +6052,7 @@ export {
     setMoneyRequestTag,
     setMoneyRequestTaxAmount,
     setMoneyRequestTaxRate,
-    setShownHoldUseExplanation,
+    dismissHoldUseExplanation,
     updateMoneyRequestDate,
     updateMoneyRequestBillable,
     updateMoneyRequestMerchant,

src/pages/ProcessMoneyRequestHoldPage.tsx

@@ -15,7 +15,7 @@ function ProcessMoneyRequestHoldPage() {
     const {translate} = useLocalize();
 
     const onConfirm = useCallback(() => {
-        IOU.setShownHoldUseExplanation();
+        IOU.dismissHoldUseExplanation();
         Navigation.goBack();
     }, []);