@springmicro/cart 0.5.0 → 0.5.2

package/src/checkout/components/CartList.tsx

@@ -1,151 +1,151 @@
-import { Box, Button, Tooltip, Typography } from "@mui/material";
-import { CartProductCard } from "./CartProductCard";
-
-function formatPrice(cents) {
-  if (typeof cents === "string") return cents;
-  return `$${(cents / 100).toFixed(2)}`;
-}
-
-export function CartList({
-  status,
-  cart,
-  subtotal,
-  tax,
-  shipping,
-  discount,
-  prices,
-  disableMissingImage,
-  disableProductLink,
-  formik,
-  formDisabled,
-  formError,
-}) {
-  return (
-    <form
-      style={{ flexGrow: 1 }}
-      onSubmit={(e) => {
-        e.preventDefault();
-        formik.handleSubmit(e);
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          flexGrow: 1,
-          mb: { xs: 4, xl: undefined },
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            maxWidth: 650,
-            alignItems: "center",
-            boxShadow: "0px 2px 5px 2px #dfdfdfff",
-            margin: "4px",
-            padding: "2rem 0",
-            borderRadius: "8px",
-            flexGrow: 1,
-          }}
-        >
-          <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
-            Checkout
-          </Typography>
-          <Box
-            sx={{
-              width: "50%",
-              display: "flex",
-              justifyContent: "space-between",
-            }}
-          >
-            <Typography sx={{ fontSize: "20px", p: 1 }}>
-              Subtotal: {formatPrice(subtotal)}
-            </Typography>
-            {tax.error ? (
-              <Tooltip
-                disableInteractive
-                title={`Tax could not be calculated. Error: ${tax.error}`}
-              >
-                <Typography
-                  sx={{
-                    fontSize: "20px",
-                    bgcolor: "#ff000040",
-                    borderRadius: 2,
-                    p: 1,
-                    textDecoration: "underline dotted",
-                    cursor: "help",
-                  }}
-                >
-                  Taxes: {formatPrice(tax.tax_amount)}
-                </Typography>
-              </Tooltip>
-            ) : (
-              <Typography sx={{ fontSize: "20px", p: 1 }}>
-                Taxes: {formatPrice(tax.tax_amount)}
-              </Typography>
-            )}
-          </Box>
-          {(discount != 0 || shipping != 0) && (
-            <Box
-              sx={{
-                width: "50%",
-                display: "flex",
-                justifyContent: "space-between",
-              }}
-            >
-              <Typography sx={{ fontSize: "20px", p: 1 }}>
-                {shipping && <>Shipping: {formatPrice(shipping)}</>}
-              </Typography>
-              <Typography sx={{ fontSize: "20px", p: 1 }}>
-                {discount && <>Discount: {formatPrice(discount)}</>}
-              </Typography>
-            </Box>
-          )}
-          <Box>
-            <Typography style={{ fontSize: "26px" }}>
-              Total:{" "}
-              {typeof subtotal === "number"
-                ? formatPrice(
-                    subtotal +
-                      (tax.tax_amount === "TBD" ? 0 : tax.tax_amount) +
-                      shipping -
-                      discount
-                  )
-                : subtotal}
-            </Typography>
-          </Box>
-          {formError && (
-            <Typography color="red">
-              Could not confirm payment. Your card info may have been entered
-              incorrectly.
-            </Typography>
-          )}
-          {status === 1 && (
-            <Button
-              variant="contained"
-              sx={{ mt: 2 }}
-              type="submit"
-              disabled={formDisabled}
-              color={formError ? "error" : undefined}
-            >
-              Confirm Order
-            </Button>
-          )}
-          <Box className="checkout-list">
-            {cart.items.map((p, i) => (
-              <CartProductCard
-                product={p}
-                i={i}
-                price={prices[p.price_id]}
-                disableProductLink={disableProductLink}
-                disableMissingImage={disableMissingImage}
-                disableModification={status != 0}
-              />
-            ))}
-          </Box>
-        </Box>
-      </Box>
-    </form>
-  );
-}
+import { Box, Button, Tooltip, Typography } from "@mui/material";
+import { CartProductCard } from "./CartProductCard";
+
+function formatPrice(cents) {
+  if (typeof cents === "string") return cents;
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+export function CartList({
+  status,
+  cart,
+  subtotal,
+  tax,
+  shipping,
+  discount,
+  prices,
+  disableMissingImage,
+  disableProductLink,
+  formik,
+  formDisabled,
+  formError,
+}) {
+  return (
+    <form
+      style={{ flexGrow: 1 }}
+      onSubmit={(e) => {
+        e.preventDefault();
+        formik.handleSubmit(e);
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          flexGrow: 1,
+          mb: { xs: 4, xl: undefined },
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            maxWidth: 650,
+            alignItems: "center",
+            boxShadow: "0px 2px 5px 2px #dfdfdfff",
+            margin: "4px",
+            padding: "2rem 0",
+            borderRadius: "8px",
+            flexGrow: 1,
+          }}
+        >
+          <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
+            Checkout
+          </Typography>
+          <Box
+            sx={{
+              width: "50%",
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography sx={{ fontSize: "20px", p: 1 }}>
+              Subtotal: {formatPrice(subtotal)}
+            </Typography>
+            {tax.error ? (
+              <Tooltip
+                disableInteractive
+                title={`Tax could not be calculated. Error: ${tax.error}`}
+              >
+                <Typography
+                  sx={{
+                    fontSize: "20px",
+                    bgcolor: "#ff000040",
+                    borderRadius: 2,
+                    p: 1,
+                    textDecoration: "underline dotted",
+                    cursor: "help",
+                  }}
+                >
+                  Taxes: {formatPrice(tax.tax_amount)}
+                </Typography>
+              </Tooltip>
+            ) : (
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                Taxes: {formatPrice(tax.tax_amount)}
+              </Typography>
+            )}
+          </Box>
+          {(discount != 0 || shipping != 0) && (
+            <Box
+              sx={{
+                width: "50%",
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                {shipping && <>Shipping: {formatPrice(shipping)}</>}
+              </Typography>
+              <Typography sx={{ fontSize: "20px", p: 1 }}>
+                {discount && <>Discount: {formatPrice(discount)}</>}
+              </Typography>
+            </Box>
+          )}
+          <Box>
+            <Typography style={{ fontSize: "26px" }}>
+              Total:{" "}
+              {typeof subtotal === "number"
+                ? formatPrice(
+                    subtotal +
+                      (tax.tax_amount === "TBD" ? 0 : tax.tax_amount) +
+                      shipping -
+                      discount
+                  )
+                : subtotal}
+            </Typography>
+          </Box>
+          {formError && (
+            <Typography color="red">
+              Could not confirm payment. Your card info may have been entered
+              incorrectly.
+            </Typography>
+          )}
+          {status === 1 && (
+            <Button
+              variant="contained"
+              sx={{ mt: 2 }}
+              type="submit"
+              disabled={formDisabled}
+              color={formError ? "error" : undefined}
+            >
+              Confirm Order
+            </Button>
+          )}
+          <Box className="checkout-list">
+            {cart.items.map((p, i) => (
+              <CartProductCard
+                product={p}
+                i={i}
+                price={prices[p.price_id]}
+                disableProductLink={disableProductLink}
+                disableMissingImage={disableMissingImage}
+                disableModification={status != 0}
+              />
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </form>
+  );
+}

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

package/src/checkout/components/CartProductCard.tsx

@@ -1,90 +1,90 @@
-import "./CartProductCard.css";
-import { Tooltip, IconButton, Typography } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import React from "react";
-import { CartProduct } from "../../types";
-import { removeFromCart } from "../../utils/storage";
-
-export function CartProductCard({
-  product,
-  i,
-  price,
-  disableProductLink = false,
-  disableMissingImage = false,
-  disableModification = false,
-}: {
-  product: CartProduct;
-  i: number;
-  price: any;
-  disableProductLink?: boolean;
-  disableMissingImage?: boolean;
-  disableModification?: boolean;
-}) {
-  const [hoverDelete, setHoverDelete] = React.useState(false);
-
-  return (
-    <a
-      className="product-card"
-      href={
-        disableProductLink || hoverDelete
-          ? undefined
-          : `/product/${product.product_id}`
-      }
-    >
-      <div className="left-section">
-        {product.image ? (
-          <img />
-        ) : (
-          !disableMissingImage && <div className="missing-image" />
-        )}
-        <div className="two-row">
-          <Typography>{product.name}</Typography>
-          <Typography>
-            {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..."}
-          </Typography>
-        </div>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexGrow: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        {!disableModification && (
-          <Tooltip
-            title="Remove from cart"
-            onMouseEnter={() => {
-              setHoverDelete(true);
-            }}
-            onMouseLeave={() => {
-              setHoverDelete(false);
-            }}
-          >
-            <IconButton
-              className="remove-button"
-              onClick={() => {
-                removeFromCart(i);
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
-          </Tooltip>
-        )}
-      </div>
-    </a>
-  );
-}
+import "./CartProductCard.css";
+import { Tooltip, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { CartProduct } from "../../types";
+import { removeFromCart } from "../../utils/storage";
+
+export function CartProductCard({
+  product,
+  i,
+  price,
+  disableProductLink = false,
+  disableMissingImage = false,
+  disableModification = false,
+}: {
+  product: CartProduct;
+  i: number;
+  price: any;
+  disableProductLink?: boolean;
+  disableMissingImage?: boolean;
+  disableModification?: boolean;
+}) {
+  const [hoverDelete, setHoverDelete] = React.useState(false);
+
+  return (
+    <a
+      className="product-card"
+      href={
+        disableProductLink || hoverDelete
+          ? undefined
+          : `/product/${product.product_id}`
+      }
+    >
+      <div className="left-section">
+        {product.image ? (
+          <img />
+        ) : (
+          !disableMissingImage && <div className="missing-image" />
+        )}
+        <div className="two-row">
+          <Typography>{product.name}</Typography>
+          <Typography>
+            {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..."}
+          </Typography>
+        </div>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexGrow: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {!disableModification && (
+          <Tooltip
+            title="Remove from cart"
+            onMouseEnter={() => {
+              setHoverDelete(true);
+            }}
+            onMouseLeave={() => {
+              setHoverDelete(false);
+            }}
+          >
+            <IconButton
+              className="remove-button"
+              onClick={() => {
+                removeFromCart(i);
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Tooltip>
+        )}
+      </div>
+    </a>
+  );
+}