Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Track tax switch does not appear grayed out when enabled/disabled offline #43347

Merged
merged 20 commits into from
Aug 13, 2024
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions src/libs/actions/Policy/Policy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
},
],
Expand All @@ -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,
},
},
},
},
},
Expand All @@ -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'),
},
},
},
},
Expand Down
46 changes: 26 additions & 20 deletions src/pages/workspace/distanceRates/CreateDistanceRatePage.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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});
Expand All @@ -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]}
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/distanceRates/UnitSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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))) : '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If defaultValue can be undefined, then we need to mark it as optional in UnitSelectorProps

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, lets make this field optional

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


return (
<View>
Expand Down
41 changes: 22 additions & 19 deletions src/types/onyx/Policy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,31 +57,34 @@ type Attributes = {
};

/** Policy custom unit */
type CustomUnit = OnyxCommon.OnyxValueWithOfflineFeedback<{
/** Custom unit name */
name: string;
type CustomUnit = OnyxCommon.OnyxValueWithOfflineFeedback<
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
{
/** 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 = {
Expand Down Expand Up @@ -1540,7 +1543,7 @@ type Policy = OnyxCommon.OnyxValueWithOfflineFeedback<
/** Whether GL codes are enabled */
glCodes?: boolean;
} & Partial<PendingJoinRequestPolicy>,
'generalSettings' | 'addWorkspaceRoom' | keyof ACHAccount
'generalSettings' | 'addWorkspaceRoom' | keyof ACHAccount | keyof Attributes
>;

/** Stages of policy connection sync */
Expand Down
Loading