@bjsdistribution/dms-client-return 0.2.2-prod → 0.2.3-prod

package/dist/components/order-view/DynamicTable.js

@@ -1,18 +1,18 @@
-import { jsx as t, jsxs as R } from "react/jsx-runtime";
-import { useReactTable as v, getSortedRowModel as D, getCoreRowModel as S, flexRender as h } from "@tanstack/react-table";
+import { jsx as e, jsxs as T } from "react/jsx-runtime";
+import { useReactTable as k, getSortedRowModel as R, getCoreRowModel as D, flexRender as h } from "@tanstack/react-table";
 import { useMemo as x } from "react";
 import o from "styled-components";
-import M from "../../common/scrollbar/index.js";
-import { atom as k, useAtom as j } from "jotai";
-import { Skeleton as H } from "antd";
-const N = k([]);
-function O({ columns: i, data: s, loading: u }, a) {
-  const b = x(() => i, [i]), w = x(() => s, [s]), c = v({
-    columns: b,
+import S from "../../common/scrollbar/index.js";
+import { atom as j, useAtom as z } from "jotai";
+import { Skeleton as M } from "antd";
+const N = j([]);
+function O({ columns: a, data: l, loading: f }, r) {
+  const u = x(() => a, [a]), w = x(() => l, [l]), s = k({
+    columns: u,
     data: w,
-    getCoreRowModel: S(),
-    getSortedRowModel: D()
-  }), l = c.getRowModel().rows, y = c.getHeaderGroups(), C = a, [r] = j(N), p = [
+    getCoreRowModel: D(),
+    getSortedRowModel: R()
+  }), n = s.getRowModel().rows, y = s.getHeaderGroups(), v = r, [c] = z(N), p = [
     "types",
     "sources",
     "event",
@@ -20,51 +20,52 @@ function O({ columns: i, data: s, loading: u }, a) {
     "type",
     "route",
     "action"
-  ], m = ["date", "reference", "note", "category"], g = ["details", "datetime"], T = ["id"];
-  return console.log(l, "<===========rows"), console.log(a, "props"), /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(M, { children: /* @__PURE__ */ R(G, { children: [
-    /* @__PURE__ */ t(A, { children: y?.map((n) => /* @__PURE__ */ t(d, { children: n.headers.map((e) => /* @__PURE__ */ t(
+  ], m = ["date", "reference", "note", "category"], b = ["details", "datetime"], C = ["id"];
+  return console.log(n, "<===========rows"), console.log(r, "props"), /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(H, { className: "mobile-table-container", children: /* @__PURE__ */ e($, { className: "mobile-table-wrapper", children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ T(G, { children: [
+    /* @__PURE__ */ e(A, { children: y?.map((i) => /* @__PURE__ */ e(d, { children: i.headers.map((t) => /* @__PURE__ */ e(
       F,
       {
         className: `col 
-                          ${p.includes(e?.id) ? "sm" : m.includes(e?.id) ? "md" : g.includes(e?.id) ? "lg" : ""}`,
-        onClick: e.column.getToggleSortingHandler(),
+                          ${p.includes(t?.id) ? "sm" : m.includes(t?.id) ? "md" : b.includes(t?.id) ? "lg" : ""}`,
+        onClick: t.column.getToggleSortingHandler(),
         children: h(
-          e.column.columnDef.header,
-          e.getContext()
+          t.column.columnDef.header,
+          t.getContext()
         )
       },
-      e.id
-    )) }, n.id)) }),
-    /* @__PURE__ */ t(B, { children: u ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: 5, children: /* @__PURE__ */ t(H, { active: !0 }) }) }) : l?.length === 0 ? /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(f, { colSpan: i.length, children: "No entries found." }) }) : l?.map((n) => /* @__PURE__ */ t(
+      t.id
+    )) }, i.id)) }),
+    /* @__PURE__ */ e(B, { children: f ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 5, children: /* @__PURE__ */ e(M, { active: !0 }) }) }) : n?.length === 0 ? /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(g, { colSpan: a.length, children: "No entries found." }) }) : n?.map((i) => /* @__PURE__ */ e(
       d,
       {
-        className: `${r?.length > 0 && r?.filter(
-          (e) => e?.id === n?.original?.id
+        className: `data-row ${c?.length > 0 && c?.filter(
+          (t) => t?.id === i?.original?.id
         )?.length ? "isSelectedRow" : ""}`,
-        children: n.getVisibleCells().map((e) => /* @__PURE__ */ t(
-          f,
+        children: i.getVisibleCells().map((t) => /* @__PURE__ */ e(
+          g,
           {
             className: `col 
-                            ${T.includes(e?.column.id) ? "noFlex" : p.includes(e?.column.id) ? "sm" : m.includes(e?.column.id) ? "md" : g.includes(e?.column.id) ? "lg" : ""} ${e?.column.id}`,
-            children: h(e.column.columnDef.cell, {
-              ...e.getContext(),
-              action: C
+                            ${C.includes(t?.column.id) ? "noFlex" : p.includes(t?.column.id) ? "sm" : m.includes(t?.column.id) ? "md" : b.includes(t?.column.id) ? "lg" : ""} ${t?.column.id}`,
+            "data-label": typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : void 0,
+            children: h(t.column.columnDef.cell, {
+              ...t.getContext(),
+              action: v
             })
           },
-          e.id
+          t.id
         ))
       },
-      n.id
+      i.id
     )) })
   ] }) }) }) }) });
 }
-const $ = o.div`
+const H = o.div`
   height: 30vh;
   pointer-events: initial;
   @media (max-width: 1024px) {
     height: 40vh;
   }
-`, z = o.div`
+`, $ = o.div`
   height: 100%;
   overflow-x: auto;
   scrollbar-width: thin;
@@ -77,7 +78,7 @@ const $ = o.div`
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0px;
-`, f = o.td`
+`, g = o.td`
   border-spacing: 0px;
   padding: 10px 5px;
   font-family: 'Lato', sans-serif;
@@ -109,6 +110,106 @@ const $ = o.div`
   background: rgb(255, 255, 255);
   box-shadow: 0px 4px 30px 0px #2e2d740d;
 `, I = o.div`
+  @media screen and (max-width: 768px) {
+    .mobile-table-container {
+      height: auto;
+    }
+    .mobile-table-wrapper {
+      height: auto;
+      max-height: 60vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: 0;
+    }
+   
+    .mobile-table-wrapper > div,
+    .mobile-table-wrapper > div > div:first-child {
+      position: static !important;
+      height: auto !important;
+      overflow: visible !important;
+      margin: 0 !important;
+      inset: auto !important;
+    }
+
+    table,
+    thead,
+    tbody {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: auto;
+      box-shadow: none;
+    }
+    table {
+      background: transparent;
+    }
+
+    /* header hidden visually, still available to screen readers */
+    thead {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    tbody tr.data-row {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+      padding: 10px 12px;
+      border: 1px solid #e3e3e3;
+      border-radius: 12px;
+      background: #fff;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    tbody tr.data-row td.col {
+      display: flex;
+      flex: none;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      padding: 8px 0;
+      border: 0;
+      border-bottom: 1px solid #f0f2f2;
+      text-align: right;
+      word-break: break-word;
+      white-space: normal;
+    }
+    tbody tr.data-row td.col:last-child {
+      border-bottom: 0;
+      justify-content: flex-end;
+    }
+    tbody tr.data-row td.col:empty {
+      display: none;
+    }
+    tbody tr.data-row td[data-label]::before {
+      content: attr(data-label);
+      flex: 0 0 38%;
+      text-align: left;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #6a7378;
+    }
+
+    /* loading / empty rows */
+    tbody > tr:not(.data-row),
+    tbody > tr:not(.data-row) td {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
   .col {
     display: flex;
     align-items: center;

package/dist/components/order-view/DynamicTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicTable.js","sources":["../../../src/components/order-view/DynamicTable.tsx"],"sourcesContent":["import {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport CustomScrollBar from '../../common/scrollbar';\nimport { atom, useAtom } from 'jotai';\nimport { Skeleton } from 'antd';\nexport const selectedID = atom<any>([]);\n\ninterface DynamicTableProps {\n  columns: any;\n  data: any[];\n  loading: boolean;\n}\n\nfunction DynamicTable(\n  { columns, data, loading }: DynamicTableProps,\n  props: any\n) {\n  const tableColumns = useMemo(() => columns, [columns]);\n  const tableData = useMemo(() => data, [data]);\n\n  const table = useReactTable({\n    columns: tableColumns,\n    data: tableData,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  const rows = table.getRowModel().rows;\n  const headerGroups = table.getHeaderGroups();\n  const action = props;\n  const [selectedRows] = useAtom(selectedID);\n\n  const smallColumns = [\n    'types',\n    'sources',\n    'event',\n    'code',\n    'type',\n    'route',\n    'action',\n  ];\n  const mediumColumns = ['date', 'reference', 'note', 'category'];\n  const largeColumns = ['details', 'datetime'];\n  const noFlexColumns = ['id'];\n\n  console.log(rows, '<===========rows');\n  console.log(props, 'props');\n  return (\n    <MainContainer>\n      <Container>\n        <TableWrapper>\n          <CustomScrollBar>\n            <Table>\n              <TableHead>\n                {headerGroups?.map(headerGroup => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map(header => (\n                      <TableHeadData\n                        className={`col \n                          ${\n                            smallColumns.includes(header?.id)\n                              ? 'sm'\n                              : mediumColumns.includes(header?.id)\n                              ? 'md'\n                              : largeColumns.includes(header?.id)\n                              ? 'lg'\n                              : ''\n                          }`}\n                        key={header.id}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                      </TableHeadData>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHead>\n              <TableBody>\n                {loading ? (\n                  <tr>\n                    <td colSpan={5}>\n                      <Skeleton active />\n                    </td>\n                  </tr>\n                ) : rows?.length === 0 ? (\n                  <TableRow>\n                    <TableData colSpan={columns.length}>\n                      No entries found.\n                    </TableData>\n                  </TableRow>\n                ) : (\n                  rows?.map(row => (\n                    <TableRow\n                      key={row.id}\n                      className={`${\n                        selectedRows?.length > 0 &&\n                        selectedRows?.filter(\n                          (f: any) => f?.id === (row?.original as any)?.id\n                        )?.length\n                          ? 'isSelectedRow'\n                          : ''\n                      }`}\n                    >\n                      {row.getVisibleCells().map(cell => (\n                        <TableData\n                          className={`col \n                            ${\n                              noFlexColumns.includes(cell?.column.id)\n                                ? 'noFlex'\n                                : smallColumns.includes(cell?.column.id)\n                                ? 'sm'\n                                : mediumColumns.includes(cell?.column.id)\n                                ? 'md'\n                                : largeColumns.includes(cell?.column.id)\n                                ? 'lg'\n                                : ''\n                            } ${cell?.column.id}`}\n                          key={cell.id}\n                        >\n                          {flexRender(cell.column.columnDef.cell, {\n                            ...cell.getContext(),\n                            action,\n                          })}\n                        </TableData>\n                      ))}\n                    </TableRow>\n                  ))\n                )}\n              </TableBody>\n            </Table>\n          </CustomScrollBar>\n        </TableWrapper>\n      </Container>\n    </MainContainer>\n  );\n}\n\nconst Container = styled.div`\n  height: 30vh;\n  pointer-events: initial;\n  @media (max-width: 1024px) {\n    height: 40vh;\n  }\n`;\n\nconst TableWrapper = styled.div`\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n`;\n\nconst TableHeadData = styled.th`\n  padding: 10px 5px;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: 0px;\n`;\n\nconst TableData = styled.td`\n  border-spacing: 0px;\n  padding: 10px 5px;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  letter-spacing: 0px;\n`;\n\nconst TableRow = styled.tr`\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: 1px solid rgb(215, 214, 213);\n  font-weight: 300;\n`;\n\nconst TableBody = styled.tbody`\n  border-bottom-right-radius: 10px;\n  background: rgb(255, 255, 255);\n  height: 96%;\n  overflow: auto;\n  width: 100%;\n`;\n\nconst TableHead = styled.thead`\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n  background: #f8f8f8;\n  white-space: nowrap;\n`;\n\nconst Table = styled.table`\n  width: 100%;\n  height: 50%;\n  background: rgb(255, 255, 255);\n  box-shadow: 0px 4px 30px 0px #2e2d740d;\n`;\n\nconst MainContainer = styled.div`\n  .col {\n    display: flex;\n    align-items: center;\n    color: #3a3630;\n    padding: 10px 5px;\n    text-align: left;\n  }\n\n  .col.noFlex {\n    flex: 0;\n  }\n\n  .col.sm {\n    flex: 1;\n    min-width: 100px;\n  }\n\n  .col.md {\n    flex: 2;\n    justify-content: flex-start;\n    min-width: 85px;\n  }\n\n  .col.lg {\n    flex: 4;\n    justify-content: flex-start;\n    min-width: 180px;\n  }\n\n  .col.date {\n  }\n\n  .col.amount,\n  .col.price {\n    justify-content: flex-end;\n  }\n\n  .TableHeadData,\n  .TableData {\n    padding: 10px 5px;\n    text-align: left;\n    white-space: nowrap;\n  }\n\n  .TableRow {\n    display: flex;\n    width: 100%;\n  }\n\n  .Table {\n    width: 100%;\n  }\n`;\n\nexport default DynamicTable;\n"],"names":["selectedID","atom","DynamicTable","columns","data","loading","props","tableColumns","useMemo","tableData","table","useReactTable","getCoreRowModel","getSortedRowModel","rows","headerGroups","action","selectedRows","useAtom","smallColumns","mediumColumns","largeColumns","noFlexColumns","jsx","MainContainer","Container","TableWrapper","CustomScrollBar","jsxs","Table","TableHead","headerGroup","TableRow","header","TableHeadData","flexRender","TableBody","Skeleton","TableData","row","f","cell","styled"],"mappings":"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"}
+{"version":3,"file":"DynamicTable.js","sources":["../../../src/components/order-view/DynamicTable.tsx"],"sourcesContent":["import {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport CustomScrollBar from '../../common/scrollbar';\nimport { atom, useAtom } from 'jotai';\nimport { Skeleton } from 'antd';\nexport const selectedID = atom<any>([]);\n\ninterface DynamicTableProps {\n  columns: any;\n  data: any[];\n  loading: boolean;\n}\n\nfunction DynamicTable(\n  { columns, data, loading }: DynamicTableProps,\n  props: any\n) {\n  const tableColumns = useMemo(() => columns, [columns]);\n  const tableData = useMemo(() => data, [data]);\n\n  const table = useReactTable({\n    columns: tableColumns,\n    data: tableData,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  const rows = table.getRowModel().rows;\n  const headerGroups = table.getHeaderGroups();\n  const action = props;\n  const [selectedRows] = useAtom(selectedID);\n\n  const smallColumns = [\n    'types',\n    'sources',\n    'event',\n    'code',\n    'type',\n    'route',\n    'action',\n  ];\n  const mediumColumns = ['date', 'reference', 'note', 'category'];\n  const largeColumns = ['details', 'datetime'];\n  const noFlexColumns = ['id'];\n\n  console.log(rows, '<===========rows');\n  console.log(props, 'props');\n  return (\n    <MainContainer>\n      <Container className=\"mobile-table-container\">\n        <TableWrapper className=\"mobile-table-wrapper\">\n          <CustomScrollBar>\n            <Table>\n              <TableHead>\n                {headerGroups?.map(headerGroup => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map(header => (\n                      <TableHeadData\n                        className={`col \n                          ${\n                            smallColumns.includes(header?.id)\n                              ? 'sm'\n                              : mediumColumns.includes(header?.id)\n                              ? 'md'\n                              : largeColumns.includes(header?.id)\n                              ? 'lg'\n                              : ''\n                          }`}\n                        key={header.id}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                      </TableHeadData>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHead>\n              <TableBody>\n                {loading ? (\n                  <tr>\n                    <td colSpan={5}>\n                      <Skeleton active />\n                    </td>\n                  </tr>\n                ) : rows?.length === 0 ? (\n                  <TableRow>\n                    <TableData colSpan={columns.length}>\n                      No entries found.\n                    </TableData>\n                  </TableRow>\n                ) : (\n                  rows?.map(row => (\n                    <TableRow\n                      key={row.id}\n                      className={`data-row ${\n                        selectedRows?.length > 0 &&\n                        selectedRows?.filter(\n                          (f: any) => f?.id === (row?.original as any)?.id\n                        )?.length\n                          ? 'isSelectedRow'\n                          : ''\n                      }`}\n                    >\n                      {row.getVisibleCells().map(cell => (\n                        <TableData\n                          className={`col \n                            ${\n                              noFlexColumns.includes(cell?.column.id)\n                                ? 'noFlex'\n                                : smallColumns.includes(cell?.column.id)\n                                ? 'sm'\n                                : mediumColumns.includes(cell?.column.id)\n                                ? 'md'\n                                : largeColumns.includes(cell?.column.id)\n                                ? 'lg'\n                                : ''\n                            } ${cell?.column.id}`}\n                          key={cell.id}\n                          data-label={\n                            typeof cell.column.columnDef.header === 'string'\n                              ? cell.column.columnDef.header\n                              : undefined\n                          }\n                        >\n                          {flexRender(cell.column.columnDef.cell, {\n                            ...cell.getContext(),\n                            action,\n                          })}\n                        </TableData>\n                      ))}\n                    </TableRow>\n                  ))\n                )}\n              </TableBody>\n            </Table>\n          </CustomScrollBar>\n        </TableWrapper>\n      </Container>\n    </MainContainer>\n  );\n}\n\nconst Container = styled.div`\n  height: 30vh;\n  pointer-events: initial;\n  @media (max-width: 1024px) {\n    height: 40vh;\n  }\n`;\n\nconst TableWrapper = styled.div`\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n`;\n\nconst TableHeadData = styled.th`\n  padding: 10px 5px;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: 0px;\n`;\n\nconst TableData = styled.td`\n  border-spacing: 0px;\n  padding: 10px 5px;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  letter-spacing: 0px;\n`;\n\nconst TableRow = styled.tr`\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: 1px solid rgb(215, 214, 213);\n  font-weight: 300;\n`;\n\nconst TableBody = styled.tbody`\n  border-bottom-right-radius: 10px;\n  background: rgb(255, 255, 255);\n  height: 96%;\n  overflow: auto;\n  width: 100%;\n`;\n\nconst TableHead = styled.thead`\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n  background: #f8f8f8;\n  white-space: nowrap;\n`;\n\nconst Table = styled.table`\n  width: 100%;\n  height: 50%;\n  background: rgb(255, 255, 255);\n  box-shadow: 0px 4px 30px 0px #2e2d740d;\n`;\n\nconst MainContainer = styled.div`\n  @media screen and (max-width: 768px) {\n    .mobile-table-container {\n      height: auto;\n    }\n    .mobile-table-wrapper {\n      height: auto;\n      max-height: 60vh;\n      overflow-x: hidden;\n      overflow-y: auto;\n      border-radius: 0;\n    }\n   \n    .mobile-table-wrapper > div,\n    .mobile-table-wrapper > div > div:first-child {\n      position: static !important;\n      height: auto !important;\n      overflow: visible !important;\n      margin: 0 !important;\n      inset: auto !important;\n    }\n\n    table,\n    thead,\n    tbody {\n      display: block;\n      width: 100%;\n      min-width: 0;\n      height: auto;\n      box-shadow: none;\n    }\n    table {\n      background: transparent;\n    }\n\n    /* header hidden visually, still available to screen readers */\n    thead {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      padding: 0;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    tbody tr.data-row {\n      display: block;\n      width: 100%;\n      box-sizing: border-box;\n      margin-bottom: 12px;\n      padding: 10px 12px;\n      border: 1px solid #e3e3e3;\n      border-radius: 12px;\n      background: #fff;\n      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n    }\n\n    tbody tr.data-row td.col {\n      display: flex;\n      flex: none;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 12px;\n      width: 100%;\n      min-width: 0;\n      box-sizing: border-box;\n      padding: 8px 0;\n      border: 0;\n      border-bottom: 1px solid #f0f2f2;\n      text-align: right;\n      word-break: break-word;\n      white-space: normal;\n    }\n    tbody tr.data-row td.col:last-child {\n      border-bottom: 0;\n      justify-content: flex-end;\n    }\n    tbody tr.data-row td.col:empty {\n      display: none;\n    }\n    tbody tr.data-row td[data-label]::before {\n      content: attr(data-label);\n      flex: 0 0 38%;\n      text-align: left;\n      font-size: 12px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: #6a7378;\n    }\n\n    /* loading / empty rows */\n    tbody > tr:not(.data-row),\n    tbody > tr:not(.data-row) td {\n      display: block;\n      width: 100%;\n      box-sizing: border-box;\n    }\n  }\n  .col {\n    display: flex;\n    align-items: center;\n    color: #3a3630;\n    padding: 10px 5px;\n    text-align: left;\n  }\n\n  .col.noFlex {\n    flex: 0;\n  }\n\n  .col.sm {\n    flex: 1;\n    min-width: 100px;\n  }\n\n  .col.md {\n    flex: 2;\n    justify-content: flex-start;\n    min-width: 85px;\n  }\n\n  .col.lg {\n    flex: 4;\n    justify-content: flex-start;\n    min-width: 180px;\n  }\n\n  .col.date {\n  }\n\n  .col.amount,\n  .col.price {\n    justify-content: flex-end;\n  }\n\n  .TableHeadData,\n  .TableData {\n    padding: 10px 5px;\n    text-align: left;\n    white-space: nowrap;\n  }\n\n  .TableRow {\n    display: flex;\n    width: 100%;\n  }\n\n  .Table {\n    width: 100%;\n  }\n`;\n\nexport default DynamicTable;\n"],"names":["selectedID","atom","DynamicTable","columns","data","loading","props","tableColumns","useMemo","tableData","table","useReactTable","getCoreRowModel","getSortedRowModel","rows","headerGroups","action","selectedRows","useAtom","smallColumns","mediumColumns","largeColumns","noFlexColumns","jsx","MainContainer","Container","TableWrapper","CustomScrollBar","Table","TableHead","headerGroup","TableRow","header","TableHeadData","flexRender","TableBody","Skeleton","TableData","row","f","cell","styled"],"mappings":"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"}

package/dist/components/order-view/details-filters/DetailsFilters.js

@@ -1,11 +1,11 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import t from "styled-components";
-import i from "./right-side-filters/Details.js";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import r from "styled-components";
+import e from "./right-side-filters/Details.js";
 import o from "./left-side-filters/ActionsMenu.js";
-const d = () => /* @__PURE__ */ r(p, { children: [
-  /* @__PURE__ */ e(i, {}),
-  /* @__PURE__ */ e(o, {})
-] }), p = t.div`
+const s = () => /* @__PURE__ */ t(d, { children: [
+  /* @__PURE__ */ i(e, {}),
+  /* @__PURE__ */ i(o, {})
+] }), d = r.div`
   border-radius: 40px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
@@ -23,8 +23,33 @@ const d = () => /* @__PURE__ */ r(p, { children: [
   margin-left: 21px;
   top: -132px;
   justify-content: space-between;
+
+  @media screen and (max-width: 992px) {
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 24px;
+    gap: 8px;
+
+    box-sizing: border-box;
+    width: calc(100% - 32px);
+    margin-left: 16px;
+
+    top: 0;
+    margin-bottom: 0;
+
+    > div {
+      width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+
+    > div:last-child {
+      max-width: 100%;
+      overflow-x: auto;
+    }
+  }
 `;
 export {
-  d as default
+  s as default
 };
 //# sourceMappingURL=DetailsFilters.js.map

package/dist/components/order-view/details-filters/DetailsFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsFilters.js","sources":["../../../../src/components/order-view/details-filters/DetailsFilters.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport Details from './right-side-filters/Details';\nimport ActionsMenu from './left-side-filters/ActionsMenu';\n\nconst DetailsFilters = () => {\n  return (\n    <Flex>\n      <Details />\n      <ActionsMenu />\n    </Flex>\n  );\n};\n\nconst Flex = styled.div`\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);\n\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  /* z-index: 9999; */\n  display: flex;\n  padding: 10px;\n  flex-direction: row;\n  gap: 10px;\n  align-self: stretch;\n  position: relative;\n  margin-bottom: -71px;\n  width: 97%;\n  margin-left: 21px;\n  top: -132px;\n  justify-content: space-between;\n`;\nexport default DetailsFilters;\n"],"names":["DetailsFilters","Flex","jsx","Details","ActionsMenu","styled"],"mappings":";;;;AAKA,MAAMA,IAAiB,wBAElBC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ;AAAA,oBACRC,GAAA,CAAA,CAAY;AAAA,GACf,GAIEH,IAAOI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"DetailsFilters.js","sources":["../../../../src/components/order-view/details-filters/DetailsFilters.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport Details from './right-side-filters/Details';\nimport ActionsMenu from './left-side-filters/ActionsMenu';\n\nconst DetailsFilters = () => {\n  return (\n    <Flex>\n      <Details />\n      <ActionsMenu />\n    </Flex>\n  );\n};\n\nconst Flex = styled.div`\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);\n\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  /* z-index: 9999; */\n  display: flex;\n  padding: 10px;\n  flex-direction: row;\n  gap: 10px;\n  align-self: stretch;\n  position: relative;\n  margin-bottom: -71px;\n  width: 97%;\n  margin-left: 21px;\n  top: -132px;\n  justify-content: space-between;\n\n  @media screen and (max-width: 992px) {\n    flex-direction: column;\n    align-items: flex-start;\n    border-radius: 24px;\n    gap: 8px;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    margin-left: 16px;\n\n    top: 0;\n    margin-bottom: 0;\n\n    > div {\n      width: 100%;\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    > div:last-child {\n      max-width: 100%;\n      overflow-x: auto;\n    }\n  }\n`;\nexport default DetailsFilters;\n"],"names":["DetailsFilters","Flex","jsx","Details","ActionsMenu","styled"],"mappings":";;;;AAKA,MAAMA,IAAiB,wBAElBC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ;AAAA,oBACRC,GAAA,CAAA,CAAY;AAAA,GACf,GAIEH,IAAOI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/details-filters/left-side-filters/ActionsMenu.js

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import o from "styled-components";
-import p from "./dropdowns/DropDowns.js";
-const x = () => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(p, {}) }), t = o.div`
+import { jsx as o } from "react/jsx-runtime";
+import r from "styled-components";
+import e from "./dropdowns/DropDowns.js";
+const n = () => /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(e, {}) }), i = r.div`
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   display: flex;
   height: 34px;
@@ -11,8 +11,26 @@ const x = () => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(p, {}) }), t
   border: 1px solid rgba(0, 0, 0, 0.08);
   background: #f0f2f2;
   cursor: pointer;
+
+  @media screen and (max-width: 992px) {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    height: auto;
+    overflow: visible;
+  }
 `;
 export {
-  x as default
+  n as default
 };
 //# sourceMappingURL=ActionsMenu.js.map

package/dist/components/order-view/details-filters/left-side-filters/ActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsMenu.js","sources":["../../../../../src/components/order-view/details-filters/left-side-filters/ActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport DropDowns from './dropdowns/DropDowns';\n\nconst ActionsMenu = () => {\n  return (\n    <Flex>\n      <DropDowns />\n    </Flex>\n  );\n};\nconst Flex = styled.div`\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n`;\n\nexport default ActionsMenu;\n"],"names":["ActionsMenu","jsx","Flex","DropDowns","styled"],"mappings":";;;AAIA,MAAMA,IAAc,MAEhB,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAU,GACb,GAGED,IAAOE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"ActionsMenu.js","sources":["../../../../../src/components/order-view/details-filters/left-side-filters/ActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport DropDowns from './dropdowns/DropDowns';\n\nconst ActionsMenu = () => {\n  return (\n    <Flex>\n      <DropDowns />\n    </Flex>\n  );\n};\nconst Flex = styled.div`\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n\n  @media screen and (max-width: 992px) {\n    width: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  @media screen and (max-width: 768px) {\n    height: auto;\n    overflow: visible;\n  }\n`;\n\nexport default ActionsMenu;\n"],"names":["ActionsMenu","jsx","Flex","DropDowns","styled"],"mappings":";;;AAIA,MAAMA,IAAc,MAEhB,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAU,GACb,GAGED,IAAOE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.js

@@ -1,41 +1,58 @@
-import { jsx as e, Fragment as D, jsxs as I } from "react/jsx-runtime";
-import { useState as n } from "react";
-import l from "styled-components";
-import y from "./OptionsDropDown.js";
-import k from "../../../general-information/dropdowns/Print.js";
-import w from "./MenuDropDown.js";
+import { jsx as o, Fragment as C, jsxs as D } from "react/jsx-runtime";
+import { useState as s } from "react";
+import a from "styled-components";
+import k from "./OptionsDropDown.js";
+import y from "../../../general-information/dropdowns/Print.js";
+import I from "./MenuDropDown.js";
 import { useOrderDetails as A, useCurrentAction as S, errorAtom as V } from "../../../store.js";
-import { useAtom as B } from "jotai";
+import { useAtom as j } from "jotai";
 function U() {
-  const [o] = A(), [, s] = S(), [r] = B(V), [a, c] = n(!1), [d, p] = n(!1), m = o?.order_recipient?.contact_email, f = /^(07\d{8,12}|447\d{7,11})$/, h = /^(08[35679]\d{7}|3538[35679]\d{7}|\+3538[35679]\d{7})$/, u = (t) => typeof t == "string" && f.test(t), x = (t) => typeof t == "string" && h.test(t), _ = (t) => u(t) || x(t), E = o?.order_recipient?.contact_mobile, g = o?.order_recipient?.contact_home, M = o?.order_recipient?.contact_work, b = [E, g, M].some(_), i = [];
-  return b && (r?.mobileError ? a || c(!0) : i.push({
+  const [e] = A(), [, n] = S(), [r] = j(V), [l, c] = s(!1), [d, p] = s(!1), m = e?.order_recipient?.contact_email, f = /^(07\d{8,12}|447\d{7,11})$/, x = /^(08[35679]\d{7}|3538[35679]\d{7}|\+3538[35679]\d{7})$/, h = (t) => typeof t == "string" && f.test(t), u = (t) => typeof t == "string" && x.test(t), w = (t) => h(t) || u(t), g = e?.order_recipient?.contact_mobile, _ = e?.order_recipient?.contact_home, b = e?.order_recipient?.contact_work, E = [g, _, b].some(w), i = [];
+  return E && (r?.mobileError ? l || c(!0) : i.push({
     label: "Send SMS",
-    onClick: () => s("send-sms")
+    onClick: () => n("send-sms")
   })), m && (r?.emailError ? d || p(!0) : i.push({
     label: "Send Email",
-    onClick: () => s("send-email")
-  })), /* @__PURE__ */ e(D, { children: /* @__PURE__ */ I(H, { children: [
-    /* @__PURE__ */ e(w, {}),
-    /* @__PURE__ */ e(y, {}),
-    /* @__PURE__ */ e(k, {}),
-    i?.map((t, C) => /* @__PURE__ */ e(
-      L,
+    onClick: () => n("send-email")
+  })), /* @__PURE__ */ o(C, { children: /* @__PURE__ */ D(B, { children: [
+    /* @__PURE__ */ o(I, {}),
+    /* @__PURE__ */ o(k, {}),
+    /* @__PURE__ */ o(y, {}),
+    i?.map((t, M) => /* @__PURE__ */ o(
+      H,
       {
         onClick: t.onClick,
         style: { cursor: "pointer" },
         children: t?.label
       },
-      C
+      M
     ))
   ] }) });
 }
-const H = l.section`
+const B = a.section`
   padding: 0 5px;
   display: flex;
   align-self: center;
   gap: 10px;
   align-items: center;
-`, L = l.div`
+
+  @media screen and (max-width: 992px) {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  @media screen and (max-width: 768px) {
+    flex-shrink: 1;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 4px 10px;
+    gap: 6px 14px;
+    justify-content: flex-start;
+    white-space: normal;
+  }
+`, H = a.div`
   color: #6a7378;
   text-align: center;
   font-family: 'lato', sans-serif;
@@ -44,14 +61,14 @@ const H = l.section`
   font-weight: 500;
   line-height: 18px;
   text-transform: uppercase;
-  cursor: ${(o) => o.disabled ? "not-allowed" : "pointer"};
+  cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
   @media screen and (max-width: 1210px) {
     font-size: 11px;
     line-height: 12px;
   }
 `;
 export {
-  L as FontContainer,
+  H as FontContainer,
   U as default
 };
 //# sourceMappingURL=DropDowns.js.map

package/dist/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDowns.js","sources":["../../../../../../src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport OptionsDropDown from './OptionsDropDown';\nimport Print from '../../../general-information/dropdowns/Print';\nimport BjsMenuDropDown from './MenuDropDown';\nimport {\n  errorAtom,\n  useAtom,\n  useCurrentAction,\n  useOrderDetails,\n} from '../../../store';\n// components\n\nfunction DropDowns() {\n  const [orderDetails] = useOrderDetails();\n  const [, setCurrentAction] = useCurrentAction();\n  const [errors] = useAtom(errorAtom);\n  const [hasNotifiedMobile, setHasNotifiedMobile] = useState(false);\n  const [hasNotifiedEmail, setHasNotifiedEmail] = useState(false);\n\n  const isEmailId = orderDetails?.order_recipient?.contact_email;\n  // const isContactNum = orderDetails?.order_recipient?.contact_home;\n  const VALID_UK_MOBILE_REGEX = /^(07\\d{8,12}|447\\d{7,11})$/;\n  const VALID_IRISH_MOBILE_REGEX = /^(08[35679]\\d{7}|3538[35679]\\d{7}|\\+3538[35679]\\d{7})$/;\n\n  const isValidUKMobile = (number: string | null | undefined): boolean =>\n    typeof number === 'string' && VALID_UK_MOBILE_REGEX.test(number);\n  const isValidIrishMobile = (number: string | null | undefined): boolean =>\n    typeof number === 'string' && VALID_IRISH_MOBILE_REGEX.test(number);\n  const isValidMobile = (number: string | null | undefined): boolean =>\n    isValidUKMobile(number) || isValidIrishMobile(number);\n\n  const contactMobile = orderDetails?.order_recipient?.contact_mobile;\n  const contactHome = orderDetails?.order_recipient?.contact_home;\n  const contactWork = orderDetails?.order_recipient?.contact_work;\n\n  const allContacts = [contactMobile, contactHome, contactWork];\n  const hasValidMobile = allContacts.some(isValidMobile);\n\n  const actions = [];\n\n  if (hasValidMobile) {\n    if (errors?.mobileError) {\n      if (!hasNotifiedMobile) {\n        setHasNotifiedMobile(true);\n      }\n    } else {\n      actions.push({\n        label: 'Send SMS',\n        onClick: () => setCurrentAction('send-sms'),\n      });\n    }\n  }\n\n  if (isEmailId) {\n    if (errors?.emailError) {\n      if (!hasNotifiedEmail) {\n        setHasNotifiedEmail(true);\n      }\n    } else {\n      actions.push({\n        label: 'Send Email',\n        onClick: () => setCurrentAction('send-email'),\n      });\n    }\n  }\n\n  return (\n    <>\n      <DashBoardWrapper>\n        <BjsMenuDropDown />\n        <OptionsDropDown />\n        <Print />\n        {actions?.map((action, index) => (\n          <FontContainer\n            key={index}\n            onClick={action.onClick}\n            style={{ cursor: 'pointer' }}\n          >\n            {action?.label}\n          </FontContainer>\n        ))}\n      </DashBoardWrapper>\n    </>\n  );\n}\n\nconst DashBoardWrapper = styled.section`\n  padding: 0 5px;\n  display: flex;\n  align-self: center;\n  gap: 10px;\n  align-items: center;\n`;\n\nexport const FontContainer: any = styled.div<{ disabled?: boolean }>`\n  color: #6a7378;\n  text-align: center;\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n  text-transform: uppercase;\n  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n  @media screen and (max-width: 1210px) {\n    font-size: 11px;\n    line-height: 12px;\n  }\n`;\n\nexport default DropDowns;\n"],"names":["DropDowns","orderDetails","useOrderDetails","setCurrentAction","useCurrentAction","errors","useAtom","errorAtom","hasNotifiedMobile","setHasNotifiedMobile","useState","hasNotifiedEmail","setHasNotifiedEmail","isEmailId","VALID_UK_MOBILE_REGEX","VALID_IRISH_MOBILE_REGEX","isValidUKMobile","number","isValidIrishMobile","isValidMobile","contactMobile","contactHome","contactWork","hasValidMobile","actions","jsx","Fragment","DashBoardWrapper","BjsMenuDropDown","OptionsDropDown","Print","action","index","FontContainer","styled","props"],"mappings":";;;;;;;;AAaA,SAASA,IAAY;AACnB,QAAM,CAACC,CAAY,IAAIC,EAAA,GACjB,CAAA,EAAGC,CAAgB,IAAIC,EAAA,GACvB,CAACC,CAAM,IAAIC,EAAQC,CAAS,GAC5B,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAC1D,CAACC,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GAExDG,IAAYZ,GAAc,iBAAiB,eAE3Ca,IAAwB,8BACxBC,IAA2B,0DAE3BC,IAAkB,CAACC,MACvB,OAAOA,KAAW,YAAYH,EAAsB,KAAKG,CAAM,GAC3DC,IAAqB,CAACD,MAC1B,OAAOA,KAAW,YAAYF,EAAyB,KAAKE,CAAM,GAC9DE,IAAgB,CAACF,MACrBD,EAAgBC,CAAM,KAAKC,EAAmBD,CAAM,GAEhDG,IAAgBnB,GAAc,iBAAiB,gBAC/CoB,IAAcpB,GAAc,iBAAiB,cAC7CqB,IAAcrB,GAAc,iBAAiB,cAG7CsB,IADc,CAACH,GAAeC,GAAaC,CAAW,EACzB,KAAKH,CAAa,GAE/CK,IAAU,CAAA;AAEhB,SAAID,MACElB,GAAQ,cACLG,KACHC,EAAqB,EAAI,IAG3Be,EAAQ,KAAK;AAAA,IACX,OAAO;AAAA,IACP,SAAS,MAAMrB,EAAiB,UAAU;AAAA,EAAA,CAC3C,IAIDU,MACER,GAAQ,aACLM,KACHC,EAAoB,EAAI,IAG1BY,EAAQ,KAAK;AAAA,IACX,OAAO;AAAA,IACP,SAAS,MAAMrB,EAAiB,YAAY;AAAA,EAAA,CAC7C,IAKH,gBAAAsB,EAAAC,GAAA,EACE,4BAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAgB;AAAA,sBAChBC,GAAA,EAAgB;AAAA,sBAChBC,GAAA,EAAM;AAAA,IACNN,GAAS,IAAI,CAACO,GAAQC,MACrB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,SAASF,EAAO;AAAA,QAChB,OAAO,EAAE,QAAQ,UAAA;AAAA,QAEhB,UAAAA,GAAQ;AAAA,MAAA;AAAA,MAJJC;AAAA,IAAA,CAMR;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;AAEA,MAAML,IAAmBO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBD,IAAqBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS7B,CAAAC,MAAUA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"DropDowns.js","sources":["../../../../../../src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport OptionsDropDown from './OptionsDropDown';\nimport Print from '../../../general-information/dropdowns/Print';\nimport BjsMenuDropDown from './MenuDropDown';\nimport {\n  errorAtom,\n  useAtom,\n  useCurrentAction,\n  useOrderDetails,\n} from '../../../store';\n// components\n\nfunction DropDowns() {\n  const [orderDetails] = useOrderDetails();\n  const [, setCurrentAction] = useCurrentAction();\n  const [errors] = useAtom(errorAtom);\n  const [hasNotifiedMobile, setHasNotifiedMobile] = useState(false);\n  const [hasNotifiedEmail, setHasNotifiedEmail] = useState(false);\n\n  const isEmailId = orderDetails?.order_recipient?.contact_email;\n  // const isContactNum = orderDetails?.order_recipient?.contact_home;\n  const VALID_UK_MOBILE_REGEX = /^(07\\d{8,12}|447\\d{7,11})$/;\n  const VALID_IRISH_MOBILE_REGEX = /^(08[35679]\\d{7}|3538[35679]\\d{7}|\\+3538[35679]\\d{7})$/;\n\n  const isValidUKMobile = (number: string | null | undefined): boolean =>\n    typeof number === 'string' && VALID_UK_MOBILE_REGEX.test(number);\n  const isValidIrishMobile = (number: string | null | undefined): boolean =>\n    typeof number === 'string' && VALID_IRISH_MOBILE_REGEX.test(number);\n  const isValidMobile = (number: string | null | undefined): boolean =>\n    isValidUKMobile(number) || isValidIrishMobile(number);\n\n  const contactMobile = orderDetails?.order_recipient?.contact_mobile;\n  const contactHome = orderDetails?.order_recipient?.contact_home;\n  const contactWork = orderDetails?.order_recipient?.contact_work;\n\n  const allContacts = [contactMobile, contactHome, contactWork];\n  const hasValidMobile = allContacts.some(isValidMobile);\n\n  const actions = [];\n\n  if (hasValidMobile) {\n    if (errors?.mobileError) {\n      if (!hasNotifiedMobile) {\n        setHasNotifiedMobile(true);\n      }\n    } else {\n      actions.push({\n        label: 'Send SMS',\n        onClick: () => setCurrentAction('send-sms'),\n      });\n    }\n  }\n\n  if (isEmailId) {\n    if (errors?.emailError) {\n      if (!hasNotifiedEmail) {\n        setHasNotifiedEmail(true);\n      }\n    } else {\n      actions.push({\n        label: 'Send Email',\n        onClick: () => setCurrentAction('send-email'),\n      });\n    }\n  }\n\n  return (\n    <>\n      <DashBoardWrapper>\n        <BjsMenuDropDown />\n        <OptionsDropDown />\n        <Print />\n        {actions?.map((action, index) => (\n          <FontContainer\n            key={index}\n            onClick={action.onClick}\n            style={{ cursor: 'pointer' }}\n          >\n            {action?.label}\n          </FontContainer>\n        ))}\n      </DashBoardWrapper>\n    </>\n  );\n}\n\nconst DashBoardWrapper = styled.section`\n  padding: 0 5px;\n  display: flex;\n  align-self: center;\n  gap: 10px;\n  align-items: center;\n\n  @media screen and (max-width: 992px) {\n    flex-shrink: 0;\n    white-space: nowrap;\n  }\n\n  @media screen and (max-width: 768px) {\n    flex-shrink: 1;\n    flex-wrap: wrap;\n    min-width: 0;\n    max-width: 100%;\n    box-sizing: border-box;\n    padding: 4px 10px;\n    gap: 6px 14px;\n    justify-content: flex-start;\n    white-space: normal;\n  }\n`;\n\nexport const FontContainer: any = styled.div<{ disabled?: boolean }>`\n  color: #6a7378;\n  text-align: center;\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n  text-transform: uppercase;\n  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n  @media screen and (max-width: 1210px) {\n    font-size: 11px;\n    line-height: 12px;\n  }\n`;\n\nexport default DropDowns;\n"],"names":["DropDowns","orderDetails","useOrderDetails","setCurrentAction","useCurrentAction","errors","useAtom","errorAtom","hasNotifiedMobile","setHasNotifiedMobile","useState","hasNotifiedEmail","setHasNotifiedEmail","isEmailId","VALID_UK_MOBILE_REGEX","VALID_IRISH_MOBILE_REGEX","isValidUKMobile","number","isValidIrishMobile","isValidMobile","contactMobile","contactHome","contactWork","hasValidMobile","actions","jsx","Fragment","DashBoardWrapper","BjsMenuDropDown","OptionsDropDown","Print","action","index","FontContainer","styled","props"],"mappings":";;;;;;;;AAaA,SAASA,IAAY;AACnB,QAAM,CAACC,CAAY,IAAIC,EAAA,GACjB,CAAA,EAAGC,CAAgB,IAAIC,EAAA,GACvB,CAACC,CAAM,IAAIC,EAAQC,CAAS,GAC5B,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAC1D,CAACC,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GAExDG,IAAYZ,GAAc,iBAAiB,eAE3Ca,IAAwB,8BACxBC,IAA2B,0DAE3BC,IAAkB,CAACC,MACvB,OAAOA,KAAW,YAAYH,EAAsB,KAAKG,CAAM,GAC3DC,IAAqB,CAACD,MAC1B,OAAOA,KAAW,YAAYF,EAAyB,KAAKE,CAAM,GAC9DE,IAAgB,CAACF,MACrBD,EAAgBC,CAAM,KAAKC,EAAmBD,CAAM,GAEhDG,IAAgBnB,GAAc,iBAAiB,gBAC/CoB,IAAcpB,GAAc,iBAAiB,cAC7CqB,IAAcrB,GAAc,iBAAiB,cAG7CsB,IADc,CAACH,GAAeC,GAAaC,CAAW,EACzB,KAAKH,CAAa,GAE/CK,IAAU,CAAA;AAEhB,SAAID,MACElB,GAAQ,cACLG,KACHC,EAAqB,EAAI,IAG3Be,EAAQ,KAAK;AAAA,IACX,OAAO;AAAA,IACP,SAAS,MAAMrB,EAAiB,UAAU;AAAA,EAAA,CAC3C,IAIDU,MACER,GAAQ,aACLM,KACHC,EAAoB,EAAI,IAG1BY,EAAQ,KAAK;AAAA,IACX,OAAO;AAAA,IACP,SAAS,MAAMrB,EAAiB,YAAY;AAAA,EAAA,CAC7C,IAKH,gBAAAsB,EAAAC,GAAA,EACE,4BAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAgB;AAAA,sBAChBC,GAAA,EAAgB;AAAA,sBAChBC,GAAA,EAAM;AAAA,IACNN,GAAS,IAAI,CAACO,GAAQC,MACrB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,SAASF,EAAO;AAAA,QAChB,OAAO,EAAE,QAAQ,UAAA;AAAA,QAEhB,UAAAA,GAAQ;AAAA,MAAA;AAAA,MAJJC;AAAA,IAAA,CAMR;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;AAEA,MAAML,IAAmBO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBnBD,IAAqBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS7B,CAAAC,MAAUA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/details-filters/right-side-filters/Details.js

@@ -1,12 +1,12 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import t from "styled-components";
-import { useCustomerInfo as c, useGlobalEscData as p } from "../../store.js";
-import { Skeleton as f } from "antd";
-const w = () => {
-  const [e] = c(), s = e?.recipient_name || "", i = e?.postcode || "", a = e?.return_action?.length ? `${e.return_action.join(", ")} - ` : "", [n] = p(), r = !s && !i;
-  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ l(d, { children: [
-    r ? /* @__PURE__ */ o(f.Input, { active: !0, size: "small", style: { width: 350, borderRadius: 8 } }) : `RETURN - ${a}${s} - ${i}`,
-    n?.length > 0 && !r && /* @__PURE__ */ o(g, { children: `${n[0]?.escalation_type?.level} (${n[0]?.escalation_type?.name})` })
+import { useCustomerInfo as l, useGlobalEscData as c } from "../../store.js";
+import { Skeleton as d } from "antd";
+const b = () => {
+  const [e] = l(), i = e?.recipient_name || "", a = e?.postcode || "", r = e?.return_action?.length ? `${e.return_action.join(", ")} - ` : "", [n] = c(), s = !i && !a;
+  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ p(x, { children: [
+    s ? /* @__PURE__ */ o(d.Input, { active: !0, size: "small", style: { width: 350, borderRadius: 8 } }) : `RETURN - ${r}${i} - ${a}`,
+    n?.length > 0 && !s && /* @__PURE__ */ o(h, { children: `${n[0]?.escalation_type?.level} (${n[0]?.escalation_type?.name})` })
   ] }) });
 }, m = t.div`
   display: flex;
@@ -15,7 +15,12 @@ const w = () => {
   > svg {
     transform: scale(0.6);
   }
-`, d = t.div`
+
+  @media screen and (max-width: 992px) {
+    width: 100%;
+    min-width: 0;
+  }
+`, x = t.div`
   display: flex;
   flex-direction: row;
   gap: 15px;
@@ -31,7 +36,15 @@ const w = () => {
   @media screen and (max-width: 1220px) {
     font-size: 14px;
   }
-`, x = t.div`
+
+  @media screen and (max-width: 992px) {
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    line-height: 20px;
+    padding: 4px 8px 0;
+    word-break: break-word;
+  }
+`, f = t.div`
   /* heading/h3-subHeader */
   font-family: 'Roboto', sans-serif;
   font-size: 20px;
@@ -39,11 +52,11 @@ const w = () => {
   font-weight: 900;
   line-height: 32px; /* 160% */
   text-transform: uppercase;
-`, g = t(x)`
+`, h = t(f)`
   color: #6396e5;
   font-size: 16px;
 `;
 export {
-  w as default
+  b as default
 };
 //# sourceMappingURL=Details.js.map

package/dist/components/order-view/details-filters/right-side-filters/Details.js.map

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sources":["../../../../../src/components/order-view/details-filters/right-side-filters/Details.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useCustomerInfo, useGlobalEscData } from '../../store';\n\nimport { Skeleton } from 'antd';\n\nconst Details = () => {\n  // const [orderDetails] = useOrderDetails();\n  const [customerInfo] = useCustomerInfo();\n  const recipient = customerInfo?.recipient_name || '';\n  const postcodeShow = customerInfo?.postcode || '';\n  const returnActionString = customerInfo?.return_action?.length \n    ? `${customerInfo.return_action.join(', ')} - ` \n    : '';\n\n  const [globalEscData] = useGlobalEscData();\n\n  const isLoading = !recipient && !postcodeShow;\n\n  return (\n    <DetailsContainer>\n      <Typo>\n        {isLoading ? (\n          <Skeleton.Input active size=\"small\" style={{ width: 350, borderRadius: 8 }} />\n        ) : (\n          `RETURN - ${returnActionString}${recipient} - ${postcodeShow}`\n        )}\n        {globalEscData?.length > 0 && !isLoading && (\n          <EscInfo>\n            {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}\n          </EscInfo>\n        )}\n      </Typo>\n    </DetailsContainer>\n  );\n};\n\nconst DetailsContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  > svg {\n    transform: scale(0.6);\n  }\n`;\n\nconst Typo = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 15px;\n  align-items: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px;\n  text-transform: uppercase;\n  margin: 0;\n  padding: 0;\n\n  @media screen and (max-width: 1220px) {\n    font-size: 14px;\n  }\n`;\n\nconst Name = styled.div`\n  /* heading/h3-subHeader */\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 900;\n  line-height: 32px; /* 160% */\n  text-transform: uppercase;\n`;\n\nconst EscInfo = styled(Name)`\n  color: #6396e5;\n  font-size: 16px;\n`;\n\nexport default Details;\n"],"names":["Details","customerInfo","useCustomerInfo","recipient","postcodeShow","returnActionString","globalEscData","useGlobalEscData","isLoading","jsx","DetailsContainer","jsxs","Typo","Skeleton","EscInfo","styled","Name"],"mappings":";;;;AAMA,MAAMA,IAAU,MAAM;AAEpB,QAAM,CAACC,CAAY,IAAIC,EAAA,GACjBC,IAAYF,GAAc,kBAAkB,IAC5CG,IAAeH,GAAc,YAAY,IACzCI,IAAqBJ,GAAc,eAAe,SACpD,GAAGA,EAAa,cAAc,KAAK,IAAI,CAAC,QACxC,IAEE,CAACK,CAAa,IAAIC,EAAA,GAElBC,IAAY,CAACL,KAAa,CAACC;AAEjC,SACE,gBAAAK,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,IAAAJ,IACC,gBAAAC,EAACI,EAAS,OAAT,EAAe,QAAM,IAAC,MAAK,SAAQ,OAAO,EAAE,OAAO,KAAK,cAAc,IAAE,CAAG,IAE5E,YAAYR,CAAkB,GAAGF,CAAS,MAAMC,CAAY;AAAA,IAE7DE,GAAe,SAAS,KAAK,CAACE,KAC7B,gBAAAC,EAACK,KACE,UAAA,GAAGR,EAAc,CAAC,GAAG,iBAAiB,KAAK,KAAKA,EAAc,CAAC,GAAG,iBAAiB,IAAI,IAAA,CAC1F;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ,GAEMI,IAAmBK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1BH,IAAOG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBdC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUdD,IAAUC,EAAOC,CAAI;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Details.js","sources":["../../../../../src/components/order-view/details-filters/right-side-filters/Details.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useCustomerInfo, useGlobalEscData } from '../../store';\n\nimport { Skeleton } from 'antd';\n\nconst Details = () => {\n  // const [orderDetails] = useOrderDetails();\n  const [customerInfo] = useCustomerInfo();\n  const recipient = customerInfo?.recipient_name || '';\n  const postcodeShow = customerInfo?.postcode || '';\n  const returnActionString = customerInfo?.return_action?.length \n    ? `${customerInfo.return_action.join(', ')} - ` \n    : '';\n\n  const [globalEscData] = useGlobalEscData();\n\n  const isLoading = !recipient && !postcodeShow;\n\n  return (\n    <DetailsContainer>\n      <Typo>\n        {isLoading ? (\n          <Skeleton.Input active size=\"small\" style={{ width: 350, borderRadius: 8 }} />\n        ) : (\n          `RETURN - ${returnActionString}${recipient} - ${postcodeShow}`\n        )}\n        {globalEscData?.length > 0 && !isLoading && (\n          <EscInfo>\n            {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}\n          </EscInfo>\n        )}\n      </Typo>\n    </DetailsContainer>\n  );\n};\n\nconst DetailsContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  > svg {\n    transform: scale(0.6);\n  }\n\n  @media screen and (max-width: 992px) {\n    width: 100%;\n    min-width: 0;\n  }\n`;\n\nconst Typo = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 15px;\n  align-items: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px;\n  text-transform: uppercase;\n  margin: 0;\n  padding: 0;\n\n  @media screen and (max-width: 1220px) {\n    font-size: 14px;\n  }\n\n  @media screen and (max-width: 992px) {\n    flex-wrap: wrap;\n    gap: 4px 12px;\n    line-height: 20px;\n    padding: 4px 8px 0;\n    word-break: break-word;\n  }\n`;\n\nconst Name = styled.div`\n  /* heading/h3-subHeader */\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 900;\n  line-height: 32px; /* 160% */\n  text-transform: uppercase;\n`;\n\nconst EscInfo = styled(Name)`\n  color: #6396e5;\n  font-size: 16px;\n`;\n\nexport default Details;\n"],"names":["Details","customerInfo","useCustomerInfo","recipient","postcodeShow","returnActionString","globalEscData","useGlobalEscData","isLoading","jsx","DetailsContainer","jsxs","Typo","Skeleton","EscInfo","styled","Name"],"mappings":";;;;AAMA,MAAMA,IAAU,MAAM;AAEpB,QAAM,CAACC,CAAY,IAAIC,EAAA,GACjBC,IAAYF,GAAc,kBAAkB,IAC5CG,IAAeH,GAAc,YAAY,IACzCI,IAAqBJ,GAAc,eAAe,SACpD,GAAGA,EAAa,cAAc,KAAK,IAAI,CAAC,QACxC,IAEE,CAACK,CAAa,IAAIC,EAAA,GAElBC,IAAY,CAACL,KAAa,CAACC;AAEjC,SACE,gBAAAK,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,IAAAJ,IACC,gBAAAC,EAACI,EAAS,OAAT,EAAe,QAAM,IAAC,MAAK,SAAQ,OAAO,EAAE,OAAO,KAAK,cAAc,IAAE,CAAG,IAE5E,YAAYR,CAAkB,GAAGF,CAAS,MAAMC,CAAY;AAAA,IAE7DE,GAAe,SAAS,KAAK,CAACE,KAC7B,gBAAAC,EAACK,KACE,UAAA,GAAGR,EAAc,CAAC,GAAG,iBAAiB,KAAK,KAAKA,EAAc,CAAC,GAAG,iBAAiB,IAAI,IAAA,CAC1F;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ,GAEMI,IAAmBK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAc1BH,IAAOG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BdC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUdD,IAAUC,EAAOC,CAAI;AAAA;AAAA;AAAA;"}