From 6749e0abc0d041cfe0c4349c36a5982045cf1ae6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 7 Dec 2023 22:39:15 +0700 Subject: [PATCH 001/411] fix: pdf not cached --- src/components/PDFView/index.native.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index b022823d215a..417106618c6d 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -11,6 +11,7 @@ import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeSt import withWindowDimensions from '@components/withWindowDimensions'; import compose from '@libs/compose'; import * as StyleUtils from '@styles/StyleUtils'; +import * as CachedPDFPaths from '@userActions/CachedPDFPaths'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; @@ -118,7 +119,9 @@ class PDFView extends Component { * After the PDF is successfully loaded hide PDFPasswordForm and the loading * indicator. */ - finishPDFLoad() { + finishPDFLoad(_, path) { + console.log(path) + // CachedPDFPaths.save(path); this.setState({ shouldRequestPassword: false, shouldShowLoadingIndicator: false, @@ -155,7 +158,7 @@ class PDFView extends Component { fitPolicy={0} trustAllCerts={false} renderActivityIndicator={() => } - source={{uri: this.props.sourceURL}} + source={{uri: this.props.sourceURL, cache: true, expiration: 864000}} style={pdfStyles} onError={this.handleFailureToLoadPDF} password={this.state.password} From 0624e89a3f80065d08f2c271e78b505f779520e1 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 7 Dec 2023 22:40:08 +0700 Subject: [PATCH 002/411] fix lint --- src/components/PDFView/index.native.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 417106618c6d..4f09906ad6fe 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -11,7 +11,6 @@ import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeSt import withWindowDimensions from '@components/withWindowDimensions'; import compose from '@libs/compose'; import * as StyleUtils from '@styles/StyleUtils'; -import * as CachedPDFPaths from '@userActions/CachedPDFPaths'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; @@ -120,8 +119,6 @@ class PDFView extends Component { * indicator. */ finishPDFLoad(_, path) { - console.log(path) - // CachedPDFPaths.save(path); this.setState({ shouldRequestPassword: false, shouldShowLoadingIndicator: false, From 552592cd2ab1b75e54f10e4450dec427fe6dee02 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 7 Dec 2023 22:56:24 +0700 Subject: [PATCH 003/411] fix lint --- src/components/PDFView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 4f09906ad6fe..69a47ce82d9c 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -118,7 +118,7 @@ class PDFView extends Component { * After the PDF is successfully loaded hide PDFPasswordForm and the loading * indicator. */ - finishPDFLoad(_, path) { + finishPDFLoad() { this.setState({ shouldRequestPassword: false, shouldShowLoadingIndicator: false, From 2a4d712ab8651d58ba1c2e12c63d59a1e9178c54 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 22 Dec 2023 16:08:45 +0800 Subject: [PATCH 004/411] update ioutype params when selecting a split participant --- src/libs/actions/IOU.js | 15 ++++++++++++ ...yForRefactorRequestParticipantsSelector.js | 23 ++++++++++-------- .../step/IOURequestStepParticipants.js | 24 ++++++++++++++++--- 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index a9d04654f8bd..1c8f30d75498 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -23,6 +23,7 @@ import * as UserUtils from '@libs/UserUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import * as Policy from './Policy'; import * as Report from './Report'; @@ -169,6 +170,19 @@ function clearMoneyRequest(transactionID) { Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, null); } +/** + * @param {Object[]} routes + * @param {String} newIouType + */ +function updateMoneyRequestTypeParams(routes, newIouType) { + routes.forEach((route) => { + if (route.name !== SCREENS.MONEY_REQUEST.CREATE && route.name !== SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS) { + return; + } + Navigation.setParams({iouType: newIouType}, route.key); + }); +} + /** * @param {String} transactionID * @param {Number} amount @@ -3481,6 +3495,7 @@ export { resetMoneyRequestTag, resetMoneyRequestTag_temporaryForRefactor, clearMoneyRequest, + updateMoneyRequestTypeParams, setMoneyRequestAmount_temporaryForRefactor, setMoneyRequestBillable_temporaryForRefactor, setMoneyRequestCategory_temporaryForRefactor, diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 8d7d5cfceb77..6952f2e3cfa4 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -163,13 +163,16 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ * @param {Object} option */ const addSingleParticipant = (option) => { - onParticipantsAdded([ - { - ..._.pick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText'), - selected: true, - }, - ]); - onFinish(); + onParticipantsAdded( + [ + { + ..._.pick(option, 'accountID', 'login', 'isPolicyExpenseChat', 'reportID', 'searchText'), + selected: true, + }, + ], + false, + ); + onFinish(false); }; /** @@ -208,7 +211,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ ]; } - onParticipantsAdded(newSelectedOptions); + onParticipantsAdded(newSelectedOptions, newSelectedOptions.length !== 0); }, [participants, onParticipantsAdded], ); @@ -276,7 +279,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ return; } - onFinish(); + onFinish(true); }, [shouldShowSplitBillErrorMessage, onFinish]); const footerContent = ( @@ -315,7 +318,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ boldStyle shouldShowConfirmButton={shouldShowSplitBillErrorMessage && isAllowedToSplit} confirmButtonText={translate('iou.addToSplit')} - onConfirmSelection={onFinish} + onConfirmSelection={() => onFinish(true)} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index ec670b828146..38ca52730512 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -1,3 +1,4 @@ +import {useNavigationState} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import React, {useCallback, useEffect, useRef} from 'react'; import transactionPropTypes from '@components/transactionPropTypes'; @@ -36,13 +37,16 @@ function IOURequestStepParticipants({ transaction: {participants = []}, }) { const {translate} = useLocalize(); + const routes = useNavigationState((state) => state.routes); const optionsSelectorRef = useRef(); const selectedReportID = useRef(reportID); const numberOfParticipants = useRef(participants.length); const iouRequestType = TransactionUtils.getRequestType(transaction); - const headerTitle = translate(TransactionUtils.getHeaderTitleTranslationKey(transaction)); + const isSplitRequest = iouType === CONST.IOU.TYPE.SPLIT; + const headerTitle = isSplitRequest ? translate('iou.split') : translate(TransactionUtils.getHeaderTitleTranslationKey(transaction)); const receiptFilename = lodashGet(transaction, 'filename'); const receiptPath = lodashGet(transaction, 'receipt.source'); + const newIouType = useRef(null); // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, redirect the user to the starting step of the flow. // This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then @@ -51,8 +55,22 @@ function IOURequestStepParticipants({ IOUUtils.navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath, () => {}, iouRequestType, iouType, transactionID, reportID); }, [receiptPath, receiptFilename, iouRequestType, iouType, transactionID, reportID]); + useEffect(() => { + if (!newIouType.current) { + return; + } + IOU.updateMoneyRequestTypeParams(routes, newIouType.current); + newIouType.current = null; + }, [routes, participants]); + const addParticipant = useCallback( - (val) => { + (val, isSplit) => { + if (isSplit && iouType !== CONST.IOU.TYPE.SPLIT) { + newIouType.current = CONST.IOU.TYPE.SPLIT; + } else if (!isSplit && iouType === CONST.IOU.TYPE.SPLIT) { + newIouType.current = CONST.IOU.TYPE.REQUEST; + } + IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, val); numberOfParticipants.current = val.length; @@ -66,7 +84,7 @@ function IOURequestStepParticipants({ // When a participant is selected, the reportID needs to be saved because that's the reportID that will be used in the confirmation step. selectedReportID.current = lodashGet(val, '[0].reportID', reportID); }, - [reportID, transactionID], + [reportID, transactionID, iouType], ); const goToNextStep = useCallback(() => { From 35d1ad8fb9e69da6aa5af7e459fd2a00a9aa02da Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 22 Dec 2023 16:09:39 +0800 Subject: [PATCH 005/411] allow to split with 1 person --- .../request/step/IOURequestStepParticipants.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index 38ca52730512..fa9887635d37 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -87,12 +87,15 @@ function IOURequestStepParticipants({ [reportID, transactionID, iouType], ); - const goToNextStep = useCallback(() => { - const nextStepIOUType = numberOfParticipants.current === 1 ? iouType : CONST.IOU.TYPE.SPLIT; - IOU.resetMoneyRequestTag_temporaryForRefactor(transactionID); - IOU.resetMoneyRequestCategory_temporaryForRefactor(transactionID); - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(nextStepIOUType, transactionID, selectedReportID.current || reportID)); - }, [iouType, transactionID, reportID]); + const goToNextStep = useCallback( + (isSplit) => { + const nextStepIOUType = !isSplit && iouType !== CONST.IOU.TYPE.REQUEST ? CONST.IOU.TYPE.REQUEST : iouType; + IOU.resetMoneyRequestTag_temporaryForRefactor(transactionID); + IOU.resetMoneyRequestCategory_temporaryForRefactor(transactionID); + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(nextStepIOUType, transactionID, selectedReportID.current || reportID)); + }, + [iouType, transactionID, reportID], + ); const navigateBack = useCallback(() => { IOUUtils.navigateToStartMoneyRequestStep(iouRequestType, iouType, transactionID, reportID); From 91c0b691ec326d8115a97fce1d0069b982b1210f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 22 Dec 2023 16:09:57 +0800 Subject: [PATCH 006/411] don't include selected participant if not split --- src/pages/iou/request/step/IOURequestStepParticipants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index fa9887635d37..17c0fc4e4918 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -112,7 +112,7 @@ function IOURequestStepParticipants({ > (optionsSelectorRef.current = el)} - participants={participants} + participants={isSplitRequest ? participants : []} onParticipantsAdded={addParticipant} onFinish={goToNextStep} iouType={iouType} From c4232f34d6e16d037ad8ffb574aa9be29c76dd9e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 22 Dec 2023 16:10:12 +0800 Subject: [PATCH 007/411] reset ioutype if tab changed --- src/pages/iou/request/IOURequestStartPage.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/request/IOURequestStartPage.js b/src/pages/iou/request/IOURequestStartPage.js index 6572e154ee14..b5c2348cf72c 100644 --- a/src/pages/iou/request/IOURequestStartPage.js +++ b/src/pages/iou/request/IOURequestStartPage.js @@ -1,3 +1,4 @@ +import {useNavigationState} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useRef, useState} from 'react'; @@ -61,6 +62,7 @@ function IOURequestStartPage({ }) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const routes = useNavigationState((state) => state.routes); const [isDraggingOver, setIsDraggingOver] = useState(false); const tabTitles = { [CONST.IOU.TYPE.REQUEST]: translate('iou.requestMoney'), @@ -103,10 +105,13 @@ function IOURequestStartPage({ if (newIouType === previousIOURequestType) { return; } + if (iouType === CONST.IOU.TYPE.SPLIT) { + IOU.updateMoneyRequestTypeParams(routes, CONST.IOU.TYPE.REQUEST); + } IOU.startMoneyRequest_temporaryForRefactor(reportID, isFromGlobalCreate, newIouType); transactionRequestType.current = newIouType; }, - [previousIOURequestType, reportID, isFromGlobalCreate], + [previousIOURequestType, reportID, isFromGlobalCreate, iouType, routes], ); if (!transaction.transactionID) { From b34854f35fdce47cb9ec05e944eae232e4c91d9e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 1 Jan 2024 22:31:01 +0800 Subject: [PATCH 008/411] add more comment --- src/pages/iou/request/step/IOURequestStepParticipants.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index 17c0fc4e4918..8907cb4945e9 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -65,9 +65,13 @@ function IOURequestStepParticipants({ const addParticipant = useCallback( (val, isSplit) => { + // It's only possible to switch between REQUEST and SPLIT. + // We want to update the IOU type only if it's not updated yet to prevent unnecessary updates. if (isSplit && iouType !== CONST.IOU.TYPE.SPLIT) { newIouType.current = CONST.IOU.TYPE.SPLIT; } else if (!isSplit && iouType === CONST.IOU.TYPE.SPLIT) { + // Non-split can be either REQUEST or SEND. Instead of checking whether + // the current IOU type is not a REQUEST (true for SEND), we check whether the current IOU type is a SPLIT. newIouType.current = CONST.IOU.TYPE.REQUEST; } From 756c002b276c7e9d3662e6a3786ed02079166326 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 1 Jan 2024 22:44:38 +0800 Subject: [PATCH 009/411] prettier --- src/pages/iou/request/step/IOURequestStepParticipants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index 8907cb4945e9..865695b9e38a 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -70,7 +70,7 @@ function IOURequestStepParticipants({ if (isSplit && iouType !== CONST.IOU.TYPE.SPLIT) { newIouType.current = CONST.IOU.TYPE.SPLIT; } else if (!isSplit && iouType === CONST.IOU.TYPE.SPLIT) { - // Non-split can be either REQUEST or SEND. Instead of checking whether + // Non-split can be either REQUEST or SEND. Instead of checking whether // the current IOU type is not a REQUEST (true for SEND), we check whether the current IOU type is a SPLIT. newIouType.current = CONST.IOU.TYPE.REQUEST; } From 15fb5de877950cd62ef5937bc0dd922cfb44c02c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 2 Jan 2024 18:59:26 +0800 Subject: [PATCH 010/411] remove unnecessary logic --- src/pages/iou/request/step/IOURequestStepConfirmation.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index cb6225b641fc..0ba57ba012d4 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -104,11 +104,6 @@ function IOURequestStepConfirmation({ // If there is not a report attached to the IOU with a reportID, then the participants were manually selected and the user needs taken // back to the participants step if (!transaction.participantsAutoAssigned) { - // When going back to the participants step, if the iou is a "request" (not a split), then the participants need to be cleared from the - // transaction so that the participant can be selected again. - if (iouType === CONST.IOU.TYPE.REQUEST) { - IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, []); - } Navigation.goBack(ROUTES.MONEY_REQUEST_STEP_PARTICIPANTS.getRoute(iouType, transactionID, reportID)); return; } From 9f93e082ee945889492ee9b8c2a964f663134582 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 2 Jan 2024 19:12:32 +0800 Subject: [PATCH 011/411] add more comment --- src/pages/iou/request/step/IOURequestStepParticipants.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js index 865695b9e38a..495853206dc0 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.js +++ b/src/pages/iou/request/step/IOURequestStepParticipants.js @@ -59,6 +59,8 @@ function IOURequestStepParticipants({ if (!newIouType.current) { return; } + // Participants can be added as normal or split participants. We want to wait for the participants' data to be updated before + // updating the money request type route params reducing the overhead of the thread and preventing possible jitters in UI. IOU.updateMoneyRequestTypeParams(routes, newIouType.current); newIouType.current = null; }, [routes, participants]); From 2c34c91b7a413f5add1dec3e21822ec32715ee65 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jan 2024 16:31:54 +0800 Subject: [PATCH 012/411] update iou type for all money request page --- src/libs/actions/IOU.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index a641f0d061d4..59bf2ddbdc0e 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -174,12 +174,14 @@ function clearMoneyRequest(transactionID) { } /** + * Update money request-related pages IOU type params + * * @param {Object[]} routes * @param {String} newIouType */ function updateMoneyRequestTypeParams(routes, newIouType) { routes.forEach((route) => { - if (route.name !== SCREENS.MONEY_REQUEST.CREATE && route.name !== SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS) { + if (!route.name.startsWith('Money_Request_')) { return; } Navigation.setParams({iouType: newIouType}, route.key); From ccbc27eea6b5daa9bb6f11cb28affde1327e6d9e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jan 2024 16:39:56 +0800 Subject: [PATCH 013/411] remove unused import --- src/libs/actions/IOU.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 59bf2ddbdc0e..661c49379763 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -25,7 +25,6 @@ import * as UserUtils from '@libs/UserUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; import * as Policy from './Policy'; import * as Report from './Report'; From 2b12285a9b16a7b70f71ba93024199db8f741454 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:04:22 +0530 Subject: [PATCH 014/411] Define image prop for Confirm Modal --- src/components/ConfirmModal.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 82c4b27be7f1..3ceb7f0da096 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -67,6 +67,9 @@ const propTypes = { /** Whether to stack the buttons */ shouldStackButtons: PropTypes.bool, + /** Image to display with content */ + image: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + ...windowDimensionsPropTypes, }; @@ -88,6 +91,7 @@ const defaultProps = { promptStyles: [], shouldCenterContent: false, shouldStackButtons: true, + image: null, }; function ConfirmModal(props) { From 2a2d2ca500fb5b369e664af072a86eb94b0e24dd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:08:41 +0530 Subject: [PATCH 015/411] Define image prop for ConfirmContent --- src/components/ConfirmContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index 94146a2c2957..f5a63181140e 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -64,6 +64,9 @@ type ConfirmContentProps = { /** Styles for icon */ iconAdditionalStyles?: StyleProp; + + /** Image to display with content */ + image?: IconAsset; }; function ConfirmContent({ @@ -84,6 +87,7 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, + image = null, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); From 32c4c97839a98a3308009fb12875f9c72c6fe637 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:09:03 +0530 Subject: [PATCH 016/411] Pass image to Confirm Content --- src/components/ConfirmModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 3ceb7f0da096..6cf63064267b 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -123,6 +123,7 @@ function ConfirmModal(props) { titleStyles={props.titleStyles} promptStyles={props.promptStyles} shouldStackButtons={props.shouldStackButtons} + image={props.image} /> ); From 2aff47b4ca40539b21b6e58cd9b8c98a972a9680 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:22:13 +0530 Subject: [PATCH 017/411] Add illustration to App directory --- .../three_legged_laptop_woman.svg | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 assets/images/product-illustrations/three_legged_laptop_woman.svg diff --git a/assets/images/product-illustrations/three_legged_laptop_woman.svg b/assets/images/product-illustrations/three_legged_laptop_woman.svg new file mode 100644 index 000000000000..6be000b92e37 --- /dev/null +++ b/assets/images/product-illustrations/three_legged_laptop_woman.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d18f38065bdbd2f80dceabab77cd274e6836096c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:23:01 +0530 Subject: [PATCH 018/411] Export laptop woman svg from Illustrations.ts --- src/components/Icon/Illustrations.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 954c8d0392fc..87f584586114 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -57,6 +57,7 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati 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'; +import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, @@ -118,4 +119,5 @@ export { CommentBubbles, TrashCan, TeleScope, + ThreeLeggedLaptopWoman, }; From e89e5a1f843b3b98b16797b91c3e5d4cfc1c4ecc Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 23:17:07 +0530 Subject: [PATCH 019/411] Fix Illustration path --- src/components/Icon/Illustrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 87f584586114..8d8f5bef4bb5 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -27,6 +27,7 @@ import TadaBlue from '@assets/images/product-illustrations/tada--blue.svg'; import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg'; import TeleScope from '@assets/images/product-illustrations/telescope.svg'; import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg'; +import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg'; import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg'; import BigRocket from '@assets/images/simple-illustrations/simple-illustration__bigrocket.svg'; import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg'; @@ -57,7 +58,6 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati 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'; -import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, From d330fcbf26eb7a9e11dc595dcda899bc476b44bd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 02:59:22 +0530 Subject: [PATCH 020/411] Pass ThreeLeggedWoman Illustration to Confirm Modal --- src/components/FocusModeNotification.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js index e846c1f188e2..862bf0a2f2f0 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.js @@ -8,6 +8,7 @@ import CONST from '@src/CONST'; import ConfirmModal from './ConfirmModal'; import Text from './Text'; import TextLinkWithRef from './TextLink'; +import * as Illustrations from './Icon/Illustrations'; function FocusModeNotification() { const styles = useThemeStyles(); @@ -40,6 +41,7 @@ function FocusModeNotification() { } isVisible + image={Illustrations.ThreeLeggedLaptopWoman} /> ); } From a3f1e5f02c35f90d7f4360a0037ac68e64c1fd9a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:06:40 +0530 Subject: [PATCH 021/411] Render SVG in Confirm Content --- src/components/ConfirmContent.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index f5a63181140e..ddf59ef5cab3 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -8,6 +8,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; +import useStyleUtils from '@hooks/useStyleUtils'; +import colors from '@styles/theme/colors'; +import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; @@ -87,16 +90,28 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, - image = null, + image, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); const {isOffline} = useNetwork(); + const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( + <> + {typeof image === 'function' && ( + + + + )} {typeof iconSource === 'function' && ( @@ -161,6 +176,7 @@ function ConfirmContent({ )} + ); } From 70067fdc3e544c1616c642bcb907afb6063da49a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:22:55 +0530 Subject: [PATCH 022/411] Use CONST for SVG dimensions --- src/CONST.ts | 6 ++++++ src/components/ConfirmContent.tsx | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 2fd592f539c2..0bf7d4d34127 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3101,6 +3101,12 @@ const CONST = { EMAIL: 'EMAIL', REPORT: 'REPORT', }, + + /** Dimensions for illustration shown in Confirmation Modal */ + CONFIRM_CONTENT_SVG_SIZE: { + HEIGHT: 220, + WIDTH: 130, + } } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index ddf59ef5cab3..db92daaad6df 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -10,6 +10,7 @@ import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import CONST from '@src/CONST'; import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; @@ -107,8 +108,8 @@ function ConfirmContent({ )} From f9fd03f65f03c4e581125843196101387b111f14 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 04:03:38 +0530 Subject: [PATCH 023/411] Prettier --- src/CONST.ts | 2 +- src/components/ConfirmContent.tsx | 142 ++++++++++++------------ src/components/FocusModeNotification.js | 2 +- src/components/Icon/Illustrations.ts | 2 +- 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0bf7d4d34127..5e63794af3e4 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3106,7 +3106,7 @@ const CONST = { CONFIRM_CONTENT_SVG_SIZE: { HEIGHT: 220, WIDTH: 130, - } + }, } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index db92daaad6df..7030b948ddb8 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -4,17 +4,17 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import variables from '@styles/variables'; -import type IconAsset from '@src/types/utils/IconAsset'; -import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; -import ImageSVG from './ImageSVG'; +import type IconAsset from '@src/types/utils/IconAsset'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; +import ImageSVG from './ImageSVG'; import Text from './Text'; type ConfirmContentProps = { @@ -70,7 +70,7 @@ type ConfirmContentProps = { iconAdditionalStyles?: StyleProp; /** Image to display with content */ - image?: IconAsset; + image?: IconAsset; }; function ConfirmContent({ @@ -100,83 +100,83 @@ function ConfirmContent({ const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( <> - {typeof image === 'function' && ( - - - - )} - - - {typeof iconSource === 'function' && ( - - + + + )} + + + {typeof iconSource === 'function' && ( + + + + )} + +
- )} - -
+ {typeof prompt === 'string' ? {prompt} : prompt} - {typeof prompt === 'string' ? {prompt} : prompt} - - {shouldStackButtons ? ( - <> -