bananas-commerce-admin 0.3.21 → 0.3.22

package/dist/types/App.d.ts

@@ -2,14 +2,14 @@ import React from "react";
 import { Theme } from "@mui/material/styles";
 import { AdminProps } from "./Admin";
 import { ApiClient } from "./api";
-import { ContribComponents } from "./types";
+import { ContribComponentMap } from "./types";
 type AppProps = {
     api: ApiClient | string | URL | {
         schema: string | URL;
         server?: string | URL;
     };
     theme?: Theme | Partial<Theme> | ((outerTheme: Theme) => Theme);
-    contrib?: ContribComponents[];
+    contrib?: ContribComponentMap;
 } & AdminProps;
 declare const App: React.FC<AppProps>;
 export default App;

package/dist/types/api.d.ts

@@ -35,4 +35,5 @@ export declare class ApiClient {
     static load(source: string | URL, server?: string | URL): Promise<ApiClient>;
     constructor(document: OpenAPI.Document, server?: string | URL);
     isAuthenticated(): Promise<boolean>;
+    findContrib(prefix: string): ApiOperation[];
 }

package/dist/types/contexts/ApiContext.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
 import { ApiClient } from "../api";
-import { ContribComponents } from "../types";
+import { ContribComponentMap } from "../types";
 export interface ApiContextProviderProps {
     api: ApiClient | string | URL | {
         schema: string | URL;
         server?: string | URL;
         prefix?: string;
     };
-    contrib?: ContribComponents[];
+    contrib?: ContribComponentMap;
 }
 declare const ApiContext: React.Context<ApiClient>;
 export declare const useApi: () => ApiClient;

package/dist/types/extensions/fulfillment/components/AddressInfo.d.ts

@@ -6,6 +6,7 @@ export interface AddressInfoProps {
     careOf?: string;
     postalCode: string;
     city: string;
+    region?: string;
     countryCode: string;
 }
 export declare const AddressInfo: React.FC<AddressInfoProps>;

package/dist/types/extensions/fulfillment/components/RecipientCard.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { Recipient } from "../types/recipient";
 interface RecipientCard {
     recipient: Recipient;
+    email?: string;
+    phone?: string;
 }
 export declare const RecipientCard: React.FC<RecipientCard>;
-export {};
+export default RecipientCard;

package/dist/types/extensions/fulfillment/components/ShipmentCard.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { ShipmentListItem } from "../types/shipment";
+import { Shipment } from "../types/shipment";
 export interface ShipmentCardProps {
-    shipment: ShipmentListItem;
+    shipment: Shipment;
 }
 export declare const ShipmentCard: React.FC<ShipmentCardProps>;
+export default ShipmentCard;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { OrderDetail } from "../../types/order";
+interface OrderDestinationCard {
+    order: OrderDetail;
+}
+export declare const OrderDestinationCard: React.FC<OrderDestinationCard>;
+export default OrderDestinationCard;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { OrderDetail, OrderListItem } from "../../types/order";
+interface OrderDetailProps {
+    order: OrderListItem;
+}
+declare const OrderDetail: React.FC<OrderDetailProps>;
+export default OrderDetail;

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

@@ -1,5 +1,5 @@
 import { RouterExtension } from "../../router/Router";
-import { ContribComponents, NavigationOverrides } from "../../types";
+import { ContribComponentMap, NavigationOverrides } from "../../types";
 export declare const router: RouterExtension;
 export declare const navigation: NavigationOverrides;
-export declare const contrib: ContribComponents;
+export declare const contrib: Record<string, ContribComponentMap>;

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

@@ -1,3 +1,5 @@
+import { Recipient } from "./recipient";
+import { Shipment } from "./shipment";
 export type OrderDestinationType = "HOME" | "STORE" | "SERVICE_POINT" | "LOCKER";
 export type OrderStateType = "PENDING" | "CONFIRMED" | "SENT" | "IN_TRANSIT" | "READY_FOR_PICKUP" | "DELIVERED" | "CANCELLED";
 export interface OrderListItem {
@@ -12,6 +14,7 @@ export interface OrderListItem {
     recipient: {
         given_name: string;
         family_name: string;
+        company_name: string;
     } | null;
     tracking_number: string;
     state: OrderStateType;
@@ -23,6 +26,7 @@ export interface OrderDetail {
     phone: string | null;
     destination_type: OrderDestinationType;
     state: OrderStateType;
+    channel: string;
     destination_reference?: string;
     name: string;
     care_of: string;
@@ -33,11 +37,8 @@ export interface OrderDetail {
     country_code: string;
     region: string;
     items: OrderItem[];
-    shipment: {
-        carrier: string;
-        option_name: string;
-        tracking_number: string;
-    } | null;
+    shipment: Shipment | null;
+    recipient: Recipient | null;
 }
 export interface OrderItem {
     code: string;

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

@@ -1,9 +1,7 @@
-import { Shipment } from "./shipment";
 export interface Recipient {
-    email: string;
-    phone?: string;
     given_name: string;
     family_name: string;
+    company_name: string;
     care_of: string;
     street_address: string;
     street_address2: string;
@@ -11,6 +9,4 @@ export interface Recipient {
     city: string;
     country_code: string;
     region: string;
-    reference: string;
-    shipments: Shipment[];
 }

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/example/index.tsx

@@ -15,7 +15,10 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         ...Bananas.fulfillment.navigation,
       }}
       extensions={[Bananas.bananas.router, Bananas.pos.router, Bananas.fulfillment.router]}
-      contrib={[Bananas.fulfillment.contrib]}
+      contrib={{
+        ...Bananas.fulfillment.contrib.orders,
+        ...Bananas.fulfillment.contrib.returns,
+      }}
       theme={createTheme({
         palette: {
           primary: {

package/example/package-lock.json

@@ -37,7 +37,7 @@
     },
     "..": {
       "name": "bananas-commerce-admin",
-      "version": "0.3.4",
+      "version": "0.3.20",
       "dependencies": {
         "libphonenumber-js": "^1.10.24",
         "luxon": "^3.3.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "Bananas-commerce admin interface and building blocks",
   "keywords": [
     "admin",

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

@@ -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/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();
 
@@ -44,9 +41,14 @@ export const ApiContextProvider: React.FC<React.PropsWithChildren<ApiContextProv
         .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/extensions/fulfillment/components/AddressInfo.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
-const countryCodeFormatter = new Intl.DisplayNames("sv", { type: "region" });
+const countryCodeFormatter = new Intl.DisplayNames("en", { type: "region" });
 
 export interface AddressInfoProps {
   name?: string;
@@ -12,6 +12,7 @@ export interface AddressInfoProps {
   careOf?: string;
   postalCode: string;
   city: string;
+  region?: string;
   countryCode: string;
 }
 
@@ -22,19 +23,22 @@ export const AddressInfo: React.FC<AddressInfoProps> = ({
   careOf,
   postalCode,
   city,
+  region,
   countryCode,
 }) => {
   return (
     <Box>
       {name != null && name !== "" ? <Typography noWrap>{name}</Typography> : null}
+      {careOf != null && careOf !== "" ? <Typography noWrap>c/o {careOf}</Typography> : null}
       <Typography noWrap>{streetAddress}</Typography>
       {streetAddress2 != null && streetAddress2 !== "" ? (
         <Typography noWrap>{streetAddress2}</Typography>
       ) : null}
-      {careOf != null && careOf !== "" ? <Typography noWrap>c/o {careOf}</Typography> : null}
-      <Typography noWrap>
-        {`${postalCode} ${city}, ${countryCodeFormatter.of(countryCode)}`}
-      </Typography>
+      <Typography noWrap>{`${postalCode} ${city}`}</Typography>
+      {region != null && region !== "" ? <Typography noWrap>{region}</Typography> : null}
+      {countryCode != null && countryCode !== "" ? (
+        <Typography noWrap>{countryCodeFormatter.of(countryCode)}</Typography>
+      ) : null}
     </Box>
   );
 };

package/src/extensions/fulfillment/components/RecipientCard.tsx

@@ -1,42 +1,67 @@
 import React from "react";
 
+import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardHeader from "@mui/material/CardHeader";
-import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
-import { useTheme } from "@mui/material/styles";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
 
 import { Recipient } from "../types/recipient";
+import { AddressInfo } from "./AddressInfo";
 
 interface RecipientCard {
   recipient: Recipient;
+  email?: string;
+  phone?: string;
 }
 
-export const RecipientCard: React.FC<RecipientCard> = ({ recipient }) => {
-  const theme = useTheme();
-
+export const RecipientCard: React.FC<RecipientCard> = ({ recipient, email, phone }) => {
   return (
     <Card>
-      <CardHeader title={"Recipient"} />
+      <CardHeader
+        title={
+          <Typography variant="h6">
+            <b>Recipient</b>
+          </Typography>
+        }
+        avatar={<PersonOutlinedIcon />}
+      />
       <CardContent>
-        <Divider sx={{ marginBottom: theme.spacing(2) }} />
-        <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <Typography color={"text.secondary"}>{"Recipient"}</Typography>
-            <Typography>{`${recipient.given_name} ${recipient.family_name}`}</Typography>
-            <Typography>{recipient.street_address}</Typography>
-            {recipient.street_address2 ? (
-              <Typography>{recipient.street_address2}</Typography>
-            ) : null}
-            {recipient.care_of ? <Typography>{recipient.care_of}</Typography> : null}
-            <Typography>
-              {`${recipient.postal_code} ${recipient.city} ${recipient.country_code}`}
-            </Typography>
-          </Grid>
-        </Grid>
+        <List dense>
+          <ListItem>
+            <ListItemText
+              primary="Address"
+              secondary={
+                <AddressInfo
+                  name={
+                    recipient.company_name
+                      ? recipient.company_name
+                      : `${recipient.given_name} ${recipient.family_name}`
+                  }
+                  streetAddress={recipient.street_address}
+                  streetAddress2={recipient.street_address2}
+                  careOf={recipient.care_of}
+                  postalCode={recipient.postal_code}
+                  city={recipient.city}
+                  region={recipient.region}
+                  countryCode={recipient.country_code}
+                />
+              }
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText primary="Email" secondary={email ?? "-"} />
+          </ListItem>
+          <ListItem>
+            <ListItemText primary="Phone" secondary={phone ?? "-"} />
+          </ListItem>
+        </List>
       </CardContent>
     </Card>
   );
 };
+
+export default RecipientCard;

package/src/extensions/fulfillment/components/ShipmentCard.tsx

@@ -1,79 +1,73 @@
 import React from "react";
 
-import Box from "@mui/material/Box";
+import LocalShippingOutlinedIcon from "@mui/icons-material/LocalShippingOutlined";
 import Card from "@mui/material/Card";
-import CardActionArea from "@mui/material/CardActionArea";
-import { useTheme } from "@mui/material/styles";
+import CardContent from "@mui/material/CardContent";
+import CardHeader from "@mui/material/CardHeader";
+import Link from "@mui/material/Link";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
-import Stack from "@mui/system/Stack";
 
-import { useRouter } from "../../../contexts/RouterContext";
-import { formatPurchaseNumber } from "../../../util/format_purchase_number";
-import { ShipmentListItem } from "../types/shipment";
-import { ContactInfo } from "./ContactInfo";
-import { ShipmentDestinationIcon } from "./ShipmentDestinationIcon";
-
-const dateTimeFormatter = new Intl.DateTimeFormat("sv");
+import { Shipment } from "../types/shipment";
 
 export interface ShipmentCardProps {
-  shipment: ShipmentListItem;
+  shipment: Shipment;
 }
 
 export const ShipmentCard: React.FC<ShipmentCardProps> = ({ shipment }) => {
-  const theme = useTheme();
-  const { navigate } = useRouter();
-
-  const onClick = () => {
-    navigate(`fulfillment.shipment:detail`, {
-      params: {
-        shipment_reference: shipment.shipment_reference,
-      },
-    });
-  };
-
   return (
     <Card sx={{ width: "100%" }}>
-      <CardActionArea onClick={onClick}>
-        <Stack
-          padding={1}
-          bgcolor={theme.palette.secondary.main}
-          justifyContent="space-between"
-          direction="row"
-        >
-          <Stack spacing={1} direction="row">
-            <ShipmentDestinationIcon
-              type={shipment.destination_type!}
-              htmlColor={theme.palette.secondary.contrastText}
+      <CardHeader
+        title={
+          <Typography variant="h6">
+            <b>Shipment</b>
+          </Typography>
+        }
+        avatar={<LocalShippingOutlinedIcon />}
+      />
+      <CardContent>
+        <List dense>
+          <ListItem>
+            <ListItemText primary="Carrier" secondary={shipment.carrier} />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="Tracking number"
+              secondary={
+                shipment.tracking_number !== "" ? shipment.tracking_number : "Not received yet"
+              }
             />
-            <Typography color={theme.palette.secondary.contrastText}>
-              {shipment.option_name} for purchase {formatPurchaseNumber(shipment.purchase_number)}
-            </Typography>
-          </Stack>
-        </Stack>
-        <Stack
-          padding={1}
-          direction={{ sm: "column", md: "row" }}
-          spacing={2}
-          justifyContent="space-between"
-          minHeight={100}
-        >
-          <Box sx={{ width: "100%" }}>
-            <Typography>{shipment.shipment_reference}</Typography>
-            <Typography>
-              {shipment.date_sent != null
-                ? dateTimeFormatter.format(new Date(shipment.date_sent))
-                : "Ej skickat"}
-            </Typography>
-          </Box>
-          <Box sx={{ width: "100%" }}>
-            <ContactInfo name={shipment.name} email={shipment.email} phone={shipment.phone} />
-          </Box>
-          <Box sx={{ width: "100%" }}>
-            <Typography>{shipment.carrier}</Typography>
-            <Typography>{shipment.tracking_number}</Typography>
-          </Box>
-        </Stack>
-      </CardActionArea>
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="Tracking URL"
+              secondary={
+                shipment.tracking_url !== "" ? (
+                  <Link href={shipment.tracking_url} noWrap>
+                    {shipment.tracking_url}
+                  </Link>
+                ) : (
+                  "Not received yet"
+                )
+              }
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="Date sent"
+              secondary={
+                shipment.date_sent != null && shipment.date_sent !== ""
+                  ? new Date(shipment.date_sent).toISOString().substring(0, 10)
+                  : "Not shipped yet"
+              }
+            />
+          </ListItem>
+        </List>
+      </CardContent>
     </Card>
   );
 };
+
+export default ShipmentCard;

package/src/extensions/fulfillment/components/contrib/PurchaseOrderList.tsx

@@ -9,7 +9,7 @@ import Content from "../../../../containers/Content";
 import { ContribComponent } from "../../../../types";
 import { OrderListItem } from "../../types/order";
 import { LimitOffset } from "../../types/util";
-import OrderAccordion from "../order/OrderAccordion";
+import OrderDetail from "../order/OrderDetail";
 
 const PurchaseOrderList: ContribComponent<LimitOffset<OrderListItem>> = ({
   data: { next: _next, previous: _previous, results },
@@ -33,7 +33,7 @@ const PurchaseOrderList: ContribComponent<LimitOffset<OrderListItem>> = ({
               </Typography>
             ) : null}
             {results.map((order) => (
-              <OrderAccordion key={order.reference} order={order} />
+              <OrderDetail key={order.reference} order={order} />
             ))}
           </Stack>
         </Grid>