@springmicro/cart 0.7.0 → 0.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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.7.0",
+    "@springmicro/utils": "0.7.2",
     "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": "f7e3eb4540836122c78bf55c3d76367f88d5ffc8"
+  "gitHead": "baedb0de00a8f238a2356a747e69eb1754606d58"
 }

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

@@ -160,6 +160,7 @@ function CartModal({
         })
       )
       .catch(() => {
+        console.error("Couldn't get prices");
         setPrices(null);
       });
   }, [cart]);
@@ -214,17 +215,7 @@ function CartModal({
                   {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" : ""
-                            }`
-                          : ""
-                      }`
+                    ? formatPrice(price)
                     : "Loading price..."}
                 </h3>
               </Box>
@@ -255,3 +246,28 @@ function CartModal({
     </Box>
   );
 }
+
+function formatPrice(price) {
+  let baseUnitAmount = (price.unit_amount / 100).toFixed(2);
+  if (baseUnitAmount.endsWith("00"))
+    baseUnitAmount = baseUnitAmount.replace(".00", "");
+
+  const unitAmountStr = `$${baseUnitAmount}`;
+
+  if (!price.recurring) return unitAmountStr;
+
+  let { interval, interval_count } = price.recurring;
+  if (interval === "month" && interval_count % 12 === 0) {
+    interval = "year";
+    interval_count /= 12;
+  }
+
+  const SLASH = "/";
+  let count = "";
+  if (interval_count != 1) {
+    interval += "s";
+    count = `${interval_count} `;
+  }
+
+  return unitAmountStr + SLASH + count + interval;
+}

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

@@ -166,7 +166,12 @@ function DefaultProductCard({
 
 function formatPricing({ unit_amount, recurring }: any) {
   if (recurring) {
-    const { interval, interval_count } = recurring;
+    let { interval, interval_count } = recurring;
+    if (interval === "month" && interval_count % 12 === 0) {
+      interval = "year";
+      interval_count /= 12;
+    }
+
     return `$${(unit_amount / 100).toFixed(2)}/${
       interval_count === 1 ? interval : `${interval_count} ${interval}s`
     }`;

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;
+}