bananas-commerce-admin 0.2.2 → 0.2.4

package/src/extensions/pos/components/ReceiptTable.tsx

@@ -8,30 +8,40 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { ReceiptLine } from "../types/receipt";
+import { Adjustment, Line } from "../types/purchase";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 export interface ReceiptTableProps {
-  lines: ReceiptLine[];
+  currency: string;
+  lines: Line[];
   editable?: boolean;
-  onSelect?: (selected: ReceiptLine[]) => void;
+  onSelect?: (selected: Line[]) => void;
 }
 
-export const ReceiptTable: React.FC<ReceiptTableProps> = (
-  { lines, editable, onSelect },
-) => {
-  const [selected, setSelected] = React.useState<ReceiptLine[]>([]);
+export const ReceiptTable: React.FC<ReceiptTableProps> = ({
+  lines,
+  currency,
+  editable,
+  onSelect,
+}) => {
+  const [selected, setSelected] = React.useState<Line[]>([]);
+  const theme = useTheme();
+  const refundableLines = lines.filter(
+    (line) => !!line.adjustments.reduce((t, v) => t + v.quantity, line.quantity)
+  );
 
   const toggleSelectAll = (
     _: React.ChangeEvent<HTMLInputElement>,
-    checked: boolean,
+    checked: boolean
   ) => {
-    setSelected(checked ? lines : []);
+    setSelected(checked ? refundableLines : []);
   };
 
-  const toggleLine = (item: ReceiptLine, checked: boolean) => {
-    const index = selected.map(({ line_number }) => line_number).indexOf(
-      item.line_number,
-    );
+  const toggleLine = (item: Line, checked: boolean) => {
+    const index = selected
+      .map(({ line_number }) => line_number)
+      .indexOf(item.line_number);
 
     if (checked && index === -1) {
       setSelected([...selected, item]);
@@ -42,10 +52,10 @@ export const ReceiptTable: React.FC<ReceiptTableProps> = (
     }
   };
 
-  const lineQuantityChange = (item: ReceiptLine) => {
-    const index = selected.map(({ line_number }) => line_number).indexOf(
-      item.line_number,
-    );
+  const lineQuantityChange = (item: Line) => {
+    const index = selected
+      .map(({ line_number }) => line_number)
+      .indexOf(item.line_number);
     const changed = [...selected];
     changed[index] = item;
     setSelected(changed);
@@ -62,77 +72,172 @@ export const ReceiptTable: React.FC<ReceiptTableProps> = (
       <Table>
         <TableHead>
           <TableRow>
-            {editable
-              ? (
-                <TableCell align="left" padding="checkbox">
-                  <Checkbox
-                    color="secondary"
-                    indeterminate={selected.length > 0 &&
-                      selected.length < lines.length}
-                    checked={lines.length !== 0 &&
-                      selected.length === lines.length}
-                    onChange={toggleSelectAll}
-                    disabled={lines.length === 0}
-                  />
-                </TableCell>
-              )
-              : null}
+            {editable ? (
+              <TableCell align="left" padding="checkbox">
+                <Checkbox
+                  color="secondary"
+                  indeterminate={
+                    selected.length > 0 &&
+                    selected.length < refundableLines.length
+                  }
+                  checked={
+                    lines.length !== 0 &&
+                    selected.length === refundableLines.length
+                  }
+                  onChange={toggleSelectAll}
+                  disabled={lines.length === 0}
+                />
+              </TableCell>
+            ) : null}
             <TableCell align="left" />
-            <TableCell align="right">
-              Quantity
-            </TableCell>
-            <TableCell align="right">
-              Unit
-            </TableCell>
-            <TableCell align="right">
-              Total
-            </TableCell>
+            <TableCell align="right">Reference</TableCell>
+            <TableCell align="right">Quantity</TableCell>
+            <TableCell align="right">Unit Price</TableCell>
+            <TableCell align="right">Total</TableCell>
+            <TableCell align="right">Debit</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {lines.map((line) => {
-            const isSelected = selected.map(({ line_number }) => line_number)
-              .includes(
-                line.line_number,
-              );
+            const isSelected = selected
+              .map(({ line_number }) => line_number)
+              .includes(line.line_number);
+
+            const currentQuantity = line.adjustments.reduce(
+              (t, v) => t + v.quantity,
+              line.quantity
+            );
+
+            const getUnconfirmedStyle = (v: Adjustment) =>
+              v.receipt_number == null
+                ? { color: theme.palette.grey[700], fontStyle: "italic" }
+                : {};
+
             return (
               <TableRow key={line.line_number}>
-                {editable
-                  ? (
-                    <TableCell align="left" padding="checkbox">
-                      <Checkbox
-                        color="secondary"
-                        checked={isSelected}
-                        onChange={(_, checked) => toggleLine(line, checked)}
-                      />
-                    </TableCell>
-                  )
-                  : null}
-                <TableCell align="left">
-                  {line.title}
+                {editable ? (
+                  <TableCell
+                    sx={{ verticalAlign: "top", paddingTop: 0.7 }}
+                    align="left"
+                    padding="checkbox"
+                  >
+                    <Checkbox
+                      color="secondary"
+                      disabled={currentQuantity === 0}
+                      checked={isSelected && currentQuantity !== 0}
+                      onChange={(_, checked) =>
+                        toggleLine(
+                          { ...line, quantity: currentQuantity },
+                          checked
+                        )
+                      }
+                    />
+                  </TableCell>
+                ) : null}
+
+                <TableCell style={{ verticalAlign: "top" }} align="left">
+                  <Typography fontSize="0.875rem">{line.title}</Typography>
+                  {line.adjustments.map((v) => {
+                    const text = {
+                      CANCELLATION: "Cancellation",
+                      RETURN: "Return",
+                      REFUND: "Refund",
+                      DISCOUNT: "Discount: ",
+                    }[v.adjustment_type];
+
+                    return (
+                      <Typography
+                        sx={{ paddingLeft: 2, ...getUnconfirmedStyle(v) }}
+                        fontSize="0.875rem"
+                      >
+                        {text + v.title}
+                      </Typography>
+                    );
+                  })}
+                </TableCell>
+                <TableCell style={{ verticalAlign: "top" }} align="right">
+                  {line.reference}
+                </TableCell>
+                <TableCell style={{ verticalAlign: "top" }} align="right">
+                  {editable ? (
+                    <Input
+                      type="number"
+                      defaultValue={currentQuantity}
+                      inputProps={{
+                        min: Math.min(currentQuantity, 1),
+                        max: currentQuantity,
+                      }}
+                      disabled={!isSelected}
+                      onChange={(event) =>
+                        lineQuantityChange({
+                          ...line,
+                          quantity: parseInt(event.target.value),
+                        })
+                      }
+                    />
+                  ) : (
+                    <>
+                      <Typography fontSize="0.875rem">
+                        {line.quantity}
+                      </Typography>
+                      {line.adjustments.map((v) => {
+                        if (v.quantity === 0) {
+                          return (
+                            <Typography fontSize="0.875rem">
+                              {/* EMPTY, for spacing :) */}
+                            </Typography>
+                          );
+                        }
+
+                        return (
+                          <Typography
+                            fontSize="0.875rem"
+                            sx={getUnconfirmedStyle(v)}
+                          >
+                            {v.quantity}
+                          </Typography>
+                        );
+                      })}
+                    </>
+                  )}
                 </TableCell>
-                <TableCell align="right">
-                  {editable
-                    ? (
-                      <Input
-                        type="number"
-                        defaultValue={line.quantity}
-                        inputProps={{ min: 0, max: line.quantity }}
-                        disabled={!isSelected}
-                        onChange={(event) =>
-                          lineQuantityChange({
-                            ...line,
-                            quantity: parseInt(event.target.value),
-                          })}
-                      />
-                    )
-                    : line.quantity}
+                <TableCell style={{ verticalAlign: "top" }} align="right">
+                  {line.unit_price} {currency}
                 </TableCell>
-                <TableCell align="right">
-                  {`${line.unit_price} SEK`}
+                <TableCell style={{ verticalAlign: "top" }} align="right">
+                  <Typography fontSize="0.875rem">
+                    {line.total_amount} {currency}
+                  </Typography>
+                  {line.adjustments.map((v) => {
+                    return (
+                      <Typography
+                        fontSize="0.875rem"
+                        sx={getUnconfirmedStyle(v)}
+                      >
+                        {v.total_amount} {currency}
+                      </Typography>
+                    );
+                  })}
                 </TableCell>
-                <TableCell align="right">
-                  {`${line.total_amount} SEK`}
+                <TableCell style={{ verticalAlign: "top" }} align="right">
+                  <div>
+                    <Typography fontSize="0.875rem">
+                      {line.total_amount} {currency}
+                    </Typography>
+                    {line.adjustments
+                      .slice(0)
+                      .slice(1)
+                      .map(() => (
+                        <Typography fontSize="0.875rem">
+                          {/* SPACING */}{" "}
+                        </Typography>
+                      ))}
+                    {line.remaining_amount != line.total_amount ? (
+                      <Typography fontSize="0.875rem">
+                        ({line.remaining_amount} {currency})
+                      </Typography>
+                    ) : null}
+                  </div>
                 </TableCell>
               </TableRow>
             );

package/src/extensions/pos/index.tsx

@@ -4,9 +4,9 @@ import { RouterExtension } from "../../router/Router";
 import { NavOverrides } from "../../types";
 
 const routes = {
-  "purchase": {
-    "detail": async () => (await import("./pages/purchase/detail")).default,
-    "list": async () => (await import("./pages/purchase/list")).default,
+  purchase: {
+    detail: async () => (await import("./pages/purchase/detail")).default,
+    list: async () => (await import("./pages/purchase/list")).default,
   },
 } as const;
 

package/src/extensions/pos/pages/purchase/detail.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PurchaseDetail } from "../../types/purchase";
+import { Line, PurchaseDetail } from "../../types/purchase";
 import { ReceiptCard } from "../../components/ReceiptCard";
 import Content from "../../../../containers/Content";
 import { PageComponent } from "../../../../types";
@@ -10,31 +10,33 @@ import { useApi } from "../../../../contexts/ApiContext";
 import { useSnackbar } from "notistack";
 import { ReceiptLine } from "../../types/receipt";
 
-const PurchaseDetailPage: PageComponent<PurchaseDetail> = (
-  { data: { purchase, receipts } },
-) => {
+const PurchaseDetailPage: PageComponent<PurchaseDetail> = ({
+  data: purchase,
+}) => {
   const api = useApi();
   const { enqueueSnackbar } = useSnackbar();
 
-  const doRefund = (lines: ReceiptLine[]) => {
-    api.operations["pos.purchase:refund-items"].call({
-      params: { purchase_number: purchase.number },
-      body: lines.map(({ reference, quantity }) => ({ reference, quantity })),
-    }).then((response) => {
-      if (response.ok) {
-        enqueueSnackbar("Successfully refunded purchase!", {
-          variant: "success",
-        });
-      } else {
-        enqueueSnackbar(
-          "Failed to refund purchase, view console for more info",
-          {
-            variant: "error",
-          },
-        );
-        throw response;
-      }
-    });
+  const doRefund = (lines: Line[]) => {
+    api.operations["pos.purchase:refund-items"]
+      .call({
+        params: { purchase_number: purchase.number },
+        body: lines.map(({ reference, quantity }) => ({ reference, quantity })),
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Successfully refunded", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar(
+            "Failed to refund",
+            {
+              variant: "error",
+            }
+          );
+          throw response;
+        }
+      });
   };
 
   return (
@@ -42,18 +44,11 @@ const PurchaseDetailPage: PageComponent<PurchaseDetail> = (
       <TitleBar
         back
         title={`Purchase ${formatPurchaseNumber(purchase.number)}`}
-      >
-      </TitleBar>
+      ></TitleBar>
       <Content>
-        {receipts.map((receipt) => (
-          <Grid key={receipt.number} item xs={12}>
-            <ReceiptCard
-              key={receipt.number}
-              receipt={receipt}
-              refund={doRefund}
-            />
-          </Grid>
-        ))}
+        <Grid item xs={12}>
+          <ReceiptCard purchase={purchase} refund={doRefund} />
+        </Grid>
       </Content>
     </>
   );

package/src/extensions/pos/pages/purchase/list.tsx

@@ -10,7 +10,6 @@ import TableRow from "@mui/material/TableRow";
 
 import Content from "../../../../containers/Content";
 import { PurchaseRow } from "../../components/PurchaseRow";
-import { Purchase } from "../../types/purchase";
 import { PageComponent } from "../../../../types";
 import { TitleBar } from "../../../../components/TitleBar";
 import Grid from "@mui/material/Grid";
@@ -18,20 +17,21 @@ import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useRouter } from "../../../../contexts/RouterContext";
 import { SearchBar, SearchInput } from "../../components/SearchBar";
+import { PurchaseDetail } from "../../types/purchase";
 
-const PurchaseListPage: PageComponent<{ results: Purchase[] }> = ({ data }) => {
+const PurchaseListPage: PageComponent<{ results: PurchaseDetail[] }> = ({
+  data,
+}) => {
   const theme = useTheme();
-  const { navigate, getCurrent } = useRouter();
+  const { navigate } = useRouter();
   const searchParams = new URLSearchParams(location.search);
-  const [searchInputs, setSearchInputs] = React.useState<SearchInput[]>(
-    [
-      ...searchParams.getAll("email").map((v) => ({ "email": v })),
-      ...searchParams.getAll("phone").map((v) => ({ "phone": v })),
-      ...searchParams.getAll("purchase_number").map((v) => ({
-        "purchase_number": parseInt(v),
-      })),
-    ],
-  );
+  const [searchInputs, setSearchInputs] = React.useState<SearchInput[]>([
+    ...searchParams.getAll("email").map((v) => ({ email: v })),
+    ...searchParams.getAll("phone").map((v) => ({ phone: v })),
+    ...searchParams.getAll("purchase_number").map((v) => ({
+      purchase_number: parseInt(v),
+    })),
+  ]);
   const [initial, setInitial] = React.useState(true);
 
   const doSearch = (event?: React.FormEvent<HTMLFormElement>) => {
@@ -66,10 +66,7 @@ const PurchaseListPage: PageComponent<{ results: Purchase[] }> = ({ data }) => {
         component="form"
         onSubmit={doSearch}
       >
-        <SearchBar
-          defaultValue={searchInputs}
-          onChange={setSearchInputs}
-        />
+        <SearchBar defaultValue={searchInputs} onChange={setSearchInputs} />
       </Stack>
       <Content>
         <Grid item xs={12}>
@@ -85,10 +82,7 @@ const PurchaseListPage: PageComponent<{ results: Purchase[] }> = ({ data }) => {
               </TableHead>
               <TableBody>
                 {data?.results.map((purchase) => (
-                  <PurchaseRow
-                    key={purchase.number}
-                    purchase={purchase}
-                  />
+                  <PurchaseRow key={purchase.number} purchase={purchase} />
                 ))}
               </TableBody>
             </Table>

package/src/extensions/pos/types/purchase.ts

@@ -1,20 +1,42 @@
 import { Receipt } from "./receipt";
 
-export interface Purchase {
-  number: string;
+export interface PurchaseDetail {
+  number: number;
   checkout_session?: string;
   main_payment_identifier?: string;
   date_initiated: string;
   date_confirmed: string;
-  currency?: string;
+  currency: string;
   site_code: string;
   locale: string;
   country_code: string;
   email: string;
   phone?: string;
+  total_debit_amount: string;
+  total_remaining_amount: string;
+  total_discount_amount: string;
+  total_tax_amount: string;
+  receipts: Receipt[];
+  lines: Line[];
 }
 
-export interface PurchaseDetail {
-  purchase: Purchase;
-  receipts: Receipt[];
+export interface Line {
+  line_number: number;
+  item_type: string;
+  title: string;
+  reference: string;
+  quantity: number;
+  unit_price: string;
+  total_amount: string;
+  debit_amount: string;
+  remaining_amount: string;
+  adjustments: Adjustment[];
+}
+
+export interface Adjustment {
+  adjustment_type: "CANCELLATION" | "RETURN" | "REFUND" | "DISCOUNT";
+  title: string;
+  receipt_number: number | null;
+  quantity: number;
+  total_amount: string;
 }

package/src/extensions/pos/types/receipt.ts

@@ -1,17 +1,16 @@
+export enum ReceiptIntention {
+  Payment = 1,
+  Cancellation = 2,
+  Refund = 3,
+}
+
 export interface Receipt {
-  number: string;
+  number: number | null;
   total_amount: string;
   total_discount_amount: string;
   total_tax_amount: string;
   date_settled?: string;
-  /**
-   * |   | Intention    |
-   * | - | ------------ |
-   * | 1 | payment      |
-   * | 2 | cancellation |
-   * | 3 | refund       |
-   */
-  intention: 1 | 2 | 3;
+  intention: ReceiptIntention;
   lines: ReceiptLine[];
 }
 

package/src/pages/DashboardPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const DashboardPage: React.FC = () => {
-  return <h1>Dashboard!</h1>;
+  return <></>;
 };
 
 export default DashboardPage;

package/src/router/Router.tsx

@@ -11,10 +11,14 @@ import ErrorScreen from "../containers/ErrorScreen";
 import { OpenAPI } from "openapi-types";
 import Stack from "@mui/material/Stack";
 
-export type RouterExtensionPageHit = PageComponent | Promise<PageComponent> | {
-  page: PageComponent | Promise<PageComponent>;
-  request?: OpenAPI.Request;
-};
+export type RouterExtensionPageHit =
+  | PageComponent
+  | Promise<PageComponent>
+  | {
+      page: PageComponent | Promise<PageComponent>;
+      request?: OpenAPI.Request;
+      defaultRequest?: OpenAPI.Request;
+    };
 
 export interface RouterExtension {
   app: string;
@@ -26,9 +30,7 @@ export interface RouterProps {
   extensions?: RouterExtension[];
 }
 
-export const Router: React.FC<RouterProps> = (
-  { dashboard, extensions },
-) => {
+export const Router: React.FC<RouterProps> = ({ dashboard, extensions }) => {
   extensions ??= Array.isArray(extensions) ? extensions : [];
 
   const { routes } = useRouter();
@@ -36,7 +38,7 @@ export const Router: React.FC<RouterProps> = (
   const Dashboard = dashboard ?? DashboardPage;
 
   const extensionsMap = new Map(
-    extensions.map(({ app, pages }) => [app, pages]),
+    extensions.map(({ app, pages }) => [app, pages])
   );
   const pageRoutes = routes.map((route) => {
     const hit = extensionsMap.get(route.app)?.(route);
@@ -46,24 +48,21 @@ export const Router: React.FC<RouterProps> = (
 
     const page = "page" in hit ? hit.page : hit;
     const request = "request" in hit ? hit.request : undefined;
+    const defaultRequest =
+      "defaultRequest" in hit ? hit.defaultRequest : undefined;
 
     const Element = () => (
       <PageErrorBoundary errorPage={ErrorScreen}>
         <PageLoader
           route={route}
           page={page}
+          defaultRequest={defaultRequest}
           request={request}
         />
       </PageErrorBoundary>
     );
 
-    return (
-      <Route
-        key={route.path}
-        path={route.path}
-        element={<Element />}
-      />
-    );
+    return <Route key={route.path} path={route.path} element={<Element />} />;
   });
 
   return (

package/src/types/index.ts

@@ -2,7 +2,10 @@ declare module "swagger-client";
 
 export type LogoType = boolean | string | React.ElementType;
 export type PageProps<T = unknown> = { data: T };
-export type PageComponent<T = unknown> = React.ComponentType<PageProps<T>>;
+export type PageComponent<T = unknown> = React.ComponentType<PageProps<T>> & {
+  requiredQuery?: URLSearchParams;
+  defaultQuery?: URLSearchParams;
+};
 export type NavOverrides = Record<
   string,
   { icon?: LogoType; title?: string } | null | undefined | false

package/tsconfig.json

@@ -3,12 +3,8 @@
     "outDir": "dist/esm",
     "declarationDir": "dist/types",
     "module": "ESNext",
-    "target": "ES6",
-    "lib": [
-      "ESNext",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "target": "ES5",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "jsx": "react",
     "declaration": true,
     "moduleResolution": "node",
@@ -18,6 +14,7 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
+    "sourceMap": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "skipLibCheck": true,
@@ -27,11 +24,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }