@springmicro/cart 0.3.2 → 0.3.4

package/src/checkout/CheckoutList.tsx

@@ -1,264 +1,272 @@
-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>
-  );
-}
+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>
+  );
+}