From 7ccadb2c75d7e176f8326df45a11677344044334 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 2 Apr 2024 15:02:27 +0500 Subject: [PATCH 001/261] temp feature --- assets/images/receipt-location-marker.svg | 134 ++++++++++++++++++ src/components/LocationPermissionModal.tsx | 48 +++++++ ...oraryForRefactorRequestConfirmationList.js | 2 + 3 files changed, 184 insertions(+) create mode 100644 assets/images/receipt-location-marker.svg create mode 100644 src/components/LocationPermissionModal.tsx diff --git a/assets/images/receipt-location-marker.svg b/assets/images/receipt-location-marker.svg new file mode 100644 index 000000000000..674db76464f7 --- /dev/null +++ b/assets/images/receipt-location-marker.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/LocationPermissionModal.tsx b/src/components/LocationPermissionModal.tsx new file mode 100644 index 000000000000..f73289a22aee --- /dev/null +++ b/src/components/LocationPermissionModal.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import LocationMarker from '@assets/images/receipt-location-marker.svg'; +import ConfirmModal from './ConfirmModal'; + +type LocationPermissionModalProps = { + /** A callback to call when the form has been submitted */ + onConfirm: () => void; + + /** A callback to call when the form has been closed */ + onCancel?: () => void; + + /** Modal visibility */ + isVisible: boolean; + + /** Callback method fired when the modal is hidden */ + onModalHide?: () => void; + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility?: boolean; +}; + +function LocationPermissionModal({ + shouldSetModalVisibility = true, + onModalHide = () => {}, + isVisible, + onConfirm, + onCancel, +}: LocationPermissionModalProps) { + + return ( + + ); +} + +LocationPermissionModal.displayName = 'LocationPermissionModal'; + +export default LocationPermissionModal; diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 3fd76eea657b..fed91f87677e 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -31,6 +31,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import Button from './Button'; +import LocationPermissionModal from './LocationPermissionModal'; import ButtonWithDropdownMenu from './ButtonWithDropdownMenu'; import categoryPropTypes from './categoryPropTypes'; import ConfirmedRoute from './ConfirmedRoute'; @@ -978,6 +979,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ )} {shouldShowAllFields && supplementaryFields} + {}} isVisible /> Date: Tue, 9 Apr 2024 01:06:06 +0500 Subject: [PATCH 002/261] design ready --- src/components/ConfirmContent.tsx | 63 +++++++++++++++++-- src/components/ConfirmModal.tsx | 30 +++++++++ src/components/LocationPermissionModal.tsx | 29 +++++---- ...oraryForRefactorRequestConfirmationList.js | 7 ++- src/languages/en.ts | 5 ++ src/languages/es.ts | 5 ++ 6 files changed, 119 insertions(+), 20 deletions(-) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index 26331f92401c..adade9fc09c5 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -14,8 +14,11 @@ import type IconAsset from '@src/types/utils/IconAsset'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; +import {Close} from './Icon/Expensicons'; import ImageSVG from './ImageSVG'; +import {PressableWithoutFeedback} from './Pressable'; import Text from './Text'; +import Tooltip from './Tooltip'; type ConfirmContentProps = { /** Title of the modal */ @@ -51,15 +54,33 @@ type ConfirmContentProps = { /** Icon to display above the title */ iconSource?: IconAsset; + /** Icon width */ + iconWidth?: number; + + /** Icon height */ + iconHeight?: number; + + /** Should the icon be centered? */ + shouldCenterIcon?: boolean; + /** Whether to center the icon / text content */ shouldCenterContent?: boolean; + /** Whether to show the dismiss icon */ + shouldShowDismissIcon?: boolean; + /** Whether to stack the buttons */ shouldStackButtons?: boolean; + /** Whether to reverse the order of the stacked buttons */ + shouldReverseStackedButtons?: boolean; + /** Styles for title */ titleStyles?: StyleProp; + /** Styles for title container */ + titleContainerStyles?: StyleProp; + /** Styles for prompt */ promptStyles?: StyleProp; @@ -91,7 +112,13 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, + iconWidth = variables.appModalAppIconSize, + iconHeight = variables.appModalAppIconSize, + shouldCenterIcon = false, + shouldShowDismissIcon = false, image, + titleContainerStyles, + shouldReverseStackedButtons = false, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -116,19 +143,35 @@ function ConfirmContent({ )} + {shouldShowDismissIcon && ( + + + + + + + + )} {typeof iconSource === 'function' && ( - + )} - +
+ {shouldShowCancelButton && shouldReverseStackedButtons && ( +