@springmicro/cart 0.5.0 → 0.5.2

package/src/ProductCard.css

@@ -1,106 +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);
-}
+.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

@@ -1,165 +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)}`;
-}
+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)}`;
+}