@springmicro/cart 0.3.4 → 0.3.5

package/src/checkout/CheckoutList.tsx

@@ -1,272 +0,0 @@
-import "./CheckoutList.css";
-import { useStore } from "@nanostores/react";
-import { CartProductCard } from "./components/CartProductCard";
-import React from "react";
-import { Button, Tooltip, Typography } from "@mui/material";
-import {
-  cartStore,
-  clearCart,
-  setOrder as cartSetOrder,
-} from "../utils/storage";
-import Checkout from "./components";
-
-export default function CheckoutList({
-  apiBaseUrl,
-  emptyCartLink = "",
-  disableProductLink = false,
-  tax_rate_id,
-}: {
-  apiBaseUrl: string;
-  emptyCartLink?: string;
-  disableProductLink?: boolean;
-  tax_rate_id?: number | string;
-}) {
-  const cart = JSON.parse(useStore(cartStore));
-
-  const [prices, setPrices] = React.useState({});
-  const [total, setTotal] = React.useState("Loading prices...");
-
-  const [status, setStatus] = React.useState(0);
-  const [order, setOrder] = React.useState(undefined);
-
-  React.useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-
-    const sr = params.get("showReceipt");
-    const oid = params.get("orderId");
-    const or = params.get("orderRef");
-    if (oid && or) {
-      fetch(`${apiBaseUrl}/api/ecommerce/orders/${oid}/reference/${or}`).then(
-        async (res) =>
-          await res.json().then((order) => {
-            setOrder(order);
-            setStatus(
-              order.charge_id ||
-                !["pending", "awaiting_payment"].includes(order.status)
-                ? 2
-                : 1
-            );
-          })
-      );
-    }
-  }, []);
-
-  // build pricing list
-  React.useEffect(() => {
-    // filter out prices that have already been queried
-    const pricesToGet = cart.items
-      .map((c) => c.price_id)
-      .filter(
-        (pId) => Object.keys(prices).findIndex((pKey) => pKey == pId) === -1
-      );
-    if (pricesToGet.length === 0) return;
-
-    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
-      ","
-    )}]}`;
-    fetch(url, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((res) =>
-        res.json().then((data) => {
-          const pricingData = { ...prices };
-
-          data.forEach((p) => {
-            pricingData[p.id] = p;
-          });
-          setPrices(pricingData);
-        })
-      )
-      .catch(() => {});
-  }, [cart]);
-
-  React.useEffect(() => {
-    setTotal(
-      `$${(
-        cart.items
-          .map((product) => prices[product.price_id]?.unit_amount)
-          .reduce((p, c) => (c ? p + c : p), 0) / 100
-      ).toFixed(2)}`
-    );
-  }, [cart, prices]);
-
-  if (status === 0 && cart.items.length === 0)
-    return (
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          flexDirection: "column",
-          gap: 8,
-        }}
-      >
-        <Typography style={{ fontSize: 32, fontWeight: 600 }}>
-          Cart is empty
-        </Typography>
-        <a className="shopping-button" href={`/${emptyCartLink}`}>
-          <Typography>BACK</Typography>
-        </a>
-      </div>
-    );
-
-  return (
-    <div>
-      <StatusBar status={status} />
-      <div>
-        {status === 0 && (
-          <CartSection
-            total={total}
-            setStatus={setStatus}
-            cart={cart}
-            prices={prices}
-            apiBaseUrl={apiBaseUrl}
-            setOrder={setOrder}
-            disableProductLink={disableProductLink}
-            tax_rate_id={tax_rate_id}
-          />
-        )}
-        {status > 0 && order && (
-          <Checkout
-            apiBaseUrl={apiBaseUrl}
-            order={order}
-            onPlacement={() => {
-              clearCart();
-              setStatus(2);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function CartSection({
-  total,
-  setStatus,
-  cart,
-  prices,
-  apiBaseUrl,
-  tax_rate_id,
-  setOrder,
-  disableProductLink,
-}) {
-  function createOrder() {
-    // 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) {
-      fetch(
-        `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`
-      ).then((res) =>
-        res.json().then((order) => {
-          setOrder(order);
-          const currentUrl = new URL(window.location.href);
-          currentUrl.searchParams.set("orderId", order.id);
-          currentUrl.searchParams.set("orderRef", order.reference);
-          window.history.pushState({}, "", currentUrl);
-          setStatus(1);
-        })
-      );
-      return;
-    }
-
-    // Otherwise, create a new order.
-    fetch(apiBaseUrl + "/api/ecommerce/orders", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        customer_id: 1,
-        cart_data: {
-          tax_rate_id:
-            typeof tax_rate_id === "string"
-              ? Number.parseInt(tax_rate_id)
-              : tax_rate_id,
-          items: cart.items.map((li) => ({
-            ...li,
-            name: undefined,
-            image: undefined,
-          })),
-        },
-      }),
-    }).then((res) =>
-      res.json().then((order) => {
-        if (!order) throw "Missing order";
-        setOrder(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);
-        setStatus(1);
-      })
-    );
-  }
-
-  return (
-    <div style={{ display: "flex", justifyContent: "center" }}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          width: 600,
-          alignItems: "center",
-          boxShadow: "0px 2px 5px 2px #dfdfdfff",
-          margin: "4px",
-          padding: "2rem 0",
-          borderRadius: "8px",
-        }}
-      >
-        <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
-          Checkout
-        </Typography>
-        <Tooltip title="Total is pre-tax and includes the first payment for recurring payments.">
-          <Typography style={{ fontSize: "20px" }}>Total: {total}</Typography>
-        </Tooltip>
-        {/* <Button variant="contained" sx={{ mt: 2 }} onClick={createOrder}>
-          Confirm Order
-        </Button> */}
-        <div className="checkout-list">
-          {cart.items.map((p, i) => (
-            <CartProductCard
-              product={p}
-              i={i}
-              price={prices[p.price_id]}
-              disableProductLink={disableProductLink}
-            />
-          ))}
-        </div>
-        <Button variant="contained" sx={{ mt: 2 }} onClick={createOrder}>
-          Confirm Order
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function StatusBar({ status }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-      }}
-    >
-      <div id="status-bar">
-        <Typography className="status-text active">REVIEW</Typography>
-        <div className={"status-bar" + (status > 0 ? " active" : "")}></div>
-        <Typography className={"status-text" + (status > 0 ? " active" : "")}>
-          PAYMENT
-        </Typography>
-        <div className={"status-bar" + (status > 1 ? " active" : "")}></div>
-        <Typography className={"status-text" + (status > 1 ? " active" : "")}>
-          ORDER PLACED
-        </Typography>
-      </div>
-    </div>
-  );
-}

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>
-  );
-};