@springmicro/cart 0.2.0 → 0.3.0

package/src/checkout/CheckoutList.tsx

@@ -0,0 +1,264 @@
+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,
+}: {
+  apiBaseUrl: string;
+  emptyCartLink?: string;
+  disableProductLink?: boolean;
+}) {
+  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}
+          />
+        )}
+        {status > 0 && order && (
+          <Checkout
+            apiBaseUrl={apiBaseUrl}
+            order={order}
+            onPlacement={() => {
+              clearCart();
+              setStatus(2);
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CartSection({
+  total,
+  setStatus,
+  cart,
+  prices,
+  apiBaseUrl,
+  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: {
+          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/{Address.tsx → components/Address.tsx}

@@ -238,7 +238,7 @@ export function AddressPostalCodeField({
   ] as Alpha2Code;
 
   React.useEffect(() => {
-    if (!!getPostalCodeDefault(country2code)) {
+    if (getPostalCodeDefault(country2code)) {
       formik
         .setFieldValue(name, getPostalCodeDefault(country2code))
         .then(() => formik.setFieldTouched(name, true));
@@ -256,7 +256,7 @@ export function AddressPostalCodeField({
       onBlur={formik.handleBlur}
       required={true}
       helperText={
-        !!getPostalCodeDefault(country2code)
+        getPostalCodeDefault(country2code)
           ? 'Our records indicate that your country does not have a postal code system, so "00000" will be used by default.'
           : ""
       }

package/src/checkout/{Billing.tsx → components/Billing.tsx}

@@ -126,30 +126,33 @@ export const AddCard = ({
           }
         : validationSchemaBase
     ),
-    onSubmit: async (values, helpers) => {
+    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-ignore
+          // @ts-expect-error value exists
           values["street_address"] = values.line2
-            ? // @ts-ignore
+            ? // @ts-expect-error value exists
               `${values.line1}\n${values.line2}`
-            : // @ts-ignore
+            : // @ts-expect-error value exists
               values.line1;
-          // @ts-ignore
+          // @ts-expect-error value exists
           values["locality"] = values.city;
-          // @ts-ignore
+          // @ts-expect-error value exists
           delete values.line1;
-          // @ts-ignore
+          // @ts-expect-error value exists
           delete values.line2;
-          // @ts-ignore
+          // @ts-expect-error value exists
           delete values.city;
-          // @ts-ignore
+          // @ts-expect-error value exists
           if (Object.keys(allCountriesReverse).includes(values.country)) {
-            // @ts-ignore
+            // @ts-expect-error value exists
             values.country = allCountriesReverse[values.country];
           }
         }
@@ -160,6 +163,9 @@ export const AddCard = ({
         delete values.number;
 
         const res = await onSubmit(values);
+        setDisabled(false);
+      } else {
+        setDisabled(false);
       }
     },
   });
@@ -194,7 +200,7 @@ export const AddCard = ({
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          formik.handleSubmit();
+          formik.handleSubmit(e);
         }}
       >
         <Box
@@ -332,10 +338,11 @@ export const AddCard = ({
           size="large"
           sx={{ mt: 3 }}
           variant="contained"
+          // onClick={formik.handleSubmit}
           type="submit"
           disabled={disabled}
         >
-          Continue
+          Complete and pay
         </Button>
         <Box sx={{ mt: 1 }}>
           <StripeLogoLink />

package/src/checkout/components/CartProductCard.css

@@ -0,0 +1,67 @@
+.product-card {
+  width: 500px;
+  /* display: flex;
+  flex-direction: row;
+  justify-content: space-between; */
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  gap: 0.5rem;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+  min-height: 48px;
+  flex-shrink: 0;
+}
+
+.product-card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.left-section {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.left-section > img,
+.missing-image {
+  min-height: 100%;
+  max-height: 100px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.missing-image {
+  background-color: rgb(222, 222, 222);
+}
+
+.two-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.two-row :nth-child(1) {
+  font-size: 20px;
+}
+
+.two-row :nth-child(2) {
+  font-size: 14px;
+}
+
+.two-row > * {
+  margin: 0;
+}
+
+.remove-button {
+  color: transparent !important;
+  transition: all 0.2s !important;
+}
+
+.product-card:hover .remove-button {
+  color: red !important;
+}

package/src/checkout/components/CartProductCard.tsx

@@ -0,0 +1,80 @@
+import "./CartProductCard.css";
+import { Tooltip, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { CartProduct } from "../../types";
+import { removeFromCart } from "../../utils/storage";
+
+export function CartProductCard({
+  product,
+  i,
+  price,
+  disableProductLink = false,
+}: {
+  product: CartProduct;
+  i: number;
+  price: any;
+  disableProductLink?: boolean;
+}) {
+  const [hoverDelete, setHoverDelete] = React.useState(false);
+  console.log(product);
+  return (
+    <a
+      className="product-card"
+      href={
+        disableProductLink || hoverDelete
+          ? undefined
+          : `/product/${product.product_id}`
+      }
+    >
+      <div className="left-section">
+        {product.image ? <img /> : <div className="missing-image"></div>}
+        <div className="two-row">
+          <Typography>{product.name}</Typography>
+          <Typography>
+            {price
+              ? `$${(price.unit_amount / 100).toFixed(2)}${
+                  price.recurring
+                    ? `/${
+                        price.recurring.interval_count > 1
+                          ? `${price.recurring.interval_count} `
+                          : ""
+                      }${price.recurring.interval}${
+                        price.recurring.interval_count > 1 ? "s" : ""
+                      }`
+                    : ""
+                }`
+              : "Loading price..."}
+          </Typography>
+        </div>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexGrow: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Tooltip
+          title="Remove from cart"
+          onMouseEnter={() => {
+            setHoverDelete(true);
+          }}
+          onMouseLeave={() => {
+            setHoverDelete(false);
+          }}
+        >
+          <IconButton
+            className="remove-button"
+            onClick={() => {
+              removeFromCart(i);
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+    </a>
+  );
+}

package/src/checkout/{index.tsx → components/index.tsx}

@@ -1,6 +1,6 @@
 import { AddCard, type AddCardProps } from "./Billing";
 import Order from "./Order";
-import { postCheckout } from "../utils/api";
+import { postCheckout } from "../../utils/api";
 import React from "react";
 import { Alert, Container, Typography, CircularProgress } from "@mui/material";
 
@@ -8,12 +8,14 @@ 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);
@@ -34,10 +36,13 @@ export default function Checkout({
     } 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);
@@ -47,7 +52,8 @@ export default function Checkout({
 
   if (
     successData !== null ||
-    currentUrl.searchParams.get("showReceipt") ||
+    // currentUrl.searchParams.get("showReceipt")
+    order.charge_id ||
     !["pending", "awaiting_payment"].includes(order.status)
   ) {
     const print = (
@@ -57,6 +63,7 @@ export default function Checkout({
           window.print();
           return false;
         }}
+        style={{ textDecoration: "underline" }}
       >
         print
       </a>
@@ -73,10 +80,10 @@ export default function Checkout({
       );
     return (
       <>
-        <Order order={order} invoiceId={invoiceId} />
         <Container>
           <Alert severity="success">{text}</Alert>
         </Container>
+        <Order order={order} invoiceId={invoiceId} />
       </>
     );
   }

package/src/index.ts

@@ -4,14 +4,17 @@ import {
   addToCart,
   removeFromCart,
   clearCart,
+  setOrder,
 } from "./utils/storage";
 import type { Cart, CartProduct } from "./types";
 import AddToCartForm from "./AddToCartForm";
-import { AddCard, AddCardProps } from "./checkout/Billing";
-import Order from "./checkout/Order";
-import Checkout from "./checkout";
+import { AddCard, AddCardProps } from "./checkout/components/Billing";
+import Order from "./checkout/components/Order";
+import Checkout from "./checkout/components";
 import "react-credit-cards-2/dist/es/styles-compiled.css";
 import "./index.css";
+import ProductCard from "./ProductCard";
+import CheckoutList from "./checkout/CheckoutList";
 
 export {
   Checkout,
@@ -20,10 +23,13 @@ export {
   type AddCardProps,
   cartStore,
   CartButton,
-  Cart,
-  CartProduct,
+  type Cart,
+  type CartProduct,
   addToCart,
   removeFromCart,
   clearCart,
   AddToCartForm,
+  setOrder,
+  ProductCard,
+  CheckoutList,
 };

package/src/types.d.ts

@@ -3,13 +3,19 @@ export interface Cart {
     loggedIn: boolean;
     user_id?: number | string;
   };
-  cart: CartProduct[];
+  items: CartProduct[];
+  order?: {
+    id: number;
+    reference: string;
+  };
 }
 export type CartProduct = {
-  id: number | string;
-  name: string;
+  product_id: number | string;
+  price_id: number | string;
   quantity?: number;
-  price?: number;
+  // Used in local cart, delete when sent to api
+  name: string;
+  image?: string;
 };
 
 type CartContextType = {
@@ -29,3 +35,22 @@ export type PathDetailsType = {
   baseUrl?: string;
   userId?: string | number;
 };
+
+export type Product = {
+  id: string | number;
+  name: string;
+  /**  v  Parses to @type {ProductPricing}  v  */
+  pricing: string;
+  description?: string;
+} & unknown;
+
+export type ProductPricing = {
+  id: number | string;
+  unit_amount: number; // in cents
+  recurring?: {
+    interval: "month" | "week" | "day";
+    interval_count: number;
+  };
+  tier_label?: string;
+  tier_description?: string;
+};

package/src/utils/api.ts

@@ -62,7 +62,6 @@ export async function postCheckout(
   if (invoiceId !== undefined) {
     url.searchParams.set("invoice_id", invoiceId);
   }
-  console.log(body);
   const res = await fetch(url, postInit(body));
   return await dataOrResponse(res);
 }

package/src/utils/cartAuthHandler.ts

@@ -23,7 +23,7 @@ export function cartAuthHandler(
   }
 
   // login
-  if (cart.cart.length > 0) {
+  if (cart.items.length > 0) {
     setCart((c) => ({
       ...c,
       authentication: {
@@ -39,7 +39,7 @@ export function cartAuthHandler(
       if (!c2) return;
 
       setCart({
-        cart: JSON.parse(c2.cart),
+        items: JSON.parse(c2.cart),
         authentication: {
           loggedIn: true,
           user_id: c2.user_id,

package/src/utils/index.ts

@@ -4,7 +4,7 @@ export const defaultCartValue: Cart = {
   authentication: {
     loggedIn: false,
   },
-  cart: [],
+  items: [],
 };
 
 export function fetchFromCartApi(