@springmicro/cart 0.7.1 → 0.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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.7.1",
+    "@springmicro/utils": "0.7.2",
     "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": "3fba722cf2e25b298d1b774c2b39ae8ac5743076"
+  "gitHead": "baedb0de00a8f238a2356a747e69eb1754606d58"
 }

package/src/CartButton.tsx

@@ -160,6 +160,7 @@ function CartModal({
         })
       )
       .catch(() => {
+        console.error("Couldn't get prices");
         setPrices(null);
       });
   }, [cart]);
@@ -214,17 +215,7 @@ 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" : ""
-                            }`
-                          : ""
-                      }`
+                    ? formatPrice(price)
                     : "Loading price..."}
                 </h3>
               </Box>
@@ -255,3 +246,28 @@ function CartModal({
     </Box>
   );
 }
+
+function formatPrice(price) {
+  let baseUnitAmount = (price.unit_amount / 100).toFixed(2);
+  if (baseUnitAmount.endsWith("00"))
+    baseUnitAmount = baseUnitAmount.replace(".00", "");
+
+  const unitAmountStr = `$${baseUnitAmount}`;
+
+  if (!price.recurring) return unitAmountStr;
+
+  let { interval, interval_count } = price.recurring;
+  if (interval === "month" && interval_count % 12 === 0) {
+    interval = "year";
+    interval_count /= 12;
+  }
+
+  const SLASH = "/";
+  let count = "";
+  if (interval_count != 1) {
+    interval += "s";
+    count = `${interval_count} `;
+  }
+
+  return unitAmountStr + SLASH + count + interval;
+}

package/src/ProductCard.tsx

@@ -166,7 +166,12 @@ function DefaultProductCard({
 
 function formatPricing({ unit_amount, recurring }: any) {
   if (recurring) {
-    const { interval, interval_count } = recurring;
+    let { interval, interval_count } = recurring;
+    if (interval === "month" && interval_count % 12 === 0) {
+      interval = "year";
+      interval_count /= 12;
+    }
+
     return `$${(unit_amount / 100).toFixed(2)}/${
       interval_count === 1 ? interval : `${interval_count} ${interval}s`
     }`;

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -1,5 +1,16 @@
 import "./ReviewCartAndCalculateTaxes.css";
-import { Box, useTheme, useMediaQuery, Button, TextField } from "@mui/material";
+import {
+  Box,
+  useTheme,
+  useMediaQuery,
+  Button,
+  TextField,
+  Modal,
+  Backdrop,
+  Fade,
+  Typography,
+  IconButton,
+} from "@mui/material";
 import { setOrder as cartSetOrder } from "../utils/storage";
 import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
 import { CartList } from "./components/CartList";
@@ -26,6 +37,7 @@ import { AddressValues } from "./components/Address";
 import { useFormik } from "formik";
 import { postCheckout } from "../utils/api";
 import { CheckoutFieldsType } from ".";
+import CloseIcon from "@mui/icons-material/Close";
 
 async function createOrder(cart, apiBaseUrl, dev) {
   dev && console.log("Creating order");
@@ -144,6 +156,8 @@ export default function ReviewAndCalculateTaxes({
   const [tax, setTax] = taxState;
   const [order, setOrder] = orderState;
 
+  const [precheckErrors, setPrecheckErrors] = useState([]);
+
   async function createOrderAndGetTaxes(values) {
     setFormError(undefined);
     setFormDisabled(true);
@@ -190,11 +204,15 @@ export default function ReviewAndCalculateTaxes({
       "stripe",
       invoiceId
     )
-      .then((data) => {
+      .then(async (data) => {
         dev && console.log("Checkout submitted");
         if (data instanceof Response) {
           setFormError(true);
-          dev && alert(data.statusText);
+          const { detail: errorData } = await data.json();
+          // dev && alert(data.statusText);
+          // console.log(errorData);
+          // TODO display issues
+          if (!errorData.valid) setPrecheckErrors(errorData.errors);
         } else {
           // success
           setSuccessData(data);
@@ -362,61 +380,69 @@ export default function ReviewAndCalculateTaxes({
   }, [formik.errors]);
 
   return (
-    <Box
-      sx={{
-        mt: 2,
-        display: "flex",
-        flexDirection: { xs: "column", xl: "row" },
-        justifyContent: "center",
-        alignItems: { xs: undefined, xl: "flex-start" },
-        px: { xs: 32, xl: 16 },
-        "&>div": { width: { xs: undefined, xl: "50%" } },
-      }}
-    >
-      <CartList
-        {...{
-          statusState: [status, setStatus],
-          cart,
-          subtotal,
-          tax,
-          shipping,
-          discount,
-          prices,
-          products,
-          disableMissingImage,
-          disableProductLink,
-          formik,
-          formDisabled,
-          formErrorState: [formError, setFormError],
+    <>
+      <Box
+        sx={{
+          mt: 2,
+          display: "flex",
+          flexDirection: { xs: "column", xl: "row" },
+          justifyContent: "center",
+          alignItems: { xs: undefined, xl: "flex-start" },
+          px: { xs: 32, xl: 16 },
+          "&>div": { width: { xs: undefined, xl: "50%" } },
         }}
-      />
-      {status === 0 && (
-        <Box
-          sx={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: 2 }}
-        >
-          {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
-          <CheckoutActionFields
-            formik={formik}
-            prices={prices}
-            products={products}
-            hideFields={hideFields}
-          />
-          <AddCard
-            cardRequired={cardRequired}
-            onSubmit={createOrderAndGetTaxes}
-            stacked={stacked}
-            formData={{
-              formik,
-              handleInputChange,
-              handleInputFocus,
-              formDisabled,
-              formError,
+      >
+        <CartList
+          {...{
+            statusState: [status, setStatus],
+            cart,
+            subtotal,
+            tax,
+            shipping,
+            discount,
+            prices,
+            products,
+            disableMissingImage,
+            disableProductLink,
+            formik,
+            formDisabled,
+            formErrorState: [formError, setFormError],
+          }}
+        />
+        {status === 0 && (
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
             }}
-            hideFields={hideFields}
-          />
-        </Box>
-      )}
-    </Box>
+          >
+            {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
+            <CheckoutActionFields
+              formik={formik}
+              prices={prices}
+              products={products}
+              hideFields={hideFields}
+            />
+            <AddCard
+              cardRequired={cardRequired}
+              onSubmit={createOrderAndGetTaxes}
+              stacked={stacked}
+              formData={{
+                formik,
+                handleInputChange,
+                handleInputFocus,
+                formDisabled,
+                formError,
+              }}
+              hideFields={hideFields}
+            />
+          </Box>
+        )}
+      </Box>
+      <PrecheckModal errors={precheckErrors} setErrors={setPrecheckErrors} />
+    </>
   );
 }
 
@@ -454,8 +480,15 @@ function CheckoutActionFields({ formik, products, prices, hideFields = [] }) {
   // console.log({ checkoutFields });
   return (
     <Box sx={{ display: "flex", flexDirection: "column", mx: 3, gap: 2 }}>
-      {Object.keys(checkoutFields)
-        .filter((key) => !["email", ...hideFields].includes(key))
+      {Object.keys((console.log(checkoutFields), checkoutFields))
+        .filter(
+          (key) =>
+            !["email", ...hideFields].includes(key) &&
+            !(
+              checkoutFields[key].hidden === true ||
+              checkoutFields[key].hidden === "true"
+            )
+        )
         .map((key) => {
           const {
             name,
@@ -483,3 +516,70 @@ function CheckoutActionFields({ formik, products, prices, hideFields = [] }) {
     </Box>
   );
 }
+
+function PrecheckModal({ errors, setErrors }) {
+  function onClose() {
+    setErrors([]);
+  }
+  return (
+    <Modal
+      open={errors.length > 0}
+      onClose={onClose} // called when backdrop clicked or escape pressed
+      closeAfterTransition
+      slots={{ backdrop: Backdrop }}
+      slotProps={{
+        backdrop: {
+          timeout: 300,
+        },
+      }}
+      aria-labelledby="centered-modal-title"
+      aria-describedby="centered-modal-description"
+    >
+      <Fade in={errors.length > 0}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            minWidth: 300,
+            maxWidth: "90vw",
+            bgcolor: "background.paper",
+            boxShadow: 24,
+            borderRadius: 2,
+            p: 3,
+            outline: "none",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              mb: 1,
+              gap: 4,
+            }}
+          >
+            <Typography id="centered-modal-title" variant="h5">
+              Your purchase was unsuccessful.
+            </Typography>
+            <IconButton aria-label="close" onClick={onClose} size="small">
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </Box>
+
+          <Box id="centered-modal-description">
+            <Typography variant="h6" component="h2">
+              Errors:
+            </Typography>
+            <ul>
+              {errors.map((error) => (
+                <Typography component="li">{error}</Typography>
+              ))}
+            </ul>
+          </Box>
+        </Box>
+      </Fade>
+    </Modal>
+  );
+}

package/src/checkout/components/CartList.tsx

@@ -138,10 +138,10 @@ export function CartList({
                 alignItems: "center",
               }}
             >
-              <Typography color="red">
+              {/* <Typography color="red">
                 Could not confirm payment. Your card info may have been entered
                 incorrectly.
-              </Typography>
+              </Typography> */}
               <Button
                 onClick={() => {
                   setFormError(undefined);

package/src/checkout/index.tsx

@@ -13,6 +13,7 @@ export type CheckoutFieldsType = {
   label?: string; // Defaults to a formated version of the name
   required?: boolean | string; // Defaults to true
   type?: "string"; // Defaults to "string" (text)
+  hidden?: boolean | string; // Defaults to true
 };
 
 export default function Checkout({
@@ -60,15 +61,20 @@ export default function Checkout({
     if (oid && or) {
       fetch(`${apiBaseUrl}/api/ecommerce/orders/${oid}/reference/${or}`).then(
         async (res) =>
-          await res.json().then((order) => {
-            setOrder(order);
-            setStatus(
-              order.charge_id ||
-                !["pending", "awaiting_payment"].includes(order.status)
-                ? 2
-                : 0 // normally this should be set to 1 but we need to ensure it sends card data to the payment provider and that data is likely lost on refresh.
-            );
-          })
+          await res
+            .json()
+            .then((order) => {
+              setOrder(order);
+              setStatus(
+                order.charge_id ||
+                  !["pending", "awaiting_payment"].includes(order.status)
+                  ? 2
+                  : 0 // normally this should be set to 1 but we need to ensure it sends card data to the payment provider and that data is likely lost on refresh.
+              );
+            })
+            .catch(() => {
+              console.error("Failed to get order");
+            })
       );
     }
   }, []);

package/src/types.d.ts

@@ -15,6 +15,8 @@ export type CartProduct = {
   quantity?: number;
   // Used in local cart, delete when sent to api
   name: string;
+  action_data?: object;
+  hidden_id?: string;
   image?: string;
 };
 

package/src/utils/storage.ts

@@ -37,20 +37,31 @@ function apiCartToLocalCart(cart) {
   });
 }
 
+function jsonOrObj(items) {
+  try {
+    return JSON.parse(items);
+  } catch {
+    return items;
+  }
+}
+
 apiPathDetails.listen((pathDetails, oldPathDetails) => {
   const localCartData = JSON.parse(cartStore.get());
   if (pathDetailsIsFullyDefined(pathDetails)) {
     // Runs on init if there is a user id and api key. Automatically logs in if userId is updated from undefined.
-    fetchFromCartApi("GET", pathDetails).then(async ({ status, json }) => {
+    fetchFromCartApi("GET", pathDetails).then(async (res) => {
+      const { status } = res;
       if (status === 200) {
-        const cart = await json();
-        cartStore.set(
-          JSON.stringify({
-            authentication: { loggedIn: true, user_id: cart.user_id },
-            items: JSON.parse((cart as any).items),
-            order: cart.order ? JSON.parse((cart as any).order) : undefined,
-          })
-        );
+        const cart = await res.json();
+
+        const cartStr = JSON.stringify({
+          authentication: { loggedIn: true, user_id: cart.user_id },
+          items: jsonOrObj(cart.items),
+          order: cart.order ? jsonOrObj(cart.order) : undefined,
+        });
+
+        cartStore.set(cartStr);
+        console.log(cartStr);
       } else if (status === 404 && localCartData.items.length > 0) {
         fetchFromCartApi(
           "PUT",
@@ -59,11 +70,19 @@ apiPathDetails.listen((pathDetails, oldPathDetails) => {
         ).then(async ({ ok, json }) => {
           if (!ok) return;
           const cart = await json();
+          console.log(
+            "Update local cart",
+            JSON.stringify({
+              authentication: { loggedIn: true, user_id: cart.user_id },
+              items: jsonOrObj(cart.items),
+              order: cart.order ? jsonOrObj(cart.order) : undefined,
+            })
+          );
           cartStore.set(
             JSON.stringify({
               authentication: { loggedIn: true, user_id: cart.user_id },
-              items: JSON.parse((cart as any).items),
-              order: cart.order ? JSON.parse((cart as any).order) : undefined,
+              items: jsonOrObj(cart.items),
+              order: cart.order ? jsonOrObj(cart.order) : undefined,
             })
           );
         });
@@ -96,6 +115,7 @@ export function logout(apiBaseUrl: string | undefined) {
 }
 
 export function addToCart(p: CartProduct) {
+  console.log("ADD TO CART", p);
   const cart: Cart = JSON.parse(cartStore.get());
   const newCart: Cart = {
     ...cart,