bananas-commerce-admin 0.3.21 → 0.3.22

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

@@ -1,209 +0,0 @@
-import React from "react";
-
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { LoadingButton, LoadingButtonProps } from "@mui/lab";
-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 { useSnackbar } from "notistack";
-
-import { useApi } from "../../../contexts/ApiContext";
-import { formatPurchaseNumber } from "../../../util/format_purchase_number";
-import { ShipmentDetail, ShipmentItem, ShipmentListItem } from "../types/shipment";
-import { ShipmentDestinationIcon } from "./ShipmentDestinationIcon";
-import { ShipmentItemsTable } from "./ShipmentItemsTable";
-
-interface ShipmentAccordionProps {
-  shipment: ShipmentListItem;
-}
-
-export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = ({ shipment }) => {
-  const api = useApi();
-  const { enqueueSnackbar } = useSnackbar();
-  const [details, setDetails] = React.useState<ShipmentDetail | null>(null);
-  const [buttonsLoading, setButtonsLoading] = React.useState(false);
-  const [selected, setSelected] = React.useState<ShipmentItem[]>([]);
-  const title = [
-    formatPurchaseNumber(shipment.purchase_number),
-    shipment.name,
-    shipment.email,
-    shipment.phone,
-  ]
-    .filter((entry) => entry != null)
-    .join(" • ");
-
-  const loadDetails = () => {
-    setDetails(null);
-    api.operations["fulfillment.shipment:detail"]
-      .call({
-        params: {
-          shipment_reference: shipment.shipment_reference,
-        },
-      })
-      .then(async (response) => setDetails(await response.json()));
-  };
-
-  const markAsArrived = () => {
-    setButtonsLoading(true);
-    api.operations["fulfillment.shipment:arrived"]
-      .call({
-        params: { shipment_reference: shipment.shipment_reference },
-        body: selected,
-      })
-      .then((response) => {
-        if (response.ok) {
-          enqueueSnackbar("Successfully marked shipment items as arrived!", {
-            variant: "success",
-          });
-        } else {
-          enqueueSnackbar("Failed to mark shipment items as arrived, view console for more info", {
-            variant: "error",
-          });
-          throw response;
-        }
-      })
-      .finally(() => {
-        setButtonsLoading(false);
-        loadDetails();
-      });
-  };
-
-  const markAsDelivered = () => {
-    setButtonsLoading(true);
-    api.operations["fulfillment.shipment:delivered"]
-      .call({
-        params: { shipment_reference: shipment.shipment_reference },
-      })
-      .then((response) => {
-        if (response.ok) {
-          enqueueSnackbar("Successfully marked shipment as delivered!", {
-            variant: "success",
-          });
-        } else {
-          enqueueSnackbar("Failed to mark shipment as delivered, view console for more info", {
-            variant: "error",
-          });
-          throw response;
-        }
-      })
-      .finally(() => {
-        setButtonsLoading(false);
-        loadDetails();
-      });
-  };
-
-  const doCancel = () => {
-    api.operations["fulfillment.shipment:cancel"]
-      .call({
-        params: { shipment_reference: shipment.shipment_reference },
-      })
-      .then((response) => {
-        if (response.ok) {
-          enqueueSnackbar("Successfully cancelled shipment!", {
-            variant: "success",
-          });
-        } else {
-          enqueueSnackbar("Failed to cancel shipment, view console for more info", {
-            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 (details.date_delivered || details.date_cancelled) {
-      return null;
-    }
-
-    if (!details.date_arrived_at_destination) {
-      props.disabled ||= selected.length === 0;
-      return (
-        <LoadingButton {...props} onClick={markAsArrived}>
-          Ready for pickup
-        </LoadingButton>
-      );
-    }
-
-    if (details.date_arrived_at_destination) {
-      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>
-        <ShipmentDestinationIcon
-          sx={{ marginY: "auto", marginX: 1 }}
-          type={shipment.destination_type}
-        />
-      </AccordionSummary>
-      {details != null ? (
-        <>
-          <AccordionDetails>
-            <ShipmentItemsTable
-              items={details.items}
-              editable={
-                !details.date_confirmed &&
-                !details.date_cancelled &&
-                !details.date_arrived_at_destination
-              }
-              onSelect={setSelected}
-            />
-          </AccordionDetails>
-          <AccordionActions>
-            {!details.date_confirmed && !details.date_cancelled ? (
-              <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>
-  );
-};

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

@@ -1,170 +0,0 @@
-import React from "react";
-
-import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import CardHeader from "@mui/material/CardHeader";
-import Checkbox from "@mui/material/Checkbox";
-import Input from "@mui/material/Input";
-import { useTheme } from "@mui/material/styles";
-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 Typography from "@mui/material/Typography";
-
-import { useSnackbar } from "notistack";
-
-import { useApi } from "../../../contexts/ApiContext";
-import { Shipment, ShipmentItem } from "../types/shipment";
-
-export interface ShipmentItemsCardProps {
-  shipment: Shipment;
-}
-
-export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = ({ shipment }) => {
-  const theme = useTheme();
-  const api = useApi();
-  const { enqueueSnackbar } = useSnackbar();
-  const [selected, setSelected] = React.useState<ShipmentItem[]>([]);
-  const [loading, setLoading] = React.useState(false);
-  const [disabled, setDisabled] = React.useState(
-    false /* "date_arrived_at_destination" in shipment && shipment.date_arrived_at_destination != null */
-  );
-
-  const toggleSelectAll = (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
-    setSelected(checked ? shipment.items : []);
-  };
-
-  const toggleItem = (item: ShipmentItem, 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: ShipmentItem) => {
-    const index = selected.map(({ code }) => code).indexOf(item.code);
-    const changed = [...selected];
-    changed[index] = item;
-    setSelected(changed);
-  };
-
-  const markAsArrived = () => {
-    setLoading(true);
-    api.operations["fulfillment.shipment:arrived"]
-      .call({
-        params: { shipment_reference: shipment.shipment_reference },
-        body: selected,
-      })
-      .then((response) => {
-        if (response.ok) {
-          enqueueSnackbar("Successfully marked shipment items as arrived!", {
-            variant: "success",
-          });
-          setDisabled(true);
-        } else {
-          enqueueSnackbar("Failed to mark order as ready for pickup", {
-            variant: "error",
-          });
-          throw response;
-        }
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  };
-
-  return (
-    <Card>
-      <CardHeader
-        title={
-          <Typography variant="h6">
-            <b>Items</b>
-          </Typography>
-        }
-        avatar={<Inventory2OutlinedIcon />}
-        sx={{
-          borderBottomWidth: 1,
-          borderBottomStyle: "solid",
-          borderBottomColor: theme.palette.divider,
-        }}
-      />
-      <CardContent>
-        <TableContainer>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell align="left" padding="checkbox">
-                  <Checkbox
-                    color="secondary"
-                    indeterminate={selected.length > 0 && selected.length < shipment.items.length}
-                    checked={
-                      shipment.items.length !== 0 && selected.length === shipment.items.length
-                    }
-                    onChange={toggleSelectAll}
-                    disabled={disabled || shipment.items.length === 0}
-                  />
-                </TableCell>
-                <TableCell align="left">Reference</TableCell>
-                <TableCell align="right">Quantity</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {shipment.items.map((item) => {
-                const isSelected = selected.map(({ code }) => code).includes(item.code);
-                return (
-                  <TableRow key={item.code}>
-                    <TableCell align="left" padding="checkbox">
-                      <Checkbox
-                        disabled={disabled}
-                        color="secondary"
-                        checked={isSelected}
-                        onChange={(_, checked) => toggleItem(item, checked)}
-                      />
-                    </TableCell>
-                    <TableCell align="left">{item.code}</TableCell>
-                    <TableCell align="right">
-                      <Input
-                        type="number"
-                        defaultValue={item.quantity}
-                        inputProps={{ min: 0, max: item.quantity }}
-                        disabled={disabled || !isSelected}
-                        onChange={(event) =>
-                          itemQuantityChange({
-                            code: item.code,
-                            quantity: parseInt(event.target.value),
-                          })
-                        }
-                      />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </CardContent>
-      <CardActions sx={{ justifyContent: "end" }}>
-        <LoadingButton
-          variant="contained"
-          color="secondary"
-          loading={loading}
-          disabled={disabled || loading || selected.length === 0}
-          onClick={markAsArrived}
-        >
-          Mark as arrived
-        </LoadingButton>
-      </CardActions>
-    </Card>
-  );
-};

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

@@ -1,116 +0,0 @@
-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 { ShipmentItem } from "../types/shipment";
-
-export interface ShipmentItemsTableProps {
-  items: ShipmentItem[];
-  editable?: boolean;
-  onSelect?: (selected: ShipmentItem[]) => void;
-}
-
-export const ShipmentItemsTable: React.FC<ShipmentItemsTableProps> = ({
-  items,
-  editable,
-  onSelect,
-}) => {
-  const [selected, setSelected] = React.useState<ShipmentItem[]>([]);
-
-  const toggleSelectAll = (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
-    setSelected(checked ? items : []);
-  };
-
-  const toggleItem = (item: ShipmentItem, 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: ShipmentItem) => {
-    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">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.code}</TableCell>
-                <TableCell align="right">
-                  {editable ? (
-                    <Input
-                      type="number"
-                      defaultValue={item.quantity}
-                      inputProps={{ min: 0, max: item.quantity }}
-                      disabled={!isSelected}
-                      onChange={(event) =>
-                        itemQuantityChange({
-                          code: item.code,
-                          quantity: parseInt(event.target.value),
-                        })
-                      }
-                    />
-                  ) : (
-                    item.quantity
-                  )}
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};

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

@@ -1,32 +0,0 @@
-import React from "react";
-
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
-
-import { useRouter } from "../../../contexts/RouterContext";
-import { ShipmentListItem } from "../types/shipment";
-
-interface ShipmentRowProps {
-  shipment: ShipmentListItem;
-}
-
-export const ShipmentRow: React.FC<ShipmentRowProps> = ({ shipment }) => {
-  const { navigate } = useRouter();
-
-  const onClick = () => {
-    navigate(`fulfillment.shipment:detail`, {
-      params: {
-        shipment_reference: shipment.shipment_reference,
-      },
-    });
-  };
-
-  return (
-    <TableRow onClick={onClick} hover>
-      <TableCell>{shipment.shipment_reference}</TableCell>
-      <TableCell>{shipment.purchase_number}</TableCell>
-      <TableCell>{shipment.email}</TableCell>
-      <TableCell>{shipment.phone ?? "-"}</TableCell>
-    </TableRow>
-  );
-};