@springmicro/cart 0.6.0 → 0.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.6.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.6.0",
+    "@springmicro/utils": "0.6.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": "37c816671357a3b1af66ad231880216fbda2fb72"
+  "gitHead": "f0aee01ae9b45595f59d70a5fdf9cae8933edb24"
 }

package/src/AddToCartForm.tsx

@@ -1,16 +1,16 @@
-import { CartProduct } from "./types";
-import { addToCart } from "./utils/storage";
-
-type Props = {
-  item: CartProduct;
-  children: any;
-};
-
-export default function AddToCartForm({ item, children }: Props) {
-  function addItemToCart(e: any) {
-    e.preventDefault();
-    addToCart(item);
-  }
-
-  return <form onSubmit={addItemToCart}>{children}</form>;
-}
+import { CartProduct } from "./types";
+import { addToCart } from "./utils/storage";
+
+type Props = {
+  item: CartProduct;
+  children: any;
+};
+
+export default function AddToCartForm({ item, children }: Props) {
+  function addItemToCart(e: any) {
+    e.preventDefault();
+    addToCart(item);
+  }
+
+  return <form onSubmit={addItemToCart}>{children}</form>;
+}

package/src/ProductCard.css

@@ -1,106 +1,106 @@
-.card {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-  transition: all 0.3s 0.1s;
-  cursor: pointer;
-}
-
-.card:hover {
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  transition: all 0.3s 0s;
-}
-
-.card-section {
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.image-container {
-  width: 100%;
-  background-color: #ccc;
-  border-radius: 4px;
-  aspect-ratio: 1.5;
-}
-
-.button-section {
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 4px 2rem 0px;
-  gap: 0.5rem;
-}
-
-.addtocartbutton {
-  color: white;
-  background-color: rgb(39, 138, 230);
-  padding: 4px 16px 6px;
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.3s;
-}
-
-.addtocartbutton.red {
-  background-color: rgb(230, 39, 39);
-}
-
-.addtocartbutton.disabled {
-  background-color: rgb(170, 170, 170);
-  cursor: not-allowed;
-}
-.addtocartbutton.disabled:hover {
-  background-color: rgb(170, 170, 170);
-}
-
-.addtocartbutton:hover {
-  background-color: rgb(36, 124, 207);
-}
-
-.hover-button > .hover-section {
-  display: none;
-  position: absolute;
-  width: 325px;
-  margin-left: calc(-113.75px);
-  padding: 1rem;
-  color: black;
-}
-
-.hover-button:hover > .hover-section {
-  display: flex;
-  justify-content: center;
-}
-
-.hover-data {
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 2px 5px 2px rgb(173, 173, 173);
-  background-color: white;
-}
-
-.hover-data > div {
-  display: flex;
-  flex-direction: column;
-  background-color: rgb(203, 203, 203);
-  gap: 1px;
-}
-
-.tieredpricingbutton {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  text-align: left;
-  padding: 4px 0.5rem 8px;
-  background-color: white;
-  transition: all 0.3s;
-}
-
-.tieredpricingbutton:hover {
-  background-color: rgb(233, 233, 233);
-}
+.card {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.card-section {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image-container {
+  width: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  aspect-ratio: 1.5;
+}
+
+.button-section {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 4px 2rem 0px;
+  gap: 0.5rem;
+}
+
+.addtocartbutton {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+}
+
+.addtocartbutton.red {
+  background-color: rgb(230, 39, 39);
+}
+
+.addtocartbutton.disabled {
+  background-color: rgb(170, 170, 170);
+  cursor: not-allowed;
+}
+.addtocartbutton.disabled:hover {
+  background-color: rgb(170, 170, 170);
+}
+
+.addtocartbutton:hover {
+  background-color: rgb(36, 124, 207);
+}
+
+.hover-button > .hover-section {
+  display: none;
+  position: absolute;
+  width: 325px;
+  margin-left: calc(-113.75px);
+  padding: 1rem;
+  color: black;
+}
+
+.hover-button:hover > .hover-section {
+  display: flex;
+  justify-content: center;
+}
+
+.hover-data {
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 2px 5px 2px rgb(173, 173, 173);
+  background-color: white;
+}
+
+.hover-data > div {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(203, 203, 203);
+  gap: 1px;
+}
+
+.tieredpricingbutton {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  padding: 4px 0.5rem 8px;
+  background-color: white;
+  transition: all 0.3s;
+}
+
+.tieredpricingbutton:hover {
+  background-color: rgb(233, 233, 233);
+}

package/src/checkout/ReviewCartAndCalculateTaxes.css

@@ -1,93 +1,93 @@
-.two-col {
-  display: flex;
-  /* grid-template-columns: 1fr 1fr; */
-  margin-top: 2rem;
-  align-items: flex-start;
-}
-
-.two-col > * {
-  width: 50%;
-}
-
-.checkout-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 8px 4px;
-  margin-top: 1rem;
-  max-height: 50vh;
-  overflow: auto;
-}
-
-@keyframes cardanimate {
-  0% {
-    box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  }
-  50% {
-    box-shadow: 0px 0px 0px 0px #ffffff00;
-  }
-  100% {
-    box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  }
-}
-
-.skeleton-card {
-  min-height: 318px;
-  border-radius: 8px;
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  animation: cardanimate 1.25s linear infinite;
-}
-
-#status-bar {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  align-items: center;
-  margin-left: -29px;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.status-bar {
-  width: 200px;
-  height: 6px;
-  background: linear-gradient(
-    90deg,
-    rgb(40, 130, 213) 0%,
-    rgb(40, 130, 213) 50%,
-    lightgrey 50%,
-    lightgrey 100%
-  );
-  background-position: 100% 0;
-  transition: color 0.3s 0s; /* active -> inactive */
-  background-size: 200% 100%;
-  border-radius: 16px;
-}
-
-.status-bar.active {
-  background-position: 0 0;
-  transition: background-position 0.75s; /* inactive -> active */
-}
-
-.status-text {
-  color: lightgrey;
-  transition: color 0.3s 0s; /* active -> inactive */
-}
-
-.status-text.active {
-  color: rgb(40, 130, 213);
-  transition: color 0.5s 0.65s; /* inactive -> active */
-}
-
-.shopping-button {
-  color: white;
-  background-color: rgb(39, 138, 230);
-  padding: 4px 16px 6px;
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.3s;
-  text-decoration: none;
-}
+.two-col {
+  display: flex;
+  /* grid-template-columns: 1fr 1fr; */
+  margin-top: 2rem;
+  align-items: flex-start;
+}
+
+.two-col > * {
+  width: 50%;
+}
+
+.checkout-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 8px 4px;
+  margin-top: 1rem;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+@keyframes cardanimate {
+  0% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+  50% {
+    box-shadow: 0px 0px 0px 0px #ffffff00;
+  }
+  100% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+}
+
+.skeleton-card {
+  min-height: 318px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  animation: cardanimate 1.25s linear infinite;
+}
+
+#status-bar {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  margin-left: -29px;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-bar {
+  width: 200px;
+  height: 6px;
+  background: linear-gradient(
+    90deg,
+    rgb(40, 130, 213) 0%,
+    rgb(40, 130, 213) 50%,
+    lightgrey 50%,
+    lightgrey 100%
+  );
+  background-position: 100% 0;
+  transition: color 0.3s 0s; /* active -> inactive */
+  background-size: 200% 100%;
+  border-radius: 16px;
+}
+
+.status-bar.active {
+  background-position: 0 0;
+  transition: background-position 0.75s; /* inactive -> active */
+}
+
+.status-text {
+  color: lightgrey;
+  transition: color 0.3s 0s; /* active -> inactive */
+}
+
+.status-text.active {
+  color: rgb(40, 130, 213);
+  transition: color 0.5s 0.65s; /* inactive -> active */
+}
+
+.shopping-button {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+  text-decoration: none;
+}

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -1,5 +1,5 @@
 import "./ReviewCartAndCalculateTaxes.css";
-import { Box, useTheme, useMediaQuery, Button } from "@mui/material";
+import { Box, useTheme, useMediaQuery, Button, TextField } from "@mui/material";
 import { setOrder as cartSetOrder } from "../utils/storage";
 import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
 import { CartList } from "./components/CartList";
@@ -77,6 +77,7 @@ async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
   const taxable_items = items.filter(
     (i) => i.unit_amount > 0 && products[i.product_id].type !== "DONATION"
   );
+  dev && console.log("Taxable items", taxable_items);
   if (taxable_items.length === 0) return { tax_amount: 0 };
 
   const res = await fetch(
@@ -122,6 +123,7 @@ export default function ReviewAndCalculateTaxes({
   defaultValues = {},
   dev,
 }) {
+  dev && console.log({ products, prices });
   const [formDisabled, setFormDisabled] = useState(true);
   const [formError, setFormError] = useState(undefined);
   const theme = useTheme();
@@ -379,6 +381,11 @@ export default function ReviewAndCalculateTaxes({
           sx={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: 2 }}
         >
           {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
+          <CheckoutActionFields
+            formik={formik}
+            prices={prices}
+            products={products}
+          />
           <AddCard
             cardRequired={cardRequired}
             onSubmit={createOrderAndGetTaxes}
@@ -396,3 +403,65 @@ export default function ReviewAndCalculateTaxes({
     </Box>
   );
 }
+
+function CheckoutActionFields({ formik, products, prices }) {
+  const checkoutFields = [
+    ...Object.keys(products).flatMap((productKey) =>
+      (products[productKey].actions ?? []).flatMap(
+        (action) => action.checkout_fields ?? []
+      )
+    ),
+    // TODO Add this once prices have checkout fields
+    ...Object.keys(prices).flatMap((priceKey) =>
+      (prices[priceKey].actions ?? []).flatMap(
+        (action) => action.checkout_fields ?? []
+      )
+    ),
+
+    // Overwrites the checkout field to use the last one provided. This allows prices to overwrite product checkout fields if necessary.
+  ].reduce((old, field) => ({ ...old, [field.name]: field }), {});
+
+  // console.log("Checkout fields", checkoutFields);
+  const handleInputFocus = (e) => {
+    const focusedEl = (e.target as HTMLElement).getAttribute("name");
+    if (focusedEl) {
+      formik.setValues({
+        ...formik.values,
+        focus: focusedEl,
+      });
+    }
+  };
+
+  const handleInputChange = (e) => {
+    formik.handleChange(e);
+  };
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", mx: 3, gap: 2 }}>
+      {Object.keys(checkoutFields).map((key) => {
+        const {
+          name,
+          label,
+          type = "string", // todo
+          required = true, // can be a string
+        } = checkoutFields[key];
+
+        return (
+          <TextField
+            fullWidth
+            name={name}
+            label={label}
+            required={required === true || required === "true"}
+            onBlur={formik.handleBlur}
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            variant="outlined"
+            value={formik.values[name]}
+            error={Boolean(formik.touched[name] && formik.errors[name])}
+            helperText={formik.touched[name] && formik.errors[name]}
+          />
+        );
+      })}
+    </Box>
+  );
+}

package/src/checkout/components/CartList.tsx

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