Merge pull request Expensify#53755 from callstack-internal/fix/50394-…

…UI-fix fix: change horizontal padding for physical card form default renderer
software-mansion-labs · Dec 11, 2024 · 0cd91a6 · 0cd91a6
2 parents 54bd242 + 8c46f73
commit 0cd91a6
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 96 deletions.
diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.tsx b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.tsx
@@ -69,8 +69,9 @@ function DefaultRenderContent({onSubmit, submitButtonText, children, onValidate}
         <FormProvider
             formID={ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}
             submitButtonText={submitButtonText}
+            submitButtonStyles={styles.mh5}
             onSubmit={onSubmit}
-            style={[styles.flex1, styles.mh5]}
+            style={styles.flex1}
             validate={onValidate}
         >
             {children}
@@ -172,6 +173,14 @@ function BaseGetPhysicalCard({
         [cardToBeIssued?.cardID, draftValues, session?.authToken, privatePersonalDetails],
     );
 
+    const handleBackButtonPress = useCallback(() => {
+        if (currentCardID) {
+            Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(currentCardID));
+            return;
+        }
+        Navigation.goBack();
+    }, [currentCardID]);
+
     return (
         <ScreenWrapper
             shouldEnablePickerAvoiding={false}
@@ -180,12 +189,7 @@ function BaseGetPhysicalCard({
         >
             <HeaderWithBackButton
                 title={title}
-                onBackButtonPress={() => {
-                    if (currentCardID) {
-                        Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(currentCardID));
-                    }
-                    Navigation.goBack();
-                }}
+                onBackButtonPress={handleBackButtonPress}
             />
             <Text style={[styles.textHeadline, styles.mh5, styles.mb5]}>{headline}</Text>
             {renderContent({onSubmit, submitButtonText, children, onValidate})}

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx
@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AddressForm from '@components/AddressForm';
 import useLocalize from '@hooks/useLocalize';
 import * as FormActions from '@libs/actions/FormActions';
@@ -10,27 +9,22 @@ import type {Country} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {GetPhysicalCardForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/GetPhysicalCardForm';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 import BaseGetPhysicalCard from './BaseGetPhysicalCard';
 import type {RenderContentProps} from './BaseGetPhysicalCard';
 
-type GetPhysicalCardAddressOnyxProps = {
-    /** Draft values used by the get physical card form */
-    draftValues: OnyxEntry<GetPhysicalCardForm>;
-};
-
-type GetPhysicalCardAddressProps = GetPhysicalCardAddressOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.ADDRESS>;
+type GetPhysicalCardAddressProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.ADDRESS>;
 
 function GetPhysicalCardAddress({
-    draftValues,
     route: {
         params: {country: countryFromUrl, domain},
     },
 }: GetPhysicalCardAddressProps) {
     const {translate} = useLocalize();
 
+    const [draftValues] = useOnyx(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT);
+
     const {addressLine1, addressLine2} = draftValues ?? {};
     const [country, setCountry] = useState(draftValues?.country);
     const [state, setState] = useState(draftValues?.state);
@@ -116,8 +110,4 @@ function GetPhysicalCardAddress({
 
 GetPhysicalCardAddress.displayName = 'GetPhysicalCardAddress';
 
-export default withOnyx<GetPhysicalCardAddressProps, GetPhysicalCardAddressOnyxProps>({
-    draftValues: {
-        key: ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT,
-    },
-})(GetPhysicalCardAddress);
+export default GetPhysicalCardAddress;
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
@@ -14,7 +13,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {GetPhysicalCardForm} from '@src/types/form';
 import BaseGetPhysicalCard from './BaseGetPhysicalCard';
 
 const goToGetPhysicalCardName = (domain: string) => {
@@ -29,22 +27,18 @@ const goToGetPhysicalCardAddress = (domain: string) => {
     Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_ADDRESS.getRoute(domain), CONST.NAVIGATION.ACTION_TYPE.PUSH);
 };
 
-type GetPhysicalCardConfirmOnyxProps = {
-    /** Draft values used by the get physical card form */
-    draftValues: OnyxEntry<GetPhysicalCardForm>;
-};
-
-type GetPhysicalCardConfirmProps = GetPhysicalCardConfirmOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.CONFIRM>;
+type GetPhysicalCardConfirmProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.CONFIRM>;
 
 function GetPhysicalCardConfirm({
-    draftValues,
     route: {
         params: {domain},
     },
 }: GetPhysicalCardConfirmProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [draftValues] = useOnyx(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT);
+
     const {addressLine1, addressLine2, city = '', state = '', zipPostCode = '', country = '', phoneNumber = '', legalFirstName = '', legalLastName = ''} = draftValues ?? {};
 
     return (
@@ -94,8 +88,4 @@ function GetPhysicalCardConfirm({
 
 GetPhysicalCardConfirm.displayName = 'GetPhysicalCardConfirm';
 
-export default withOnyx<GetPhysicalCardConfirmProps, GetPhysicalCardConfirmOnyxProps>({
-    draftValues: {
-        key: ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT,
-    },
-})(GetPhysicalCardConfirm);
+export default GetPhysicalCardConfirm;
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardName.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
@@ -21,22 +22,18 @@ type OnValidateResult = {
     legalLastName?: string;
 };
 
-type GetPhysicalCardNameOnyxProps = {
-    /** Draft values used by the get physical card form */
-    draftValues: OnyxEntry<GetPhysicalCardForm>;
-};
-
-type GetPhysicalCardNameProps = GetPhysicalCardNameOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.NAME>;
+type GetPhysicalCardNameProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.NAME>;
 
 function GetPhysicalCardName({
-    draftValues,
     route: {
         params: {domain},
     },
 }: GetPhysicalCardNameProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [draftValues] = useOnyx(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT);
+
     const {legalFirstName = '', legalLastName = ''} = draftValues ?? {};
 
     const onValidate = (values: OnyxEntry<GetPhysicalCardForm>): OnValidateResult => {
@@ -66,37 +63,35 @@ function GetPhysicalCardName({
             title={translate('getPhysicalCard.header')}
             onValidate={onValidate}
         >
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.LEGAL_FIRST_NAME}
-                name={INPUT_IDS.LEGAL_FIRST_NAME}
-                label={translate('getPhysicalCard.legalFirstName')}
-                aria-label={translate('getPhysicalCard.legalFirstName')}
-                role={CONST.ROLE.PRESENTATION}
-                autoCapitalize="words"
-                defaultValue={legalFirstName}
-                shouldSaveDraft
-            />
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.LEGAL_LAST_NAME}
-                name={INPUT_IDS.LEGAL_LAST_NAME}
-                label={translate('getPhysicalCard.legalLastName')}
-                aria-label={translate('getPhysicalCard.legalLastName')}
-                role={CONST.ROLE.PRESENTATION}
-                autoCapitalize="words"
-                defaultValue={legalLastName}
-                containerStyles={styles.mt5}
-                shouldSaveDraft
-            />
+            <View style={styles.mh5}>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.LEGAL_FIRST_NAME}
+                    name={INPUT_IDS.LEGAL_FIRST_NAME}
+                    label={translate('getPhysicalCard.legalFirstName')}
+                    aria-label={translate('getPhysicalCard.legalFirstName')}
+                    role={CONST.ROLE.PRESENTATION}
+                    autoCapitalize="words"
+                    defaultValue={legalFirstName}
+                    shouldSaveDraft
+                />
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.LEGAL_LAST_NAME}
+                    name={INPUT_IDS.LEGAL_LAST_NAME}
+                    label={translate('getPhysicalCard.legalLastName')}
+                    aria-label={translate('getPhysicalCard.legalLastName')}
+                    role={CONST.ROLE.PRESENTATION}
+                    autoCapitalize="words"
+                    defaultValue={legalLastName}
+                    containerStyles={styles.mt5}
+                    shouldSaveDraft
+                />
+            </View>
         </BaseGetPhysicalCard>
     );
 }
 
 GetPhysicalCardName.displayName = 'GetPhysicalCardName';
 
-export default withOnyx<GetPhysicalCardNameProps, GetPhysicalCardNameOnyxProps>({
-    draftValues: {
-        key: ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT,
-    },
-})(GetPhysicalCardName);
+export default GetPhysicalCardName;
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as LoginUtils from '@libs/LoginUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -19,20 +21,17 @@ type OnValidateResult = {
     phoneNumber?: string;
 };
 
-type GetPhysicalCardPhoneOnyxProps = {
-    /** Draft values used by the get physical card form */
-    draftValues: OnyxEntry<GetPhysicalCardForm>;
-};
-
-type GetPhysicalCardPhoneProps = GetPhysicalCardPhoneOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.ADDRESS>;
+type GetPhysicalCardPhoneProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.ADDRESS>;
 
 function GetPhysicalCardPhone({
     route: {
         params: {domain},
     },
-    draftValues,
 }: GetPhysicalCardPhoneProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const [draftValues] = useOnyx(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT);
 
     const {phoneNumber = ''} = draftValues ?? {};
 
@@ -59,24 +58,22 @@ function GetPhysicalCardPhone({
             title={translate('getPhysicalCard.header')}
             onValidate={onValidate}
         >
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.PHONE_NUMBER}
-                name={INPUT_IDS.PHONE_NUMBER}
-                label={translate('getPhysicalCard.phoneNumber')}
-                aria-label={translate('getPhysicalCard.phoneNumber')}
-                role={CONST.ROLE.PRESENTATION}
-                defaultValue={phoneNumber}
-                shouldSaveDraft
-            />
+            <View style={styles.mh5}>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.PHONE_NUMBER}
+                    name={INPUT_IDS.PHONE_NUMBER}
+                    label={translate('getPhysicalCard.phoneNumber')}
+                    aria-label={translate('getPhysicalCard.phoneNumber')}
+                    role={CONST.ROLE.PRESENTATION}
+                    defaultValue={phoneNumber}
+                    shouldSaveDraft
+                />
+            </View>
         </BaseGetPhysicalCard>
     );
 }
 
 GetPhysicalCardPhone.displayName = 'GetPhysicalCardPhone';
 
-export default withOnyx<GetPhysicalCardPhoneProps, GetPhysicalCardPhoneOnyxProps>({
-    draftValues: {
-        key: ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT,
-    },
-})(GetPhysicalCardPhone);
+export default GetPhysicalCardPhone;