Merge pull request #43347 from nkdengineer/fix/43318

fix: Track tax switch does not appear grayed out when enabled/disabled offline
Expensify · Aug 13, 2024 · 86da342 · 86da342
2 parents 9819f37 + f9775a2
commit 86da342
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 108 deletions.
diff --git a/src/components/UnitPicker.tsx b/src/components/UnitPicker.tsx
@@ -15,7 +15,7 @@ type UnitItemType = {
 };
 
 type UnitPickerProps = {
-    defaultValue: Unit;
+    defaultValue?: Unit;
     onOptionSelected: (unit: UnitItemType) => void;
 };
 

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
@@ -2906,11 +2906,11 @@ function enableDistanceRequestTax(policyID: string, customUnitName: string, cust
                     customUnits: {
                         [customUnitID]: {
                             attributes,
+                            pendingFields: {
+                                taxEnabled: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                            },
                         },
                     },
-                    pendingFields: {
-                        customUnits: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
-                    },
                 },
             },
         ],
@@ -2919,8 +2919,12 @@ function enableDistanceRequestTax(policyID: string, customUnitName: string, cust
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
                 value: {
-                    pendingFields: {
-                        customUnits: null,
+                    customUnits: {
+                        [customUnitID]: {
+                            pendingFields: {
+                                taxEnabled: null,
+                            },
+                        },
                     },
                 },
             },
@@ -2933,6 +2937,9 @@ function enableDistanceRequestTax(policyID: string, customUnitName: string, cust
                     customUnits: {
                         [customUnitID]: {
                             attributes: policy?.customUnits ? policy?.customUnits[customUnitID].attributes : null,
+                            errorFields: {
+                                taxEnabled: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                            },
                         },
                     },
                 },

diff --git a/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx b/src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx
@@ -1,8 +1,10 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
+import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import AmountForm from '@components/AmountForm';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapperWithRef from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -40,6 +42,8 @@ function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
     const customUnitRateID = generateCustomUnitID();
     const {inputCallbackRef} = useAutoFocusInput();
 
+    const FullPageBlockingView = !customUnitID ? FullPageOfflineBlockingView : View;
+
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.POLICY_CREATE_DISTANCE_RATE_FORM>) => validateRateValue(values, currency, toLocaleDigit),
         [currency, toLocaleDigit],
@@ -71,26 +75,28 @@ function CreateDistanceRatePage({policy, route}: CreateDistanceRatePageProps) {
                 shouldEnableMaxHeight
             >
                 <HeaderWithBackButton title={translate('workspace.distanceRates.addRate')} />
-                <FormProvider
-                    formID={ONYXKEYS.FORMS.POLICY_CREATE_DISTANCE_RATE_FORM}
-                    submitButtonText={translate('common.save')}
-                    onSubmit={submit}
-                    validate={validate}
-                    enabledWhenOffline
-                    style={[styles.flexGrow1]}
-                    shouldHideFixErrorsAlert
-                    submitFlexEnabled={false}
-                    submitButtonStyles={[styles.mh5, styles.mt0]}
-                >
-                    <InputWrapperWithRef
-                        InputComponent={AmountForm}
-                        inputID={INPUT_IDS.RATE}
-                        extraDecimals={1}
-                        isCurrencyPressable={false}
-                        currency={currency}
-                        ref={inputCallbackRef}
-                    />
-                </FormProvider>
+                <FullPageBlockingView style={[styles.flexGrow1]}>
+                    <FormProvider
+                        formID={ONYXKEYS.FORMS.POLICY_CREATE_DISTANCE_RATE_FORM}
+                        submitButtonText={translate('common.save')}
+                        onSubmit={submit}
+                        validate={validate}
+                        enabledWhenOffline
+                        style={[styles.flexGrow1]}
+                        shouldHideFixErrorsAlert
+                        submitFlexEnabled={false}
+                        submitButtonStyles={[styles.mh5, styles.mt0]}
+                    >
+                        <InputWrapperWithRef
+                            InputComponent={AmountForm}
+                            inputID={INPUT_IDS.RATE}
+                            extraDecimals={1}
+                            isCurrencyPressable={false}
+                            currency={currency}
+                            ref={inputCallbackRef}
+                        />
+                    </FormProvider>
+                </FullPageBlockingView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -52,9 +53,11 @@ function PolicyDistanceRatesSettingsPage({policy, policyCategories, route}: Poli
     const isPolicyTrackTaxEnabled = !!policy?.tax?.trackingEnabled;
 
     const defaultCategory = customUnits[customUnitID]?.defaultCategory;
-    const defaultUnit = customUnits[customUnitID]?.attributes.unit;
+    const defaultUnit = customUnits[customUnitID]?.attributes?.unit;
     const errorFields = customUnits[customUnitID]?.errorFields;
 
+    const FullPageBlockingView = !customUnit ? FullPageOfflineBlockingView : View;
+
     const setNewUnit = (unit: UnitItemType) => {
         const attributes = {...customUnits[customUnitID].attributes, unit: unit.value};
         DistanceRate.setPolicyDistanceRatesUnit(policyID, customUnit, {...customUnit, attributes});
@@ -77,8 +80,9 @@ function PolicyDistanceRatesSettingsPage({policy, policyCategories, route}: Poli
 
     const onToggleTrackTax = (isOn: boolean) => {
         const attributes = {...customUnits[customUnitID].attributes, taxEnabled: isOn};
-        Policy.enableDistanceRequestTax(policyID, customUnit.name, customUnitID, attributes);
+        Policy.enableDistanceRequestTax(policyID, customUnit?.name, customUnitID, attributes);
     };
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -91,68 +95,76 @@ function PolicyDistanceRatesSettingsPage({policy, policyCategories, route}: Poli
                 testID={PolicyDistanceRatesSettingsPage.displayName}
             >
                 <HeaderWithBackButton title={translate('workspace.common.settings')} />
-                <ScrollView contentContainerStyle={styles.flexGrow1}>
-                    <View>
-                        <OfflineWithFeedback
-                            errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
-                            pendingAction={customUnits[customUnitID]?.pendingFields?.attributes}
-                            errorRowStyles={styles.mh5}
-                            onClose={() => clearErrorFields('attributes')}
-                        >
-                            <UnitSelector
-                                label={translate('workspace.distanceRates.unit')}
-                                defaultValue={defaultUnit}
-                                wrapperStyle={[styles.ph5, styles.mt3]}
-                                setNewUnit={setNewUnit}
-                            />
-                        </OfflineWithFeedback>
-                        {policy?.areCategoriesEnabled && OptionsListUtils.hasEnabledOptions(policyCategories ?? {}) && (
+                <FullPageBlockingView>
+                    <ScrollView contentContainerStyle={styles.flexGrow1}>
+                        <View>
+                            {defaultUnit && (
+                                <OfflineWithFeedback
+                                    errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
+                                    pendingAction={customUnits[customUnitID]?.pendingFields?.attributes}
+                                    errorRowStyles={styles.mh5}
+                                    onClose={() => clearErrorFields('attributes')}
+                                >
+                                    <UnitSelector
+                                        label={translate('workspace.distanceRates.unit')}
+                                        defaultValue={defaultUnit}
+                                        wrapperStyle={[styles.ph5, styles.mt3]}
+                                        setNewUnit={setNewUnit}
+                                    />
+                                </OfflineWithFeedback>
+                            )}
+                            {policy?.areCategoriesEnabled && OptionsListUtils.hasEnabledOptions(policyCategories ?? {}) && (
+                                <OfflineWithFeedback
+                                    errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
+                                    pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
+                                    errorRowStyles={styles.mh5}
+                                    onClose={() => clearErrorFields('defaultCategory')}
+                                >
+                                    <CategorySelector
+                                        policyID={policyID}
+                                        label={translate('workspace.distanceRates.defaultCategory')}
+                                        defaultValue={defaultCategory}
+                                        wrapperStyle={[styles.ph5, styles.mt3]}
+                                        setNewCategory={setNewCategory}
+                                    />
+                                </OfflineWithFeedback>
+                            )}
                             <OfflineWithFeedback
-                                errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
-                                pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
+                                errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'taxEnabled')}
                                 errorRowStyles={styles.mh5}
-                                onClose={() => clearErrorFields('defaultCategory')}
+                                pendingAction={customUnits[customUnitID]?.pendingFields?.taxEnabled}
                             >
-                                <CategorySelector
-                                    policyID={policyID}
-                                    label={translate('workspace.distanceRates.defaultCategory')}
-                                    defaultValue={defaultCategory}
-                                    wrapperStyle={[styles.ph5, styles.mt3]}
-                                    setNewCategory={setNewCategory}
-                                />
-                            </OfflineWithFeedback>
-                        )}
-                        <OfflineWithFeedback errorRowStyles={styles.mh5}>
-                            <View style={[styles.mt2, styles.mh5]}>
-                                <View style={[styles.flexRow, styles.mb2, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.distanceRates.trackTax')}</Text>
-                                    <Switch
-                                        isOn={isDistanceTrackTaxEnabled}
-                                        accessibilityLabel={translate('workspace.distanceRates.trackTax')}
-                                        onToggle={onToggleTrackTax}
-                                        disabled={!isPolicyTrackTaxEnabled}
-                                    />
-                                </View>
-                            </View>
-                            {!isPolicyTrackTaxEnabled && (
-                                <View style={[styles.mh5]}>
-                                    <Text style={styles.colorMuted}>
-                                        {translate('workspace.distanceRates.taxFeatureNotEnabledMessage')}
-                                        <TextLink
-                                            onPress={() => {
-                                                Navigation.dismissModal();
-                                                Navigation.goBack(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
-                                            }}
-                                        >
-                                            {translate('workspace.common.moreFeatures')}
-                                        </TextLink>
-                                        {translate('workspace.distanceRates.changePromptMessage')}
-                                    </Text>
+                                <View style={[styles.mt2, styles.mh5]}>
+                                    <View style={[styles.flexRow, styles.mb2, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                                        <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.distanceRates.trackTax')}</Text>
+                                        <Switch
+                                            isOn={isDistanceTrackTaxEnabled}
+                                            accessibilityLabel={translate('workspace.distanceRates.trackTax')}
+                                            onToggle={onToggleTrackTax}
+                                            disabled={!isPolicyTrackTaxEnabled}
+                                        />
+                                    </View>
                                 </View>
-                            )}
-                        </OfflineWithFeedback>
-                    </View>
-                </ScrollView>
+                                {!isPolicyTrackTaxEnabled && (
+                                    <View style={[styles.mh5]}>
+                                        <Text style={styles.colorMuted}>
+                                            {translate('workspace.distanceRates.taxFeatureNotEnabledMessage')}
+                                            <TextLink
+                                                onPress={() => {
+                                                    Navigation.dismissModal();
+                                                    Navigation.goBack(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
+                                                }}
+                                            >
+                                                {translate('workspace.common.moreFeatures')}
+                                            </TextLink>
+                                            {translate('workspace.distanceRates.changePromptMessage')}
+                                        </Text>
+                                    </View>
+                                )}
+                            </OfflineWithFeedback>
+                        </View>
+                    </ScrollView>
+                </FullPageBlockingView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

diff --git a/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx b/src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx
@@ -13,7 +13,7 @@ type UnitSelectorModalProps = {
     isVisible: boolean;
 
     /** Selected unit  */
-    currentUnit: Unit;
+    currentUnit?: Unit;
 
     /** Function to call when the user selects a unit */
     onUnitSelected: (value: UnitItemType) => void;

diff --git a/src/pages/workspace/distanceRates/UnitSelector/index.tsx b/src/pages/workspace/distanceRates/UnitSelector/index.tsx
@@ -14,7 +14,7 @@ type UnitSelectorProps = {
     setNewUnit: (value: UnitItemType) => void;
 
     /** Currently selected unit */
-    defaultValue: Unit;
+    defaultValue?: Unit;
 
     /** Label to display on field */
     label: string;
@@ -41,7 +41,7 @@ function UnitSelector({defaultValue, wrapperStyle, label, setNewUnit}: UnitSelec
         hidePickerModal();
     };
 
-    const title = Str.recapitalize(translate(getUnitTranslationKey(defaultValue)));
+    const title = defaultValue ? Str.recapitalize(translate(getUnitTranslationKey(defaultValue))) : '';
 
     return (
         <View>

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
@@ -57,31 +57,34 @@ type Attributes = {
 };
 
 /** Policy custom unit */
-type CustomUnit = OnyxCommon.OnyxValueWithOfflineFeedback<{
-    /** Custom unit name */
-    name: string;
+type CustomUnit = OnyxCommon.OnyxValueWithOfflineFeedback<
+    {
+        /** Custom unit name */
+        name: string;
 
-    /** ID that identifies this custom unit */
-    customUnitID: string;
+        /** ID that identifies this custom unit */
+        customUnitID: string;
 
-    /** Contains custom attributes like unit, for this custom unit */
-    attributes: Attributes;
+        /** Contains custom attributes like unit, for this custom unit */
+        attributes: Attributes;
 
-    /** Distance rates using this custom unit */
-    rates: Record<string, Rate>;
+        /** Distance rates using this custom unit */
+        rates: Record<string, Rate>;
 
-    /** The default category in which this custom unit is used */
-    defaultCategory?: string;
+        /** The default category in which this custom unit is used */
+        defaultCategory?: string;
 
-    /** Whether this custom unit is enabled */
-    enabled?: boolean;
+        /** Whether this custom unit is enabled */
+        enabled?: boolean;
 
-    /** Error messages to show in UI */
-    errors?: OnyxCommon.Errors;
+        /** Error messages to show in UI */
+        errors?: OnyxCommon.Errors;
 
-    /** Form fields that triggered errors */
-    errorFields?: OnyxCommon.ErrorFields;
-}>;
+        /** Form fields that triggered errors */
+        errorFields?: OnyxCommon.ErrorFields;
+    },
+    keyof Attributes
+>;
 
 /** Policy company address data */
 type CompanyAddress = {
@@ -1552,7 +1555,7 @@ type Policy = OnyxCommon.OnyxValueWithOfflineFeedback<
         /** Workspace account ID configured for Expensify Card */
         workspaceAccountID?: number;
     } & Partial<PendingJoinRequestPolicy>,
-    'generalSettings' | 'addWorkspaceRoom' | keyof ACHAccount
+    'generalSettings' | 'addWorkspaceRoom' | keyof ACHAccount | keyof Attributes
 >;
 
 /** Stages of policy connection sync */