@springmicro/cart 0.5.13 → 0.5.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.13",
+  "version": "0.5.15",
   "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.15",
     "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": "b830a46f0cb3e6081ed9a4f31861c0d0b66a88f2"
 }

package/src/CartButton.tsx

@@ -140,7 +140,9 @@ function CartModal({
       );
     if (pricesToGet.length === 0) return;
 
-    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(",")}]}`;
+    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
+      ","
+    )}]}`;
     fetch(url, {
       method: "GET",
       headers: {
@@ -212,12 +214,18 @@ function CartModal({
                   {prices === null
                     ? "Price not found."
                     : price
-                      ? `$${(price.unit_amount / 100).toFixed(2)}${
-                          price.recurring
-                            ? `/${price.recurring.interval_count > 1 ? `${price.recurring.interval_count} ` : ""}${price.recurring.interval}${price.recurring.interval_count > 1 ? "s" : ""}`
-                            : ""
-                        }`
-                      : "Loading price..."}
+                    ? `$${(price.unit_amount / 100).toFixed(2)}${
+                        price.recurring
+                          ? `/${
+                              price.recurring.interval_count > 1
+                                ? `${price.recurring.interval_count} `
+                                : ""
+                            }${price.recurring.interval}${
+                              price.recurring.interval_count > 1 ? "s" : ""
+                            }`
+                          : ""
+                      }`
+                    : "Loading price..."}
                 </h3>
               </Box>
               <Tooltip title="Remove from cart">

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -1,5 +1,5 @@
 import "./ReviewCartAndCalculateTaxes.css";
-import { Box, useTheme, useMediaQuery } from "@mui/material";
+import { Box, useTheme, useMediaQuery, Button } from "@mui/material";
 import { setOrder as cartSetOrder } from "../utils/storage";
 import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
 import { CartList } from "./components/CartList";
@@ -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);
@@ -130,10 +133,11 @@ export default function ReviewAndCalculateTaxes({
 
   async function createOrderAndGetTaxes(values) {
     setFormError(undefined);
+    setFormDisabled(true);
     // 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,20 +145,25 @@ export default function ReviewAndCalculateTaxes({
           amount: prices[i.price_id].unit_amount,
           reference: i.name,
         })),
-        values
+        values,
+        products,
+        dev
       ),
     ])
       .then(([order, taxData]) => {
         setTax(taxData);
         setOrder(order);
         setStatus(1);
+        setFormDisabled(false);
       })
       .catch(() => {
         setFormError(true);
+        setFormDisabled(false);
       });
   }
 
   async function confirmOrder(values) {
+    dev && console.log("Confirm order");
     setFormError(undefined);
     setFormDisabled(true);
     postCheckout(
@@ -166,9 +175,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,16 +191,20 @@ 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);
+        setFormDisabled(false);
       });
   }
 
+  const cardRequired = typeof subtotal === "string" || subtotal > 0;
+
   /**
    *
    * AddCard formik data
@@ -254,20 +268,18 @@ export default function ReviewAndCalculateTaxes({
   const formik = useFormik({
     initialValues,
     validationSchema: Yup.object(
-      address
-        ? {
-            ...validationSchemaBase,
-            ...validationSchemaAddress,
-          }
-        : validationSchemaBase
+      cardRequired
+        ? address
+          ? {
+              ...validationSchemaBase,
+              ...validationSchemaAddress,
+            }
+          : validationSchemaBase
+        : {}
     ),
     onSubmit: async (v, helpers) => {
-      setFormDisabled(true);
+      dev && console.log("Formik submit");
       const values = { ...v };
-      if (formDisabled) {
-        setFormDisabled(false);
-        throw new Error("Attempted to submit an invalid form.");
-      }
 
       const submitFunc = status === 0 ? createOrderAndGetTaxes : confirmOrder;
 
@@ -294,8 +306,8 @@ export default function ReviewAndCalculateTaxes({
         // const res = await submitFunc(values);
         submitFunc(values)
           .then((v) => {})
-          .finally(() => {
-            setFormDisabled(false);
+          .catch((e) => {
+            dev && console.log("Submit errors", e);
           });
       } else {
         setFormDisabled(false);
@@ -325,6 +337,11 @@ export default function ReviewAndCalculateTaxes({
   };
 
   useEffect(() => {
+    dev &&
+      (Object.keys(formik.errors).length > 0
+        ? console.log("Formik errors", formik.errors)
+        : console.log("No formik errors"));
+
     setFormDisabled(Object.keys(formik.errors).length > 0);
   }, [formik.errors]);
 
@@ -342,7 +359,7 @@ export default function ReviewAndCalculateTaxes({
     >
       <CartList
         {...{
-          status,
+          statusState: [status, setStatus],
           cart,
           subtotal,
           tax,
@@ -354,7 +371,7 @@ export default function ReviewAndCalculateTaxes({
           disableProductLink,
           formik,
           formDisabled,
-          formError,
+          formErrorState: [formError, setFormError],
         }}
       />
       {status === 0 && (
@@ -363,6 +380,7 @@ export default function ReviewAndCalculateTaxes({
         >
           {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
           <AddCard
+            cardRequired={cardRequired}
             onSubmit={createOrderAndGetTaxes}
             stacked={stacked}
             formData={{

package/src/checkout/components/AddCard.tsx

@@ -55,6 +55,7 @@ export type AddCardProps = {
   };
   stacked?: boolean;
   error?: string;
+  cardRequired?: boolean;
   address?: boolean;
   onSubmit?: (
     values: CreditCardValues & Partial<AddressValues>
@@ -71,6 +72,7 @@ export type AddCardProps = {
 
 export const AddCard = ({
   contact,
+  cardRequired = true,
   error,
   stacked = false,
   address = true,
@@ -102,33 +104,37 @@ export const AddCard = ({
                 }
           }
         >
-          <Cards
-            {...(formik.values as CreditCardValues)}
-            focused={formik.values.focus || "number"}
-          />
-
-          <div>
-            <TextField
-              sx={stacked ? { mt: 2 } : {}}
-              fullWidth
-              type="tel"
-              name="number"
-              label="Card Number"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.number}
-              error={Boolean(formik.touched.number && formik.errors.number)}
-              helperText={formik.touched.number && formik.errors.number}
+          {cardRequired && (
+            <Cards
+              {...(formik.values as CreditCardValues)}
+              focused={formik.values.focus || "number"}
             />
+          )}
+
+          <Box sx={{ flexGrow: cardRequired ? undefined : 1 }}>
+            {cardRequired && (
+              <TextField
+                sx={stacked ? { mt: 2 } : {}}
+                fullWidth
+                type="tel"
+                name="number"
+                label="Card Number"
+                required
+                onBlur={formik.handleBlur}
+                onChange={handleInputChange}
+                onFocus={handleInputFocus}
+                variant="outlined"
+                value={formik.values.number}
+                error={Boolean(formik.touched.number && formik.errors.number)}
+                helperText={formik.touched.number && formik.errors.number}
+              />
+            )}
             <TextField
               sx={{ mt: 2 }}
               fullWidth
               type="text"
               name="name"
-              label="Name on Card"
+              label={cardRequired ? "Name on Card" : "Name"}
               required
               onBlur={formik.handleBlur}
               onChange={handleInputChange}
@@ -138,104 +144,119 @@ export const AddCard = ({
               error={Boolean(formik.touched.name && formik.errors.name)}
               helperText={formik.touched.name && formik.errors.name}
             />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
-              type="tel"
-              name="expiry"
-              label="Valid Thru"
-              placeholder="MM/YY"
-              inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.expiry}
-              error={Boolean(formik.touched.expiry && formik.errors.expiry)}
-              helperText={
-                (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
-              }
-            />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
-              type="tel"
-              name="cvc"
-              label="CVC"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.cvc}
-              error={Boolean(formik.touched.cvc && formik.errors.cvc)}
-              helperText={formik.touched.cvc && formik.errors.cvc}
-            />
-          </div>
+            {cardRequired && (
+              <>
+                <TextField
+                  sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
+                  type="tel"
+                  name="expiry"
+                  label="Valid Thru"
+                  placeholder="MM/YY"
+                  inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
+                  required
+                  onBlur={formik.handleBlur}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  variant="outlined"
+                  value={formik.values.expiry}
+                  error={Boolean(formik.touched.expiry && formik.errors.expiry)}
+                  helperText={
+                    (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
+                  }
+                />
+                <TextField
+                  sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
+                  type="tel"
+                  name="cvc"
+                  label="CVC"
+                  required
+                  onBlur={formik.handleBlur}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  variant="outlined"
+                  value={formik.values.cvc}
+                  error={Boolean(formik.touched.cvc && formik.errors.cvc)}
+                  helperText={formik.touched.cvc && formik.errors.cvc}
+                />
+              </>
+            )}
+          </Box>
           {/* {formik.errors.submit && (
         <Typography color="error" sx={{ mt: 2 }} variant="body2">
           {formik.errors.submit}
         </Typography>
       )} */}
         </Box>
-        <Box
-          sx={{ display: "flex", flexDirection: "row", gap: 2, width: "100%" }}
-        >
-          <Box sx={{ flexGrow: 1 }}>
-            {!address ? null : (
-              <Box>
-                <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
-                  Billing Address
-                </Typography>
-                <AddressCountryField formik={formik} name="country" />
-                <AddressEmailField
-                  formik={formik}
-                  name="email"
-                  sx={{ mt: 2 }}
-                />
-                <AddressOrganizationNameField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="organization"
-                />
-                <AddressStreetField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="line1"
-                  lineNo="1"
-                />
-                <AddressStreetField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="line2"
-                  lineNo="2"
-                  required={false}
-                />
-                <AddressCityField sx={{ mt: 2 }} formik={formik} name="city" />
-                <AddressRegionField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="region"
-                />
-                <AddressPostalCodeField
-                  sx={{ mt: 2 }}
-                  formik={formik}
-                  name="postal_code"
-                />
-              </Box>
-            )}
-          </Box>
+        {cardRequired && (
           <Box
             sx={{
-              mt: "16px",
               display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-end",
-              flexGrow: 1,
+              flexDirection: "row",
+              gap: 2,
+              width: "100%",
             }}
           >
-            {PriceDetails}
+            <Box sx={{ flexGrow: 1 }}>
+              {!address ? null : (
+                <Box>
+                  <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
+                    Billing Address
+                  </Typography>
+                  <AddressCountryField formik={formik} name="country" />
+                  <AddressEmailField
+                    formik={formik}
+                    name="email"
+                    sx={{ mt: 2 }}
+                  />
+                  <AddressOrganizationNameField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="organization"
+                  />
+                  <AddressStreetField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="line1"
+                    lineNo="1"
+                  />
+                  <AddressStreetField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="line2"
+                    lineNo="2"
+                    required={false}
+                  />
+                  <AddressCityField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="city"
+                  />
+                  <AddressRegionField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="region"
+                  />
+                  <AddressPostalCodeField
+                    sx={{ mt: 2 }}
+                    formik={formik}
+                    name="postal_code"
+                  />
+                </Box>
+              )}
+            </Box>
+            <Box
+              sx={{
+                mt: "16px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                flexGrow: 1,
+              }}
+            >
+              {PriceDetails}
+            </Box>
           </Box>
-        </Box>
+        )}
         {error && (
           <Typography color="error" sx={{ mt: 2 }} variant="body2">
             {error}

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,11 @@ export function CartList({
   disableProductLink,
   formik,
   formDisabled,
-  formError,
+  formErrorState,
 }) {
+  console.log("DISABLED", formDisabled);
+  const [status, setStatus] = statusState;
+  const [formError, setFormError] = formErrorState;
   return (
     <form
       style={{ flexGrow: 1 }}
@@ -116,12 +119,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 +130,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>