@springmicro/cart 0.7.0 → 0.7.2

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";
@@ -25,6 +36,8 @@ import {
 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");
@@ -131,6 +144,7 @@ export default function ReviewAndCalculateTaxes({
   CollectExtraInfo = undefined,
   defaultValues = {},
   dev,
+  hideFields = [],
 }) {
   dev && console.log({ products, prices });
   const [formDisabled, setFormDisabled] = useState(true);
@@ -142,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);
@@ -188,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);
@@ -360,64 +380,74 @@ 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}
-          />
-          <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,
             }}
-          />
-        </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} />
+    </>
   );
 }
 
-function CheckoutActionFields({ formik, products, prices }) {
-  const checkoutFields = [
+function CheckoutActionFields({ formik, products, prices, hideFields = [] }) {
+  const checkoutFields: Record<string, CheckoutFieldsType> = [
     ...Object.keys(products).flatMap((productKey) =>
       (products[productKey].actions ?? []).flatMap(
         (action) => action.checkout_fields ?? []
@@ -447,33 +477,109 @@ function CheckoutActionFields({ formik, products, prices }) {
   const handleInputChange = (e) => {
     formik.handleChange(e);
   };
-
+  // console.log({ checkoutFields });
   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]}
-          />
-        );
-      })}
+      {Object.keys((console.log(checkoutFields), checkoutFields))
+        .filter(
+          (key) =>
+            !["email", ...hideFields].includes(key) &&
+            !(
+              checkoutFields[key].hidden === true ||
+              checkoutFields[key].hidden === "true"
+            )
+        )
+        .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>
   );
 }
+
+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/AddCard.tsx

@@ -68,6 +68,7 @@ export type AddCardProps = {
     formDisabled;
     formError;
   };
+  hideFields?: string[];
 };
 
 export const AddCard = ({
@@ -84,6 +85,7 @@ export const AddCard = ({
     formDisabled,
     formError,
   },
+  hideFields = [],
 }: AddCardProps) => {
   return (
     <Container id="paymentMethodForm">
@@ -203,11 +205,13 @@ export const AddCard = ({
                     Billing Address
                   </Typography>
                   <AddressCountryField formik={formik} name="country" />
-                  <AddressEmailField
-                    formik={formik}
-                    name="email"
-                    sx={{ mt: 2 }}
-                  />
+                  {!hideFields.includes("email") && (
+                    <AddressEmailField
+                      formik={formik}
+                      name="email"
+                      sx={{ mt: 2 }}
+                    />
+                  )}
                   <AddressOrganizationNameField
                     sx={{ mt: 2 }}
                     formik={formik}

package/src/checkout/components/Address.tsx

@@ -177,7 +177,7 @@ export function AddressEmailField({ formik, name, sx }: AddressFieldProps) {
   return (
     <>
       <TextField
-        label="Billing email"
+        label="Email"
         sx={{ width: 400, display: "block", ...sx }}
         name={name as string}
         id={name as string}

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/components/CartProductCard.css

@@ -1,67 +1,67 @@
-.product-card {
-  width: 500px;
-  /* display: flex;
-  flex-direction: row;
-  justify-content: space-between; */
-  display: grid;
-  grid-template-columns: 1fr 40px;
-  gap: 0.5rem;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-  transition: all 0.3s 0.1s;
-  cursor: pointer;
-  min-height: 48px;
-  flex-shrink: 0;
-}
-
-.product-card:hover {
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  transition: all 0.3s 0s;
-}
-
-.left-section {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  flex-grow: 1;
-}
-
-.left-section > img,
-.missing-image {
-  min-height: 100%;
-  max-height: 100px;
-  aspect-ratio: 1;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.missing-image {
-  background-color: rgb(222, 222, 222);
-}
-
-.two-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.two-row :nth-child(1) {
-  font-size: 20px;
-}
-
-.two-row :nth-child(2) {
-  font-size: 14px;
-}
-
-.two-row > * {
-  margin: 0;
-}
-
-.remove-button {
-  color: #ff000040 !important;
-  transition: all 0.2s !important;
-}
-
-.product-card:hover .remove-button {
-  color: red !important;
-}
+.product-card {
+  width: 500px;
+  /* display: flex;
+  flex-direction: row;
+  justify-content: space-between; */
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  gap: 0.5rem;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+  min-height: 48px;
+  flex-shrink: 0;
+}
+
+.product-card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.left-section {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.left-section > img,
+.missing-image {
+  min-height: 100%;
+  max-height: 100px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.missing-image {
+  background-color: rgb(222, 222, 222);
+}
+
+.two-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.two-row :nth-child(1) {
+  font-size: 20px;
+}
+
+.two-row :nth-child(2) {
+  font-size: 14px;
+}
+
+.two-row > * {
+  margin: 0;
+}
+
+.remove-button {
+  color: #ff000040 !important;
+  transition: all 0.2s !important;
+}
+
+.product-card:hover .remove-button {
+  color: red !important;
+}