bananas-commerce-admin 0.3.21 → 0.4.0

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

@@ -1,64 +1,9 @@
 export type ShipmentDestinationType = "HOME" | "STORE" | "SERVICE_POINT" | "LOCKER";
-export interface ShipmentListItem {
-    shipment_reference: string;
-    purchase_number: number;
-    email: string;
-    phone?: string;
-    option_name: string;
-    carrier: string;
-    destination_type: ShipmentDestinationType;
-    name: string;
-    tracking_number: string;
-    date_confirmed?: string;
-    date_sent?: string;
-    date_cancelled?: string;
-    date_arrived_at_destination?: string;
-    date_delivered?: string;
-}
 export interface Shipment {
-    shipment_reference: string;
     option_name: string;
     carrier: string;
-    destination_type: ShipmentDestinationType;
-    destination_reference?: string;
-    name: string;
-    care_of: string;
-    street_address: string;
-    street_address2: string;
-    postal_code: string;
-    city: string;
-    country_code: string;
-    region: string;
     tracking_number: string;
-    date_confirmed?: string;
+    tracking_url: string;
+    date_commited?: string;
     date_sent?: string;
-    date_cancelled?: string;
-    date_arrived_at_destination?: string;
-    date_delivered?: string;
-    items: ShipmentItem[];
-}
-export interface ShipmentDetail {
-    option_name: string;
-    carrier: string;
-    destination_type: ShipmentDestinationType;
-    destination_reference?: string;
-    name: string;
-    care_of: string;
-    street_address: string;
-    street_address2: string;
-    postal_code: string;
-    city: string;
-    country_code: string;
-    region: string;
-    tracking_number: string;
-    date_confirmed?: string;
-    date_sent?: string;
-    date_cancelled?: string;
-    date_arrived_at_destination?: string;
-    date_delivered?: string;
-    items: ShipmentItem[];
-}
-export interface ShipmentItem {
-    code: string;
-    quantity: number;
 }

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

@@ -11,6 +11,7 @@ export interface PurchaseDetail {
     country_code: string;
     given_name?: string;
     family_name?: string;
+    company_name?: string;
     email: string;
     phone?: string;
     total_debit_amount?: string;

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

@@ -19,7 +19,7 @@ export interface PageContribComponent {
     title?: string;
     component: ContribComponent | Promise<ContribComponent>;
 }
-export interface ContribComponents {
-    app: string;
-    component: (tag: string) => PageContribComponent | undefined;
-}
+export type ContribComponentMap = Record<string, {
+    title?: string;
+    component: () => ContribComponent<any> | Promise<ContribComponent<any>>;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.3.21",
+  "version": "0.4.0",
   "description": "Bananas-commerce admin interface and building blocks",
   "keywords": [
     "admin",
@@ -23,8 +23,6 @@
     }
   },
   "scripts": {
-    "dev": "npm run build:esm:watch & npm run serve:watch --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",
@@ -32,52 +30,32 @@
     "build:cjs:watch": "npm run build:cjs -- --watch",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint": "npm run lint:ox && npm run lint:ts",
+    "lint:ox": "oxlint .",
+    "lint:ts": "tsc --noEmit --pretty false",
     "fmt": "prettier --write .",
     "fmt:check": "prettier --check ."
   },
   "devDependencies": {
-    "@apidevtools/swagger-parser": "^10.1.0",
-    "@babel/core": "^7.21.3",
-    "@babel/preset-typescript": "^7.21.0",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.131",
-    "@mui/material": "^5.13.2",
-    "@mui/system": "^5.13.2",
-    "@mui/x-date-pickers": "^6.5.0",
-    "@storybook/addon-actions": "^7.0.0-rc.7",
-    "@storybook/addon-essentials": "^7.0.0-rc.7",
-    "@storybook/addon-interactions": "^7.0.0-rc.7",
-    "@storybook/addon-links": "^7.0.0-rc.7",
-    "@storybook/react": "^7.0.0-rc.7",
-    "@storybook/react-webpack5": "^7.0.0-rc.7",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@types/luxon": "^3.3.0",
-    "@types/node": "^18.15.5",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "babel-loader": "^8.3.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "eslint-prettier-config": "^1.0.1",
-    "mui-chips-input": "^2.0.1",
-    "notistack": "^3.0.1",
-    "openapi-types": "^12.1.0",
-    "prettier": "^2.8.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.9.0",
-    "storybook": "^7.0.0-rc.7",
-    "typescript": "^5.0.2"
+    "@babel/core": "^7.23.7",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "babel-loader": "^9.1.3",
+    "openapi-types": "^12.1.3",
+    "oxlint": "^0.2.3-alpha.0",
+    "prettier": "^3.2.4",
+    "storybook": "^7.6.10",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
@@ -95,7 +73,7 @@
     "react-router-dom": "^6.9.0"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.24",
-    "luxon": "^3.3.0"
+    "libphonenumber-js": "^1.10.54",
+    "luxon": "^3.4.4"
   }
 }

package/src/Admin.tsx

@@ -53,45 +53,43 @@ const Admin: React.FC<AdminProps> = ({
   }, [loaded, api, i18n, user]);
 
   return (
-    <>
-      <Box
-        sx={{
-          display: "flex",
-          position: "fixed",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          flexDirection: "column",
-        }}
-      >
-        {loaded ? (
-          user !== null ? (
-            <BrowserRouter basename={basename}>
-              <RouterContextProvider stripPathPrefix={basepath}>
-                <DialogContextProvider>
-                  <BcomDialog />
-                  <Box sx={{ display: "flex" }}>
-                    <NavBar
-                      navigation={navigation}
-                      logo={logo}
-                      title={title}
-                      subtitle={subtitle}
-                      version={version}
-                    />
-                    <Router extensions={extensions} dashboard={dashboard} />
-                  </Box>
-                </DialogContextProvider>
-              </RouterContextProvider>
-            </BrowserRouter>
-          ) : (
-            <LoginPage logo={logo} title={title} />
-          )
+    <Box
+      sx={{
+        display: "flex",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+      }}
+    >
+      {loaded ? (
+        user !== null ? (
+          <BrowserRouter basename={basename}>
+            <RouterContextProvider stripPathPrefix={basepath}>
+              <DialogContextProvider>
+                <BcomDialog />
+                <Box sx={{ display: "flex" }}>
+                  <NavBar
+                    navigation={navigation}
+                    logo={logo}
+                    title={title}
+                    subtitle={subtitle}
+                    version={version}
+                  />
+                  <Router extensions={extensions} dashboard={dashboard} />
+                </Box>
+              </DialogContextProvider>
+            </RouterContextProvider>
+          </BrowserRouter>
         ) : (
-          <LoadingScreen logo={logo} loading={!loaded} />
-        )}
-      </Box>
-    </>
+          <LoginPage logo={logo} title={title} />
+        )
+      ) : (
+        <LoadingScreen logo={logo} loading={!loaded} />
+      )}
+    </Box>
   );
 };
 

package/src/App.tsx

@@ -11,7 +11,7 @@ import { ApiContextProvider } from "./contexts/ApiContext";
 import { I18nContextProvider } from "./contexts/I18nContext";
 import { UserContextProvider } from "./contexts/UserContext";
 import { parentPath } from "./router/routes";
-import { ContribComponents } from "./types";
+import { ContribComponentMap } from "./types";
 
 type AppProps = {
   api:
@@ -23,7 +23,7 @@ type AppProps = {
         server?: string | URL;
       };
   theme?: Theme | Partial<Theme> | ((outerTheme: Theme) => Theme);
-  contrib?: ContribComponents[];
+  contrib?: ContribComponentMap;
 } & AdminProps;
 
 const App: React.FC<AppProps> = ({ theme, api, contrib, ...rest }) => {

package/src/api.ts

@@ -39,7 +39,7 @@ export class ApiOperation {
     description?: string,
     bodyType?: BodyApplicationType,
     contribs?: string[],
-    component?: PageContribComponent
+    component?: PageContribComponent,
   ) {
     this.id = id;
     this.tags = tags;
@@ -112,7 +112,7 @@ export class ApiOperation {
             break;
           } else {
             throw TypeError(
-              `Wrong type passed to ApiOperation.Call. Expected multipart/form-data as FormData or HTMLFormElement.`
+              `Wrong type passed to ApiOperation.Call. Expected multipart/form-data as FormData or HTMLFormElement.`,
             );
           }
         default:
@@ -163,7 +163,7 @@ export class ApiClient {
     // Build operations
     for (const [path, definition] of Object.entries(this.document.paths ?? {}) as [
       string,
-      Record<string, OpenAPI.Operation>
+      Record<string, OpenAPI.Operation>,
     ][]) {
       for (const [method, operation] of Object.entries(definition)) {
         let appName: string | undefined;
@@ -230,7 +230,7 @@ export class ApiClient {
         if ("requestBody" in operation && operation.requestBody !== undefined) {
           if ("content" in operation.requestBody) {
             const bodyTypes = Object.keys(operation.requestBody.content).map((bodyType) =>
-              bodyType.toLowerCase()
+              bodyType.toLowerCase(),
             );
             for (const type of bodyTypes) {
               // @ts-expect-error this is actually totally fine
@@ -272,7 +272,7 @@ export class ApiClient {
           operation.summary,
           operation.description,
           bodyType,
-          contribs
+          contribs,
         );
 
         for (const contribName of contribs) {
@@ -291,4 +291,18 @@ export class ApiClient {
       return false;
     }
   }
+
+  findContrib(prefix: string) {
+    const results = [];
+
+    for (const [tag, operations] of Object.entries(this.contrib)) {
+      for (const [_, operation] of Object.entries(operations)) {
+        if (tag.startsWith(prefix) && operation.component !== undefined) {
+          results.push(operation);
+        }
+      }
+    }
+
+    return results;
+  }
 }

package/src/components/Branding.tsx

@@ -38,7 +38,7 @@ const Branding: React.FC<BrandingProps> = ({
           flexGrow: 1,
         },
         [{ width: "100%" }, fullWidth ?? false],
-        sx
+        sx,
       )}
     >
       <ButtonBase

package/src/components/NavBar.tsx

@@ -55,20 +55,23 @@ const NavBar: React.FC<NavBarProps> = ({ navigation, logo, title, subtitle, vers
 
   return (
     <Drawer
-      sx={{
-        width: drawerWidth,
-        flexShrink: 0,
-        whiteSpace: "nowrap",
-        boxSizing: "border-box",
-        ...(open && {
-          ...openedMixin(theme),
-          "& .MuiDrawer-paper": openedMixin(theme),
-        }),
-        ...(!open && {
-          ...closedMixin(theme),
-          "& .MuiDrawer-paper": closedMixin(theme),
-        }),
-      }}
+      sx={
+        {
+          width: drawerWidth,
+          flexShrink: 0,
+          whiteSpace: "nowrap",
+          boxSizing: "border-box",
+          ...(open
+            ? {
+                ...openedMixin(theme),
+                "& .MuiDrawer-paper": openedMixin(theme),
+              }
+            : {
+                ...closedMixin(theme),
+                "& .MuiDrawer-paper": closedMixin(theme),
+              }),
+        } as any
+      }
       anchor="left"
       variant="permanent"
       open={open}

package/src/components/NavBarRoutes.tsx

@@ -33,7 +33,7 @@ const NavBarRoutes: React.FC<NavBarRoutesProps> = ({ navigation, open }) => {
     setCustomRoutes(
       Object.values(navigation)
         .filter((entry): entry is { route: RouteInfo } => Boolean(entry && entry?.route))
-        .map((entry) => entry.route)
+        .map((entry) => entry.route),
     );
   }, [navigation]);
 
@@ -68,7 +68,7 @@ const NavBarRoutes: React.FC<NavBarRoutesProps> = ({ navigation, open }) => {
           }
 
           appItems.push(
-            <NavBarItem key={route.id} route={route} title={title} icon={icon} open={open} />
+            <NavBarItem key={route.id} route={route} title={title} icon={icon} open={open} />,
           );
         }
       }
@@ -76,14 +76,14 @@ const NavBarRoutes: React.FC<NavBarRoutesProps> = ({ navigation, open }) => {
       apps.push(
         <List disablePadding key={app}>
           {appItems}
-        </List>
+        </List>,
       );
     }
 
     return apps;
   }, [routes, navigation, open]);
 
-  return <>{navItems}</>;
+  return navItems;
 };
 
 export default NavBarRoutes;

package/src/components/User.tsx

@@ -56,7 +56,7 @@ const User: React.FC<UserProps> = ({ classes, open, icon }) => {
   const UserIcon = icon ?? AccountCircleOutlinedIcon;
   const [route, logoutText] = React.useMemo(
     () => [getRoute("bananas.me:list"), getRoute("bananas.logout:create")!.title],
-    [routes]
+    [routes],
   );
 
   return user !== null && route !== undefined ? (

package/src/containers/ComponentLoader.tsx

@@ -45,8 +45,8 @@ const ComponentLoader: React.FC<ComponentLoaderProps> = ({ operation, params, ..
           throwError(
             new DataLoadFailedError(
               response,
-              `Data load failed with ${response.status} ${response.statusText}`
-            )
+              `Data load failed with ${response.status} ${response.statusText}`,
+            ),
           );
         }
       })

package/src/containers/ErrorScreen.tsx

@@ -39,7 +39,7 @@ const ErrorScreen: React.FC<ErrorScreenInnerProps> = ({ error }) => {
               error.response.status >= 500
                 ? "There's been an error. It's been reported to the site administrators via email and should be fixed shortly. Thanks for your patience."
                 : errorMessages[error.response.status] ?? "",
-              (user as unknown as Record<string, string>) ?? {}
+              (user as unknown as Record<string, string>) ?? {},
             )}
           </Typography>
         ) : null}

package/src/containers/LoadingScreen.tsx

@@ -48,7 +48,7 @@ const styles = (theme: Theme) =>
       margin: 0,
       marginTop: theme.spacing(-36),
     },
-  } as const);
+  }) as const;
 
 interface LoadingScreenInnerProps {
   loading: boolean;
@@ -72,7 +72,7 @@ const LoadingScreenInner: React.FC<LoadingScreenInnerProps> = ({
         [classes.backdrop, backdrop],
         [classes.backdropPrimary, backdrop && color === "primary"],
         [classes.backdropSecondary, backdrop && color === "secondary"],
-        [classes.backdropPaper, backdrop && color === "paper"]
+        [classes.backdropPaper, backdrop && color === "paper"],
       )}
     >
       <Box sx={classes.logo}>{logo && <Logo src={logo} />}</Box>

package/src/containers/PageLoader.tsx

@@ -67,7 +67,7 @@ const PageLoader: React.FC<PageLoaderProps> = ({
                 ? request.query instanceof URLSearchParams
                   ? request.query.entries()
                   : Object.entries(request.query)
-                : []
+                : [],
             ),
           ]),
         })
@@ -78,8 +78,8 @@ const PageLoader: React.FC<PageLoaderProps> = ({
             throwError(
               new PageLoadFailedError(
                 response,
-                `Page data load failed with ${response.status} ${response.statusText}`
-              )
+                `Page data load failed with ${response.status} ${response.statusText}`,
+              ),
             );
           }
         })

package/src/contexts/ApiContext.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useSnackbar } from "notistack";
 
 import { ApiClient } from "../api";
-import { ContribComponents } from "../types";
+import { ContribComponentMap } from "../types";
 import { getCookie } from "../util/get_cookie";
 
 export interface ApiContextProviderProps {
@@ -16,7 +16,7 @@ export interface ApiContextProviderProps {
         server?: string | URL;
         prefix?: string;
       };
-  contrib?: ContribComponents[];
+  contrib?: ContribComponentMap;
 }
 
 const ApiContext = React.createContext<ApiClient>(undefined as unknown as ApiClient);
@@ -27,9 +27,6 @@ export const ApiContextProvider: React.FC<React.PropsWithChildren<ApiContextProv
   api: init,
   contrib,
 }) => {
-  contrib ??= Array.isArray(contrib) ? contrib : [];
-  const contribMap = new Map(contrib.map(({ app, component }) => [app, component]));
-
   const [api, setApi] = React.useState<ApiClient>();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -38,15 +35,20 @@ export const ApiContextProvider: React.FC<React.PropsWithChildren<ApiContextProv
       (init instanceof ApiClient
         ? Promise.resolve(init)
         : typeof init === "string" || init instanceof URL
-        ? ApiClient.load(init)
-        : ApiClient.load(init.schema, init.server)
+          ? ApiClient.load(init)
+          : ApiClient.load(init.schema, init.server)
       )
         .then(async (api) => {
           // Add a component for rendering the operation result if found.
           for (const [tag, operations] of Object.entries(api.contrib)) {
-            for (const [app, operation] of Object.entries(operations)) {
-              const hit = contribMap.get(app)?.(tag);
-              operation.component = hit;
+            for (const [_, operation] of Object.entries(operations)) {
+              const hit = contrib ? contrib[tag] : null;
+              if (hit != null) {
+                operation.component = {
+                  title: hit.title,
+                  component: hit.component(),
+                };
+              }
             }
           }
 

package/src/contexts/DialogContext.tsx

@@ -14,7 +14,7 @@ const DialogContext = React.createContext<{
   makeOpen: (
     title: string,
     children: React.ReactNode,
-    options?: { ok?: string; cancel?: string }
+    options?: { ok?: string; cancel?: string },
   ) => Promise<boolean>;
   ok: string;
   cancel: string;

package/src/contexts/I18nContext.tsx

@@ -5,13 +5,13 @@ import { useApi } from "./ApiContext";
 
 export function interpolateString(
   string: string,
-  params: Record<string, string> | string[]
+  params: Record<string, string> | string[],
 ): string {
   return Array.isArray(params)
     ? params.reduce((s, value) => s.replace(/%[sd]|\{\}/, value), string)
     : Object.entries(params).reduce(
         (s, [key, value]) => s.replace(new RegExp(`%\\(${key}\\)[sd]|\\{${key}\\}`, "g"), value),
-        string
+        string,
       );
 }
 

package/src/contexts/RouterContext.tsx

@@ -38,7 +38,7 @@ interface RouterContext {
       params?: RouterParams;
       query?: RouterQuery;
       replace?: boolean;
-    }
+    },
   ): void;
 }
 
@@ -68,7 +68,7 @@ export const RouterContextProvider: React.FC<
       const navigation = isNavigation(operation.tags);
       const path = stripPathPrefix(
         getPath(operation.endpoint, operation.method, action),
-        props.stripPathPrefix
+        props.stripPathPrefix,
       );
       const page = getPage(path, action);
       routes.push({
@@ -86,7 +86,7 @@ export const RouterContextProvider: React.FC<
   }, [api]);
   const routes = useMemo<RouteInfo[]>(
     () => customRoutes.concat(apiRoutes),
-    [customRoutes, apiRoutes]
+    [customRoutes, apiRoutes],
   );
   const routerNavigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
@@ -113,7 +113,7 @@ export const RouterContextProvider: React.FC<
       params?: RouterParams;
       query?: RouterQuery;
       replace?: boolean;
-    }
+    },
   ) => {
     // Relative history, e.g. go back or forward x steps
     if (typeof route === "number") {
@@ -147,7 +147,7 @@ export const RouterContextProvider: React.FC<
         pathname,
         search: new URLSearchParams(options?.query).toString(),
       },
-      { replace: options?.replace }
+      { replace: options?.replace },
     );
   };
 

package/src/contexts/UserContext.tsx

@@ -20,7 +20,7 @@ interface UserContext {
   changePassword: (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string
+    newPassword2: string,
   ) => Promise<void>;
 }
 
@@ -59,7 +59,7 @@ export const UserContextProvider: React.FC<React.PropsWithChildren> = ({ childre
   const changePassword = async (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string
+    newPassword2: string,
   ) => {
     const response = await api?.operations["bananas.change_password:create"].call({
       body: {