@springmicro/cart 0.7.0 → 0.7.2

package/src/types.d.ts

@@ -1,56 +1,58 @@
-export interface Cart {
-  authentication: {
-    loggedIn: boolean;
-    user_id?: number | string;
-  };
-  items: CartProduct[];
-  order?: {
-    id: number;
-    reference: string;
-  };
-}
-export type CartProduct = {
-  product_id: number | string;
-  price_id: number | string;
-  quantity?: number;
-  // Used in local cart, delete when sent to api
-  name: string;
-  image?: string;
-};
-
-type CartContextType = {
-  cart: Cart;
-  addToCart: (p: CartProduct) => void;
-  removeFromCart: (i: number) => void;
-  clearCart: () => void;
-};
-
-type ApiCartResponse = {
-  cart: string;
-  id: any;
-  user_id: number | string;
-};
-
-export type PathDetailsType = {
-  baseUrl?: string;
-  userId?: string | number;
-};
-
-export type Product = {
-  id: string | number;
-  name: string;
-  /**  v  Parses to @type {ProductPricing}  v  */
-  pricing: string;
-  description?: string;
-} & unknown;
-
-export type ProductPricing = {
-  id: number | string;
-  unit_amount: number; // in cents
-  recurring?: {
-    interval: "month" | "week" | "day";
-    interval_count: number;
-  };
-  tier_label?: string;
-  tier_description?: string;
-};
+export interface Cart {
+  authentication: {
+    loggedIn: boolean;
+    user_id?: number | string;
+  };
+  items: CartProduct[];
+  order?: {
+    id: number;
+    reference: string;
+  };
+}
+export type CartProduct = {
+  product_id: number | string;
+  price_id: number | string;
+  quantity?: number;
+  // Used in local cart, delete when sent to api
+  name: string;
+  action_data?: object;
+  hidden_id?: string;
+  image?: string;
+};
+
+type CartContextType = {
+  cart: Cart;
+  addToCart: (p: CartProduct) => void;
+  removeFromCart: (i: number) => void;
+  clearCart: () => void;
+};
+
+type ApiCartResponse = {
+  cart: string;
+  id: any;
+  user_id: number | string;
+};
+
+export type PathDetailsType = {
+  baseUrl?: string;
+  userId?: string | number;
+};
+
+export type Product = {
+  id: string | number;
+  name: string;
+  /**  v  Parses to @type {ProductPricing}  v  */
+  pricing: string;
+  description?: string;
+} & unknown;
+
+export type ProductPricing = {
+  id: number | string;
+  unit_amount: number; // in cents
+  recurring?: {
+    interval: "month" | "week" | "day";
+    interval_count: number;
+  };
+  tier_label?: string;
+  tier_description?: string;
+};

package/src/utils/api.ts

@@ -1,67 +1,67 @@
-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);
-  }
-  const res = await fetch(url, postInit(body));
-  return await dataOrResponse(res);
-}
+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);
+  }
+  const res = await fetch(url, postInit(body));
+  return await dataOrResponse(res);
+}

package/src/utils/cartAuthHandler.ts

@@ -1,50 +1,50 @@
-import { defaultCartValue } from ".";
-import { ApiCartResponse, Cart } from "../types";
-import { Storage } from "unstorage";
-
-export function cartAuthHandler(
-  cartState: [Cart, React.Dispatch<React.SetStateAction<Cart>>],
-  storage: {
-    api: Storage<any>;
-    local: Storage<any>;
-  } | null,
-  userId: number | string | undefined,
-  prevUserId: number | string | undefined
-) {
-  const [cart, setCart] = cartState;
-  if (storage === null) return () => {}; // storage can be null.
-
-  if (userId === prevUserId) return;
-
-  if (userId === undefined) {
-    // logout
-    setCart(defaultCartValue);
-    return;
-  }
-
-  // login
-  if (cart.items.length > 0) {
-    setCart((c) => ({
-      ...c,
-      authentication: {
-        loggedIn: true,
-        user_id: userId,
-      },
-    }));
-    return;
-  }
-  storage.api
-    .getItem(`${userId}`)
-    .then((c2: ApiCartResponse) => {
-      if (!c2) return;
-
-      setCart({
-        items: JSON.parse(c2.cart),
-        authentication: {
-          loggedIn: true,
-          user_id: c2.user_id,
-        },
-      });
-    })
-    .catch(() => {});
-}
+import { defaultCartValue } from ".";
+import { ApiCartResponse, Cart } from "../types";
+import { Storage } from "unstorage";
+
+export function cartAuthHandler(
+  cartState: [Cart, React.Dispatch<React.SetStateAction<Cart>>],
+  storage: {
+    api: Storage<any>;
+    local: Storage<any>;
+  } | null,
+  userId: number | string | undefined,
+  prevUserId: number | string | undefined
+) {
+  const [cart, setCart] = cartState;
+  if (storage === null) return () => {}; // storage can be null.
+
+  if (userId === prevUserId) return;
+
+  if (userId === undefined) {
+    // logout
+    setCart(defaultCartValue);
+    return;
+  }
+
+  // login
+  if (cart.items.length > 0) {
+    setCart((c) => ({
+      ...c,
+      authentication: {
+        loggedIn: true,
+        user_id: userId,
+      },
+    }));
+    return;
+  }
+  storage.api
+    .getItem(`${userId}`)
+    .then((c2: ApiCartResponse) => {
+      if (!c2) return;
+
+      setCart({
+        items: JSON.parse(c2.cart),
+        authentication: {
+          loggedIn: true,
+          user_id: c2.user_id,
+        },
+      });
+    })
+    .catch(() => {});
+}

package/src/utils/storage.ts

@@ -37,20 +37,31 @@ function apiCartToLocalCart(cart) {
   });
 }
 
+function jsonOrObj(items) {
+  try {
+    return JSON.parse(items);
+  } catch {
+    return items;
+  }
+}
+
 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 ({ status, json }) => {
+    fetchFromCartApi("GET", pathDetails).then(async (res) => {
+      const { status } = res;
       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,
-          })
-        );
+        const cart = await res.json();
+
+        const cartStr = JSON.stringify({
+          authentication: { loggedIn: true, user_id: cart.user_id },
+          items: jsonOrObj(cart.items),
+          order: cart.order ? jsonOrObj(cart.order) : undefined,
+        });
+
+        cartStore.set(cartStr);
+        console.log(cartStr);
       } else if (status === 404 && localCartData.items.length > 0) {
         fetchFromCartApi(
           "PUT",
@@ -59,11 +70,19 @@ apiPathDetails.listen((pathDetails, oldPathDetails) => {
         ).then(async ({ ok, json }) => {
           if (!ok) return;
           const cart = await json();
+          console.log(
+            "Update local cart",
+            JSON.stringify({
+              authentication: { loggedIn: true, user_id: cart.user_id },
+              items: jsonOrObj(cart.items),
+              order: cart.order ? jsonOrObj(cart.order) : undefined,
+            })
+          );
           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,
+              items: jsonOrObj(cart.items),
+              order: cart.order ? jsonOrObj(cart.order) : undefined,
             })
           );
         });
@@ -96,6 +115,7 @@ 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,

package/tsconfig.json

@@ -1,24 +1,24 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": false,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -1,11 +1,11 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,25 +1,25 @@
-import react from "@vitejs/plugin-react";
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-
-export default defineConfig({
-  plugins: [react(), cssInjectedByJsPlugin()],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "@springmicro/cart",
-      fileName: "index",
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "nanoid"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          nanoid: "Nanoid",
-        },
-      },
-    },
-  },
-});
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+
+export default defineConfig({
+  plugins: [react(), cssInjectedByJsPlugin()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "@springmicro/cart",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "nanoid"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          nanoid: "Nanoid",
+        },
+      },
+    },
+  },
+});