@springmicro/cart 0.3.2 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "dev": "vite build --watch",
+    "autopack": "chokidar \"dist/*\" -c \"pnpm pack\"",
     "build": "rm -rf dist && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -23,7 +24,7 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.3.2",
+    "@springmicro/utils": "0.3.4",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -38,6 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "chokidar-cli": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
@@ -47,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "f4cc159c6a21ff9eb0ae892311a0c606601db463"
+  "gitHead": "291a6da39f3801c2d7993958d252a2ffa3f4ef1e"
 }

package/src/AddToCartForm.tsx

@@ -1,16 +1,16 @@
-import { CartProduct } from "./types";
-import { addToCart } from "./utils/storage";
-
-type Props = {
-  item: CartProduct;
-  children: any;
-};
-
-export default function AddToCartForm({ item, children }: Props) {
-  function addItemToCart(e: any) {
-    e.preventDefault();
-    addToCart(item);
-  }
-
-  return <form onSubmit={addItemToCart}>{children}</form>;
-}
+import { CartProduct } from "./types";
+import { addToCart } from "./utils/storage";
+
+type Props = {
+  item: CartProduct;
+  children: any;
+};
+
+export default function AddToCartForm({ item, children }: Props) {
+  function addItemToCart(e: any) {
+    e.preventDefault();
+    addToCart(item);
+  }
+
+  return <form onSubmit={addItemToCart}>{children}</form>;
+}

package/src/CartButton.tsx

@@ -1,249 +1,249 @@
-import {
-  Box,
-  Button,
-  ClickAwayListener,
-  IconButton,
-  Tooltip,
-} from "@mui/material";
-import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
-import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
-import React from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import type { Cart } from "./types";
-import { useStore } from "@nanostores/react";
-import {
-  clearCart,
-  removeFromCart,
-  cartStore,
-  apiPathDetails,
-} from "./utils/storage";
-
-export default function CartButton({
-  user,
-  apiBaseUrl,
-  color,
-  modalYOffset,
-  checkout,
-  float,
-}: {
-  user?: { id: string | number } & any;
-  apiBaseUrl: string;
-  color?: string;
-  modalYOffset?: string | number;
-  checkout: () => void;
-  float?: boolean;
-}) {
-  const [modalOpen, setModalOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    apiPathDetails.set({
-      baseUrl: apiBaseUrl,
-      userId: user ? user.id : undefined,
-    });
-  }, [user]);
-
-  const cartStorage = useStore(cartStore);
-  const cartData = JSON.parse(cartStorage);
-
-  return (
-    <Cart
-      cart={cartData}
-      modalState={[modalOpen, setModalOpen]}
-      color={color}
-      modalYOffset={modalYOffset}
-      checkout={checkout}
-      apiBaseUrl={apiBaseUrl}
-      float={float}
-    />
-  );
-}
-
-function Cart({
-  modalState,
-  cart,
-  color,
-  modalYOffset,
-  checkout,
-  apiBaseUrl,
-  float,
-}: {
-  modalState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-  cart: Cart;
-  color?: string;
-  modalYOffset?: string | number;
-  checkout: () => void;
-  apiBaseUrl: string;
-  float?: boolean;
-}) {
-  const [modalOpen, setModalOpen] = modalState;
-
-  return (
-    <Box>
-      <ClickAwayListener
-        onClickAway={() => {
-          setModalOpen(false);
-        }}
-      >
-        <Box>
-          <IconButton
-            sx={{ color: color ?? "white" }}
-            onClick={() => {
-              setModalOpen((t) => !t);
-            }}
-          >
-            {cart.items.length > 0 ? (
-              <ShoppingCartIcon />
-            ) : (
-              <ShoppingCartOutlinedIcon />
-            )}
-          </IconButton>
-          <CartModal
-            open={modalOpen}
-            cart={cart}
-            clearCart={clearCart}
-            modalYOffset={modalYOffset}
-            checkout={checkout}
-            apiBaseUrl={apiBaseUrl}
-            float={float}
-          />
-        </Box>
-      </ClickAwayListener>
-    </Box>
-  );
-}
-
-function CartModal({
-  open,
-  cart,
-  clearCart,
-  modalYOffset,
-  checkout,
-  apiBaseUrl,
-  float,
-}: {
-  open?: boolean;
-  cart: Cart;
-  clearCart: () => void;
-  modalYOffset?: string | number;
-  checkout: () => void;
-  apiBaseUrl: string;
-  float?: boolean;
-}) {
-  const [prices, setPrices] = React.useState({});
-  // 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(() => {
-        setPrices(null);
-      });
-  }, [cart]);
-
-  if (!open) return null;
-  return (
-    <Box
-      sx={{
-        marginTop: modalYOffset,
-        position: float ? "fixed" : "absolute",
-        width: 325 + 16,
-        minHeight: 450,
-        maxHeight: "calc(90vh - 8rem)",
-        boxShadow: "-4px 8px 5px -7px rgba(0,0,0,0.75)",
-        py: 1,
-        right: -16,
-        pr: 2,
-        display: "grid",
-        gridTemplateRows: "1fr 40px",
-        color: "black",
-        bgcolor: "white",
-        borderBottomLeftRadius: 12,
-        gap: 2,
-        zIndex: 1,
-      }}
-    >
-      <Box sx={{ overflow: "auto", pl: 2 }}>
-        {cart.items.length === 0 ? <Box>Your cart is empty.</Box> : null}
-        {cart.items.map((product, i) => {
-          const price = prices[product.price_id];
-          return (
-            <Box
-              key={product.product_id}
-              sx={{
-                display: "flex",
-                width: "100%",
-                borderBottom: "2px solid #ddd",
-                boxSizing: "border-box",
-                pr: 1,
-                py: 1.5,
-                ">*": {
-                  m: 0,
-                },
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <Box sx={{ display: "flex", flexDirection: "column" }}>
-                <h2>{product.name}</h2>
-
-                <h3 style={{ fontSize: 13 }}>
-                  {prices === null
-                    ? "Price not found."
-                    : price
-                      ? `$${(price.unit_amount / 100).toFixed(2)}${
-                          price.recurring
-                            ? `/${price.recurring.interval_count > 1 ? `${price.recurring.interval_count} ` : ""}${price.recurring.interval}${price.recurring.interval_count > 1 ? "s" : ""}`
-                            : ""
-                        }`
-                      : "Loading price..."}
-                </h3>
-              </Box>
-              <Tooltip title="Remove from cart">
-                <IconButton
-                  sx={{ color: "red" }}
-                  onClick={() => {
-                    removeFromCart(i);
-                  }}
-                >
-                  <CloseIcon />
-                </IconButton>
-              </Tooltip>
-            </Box>
-          );
-        })}
-      </Box>
-      <Box sx={{ display: "flex", justifyContent: "space-between", mx: 2 }}>
-        <Button
-          sx={{ color: "red" }}
-          onClick={clearCart}
-          disabled={cart.items.length === 0}
-        >
-          Clear cart
-        </Button>
-        <Button onClick={checkout}>Checkout →</Button>
-      </Box>
-    </Box>
-  );
-}
+import {
+  Box,
+  Button,
+  ClickAwayListener,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import type { Cart } from "./types";
+import { useStore } from "@nanostores/react";
+import {
+  clearCart,
+  removeFromCart,
+  cartStore,
+  apiPathDetails,
+} from "./utils/storage";
+
+export default function CartButton({
+  user,
+  apiBaseUrl,
+  color,
+  modalYOffset,
+  checkout,
+  float,
+}: {
+  user?: { id: string | number } & any;
+  apiBaseUrl: string;
+  color?: string;
+  modalYOffset?: string | number;
+  checkout: () => void;
+  float?: boolean;
+}) {
+  const [modalOpen, setModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    apiPathDetails.set({
+      baseUrl: apiBaseUrl,
+      userId: user ? user.id : undefined,
+    });
+  }, [user]);
+
+  const cartStorage = useStore(cartStore);
+  const cartData = JSON.parse(cartStorage);
+
+  return (
+    <Cart
+      cart={cartData}
+      modalState={[modalOpen, setModalOpen]}
+      color={color}
+      modalYOffset={modalYOffset}
+      checkout={checkout}
+      apiBaseUrl={apiBaseUrl}
+      float={float}
+    />
+  );
+}
+
+function Cart({
+  modalState,
+  cart,
+  color,
+  modalYOffset,
+  checkout,
+  apiBaseUrl,
+  float,
+}: {
+  modalState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  cart: Cart;
+  color?: string;
+  modalYOffset?: string | number;
+  checkout: () => void;
+  apiBaseUrl: string;
+  float?: boolean;
+}) {
+  const [modalOpen, setModalOpen] = modalState;
+
+  return (
+    <Box>
+      <ClickAwayListener
+        onClickAway={() => {
+          setModalOpen(false);
+        }}
+      >
+        <Box>
+          <IconButton
+            sx={{ color: color ?? "white" }}
+            onClick={() => {
+              setModalOpen((t) => !t);
+            }}
+          >
+            {cart.items.length > 0 ? (
+              <ShoppingCartIcon />
+            ) : (
+              <ShoppingCartOutlinedIcon />
+            )}
+          </IconButton>
+          <CartModal
+            open={modalOpen}
+            cart={cart}
+            clearCart={clearCart}
+            modalYOffset={modalYOffset}
+            checkout={checkout}
+            apiBaseUrl={apiBaseUrl}
+            float={float}
+          />
+        </Box>
+      </ClickAwayListener>
+    </Box>
+  );
+}
+
+function CartModal({
+  open,
+  cart,
+  clearCart,
+  modalYOffset,
+  checkout,
+  apiBaseUrl,
+  float,
+}: {
+  open?: boolean;
+  cart: Cart;
+  clearCart: () => void;
+  modalYOffset?: string | number;
+  checkout: () => void;
+  apiBaseUrl: string;
+  float?: boolean;
+}) {
+  const [prices, setPrices] = React.useState({});
+  // 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(() => {
+        setPrices(null);
+      });
+  }, [cart]);
+
+  if (!open) return null;
+  return (
+    <Box
+      sx={{
+        marginTop: modalYOffset,
+        position: float ? "fixed" : "absolute",
+        width: 325 + 16,
+        minHeight: 450,
+        maxHeight: "calc(90vh - 8rem)",
+        boxShadow: "-4px 8px 5px -7px rgba(0,0,0,0.75)",
+        py: 1,
+        right: -16,
+        pr: 2,
+        display: "grid",
+        gridTemplateRows: "1fr 40px",
+        color: "black",
+        bgcolor: "white",
+        borderBottomLeftRadius: 12,
+        gap: 2,
+        zIndex: 1,
+      }}
+    >
+      <Box sx={{ overflow: "auto", pl: 2 }}>
+        {cart.items.length === 0 ? <Box>Your cart is empty.</Box> : null}
+        {cart.items.map((product, i) => {
+          const price = prices[product.price_id];
+          return (
+            <Box
+              key={product.product_id}
+              sx={{
+                display: "flex",
+                width: "100%",
+                borderBottom: "2px solid #ddd",
+                boxSizing: "border-box",
+                pr: 1,
+                py: 1.5,
+                ">*": {
+                  m: 0,
+                },
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Box sx={{ display: "flex", flexDirection: "column" }}>
+                <h2>{product.name}</h2>
+
+                <h3 style={{ fontSize: 13 }}>
+                  {prices === null
+                    ? "Price not found."
+                    : price
+                      ? `$${(price.unit_amount / 100).toFixed(2)}${
+                          price.recurring
+                            ? `/${price.recurring.interval_count > 1 ? `${price.recurring.interval_count} ` : ""}${price.recurring.interval}${price.recurring.interval_count > 1 ? "s" : ""}`
+                            : ""
+                        }`
+                      : "Loading price..."}
+                </h3>
+              </Box>
+              <Tooltip title="Remove from cart">
+                <IconButton
+                  sx={{ color: "red" }}
+                  onClick={() => {
+                    removeFromCart(i);
+                  }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mx: 2 }}>
+        <Button
+          sx={{ color: "red" }}
+          onClick={clearCart}
+          disabled={cart.items.length === 0}
+        >
+          Clear cart
+        </Button>
+        <Button onClick={checkout}>Checkout →</Button>
+      </Box>
+    </Box>
+  );
+}