bananas-commerce-admin 0.2.2 → 0.2.4

package/dist/types/extensions/fulfillment/types/order.d.ts

@@ -0,0 +1,38 @@
+export type OrderDestinationType = "HOME" | "STORE" | "SERVICE_POINT" | "LOCKER";
+export type OrderStateType = "PENDING" | "CONFIRMED" | "SENT" | "IN_TRANSIT" | "READY_FOR_PICKUP" | "DELIVERED" | "CANCELLED";
+export interface OrderListItem {
+    shipment_reference: string;
+    purchase_number: number;
+    email: string;
+    phone?: string;
+    option_name: string;
+    carrier: string;
+    destination_type: OrderDestinationType;
+    name: string;
+    tracking_number: string;
+    state: OrderStateType;
+}
+export interface OrderDetail {
+    option_name: string;
+    destination_type: OrderDestinationType;
+    state: OrderStateType;
+    destination_reference?: string;
+    name: string;
+    care_of: string;
+    street_address: string;
+    street_address2: string;
+    postal_code: string;
+    city: string;
+    country_code: string;
+    region: string;
+    items: OrderItem[];
+    shipment: {
+        carrier: string;
+        tracking_number: string;
+    } | null;
+}
+export interface OrderItem {
+    code: string;
+    name: string | null;
+    quantity: number;
+}

package/dist/types/extensions/fulfillment/types/shipment.d.ts

@@ -1,4 +1,4 @@
-export declare type ShipmentDestinationType = "HOME" | "STORE" | "SERVICE_POINT" | "LOCKER";
+export type ShipmentDestinationType = "HOME" | "STORE" | "SERVICE_POINT" | "LOCKER";
 export interface ShipmentListItem {
     shipment_reference: string;
     purchase_number: number;

package/dist/types/extensions/pos/components/PurchaseRow.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { Purchase } from "../types/purchase";
+import { PurchaseDetail } from "../types/purchase";
 interface PurchaseRowProps {
-    purchase: Purchase;
+    purchase: PurchaseDetail;
 }
 export declare const PurchaseRow: React.FC<PurchaseRowProps>;
 export {};

package/dist/types/extensions/pos/components/ReceiptCard.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { Receipt, ReceiptLine } from "../types/receipt";
+import { Line, PurchaseDetail } from "../types/purchase";
 interface ReceiptCardProps {
-    receipt: Receipt;
-    refund?: (lines: ReceiptLine[]) => void;
+    purchase: PurchaseDetail;
+    refund?: (lines: Line[]) => void;
 }
 export declare const ReceiptCard: React.FC<ReceiptCardProps>;
 export {};

package/dist/types/extensions/pos/components/ReceiptLine.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ReceiptLine as ReceiptLineType } from "../types/receipt";
 interface ReceiptLineProps {
+    currency: string;
     line: ReceiptLineType;
     editable?: boolean;
     onSelect?: (selected: boolean) => void;

package/dist/types/extensions/pos/components/ReceiptTable.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-import { ReceiptLine } from "../types/receipt";
+import { Line } from "../types/purchase";
 export interface ReceiptTableProps {
-    lines: ReceiptLine[];
+    currency: string;
+    lines: Line[];
     editable?: boolean;
-    onSelect?: (selected: ReceiptLine[]) => void;
+    onSelect?: (selected: Line[]) => void;
 }
 export declare const ReceiptTable: React.FC<ReceiptTableProps>;

package/dist/types/extensions/pos/components/SearchBar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type SearchInput = {
+export type SearchInput = {
     email: string;
 } | {
     phone: string;

package/dist/types/extensions/pos/pages/purchase/list.d.ts

@@ -1,6 +1,6 @@
-import { Purchase } from "../../types/purchase";
 import { PageComponent } from "../../../../types";
+import { PurchaseDetail } from "../../types/purchase";
 declare const PurchaseListPage: PageComponent<{
-    results: Purchase[];
+    results: PurchaseDetail[];
 }>;
 export default PurchaseListPage;

package/dist/types/extensions/pos/types/purchase.d.ts

@@ -1,18 +1,39 @@
 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;
-}
-export interface PurchaseDetail {
-    purchase: Purchase;
+    total_debit_amount: string;
+    total_remaining_amount: string;
+    total_discount_amount: string;
+    total_tax_amount: string;
     receipts: Receipt[];
+    lines: Line[];
+}
+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/dist/types/extensions/pos/types/receipt.d.ts

@@ -1,17 +1,15 @@
+export declare 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[];
 }
 export interface ReceiptLine {

package/dist/types/router/Router.d.ts

@@ -2,9 +2,10 @@ import React from "react";
 import { RouteInfo } from "../contexts/RouterContext";
 import { PageComponent } from "../types";
 import { OpenAPI } from "openapi-types";
-export declare type RouterExtensionPageHit = PageComponent | Promise<PageComponent> | {
+export type RouterExtensionPageHit = PageComponent | Promise<PageComponent> | {
     page: PageComponent | Promise<PageComponent>;
     request?: OpenAPI.Request;
+    defaultRequest?: OpenAPI.Request;
 };
 export interface RouterExtension {
     app: string;

package/dist/types/types/index.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
 declare module "swagger-client";
-export declare type LogoType = boolean | string | React.ElementType;
-export declare type PageProps<T = unknown> = {
+export type LogoType = boolean | string | React.ElementType;
+export type PageProps<T = unknown> = {
     data: T;
 };
-export declare type PageComponent<T = unknown> = React.ComponentType<PageProps<T>>;
-export declare type NavOverrides = Record<string, {
+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/example/index.tsx

@@ -1,20 +1,39 @@
-import React from "react";
-import ReactDOM from "react-dom";
 import * as Bananas from "bananas-commerce-admin";
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-ReactDOM.render(
+import { createTheme } from "@mui/material/styles";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <Bananas.App
+      basename={process.env.BASE_URL}
       api={{
-        schema: "http://localhost:8123/_/admin/api/v1/openapi.json",
-        server: "http://localhost:8123/_/admin/api/v1/",
+        schema: "/_/admin/api/v1/openapi.json",
+        server: new URL("/_/admin/api/v1/", location.origin),
+      }}
+      nav={{
+        ...Bananas.pos.navigation,
+        ...Bananas.fulfillment.navigation,
       }}
-      nav={{}}
-      extensions={[Bananas.bananasRouterExtension, Bananas.posRouterExtension]}
+      extensions={[
+        Bananas.bananas.router,
+        Bananas.pos.router,
+        Bananas.fulfillment.router,
+      ]}
       pages={async (route) => {
         return (await import(`./pages/${route.page}`)).default;
       }}
+      theme={createTheme({
+        palette: {
+          primary: {
+            main: "#7b61ff",
+          },
+          secondary: {
+            main: "#00bcd4",
+          },
+        },
+      })}
     />
-  </React.StrictMode>,
-  document.getElementById("root") as HTMLElement,
+  </React.StrictMode>
 );

package/example/package.json

@@ -1,9 +1,8 @@
 {
-  "name": "bananas-commerce-admin-example",
+  "name": "bananas-commerce-example-admin",
   "version": "0.1.0",
   "private": true,
-  "description": "Bananas-commerce admin interface and building blocks",
-  "type": "module",
+  "description": "Bananas Commerce Admin Example App",
   "keywords": [
     "admin",
     "bananas",
@@ -13,27 +12,38 @@
     "bananas-commerce",
     "bananas-commerce-admin"
   ],
+  "type": "module",
   "author": "Elias Sjögreen",
   "scripts": {
-    "build": "node build.js"
+    "build": "node ./scripts/build.js",
+    "build:watch": "node ./scripts/build.js --watch",
+    "serve": "live-server --port=3000 --no-browser --proxy=/_/:http://localhost:8000/_/ --mount=/:./public/ ./public/index.html",
+    "serve:watch": "npm run build:watch & npm run serve"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@types/lodash": "^4.14.182",
+    "@node-rs/xxhash": "^1.2.1",
     "@types/node": "^16.11.43",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "esbuild": "^0.15.14",
+    "esbuild": "^0.15.18",
+    "esbuild-plugin-svgr": "^1.0.1",
+    "live-server": "^1.2.2",
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@apidevtools/swagger-parser": "^10.1.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/system": "^5.8.7",
     "bananas-commerce-admin": "file:..",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "notistack": "^2.0.8",
+    "react": "file:../node_modules/react",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.5"
   }
 }

package/example/scripts/build.js

@@ -0,0 +1,4 @@
+import { build } from "esbuild";
+import { options } from "./options.js";
+
+await build(options);

package/example/scripts/options.js

@@ -0,0 +1,81 @@
+import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
+import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import svgrPlugin from "esbuild-plugin-svgr";
+import path from "node:path";
+
+const htmlTemplate = (entrypoint) =>
+  `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <script type="module">
+      globalThis.process ??= {};
+      globalThis.process.env ??= {};
+      globalThis.process.env.SENTRY_DSN = \`<!--# echo var="SENTRY_DSN" -->\`;
+      globalThis.process.env.SENTRY_ENVIRONMENT = \`<!--# echo var="SENTRY_ENVIRONMENT" -->\`;
+    </script>
+    <script type="module" src="${path.join(
+      process.env.BASE_URL ?? "/",
+      entrypoint
+    )}"></script>
+    <title>Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
+`;
+
+export const options = {
+  entryPoints: ["./index.tsx"],
+  outdir: "./public/",
+  logLevel: "info",
+  chunkNames: "[name]-[hash]",
+  publicPath: process.env.BASE_URL ?? "/",
+  target: "es6",
+  format: "esm",
+  bundle: true,
+  splitting: true,
+  treeShaking: true,
+  sourcemap: true,
+  minify: true,
+  metafile: true,
+  define: {
+    "process.env.NODE_ENV": `"${process.env.NODE_ENV ?? "development"}"`,
+    "process.env.BASE_URL":
+      process.env.BASE_URL != undefined
+        ? `"${process.env.BASE_URL}"`
+        : "undefined",
+  },
+  plugins: [
+    svgrPlugin(),
+    NodeModulesPolyfillPlugin(),
+    NodeGlobalsPolyfillPlugin({
+      process: true,
+      buffer: true,
+    }),
+    {
+      name: "create-index-plugin",
+      async setup(build) {
+        const fs = await import("node:fs/promises");
+        const { xxh32 } = await import("@node-rs/xxhash");
+
+        build.onEnd(async (result) => {
+          const source = await fs.readFile("./public/index.js", {
+            encoding: "utf-8",
+          });
+          const filename = `index-${xxh32(source)
+            .toString(36)
+            .toUpperCase()}.js`;
+          await Promise.all([
+            fs.writeFile(`./public/${filename}`, source),
+            fs.writeFile("./public/index.html", htmlTemplate(filename)),
+          ]);
+        });
+      },
+    },
+  ],
+  watch: process.argv.includes("-w") || process.argv.includes("--watch"),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Bananas-commerce admin interface and building blocks",
   "keywords": [
     "admin",
@@ -23,6 +23,8 @@
     }
   },
   "scripts": {
+    "dev": "npm run build:esm:watch & npm run build:watch --prefix ./example & npm run serve --prefix ./example",
+    "dev:install": "npm i && npx npm-install-peers && npm i --prefix ./example",
     "build": "npm run build:esm && npm run build:cjs",
     "build:esm": "tsc",
     "build:esm:watch": "npm run build:esm -- --watch",
@@ -30,8 +32,8 @@
     "build:cjs:watch": "npm run build:cjs -- --watch"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "openapi-types": "^12.0.0",
     "typescript": "^4.7.4"
   },
@@ -43,8 +45,10 @@
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/system": "^5.8.7",
+    "mui-chips-input": "^1.3.1",
     "notistack": "^2.0.5",
-    "react": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   },
   "dependencies": {

package/src/Admin.tsx

@@ -22,18 +22,16 @@ export type AdminProps = {
   basename?: string;
 } & RouterProps;
 
-const Admin: React.FC<AdminProps> = (
-  {
-    logo,
-    title,
-    subtitle,
-    version,
-    nav,
-    extensions,
-    dashboard,
-    basename,
-  },
-) => {
+const Admin: React.FC<AdminProps> = ({
+  logo,
+  title,
+  subtitle,
+  version,
+  nav,
+  extensions,
+  dashboard,
+  basename,
+}) => {
   const [loaded, setLoaded] = React.useState(false);
 
   const api = useApi();
@@ -42,7 +40,10 @@ const Admin: React.FC<AdminProps> = (
 
   React.useEffect(() => {
     if (
-      !loaded && api !== undefined && i18n !== undefined && user !== undefined
+      !loaded &&
+      api !== undefined &&
+      i18n !== undefined &&
+      user !== undefined
     ) {
       setLoaded(true);
     }
@@ -61,29 +62,28 @@ const Admin: React.FC<AdminProps> = (
           flexDirection: "column",
         }}
       >
-        {loaded
-          ? user !== null
-            ? (
-              <BrowserRouter basename={basename}>
-                <RouterContextProvider>
-                  <Box sx={{ display: "flex" }}>
-                    <NavBar
-                      nav={nav}
-                      logo={logo}
-                      title={title}
-                      subtitle={subtitle}
-                      version={version}
-                    />
-                    <Router
-                      extensions={extensions}
-                      dashboard={dashboard}
-                    />
-                  </Box>
-                </RouterContextProvider>
-              </BrowserRouter>
-            )
-            : <LoginPage logo={logo} title={title} />
-          : <LoadingScreen logo={logo} loading={!loaded} />}
+        {loaded ? (
+          user !== null ? (
+            <BrowserRouter basename={basename}>
+              <RouterContextProvider>
+                <Box sx={{ display: "flex" }}>
+                  <NavBar
+                    nav={nav}
+                    logo={logo}
+                    title={title}
+                    subtitle={subtitle}
+                    version={version}
+                  />
+                  <Router extensions={extensions} dashboard={dashboard} />
+                </Box>
+              </RouterContextProvider>
+            </BrowserRouter>
+          ) : (
+            <LoginPage logo={logo} title={title} />
+          )
+        ) : (
+          <LoadingScreen logo={logo} loading={!loaded} />
+        )}
       </Box>
     </>
   );

package/src/App.tsx

@@ -10,10 +10,14 @@ import { I18nContextProvider } from "./contexts/I18nContext";
 import { SnackbarProvider } from "notistack";
 
 type AppProps = {
-  api: ApiClient | string | URL | {
-    schema: string | URL;
-    server?: string | URL;
-  };
+  api:
+    | ApiClient
+    | string
+    | URL
+    | {
+        schema: string | URL;
+        server?: string | URL;
+      };
   theme?: Partial<Theme> | ((outerTheme: Theme) => Theme);
 } & AdminProps;
 

package/src/components/TitleBar.tsx

@@ -13,9 +13,11 @@ export interface TitleBarProps {
   title?: React.ReactNode;
 }
 
-export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
-  { back = false, title, children },
-) => {
+export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = ({
+  back = false,
+  title,
+  children,
+}) => {
   const theme = useTheme();
   const { navigate } = useRouter();
 
@@ -27,6 +29,7 @@ export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
     <AppBar
       sx={{
         flexGrow: 1,
+        backgroundColor: theme.palette.background.paper,
         borderBottomWidth: 1,
         borderBottomStyle: "solid",
         borderBottomColor: theme.palette.divider,
@@ -36,21 +39,23 @@ export const TitleBar: React.FC<React.PropsWithChildren<TitleBarProps>> = (
     >
       <Toolbar>
         <Box sx={{ display: "flex", flexGrow: 1, alignItems: "center" }}>
-          {back
-            ? (
-              <IconButton
-                size="large"
-                edge="start"
-                color="inherit"
-                aria-label="back"
-                sx={{ mr: 2 }}
-                onClick={() => navigate(back as string | number | RouteInfo)}
-              >
-                <ArrowBackIcon />
-              </IconButton>
-            )
-            : null}
-          {title ? <Typography variant="h6">{title}</Typography> : null}
+          {back ? (
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="back"
+              sx={{ mr: 2 }}
+              onClick={() => navigate(back as string | number | RouteInfo)}
+            >
+              <ArrowBackIcon />
+            </IconButton>
+          ) : null}
+          {title ? (
+            <Typography color={theme.palette.text.primary} variant="h6">
+              {title}
+            </Typography>
+          ) : null}
         </Box>
         {children}
       </Toolbar>

package/src/containers/Content.tsx

@@ -11,7 +11,7 @@ const Content: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
       container
       sx={{
         position: "relative",
-        padding: 2,
+        padding: 3,
         minWidth: 600,
         overflow: "scroll",
         height: "100%",