@springmicro/cart 0.5.1 → 0.5.2

package/src/checkout/index.tsx

@@ -1,165 +1,165 @@
-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";
-import { FormikConfig } from "formik";
-
-export default function Checkout({
-  apiBaseUrl,
-  taxProvider,
-  emptyCartLink = "",
-  disableProductLink = false,
-  disableMissingImage = false,
-  CollectExtraInfo,
-}: {
-  apiBaseUrl: string;
-  taxProvider: string;
-  emptyCartLink?: string;
-  disableProductLink?: boolean;
-  disableMissingImage?: boolean;
-  CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
-}) {
-  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);
-            }}
-            CollectExtraInfo={CollectExtraInfo}
-          />
-        )}
-        {status === 2 && order !== undefined && (
-          <Invoice order={order} successData={successData} />
-        )}
-      </div>
-    </div>
-  );
-}
+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";
+import { FormikConfig } from "formik";
+
+export default function Checkout({
+  apiBaseUrl,
+  taxProvider,
+  emptyCartLink = "",
+  disableProductLink = false,
+  disableMissingImage = false,
+  CollectExtraInfo,
+}: {
+  apiBaseUrl: string;
+  taxProvider: string;
+  emptyCartLink?: string;
+  disableProductLink?: boolean;
+  disableMissingImage?: boolean;
+  CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
+}) {
+  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);
+            }}
+            CollectExtraInfo={CollectExtraInfo}
+          />
+        )}
+        {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,36 +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/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,
-};
+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);
+}