@springmicro/cart 0.3.4 → 0.4.0

package/src/checkout/components/Address.tsx

@@ -43,9 +43,9 @@ export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
   return (
     <Autocomplete
       sx={{ width: 300, ...sx }}
-      options={Object.values(allCountries)}
+      options={Object.keys(allCountries)}
       autoHighlight
-      getOptionLabel={(option) => option}
+      getOptionLabel={(option) => allCountries[option]}
       value={formik.values[name] as string}
       onChange={(e, newValue) => {
         // console.log(newValue)
@@ -75,14 +75,14 @@ export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
             loading="lazy"
             width="20"
             src={`https://flagcdn.com/w20/${allCountriesReverse[
-              option
+              allCountries[option]
             ].toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${allCountriesReverse[
-              option
+              allCountries[option]
             ].toLowerCase()}.png 2x`}
             alt=""
           />
-          {option}
+          {allCountries[option]}
         </Box>
       )}
       renderInput={(params) => (
@@ -100,9 +100,7 @@ export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
 export function AddressRegionField({ formik, name, sx }: AddressFieldProps) {
   const [addressRegionFieldOptional, setAddressRegionFieldOptional] =
     useState<boolean>(false);
-  const country2code = allCountriesReverse[
-    formik.values["country"] as string
-  ] as Alpha2Code;
+  const country2code = formik.values["country"] as Alpha2Code;
 
   useEffect(() => {
     setAddressRegionFieldOptional(
@@ -233,9 +231,7 @@ export function AddressPostalCodeField({
   name,
   sx,
 }: AddressFieldProps) {
-  const country2code = allCountriesReverse[
-    formik.values["country"] as string
-  ] as Alpha2Code;
+  const country2code = formik.values["country"] as Alpha2Code;
 
   React.useEffect(() => {
     if (getPostalCodeDefault(country2code)) {

package/src/checkout/components/CartList.tsx

@@ -0,0 +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>
+  );
+}

package/src/checkout/components/CartProductCard.css

@@ -58,7 +58,7 @@
 }
 
 .remove-button {
-  color: transparent !important;
+  color: #ff000040 !important;
   transition: all 0.2s !important;
 }
 

package/src/checkout/components/CartProductCard.tsx

@@ -10,14 +10,18 @@ export function CartProductCard({
   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);
-  console.log(product);
+
   return (
     <a
       className="product-card"
@@ -28,7 +32,11 @@ export function CartProductCard({
       }
     >
       <div className="left-section">
-        {product.image ? <img /> : <div className="missing-image"></div>}
+        {product.image ? (
+          <img />
+        ) : (
+          !disableMissingImage && <div className="missing-image" />
+        )}
         <div className="two-row">
           <Typography>{product.name}</Typography>
           <Typography>
@@ -56,24 +64,26 @@ export function CartProductCard({
           alignItems: "center",
         }}
       >
-        <Tooltip
-          title="Remove from cart"
-          onMouseEnter={() => {
-            setHoverDelete(true);
-          }}
-          onMouseLeave={() => {
-            setHoverDelete(false);
-          }}
-        >
-          <IconButton
-            className="remove-button"
-            onClick={() => {
-              removeFromCart(i);
+        {!disableModification && (
+          <Tooltip
+            title="Remove from cart"
+            onMouseEnter={() => {
+              setHoverDelete(true);
+            }}
+            onMouseLeave={() => {
+              setHoverDelete(false);
             }}
           >
-            <CloseIcon />
-          </IconButton>
-        </Tooltip>
+            <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/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>
+  );
+}

package/src/checkout/index.tsx

@@ -0,0 +1,165 @@
+import "./ReviewCartAndCalculateTaxes.css";
+import { useStore } from "@nanostores/react";
+import { useEffect, useState } from "react";
+import { Typography } from "@mui/material";
+import { cartStore, clearCart } from "../utils/storage";
+import { StatusBar } from "./components/StatusBar";
+import ReviewAndCalculateTaxes from "./ReviewCartAndCalculateTaxes";
+import Invoice from "./components/Invoice";
+import { FormikConfig } from "formik";
+
+export default function Checkout({
+  apiBaseUrl,
+  taxProvider,
+  emptyCartLink = "",
+  disableProductLink = false,
+  disableMissingImage = false,
+  CollectExtraInfo,
+}: {
+  apiBaseUrl: string;
+  taxProvider: string;
+  emptyCartLink?: string;
+  disableProductLink?: boolean;
+  disableMissingImage?: boolean;
+  CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
+}) {
+  const cart = JSON.parse(useStore(cartStore));
+
+  const [prices, setPrices] = useState({});
+  const [subtotal, setSubtotal] = useState("Loading prices...");
+  const taxState = useState({ tax_amount: "TBD" });
+  const shipping = 0;
+  const discount = 0;
+
+  const [status, setStatus] = useState(0);
+  const [order, setOrder] = useState(undefined);
+  const [successData, setSuccessData] = useState(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    const sr = params.get("showReceipt");
+    const oid = params.get("orderId");
+    const or = params.get("orderRef");
+    if (oid && or) {
+      fetch(`${apiBaseUrl}/api/ecommerce/orders/${oid}/reference/${or}`).then(
+        async (res) =>
+          await res.json().then((order) => {
+            setOrder(order);
+            setStatus(
+              order.charge_id ||
+                !["pending", "awaiting_payment"].includes(order.status)
+                ? 2
+                : 0 // normally this should be set to 1 but we need to ensure it sends card data to the payment provider and that data is likely lost on refresh.
+            );
+          })
+      );
+    }
+  }, []);
+
+  // build pricing list
+  useEffect(() => {
+    // filter out prices that have already been queried
+    const pricesToGet = cart.items
+      .map((c) => c.price_id)
+      .filter(
+        (pId) => Object.keys(prices).findIndex((pKey) => pKey == pId) === -1
+      );
+    if (pricesToGet.length === 0) return;
+
+    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
+      ","
+    )}]}`;
+    fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) =>
+        res.json().then((data) => {
+          const pricingData = { ...prices };
+
+          data.forEach((p) => {
+            pricingData[p.id] = p;
+          });
+          setPrices(pricingData);
+        })
+      )
+      .catch(() => {});
+  }, [cart]);
+
+  useEffect(() => {
+    setSubtotal(
+      cart.items
+        .map((product) => prices[product.price_id]?.unit_amount)
+        .reduce((p, c) => (c ? p + c : p), 0)
+    );
+  }, [cart, prices]);
+
+  if (status === 0 && cart.items.length === 0)
+    return (
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+          gap: 8,
+        }}
+      >
+        <Typography style={{ fontSize: 32, fontWeight: 600 }}>
+          Cart is empty
+        </Typography>
+        <a className="shopping-button" href={`/${emptyCartLink}`}>
+          <Typography>BACK</Typography>
+        </a>
+      </div>
+    );
+
+  return (
+    <div>
+      <StatusBar status={status} />
+      <div>
+        {/**
+         *
+         * status === 0
+         * Manage cart and enter in payment details
+         *
+         * status === 1
+         * Review taxes and shipping
+         *
+         * status === 2
+         * Order has been place. Invoice for printing.
+         *
+         */}
+
+        {status != 2 && (
+          <ReviewAndCalculateTaxes
+            subtotal={subtotal}
+            discount={discount}
+            shipping={shipping}
+            taxProvider={taxProvider}
+            taxState={taxState}
+            statusState={[status, setStatus]}
+            cart={cart}
+            prices={prices}
+            apiBaseUrl={apiBaseUrl}
+            orderState={[order, setOrder]}
+            disableProductLink={disableProductLink}
+            disableMissingImage={disableMissingImage}
+            setSuccessData={setSuccessData}
+            onPlacement={() => {
+              clearCart();
+              setStatus(2);
+            }}
+            CollectExtraInfo={CollectExtraInfo}
+          />
+        )}
+        {status === 2 && order !== undefined && (
+          <Invoice order={order} successData={successData} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -8,17 +8,18 @@ import {
 } from "./utils/storage";
 import type { Cart, CartProduct } from "./types";
 import AddToCartForm from "./AddToCartForm";
-import { AddCard, AddCardProps } from "./checkout/components/Billing";
-import Order from "./checkout/components/Order";
-import Checkout from "./checkout/components";
+import { AddCard, AddCardProps } from "./checkout/components/AddCard";
+// import Order from "./checkout/components/Order";
+import Invoice from "./checkout/components/Invoice";
 import "react-credit-cards-2/dist/es/styles-compiled.css";
 import "./index.css";
 import ProductCard from "./ProductCard";
-import CheckoutList from "./checkout/CheckoutList";
+import ReviewCartAndCalculateTaxes from "./checkout/ReviewCartAndCalculateTaxes";
+import Checkout from "./checkout";
 
 export {
   Checkout,
-  Order,
+  Invoice,
   AddCard,
   type AddCardProps,
   cartStore,
@@ -31,5 +32,5 @@ export {
   AddToCartForm,
   setOrder,
   ProductCard,
-  CheckoutList,
+  ReviewCartAndCalculateTaxes,
 };