@springmicro/cart 0.2.1 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.2.1",
+    "@springmicro/utils": "0.3.0",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -47,5 +47,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "5060bfe477b5be4d15de32991fb8ebc839143430"
+  "gitHead": "a50179e6b459af707d7ba19db175073207ce28c0"
 }

package/src/AddToCartForm.tsx

@@ -1,7 +1,8 @@
+import { CartProduct } from "./types";
 import { addToCart } from "./utils/storage";
 
 type Props = {
-  item: any;
+  item: CartProduct;
   children: any;
 };
 

package/src/CartButton.tsx

@@ -23,11 +23,15 @@ export default function CartButton({
   apiBaseUrl,
   color,
   modalYOffset,
+  checkout,
+  float,
 }: {
-  user: ({ id: string | number } & any) | undefined;
+  user?: { id: string | number } & any;
   apiBaseUrl: string;
-  color: string | undefined;
-  modalYOffset: string | number | undefined;
+  color?: string;
+  modalYOffset?: string | number;
+  checkout: () => void;
+  float?: boolean;
 }) {
   const [modalOpen, setModalOpen] = React.useState(false);
 
@@ -39,13 +43,17 @@ export default function CartButton({
   }, [user]);
 
   const cartStorage = useStore(cartStore);
+  const cartData = JSON.parse(cartStorage);
 
   return (
     <Cart
-      cart={JSON.parse(cartStorage)}
+      cart={cartData}
       modalState={[modalOpen, setModalOpen]}
       color={color}
       modalYOffset={modalYOffset}
+      checkout={checkout}
+      apiBaseUrl={apiBaseUrl}
+      float={float}
     />
   );
 }
@@ -55,11 +63,17 @@ function Cart({
   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;
 
@@ -77,7 +91,7 @@ function Cart({
               setModalOpen((t) => !t);
             }}
           >
-            {cart.cart.length > 0 ? (
+            {cart.items.length > 0 ? (
               <ShoppingCartIcon />
             ) : (
               <ShoppingCartOutlinedIcon />
@@ -87,8 +101,10 @@ function Cart({
             open={modalOpen}
             cart={cart}
             clearCart={clearCart}
-            removeFromCart={removeFromCart}
             modalYOffset={modalYOffset}
+            checkout={checkout}
+            apiBaseUrl={apiBaseUrl}
+            float={float}
           />
         </Box>
       </ClickAwayListener>
@@ -99,31 +115,66 @@ function Cart({
 function CartModal({
   open,
   cart,
-  removeFromCart,
   clearCart,
   modalYOffset,
+  checkout,
+  apiBaseUrl,
+  float,
 }: {
   open?: boolean;
   cart: Cart;
-  removeFromCart: (i: number) => void;
   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: "fixed",
-        width: 275,
-        minHeight: 300,
+        position: float ? "fixed" : "absolute",
+        width: 325 + 16,
+        minHeight: 450,
         maxHeight: "calc(90vh - 8rem)",
-        borderLeft: "2px solid #999",
-        borderBottom: "2px solid #999",
-        pl: 4,
+        boxShadow: "-4px 8px 5px -7px rgba(0,0,0,0.75)",
+        py: 1,
+        right: -16,
         pr: 2,
-        py: 2,
-        right: 0,
         display: "grid",
         gridTemplateRows: "1fr 40px",
         color: "black",
@@ -133,45 +184,65 @@ function CartModal({
         zIndex: 1,
       }}
     >
-      <Box sx={{ overflow: "auto" }}>
-        {cart.cart.length === 0 ? <Box>Your cart is empty.</Box> : null}
-        {cart.cart.map((product, i) => (
-          <Box
-            key={product.id}
-            sx={{
-              display: "flex",
-              width: "100%",
-              borderBottom: "2px solid #ddd",
-              py: 1,
-              "&>*": {
-                m: 0,
-              },
-              justifyContent: "space-between",
-            }}
-          >
-            <h2>{product.name}</h2>
-            <Tooltip title="Remove from cart">
-              <IconButton
-                sx={{ color: "red" }}
-                onClick={() => {
-                  removeFromCart(i);
-                }}
-              >
-                <CloseIcon />
-              </IconButton>
-            </Tooltip>
-          </Box>
-        ))}
+      <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" }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mx: 2 }}>
         <Button
           sx={{ color: "red" }}
           onClick={clearCart}
-          disabled={cart.cart.length === 0}
+          disabled={cart.items.length === 0}
         >
           Clear cart
         </Button>
-        <Button>Checkout →</Button>
+        <Button onClick={checkout}>Checkout →</Button>
       </Box>
     </Box>
   );

package/src/ProductCard.css

@@ -0,0 +1,106 @@
+.card {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.card-section {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image-container {
+  width: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  aspect-ratio: 1.5;
+}
+
+.button-section {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 4px 2rem 0px;
+  gap: 0.5rem;
+}
+
+.addtocartbutton {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+}
+
+.addtocartbutton.red {
+  background-color: rgb(230, 39, 39);
+}
+
+.addtocartbutton.disabled {
+  background-color: rgb(170, 170, 170);
+  cursor: not-allowed;
+}
+.addtocartbutton.disabled:hover {
+  background-color: rgb(170, 170, 170);
+}
+
+.addtocartbutton:hover {
+  background-color: rgb(36, 124, 207);
+}
+
+.hover-button > .hover-section {
+  display: none;
+  position: absolute;
+  width: 325px;
+  margin-left: calc(-113.75px);
+  padding: 1rem;
+  color: black;
+}
+
+.hover-button:hover > .hover-section {
+  display: flex;
+  justify-content: center;
+}
+
+.hover-data {
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 2px 5px 2px rgb(173, 173, 173);
+  background-color: white;
+}
+
+.hover-data > div {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(203, 203, 203);
+  gap: 1px;
+}
+
+.tieredpricingbutton {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  padding: 4px 0.5rem 8px;
+  background-color: white;
+  transition: all 0.3s;
+}
+
+.tieredpricingbutton:hover {
+  background-color: rgb(233, 233, 233);
+}

package/src/ProductCard.tsx

@@ -0,0 +1,165 @@
+import "./ProductCard.css";
+import { useStore } from "@nanostores/react";
+import type React from "react";
+import { Product, ProductPricing } from "./types";
+import { addToCart, cartStore, removeFromCart } from "./utils/storage";
+
+/**
+ * A card meant for displaying product data, allowing for purchases with managed functions.
+ *
+ * By default it displays a card component from the ecommerce-example repo but you can use a different component by providing it in the properties.
+ *
+ * A new component should be declared using this format: ```function ExampleComponent(props: @type {ProductCardComponentProps} { return <></>; })```
+ * Pass this new component as ```component={ExampleComponent}```
+ */
+
+export type ProductCardComponentProps = {
+  product: Product;
+  foundInCart: {
+    product: boolean;
+    price: boolean;
+  };
+  pricing;
+  addToCart: (price_index?: number) => void;
+  removeFromCart: (price?: boolean) => void;
+};
+
+export default function ProductCard({
+  product,
+  component,
+  priceTierName,
+}: {
+  product: Product;
+  component?: React.FC<ProductCardComponentProps>;
+  priceTierName?: string; // Might have incomplete code for cases where the tier name doesn't match.
+}) {
+  const cart = JSON.parse(useStore(cartStore));
+
+  const productInCartIndex: number = (cart.items as any[]).findIndex(
+    (p) => p.product_id === product.id
+  );
+  const productFoundInCart = !!~productInCartIndex;
+
+  const pricing: ProductPricing[] = JSON.parse(product.pricing);
+
+  const pi = pricing.findIndex((price) => price.tier_label === priceTierName); // TODO add fail-case for missing price
+
+  const priceInCartIndex: number = (cart.items as any[]).findIndex(
+    (p) => p.price_id === pricing[pi].id
+  );
+  const priceFoundInCart = !!~priceInCartIndex;
+
+  function addToCartSafe(priceIndex: number = pi) {
+    // Removes the ability to add improper info from the addToCart
+    addToCart({
+      product_id: product.id,
+      name: product.name,
+      price_id: pricing[priceIndex].id,
+      image: undefined,
+      quantity: undefined,
+    });
+  }
+
+  const props: ProductCardComponentProps = {
+    product,
+    foundInCart: {
+      product: productFoundInCart,
+      price: priceFoundInCart,
+    },
+    pricing,
+    addToCart: addToCartSafe,
+    removeFromCart: (price?: boolean) => {
+      removeFromCart(price ? priceInCartIndex : productInCartIndex);
+    },
+  };
+
+  if (component !== undefined) {
+    return component!(props);
+  }
+
+  return <DefaultProductCard {...props} />;
+}
+
+function DefaultProductCard({
+  product,
+  foundInCart,
+  pricing,
+  addToCart,
+  removeFromCart,
+}: ProductCardComponentProps) {
+  return (
+    <div
+      className="card"
+      onClick={(e) =>
+        // @ts-expect-error it works
+        !e.target.closest("button") &&
+        (window.location.href = `/product/${product.id}`)
+      }
+    >
+      <div className="card-section">
+        <b>{product.name}</b>
+        <div className="image-container"></div>
+      </div>
+      {product.description && (
+        <p style={{ margin: "0px 1rem", flexGrow: 1 }}>{product.description}</p>
+      )}
+      <div className="button-section">
+        {foundInCart.product ? (
+          <button
+            className="addtocartbutton"
+            onClick={() => {
+              removeFromCart();
+            }}
+          >
+            Remove from cart
+          </button>
+        ) : pricing.length === 1 ? (
+          <button
+            className="addtocartbutton"
+            onClick={() => {
+              addToCart();
+            }}
+          >
+            Add {formatPricing(pricing[0])}
+          </button>
+        ) : pricing.length === 0 ? (
+          <button className="addtocartbutton disabled">
+            Currently unavailable
+          </button>
+        ) : (
+          <button className="addtocartbutton hover-button">
+            Add to cart ▼
+            <div className="hover-section">
+              <div className="hover-data">
+                <div>
+                  {pricing.map((p, i) => (
+                    <button
+                      className="tieredpricingbutton"
+                      onClick={() => {
+                        addToCart(i);
+                      }}
+                    >
+                      Tier {i + 1}:
+                      <br />
+                      {formatPricing(p)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatPricing({ unit_amount, recurring }: any) {
+  if (recurring) {
+    const { interval, interval_count } = recurring;
+    return `$${(unit_amount / 100).toFixed(2)}/${
+      interval_count === 1 ? interval : `${interval_count} ${interval}s`
+    }`;
+  }
+  return `$${(unit_amount / 100).toFixed(2)}`;
+}

package/src/checkout/CheckoutList.css

@@ -0,0 +1,93 @@
+.two-col {
+  display: flex;
+  /* grid-template-columns: 1fr 1fr; */
+  margin-top: 2rem;
+  align-items: flex-start;
+}
+
+.two-col > * {
+  width: 50%;
+}
+
+.checkout-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 8px 4px;
+  margin-top: 1rem;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+@keyframes cardanimate {
+  0% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+  50% {
+    box-shadow: 0px 0px 0px 0px #ffffff00;
+  }
+  100% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+}
+
+.skeleton-card {
+  min-height: 318px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  animation: cardanimate 1.25s linear infinite;
+}
+
+#status-bar {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  margin-left: 56px;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-bar {
+  width: 200px;
+  height: 6px;
+  background: linear-gradient(
+    90deg,
+    rgb(40, 130, 213) 0%,
+    rgb(40, 130, 213) 50%,
+    lightgrey 50%,
+    lightgrey 100%
+  );
+  background-position: 100% 0;
+  transition: color 0.3s 0s; /* active -> inactive */
+  background-size: 200% 100%;
+  border-radius: 16px;
+}
+
+.status-bar.active {
+  background-position: 0 0;
+  transition: background-position 0.75s; /* inactive -> active */
+}
+
+.status-text {
+  color: lightgrey;
+  transition: color 0.3s 0s; /* active -> inactive */
+}
+
+.status-text.active {
+  color: rgb(40, 130, 213);
+  transition: color 0.5s 0.65s; /* inactive -> active */
+}
+
+.shopping-button {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+  text-decoration: none;
+}