bananas-commerce-admin 0.2.2 → 0.2.5

package/src/extensions/fulfillment/pages/shipment/detail.tsx

@@ -22,9 +22,7 @@ import Menu from "@mui/material/Menu";
 import { useApi } from "../../../../contexts/ApiContext";
 import { useSnackbar } from "notistack";
 
-const ShipmentDetailPage: PageComponent<ShipmentDetail> = (
-  { data },
-) => {
+const ShipmentDetailPage: PageComponent<ShipmentDetail> = ({ data }) => {
   const api = useApi();
   const { enqueueSnackbar } = useSnackbar();
   const { getCurrent } = useRouter();
@@ -43,48 +41,52 @@ const ShipmentDetailPage: PageComponent<ShipmentDetail> = (
   };
 
   const markAsCanceled = () => {
-    api.operations["fulfillment.shipment:cancel"].call({
-      params: { shipment_reference: shipment.shipment_reference },
-    }).then((response) => {
-      if (response.ok) {
-        enqueueSnackbar("Successfully canceled shipment!", {
-          variant: "success",
-        });
-      } else {
-        enqueueSnackbar(
-          "Failed to cancel shipment, view console for more info",
-          {
-            variant: "error",
-          },
-        );
-        throw response;
-      }
-    });
+    api.operations["fulfillment.shipment:cancel"]
+      .call({
+        params: { shipment_reference: shipment.shipment_reference },
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Successfully canceled shipment!", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar(
+            "Failed to cancel shipment, view console for more info",
+            {
+              variant: "error",
+            }
+          );
+          throw response;
+        }
+      });
   };
 
   const markAsDelivered = () => {
-    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;
-      }
-    });
+    api.operations["fulfillment.shipment:delivered"]
+      .call({
+        params: { shipment_reference: shipment.shipment_reference },
+      })
+      .then((response) => {
+        if (response.ok) {
+          enqueueSnackbar("Order is now ready for pickup", {
+            variant: "success",
+          });
+        } else {
+          enqueueSnackbar(
+            "Failed to mark shipment as delivered, view console for more info",
+            {
+              variant: "error",
+            }
+          );
+          throw response;
+        }
+      });
   };
 
   return (
     <>
-      <TitleBar back title={`Shipment ${shipment.shipment_reference}`}>
+      <TitleBar back title={`Purchase number ${shipment.shipment_reference}`}>
         <IconButton
           aria-label="more"
           aria-expanded={open ? "true" : undefined}
@@ -93,11 +95,7 @@ const ShipmentDetailPage: PageComponent<ShipmentDetail> = (
         >
           <MoreVertIcon />
         </IconButton>
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-        >
+        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
           <MenuItem
             key={"delivered"}
             onClick={() => {
@@ -124,9 +122,7 @@ const ShipmentDetailPage: PageComponent<ShipmentDetail> = (
             <CardHeader
               title={
                 <Typography variant="h6">
-                  <b>
-                    Info
-                  </b>
+                  <b>Info</b>
                 </Typography>
               }
               avatar={<PersonIcon />}
@@ -149,15 +145,11 @@ const ShipmentDetailPage: PageComponent<ShipmentDetail> = (
             </CardContent>
           </Card>
         </Grid>
-        {shipment.items.length !== 0
-          ? (
-            <Grid item sm={12} md={6}>
-              <ShipmentItemsCard
-                shipment={shipment}
-              />
-            </Grid>
-          )
-          : null}
+        {shipment.items.length !== 0 ? (
+          <Grid item sm={12} md={6}>
+            <ShipmentItemsCard shipment={shipment} />
+          </Grid>
+        ) : null}
       </Content>
     </>
   );

package/src/extensions/fulfillment/types/order.ts

@@ -0,0 +1,53 @@
+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/src/extensions/pos/components/PurchaseRow.tsx

@@ -3,15 +3,13 @@ import TableRow from "@mui/material/TableRow";
 import React from "react";
 import { useRouter } from "../../../contexts/RouterContext";
 import { formatPurchaseNumber } from "../../../util/format_purchase_number";
-import { Purchase } from "../types/purchase";
+import { PurchaseDetail } from "../types/purchase";
 
 interface PurchaseRowProps {
-  purchase: Purchase;
+  purchase: PurchaseDetail;
 }
 
-export const PurchaseRow: React.FC<PurchaseRowProps> = ({
-  purchase,
-}) => {
+export const PurchaseRow: React.FC<PurchaseRowProps> = ({ purchase }) => {
   const { navigate } = useRouter();
 
   const onClick = () => {

package/src/extensions/pos/components/ReceiptCard.tsx

@@ -13,64 +13,75 @@ import TableCell, { tableCellClasses } from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import { Line, PurchaseDetail } from "../types/purchase";
 
 import { Receipt, ReceiptLine } from "../types/receipt";
 import { ReceiptTable } from "./ReceiptTable";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Button from "@mui/material/Button";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import { useDialog } from "../../../contexts/DialogContext";
 
 interface ReceiptCardProps {
-  receipt: Receipt;
-  refund?: (lines: ReceiptLine[]) => void;
+  purchase: PurchaseDetail;
+  refund?: (lines: Line[]) => void;
 }
 
 interface ReceiptPriceRowProps {
   title: string;
   price: string;
+  currency: string;
 }
 
-const ReceiptPriceRow: React.FC<ReceiptPriceRowProps> = ({ title, price }) => {
+const ReceiptPriceRow: React.FC<ReceiptPriceRowProps> = ({
+  title,
+  price,
+  currency,
+}) => {
   return (
     <TableRow>
       <TableCell sx={{ whiteSpace: "nowrap" }} align="right">
-        <strong>
-          {title}
-        </strong>
+        <strong>{title}</strong>
       </TableCell>
       <TableCell sx={{ whiteSpace: "nowrap", paddingLeft: 2 }} align="right">
-        {`${price} SEK`}
+        {price} {currency}
       </TableCell>
     </TableRow>
   );
 };
 
 export const ReceiptCard: React.FC<ReceiptCardProps> = ({
-  receipt,
+  purchase,
   refund,
 }) => {
   const theme = useTheme();
 
   const [editing, setEditing] = React.useState(false);
-  const [selected, setSelected] = React.useState<ReceiptLine[]>([]);
-  const [refundable, setRefundable] = React.useState(receipt.intention === 1);
+  const [selected, setSelected] = React.useState<Line[]>([]);
+  const openDialog = useDialog();
 
   return (
-    <Card>
+    <Card sx={{ width: "100%" }}>
       <CardHeader
         title={
           <Typography variant="h6">
-            <b>
-              Receipt
-            </b>
+            <b>Receipt</b>
           </Typography>
         }
         avatar={<ReceiptIcon />}
         action={
           <FormControlLabel
-            disabled={!refundable}
+            disabled={
+              !purchase.accounts || purchase.accounts.captured === "0.00"
+            }
             control={
               <Switch
-                value={editing}
+                checked={editing}
                 onChange={(_, checked) => setEditing(checked)}
                 color="secondary"
               />
@@ -86,15 +97,15 @@ export const ReceiptCard: React.FC<ReceiptCardProps> = ({
       />
       <CardContent>
         <ReceiptTable
-          lines={receipt.lines}
+          currency={purchase.currency}
+          lines={purchase.lines}
           editable={editing}
           onSelect={setSelected}
         />
-        <Divider />
         <TableContainer
           sx={{
             paddingTop: theme.spacing(2),
-            paddingX: theme.spacing(4),
+            paddingX: theme.spacing(2),
           }}
         >
           <Table
@@ -108,41 +119,76 @@ export const ReceiptCard: React.FC<ReceiptCardProps> = ({
             <TableBody sx={{ border: "none" }}>
               <TableRow>
                 <TableCell align="left" sx={{ width: "100%" }}>
-                  {editing
-                    ? (
-                      <Button
-                        variant="contained"
-                        color="error"
-                        disabled={selected.length === 0}
-                        onClick={() => {
+                  {editing ? (
+                    <Button
+                      variant="contained"
+                      color="error"
+                      disabled={selected.length === 0}
+                      onClick={async () => {
+                        if (
+                          await openDialog(
+                            "Are you sure?",
+                            "This will refund the selected quantity / amount to the customer and cannot be reversed"
+                          )
+                        ) {
                           refund?.(selected);
-                          setRefundable(false);
                           setEditing(false);
-                        }}
-                      >
-                        Refund
-                      </Button>
-                    )
-                    : null}
+                        }
+                      }}
+                    >
+                      Refund
+                    </Button>
+                  ) : null}
                 </TableCell>
-
                 <TableCell align="right">
-                  {receipt.total_discount_amount !== "0.00"
-                    ? (
-                      <ReceiptPriceRow
-                        title="Discount"
-                        price={receipt.total_discount_amount}
-                      />
-                    )
-                    : null}
                   <ReceiptPriceRow
-                    title="Tax"
-                    price={receipt.total_tax_amount}
+                    title="Total"
+                    price={purchase.total_debit_amount}
+                    currency={purchase.currency}
                   />
+                  {purchase.total_discount_amount !== "0.00" ? (
+                    <ReceiptPriceRow
+                      title="Discount"
+                      price={purchase.total_discount_amount}
+                      currency={purchase.currency}
+                    />
+                  ) : null}
                   <ReceiptPriceRow
-                    title="Total"
-                    price={receipt.total_amount}
+                    title="Tax"
+                    price={purchase.total_tax_amount}
+                    currency={purchase.currency}
                   />
+                  {(() => {
+                    if (!purchase.accounts) {
+                      return null;
+                    }
+
+                    return (
+                      <>
+                        {purchase.accounts.reserved !== "0.00" ? (
+                          <ReceiptPriceRow
+                            title="Reserved"
+                            price={purchase.accounts.reserved}
+                            currency={purchase.currency}
+                          />
+                        ) : null}
+                        {purchase.accounts.captured !== "0.00" ? (
+                          <ReceiptPriceRow
+                            title="Captured"
+                            price={purchase.accounts.captured}
+                            currency={purchase.currency}
+                          />
+                        ) : null}
+                        {purchase.accounts.reverted !== "0.00" ? (
+                          <ReceiptPriceRow
+                            title="Refunded/Cancelled"
+                            price={purchase.accounts.reverted}
+                            currency={purchase.currency}
+                          />
+                        ) : null}
+                      </>
+                    );
+                  })()}
                 </TableCell>
               </TableRow>
             </TableBody>

package/src/extensions/pos/components/ReceiptLine.tsx

@@ -7,6 +7,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Checkbox from "@mui/material/Checkbox";
 
 interface ReceiptLineProps {
+  currency: string;
   line: ReceiptLineType;
   editable?: boolean;
   onSelect?: (selected: boolean) => void;
@@ -14,6 +15,7 @@ interface ReceiptLineProps {
 
 export const ReceiptLine: React.FC<ReceiptLineProps> = ({
   line,
+  currency,
   editable,
   onSelect,
 }) => {
@@ -38,17 +40,16 @@ export const ReceiptLine: React.FC<ReceiptLineProps> = ({
         secondary={line.reference}
       />
       <Tooltip title="Quantity">
-        <ListItemText
-          sx={{ width: "20%" }}
-          primary={`${line.quantity} st`}
-        />
+        <ListItemText sx={{ width: "20%" }} primary={`${line.quantity} st`} />
       </Tooltip>
       <ListItemText
         disableTypography
         sx={{ width: "30%" }}
         primary={
           <Tooltip title="Price">
-            <Typography>{`${line.total_amount} SEK`}</Typography>
+            <Typography>
+              {line.total_amount} {currency}
+            </Typography>
           </Tooltip>
         }
       />