@springmicro/cart 0.5.13 → 0.5.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.13",
+  "version": "0.5.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.5.13",
+    "@springmicro/utils": "0.5.14",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "596e9fe58eab22df211e097c2058b5cc267fe30c"
+  "gitHead": "0c889259d325d955a7981f8e8975edc42c8b9cf8"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -26,7 +26,8 @@ import { AddressValues } from "./components/Address";
 import { useFormik } from "formik";
 import { postCheckout } from "../utils/api";
 
-async function createOrder(cart, apiBaseUrl) {
+async function createOrder(cart, apiBaseUrl, dev) {
+  dev && console.log("Creating order");
   // If an order has already been created and hasn't been changed, get the previous order.
   if (cart.order && cart.order.id && cart.order.reference) {
     const res = await fetch(
@@ -71,7 +72,8 @@ async function createOrder(cart, apiBaseUrl) {
   return order;
 }
 
-async function getTax(apiBaseUrl, taxProvider, items, v, products) {
+async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
+  dev && console.log("Getting tax");
   const taxable_items = items.filter(
     (i) => i.unit_amount > 0 && products[i.product_id].type !== "DONATION"
   );
@@ -118,6 +120,7 @@ export default function ReviewAndCalculateTaxes({
   onPlacement = undefined,
   CollectExtraInfo = undefined,
   defaultValues = {},
+  dev,
 }) {
   const [formDisabled, setFormDisabled] = useState(true);
   const [formError, setFormError] = useState(undefined);
@@ -133,7 +136,7 @@ export default function ReviewAndCalculateTaxes({
     // status === 0 when this is clicked.
     // Creates an order and calculates tax.
     Promise.all([
-      createOrder(cart, apiBaseUrl),
+      createOrder(cart, apiBaseUrl, dev),
       getTax(
         apiBaseUrl,
         taxProvider,
@@ -141,7 +144,9 @@ export default function ReviewAndCalculateTaxes({
           amount: prices[i.price_id].unit_amount,
           reference: i.name,
         })),
-        values
+        values,
+        products,
+        dev
       ),
     ])
       .then(([order, taxData]) => {
@@ -155,6 +160,7 @@ export default function ReviewAndCalculateTaxes({
   }
 
   async function confirmOrder(values) {
+    dev && console.log("Confirm order");
     setFormError(undefined);
     setFormDisabled(true);
     postCheckout(
@@ -166,9 +172,10 @@ export default function ReviewAndCalculateTaxes({
       invoiceId
     )
       .then((data) => {
+        dev && console.log("Checkout submitted");
         if (data instanceof Response) {
           setFormError(true);
-          alert(JSON.stringify(data));
+          dev && alert(data.statusText);
         } else {
           // success
           setSuccessData(data);
@@ -181,12 +188,13 @@ export default function ReviewAndCalculateTaxes({
           currentUrl.searchParams.set("orderRef", order.reference);
 
           // Update the browser's URL and history without refreshing the page
+          dev && console.log("Checkout success!");
           window.history.pushState({}, "", currentUrl);
         }
         setFormDisabled(false);
       })
-      .catch(() => {
-        // console.log("ERROR");
+      .catch((e) => {
+        dev && console.log("Checkout error", e);
         setFormError(true);
       });
   }
@@ -262,6 +270,7 @@ export default function ReviewAndCalculateTaxes({
         : validationSchemaBase
     ),
     onSubmit: async (v, helpers) => {
+      dev && console.log("Formik submit");
       setFormDisabled(true);
       const values = { ...v };
       if (formDisabled) {
@@ -294,6 +303,9 @@ export default function ReviewAndCalculateTaxes({
         // const res = await submitFunc(values);
         submitFunc(values)
           .then((v) => {})
+          .catch((e) => {
+            dev && console.log("Submit errors", e);
+          })
           .finally(() => {
             setFormDisabled(false);
           });
@@ -325,6 +337,10 @@ export default function ReviewAndCalculateTaxes({
   };
 
   useEffect(() => {
+    dev &&
+      (Object.keys(formik.errors).length > 0
+        ? console.log("Formik errors", formik.errors)
+        : "No formik errors");
     setFormDisabled(Object.keys(formik.errors).length > 0);
   }, [formik.errors]);
 
@@ -342,7 +358,7 @@ export default function ReviewAndCalculateTaxes({
     >
       <CartList
         {...{
-          status,
+          statusState: [status, setStatus],
           cart,
           subtotal,
           tax,
@@ -354,7 +370,7 @@ export default function ReviewAndCalculateTaxes({
           disableProductLink,
           formik,
           formDisabled,
-          formError,
+          formErrorState: [formError, setFormError],
         }}
       />
       {status === 0 && (

package/src/checkout/components/Address.tsx

@@ -177,7 +177,7 @@ export function AddressEmailField({ formik, name, sx }: AddressFieldProps) {
   return (
     <>
       <TextField
-        label={"Email"}
+        label="Billing email"
         sx={{ width: 400, display: "block", ...sx }}
         name={name as string}
         id={name as string}

package/src/checkout/components/CartList.tsx

@@ -7,7 +7,7 @@ function formatPrice(cents) {
 }
 
 export function CartList({
-  status,
+  statusState,
   cart,
   subtotal,
   tax,
@@ -19,8 +19,10 @@ export function CartList({
   disableProductLink,
   formik,
   formDisabled,
-  formError,
+  formErrorState,
 }) {
+  const [status, setStatus] = statusState;
+  const [formError, setFormError] = formErrorState;
   return (
     <form
       style={{ flexGrow: 1 }}
@@ -116,12 +118,6 @@ export function CartList({
                 : subtotal}
             </Typography>
           </Box>
-          {formError && (
-            <Typography color="red">
-              Could not confirm payment. Your card info may have been entered
-              incorrectly.
-            </Typography>
-          )}
           {status === 1 && (
             <Button
               variant="contained"
@@ -133,22 +129,41 @@ export function CartList({
               Confirm Order
             </Button>
           )}
+          {formError && (
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 1,
+                alignItems: "center",
+              }}
+            >
+              <Typography color="red">
+                Could not confirm payment. Your card info may have been entered
+                incorrectly.
+              </Typography>
+              <Button
+                onClick={() => {
+                  setFormError(undefined);
+                  setStatus((i) => i - 1);
+                }}
+                variant="contained"
+              >
+                Back
+              </Button>
+            </Box>
+          )}
           <Box className="checkout-list">
-            {cart.items.map(
-              (p, i) => (
-                console.log(p),
-                (
-                  <CartProductCard
-                    product={products[p.product_id] ?? p}
-                    i={i}
-                    price={prices[p.price_id]}
-                    disableProductLink={disableProductLink}
-                    disableMissingImage={disableMissingImage}
-                    disableModification={status != 0}
-                  />
-                )
-              )
-            )}
+            {cart.items.map((p, i) => (
+              <CartProductCard
+                product={products[p.product_id] ?? p}
+                i={i}
+                price={prices[p.price_id]}
+                disableProductLink={disableProductLink}
+                disableMissingImage={disableMissingImage}
+                disableModification={status != 0}
+              />
+            ))}
           </Box>
         </Box>
       </Box>

package/src/checkout/components/StatusBar.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, IconButton, Typography, Tooltip } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 export function StatusBar({ status, backlink = "" }) {
@@ -11,9 +11,11 @@ export function StatusBar({ status, backlink = "" }) {
       }}
     >
       <Box sx={{ flex: "1 1" }}>
-        <IconButton href={`/${backlink}`}>
-          <ArrowBackIcon />
-        </IconButton>
+        <Tooltip title="Exit checkout">
+          <IconButton href={`/${backlink}`}>
+            <ArrowBackIcon />
+          </IconButton>
+        </Tooltip>
       </Box>
       <div id="status-bar">
         <Typography className="status-text active">PAYMENT DETAILS</Typography>

package/src/checkout/index.tsx

@@ -16,6 +16,7 @@ export default function Checkout({
   disableMissingImage = false,
   CollectExtraInfo,
   defaultValues,
+  dev,
 }: {
   apiBaseUrl: string;
   taxProvider: string;
@@ -24,6 +25,7 @@ export default function Checkout({
   disableMissingImage?: boolean;
   CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
   defaultValues?: Record<string, any>;
+  dev?: boolean;
 }) {
   const store = useStore(cartStore);
   const cart = useMemo(() => JSON.parse(store), [store]);
@@ -32,7 +34,7 @@ export default function Checkout({
   const [products, setProducts] = useState({});
   const [prices, setPrices] = useState({});
   const [subtotal, setSubtotal] = useState("Loading prices...");
-  const taxState = useState({ tax_amount: "TBD" });
+  const taxState = useState<any>({ tax_amount: "TBD" });
   const shipping = 0;
   const discount = 0;
 
@@ -211,6 +213,7 @@ export default function Checkout({
             }}
             CollectExtraInfo={CollectExtraInfo}
             defaultValues={defaultValues}
+            dev={dev}
           />
         )}
         {status === 2 && order !== undefined && (