@springmicro/cart 0.7.22 → 0.7.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.7.22",
+  "version": "0.7.23",
   "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.23",
     "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": "d1f4ad0110ef4cf25f65cc1b59886624db416a78"
 }

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,
+  customer_create,
+  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();
 
@@ -71,6 +77,7 @@ async function createOrder(cart, customer_create, apiBaseUrl, dev) {
           image: undefined,
         })),
       },
+      affiliate_code: affiliateCode,
     }),
     credentials: "include",
   });
@@ -92,10 +99,10 @@ async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
     console.log(
       "Getting product data",
       products,
-      products[items[0].product_id]
+      products[items[0].product_id],
     );
   const taxable_items = items.filter(
-    (i) => i.unit_amount > 0 && products[i.product_id].type != "DONATION"
+    (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 };
@@ -120,7 +127,7 @@ async function getTax(apiBaseUrl, taxProvider, items, v, products, dev) {
       headers: {
         "Content-Type": "application/json",
       },
-    }
+    },
   );
   return await res.json();
 }
@@ -145,6 +152,7 @@ export default function ReviewAndCalculateTaxes({
   CollectExtraInfo = undefined,
   defaultValues = {},
   dev,
+  affiliateCode,
   hideFields = [],
   disableFields = [],
 }) {
@@ -174,7 +182,8 @@ export default function ReviewAndCalculateTaxes({
           name: values.name,
         },
         apiBaseUrl,
-        dev
+        affiliateCode,
+        dev,
       ),
       getTax(
         apiBaseUrl,
@@ -186,7 +195,7 @@ export default function ReviewAndCalculateTaxes({
         })),
         values,
         products,
-        dev
+        dev,
       ),
     ])
       .then(([order, taxData]) => {
@@ -212,7 +221,7 @@ export default function ReviewAndCalculateTaxes({
       order.reference,
       values,
       "stripe",
-      invoiceId
+      invoiceId,
     )
       .then(async (data) => {
         dev && console.log("Checkout submitted.", data);
@@ -324,7 +333,7 @@ export default function ReviewAndCalculateTaxes({
               ...validationSchemaAddress,
             }
           : validationSchemaBase
-        : {}
+        : {},
     ),
     onSubmit: async (v, helpers) => {
       dev && console.log("Formik submit");
@@ -405,7 +414,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%" } },
         }}
       >
@@ -475,14 +484,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 +521,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/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>
   );

package/src/checkout/index.tsx

@@ -28,6 +28,7 @@ export default function Checkout({
   disableFields = [],
   dev,
   invoiceId,
+  affiliateCode,
   order: _order,
 }: {
   apiBaseUrl: string;
@@ -41,6 +42,7 @@ export default function Checkout({
   disableFields?: string[];
   dev?: boolean;
   invoiceId?;
+  affiliateCode?;
   order?;
 }) {
   const store = useStore(cartStore);
@@ -76,12 +78,12 @@ export default function Checkout({
                 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.
+                  : 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.
               );
             })
             .catch(() => {
               console.error("Failed to get order");
-            })
+            }),
       );
     }
   }, []);
@@ -92,22 +94,22 @@ export default function Checkout({
     const pricesToGet = cart.items
       .map((c) => c.price_id)
       .filter(
-        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1
+        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1,
       );
 
     // filter out products that have already been queried
     const productsToGet = cart.items
       .map((c) => c.product_id)
       .filter(
-        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1
+        (pId) => Object.keys(products).findIndex((pKey) => pKey == pId) === -1,
       );
 
     const priceUrl = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
-      ","
+      ",",
     )}]}`;
 
     const productUrl = `${apiBaseUrl}/api/ecommerce/products?filter={'ids':[${productsToGet.join(
-      ","
+      ",",
     )}]}`;
 
     const fetchSettings = {
@@ -137,7 +139,7 @@ export default function Checkout({
               ...o,
               [p.id]: p,
             }),
-            prices
+            prices,
           );
           setPrices(data);
         }
@@ -148,7 +150,7 @@ export default function Checkout({
               ...o,
               [p.id]: p,
             }),
-            products
+            products,
           );
           setProducts(data);
         }
@@ -160,7 +162,7 @@ export default function Checkout({
     setSubtotal(
       cart.items
         .map((product) => prices[product.price_id]?.unit_amount)
-        .reduce((p, c) => (c ? p + c : p), 0)
+        .reduce((p, c) => (c ? p + c : p), 0),
     );
   }, [cart, prices]);
 
@@ -168,7 +170,7 @@ export default function Checkout({
     const taxable_items = cart.items.filter(
       (i) =>
         prices[i.price_id]?.unit_amount > 0 &&
-        products[i.product_id]?.type !== "DONATION"
+        products[i.product_id]?.type !== "DONATION",
     );
 
     if (taxable_items.length === 0) {
@@ -239,6 +241,7 @@ export default function Checkout({
             hideFields={hideFields}
             disableFields={disableFields}
             invoiceId={invoiceId}
+            affiliateCode={affiliateCode}
           />
         )}
         {status === 2 && order !== undefined && (

package/src/utils/storage.ts

@@ -61,7 +61,6 @@ apiPathDetails.listen((pathDetails, oldPathDetails) => {
         });
 
         cartStore.set(cartStr);
-        console.log(cartStr);
       } else if (status === 404 && localCartData.items.length > 0) {
         fetchFromCartApi(
           "PUT",
@@ -115,7 +114,6 @@ export function logout(apiBaseUrl: string | undefined) {
 }
 
 export function addToCart(p: CartProduct) {
-  console.log("ADD TO CART", p);
   const cart: Cart = JSON.parse(cartStore.get());
   const newCart: Cart = {
     ...cart,