From 96cdb1649a5659c7e1a05e9cdee3b01f8b8a00c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lach=C3=A9=20Melvin?=
 <55115239+lache-melvin@users.noreply.github.com>
Date: Wed, 13 Nov 2024 08:37:52 +1300
Subject: [PATCH] update columns if definitions are changed

---
 .../modals/InboundLineEdit/TabTables.tsx      |  83 +++++-----
 .../CustomerReturn/ReturnQuantitiesTable.tsx  | 147 +++++++++---------
 .../useIsItemVariantsEnabled.ts               |   2 -
 3 files changed, 115 insertions(+), 117 deletions(-)

diff --git a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/TabTables.tsx b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/TabTables.tsx
index 7a7be0059a..854006066a 100644
--- a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/TabTables.tsx
+++ b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/TabTables.tsx
@@ -90,53 +90,54 @@ export const QuantityTableComponent: FC<TableProps> = ({
   isDisabled = false,
 }) => {
   const theme = useTheme();
-  const showItemVariantsColumn = useIsItemVariantsEnabled();
+  const itemVariantsEnabled = useIsItemVariantsEnabled();
 
-  const columns = useColumns<DraftInboundLine>(
+  const columnDefinitions: ColumnDescription<DraftInboundLine>[] = [
+    getBatchColumn(updateDraftLine, theme),
+    getExpiryColumn(updateDraftLine, theme),
+  ];
+
+  if (itemVariantsEnabled) {
+    columnDefinitions.push({
+      key: 'itemVariantId',
+      label: 'label.item-variant',
+      width: 170,
+      Cell: props => (
+        <ItemVariantInputCell {...props} itemId={props.rowData.item.id} />
+      ),
+      setter: updateDraftLine,
+    });
+  }
+  columnDefinitions.push(
     [
-      getBatchColumn(updateDraftLine, theme),
-      getExpiryColumn(updateDraftLine, theme),
-      ...((showItemVariantsColumn
-        ? [
-            {
-              key: 'itemVariantId',
-              label: 'label.item-variant',
-              width: 170,
-              Cell: props => (
-                <ItemVariantInputCell
-                  {...props}
-                  itemId={props.rowData.item.id}
-                />
-              ),
-              setter: updateDraftLine,
-            },
-          ]
-        : []) as ColumnDescription<DraftInboundLine>[]),
-      [
-        'numberOfPacks',
-        {
-          Cell: NumberOfPacksCell,
-          width: 100,
-          label: 'label.num-packs',
-          setter: updateDraftLine,
-        },
-      ],
-      getColumnLookupWithOverrides('packSize', {
-        Cell: PackUnitEntryCell,
+      'numberOfPacks',
+      {
+        Cell: NumberOfPacksCell,
+        width: 100,
+        label: 'label.num-packs',
         setter: updateDraftLine,
-        label: 'label.pack-size',
-      }),
-      [
-        'unitQuantity',
-        {
-          accessor: ({ rowData }) => rowData.packSize * rowData.numberOfPacks,
-        },
-      ],
+      },
     ],
-    {},
-    [updateDraftLine, lines]
+    getColumnLookupWithOverrides('packSize', {
+      Cell: PackUnitEntryCell,
+      setter: updateDraftLine,
+      label: 'label.pack-size',
+    }),
+    [
+      'unitQuantity',
+      {
+        accessor: ({ rowData }) => rowData.packSize * rowData.numberOfPacks,
+      },
+    ]
   );
 
+  const columns = useColumns<DraftInboundLine>(columnDefinitions, {}, [
+    updateDraftLine,
+    lines,
+    columnDefinitions,
+  ]);
+
+  console.log('render');
   return (
     <DataTable
       id="inbound-line-quantity"
diff --git a/client/packages/invoices/src/Returns/modals/CustomerReturn/ReturnQuantitiesTable.tsx b/client/packages/invoices/src/Returns/modals/CustomerReturn/ReturnQuantitiesTable.tsx
index ca31a644ac..bf03b532a1 100644
--- a/client/packages/invoices/src/Returns/modals/CustomerReturn/ReturnQuantitiesTable.tsx
+++ b/client/packages/invoices/src/Returns/modals/CustomerReturn/ReturnQuantitiesTable.tsx
@@ -31,86 +31,85 @@ export const QuantityReturnedTableComponent = ({
 }) => {
   const showItemVariantsColumn = useIsItemVariantsEnabled();
 
-  const columns = useColumns<GenerateCustomerReturnLineFragment>(
+  const columnDefinitions: ColumnDescription<GenerateCustomerReturnLineFragment>[] =
+    ['itemCode', 'itemName'];
+  if (showItemVariantsColumn)
+    columnDefinitions.push({
+      key: 'itemVariantId',
+      label: 'label.item-variant',
+      width: 170,
+      setter: updateLine,
+      Cell: props => (
+        <ItemVariantInputCell {...props} itemId={props.rowData.item.id} />
+      ),
+      getIsDisabled: () => isDisabled,
+    });
+
+  columnDefinitions.push(
     [
-      'itemCode',
-      'itemName',
-      ...((showItemVariantsColumn
-        ? [
-            {
-              key: 'itemVariantId',
-              label: 'label.item-variant',
-              width: 170,
-              setter: updateLine,
-              Cell: props => (
-                <ItemVariantInputCell
-                  {...props}
-                  itemId={props.rowData.item.id}
-                />
-              ),
-              getIsDisabled: () => isDisabled,
-            },
-          ]
-        : []) as ColumnDescription<GenerateCustomerReturnLineFragment>[]),
-      [
-        'batch',
-        {
-          width: 125,
-          accessor: ({ rowData }) => rowData.batch ?? '',
-          setter: updateLine,
-          Cell: TextInputCell,
-          getIsDisabled: () => isDisabled,
-        },
-      ],
-      [
-        expiryInputColumn,
-        {
-          width: 150,
-          getIsDisabled: () => isDisabled,
-          setter: l =>
-            updateLine({
-              ...l,
-              expiryDate: l.expiryDate
-                ? Formatter.naiveDate(new Date(l.expiryDate))
-                : null,
-            }),
-        },
-      ],
-      getColumnLookupWithOverrides('packSize', {
-        Cell: PackUnitEntryCell,
+      'batch',
+      {
+        width: 125,
+        accessor: ({ rowData }) => rowData.batch ?? '',
         setter: updateLine,
+        Cell: TextInputCell,
         getIsDisabled: () => isDisabled,
-        label: 'label.pack-size',
-      }),
-      ...(lines.some(l => l.numberOfPacksIssued !== null) // if any line has a value, show the column
-        ? ([
-            [
-              'numberOfPacks',
-              {
-                label: 'label.pack-quantity-issued',
-                width: 110,
-                accessor: ({ rowData }) => rowData.numberOfPacksIssued ?? '--',
-                Cell: BasicCell,
-                getIsDisabled: () => isDisabled,
-              },
-            ],
-          ] as ColumnDescription<GenerateCustomerReturnLineFragment>[])
-        : []),
-      [
-        'numberOfPacksReturned',
-        {
-          description: 'description.pack-quantity',
-          width: 100,
-          setter: updateLine,
-          getIsDisabled: () => isDisabled,
-          Cell: NumberOfPacksReturnedInputCell,
-        },
-      ],
+      },
     ],
-    {},
-    [updateLine, lines]
+    [
+      expiryInputColumn,
+      {
+        width: 150,
+        getIsDisabled: () => isDisabled,
+        setter: l =>
+          updateLine({
+            ...l,
+            expiryDate: l.expiryDate
+              ? Formatter.naiveDate(new Date(l.expiryDate))
+              : null,
+          }),
+      },
+    ],
+    getColumnLookupWithOverrides('packSize', {
+      Cell: PackUnitEntryCell,
+      setter: updateLine,
+      getIsDisabled: () => isDisabled,
+      label: 'label.pack-size',
+    })
   );
 
+  if (lines.some(l => l.numberOfPacksIssued !== null)) {
+    // if any line has a value, show the column
+
+    columnDefinitions.push([
+      'numberOfPacks',
+      {
+        label: 'label.pack-quantity-issued',
+        width: 110,
+        accessor: ({ rowData }) => rowData.numberOfPacksIssued ?? '--',
+        Cell: BasicCell,
+        getIsDisabled: () => isDisabled,
+      },
+    ]);
+  }
+
+  columnDefinitions.push([
+    'numberOfPacksReturned',
+    {
+      description: 'description.pack-quantity',
+      width: 100,
+      setter: updateLine,
+      getIsDisabled: () => isDisabled,
+      Cell: NumberOfPacksReturnedInputCell,
+    },
+  ]);
+
+  const columns = useColumns(columnDefinitions, {}, [
+    updateLine,
+    lines,
+    columnDefinitions,
+  ]);
+
   return (
     <DataTable
       id="customer-return-line-quantity"
diff --git a/client/packages/system/src/Item/api/hooks/useItemVariant/useIsItemVariantsEnabled.ts b/client/packages/system/src/Item/api/hooks/useItemVariant/useIsItemVariantsEnabled.ts
index d929d1cb93..beb6ce44c0 100644
--- a/client/packages/system/src/Item/api/hooks/useItemVariant/useIsItemVariantsEnabled.ts
+++ b/client/packages/system/src/Item/api/hooks/useItemVariant/useIsItemVariantsEnabled.ts
@@ -1,12 +1,10 @@
 import { useQuery } from 'react-query';
 import { useItemGraphQL } from '../useItemApi';
-import { ITEM_VARIANTS } from '../../keys';
 
 // Item variant inputs (i.e. in Inbound Shipment) should not be available if no item variants are configured
 export const useIsItemVariantsEnabled = () => {
   const { api, storeId } = useItemGraphQL();
   const { data } = useQuery({
-    queryKey: [ITEM_VARIANTS],
     queryFn: async () => {
       const result = await api.itemVariantsConfigured({
         storeId,