@springmicro/cart 0.5.5 → 0.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.5",
+  "version": "0.5.6",
   "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.5.5",
+    "@springmicro/utils": "0.5.6",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "9ccb87063f4e9e3a6b51bf48c27c1323b3de2858"
+  "gitHead": "26f6ece178f8cd1818b4edea235e1564b7825a7b"
 }

package/src/checkout/ReviewCartAndCalculateTaxes.tsx

@@ -111,6 +111,7 @@ export default function ReviewAndCalculateTaxes({
   invoiceId = undefined,
   onPlacement = undefined,
   CollectExtraInfo = undefined,
+  defaultValues = {},
 }) {
   const [formDisabled, setFormDisabled] = useState(true);
   const [formError, setFormError] = useState(undefined);
@@ -180,7 +181,7 @@ export default function ReviewAndCalculateTaxes({
         setFormDisabled(false);
       })
       .catch(() => {
-        console.log("ERROR");
+        // console.log("ERROR");
         setFormError(true);
       });
   }
@@ -213,9 +214,12 @@ export default function ReviewAndCalculateTaxes({
     postal_code: getPostalCodeDefault(initialCountry),
   } as AddressValues;
 
-  const initialValues: CreditCardValues & Partial<AddressValues> = address
-    ? { ...initialValuesBase, ...initialValuesAddress }
-    : initialValuesBase;
+  const initialValues: CreditCardValues & Partial<AddressValues> & any = {
+    ...(address
+      ? { ...initialValuesBase, ...initialValuesAddress }
+      : initialValuesBase),
+    ...defaultValues,
+  };
 
   const validationSchemaBase = {
     expiry: Yup.string()

package/src/checkout/index.tsx

@@ -15,6 +15,7 @@ export default function Checkout({
   disableProductLink = false,
   disableMissingImage = false,
   CollectExtraInfo,
+  defaultValues,
 }: {
   apiBaseUrl: string;
   taxProvider: string;
@@ -22,6 +23,7 @@ export default function Checkout({
   disableProductLink?: boolean;
   disableMissingImage?: boolean;
   CollectExtraInfo?: React.FC<{ formik: FormikConfig<any> }>;
+  defaultValues?: Record<string, any>;
 }) {
   const cart = JSON.parse(useStore(cartStore));
 
@@ -154,6 +156,7 @@ export default function Checkout({
               setStatus(2);
             }}
             CollectExtraInfo={CollectExtraInfo}
+            defaultValues={defaultValues}
           />
         )}
         {status === 2 && order !== undefined && (

package/src/index.ts

@@ -5,6 +5,8 @@ import {
   removeFromCart,
   clearCart,
   setOrder,
+  login,
+  logout,
 } from "./utils/storage";
 import type { Cart, CartProduct } from "./types";
 import AddToCartForm from "./AddToCartForm";
@@ -33,4 +35,6 @@ export {
   setOrder,
   ProductCard,
   ReviewCartAndCalculateTaxes,
+  login,
+  logout,
 };

package/src/utils/storage.ts

@@ -22,26 +22,80 @@ function cartProductToCartDataItemIds(product: CartProduct) {
   };
 }
 
-apiPathDetails.listen((pathDetails) => {
+function cartToApiCart(pathDetails, cart) {
+  return JSON.stringify({
+    user_id: pathDetails.userId,
+    items: cart.items.map((p) => cartProductToCartDataItemIds(p)),
+    order: cart.order ? JSON.stringify(cart.order) : undefined,
+  });
+}
+
+function apiCartToLocalCart(cart) {
+  return JSON.stringify({
+    items: cart.items ?? [],
+    authentication: { loggedIn: !!cart.user_id, user_id: cart.user_id },
+    order: cart.order,
+  });
+}
+
+apiPathDetails.listen((pathDetails, oldPathDetails) => {
+  const localCartData = JSON.parse(cartStore.get());
   if (pathDetailsIsFullyDefined(pathDetails)) {
     // Runs on init if there is a user id and api key. Automatically logs in if userId is updated from undefined.
-    fetchFromCartApi("GET", pathDetails).then(async (c) => {
-      const cart = await c.json();
-      cartStore.set(
-        JSON.stringify({
-          authentication: { loggedIn: true, user_id: cart.user_id },
-          items: JSON.parse((cart as any).items),
-          order: cart.order ? JSON.parse((cart as any).order) : undefined,
-        })
-      );
+    fetchFromCartApi("GET", pathDetails).then(async ({ status, json }) => {
+      if (status === 200) {
+        const cart = await json();
+        cartStore.set(
+          JSON.stringify({
+            authentication: { loggedIn: true, user_id: cart.user_id },
+            items: JSON.parse((cart as any).items),
+            order: cart.order ? JSON.parse((cart as any).order) : undefined,
+          })
+        );
+      } else if (status === 404 && localCartData.items.length > 0) {
+        fetchFromCartApi(
+          "PUT",
+          pathDetails,
+          cartToApiCart(pathDetails, localCartData)
+        ).then(async ({ ok, json }) => {
+          if (!ok) return;
+          const cart = await json();
+          cartStore.set(
+            JSON.stringify({
+              authentication: { loggedIn: true, user_id: cart.user_id },
+              items: JSON.parse((cart as any).items),
+              order: cart.order ? JSON.parse((cart as any).order) : undefined,
+            })
+          );
+        });
+      } else {
+        cartStore.set(
+          JSON.stringify({
+            ...defaultCartValue,
+            authentication: { loggedIn: true, user_id: pathDetails.userId },
+          })
+        );
+      }
     });
-  } else {
-    const localCartData = JSON.parse(cartStore.get());
-    if (localCartData.authentication.loggedIn)
-      cartStore.set(JSON.stringify(defaultCartValue));
+  } else if (pathDetailsIsFullyDefined(oldPathDetails)) {
+    cartStore.set(JSON.stringify(defaultCartValue));
   }
 });
 
+export function login(apiBaseUrl, user) {
+  apiPathDetails.set({
+    baseUrl: apiBaseUrl,
+    userId: user ? user.id : undefined,
+  });
+}
+
+export function logout(apiBaseUrl: string | undefined) {
+  apiPathDetails.set({
+    baseUrl: apiBaseUrl,
+    userId: undefined,
+  });
+}
+
 export function addToCart(p: CartProduct) {
   const cart: Cart = JSON.parse(cartStore.get());
   const newCart: Cart = {
@@ -50,6 +104,10 @@ export function addToCart(p: CartProduct) {
     order: undefined,
   };
 
+  // Update local cart
+  cartStore.set(JSON.stringify(newCart));
+
+  // Update db cart if enabled
   const pathDetails = apiPathDetails.get();
   if (pathDetailsIsFullyDefined(pathDetails)) {
     fetchFromCartApi(
@@ -59,11 +117,13 @@ export function addToCart(p: CartProduct) {
         user_id: pathDetails.userId,
         items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
       })
-    ).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
+    ).then(async (res) => {
+      if (!res.ok) return;
+
+      // Update cart based on server info.
+      const cart = await res.json();
+      cartStore.set(apiCartToLocalCart(cart));
     });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
   }
 }
 
@@ -74,6 +134,10 @@ export function removeFromCart(i: number) {
   products.splice(i, 1);
   const newCart: Cart = { ...cart, items: products, order: undefined };
 
+  // Update local cart
+  cartStore.set(JSON.stringify(newCart));
+
+  // Update db cart if enabled
   const pathDetails = apiPathDetails.get();
   if (pathDetailsIsFullyDefined(pathDetails)) {
     // If products.length is 0, delete cart. Otheriwise, update cart.
@@ -88,11 +152,13 @@ export function removeFromCart(i: number) {
       cartIsEmpty ? "PUT" : "DELETE",
       pathDetails,
       cartIsEmpty ? JSON.stringify(body) : undefined
-    ).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
+    ).then(async (res) => {
+      if (!res.ok) return;
+
+      // Update cart based on server info.
+      const cart = await res.json();
+      cartStore.set(apiCartToLocalCart(cart));
     });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
   }
 }
 
@@ -100,13 +166,14 @@ export function clearCart() {
   const cart: Cart = JSON.parse(cartStore.get());
   const newCart: Cart = { ...cart, items: [], order: undefined };
 
+  // Update local first
+  cartStore.set(JSON.stringify(newCart));
+
   const pathDetails = apiPathDetails.get();
   if (pathDetailsIsFullyDefined(pathDetails)) {
     fetchFromCartApi("DELETE", pathDetails).then(async () => {
       cartStore.set(JSON.stringify(newCart));
     });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
   }
 }