Abacus BO: fix selected items state (POS)

I was mixing there several different IDs incorrectly. Specifically, we have to keep the product IDs unmodified and create additional composite ID to be able to distinguish various addons selections and correctly deduplicate them. This fixes the checkout mutation.
adeira · Sep 10, 2021 · 92801d1 · 92801d1
1 parent 8550dd6
commit 92801d1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 17 deletions.
diff --git a/src/abacus-backoffice/src/pos/CheckoutReceipt.js b/src/abacus-backoffice/src/pos/CheckoutReceipt.js
@@ -21,7 +21,7 @@ export default function CheckoutReceipt(props: Props): Node {
     <div className={styles('summary')}>
       {selectedItems.map((item) => {
         return (
-          <div key={item.itemID} className={styles('summaryRow')}>
+          <div key={item.__compositeID} className={styles('summaryRow')}>
             <LayoutInline justifyContent="space-between">
               <div>
                 <Text as="small">{item.units}&times;</Text> {item.itemTitle}
@@ -64,15 +64,15 @@ export default function CheckoutReceipt(props: Props): Node {
                   aria-label="minus"
                   size="small"
                   tint="secondary"
-                  onClick={() => decreaseUnits(item.itemID)}
+                  onClick={() => decreaseUnits(item.__compositeID)}
                 >
                   <Icon name="minus" />
                 </Button>
                 <Button
                   aria-label="plus"
                   size="small"
                   tint="secondary"
-                  onClick={() => increaseUnits(item.itemID)}
+                  onClick={() => increaseUnits(item.__compositeID)}
                 >
                   <Icon name="plus" />
                 </Button>

diff --git a/src/abacus-backoffice/src/pos/recoil/__tests__/selectedItemsState.test.js b/src/abacus-backoffice/src/pos/recoil/__tests__/selectedItemsState.test.js
@@ -53,6 +53,7 @@ it('appends items as expected', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
@@ -80,13 +81,15 @@ it('appends items as expected', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -114,13 +117,15 @@ it('appends items as expected', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -176,13 +181,15 @@ it('manipulates item counts correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -205,13 +212,15 @@ it('manipulates item counts correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -234,6 +243,7 @@ it('manipulates item counts correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -312,13 +322,15 @@ it('preserves order of insertion', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -362,13 +374,15 @@ it('preserves order of insertion', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
@@ -419,13 +433,15 @@ it('resets selected items correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_2",
           "itemAddons": Array [],
           "itemID": "i_2",
           "itemTitle": "I title 2",
@@ -483,6 +499,7 @@ it('appends items with addons as expected', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
@@ -523,13 +540,15 @@ it('appends items with addons as expected', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_1%i_a_1%i_a_2",
           "itemAddons": Array [
             Object {
               "itemAddonExtraPrice": 1000,
@@ -542,7 +561,7 @@ it('appends items with addons as expected', () => {
               "itemAddonTitle": "I addon title 2",
             },
           ],
-          "itemID": "i_1%i_a_1%i_a_2",
+          "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
@@ -596,6 +615,7 @@ it('appends items with addons with a stable order', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1%i_a_1%i_a_2",
           "itemAddons": Array [
             Object {
               "itemAddonExtraPrice": 1000,
@@ -608,7 +628,7 @@ it('appends items with addons with a stable order', () => {
               "itemAddonTitle": "I addon title 2",
             },
           ],
-          "itemID": "i_1%i_a_1%i_a_2",
+          "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
@@ -695,13 +715,15 @@ it('increases item units with addons correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 1,
         },
         Object {
+          "__compositeID": "i_2%i_a_1%i_a_2",
           "itemAddons": Array [
             Object {
               "itemAddonExtraPrice": 1000,
@@ -714,7 +736,7 @@ it('increases item units with addons correctly', () => {
               "itemAddonTitle": "I addon title 2",
             },
           ],
-          "itemID": "i_2%i_a_1%i_a_2",
+          "itemID": "i_2",
           "itemTitle": "I title 2",
           "itemUnitAmount": 15000,
           "units": 2,
@@ -735,13 +757,15 @@ it('increases item units with addons correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
         },
         Object {
+          "__compositeID": "i_2%i_a_1%i_a_2",
           "itemAddons": Array [
             Object {
               "itemAddonExtraPrice": 1000,
@@ -754,7 +778,7 @@ it('increases item units with addons correctly', () => {
               "itemAddonTitle": "I addon title 2",
             },
           ],
-          "itemID": "i_2%i_a_1%i_a_2",
+          "itemID": "i_2",
           "itemTitle": "I title 2",
           "itemUnitAmount": 15000,
           "units": 2,
@@ -775,13 +799,15 @@ it('increases item units with addons correctly', () => {
     Object {
       "selectedItems": Immutable.List [
         Object {
+          "__compositeID": "i_1",
           "itemAddons": Array [],
           "itemID": "i_1",
           "itemTitle": "I title 1",
           "itemUnitAmount": 10000,
           "units": 2,
         },
         Object {
+          "__compositeID": "i_2%i_a_1%i_a_2",
           "itemAddons": Array [
             Object {
               "itemAddonExtraPrice": 1000,
@@ -794,7 +820,7 @@ it('increases item units with addons correctly', () => {
               "itemAddonTitle": "I addon title 2",
             },
           ],
-          "itemID": "i_2%i_a_1%i_a_2",
+          "itemID": "i_2",
           "itemTitle": "I title 2",
           "itemUnitAmount": 15000,
           "units": 3,

diff --git a/src/abacus-backoffice/src/pos/recoil/selectedItemsState.js b/src/abacus-backoffice/src/pos/recoil/selectedItemsState.js
@@ -5,8 +5,9 @@ import { isBrowser } from '@adeira/js';
 import { atom, selector, useRecoilState, DefaultValue, useRecoilValue } from 'recoil';
 
 export type AtomItemType = {
+  +__compositeID: string, // composite of product ID and addons IDs for deduplication
   +units: number,
-  +itemID: string,
+  +itemID: string, // original product ID
   +itemTitle: string,
   +itemUnitAmount: number,
   +itemAddons?: $ReadOnlyArray<{
@@ -83,7 +84,13 @@ const selectedItemsStatsSelector = selector<SelectorItem>({
 
 export default function useSelectedItemsApi(): {
   +selectedItems: AtomValue,
-  +select: (AtomItemType) => void,
+  +select: (
+    $Diff<
+      AtomItemType,
+      // composite ID is being computed when the idem is selected (hence the omission)
+      { +__compositeID: string },
+    >,
+  ) => void,
   +increaseUnits: (string) => void,
   +decreaseUnits: (string) => void,
   +reset: () => void,
@@ -96,7 +103,7 @@ export default function useSelectedItemsApi(): {
     selectedItems,
     // Select adds a new item to the array while preserving order of the inserts. It de-duplicates
     // the items by their `itemID` so already existing items increase number of units instead.
-    select: (newItem: AtomItemType) => {
+    select: (newItem) => {
       setSelectedItems((previousItems) => {
         // Sort the addons so we can achieve stable ID and order:
         const newItemAddons = [...(newItem.itemAddons ?? [])].sort((a, b) => {
@@ -112,17 +119,18 @@ export default function useSelectedItemsApi(): {
           return 0;
         });
 
-        // Item ID composes of the original item ID with additional item addons IDs.
-        const newItemID =
+        // Item ID composes of the original item ID with additional item addons IDs (we use it later for deduplication).
+        const __compositeID =
           newItemAddons.reduce((acc, curVal) => {
             return `${acc}%${curVal.itemAddonID}`;
           }, newItem.itemID) ?? newItem.itemID;
 
-        const itemIndex = previousItems.findIndex((item) => item.itemID === newItemID);
+        const itemIndex = previousItems.findIndex((item) => item.__compositeID === __compositeID);
         if (itemIndex === -1) {
           return previousItems.push({
+            __compositeID,
             units: newItem.units,
-            itemID: newItemID,
+            itemID: newItem.itemID,
             itemTitle: newItem.itemTitle,
             itemUnitAmount: newItem.itemUnitAmount,
             itemAddons: newItemAddons,
@@ -145,7 +153,10 @@ export default function useSelectedItemsApi(): {
     // This function expects already some items in memory and simply increases number of units.
     increaseUnits: (itemID) => {
       setSelectedItems((previousItems) => {
-        const itemIndex = previousItems.findIndex((item) => item.itemID === itemID);
+        const itemIndex = previousItems.findIndex((item) => item.__compositeID === itemID);
+        if (itemIndex === -1) {
+          return previousItems;
+        }
         const previousItem = previousItems.get(itemIndex);
         if (previousItem == null) {
           return previousItems;
@@ -157,7 +168,7 @@ export default function useSelectedItemsApi(): {
     // This function expects already some items in memory and simply decreases number of units.
     decreaseUnits: (itemID) => {
       setSelectedItems((previousItems) => {
-        const itemIndex = previousItems.findIndex((item) => item.itemID === itemID);
+        const itemIndex = previousItems.findIndex((item) => item.__compositeID === itemID);
         if (itemIndex === -1) {
           return previousItems;
         }