Merge pull request Expensify#32667 from software-mansion-labs/hold-re…

…quest/educational-interstitial

[W7: H Requests] Educational Interstitial

src/ROUTES.ts

@@ -479,6 +479,7 @@ const ROUTES = {
         route: 'referral/:contentType',
         getRoute: (contentType: string) => `referral/${contentType}` as const,
     },
+    PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
 } as const;
 
 export {getUrlWithBackToParam};

src/SCREENS.ts

@@ -108,6 +108,7 @@ const SCREENS = {
         ROOM_MEMBERS: 'RoomMembers',
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
+        PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
@@ -231,6 +232,7 @@ const SCREENS = {
     SIGN_IN_ROOT: 'SignIn_Root',
     DETAILS_ROOT: 'Details_Root',
     PROFILE_ROOT: 'Profile_Root',
+    PROCESS_MONEY_REQUEST_HOLD_ROOT: 'ProcessMoneyRequestHold_Root',
     REPORT_WELCOME_MESSAGE_ROOT: 'Report_WelcomeMessage_Root',
     REPORT_PARTICIPANTS_ROOT: 'ReportParticipants_Root',
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',

src/components/HoldMenuSectionList.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {ImageSourcePropType, View} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import {TranslationPaths} from '@src/languages/types';
+import Icon from './Icon';
+import * as Illustrations from './Icon/Illustrations';
+import Text from './Text';
+
+type HoldMenuSection = {
+    /** The icon supplied with the section */
+    icon: React.FC<SvgProps> | ImageSourcePropType;
+
+    /** Translation key for the title */
+    titleTranslationKey: TranslationPaths;
+
+    /** Translation key for the description */
+    descriptionTranslationKey: TranslationPaths;
+};
+
+function HoldMenuSectionList() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const holdMenuSections: HoldMenuSection[] = [
+        {
+            icon: Illustrations.Hourglass,
+            titleTranslationKey: 'iou.whatIsHoldTitle',
+            descriptionTranslationKey: 'iou.whatIsHoldExplain',
+        },
+        {
+            icon: Illustrations.CommentBubbles,
+            titleTranslationKey: 'iou.holdIsTemporaryTitle',
+            descriptionTranslationKey: 'iou.holdIsTemporaryExplain',
+        },
+        {
+            icon: Illustrations.TrashCan,
+            titleTranslationKey: 'iou.deleteHoldTitle',
+            descriptionTranslationKey: 'iou.deleteHoldExplain',
+        },
+    ];
+
+    return (
+        <>
+            {holdMenuSections.map((section, i) => (
+                <View
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={i}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}
+                >
+                    <Icon
+                        width={variables.holdMenuIconSize}
+                        height={variables.holdMenuIconSize}
+                        src={section.icon}
+                        additionalStyles={[styles.mr3]}
+                    />
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
+                        <Text
+                            style={[styles.textNormal]}
+                            numberOfLines={3}
+                        >
+                            {translate(section.descriptionTranslationKey)}
+                        </Text>
+                    </View>
+                </View>
+            ))}
+        </>
+    );
+}
+
+HoldMenuSectionList.displayName = 'HoldMenuSectionList';
+
+export type {HoldMenuSection};
+
+export default HoldMenuSectionList;

src/components/Icon/Illustrations.ts

@@ -32,13 +32,15 @@ import BigRocket from '@assets/images/simple-illustrations/simple-illustration__
 import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg';
 import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
 import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
+import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
 import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
 import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
+import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -53,6 +55,7 @@ import ShieldYellow from '@assets/images/simple-illustrations/simple-illustratio
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
 import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
 import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
+import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
 
 export {
@@ -111,5 +114,8 @@ export {
     Hands,
     HandEarth,
     SmartScan,
+    Hourglass,
+    CommentBubbles,
+    TrashCan,
     TeleScope,
 };

src/components/ProcessMoneyRequestHoldMenu.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Button from './Button';
+import HoldMenuSectionList from './HoldMenuSectionList';
+import {PopoverAnchorPosition} from './Modal/types';
+import Popover from './Popover';
+import {AnchorAlignment} from './Popover/types';
+import Text from './Text';
+import TextPill from './TextPill';
+
+type ProcessMoneyRequestHoldMenuProps = {
+    /** Whether the content is visible */
+    isVisible: boolean;
+
+    /** Method to trigger when pressing outside of the popover menu to close it */
+    onClose: () => void;
+
+    /** Method to trigger when pressing confirm button */
+    onConfirm: () => void;
+
+    /** The anchor position of the popover menu */
+    anchorPosition?: PopoverAnchorPosition;
+
+    /** The anchor alignment of the popover menu */
+    anchorAlignment: AnchorAlignment;
+
+    /** The anchor ref of the popover menu */
+    anchorRef: React.RefObject<HTMLElement>;
+};
+
+function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosition, anchorAlignment, anchorRef}: ProcessMoneyRequestHoldMenuProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <Popover
+            isVisible={isVisible}
+            onClose={onClose}
+            anchorPosition={anchorPosition}
+            anchorRef={anchorRef}
+            anchorAlignment={anchorAlignment}
+            disableAnimation={false}
+            withoutOverlay={false}
+        >
+            <View style={[styles.mh5, styles.mv5]}>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
+                    <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
+                    <TextPill textStyles={styles.holdRequestInline}>{translate('iou.hold')}</TextPill>;
+                </View>
+                <HoldMenuSectionList />
+                <Button
+                    success
+                    style={[styles.mt5]}
+                    text={translate('common.buttonConfirm')}
+                    onPress={onConfirm}
+                />
+            </View>
+        </Popover>
+    );
+}
+
+ProcessMoneyRequestHoldMenu.displayName = 'ProcessMoneyRequestHoldMenu';
+
+export default ProcessMoneyRequestHoldMenu;

src/components/TextPill.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {StyleProp, TextStyle} from 'react-native';
+// eslint-disable-next-line no-restricted-imports
+import useThemeStyles from '@hooks/useThemeStyles';
+import colors from '@styles/theme/colors';
+import Text from './Text';
+
+type TextPillProps = {
+    /** The color of the text/ */
+    color?: string;
+
+    /** Styles to apply to the text */
+    textStyles: StyleProp<TextStyle>;
+
+    children: React.ReactNode;
+};
+
+function TextPill({color, textStyles, children}: TextPillProps) {
+    const styles = useThemeStyles();
+
+    return <Text style={[{backgroundColor: color ?? colors.red, borderRadius: 6}, styles.overflowHidden, styles.textStrong, styles.ph2, styles.pv1, textStyles]}>{children}</Text>;
+}
+
+TextPill.displayName = 'TextPill';
+
+export default TextPill;