@springmicro/cart 0.3.2 → 0.3.5

package/src/checkout/index.tsx

@@ -0,0 +1,161 @@
+import "./ReviewCartAndCalculateTaxes.css";
+import { useStore } from "@nanostores/react";
+import { useEffect, useState } from "react";
+import { Typography } from "@mui/material";
+import { cartStore, clearCart } from "../utils/storage";
+import { StatusBar } from "./components/StatusBar";
+import ReviewAndCalculateTaxes from "./ReviewCartAndCalculateTaxes";
+import Invoice from "./components/Invoice";
+
+export default function Checkout({
+  apiBaseUrl,
+  taxProvider,
+  emptyCartLink = "",
+  disableProductLink = false,
+  disableMissingImage = false,
+}: {
+  apiBaseUrl: string;
+  taxProvider: string;
+  emptyCartLink?: string;
+  disableProductLink?: boolean;
+  disableMissingImage?: boolean;
+}) {
+  const cart = JSON.parse(useStore(cartStore));
+
+  const [prices, setPrices] = useState({});
+  const [subtotal, setSubtotal] = useState("Loading prices...");
+  const taxState = useState({ tax_amount: "TBD" });
+  const shipping = 0;
+  const discount = 0;
+
+  const [status, setStatus] = useState(0);
+  const [order, setOrder] = useState(undefined);
+  const [successData, setSuccessData] = useState(null);
+
+  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
+                : 0 // normally this should be set to 1 but we need to ensure it sends card data to the payment provider and that data is likely lost on refresh.
+            );
+          })
+      );
+    }
+  }, []);
+
+  // build pricing list
+  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]);
+
+  useEffect(() => {
+    setSubtotal(
+      cart.items
+        .map((product) => prices[product.price_id]?.unit_amount)
+        .reduce((p, c) => (c ? p + c : p), 0)
+    );
+  }, [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
+         * Manage cart and enter in payment details
+         *
+         * status === 1
+         * Review taxes and shipping
+         *
+         * status === 2
+         * Order has been place. Invoice for printing.
+         *
+         */}
+
+        {status != 2 && (
+          <ReviewAndCalculateTaxes
+            subtotal={subtotal}
+            discount={discount}
+            shipping={shipping}
+            taxProvider={taxProvider}
+            taxState={taxState}
+            statusState={[status, setStatus]}
+            cart={cart}
+            prices={prices}
+            apiBaseUrl={apiBaseUrl}
+            orderState={[order, setOrder]}
+            disableProductLink={disableProductLink}
+            disableMissingImage={disableMissingImage}
+            setSuccessData={setSuccessData}
+            onPlacement={() => {
+              clearCart();
+              setStatus(2);
+            }}
+          />
+        )}
+        {status === 2 && order !== undefined && (
+          <Invoice order={order} successData={successData} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/index.css

@@ -1,5 +1,5 @@
-@media print {
-  #paymentMethodForm {
-    display: none !important;
-  }
-}
+@media print {
+  #paymentMethodForm {
+    display: none !important;
+  }
+}

package/src/index.ts

@@ -1,35 +1,36 @@
-import CartButton from "./CartButton";
-import {
-  cartStore,
-  addToCart,
-  removeFromCart,
-  clearCart,
-  setOrder,
-} from "./utils/storage";
-import type { Cart, CartProduct } from "./types";
-import AddToCartForm from "./AddToCartForm";
-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,
-  Order,
-  AddCard,
-  type AddCardProps,
-  cartStore,
-  CartButton,
-  type Cart,
-  type CartProduct,
-  addToCart,
-  removeFromCart,
-  clearCart,
-  AddToCartForm,
-  setOrder,
-  ProductCard,
-  CheckoutList,
-};
+import CartButton from "./CartButton";
+import {
+  cartStore,
+  addToCart,
+  removeFromCart,
+  clearCart,
+  setOrder,
+} from "./utils/storage";
+import type { Cart, CartProduct } from "./types";
+import AddToCartForm from "./AddToCartForm";
+import { AddCard, AddCardProps } from "./checkout/components/AddCard";
+// import Order from "./checkout/components/Order";
+import Invoice from "./checkout/components/Invoice";
+import "react-credit-cards-2/dist/es/styles-compiled.css";
+import "./index.css";
+import ProductCard from "./ProductCard";
+import ReviewCartAndCalculateTaxes from "./checkout/ReviewCartAndCalculateTaxes";
+import Checkout from "./checkout";
+
+export {
+  Checkout,
+  Invoice,
+  AddCard,
+  type AddCardProps,
+  cartStore,
+  CartButton,
+  type Cart,
+  type CartProduct,
+  addToCart,
+  removeFromCart,
+  clearCart,
+  AddToCartForm,
+  setOrder,
+  ProductCard,
+  ReviewCartAndCalculateTaxes,
+};

package/src/types.d.ts

@@ -1,56 +1,56 @@
-export interface Cart {
-  authentication: {
-    loggedIn: boolean;
-    user_id?: number | string;
-  };
-  items: CartProduct[];
-  order?: {
-    id: number;
-    reference: string;
-  };
-}
-export type CartProduct = {
-  product_id: number | string;
-  price_id: number | string;
-  quantity?: number;
-  // Used in local cart, delete when sent to api
-  name: string;
-  image?: string;
-};
-
-type CartContextType = {
-  cart: Cart;
-  addToCart: (p: CartProduct) => void;
-  removeFromCart: (i: number) => void;
-  clearCart: () => void;
-};
-
-type ApiCartResponse = {
-  cart: string;
-  id: any;
-  user_id: number | string;
-};
-
-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;
-};
+export interface Cart {
+  authentication: {
+    loggedIn: boolean;
+    user_id?: number | string;
+  };
+  items: CartProduct[];
+  order?: {
+    id: number;
+    reference: string;
+  };
+}
+export type CartProduct = {
+  product_id: number | string;
+  price_id: number | string;
+  quantity?: number;
+  // Used in local cart, delete when sent to api
+  name: string;
+  image?: string;
+};
+
+type CartContextType = {
+  cart: Cart;
+  addToCart: (p: CartProduct) => void;
+  removeFromCart: (i: number) => void;
+  clearCart: () => void;
+};
+
+type ApiCartResponse = {
+  cart: string;
+  id: any;
+  user_id: number | string;
+};
+
+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

@@ -1,67 +1,67 @@
-function postInit(body: any): RequestInit {
-  const init: RequestInit = {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-  };
-  if (typeof body === "string") {
-    return { ...init, body };
-  }
-  return { ...init, body: JSON.stringify(body) };
-}
-
-async function dataOrResponse(res: Response) {
-  if (res.status === 200) {
-    return await res.json();
-  } else {
-    return res;
-  }
-}
-
-async function dataOr404(res: Response) {
-  if (res.status === 200) {
-    return await res.json();
-  } else {
-    return new Response(null, { status: 404 });
-  }
-}
-
-export async function getOrder(
-  apiBaseUrl: string,
-  id: string,
-  orderReference: string
-) {
-  const res = await fetch(
-    `${apiBaseUrl}/api/ecommerce/orders/${id}/reference/${orderReference}`
-  );
-  return await dataOr404(res);
-}
-
-export async function getInvoice(
-  apiBaseUrl: string,
-  id: string,
-  orderReference: string
-) {
-  const res = await fetch(
-    `${apiBaseUrl}/api/ecommerce/invoice/${id}/reference/${orderReference}`
-  );
-  return await dataOr404(res);
-}
-
-export async function postCheckout(
-  apiBaseUrl: string,
-  id: string,
-  orderReference: string,
-  body: object,
-  paymentProvider: string,
-  invoiceId?: string
-): Promise<object | Response> {
-  const url = new URL(
-    `${apiBaseUrl}/api/ecommerce/checkout/${id}/${orderReference}`
-  );
-  url.searchParams.set("payment_provider", paymentProvider);
-  if (invoiceId !== undefined) {
-    url.searchParams.set("invoice_id", invoiceId);
-  }
-  const res = await fetch(url, postInit(body));
-  return await dataOrResponse(res);
-}
+function postInit(body: any): RequestInit {
+  const init: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+  };
+  if (typeof body === "string") {
+    return { ...init, body };
+  }
+  return { ...init, body: JSON.stringify(body) };
+}
+
+async function dataOrResponse(res: Response) {
+  if (res.status === 200) {
+    return await res.json();
+  } else {
+    return res;
+  }
+}
+
+async function dataOr404(res: Response) {
+  if (res.status === 200) {
+    return await res.json();
+  } else {
+    return new Response(null, { status: 404 });
+  }
+}
+
+export async function getOrder(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string
+) {
+  const res = await fetch(
+    `${apiBaseUrl}/api/ecommerce/orders/${id}/reference/${orderReference}`
+  );
+  return await dataOr404(res);
+}
+
+export async function getInvoice(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string
+) {
+  const res = await fetch(
+    `${apiBaseUrl}/api/ecommerce/invoice/${id}/reference/${orderReference}`
+  );
+  return await dataOr404(res);
+}
+
+export async function postCheckout(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string,
+  body: object,
+  paymentProvider: string,
+  invoiceId?: string
+): Promise<object | Response> {
+  const url = new URL(
+    `${apiBaseUrl}/api/ecommerce/checkout/${id}/${orderReference}`
+  );
+  url.searchParams.set("payment_provider", paymentProvider);
+  if (invoiceId !== undefined) {
+    url.searchParams.set("invoice_id", invoiceId);
+  }
+  const res = await fetch(url, postInit(body));
+  return await dataOrResponse(res);
+}

package/src/utils/cartAuthHandler.ts

@@ -1,50 +1,50 @@
-import { defaultCartValue } from ".";
-import { ApiCartResponse, Cart } from "../types";
-import { Storage } from "unstorage";
-
-export function cartAuthHandler(
-  cartState: [Cart, React.Dispatch<React.SetStateAction<Cart>>],
-  storage: {
-    api: Storage<any>;
-    local: Storage<any>;
-  } | null,
-  userId: number | string | undefined,
-  prevUserId: number | string | undefined
-) {
-  const [cart, setCart] = cartState;
-  if (storage === null) return () => {}; // storage can be null.
-
-  if (userId === prevUserId) return;
-
-  if (userId === undefined) {
-    // logout
-    setCart(defaultCartValue);
-    return;
-  }
-
-  // login
-  if (cart.items.length > 0) {
-    setCart((c) => ({
-      ...c,
-      authentication: {
-        loggedIn: true,
-        user_id: userId,
-      },
-    }));
-    return;
-  }
-  storage.api
-    .getItem(`${userId}`)
-    .then((c2: ApiCartResponse) => {
-      if (!c2) return;
-
-      setCart({
-        items: JSON.parse(c2.cart),
-        authentication: {
-          loggedIn: true,
-          user_id: c2.user_id,
-        },
-      });
-    })
-    .catch(() => {});
-}
+import { defaultCartValue } from ".";
+import { ApiCartResponse, Cart } from "../types";
+import { Storage } from "unstorage";
+
+export function cartAuthHandler(
+  cartState: [Cart, React.Dispatch<React.SetStateAction<Cart>>],
+  storage: {
+    api: Storage<any>;
+    local: Storage<any>;
+  } | null,
+  userId: number | string | undefined,
+  prevUserId: number | string | undefined
+) {
+  const [cart, setCart] = cartState;
+  if (storage === null) return () => {}; // storage can be null.
+
+  if (userId === prevUserId) return;
+
+  if (userId === undefined) {
+    // logout
+    setCart(defaultCartValue);
+    return;
+  }
+
+  // login
+  if (cart.items.length > 0) {
+    setCart((c) => ({
+      ...c,
+      authentication: {
+        loggedIn: true,
+        user_id: userId,
+      },
+    }));
+    return;
+  }
+  storage.api
+    .getItem(`${userId}`)
+    .then((c2: ApiCartResponse) => {
+      if (!c2) return;
+
+      setCart({
+        items: JSON.parse(c2.cart),
+        authentication: {
+          loggedIn: true,
+          user_id: c2.user_id,
+        },
+      });
+    })
+    .catch(() => {});
+}

package/src/utils/index.ts

@@ -1,28 +1,28 @@
-import { Cart, PathDetailsType } from "../types";
-
-export const defaultCartValue: Cart = {
-  authentication: {
-    loggedIn: false,
-  },
-  items: [],
-};
-
-export function fetchFromCartApi(
-  method: "GET" | "PUT" | "DELETE",
-  { baseUrl, userId }: PathDetailsType,
-  body?: string
-) {
-  return fetch(`${baseUrl}/api/ecommerce/cart/${userId}`, {
-    method,
-    body,
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
-}
-
-export function pathDetailsIsFullyDefined(pathDetails: PathDetailsType) {
-  if (pathDetails.userId === undefined) return false;
-  if (pathDetails.baseUrl === undefined) return false;
-  return true;
-}
+import { Cart, PathDetailsType } from "../types";
+
+export const defaultCartValue: Cart = {
+  authentication: {
+    loggedIn: false,
+  },
+  items: [],
+};
+
+export function fetchFromCartApi(
+  method: "GET" | "PUT" | "DELETE",
+  { baseUrl, userId }: PathDetailsType,
+  body?: string
+) {
+  return fetch(`${baseUrl}/api/ecommerce/cart/${userId}`, {
+    method,
+    body,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+
+export function pathDetailsIsFullyDefined(pathDetails: PathDetailsType) {
+  if (pathDetails.userId === undefined) return false;
+  if (pathDetails.baseUrl === undefined) return false;
+  return true;
+}