@springmicro/cart 0.7.22 → 0.7.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.22",
+  "version": "0.7.24",
   "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.22",
+    "@springmicro/utils": "^0.7.24",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^19.2.4",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "8bd83cea14b624431c069e6bebba77f858483da6"
+  "gitHead": "e261e94677f6c7b48082834e98f63b927bc3585f"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -39,12 +39,18 @@ import { postCheckout } from "../utils/api";
 import { CheckoutFieldsType } from ".";
 import CloseIcon from "@mui/icons-material/Close";
 
-async function createOrder(cart, customer_create, apiBaseUrl, dev) {
+async function createOrder(
+  cart,
+  billing_information,
+  apiBaseUrl,
+  affiliateCode,
+  dev,
+) {
   dev && console.log("Creating order");
   // If an order has already been created and hasn't been changed, get the previous order.
   if (cart.order && cart.order.id && cart.order.reference) {
     const res = await fetch(
-      `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`
+      `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`,
     );
     const order = await res.json();
 
@@ -63,17 +69,22 @@ async function createOrder(cart, customer_create, apiBaseUrl, dev) {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      customer_create,
       cart_data: {
         items: cart.items.map((li) => ({
           ...li,
           name: undefined,
           image: undefined,
         })),
+        billing_information,
       },
+      affiliate_code: affiliateCode,
     }),
     credentials: "include",
   });
+  if (!res.ok) {
+    throw "Something when wrong when creating your order";
+  }
+
   const order = await res.json();
 
   if (!order) throw "Missing order";
@@ -86,49 +97,61 @@ async function createOrder(cart, customer_create, apiBaseUrl, dev) {
   return order;
 }
 
-async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
-  dev && console.log("Getting tax", items);
-  dev &&
-    console.log(
-      "Getting product data",
-      products,
-      products[items[0].product_id]
-    );
-  const taxable_items = items.filter(
-    (i) => i.unit_amount > 0 && products[i.product_id].type != "DONATION"
-  );
-  dev && console.log("Taxable items", taxable_items);
-  if (taxable_items.length === 0) return { tax_amount: 0 };
-
-  const res = await fetch(
-    `${apiBaseUrl}/api/ecommerce/tax?tax_provider=${taxProvider ?? "dummy"}`,
-    {
-      method: "POST",
-      body: JSON.stringify({
-        cart_data: taxable_items.map((i) => ({
-          amount: i.unit_amount,
-          reference: i.reference,
-        })),
-        address: {
-          country: v.country,
-          city: v.locality,
-          line1: v.street_address,
-          postal_code: v.postal_code,
-          state: v.region,
-        },
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }
-  );
-  return await res.json();
-}
+// async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
+//   dev && console.log("Getting tax", items);
+//   dev &&
+//     console.log(
+//       "Getting product data",
+//       products,
+//       products[items[0].product_id],
+//     );
+//   const taxable_items = items.filter(
+//     (i) => i.unit_amount > 0 && products[i.product_id].type != "DONATION",
+//   );
+//   dev && console.log("Taxable items", taxable_items);
+//   if (taxable_items.length === 0) return { tax_amount: 0 };
+
+//   const res = await fetch(
+//     `${apiBaseUrl}/api/ecommerce/tax?tax_provider=${taxProvider ?? "dummy"}`,
+//     {
+//       method: "POST",
+//       body: JSON.stringify({
+//         cart_data: taxable_items.map((i) => ({
+//           amount: i.unit_amount,
+//           reference: i.reference,
+//         })),
+//         address: {
+//           country: v.country,
+//           city: v.locality,
+//           line1: v.street_address,
+//           postal_code: v.postal_code,
+//           state: v.region,
+//         },
+//       }),
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//     },
+//   );
+//   return await res.json();
+// }
+
+// getTax(
+//   apiBaseUrl,
+//   taxProvider,
+//   cart.items.map((i) => ({
+//     unit_amount: prices[i.price_id].unit_amount,
+//     reference: i.name,
+//     product_id: i.product_id,
+//   })),
+//   values,
+//   products,
+//   dev,
+// ),
 
 export default function ReviewAndCalculateTaxes({
   subtotal,
   discount,
-  taxState,
   shipping,
   statusState,
   cart,
@@ -145,6 +168,7 @@ export default function ReviewAndCalculateTaxes({
   CollectExtraInfo = undefined,
   defaultValues = {},
   dev,
+  affiliateCode,
   hideFields = [],
   disableFields = [],
 }) {
@@ -155,7 +179,6 @@ export default function ReviewAndCalculateTaxes({
   const stacked = useMediaQuery(theme.breakpoints.down("lg"));
 
   const [status, setStatus] = statusState;
-  const [tax, setTax] = taxState;
   const [order, setOrder] = orderState;
 
   const [precheckErrors, setPrecheckErrors] = useState([]);
@@ -166,31 +189,23 @@ export default function ReviewAndCalculateTaxes({
     // status === 0 when this is clicked.
     // Creates an order and calculates tax.
     dev && console.log("Cart items", cart.items);
-    Promise.all([
-      createOrder(
-        cart,
-        {
-          email: values.email,
-          name: values.name,
-        },
-        apiBaseUrl,
-        dev
-      ),
-      getTax(
-        apiBaseUrl,
-        taxProvider,
-        cart.items.map((i) => ({
-          unit_amount: prices[i.price_id].unit_amount,
-          reference: i.name,
-          product_id: i.product_id,
-        })),
-        values,
-        products,
-        dev
-      ),
-    ])
-      .then(([order, taxData]) => {
-        setTax(taxData);
+
+    createOrder(
+      cart,
+      {
+        email: values.email,
+        name: values.name,
+        country: values.country,
+        locality: values.locality,
+        street_address: values.street_address,
+        postal_code: values.postal_code,
+        state: values.region,
+      },
+      apiBaseUrl,
+      affiliateCode,
+      dev,
+    )
+      .then((order) => {
         setOrder(order);
         setStatus(1);
         setFormDisabled(false);
@@ -212,7 +227,7 @@ export default function ReviewAndCalculateTaxes({
       order.reference,
       values,
       "stripe",
-      invoiceId
+      invoiceId,
     )
       .then(async (data) => {
         dev && console.log("Checkout submitted.", data);
@@ -324,7 +339,7 @@ export default function ReviewAndCalculateTaxes({
               ...validationSchemaAddress,
             }
           : validationSchemaBase
-        : {}
+        : {},
     ),
     onSubmit: async (v, helpers) => {
       dev && console.log("Formik submit");
@@ -405,7 +420,7 @@ export default function ReviewAndCalculateTaxes({
           flexDirection: { xs: "column", xl: "row" },
           justifyContent: "center",
           alignItems: { xs: undefined, xl: "flex-start" },
-          px: { xs: 32, xl: 16 },
+          px: { xs: 2, xl: 16 },
           "&>div": { width: { xs: undefined, xl: "50%" } },
         }}
       >
@@ -414,7 +429,7 @@ export default function ReviewAndCalculateTaxes({
             statusState: [status, setStatus],
             cart,
             subtotal,
-            tax,
+            orderState,
             shipping,
             discount,
             prices,
@@ -475,14 +490,14 @@ function CheckoutActionFields({
   const checkoutFields: Record<string, CheckoutFieldsType> = [
     ...Object.keys(products).flatMap((productKey) =>
       (products[productKey].actions ?? []).flatMap(
-        (action) => action.checkout_fields ?? []
-      )
+        (action) => action.checkout_fields ?? [],
+      ),
     ),
     // TODO Add this once prices have checkout fields
     ...Object.keys(prices).flatMap((priceKey) =>
       (prices[priceKey].actions ?? []).flatMap(
-        (action) => action.checkout_fields ?? []
-      )
+        (action) => action.checkout_fields ?? [],
+      ),
     ),
 
     // Overwrites the checkout field to use the last one provided. This allows prices to overwrite product checkout fields if necessary.
@@ -512,7 +527,7 @@ function CheckoutActionFields({
             !(
               checkoutFields[key].hidden === true ||
               checkoutFields[key].hidden === "true"
-            )
+            ),
         )
         .map((key) => {
           const {

package/src/checkout/components/AddCard.tsx

@@ -58,7 +58,7 @@ export type AddCardProps = {
   cardRequired?: boolean;
   address?: boolean;
   onSubmit?: (
-    values: CreditCardValues & Partial<AddressValues>
+    values: CreditCardValues & Partial<AddressValues>,
   ) => Promise<any>;
   PriceDetails?: JSX.Element;
   formData?: {
@@ -195,7 +195,6 @@ export const AddCard = ({
               display: "flex",
               flexDirection: "row",
               gap: 2,
-              width: "100%",
             }}
           >
             <Box sx={{ flexGrow: 1 }}>
@@ -204,51 +203,75 @@ export const AddCard = ({
                   <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
                     Billing Address
                   </Typography>
-                  <AddressCountryField formik={formik} name="country" />
-                  {!hideFields.includes("email") && (
-                    <AddressEmailField
+                  <Box
+                    sx={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 2,
+                      width: "100%",
+                    }}
+                  >
+                    {!hideFields.includes("email") && (
+                      <AddressEmailField
+                        formik={formik}
+                        name="email"
+                        sx={{ width: "100%" }}
+                      />
+                    )}
+                    <AddressCountryField
                       formik={formik}
-                      name="email"
-                      sx={{ mt: 2 }}
+                      name="country"
+                      sx={{ width: "100%" }}
                     />
-                  )}
-                  <AddressOrganizationNameField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="organization"
-                  />
-                  <AddressStreetField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="line1"
-                    lineNo="1"
-                  />
-                  <AddressStreetField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="line2"
-                    lineNo="2"
-                    required={false}
-                  />
-                  <AddressCityField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="city"
-                  />
-                  <AddressRegionField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="region"
-                  />
-                  <AddressPostalCodeField
-                    sx={{ mt: 2 }}
-                    formik={formik}
-                    name="postal_code"
-                  />
+                    <AddressOrganizationNameField
+                      formik={formik}
+                      name="organization"
+                      sx={{ width: "100%" }}
+                    />
+                    <AddressStreetField
+                      formik={formik}
+                      name="line1"
+                      lineNo="1"
+                      sx={{ width: "100%" }}
+                    />
+                    <AddressStreetField
+                      formik={formik}
+                      name="line2"
+                      lineNo="2"
+                      required={false}
+                      sx={{ width: "100%" }}
+                    />
+                    <Box
+                      sx={{
+                        display: "flex",
+                        flexDirection: { xs: "column", md: "row" },
+                        gap: 2,
+                        width: "100%",
+                      }}
+                    >
+                      <AddressCityField
+                        formik={formik}
+                        name="city"
+                        sx={{ flex: "2 1 0", minWidth: 0 }}
+                      />
+
+                      <AddressRegionField
+                        formik={formik}
+                        name="region"
+                        sx={{ width: 300, flexShrink: 0 }}
+                      />
+
+                      <AddressPostalCodeField
+                        formik={formik}
+                        name="postal_code"
+                        sx={{ flex: "1 1 0", minWidth: 0 }}
+                      />
+                    </Box>
+                  </Box>
                 </Box>
               )}
             </Box>
-            <Box
+            {/* <Box
               sx={{
                 mt: "16px",
                 display: "flex",
@@ -258,7 +281,7 @@ export const AddCard = ({
               }}
             >
               {PriceDetails}
-            </Box>
+            </Box> */}
           </Box>
         )}
         {error && (

package/src/checkout/components/Address.tsx

@@ -105,13 +105,13 @@ export function AddressRegionField({ formik, name, sx }: AddressFieldProps) {
   useEffect(() => {
     setAddressRegionFieldOptional(
       provinces.filter(
-        (province: Province) => province.country === country2code
-      ).length === 0
+        (province: Province) => province.country === country2code,
+      ).length === 0,
     );
   }, [country2code]);
 
   const baseProps = {
-    sx: { width: 300, ...sx },
+    sx: { width: 300, flexShrink: 0, ...sx },
     label: getRegionLabel(country2code),
     name: name as string,
     id: name as string,
@@ -160,6 +160,7 @@ export function AddressStreetField({
   return (
     <>
       <TextField
+        fullWidth
         label={lineNo ? `Street Address ${lineNo}` : "Street Address"}
         sx={{ width: 400, display: "block", ...sx }}
         name={name as string}
@@ -198,6 +199,7 @@ export function AddressOrganizationNameField({
 }: AddressFieldProps) {
   return (
     <TextField
+      fullWidth
       label="Organization Name"
       sx={{ width: 400, display: "block", ...sx }}
       name={name as string}
@@ -215,7 +217,7 @@ export function AddressCityField({ formik, name, sx }: AddressFieldProps) {
   return (
     <TextField
       label="City"
-      sx={{ width: 400, display: "block", ...sx }}
+      sx={sx}
       name={name as string}
       id={name as string}
       value={formik.values[name]}
@@ -244,7 +246,7 @@ export function AddressPostalCodeField({
   return (
     <TextField
       label={getPostalCodeLabel(country2code)}
-      sx={{ width: 400, display: "block", ...sx }}
+      sx={{ ...sx }}
       name={name as string}
       id={name as string}
       value={formik.values[name]}

package/src/checkout/components/CartList.tsx

@@ -10,7 +10,7 @@ export function CartList({
   statusState,
   cart,
   subtotal,
-  tax,
+  orderState,
   shipping,
   discount,
   prices,
@@ -23,6 +23,9 @@ export function CartList({
 }) {
   const [status, setStatus] = statusState;
   const [formError, setFormError] = formErrorState;
+  const [order] = orderState;
+  const { taxes = "Pending", total } = order ?? {};
+
   return (
     <form
       style={{ flexGrow: 1 }}
@@ -65,29 +68,9 @@ export function CartList({
             <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>
-            )}
+            <Typography sx={{ fontSize: "20px", p: 1 }}>
+              Taxes: {formatPrice(taxes)}
+            </Typography>
           </Box>
           {(discount != 0 || shipping != 0) && (
             <Box
@@ -108,12 +91,12 @@ export function CartList({
           <Box>
             <Typography style={{ fontSize: "26px" }}>
               Total:{" "}
-              {typeof subtotal === "number"
+              {total || typeof subtotal === "number"
                 ? formatPrice(
                     subtotal +
-                      (tax.tax_amount === "TBD" ? 0 : tax.tax_amount) +
+                      (typeof taxes === "string" ? 0 : taxes) +
                       shipping -
-                      discount
+                      discount,
                   )
                 : subtotal}
             </Typography>
@@ -156,7 +139,7 @@ export function CartList({
           <Box className="checkout-list">
             {cart.items.map((p, i) => (
               <CartProductCard
-                product={products[p.product_id] ?? p}
+                product={{ ...p, ...(products[p.product_id] ?? {}) }}
                 i={i}
                 price={prices[p.price_id]}
                 disableProductLink={disableProductLink}

package/src/checkout/components/CartProductCard.tsx

@@ -38,7 +38,9 @@ export function CartProductCard({
           !disableMissingImage && <div className="missing-image" />
         )}
         <div className="two-row">
-          <Typography>{product.name}</Typography>
+          <Typography>
+            {product.name.replace("%s", product.hidden_id)}
+          </Typography>
           <Typography>
             {price
               ? `$${(price.unit_amount / 100).toFixed(2)}${

package/src/checkout/components/StatusBar.tsx

@@ -17,17 +17,23 @@ export function StatusBar({ status, backlink = "" }) {
           </IconButton>
         </Tooltip>
       </Box>
-      <div id="status-bar">
+      <Box id="status-bar">
         <Typography className="status-text active">PAYMENT DETAILS</Typography>
-        <div className={"status-bar" + (status > 0 ? " active" : "")}></div>
+        <Box
+          className={"status-bar" + (status > 0 ? " active" : "")}
+          sx={{ display: { xs: "none", md: "block" } }}
+        ></Box>
         <Typography className={"status-text" + (status > 0 ? " active" : "")}>
           CONFIRMATION
         </Typography>
-        <div className={"status-bar" + (status > 1 ? " active" : "")}></div>
+        <Box
+          className={"status-bar" + (status > 1 ? " active" : "")}
+          sx={{ display: { xs: "none", md: "block" } }}
+        ></Box>
         <Typography className={"status-text" + (status > 1 ? " active" : "")}>
           ORDER PLACED
         </Typography>
-      </div>
+      </Box>
       <Box sx={{ flex: "1 1" }} />
     </Box>
   );