@springmicro/cart 0.3.2 → 0.3.5

package/src/utils/storage.ts

@@ -1,133 +1,133 @@
-import {
-  fetchFromCartApi,
-  defaultCartValue,
-  pathDetailsIsFullyDefined,
-} from "./";
-import { persistentAtom } from "@nanostores/persistent";
-import { atom } from "nanostores";
-import { Cart, CartProduct, PathDetailsType } from "../types";
-
-export const cartStore = persistentAtom(
-  "cart",
-  JSON.stringify(defaultCartValue)
-);
-
-export const apiPathDetails = atom<PathDetailsType>({});
-
-function cartProductToCartDataItemIds(product: CartProduct) {
-  return {
-    ...product,
-    image: undefined,
-    name: undefined,
-  };
-}
-
-apiPathDetails.listen((pathDetails) => {
-  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,
-        })
-      );
-    });
-  } else {
-    const localCartData = JSON.parse(cartStore.get());
-    if (localCartData.authentication.loggedIn)
-      cartStore.set(JSON.stringify(defaultCartValue));
-  }
-});
-
-export function addToCart(p: CartProduct) {
-  const cart: Cart = JSON.parse(cartStore.get());
-  const newCart: Cart = {
-    ...cart,
-    items: [...cart.items, p],
-    order: undefined,
-  };
-
-  const pathDetails = apiPathDetails.get();
-  if (pathDetailsIsFullyDefined(pathDetails)) {
-    fetchFromCartApi(
-      "PUT",
-      pathDetails,
-      JSON.stringify({
-        user_id: pathDetails.userId,
-        items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
-      })
-    ).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
-    });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
-  }
-}
-
-export function removeFromCart(i: number) {
-  const cart: Cart = JSON.parse(cartStore.get());
-
-  const products: CartProduct[] = [...cart.items];
-  products.splice(i, 1);
-  const newCart: Cart = { ...cart, items: products, order: undefined };
-
-  const pathDetails = apiPathDetails.get();
-  if (pathDetailsIsFullyDefined(pathDetails)) {
-    // If products.length is 0, delete cart. Otheriwise, update cart.
-    const cartIsEmpty = products.length > 0;
-
-    const body = {
-      user_id: pathDetails.userId,
-      items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
-    };
-
-    fetchFromCartApi(
-      cartIsEmpty ? "PUT" : "DELETE",
-      pathDetails,
-      cartIsEmpty ? JSON.stringify(body) : undefined
-    ).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
-    });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
-  }
-}
-
-export function clearCart() {
-  const cart: Cart = JSON.parse(cartStore.get());
-  const newCart: Cart = { ...cart, items: [], order: undefined };
-
-  const pathDetails = apiPathDetails.get();
-  if (pathDetailsIsFullyDefined(pathDetails)) {
-    fetchFromCartApi("DELETE", pathDetails).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
-    });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
-  }
-}
-
-export function setOrder(order: { id: number; reference: string }) {
-  const cart: Cart = JSON.parse(cartStore.get());
-  const newCart: Cart = { ...cart, order };
-
-  const pathDetails = apiPathDetails.get();
-  if (pathDetailsIsFullyDefined(pathDetails)) {
-    fetchFromCartApi(
-      "PUT",
-      pathDetails,
-      JSON.stringify({
-        user_id: pathDetails.userId,
-        items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
-        order: JSON.stringify(order),
-      })
-    ).then(async () => {
-      cartStore.set(JSON.stringify(newCart));
-    });
-  } else {
-    cartStore.set(JSON.stringify(newCart));
-  }
-}
+import {
+  fetchFromCartApi,
+  defaultCartValue,
+  pathDetailsIsFullyDefined,
+} from "./";
+import { persistentAtom } from "@nanostores/persistent";
+import { atom } from "nanostores";
+import { Cart, CartProduct, PathDetailsType } from "../types";
+
+export const cartStore = persistentAtom(
+  "cart",
+  JSON.stringify(defaultCartValue)
+);
+
+export const apiPathDetails = atom<PathDetailsType>({});
+
+function cartProductToCartDataItemIds(product: CartProduct) {
+  return {
+    ...product,
+    image: undefined,
+    name: undefined,
+  };
+}
+
+apiPathDetails.listen((pathDetails) => {
+  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,
+        })
+      );
+    });
+  } else {
+    const localCartData = JSON.parse(cartStore.get());
+    if (localCartData.authentication.loggedIn)
+      cartStore.set(JSON.stringify(defaultCartValue));
+  }
+});
+
+export function addToCart(p: CartProduct) {
+  const cart: Cart = JSON.parse(cartStore.get());
+  const newCart: Cart = {
+    ...cart,
+    items: [...cart.items, p],
+    order: undefined,
+  };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    fetchFromCartApi(
+      "PUT",
+      pathDetails,
+      JSON.stringify({
+        user_id: pathDetails.userId,
+        items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
+      })
+    ).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}
+
+export function removeFromCart(i: number) {
+  const cart: Cart = JSON.parse(cartStore.get());
+
+  const products: CartProduct[] = [...cart.items];
+  products.splice(i, 1);
+  const newCart: Cart = { ...cart, items: products, order: undefined };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    // If products.length is 0, delete cart. Otheriwise, update cart.
+    const cartIsEmpty = products.length > 0;
+
+    const body = {
+      user_id: pathDetails.userId,
+      items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
+    };
+
+    fetchFromCartApi(
+      cartIsEmpty ? "PUT" : "DELETE",
+      pathDetails,
+      cartIsEmpty ? JSON.stringify(body) : undefined
+    ).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}
+
+export function clearCart() {
+  const cart: Cart = JSON.parse(cartStore.get());
+  const newCart: Cart = { ...cart, items: [], order: undefined };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    fetchFromCartApi("DELETE", pathDetails).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}
+
+export function setOrder(order: { id: number; reference: string }) {
+  const cart: Cart = JSON.parse(cartStore.get());
+  const newCart: Cart = { ...cart, order };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    fetchFromCartApi(
+      "PUT",
+      pathDetails,
+      JSON.stringify({
+        user_id: pathDetails.userId,
+        items: newCart.items.map((p) => cartProductToCartDataItemIds(p)),
+        order: JSON.stringify(order),
+      })
+    ).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}

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",
+        },
+      },
+    },
+  },
+});

package/src/checkout/CheckoutList.tsx

@@ -1,264 +0,0 @@
-import "./CheckoutList.css";
-import { useStore } from "@nanostores/react";
-import { CartProductCard } from "./components/CartProductCard";
-import React from "react";
-import { Button, Tooltip, Typography } from "@mui/material";
-import {
-  cartStore,
-  clearCart,
-  setOrder as cartSetOrder,
-} from "../utils/storage";
-import Checkout from "./components";
-
-export default function CheckoutList({
-  apiBaseUrl,
-  emptyCartLink = "",
-  disableProductLink = false,
-}: {
-  apiBaseUrl: string;
-  emptyCartLink?: string;
-  disableProductLink?: boolean;
-}) {
-  const cart = JSON.parse(useStore(cartStore));
-
-  const [prices, setPrices] = React.useState({});
-  const [total, setTotal] = React.useState("Loading prices...");
-
-  const [status, setStatus] = React.useState(0);
-  const [order, setOrder] = React.useState(undefined);
-
-  React.useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-
-    const sr = params.get("showReceipt");
-    const oid = params.get("orderId");
-    const or = params.get("orderRef");
-    if (oid && or) {
-      fetch(`${apiBaseUrl}/api/ecommerce/orders/${oid}/reference/${or}`).then(
-        async (res) =>
-          await res.json().then((order) => {
-            setOrder(order);
-            setStatus(
-              order.charge_id ||
-                !["pending", "awaiting_payment"].includes(order.status)
-                ? 2
-                : 1
-            );
-          })
-      );
-    }
-  }, []);
-
-  // build pricing list
-  React.useEffect(() => {
-    // filter out prices that have already been queried
-    const pricesToGet = cart.items
-      .map((c) => c.price_id)
-      .filter(
-        (pId) => Object.keys(prices).findIndex((pKey) => pKey == pId) === -1
-      );
-    if (pricesToGet.length === 0) return;
-
-    const url = `${apiBaseUrl}/api/ecommerce/price?filter={'ids':[${pricesToGet.join(
-      ","
-    )}]}`;
-    fetch(url, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((res) =>
-        res.json().then((data) => {
-          const pricingData = { ...prices };
-
-          data.forEach((p) => {
-            pricingData[p.id] = p;
-          });
-          setPrices(pricingData);
-        })
-      )
-      .catch(() => {});
-  }, [cart]);
-
-  React.useEffect(() => {
-    setTotal(
-      `$${(
-        cart.items
-          .map((product) => prices[product.price_id]?.unit_amount)
-          .reduce((p, c) => (c ? p + c : p), 0) / 100
-      ).toFixed(2)}`
-    );
-  }, [cart, prices]);
-
-  if (status === 0 && cart.items.length === 0)
-    return (
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          flexDirection: "column",
-          gap: 8,
-        }}
-      >
-        <Typography style={{ fontSize: 32, fontWeight: 600 }}>
-          Cart is empty
-        </Typography>
-        <a className="shopping-button" href={`/${emptyCartLink}`}>
-          <Typography>BACK</Typography>
-        </a>
-      </div>
-    );
-
-  return (
-    <div>
-      <StatusBar status={status} />
-      <div>
-        {status === 0 && (
-          <CartSection
-            total={total}
-            setStatus={setStatus}
-            cart={cart}
-            prices={prices}
-            apiBaseUrl={apiBaseUrl}
-            setOrder={setOrder}
-            disableProductLink={disableProductLink}
-          />
-        )}
-        {status > 0 && order && (
-          <Checkout
-            apiBaseUrl={apiBaseUrl}
-            order={order}
-            onPlacement={() => {
-              clearCart();
-              setStatus(2);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function CartSection({
-  total,
-  setStatus,
-  cart,
-  prices,
-  apiBaseUrl,
-  setOrder,
-  disableProductLink,
-}) {
-  function createOrder() {
-    // 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) {
-      fetch(
-        `${apiBaseUrl}/api/ecommerce/orders/${cart.order.id}/reference/${cart.order.reference}`
-      ).then((res) =>
-        res.json().then((order) => {
-          setOrder(order);
-          const currentUrl = new URL(window.location.href);
-          currentUrl.searchParams.set("orderId", order.id);
-          currentUrl.searchParams.set("orderRef", order.reference);
-          window.history.pushState({}, "", currentUrl);
-          setStatus(1);
-        })
-      );
-      return;
-    }
-
-    // Otherwise, create a new order.
-    fetch(apiBaseUrl + "/api/ecommerce/orders", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        customer_id: 1,
-        cart_data: {
-          items: cart.items.map((li) => ({
-            ...li,
-            name: undefined,
-            image: undefined,
-          })),
-        },
-      }),
-    }).then((res) =>
-      res.json().then((order) => {
-        if (!order) throw "Missing order";
-        setOrder(order);
-        cartSetOrder({ id: order.id, reference: order.reference });
-        const currentUrl = new URL(window.location.href);
-        currentUrl.searchParams.set("orderId", order.id);
-        currentUrl.searchParams.set("orderRef", order.reference);
-        window.history.pushState({}, "", currentUrl);
-        setStatus(1);
-      })
-    );
-  }
-
-  return (
-    <div style={{ display: "flex", justifyContent: "center" }}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          width: 600,
-          alignItems: "center",
-          boxShadow: "0px 2px 5px 2px #dfdfdfff",
-          margin: "4px",
-          padding: "2rem 0",
-          borderRadius: "8px",
-        }}
-      >
-        <Typography style={{ fontSize: "30px", fontWeight: "bold" }}>
-          Checkout
-        </Typography>
-        <Tooltip title="Total is pre-tax and includes the first payment for recurring payments.">
-          <Typography style={{ fontSize: "20px" }}>Total: {total}</Typography>
-        </Tooltip>
-        {/* <Button variant="contained" sx={{ mt: 2 }} onClick={createOrder}>
-          Confirm Order
-        </Button> */}
-        <div className="checkout-list">
-          {cart.items.map((p, i) => (
-            <CartProductCard
-              product={p}
-              i={i}
-              price={prices[p.price_id]}
-              disableProductLink={disableProductLink}
-            />
-          ))}
-        </div>
-        <Button variant="contained" sx={{ mt: 2 }} onClick={createOrder}>
-          Confirm Order
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function StatusBar({ status }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-      }}
-    >
-      <div id="status-bar">
-        <Typography className="status-text active">REVIEW</Typography>
-        <div className={"status-bar" + (status > 0 ? " active" : "")}></div>
-        <Typography className={"status-text" + (status > 0 ? " active" : "")}>
-          PAYMENT
-        </Typography>
-        <div className={"status-bar" + (status > 1 ? " active" : "")}></div>
-        <Typography className={"status-text" + (status > 1 ? " active" : "")}>
-          ORDER PLACED
-        </Typography>
-      </div>
-    </div>
-  );
-}