@springmicro/cart 0.3.0 → 0.3.4

package/src/checkout/components/Billing.tsx

@@ -1,353 +1,353 @@
-import { useFormik, FormikProps } from "formik";
-import * as Yup from "yup";
-import { ChangeEventHandler, useEffect } from "react";
-import { PropsWithChildren, useState } from "react";
-import {
-  AddressCityField,
-  AddressOrganizationNameField,
-  AddressCountryField,
-  AddressPostalCodeField,
-  AddressRegionField,
-  AddressStreetField,
-  AddressEmailField,
-  AddressValues,
-} from "./Address";
-import {
-  allCountries,
-  allCountriesReverse,
-  getPostalCodeDefault,
-} from "@springmicro/utils/address";
-import { Box, Button, Container, TextField, Typography } from "@mui/material";
-import Cards from "react-credit-cards-2";
-import { FocusEventHandler } from "react";
-import {
-  formatCreditCardNumber,
-  formatCVC,
-  formatExpirationDate,
-  splitMonthYear,
-  expiryDateHasNotPassed,
-} from "@springmicro/utils/payment";
-
-// moved to index.ts
-// import "react-credit-cards-2/dist/es/styles-compiled.css";
-import { StripeLogoLink } from "./ProviderLogos";
-
-type CCFocus = "number" | "name" | "cvc" | "expiry";
-
-export type CreditCardValues = {
-  cvc: string;
-  expiry: string;
-  focus: CCFocus;
-  name: string;
-  number: string;
-};
-
-export type AddCardProps = {
-  contact?: {
-    organization?: string;
-    email: string;
-    first_name: string;
-    last_name: string;
-  };
-  stacked?: boolean;
-  error?: string;
-  address?: boolean;
-  onSubmit?: (
-    values: CreditCardValues & Partial<AddressValues>
-  ) => Promise<any>;
-};
-
-export const AddCard = ({
-  contact,
-  error,
-  stacked = false,
-  address = true,
-  onSubmit,
-}: AddCardProps) => {
-  const [disabled, setDisabled] = useState(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 ? allCountries[initialCountry] : "",
-    email: contact?.email ?? "",
-    region: "",
-    line1: "",
-    line2: "",
-    organization: contact?.organization ?? "",
-    city: "",
-    postal_code: getPostalCodeDefault(initialCountry),
-  } as AddressValues;
-
-  // const initialValues = { ...initialValuesBase, ...initialValuesAddress }
-  const initialValues = 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) => {
-      setDisabled(true);
-      const values = { ...v };
-      if (disabled) {
-        setDisabled(false);
-        throw new Error("Attempted to submit an invalid form.");
-      }
-      if (onSubmit) {
-        if (address) {
-          // match backend
-          // @ts-expect-error value exists
-          values["street_address"] = values.line2
-            ? // @ts-expect-error value exists
-              `${values.line1}\n${values.line2}`
-            : // @ts-expect-error value exists
-              values.line1;
-          // @ts-expect-error value exists
-          values["locality"] = values.city;
-          // @ts-expect-error value exists
-          delete values.line1;
-          // @ts-expect-error value exists
-          delete values.line2;
-          // @ts-expect-error value exists
-          delete values.city;
-          // @ts-expect-error value exists
-          if (Object.keys(allCountriesReverse).includes(values.country)) {
-            // @ts-expect-error value exists
-            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 onSubmit(values);
-        setDisabled(false);
-      } else {
-        setDisabled(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(() => {
-    setDisabled(Object.keys(formik.errors).length > 0);
-  }, [formik.errors]);
-
-  return (
-    <Container id="paymentMethodForm">
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          formik.handleSubmit(e);
-        }}
-      >
-        <Box
-          sx={
-            stacked
-              ? {}
-              : {
-                  display: "flex",
-                  flexDirection: { xs: "column", sm: "row" },
-                  gap: "1em",
-                }
-          }
-        >
-          <Cards
-            {...(formik.values as CreditCardValues)}
-            focused={formik.values.focus || "number"}
-          />
-
-          <div>
-            <TextField
-              sx={stacked ? { mt: 2 } : {}}
-              fullWidth
-              type="tel"
-              name="number"
-              label="Card Number"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.number}
-              error={Boolean(formik.touched.number && formik.errors.number)}
-              helperText={formik.touched.number && formik.errors.number}
-            />
-            <TextField
-              sx={{ mt: 2 }}
-              fullWidth
-              type="text"
-              name="name"
-              label="Name on Card"
-              required
-              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}
-            />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
-              type="tel"
-              name="expiry"
-              label="Valid Thru"
-              placeholder="MM/YY"
-              inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.expiry}
-              error={Boolean(formik.touched.expiry && formik.errors.expiry)}
-              helperText={
-                (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
-              }
-            />
-            <TextField
-              sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
-              type="tel"
-              name="cvc"
-              label="CVC"
-              required
-              onBlur={formik.handleBlur}
-              onChange={handleInputChange}
-              onFocus={handleInputFocus}
-              variant="outlined"
-              value={formik.values.cvc}
-              error={Boolean(formik.touched.cvc && formik.errors.cvc)}
-              helperText={formik.touched.cvc && formik.errors.cvc}
-            />
-          </div>
-          {/* {formik.errors.submit && (
-        <Typography color="error" sx={{ mt: 2 }} variant="body2">
-          {formik.errors.submit}
-        </Typography>
-      )} */}
-        </Box>
-        <Box>
-          {!address ? null : (
-            <Box>
-              <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
-                Billing Address
-              </Typography>
-              <AddressCountryField formik={formik} name="country" />
-              <AddressEmailField formik={formik} name="email" sx={{ mt: 2 }} />
-              <AddressOrganizationNameField
-                sx={{ mt: 2 }}
-                formik={formik}
-                name="organization"
-              />
-              <AddressStreetField
-                sx={{ mt: 2 }}
-                formik={formik}
-                name="line1"
-                lineNo="1"
-              />
-              <AddressStreetField
-                sx={{ mt: 2 }}
-                formik={formik}
-                name="line2"
-                lineNo="2"
-                required={false}
-              />
-              <AddressCityField sx={{ mt: 2 }} formik={formik} name="city" />
-              <AddressRegionField
-                sx={{ mt: 2 }}
-                formik={formik}
-                name="region"
-              />
-              <AddressPostalCodeField
-                sx={{ mt: 2 }}
-                formik={formik}
-                name="postal_code"
-              />
-            </Box>
-          )}
-        </Box>
-        {error && (
-          <Typography color="error" sx={{ mt: 2 }} variant="body2">
-            {error}
-          </Typography>
-        )}
-        <Button
-          size="large"
-          sx={{ mt: 3 }}
-          variant="contained"
-          // onClick={formik.handleSubmit}
-          type="submit"
-          disabled={disabled}
-        >
-          Complete and pay
-        </Button>
-        <Box sx={{ mt: 1 }}>
-          <StripeLogoLink />
-        </Box>
-      </form>
-    </Container>
-  );
-};
+import { useFormik, FormikProps } from "formik";
+import * as Yup from "yup";
+import { ChangeEventHandler, useEffect } from "react";
+import { PropsWithChildren, useState } from "react";
+import {
+  AddressCityField,
+  AddressOrganizationNameField,
+  AddressCountryField,
+  AddressPostalCodeField,
+  AddressRegionField,
+  AddressStreetField,
+  AddressEmailField,
+  AddressValues,
+} from "./Address";
+import {
+  allCountries,
+  allCountriesReverse,
+  getPostalCodeDefault,
+} from "@springmicro/utils/address";
+import { Box, Button, Container, TextField, Typography } from "@mui/material";
+import Cards from "react-credit-cards-2";
+import { FocusEventHandler } from "react";
+import {
+  formatCreditCardNumber,
+  formatCVC,
+  formatExpirationDate,
+  splitMonthYear,
+  expiryDateHasNotPassed,
+} from "@springmicro/utils/payment";
+
+// moved to index.ts
+// import "react-credit-cards-2/dist/es/styles-compiled.css";
+import { StripeLogoLink } from "./ProviderLogos";
+
+type CCFocus = "number" | "name" | "cvc" | "expiry";
+
+export type CreditCardValues = {
+  cvc: string;
+  expiry: string;
+  focus: CCFocus;
+  name: string;
+  number: string;
+};
+
+export type AddCardProps = {
+  contact?: {
+    organization?: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+  };
+  stacked?: boolean;
+  error?: string;
+  address?: boolean;
+  onSubmit?: (
+    values: CreditCardValues & Partial<AddressValues>
+  ) => Promise<any>;
+};
+
+export const AddCard = ({
+  contact,
+  error,
+  stacked = false,
+  address = true,
+  onSubmit,
+}: AddCardProps) => {
+  const [disabled, setDisabled] = useState(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 ? allCountries[initialCountry] : "",
+    email: contact?.email ?? "",
+    region: "",
+    line1: "",
+    line2: "",
+    organization: contact?.organization ?? "",
+    city: "",
+    postal_code: getPostalCodeDefault(initialCountry),
+  } as AddressValues;
+
+  // const initialValues = { ...initialValuesBase, ...initialValuesAddress }
+  const initialValues = 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) => {
+      setDisabled(true);
+      const values = { ...v };
+      if (disabled) {
+        setDisabled(false);
+        throw new Error("Attempted to submit an invalid form.");
+      }
+      if (onSubmit) {
+        if (address) {
+          // match backend
+          // @ts-expect-error value exists
+          values["street_address"] = values.line2
+            ? // @ts-expect-error value exists
+              `${values.line1}\n${values.line2}`
+            : // @ts-expect-error value exists
+              values.line1;
+          // @ts-expect-error value exists
+          values["locality"] = values.city;
+          // @ts-expect-error value exists
+          delete values.line1;
+          // @ts-expect-error value exists
+          delete values.line2;
+          // @ts-expect-error value exists
+          delete values.city;
+          // @ts-expect-error value exists
+          if (Object.keys(allCountriesReverse).includes(values.country)) {
+            // @ts-expect-error value exists
+            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 onSubmit(values);
+        setDisabled(false);
+      } else {
+        setDisabled(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(() => {
+    setDisabled(Object.keys(formik.errors).length > 0);
+  }, [formik.errors]);
+
+  return (
+    <Container id="paymentMethodForm">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          formik.handleSubmit(e);
+        }}
+      >
+        <Box
+          sx={
+            stacked
+              ? {}
+              : {
+                  display: "flex",
+                  flexDirection: { xs: "column", sm: "row" },
+                  gap: "1em",
+                }
+          }
+        >
+          <Cards
+            {...(formik.values as CreditCardValues)}
+            focused={formik.values.focus || "number"}
+          />
+
+          <div>
+            <TextField
+              sx={stacked ? { mt: 2 } : {}}
+              fullWidth
+              type="tel"
+              name="number"
+              label="Card Number"
+              required
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.number}
+              error={Boolean(formik.touched.number && formik.errors.number)}
+              helperText={formik.touched.number && formik.errors.number}
+            />
+            <TextField
+              sx={{ mt: 2 }}
+              fullWidth
+              type="text"
+              name="name"
+              label="Name on Card"
+              required
+              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}
+            />
+            <TextField
+              sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
+              type="tel"
+              name="expiry"
+              label="Valid Thru"
+              placeholder="MM/YY"
+              inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
+              required
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.expiry}
+              error={Boolean(formik.touched.expiry && formik.errors.expiry)}
+              helperText={
+                (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
+              }
+            />
+            <TextField
+              sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
+              type="tel"
+              name="cvc"
+              label="CVC"
+              required
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.cvc}
+              error={Boolean(formik.touched.cvc && formik.errors.cvc)}
+              helperText={formik.touched.cvc && formik.errors.cvc}
+            />
+          </div>
+          {/* {formik.errors.submit && (
+        <Typography color="error" sx={{ mt: 2 }} variant="body2">
+          {formik.errors.submit}
+        </Typography>
+      )} */}
+        </Box>
+        <Box>
+          {!address ? null : (
+            <Box>
+              <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
+                Billing Address
+              </Typography>
+              <AddressCountryField formik={formik} name="country" />
+              <AddressEmailField formik={formik} name="email" sx={{ mt: 2 }} />
+              <AddressOrganizationNameField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="organization"
+              />
+              <AddressStreetField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="line1"
+                lineNo="1"
+              />
+              <AddressStreetField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="line2"
+                lineNo="2"
+                required={false}
+              />
+              <AddressCityField sx={{ mt: 2 }} formik={formik} name="city" />
+              <AddressRegionField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="region"
+              />
+              <AddressPostalCodeField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="postal_code"
+              />
+            </Box>
+          )}
+        </Box>
+        {error && (
+          <Typography color="error" sx={{ mt: 2 }} variant="body2">
+            {error}
+          </Typography>
+        )}
+        <Button
+          size="large"
+          sx={{ mt: 3 }}
+          variant="contained"
+          // onClick={formik.handleSubmit}
+          type="submit"
+          disabled={disabled}
+        >
+          Complete and pay
+        </Button>
+        <Box sx={{ mt: 1 }}>
+          <StripeLogoLink />
+        </Box>
+      </form>
+    </Container>
+  );
+};