@springmicro/cart 0.5.17 → 0.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.17",
+  "version": "0.6.1",
   "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.17",
+    "@springmicro/utils": "0.6.1",
     "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": "915dac621fa9bf06ffe49dadd56452f28bbd5737"
+  "gitHead": "232d9b1996bd1dbd66a020beee58eeefca8a40a2"
 }

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";
@@ -122,6 +122,7 @@ export default function ReviewAndCalculateTaxes({
   defaultValues = {},
   dev,
 }) {
+  console.log({ products, prices });
   const [formDisabled, setFormDisabled] = useState(true);
   const [formError, setFormError] = useState(undefined);
   const theme = useTheme();
@@ -379,6 +380,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 +402,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/index.tsx

@@ -8,6 +8,13 @@ import ReviewAndCalculateTaxes from "./ReviewCartAndCalculateTaxes";
 import Invoice from "./components/Invoice";
 import { FormikConfig } from "formik";
 
+export type CheckoutFieldsType = {
+  name: string;
+  label?: string; // Defaults to a formated version of the name
+  required?: boolean; // Defaults to true
+  type?: "string"; // Defaults to "string" (text)
+};
+
 export default function Checkout({
   apiBaseUrl,
   taxProvider,