@springmicro/cart 0.2.0-alpha.4 → 0.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,13 +23,14 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.2.0-alpha.4",
+    "@springmicro/utils": "0.2.1",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
     "react-credit-cards-2": "^1.0.2",
     "react-dom": "^18.2.0",
-    "unstorage": "^1.10.2"
+    "unstorage": "^1.10.2",
+    "vite-plugin-dts": "^3.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
@@ -46,5 +47,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "235b44295dc41168e78c6bc31f286ae7c4587a6c"
+  "gitHead": "5060bfe477b5be4d15de32991fb8ebc839143430"
 }

package/src/checkout/Address.tsx

@@ -23,6 +23,7 @@ export type AddressValues = {
   line1: string;
   line2?: string;
   organization?: string;
+  email: string;
   city: string;
   postal_code: string;
 };
@@ -174,6 +175,24 @@ export function AddressStreetField({
   );
 }
 
+export function AddressEmailField({ formik, name, sx }: AddressFieldProps) {
+  return (
+    <>
+      <TextField
+        label={"Email"}
+        sx={{ width: 400, display: "block", ...sx }}
+        name={name as string}
+        id={name as string}
+        value={formik.values[name]}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        type="email"
+        required={true}
+      />
+    </>
+  );
+}
+
 export function AddressOrganizationNameField({
   formik,
   name,

package/src/checkout/Billing.tsx

@@ -9,6 +9,7 @@ import {
   AddressPostalCodeField,
   AddressRegionField,
   AddressStreetField,
+  AddressEmailField,
   AddressValues,
 } from "./Address";
 import {
@@ -16,7 +17,7 @@ import {
   allCountriesReverse,
   getPostalCodeDefault,
 } from "@springmicro/utils/address";
-import { Box, Button, TextField, Typography } from "@mui/material";
+import { Box, Button, Container, TextField, Typography } from "@mui/material";
 import Cards from "react-credit-cards-2";
 import { FocusEventHandler } from "react";
 import {
@@ -42,6 +43,12 @@ export type CreditCardValues = {
 };
 
 export type AddCardProps = {
+  contact?: {
+    organization?: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+  };
   stacked?: boolean;
   error?: string;
   address?: boolean;
@@ -51,6 +58,7 @@ export type AddCardProps = {
 };
 
 export const AddCard = ({
+  contact,
   error,
   stacked = false,
   address = true,
@@ -62,16 +70,17 @@ export const AddCard = ({
     cvc: "",
     expiry: "",
     focus: "number",
-    name: "",
+    name: contact ? `${contact.first_name} ${contact.last_name}` : "",
     number: "",
   } as CreditCardValues;
   const initialCountry = "US";
   const initialValuesAddress = {
     country: initialCountry ? allCountries[initialCountry] : "",
+    email: contact?.email ?? "",
     region: "",
     line1: "",
     line2: "",
-    organization: "",
+    organization: contact?.organization ?? "",
     city: "",
     postal_code: getPostalCodeDefault(initialCountry),
   } as AddressValues;
@@ -101,6 +110,7 @@ export const AddCard = ({
 
   const validationSchemaAddress = {
     country: Yup.string().required("Country is required."),
+    email: Yup.string().email().required("Email is required."),
     line1: Yup.string().required("Street Address 1 is required."),
     city: Yup.string().required("City is required."),
     postal_code: Yup.string().required("Postal Code is required."),
@@ -137,6 +147,11 @@ export const AddCard = ({
           delete values.line2;
           // @ts-ignore
           delete values.city;
+          // @ts-ignore
+          if (Object.keys(allCountriesReverse).includes(values.country)) {
+            // @ts-ignore
+            values.country = allCountriesReverse[values.country];
+          }
         }
         values["card_number"] = values.number;
         values["expiry_date"] = values.expiry;
@@ -175,7 +190,7 @@ export const AddCard = ({
   }, [formik.errors]);
 
   return (
-    <>
+    <Container id="paymentMethodForm">
       <form
         onSubmit={(e) => {
           e.preventDefault();
@@ -205,6 +220,7 @@ export const AddCard = ({
               type="tel"
               name="number"
               label="Card Number"
+              required
               onBlur={formik.handleBlur}
               onChange={handleInputChange}
               onFocus={handleInputFocus}
@@ -219,6 +235,7 @@ export const AddCard = ({
               type="text"
               name="name"
               label="Name on Card"
+              required
               onBlur={formik.handleBlur}
               onChange={handleInputChange}
               onFocus={handleInputFocus}
@@ -250,6 +267,7 @@ export const AddCard = ({
               type="tel"
               name="cvc"
               label="CVC"
+              required
               onBlur={formik.handleBlur}
               onChange={handleInputChange}
               onFocus={handleInputFocus}
@@ -272,6 +290,7 @@ export const AddCard = ({
                 Billing Address
               </Typography>
               <AddressCountryField formik={formik} name="country" />
+              <AddressEmailField formik={formik} name="email" sx={{ mt: 2 }} />
               <AddressOrganizationNameField
                 sx={{ mt: 2 }}
                 formik={formik}
@@ -322,6 +341,6 @@ export const AddCard = ({
           <StripeLogoLink />
         </Box>
       </form>
-    </>
+    </Container>
   );
 };

package/src/checkout/Order.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  Container,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from "@mui/material";
+
+const Order = ({ order, invoiceId }) => {
+  // Formatter for currency in USD
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+
+  return (
+    <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>
+
+      <Typography variant="h6" gutterBottom>
+        Subtotal (excl. taxes): {formatter.format(order.total_ex_taxes / 100)}
+      </Typography>
+      <Typography variant="h6" gutterBottom>
+        Taxes: {formatter.format(order.taxes / 100)}
+      </Typography>
+      <Typography variant="h6" gutterBottom>
+        Delivery Fees:{" "}
+        {formatter.format(
+          order.delivery_fees ? order.delivery_fees / 100 : 0.0
+        )}
+      </Typography>
+      <Typography variant="h5" gutterBottom sx={{ mb: 4 }}>
+        Total: {formatter.format(order.total / 100)}
+      </Typography>
+    </Container>
+  );
+};
+
+export default Order;

package/src/checkout/index.tsx

@@ -0,0 +1,97 @@
+import { AddCard, type AddCardProps } from "./Billing";
+import Order from "./Order";
+import { postCheckout } from "../utils/api";
+import React from "react";
+import { Alert, Container, Typography, CircularProgress } from "@mui/material";
+
+type CheckoutProps = AddCardProps & {
+  order: any;
+  apiBaseUrl: string;
+  invoiceId?: string;
+};
+
+export default function Checkout({
+  order,
+  apiBaseUrl,
+  invoiceId,
+}: CheckoutProps) {
+  const currentUrl = new URL(window.location.href);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [successData, setSuccessData] = React.useState<any | null>(null);
+  const onSubmit = async (values: any) => {
+    setIsSubmitting(true);
+    const data = await postCheckout(
+      apiBaseUrl,
+      order.id,
+      order.reference,
+      values,
+      "stripe",
+      invoiceId
+    );
+
+    if (data instanceof Response) {
+      alert(JSON.stringify(data));
+    } else {
+      // success
+      setSuccessData(data);
+      // Get the current URL
+      const currentUrl = new URL(window.location.href);
+      // Set the query parameter 'showReceipt' to '1'
+      currentUrl.searchParams.set("showReceipt", "1");
+
+      // Update the browser's URL and history without refreshing the page
+      window.history.pushState({}, "", currentUrl);
+    }
+    setIsSubmitting(false);
+  };
+
+  if (
+    successData !== null ||
+    currentUrl.searchParams.get("showReceipt") ||
+    !["pending", "awaiting_payment"].includes(order.status)
+  ) {
+    const print = (
+      <a
+        href="#"
+        onClick={() => {
+          window.print();
+          return false;
+        }}
+      >
+        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 (
+      <>
+        <Order order={order} invoiceId={invoiceId} />
+        <Container>
+          <Alert severity="success">{text}</Alert>
+        </Container>
+      </>
+    );
+  }
+  return (
+    <>
+      <Order order={order} invoiceId={invoiceId} />
+      {isSubmitting ? (
+        <Container>
+          <Typography>
+            <CircularProgress color="primary" /> Submitting...
+          </Typography>
+        </Container>
+      ) : (
+        <AddCard contact={order.customer} onSubmit={onSubmit} />
+      )}
+    </>
+  );
+}

package/src/index.css

@@ -0,0 +1,5 @@
+@media print {
+  #paymentMethodForm {
+    display: none !important;
+  }
+}

package/src/index.ts

@@ -8,9 +8,14 @@ import {
 import type { Cart, CartProduct } from "./types";
 import AddToCartForm from "./AddToCartForm";
 import { AddCard, AddCardProps } from "./checkout/Billing";
+import Order from "./checkout/Order";
+import Checkout from "./checkout";
 import "react-credit-cards-2/dist/es/styles-compiled.css";
+import "./index.css";
 
 export {
+  Checkout,
+  Order,
   AddCard,
   type AddCardProps,
   cartStore,

package/src/utils/api.ts

@@ -0,0 +1,68 @@
+function postInit(body: any): RequestInit {
+  const init: RequestInit = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+  };
+  if (typeof body === "string") {
+    return { ...init, body };
+  }
+  return { ...init, body: JSON.stringify(body) };
+}
+
+async function dataOrResponse(res: Response) {
+  if (res.status === 200) {
+    return await res.json();
+  } else {
+    return res;
+  }
+}
+
+async function dataOr404(res: Response) {
+  if (res.status === 200) {
+    return await res.json();
+  } else {
+    return new Response(null, { status: 404 });
+  }
+}
+
+export async function getOrder(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string
+) {
+  const res = await fetch(
+    `${apiBaseUrl}/api/ecommerce/orders/${id}/reference/${orderReference}`
+  );
+  return await dataOr404(res);
+}
+
+export async function getInvoice(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string
+) {
+  const res = await fetch(
+    `${apiBaseUrl}/api/ecommerce/invoice/${id}/reference/${orderReference}`
+  );
+  return await dataOr404(res);
+}
+
+export async function postCheckout(
+  apiBaseUrl: string,
+  id: string,
+  orderReference: string,
+  body: object,
+  paymentProvider: string,
+  invoiceId?: string
+): Promise<object | Response> {
+  const url = new URL(
+    `${apiBaseUrl}/api/ecommerce/checkout/${id}/${orderReference}`
+  );
+  url.searchParams.set("payment_provider", paymentProvider);
+  if (invoiceId !== undefined) {
+    url.searchParams.set("invoice_id", invoiceId);
+  }
+  console.log(body);
+  const res = await fetch(url, postInit(body));
+  return await dataOrResponse(res);
+}