@springmicro/cart 0.3.2 → 0.3.5

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: transparent !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,80 +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,
-}: {
-  product: CartProduct;
-  i: number;
-  price: any;
-  disableProductLink?: boolean;
-}) {
-  const [hoverDelete, setHoverDelete] = React.useState(false);
-  console.log(product);
-  return (
-    <a
-      className="product-card"
-      href={
-        disableProductLink || hoverDelete
-          ? undefined
-          : `/product/${product.product_id}`
-      }
-    >
-      <div className="left-section">
-        {product.image ? <img /> : <div className="missing-image"></div>}
-        <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",
-        }}
-      >
-        <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>
+  );
+}

package/src/checkout/components/Invoice.tsx

@@ -0,0 +1,145 @@
+import { AddCard, type AddCardProps } from "./AddCard";
+import { postCheckout } from "../../utils/api";
+import React from "react";
+import {
+  Alert,
+  Container,
+  Typography,
+  CircularProgress,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  Paper,
+  TableBody,
+} from "@mui/material";
+
+type CheckoutProps = AddCardProps & {
+  order: any;
+  invoiceId?: string;
+  successData;
+};
+
+export default function Invoice({
+  order,
+  invoiceId,
+  successData,
+}: CheckoutProps) {
+  const currentUrl = new URL(window.location.href);
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+
+  if (
+    successData !== null ||
+    // currentUrl.searchParams.get("showReceipt")
+    order.charge_id ||
+    !["pending", "awaiting_payment"].includes(order.status)
+  ) {
+    const print = (
+      <a
+        href="#"
+        onClick={() => {
+          window.print();
+          return false;
+        }}
+        style={{ textDecoration: "underline" }}
+      >
+        print
+      </a>
+    );
+    const text =
+      successData !== null ? (
+        <>
+          Payment received! An email was sent to{" "}
+          <strong>{successData.billing_information.email}</strong>. You can also{" "}
+          {print} this page for your records.
+        </>
+      ) : (
+        <>Payment received! You can {print} this page for your records.</>
+      );
+    return (
+      <>
+        <Container>
+          <Alert severity="success">{text}</Alert>
+        </Container>
+        <Container>
+          <Typography variant="h4" gutterBottom>
+            {invoiceId ? `Invoice #${invoiceId}` : "Order"}
+          </Typography>
+          <Typography variant="subtitle1">
+            Reference: {order.reference}
+          </Typography>
+          <Typography variant="subtitle1">
+            Date: {new Date(order.date).toLocaleDateString()}
+          </Typography>
+          <Typography variant="subtitle1">Status: {order.status}</Typography>
+          {order.customer ? (
+            <Typography variant="subtitle1">
+              {order.customer.first_name} {order.customer.last_name}
+            </Typography>
+          ) : (
+            <Typography variant="subtitle1">
+              Customer ID: {order.customer_id}
+            </Typography>
+          )}
+
+          <TableContainer component={Paper} sx={{ my: 2 }}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Item ID</TableCell>
+                  <TableCell>Name</TableCell>
+                  <TableCell>Description</TableCell>
+                  <TableCell>Quantity</TableCell>
+                  <TableCell>Unit Price</TableCell>
+                  <TableCell>Total Price</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {order.basket.map((item) => (
+                  <TableRow key={item.item_id}>
+                    <TableCell>{item.item_id}</TableCell>
+                    <TableCell>{item.name}</TableCell>
+                    <TableCell>{item.description || "-"}</TableCell>
+                    <TableCell>{item.quantity}</TableCell>
+                    <TableCell>
+                      {formatter.format(item.unit_price_cents / 100)}
+                    </TableCell>
+                    <TableCell>
+                      {formatter.format(
+                        (item.quantity * item.unit_price_cents) / 100
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Container>
+      </>
+    );
+  }
+
+  // return (
+  //   <>
+  //     <Order order={order} invoiceId={invoiceId} />
+  //     {isSubmitting ? (
+  //       <Container>
+  //         <Typography>
+  //           <CircularProgress color="primary" /> Submitting...
+  //         </Typography>
+  //       </Container>
+  //     ) : (
+  //       <AddCard
+  //         contact={order.customer}
+  //         onSubmit={onSubmit}
+  //         PriceDetails={PriceDetails}
+  //       />
+  //     )
+  //     }
+  //   </>
+  // );
+}

package/src/checkout/components/ProviderLogos.tsx

@@ -1,93 +1,93 @@
-import { createSvgIcon } from "@mui/material";
-// Source: https://brandfolder.com/s/99gctvbpwgvzbc7mz3j9g4x
-
-export const PoweredByStripe = createSvgIcon(
-  <svg
-    id="Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 150 34"
-  >
-    <defs>
-      <style>{`.cls-1{fill: #635bff}`}</style>
-    </defs>
-    <title>Powered by Stripe - blurple</title>
-    <path
-      className="cls-1"
-      d="M146,0H3.73A3.73,3.73,0,0,0,0,3.73V30.27A3.73,3.73,0,0,0,3.73,34H146a4,4,0,0,0,4-4V4A4,4,0,0,0,146,0Zm3,30a3,3,0,0,1-3,3H3.73A2.74,2.74,0,0,1,1,30.27V3.73A2.74,2.74,0,0,1,3.73,1H146a3,3,0,0,1,3,3Z"
-    />
-    <path
-      className="cls-1"
-      d="M17.07,11.24h-4.3V22h1.92V17.84h2.38c2.4,0,3.9-1.16,3.9-3.3S19.47,11.24,17.07,11.24Zm-.1,5H14.69v-3.3H17c1.38,0,2.11.59,2.11,1.65S18.35,16.19,17,16.19Z"
-    />
-    <path
-      className="cls-1"
-      d="M25.1,14a3.77,3.77,0,0,0-3.8,4.09,3.81,3.81,0,1,0,7.59,0A3.76,3.76,0,0,0,25.1,14Zm0,6.67c-1.22,0-2-1-2-2.58s.76-2.58,2-2.58,2,1,2,2.58S26.31,20.66,25.1,20.66Z"
-    />
-    <polygon
-      className="cls-1"
-      points="36.78 19.35 35.37 14.13 33.89 14.13 32.49 19.35 31.07 14.13 29.22 14.13 31.59 22.01 33.15 22.01 34.59 16.85 36.03 22.01 37.59 22.01 39.96 14.13 38.18 14.13 36.78 19.35"
-    />
-    <path
-      className="cls-1"
-      d="M44,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,47.49,20L46,19.38a1.78,1.78,0,0,1-1.83,1.26A2.12,2.12,0,0,1,42,18.47h5.52v-.6C47.54,15.71,46.32,14,44,14Zm-1.93,3.13A1.92,1.92,0,0,1,44,15.5a1.56,1.56,0,0,1,1.69,1.62Z"
-    />
-    <path
-      className="cls-1"
-      d="M50.69,15.3V14.13h-1.8V22h1.8V17.87a1.89,1.89,0,0,1,2-2,4.68,4.68,0,0,1,.66,0v-1.8c-.14,0-.3,0-.51,0A2.29,2.29,0,0,0,50.69,15.3Z"
-    />
-    <path
-      className="cls-1"
-      d="M57.48,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,60.93,20l-1.54-.59a1.78,1.78,0,0,1-1.83,1.26,2.12,2.12,0,0,1-2.1-2.17H61v-.6C61,15.71,59.76,14,57.48,14Zm-1.93,3.13a1.92,1.92,0,0,1,1.92-1.62,1.56,1.56,0,0,1,1.69,1.62Z"
-    />
-    <path
-      className="cls-1"
-      d="M67.56,15a2.85,2.85,0,0,0-2.26-1c-2.21,0-3.47,1.85-3.47,4.09s1.26,4.09,3.47,4.09a2.82,2.82,0,0,0,2.26-1V22h1.8V11.24h-1.8Zm0,3.35a2,2,0,0,1-2,2.28c-1.31,0-2-1-2-2.52s.7-2.52,2-2.52c1.11,0,2,.81,2,2.29Z"
-    />
-    <path
-      className="cls-1"
-      d="M79.31,14A2.88,2.88,0,0,0,77,15V11.24h-1.8V22H77v-.83a2.86,2.86,0,0,0,2.27,1c2.2,0,3.46-1.86,3.46-4.09S81.51,14,79.31,14ZM79,20.6a2,2,0,0,1-2-2.28v-.47c0-1.48.84-2.29,2-2.29,1.3,0,2,1,2,2.52S80.25,20.6,79,20.6Z"
-    />
-    <path
-      className="cls-1"
-      d="M86.93,19.66,85,14.13H83.1L86,21.72l-.3.74a1,1,0,0,1-1.14.79,4.12,4.12,0,0,1-.6,0v1.51a4.62,4.62,0,0,0,.73.05,2.67,2.67,0,0,0,2.78-2l3.24-8.62H88.82Z"
-    />
-    <path
-      className="cls-1"
-      d="M125,12.43a3,3,0,0,0-2.13.87l-.14-.69h-2.39V25.53l2.72-.59V21.81a3,3,0,0,0,1.93.7c1.94,0,3.72-1.59,3.72-5.11C128.71,14.18,126.91,12.43,125,12.43Zm-.65,7.63a1.61,1.61,0,0,1-1.28-.52l0-4.11a1.64,1.64,0,0,1,1.3-.55c1,0,1.68,1.13,1.68,2.58S125.36,20.06,124.35,20.06Z"
-    />
-    <path
-      className="cls-1"
-      d="M133.73,12.43c-2.62,0-4.21,2.26-4.21,5.11,0,3.37,1.88,5.08,4.56,5.08a6.12,6.12,0,0,0,3-.73V19.64a5.79,5.79,0,0,1-2.7.62c-1.08,0-2-.39-2.14-1.7h5.38c0-.15,0-.74,0-1C137.71,14.69,136.35,12.43,133.73,12.43Zm-1.47,4.07c0-1.26.77-1.79,1.45-1.79s1.4.53,1.4,1.79Z"
-    />
-    <path
-      className="cls-1"
-      d="M113,13.36l-.17-.82h-2.32v9.71h2.68V15.67a1.87,1.87,0,0,1,2.05-.58V12.54A1.8,1.8,0,0,0,113,13.36Z"
-    />
-    <path
-      className="cls-1"
-      d="M99.46,15.46c0-.44.36-.61.93-.61a5.9,5.9,0,0,1,2.7.72V12.94a7,7,0,0,0-2.7-.51c-2.21,0-3.68,1.18-3.68,3.16,0,3.1,4.14,2.6,4.14,3.93,0,.52-.44.69-1,.69a6.78,6.78,0,0,1-3-.9V22a7.38,7.38,0,0,0,3,.64c2.26,0,3.82-1.15,3.82-3.16C103.62,16.12,99.46,16.72,99.46,15.46Z"
-    />
-    <path
-      className="cls-1"
-      d="M107.28,10.24l-2.65.58v8.93a2.77,2.77,0,0,0,2.82,2.87,4.16,4.16,0,0,0,1.91-.37V20c-.35.15-2.06.66-2.06-1V15h2.06V12.66h-2.06Z"
-    />
-    <polygon
-      className="cls-1"
-      points="116.25 11.7 118.98 11.13 118.98 8.97 116.25 9.54 116.25 11.7"
-    />
-    <rect className="cls-1" x="116.25" y="12.61" width="2.73" height="9.64" />
-  </svg>,
-  "PoweredByStripe"
-);
-
-export const StripeLogoLink = ({ height }: { height?: string }) => {
-  return (
-    <a href="https://stripe.com" target="_blank">
-      <PoweredByStripe
-        sx={{ width: "unset", height: height || "1em" }}
-        viewBox="0 0 150 34"
-      />
-    </a>
-  );
-};
+import { createSvgIcon } from "@mui/material";
+// Source: https://brandfolder.com/s/99gctvbpwgvzbc7mz3j9g4x
+
+export const PoweredByStripe = createSvgIcon(
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 150 34"
+  >
+    <defs>
+      <style>{`.cls-1{fill: #635bff}`}</style>
+    </defs>
+    <title>Powered by Stripe - blurple</title>
+    <path
+      className="cls-1"
+      d="M146,0H3.73A3.73,3.73,0,0,0,0,3.73V30.27A3.73,3.73,0,0,0,3.73,34H146a4,4,0,0,0,4-4V4A4,4,0,0,0,146,0Zm3,30a3,3,0,0,1-3,3H3.73A2.74,2.74,0,0,1,1,30.27V3.73A2.74,2.74,0,0,1,3.73,1H146a3,3,0,0,1,3,3Z"
+    />
+    <path
+      className="cls-1"
+      d="M17.07,11.24h-4.3V22h1.92V17.84h2.38c2.4,0,3.9-1.16,3.9-3.3S19.47,11.24,17.07,11.24Zm-.1,5H14.69v-3.3H17c1.38,0,2.11.59,2.11,1.65S18.35,16.19,17,16.19Z"
+    />
+    <path
+      className="cls-1"
+      d="M25.1,14a3.77,3.77,0,0,0-3.8,4.09,3.81,3.81,0,1,0,7.59,0A3.76,3.76,0,0,0,25.1,14Zm0,6.67c-1.22,0-2-1-2-2.58s.76-2.58,2-2.58,2,1,2,2.58S26.31,20.66,25.1,20.66Z"
+    />
+    <polygon
+      className="cls-1"
+      points="36.78 19.35 35.37 14.13 33.89 14.13 32.49 19.35 31.07 14.13 29.22 14.13 31.59 22.01 33.15 22.01 34.59 16.85 36.03 22.01 37.59 22.01 39.96 14.13 38.18 14.13 36.78 19.35"
+    />
+    <path
+      className="cls-1"
+      d="M44,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,47.49,20L46,19.38a1.78,1.78,0,0,1-1.83,1.26A2.12,2.12,0,0,1,42,18.47h5.52v-.6C47.54,15.71,46.32,14,44,14Zm-1.93,3.13A1.92,1.92,0,0,1,44,15.5a1.56,1.56,0,0,1,1.69,1.62Z"
+    />
+    <path
+      className="cls-1"
+      d="M50.69,15.3V14.13h-1.8V22h1.8V17.87a1.89,1.89,0,0,1,2-2,4.68,4.68,0,0,1,.66,0v-1.8c-.14,0-.3,0-.51,0A2.29,2.29,0,0,0,50.69,15.3Z"
+    />
+    <path
+      className="cls-1"
+      d="M57.48,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,60.93,20l-1.54-.59a1.78,1.78,0,0,1-1.83,1.26,2.12,2.12,0,0,1-2.1-2.17H61v-.6C61,15.71,59.76,14,57.48,14Zm-1.93,3.13a1.92,1.92,0,0,1,1.92-1.62,1.56,1.56,0,0,1,1.69,1.62Z"
+    />
+    <path
+      className="cls-1"
+      d="M67.56,15a2.85,2.85,0,0,0-2.26-1c-2.21,0-3.47,1.85-3.47,4.09s1.26,4.09,3.47,4.09a2.82,2.82,0,0,0,2.26-1V22h1.8V11.24h-1.8Zm0,3.35a2,2,0,0,1-2,2.28c-1.31,0-2-1-2-2.52s.7-2.52,2-2.52c1.11,0,2,.81,2,2.29Z"
+    />
+    <path
+      className="cls-1"
+      d="M79.31,14A2.88,2.88,0,0,0,77,15V11.24h-1.8V22H77v-.83a2.86,2.86,0,0,0,2.27,1c2.2,0,3.46-1.86,3.46-4.09S81.51,14,79.31,14ZM79,20.6a2,2,0,0,1-2-2.28v-.47c0-1.48.84-2.29,2-2.29,1.3,0,2,1,2,2.52S80.25,20.6,79,20.6Z"
+    />
+    <path
+      className="cls-1"
+      d="M86.93,19.66,85,14.13H83.1L86,21.72l-.3.74a1,1,0,0,1-1.14.79,4.12,4.12,0,0,1-.6,0v1.51a4.62,4.62,0,0,0,.73.05,2.67,2.67,0,0,0,2.78-2l3.24-8.62H88.82Z"
+    />
+    <path
+      className="cls-1"
+      d="M125,12.43a3,3,0,0,0-2.13.87l-.14-.69h-2.39V25.53l2.72-.59V21.81a3,3,0,0,0,1.93.7c1.94,0,3.72-1.59,3.72-5.11C128.71,14.18,126.91,12.43,125,12.43Zm-.65,7.63a1.61,1.61,0,0,1-1.28-.52l0-4.11a1.64,1.64,0,0,1,1.3-.55c1,0,1.68,1.13,1.68,2.58S125.36,20.06,124.35,20.06Z"
+    />
+    <path
+      className="cls-1"
+      d="M133.73,12.43c-2.62,0-4.21,2.26-4.21,5.11,0,3.37,1.88,5.08,4.56,5.08a6.12,6.12,0,0,0,3-.73V19.64a5.79,5.79,0,0,1-2.7.62c-1.08,0-2-.39-2.14-1.7h5.38c0-.15,0-.74,0-1C137.71,14.69,136.35,12.43,133.73,12.43Zm-1.47,4.07c0-1.26.77-1.79,1.45-1.79s1.4.53,1.4,1.79Z"
+    />
+    <path
+      className="cls-1"
+      d="M113,13.36l-.17-.82h-2.32v9.71h2.68V15.67a1.87,1.87,0,0,1,2.05-.58V12.54A1.8,1.8,0,0,0,113,13.36Z"
+    />
+    <path
+      className="cls-1"
+      d="M99.46,15.46c0-.44.36-.61.93-.61a5.9,5.9,0,0,1,2.7.72V12.94a7,7,0,0,0-2.7-.51c-2.21,0-3.68,1.18-3.68,3.16,0,3.1,4.14,2.6,4.14,3.93,0,.52-.44.69-1,.69a6.78,6.78,0,0,1-3-.9V22a7.38,7.38,0,0,0,3,.64c2.26,0,3.82-1.15,3.82-3.16C103.62,16.12,99.46,16.72,99.46,15.46Z"
+    />
+    <path
+      className="cls-1"
+      d="M107.28,10.24l-2.65.58v8.93a2.77,2.77,0,0,0,2.82,2.87,4.16,4.16,0,0,0,1.91-.37V20c-.35.15-2.06.66-2.06-1V15h2.06V12.66h-2.06Z"
+    />
+    <polygon
+      className="cls-1"
+      points="116.25 11.7 118.98 11.13 118.98 8.97 116.25 9.54 116.25 11.7"
+    />
+    <rect className="cls-1" x="116.25" y="12.61" width="2.73" height="9.64" />
+  </svg>,
+  "PoweredByStripe"
+);
+
+export const StripeLogoLink = ({ height }: { height?: string }) => {
+  return (
+    <a href="https://stripe.com" target="_blank">
+      <PoweredByStripe
+        sx={{ width: "unset", height: height || "1em" }}
+        viewBox="0 0 150 34"
+      />
+    </a>
+  );
+};

package/src/checkout/components/StatusBar.tsx

@@ -0,0 +1,32 @@
+import { Box, IconButton, Typography } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+
+export function StatusBar({ status, backlink = "" }) {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "row",
+      }}
+    >
+      <Box sx={{ flex: "1 1" }}>
+        <IconButton href={`/${backlink}`}>
+          <ArrowBackIcon />
+        </IconButton>
+      </Box>
+      <div id="status-bar">
+        <Typography className="status-text active">PAYMENT DETAILS</Typography>
+        <div className={"status-bar" + (status > 0 ? " active" : "")}></div>
+        <Typography className={"status-text" + (status > 0 ? " active" : "")}>
+          CONFIRMATION
+        </Typography>
+        <div className={"status-bar" + (status > 1 ? " active" : "")}></div>
+        <Typography className={"status-text" + (status > 1 ? " active" : "")}>
+          ORDER PLACED
+        </Typography>
+      </div>
+      <Box sx={{ flex: "1 1" }} />
+    </Box>
+  );
+}