bananas-commerce-admin 0.2.2 → 0.2.4

package/src/containers/PageLoader.tsx

@@ -22,9 +22,15 @@ export interface PageLoaderProps {
   route: RouteInfo;
   page: PageComponent | Promise<PageComponent>;
   request?: OpenAPI.Request;
+  defaultRequest?: OpenAPI.Request;
 }
 
-const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
+const PageLoader: React.FC<PageLoaderProps> = ({
+  route,
+  page,
+  request,
+  defaultRequest,
+}) => {
   const Page = React.lazy(async () => ({
     default: await Promise.resolve(page),
   }));
@@ -37,17 +43,29 @@ const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
 
   React.useEffect(() => {
     if (data === null) {
-      api.operations[route.id].call({
-        params: { ...params, ...request?.params },
-        query: new URLSearchParams([
-          ...searchParams.entries(),
-          ...(request?.query != null
-            ? request.query instanceof URLSearchParams
-              ? request.query.entries()
-              : Object.entries(request.query)
-            : []),
-        ]),
-      })
+      const query =
+        Array.from(searchParams.entries()).length == 0
+          ? defaultRequest?.query != null
+            ? defaultRequest.query instanceof URLSearchParams
+              ? defaultRequest.query.entries()
+              : Object.entries(defaultRequest.query)
+            : []
+          : searchParams.entries();
+
+      api.operations[route.id]
+        .call({
+          params: { ...params, ...request?.params },
+          query: new URLSearchParams([
+            ...Array.from(query),
+            ...Array.from(
+              request?.query != null
+                ? request.query instanceof URLSearchParams
+                  ? request.query.entries()
+                  : Object.entries(request.query)
+                : []
+            ),
+          ]),
+        })
         .then(async (response) => {
           if (response.ok) {
             setData(await response.json());
@@ -55,8 +73,8 @@ const PageLoader: React.FC<PageLoaderProps> = ({ route, page, request }) => {
             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/UserContext.tsx

@@ -19,18 +19,18 @@ interface UserContext {
   changePassword: (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string,
+    newPassword2: string
   ) => Promise<void>;
 }
 
 const UserContext = React.createContext<UserContext>(
-  undefined as unknown as UserContext,
+  undefined as unknown as UserContext
 );
 export const useUser = () => React.useContext(UserContext);
 
-export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = (
-  { children },
-) => {
+export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
   const api = useApi();
   const [user, setUser] = useLocalStorage("user", null);
 
@@ -62,16 +62,17 @@ export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = (
   const changePassword = async (
     oldPassword: string,
     newPassword1: string,
-    newPassword2: string,
+    newPassword2: string
   ) => {
-    const response = await api?.operations["bananas.change_password:create"]
-      .call({
-        body: {
-          old_password: oldPassword,
-          new_password1: newPassword1,
-          new_password2: newPassword2,
-        },
-      });
+    const response = await api?.operations[
+      "bananas.change_password:create"
+    ].call({
+      body: {
+        old_password: oldPassword,
+        new_password1: newPassword1,
+        new_password2: newPassword2,
+      },
+    });
 
     if (!response.ok) {
       throw new Error("Failed to change password");

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

@@ -26,9 +26,9 @@ interface ShipmentAccordionProps {
   shipment: ShipmentListItem;
 }
 
-export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = (
-  { shipment },
-) => {
+export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = ({
+  shipment,
+}) => {
   const api = useApi();
   const { enqueueSnackbar } = useSnackbar();
   const [details, setDetails] = React.useState<ShipmentDetail | null>(null);
@@ -39,90 +39,106 @@ export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = (
     shipment.name,
     shipment.email,
     shipment.phone,
-  ].filter((entry) => entry != null).join(" • ");
+  ]
+    .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()));
+    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();
-    });
+    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();
-    });
+    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();
-    });
+    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",
@@ -130,11 +146,11 @@ export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = (
       disabled: buttonsLoading,
     };
 
-    if (shipment.date_confirmed || shipment.date_cancelled) {
+    if (details.date_delivered || details.date_cancelled) {
       return null;
     }
 
-    if (!shipment.date_arrived_at_destination) {
+    if (!details.date_arrived_at_destination) {
       props.disabled ||= selected.length === 0;
       return (
         <LoadingButton {...props} onClick={markAsArrived}>
@@ -143,7 +159,7 @@ export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = (
       );
     }
 
-    if (shipment.date_arrived_at_destination) {
+    if (details.date_arrived_at_destination) {
       return (
         <LoadingButton {...props} onClick={markAsDelivered}>
           Delivered
@@ -155,60 +171,54 @@ export const ShipmentAccordion: React.FC<ShipmentAccordionProps> = (
   };
 
   return (
-    <Accordion onChange={() => details == null ? loadDetails() : void 0}>
+    <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
+        {/* 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>
+        */}
+        <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={!shipment.date_confirmed &&
-                  !shipment.date_cancelled &&
-                  !shipment.date_arrived_at_destination}
-                onSelect={setSelected}
-              />
-            </AccordionDetails>
-            <AccordionActions>
-              {!shipment.date_confirmed && !shipment.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" />
+      {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/ShipmentCard.tsx

@@ -60,9 +60,7 @@ export const ShipmentCard: React.FC<ShipmentCardProps> = ({ shipment }) => {
           minHeight={100}
         >
           <Box sx={{ width: "100%" }}>
-            <Typography>
-              {shipment.shipment_reference}
-            </Typography>
+            <Typography>{shipment.shipment_reference}</Typography>
             <Typography>
               {shipment.date_sent != null
                 ? dateTimeFormatter.format(new Date(shipment.date_sent))
@@ -77,12 +75,8 @@ export const ShipmentCard: React.FC<ShipmentCardProps> = ({ shipment }) => {
             />
           </Box>
           <Box sx={{ width: "100%" }}>
-            <Typography>
-              {shipment.carrier}
-            </Typography>
-            <Typography>
-              {shipment.tracking_number}
-            </Typography>
+            <Typography>{shipment.carrier}</Typography>
+            <Typography>{shipment.tracking_number}</Typography>
           </Box>
         </Stack>
       </CardActionArea>

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

@@ -25,21 +25,21 @@ export interface ShipmentItemsCardProps {
   shipment: Shipment;
 }
 
-export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
-  { 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 */
+    false /* "date_arrived_at_destination" in shipment && shipment.date_arrived_at_destination != null */
   );
 
   const toggleSelectAll = (
     _: React.ChangeEvent<HTMLInputElement>,
-    checked: boolean,
+    checked: boolean
   ) => {
     setSelected(checked ? shipment.items : []);
   };
@@ -65,27 +65,27 @@ export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
 
   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 shipment items as arrived, view console for more info",
-          {
+    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);
-    });
+          });
+          throw response;
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   return (
@@ -93,9 +93,7 @@ export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
       <CardHeader
         title={
           <Typography variant="h6">
-            <b>
-              Items
-            </b>
+            <b>Items</b>
           </Typography>
         }
         avatar={<Inventory2OutlinedIcon />}
@@ -113,27 +111,27 @@ export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
                 <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}
+                    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>
+                <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,
-                );
+                const isSelected = selected
+                  .map(({ code }) => code)
+                  .includes(item.code);
                 return (
                   <TableRow key={item.code}>
                     <TableCell align="left" padding="checkbox">
@@ -144,9 +142,7 @@ export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
                         onChange={(_, checked) => toggleItem(item, checked)}
                       />
                     </TableCell>
-                    <TableCell align="left">
-                      {item.code}
-                    </TableCell>
+                    <TableCell align="left">{item.code}</TableCell>
                     <TableCell align="right">
                       <Input
                         type="number"
@@ -157,7 +153,8 @@ export const ShipmentItemsCard: React.FC<ShipmentItemsCardProps> = (
                           itemQuantityChange({
                             code: item.code,
                             quantity: parseInt(event.target.value),
-                          })}
+                          })
+                        }
                       />
                     </TableCell>
                   </TableRow>