@springmicro/cart 0.3.2 → 0.3.5

package/src/checkout/components/Billing.tsx

@@ -1,353 +0,0 @@
-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>
-  );
-};

package/src/checkout/components/Order.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import {
-  Container,
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-} from "@mui/material";
-
-const Order = ({ order, invoiceId }) => {
-  // Formatter for currency in USD
-  const formatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-  });
-
-  return (
-    <Container>
-      <Typography variant="h4" gutterBottom>
-        {invoiceId ? `Invoice #${invoiceId}` : "Order"}
-      </Typography>
-      <Typography variant="subtitle1">Reference: {order.reference}</Typography>
-      <Typography variant="subtitle1">
-        Date: {new Date(order.date).toLocaleDateString()}
-      </Typography>
-      <Typography variant="subtitle1">Status: {order.status}</Typography>
-      {order.customer ? (
-        <Typography variant="subtitle1">
-          {order.customer.first_name} {order.customer.last_name}
-        </Typography>
-      ) : (
-        <Typography variant="subtitle1">
-          Customer ID: {order.customer_id}
-        </Typography>
-      )}
-
-      <TableContainer component={Paper} sx={{ my: 2 }}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>Item ID</TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell>Description</TableCell>
-              <TableCell>Quantity</TableCell>
-              <TableCell>Unit Price</TableCell>
-              <TableCell>Total Price</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {order.basket.map((item) => (
-              <TableRow key={item.item_id}>
-                <TableCell>{item.item_id}</TableCell>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>{item.description || "-"}</TableCell>
-                <TableCell>{item.quantity}</TableCell>
-                <TableCell>
-                  {formatter.format(item.unit_price_cents / 100)}
-                </TableCell>
-                <TableCell>
-                  {formatter.format(
-                    (item.quantity * item.unit_price_cents) / 100
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-
-      <Typography variant="h6" gutterBottom>
-        Subtotal (excl. taxes): {formatter.format(order.total_ex_taxes / 100)}
-      </Typography>
-      <Typography variant="h6" gutterBottom>
-        Taxes: {formatter.format(order.taxes / 100)}
-      </Typography>
-      <Typography variant="h6" gutterBottom>
-        Delivery Fees:{" "}
-        {formatter.format(
-          order.delivery_fees ? order.delivery_fees / 100 : 0.0
-        )}
-      </Typography>
-      <Typography variant="h5" gutterBottom sx={{ mb: 4 }}>
-        Total: {formatter.format(order.total / 100)}
-      </Typography>
-    </Container>
-  );
-};
-
-export default Order;

package/src/checkout/components/index.tsx

@@ -1,104 +0,0 @@
-import { AddCard, type AddCardProps } from "./Billing";
-import Order from "./Order";
-import { postCheckout } from "../../utils/api";
-import React from "react";
-import { Alert, Container, Typography, CircularProgress } from "@mui/material";
-
-type CheckoutProps = AddCardProps & {
-  order: any;
-  apiBaseUrl: string;
-  invoiceId?: string;
-  onPlacement?: () => void;
-};
-
-export default function Checkout({
-  order,
-  apiBaseUrl,
-  invoiceId,
-  onPlacement,
-}: CheckoutProps) {
-  const currentUrl = new URL(window.location.href);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [successData, setSuccessData] = React.useState<any | null>(null);
-  const onSubmit = async (values: any) => {
-    setIsSubmitting(true);
-    const data = await postCheckout(
-      apiBaseUrl,
-      order.id,
-      order.reference,
-      values,
-      "stripe",
-      invoiceId
-    );
-
-    if (data instanceof Response) {
-      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);
-    }
-    setIsSubmitting(false);
-  };
-
-  if (
-    successData !== null ||
-    // currentUrl.searchParams.get("showReceipt")
-    order.charge_id ||
-    !["pending", "awaiting_payment"].includes(order.status)
-  ) {
-    const print = (
-      <a
-        href="#"
-        onClick={() => {
-          window.print();
-          return false;
-        }}
-        style={{ textDecoration: "underline" }}
-      >
-        print
-      </a>
-    );
-    const text =
-      successData !== null ? (
-        <>
-          Payment received! An email was sent to{" "}
-          <strong>{successData.billing_information.email}</strong>. You can also{" "}
-          {print} this page for your records.
-        </>
-      ) : (
-        <>Payment received! You can {print} this page for your records.</>
-      );
-    return (
-      <>
-        <Container>
-          <Alert severity="success">{text}</Alert>
-        </Container>
-        <Order order={order} invoiceId={invoiceId} />
-      </>
-    );
-  }
-  return (
-    <>
-      <Order order={order} invoiceId={invoiceId} />
-      {isSubmitting ? (
-        <Container>
-          <Typography>
-            <CircularProgress color="primary" /> Submitting...
-          </Typography>
-        </Container>
-      ) : (
-        <AddCard contact={order.customer} onSubmit={onSubmit} />
-      )}
-    </>
-  );
-}