Refactor custom unit rate update

src/CONST.js

@@ -663,6 +663,7 @@ const CONST = {
             ADMIN: 'admin',
         },
         ROOM_PREFIX: '#',
+        CUSTOM_UNIT_RATE_BASE_OFFSET: 100,
     },
 
     TERMS: {

src/components/OfflineWithFeedback.js

@@ -87,6 +87,7 @@ const OfflineWithFeedback = (props) => {
         .keys()
         .sortBy()
         .map(key => props.errors[key])
+        .uniq()
         .value();
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them

src/libs/actions/Policy.js

@@ -50,6 +50,22 @@ function getSimplifiedEmployeeList(employeeList) {
         .value();
 }
 
+/**
+ * We pass customUnit rates from PHP as an array, even though there's only ever a single rate per custom unit.
+ * This flattens the array of rates so that we store the single rate directly.
+ *
+ * @param {Object} fullPolicyOrPolicySummary
+ * @param {Object} [fullPolicyOrPolicySummary.value.customUnits]
+ * @returns {Object}
+ */
+function getSimplifiedCustomUnits(fullPolicyOrPolicySummary) {
+    const customUnits = lodashGet(fullPolicyOrPolicySummary, 'value.customUnits', {});
+    _.forEach(customUnits, (customUnit, customUnitID) => {
+        customUnits[customUnitID].rates = lodashGet(customUnit, 'rates[0]', {});
+    });
+    return customUnits;
+}
+
 /**
  * Takes a full policy that is returned from the policyList and simplifies it so we are only storing
  * the pieces of data that we need to in Onyx
@@ -60,6 +76,8 @@ function getSimplifiedEmployeeList(employeeList) {
  * @param {String} fullPolicyOrPolicySummary.role
  * @param {String} fullPolicyOrPolicySummary.type
  * @param {String} fullPolicyOrPolicySummary.outputCurrency
+ * @param {String} [fullPolicyOrPolicySummary.avatar]
+ * @param {String} [fullPolicyOrPolicySummary.value.avatar]
  * @param {String} [fullPolicyOrPolicySummary.avatarURL]
  * @param {String} [fullPolicyOrPolicySummary.value.avatarURL]
  * @param {Object} [fullPolicyOrPolicySummary.value.employeeList]
@@ -80,7 +98,7 @@ function getSimplifiedPolicyObject(fullPolicyOrPolicySummary, isFromFullPolicy)
         // "GetFullPolicy" and "GetPolicySummaryList" returns different policy objects. If policy is retrieved by "GetFullPolicy",
         // avatarUrl will be nested within the key "value"
         avatarURL: fullPolicyOrPolicySummary.avatarURL || lodashGet(fullPolicyOrPolicySummary, 'value.avatarURL', ''),
-        customUnits: lodashGet(fullPolicyOrPolicySummary, 'value.customUnits', {}),
+        customUnits: getSimplifiedCustomUnits(fullPolicyOrPolicySummary),
     };
 }
 
@@ -558,12 +576,16 @@ function setWorkspaceErrors(policyID, errors) {
  * @param {String} policyID
  * @param {Number} customUnitID
  */
-function removeUnitError(policyID, customUnitID) {
+function clearCustomUnitErrors(policyID, customUnitID) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
         customUnits: {
             [customUnitID]: {
                 errors: null,
                 pendingAction: null,
+                rates: {
+                    errors: null,
+                    pendingAction: null,
+                },
             },
         },
     });
@@ -639,34 +661,70 @@ function updateWorkspaceCustomUnit(policyID, currentCustomUnit, values) {
 
 /**
  * @param {String} policyID
+ * @param {Object} currentCustomUnitRate
  * @param {String} customUnitID
  * @param {Object} values
  */
-function setCustomUnitRate(policyID, customUnitID, values) {
-    DeprecatedAPI.Policy_CustomUnitRate_Update({
-        policyID: policyID.toString(),
-        customUnitID: customUnitID.toString(),
-        customUnitRate: JSON.stringify(values),
-        lastModified: null,
-    })
-        .then((response) => {
-            if (response.jsonCode !== 200) {
-                throw new Error();
-            }
+function setCustomUnitRate(policyID, currentCustomUnitRate, customUnitID, values) {
+    const optimisticData = [
+        {
+            onyxMethod: 'merge',
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [customUnitID]: {
+                        rates: {
+                            ...values,
+                            errors: null,
+                            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                        },
+                    },
+                },
+            },
+        },
+    ];
+
+    const successData = [
+        {
+            onyxMethod: 'merge',
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [customUnitID]: {
+                        rates: {
+                            ...values,
+                            pendingAction: null,
+                        },
+                    },
+                },
+            },
+        },
+    ];
 
-            updateLocalPolicyValues(policyID, {
-                customUnit: {
-                    rate: {
-                        id: values.customUnitRateID,
-                        name: values.name,
-                        value: Number(values.rate),
+    const failureData = [
+        {
+            onyxMethod: 'merge',
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                customUnits: {
+                    [customUnitID]: {
+                        rates: {
+                            ...currentCustomUnitRate,
+                            errors: {
+                                [DateUtils.getMicroseconds()]: Localize.translateLocal('workspace.reimburse.updateCustomUnitError'),
+                            },
+                        },
                     },
                 },
-            });
-        }).catch(() => {
-            // Show the user feedback
-            Growl.error(Localize.translateLocal('workspace.editor.genericFailureMessage'), 5000);
-        });
+            },
+        },
+    ];
+
+    API.write('SetWorkspaceCustomUnitRate', {
+        policyID,
+        customUnitID,
+        customUnitRate: JSON.stringify(values),
+    }, {optimisticData, successData, failureData});
 }
 
 /**
@@ -747,7 +805,7 @@ export {
     uploadAvatar,
     update,
     setWorkspaceErrors,
-    removeUnitError,
+    clearCustomUnitErrors,
     hideWorkspaceAlertMessage,
     deletePolicy,
     createAndNavigate,

src/pages/workspace/reimburse/WorkspaceReimburseView.js

@@ -40,13 +40,11 @@ const propTypes = {
                 attributes: PropTypes.shape({
                     unit: PropTypes.string,
                 }),
-                rates: PropTypes.arrayOf(
-                    PropTypes.shape({
-                        customUnitRateID: PropTypes.string,
-                        name: PropTypes.string,
-                        rate: PropTypes.number,
-                    }),
-                ),
+                rates: PropTypes.shape({
+                    customUnitRateID: PropTypes.string,
+                    name: PropTypes.string,
+                    rate: PropTypes.number,
+                }),
             }),
         ),
         outputCurrency: PropTypes.string,
@@ -64,9 +62,7 @@ class WorkspaceReimburseView extends React.Component {
             unitID: lodashGet(distanceCustomUnit, 'customUnitID', ''),
             unitName: lodashGet(distanceCustomUnit, 'name', ''),
             unitValue: lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'),
-            rateID: lodashGet(distanceCustomUnit, 'rates[0].customUnitRateID', ''),
-            rateName: lodashGet(distanceCustomUnit, 'rates[0].name', ''),
-            rateValue: this.getRateDisplayValue(lodashGet(distanceCustomUnit, 'rates[0].rate', 0) / 100),
+            rateValue: this.getRateDisplayValue(lodashGet(distanceCustomUnit, 'rates.rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET),
             outputCurrency: lodashGet(props, 'policy.outputCurrency', ''),
         };
 
@@ -151,11 +147,12 @@ class WorkspaceReimburseView extends React.Component {
             rateValue: numValue.toFixed(3),
         });
 
-        Policy.setCustomUnitRate(this.props.policyID, this.state.unitID, {
-            customUnitRateID: this.state.rateID,
-            name: this.state.rateName,
-            rate: numValue.toFixed(3) * 100,
-        }, null);
+        const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), unit => unit.name === 'Distance');
+        const currentCustomUnitRate = lodashGet(distanceCustomUnit, 'rates', {});
+        Policy.setCustomUnitRate(this.props.policyID, currentCustomUnitRate, this.state.unitID, {
+            ..._.omit(currentCustomUnitRate, 'rate'),
+            rate: numValue * CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET,
+        });
     }
 
     render() {
@@ -194,9 +191,14 @@ class WorkspaceReimburseView extends React.Component {
                         <Text>{this.props.translate('workspace.reimburse.trackDistanceCopy')}</Text>
                     </View>
                     <OfflineWithFeedback
-                        errors={lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'errors'])}
-                        pendingAction={lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'pendingAction'])}
-                        onClose={() => Policy.removeUnitError(this.props.policyID, this.state.unitID)}
+                        errors={{
+                            ...lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'errors']),
+                            ...lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'rates', 'errors']),
+                        }}
+                        pendingAction={lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'pendingAction'])
+                            || lodashGet(this.props, ['policy', 'customUnits', this.state.unitID, 'rates', 'pendingAction'])}
+                        onClose={() => Policy.clearCustomUnitErrors(this.props.policyID, this.state.unitID)}
+                        errorRowStyles={[styles.flex1]}
                     >
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mv2]}>
                             <View style={[styles.rateCol]}>