bananas-commerce-admin 0.2.2 → 0.2.5

package/src/extensions/fulfillment/components/order/OrderAccordion.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionActions from "@mui/material/AccordionActions";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+
+import { useApi } from "../../../../contexts/ApiContext";
+import { formatPurchaseNumber } from "../../../../util/format_purchase_number";
+import OrderItemsTable from "./OrderItemsTable";
+import { useSnackbar } from "notistack";
+import { LoadingButton, LoadingButtonProps } from "@mui/lab";
+import { OrderDetail, OrderItem, OrderListItem } from "../../types/order";
+import OrderStateChip from "./OrderStateChip";
+import { useDialog } from "../../../../contexts/DialogContext";
+
+interface OrderAccordionProps {
+  order: OrderListItem;
+}
+
+const OrderAccordion: React.FC<OrderAccordionProps> = ({ order }) => {
+  const api = useApi();
+  const { enqueueSnackbar } = useSnackbar();
+  const [details, setDetails] = React.useState<OrderDetail | null>(null);
+  const [buttonsLoading, setButtonsLoading] = React.useState(false);
+  const [selected, setSelected] = React.useState<OrderItem[]>([]);
+  const title = [
+    formatPurchaseNumber(order.purchase_number),
+    order.name,
+    order.email,
+    order.phone,
+  ]
+    .filter((entry) => entry != null)
+    .join(" • ");
+
+  const loadDetails = () => {
+    setDetails(null);
+    api.operations["fulfillment.order:detail"]
+      .call({
+        params: {
+          shipment_reference: order.shipment_reference,
+        },
+      })
+      .then(async (response) => setDetails(await response.json()));
+  };
+
+  const openDialog = useDialog();
+
+  const markAsArrived = async () => {
+    if (
+      !(await openDialog(
+        "Are you sure?",
+        "This will notify the customer that the order is ready for pick up"
+      ))
+    ) {
+      return;
+    }
+    setButtonsLoading(true);
+    api.operations["fulfillment.shipment:arrived"]
+      .call({
+        params: { shipment_reference: order.shipment_reference },
+        body: selected,
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Order is now ready for pickup", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar("Failed to mark order as ready for pickup", {
+            variant: "error",
+          });
+          throw response;
+        }
+      })
+      .finally(() => {
+        setButtonsLoading(false);
+        loadDetails();
+      });
+  };
+
+  const markAsDelivered = async () => {
+    if (
+      !(await openDialog(
+        "Are you sure?",
+        "This will mark the order as delivered"
+      ))
+    ) {
+      return;
+    }
+    setButtonsLoading(true);
+    api.operations["fulfillment.shipment:delivered"]
+      .call({
+        params: { shipment_reference: order.shipment_reference },
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Successfully marked order as delivered", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar("Failed to mark order as delivered", {
+            variant: "error",
+          });
+          throw response;
+        }
+      })
+      .finally(() => {
+        setButtonsLoading(false);
+        loadDetails();
+      });
+  };
+
+  const doCancel = async () => {
+    if (
+      !(await openDialog(
+        "Are you sure?",
+        "This will fully cancel the order and release the authorized payment back to the customer"
+      ))
+    ) {
+      return;
+    }
+    api.operations["fulfillment.shipment:cancel"]
+      .call({
+        params: { shipment_reference: order.shipment_reference },
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Order cancelled", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar("Failed to cancel order", {
+            variant: "error",
+          });
+          throw response;
+        }
+      })
+      .finally(() => {
+        setButtonsLoading(false);
+        loadDetails();
+      });
+  };
+
+  const StatusButton = () => {
+    if (!details) {
+      return null;
+    }
+
+    const props: LoadingButtonProps = {
+      variant: "contained",
+      color: "secondary",
+      loading: buttonsLoading,
+      disabled: buttonsLoading,
+    };
+
+    if (["DELIVERED", "CANCELLED"].includes(details.state)) {
+      return null;
+    }
+
+    if (details.state === "PENDING") {
+      props.disabled ||= selected.length === 0;
+      return (
+        <LoadingButton {...props} onClick={markAsArrived}>
+          Ready for pickup
+        </LoadingButton>
+      );
+    }
+
+    if (["IN_TRANSIT", "READY_FOR_PICKUP", "SENT"].includes(details.state)) {
+      return (
+        <LoadingButton {...props} onClick={markAsDelivered}>
+          Delivered
+        </LoadingButton>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Accordion onChange={() => (details == null ? loadDetails() : void 0)}>
+      <AccordionSummary sx={{ margin: 1 }} expandIcon={<ExpandMoreIcon />}>
+        {/* TODO: Re-enable when we implement some kind of bulk update thing
+          <Checkbox
+            color="secondary"
+            onClick={(event) => event.stopPropagation()}
+          />
+        */}
+        <Typography sx={{ marginY: "auto", flexGrow: 1 }}>{title}</Typography>
+        <OrderStateChip sx={{ marginRight: 2 }} element={details ?? order} />
+      </AccordionSummary>
+      {details != null ? (
+        <>
+          <AccordionDetails>
+            <OrderItemsTable
+              items={details.items}
+              editable={details.state === "PENDING"}
+              onSelect={setSelected}
+            />
+          </AccordionDetails>
+          <AccordionActions>
+            {details.state === "PENDING" ? (
+              <Button variant="outlined" color="error" onClick={doCancel}>
+                Cancel order
+              </Button>
+            ) : null}
+            <StatusButton />
+          </AccordionActions>
+        </>
+      ) : (
+        <AccordionDetails
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: 100,
+          }}
+        >
+          <CircularProgress color="secondary" />
+        </AccordionDetails>
+      )}
+    </Accordion>
+  );
+};
+
+export default OrderAccordion;

package/src/extensions/fulfillment/components/order/OrderItemsTable.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+
+import Checkbox from "@mui/material/Checkbox";
+import Input from "@mui/material/Input";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+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 { OrderItem } from "../../types/order";
+
+export interface ShipmentItemsTableProps {
+  items: OrderItem[];
+  editable?: boolean;
+  onSelect?: (selected: OrderItem[]) => void;
+}
+
+const ShipmentItemsTable: React.FC<ShipmentItemsTableProps> = ({
+  items,
+  editable,
+  onSelect,
+}) => {
+  const [selected, setSelected] = React.useState<OrderItem[]>([]);
+
+  const toggleSelectAll = (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    setSelected(checked ? items : []);
+  };
+
+  const toggleItem = (item: OrderItem, checked: boolean) => {
+    const index = selected.map(({ code }) => code).indexOf(item.code);
+
+    if (checked && index === -1) {
+      setSelected([...selected, item]);
+    } else {
+      const unselected = [...selected];
+      unselected.splice(index, 1);
+      setSelected(unselected);
+    }
+  };
+
+  const itemQuantityChange = (item: OrderItem) => {
+    const index = selected.map(({ code }) => code).indexOf(item.code);
+    const changed = [...selected];
+    changed[index] = item;
+    setSelected(changed);
+  };
+
+  React.useEffect(() => {
+    if (onSelect !== undefined) {
+      onSelect(selected);
+    }
+  }, [onSelect, selected]);
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {editable ? (
+              <TableCell align="left" padding="checkbox">
+                <Checkbox
+                  color="secondary"
+                  indeterminate={
+                    selected.length > 0 && selected.length < items.length
+                  }
+                  checked={
+                    items.length !== 0 && selected.length === items.length
+                  }
+                  onChange={toggleSelectAll}
+                  disabled={items.length === 0}
+                />
+              </TableCell>
+            ) : null}
+            <TableCell align="left">Name</TableCell>
+            <TableCell align="left">Reference</TableCell>
+            <TableCell align="right">Quantity</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {items.map((item) => {
+            const isSelected = selected
+              .map(({ code }) => code)
+              .includes(item.code);
+            return (
+              <TableRow key={item.code}>
+                {editable ? (
+                  <TableCell align="left" padding="checkbox">
+                    <Checkbox
+                      color="secondary"
+                      checked={isSelected}
+                      onChange={(_, checked) => toggleItem(item, checked)}
+                    />
+                  </TableCell>
+                ) : null}
+                <TableCell align="left">{item.name}</TableCell>
+                <TableCell align="left">{item.code}</TableCell>
+                <TableCell align="right">
+                  {editable ? (
+                    <Input
+                      type="number"
+                      defaultValue={item.quantity}
+                      inputProps={{ min: 0, max: item.quantity }}
+                      disabled={!isSelected}
+                      onChange={(event) =>
+                        itemQuantityChange({
+                          ...item,
+                          quantity: parseInt(event.target.value),
+                        })
+                      }
+                    />
+                  ) : (
+                    item.quantity
+                  )}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default ShipmentItemsTable;

package/src/extensions/fulfillment/components/order/OrderStateChip.tsx

@@ -0,0 +1,79 @@
+import {
+  Cancel,
+  CheckCircle,
+  LocalShipping,
+  NewReleases,
+  VolunteerActivism,
+} from "@mui/icons-material";
+import Chip, { ChipProps } from "@mui/material/Chip";
+import useTheme from "@mui/material/styles/useTheme";
+import React, { useMemo } from "react";
+import { OrderStateType } from "../../types/order";
+
+type OrderStateChipProps<T> = {
+  element: T;
+} & ChipProps;
+
+const OrderStateChip = <T extends { state: OrderStateType }>(
+  props: OrderStateChipProps<T>
+) => {
+  const theme = useTheme();
+  const {
+    element: { state },
+    ...rest
+  } = props;
+
+  const color = useMemo(() => {
+    const colorMap: Record<OrderStateType, ChipProps["color"]> = {
+      PENDING: "default",
+      CANCELLED: "error",
+      CONFIRMED: "info",
+      SENT: "info",
+      IN_TRANSIT: "info",
+      READY_FOR_PICKUP: "primary",
+      DELIVERED: "success",
+    };
+
+    return colorMap[state];
+  }, [state, theme]);
+
+  const label = useMemo(() => {
+    const labelMap: Record<OrderStateType, string> = {
+      PENDING: "NEW",
+      CANCELLED: "CANCELLED",
+      CONFIRMED: "CONFIRMED",
+      SENT: "SENT",
+      IN_TRANSIT: "IN TRANSIT",
+      READY_FOR_PICKUP: "READY FOR PICKUP",
+      DELIVERED: "DELIVERED",
+    };
+
+    return labelMap[state];
+  }, [state, theme]);
+
+  const icon = useMemo(() => {
+    const iconMap: Record<OrderStateType, JSX.Element> = {
+      PENDING: <NewReleases fontSize="small" />,
+      CANCELLED: <Cancel fontSize="small" />,
+      CONFIRMED: <CheckCircle fontSize="small" />,
+      SENT: <LocalShipping fontSize="small" />,
+      IN_TRANSIT: <LocalShipping fontSize="small" />,
+      READY_FOR_PICKUP: <VolunteerActivism fontSize="small" />,
+      DELIVERED: <CheckCircle fontSize="small" />,
+    };
+
+    return iconMap[state];
+  }, [state, theme]);
+
+  return (
+    <Chip
+      {...rest}
+      sx={{ ...(rest.sx ?? {}), paddingLeft: 0.75 }}
+      label={label}
+      color={color}
+      icon={icon}
+    />
+  );
+};
+
+export default OrderStateChip;

package/src/extensions/fulfillment/index.tsx

@@ -1,6 +1,6 @@
 import { OpenAPI } from "openapi-types";
 
-import LocalShippingOutlinedIcon from "@mui/icons-material/LocalShippingOutlined";
+import StoreIcon from "@mui/icons-material/Store";
 
 import { RouterExtension } from "../../router/Router";
 import { NavOverrides, PageComponent } from "../../types";
@@ -9,13 +9,27 @@ const routes: Record<
   string,
   Record<
     string,
-    { page: () => Promise<PageComponent<any>>; request?: OpenAPI.Request }
+    {
+      page: () => Promise<PageComponent<any>>;
+      request?: OpenAPI.Request;
+      defaultRequest?: OpenAPI.Request;
+    }
   >
 > = {
-  "shipment": {
-    "list": {
+  order: {
+    list: {
       page: async () => (await import("./pages/order/list")).default,
-      request: { query: { destination_type: "STORE" } },
+      request: {
+        query: {
+          has_shipment: "false",
+          destination_type: "STORE",
+        },
+      },
+      defaultRequest: {
+        query: {
+          state: "PENDING",
+        },
+      },
     },
   },
   // "recipient": {
@@ -29,7 +43,11 @@ export const router: RouterExtension = {
     const hit = routes[route.view]?.[route.action];
 
     if (hit?.page != null) {
-      return { page: hit.page(), request: hit.request };
+      return {
+        page: hit.page(),
+        request: hit.request,
+        defaultRequest: hit.defaultRequest,
+      };
     }
 
     return undefined;
@@ -37,8 +55,8 @@ export const router: RouterExtension = {
 };
 
 export const navigation: NavOverrides = {
-  "fulfillment.shipment:list": {
-    icon: LocalShippingOutlinedIcon,
-    title: "Orders",
+  "fulfillment.order:list": {
+    icon: StoreIcon,
+    title: "Store Orders",
   },
 } as const;

package/src/extensions/fulfillment/pages/order/list.tsx

@@ -1,59 +1,43 @@
 import React from "react";
 
-import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
-import StoreOutlinedIcon from "@mui/icons-material/StoreOutlined";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import Grid from "@mui/material/Grid";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import Box from "@mui/system/Box";
 
 import { TitleBar } from "../../../../components/TitleBar";
 import Content from "../../../../containers/Content";
 import { useRouter } from "../../../../contexts/RouterContext";
 import { PageComponent } from "../../../../types";
 import { SearchBar, SearchInput } from "../../../pos/components/SearchBar";
-import { ShipmentAccordion } from "../../components/ShipmentAccordion";
-import { ShipmentListItem } from "../../types/shipment";
 import { LimitOffset } from "../../types/util";
+import { useSearchParams } from "react-router-dom";
+import { Typography } from "@mui/material";
+import OrderAccordion from "../../components/order/OrderAccordion";
+import { OrderListItem } from "../../types/order";
 
-const ShipmentListPage: PageComponent<LimitOffset<ShipmentListItem>> = (
-  {
-    data: {
-      next: _next,
-      previous: _previous,
-      results,
-    },
-  },
-) => {
+const ShipmentListPage: PageComponent<LimitOffset<OrderListItem>> = ({
+  data: { next: _next, previous: _previous, results },
+}) => {
   const theme = useTheme();
-  const { navigate, getCurrent } = useRouter();
+  const { navigate } = useRouter();
   const searchParams = new URLSearchParams(location.search);
-  const [filterOnReady, setFilterOnReady] = React.useState<
-    "NOT_PACKED" | "READY_FOR_PICKUP"
-  >("NOT_PACKED");
-  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 filterOnReady = useSearchParams()[0].get("state") ?? "PENDING";
   const [initial, setInitial] = React.useState(true);
 
   const doSearch = (event?: React.FormEvent<HTMLFormElement>) => {
     event?.preventDefault();
     navigate(undefined, {
-      query: [
-        ...searchInputs.map((v) => Object.entries(v)[0]),
-        ["destination_type", "STORE"],
-      ],
+      query: searchInputs.map((v) => Object.entries(v)[0]),
     });
   };
 
@@ -67,7 +51,7 @@ const ShipmentListPage: PageComponent<LimitOffset<ShipmentListItem>> = (
 
   return (
     <>
-      <TitleBar title={getCurrent()?.route.title ?? "Orders"} />
+      <TitleBar title="Store Orders" />
       <Stack
         sx={{
           width: "100%",
@@ -82,26 +66,24 @@ const ShipmentListPage: PageComponent<LimitOffset<ShipmentListItem>> = (
         component="form"
         onSubmit={doSearch}
       >
-        <SearchBar
-          defaultValue={searchInputs}
-          onChange={setSearchInputs}
-        />
+        <SearchBar defaultValue={searchInputs} onChange={setSearchInputs} />
         <Stack
           direction="row"
           sx={{ paddingTop: 1, justifyContent: "space-between" }}
         >
           <Tabs
             sx={{ paddingBottom: -2 }}
-            indicatorColor="secondary"
-            textColor="secondary"
-            value={filterOnReady}
-            onChange={(_, value) => setFilterOnReady(value)}
+            value={searchInputs.length == 0 ? filterOnReady : null}
+            onChange={(_, value) =>
+              navigate(undefined, {
+                query: { state: value },
+              })
+            }
           >
-            <Tab value={"NOT_PACKED"} label="Not packed" />
-            <Tab value={"READY_FOR_PICKUP"} label="Ready for pickup" />
+            <Tab value={"PENDING"} label="New orders" />
+            {/* <Tab value={"READY_FOR_PICKUP"} label="Ready for pickup" /> */}
           </Tabs>
-          {
-            /* TODO: Filter on destination type if that is ever needed for the CAS view
+          {/* TODO: Filter on destination type if that is ever needed for the CAS view
             <ToggleButtonGroup
               exclusive={true}
               size="small"
@@ -121,18 +103,25 @@ const ShipmentListPage: PageComponent<LimitOffset<ShipmentListItem>> = (
                 All
               </ToggleButton>
             </ToggleButtonGroup>
-          */
-          }
+          */}
         </Stack>
       </Stack>
       <Content>
         <Grid item xs={12}>
           <Stack gap={1}>
-            {results.map((shipment) => (
-              <ShipmentAccordion
-                key={shipment.shipment_reference}
-                shipment={shipment}
-              />
+            {results.length === 0 ? (
+              <Typography
+                sx={{
+                  color: theme.palette.grey[600],
+                  margin: "0 auto",
+                }}
+                align="center"
+              >
+                Empty result
+              </Typography>
+            ) : null}
+            {results.map((order) => (
+              <OrderAccordion key={order.shipment_reference} order={order} />
             ))}
           </Stack>
         </Grid>