From 004a2225c4c600a8ce1eb69c1faf57b3bbda70e8 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 20 Nov 2023 13:02:41 +0100 Subject: [PATCH 01/66] Remove unnecessary --- src/libs/updatePropsPaperWorklet/index.js | 3 --- src/libs/updatePropsPaperWorklet/index.native.js | 13 ------------- .../ReportActionCompose/ReportActionCompose.js | 9 +++------ 3 files changed, 3 insertions(+), 22 deletions(-) delete mode 100644 src/libs/updatePropsPaperWorklet/index.js delete mode 100644 src/libs/updatePropsPaperWorklet/index.native.js diff --git a/src/libs/updatePropsPaperWorklet/index.js b/src/libs/updatePropsPaperWorklet/index.js deleted file mode 100644 index 1bca6ea13cdc..000000000000 --- a/src/libs/updatePropsPaperWorklet/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function () { - 'worklet'; -} diff --git a/src/libs/updatePropsPaperWorklet/index.native.js b/src/libs/updatePropsPaperWorklet/index.native.js deleted file mode 100644 index ed79b38ffab5..000000000000 --- a/src/libs/updatePropsPaperWorklet/index.native.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function (viewTag, viewName, updates) { - 'worklet'; - - // _updatePropsPaper is a function that is worklet function from react-native-reanimated which is not available on web - // eslint-disable-next-line no-undef - _updatePropsPaper([ - { - tag: viewTag, - name: viewName, - updates, - }, - ]); -} diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 7bce37dc3826..adab1b007843 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import {runOnJS, useAnimatedRef} from 'react-native-reanimated'; +import {runOnJS, setNativeProps, useAnimatedRef} from 'react-native-reanimated'; import _ from 'underscore'; import AttachmentModal from '@components/AttachmentModal'; import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton'; @@ -22,7 +22,6 @@ import getDraftComment from '@libs/ComposerUtils/getDraftComment'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import getModalState from '@libs/getModalState'; import * as ReportUtils from '@libs/ReportUtils'; -import updatePropsPaperWorklet from '@libs/updatePropsPaperWorklet'; import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside'; import ParticipantLocalTime from '@pages/home/report/ParticipantLocalTime'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; @@ -332,13 +331,11 @@ function ReportActionCompose({ return; } - const viewTag = animatedRef(); - const viewName = 'RCTMultilineTextInputView'; - const updates = {text: ''}; // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state runOnJS(setIsCommentEmpty)(true); runOnJS(resetFullComposerSize)(); - updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread + setNativeProps(animatedRef, {text: ''}); + // updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread runOnJS(submitForm)(); }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]); From 6d5966f43a61ce45111e68a0ca6843401b679d96 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Thu, 23 Nov 2023 13:05:38 +0100 Subject: [PATCH 02/66] remove unnecessary commented code --- .../home/report/ReportActionCompose/ReportActionCompose.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index adab1b007843..670ee07a5bcb 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -334,8 +334,7 @@ function ReportActionCompose({ // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state runOnJS(setIsCommentEmpty)(true); runOnJS(resetFullComposerSize)(); - setNativeProps(animatedRef, {text: ''}); - // updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread + setNativeProps(animatedRef, {text: ''}); // clears native text input on the UI thread runOnJS(submitForm)(); }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]); From 6f95d5b246c90b27b2ad16bb7bcb2c52208e7d45 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:39:44 +0100 Subject: [PATCH 03/66] add Educational Interstitial as popup and RHP --- .../simple-illustration__commentbubbles.svg | 22 ++++ .../simple-illustration__hourglass.svg | 56 +++++++++ .../simple-illustration__trashcan.svg | 52 +++++++++ src/ROUTES.ts | 1 + src/components/Icon/Illustrations.ts | 6 + src/components/ProcessMoneyRequestHoldMenu.js | 106 ++++++++++++++++++ src/languages/en.ts | 8 ++ .../AppNavigator/ModalStackNavigators.js | 5 + .../Navigators/RightModalNavigator.js | 4 + src/libs/Navigation/linkingConfig.js | 5 + src/pages/ProcessMoneyRequestHoldPage.js | 94 ++++++++++++++++ src/styles/styles.ts | 15 +++ src/styles/variables.ts | 1 + 13 files changed, 375 insertions(+) create mode 100644 assets/images/simple-illustrations/simple-illustration__commentbubbles.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__hourglass.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__trashcan.svg create mode 100644 src/components/ProcessMoneyRequestHoldMenu.js create mode 100644 src/pages/ProcessMoneyRequestHoldPage.js diff --git a/assets/images/simple-illustrations/simple-illustration__commentbubbles.svg b/assets/images/simple-illustrations/simple-illustration__commentbubbles.svg new file mode 100644 index 000000000000..829d3ee2e3fe --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__commentbubbles.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__hourglass.svg b/assets/images/simple-illustrations/simple-illustration__hourglass.svg new file mode 100644 index 000000000000..539e1e45b795 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__hourglass.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__trashcan.svg b/assets/images/simple-illustrations/simple-illustration__trashcan.svg new file mode 100644 index 000000000000..4e66efa0a67e --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__trashcan.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 26589a3db0e0..a4ce8e46df6c 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -379,6 +379,7 @@ export default { route: 'referral/:contentType', getRoute: (contentType: string) => `referral/${contentType}`, }, + PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational', // These are some one-off routes that will be removed once they're no longer needed (see GH issues for details) SAASTR: 'saastr', diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 440350895826..6b486c7407b4 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -30,11 +30,13 @@ import BankArrow from '@assets/images/simple-illustrations/simple-illustration__ import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg'; import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg'; import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg'; +import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg'; import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg'; import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg'; import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg'; import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg'; import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg'; +import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg'; import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg'; import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg'; import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg'; @@ -47,6 +49,7 @@ import SanFrancisco from '@assets/images/simple-illustrations/simple-illustratio import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg'; import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg'; import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; +import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; export { @@ -100,4 +103,7 @@ export { Hands, HandEarth, SmartScan, + Hourglass, + CommentBubbles, + TrashCan, }; diff --git a/src/components/ProcessMoneyRequestHoldMenu.js b/src/components/ProcessMoneyRequestHoldMenu.js new file mode 100644 index 000000000000..78da0a5ba834 --- /dev/null +++ b/src/components/ProcessMoneyRequestHoldMenu.js @@ -0,0 +1,106 @@ +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import React, {useMemo} from 'react'; +import {View} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@styles/useThemeStyles'; +import variables from '@styles/variables'; +import Button from './Button'; +import Icon from './Icon'; +import * as Illustrations from './Icon/Illustrations'; +import Popover from './Popover'; +import refPropTypes from './refPropTypes'; +import Text from './Text'; + +const propTypes = { + isVisible: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + onConfirm: PropTypes.func.isRequired, + anchorPosition: PropTypes.shape({ + horizontal: PropTypes.number, + vertical: PropTypes.number, + }), + anchorRef: refPropTypes, +}; + +const defaultProps = { + anchorPosition: {}, + anchorRef: () => {}, +}; + +function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosition, anchorRef}) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const holdMenuSections = useMemo(() => { + const baseHoldMenuSections = [ + { + icon: Illustrations.Hourglass, + titleTranslationKey: 'iou.whatIsHoldTitle', + descriptionTranslationKey: 'iou.whatIsHoldExplain', + }, + { + icon: Illustrations.CommentBubbles, + titleTranslationKey: 'iou.holdIsTemporaryTitle', + descriptionTranslationKey: 'iou.holdIsTemporaryExplain', + }, + { + icon: Illustrations.TrashCan, + titleTranslationKey: 'iou.deleteHoldTitle', + descriptionTranslationKey: 'iou.deleteHoldExplain', + }, + ]; + + return _.map(baseHoldMenuSections, (section, index) => ( + + + + {translate(section.titleTranslationKey)} + + {translate(section.descriptionTranslationKey)} + + + + )); + }, [styles, translate]); + + return ( + + + + {translate('iou.holdEducationalTitle')} + {translate('iou.hold')} + + {holdMenuSections} +