From c2e4b5d53e47d98e3ae007562605000e03a1c2ea Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Sat, 16 Nov 2024 04:58:22 +0700
Subject: [PATCH 01/23] update hold expense educational modal

---
 src/SCREENS.ts                                |   1 -
 src/components/HoldMenuSectionList.tsx        |  15 +--
 .../ProcessMoneyRequestHoldMenu.tsx           | 108 ++++++++++--------
 .../FeatureTrainingModalNavigator.tsx         |   5 +
 src/libs/Navigation/linkingConfig/config.ts   |   6 +-
 src/libs/Navigation/types.ts                  |   6 +-
 src/pages/ProcessMoneyRequestHoldPage.tsx     |  54 +++------
 7 files changed, 86 insertions(+), 109 deletions(-)

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 81fc08775356c..69f6204ce6e7d 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -169,7 +169,6 @@ const SCREENS = {
         ROOM_MEMBER_DETAILS: 'RoomMembers_Details',
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
-        PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
         TRANSACTION_DUPLICATE: 'TransactionDuplicate',
         TRAVEL: 'Travel',
         SEARCH_REPORT: 'SearchReport',
diff --git a/src/components/HoldMenuSectionList.tsx b/src/components/HoldMenuSectionList.tsx
index 4ffdfa1bd60e9..5300cd15ce6a8 100644
--- a/src/components/HoldMenuSectionList.tsx
+++ b/src/components/HoldMenuSectionList.tsx
@@ -14,9 +14,6 @@ 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;
 };
@@ -26,19 +23,12 @@ function HoldMenuSectionList() {
     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',
         },
     ];
@@ -49,7 +39,7 @@ function HoldMenuSectionList() {
                 <View
                     // eslint-disable-next-line react/no-array-index-key
                     key={i}
-                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb2]}
                 >
                     <Icon
                         width={variables.holdMenuIconSize}
@@ -58,8 +48,7 @@ function HoldMenuSectionList() {
                         additionalStyles={[styles.mr3]}
                     />
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
-                        <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
-                        <Text style={[styles.textNormal]}>{translate(section.descriptionTranslationKey)}</Text>
+                        <Text style={[styles.textBold]}>{translate(section.descriptionTranslationKey)}</Text>
                     </View>
                 </View>
             ))}
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index bb76ea0290f39..312d6f961d2fc 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -1,16 +1,21 @@
-import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import Button from './Button';
 import HoldMenuSectionList from './HoldMenuSectionList';
-import type {PopoverAnchorPosition} from './Modal/types';
-import Popover from './Popover';
+import Lottie from './Lottie';
+import DotLottieAnimations from './LottieAnimations';
+import Modal from './Modal';
+import SafeAreaConsumer from './SafeAreaConsumer';
 import Text from './Text';
 import TextPill from './TextPill';
 
+const MODAL_PADDING = variables.spacing2;
+
 type ProcessMoneyRequestHoldMenuProps = {
     /** Whether the content is visible */
     isVisible: boolean;
@@ -20,53 +25,64 @@ type ProcessMoneyRequestHoldMenuProps = {
 
     /** 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;
 };
 
-function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosition, anchorAlignment}: ProcessMoneyRequestHoldMenuProps) {
+function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm}: ProcessMoneyRequestHoldMenuProps) {
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const popoverRef = useRef(null);
-    const navigation = useNavigation();
-
-    useEffect(() => {
-        const unsub = navigation.addListener('beforeRemove', () => {
-            onClose();
-        });
-        return unsub;
-    }, [navigation, onClose]);
 
     return (
-        <Popover
-            isVisible={isVisible}
-            onClose={onClose}
-            anchorPosition={anchorPosition}
-            anchorRef={popoverRef}
-            anchorAlignment={anchorAlignment}
-            disableAnimation={false}
-            withoutOverlay={false}
-            shouldCloseWhenBrowserNavigationChanged={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('violations.hold')}</TextPill>
-                </View>
-                <HoldMenuSectionList />
-                <Button
-                    success
-                    style={[styles.mt5]}
-                    text={translate('common.buttonConfirm')}
-                    onPress={onConfirm}
-                    large
-                />
-            </View>
-        </Popover>
+        <SafeAreaConsumer>
+            {({safeAreaPaddingBottomStyle}) => (
+                <Modal
+                    isVisible={isVisible}
+                    type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+                    onClose={onClose}
+                    innerContainerStyle={{
+                        boxShadow: 'none',
+                        borderRadius: 16,
+                        paddingBottom: 20,
+                        paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
+                        ...(onboardingIsMediumOrLargerScreenWidth
+                            ? // Override styles defined by MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
+                              // To make it take as little space as possible.
+                              {
+                                  flex: undefined,
+                                  width: 'auto',
+                              }
+                            : {}),
+                    }}
+                >
+                    <View style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && {width: 400}, safeAreaPaddingBottomStyle]}>
+                        <View style={onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>
+                            <Lottie
+                                source={DotLottieAnimations.PreferencesDJ}
+                                style={styles.h100}
+                                webStyle={styles.h100}
+                                autoPlay
+                                loop
+                            />
+                        </View>
+                        <View style={[styles.mt5, styles.mh5]}>
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                                <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
+                                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
+                            </View>
+                            <Text style={[styles.mb3, styles.textSupporting]}>{translate('iou.whatIsHoldExplain')}</Text>
+                            <HoldMenuSectionList />
+                            <Button
+                                success
+                                style={[styles.mt3]}
+                                text={translate('common.buttonConfirm')}
+                                onPress={onConfirm}
+                                large
+                            />
+                        </View>
+                    </View>
+                </Modal>
+            )}
+        </SafeAreaConsumer>
     );
 }
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx
index 731acff5c0ba7..66c6907eeff82 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import type {FeatureTrainingNavigatorParamList} from '@libs/Navigation/types';
+import ProcessMoneyRequestHoldPage from '@pages/ProcessMoneyRequestHoldPage';
 import TrackTrainingPage from '@pages/TrackTrainingPage';
 import SCREENS from '@src/SCREENS';
 
@@ -17,6 +18,10 @@ function FeatureTrainingModalNavigator() {
                         name={SCREENS.FEATURE_TRAINING_ROOT}
                         component={TrackTrainingPage}
                     />
+                    <Stack.Screen
+                        name={SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT}
+                        component={ProcessMoneyRequestHoldPage}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index c7c9eb10d7d34..b391a86ca1800 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -87,6 +87,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                     path: ROUTES.TRACK_TRAINING_MODAL,
                     exact: true,
                 },
+                [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD.route,
             },
         },
         [NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: {
@@ -1305,11 +1306,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.REFERRAL_DETAILS]: ROUTES.REFERRAL_DETAILS_MODAL.route,
                     },
                 },
-                [SCREENS.RIGHT_MODAL.PROCESS_MONEY_REQUEST_HOLD]: {
-                    screens: {
-                        [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD.route,
-                    },
-                },
                 [SCREENS.RIGHT_MODAL.TRAVEL]: {
                     screens: {
                         [SCREENS.TRAVEL.MY_TRIPS]: ROUTES.TRAVEL_MY_TRIPS,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 1c0895d2fbc65..75ec0fe515272 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1271,6 +1271,7 @@ type SignInNavigatorParamList = {
 
 type FeatureTrainingNavigatorParamList = {
     [SCREENS.FEATURE_TRAINING_ROOT]: undefined;
+    [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: undefined;
 };
 
 type ReferralDetailsNavigatorParamList = {
@@ -1280,10 +1281,6 @@ type ReferralDetailsNavigatorParamList = {
     };
 };
 
-type ProcessMoneyRequestHoldNavigatorParamList = {
-    [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: undefined;
-};
-
 type PrivateNotesNavigatorParamList = {
     [SCREENS.PRIVATE_NOTES.LIST]: {
         backTo?: Routes;
@@ -1360,7 +1357,6 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.FLAG_COMMENT]: NavigatorScreenParams<FlagCommentNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.EDIT_REQUEST]: NavigatorScreenParams<EditRequestNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SIGN_IN]: NavigatorScreenParams<SignInNavigatorParamList>;
-    [SCREENS.RIGHT_MODAL.PROCESS_MONEY_REQUEST_HOLD]: NavigatorScreenParams<ProcessMoneyRequestHoldNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.REFERRAL]: NavigatorScreenParams<ReferralDetailsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.TRANSACTION_DUPLICATE]: NavigatorScreenParams<TransactionDuplicateNavigatorParamList>;
diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
index 8872c251be3f4..d989dbe302856 100644
--- a/src/pages/ProcessMoneyRequestHoldPage.tsx
+++ b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -1,21 +1,14 @@
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useRef} from 'react';
-import {InteractionManager, View} from 'react-native';
-import Button from '@components/Button';
-import HeaderPageLayout from '@components/HeaderPageLayout';
-import HoldMenuSectionList from '@components/HoldMenuSectionList';
-import Text from '@components/Text';
-import TextPill from '@components/TextPill';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
+import React, {useCallback, useRef, useState} from 'react';
+import {InteractionManager} from 'react-native';
+import ProcessMoneyRequestHoldMenu from '@components/ProcessMoneyRequestHoldMenu';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import Navigation from '@libs/Navigation/Navigation';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 
 function ProcessMoneyRequestHoldPage() {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const [isVisible, setIsVisible] = useState(true);
 
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     useFocusEffect(
@@ -29,39 +22,22 @@ function ProcessMoneyRequestHoldPage() {
         }, []),
     );
 
-    const onConfirm = useCallback(() => {
-        IOU.dismissHoldUseExplanation();
+    const onClose = useCallback(() => {
+        setIsVisible(false);
         Navigation.goBack();
     }, []);
 
-    const footerComponent = useMemo(
-        () => (
-            <Button
-                success
-                text={translate('common.buttonConfirm')}
-                onPress={onConfirm}
-                large
-                pressOnEnter
-            />
-        ),
-        [onConfirm, translate],
-    );
+    const onConfirm = useCallback(() => {
+        IOU.dismissHoldUseExplanation();
+        onClose();
+    }, [onClose]);
 
     return (
-        <HeaderPageLayout
-            title={translate('iou.hold')}
-            footer={footerComponent}
-            onBackButtonPress={() => Navigation.goBack()}
-            testID={ProcessMoneyRequestHoldPage.displayName}
-        >
-            <View style={[styles.mh5, styles.flex1]}>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
-                    <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
-                    <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
-                </View>
-                <HoldMenuSectionList />
-            </View>
-        </HeaderPageLayout>
+        <ProcessMoneyRequestHoldMenu
+            isVisible={isVisible}
+            onClose={onClose}
+            onConfirm={onConfirm}
+        />
     );
 }
 

From aae0a6e39c30d7f02fa93ffb68419872e02cdbbd Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Sat, 16 Nov 2024 05:01:44 +0700
Subject: [PATCH 02/23] revert unnecessary changes

---
 src/SCREENS.ts                         |  1 +
 src/components/HoldMenuSectionList.tsx | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 69f6204ce6e7d..81fc08775356c 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -169,6 +169,7 @@ const SCREENS = {
         ROOM_MEMBER_DETAILS: 'RoomMembers_Details',
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
+        PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
         TRANSACTION_DUPLICATE: 'TransactionDuplicate',
         TRAVEL: 'Travel',
         SEARCH_REPORT: 'SearchReport',
diff --git a/src/components/HoldMenuSectionList.tsx b/src/components/HoldMenuSectionList.tsx
index 5300cd15ce6a8..4ffdfa1bd60e9 100644
--- a/src/components/HoldMenuSectionList.tsx
+++ b/src/components/HoldMenuSectionList.tsx
@@ -14,6 +14,9 @@ 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;
 };
@@ -23,12 +26,19 @@ function HoldMenuSectionList() {
     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',
         },
     ];
@@ -39,7 +49,7 @@ function HoldMenuSectionList() {
                 <View
                     // eslint-disable-next-line react/no-array-index-key
                     key={i}
-                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb2]}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}
                 >
                     <Icon
                         width={variables.holdMenuIconSize}
@@ -48,7 +58,8 @@ function HoldMenuSectionList() {
                         additionalStyles={[styles.mr3]}
                     />
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
-                        <Text style={[styles.textBold]}>{translate(section.descriptionTranslationKey)}</Text>
+                        <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
+                        <Text style={[styles.textNormal]}>{translate(section.descriptionTranslationKey)}</Text>
                     </View>
                 </View>
             ))}

From 3dad34570855b040af7348a7606e3ebc6d4726cf Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Sun, 1 Dec 2024 19:09:43 +0700
Subject: [PATCH 03/23] reuse FeatureTrainingModal

---
 src/components/FeatureTrainingModal.tsx       | 14 ++-
 src/components/MoneyReportHeader.tsx          |  1 -
 src/components/MoneyRequestHeader.tsx         |  1 -
 .../ProcessMoneyRequestHoldMenu.tsx           | 99 +++++++------------
 .../Navigators/RightModalNavigator.tsx        |  4 -
 src/pages/ProcessMoneyRequestHoldPage.tsx     | 16 +--
 6 files changed, 46 insertions(+), 89 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index 804fd69ee742e..870a5b1f4e2b5 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -10,6 +10,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Button from './Button';
 import CheckboxWithLabel from './CheckboxWithLabel';
 import Lottie from './Lottie';
@@ -40,12 +41,12 @@ type FeatureTrainingModalProps = {
     animation?: DotLottieAnimation;
 
     /** URL for the video */
-    videoURL: string;
+    videoURL?: string;
 
     videoAspectRatio?: number;
 
     /** Title for the modal */
-    title?: string;
+    title?: string | React.ReactNode;
 
     /** Describe what is showing */
     description?: string;
@@ -70,6 +71,9 @@ type FeatureTrainingModalProps = {
 
     /** Link to navigate to when user wants to learn more */
     onHelp?: () => void;
+
+    /** Children to show below title and description and above buttons */
+    children?: React.ReactNode;
 };
 
 function FeatureTrainingModal({
@@ -85,6 +89,7 @@ function FeatureTrainingModal({
     onClose = () => {},
     helpText = '',
     onHelp = () => {},
+    children,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -136,7 +141,7 @@ function FeatureTrainingModal({
                     {aspectRatio},
                 ]}
             >
-                {videoStatus === 'video' ? (
+                {videoStatus === 'video' && videoURL ? (
                     <GestureHandlerRootView>
                         <VideoPlayer
                             url={videoURL}
@@ -206,11 +211,12 @@ function FeatureTrainingModal({
                         <View style={[styles.mt5, styles.mh5]}>
                             {!!title && !!description && (
                                 <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
-                                    <Text style={[styles.textHeadlineH1]}>{title}</Text>
+                                    {typeof title === 'string' ? <Text style={[styles.textHeadlineH1]}>{title}</Text> : title}
                                     <Text style={styles.textSupporting}>{description}</Text>
                                     {secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}
                                 </View>
                             )}
+                            {children}
                             {shouldShowDismissModalOption && (
                                 <CheckboxWithLabel
                                     label={translate('featureTraining.doNotShowAgain')}
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index d01b69ed56496..1822784d83923 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -513,7 +513,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 <ProcessMoneyRequestHoldMenu
                     onClose={handleHoldRequestClose}
                     onConfirm={handleHoldRequestClose}
-                    isVisible={shouldShowHoldMenu}
                 />
             )}
         </View>
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index f253c757050f7..e54ca0f7f2521 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -219,7 +219,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 <ProcessMoneyRequestHoldMenu
                     onClose={handleHoldRequestClose}
                     onConfirm={handleHoldRequestClose}
-                    isVisible={shouldShowHoldMenu}
                 />
             )}
         </>
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index 312d6f961d2fc..e0a3f66c7972d 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -1,25 +1,15 @@
-import React from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
-import CONST from '@src/CONST';
-import Button from './Button';
+import FeatureTrainingModal from './FeatureTrainingModal';
 import HoldMenuSectionList from './HoldMenuSectionList';
-import Lottie from './Lottie';
-import DotLottieAnimations from './LottieAnimations';
-import Modal from './Modal';
-import SafeAreaConsumer from './SafeAreaConsumer';
+import LottieAnimations from './LottieAnimations';
 import Text from './Text';
 import TextPill from './TextPill';
 
-const MODAL_PADDING = variables.spacing2;
-
 type ProcessMoneyRequestHoldMenuProps = {
-    /** Whether the content is visible */
-    isVisible: boolean;
-
     /** Method to trigger when pressing outside of the popover menu to close it */
     onClose: () => void;
 
@@ -27,62 +17,39 @@ type ProcessMoneyRequestHoldMenuProps = {
     onConfirm: () => void;
 };
 
-function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm}: ProcessMoneyRequestHoldMenuProps) {
-    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHoldMenuProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        const unsub = navigation.addListener('beforeRemove', () => {
+            onClose();
+        });
+        return unsub;
+    }, [navigation, onClose]);
+
+    const title = useMemo(
+        () => (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
+                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
+            </View>
+        ),
+        [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline],
+    );
 
     return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
-                <Modal
-                    isVisible={isVisible}
-                    type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
-                    onClose={onClose}
-                    innerContainerStyle={{
-                        boxShadow: 'none',
-                        borderRadius: 16,
-                        paddingBottom: 20,
-                        paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
-                        ...(onboardingIsMediumOrLargerScreenWidth
-                            ? // Override styles defined by MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
-                              // To make it take as little space as possible.
-                              {
-                                  flex: undefined,
-                                  width: 'auto',
-                              }
-                            : {}),
-                    }}
-                >
-                    <View style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && {width: 400}, safeAreaPaddingBottomStyle]}>
-                        <View style={onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>
-                            <Lottie
-                                source={DotLottieAnimations.PreferencesDJ}
-                                style={styles.h100}
-                                webStyle={styles.h100}
-                                autoPlay
-                                loop
-                            />
-                        </View>
-                        <View style={[styles.mt5, styles.mh5]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                                <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
-                                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
-                            </View>
-                            <Text style={[styles.mb3, styles.textSupporting]}>{translate('iou.whatIsHoldExplain')}</Text>
-                            <HoldMenuSectionList />
-                            <Button
-                                success
-                                style={[styles.mt3]}
-                                text={translate('common.buttonConfirm')}
-                                onPress={onConfirm}
-                                large
-                            />
-                        </View>
-                    </View>
-                </Modal>
-            )}
-        </SafeAreaConsumer>
+        <FeatureTrainingModal
+            animation={LottieAnimations.PreferencesDJ}
+            title={title}
+            description={translate('iou.whatIsHoldExplain')}
+            confirmText={translate('common.buttonConfirm')}
+            onClose={onClose}
+            onConfirm={onConfirm}
+            children={<HoldMenuSectionList />}
+            videoAspectRatio={LottieAnimations.PreferencesDJ.w / LottieAnimations.PreferencesDJ.h}
+        />
     );
 }
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index c996f380e98c9..43b8e2fc7cc62 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -183,10 +183,6 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                         component={ModalStackNavigators.PrivateNotesModalStackNavigator}
                         options={hideKeyboardOnSwipe}
                     />
-                    <Stack.Screen
-                        name="ProcessMoneyRequestHold"
-                        component={ModalStackNavigators.ProcessMoneyRequestHoldStackNavigator}
-                    />
                     <Stack.Screen
                         name={SCREENS.RIGHT_MODAL.TRANSACTION_DUPLICATE}
                         component={ModalStackNavigators.TransactionDuplicateStackNavigator}
diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
index d989dbe302856..ed69b97a2826b 100644
--- a/src/pages/ProcessMoneyRequestHoldPage.tsx
+++ b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -1,15 +1,12 @@
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {InteractionManager} from 'react-native';
 import ProcessMoneyRequestHoldMenu from '@components/ProcessMoneyRequestHoldMenu';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
-import Navigation from '@libs/Navigation/Navigation';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 
 function ProcessMoneyRequestHoldPage() {
-    const [isVisible, setIsVisible] = useState(true);
-
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     useFocusEffect(
         useCallback(() => {
@@ -22,20 +19,13 @@ function ProcessMoneyRequestHoldPage() {
         }, []),
     );
 
-    const onClose = useCallback(() => {
-        setIsVisible(false);
-        Navigation.goBack();
-    }, []);
-
     const onConfirm = useCallback(() => {
         IOU.dismissHoldUseExplanation();
-        onClose();
-    }, [onClose]);
+    }, []);
 
     return (
         <ProcessMoneyRequestHoldMenu
-            isVisible={isVisible}
-            onClose={onClose}
+            onClose={onConfirm}
             onConfirm={onConfirm}
         />
     );

From 0f6d33b9827770616c7e037c8c2dbf83729c0525 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Sun, 1 Dec 2024 21:41:30 +0700
Subject: [PATCH 04/23] fix lint

---
 src/components/FeatureTrainingModal.tsx        | 1 -
 src/components/ProcessMoneyRequestHoldMenu.tsx | 7 ++++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index 870a5b1f4e2b5..e118ad749676a 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -10,7 +10,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
-import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Button from './Button';
 import CheckboxWithLabel from './CheckboxWithLabel';
 import Lottie from './Lottie';
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index e0a3f66c7972d..d8d2c1b695394 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -36,7 +36,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
                 <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
             </View>
         ),
-        [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline],
+        [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
     );
 
     return (
@@ -47,9 +47,10 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
             confirmText={translate('common.buttonConfirm')}
             onClose={onClose}
             onConfirm={onConfirm}
-            children={<HoldMenuSectionList />}
             videoAspectRatio={LottieAnimations.PreferencesDJ.w / LottieAnimations.PreferencesDJ.h}
-        />
+        >
+            <HoldMenuSectionList />
+        </FeatureTrainingModal>
     );
 }
 

From 6f83d98b5dcfe9c29c1e82df280708604f2eb78c Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 01:04:02 +0700
Subject: [PATCH 05/23] apply illustration & update copy

---
 .../emptystate__holdexpense.svg               | 1207 +++++++++++++++++
 .../simple-illustration__realtimereports.svg  |   88 ++
 .../simple-illustration__stopwatch.svg        |   41 +
 src/components/FeatureTrainingModal.tsx       |   66 +-
 src/components/HoldMenuSectionList.tsx        |   21 +-
 src/components/Icon/Illustrations.ts          |    6 +
 .../ProcessMoneyRequestHoldMenu.tsx           |   10 +-
 src/languages/en.ts                           |   11 +-
 src/languages/es.ts                           |   13 +-
 src/styles/index.ts                           |    4 -
 src/styles/variables.ts                       |    3 +-
 11 files changed, 1414 insertions(+), 56 deletions(-)
 create mode 100644 assets/images/product-illustrations/emptystate__holdexpense.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__realtimereports.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__stopwatch.svg

diff --git a/assets/images/product-illustrations/emptystate__holdexpense.svg b/assets/images/product-illustrations/emptystate__holdexpense.svg
new file mode 100644
index 0000000000000..d007389640473
--- /dev/null
+++ b/assets/images/product-illustrations/emptystate__holdexpense.svg
@@ -0,0 +1,1207 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 390 220" style="enable-background:new 0 0 390 220;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000077311770226391030410000007006448792384741055_);}
+	.st1{fill:#780505;}
+	.st2{fill:#BF3013;}
+	.st3{fill:#FFA75A;}
+	.st4{fill:#F25730;}
+	.st5{fill:#002140;}
+	.st6{fill:#FED607;}
+	.st7{fill:#FFED8F;}
+	.st8{fill:#0164BF;}
+	.st9{fill:#B0D9FF;}
+	.st10{fill:#FFFAF0;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" y="0" width="390" height="220"/>
+	</defs>
+	<clipPath id="SVGID_00000034075785029723224250000013603768937472253111_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000034075785029723224250000013603768937472253111_);">
+		<g>
+			<rect y="0" class="st1" width="390" height="220"/>
+		</g>
+		<g>
+			<path class="st2" d="M196.211-49.917c61.925,0,112.128,50.2,112.128,112.128c0,61.928-50.203,112.128-112.128,112.128
+				S84.083,124.136,84.083,62.211C84.083,0.286,134.283-49.917,196.211-49.917z M286.041,62.211c0-49.61-40.22-89.83-89.83-89.83
+				s-89.83,40.22-89.83,89.83c0,49.61,40.22,89.83,89.83,89.83S286.041,111.821,286.041,62.211z"/>
+		</g>
+		<g>
+			<path class="st2" d="M196.211-4.636c36.916,0,66.846,29.927,66.846,66.846c0,36.92-29.93,66.846-66.846,66.846
+				s-66.846-29.93-66.846-66.846C129.365,25.294,159.291-4.636,196.211-4.636z M239.448,62.211
+				c0-23.879-19.358-43.237-43.237-43.237s-43.237,19.357-43.237,43.237c0,23.879,19.358,43.237,43.237,43.237
+				S239.448,86.09,239.448,62.211z"/>
+		</g>
+		<g>
+			<path class="st1" d="M196.211-27.619c49.61,0,89.83,40.22,89.83,89.83c0,49.61-40.22,89.83-89.83,89.83s-89.83-40.22-89.83-89.83
+				C106.381,12.6,146.601-27.619,196.211-27.619z M263.057,62.211c0-36.92-29.93-66.846-66.846-66.846s-66.846,29.927-66.846,66.846
+				s29.926,66.846,66.846,66.846S263.057,99.127,263.057,62.211z"/>
+		</g>
+		<g>
+			<path class="st1" d="M196.211,105.448c23.879,0,43.237-19.358,43.237-43.237s-19.358-43.237-43.237-43.237
+				s-43.237,19.358-43.237,43.237S172.332,105.448,196.211,105.448z"/>
+		</g>
+		<g>
+			<path class="st3" d="M247.297,151.485h-11.166c0-3.044-1.125-4.629-2.371-4.656v-0.04h9.264v0.02
+				C245.808,146.809,247.297,148.238,247.297,151.485z"/>
+		</g>
+		<g>
+			<path class="st4" d="M243.69,210.765c0,1.369-0.273,2.691-0.782,3.936h-0.004c-0.729-1.998-3.157-6.363-6.32-9.257
+				c-0.1,3.866-0.882,7.602-2.674,10.709c-1.062-3.336-2.681-6.673-4.852-10.013c-0.939,4.356-2.291,7.972-4.052,10.843
+				c-1.765-2.871-3.117-6.487-4.056-10.843c-2.172,3.34-3.79,6.677-4.852,10.013c-1.792-3.107-2.574-6.843-2.674-10.709
+				c-3.164,2.894-5.591,7.259-6.32,9.257H207.1c-0.509-1.245-0.782-2.567-0.782-3.936c0-4.505,2.967-8.504,7.542-11.005l0.083-0.03
+				c0.753,1.911,2.881,3.483,6.384,3.483h9.71c3.364,0,5.458-1.449,6.284-3.253C240.69,202.47,243.69,206.376,243.69,210.765z"/>
+		</g>
+		<g>
+			<path class="st5" d="M242.904,214.701h0.004c-1.362,3.34-4.409,6.141-8.419,7.876c-2.78,1.205-6.024,1.898-9.483,1.898
+				c-3.46,0-6.564-0.663-9.301-1.818c-4.099-1.728-7.223-4.566-8.605-7.956h0.004c0.729-1.998,3.156-6.363,6.32-9.257
+				c0.1,3.866,0.882,7.602,2.674,10.709c1.062-3.336,2.681-6.673,4.852-10.013c0.939,4.356,2.291,7.972,4.056,10.842
+				c1.761-2.87,3.113-6.486,4.052-10.842c2.171,3.34,3.79,6.677,4.852,10.013c1.792-3.107,2.574-6.843,2.674-10.709
+				C239.748,208.338,242.175,212.703,242.904,214.701z"/>
+		</g>
+		<g>
+			<path class="st3" d="M233.201,169.803c7.189,1.119,12.211,3.666,12.211,6.627c0,3.996-9.138,7.236-20.406,7.236
+				c-11.269,0-20.41-3.24-20.41-7.236c0-3.284,6.177-6.057,14.639-6.94h0.156v7.296c0,0.949,0.44,1.502,1.552,1.502h7.393
+				c1.112,0,1.555-0.553,1.555-1.502v-2.957c0-2.108,1.165-2.86,3.24-4.139L233.201,169.803z"/>
+		</g>
+		<g>
+			<path class="st4" d="M245.412,176.43c0,6.044-5.125,11.228-12.431,13.453c-1.578,0.563-2.774,1.835-3.41,3.077
+				c-0.333,0.649-0.513,1.292-0.513,1.821l0.014,0.17c-0.074,1.182-0.92,2.311-2.541,2.311h-2.701c-1.602,0-2.447-1.102-2.537-2.268
+				l-0.01-0.213c0-0.689-0.283-1.352-0.74-1.968c-1.002-1.352-2.847-2.477-4.382-3.153c-7.049-2.301-11.565-7.32-11.565-13.23
+				c0,3.996,9.138,7.236,20.41,7.236S245.412,180.426,245.412,176.43z"/>
+		</g>
+		<g>
+			<path class="st3" d="M241.679,142.594l0.057,0.063c-1.136,1.002-2.252,2.398-3.197,4.132h-4.779v0.04
+				c-1.528-0.03-3.237,2.301-3.243,7.197c-2.078,0.472-1.912,3.473,0.499,3.539c-2.59,0.07-2.59,3.527,0,3.597
+				c-1.295,0.033-1.941,0.915-1.941,1.798h-5.881v-5.671c0.087-6.98,2.93-12.135,5.864-14.695H241.679z"/>
+		</g>
+		<g>
+			<path class="st5" d="M236.131,151.485h2.641c-0.167,0.739-0.263,1.568-0.263,2.494c-0.087-0.01-0.177-0.017-0.273-0.017h-7.137
+				c-0.209,0-0.406,0.024-0.582,0.064c0.006-4.896,1.715-7.227,3.243-7.197C235.006,146.856,236.131,148.441,236.131,151.485z"/>
+		</g>
+		<g>
+			<path class="st6" d="M230.517,154.026c0.176-0.04,0.373-0.064,0.583-0.064h7.136c0.096,0,0.186,0.007,0.273,0.017
+				c2.377,0.25,2.307,3.516-0.213,3.586c-0.02-0.003-0.04-0.003-0.06-0.003H231.1c-0.03,0-0.057,0-0.084,0.003
+				C228.605,157.499,228.439,154.498,230.517,154.026z"/>
+		</g>
+		<g>
+			<path class="st6" d="M231.016,157.565c0.027-0.003,0.054-0.003,0.084-0.003h7.136c0.02,0,0.04,0,0.06,0.003
+				c2.594,0.07,2.594,3.527,0,3.597c-0.02-0.004-0.04-0.004-0.06-0.004H231.1c-0.03,0-0.057,0-0.084,0.004
+				C228.426,161.092,228.426,157.635,231.016,157.565z"/>
+		</g>
+		<g>
+			<path class="st6" d="M238.296,161.162c2.594,0.073,2.594,3.526,0,3.599c-0.02,0-0.04,0-0.06,0h-7.137c-0.029,0-0.056,0-0.083,0
+				c-1.295-0.033-1.944-0.919-1.941-1.801c0-0.883,0.646-1.765,1.941-1.798c0.027-0.004,0.054-0.004,0.083-0.004h7.137
+				C238.256,161.158,238.276,161.158,238.296,161.162z"/>
+		</g>
+		<g>
+			<path class="st6" d="M231.016,164.761c0.027,0,0.054,0,0.084,0h7.136c0.02,0,0.04,0,0.06,0c2.614,0.074,2.59,3.58-0.06,3.6H231.1
+				C228.429,168.361,228.399,164.835,231.016,164.761z"/>
+		</g>
+		<g>
+			<path class="st3" d="M236.321,199.96c-0.826,1.804-2.92,3.253-6.284,3.253h-9.71c-3.503,0-5.631-1.572-6.384-3.483
+				c-1.158-2.951,0.969-6.707,6.384-6.707l0.216-0.21c0.457,0.616,0.74,1.279,0.74,1.968l0.01,0.214
+				c0.09,1.165,0.935,2.267,2.537,2.267h2.701c1.622,0,2.467-1.129,2.541-2.311l-0.014-0.17c0-0.529,0.18-1.172,0.513-1.821
+				l0.466,0.063C235.595,193.023,237.69,196.976,236.321,199.96z"/>
+		</g>
+		<g>
+			<path class="st6" d="M231.1,168.361h4.122c-0.773,0.523-1.472,0.949-2.091,1.329c-2.075,1.279-3.24,2.031-3.24,4.139v2.957
+				c0,0.949-0.443,1.502-1.555,1.502h-7.393c-1.112,0-1.552-0.553-1.552-1.502v-31.632c0-2.78,3.803-2.78,3.803,0v17.806h5.881
+				c-0.003,0.882,0.646,1.768,1.941,1.801C228.399,164.835,228.429,168.361,231.1,168.361z"/>
+		</g>
+		<g>
+			<path class="st6" d="M169.867,195.84c7.683,0.75,13.077,3.057,13.077,5.784c0,3.34-8.368,6.044-18.691,6.044
+				c-10.323,0-18.691-2.704-18.691-6.044c0-2.684,5.278-4.885,12.767-5.671l1.469,3.224c0.709,1.375,1.185,1.868,2.607,1.868h7.442
+				c1.892,0,1.929-0.932,1.416-1.878l-1.529-3.263L169.867,195.84z"/>
+		</g>
+		<g>
+			<path class="st4" d="M173.197,211.994c-2.654,0.713-5.704,1.052-8.944,1.052c-3.014,0-5.861-0.359-8.382-1.052h-0.003
+				c-6.114-1.672-10.306-5.281-10.306-10.369c0,3.34,8.368,6.043,18.691,6.043c10.323,0,18.691-2.703,18.691-6.043
+				C182.944,207.092,179.005,210.436,173.197,211.994z"/>
+		</g>
+		<g>
+			<path class="st6" d="M174.649,211.994c3.407,0,3.407,4.988,0,4.988H154.51c-3.407,0-3.407-4.988,0-4.988h1.362
+				c2.52,0.693,5.367,1.052,8.381,1.052c3.24,0,6.29-0.339,8.944-1.052H174.649z"/>
+		</g>
+		<g>
+			<path class="st6" d="M173.65,216.982c3.407,0,3.407,4.989,0,4.989h-18.141c-3.407,0-3.407-4.989,0-4.989H173.65z"/>
+		</g>
+		<g>
+			<path class="st3" d="M158.329,195.954l-1.698-3.73c-0.74-1.515-1.679-2.364-2.814-2.364h-14.682
+				c-1.925,0-2.518-1.822-1.775-2.944l-0.027-0.017h-1.195c-2.068,0-2.597-2.104-1.585-3.18l-0.057-0.053
+				c-1.565-0.873-1.185-3.533,1.142-3.533h0.77v-0.05c-0.816-1.112-0.24-3.017,1.728-3.017h16.374c1.308,0,1.994-0.486,1.361-1.845
+				l-2.161-4.582c-1.185-2.518,2.255-4.139,3.44-1.625l12.584,26.89l1.529,3.263c0.513,0.946,0.476,1.878-1.416,1.878h-7.442
+				c-1.422,0-1.898-0.493-2.607-1.868L158.329,195.954z"/>
+		</g>
+		<g>
+			<path class="st6" d="M153.064,149.62l4.599,7.303h-5.851L153.064,149.62z"/>
+		</g>
+		<g>
+			<path class="st6" d="M157.663,156.923l-11.705,14.072l5.854-14.072H157.663z"/>
+		</g>
+		<g>
+			<path class="st6" d="M153.064,149.62l-1.252,7.303l-5.854-7.303H153.064z"/>
+		</g>
+		<g>
+			<path class="st6" d="M145.958,149.62l5.854,7.303h-11.831l5.777-7.207v-0.096H145.958z"/>
+		</g>
+		<g>
+			<path class="st6" d="M151.812,156.923l-5.854,14.072l-0.2,0.1l-5.854-14.076l0.077-0.096H151.812z"/>
+		</g>
+		<g>
+			<path class="st6" d="M145.758,149.62v0.096l-5.777,7.207h-0.093l-1.236-7.207v-0.096H145.758z"/>
+		</g>
+		<g>
+			<path class="st6" d="M139.904,157.019l5.854,14.076l-11.705-14.076l0.127-0.2l0.163,0.104h5.545L139.904,157.019z"/>
+		</g>
+		<g>
+			<path class="st6" d="M138.652,149.716l1.236,7.207h-5.545l-0.163-0.104L138.652,149.716z"/>
+		</g>
+		<g>
+			<path class="st5" d="M173.65,217.481h-18.141c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h18.141
+				c0.276,0,0.5,0.224,0.5,0.499S173.926,217.481,173.65,217.481z"/>
+		</g>
+		<g>
+			<path class="st5" d="M155.509,222.47c-2.005,0-3.055-1.506-3.055-2.994c0-0.777,0.273-1.506,0.769-2.051
+				c0.392-0.43,1.106-0.942,2.286-0.942c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-1.42,0-2.056,1.003-2.056,1.995
+				c0,0.993,0.636,1.996,2.056,1.996c0.276,0,0.5,0.224,0.5,0.499S155.785,222.47,155.509,222.47z"/>
+		</g>
+		<g>
+			<path class="st5" d="M154.51,217.481c-2.005,0-3.055-1.505-3.055-2.993c0-0.777,0.273-1.506,0.769-2.05
+				c0.392-0.431,1.106-0.942,2.286-0.942c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-1.42,0-2.056,1.002-2.056,1.994
+				c0,0.993,0.636,1.995,2.056,1.995c0.276,0,0.5,0.224,0.5,0.499S154.786,217.481,154.51,217.481z"/>
+		</g>
+		<g>
+			<path class="st5" d="M173.65,222.47c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c1.42,0,2.056-1.003,2.056-1.996
+				c0-0.992-0.636-1.995-2.056-1.995c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.005,0,3.055,1.506,3.055,2.993
+				c0,0.778-0.273,1.507-0.769,2.052C175.544,221.957,174.83,222.47,173.65,222.47z"/>
+		</g>
+		<g>
+			<path class="st5" d="M174.649,217.481c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c1.42,0,2.056-1.002,2.056-1.995
+				c0-0.992-0.636-1.994-2.056-1.994c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.005,0,3.055,1.505,3.055,2.992
+				c0,0.778-0.273,1.507-0.769,2.051C176.543,216.969,175.829,217.481,174.649,217.481z"/>
+		</g>
+		<g>
+			<path class="st5" d="M164.253,208.167c-9.433,0-19.19-2.447-19.19-6.543c0-2.948,5.057-5.31,13.199-6.166
+				c0.338-0.056,0.584,0.189,0.584,0.492c0,0.249-0.182,0.455-0.421,0.493c-0.014,0.003-0.029,0.005-0.043,0.007
+				c-7.254,0.76-12.32,2.888-12.32,5.174c0,2.678,7.31,5.545,18.191,5.545s18.191-2.867,18.191-5.545
+				c0-2.35-5.31-4.573-12.625-5.287c-0.275-0.026-0.476-0.271-0.449-0.546c0.026-0.274,0.272-0.481,0.545-0.448
+				c8.218,0.802,13.528,3.268,13.528,6.281C183.443,205.72,173.686,208.167,164.253,208.167z"/>
+		</g>
+		<g>
+			<path class="st5" d="M155.869,212.494c-0.044,0-0.088-0.006-0.132-0.019c-6.783-1.855-10.674-5.811-10.674-10.851
+				c0-0.275,0.224-0.499,0.5-0.499s0.5,0.224,0.5,0.499c0,4.556,3.623,8.159,9.938,9.888c0.266,0.072,0.423,0.348,0.35,0.613
+				C156.289,212.348,156.088,212.494,155.869,212.494z"/>
+		</g>
+		<g>
+			<path class="st5" d="M164.253,213.545c-3.065,0-5.93-0.359-8.514-1.069c-0.266-0.073-0.422-0.348-0.349-0.613
+				c0.072-0.268,0.348-0.428,0.614-0.35c2.498,0.686,5.273,1.034,8.25,1.034c3.293,0,6.258-0.349,8.814-1.035
+				c4.278-1.147,9.377-3.795,9.377-9.887c0-0.275,0.224-0.499,0.5-0.499s0.5,0.224,0.5,0.499c0,5.323-3.499,9.075-10.117,10.852
+				C170.686,213.186,167.633,213.545,164.253,213.545z"/>
+		</g>
+		<g>
+			<path class="st5" d="M155.509,217.481h-0.999c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h0.999
+				c0.276,0,0.5,0.224,0.5,0.499S155.785,217.481,155.509,217.481z"/>
+		</g>
+		<g>
+			<path class="st5" d="M174.649,217.481h-0.999c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h0.999
+				c0.276,0,0.5,0.224,0.5,0.499S174.925,217.481,174.649,217.481z"/>
+		</g>
+		<g>
+			<path class="st5" d="M174.649,212.493h-1.452c-0.276,0-0.504-0.224-0.504-0.499s0.219-0.499,0.495-0.499h1.461
+				c0.276,0,0.5,0.224,0.5,0.499S174.925,212.493,174.649,212.493z"/>
+		</g>
+		<g>
+			<path class="st5" d="M155.871,212.493h-1.361c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h1.358
+				c0.276,0,0.501,0.224,0.501,0.499S156.147,212.493,155.871,212.493z"/>
+		</g>
+		<g>
+			<path class="st5" d="M171.264,199.667c-0.188,0-0.368-0.106-0.453-0.288l-14.114-30.153c-0.117-0.25-0.009-0.548,0.241-0.664
+				c0.251-0.119,0.547-0.01,0.665,0.24l14.113,30.153c0.117,0.25,0.01,0.547-0.24,0.664
+				C171.407,199.652,171.334,199.667,171.264,199.667z"/>
+		</g>
+		<g>
+			<path class="st5" d="M159.798,199.677c-0.19,0-0.371-0.109-0.455-0.293l-3.167-6.953c-0.114-0.251-0.003-0.547,0.248-0.662
+				c0.254-0.112,0.548-0.002,0.662,0.248l3.167,6.953c0.114,0.251,0.003,0.547-0.248,0.661
+				C159.938,199.662,159.867,199.677,159.798,199.677z"/>
+		</g>
+		<g>
+			<path class="st5" d="M155.872,175.721c-0.188,0-0.367-0.106-0.452-0.287l-2.161-4.582c-0.118-0.249-0.011-0.547,0.239-0.665
+				c0.25-0.116,0.547-0.01,0.665,0.239l2.161,4.582c0.118,0.249,0.011,0.547-0.239,0.665
+				C156.015,175.705,155.943,175.721,155.872,175.721z"/>
+		</g>
+		<g>
+			<path class="st5" d="M153.71,171.139c-0.188,0-0.367-0.106-0.453-0.287c-0.723-1.537-0.008-2.855,1.071-3.364
+				s2.55-0.221,3.272,1.313c0.118,0.249,0.011,0.547-0.239,0.665c-0.25,0.117-0.548,0.01-0.665-0.239
+				c-0.466-0.99-1.312-1.132-1.943-0.836c-0.632,0.298-1.06,1.043-0.593,2.035c0.117,0.25,0.01,0.547-0.239,0.665
+				C153.854,171.123,153.782,171.139,153.71,171.139z"/>
+		</g>
+		<g>
+			<path class="st5" d="M146.481,183.595h-10.343c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h10.343
+				c0.276,0,0.5,0.224,0.5,0.499S146.757,183.595,146.481,183.595z"/>
+		</g>
+		<g>
+			<path class="st5" d="M137.333,187.398h-1.195c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h1.195
+				c0.276,0,0.5,0.224,0.5,0.499S137.609,187.398,137.333,187.398z"/>
+		</g>
+		<g>
+			<path class="st5" d="M136.138,187.398c-1.104,0-1.997-0.538-2.387-1.44c-0.375-0.866-0.199-1.903,0.438-2.58
+				c0.325-0.354,0.931-0.78,1.949-0.78c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.519,0-0.94,0.16-1.217,0.462
+				c-0.372,0.396-0.471,0.998-0.252,1.504c0.135,0.313,0.506,0.839,1.47,0.839c0.276,0,0.5,0.224,0.5,0.499
+				S136.414,187.398,136.138,187.398z"/>
+		</g>
+		<g>
+			<path class="st5" d="M146.98,180.632h-11.342c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h11.342
+				c0.276,0,0.5,0.224,0.5,0.499S147.256,180.632,146.98,180.632z"/>
+		</g>
+		<g>
+			<path class="st5" d="M134.496,184.166c-0.083,0-0.166-0.021-0.243-0.063c-0.936-0.522-1.397-1.625-1.123-2.682
+				c0.225-0.864,1.002-1.787,2.508-1.787c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.795,0-1.372,0.39-1.541,1.041
+				c-0.131,0.504,0.014,1.206,0.642,1.557c0.241,0.135,0.328,0.438,0.193,0.68C134.841,184.073,134.671,184.166,134.496,184.166z"/>
+		</g>
+		<g>
+			<path class="st5" d="M154.51,177.565h-16.374c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h16.374
+				c0.276,0,0.5,0.224,0.5,0.499S154.786,177.565,154.51,177.565z"/>
+		</g>
+		<g>
+			<path class="st5" d="M136.409,180.583c-0.154,0-0.305-0.071-0.403-0.204c-0.526-0.717-0.604-1.698-0.198-2.499
+				c0.423-0.835,1.271-1.313,2.329-1.313c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.677,0-1.188,0.272-1.438,0.767
+				c-0.234,0.462-0.188,1.047,0.112,1.456c0.163,0.223,0.115,0.535-0.107,0.698C136.615,180.551,136.511,180.583,136.409,180.583z"
+				/>
+		</g>
+		<g>
+			<path class="st5" d="M169.847,201.544h-7.442c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h7.442
+				c0.276,0,0.5,0.224,0.5,0.499S170.123,201.544,169.847,201.544z"/>
+		</g>
+		<g>
+			<path class="st5" d="M162.405,201.544c-1.667,0-2.288-0.659-3.052-2.138c-0.126-0.245-0.03-0.547,0.215-0.673
+				c0.245-0.128,0.546-0.031,0.673,0.214c0.659,1.277,0.982,1.599,2.164,1.599c0.276,0,0.5,0.224,0.5,0.499
+				S162.681,201.544,162.405,201.544z"/>
+		</g>
+		<g>
+			<path class="st5" d="M169.848,201.544c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c0.908,0,1.116-0.231,1.158-0.303
+				c0.089-0.149,0.021-0.463-0.182-0.838c-0.132-0.242-0.042-0.546,0.201-0.678c0.242-0.131,0.546-0.042,0.677,0.201
+				c0.492,0.907,0.36,1.494,0.163,1.825C171.548,201.286,170.889,201.544,169.848,201.544z"/>
+		</g>
+		<g>
+			<path class="st5" d="M156.631,192.724c-0.185,0-0.363-0.104-0.449-0.281c-0.675-1.383-1.471-2.084-2.365-2.084
+				c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c1.308,0,2.406,0.89,3.263,2.645c0.121,0.247,0.019,0.547-0.229,0.668
+				C156.779,192.707,156.705,192.724,156.631,192.724z"/>
+		</g>
+		<g>
+			<path class="st5" d="M154.51,177.565c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c0.818,0,1.015-0.209,1.056-0.273
+				c0.093-0.146,0.04-0.46-0.147-0.861c-0.117-0.25-0.008-0.547,0.242-0.664c0.251-0.116,0.548-0.007,0.664,0.242
+				c0.349,0.749,0.377,1.361,0.084,1.82C156.093,177.324,155.472,177.565,154.51,177.565z"/>
+		</g>
+		<g>
+			<path class="st5" d="M157.663,157.422h-23.32c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h23.32
+				c0.276,0,0.5,0.224,0.5,0.499S157.939,157.422,157.663,157.422z"/>
+		</g>
+		<g>
+			<path class="st5" d="M153.064,150.119h-14.412c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.412
+				c0.276,0,0.5,0.224,0.5,0.499S153.34,150.119,153.064,150.119z"/>
+		</g>
+		<g>
+			<path class="st5" d="M157.664,157.423c-0.166,0-0.328-0.083-0.423-0.233l-4.599-7.303c-0.147-0.233-0.077-0.542,0.157-0.689
+				c0.234-0.146,0.542-0.076,0.689,0.156l4.599,7.303c0.147,0.233,0.077,0.542-0.157,0.689
+				C157.847,157.398,157.754,157.423,157.664,157.423z"/>
+		</g>
+		<g>
+			<path class="st5" d="M145.958,171.494c-0.112,0-0.226-0.037-0.319-0.115c-0.212-0.176-0.241-0.491-0.064-0.703l11.705-14.072
+				c0.176-0.213,0.491-0.242,0.703-0.064c0.212,0.176,0.241,0.491,0.064,0.703l-11.705,14.072
+				C146.243,171.434,146.101,171.494,145.958,171.494z"/>
+		</g>
+		<g>
+			<path class="st5" d="M151.812,157.423c-0.146,0-0.292-0.064-0.39-0.188l-5.854-7.303c-0.173-0.215-0.138-0.529,0.077-0.702
+				c0.217-0.174,0.53-0.137,0.702,0.077l5.854,7.303c0.173,0.215,0.138,0.529-0.077,0.702
+				C152.032,157.387,151.922,157.423,151.812,157.423z"/>
+		</g>
+		<g>
+			<path class="st5" d="M151.812,157.423c-0.028,0-0.056-0.003-0.085-0.008c-0.272-0.047-0.455-0.305-0.408-0.576l1.252-7.303
+				c0.046-0.272,0.301-0.454,0.577-0.408c0.272,0.047,0.455,0.305,0.408,0.576l-1.252,7.303
+				C152.263,157.251,152.051,157.423,151.812,157.423z"/>
+		</g>
+		<g>
+			<path class="st5" d="M145.958,171.495c-0.064,0-0.129-0.013-0.192-0.039c-0.255-0.105-0.375-0.398-0.27-0.652l5.854-14.072
+				c0.106-0.256,0.397-0.377,0.653-0.27c0.255,0.105,0.375,0.398,0.27,0.652l-5.854,14.072
+				C146.339,171.379,146.153,171.495,145.958,171.495z"/>
+		</g>
+		<g>
+			<path class="st5" d="M134.053,157.519c-0.091,0-0.184-0.025-0.267-0.078c-0.233-0.147-0.302-0.456-0.154-0.689l4.598-7.302
+				c0.147-0.232,0.456-0.301,0.689-0.156c0.233,0.147,0.304,0.455,0.157,0.689l-4.6,7.304
+				C134.38,157.437,134.218,157.519,134.053,157.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M145.758,171.595c-0.144,0-0.286-0.062-0.385-0.181l-11.705-14.076c-0.176-0.212-0.147-0.527,0.065-0.703
+				c0.212-0.179,0.526-0.148,0.704,0.064l11.705,14.076c0.176,0.212,0.147,0.527-0.065,0.703
+				C145.984,171.557,145.871,171.595,145.758,171.595z"/>
+		</g>
+		<g>
+			<path class="st5" d="M139.903,157.519c-0.11,0-0.221-0.037-0.313-0.111c-0.215-0.173-0.249-0.487-0.075-0.702l5.853-7.302
+				c0.173-0.215,0.487-0.25,0.702-0.077c0.215,0.173,0.25,0.486,0.077,0.702l-5.855,7.304
+				C140.194,157.454,140.049,157.519,139.903,157.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M139.903,157.519c-0.241,0-0.453-0.175-0.493-0.42l-1.251-7.299c-0.047-0.271,0.136-0.529,0.408-0.576
+				c0.279-0.047,0.53,0.136,0.577,0.408l1.236,7.207c0,0.001,0.016,0.098,0.017,0.1c0.044,0.271-0.141,0.528-0.413,0.573
+				C139.957,157.516,139.93,157.519,139.903,157.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M145.758,171.595c-0.195,0-0.381-0.116-0.461-0.309l-5.854-14.076c-0.105-0.254,0.015-0.547,0.27-0.652
+				c0.255-0.105,0.547,0.014,0.653,0.27l5.854,14.076c0.106,0.254-0.015,0.547-0.27,0.652
+				C145.887,171.582,145.822,171.595,145.758,171.595z"/>
+		</g>
+		<g>
+			<path class="st5" d="M225.006,224.974c-3.379,0-6.573-0.624-9.495-1.856c-4.298-1.813-7.449-4.735-8.874-8.228
+				c-0.543-1.328-0.817-2.717-0.817-4.125c0-4.496,2.916-8.773,7.802-11.443c0.242-0.131,0.546-0.043,0.678,0.199
+				s0.043,0.545-0.199,0.678c-4.628,2.528-7.282,6.38-7.282,10.566c0,1.278,0.251,2.539,0.744,3.748
+				c1.324,3.245,4.285,5.975,8.338,7.685c2.798,1.18,5.861,1.778,9.106,1.778c3.272,0,6.483-0.643,9.285-1.856
+				c3.956-1.713,6.853-4.414,8.154-7.606c0.495-1.21,0.746-2.472,0.746-3.748c0-3.988-2.59-7.766-7.105-10.364
+				c-0.158-0.085-0.266-0.25-0.266-0.441c0-0.275,0.223-0.499,0.498-0.499h0.003c0.087,0,0.173,0.022,0.249,0.066
+				c4.843,2.782,7.619,6.879,7.619,11.238c0,1.407-0.275,2.795-0.819,4.125c-1.401,3.437-4.484,6.329-8.683,8.146
+				C231.762,224.304,228.414,224.974,225.006,224.974z"/>
+		</g>
+		<g>
+			<path class="st5" d="M225.006,184.165c-11.725,0-20.909-3.397-20.909-7.735c0-3.507,6.062-6.495,15.087-7.437
+				c0.271-0.034,0.52,0.171,0.549,0.445c0.028,0.274-0.171,0.52-0.445,0.549c-8.224,0.857-14.192,3.567-14.192,6.442
+				c0,3.254,8.001,6.737,19.911,6.737c11.908,0,19.907-3.483,19.907-6.737c0-2.571-4.738-5.036-11.789-6.134
+				c-0.272-0.042-0.459-0.298-0.416-0.57c0.042-0.273,0.301-0.467,0.57-0.416c7.792,1.213,12.633,3.941,12.633,7.12
+				C245.911,180.768,236.729,184.165,225.006,184.165z"/>
+		</g>
+		<g>
+			<path class="st5" d="M216.161,190.16c-0.052,0-0.104-0.009-0.155-0.025c-7.346-2.398-11.909-7.65-11.909-13.705
+				c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499c0,5.607,4.3,10.495,11.222,12.756c0.262,0.085,0.405,0.367,0.319,0.63
+				C216.567,190.027,216.371,190.16,216.161,190.16z"/>
+		</g>
+		<g>
+			<path class="st5" d="M232.981,190.383c-0.214,0-0.412-0.139-0.478-0.354c-0.081-0.264,0.068-0.543,0.332-0.623
+				c7.336-2.234,12.077-7.327,12.077-12.976c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499
+				c0,6.098-5.018,11.566-12.784,13.931C233.078,190.375,233.029,190.383,232.981,190.383z"/>
+		</g>
+		<g>
+			<path class="st5" d="M230.037,203.712h-9.71c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h9.71
+				c0.275,0,0.499,0.224,0.499,0.499S230.312,203.712,230.037,203.712z"/>
+		</g>
+		<g>
+			<path class="st5" d="M230.037,203.712c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c2.801,0,4.98-1.107,5.83-2.962
+				c0.561-1.222,0.457-2.634-0.276-3.776c-1-1.56-3.024-2.454-5.554-2.454c-0.275,0-0.499-0.224-0.499-0.499
+				s0.224-0.499,0.499-0.499c2.877,0,5.207,1.062,6.395,2.912c0.918,1.432,1.047,3.2,0.344,4.732
+				C235.759,202.388,233.24,203.712,230.037,203.712z"/>
+		</g>
+		<g>
+			<path class="st5" d="M220.327,203.712c-3.351,0-5.911-1.42-6.849-3.8c-0.604-1.538-0.408-3.214,0.535-4.598
+				c1.228-1.8,3.47-2.791,6.313-2.791c0.275,0,0.499,0.224,0.499,0.499s-0.224,0.499-0.499,0.499c-2.503,0-4.452,0.837-5.487,2.355
+				c-0.755,1.107-0.912,2.445-0.432,3.67c0.781,1.982,2.994,3.167,5.919,3.167c0.275,0,0.499,0.224,0.499,0.499
+				S220.603,203.712,220.327,203.712z"/>
+		</g>
+		<g>
+			<path class="st5" d="M226.531,197.761c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499
+				c1.422,0,1.989-0.993,2.043-1.843c0.018-0.274,0.238-0.493,0.529-0.467c0.275,0.017,0.484,0.254,0.467,0.529
+				C229.486,196.322,228.5,197.761,226.531,197.761z"/>
+		</g>
+		<g>
+			<path class="st5" d="M223.83,197.761c-1.94,0-2.934-1.414-3.035-2.729c-0.021-0.274,0.185-0.515,0.46-0.536
+				c0.258-0.02,0.515,0.184,0.536,0.46c0.064,0.833,0.637,1.807,2.039,1.807c0.275,0,0.499,0.224,0.499,0.499
+				S224.105,197.761,223.83,197.761z"/>
+		</g>
+		<g>
+			<path class="st5" d="M226.531,197.761h-2.701c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h2.701
+				c0.275,0,0.499,0.224,0.499,0.499S226.807,197.761,226.531,197.761z"/>
+		</g>
+		<g>
+			<path class="st5" d="M229.058,195.281c-0.275,0-0.499-0.224-0.499-0.499c0-0.607,0.201-1.335,0.568-2.05
+				c0.786-1.535,2.164-2.776,3.687-3.319c0.261-0.092,0.546,0.044,0.639,0.303c0.093,0.26-0.043,0.546-0.303,0.639
+				c-1.289,0.459-2.46,1.519-3.134,2.834c-0.296,0.576-0.459,1.143-0.459,1.594C229.557,195.057,229.333,195.281,229.058,195.281z"
+				/>
+		</g>
+		<g>
+			<path class="st5" d="M221.283,195.281c-0.275,0-0.499-0.224-0.499-0.499c0-0.534-0.217-1.097-0.643-1.671
+				c-0.794-1.071-2.356-2.189-4.182-2.993c-0.253-0.111-0.367-0.406-0.256-0.658c0.111-0.253,0.406-0.368,0.658-0.256
+				c0.949,0.418,3.296,1.577,4.582,3.312c0.557,0.751,0.838,1.513,0.838,2.267C221.782,195.057,221.559,195.281,221.283,195.281z"/>
+		</g>
+		<g>
+			<path class="st5" d="M146.244,186.556h-7.109c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h7.109
+				c0.276,0,0.5,0.224,0.5,0.499S146.52,186.556,146.244,186.556z"/>
+		</g>
+		<g>
+			<path class="st5" d="M153.817,190.359h-14.682c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.682
+				c0.276,0,0.5,0.224,0.5,0.499S154.093,190.359,153.817,190.359z"/>
+		</g>
+		<g>
+			<path class="st5" d="M139.135,190.359c-1.031,0-1.87-0.46-2.301-1.262c-0.413-0.768-0.37-1.732,0.109-2.456
+				c0.461-0.698,1.239-1.083,2.191-1.083c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.614,0-1.084,0.22-1.358,0.636
+				c-0.279,0.422-0.304,0.984-0.063,1.433c0.255,0.475,0.76,0.736,1.421,0.736c0.276,0,0.5,0.224,0.5,0.499
+				S139.411,190.359,139.135,190.359z"/>
+		</g>
+		<g>
+			<path class="st5" d="M223.194,163.459c-0.275,0-0.499-0.224-0.499-0.499v-17.807c0-0.275,0.224-0.499,0.499-0.499
+				s0.499,0.224,0.499,0.499v17.807C223.693,163.236,223.47,163.459,223.194,163.459z"/>
+		</g>
+		<g>
+			<path class="st5" d="M219.391,177.285c-0.275,0-0.499-0.224-0.499-0.499v-31.633c0-0.275,0.224-0.499,0.499-0.499
+				s0.499,0.224,0.499,0.499v31.633C219.89,177.062,219.666,177.285,219.391,177.285z"/>
+		</g>
+		<g>
+			<path class="st5" d="M223.194,145.653c-0.275,0-0.499-0.224-0.499-0.499c0-1.095-0.705-1.585-1.403-1.585
+				c-0.697,0-1.402,0.49-1.402,1.585c0,0.275-0.224,0.499-0.499,0.499s-0.499-0.224-0.499-0.499c-0.001-3.395,4.801-3.392,4.802,0
+				C223.693,145.429,223.47,145.653,223.194,145.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.212,165.257h-7.113c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.113
+				c0.275,0,0.499,0.224,0.499,0.499S238.487,165.257,238.212,165.257z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.212,168.86h-7.113c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.113
+				c0.275,0,0.499,0.224,0.499,0.499S238.487,168.86,238.212,168.86z"/>
+		</g>
+		<g>
+			<path class="st5" d="M231.1,168.857c-1.637,0-2.509-1.141-2.524-2.268c-0.016-1.124,0.812-2.285,2.427-2.33l0.098,0.499v0.499
+				h-0.084c-1.004,0.028-1.45,0.683-1.441,1.317c0.009,0.64,0.484,1.284,1.525,1.284c0.275,0,0.499,0.224,0.499,0.499
+				S231.375,168.857,231.1,168.857z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.24,168.857l-0.028-0.998c1.054-0.008,1.522-0.653,1.528-1.288c0.007-0.634-0.441-1.285-1.458-1.313
+				c-0.273-0.008-0.531-0.232-0.527-0.506c0.003-0.273,0.184-0.492,0.457-0.492h0.024c1.684,0.045,2.515,1.202,2.503,2.321
+				C240.728,167.702,239.865,168.845,238.24,168.857z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.212,161.657h-7.113c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.113
+				c0.275,0,0.499,0.224,0.499,0.499S238.487,161.657,238.212,161.657z"/>
+		</g>
+		<g>
+			<path class="st5" d="M231.099,165.264c-0.023,0-0.13-0.005-0.153-0.009c-1.541-0.036-2.373-1.184-2.369-2.297
+				c0-1.109,0.833-2.256,2.427-2.295l0.096,0.495l-0.024,0.5c-1.05,0.028-1.5,0.674-1.5,1.302c-0.002,0.63,0.447,1.275,1.454,1.302
+				c0.273,0.007,0.532,0.234,0.528,0.508C231.553,165.042,231.372,165.264,231.099,165.264z M231.099,161.657v-0.499V161.657z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.31,165.26l-0.098-0.495v-0.499c1.078-0.032,1.53-0.678,1.53-1.305c-0.001-0.627-0.452-1.271-1.46-1.3
+				c-0.273-0.008-0.531-0.234-0.527-0.508c0.003-0.273,0.184-0.494,0.457-0.494h0.024c0.033,0,0.125,0.007,0.157,0.013
+				c1.512,0.035,2.347,1.181,2.347,2.289C240.741,164.07,239.906,165.215,238.31,165.26z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.212,158.061h-7.113c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.113
+				c0.275,0,0.499,0.224,0.499,0.499S238.487,158.061,238.212,158.061z"/>
+		</g>
+		<g>
+			<path class="st5" d="M231.1,161.661c-1.691-0.043-2.525-1.188-2.525-2.298s0.834-2.255,2.428-2.298l0.098,0.496l-0.033,0.5
+				c-1.043,0.029-1.494,0.675-1.494,1.302s0.451,1.272,1.457,1.3c0.273,0.007,0.531,0.232,0.527,0.506
+				C231.554,161.443,231.373,161.661,231.1,161.661z M231.1,158.061v-0.499V158.061z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.31,161.661l-0.098-0.499v-0.499c1.078-0.027,1.53-0.673,1.53-1.3s-0.452-1.272-1.46-1.3
+				c-0.273-0.007-0.531-0.234-0.527-0.507c0.003-0.273,0.184-0.494,0.457-0.494h0.024c0.024,0,0.109,0.004,0.134,0.008
+				c1.535,0.038,2.37,1.184,2.37,2.293S239.905,161.618,238.31,161.661z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.212,154.461h-7.113c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.113
+				c0.275,0,0.499,0.224,0.499,0.499S238.487,154.461,238.212,154.461z"/>
+		</g>
+		<g>
+			<path class="st5" d="M231.1,158.068c-0.023,0-0.131-0.005-0.154-0.009c-1.476-0.036-2.261-1.065-2.359-2.067
+				c-0.116-1.174,0.633-2.183,1.82-2.453c0.222-0.05,0.455-0.075,0.693-0.075c0.275,0,0.499,0.224,0.499,0.499
+				s-0.224,0.499-0.499,0.499c-0.164,0-0.323,0.018-0.473,0.052c-0.799,0.182-1.102,0.824-1.047,1.381
+				c0.054,0.549,0.463,1.145,1.449,1.172c0.273,0.007,0.531,0.234,0.527,0.508C231.554,157.847,231.373,158.068,231.1,158.068z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.31,158.064l-0.098-0.495v-0.499c1.111-0.033,1.507-0.695,1.528-1.254
+				c0.022-0.598-0.365-1.243-1.284-1.34c-0.072-0.009-0.144-0.015-0.22-0.015c-0.275,0-0.512-0.224-0.512-0.499
+				s0.212-0.499,0.487-0.499h0.024c0.115,0,0.224,0.008,0.328,0.02c1.48,0.155,2.215,1.311,2.174,2.372
+				C240.698,156.888,239.921,158.02,238.31,158.064z"/>
+		</g>
+		<g>
+			<path class="st5" d="M229.058,163.459h-5.863c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h5.863
+				c0.275,0,0.499,0.224,0.499,0.499S229.333,163.459,229.058,163.459z"/>
+		</g>
+		<g>
+			<path class="st5" d="M228.336,178.787h-7.393c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h7.393
+				c0.275,0,0.499,0.224,0.499,0.499S228.611,178.787,228.336,178.787z"/>
+		</g>
+		<g>
+			<path class="st5" d="M229.891,177.285c-0.275,0-0.499-0.224-0.499-0.499v-2.957c0-0.275,0.224-0.499,0.499-0.499
+				s0.499,0.224,0.499,0.499v2.957C230.39,177.062,230.166,177.285,229.891,177.285z"/>
+		</g>
+		<g>
+			<path class="st5" d="M229.891,174.328c-0.275,0-0.499-0.224-0.499-0.499c0-2.423,1.458-3.321,3.478-4.564l0.124-0.076
+				c0.582-0.357,1.234-0.757,1.948-1.241c0.227-0.156,0.538-0.098,0.693,0.133c0.155,0.229,0.096,0.539-0.133,0.693
+				c-0.728,0.494-1.393,0.902-1.986,1.267l-0.124,0.075c-2.135,1.315-3.002,1.921-3.002,3.714
+				C230.39,174.105,230.166,174.328,229.891,174.328z"/>
+		</g>
+		<g>
+			<path class="st5" d="M247.227,151.984h-11.096c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h11.096
+				c0.275,0,0.499,0.224,0.499,0.499S247.502,151.984,247.227,151.984z"/>
+		</g>
+		<g>
+			<path class="st5" d="M243.024,147.288h-9.265c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h9.265
+				c0.275,0,0.499,0.224,0.499,0.499S243.3,147.288,243.024,147.288z"/>
+		</g>
+		<g>
+			<path class="st5" d="M241.679,143.093h-12.621c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h12.621
+				c0.275,0,0.499,0.224,0.499,0.499S241.954,143.093,241.679,143.093z"/>
+		</g>
+		<g>
+			<path class="st5" d="M223.194,157.788c-0.002,0-0.004,0-0.006,0c-0.276-0.003-0.497-0.229-0.493-0.505
+				c0.091-7.306,3.177-12.572,6.034-15.065c0.208-0.183,0.522-0.16,0.704,0.048s0.16,0.523-0.048,0.704
+				c-2.694,2.352-5.605,7.35-5.692,14.325C223.69,157.57,223.468,157.788,223.194,157.788z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.539,147.289c-0.081,0-0.163-0.021-0.239-0.062c-0.242-0.132-0.331-0.436-0.199-0.678
+				c0.929-1.704,2.071-3.18,3.305-4.268l0.399,0.312l0.328,0.377c-1.214,1.072-2.281,2.455-3.155,4.058
+				C238.887,147.195,238.716,147.289,238.539,147.289z"/>
+		</g>
+		<g>
+			<path class="st5" d="M230.517,154.541L230.517,154.541c-0.276,0-0.499-0.207-0.499-0.482c0.004-3.189,0.731-5.709,1.995-6.947
+				c0.523-0.512,1.116-0.782,1.717-0.782c0.014,0,0.027,0,0.04,0.001c1.425,0.029,2.86,1.636,2.86,5.154
+				c0,0.275-0.224,0.499-0.499,0.499s-0.499-0.224-0.499-0.499c0-2.702-0.947-4.136-1.883-4.156c-0.006,0-0.013,0-0.02,0
+				c-0.333,0-0.685,0.172-1.018,0.497c-0.508,0.498-1.69,2.098-1.696,6.201C231.016,154.302,230.792,154.541,230.517,154.541z"/>
+		</g>
+		<g>
+			<path class="st5" d="M238.509,154.478c-0.275,0-0.499-0.224-0.499-0.499c0-0.917,0.093-1.794,0.275-2.604
+				c0.061-0.269,0.327-0.433,0.598-0.377c0.269,0.061,0.438,0.328,0.377,0.598c-0.167,0.738-0.252,1.54-0.252,2.384
+				C239.008,154.254,238.784,154.478,238.509,154.478z"/>
+		</g>
+		<g>
+			<path class="st5" d="M247.297,151.984c-0.275,0-0.499-0.224-0.499-0.499c0-2.889-1.164-4.177-3.773-4.177
+				c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c3.166,0,4.771,1.741,4.771,5.175
+				C247.796,151.76,247.572,151.984,247.297,151.984z"/>
+		</g>
+		<g>
+			<path class="st5" d="M228.336,178.787c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c0.77,0,1.056-0.272,1.056-1.003
+				c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499C230.39,178.077,229.66,178.787,228.336,178.787z"/>
+		</g>
+		<g>
+			<path class="st5" d="M220.943,178.787c-1.323,0-2.052-0.71-2.052-2.001c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499
+				c0,0.74,0.276,1.003,1.054,1.003c0.275,0,0.499,0.224,0.499,0.499S221.219,178.787,220.943,178.787z"/>
+		</g>
+		<g>
+			<path class="st5" d="M225.006,217.482c-0.09,0-0.18-0.024-0.261-0.074c-0.235-0.145-0.31-0.452-0.165-0.687
+				c1.726-2.813,3.067-6.408,3.989-10.687c0.059-0.27,0.315-0.442,0.594-0.383c0.27,0.058,0.441,0.324,0.383,0.594
+				c-0.945,4.389-2.33,8.089-4.114,10.997C225.337,217.397,225.174,217.482,225.006,217.482z"/>
+		</g>
+		<g>
+			<path class="st5" d="M233.91,216.653c-0.212,0-0.408-0.136-0.476-0.349c-1.042-3.271-2.656-6.6-4.796-9.892
+				c-0.15-0.231-0.085-0.541,0.146-0.691c0.23-0.15,0.541-0.086,0.691,0.146c2.188,3.367,3.841,6.776,4.909,10.134
+				c0.084,0.263-0.062,0.544-0.324,0.627C234.012,216.645,233.96,216.653,233.91,216.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M233.91,216.653c-0.085,0-0.171-0.022-0.25-0.067c-0.238-0.138-0.32-0.443-0.183-0.683
+				c1.623-2.813,2.501-6.337,2.607-10.472c0.007-0.275,0.261-0.486,0.512-0.486c0.276,0.007,0.494,0.236,0.486,0.512
+				c-0.11,4.303-1.032,7.985-2.74,10.946C234.25,216.563,234.082,216.653,233.91,216.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M242.904,215.201c-0.204,0-0.396-0.126-0.469-0.329c-0.774-2.118-3.205-6.33-6.188-9.061
+				c-0.204-0.186-0.218-0.502-0.031-0.705c0.187-0.205,0.502-0.218,0.705-0.031c3.108,2.844,5.645,7.24,6.452,9.455
+				c0.095,0.259-0.038,0.546-0.298,0.64C243.02,215.192,242.961,215.201,242.904,215.201z"/>
+		</g>
+		<g>
+			<path class="st5" d="M225.006,217.482c-0.167,0-0.331-0.085-0.426-0.238c-1.786-2.906-3.172-6.606-4.118-10.998
+				c-0.059-0.27,0.113-0.536,0.383-0.594c0.278-0.06,0.535,0.113,0.594,0.383c0.922,4.281,2.266,7.876,3.993,10.686
+				c0.145,0.235,0.071,0.543-0.164,0.688C225.186,217.457,225.096,217.482,225.006,217.482z"/>
+		</g>
+		<g>
+			<path class="st5" d="M216.098,216.653c-0.05,0-0.102-0.008-0.151-0.024c-0.263-0.083-0.408-0.364-0.324-0.627
+				c1.068-3.357,2.721-6.767,4.909-10.134c0.151-0.231,0.462-0.296,0.691-0.146c0.231,0.15,0.297,0.46,0.146,0.691
+				c-2.14,3.292-3.754,6.62-4.796,9.892C216.506,216.517,216.31,216.653,216.098,216.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M216.098,216.653c-0.172,0-0.34-0.09-0.433-0.25c-1.706-2.959-2.629-6.642-2.74-10.946
+				c-0.008-0.275,0.21-0.505,0.486-0.512c0.303,0.008,0.505,0.211,0.512,0.486c0.108,4.137,0.985,7.66,2.607,10.472
+				c0.138,0.239,0.056,0.545-0.183,0.683C216.269,216.63,216.183,216.653,216.098,216.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M207.104,215.201c-0.057,0-0.115-0.01-0.171-0.031c-0.26-0.094-0.393-0.381-0.298-0.64
+				c0.809-2.215,3.345-6.613,6.452-9.455c0.203-0.187,0.519-0.174,0.705,0.031c0.187,0.203,0.173,0.52-0.031,0.705
+				c-2.982,2.729-5.414,6.941-6.188,9.061C207.499,215.075,207.308,215.201,207.104,215.201z"/>
+		</g>
+		<g>
+			<path class="st6" d="M227.033,108.015c0,3.666-0.179,10.853-4.222,14.516c-4.039,3.663-8.099,4.745-9.91,7.322
+				c-1.775,2.058-2.121,4.559-2.121,6.167h-30.863c0-1.608-0.346-4.109-2.121-6.167c-1.808-2.577-5.871-3.659-9.91-7.322
+				s-4.223-10.85-4.223-14.516c0,9.84,20.833,9.84,31.685,9.84C206.201,117.855,227.033,117.855,227.033,108.015z"/>
+		</g>
+		<g>
+			<path class="st6" d="M218.029,226.07c0,1.619-0.133,3.084-0.366,4.409h-0.004c-3.483,0-6.573-0.902-9.177-2.481
+				c-2.344-1.422-4.296-3.386-5.788-5.734c-1.382-2.174-2.371-4.669-2.91-7.359c-0.32-1.575-0.483-3.22-0.483-4.902h10.173
+				C209.474,210.003,218.029,213.137,218.029,226.07z"/>
+		</g>
+		<g>
+			<path class="st6" d="M216.421,196.52c0,0-0.377-1.795-2.175-1.965c-1.798-0.17-2.384,3.903-4.772,3.903
+				c-2.387,0-3.659-4.073-6.63-4.073c-2.97,0-3.363,4.073-7.496,4.073c-4.132,0-4.522-4.073-7.492-4.073s-4.242,4.073-6.63,4.073
+				s-2.974-4.073-4.772-3.903c-1.798,0.17-2.174,1.965-2.174,1.965c0-5.431,4.835-6.497,4.835-6.497h32.467
+				C211.582,190.023,216.421,191.089,216.421,196.52z"/>
+		</g>
+		<g>
+			<path class="st6" d="M214.246,194.555c1.798,0.17,2.175,1.965,2.175,1.965c0,5.431-4.839,6.497-4.839,6.497h-32.467
+				c0,0-4.835-1.066-4.835-6.497c0,0,0.376-1.795,2.174-1.965c1.798-0.17,2.384,3.903,4.772,3.903s3.66-4.073,6.63-4.073
+				s3.363,4.073,7.492,4.073c4.13,0,4.526-4.073,7.496-4.073c2.971,0,4.243,4.073,6.63,4.073
+				C211.862,198.458,212.448,194.385,214.246,194.555z"/>
+		</g>
+		<g>
+			<path class="st7" d="M195.5,118c17.397,0,31.5-2,31.5-10c0-8-14.103-10-31.5-10c-17.396,0-31.5,1-31.5,10
+				C164,116.5,178.104,118,195.5,118z"/>
+		</g>
+		<g>
+			<path class="st6" d="M197.137,225.461c1.978,3.05,4.552,5.624,7.542,7.482c3.263,2.032,7.02,3.204,11.042,3.204
+				c-2.534,4.629-6.247,5.987-6.247,5.987h-28.248c0,0-8.555-3.133-8.555-16.064c0-12.93,8.555-16.067,8.555-16.067h11.535
+				c-0.057,2.368,0.2,4.692,0.726,6.916C194.216,220.003,195.465,222.9,197.137,225.461z M185.518,217.782
+				c1.542-1.782-0.762-5.365-3.456-3.883l-0.223,0.14c-1.559,1.022-4.226,3.476-4.879,8.581c-0.316,5.205,5.598,4.939,5.598,1.799
+				h0.03C182.804,221.255,184.406,218.834,185.518,217.782z M181.229,237.612c2.877,2.248,5.974-0.956,3.617-3.197
+				c-0.596-0.536-1.266-1.105-1.769-2.244c-1.591-2.471-5.461-0.333-4.175,2.624c0.406,0.936,1.515,2.224,2.167,2.7L181.229,237.612
+				z"/>
+		</g>
+		<g>
+			<path class="st5" d="M213.404,175.251c0.006,0.14,0.01,0.283,0.01,0.426c0,5.755-2.884,7.36-2.884,7.36h-30.36
+				c0,0-2.887-1.605-2.887-7.36c0-0.143,0-0.286,0.01-0.426c0.909,2.421,3.317,3.656,5.721,3.86c2.414,0.203,4.952-0.67,6.504-1.699
+				c1.402,1.742,3.243,2.534,5.83,2.534c2.588,0,4.429-0.792,5.831-2.534c1.555,1.029,4.09,1.902,6.504,1.699
+				C210.087,178.907,212.498,177.672,213.404,175.251z"/>
+		</g>
+		<g>
+			<path class="st5" d="M210.53,144.369c0,0,2.884,1.911,2.884,6.65c-0.899-2.438-3.317-3.687-5.731-3.89s-4.949,0.67-6.504,1.702
+				c-1.402-1.742-3.243-2.534-5.831-2.534c-2.587,0-4.428,0.792-5.83,2.534c-1.552-1.032-4.09-1.905-6.504-1.702
+				c-2.414,0.203-4.828,1.452-5.731,3.89c0-4.739,2.887-6.65,2.887-6.65H210.53z"/>
+		</g>
+		<g>
+			<path class="st7" d="M211.273,183.037c3.966,0,3.966,6.986,0,6.986h-31.845c-3.966,0-3.966-6.986,0-6.986H211.273z"/>
+		</g>
+		<g>
+			<path class="st6" d="M213.414,151.019c0,2.697-1.432,4.319-2.664,6.14l-0.047-0.033c0-3.124-2.171-5.228-5.078-5.228
+				c-2.438,0-4.479,1.408-5.072,3.833l-0.03-0.01c-0.399-2.688-2.564-4.742-5.175-4.742c-2.61,0-4.775,2.054-5.171,4.742
+				l-0.033,0.01c-0.593-2.425-2.631-3.833-5.072-3.833c-2.904,0-5.075,2.104-5.075,5.228l-0.05,0.033
+				c-1.232-1.821-2.664-3.443-2.664-6.14c0.903-2.438,3.317-3.687,5.731-3.89c2.414-0.203,4.952,0.67,6.504,1.702
+				c1.402-1.742,3.243-2.534,5.83-2.534c2.588,0,4.429,0.792,5.831,2.534c1.555-1.032,4.09-1.905,6.504-1.702
+				S212.515,148.581,213.414,151.019z"/>
+		</g>
+		<g>
+			<path class="st6" d="M211.039,168.664c1.103,1.932,2.258,3.803,2.365,6.587c-0.906,2.421-3.317,3.656-5.721,3.86
+				c-2.414,0.203-4.949-0.67-6.504-1.699c-1.402,1.742-3.243,2.534-5.831,2.534c-2.587,0-4.428-0.792-5.83-2.534
+				c-1.552,1.029-4.09,1.902-6.504,1.699c-2.404-0.204-4.812-1.439-5.721-3.86c0.107-2.784,1.262-4.655,2.365-6.587
+				c0,3.124,2.51,5.678,5.414,5.678c2.441,0,4.479-1.405,5.068-3.829l0.037,0.009c0.396,2.684,2.561,4.739,5.171,4.739
+				c2.611,0,4.776-2.055,5.175-4.739l0.034-0.009c0.589,2.424,2.63,3.829,5.068,3.829
+				C208.532,174.342,211.039,171.788,211.039,168.664z"/>
+		</g>
+		<g>
+			<path class="st7" d="M210.78,136.02c4.622,0,4.622,8.349,0,8.349h-30.863c-4.618,0-4.618-8.349,0-8.349H210.78z"/>
+		</g>
+		<g>
+			<path class="st7" d="M190.14,170.512c-0.589,2.425-2.627,3.83-5.068,3.83c-2.904,0-5.415-2.554-5.415-5.678
+				c0.593-1.039,1.169-2.094,1.556-3.316h0.003c0.506,0.423,1.155,0.676,1.865,0.676c1.608,0,2.91-1.302,2.91-2.911
+				c0-1.608-1.302-2.914-2.91-2.914c-0.606,0-1.059,0.137-1.525,0.453h-0.007c-0.273-1.378-0.906-2.467-1.602-3.493l0.05-0.033
+				c0-3.124,2.171-5.228,5.075-5.228c2.441,0,4.479,1.408,5.072,3.833l0.033-0.01c0.396-2.688,2.561-4.742,5.171-4.742
+				c2.611,0,4.776,2.054,5.175,4.742l0.03,0.01c0.593-2.425,2.634-3.833,5.072-3.833c2.907,0,5.078,2.104,5.078,5.228l0.047,0.033
+				c-0.696,1.026-1.329,2.115-1.602,3.493h-0.003c-0.467-0.316-0.923-0.453-1.529-0.453c-1.608,0-2.91,1.306-2.91,2.914
+				c0,1.609,1.302,2.911,2.91,2.911c0.709,0,1.359-0.253,1.865-0.676c0.386,1.222,0.962,2.277,1.555,3.316
+				c0,3.124-2.507,5.678-5.415,5.678c-2.437,0-4.478-1.405-5.068-3.83l-0.033,0.01c-0.4,2.684-2.564,4.739-5.175,4.739
+				c-2.611,0-4.775-2.055-5.171-4.739l-0.037-0.01H190.14z M206.694,155.721c0-0.53-0.427-0.959-0.956-0.959
+				c-0.529,0-0.956,0.429-0.956,0.959c0,0.529,0.427,0.955,0.956,0.955C206.267,156.676,206.694,156.247,206.694,155.721z
+				 M206.694,170.522c0-0.529-0.427-0.959-0.956-0.959c-0.529,0-0.956,0.43-0.956,0.959c0,0.53,0.427,0.956,0.956,0.956
+				C206.267,171.478,206.694,171.049,206.694,170.522z M198.259,163.113c0-1.608-1.302-2.914-2.911-2.914
+				c-1.608,0-2.91,1.306-2.91,2.914c0,1.609,1.302,2.911,2.91,2.911C196.957,166.024,198.259,164.722,198.259,163.113z
+				 M196.304,155.721c0-0.53-0.426-0.959-0.956-0.959c-0.529,0-0.955,0.429-0.955,0.959c0,0.529,0.426,0.955,0.955,0.955
+				C195.878,156.676,196.304,156.247,196.304,155.721z M196.304,170.522c0-0.529-0.426-0.959-0.956-0.959
+				c-0.529,0-0.955,0.43-0.955,0.959c0,0.53,0.426,0.956,0.955,0.956C195.878,171.478,196.304,171.049,196.304,170.522z
+				 M185.915,155.721c0-0.53-0.427-0.959-0.956-0.959c-0.53,0-0.956,0.429-0.956,0.959c0,0.529,0.426,0.955,0.956,0.955
+				C185.488,156.676,185.915,156.247,185.915,155.721z M185.915,170.522c0-0.529-0.427-0.959-0.956-0.959
+				c-0.53,0-0.956,0.43-0.956,0.959c0,0.53,0.426,0.956,0.956,0.956C185.488,171.478,185.915,171.049,185.915,170.522z"/>
+		</g>
+		<g>
+			<path class="st7" d="M209.474,203.017c3.966,0,3.966,6.986,0,6.986h-28.248c-3.966,0-3.966-6.986,0-6.986H209.474z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.484,165.348c-0.506,0.423-1.155,0.676-1.864,0.676c-1.609,0-2.911-1.302-2.911-2.911
+				c0-1.608,1.302-2.913,2.911-2.913c0.606,0,1.062,0.136,1.528,0.452h0.003c-0.1,0.473-0.153,0.983-0.153,1.532
+				c0,1.196,0.187,2.228,0.49,3.164H209.484z"/>
+		</g>
+		<g>
+			<path class="st5" d="M205.738,154.762c0.53,0,0.956,0.429,0.956,0.959c0,0.529-0.426,0.955-0.956,0.955
+				c-0.529,0-0.956-0.429-0.956-0.955C204.782,155.194,205.209,154.762,205.738,154.762z"/>
+		</g>
+		<g>
+			<path class="st5" d="M205.738,169.563c0.53,0,0.956,0.43,0.956,0.96c0,0.529-0.426,0.955-0.956,0.955
+				c-0.529,0-0.956-0.429-0.956-0.955C204.782,169.996,205.209,169.563,205.738,169.563z"/>
+		</g>
+		<g>
+			<path class="st7" d="M202.694,222.261l-0.283,4.762l-5.274-1.562c-1.672-2.561-2.921-5.458-3.65-8.542l4.449,2.375l1.848-4.389
+				C200.323,217.595,201.312,220.09,202.694,222.261z"/>
+		</g>
+		<g>
+			<path class="st7" d="M199.784,214.905l-1.848,4.389l-4.449-2.375c-0.526-2.224-0.783-4.548-0.726-6.916h6.54
+				C199.301,211.685,199.464,213.33,199.784,214.905z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,160.2c1.609,0,2.911,1.305,2.911,2.913c0,1.609-1.302,2.911-2.911,2.911
+				c-1.608,0-2.91-1.302-2.91-2.911C192.438,161.505,193.74,160.2,195.348,160.2z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,154.762c0.53,0,0.956,0.429,0.956,0.959c0,0.529-0.426,0.955-0.956,0.955
+				c-0.529,0-0.955-0.429-0.955-0.955C194.393,155.194,194.819,154.762,195.348,154.762z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,169.563c0.53,0,0.956,0.43,0.956,0.96c0,0.529-0.426,0.955-0.956,0.955
+				c-0.529,0-0.955-0.429-0.955-0.955C194.393,169.996,194.819,169.563,195.348,169.563z"/>
+		</g>
+		<g>
+			<path class="st5" d="M184.959,154.762c0.529,0,0.956,0.429,0.956,0.959c0,0.529-0.427,0.955-0.956,0.955
+				c-0.53,0-0.956-0.429-0.956-0.955C184.003,155.194,184.429,154.762,184.959,154.762z"/>
+		</g>
+		<g>
+			<path class="st5" d="M184.959,169.563c0.529,0,0.956,0.43,0.956,0.96c0,0.529-0.427,0.955-0.956,0.955
+				c-0.53,0-0.956-0.429-0.956-0.955C184.003,169.996,184.429,169.563,184.959,169.563z"/>
+		</g>
+		<g>
+			<path class="st7" d="M182.062,213.899c2.694-1.482,4.998,2.101,3.456,3.883c-1.112,1.052-2.714,3.473-2.93,6.637h-0.03
+				c0,3.14-5.914,3.406-5.598-1.799c0.653-5.105,3.32-7.559,4.879-8.581L182.062,213.899z"/>
+		</g>
+		<g>
+			<path class="st5" d="M183.081,160.2c1.608,0,2.91,1.305,2.91,2.913c0,1.609-1.302,2.911-2.91,2.911
+				c-0.71,0-1.359-0.253-1.865-0.676h-0.003c0.303-0.936,0.489-1.968,0.489-3.164c0-0.549-0.053-1.059-0.153-1.532h0.007
+				C182.022,160.336,182.475,160.2,183.081,160.2z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,210.502h-14.122c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.122
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,210.502,195.348,210.502z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,203.516h-14.122c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.122
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,203.516,195.348,203.516z"/>
+		</g>
+		<g>
+			<path class="st5" d="M181.226,210.502c-2.281,0-3.474-2.008-3.474-3.992c0-1.023,0.3-1.983,0.845-2.703
+				c0.639-0.844,1.548-1.289,2.629-1.289c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.767,0-1.384,0.301-1.833,0.895
+				c-0.408,0.539-0.642,1.305-0.642,2.1c0,1.441,0.774,2.994,2.475,2.994c0.276,0,0.5,0.224,0.5,0.499
+				S181.502,210.502,181.226,210.502z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,190.522h-16.233c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h16.233
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,190.522,195.348,190.522z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,183.536h-16.233c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h16.233
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,183.536,195.348,183.536z"/>
+		</g>
+		<g>
+			<path class="st5" d="M179.428,190.522c-2.281,0-3.474-2.008-3.474-3.991c0-1.023,0.3-1.983,0.845-2.703
+				c0.639-0.844,1.548-1.289,2.629-1.289c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-0.767,0-1.384,0.301-1.833,0.894
+				c-0.408,0.54-0.642,1.305-0.642,2.101c0,1.441,0.774,2.993,2.475,2.993c0.276,0,0.5,0.224,0.5,0.499
+				S179.704,190.522,179.428,190.522z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,144.868h-15.794c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h15.794
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,144.868,195.348,144.868z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,136.519h-15.794c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h15.794
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,136.519,195.348,136.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M181.226,242.634c-0.057,0-0.115-0.01-0.171-0.031c-0.092-0.033-2.282-0.854-4.479-3.318
+				c-2.009-2.254-4.404-6.376-4.404-13.215c0-6.838,2.395-10.961,4.404-13.215c2.197-2.466,4.386-3.287,4.479-3.32
+				c0.259-0.098,0.545,0.038,0.64,0.296c0.095,0.259-0.037,0.546-0.295,0.642c-0.336,0.125-8.229,3.195-8.229,15.598
+				c0,12.404,7.892,15.472,8.228,15.596c0.258,0.096,0.391,0.383,0.296,0.642C181.62,242.508,181.429,242.634,181.226,242.634z"/>
+		</g>
+		<g>
+			<path class="st5" d="M176.96,223.12c-0.021,0-0.042-0.002-0.064-0.005c-0.273-0.034-0.467-0.285-0.432-0.559
+				c0.679-5.312,3.487-7.878,5.101-8.936c0.231-0.148,0.541-0.086,0.692,0.145c0.151,0.23,0.086,0.54-0.144,0.691
+				c-1.47,0.963-4.029,3.312-4.657,8.227C177.423,222.936,177.208,223.12,176.96,223.12z"/>
+		</g>
+		<g>
+			<path class="st5" d="M182.588,224.919c-0.011,0-0.023-0.001-0.035-0.002c-0.275-0.019-0.483-0.257-0.464-0.532
+				c0.219-3.193,1.799-5.748,3.085-6.966c0.201-0.188,0.516-0.182,0.706,0.021c0.189,0.2,0.181,0.516-0.02,0.706
+				c-1.156,1.093-2.577,3.401-2.775,6.308C183.068,224.717,182.849,224.919,182.588,224.919z"/>
+		</g>
+		<g>
+			<path class="st5" d="M179.116,203.517c-0.036,0-0.072-0.004-0.108-0.012c-0.052-0.012-5.228-1.219-5.228-6.985
+				c0-5.766,5.175-6.974,5.228-6.984c0.268-0.064,0.535,0.11,0.594,0.379c0.06,0.269-0.109,0.535-0.378,0.596
+				c-0.182,0.041-4.445,1.061-4.445,6.01c0,4.95,4.263,5.969,4.445,6.01c0.269,0.061,0.438,0.327,0.378,0.596
+				C179.55,203.358,179.344,203.517,179.116,203.517z"/>
+		</g>
+		<g>
+			<path class="st5" d="M181.226,203.516h-2.111c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h2.111
+				c0.276,0,0.5,0.224,0.5,0.499S181.502,203.516,181.226,203.516z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,198.957c-2.448,0-3.688-1.297-4.782-2.441c-0.872-0.911-1.561-1.632-2.71-1.632
+				c-1.354,0-2.361,1.043-3.335,2.051c-0.96,0.994-1.954,2.022-3.295,2.022c-1.527,0-2.418-1.332-3.134-2.402
+				c-0.534-0.8-1.033-1.562-1.591-1.503c-1.398,0.133-1.72,1.514-1.733,1.573c-0.059,0.268-0.325,0.433-0.593,0.382
+				c-0.269-0.059-0.44-0.321-0.384-0.59c0.156-0.745,0.904-2.198,2.616-2.359c1.151-0.116,1.842,0.935,2.516,1.941
+				c0.644,0.963,1.31,1.96,2.303,1.96c0.917,0,1.723-0.835,2.577-1.719c1.066-1.104,2.275-2.354,4.053-2.354
+				c1.577,0,2.52,0.986,3.432,1.939c1.002,1.049,2.039,2.134,4.06,2.134c0.276,0,0.5,0.224,0.5,0.499
+				S195.624,198.957,195.348,198.957z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,118.354c-11.248,0-32.185,0-32.185-10.339c0-10.339,20.147-10.339,32.185-10.339
+				c0.276,0,0.5,0.224,0.5,0.5s-0.224,0.5-0.5,0.5c-11.664,0-31.186,0-31.186,9.34c0,9.341,21.063,9.341,31.186,9.341
+				c0.276,0,0.5,0.224,0.5,0.499S195.624,118.354,195.348,118.354z"/>
+		</g>
+		<g>
+			<path class="st5" d="M180.168,183.536c-0.082,0-0.165-0.02-0.241-0.062c-0.128-0.071-3.144-1.817-3.144-7.797
+				c0-0.154,0-0.31,0.011-0.461c0.105-2.743,1.197-4.649,2.253-6.493l0.175-0.306c0.585-1.026,1.141-2.044,1.514-3.22
+				c0.314-0.969,0.466-1.953,0.466-3.014c0-0.501-0.048-0.981-0.143-1.429c-0.262-1.324-0.889-2.376-1.526-3.315
+				c-0.165-0.243-0.332-0.481-0.5-0.72c-1.106-1.578-2.25-3.209-2.25-5.701c0-4.951,2.983-6.981,3.11-7.066
+				c0.229-0.151,0.54-0.089,0.692,0.142c0.152,0.229,0.089,0.54-0.141,0.692c-0.107,0.071-2.663,1.844-2.663,6.232
+				c0,2.177,1.005,3.61,2.069,5.127c0.17,0.243,0.341,0.486,0.508,0.733c0.697,1.026,1.383,2.183,1.678,3.676
+				c0.108,0.509,0.163,1.059,0.163,1.629c0,1.166-0.168,2.252-0.514,3.318c-0.401,1.267-0.984,2.336-1.597,3.409l-0.176,0.308
+				c-1.042,1.819-2.026,3.537-2.123,6.052c-0.01,0.144-0.009,0.275-0.009,0.406c0,5.347,2.526,6.863,2.633,6.926
+				c0.238,0.137,0.322,0.441,0.187,0.68C180.511,183.445,180.342,183.536,180.168,183.536z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,166.523c-1.88,0-3.41-1.529-3.41-3.41s1.53-3.411,3.41-3.411c1.88,0,3.41,1.53,3.41,3.411
+				S197.229,166.523,195.348,166.523z M195.348,160.699c-1.329,0-2.411,1.083-2.411,2.413s1.082,2.412,2.411,2.412
+				c1.33,0,2.412-1.082,2.412-2.412S196.678,160.699,195.348,160.699z"/>
+		</g>
+		<g>
+			<path class="st5" d="M190.177,156.221c-0.024,0-0.049-0.002-0.073-0.006c-0.273-0.04-0.461-0.294-0.421-0.567
+				c0.442-2.995,2.825-5.168,5.666-5.168c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-2.341,0-4.308,1.815-4.677,4.316
+				C190.634,156.042,190.421,156.221,190.177,156.221z"/>
+		</g>
+		<g>
+			<path class="st5" d="M179.997,157.625c-0.276,0-0.5-0.224-0.5-0.499c0-3.319,2.344-5.728,5.574-5.728
+				c2.75,0,4.931,1.653,5.558,4.213c0.003,0.013,0.005,0.025,0.007,0.038c0.006,0.032,0.01,0.067,0.01,0.098
+				c0,0.275-0.224,0.499-0.5,0.499c-0.247,0-0.452-0.179-0.492-0.413c-0.526-2.12-2.281-3.437-4.583-3.437
+				c-2.694,0-4.575,1.945-4.575,4.729C180.497,157.402,180.273,157.625,179.997,157.625z"/>
+		</g>
+		<g>
+			<path class="st5" d="M189.518,149.331c-0.11,0-0.22-0.036-0.312-0.111c-0.215-0.173-0.249-0.487-0.076-0.702
+				c1.494-1.855,3.47-2.72,6.219-2.72c0.276,0,0.5,0.224,0.5,0.499s-0.224,0.499-0.5,0.499c-2.457,0-4.134,0.725-5.441,2.349
+				C189.809,149.267,189.664,149.331,189.518,149.331z"/>
+		</g>
+		<g>
+			<path class="st5" d="M177.283,151.519c-0.058,0-0.116-0.011-0.173-0.031c-0.259-0.096-0.391-0.384-0.295-0.643
+				c0.872-2.353,3.231-3.968,6.157-4.214c2.705-0.226,5.371,0.818,6.822,1.784c0.23,0.153,0.292,0.463,0.14,0.692
+				c-0.153,0.229-0.464,0.291-0.692,0.14c-1.318-0.876-3.725-1.829-6.186-1.62c-2.575,0.217-4.558,1.549-5.305,3.565
+				C177.677,151.394,177.486,151.519,177.283,151.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M183.081,166.523c-0.798,0-1.574-0.28-2.186-0.791c-0.211-0.177-0.24-0.492-0.063-0.704
+				c0.177-0.211,0.49-0.24,0.704-0.063c0.438,0.366,0.973,0.561,1.545,0.561c1.329,0,2.411-1.082,2.411-2.412
+				s-1.082-2.413-2.411-2.413c-0.501,0-0.862,0.106-1.245,0.366c-0.229,0.154-0.539,0.095-0.694-0.134s-0.095-0.539,0.133-0.694
+				c0.549-0.371,1.105-0.536,1.805-0.536c1.88,0,3.41,1.53,3.41,3.411S184.961,166.523,183.081,166.523z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,157.175c-0.802,0-1.455-0.652-1.455-1.454c0-0.805,0.652-1.458,1.455-1.458
+				s1.455,0.653,1.455,1.458C196.803,156.523,196.15,157.175,195.348,157.175z M195.348,155.261c-0.251,0-0.456,0.207-0.456,0.46
+				c0,0.251,0.205,0.456,0.456,0.456c0.251,0,0.456-0.205,0.456-0.456C195.804,155.468,195.6,155.261,195.348,155.261z"/>
+		</g>
+		<g>
+			<path class="st5" d="M184.959,157.175c-0.803,0-1.456-0.652-1.456-1.454c0-0.805,0.653-1.458,1.456-1.458
+				s1.456,0.653,1.456,1.458C186.415,156.523,185.762,157.175,184.959,157.175z M184.959,155.261c-0.252,0-0.457,0.207-0.457,0.46
+				c0,0.251,0.205,0.456,0.457,0.456s0.457-0.205,0.457-0.456C185.416,155.468,185.211,155.261,184.959,155.261z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,175.76c-2.841,0-5.224-2.172-5.666-5.165c-0.041-0.273,0.148-0.527,0.421-0.567
+				c0.269-0.045,0.526,0.148,0.567,0.421c0.369,2.499,2.336,4.313,4.677,4.313c0.276,0,0.5,0.224,0.5,0.499
+				S195.624,175.76,195.348,175.76z"/>
+		</g>
+		<g>
+			<path class="st5" d="M185.072,174.841c-3.206,0-5.914-2.828-5.914-6.177c0-0.275,0.224-0.499,0.5-0.499s0.5,0.224,0.5,0.499
+				c0,2.807,2.251,5.179,4.915,5.179c2.31,0,4.066-1.321,4.583-3.448c0.004-0.018,0.01-0.036,0.016-0.054
+				c0.064-0.201,0.253-0.347,0.476-0.347c0.276,0,0.5,0.224,0.5,0.499c0,0.05-0.01,0.105-0.026,0.158
+				C189.992,173.197,187.816,174.841,185.072,174.841z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,180.445c-2.749,0-4.726-0.863-6.219-2.719c-0.173-0.215-0.139-0.529,0.076-0.702
+				c0.216-0.176,0.53-0.139,0.703,0.075c1.307,1.623,2.985,2.348,5.441,2.348c0.276,0,0.5,0.224,0.5,0.499
+				S195.624,180.445,195.348,180.445z"/>
+		</g>
+		<g>
+			<path class="st5" d="M183.736,179.64c-0.254,0-0.508-0.01-0.764-0.031c-2.959-0.25-5.257-1.813-6.147-4.182
+				c-0.096-0.258,0.028-0.558,0.285-0.656c0.255-0.099,0.539,0.017,0.639,0.272c0.005,0.012,0.019,0.052,0.023,0.064
+				c0.74,1.966,2.719,3.288,5.285,3.505c2.456,0.208,4.865-0.741,6.186-1.616c0.23-0.153,0.54-0.091,0.692,0.141
+				c0.152,0.229,0.089,0.539-0.141,0.691C188.477,178.701,186.171,179.64,183.736,179.64z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,171.977c-0.802,0-1.455-0.652-1.455-1.454c0-0.805,0.652-1.459,1.455-1.459
+				s1.455,0.654,1.455,1.459C196.803,171.324,196.15,171.977,195.348,171.977z M195.348,170.062c-0.251,0-0.456,0.207-0.456,0.461
+				c0,0.256,0.2,0.456,0.456,0.456c0.251,0,0.456-0.205,0.456-0.456C195.804,170.269,195.6,170.062,195.348,170.062z"/>
+		</g>
+		<g>
+			<path class="st5" d="M184.959,171.977c-0.803,0-1.456-0.652-1.456-1.454c0-0.805,0.653-1.459,1.456-1.459
+				s1.456,0.654,1.456,1.459C186.415,171.324,185.762,171.977,184.959,171.977z M184.959,170.062c-0.252,0-0.457,0.207-0.457,0.461
+				c0,0.256,0.201,0.456,0.457,0.456c0.252,0,0.457-0.205,0.457-0.456C185.416,170.269,185.211,170.062,184.959,170.062z"/>
+		</g>
+		<g>
+			<path class="st5" d="M179.917,144.868c-2.603,0-3.964-2.351-3.964-4.674c0-1.199,0.342-2.324,0.964-3.167
+				c0.625-0.848,1.479-1.352,2.491-1.477c-0.066-1.567-0.492-3.635-1.99-5.372c-0.916-1.301-2.458-2.228-4.243-3.3
+				c-1.717-1.031-3.662-2.199-5.624-3.979c-4.387-3.978-4.387-11.902-4.387-14.886c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5
+				c0,2.862,0,10.465,4.059,14.146c1.889,1.713,3.79,2.855,5.467,3.862c1.883,1.131,3.509,2.107,4.516,3.543
+				c1.823,2.11,2.212,4.679,2.212,6.454c0,0.275-0.224,0.499-0.5,0.499c-0.905,0-1.665,0.382-2.196,1.103
+				c-0.488,0.662-0.769,1.6-0.769,2.573c0,1.771,0.928,3.676,2.965,3.676c0.276,0,0.5,0.224,0.5,0.499
+				S180.193,144.868,179.917,144.868z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.474,210.502h-14.125c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.125
+				c0.275,0,0.499,0.224,0.499,0.499S209.749,210.502,209.474,210.502z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.474,203.516h-14.125c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h14.125
+				c0.275,0,0.499,0.224,0.499,0.499S209.749,203.516,209.474,203.516z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.474,210.502c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499
+				c0.768,0,1.384-0.301,1.833-0.895c0.408-0.539,0.643-1.305,0.643-2.1c0-1.441-0.774-2.994-2.476-2.994
+				c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c2.281,0,3.475,2.008,3.475,3.992c0,1.023-0.3,1.983-0.845,2.703
+				C211.465,210.057,210.556,210.502,209.474,210.502z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.582,190.522h-16.234c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h16.234
+				c0.275,0,0.499,0.224,0.499,0.499S211.857,190.522,211.582,190.522z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.582,183.536h-16.234c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h16.234
+				c0.275,0,0.499,0.224,0.499,0.499S211.857,183.536,211.582,183.536z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.272,190.522c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499
+				c0.768,0,1.384-0.301,1.832-0.894c0.409-0.54,0.643-1.305,0.643-2.1c0-1.442-0.774-2.994-2.475-2.994
+				c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c2.28,0,3.474,2.008,3.474,3.992c0,1.022-0.3,1.982-0.845,2.702
+				C213.263,190.076,212.354,190.522,211.272,190.522z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.143,144.868h-15.794c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h15.794
+				c0.275,0,0.499,0.224,0.499,0.499S211.418,144.868,211.143,144.868z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.143,136.519h-15.794c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499h15.794
+				c0.275,0,0.499,0.224,0.499,0.499S211.418,136.519,211.143,136.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.474,242.634c-0.203,0-0.394-0.126-0.468-0.327c-0.096-0.259,0.037-0.546,0.295-0.642
+				c0.036-0.013,3.577-1.366,5.981-5.759c0.892-1.628,1.527-3.483,1.889-5.516c0.238-1.35,0.359-2.805,0.359-4.321
+				c0-12.439-8.146-15.567-8.229-15.598c-0.259-0.095-0.392-0.382-0.297-0.641s0.38-0.394,0.641-0.297
+				c0.092,0.033,2.282,0.854,4.479,3.32c2.01,2.254,4.404,6.377,4.404,13.215c0,1.575-0.125,3.088-0.373,4.496
+				c-0.382,2.14-1.053,4.098-1.996,5.821c-2.595,4.738-6.355,6.158-6.514,6.216C209.589,242.624,209.53,242.634,209.474,242.634z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.582,203.517c-0.229,0-0.436-0.159-0.487-0.392c-0.06-0.269,0.11-0.535,0.379-0.596
+				c0.182-0.041,4.448-1.06,4.448-6.01c0-4.949-4.267-5.969-4.448-6.01c-0.269-0.061-0.438-0.327-0.379-0.596
+				c0.062-0.268,0.322-0.445,0.595-0.379c0.053,0.011,5.23,1.219,5.23,6.984c0,5.767-5.178,6.974-5.23,6.985
+				C211.653,203.513,211.617,203.517,211.582,203.517z"/>
+		</g>
+		<g>
+			<path class="st5" d="M211.582,203.516h-2.108c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499h2.108
+				c0.275,0,0.499,0.224,0.499,0.499S211.857,203.516,211.582,203.516z"/>
+		</g>
+		<g>
+			<path class="st5" d="M209.474,198.957c-1.34,0-2.333-1.027-3.293-2.021c-0.975-1.009-1.981-2.052-3.337-2.052
+				c-1.149,0-1.838,0.721-2.709,1.632c-1.095,1.145-2.336,2.441-4.787,2.441c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499
+				c2.024,0,3.061-1.085,4.065-2.134c0.912-0.954,1.854-1.939,3.431-1.939c1.779,0,2.988,1.251,4.055,2.355
+				c0.854,0.883,1.659,1.718,2.575,1.718c0.994,0,1.66-0.997,2.304-1.96c0.674-1.008,1.365-2.067,2.516-1.941
+				c1.712,0.161,2.46,1.614,2.617,2.359c0.057,0.27-0.116,0.535-0.387,0.592c-0.267,0.054-0.532-0.115-0.591-0.384
+				c-0.014-0.062-0.336-1.441-1.733-1.573c-0.545-0.049-1.057,0.703-1.591,1.502C211.893,197.625,211.001,198.957,209.474,198.957z"
+				/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,118.354c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c10.123,0,31.186,0,31.186-9.341
+				c0-9.34-19.522-9.34-31.186-9.34c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c12.038,0,32.184,0,32.184,10.339
+				C227.532,118.354,206.596,118.354,195.348,118.354z"/>
+		</g>
+		<g>
+			<path class="st5" d="M210.53,183.537c-0.175,0-0.345-0.093-0.437-0.257c-0.134-0.24-0.048-0.543,0.19-0.678
+				c0.116-0.067,2.631-1.589,2.631-6.926c0-0.136-0.004-0.272-0.01-0.405c-0.097-2.516-1.082-4.234-2.125-6.054l-0.175-0.306
+				c-0.613-1.077-1.196-2.147-1.598-3.414c-0.344-1.061-0.512-2.146-0.512-3.314c0-0.572,0.055-1.123,0.164-1.636
+				c0.294-1.486,0.979-2.643,1.677-3.669c0.166-0.246,0.337-0.49,0.508-0.732c1.064-1.518,2.07-2.95,2.07-5.128
+				c0-4.39-2.554-6.161-2.662-6.234c-0.229-0.153-0.29-0.463-0.137-0.692c0.151-0.228,0.463-0.292,0.689-0.139
+				c0.127,0.084,3.107,2.115,3.107,7.065c0,2.493-1.145,4.124-2.251,5.702c-0.167,0.237-0.335,0.477-0.498,0.719
+				c-0.639,0.939-1.265,1.991-1.525,3.309c-0.096,0.452-0.145,0.933-0.145,1.436c0,1.062,0.152,2.046,0.465,3.01
+				c0.373,1.177,0.929,2.196,1.514,3.224l0.175,0.304c1.057,1.844,2.149,3.751,2.256,6.511c0.006,0.146,0.01,0.296,0.01,0.445
+				c0,5.979-3.012,7.726-3.14,7.797C210.696,183.517,210.613,183.537,210.53,183.537z"/>
+		</g>
+		<g>
+			<path class="st5" d="M200.522,156.221c-0.243,0-0.456-0.179-0.493-0.427c-0.372-2.501-2.341-4.316-4.681-4.316
+				c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.84,0,5.224,2.173,5.669,5.168c0.04,0.272-0.147,0.526-0.421,0.567
+				C200.572,156.219,200.547,156.221,200.522,156.221z"/>
+		</g>
+		<g>
+			<path class="st5" d="M210.703,157.625c-0.275,0-0.499-0.224-0.499-0.499c0-2.784-1.883-4.729-4.579-4.729
+				c-2.302,0-4.057,1.316-4.583,3.437c-0.041,0.234-0.245,0.413-0.492,0.413c-0.275,0-0.499-0.224-0.499-0.499
+				c0-0.03,0.003-0.065,0.009-0.098c0.002-0.013,0.005-0.025,0.008-0.038c0.627-2.56,2.809-4.213,5.558-4.213
+				c3.231,0,5.577,2.408,5.577,5.728C211.202,157.402,210.979,157.625,210.703,157.625z"/>
+		</g>
+		<g>
+			<path class="st5" d="M201.179,149.331c-0.146,0-0.291-0.064-0.39-0.187c-1.306-1.624-2.983-2.349-5.441-2.349
+				c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.75,0,4.727,0.864,6.22,2.72c0.173,0.216,0.139,0.529-0.076,0.703
+				C201.399,149.295,201.289,149.331,201.179,149.331z"/>
+		</g>
+		<g>
+			<path class="st5" d="M213.414,151.519c-0.203,0-0.395-0.125-0.469-0.327c-0.875-2.373-3.314-3.397-5.305-3.564
+				c-2.447-0.212-4.864,0.744-6.186,1.62c-0.229,0.151-0.54,0.09-0.692-0.14c-0.152-0.23-0.09-0.54,0.14-0.692
+				c1.456-0.965,4.124-2.014,6.822-1.784c2.93,0.247,5.29,1.861,6.158,4.215c0.096,0.259-0.037,0.546-0.296,0.642
+				C213.53,151.508,213.472,151.519,213.414,151.519z"/>
+		</g>
+		<g>
+			<path class="st5" d="M207.616,166.523c-1.88,0-3.409-1.529-3.409-3.41s1.529-3.411,3.409-3.411c0.701,0,1.259,0.165,1.808,0.536
+				c0.229,0.154,0.289,0.465,0.135,0.693c-0.154,0.23-0.467,0.289-0.693,0.135c-0.385-0.26-0.746-0.366-1.249-0.366
+				c-1.329,0-2.411,1.083-2.411,2.413s1.082,2.412,2.411,2.412c0.572,0,1.106-0.194,1.545-0.561
+				c0.211-0.177,0.526-0.149,0.704,0.063c0.177,0.212,0.148,0.527-0.063,0.704C209.189,166.242,208.413,166.523,207.616,166.523z"/>
+		</g>
+		<g>
+			<path class="st5" d="M205.738,157.175c-0.803,0-1.455-0.652-1.455-1.454c0-0.805,0.652-1.458,1.455-1.458
+				s1.455,0.653,1.455,1.458C207.193,156.523,206.541,157.175,205.738,157.175z M205.738,155.261c-0.252,0-0.457,0.207-0.457,0.46
+				c0,0.251,0.205,0.456,0.457,0.456s0.457-0.205,0.457-0.456C206.195,155.468,205.99,155.261,205.738,155.261z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,175.76c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.34,0,4.309-1.814,4.681-4.313
+				c0.041-0.273,0.302-0.463,0.567-0.421c0.273,0.041,0.461,0.295,0.421,0.567C200.572,173.588,198.188,175.76,195.348,175.76z"/>
+		</g>
+		<g>
+			<path class="st5" d="M205.625,174.841c-2.744,0-4.92-1.644-5.549-4.189c-0.017-0.053-0.025-0.108-0.025-0.158
+				c0-0.275,0.224-0.499,0.499-0.499c0.223,0,0.411,0.146,0.476,0.347c0.007,0.018,0.012,0.035,0.017,0.054
+				c0.518,2.127,2.273,3.448,4.583,3.448c2.664,0,4.915-2.372,4.915-5.179c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499
+				C211.538,172.013,208.83,174.841,205.625,174.841z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.348,180.445c-0.276,0-0.5-0.224-0.5-0.499s0.224-0.499,0.5-0.499c2.457,0,4.135-0.725,5.442-2.348
+				c0.174-0.214,0.486-0.25,0.702-0.075c0.215,0.173,0.249,0.487,0.075,0.702C200.074,179.581,198.099,180.445,195.348,180.445z"/>
+		</g>
+		<g>
+			<path class="st5" d="M206.963,179.64c-2.433,0-4.74-0.938-6.06-1.811c-0.23-0.152-0.293-0.462-0.142-0.692
+				c0.153-0.231,0.462-0.293,0.692-0.142c1.323,0.875,3.739,1.823,6.187,1.617c2.568-0.217,4.548-1.539,5.296-3.536l0.943,0.328
+				l-0.466-0.18l0.465,0.183c-0.88,2.352-3.235,3.954-6.154,4.201C207.47,179.63,207.216,179.64,206.963,179.64z"/>
+		</g>
+		<g>
+			<path class="st5" d="M205.738,171.977c-0.803,0-1.455-0.652-1.455-1.454c0-0.805,0.652-1.459,1.455-1.459
+				s1.455,0.654,1.455,1.459C207.193,171.324,206.541,171.977,205.738,171.977z M205.738,170.062c-0.252,0-0.457,0.207-0.457,0.461
+				c0,0.251,0.205,0.456,0.457,0.456s0.457-0.205,0.457-0.456C206.195,170.269,205.99,170.062,205.738,170.062z"/>
+		</g>
+		<g>
+			<path class="st5" d="M210.78,144.868c-0.275,0-0.499-0.224-0.499-0.499s0.224-0.499,0.499-0.499c0.906,0,1.666-0.382,2.198-1.103
+				c0.488-0.662,0.769-1.6,0.769-2.573c0-1.771-0.929-3.676-2.967-3.676c-0.275,0-0.499-0.224-0.499-0.499
+				c0-1.776,0.389-4.345,2.242-6.493c0.978-1.396,2.603-2.372,4.484-3.503c1.678-1.008,3.578-2.149,5.467-3.863
+				c4.06-3.676,4.06-11.282,4.06-14.146c0-0.276,0.224-0.5,0.499-0.5s0.499,0.224,0.499,0.5c0,2.984,0,10.912-4.387,14.886
+				c-1.961,1.779-3.906,2.948-5.623,3.979c-1.784,1.072-3.326,1.998-4.212,3.26c-1.526,1.772-1.954,3.843-2.021,5.412
+				c2.271,0.285,3.456,2.477,3.456,4.643c0,1.199-0.342,2.324-0.964,3.167C213.054,144.348,212.017,144.868,210.78,144.868z"/>
+		</g>
+		<g>
+			<path class="st5" d="M185.518,218.281c-0.116,0-0.232-0.04-0.327-0.121c-0.209-0.181-0.231-0.496-0.051-0.705
+				c0.643-0.742,0.389-1.86-0.194-2.581c-0.261-0.322-1.225-1.315-2.643-0.538c-0.242,0.134-0.545,0.046-0.678-0.197
+				c-0.133-0.241-0.045-0.545,0.197-0.678c1.375-0.754,2.906-0.446,3.901,0.785c0.844,1.044,1.175,2.705,0.174,3.863
+				C185.797,218.224,185.658,218.281,185.518,218.281z"/>
+		</g>
+		<g>
+			<path class="st5" d="M202.694,222.761c-0.165,0-0.326-0.082-0.421-0.231c-1.424-2.235-2.426-4.768-2.979-7.527
+				c-0.326-1.607-0.492-3.29-0.492-4.999c0-0.275,0.224-0.499,0.499-0.499s0.499,0.224,0.499,0.499c0,1.643,0.16,3.258,0.474,4.802
+				c0.529,2.64,1.485,5.058,2.842,7.188c0.148,0.232,0.08,0.542-0.152,0.689C202.88,222.736,202.786,222.761,202.694,222.761z"/>
+		</g>
+		<g>
+			<path class="st5" d="M215.721,236.646c-3.951,0-7.86-1.134-11.306-3.279c-3.009-1.869-5.67-4.509-7.697-7.634
+				c-1.728-2.646-2.979-5.573-3.717-8.698c-0.547-2.315-0.795-4.685-0.739-7.043c0.007-0.276,0.212-0.484,0.512-0.487
+				c0.275,0.006,0.494,0.235,0.487,0.511c-0.055,2.273,0.185,4.558,0.712,6.789c0.712,3.013,1.917,5.834,3.582,8.384
+				c1.949,3.004,4.503,5.538,7.388,7.331c3.287,2.047,7.015,3.129,10.778,3.129c0.275,0,0.499,0.224,0.499,0.499
+				S215.996,236.646,215.721,236.646z"/>
+		</g>
+		<g>
+			<path class="st5" d="M197.936,219.793c-0.081,0-0.162-0.02-0.235-0.059l-4.449-2.375c-0.243-0.13-0.335-0.433-0.205-0.676
+				s0.431-0.335,0.676-0.205l3.965,2.117l1.637-3.886c0.107-0.253,0.399-0.375,0.654-0.266c0.254,0.106,0.373,0.399,0.266,0.654
+				l-1.849,4.39c-0.054,0.129-0.16,0.229-0.293,0.276C198.049,219.784,197.992,219.793,197.936,219.793z"/>
+		</g>
+		<g>
+			<path class="st8" d="M205.025,111.941c0.568,0,2.19-0.417,2.19-2.064c0-1.647-1.562-2.064-2.19-2.064c-0.291,0-19.521,0-19.792,0
+				c-0.568,0-2.19,0.417-2.19,2.064c0,1.647,1.562,2.064,2.19,2.064H205.025z"/>
+			<path class="st5" d="M205.025,112.441h-19.792c-1.04,0-2.69-0.696-2.69-2.563c0-1.937,1.812-2.564,2.69-2.564h19.792
+				c1.04,0,2.689,0.696,2.689,2.564C207.715,111.814,205.903,112.441,205.025,112.441z M185.233,108.313
+				c-0.017,0-1.69,0.092-1.69,1.564c0,1.496,1.673,1.563,1.69,1.563h19.792c0.017,0,1.689-0.092,1.689-1.563
+				c0-1.497-1.673-1.564-1.689-1.564H185.233z"/>
+		</g>
+		<g>
+			<path class="st8" d="M205.025,59.595c0.568,0,2.19-0.417,2.19-2.064c0-1.647-1.562-2.064-2.19-2.064h-19.792
+				c-0.568,0-2.19,0.417-2.19,2.064c0,1.647,1.562,2.064,2.19,2.064H205.025z"/>
+			<path class="st5" d="M205.025,60.094h-19.792c-1.04,0-2.69-0.696-2.69-2.564c0-1.937,1.812-2.564,2.69-2.564h19.792
+				c1.04,0,2.689,0.696,2.689,2.564C207.715,59.468,205.903,60.094,205.025,60.094z M185.233,55.967c-0.017,0-1.69,0.092-1.69,1.564
+				c0,1.497,1.673,1.564,1.69,1.564h19.792c0.017,0,1.689-0.092,1.689-1.564c0-1.497-1.673-1.564-1.689-1.564H185.233z"/>
+		</g>
+		<g>
+			<path class="st9" d="M208.099,61.674c2.662,1.994,3.525,4.861,2.662,8.141c-1.592,6.042-12.456,9.532-12.531,13.891v0.045
+				c0.075,4.359,10.933,7.85,12.531,13.891c0.863,3.279,0,6.147-2.662,8.141c-2.662,1.994-7.167,2.792-12.807,2.792h-0.216
+				c-5.64,0-10.145-0.798-12.806-2.792c-2.662-1.994-3.526-4.862-2.657-8.141c1.592-6.042,12.455-9.532,12.525-13.891v-0.045
+				c-0.075-4.359-10.933-7.85-12.525-13.891c-0.864-3.279-0.005-6.147,2.657-8.141c2.661-1.994,7.166-2.792,12.806-2.792h0.216
+				C200.932,58.881,205.437,59.68,208.099,61.674z M204.799,104.247c1.326-0.663,1.487-1.522,0.497-2.2c0,0-6.639-4.51-9.999-4.51
+				h-0.11c-3.36,0-10,4.51-10,4.51c-0.989,0.678-0.833,1.537,0.493,2.2c1.406,0.703,3.229,1.331,9.456,1.331h0.211
+				c6.228,0,8.051-0.628,9.457-1.331H204.799z M195.88,83.294c0-0.497-0.402-0.904-0.904-0.904s-0.904,0.407-0.904,0.904
+				s0.402,0.904,0.904,0.904S195.88,83.792,195.88,83.294z M195.88,90.642c0-0.497-0.402-0.904-0.904-0.904
+				s-0.904,0.407-0.904,0.904s0.402,0.904,0.904,0.904S195.88,91.139,195.88,90.642z"/>
+		</g>
+		<g>
+			<path class="st10" d="M206.487,94.805c2.656,2.732,3.525,5.731,1.838,6.208c-1.909,0.532-1.833-2.014-5.289-4.686
+				c-3.088-2.386-3.566-3.455-2.697-4.42C201.103,91.054,203.207,91.435,206.487,94.805z"/>
+		</g>
+		<g>
+			<path class="st6" d="M205.291,102.052c0.99,0.678,0.834,1.537-0.497,2.2c-1.406,0.703-3.229,1.331-9.457,1.331h-0.211
+				c-6.227,0-8.05-0.628-9.456-1.331c-1.326-0.663-1.482-1.522-0.493-2.2c0,0,6.64-4.51,10-4.51h0.11c3.36,0,9.999,4.51,9.999,4.51
+				H205.291z"/>
+		</g>
+		<g>
+			<path class="st6" d="M203.418,71.663c0.789,0,1.115,0.934,0.472,1.361c0,0-5.83,4.867-8.819,4.867
+				c-2.988,0-9.02-4.867-9.02-4.867c-0.637-0.427-0.316-1.361,0.473-1.361h16.889H203.418z"/>
+		</g>
+		<g>
+			<path class="st6" d="M194.976,82.395c0.502,0,0.904,0.407,0.904,0.904s-0.402,0.904-0.904,0.904s-0.904-0.407-0.904-0.904
+				S194.474,82.395,194.976,82.395z"/>
+		</g>
+		<g>
+			<path class="st6" d="M194.976,89.743c0.502,0,0.904,0.407,0.904,0.904s-0.402,0.904-0.904,0.904s-0.904-0.407-0.904-0.904
+				S194.474,89.743,194.976,89.743z"/>
+		</g>
+		<g>
+			<path class="st10" d="M207.491,63.653c2.346,2.802,1.798,7.774-0.261,7.754c-1.798-0.015-0.14-1.728-1.416-4.515
+				s-4.169-3.069-3.234-4.696c0.693-1.215,3.234-0.547,4.911,1.462V63.653z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.071,109.076c-6.222,0-10.509-0.946-13.105-2.892c-2.76-2.067-3.769-5.146-2.841-8.668
+				c0.865-3.282,4.274-5.814,7.282-8.048c2.671-1.983,5.194-3.857,5.226-5.725c0.005-0.276,0.243-0.496,0.509-0.491
+				c0.276,0.005,0.496,0.232,0.491,0.509c-0.041,2.359-2.755,4.375-5.63,6.51c-2.876,2.136-6.136,4.557-6.912,7.5
+				c-0.829,3.147,0.026,5.78,2.474,7.613c2.383,1.787,6.591,2.692,12.506,2.692c0.276,0,0.5,0.224,0.5,0.5
+				S195.347,109.076,195.071,109.076z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.292,109.076c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c5.914,0,10.122-0.906,12.507-2.692
+				c2.449-1.835,3.307-4.468,2.478-7.613c-0.777-2.942-4.038-5.363-6.914-7.499c-2.876-2.135-5.592-4.152-5.632-6.512
+				c-0.005-0.276,0.216-0.503,0.491-0.508c0.256-0.012,0.504,0.215,0.509,0.492c0.031,1.867,2.556,3.741,5.228,5.725
+				c3.009,2.234,6.418,4.765,7.285,8.046c0.928,3.521-0.082,6.599-2.845,8.669C205.801,108.13,201.514,109.076,195.292,109.076z"/>
+		</g>
+		<g>
+			<path class="st5" d="M198.23,84.229c-0.002,0-0.003,0-0.004,0c-0.274-0.002-0.496-0.203-0.496-0.478v-0.045
+				c0.04-2.369,2.756-4.385,5.632-6.52c2.876-2.136,6.137-4.557,6.914-7.5c0.829-3.145-0.028-5.777-2.478-7.613
+				c-2.386-1.786-6.593-2.692-12.507-2.692c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c6.221,0,10.508,0.946,13.106,2.892
+				c2.763,2.07,3.772,5.149,2.845,8.669c-0.867,3.282-4.276,5.813-7.285,8.047c-2.672,1.984-5.196,3.858-5.228,5.726
+				C198.726,83.988,198.503,84.229,198.23,84.229z"/>
+		</g>
+		<g>
+			<path class="st5" d="M192.133,83.751l-0.5-0.045c-0.032-1.859-2.555-3.732-5.226-5.716c-3.008-2.234-6.417-4.766-7.282-8.048
+				c-0.928-3.523,0.081-6.602,2.841-8.669c2.597-1.946,6.884-2.892,13.105-2.892c0.276,0,0.5,0.224,0.5,0.5s-0.224,0.5-0.5,0.5
+				c-5.914,0-10.122,0.906-12.506,2.692c-2.447,1.833-3.303,4.466-2.474,7.614c0.776,2.943,4.036,5.364,6.912,7.5
+				c2.875,2.135,5.589,4.151,5.63,6.51L192.133,83.751z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.071,78.39c-3.128,0-9.082-4.774-9.334-4.977c-0.431-0.287-0.63-0.827-0.471-1.349
+				c0.164-0.539,0.67-0.901,1.258-0.901h16.894c0.591,0,1.098,0.364,1.261,0.905c0.158,0.522-0.043,1.061-0.513,1.373
+				C203.967,73.612,198.205,78.39,195.071,78.39z M186.524,72.163c-0.226,0-0.288,0.147-0.301,0.192
+				c-0.021,0.069-0.02,0.169,0.107,0.254c1.675,1.349,6.437,4.781,8.741,4.781c2.301,0,6.915-3.429,8.499-4.75
+				c0.146-0.101,0.183-0.185,0.152-0.284c-0.028-0.094-0.123-0.194-0.304-0.194H186.524z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.126,106.078c-6.383,0-8.221-0.655-9.68-1.384c-1.107-0.553-1.375-1.184-1.405-1.616
+				c-0.026-0.374,0.102-0.929,0.853-1.444c0.278-0.188,6.809-4.597,10.283-4.597c0.276,0,0.5,0.224,0.5,0.5s-0.224,0.5-0.5,0.5
+				c-3.169,0-9.654,4.379-9.719,4.423c-0.276,0.189-0.43,0.39-0.419,0.549c0.013,0.182,0.244,0.485,0.855,0.79
+				c1.347,0.674,3.067,1.278,9.232,1.278c0.276,0,0.5,0.224,0.5,0.5S195.402,106.078,195.126,106.078z"/>
+		</g>
+		<g>
+			<path class="st5" d="M195.337,106.078c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c6.166,0,7.886-0.604,9.233-1.278
+				c0.613-0.307,0.846-0.61,0.857-0.792c0.011-0.158-0.142-0.358-0.419-0.548c-0.063-0.043-6.549-4.422-9.717-4.422
+				c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c3.475,0,10.004,4.409,10.28,4.596c0.752,0.515,0.879,1.068,0.854,1.442
+				c-0.029,0.432-0.298,1.063-1.408,1.618C203.559,105.423,201.721,106.078,195.337,106.078z"/>
+		</g>
+		<g>
+			<path class="st5" d="M194.976,84.703c-0.774,0-1.404-0.63-1.404-1.404c0-0.774,0.63-1.404,1.404-1.404
+				c0.774,0,1.404,0.63,1.404,1.404C196.38,84.073,195.75,84.703,194.976,84.703z M194.976,82.895c-0.223,0-0.404,0.181-0.404,0.404
+				c0,0.223,0.181,0.404,0.404,0.404c0.223,0,0.404-0.181,0.404-0.404C195.38,83.076,195.199,82.895,194.976,82.895z"/>
+		</g>
+		<g>
+			<path class="st5" d="M194.976,92.051c-0.774,0-1.404-0.63-1.404-1.404c0-0.774,0.63-1.404,1.404-1.404
+				c0.774,0,1.404,0.63,1.404,1.404C196.38,91.421,195.75,92.051,194.976,92.051z M194.976,90.243c-0.223,0-0.404,0.181-0.404,0.404
+				c0,0.223,0.181,0.404,0.404,0.404c0.223,0,0.404-0.181,0.404-0.404C195.38,90.424,195.199,90.243,194.976,90.243z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/assets/images/simple-illustrations/simple-illustration__realtimereports.svg b/assets/images/simple-illustrations/simple-illustration__realtimereports.svg
new file mode 100644
index 0000000000000..40fc3082a0286
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__realtimereports.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000007408140504626337100000002663035559610485891_);}
+	.st1{fill:#FBCCFF;}
+	.st2{fill:none;stroke:#002140;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}
+	.st3{fill:#FFFAF0;}
+	.st4{fill:#FFF2B2;}
+	.st5{fill:#00B268;}
+	.st6{fill:#8EECC4;}
+	.st7{fill:#085239;}
+	.st8{fill:#FED607;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" y="0" width="68" height="68"/>
+	</defs>
+	<clipPath id="SVGID_00000006682679630598397630000016367162915341145483_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000006682679630598397630000016367162915341145483_);">
+		<path class="st1" d="M10.436,43.988l-4.283-2.759L5.45,42.08l0.454,4.673l-4.463,3.924l1.033,0.751l4.549,1.407l1.872,5.053
+			l1.136-0.358l3.134-3.9l5.006-0.65l0.237-0.885l-3.053-4.515l0.97-5.049l-0.768-0.3L10.436,43.988z"/>
+		<path class="st2" d="M6.936,41.407l3.742,2.5c0.228,0.152,0.52,0.182,0.776,0.079l4.181-1.666
+			c0.646-0.256,1.304,0.338,1.116,1.005l-1.221,4.333c-0.077,0.265-0.016,0.55,0.161,0.763l2.876,3.459
+			c0.443,0.533,0.083,1.345-0.61,1.371l-4.499,0.177c-0.274,0.009-0.528,0.156-0.676,0.39l-2.403,3.807
+			c-0.369,0.587-1.252,0.493-1.492-0.157l-1.558-4.22c-0.096-0.26-0.312-0.455-0.58-0.521l-4.363-1.109
+			c-0.671-0.171-0.856-1.038-0.312-1.469l3.533-2.788c0.217-0.17,0.334-0.436,0.319-0.712l-0.294-4.49
+			c-0.043-0.692,0.724-1.135,1.301-0.751L6.936,41.407z"/>
+		<path class="st3" d="M54.712,26.073l-0.072-3.245c0,0-1.21-2.73-1.804-2.815C52.243,19.929,33.5,13.376,33.5,13.376
+			s-1.732,0.434-2.381,0.577c-0.649,0.144-17.24,5.845-17.24,5.845s-1.588,0.721-2.019,2.524s-0.577,4.184-0.577,4.184
+			s-0.434,0.434-0.505,1.442c-0.072,1.011,0.072,21.353,0.072,21.353s-0.144,1.226,1.37,1.298c1.517,0.072,42.853,0,42.853,0
+			s0.792-0.649,0.792-1.442c0-0.793,0.287-22.149,0.287-22.149s-0.649-1.083-1.442-0.939L54.712,26.073z"/>
+		<path class="st4" d="M23.331,37.039l1.226-10.678L11.57,26.433c0,0-0.793,0.215-0.793,0.864v0.649l12.554,9.09V37.039z"/>
+		<path class="st4" d="M49.879,31.703l6.275-4.69c0,0-0.362-1.155-1.441-0.939c-1.08,0.215-20.026,0.137-20.026,0.137l0.594,3.102
+			L49.879,31.703L49.879,31.703z"/>
+		<path class="st5" d="M49.553,22.962l-12.42,0.349L34.99,13.97l-1.393-2.678l-21.523-0.323c0,0,2.678,9.745,2.462,13.92
+			c-0.215,4.175-0.607,5.287-0.607,5.287l9.321,7.081l17.573,0.336l0.372,0.789h18.418c0,0,0.427-8.137-1.605-11.135
+			c-2.032-2.997-4.175-3.855-4.175-3.855l-4.282-0.427V22.962z"/>
+		<path class="st6" d="M18.768,18.037c1.036,0,1.875-0.84,1.875-1.875c0-1.036-0.84-1.875-1.875-1.875s-1.875,0.84-1.875,1.875
+			C16.892,17.198,17.732,18.037,18.768,18.037z"/>
+		<path class="st6" d="M30.326,17.698c1.118,0,2.025-0.791,2.025-1.768s-0.907-1.768-2.025-1.768c-1.119,0-2.025,0.792-2.025,1.768
+			S29.207,17.698,30.326,17.698z"/>
+		<path class="st6" d="M30.708,23.497c0,0-1.712-2.355-4.282-1.712c-2.57,0.642-4.713,5.248-4.817,7.068
+			c-0.108,1.82,1.618,6.849,1.618,6.849l1.06-1.389c0,0,1.07-8.78,6.425-10.815H30.708z"/>
+		<path class="st6" d="M50.73,23.604l-11.35-0.108c0,0,3.105,3.213,6.317,2.997C48.91,26.279,50.73,23.604,50.73,23.604z"/>
+		<path class="st6" d="M45.11,36.666c1.153,0,2.087-0.935,2.087-2.087c0-1.153-0.934-2.087-2.087-2.087
+			c-1.153,0-2.087,0.935-2.087,2.087C43.023,35.732,43.957,36.666,45.11,36.666z"/>
+		<path class="st6" d="M54.865,36.438c1.153,0,2.087-0.935,2.087-2.087c0-1.153-0.935-2.087-2.087-2.087s-2.087,0.935-2.087,2.087
+			C52.777,35.504,53.712,36.438,54.865,36.438z"/>
+		<path class="st7" d="M23.8,36.856l17.097,0.036c0,0,0.792-13.372-7.622-13.395c-10.271,0.444-9.478,13.356-9.478,13.356
+			L23.8,36.856z"/>
+		<path class="st2" d="M14.205,26.246h-2.463c-0.623,0-1.128,0.506-1.128,1.128v22.191c0,0.623,0.505,1.128,1.128,1.128h43.156
+			c0.623,0,1.128-0.506,1.128-1.128v-10.89"/>
+		<path class="st2" d="M16.475,50.639l6.781-13.382"/>
+		<path class="st2" d="M43.375,38.757l5.62,11.852"/>
+		<path class="st2" d="M35.362,13.974l16.878,5.959c1.429,0.506,2.387,1.826,2.4,3.314l0.01,0.985"/>
+		<path class="st2" d="M11.568,25.93v-2.864c0-1.507,0.969-2.851,2.42-3.353l0.131-0.046"/>
+		<path class="st2" d="M10.777,28.167l12.554,8.871h14.334h3.164"/>
+		<path class="st2" d="M36.588,23.148c-0.059-3.708-0.711-7.971-2.668-12.071l-22.005-0.483c3.539,7.41,2.815,15.355,2.019,19.582"
+			/>
+		<path class="st2" d="M23.8,36.856c0-9.269,4.263-13.545,8.813-13.545c4.55,0,8.242,4.853,8.242,10.841
+			c0,0.287,0.075,4.39,0.075,4.39h18.688c0,0-0.075-4.103-0.075-4.39c0-5.988-3.689-10.841-8.242-10.841H32.612"/>
+		<path class="st2" d="M18.715,18.145c1.241,0,2.247-0.959,2.247-2.143c0-1.184-1.006-2.143-2.247-2.143s-2.247,0.959-2.247,2.143
+			C16.468,17.185,17.474,18.145,18.715,18.145z"/>
+		<path class="st2" d="M30.281,18.037c1.241,0,2.247-0.959,2.247-2.143c0-1.184-1.006-2.143-2.247-2.143s-2.247,0.959-2.247,2.143
+			C28.034,17.078,29.04,18.037,30.281,18.037z"/>
+		<path class="st2" d="M45.29,36.572c1.241,0,2.247-0.959,2.247-2.143c0-1.183-1.006-2.143-2.247-2.143
+			c-1.241,0-2.247,0.959-2.247,2.143C43.042,35.613,44.049,36.572,45.29,36.572z"/>
+		<path class="st2" d="M54.866,36.494c1.241,0,2.247-0.959,2.247-2.143c0-1.184-1.006-2.143-2.247-2.143s-2.247,0.959-2.247,2.143
+			C52.618,35.534,53.625,36.494,54.866,36.494z"/>
+		<path class="st2" d="M23.656,35.845c-1.729-1.641-2.159-4.445-2.159-5.975c0-4.406,2.564-7.978,5.727-7.978
+			c1.187,0,2.29,0.502,3.203,1.363"/>
+		<path class="st2" d="M50.619,23.344c-0.049,0.352-0.153,0.692-0.316,1.008c-1.204,2.355-5.166,2.733-8.852,0.848
+			c-0.923-0.47-1.738-1.04-2.427-1.663"/>
+		<path class="st8" d="M60.287,15.914l-2.33-4.531l-1.038,0.386l-1.94,4.274l-5.827,1.167l0.515,1.163l3.239,3.497l-0.909,5.312
+			l1.167,0.258l4.664-1.815l4.66,1.944l0.648-0.648l-0.39-5.437l3.368-3.887l-0.519-0.648L60.287,15.914z"/>
+		<path class="st2" d="M58.415,11.801l1.99,4.035c0.121,0.246,0.359,0.418,0.632,0.457l4.453,0.648
+			c0.687,0.101,0.96,0.944,0.464,1.428l-3.224,3.142c-0.199,0.191-0.289,0.468-0.242,0.741l0.761,4.434
+			c0.117,0.683-0.601,1.206-1.214,0.882l-3.985-2.096c-0.242-0.129-0.535-0.129-0.781,0l-3.985,2.096
+			c-0.613,0.324-1.331-0.199-1.214-0.882l0.761-4.434c0.047-0.273-0.043-0.55-0.242-0.741l-3.224-3.142
+			c-0.496-0.484-0.222-1.327,0.464-1.428l4.453-0.648c0.273-0.039,0.507-0.211,0.632-0.457l1.99-4.035
+			c0.308-0.621,1.194-0.621,1.503,0H58.415z"/>
+	</g>
+</g>
+</svg>
diff --git a/assets/images/simple-illustrations/simple-illustration__stopwatch.svg b/assets/images/simple-illustrations/simple-illustration__stopwatch.svg
new file mode 100644
index 0000000000000..c348fd73337bb
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__stopwatch.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFED8F;}
+	.st1{fill:#FFFAF0;}
+	.st2{fill:#003C73;}
+	.st3{fill:#F25730;}
+	.st4{fill:none;stroke:#002140;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<path class="st0" d="M34.266,59.294c12.67,0,22.942-10.271,22.942-22.942c0-12.67-10.271-22.942-22.942-22.942
+	c-12.67,0-22.942,10.271-22.942,22.942C11.325,49.023,21.596,59.294,34.266,59.294z"/>
+<path class="st1" d="M34.191,53.194c9.471,0,17.148-7.678,17.148-17.149c0-9.471-7.678-17.148-17.148-17.148
+	c-9.471,0-17.149,7.678-17.149,17.148C17.042,45.517,24.72,53.194,34.191,53.194z"/>
+<path class="st2" d="M22.449,16.136l-4.259-4.028c0,0-5.864,1.609-6.096,6.216l3.339,3.566c0,0,4.486-5.18,7.02-5.753H22.449z"/>
+<path class="st2" d="M46.271,16.478c0,0,5.984,5.18,6.558,6.1l3.566-3.913c0,0-0.116-2.877-1.956-4.259
+	c-1.841-1.383-4.486-1.841-4.486-1.841L46.271,16.478L46.271,16.478z"/>
+<path class="st3" d="M30.389,13.144c0,0,5.295-0.574,7.251,0.116v-2.072L37.068,9.52c0,0-1.485-0.405-3.223-0.405
+	c-3.339,0-3.415,1.249-3.455,1.383C30.35,10.632,30.389,13.144,30.389,13.144z"/>
+<path class="st4" d="M34.075,59.005c12.744,0,23.075-10.331,23.075-23.075S46.819,12.855,34.075,12.855
+	C21.331,12.855,11,23.186,11,35.93S21.331,59.005,34.075,59.005z"/>
+<path class="st4" d="M34.075,53.319c9.603,0,17.389-7.785,17.389-17.389c0-9.603-7.785-17.389-17.389-17.389
+	c-9.603,0-17.389,7.785-17.389,17.389C16.686,45.534,24.471,53.319,34.075,53.319z"/>
+<path class="st3" d="M34.075,39.114c1.758,0,3.183-1.425,3.183-3.183c0-1.758-1.425-3.183-3.183-3.183
+	c-1.758,0-3.183,1.425-3.183,3.183C30.892,37.688,32.317,39.114,34.075,39.114z"/>
+<path class="st4" d="M40.122,41.781l3.828,3.828"/>
+<path class="st4" d="M15.544,21.658l-3.143-2.957c-0.485-0.458-0.605-1.187-0.28-1.77c0.707-1.276,2.263-3.41,5.189-4.619
+	c0.52-0.218,1.125-0.089,1.538,0.298l3.255,3.063"/>
+<path class="st4" d="M14.681,14.353l4.162,3.89"/>
+<path class="st4" d="M16.371,13.086l4.162,3.895"/>
+<path class="st4" d="M12.917,16.038l4.166,3.895"/>
+<path class="st4" d="M52.949,21.965l3.143-2.957c0.485-0.458,0.605-1.187,0.28-1.77c-0.707-1.276-2.263-3.41-5.189-4.619
+	c-0.52-0.218-1.125-0.089-1.538,0.298l-3.255,3.063"/>
+<path class="st4" d="M53.811,14.66l-4.161,3.89"/>
+<path class="st4" d="M52.126,13.393l-4.166,3.895"/>
+<path class="st4" d="M55.577,16.345l-4.162,3.895"/>
+<path class="st4" d="M30.354,12.988v-2.361C30.354,9.729,31.083,9,31.981,9h4.108c0.898,0,1.627,0.729,1.627,1.627v2.263"/>
+<path class="st3" d="M35.493,25.344h-2.917v10.279h2.917V25.344z"/>
+<path class="st3" d="M35.472,34.597l-2.062,2.062L43.8,47.05l2.062-2.062L35.472,34.597z"/>
+</svg>
diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index e118ad749676a..4dac3fd9a88fc 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -1,17 +1,22 @@
 import type {VideoReadyForDisplayEvent} from 'expo-av';
+import type {ImageContentFit} from 'expo-image';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import type {MergeExclusive} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import CheckboxWithLabel from './CheckboxWithLabel';
+import ImageSVG from './ImageSVG';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
 import type DotLottieAnimation from './LottieAnimations/types';
@@ -35,15 +40,7 @@ type VideoLoadedEventType = {
 
 type VideoStatus = 'video' | 'animation';
 
-type FeatureTrainingModalProps = {
-    /** Animation to show when video is unavailable. Useful when app is offline */
-    animation?: DotLottieAnimation;
-
-    /** URL for the video */
-    videoURL?: string;
-
-    videoAspectRatio?: number;
-
+type BaseFeatureTrainingModalProps = {
     /** Title for the modal */
     title?: string | React.ReactNode;
 
@@ -73,12 +70,39 @@ type FeatureTrainingModalProps = {
 
     /** Children to show below title and description and above buttons */
     children?: React.ReactNode;
+
+    /** Modal width */
+    width?: number;
 };
 
+type FeatureTrainingModalVideoProps = {
+    /** URL for the video */
+    videoURL: string;
+
+    videoAspectRatio?: number;
+
+    /** Animation to show when video is unavailable. Useful when app is offline */
+    animation?: DotLottieAnimation;
+};
+
+type FeatureTrainingModalSVGProps = {
+    /** Expensicon for the page */
+    image: IconAsset;
+
+    /** Determines how the image should be resized to fit its container */
+    contentFitImage?: ImageContentFit;
+};
+
+// This page requires either an icon or a video/animation, but not both
+type FeatureTrainingModalProps = BaseFeatureTrainingModalProps & MergeExclusive<FeatureTrainingModalVideoProps, FeatureTrainingModalSVGProps>;
+
 function FeatureTrainingModal({
     animation,
     videoURL,
     videoAspectRatio: videoAspectRatioProp,
+    image,
+    contentFitImage,
+    width = variables.onboardingModalWidth,
     title = '',
     description = '',
     secondaryDescription = '',
@@ -91,6 +115,7 @@ function FeatureTrainingModal({
     children,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const [isModalVisible, setIsModalVisible] = useState(true);
@@ -137,10 +162,16 @@ function FeatureTrainingModal({
                     // for the video until it loads. Also, when
                     // videoStatus === 'animation' it will
                     // set the same aspect ratio as the video would.
-                    {aspectRatio},
+                    videoURL ? {aspectRatio} : null,
                 ]}
             >
-                {videoStatus === 'video' && videoURL ? (
+                {!!image && (
+                    <ImageSVG
+                        src={image}
+                        contentFit={contentFitImage}
+                    />
+                )}
+                {!!videoURL && videoStatus === 'video' && (
                     <GestureHandlerRootView>
                         <VideoPlayer
                             url={videoURL}
@@ -152,7 +183,8 @@ function FeatureTrainingModal({
                             isLooping
                         />
                     </GestureHandlerRootView>
-                ) : (
+                )}
+                {!!videoURL && videoStatus === 'animation' && (
                     <View style={[styles.flex1, styles.alignItemsCenter, {aspectRatio}]}>
                         <Lottie
                             source={animation ?? LottieAnimations.Hands}
@@ -165,7 +197,7 @@ function FeatureTrainingModal({
                 )}
             </View>
         );
-    }, [animation, videoURL, videoAspectRatio, videoStatus, shouldUseNarrowLayout, styles]);
+    }, [animation, videoURL, image, contentFitImage, videoAspectRatio, videoStatus, shouldUseNarrowLayout, styles]);
 
     const toggleWillShowAgain = useCallback(() => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain), []);
 
@@ -194,7 +226,7 @@ function FeatureTrainingModal({
                         boxShadow: 'none',
                         borderRadius: 16,
                         paddingBottom: 20,
-                        paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
+                        paddingTop: !!image || onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
                         ...(onboardingIsMediumOrLargerScreenWidth
                             ? // Override styles defined by MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
                               // To make it take as little space as possible.
@@ -205,8 +237,10 @@ function FeatureTrainingModal({
                             : {}),
                     }}
                 >
-                    <View style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && styles.welcomeVideoNarrowLayout, safeAreaPaddingBottomStyle]}>
-                        <View style={onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>{renderIllustration()}</View>
+                    <View style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width), safeAreaPaddingBottomStyle]}>
+                        <View style={[onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}, !!image && styles.p0]}>
+                            {renderIllustration()}
+                        </View>
                         <View style={[styles.mt5, styles.mh5]}>
                             {!!title && !!description && (
                                 <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
diff --git a/src/components/HoldMenuSectionList.tsx b/src/components/HoldMenuSectionList.tsx
index 4ffdfa1bd60e9..e1af95ed37d57 100644
--- a/src/components/HoldMenuSectionList.tsx
+++ b/src/components/HoldMenuSectionList.tsx
@@ -16,9 +16,6 @@ type HoldMenuSection = {
 
     /** Translation key for the title */
     titleTranslationKey: TranslationPaths;
-
-    /** Translation key for the description */
-    descriptionTranslationKey: TranslationPaths;
 };
 
 function HoldMenuSectionList() {
@@ -27,19 +24,12 @@ function HoldMenuSectionList() {
 
     const holdMenuSections: HoldMenuSection[] = [
         {
-            icon: Illustrations.Hourglass,
-            titleTranslationKey: 'iou.whatIsHoldTitle',
-            descriptionTranslationKey: 'iou.whatIsHoldExplain',
-        },
-        {
-            icon: Illustrations.CommentBubbles,
-            titleTranslationKey: 'iou.holdIsTemporaryTitle',
-            descriptionTranslationKey: 'iou.holdIsTemporaryExplain',
+            icon: Illustrations.Stopwatch,
+            titleTranslationKey: 'iou.holdIsLeftBehind',
         },
         {
-            icon: Illustrations.TrashCan,
-            titleTranslationKey: 'iou.deleteHoldTitle',
-            descriptionTranslationKey: 'iou.deleteHoldExplain',
+            icon: Illustrations.RealtimeReport,
+            titleTranslationKey: 'iou.unholdWhenReady',
         },
     ];
 
@@ -55,11 +45,10 @@ function HoldMenuSectionList() {
                         width={variables.holdMenuIconSize}
                         height={variables.holdMenuIconSize}
                         src={section.icon}
-                        additionalStyles={[styles.mr3]}
+                        additionalStyles={[styles.mr4]}
                     />
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
                         <Text style={[styles.textStrong, styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
-                        <Text style={[styles.textNormal]}>{translate(section.descriptionTranslationKey)}</Text>
                     </View>
                 </View>
             ))}
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 0068fd30ed605..e6c2d9cb99f48 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -38,6 +38,7 @@ import ConciergeBlue from '@assets/images/product-illustrations/concierge--blue.
 import ConciergeExclamation from '@assets/images/product-illustrations/concierge--exclamation.svg';
 import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
 import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
+import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
 import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__travel.svg';
 import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
 import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
@@ -117,6 +118,7 @@ import PiggyBank from '@assets/images/simple-illustrations/simple-illustration__
 import Pillow from '@assets/images/simple-illustrations/simple-illustration__pillow.svg';
 import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
 import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
+import RealtimeReport from '@assets/images/simple-illustrations/simple-illustration__realtimereports.svg';
 import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustration__receipt-envelope.svg';
 import ReceiptLocationMarker from '@assets/images/simple-illustrations/simple-illustration__receipt-location-marker.svg';
 import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
@@ -127,6 +129,7 @@ import SendMoney from '@assets/images/simple-illustrations/simple-illustration__
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
 import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg';
+import Stopwatch from '@assets/images/simple-illustrations/simple-illustration__stopwatch.svg';
 import SubscriptionAnnual from '@assets/images/simple-illustrations/simple-illustration__subscription-annual.svg';
 import SubscriptionPPU from '@assets/images/simple-illustrations/simple-illustration__subscription-ppu.svg';
 import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg';
@@ -219,6 +222,8 @@ export {
     LockClosed,
     Gears,
     QRCode,
+    RealtimeReport,
+    HoldExpense,
     ReceiptEnvelope,
     Approval,
     WalletAlt,
@@ -245,6 +250,7 @@ export {
     ReceiptLocationMarker,
     Lightbulb,
     EmptyStateTravel,
+    Stopwatch,
     SubscriptionAnnual,
     SubscriptionPPU,
     ExpensifyApprovedLogo,
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index d8d2c1b695394..2a3e9c8882634 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -3,9 +3,10 @@ import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import HoldMenuSectionList from './HoldMenuSectionList';
-import LottieAnimations from './LottieAnimations';
+import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 import TextPill from './TextPill';
 
@@ -33,7 +34,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
         () => (
             <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                 <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
-                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold')}</TextPill>
+                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold').toLowerCase()}</TextPill>
             </View>
         ),
         [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
@@ -41,13 +42,14 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
 
     return (
         <FeatureTrainingModal
-            animation={LottieAnimations.PreferencesDJ}
             title={title}
             description={translate('iou.whatIsHoldExplain')}
             confirmText={translate('common.buttonConfirm')}
+            image={Illustrations.HoldExpense}
+            contentFitImage="cover"
+            width={variables.holdEducationModalWidth}
             onClose={onClose}
             onConfirm={onConfirm}
-            videoAspectRatio={LottieAnimations.PreferencesDJ.w / LottieAnimations.PreferencesDJ.h}
         >
             <HoldMenuSectionList />
         </FeatureTrainingModal>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 13ff38a0bc58f..8fbc1b4c335c4 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1032,13 +1032,10 @@ const translations = {
         }),
         payOnly: 'Pay only',
         approveOnly: 'Approve only',
-        holdEducationalTitle: 'This expense is on',
-        whatIsHoldTitle: 'What is hold?',
-        whatIsHoldExplain: 'Hold is our way of streamlining financial collaboration. "Reject" is so harsh!',
-        holdIsTemporaryTitle: 'Hold is usually temporary',
-        holdIsTemporaryExplain: "Hold is used to clear up confusion or clarify an important detail before payment. Don't worry, it's not permanent!",
-        deleteHoldTitle: "Delete whatever won't be paid",
-        deleteHoldExplain: "In the rare case where something's put on hold and won't be paid, it's on the person requesting payment to delete it.",
+        holdEducationalTitle: 'This request is on',
+        whatIsHoldExplain: 'Hold is like hitting “pause” on an expense to ask for more details before approval or payment.',
+        holdIsLeftBehind: 'Held expenses are left behind even if you approve an entire report.',
+        unholdWhenReady: "Unhold expenses when you're ready to approve or pay.",
         set: 'set',
         changed: 'changed',
         removed: 'removed',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 6477827fd0a13..9481a65f05a85 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1030,13 +1030,10 @@ const translations = {
         approveOnly: 'Solo aprobar',
         hold: 'Bloquear',
         unhold: 'Desbloquear',
-        holdEducationalTitle: 'Este gasto está',
-        whatIsHoldTitle: '¿Qué es Bloquear?',
-        whatIsHoldExplain: 'Bloquear es nuestra forma de agilizar la colaboración financiera. ¡"Rechazar" es tan duro!',
-        holdIsTemporaryTitle: 'Bloquear suele ser temporal',
-        holdIsTemporaryExplain: 'Se utiliza bloquear para aclarar confusión o aclarar un detalle importante antes del pago, no es permanente.',
-        deleteHoldTitle: 'Eliminar lo que no se pagará',
-        deleteHoldExplain: 'En el raro caso de que algo se bloquee y no se pague, la persona que solicita el pago debe eliminarlo.',
+        holdEducationalTitle: 'Esta solicitud está',
+        whatIsHoldExplain: 'Retener es como "pausar" un gasto para solicitar más detalles antes de aprobarlo o pagarlo.',
+        holdIsLeftBehind: 'Si apruebas un informe, los gastos retenidos se quedan fuera de esa aprobación.',
+        unholdWhenReady: 'Desbloquea los gastos cuando estés listo para aprobarlos o pagarlos.',
         set: 'estableció',
         changed: 'cambió',
         removed: 'eliminó',
@@ -5532,7 +5529,7 @@ const translations = {
         keepThisOne: 'Mantener éste',
         confirmDetails: 'Confirma los detalles que conservas',
         confirmDuplicatesInfo: 'Los duplicados que no conserves se guardarán para que el usuario los elimine',
-        hold: 'Bloqueado',
+        hold: 'Retenida',
     },
     reportViolations: {
         [CONST.REPORT_VIOLATIONS.FIELD_REQUIRED]: ({fieldName}: RequiredFieldParams) => `${fieldName} es obligatorio`,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6dbdb715a4276..cd98820fe8015 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1728,10 +1728,6 @@ const styles = (theme: ThemeColors) =>
                 overflow: 'hidden',
             } satisfies ViewStyle),
 
-        welcomeVideoNarrowLayout: {
-            width: variables.onboardingModalWidth,
-        },
-
         onlyEmojisText: {
             fontSize: variables.fontSizeOnlyEmojis,
             lineHeight: variables.fontSizeOnlyEmojisHeight,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 8b330ce1dd8dc..15f3b1bcf52ec 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -211,6 +211,7 @@ export default {
     restrictedActionIllustrationHeight: 136,
     photoUploadPopoverWidth: 335,
     onboardingModalWidth: 500,
+    holdEducationModalWidth: 400,
     fontSizeToWidthRatio: getValueUsingPixelRatio(0.8, 1),
 
     // Emoji related variables
@@ -241,7 +242,7 @@ export default {
     cardBorderRadius: 4,
 
     cardNameWidth: 156,
-    holdMenuIconSize: 64,
+    holdMenuIconSize: 50,
     updateAnimationW: 390,
     updateAnimationH: 240,
     updateTextViewContainerWidth: 310,

From 2118474bb8c8fd0f90b7db13ca01544a2cfe5fe4 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 01:16:18 +0700
Subject: [PATCH 06/23] adjust bottom padding for modal text

---
 src/components/FeatureTrainingModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index 4dac3fd9a88fc..6e73c06e8d073 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -243,7 +243,7 @@ function FeatureTrainingModal({
                         </View>
                         <View style={[styles.mt5, styles.mh5]}>
                             {!!title && !!description && (
-                                <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
+                                <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10], !!image && styles.mb5]}>
                                     {typeof title === 'string' ? <Text style={[styles.textHeadlineH1]}>{title}</Text> : title}
                                     <Text style={styles.textSupporting}>{description}</Text>
                                     {secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}

From 9e8896a2ebd30a87f046cfcf31fa6692dc3086c0 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 01:43:34 +0700
Subject: [PATCH 07/23] update icon size to 48x48

---
 src/components/HoldMenuSectionList.tsx | 4 ++--
 src/styles/variables.ts                | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/HoldMenuSectionList.tsx b/src/components/HoldMenuSectionList.tsx
index e1af95ed37d57..c4f867edcb54f 100644
--- a/src/components/HoldMenuSectionList.tsx
+++ b/src/components/HoldMenuSectionList.tsx
@@ -42,8 +42,8 @@ function HoldMenuSectionList() {
                     style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}
                 >
                     <Icon
-                        width={variables.holdMenuIconSize}
-                        height={variables.holdMenuIconSize}
+                        width={variables.menuIconSize}
+                        height={variables.menuIconSize}
                         src={section.icon}
                         additionalStyles={[styles.mr4]}
                     />
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 15f3b1bcf52ec..fe3b69ec16d88 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -242,7 +242,6 @@ export default {
     cardBorderRadius: 4,
 
     cardNameWidth: 156,
-    holdMenuIconSize: 50,
     updateAnimationW: 390,
     updateAnimationH: 240,
     updateTextViewContainerWidth: 310,

From 6a1a89a1cc701ab616f85022e8a13b405975b7ae Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 02:23:15 +0700
Subject: [PATCH 08/23] preseve image aspect ratio on mobile

---
 src/components/FeatureTrainingModal.tsx       | 19 ++++++++++---------
 .../ProcessMoneyRequestHoldMenu.tsx           |  3 ++-
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  3 ++-
 src/pages/TrackTrainingPage.tsx               |  2 +-
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index 6e73c06e8d073..bbfc41659225c 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -41,6 +41,9 @@ type VideoLoadedEventType = {
 type VideoStatus = 'video' | 'animation';
 
 type BaseFeatureTrainingModalProps = {
+    /** The aspect ratio to preserve for the icon, video or animation */
+    illustrationAspectRatio?: number;
+
     /** Title for the modal */
     title?: string | React.ReactNode;
 
@@ -79,8 +82,6 @@ type FeatureTrainingModalVideoProps = {
     /** URL for the video */
     videoURL: string;
 
-    videoAspectRatio?: number;
-
     /** Animation to show when video is unavailable. Useful when app is offline */
     animation?: DotLottieAnimation;
 };
@@ -99,7 +100,7 @@ type FeatureTrainingModalProps = BaseFeatureTrainingModalProps & MergeExclusive<
 function FeatureTrainingModal({
     animation,
     videoURL,
-    videoAspectRatio: videoAspectRatioProp,
+    illustrationAspectRatio: illustrationAspectRatioProp,
     image,
     contentFitImage,
     width = variables.onboardingModalWidth,
@@ -122,7 +123,7 @@ function FeatureTrainingModal({
     const [willShowAgain, setWillShowAgain] = useState(true);
     const [videoStatus, setVideoStatus] = useState<VideoStatus>('video');
     const [isVideoStatusLocked, setIsVideoStatusLocked] = useState(false);
-    const [videoAspectRatio, setVideoAspectRatio] = useState(videoAspectRatioProp ?? VIDEO_ASPECT_RATIO);
+    const [illustrationAspectRatio, setIllustrationAspectRatio] = useState(illustrationAspectRatioProp ?? VIDEO_ASPECT_RATIO);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
 
@@ -145,14 +146,14 @@ function FeatureTrainingModal({
         }
 
         if ('naturalSize' in event) {
-            setVideoAspectRatio(event.naturalSize.width / event.naturalSize.height);
+            setIllustrationAspectRatio(event.naturalSize.width / event.naturalSize.height);
         } else {
-            setVideoAspectRatio(event.srcElement.videoWidth / event.srcElement.videoHeight);
+            setIllustrationAspectRatio(event.srcElement.videoWidth / event.srcElement.videoHeight);
         }
     };
 
     const renderIllustration = useCallback(() => {
-        const aspectRatio = videoAspectRatio || VIDEO_ASPECT_RATIO;
+        const aspectRatio = illustrationAspectRatio || VIDEO_ASPECT_RATIO;
 
         return (
             <View
@@ -162,7 +163,7 @@ function FeatureTrainingModal({
                     // for the video until it loads. Also, when
                     // videoStatus === 'animation' it will
                     // set the same aspect ratio as the video would.
-                    videoURL ? {aspectRatio} : null,
+                    {aspectRatio},
                 ]}
             >
                 {!!image && (
@@ -197,7 +198,7 @@ function FeatureTrainingModal({
                 )}
             </View>
         );
-    }, [animation, videoURL, image, contentFitImage, videoAspectRatio, videoStatus, shouldUseNarrowLayout, styles]);
+    }, [animation, videoURL, image, contentFitImage, illustrationAspectRatio, videoStatus, shouldUseNarrowLayout, styles]);
 
     const toggleWillShowAgain = useCallback(() => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain), []);
 
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index 2a3e9c8882634..29fd577bd904e 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -34,7 +34,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
         () => (
             <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                 <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
-                <TextPill textStyles={styles.holdRequestInline}>{translate('violations.hold').toLowerCase()}</TextPill>
+                <TextPill textStyles={styles.holdRequestInline}>{translate('iou.holdEducationalText')}</TextPill>
             </View>
         ),
         [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
@@ -48,6 +48,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
             image={Illustrations.HoldExpense}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
+            illustrationAspectRatio={39 / 22}
             onClose={onClose}
             onConfirm={onConfirm}
         >
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8fbc1b4c335c4..30ed8d18be70d 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1033,6 +1033,7 @@ const translations = {
         payOnly: 'Pay only',
         approveOnly: 'Approve only',
         holdEducationalTitle: 'This request is on',
+        holdEducationalText: 'hold',
         whatIsHoldExplain: 'Hold is like hitting “pause” on an expense to ask for more details before approval or payment.',
         holdIsLeftBehind: 'Held expenses are left behind even if you approve an entire report.',
         unholdWhenReady: "Unhold expenses when you're ready to approve or pay.",
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 9481a65f05a85..39e81a83a4627 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1031,6 +1031,7 @@ const translations = {
         hold: 'Bloquear',
         unhold: 'Desbloquear',
         holdEducationalTitle: 'Esta solicitud está',
+        holdEducationalText: 'retenida',
         whatIsHoldExplain: 'Retener es como "pausar" un gasto para solicitar más detalles antes de aprobarlo o pagarlo.',
         holdIsLeftBehind: 'Si apruebas un informe, los gastos retenidos se quedan fuera de esa aprobación.',
         unholdWhenReady: 'Desbloquea los gastos cuando estés listo para aprobarlos o pagarlos.',
@@ -5529,7 +5530,7 @@ const translations = {
         keepThisOne: 'Mantener éste',
         confirmDetails: 'Confirma los detalles que conservas',
         confirmDuplicatesInfo: 'Los duplicados que no conserves se guardarán para que el usuario los elimine',
-        hold: 'Retenida',
+        hold: 'Bloqueado',
     },
     reportViolations: {
         [CONST.REPORT_VIOLATIONS.FIELD_REQUIRED]: ({fieldName}: RequiredFieldParams) => `${fieldName} es obligatorio`,
diff --git a/src/pages/TrackTrainingPage.tsx b/src/pages/TrackTrainingPage.tsx
index 1fc71e72ab173..6bbfc2e5af8a9 100644
--- a/src/pages/TrackTrainingPage.tsx
+++ b/src/pages/TrackTrainingPage.tsx
@@ -20,7 +20,7 @@ function TrackTrainingPage() {
             helpText={translate('common.learnMore')}
             onHelp={onHelp}
             videoURL={CONST.FEATURE_TRAINING[CONST.FEATURE_TRAINING.CONTENT_TYPES.TRACK_EXPENSE]?.VIDEO_URL}
-            videoAspectRatio={VIDEO_ASPECT_RATIO}
+            illustrationAspectRatio={VIDEO_ASPECT_RATIO}
         />
     );
 }

From a7dc72f45caa1c588e1159fb859614860c5fc01a Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 02:37:38 +0700
Subject: [PATCH 09/23] only goBack on large screens

---
 src/components/FeatureTrainingModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index bbfc41659225c..f0161a8670503 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -207,9 +207,11 @@ function FeatureTrainingModal({
             User.dismissTrackTrainingModal();
         }
         setIsModalVisible(false);
-        Navigation.goBack();
+        if (onboardingIsMediumOrLargerScreenWidth) {
+            Navigation.goBack();
+        }
         onClose?.();
-    }, [onClose, willShowAgain]);
+    }, [onClose, willShowAgain, onboardingIsMediumOrLargerScreenWidth]);
 
     const closeAndConfirmModal = useCallback(() => {
         closeModal();

From d13f17babc45389dc8333d9cedcb2c0b27bd9812 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 02:45:51 +0700
Subject: [PATCH 10/23] delay hold request modal

---
 src/components/MoneyReportHeader.tsx  | 2 +-
 src/components/MoneyRequestHeader.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 06f07aa7a0ec0..0dc5026c90e3e 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -303,7 +303,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         if (isLoadingHoldUseExplained) {
             return;
         }
-        setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation);
+        setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION);
     }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);
 
     useEffect(() => {
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index e54ca0f7f2521..579f1a6edba2e 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -16,6 +16,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
 import * as TransactionActions from '@userActions/Transaction';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
@@ -126,7 +127,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
         if (isLoadingHoldUseExplained) {
             return;
         }
-        setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation);
+        setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION);
     }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);
 
     useEffect(() => {

From 270d6c0cad3222065b52e683264109d420db069c Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 3 Dec 2024 03:11:59 +0700
Subject: [PATCH 11/23] remove bottom border radius on small screens

---
 src/components/FeatureTrainingModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index f0161a8670503..f8393b02b3f70 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -227,7 +227,6 @@ function FeatureTrainingModal({
                     onClose={closeModal}
                     innerContainerStyle={{
                         boxShadow: 'none',
-                        borderRadius: 16,
                         paddingBottom: 20,
                         paddingTop: !!image || onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
                         ...(onboardingIsMediumOrLargerScreenWidth

From 80975bd06af9c58ed48deadf4b8b3e76c6d722b1 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Fri, 13 Dec 2024 02:12:55 +0700
Subject: [PATCH 12/23] fix: animation shows with image simultaneously

---
 src/components/FeatureTrainingModal.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index 94d3682223fd2..f54a72290b837 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -193,7 +193,7 @@ function FeatureTrainingModal({
                     // videoStatus === 'animation' it will
                     // set the same aspect ratio as the video would.
                     illustrationInnerContainerStyle,
-                    !!videoURL && {aspectRatio},
+                    (!!videoURL || !!image) && {aspectRatio},
                 ]}
             >
                 {!!image && (
@@ -202,7 +202,7 @@ function FeatureTrainingModal({
                         contentFit={contentFitImage}
                     />
                 )}
-                {!!videoURL && !!videoURL && videoStatus === 'video' && (
+                {!!videoURL && videoStatus === 'video' && (
                     <GestureHandlerRootView>
                         <VideoPlayer
                             url={videoURL}
@@ -215,7 +215,7 @@ function FeatureTrainingModal({
                         />
                     </GestureHandlerRootView>
                 )}
-                {!!videoURL && videoStatus === 'animation' && (
+                {((!videoURL && !image) || (!!videoURL && videoStatus === 'animation')) && (
                     <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, !!videoURL && {aspectRatio}, animationStyle]}>
                         <Lottie
                             source={animation ?? LottieAnimations.Hands}
@@ -254,12 +254,10 @@ function FeatureTrainingModal({
         }
         setIsModalVisible(false);
         InteractionManager.runAfterInteractions(() => {
-            if (onboardingIsMediumOrLargerScreenWidth) {
-                Navigation.goBack();
-            }
+            Navigation.goBack();
             onClose?.();
         });
-    }, [onClose, willShowAgain, onboardingIsMediumOrLargerScreenWidth]);
+    }, [onClose, willShowAgain]);
 
     const closeAndConfirmModal = useCallback(() => {
         closeModal();

From dee55e1673164af407ea28609a55148976eafb8d Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Fri, 13 Dec 2024 02:14:09 +0700
Subject: [PATCH 13/23] remove hold modal on small screens as we no longer use
 rhp

---
 src/components/MoneyReportHeader.tsx  |  31 +----
 src/components/MoneyRequestHeader.tsx | 163 +++++++++++---------------
 2 files changed, 70 insertions(+), 124 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 008f8b672ac1b..f30e1bd940741 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -40,7 +40,6 @@ import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusB
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
-import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
 import ExportWithDropdownMenu from './ReportActionItem/ExportWithDropdownMenu';
 import SettlementButton from './SettlementButton';
 
@@ -90,7 +89,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const styles = useThemeStyles();
     const theme = useTheme();
     const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false);
-    const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false);
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
@@ -301,30 +299,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     );
 
     useEffect(() => {
-        if (isLoadingHoldUseExplained) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (isLoadingHoldUseExplained || dismissedHoldUseExplanation || !isOnHold) {
             return;
         }
-        setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION);
+        Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute()));
     }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);
 
-    useEffect(() => {
-        if (!shouldShowHoldMenu) {
-            return;
-        }
-
-        if (isSmallScreenWidth) {
-            if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
-                Navigation.goBack();
-            }
-        } else {
-            Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute()));
-        }
-    }, [isSmallScreenWidth, shouldShowHoldMenu]);
-
-    const handleHoldRequestClose = () => {
-        IOU.dismissHoldUseExplanation();
-    };
-
     useEffect(() => {
         if (canDeleteRequest) {
             return;
@@ -511,12 +492,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 danger
                 shouldEnableNewFocusManagement
             />
-            {isSmallScreenWidth && shouldShowHoldMenu && (
-                <ProcessMoneyRequestHoldMenu
-                    onClose={handleHoldRequestClose}
-                    onConfirm={handleHoldRequestClose}
-                />
-            )}
         </View>
     );
 }
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 579f1a6edba2e..8985ce051d402 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -1,6 +1,6 @@
 import {useRoute} from '@react-navigation/native';
 import type {ReactNode} from 'react';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
@@ -14,9 +14,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
-import * as IOU from '@userActions/IOU';
 import * as TransactionActions from '@userActions/Transaction';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
@@ -30,7 +28,6 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
-import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
 
 type MoneyRequestHeaderProps = {
     /** The report currently being looked at */
@@ -63,7 +60,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
-    const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false);
     const isOnHold = TransactionUtils.isOnHold(transaction);
     const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
     const reportID = report?.reportID;
@@ -124,105 +120,80 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const statusBarProps = getStatusBarProps();
 
     useEffect(() => {
-        if (isLoadingHoldUseExplained) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (isLoadingHoldUseExplained || dismissedHoldUseExplanation || !isOnHold) {
             return;
         }
-        setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION);
+        Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute()));
     }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);
 
-    useEffect(() => {
-        if (!shouldShowHoldMenu) {
-            return;
-        }
-
-        if (isSmallScreenWidth) {
-            if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
-                Navigation.goBack();
-            }
-        } else {
-            Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute()));
-        }
-    }, [isSmallScreenWidth, shouldShowHoldMenu]);
-
-    const handleHoldRequestClose = () => {
-        IOU.dismissHoldUseExplanation();
-    };
-
     return (
-        <>
-            <View style={[styles.pl0]}>
-                <HeaderWithBackButton
-                    shouldShowBorderBottom={!statusBarProps && !isOnHold}
-                    shouldShowReportAvatarWithDisplay
-                    shouldEnableDetailPageNavigation
-                    shouldShowPinButton={false}
-                    report={{
-                        ...report,
-                        reportID: reportID ?? '',
-                        ownerAccountID: parentReport?.ownerAccountID,
-                    }}
-                    policy={policy}
-                    shouldShowBackButton={shouldUseNarrowLayout}
-                    shouldDisplaySearchRouter={shouldDisplaySearchRouter}
-                    onBackButtonPress={onBackButtonPress}
-                >
-                    {shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
-                        <Button
-                            success
-                            text={translate('iou.markAsCash')}
-                            style={[styles.p0]}
-                            onPress={markAsCash}
-                        />
-                    )}
-                    {isDuplicate && !shouldUseNarrowLayout && (
-                        <Button
-                            success
-                            text={translate('iou.reviewDuplicates')}
-                            style={[styles.p0, styles.ml2]}
-                            onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
-                            }}
-                        />
-                    )}
-                </HeaderWithBackButton>
-                {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
-                    <View style={[styles.ph5, styles.pb3]}>
-                        <Button
-                            success
-                            text={translate('iou.markAsCash')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={markAsCash}
-                        />
-                    </View>
-                )}
-                {isDuplicate && shouldUseNarrowLayout && (
-                    <View style={[styles.ph5, styles.pb3]}>
-                        <Button
-                            success
-                            text={translate('iou.reviewDuplicates')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
-                            }}
-                        />
-                    </View>
+        <View style={[styles.pl0]}>
+            <HeaderWithBackButton
+                shouldShowBorderBottom={!statusBarProps && !isOnHold}
+                shouldShowReportAvatarWithDisplay
+                shouldEnableDetailPageNavigation
+                shouldShowPinButton={false}
+                report={{
+                    ...report,
+                    reportID: reportID ?? '',
+                    ownerAccountID: parentReport?.ownerAccountID,
+                }}
+                policy={policy}
+                shouldShowBackButton={shouldUseNarrowLayout}
+                shouldDisplaySearchRouter={shouldDisplaySearchRouter}
+                onBackButtonPress={onBackButtonPress}
+            >
+                {shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
+                    <Button
+                        success
+                        text={translate('iou.markAsCash')}
+                        style={[styles.p0]}
+                        onPress={markAsCash}
+                    />
                 )}
-                {!!statusBarProps && (
-                    <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
-                        <MoneyRequestHeaderStatusBar
-                            icon={statusBarProps.icon}
-                            description={statusBarProps.description}
-                        />
-                    </View>
+                {isDuplicate && !shouldUseNarrowLayout && (
+                    <Button
+                        success
+                        text={translate('iou.reviewDuplicates')}
+                        style={[styles.p0, styles.ml2]}
+                        onPress={() => {
+                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
+                        }}
+                    />
                 )}
-            </View>
-            {isSmallScreenWidth && shouldShowHoldMenu && (
-                <ProcessMoneyRequestHoldMenu
-                    onClose={handleHoldRequestClose}
-                    onConfirm={handleHoldRequestClose}
-                />
+            </HeaderWithBackButton>
+            {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
+                <View style={[styles.ph5, styles.pb3]}>
+                    <Button
+                        success
+                        text={translate('iou.markAsCash')}
+                        style={[styles.w100, styles.pr0]}
+                        onPress={markAsCash}
+                    />
+                </View>
+            )}
+            {isDuplicate && shouldUseNarrowLayout && (
+                <View style={[styles.ph5, styles.pb3]}>
+                    <Button
+                        success
+                        text={translate('iou.reviewDuplicates')}
+                        style={[styles.w100, styles.pr0]}
+                        onPress={() => {
+                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
+                        }}
+                    />
+                </View>
+            )}
+            {!!statusBarProps && (
+                <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
+                    <MoneyRequestHeaderStatusBar
+                        icon={statusBarProps.icon}
+                        description={statusBarProps.description}
+                    />
+                </View>
             )}
-        </>
+        </View>
     );
 }
 

From 0a339da20a7fa7c9f19d4a5e2ff8187c782c40a5 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Fri, 13 Dec 2024 02:18:18 +0700
Subject: [PATCH 14/23] make hold text color match button text color

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5d73cf72a75e9..ed05183ea96d9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4832,7 +4832,7 @@ const styles = (theme: ThemeColors) =>
         holdRequestInline: {
             ...headlineFont,
             ...whiteSpace.preWrap,
-            color: theme.heading,
+            color: theme.textLight,
             fontSize: variables.fontSizeXLarge,
             lineHeight: variables.lineHeightXXLarge,
 

From dd3968e21bd6b7f2571f775e525908c04893e829 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Wed, 25 Dec 2024 23:37:31 +0700
Subject: [PATCH 15/23] fix: default for inexistent ids lint

---
 .../BrokenConnectionDescription.tsx           |  2 +-
 src/components/MoneyReportHeader.tsx          | 45 +++++++++++--------
 src/components/MoneyRequestHeader.tsx         | 45 ++++++++++++-------
 src/libs/ReportUtils.ts                       |  4 +-
 src/libs/TransactionUtils/index.ts            | 15 +++++--
 src/libs/actions/Transaction.ts               |  5 ++-
 6 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/src/components/BrokenConnectionDescription.tsx b/src/components/BrokenConnectionDescription.tsx
index c54bd0058f998..bfcec0ed0d820 100644
--- a/src/components/BrokenConnectionDescription.tsx
+++ b/src/components/BrokenConnectionDescription.tsx
@@ -14,7 +14,7 @@ import TextLink from './TextLink';
 
 type BrokenConnectionDescriptionProps = {
     /** Transaction id of the corresponding report */
-    transactionID: string;
+    transactionID: string | undefined;
 
     /** Current report */
     report: OnyxEntry<Report>;
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index f30e1bd940741..6fabb2c9e13d0 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -66,8 +66,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const route = useRoute();
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`);
-    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID ?? '-1'}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`);
+    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`);
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const requestParentReportAction = useMemo(() => {
@@ -82,7 +82,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const transaction =
         transactions?.[
             `${ONYXKEYS.COLLECTION.TRANSACTION}${
-                ReportActionsUtils.isMoneyRequestAction(requestParentReportAction) ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? -1 : -1
+                ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
+                    ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID
+                    : CONST.DEFAULT_NUMBER_ID
             }`
         ] ?? undefined;
 
@@ -94,7 +96,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
     const isDeletedParentAction = !!requestParentReportAction && ReportActionsUtils.isDeletedAction(requestParentReportAction);
-    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
+    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID);
 
     // Only the requestor can delete the request, admins can only edit it.
     const isActionOwner =
@@ -113,12 +115,12 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const hasScanningReceipt = ReportUtils.getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => TransactionUtils.isReceiptBeingScanned(t));
     const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t));
     const transactionIDs = allTransactions.map((t) => t.transactionID);
-    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']);
-    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID ?? '-1', moneyRequestReport, policy);
-    const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport?.reportID ?? '');
+    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation(transaction ? [transaction?.transactionID] : undefined);
+    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, moneyRequestReport, policy);
+    const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport?.reportID);
     const isPayAtEndExpense = TransactionUtils.isPayAtEndExpense(transaction);
     const isArchivedReport = ReportUtils.isArchivedRoomWithID(moneyRequestReport?.reportID);
-    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID ?? '-1'}`, {selector: ReportUtils.getArchiveReason});
+    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: ReportUtils.getArchiveReason});
 
     const getCanIOUBePaid = useCallback(
         (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere),
@@ -129,8 +131,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
 
     const shouldShowMarkAsCashButton =
-        hasAllPendingRTERViolations ||
-        (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(moneyRequestReport?.reportID ?? '')));
+        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(moneyRequestReport?.reportID)));
 
     const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere;
 
@@ -213,10 +214,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const deleteTransaction = useCallback(() => {
         if (requestParentReportAction) {
             const iouTransactionID = ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
-                ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? '-1'
-                : '-1';
+                ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID
+                : undefined;
             if (ReportActionsUtils.isTrackExpenseAction(requestParentReportAction)) {
-                navigateBackToAfterDelete.current = IOU.deleteTrackExpense(moneyRequestReport?.reportID ?? '-1', iouTransactionID, requestParentReportAction, true);
+                navigateBackToAfterDelete.current = IOU.deleteTrackExpense(moneyRequestReport?.reportID, iouTransactionID, requestParentReportAction, true);
             } else {
                 navigateBackToAfterDelete.current = IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, true);
             }
@@ -230,9 +231,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             return;
         }
         const iouTransactionID = ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
-            ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? '-1'
-            : '-1';
-        const reportID = transactionThreadReport?.reportID ?? '-1';
+            ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID
+            : undefined;
+        const reportID = transactionThreadReport?.reportID;
 
         TransactionActions.markAsCash(iouTransactionID, reportID);
     }, [requestParentReportAction, transactionThreadReport?.reportID]);
@@ -263,7 +264,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 icon: getStatusIcon(Expensicons.Hourglass),
                 description: (
                     <BrokenConnectionDescription
-                        transactionID={transaction?.transactionID ?? '-1'}
+                        transactionID={transaction?.transactionID}
                         report={moneyRequestReport}
                         policy={policy}
                     />
@@ -335,7 +336,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             text={translate('iou.reviewDuplicates')}
                             style={styles.p0}
                             onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                                if (!transactionThreadReportID) {
+                                    return;
+                                }
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID, Navigation.getReportRHPActiveRoute()));
                             }}
                         />
                     </View>
@@ -403,7 +407,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 text={translate('iou.reviewDuplicates')}
                                 style={[styles.flex1, styles.pr0]}
                                 onPress={() => {
-                                    Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                                    if (!transactionThreadReportID) {
+                                        return;
+                                    }
+                                    Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID, Navigation.getReportRHPActiveRoute()));
                                 }}
                             />
                         )}
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 8985ce051d402..d49cb021e1b71 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -15,6 +15,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import * as TransactionActions from '@userActions/Transaction';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
@@ -48,10 +49,12 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const route = useRoute();
-    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? '-1'}`);
+    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
     const [transaction] = useOnyx(
         `${ONYXKEYS.COLLECTION.TRANSACTION}${
-            ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? -1 : -1
+            ReportActionsUtils.isMoneyRequestAction(parentReportAction)
+                ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID
+                : CONST.DEFAULT_NUMBER_ID
         }`,
     );
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
@@ -61,21 +64,21 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const theme = useTheme();
     const {translate} = useLocalize();
     const isOnHold = TransactionUtils.isOnHold(transaction);
-    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
+    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID);
     const reportID = report?.reportID;
 
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
 
-    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']);
+    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation(transaction ? [transaction?.transactionID] : undefined);
 
-    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID ?? '-1', parentReport, policy);
+    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, parentReport, policy);
 
     const shouldShowMarkAsCashButton =
-        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(parentReport?.reportID ?? '')));
+        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(parentReport?.reportID)));
 
     const markAsCash = useCallback(() => {
-        TransactionActions.markAsCash(transaction?.transactionID ?? '-1', reportID ?? '');
+        TransactionActions.markAsCash(transaction?.transactionID, reportID);
     }, [reportID, transaction?.transactionID]);
 
     const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
@@ -102,14 +105,14 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 icon: getStatusIcon(Expensicons.Hourglass),
                 description: (
                     <BrokenConnectionDescription
-                        transactionID={transaction?.transactionID ?? '-1'}
+                        transactionID={transaction?.transactionID}
                         report={report}
                         policy={policy}
                     />
                 ),
             };
         }
-        if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
+        if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID, transactionViolations))) {
             return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (isScanning) {
@@ -134,11 +137,15 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 shouldShowReportAvatarWithDisplay
                 shouldEnableDetailPageNavigation
                 shouldShowPinButton={false}
-                report={{
-                    ...report,
-                    reportID: reportID ?? '',
-                    ownerAccountID: parentReport?.ownerAccountID,
-                }}
+                report={
+                    reportID
+                        ? {
+                              ...report,
+                              reportID,
+                              ownerAccountID: parentReport?.ownerAccountID,
+                          }
+                        : undefined
+                }
                 policy={policy}
                 shouldShowBackButton={shouldUseNarrowLayout}
                 shouldDisplaySearchRouter={shouldDisplaySearchRouter}
@@ -158,7 +165,10 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                         text={translate('iou.reviewDuplicates')}
                         style={[styles.p0, styles.ml2]}
                         onPress={() => {
-                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
+                            if (!reportID) {
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID, Navigation.getReportRHPActiveRoute()));
                         }}
                     />
                 )}
@@ -180,7 +190,10 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                         text={translate('iou.reviewDuplicates')}
                         style={[styles.w100, styles.pr0]}
                         onPress={() => {
-                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
+                            if (!reportID) {
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID, Navigation.getReportRHPActiveRoute()));
                         }}
                     />
                 </View>
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 1d07cb576df3a..0928943899fea 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1051,7 +1051,7 @@ function isSettled(reportOrID: OnyxInputOrEntry<Report> | SearchReport | string
 /**
  * Whether the current user is the submitter of the report
  */
-function isCurrentUserSubmitter(reportID: string): boolean {
+function isCurrentUserSubmitter(reportID: string | undefined): boolean {
     if (!allReports) {
         return false;
     }
@@ -7820,7 +7820,7 @@ function hasHeldExpenses(iouReportID?: string, allReportTransactions?: SearchTra
 /**
  * Check if all expenses in the Report are on hold
  */
-function hasOnlyHeldExpenses(iouReportID: string, allReportTransactions?: SearchTransaction[]): boolean {
+function hasOnlyHeldExpenses(iouReportID: string | undefined, allReportTransactions?: SearchTransaction[]): boolean {
     const reportTransactions = allReportTransactions ?? reportsTransactions[iouReportID ?? ''] ?? [];
     return reportTransactions.length > 0 && !reportTransactions.some((transaction) => !TransactionUtils.isOnHold(transaction));
 }
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
index 8bc1dd7356cb3..60c6f7c565bdc 100644
--- a/src/libs/TransactionUtils/index.ts
+++ b/src/libs/TransactionUtils/index.ts
@@ -703,7 +703,7 @@ function hasMissingSmartscanFields(transaction: OnyxInputOrEntry<Transaction>):
 /**
  * Get all transaction violations of the transaction with given tranactionID.
  */
-function getTransactionViolations(transactionID: string, transactionViolations: OnyxCollection<TransactionViolations> | null): TransactionViolations | null {
+function getTransactionViolations(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolations> | null): TransactionViolations | null {
     return transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID] ?? null;
 }
 
@@ -735,8 +735,9 @@ function hasBrokenConnectionViolation(transactionID: string): boolean {
 /**
  * Check if user should see broken connection violation warning.
  */
-function shouldShowBrokenConnectionViolation(transactionID: string, report: OnyxEntry<Report> | SearchReport, policy: OnyxEntry<Policy> | SearchPolicy): boolean {
+function shouldShowBrokenConnectionViolation(transactionID: string | undefined, report: OnyxEntry<Report> | SearchReport, policy: OnyxEntry<Policy> | SearchPolicy): boolean {
     return (
+        !!transactionID &&
         hasBrokenConnectionViolation(transactionID) &&
         (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isOpenExpenseReport(report) || (ReportUtils.isProcessingReport(report) && PolicyUtils.isInstantSubmitEnabled(policy)))
     );
@@ -745,7 +746,10 @@ function shouldShowBrokenConnectionViolation(transactionID: string, report: Onyx
 /**
  * Check if there is pending rter violation in all transactionViolations with given transactionIDs.
  */
-function allHavePendingRTERViolation(transactionIds: string[]): boolean {
+function allHavePendingRTERViolation(transactionIds: string[] | undefined): boolean {
+    if (!transactionIds) {
+        return false;
+    }
     const transactionsWithRTERViolations = transactionIds.map((transactionId) => {
         const transactionViolations = getTransactionViolations(transactionId, allTransactionViolations);
         return hasPendingRTERViolation(transactionViolations);
@@ -844,7 +848,10 @@ function getRecentTransactions(transactions: Record<string, string>, size = 2):
  * @param transactionID - the transaction to check
  * @param checkDismissed - whether to check if the violation has already been dismissed as well
  */
-function isDuplicate(transactionID: string, checkDismissed = false): boolean {
+function isDuplicate(transactionID: string | undefined, checkDismissed = false): boolean {
+    if (!transactionID) {
+        return false;
+    }
     const hasDuplicatedViolation = !!allTransactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`]?.some(
         (violation: TransactionViolation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION,
     );
diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts
index c8a0074582421..8fd955ce25155 100644
--- a/src/libs/actions/Transaction.ts
+++ b/src/libs/actions/Transaction.ts
@@ -461,7 +461,10 @@ function clearError(transactionID: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {errors: null, errorFields: {route: null, waypoints: null, routes: null}});
 }
 
-function markAsCash(transactionID: string, transactionThreadReportID: string) {
+function markAsCash(transactionID: string | undefined, transactionThreadReportID: string | undefined) {
+    if (!transactionID || !transactionThreadReportID) {
+        return;
+    }
     const optimisticReportAction = buildOptimisticDismissedViolationReportAction({
         reason: 'manual',
         violationName: CONST.VIOLATIONS.RTER,

From cc6a58db34742494698d0faf202803f2cf63bee7 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Thu, 26 Dec 2024 00:16:33 +0700
Subject: [PATCH 16/23] fix: default for inexistent ids lint

---
 .../BrokenConnectionDescription.tsx           |  9 ++-
 src/libs/actions/Transaction.ts               | 59 ++++++++++++-------
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/BrokenConnectionDescription.tsx b/src/components/BrokenConnectionDescription.tsx
index bfcec0ed0d820..ed3335f0a8606 100644
--- a/src/components/BrokenConnectionDescription.tsx
+++ b/src/components/BrokenConnectionDescription.tsx
@@ -40,13 +40,18 @@ function BrokenConnectionDescription({transactionID, policy, report}: BrokenConn
         return translate('violations.brokenConnection530Error');
     }
 
-    if (isPolicyAdmin && !ReportUtils.isCurrentUserSubmitter(report?.reportID ?? '')) {
+    if (isPolicyAdmin && !ReportUtils.isCurrentUserSubmitter(report?.reportID)) {
         return (
             <>
                 {`${translate('violations.adminBrokenConnectionError')}`}
                 <TextLink
                     style={[styles.textLabelSupporting, styles.link]}
-                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policy?.id ?? '-1'))}
+                    onPress={() => {
+                        if (!policy) {
+                            return;
+                        }
+                        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policy?.id));
+                    }}
                 >{`${translate('workspace.common.companyCards')}`}</TextLink>
                 .
             </>
diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts
index 8fd955ce25155..9ec9bd5f09e7d 100644
--- a/src/libs/actions/Transaction.ts
+++ b/src/libs/actions/Transaction.ts
@@ -355,7 +355,7 @@ function updateWaypoints(transactionID: string, waypoints: WaypointCollection, i
 function dismissDuplicateTransactionViolation(transactionIDs: string[], dissmissedPersonalDetails: PersonalDetails) {
     const currentTransactionViolations = transactionIDs.map((id) => ({transactionID: id, violations: allTransactionViolation?.[id] ?? []}));
     const currentTransactions = transactionIDs.map((id) => allTransactions?.[id]);
-    const transactionsReportActions = currentTransactions.map((transaction) => ReportActionsUtils.getIOUActionForReportID(transaction.reportID ?? '', transaction.transactionID ?? ''));
+    const transactionsReportActions = currentTransactions.map((transaction) => ReportActionsUtils.getIOUActionForReportID(transaction.reportID, transaction.transactionID));
     const optimisticDissmidedViolationReportActions = transactionsReportActions.map(() => {
         return buildOptimisticDismissedViolationReportAction({reason: 'manual', violationName: CONST.VIOLATIONS.DUPLICATED_TRANSACTION});
     });
@@ -363,13 +363,18 @@ function dismissDuplicateTransactionViolation(transactionIDs: string[], dissmiss
     const optimisticData: OnyxUpdate[] = [];
     const failureData: OnyxUpdate[] = [];
 
-    const optimisticReportActions: OnyxUpdate[] = transactionsReportActions.map((action, index) => ({
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID ?? '-1'}`,
-        value: {
-            [optimisticDissmidedViolationReportActions.at(index)?.reportActionID ?? '']: optimisticDissmidedViolationReportActions.at(index) as ReportAction,
-        },
-    }));
+    const optimisticReportActions: OnyxUpdate[] = transactionsReportActions.map((action, index) => {
+        const optimisticDissmidedViolationReportAction = optimisticDissmidedViolationReportActions.at(index);
+        return {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID}`,
+            value: optimisticDissmidedViolationReportAction
+                ? {
+                      [optimisticDissmidedViolationReportAction.reportActionID]: optimisticDissmidedViolationReportAction as ReportAction,
+                  }
+                : undefined,
+        };
+    });
     const optimisticDataTransactionViolations: OnyxUpdate[] = currentTransactionViolations.map((transactionViolations) => ({
         onyxMethod: Onyx.METHOD.MERGE,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionViolations.transactionID}`,
@@ -411,25 +416,35 @@ function dismissDuplicateTransactionViolation(transactionIDs: string[], dissmiss
         },
     }));
 
-    const failureReportActions: OnyxUpdate[] = transactionsReportActions.map((action, index) => ({
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID ?? '-1'}`,
-        value: {
-            [optimisticDissmidedViolationReportActions.at(index)?.reportActionID ?? '']: null,
-        },
-    }));
+    const failureReportActions: OnyxUpdate[] = transactionsReportActions.map((action, index) => {
+        const optimisticDissmidedViolationReportAction = optimisticDissmidedViolationReportActions.at(index);
+        return {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID}`,
+            value: optimisticDissmidedViolationReportAction
+                ? {
+                      [optimisticDissmidedViolationReportAction.reportActionID]: null,
+                  }
+                : undefined,
+        };
+    });
 
     failureData.push(...failureDataTransactionViolations);
     failureData.push(...failureDataTransaction);
     failureData.push(...failureReportActions);
 
-    const successData: OnyxUpdate[] = transactionsReportActions.map((action, index) => ({
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID ?? '-1'}`,
-        value: {
-            [optimisticDissmidedViolationReportActions.at(index)?.reportActionID ?? '']: null,
-        },
-    }));
+    const successData: OnyxUpdate[] = transactionsReportActions.map((action, index) => {
+        const optimisticDissmidedViolationReportAction = optimisticDissmidedViolationReportActions.at(index);
+        return {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${action?.childReportID}`,
+            value: optimisticDissmidedViolationReportAction
+                ? {
+                      [optimisticDissmidedViolationReportAction.reportActionID]: null,
+                  }
+                : undefined,
+        };
+    });
     // We are creating duplicate resolved report actions for each duplicate transactions and all the report actions
     // should be correctly linked with their parent report but the BE is sometimes linking report actions to different
     // parent reports than the one we set optimistically, resulting in duplicate report actions. Therefore, we send the BE

From 384881abbaceaa012221c2645d798d97544f195c Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 7 Jan 2025 21:11:46 +0700
Subject: [PATCH 17/23] resolve comments

---
 src/components/FeatureTrainingModal.tsx | 2 +-
 src/components/MoneyReportHeader.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index f54a72290b837..ca47ba450011f 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -102,7 +102,7 @@ type FeatureTrainingModalVideoProps = {
     animationStyle?: StyleProp<ViewStyle>;
 
     /** URL for the video */
-    videoURL: string;
+    videoURL?: string;
 };
 
 type FeatureTrainingModalSVGProps = {
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 6fabb2c9e13d0..d2f8073beb380 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -66,8 +66,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const route = useRoute();
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`);
-    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID || CONST.DEFAULT_NUMBER_ID}`);
+    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID || CONST.DEFAULT_NUMBER_ID}`);
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const requestParentReportAction = useMemo(() => {

From 463041cbb15e2c9b24520ee3f1f22b62b995809d Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Sun, 12 Jan 2025 07:44:22 +0700
Subject: [PATCH 18/23] fix lint

---
 src/components/MoneyReportHeader.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index d2f8073beb380..b0e2bad74ec53 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -66,7 +66,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const route = useRoute();
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID || CONST.DEFAULT_NUMBER_ID}`);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID || CONST.DEFAULT_NUMBER_ID}`);
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
     const [session] = useOnyx(ONYXKEYS.SESSION);

From ac35c6124a9502b634567e3c40a3fe8fb3a7f708 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 14 Jan 2025 22:28:30 +0700
Subject: [PATCH 19/23] Fix named imports lint

---
 src/components/FeatureTrainingModal.tsx     |   4 +-
 src/components/MigratedUserWelcomeModal.tsx |   4 +-
 src/components/MoneyReportHeader.tsx        | 138 ++++++++++++--------
 src/components/MoneyRequestHeader.tsx       |   2 +-
 4 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index ca47ba450011f..5c9263e911b00 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -12,7 +12,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
-import * as User from '@userActions/User';
+import {dismissTrackTrainingModal} from '@userActions/User';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
@@ -250,7 +250,7 @@ function FeatureTrainingModal({
 
     const closeModal = useCallback(() => {
         if (!willShowAgain) {
-            User.dismissTrackTrainingModal();
+            dismissTrackTrainingModal();
         }
         setIsModalVisible(false);
         InteractionManager.runAfterInteractions(() => {
diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx
index 25c3059d57935..312f6e0f77d0f 100644
--- a/src/components/MigratedUserWelcomeModal.tsx
+++ b/src/components/MigratedUserWelcomeModal.tsx
@@ -4,7 +4,7 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Welcome from '@libs/actions/Welcome';
+import {dismissProductTraining} from '@libs/actions/Welcome';
 import convertToLTR from '@libs/convertToLTR';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -45,7 +45,7 @@ function OnboardingWelcomeVideo() {
             confirmText={translate('migratedUserWelcomeModal.confirmText')}
             animation={LottieAnimations.WorkspacePlanet}
             onClose={() => {
-                Welcome.dismissProductTraining(CONST.MIGRATED_USER_WELCOME_MODAL);
+                dismissProductTraining(CONST.MIGRATED_USER_WELCOME_MODAL);
             }}
             animationStyle={[styles.emptyWorkspaceIllustrationStyle]}
             illustrationInnerContainerStyle={[StyleUtils.getBackgroundColorStyle(LottieAnimations.WorkspacePlanet.backgroundColor), styles.cardSectionIllustration]}
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index f2359fe35bd2c..1654314e576df 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -9,15 +9,44 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCurrentUserAccountID} from '@libs/actions/Report';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
+import {getConnectedIntegration, isPolicyAdmin} from '@libs/PolicyUtils';
+import {getOriginalMessage, isDeletedAction, isMoneyRequestAction, isTrackExpenseAction} from '@libs/ReportActionsUtils';
+import {
+    canBeExported,
+    canDeleteTransaction,
+    getArchiveReason,
+    getBankAccountRoute,
+    getMoneyRequestSpendBreakdown,
+    getNonHeldAndFullAmount,
+    getTransactionsWithReceipts,
+    hasHeldExpenses as hasHeldExpensesReportUtils,
+    hasOnlyHeldExpenses as hasOnlyHeldExpensesReportUtils,
+    hasUpdatedTotal,
+    isAllowedToApproveExpenseReport,
+    isAllowedToSubmitDraftExpenseReport,
+    isArchivedReport as isArchivedReportUtils,
+    isClosedExpenseReportWithNoExpenses,
+    isCurrentUserSubmitter,
+    isInvoiceReport,
+    isOpenExpenseReport,
+    navigateBackOnDeleteTransaction,
+} from '@libs/ReportUtils';
+import {
+    allHavePendingRTERViolation,
+    getAllReportTransactions,
+    isDuplicate as isDuplicateTransactionUtils,
+    isExpensifyCardTransaction,
+    isOnHold as isOnHoldTransactionUtils,
+    isPayAtEndExpense as isPayAtEndExpenseTransactionUtils,
+    isPending,
+    isReceiptBeingScanned,
+    shouldShowBrokenConnectionViolation as shouldShowBrokenConnectionViolationTransactionUtils,
+} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
-import * as IOU from '@userActions/IOU';
-import * as TransactionActions from '@userActions/Transaction';
+import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidAction, deleteMoneyRequest, deleteTrackExpense, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU';
+import {markAsCash as markAsCashAction} from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import useDelegateUserDetails from '@src/hooks/useDelegateUserDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -82,48 +111,45 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true});
     const isLoadingHoldUseExplained = isLoadingOnyxValue(dismissedHoldUseExplanationResult);
     const transaction =
-        transactions?.[
-            `${ONYXKEYS.COLLECTION.TRANSACTION}${
-                ReportActionsUtils.isMoneyRequestAction(requestParentReportAction) && ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID
-            }`
-        ] ?? undefined;
+        transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${isMoneyRequestAction(requestParentReportAction) && getOriginalMessage(requestParentReportAction)?.IOUTransactionID}`] ??
+        undefined;
 
     const styles = useThemeStyles();
     const theme = useTheme();
     const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false);
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
-    const isOnHold = TransactionUtils.isOnHold(transaction);
-    const isDeletedParentAction = !!requestParentReportAction && ReportActionsUtils.isDeletedAction(requestParentReportAction);
-    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID);
+    const {reimbursableSpend} = getMoneyRequestSpendBreakdown(moneyRequestReport);
+    const isOnHold = isOnHoldTransactionUtils(transaction);
+    const isDeletedParentAction = !!requestParentReportAction && isDeletedAction(requestParentReportAction);
+    const isDuplicate = isDuplicateTransactionUtils(transaction?.transactionID);
 
     // Only the requestor can delete the request, admins can only edit it.
     const isActionOwner =
         typeof requestParentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && requestParentReportAction.actorAccountID === session?.accountID;
-    const canDeleteRequest = isActionOwner && ReportUtils.canDeleteTransaction(moneyRequestReport) && !isDeletedParentAction;
+    const canDeleteRequest = isActionOwner && canDeleteTransaction(moneyRequestReport) && !isDeletedParentAction;
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
     const [requestType, setRequestType] = useState<ActionHandledType>();
-    const allTransactions = useMemo(() => TransactionUtils.getAllReportTransactions(moneyRequestReport?.reportID, transactions), [moneyRequestReport?.reportID, transactions]);
-    const canAllowSettlement = ReportUtils.hasUpdatedTotal(moneyRequestReport, policy);
+    const allTransactions = useMemo(() => getAllReportTransactions(moneyRequestReport?.reportID, transactions), [moneyRequestReport?.reportID, transactions]);
+    const canAllowSettlement = hasUpdatedTotal(moneyRequestReport, policy);
     const policyType = policy?.type;
-    const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport);
-    const connectedIntegration = PolicyUtils.getConnectedIntegration(policy);
+    const isDraft = isOpenExpenseReport(moneyRequestReport);
+    const connectedIntegration = getConnectedIntegration(policy);
     const navigateBackToAfterDelete = useRef<Route>();
-    const hasHeldExpenses = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID);
-    const hasScanningReceipt = ReportUtils.getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => TransactionUtils.isReceiptBeingScanned(t));
-    const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t));
+    const hasHeldExpenses = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
+    const hasScanningReceipt = getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => isReceiptBeingScanned(t));
+    const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => isExpensifyCardTransaction(t) && isPending(t));
     const transactionIDs = allTransactions.map((t) => t.transactionID);
-    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID]);
-    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, moneyRequestReport, policy);
-    const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport?.reportID);
-    const isPayAtEndExpense = TransactionUtils.isPayAtEndExpense(transaction);
-    const isArchivedReport = ReportUtils.isArchivedReport(moneyRequestReport);
-    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: ReportUtils.getArchiveReason});
+    const hasAllPendingRTERViolations = allHavePendingRTERViolation([transaction?.transactionID]);
+    const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transaction?.transactionID, moneyRequestReport, policy);
+    const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(moneyRequestReport?.reportID);
+    const isPayAtEndExpense = isPayAtEndExpenseTransactionUtils(transaction);
+    const isArchivedReport = isArchivedReportUtils(moneyRequestReport);
+    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: getArchiveReason});
 
     const getCanIOUBePaid = useCallback(
-        (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere),
+        (onlyShowPayElsewhere = false) => canIOUBePaidAction(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere),
         [moneyRequestReport, chatReport, policy, transaction],
     );
     const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);
@@ -131,13 +157,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
 
     const shouldShowMarkAsCashButton =
-        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(moneyRequestReport?.reportID)));
+        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(moneyRequestReport?.reportID)));
 
     const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere;
 
-    const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy) && !hasOnlyPendingTransactions, [moneyRequestReport, policy, hasOnlyPendingTransactions]);
+    const shouldShowApproveButton = useMemo(() => canApproveIOU(moneyRequestReport, policy) && !hasOnlyPendingTransactions, [moneyRequestReport, policy, hasOnlyPendingTransactions]);
 
-    const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport);
+    const shouldDisableApproveButton = shouldShowApproveButton && !isAllowedToApproveExpenseReport(moneyRequestReport);
 
     const currentUserAccountID = getCurrentUserAccountID();
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
@@ -151,16 +177,16 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         !shouldShowBrokenConnectionViolation &&
         (moneyRequestReport?.ownerAccountID === currentUserAccountID || isAdmin || moneyRequestReport?.managerID === currentUserAccountID);
 
-    const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(moneyRequestReport);
+    const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && canBeExported(moneyRequestReport);
 
     const shouldShowSettlementButton =
         (shouldShowPayButton || shouldShowApproveButton) && !hasAllPendingRTERViolations && !shouldShowExportIntegrationButton && !shouldShowBrokenConnectionViolation;
 
-    const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
+    const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowStatusBar =
         hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions;
-    const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length && !shouldShowStatusBar;
+    const shouldShowNextStep = !isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length && !shouldShowStatusBar;
     const shouldShowAnyButton =
         isDuplicate ||
         shouldShowSettlementButton ||
@@ -169,10 +195,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         shouldShowNextStep ||
         shouldShowMarkAsCashButton ||
         shouldShowExportIntegrationButton;
-    const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
-    const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency);
-    const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton);
-    const isAnyTransactionOnHold = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID);
+    const bankAccountRoute = getBankAccountRoute(chatReport);
+    const formattedAmount = convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency);
+    const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton);
+    const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
     const displayedAmount = isAnyTransactionOnHold && canAllowSettlement && hasValidNonHeldAmount ? nonHeldAmount : formattedAmount;
     const isMoreContentShown = shouldShowNextStep || shouldShowStatusBar || (shouldShowAnyButton && shouldUseNarrowLayout);
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
@@ -192,10 +218,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 setIsNoDelegateAccessMenuVisible(true);
             } else if (isAnyTransactionOnHold) {
                 setIsHoldMenuVisible(true);
-            } else if (ReportUtils.isInvoiceReport(moneyRequestReport)) {
-                IOU.payInvoice(type, chatReport, moneyRequestReport, payAsBusiness);
+            } else if (isInvoiceReport(moneyRequestReport)) {
+                payInvoice(type, chatReport, moneyRequestReport, payAsBusiness);
             } else {
-                IOU.payMoneyRequest(type, chatReport, moneyRequestReport, true);
+                payMoneyRequest(type, chatReport, moneyRequestReport, true);
             }
         },
         [chatReport, isAnyTransactionOnHold, isDelegateAccessRestricted, moneyRequestReport],
@@ -208,19 +234,17 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         } else if (isAnyTransactionOnHold) {
             setIsHoldMenuVisible(true);
         } else {
-            IOU.approveMoneyRequest(moneyRequestReport, true);
+            approveMoneyRequest(moneyRequestReport, true);
         }
     };
 
     const deleteTransaction = useCallback(() => {
         if (requestParentReportAction) {
-            const iouTransactionID = ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
-                ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID
-                : undefined;
-            if (ReportActionsUtils.isTrackExpenseAction(requestParentReportAction)) {
-                navigateBackToAfterDelete.current = IOU.deleteTrackExpense(moneyRequestReport?.reportID, iouTransactionID, requestParentReportAction, true);
+            const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
+            if (isTrackExpenseAction(requestParentReportAction)) {
+                navigateBackToAfterDelete.current = deleteTrackExpense(moneyRequestReport?.reportID, iouTransactionID, requestParentReportAction, true);
             } else {
-                navigateBackToAfterDelete.current = IOU.deleteMoneyRequest(iouTransactionID, requestParentReportAction, true);
+                navigateBackToAfterDelete.current = deleteMoneyRequest(iouTransactionID, requestParentReportAction, true);
             }
         }
 
@@ -231,15 +255,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         if (!requestParentReportAction) {
             return;
         }
-        const iouTransactionID = ReportActionsUtils.isMoneyRequestAction(requestParentReportAction)
-            ? ReportActionsUtils.getOriginalMessage(requestParentReportAction)?.IOUTransactionID
-            : undefined;
+        const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
         const reportID = transactionThreadReport?.reportID;
 
         if (!iouTransactionID || !reportID) {
             return;
         }
-        TransactionActions.markAsCash(iouTransactionID, reportID);
+        markAsCashAction(iouTransactionID, reportID);
     }, [requestParentReportAction, transactionThreadReport?.reportID]);
 
     const getStatusIcon: (src: IconAsset) => React.ReactNode = (src) => (
@@ -383,7 +405,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             success={isWaitingForSubmissionFromCurrentUser}
                             text={translate('common.submit')}
                             style={[styles.mnw120, styles.pv2, styles.pr0]}
-                            onPress={() => IOU.submitReport(moneyRequestReport)}
+                            onPress={() => submitReport(moneyRequestReport)}
                             isDisabled={shouldDisableSubmitButton}
                         />
                     </View>
@@ -445,7 +467,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 success={isWaitingForSubmissionFromCurrentUser}
                                 text={translate('common.submit')}
                                 style={[styles.flex1, styles.pr0]}
-                                onPress={() => IOU.submitReport(moneyRequestReport)}
+                                onPress={() => submitReport(moneyRequestReport)}
                                 isDisabled={shouldDisableSubmitButton}
                             />
                         )}
@@ -490,7 +512,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 isVisible={isDeleteRequestModalVisible}
                 onConfirm={deleteTransaction}
                 onCancel={() => setIsDeleteRequestModalVisible(false)}
-                onModalHide={() => ReportUtils.navigateBackOnDeleteTransaction(navigateBackToAfterDelete.current)}
+                onModalHide={() => navigateBackOnDeleteTransaction(navigateBackToAfterDelete.current)}
                 prompt={translate('iou.deleteConfirmation', {count: 1})}
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index d49cb021e1b71..ec2d68f950648 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -70,7 +70,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
 
-    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation(transaction ? [transaction?.transactionID] : undefined);
+    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID]);
 
     const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, parentReport, policy);
 

From c1490ef99f7c4c60ebaa41366e24130e5be910c2 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 14 Jan 2025 22:46:31 +0700
Subject: [PATCH 20/23] Fix named import lint

---
 src/components/MoneyRequestHeader.tsx     | 44 +++++++++++++----------
 src/pages/ProcessMoneyRequestHoldPage.tsx |  4 +--
 src/pages/TrackTrainingPage.tsx           |  4 +--
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index ec2d68f950648..32480e37d8eed 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -9,12 +9,23 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
+import {isPolicyAdmin} from '@libs/PolicyUtils';
+import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import {isCurrentUserSubmitter} from '@libs/ReportUtils';
+import {
+    allHavePendingRTERViolation,
+    getTransactionViolations,
+    hasPendingRTERViolation,
+    hasReceipt,
+    isDuplicate as isDuplicateTransactionUtils,
+    isExpensifyCardTransaction,
+    isOnHold as isOnHoldTransactionUtils,
+    isPending,
+    isReceiptBeingScanned,
+    shouldShowBrokenConnectionViolation as shouldShowBrokenConnectionViolationTransactionUtils,
+} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
-import * as TransactionActions from '@userActions/Transaction';
+import {markAsCash as markAsCashAction} from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -52,9 +63,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
     const [transaction] = useOnyx(
         `${ONYXKEYS.COLLECTION.TRANSACTION}${
-            ReportActionsUtils.isMoneyRequestAction(parentReportAction)
-                ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID
-                : CONST.DEFAULT_NUMBER_ID
+            isMoneyRequestAction(parentReportAction) ? getOriginalMessage(parentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID : CONST.DEFAULT_NUMBER_ID
         }`,
     );
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
@@ -63,25 +72,24 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
-    const isOnHold = TransactionUtils.isOnHold(transaction);
-    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID);
+    const isOnHold = isOnHoldTransactionUtils(transaction);
+    const isDuplicate = isDuplicateTransactionUtils(transaction?.transactionID);
     const reportID = report?.reportID;
 
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
 
-    const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID]);
+    const hasAllPendingRTERViolations = allHavePendingRTERViolation([transaction?.transactionID]);
 
-    const shouldShowBrokenConnectionViolation = TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, parentReport, policy);
+    const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transaction?.transactionID, parentReport, policy);
 
-    const shouldShowMarkAsCashButton =
-        hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!PolicyUtils.isPolicyAdmin(policy) || ReportUtils.isCurrentUserSubmitter(parentReport?.reportID)));
+    const shouldShowMarkAsCashButton = hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(parentReport?.reportID)));
 
     const markAsCash = useCallback(() => {
-        TransactionActions.markAsCash(transaction?.transactionID, reportID);
+        markAsCashAction(transaction?.transactionID, reportID);
     }, [reportID, transaction?.transactionID]);
 
-    const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
+    const isScanning = hasReceipt(transaction) && isReceiptBeingScanned(transaction);
 
     const getStatusIcon: (src: IconAsset) => ReactNode = (src) => (
         <Icon
@@ -97,7 +105,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
             return {icon: getStatusIcon(Expensicons.Stopwatch), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold')};
         }
 
-        if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
+        if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
             return {icon: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
         }
         if (shouldShowBrokenConnectionViolation) {
@@ -112,7 +120,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 ),
             };
         }
-        if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID, transactionViolations))) {
+        if (hasPendingRTERViolation(getTransactionViolations(transaction?.transactionID, transactionViolations))) {
             return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (isScanning) {
diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
index ed69b97a2826b..893e029203754 100644
--- a/src/pages/ProcessMoneyRequestHoldPage.tsx
+++ b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -3,7 +3,7 @@ import React, {useCallback, useRef} from 'react';
 import {InteractionManager} from 'react-native';
 import ProcessMoneyRequestHoldMenu from '@components/ProcessMoneyRequestHoldMenu';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
-import * as IOU from '@userActions/IOU';
+import {dismissHoldUseExplanation} from '@userActions/IOU';
 import CONST from '@src/CONST';
 
 function ProcessMoneyRequestHoldPage() {
@@ -20,7 +20,7 @@ function ProcessMoneyRequestHoldPage() {
     );
 
     const onConfirm = useCallback(() => {
-        IOU.dismissHoldUseExplanation();
+        dismissHoldUseExplanation();
     }, []);
 
     return (
diff --git a/src/pages/TrackTrainingPage.tsx b/src/pages/TrackTrainingPage.tsx
index 6bbfc2e5af8a9..de665674349e3 100644
--- a/src/pages/TrackTrainingPage.tsx
+++ b/src/pages/TrackTrainingPage.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import FeatureTrainingModal from '@components/FeatureTrainingModal';
 import useLocalize from '@hooks/useLocalize';
-import * as Link from '@userActions/Link';
+import {openExternalLink} from '@userActions/Link';
 import CONST from '@src/CONST';
 
 const VIDEO_ASPECT_RATIO = 1560 / 1280;
@@ -10,7 +10,7 @@ function TrackTrainingPage() {
     const {translate} = useLocalize();
 
     const onHelp = useCallback(() => {
-        Link.openExternalLink(CONST.FEATURE_TRAINING[CONST.FEATURE_TRAINING.CONTENT_TYPES.TRACK_EXPENSE]?.LEARN_MORE_LINK);
+        openExternalLink(CONST.FEATURE_TRAINING[CONST.FEATURE_TRAINING.CONTENT_TYPES.TRACK_EXPENSE]?.LEARN_MORE_LINK);
     }, []);
 
     return (

From 088eb88901264b1da7ca3196771e3a3886eeaad2 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 14 Jan 2025 22:54:38 +0700
Subject: [PATCH 21/23] make space between title & description 8px consistently
 on mobile & desktop

---
 src/components/ProcessMoneyRequestHoldMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index a84b343f32d3a..c215b65f9071d 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -2,6 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import FeatureTrainingModal from './FeatureTrainingModal';
@@ -22,6 +23,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const navigation = useNavigation();
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
 
     useEffect(() => {
         const unsub = navigation.addListener('beforeRemove', () => {
@@ -32,7 +34,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
 
     const title = useMemo(
         () => (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, onboardingIsMediumOrLargerScreenWidth ? styles.mb1 : styles.mb2]}>
                 <Text style={[styles.textHeadline, styles.mr2]}>{translate('iou.holdEducationalTitle')}</Text>
                 <TextPill textStyles={styles.holdRequestInline}>{translate('iou.holdEducationalText')}</TextPill>
             </View>

From 70a5ceb0dff09f4f7012be61183601b4292543c3 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 14 Jan 2025 22:57:24 +0700
Subject: [PATCH 22/23] fix lint

---
 src/components/ProcessMoneyRequestHoldMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index c215b65f9071d..7cfad5a95de6f 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -39,7 +39,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
                 <TextPill textStyles={styles.holdRequestInline}>{translate('iou.holdEducationalText')}</TextPill>
             </View>
         ),
-        [styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
+        [onboardingIsMediumOrLargerScreenWidth, styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
     );
 
     return (

From 564577c0be9f843e35018f7de60bbf7d37f30735 Mon Sep 17 00:00:00 2001
From: gijoe0295 <gijoe0295@gmail.com>
Date: Tue, 14 Jan 2025 23:10:51 +0700
Subject: [PATCH 23/23] fix lint

---
 src/components/ProcessMoneyRequestHoldMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index 7cfad5a95de6f..6ace3f5cdd37b 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -39,7 +39,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
                 <TextPill textStyles={styles.holdRequestInline}>{translate('iou.holdEducationalText')}</TextPill>
             </View>
         ),
-        [onboardingIsMediumOrLargerScreenWidth, styles.flexRow, styles.alignItemsCenter, styles.mb3, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
+        [onboardingIsMediumOrLargerScreenWidth, styles.flexRow, styles.alignItemsCenter, styles.mb1, styles.mb2, styles.textHeadline, styles.mr2, styles.holdRequestInline, translate],
     );
 
     return (