@bjsdistribution/dms-client-return 0.1.97-prod → 0.1.98-prod

package/dist/components/order-view/return-client-products/product-table/ReturnProductTable.js

@@ -1,193 +1,256 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import E, { useState as l } from "react";
-import { StyledTableWrapper as T, StyledTable as j } from "../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles.js";
-import { Checkbox as M, CancelationModal as L, CancelAndCompleteAction as W, useAxios as B, displayValueOrNA as x } from "@bjsdistribution/dms-component-library";
-import F from "../../../../assets/icons/ActionIcon.js";
-import { useProductDetails as V, useOrderId as z } from "../../store.js";
-import { Skeleton as G, Empty as $, Spin as q, notification as f } from "antd";
-import { useSelectedProducts as H, useNewReturnOrderData as J, useIsShowNorthSouth as K, useClientPortal as Q } from "../../../store.js";
-import a from "styled-components";
-import { NavLink as U } from "react-router-dom";
-import { EmptyDataContainer as X } from "../../order-actions/actions/charge-log/index.js";
-import d from "../../northern-southern-info/CustomInput.js";
-const ge = (s) => {
-  const [b, c] = H(), [h, v] = l(!1), [n, te] = V(), [oe, re] = l(null), [C] = z(), [A] = J(), [S] = K(), [p] = Q(), [g, m] = l(null), [N, u] = l(!1), { loading: i, fetchData: I } = B({
+import { jsxs as o, jsx as t, Fragment as K } from "react/jsx-runtime";
+import k, { useState as h, useMemo as D, useEffect as Q } from "react";
+import { StyledTableWrapper as U, StyledTable as X } from "../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles.js";
+import { Checkbox as Y, CancelationModal as Z, CancelAndCompleteAction as ee, useAxios as te, displayValueOrNA as E } from "@bjsdistribution/dms-component-library";
+import ne from "../../../../assets/icons/ActionIcon.js";
+import { useReturnProductDetails as oe, useOrderId as le } from "../../store.js";
+import { Skeleton as ie, Empty as re, Spin as ae, notification as C } from "antd";
+import { useSelectedProducts as de, useNewReturnOrderData as se, useIsShowNorthSouth as ce, useClientPortal as pe } from "../../../store.js";
+import i from "styled-components";
+import { NavLink as he } from "react-router-dom";
+import { EmptyDataContainer as me } from "../../order-actions/actions/charge-log/index.js";
+import m from "../../northern-southern-info/CustomInput.js";
+import fe from "../../../../assets/icons/ChevronDownIcon.js";
+import { groupProductsByPallet as ue, hasAnyPallet as ge, toggleGroupSelectionIds as xe } from "./palletGrouping.js";
+const ze = (a) => {
+  const [f, s] = de(), [u, N] = h(!1), [l] = oe(), [S] = le(), [R] = se(), [T] = ce(), [g] = pe(), [A, x] = h(null), [O, b] = h(!1), { loading: c, fetchData: G } = te({
     endpoint: "v1/return/product/remove/",
     method: "POST"
-  }), D = (t) => {
-    m(t), u(!0);
-  }, P = async () => {
-    if (g === null) return;
-    const t = g;
+  }), L = (e) => {
+    x(e), b(!0);
+  }, j = async () => {
+    if (A === null) return;
+    const e = A;
     try {
-      const o = await I({
+      const n = await G({
         payload: {
-          return_order_product_id: t,
-          return_order_id: +C
+          return_order_product_id: e,
+          return_order_id: +S
         }
       });
-      o?.code === 200 ? (f.success({
+      n?.code === 200 ? (C.success({
         message: "Success",
-        description: o?.message || "Product deleted successfully."
-      }), s?.callReturnProducts()) : f.error({
+        description: n?.message || "Product deleted successfully."
+      }), a?.callReturnProducts()) : C.error({
         message: "Deletion Failed",
-        description: o?.message || "Could not delete the product."
+        description: n?.message || "Could not delete the product."
       });
-    } catch (o) {
-      console.error("Error deleting product:", o), f.error({
+    } catch (n) {
+      console.error("Error deleting product:", n), C.error({
         message: "Error",
         //@ts-ignore
-        description: o?.message || "An unexpected error occurred."
+        description: n?.message || "An unexpected error occurred."
       });
     } finally {
-      m(null), u(!1);
+      x(null), b(!1);
     }
-  }, w = () => {
-    i || (m(null), u(!1));
-  }, k = () => {
-    if (h)
-      c([]);
+  }, M = () => {
+    c || (x(null), b(!1));
+  }, $ = () => {
+    if (u)
+      s([]);
     else {
-      const t = n?.map((o) => o.id);
-      c(t);
+      const e = l?.map((n) => n.id);
+      s(e);
     }
-    v(!h);
-  }, O = (t) => {
-    c(
-      (o) => o.includes(t) ? o.filter((R) => R !== t) : [...o, t]
+    N(!u);
+  }, z = (e) => {
+    s(
+      (n) => n.includes(e) ? n.filter((r) => r !== e) : [...n, e]
     );
-  }, y = n?.length == 0 || A?.length == 0;
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ e(T, { id: "tableScrolling", className: "orderProductTable", children: /* @__PURE__ */ r(j, { children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { children: [
-        /* @__PURE__ */ e("th", { className: "emailproductsCheckbox", children: /* @__PURE__ */ e(
-          _,
+  }, y = l?.length == 0 || R?.length == 0, p = g ? 8 : 9, B = D(() => ue(l), [
+    l
+  ]), F = D(() => ge(l), [l]), [H, w] = h({});
+  Q(() => {
+    w({});
+  }, [S]);
+  const W = (e) => e.isNoPallet || !!H[e.key], V = (e) => w((n) => ({ ...n, [e]: !n[e] })), I = (e) => /* @__PURE__ */ o(k.Fragment, { children: [
+    /* @__PURE__ */ o("tr", { className: "product-row", children: [
+      /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
+        P,
+        {
+          checked: f?.includes(e?.id),
+          onChange: () => z(e?.id),
+          disabled: y
+        }
+      ) }),
+      /* @__PURE__ */ t("td", { children: e?.location || "N/A" }),
+      /* @__PURE__ */ t("td", { children: /* @__PURE__ */ o("ul", { style: { listStyleType: "none", padding: 0 }, children: [
+        /* @__PURE__ */ t(
+          "li",
+          {
+            style: {
+              color: "#0099ff",
+              fontWeight: 600
+            },
+            children: /* @__PURE__ */ t(he, { to: `/orders/view/${e?.order_id}`, children: E(e?.recipient_name) })
+          }
+        ),
+        /* @__PURE__ */ t("li", { style: { color: "#888075" }, children: E(e?.postcode) })
+      ] }) }),
+      /* @__PURE__ */ t("td", { children: e?.code }),
+      /* @__PURE__ */ t("td", { children: e?.description }),
+      /* @__PURE__ */ t("td", { children: e?.return_reason }),
+      !g && /* @__PURE__ */ t("td", { children: Array.isArray(e?.product_addon_services) && e?.product_addon_services?.length > 0 ? e.product_addon_services.map((n) => n?.service_code || n?.name || n).filter(Boolean).join(", ") : Array.isArray(e?.addon_services) && e?.addon_services?.length > 0 ? e.addon_services.map((n) => n?.service_code || n?.name || n).filter(Boolean).join(", ") : Array.isArray(e?.addon_services_list) && e?.addon_services_list?.length > 0 ? e.addon_services_list.join(", ") : typeof e?.addon_services == "string" && e?.addon_services.trim() !== "" ? e.addon_services : "NA" }),
+      /* @__PURE__ */ t("td", { children: e?.part }),
+      /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
+        "div",
+        {
+          onClick: (n) => {
+            n.stopPropagation(), n.preventDefault(), L(e?.id);
+          },
+          style: { cursor: "pointer" },
+          children: /* @__PURE__ */ t(ne, {})
+        }
+      ) })
+    ] }),
+    T === !0 && /* @__PURE__ */ t("td", { colSpan: p, children: /* @__PURE__ */ o(be, { children: [
+      /* @__PURE__ */ t("div", { className: "left", children: "Northern/Southern Ireland" }),
+      /* @__PURE__ */ t("div", { className: "left-end" }),
+      /* @__PURE__ */ o("div", { className: "section", children: [
+        /* @__PURE__ */ t(
+          m,
+          {
+            label: "Commodity Code",
+            type: "text",
+            direction: "row",
+            placeholder: "Enter Commodity Code",
+            value: e?.product_customs_details?.commodity_code || "NA",
+            disabled: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          m,
+          {
+            label: "Country of Origin",
+            type: "text",
+            direction: "row",
+            placeholder: "Enter Country of Origin",
+            value: e?.product_customs_details?.country_of_origin || "NA",
+            disabled: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          m,
+          {
+            label: "Item Invoice Amount",
+            type: "number",
+            direction: "row",
+            placeholder: "Enter Item Invoice Amount",
+            value: e?.product_customs_details?.item_invoice_amount || 0,
+            disabled: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          m,
+          {
+            label: "NI Additional Info Codes",
+            type: "text",
+            direction: "row",
+            placeholder: "Enter NI Add Info Codes",
+            value: e?.product_customs_details?.ni_additional_information_codes || "NA",
+            disabled: !0
+          }
+        )
+      ] })
+    ] }) })
+  ] }, e.id), q = (e, n) => {
+    const r = e.items.map((v) => v?.id), d = xe(
+      f,
+      r,
+      n
+    );
+    s(d), N(d.length === l?.length);
+  }, J = (e) => {
+    const n = W(e), r = e.items.filter(
+      (_) => f?.includes(_?.id)
+    ).length, d = e.items.length > 0 && r === e.items.length, v = `${e.items.length} ${e.items.length === 1 ? "item" : "items"}`;
+    return /* @__PURE__ */ o(k.Fragment, { children: [
+      /* @__PURE__ */ t(ye, { className: e.isNoPallet ? "no-pallet" : void 0, children: /* @__PURE__ */ t("td", { colSpan: p, children: /* @__PURE__ */ o(ve, { children: [
+        /* @__PURE__ */ t(
+          P,
+          {
+            checked: d,
+            onChange: () => q(e, d),
+            disabled: y,
+            "aria-label": e.isNoPallet ? "Select all items with no pallet ID" : `Select all items on pallet ${e.label}`
+          }
+        ),
+        /* @__PURE__ */ o(
+          _e,
+          {
+            type: "button",
+            disabled: e.isNoPallet,
+            onClick: e.isNoPallet ? void 0 : () => V(e.key),
+            "aria-expanded": e.isNoPallet ? void 0 : n,
+            children: [
+              !e.isNoPallet && /* @__PURE__ */ t(Ce, { $isExpanded: n, children: /* @__PURE__ */ t(fe, {}) }),
+              /* @__PURE__ */ t("span", { className: "title", children: e.isNoPallet ? /* @__PURE__ */ t("span", { children: "No Pallet ID" }) : /* @__PURE__ */ o(K, { children: [
+                /* @__PURE__ */ t("span", { children: "Pallet ID:" }),
+                /* @__PURE__ */ t("strong", { children: e.label })
+              ] }) }),
+              /* @__PURE__ */ o("span", { className: "count", children: [
+                "(",
+                v,
+                ")"
+              ] }),
+              e.depotLocation && /* @__PURE__ */ t("span", { className: "depot", children: e.depotLocation }),
+              r > 0 && /* @__PURE__ */ o("span", { className: "selected", children: [
+                r,
+                " selected"
+              ] }),
+              !e.isNoPallet && /* @__PURE__ */ t(Pe, { "aria-hidden": "true", children: n ? "−" : "+" })
+            ]
+          }
+        )
+      ] }) }) }),
+      n && e.items.map((_) => I(_))
+    ] }, e.key);
+  };
+  return /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ t(U, { id: "tableScrolling", className: "orderProductTable", children: /* @__PURE__ */ o(X, { children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ o("tr", { children: [
+        /* @__PURE__ */ t("th", { className: "emailproductsCheckbox", children: /* @__PURE__ */ t(
+          P,
           {
             disabled: y,
-            checked: h,
-            onChange: k
+            checked: u,
+            onChange: $
           }
         ) }),
-        /* @__PURE__ */ e("th", { children: "Location" }),
-        /* @__PURE__ */ e("th", { children: "Sender" }),
-        /* @__PURE__ */ e("th", { children: "Code" }),
-        /* @__PURE__ */ e("th", { children: "Description" }),
-        /* @__PURE__ */ e("th", { children: "Return Reason" }),
-        !p && /* @__PURE__ */ e("th", { children: "Additional Services" }),
-        /* @__PURE__ */ e("th", { children: "Part" }),
-        /* @__PURE__ */ e("th", { children: "Action" })
+        /* @__PURE__ */ t("th", { children: "Location" }),
+        /* @__PURE__ */ t("th", { children: "Sender" }),
+        /* @__PURE__ */ t("th", { children: "Code" }),
+        /* @__PURE__ */ t("th", { children: "Description" }),
+        /* @__PURE__ */ t("th", { children: "Return Reason" }),
+        !g && /* @__PURE__ */ t("th", { children: "Additional Services" }),
+        /* @__PURE__ */ t("th", { children: "Part" }),
+        /* @__PURE__ */ t("th", { children: "Action" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: s?.loading || s?.locationloading ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 14, children: /* @__PURE__ */ e(G, { active: !0 }) }) }) : n?.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 14, children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e($, {}) }) }) }) : n?.map((t) => /* @__PURE__ */ r(E.Fragment, { children: [
-        /* @__PURE__ */ r("tr", { className: "product-row", children: [
-          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-            _,
-            {
-              checked: b?.includes(t?.id),
-              onChange: () => O(t?.id),
-              disabled: y
-            }
-          ) }),
-          /* @__PURE__ */ e("td", { children: t?.location || "N/A" }),
-          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ r("ul", { style: { listStyleType: "none", padding: 0 }, children: [
-            /* @__PURE__ */ e(
-              "li",
-              {
-                style: {
-                  color: "#0099ff",
-                  fontWeight: 600
-                },
-                children: /* @__PURE__ */ e(U, { to: `/orders/view/${t?.order_id}`, children: x(t?.recipient_name) })
-              }
-            ),
-            /* @__PURE__ */ e("li", { style: { color: "#888075" }, children: x(t?.postcode) })
-          ] }) }),
-          /* @__PURE__ */ e("td", { children: t?.code }),
-          /* @__PURE__ */ e("td", { children: t?.description }),
-          /* @__PURE__ */ e("td", { children: t?.return_reason }),
-          !p && /* @__PURE__ */ e("td", { children: Array.isArray(t?.product_addon_services) && t?.product_addon_services?.length > 0 ? t.product_addon_services.map((o) => o?.service_code || o?.name || o).filter(Boolean).join(", ") : Array.isArray(t?.addon_services) && t?.addon_services?.length > 0 ? t.addon_services.map((o) => o?.service_code || o?.name || o).filter(Boolean).join(", ") : Array.isArray(t?.addon_services_list) && t?.addon_services_list?.length > 0 ? t.addon_services_list.join(", ") : typeof t?.addon_services == "string" && t?.addon_services.trim() !== "" ? t.addon_services : "NA" }),
-          /* @__PURE__ */ e("td", { children: t?.part }),
-          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-            "div",
-            {
-              onClick: (o) => {
-                o.stopPropagation(), o.preventDefault(), D(t?.id);
-              },
-              style: { cursor: "pointer" },
-              children: /* @__PURE__ */ e(F, {})
-            }
-          ) })
-        ] }),
-        S === !0 && /* @__PURE__ */ e("td", { colSpan: p ? 8 : 9, children: /* @__PURE__ */ r(Y, { children: [
-          /* @__PURE__ */ e("div", { className: "left", children: "Northern/Southern Ireland" }),
-          /* @__PURE__ */ e("div", { className: "left-end" }),
-          /* @__PURE__ */ r("div", { className: "section", children: [
-            /* @__PURE__ */ e(
-              d,
-              {
-                label: "Commodity Code",
-                type: "text",
-                direction: "row",
-                placeholder: "Enter Commodity Code",
-                value: t?.product_customs_details?.commodity_code || "NA",
-                disabled: !0
-              }
-            ),
-            /* @__PURE__ */ e(
-              d,
-              {
-                label: "Country of Origin",
-                type: "text",
-                direction: "row",
-                placeholder: "Enter Country of Origin",
-                value: t?.product_customs_details?.country_of_origin || "NA",
-                disabled: !0
-              }
-            ),
-            /* @__PURE__ */ e(
-              d,
-              {
-                label: "Item Invoice Amount",
-                type: "number",
-                direction: "row",
-                placeholder: "Enter Item Invoice Amount",
-                value: t?.product_customs_details?.item_invoice_amount || 0,
-                disabled: !0
-              }
-            ),
-            /* @__PURE__ */ e(
-              d,
-              {
-                label: "NI Additional Info Codes",
-                type: "text",
-                direction: "row",
-                placeholder: "Enter NI Add Info Codes",
-                value: t?.product_customs_details?.ni_additional_information_codes || "NA",
-                disabled: !0
-              }
-            )
-          ] })
-        ] }) })
-      ] }, t.id)) })
+      /* @__PURE__ */ t("tbody", { children: a?.loading || a?.locationloading ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: p, children: /* @__PURE__ */ t(ie, { active: !0 }) }) }) : l?.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: p, children: /* @__PURE__ */ t(me, { children: /* @__PURE__ */ t(re, {}) }) }) }) : F ? B.map(J) : (
+        /* Called explicitly so `map`'s index is not passed as `isNoPallet`. */
+        l?.map((e) => I(e))
+      ) })
     ] }) }),
-    N && /* @__PURE__ */ e(q, { spinning: i, children: /* @__PURE__ */ e(
-      Z,
+    O && /* @__PURE__ */ t(ae, { spinning: c, children: /* @__PURE__ */ t(
+      Ne,
       {
         title: "Remove Product",
         description: "Are you sure, you want to remove this order product for returns?",
-        actions: /* @__PURE__ */ e(
-          ee,
+        actions: /* @__PURE__ */ t(
+          Se,
           {
             cancelLabel: "Cancel",
-            onCancel: w,
-            completeLabel: i ? "REMOVING..." : "Confirm",
-            isDisabled: i,
-            onComplete: P
+            onCancel: M,
+            completeLabel: c ? "REMOVING..." : "Confirm",
+            isDisabled: c,
+            onComplete: j
           }
         )
       }
     ) })
   ] });
-}, Y = a.div`
+}, be = i.div`
   display: flex;
   width: 100%;
   padding: 5px 10px;
@@ -244,13 +307,121 @@ const ge = (s) => {
       background: #fff;
     }
   }
-`, _ = a(M)`
+`, ye = i.tr`
+  > td {
+    padding: 0;
+    border: none;
+  }
+
+  /*
+    Spec: the No Pallet ID group must be separated from the palletised groups by
+    a divider line. Neutral rule only — the rows themselves keep their normal
+    background, and the header keeps the same design as the pallet headers.
+  */
+  &.no-pallet > td {
+    border-top: 1px solid #c9c6c1;
+    padding-top: 10px;
+  }
+`, ve = i.div`
+  /*
+    The library Checkbox renders its real <input> as position:absolute with no
+    offsets, so it needs a positioned ancestor or the click target drifts away
+    from the visible box as the table scrolls. The shared table CSS happens to
+    position td already; pinning it here too so this does not depend on that.
+  */
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e2e0db;
+  border-radius: 6px;
+  background: #f1f5f9;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  color: #3a3630;
+
+  &:hover {
+    background: #e7edf4;
+  }
+
+`, _e = i.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+
+  &:disabled {
+    cursor: default;
+    /* Inert, but must not read as a greyed-out disabled control. */
+    opacity: 1;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+
+    strong {
+      font-weight: 700;
+      text-transform: none;
+      letter-spacing: 0;
+    }
+  }
+
+  .count {
+    color: #6a7378;
+    font-weight: 400;
+  }
+
+  .depot {
+    color: #888075;
+    font-weight: 400;
+    font-size: 12px;
+  }
+
+  .selected {
+    color: #0099ff;
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+`, Ce = i.span`
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.15s ease-in-out;
+  transform: rotate(${(a) => a.$isExpanded ? "0deg" : "-90deg"});
+`, Pe = i.span`
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 14px;
+  line-height: 1;
+  color: #475569;
+`, P = i(Y)`
   &:disabled {
     background-color: gray;
     cursor: not-allowed;
     opacity: -0.4;
   }
-`, Z = a(L)`
+`, Ne = i(Z)`
   div {
     & > div > div:first-child {
       padding: 8px !important;
@@ -260,11 +431,11 @@ const ge = (s) => {
     width: 28px !important;
     height: 28px !important;
   }
-`, ee = a(W)`
+`, Se = i(ee)`
   justify-content: center;
 `;
 export {
-  Y as NSWrapper,
-  ge as default
+  be as NSWrapper,
+  ze as default
 };
 //# sourceMappingURL=ReturnProductTable.js.map