@springmicro/cart 0.7.23 → 0.7.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.23",
+  "version": "0.7.25",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,12 +24,12 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "^0.7.23",
+    "@springmicro/utils": "^0.7.25",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
-    "react": "^19.2.4",
+    "react": "18.3.1",
     "react-credit-cards-2": "^1.0.2",
-    "react-dom": "^19.2.4",
+    "react-dom": "18.3.1",
     "unstorage": "^1.10.2",
     "vite-plugin-dts": "^3.9.0"
   },
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "d1f4ad0110ef4cf25f65cc1b59886624db416a78"
+  "gitHead": "e67eb316de4309e612e59ca86e3ad73e4aab5e7a"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -41,7 +41,7 @@ import CloseIcon from "@mui/icons-material/Close";
 
 async function createOrder(
   cart,
-  customer_create,
+  billing_information,
   apiBaseUrl,
   affiliateCode,
   dev,
@@ -69,18 +69,22 @@ async function createOrder(
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      customer_create,
       cart_data: {
         items: cart.items.map((li) => ({
           ...li,
           name: undefined,
           image: undefined,
         })),
+        billing_information,
       },
       affiliate_code: affiliateCode,
     }),
     credentials: "include",
   });
+  if (!res.ok) {
+    throw "Something when wrong when creating your order";
+  }
+
   const order = await res.json();
 
   if (!order) throw "Missing order";
@@ -93,49 +97,61 @@ async function createOrder(
   return order;
 }
 
-async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
-  dev && console.log("Getting tax", items);
-  dev &&
-    console.log(
-      "Getting product data",
-      products,
-      products[items[0].product_id],
-    );
-  const taxable_items = items.filter(
-    (i) => i.unit_amount > 0 && products[i.product_id].type != "DONATION",
-  );
-  dev && console.log("Taxable items", taxable_items);
-  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: taxable_items.map((i) => ({
-          amount: i.unit_amount,
-          reference: i.reference,
-        })),
-        address: {
-          country: v.country,
-          city: v.locality,
-          line1: v.street_address,
-          postal_code: v.postal_code,
-          state: v.region,
-        },
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  return await res.json();
-}
+// async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
+//   dev && console.log("Getting tax", items);
+//   dev &&
+//     console.log(
+//       "Getting product data",
+//       products,
+//       products[items[0].product_id],
+//     );
+//   const taxable_items = items.filter(
+//     (i) => i.unit_amount > 0 && products[i.product_id].type != "DONATION",
+//   );
+//   dev && console.log("Taxable items", taxable_items);
+//   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: taxable_items.map((i) => ({
+//           amount: i.unit_amount,
+//           reference: i.reference,
+//         })),
+//         address: {
+//           country: v.country,
+//           city: v.locality,
+//           line1: v.street_address,
+//           postal_code: v.postal_code,
+//           state: v.region,
+//         },
+//       }),
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//     },
+//   );
+//   return await res.json();
+// }
+
+// getTax(
+//   apiBaseUrl,
+//   taxProvider,
+//   cart.items.map((i) => ({
+//     unit_amount: prices[i.price_id].unit_amount,
+//     reference: i.name,
+//     product_id: i.product_id,
+//   })),
+//   values,
+//   products,
+//   dev,
+// ),
 
 export default function ReviewAndCalculateTaxes({
   subtotal,
   discount,
-  taxState,
   shipping,
   statusState,
   cart,
@@ -163,7 +179,6 @@ export default function ReviewAndCalculateTaxes({
   const stacked = useMediaQuery(theme.breakpoints.down("lg"));
 
   const [status, setStatus] = statusState;
-  const [tax, setTax] = taxState;
   const [order, setOrder] = orderState;
 
   const [precheckErrors, setPrecheckErrors] = useState([]);
@@ -174,32 +189,23 @@ export default function ReviewAndCalculateTaxes({
     // status === 0 when this is clicked.
     // Creates an order and calculates tax.
     dev && console.log("Cart items", cart.items);
-    Promise.all([
-      createOrder(
-        cart,
-        {
-          email: values.email,
-          name: values.name,
-        },
-        apiBaseUrl,
-        affiliateCode,
-        dev,
-      ),
-      getTax(
-        apiBaseUrl,
-        taxProvider,
-        cart.items.map((i) => ({
-          unit_amount: prices[i.price_id].unit_amount,
-          reference: i.name,
-          product_id: i.product_id,
-        })),
-        values,
-        products,
-        dev,
-      ),
-    ])
-      .then(([order, taxData]) => {
-        setTax(taxData);
+
+    createOrder(
+      cart,
+      {
+        email: values.email,
+        name: values.name,
+        country: values.country,
+        locality: values.locality,
+        street_address: values.street_address,
+        postal_code: values.postal_code,
+        state: values.region,
+      },
+      apiBaseUrl,
+      affiliateCode,
+      dev,
+    )
+      .then((order) => {
         setOrder(order);
         setStatus(1);
         setFormDisabled(false);
@@ -423,7 +429,7 @@ export default function ReviewAndCalculateTaxes({
             statusState: [status, setStatus],
             cart,
             subtotal,
-            tax,
+            orderState,
             shipping,
             discount,
             prices,

package/src/checkout/components/CartList.tsx

@@ -10,7 +10,7 @@ export function CartList({
   statusState,
   cart,
   subtotal,
-  tax,
+  orderState,
   shipping,
   discount,
   prices,
@@ -23,6 +23,9 @@ export function CartList({
 }) {
   const [status, setStatus] = statusState;
   const [formError, setFormError] = formErrorState;
+  const [order] = orderState;
+  const { taxes = "Pending", total } = order ?? {};
+
   return (
     <form
       style={{ flexGrow: 1 }}
@@ -65,29 +68,9 @@ export function CartList({
             <Typography sx={{ fontSize: "20px", p: 1 }}>
               Subtotal: {formatPrice(subtotal)}
             </Typography>
-            {tax.error ? (
-              <Tooltip
-                disableInteractive
-                title={`Tax could not be calculated. Error: ${tax.error}`}
-              >
-                <Typography
-                  sx={{
-                    fontSize: "20px",
-                    bgcolor: "#ff000040",
-                    borderRadius: 2,
-                    p: 1,
-                    textDecoration: "underline dotted",
-                    cursor: "help",
-                  }}
-                >
-                  Taxes: {formatPrice(tax.tax_amount)}
-                </Typography>
-              </Tooltip>
-            ) : (
-              <Typography sx={{ fontSize: "20px", p: 1 }}>
-                Taxes: {formatPrice(tax.tax_amount)}
-              </Typography>
-            )}
+            <Typography sx={{ fontSize: "20px", p: 1 }}>
+              Taxes: {formatPrice(taxes)}
+            </Typography>
           </Box>
           {(discount != 0 || shipping != 0) && (
             <Box
@@ -108,12 +91,12 @@ export function CartList({
           <Box>
             <Typography style={{ fontSize: "26px" }}>
               Total:{" "}
-              {typeof subtotal === "number"
+              {total || typeof subtotal === "number"
                 ? formatPrice(
                     subtotal +
-                      (tax.tax_amount === "TBD" ? 0 : tax.tax_amount) +
+                      (typeof taxes === "string" ? 0 : taxes) +
                       shipping -
-                      discount
+                      discount,
                   )
                 : subtotal}
             </Typography>
@@ -156,7 +139,7 @@ export function CartList({
           <Box className="checkout-list">
             {cart.items.map((p, i) => (
               <CartProductCard
-                product={products[p.product_id] ?? p}
+                product={{ ...p, ...(products[p.product_id] ?? {}) }}
                 i={i}
                 price={prices[p.price_id]}
                 disableProductLink={disableProductLink}

package/src/checkout/components/CartProductCard.tsx

@@ -38,7 +38,9 @@ export function CartProductCard({
           !disableMissingImage && <div className="missing-image" />
         )}
         <div className="two-row">
-          <Typography>{product.name}</Typography>
+          <Typography>
+            {product.name.replace("%s", product.hidden_id)}
+          </Typography>
           <Typography>
             {price
               ? `$${(price.unit_amount / 100).toFixed(2)}${

package/src/checkout/index.tsx

@@ -47,18 +47,17 @@ export default function Checkout({
 }) {
   const store = useStore(cartStore);
   const localCart = useMemo(() => JSON.parse(store), [store]);
-
-  const cart = invoiceId ? { items: _order.basket } : localCart; // todo fix calculation
+  const [order, setOrder] = useState(_order); // starts undefined on a typical checkout. If an order is provided, it's likely an invoice.
+  console.log("CART", invoiceId, order, localCart);
+  const cart = invoiceId ? { items: order.basket } : localCart; // todo fix calculation
 
   const [products, setProducts] = useState({});
   const [prices, setPrices] = useState({});
   const [subtotal, setSubtotal] = useState("Loading prices...");
-  const taxState = useState<any>({ tax_amount: "TBD" });
   const shipping = 0;
   const discount = 0;
 
   const [status, setStatus] = useState(0);
-  const [order, setOrder] = useState(_order); // starts undefined on a typical checkout. If an order is provided, it's likely an invoice.
   const [successData, setSuccessData] = useState(null);
 
   useEffect(() => {
@@ -166,18 +165,6 @@ 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
@@ -221,7 +208,6 @@ export default function Checkout({
             discount={discount}
             shipping={shipping}
             taxProvider={taxProvider}
-            taxState={taxState}
             statusState={[status, setStatus]}
             cart={cart}
             prices={prices}