@springmicro/cart 0.3.2 → 0.3.5

package/src/checkout/components/AddCard.tsx

@@ -0,0 +1,267 @@
+import { useFormik, FormikProps } from "formik";
+import * as Yup from "yup";
+import React, {
+  ChangeEventHandler,
+  useEffect,
+  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";
+
+export 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>;
+  PriceDetails?: JSX.Element;
+  formData?: {
+    formik;
+    handleInputChange;
+    handleInputFocus;
+    formDisabled;
+    formError;
+  };
+};
+
+export const AddCard = ({
+  contact,
+  error,
+  stacked = false,
+  address = true,
+  PriceDetails,
+  formData: {
+    formik,
+    handleInputChange,
+    handleInputFocus,
+    formDisabled,
+    formError,
+  },
+}: AddCardProps) => {
+  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
+          sx={{ display: "flex", flexDirection: "row", gap: 2, width: "100%" }}
+        >
+          <Box sx={{ flexGrow: 1 }}>
+            {!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>
+          <Box
+            sx={{
+              mt: "16px",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              flexGrow: 1,
+            }}
+          >
+            {PriceDetails}
+          </Box>
+        </Box>
+        {error && (
+          <Typography color="error" sx={{ mt: 2 }} variant="body2">
+            {error}
+          </Typography>
+        )}
+        {formError && (
+          <Typography color="red">
+            Could not create order or calculate tax. Please double-check your
+            payment information.
+          </Typography>
+        )}
+        <Button
+          size="large"
+          sx={{ mt: 3 }}
+          variant="contained"
+          // onClick={formik.handleSubmit}
+          type="submit"
+          disabled={formDisabled}
+          color={formError ? "error" : undefined}
+        >
+          Calculate Tax
+        </Button>
+        <Box sx={{ mt: 1 }}>
+          <StripeLogoLink />
+        </Box>
+      </form>
+    </Container>
+  );
+};