@springmicro/cart 0.5.16 → 0.5.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.16",
+  "version": "0.5.17",
   "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.16",
+    "@springmicro/utils": "0.5.17",
     "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": "9adcb0aba821c9e30cb9c1c8d737e2426f7f29c6"
+  "gitHead": "915dac621fa9bf06ffe49dadd56452f28bbd5737"
 }

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/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

@@ -22,16 +22,19 @@ export type ProductCardComponentProps = {
   pricing;
   addToCart: (price_index?: number) => void;
   removeFromCart: (price?: boolean) => void;
+  disabled?: boolean;
 };
 
 export default function ProductCard({
   product,
   component,
   priceTierName,
+  disabled,
 }: {
   product: Product;
   component?: React.FC<ProductCardComponentProps>;
   priceTierName?: string; // Might have incomplete code for cases where the tier name doesn't match.
+  disabled?: boolean;
 }) {
   const cart = JSON.parse(useStore(cartStore));
 
@@ -64,6 +67,7 @@ export default function ProductCard({
 
   const props: ProductCardComponentProps = {
     product,
+    disabled,
     foundInCart: {
       product: productFoundInCart,
       price: pi != -1 ? !!~priceInCartIndex : null,
@@ -88,6 +92,7 @@ function DefaultProductCard({
   pricing,
   addToCart,
   removeFromCart,
+  disabled,
 }: ProductCardComponentProps) {
   return (
     <div
@@ -112,6 +117,7 @@ function DefaultProductCard({
             onClick={() => {
               removeFromCart();
             }}
+            disabled={disabled}
           >
             Remove from cart
           </button>
@@ -121,6 +127,7 @@ function DefaultProductCard({
             onClick={() => {
               addToCart();
             }}
+            disabled={disabled}
           >
             Add {formatPricing(pricing[0])}
           </button>
@@ -140,6 +147,7 @@ function DefaultProductCard({
                       onClick={() => {
                         addToCart(i);
                       }}
+                      disabled={disabled}
                     >
                       Tier {i + 1}:
                       <br />

package/src/checkout/ReviewCartAndCalculateTaxes.css

@@ -1,93 +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: -29px;
-  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;
-}
+.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: -29px;
+  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;
+}

package/src/checkout/components/CartProductCard.css

@@ -1,67 +1,67 @@
-.product-card {
-  width: 500px;
-  /* display: flex;
-  flex-direction: row;
-  justify-content: space-between; */
-  display: grid;
-  grid-template-columns: 1fr 40px;
-  gap: 0.5rem;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-  transition: all 0.3s 0.1s;
-  cursor: pointer;
-  min-height: 48px;
-  flex-shrink: 0;
-}
-
-.product-card:hover {
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  transition: all 0.3s 0s;
-}
-
-.left-section {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  flex-grow: 1;
-}
-
-.left-section > img,
-.missing-image {
-  min-height: 100%;
-  max-height: 100px;
-  aspect-ratio: 1;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.missing-image {
-  background-color: rgb(222, 222, 222);
-}
-
-.two-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.two-row :nth-child(1) {
-  font-size: 20px;
-}
-
-.two-row :nth-child(2) {
-  font-size: 14px;
-}
-
-.two-row > * {
-  margin: 0;
-}
-
-.remove-button {
-  color: #ff000040 !important;
-  transition: all 0.2s !important;
-}
-
-.product-card:hover .remove-button {
-  color: red !important;
-}
+.product-card {
+  width: 500px;
+  /* display: flex;
+  flex-direction: row;
+  justify-content: space-between; */
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  gap: 0.5rem;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+  min-height: 48px;
+  flex-shrink: 0;
+}
+
+.product-card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.left-section {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.left-section > img,
+.missing-image {
+  min-height: 100%;
+  max-height: 100px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.missing-image {
+  background-color: rgb(222, 222, 222);
+}
+
+.two-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.two-row :nth-child(1) {
+  font-size: 20px;
+}
+
+.two-row :nth-child(2) {
+  font-size: 14px;
+}
+
+.two-row > * {
+  margin: 0;
+}
+
+.remove-button {
+  color: #ff000040 !important;
+  transition: all 0.2s !important;
+}
+
+.product-card:hover .remove-button {
+  color: red !important;
+}