@springmicro/cart 0.7.25 → 0.7.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.25",
+  "version": "0.7.26",
   "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.25",
+    "@springmicro/utils": "^0.7.26",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "18.3.1",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "e67eb316de4309e612e59ca86e3ad73e4aab5e7a"
+  "gitHead": "fb10f8c2a5f1bdc81700ba962f1e8cac0168247f"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.css

@@ -18,6 +18,7 @@
   margin-top: 1rem;
   max-height: 50vh;
   overflow: auto;
+  width: calc(100% - 4rem);
 }
 
 @keyframes cardanimate {

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -10,6 +10,7 @@ import {
   Fade,
   Typography,
   IconButton,
+  Container,
 } from "@mui/material";
 import { setOrder as cartSetOrder } from "../utils/storage";
 import { AddCard, CCFocus, CreditCardValues } from "./components/AddCard";
@@ -450,14 +451,16 @@ export default function ReviewAndCalculateTaxes({
               gap: 2,
             }}
           >
-            {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
-            <CheckoutActionFields
-              formik={formik}
-              prices={prices}
-              products={products}
-              hideFields={hideFields}
-              disableFields={disableFields}
-            />
+            <Container>
+              {CollectExtraInfo && <CollectExtraInfo formik={formik} />}
+              <CheckoutActionFields
+                formik={formik}
+                prices={prices}
+                products={products}
+                hideFields={hideFields}
+                disableFields={disableFields}
+              />
+            </Container>
             <AddCard
               cardRequired={cardRequired}
               onSubmit={createOrderAndGetTaxes}
@@ -519,7 +522,7 @@ function CheckoutActionFields({
   };
   // console.log({ checkoutFields });
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", mx: 3, gap: 2 }}>
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
       {Object.keys(checkoutFields)
         .filter(
           (key) =>

package/src/checkout/components/AddCard.tsx

@@ -295,18 +295,24 @@ export const AddCard = ({
             payment information.
           </Typography>
         )}
-        <Button
-          size="large"
-          sx={{ mt: 3 }}
-          variant="contained"
-          // onClick={formik.handleSubmit}
-          type="submit"
-          disabled={formDisabled}
-          color={formError ? "error" : undefined}
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            mt: 1,
+            mb: 4,
+          }}
         >
-          Review
-        </Button>
-        <Box sx={{ mt: 1 }}>
+          <Button
+            size="large"
+            variant="contained"
+            type="submit"
+            disabled={formDisabled}
+            color={formError ? "error" : undefined}
+          >
+            Review
+          </Button>
           <StripeLogoLink />
         </Box>
       </form>

package/src/checkout/components/CartList.tsx

@@ -46,7 +46,7 @@ export function CartList({
           sx={{
             display: "flex",
             flexDirection: "column",
-            maxWidth: 650,
+            maxWidth: { xs: 300, sm: 650 },
             alignItems: "center",
             boxShadow: "0px 2px 5px 2px #dfdfdfff",
             margin: "4px",
@@ -58,36 +58,32 @@ export function CartList({
           <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
             Checkout
           </Typography>
+
           <Box
             sx={{
-              width: "50%",
-              display: "flex",
-              justifyContent: "space-between",
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: { sm: 2 },
+              mt: { xs: 2, sm: 1 },
             }}
           >
-            <Typography sx={{ fontSize: "20px", p: 1 }}>
+            <Typography sx={{ fontSize: "20px" }}>
               Subtotal: {formatPrice(subtotal)}
             </Typography>
-            <Typography sx={{ fontSize: "20px", p: 1 }}>
+            <Typography sx={{ fontSize: "20px" }}>
               Taxes: {formatPrice(taxes)}
             </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)}</>}
+            {!!shipping && (
+              <Typography sx={{ fontSize: "20px" }}>
+                Shipping: {formatPrice(shipping)}
               </Typography>
-              <Typography sx={{ fontSize: "20px", p: 1 }}>
-                {discount && <>Discount: {formatPrice(discount)}</>}
+            )}
+            {!!discount && (
+              <Typography sx={{ fontSize: "20px" }}>
+                Discount: {formatPrice(discount)}
               </Typography>
-            </Box>
-          )}
+            )}
+          </Box>
           <Box>
             <Typography style={{ fontSize: "26px" }}>
               Total:{" "}

package/src/checkout/components/CartProductCard.css

@@ -1,8 +1,8 @@
 .product-card {
-  width: 500px;
   /* display: flex;
   flex-direction: row;
   justify-content: space-between; */
+  width: 100%;
   display: grid;
   grid-template-columns: 1fr 40px;
   gap: 0.5rem;

package/src/checkout/components/CartProductCard.tsx

@@ -82,6 +82,13 @@ export function CartProductCard({
           >
             <IconButton
               className="remove-button"
+              sx={{
+                color: { xs: "red !important", md: "#ff000040 !important" },
+                transition: "all 0.2s !important",
+                ":hover": {
+                  color: "red !important",
+                },
+              }}
               onClick={() => {
                 removeFromCart(i);
               }}

package/src/checkout/components/StatusBar.tsx

@@ -1,40 +1,191 @@
-import { Box, IconButton, Typography, Tooltip } from "@mui/material";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, IconButton, Tooltip, Typography } from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+
+const BLUE = "rgb(40, 130, 213)";
+const STEPS = ["PAYMENT DETAILS", "CONFIRMATION", "ORDER PLACED"];
+
+function ProgressDots({ status }) {
+  return (
+    <Box sx={{ display: "flex", gap: "5px", alignItems: "center", ml: "14px" }}>
+      {STEPS.map((_, i) => {
+        const isCurrent = i === status;
+        const isDone = i < status;
+        return (
+          <Box
+            key={i}
+            sx={{
+              height: 6,
+              width: isCurrent ? 18 : 6,
+              borderRadius: isCurrent ? "3px" : "50%",
+              background:
+                isDone || isCurrent
+                  ? BLUE
+                  : "var(--color-border-tertiary, lightgrey)",
+              transition:
+                "width 0.3s ease, border-radius 0.3s ease, background 0.3s ease",
+              flexShrink: 0,
+            }}
+          />
+        );
+      })}
+    </Box>
+  );
+}
 
 export function StatusBar({ status, backlink = "" }) {
+  const isLast = status >= STEPS.length - 1;
+
   return (
     <Box
-      style={{
+      sx={{
         display: "flex",
-        justifyContent: "center",
-        flexDirection: "row",
+        alignItems: "center",
+        width: "100%",
+        py: 1.5,
+        boxSizing: "border-box",
       }}
     >
-      <Box sx={{ flex: "1 1" }}>
+      {/* Back button */}
+      <Box
+        sx={{
+          flexShrink: 0,
+          width: 30,
+          position: "absolute",
+          top: { xs: 8, md: 20 },
+          left: { xs: 8, md: 20 },
+        }}
+      >
         <Tooltip title="Exit checkout">
-          <IconButton href={`/${backlink}`}>
-            <ArrowBackIcon />
+          <IconButton href={`/${backlink}`} size="small">
+            <CloseIcon fontSize="small" />
           </IconButton>
         </Tooltip>
       </Box>
-      <Box id="status-bar">
-        <Typography className="status-text active">PAYMENT DETAILS</Typography>
-        <Box
-          className={"status-bar" + (status > 0 ? " active" : "")}
-          sx={{ display: { xs: "none", md: "block" } }}
-        ></Box>
-        <Typography className={"status-text" + (status > 0 ? " active" : "")}>
-          CONFIRMATION
-        </Typography>
+
+      {/* Center content */}
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: "12px",
+          minWidth: 0,
+        }}
+      >
         <Box
-          className={"status-bar" + (status > 1 ? " active" : "")}
-          sx={{ display: { xs: "none", md: "block" } }}
-        ></Box>
-        <Typography className={"status-text" + (status > 1 ? " active" : "")}>
-          ORDER PLACED
-        </Typography>
+          sx={{
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "12px",
+            minWidth: 0,
+          }}
+        >
+          {isLast ? (
+            /* Order placed — done state */
+            <Box sx={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <Box
+                sx={{
+                  width: 22,
+                  height: 22,
+                  borderRadius: "50%",
+                  background: BLUE,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                }}
+              >
+                <CheckIcon sx={{ fontSize: 13, color: "white" }} />
+              </Box>
+              <Typography
+                sx={{
+                  fontSize: "15px",
+                  fontWeight: 600,
+                  color: BLUE,
+                  letterSpacing: "0.03em",
+                }}
+              >
+                ORDER PLACED
+              </Typography>
+            </Box>
+          ) : (
+            <>
+              {/* Current step */}
+              <Box
+                sx={{ display: "flex", flexDirection: "column", gap: "2px" }}
+              >
+                <Typography
+                  sx={{
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    letterSpacing: "0.09em",
+                    color: "text.disabled",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  Current
+                </Typography>
+                <Typography
+                  sx={{
+                    fontSize: "15px",
+                    fontWeight: 600,
+                    color: BLUE,
+                    letterSpacing: "0.03em",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {STEPS[status]}
+                </Typography>
+              </Box>
+
+              {/* Divider */}
+              <Box
+                sx={{
+                  width: "1px",
+                  height: 28,
+                  background: "divider",
+                  flexShrink: 0,
+                }}
+              />
+
+              {/* Next step */}
+              <Box
+                sx={{ display: "flex", flexDirection: "column", gap: "2px" }}
+              >
+                <Typography
+                  sx={{
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    letterSpacing: "0.09em",
+                    color: "text.disabled",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  Next
+                </Typography>
+                <Typography
+                  sx={{
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "text.secondary",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {STEPS[status + 1]}
+                </Typography>
+              </Box>
+
+              {/* Progress dots */}
+            </>
+          )}
+        </Box>
+        {!isLast && <ProgressDots status={status} />}
       </Box>
-      <Box sx={{ flex: "1 1" }} />
     </Box>
   );
 }