@springmicro/cart 0.5.14 → 0.5.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.14",
+  "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.14",
+    "@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": "0c889259d325d955a7981f8e8975edc42c8b9cf8"
+  "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";
@@ -133,6 +133,7 @@ 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([
@@ -153,9 +154,11 @@ export default function ReviewAndCalculateTaxes({
         setTax(taxData);
         setOrder(order);
         setStatus(1);
+        setFormDisabled(false);
       })
       .catch(() => {
         setFormError(true);
+        setFormDisabled(false);
       });
   }
 
@@ -196,9 +199,12 @@ export default function ReviewAndCalculateTaxes({
       .catch((e) => {
         dev && console.log("Checkout error", e);
         setFormError(true);
+        setFormDisabled(false);
       });
   }
 
+  const cardRequired = typeof subtotal === "string" || subtotal > 0;
+
   /**
    *
    * AddCard formik data
@@ -262,21 +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) => {
       dev && console.log("Formik submit");
-      setFormDisabled(true);
       const values = { ...v };
-      if (formDisabled) {
-        setFormDisabled(false);
-        throw new Error("Attempted to submit an invalid form.");
-      }
 
       const submitFunc = status === 0 ? createOrderAndGetTaxes : confirmOrder;
 
@@ -305,9 +308,6 @@ export default function ReviewAndCalculateTaxes({
           .then((v) => {})
           .catch((e) => {
             dev && console.log("Submit errors", e);
-          })
-          .finally(() => {
-            setFormDisabled(false);
           });
       } else {
         setFormDisabled(false);
@@ -340,7 +340,8 @@ export default function ReviewAndCalculateTaxes({
     dev &&
       (Object.keys(formik.errors).length > 0
         ? console.log("Formik errors", formik.errors)
-        : "No formik errors");
+        : console.log("No formik errors"));
+
     setFormDisabled(Object.keys(formik.errors).length > 0);
   }, [formik.errors]);
 
@@ -379,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/CartList.tsx

@@ -21,6 +21,7 @@ export function CartList({
   formDisabled,
   formErrorState,
 }) {
+  console.log("DISABLED", formDisabled);
   const [status, setStatus] = statusState;
   const [formError, setFormError] = formErrorState;
   return (

package/src/checkout/index.tsx

@@ -191,7 +191,7 @@ export default function Checkout({
          *
          */}
 
-        {status != 2 && (
+        {status < 2 && (
           <ReviewAndCalculateTaxes
             subtotal={subtotal}
             discount={discount}