@springmicro/cart 0.5.1 → 0.5.2

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -1,370 +1,370 @@
-import "./ReviewCartAndCalculateTaxes.css";
-import { Box, useTheme, useMediaQuery } from "@mui/material";
-import { setOrder as cartSetOrder } from "../utils/storage";
-import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
-import { CartList } from "./components/CartList";
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  useEffect,
-  useState,
-} from "react";
-import {
-  expiryDateHasNotPassed,
-  formatCreditCardNumber,
-  formatCVC,
-  formatExpirationDate,
-  splitMonthYear,
-} from "@springmicro/utils/payment";
-import * as Yup from "yup";
-import {
-  allCountries,
-  allCountriesReverse,
-  getPostalCodeDefault,
-} from "@springmicro/utils/address";
-import { AddressValues } from "./components/Address";
-import { useFormik } from "formik";
-import { postCheckout } from "../utils/api";
-
-async function createOrder(cart, apiBaseUrl) {
-  // If an order has already been created and hasn't been changed, get the previous order.
-  if (cart.order && cart.order.id && cart.order.reference) {
-    const res = await fetch(
-      `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`
-    );
-    const order = await res.json();
-
-    const currentUrl = new URL(window.location.href);
-    currentUrl.searchParams.set("orderId", order.id);
-    currentUrl.searchParams.set("orderRef", order.reference);
-    window.history.pushState({}, "", currentUrl);
-
-    return order;
-  }
-
-  // Otherwise, create a new order.
-  const res = await fetch(apiBaseUrl + "/api/ecommerce/orders", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      customer_id: 1,
-      cart_data: {
-        items: cart.items.map((li) => ({
-          ...li,
-          name: undefined,
-          image: undefined,
-        })),
-      },
-    }),
-  });
-  const order = await res.json();
-
-  if (!order) throw "Missing order";
-  cartSetOrder({ id: order.id, reference: order.reference });
-  const currentUrl = new URL(window.location.href);
-  currentUrl.searchParams.set("orderId", order.id);
-  currentUrl.searchParams.set("orderRef", order.reference);
-  window.history.pushState({}, "", currentUrl);
-
-  return order;
-}
-
-async function getTax(apiBaseUrl, taxProvider, items, v) {
-  const res = await fetch(
-    `${apiBaseUrl}/api/ecommerce/tax?tax_provider=${taxProvider ?? "dummy"}`,
-    {
-      method: "POST",
-      body: JSON.stringify({
-        cart_data: items,
-        address: {
-          country: v.country,
-          city: v.locality,
-          line1: v.street_address,
-          postal_code: v.postal_code,
-          state: v.region,
-        },
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }
-  );
-  return await res.json();
-}
-
-export default function ReviewAndCalculateTaxes({
-  subtotal,
-  discount,
-  taxState,
-  shipping,
-  statusState,
-  cart,
-  prices,
-  apiBaseUrl,
-  orderState,
-  disableProductLink,
-  disableMissingImage,
-  taxProvider,
-  setSuccessData,
-  invoiceId = undefined,
-  onPlacement = undefined,
-  CollectExtraInfo = undefined,
-}) {
-  const [formDisabled, setFormDisabled] = useState(true);
-  const [formError, setFormError] = useState(undefined);
-  const theme = useTheme();
-  const stacked = useMediaQuery(theme.breakpoints.down("lg"));
-
-  const [status, setStatus] = statusState;
-  const [tax, setTax] = taxState;
-  const [order, setOrder] = orderState;
-
-  async function createOrderAndGetTaxes(values) {
-    setFormError(undefined);
-    // status === 0 when this is clicked.
-    // Creates an order and calculates tax.
-
-    Promise.all([
-      createOrder(cart, apiBaseUrl),
-      getTax(
-        apiBaseUrl,
-        taxProvider,
-        cart.items.map((i) => ({
-          amount: prices[i.price_id].unit_amount,
-          reference: i.name,
-        })),
-        values
-      ),
-    ])
-      .then(([order, taxData]) => {
-        setTax(taxData);
-        setOrder(order);
-        setStatus(1);
-      })
-      .catch(() => {
-        setFormError(true);
-      });
-  }
-
-  async function confirmOrder(values) {
-    setFormError(undefined);
-    setFormDisabled(true);
-    postCheckout(
-      apiBaseUrl,
-      order.id,
-      order.reference,
-      values,
-      "stripe",
-      invoiceId
-    )
-      .then((data) => {
-        if (data instanceof Response) {
-          setFormError(true);
-          alert(JSON.stringify(data));
-        } else {
-          // success
-          setSuccessData(data);
-          onPlacement && onPlacement();
-          // Get the current URL
-          const currentUrl = new URL(window.location.href);
-          // Set the query parameter 'showReceipt' to '1'
-          currentUrl.searchParams.set("showReceipt", "1");
-          currentUrl.searchParams.set("orderId", order.id);
-          currentUrl.searchParams.set("orderRef", order.reference);
-
-          // Update the browser's URL and history without refreshing the page
-          window.history.pushState({}, "", currentUrl);
-        }
-        setFormDisabled(false);
-      })
-      .catch(() => {
-        console.log("ERROR");
-        setFormError(true);
-      });
-  }
-
-  /**
-   *
-   * AddCard formik data
-   *
-   */
-
-  const contact = undefined;
-  const address = true;
-
-  const initialValuesBase = {
-    cvc: "",
-    expiry: "",
-    focus: "number",
-    name: contact ? `${contact.first_name} ${contact.last_name}` : "",
-    number: "",
-  } as CreditCardValues;
-  const initialCountry = "US";
-  const initialValuesAddress = {
-    country: initialCountry ?? "",
-    email: contact?.email ?? "",
-    region: "",
-    line1: "",
-    line2: "",
-    organization: contact?.organization ?? "",
-    city: "",
-    postal_code: getPostalCodeDefault(initialCountry),
-  } as AddressValues;
-
-  const initialValues: CreditCardValues & Partial<AddressValues> = address
-    ? { ...initialValuesBase, ...initialValuesAddress }
-    : initialValuesBase;
-
-  const validationSchemaBase = {
-    expiry: Yup.string()
-      // .length(7, "Expiry date must be of the format MM/YY.")
-      .test("exp-date", "Expiry date has already passed.", (string) => {
-        if (string?.length === 5) {
-          if (string.indexOf("/") !== 2) return false;
-          const [month, year] = splitMonthYear(string);
-          return expiryDateHasNotPassed(month, year);
-        } else {
-          return true;
-        }
-      })
-      .required("Expiry date is required."),
-    number: Yup.string().required("Card Number is required."),
-    name: Yup.string().required("Cardholder Name is required."),
-    cvc: Yup.string().required("CVC is required."),
-  };
-
-  const validationSchemaAddress = {
-    country: Yup.string().required("Country is required."),
-    email: Yup.string().email().required("Email is required."),
-    line1: Yup.string().required("Street Address 1 is required."),
-    city: Yup.string().required("City is required."),
-    postal_code: Yup.string().required("Postal Code is required."),
-  };
-  const formik = useFormik({
-    initialValues,
-    validationSchema: Yup.object(
-      address
-        ? {
-            ...validationSchemaBase,
-            ...validationSchemaAddress,
-          }
-        : validationSchemaBase
-    ),
-    onSubmit: async (v, helpers) => {
-      setFormDisabled(true);
-      const values = { ...v };
-      if (formDisabled) {
-        setFormDisabled(false);
-        throw new Error("Attempted to submit an invalid form.");
-      }
-
-      const submitFunc = status === 0 ? createOrderAndGetTaxes : confirmOrder;
-
-      if (submitFunc) {
-        if (address) {
-          // match backend
-          values["street_address"] = values.line2
-            ? `${values.line1}\n${values.line2}`
-            : values.line1;
-          values["locality"] = values.city;
-          delete values.line1;
-          delete values.line2;
-          delete values.city;
-          if (Object.keys(allCountriesReverse).includes(values.country)) {
-            values.country = allCountriesReverse[values.country];
-          }
-        }
-        values["card_number"] = values.number;
-        values["expiry_date"] = values.expiry;
-        delete values.focus;
-        delete values.expiry;
-        delete values.number;
-
-        // const res = await submitFunc(values);
-        submitFunc(values)
-          .then((v) => {})
-          .finally(() => {
-            setFormDisabled(false);
-          });
-      } else {
-        setFormDisabled(false);
-      }
-    },
-  });
-
-  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (e) => {
-    const focusedEl = (e.target as HTMLElement).getAttribute("name") as CCFocus;
-    if (focusedEl) {
-      formik.setValues({
-        ...formik.values,
-        focus: focusedEl,
-      });
-    }
-  };
-
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    if (e.target.name === "card_number") {
-      e.target.value = formatCreditCardNumber(e.target.value);
-    } else if (e.target.name === "expiry") {
-      e.target.value = formatExpirationDate(e.target.value);
-    } else if (e.target.name === "cvc") {
-      e.target.value = formatCVC(e.target.value);
-    }
-    formik.handleChange(e);
-  };
-
-  useEffect(() => {
-    setFormDisabled(Object.keys(formik.errors).length > 0);
-  }, [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
-        {...{
-          status,
-          cart,
-          subtotal,
-          tax,
-          shipping,
-          discount,
-          prices,
-          disableMissingImage,
-          disableProductLink,
-          formik,
-          formDisabled,
-          formError,
-        }}
-      />
-      {status === 0 && (
-        <Box
-          sx={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: 2 }}
-        >
-          {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
-          <AddCard
-            onSubmit={createOrderAndGetTaxes}
-            stacked={stacked}
-            formData={{
-              formik,
-              handleInputChange,
-              handleInputFocus,
-              formDisabled,
-              formError,
-            }}
-          />
-        </Box>
-      )}
-    </Box>
-  );
-}
+import "./ReviewCartAndCalculateTaxes.css";
+import { Box, useTheme, useMediaQuery } from "@mui/material";
+import { setOrder as cartSetOrder } from "../utils/storage";
+import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
+import { CartList } from "./components/CartList";
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  useEffect,
+  useState,
+} from "react";
+import {
+  expiryDateHasNotPassed,
+  formatCreditCardNumber,
+  formatCVC,
+  formatExpirationDate,
+  splitMonthYear,
+} from "@springmicro/utils/payment";
+import * as Yup from "yup";
+import {
+  allCountries,
+  allCountriesReverse,
+  getPostalCodeDefault,
+} from "@springmicro/utils/address";
+import { AddressValues } from "./components/Address";
+import { useFormik } from "formik";
+import { postCheckout } from "../utils/api";
+
+async function createOrder(cart, apiBaseUrl) {
+  // If an order has already been created and hasn't been changed, get the previous order.
+  if (cart.order && cart.order.id && cart.order.reference) {
+    const res = await fetch(
+      `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`
+    );
+    const order = await res.json();
+
+    const currentUrl = new URL(window.location.href);
+    currentUrl.searchParams.set("orderId", order.id);
+    currentUrl.searchParams.set("orderRef", order.reference);
+    window.history.pushState({}, "", currentUrl);
+
+    return order;
+  }
+
+  // Otherwise, create a new order.
+  const res = await fetch(apiBaseUrl + "/api/ecommerce/orders", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      customer_id: 1,
+      cart_data: {
+        items: cart.items.map((li) => ({
+          ...li,
+          name: undefined,
+          image: undefined,
+        })),
+      },
+    }),
+  });
+  const order = await res.json();
+
+  if (!order) throw "Missing order";
+  cartSetOrder({ id: order.id, reference: order.reference });
+  const currentUrl = new URL(window.location.href);
+  currentUrl.searchParams.set("orderId", order.id);
+  currentUrl.searchParams.set("orderRef", order.reference);
+  window.history.pushState({}, "", currentUrl);
+
+  return order;
+}
+
+async function getTax(apiBaseUrl, taxProvider, items, v) {
+  const res = await fetch(
+    `${apiBaseUrl}/api/ecommerce/tax?tax_provider=${taxProvider ?? "dummy"}`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        cart_data: items,
+        address: {
+          country: v.country,
+          city: v.locality,
+          line1: v.street_address,
+          postal_code: v.postal_code,
+          state: v.region,
+        },
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+  return await res.json();
+}
+
+export default function ReviewAndCalculateTaxes({
+  subtotal,
+  discount,
+  taxState,
+  shipping,
+  statusState,
+  cart,
+  prices,
+  apiBaseUrl,
+  orderState,
+  disableProductLink,
+  disableMissingImage,
+  taxProvider,
+  setSuccessData,
+  invoiceId = undefined,
+  onPlacement = undefined,
+  CollectExtraInfo = undefined,
+}) {
+  const [formDisabled, setFormDisabled] = useState(true);
+  const [formError, setFormError] = useState(undefined);
+  const theme = useTheme();
+  const stacked = useMediaQuery(theme.breakpoints.down("lg"));
+
+  const [status, setStatus] = statusState;
+  const [tax, setTax] = taxState;
+  const [order, setOrder] = orderState;
+
+  async function createOrderAndGetTaxes(values) {
+    setFormError(undefined);
+    // status === 0 when this is clicked.
+    // Creates an order and calculates tax.
+
+    Promise.all([
+      createOrder(cart, apiBaseUrl),
+      getTax(
+        apiBaseUrl,
+        taxProvider,
+        cart.items.map((i) => ({
+          amount: prices[i.price_id].unit_amount,
+          reference: i.name,
+        })),
+        values
+      ),
+    ])
+      .then(([order, taxData]) => {
+        setTax(taxData);
+        setOrder(order);
+        setStatus(1);
+      })
+      .catch(() => {
+        setFormError(true);
+      });
+  }
+
+  async function confirmOrder(values) {
+    setFormError(undefined);
+    setFormDisabled(true);
+    postCheckout(
+      apiBaseUrl,
+      order.id,
+      order.reference,
+      values,
+      "stripe",
+      invoiceId
+    )
+      .then((data) => {
+        if (data instanceof Response) {
+          setFormError(true);
+          alert(JSON.stringify(data));
+        } else {
+          // success
+          setSuccessData(data);
+          onPlacement && onPlacement();
+          // Get the current URL
+          const currentUrl = new URL(window.location.href);
+          // Set the query parameter 'showReceipt' to '1'
+          currentUrl.searchParams.set("showReceipt", "1");
+          currentUrl.searchParams.set("orderId", order.id);
+          currentUrl.searchParams.set("orderRef", order.reference);
+
+          // Update the browser's URL and history without refreshing the page
+          window.history.pushState({}, "", currentUrl);
+        }
+        setFormDisabled(false);
+      })
+      .catch(() => {
+        console.log("ERROR");
+        setFormError(true);
+      });
+  }
+
+  /**
+   *
+   * AddCard formik data
+   *
+   */
+
+  const contact = undefined;
+  const address = true;
+
+  const initialValuesBase = {
+    cvc: "",
+    expiry: "",
+    focus: "number",
+    name: contact ? `${contact.first_name} ${contact.last_name}` : "",
+    number: "",
+  } as CreditCardValues;
+  const initialCountry = "US";
+  const initialValuesAddress = {
+    country: initialCountry ?? "",
+    email: contact?.email ?? "",
+    region: "",
+    line1: "",
+    line2: "",
+    organization: contact?.organization ?? "",
+    city: "",
+    postal_code: getPostalCodeDefault(initialCountry),
+  } as AddressValues;
+
+  const initialValues: CreditCardValues & Partial<AddressValues> = address
+    ? { ...initialValuesBase, ...initialValuesAddress }
+    : initialValuesBase;
+
+  const validationSchemaBase = {
+    expiry: Yup.string()
+      // .length(7, "Expiry date must be of the format MM/YY.")
+      .test("exp-date", "Expiry date has already passed.", (string) => {
+        if (string?.length === 5) {
+          if (string.indexOf("/") !== 2) return false;
+          const [month, year] = splitMonthYear(string);
+          return expiryDateHasNotPassed(month, year);
+        } else {
+          return true;
+        }
+      })
+      .required("Expiry date is required."),
+    number: Yup.string().required("Card Number is required."),
+    name: Yup.string().required("Cardholder Name is required."),
+    cvc: Yup.string().required("CVC is required."),
+  };
+
+  const validationSchemaAddress = {
+    country: Yup.string().required("Country is required."),
+    email: Yup.string().email().required("Email is required."),
+    line1: Yup.string().required("Street Address 1 is required."),
+    city: Yup.string().required("City is required."),
+    postal_code: Yup.string().required("Postal Code is required."),
+  };
+  const formik = useFormik({
+    initialValues,
+    validationSchema: Yup.object(
+      address
+        ? {
+            ...validationSchemaBase,
+            ...validationSchemaAddress,
+          }
+        : validationSchemaBase
+    ),
+    onSubmit: async (v, helpers) => {
+      setFormDisabled(true);
+      const values = { ...v };
+      if (formDisabled) {
+        setFormDisabled(false);
+        throw new Error("Attempted to submit an invalid form.");
+      }
+
+      const submitFunc = status === 0 ? createOrderAndGetTaxes : confirmOrder;
+
+      if (submitFunc) {
+        if (address) {
+          // match backend
+          values["street_address"] = values.line2
+            ? `${values.line1}\n${values.line2}`
+            : values.line1;
+          values["locality"] = values.city;
+          delete values.line1;
+          delete values.line2;
+          delete values.city;
+          if (Object.keys(allCountriesReverse).includes(values.country)) {
+            values.country = allCountriesReverse[values.country];
+          }
+        }
+        values["card_number"] = values.number;
+        values["expiry_date"] = values.expiry;
+        delete values.focus;
+        delete values.expiry;
+        delete values.number;
+
+        // const res = await submitFunc(values);
+        submitFunc(values)
+          .then((v) => {})
+          .finally(() => {
+            setFormDisabled(false);
+          });
+      } else {
+        setFormDisabled(false);
+      }
+    },
+  });
+
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    const focusedEl = (e.target as HTMLElement).getAttribute("name") as CCFocus;
+    if (focusedEl) {
+      formik.setValues({
+        ...formik.values,
+        focus: focusedEl,
+      });
+    }
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.name === "card_number") {
+      e.target.value = formatCreditCardNumber(e.target.value);
+    } else if (e.target.name === "expiry") {
+      e.target.value = formatExpirationDate(e.target.value);
+    } else if (e.target.name === "cvc") {
+      e.target.value = formatCVC(e.target.value);
+    }
+    formik.handleChange(e);
+  };
+
+  useEffect(() => {
+    setFormDisabled(Object.keys(formik.errors).length > 0);
+  }, [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
+        {...{
+          status,
+          cart,
+          subtotal,
+          tax,
+          shipping,
+          discount,
+          prices,
+          disableMissingImage,
+          disableProductLink,
+          formik,
+          formDisabled,
+          formError,
+        }}
+      />
+      {status === 0 && (
+        <Box
+          sx={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: 2 }}
+        >
+          {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
+          <AddCard
+            onSubmit={createOrderAndGetTaxes}
+            stacked={stacked}
+            formData={{
+              formik,
+              handleInputChange,
+              handleInputFocus,
+              formDisabled,
+              formError,
+            }}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}