@springmicro/cart 0.5.7 → 0.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.7",
+  "version": "0.5.8",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.5.7",
+    "@springmicro/utils": "0.5.8",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "b2df84fd444de6a50ca70ebd8cdbd6196ef0eda4"
+  "gitHead": "893349375763235632effda60aa0c1e20b78ba12"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -71,13 +71,18 @@ async function createOrder(cart, apiBaseUrl) {
   return order;
 }
 
-async function getTax(apiBaseUrl, taxProvider, items, v) {
+async function getTax(apiBaseUrl, taxProvider, items, v, products) {
+  const taxable_items = items.filter(
+    (i) => i.unit_amount > 0 && products[i.product_id].type !== "DONATION"
+  );
+  if (taxable_items.length === 0) return { tax_amount: 0 };
+
   const res = await fetch(
     `${apiBaseUrl}/api/ecommerce/tax?tax_provider=${taxProvider ?? "dummy"}`,
     {
       method: "POST",
       body: JSON.stringify({
-        cart_data: items,
+        cart_data: taxable_items,
         address: {
           country: v.country,
           city: v.locality,
@@ -102,6 +107,7 @@ export default function ReviewAndCalculateTaxes({
   statusState,
   cart,
   prices,
+  products,
   apiBaseUrl,
   orderState,
   disableProductLink,
@@ -126,7 +132,6 @@ export default function ReviewAndCalculateTaxes({
     setFormError(undefined);
     // status === 0 when this is clicked.
     // Creates an order and calculates tax.
-
     Promise.all([
       createOrder(cart, apiBaseUrl),
       getTax(
@@ -344,6 +349,7 @@ export default function ReviewAndCalculateTaxes({
           shipping,
           discount,
           prices,
+          products,
           disableMissingImage,
           disableProductLink,
           formik,

package/src/checkout/components/CartList.tsx

@@ -14,6 +14,7 @@ export function CartList({
   shipping,
   discount,
   prices,
+  products,
   disableMissingImage,
   disableProductLink,
   formik,
@@ -133,16 +134,21 @@ export function CartList({
             </Button>
           )}
           <Box className="checkout-list">
-            {cart.items.map((p, i) => (
-              <CartProductCard
-                product={p}
-                i={i}
-                price={prices[p.price_id]}
-                disableProductLink={disableProductLink}
-                disableMissingImage={disableMissingImage}
-                disableModification={status != 0}
-              />
-            ))}
+            {cart.items.map(
+              (p, i) => (
+                console.log(p),
+                (
+                  <CartProductCard
+                    product={products[p.product_id] ?? p}
+                    i={i}
+                    price={prices[p.price_id]}
+                    disableProductLink={disableProductLink}
+                    disableMissingImage={disableMissingImage}
+                    disableModification={status != 0}
+                  />
+                )
+              )
+            )}
           </Box>
         </Box>
       </Box>

package/src/checkout/components/CartProductCard.tsx

@@ -51,10 +51,14 @@ export function CartProductCard({
                         price.recurring.interval_count > 1 ? "s" : ""
                       }`
                     : ""
-                }`
+                }${product.type === "DONATION" ? " - Donation" : ""}`
               : "Loading price..."}
           </Typography>
         </div>
+        <div className="two-row">
+          <Typography />
+          <Typography variant="caption"></Typography>
+        </div>
       </div>
       <div
         style={{

package/src/checkout/index.tsx

@@ -1,6 +1,6 @@
 import "./ReviewCartAndCalculateTaxes.css";
 import { useStore } from "@nanostores/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Typography } from "@mui/material";
 import { cartStore, clearCart } from "../utils/storage";
 import { StatusBar } from "./components/StatusBar";
@@ -25,8 +25,11 @@ export default function Checkout({
   CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
   defaultValues?: Record<string, any>;
 }) {
-  const cart = JSON.parse(useStore(cartStore));
+  const store = useStore(cartStore);
+  const cart = useMemo(() => JSON.parse(store), [store]);
+  // const cart = JSON.parse(useStore(cartStore));
 
+  const [products, setProducts] = useState({});
   const [prices, setPrices] = useState({});
   const [subtotal, setSubtotal] = useState("Loading prices...");
   const taxState = useState({ tax_amount: "TBD" });
@@ -59,36 +62,74 @@ export default function Checkout({
     }
   }, []);
 
-  // build pricing list
+  // build pricing list and product 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
+        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1
       );
-    if (pricesToGet.length === 0) return;
 
-    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
+    // filter out products that have already been queried
+    const productsToGet = cart.items
+      .map((c) => c.product_id)
+      .filter(
+        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1
+      );
+
+    const priceUrl = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
+      ","
+    )}]}`;
+
+    const productUrl = `${apiBaseUrl}/api/ecommerce/products?filter={'ids':[${productsToGet.join(
       ","
     )}]}`;
-    fetch(url, {
+
+    const fetchSettings = {
       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(() => {});
+    };
+
+    if (pricesToGet.length === 0 && productsToGet.length === 0) return;
+
+    Promise.all([
+      pricesToGet.length !== 0
+        ? fetch(priceUrl, fetchSettings)
+        : Promise.resolve(null),
+      productsToGet.length !== 0
+        ? fetch(productUrl, fetchSettings)
+        : Promise.resolve(null),
+    ]).then(([priceRes, productRes]) => {
+      Promise.all([
+        priceRes != null ? priceRes.json() : Promise.resolve(null),
+        productRes != null ? productRes.json() : Promise.resolve(null),
+      ]).then(([d1, d2]) => {
+        if (d1 != null) {
+          const data = d1.reduce(
+            (o, p) => ({
+              ...o,
+              [p.id]: p,
+            }),
+            prices
+          );
+          setPrices(data);
+        }
+
+        if (d2 != null) {
+          const data = d2.reduce(
+            (o, p) => ({
+              ...o,
+              [p.id]: p,
+            }),
+            products
+          );
+          setProducts(data);
+        }
+      });
+    });
   }, [cart]);
 
   useEffect(() => {
@@ -99,6 +140,18 @@ export default function Checkout({
     );
   }, [cart, prices]);
 
+  useEffect(() => {
+    const taxable_items = cart.items.filter(
+      (i) =>
+        prices[i.price_id]?.unit_amount > 0 &&
+        products[i.product_id]?.type !== "DONATION"
+    );
+
+    if (taxable_items.length === 0) {
+      taxState[1]({ tax_amount: 0 });
+    }
+  }, [cart, prices, products]);
+
   if (status === 0 && cart.items.length === 0)
     return (
       <div
@@ -146,6 +199,7 @@ export default function Checkout({
             statusState={[status, setStatus]}
             cart={cart}
             prices={prices}
+            products={products}
             apiBaseUrl={apiBaseUrl}
             orderState={[order, setOrder]}
             disableProductLink={disableProductLink}

package/src/utils/storage.ts

@@ -121,7 +121,8 @@ export function addToCart(p: CartProduct) {
 
       // Update cart based on server info.
       const cart = await res.json();
-      cartStore.set(apiCartToLocalCart(cart));
+      if (JSON.stringify(newCart) != apiCartToLocalCart(cart))
+        cartStore.set(apiCartToLocalCart(cart));
     });
   }
 }
@@ -156,7 +157,8 @@ export function removeFromCart(i: number) {
 
       // Update cart based on server info.
       const cart = await res.json();
-      cartStore.set(apiCartToLocalCart(cart));
+      if (JSON.stringify(newCart) != apiCartToLocalCart(cart))
+        cartStore.set(apiCartToLocalCart(cart));
     });
   }
 }
@@ -171,7 +173,7 @@ export function clearCart() {
   const pathDetails = apiPathDetails.get();
   if (pathDetailsIsFullyDefined(pathDetails)) {
     fetchFromCartApi("DELETE", pathDetails).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
+      // cartStore.set(JSON.stringify(newCart));
     });
   }
 }