Merge pull request #21 from deco-cx/feat/vnda-cart

feat: vnda httpclient

utils/http.ts

@@ -92,7 +92,7 @@ export const createHttpClient = <T>({
 
       return (
         params: Record<string, string | number | string[] | number[]>,
-        init: RequestInit,
+        init?: RequestInit,
       ) => {
         const mapped = new Map(Object.entries(params));
 
@@ -125,20 +125,19 @@ export const createHttpClient = <T>({
           arrayed.forEach((item) => url.searchParams.append(key, `${item}`));
         });
 
-        const shouldStringifyBody = init.body != null &&
+        const isJSON = init?.body != null &&
           typeof init.body !== "string" &&
           !(init.body instanceof ReadableStream) &&
           !(init.body instanceof FormData) &&
           !(init.body instanceof URLSearchParams) &&
           !(init.body instanceof Blob) &&
           !(init.body instanceof ArrayBuffer);
 
-        const headers = new Headers(init.headers);
+        const headers = new Headers(init?.headers);
         defaultHeaders?.forEach((value, key) => headers.set(key, value));
+        isJSON && headers.set("content-type", "application/json");
 
-        const body = shouldStringifyBody
-          ? JSON.stringify(init.body)
-          : undefined;
+        const body = isJSON ? JSON.stringify(init.body) : undefined;
 
         return fetcher(url, {
           ...init,

vnda/actions/cart/addItem.ts

@@ -1,5 +1,7 @@
-import { setCookie } from "std/http/mod.ts";
+import { HttpError } from "../../../utils/http.ts";
+import cartLoader from "../../loaders/cart.ts";
 import { AppContext } from "../../mod.ts";
+import { getCartCookie } from "../../utils/cart.ts";
 import type { Cart } from "../../utils/client/types.ts";
 
 export interface Props {
@@ -13,36 +15,23 @@ const action = async (
   req: Request,
   ctx: AppContext,
 ): Promise<Cart> => {
-  const { client } = ctx;
+  const { api } = ctx;
   const { itemId, quantity, attributes } = props;
-  const reqCookies = req.headers.get("cookie") ?? "";
+  const cartId = getCartCookie(req.headers);
 
-  const { orderForm, cookies } = await client.carrinho.adicionar({
-    cookie: reqCookies,
-    sku: itemId,
-    quantity,
-    attributes,
-  });
-
-  // in case the cart was created, set the cookie to the browser
-  for (const cookie of cookies) {
-    setCookie(ctx.response.headers, {
-      ...cookie,
-      domain: new URL(req.url).hostname,
-    });
+  if (!cartId) {
+    throw new HttpError(400, "Missing cart cookie");
   }
 
-  const allCookies = [
-    reqCookies,
-    ...cookies.map(({ name, value }) => `${name}=${value}`),
-  ].join("; ");
-
-  const relatedItems = await client.carrinho.relatedItems(allCookies);
+  await api["POST /api/v2/carts/:cartId/items"]({ cartId }, {
+    body: {
+      sku: itemId,
+      quantity,
+      extra: attributes,
+    },
+  });
 
-  return {
-    orderForm,
-    relatedItems,
-  };
+  return cartLoader({}, req, ctx);
 };
 
 export default action;

vnda/actions/cart/updateCart.ts

@@ -0,0 +1,32 @@
+import { HttpError } from "../../../utils/http.ts";
+import cartLoader from "../../loaders/cart.ts";
+import { AppContext } from "../../mod.ts";
+import { getCartCookie } from "../../utils/cart.ts";
+import type { Cart } from "../../utils/client/types.ts";
+
+export interface Props {
+  agent?: string;
+  zip?: string;
+  client_id?: number;
+  coupon_code?: string;
+  rebate_token?: string;
+}
+
+const action = async (
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+): Promise<Cart> => {
+  const { api } = ctx;
+  const cartId = getCartCookie(req.headers);
+
+  if (!cartId) {
+    throw new HttpError(400, "Missing cart cookie");
+  }
+
+  await api["PATCH /api/v2/carts/:cartId"]({ cartId }, { body: props });
+
+  return cartLoader({}, req, ctx);
+};
+
+export default action;

vnda/actions/cart/updateItem.ts

@@ -1,5 +1,7 @@
+import { HttpError } from "../../../utils/http.ts";
+import cartLoader from "../../loaders/cart.ts";
 import { AppContext } from "../../mod.ts";
-import cart from "../../loaders/cart.ts";
+import { getCartCookie } from "../../utils/cart.ts";
 import type { Cart } from "../../utils/client/types.ts";
 
 export interface Props {
@@ -12,17 +14,23 @@ const action = async (
   req: Request,
   ctx: AppContext,
 ): Promise<Cart> => {
-  const { client } = ctx;
-  const { itemId: item_id, quantity } = props;
-  const cookie = req.headers.get("cookie") ?? "";
+  const { api } = ctx;
+  const { itemId, quantity } = props;
+  const cartId = getCartCookie(req.headers);
+
+  if (!cartId) {
+    throw new HttpError(400, "Missing cart cookie");
+  }
 
   if (quantity > 0) {
-    await client.carrinho.atualizar({ item_id, quantity }, cookie);
+    await api["PATCH /api/v2/carts/:cartId/items/:itemId"]({ cartId, itemId }, {
+      body: { quantity },
+    });
   } else {
-    await client.carrinho.remover(item_id, cookie);
+    await api["DELETE /api/v2/carts/:cartId/items/:itemId"]({ cartId, itemId });
   }
 
-  return cart({}, req, ctx);
+  return cartLoader({}, req, ctx);
 };
 
 export default action;

vnda/hooks/context.ts

@@ -1,6 +1,6 @@
 import { IS_BROWSER } from "$fresh/runtime.ts";
 import { signal } from "@preact/signals";
-import { Runtime } from "../runtime.ts";
+import { invoke } from "../runtime.ts";
 import { Cart } from "../utils/client/types.ts";
 
 interface Context {
@@ -46,7 +46,10 @@ const enqueue = (
   return queue;
 };
 
-const load = (signal: AbortSignal) => Runtime.vnda.loaders.cart({}, { signal });
+const load = (signal: AbortSignal) =>
+  invoke({
+    cart: invoke.vnda.loaders.cart(),
+  }, { signal });
 
 if (IS_BROWSER) {
   enqueue(load);

vnda/hooks/useCart.ts

@@ -1,6 +1,8 @@
-import { AnalyticsItem } from "../../commerce/types.ts";
-import { Runtime } from "../runtime.ts";
-import { Cart, Item } from "../utils/client/types.ts";
+import type { InvocationFuncFor } from "deco/clients/withManifest.ts";
+import type { AnalyticsItem } from "../../commerce/types.ts";
+import type { Manifest } from "../manifest.gen.ts";
+import { invoke } from "../runtime.ts";
+import type { Cart, Item } from "../utils/client/types.ts";
 import { state as storeState } from "./context.ts";
 
 const { cart, loading } = storeState;
@@ -21,28 +23,30 @@ export const itemToAnalyticsItem = (
   quantity: item.quantity,
 });
 
-const wrap =
-  <T>(action: (p: T, init?: RequestInit | undefined) => Promise<Cart>) =>
-  (p: T) =>
-    storeState.enqueue(async (signal) => ({
-      cart: await action(p, { signal }),
-    }));
+type PropsOf<T> = T extends (props: infer P, r: any, ctx: any) => any ? P
+  : T extends (props: infer P, r: any) => any ? P
+  : T extends (props: infer P) => any ? P
+  : never;
+
+type Actions =
+  | "vnda/actions/cart/addItem.ts"
+  | "vnda/actions/cart/updateCart.ts"
+  | "vnda/actions/cart/updateItem.ts";
+
+const action =
+  (key: Actions) => (props: PropsOf<InvocationFuncFor<Manifest, typeof key>>) =>
+    storeState.enqueue((signal) =>
+      invoke({ cart: { key, props } }, { signal }) satisfies Promise<
+        { cart: Cart }
+      >
+    );
 
 const state = {
   cart,
   loading,
-  addItem: wrap(
-    Runtime.vnda.actions.cart.addItem,
-  ),
-  updateItem: wrap(
-    Runtime.vnda.actions.cart.updateItem,
-  ),
-  setShippingAddress: wrap(
-    Runtime.vnda.actions.cart.setShippingAddress,
-  ),
-  updateCoupon: wrap(
-    Runtime.vnda.actions.cart.updateCoupon,
-  ),
+  update: action("vnda/actions/cart/updateCart.ts"),
+  addItem: action("vnda/actions/cart/addItem.ts"),
+  updateItem: action("vnda/actions/cart/updateItem.ts"),
 };
 
 export const useCart = () => state;

vnda/loaders/cart.ts

@@ -1,4 +1,5 @@
 import { AppContext } from "../mod.ts";
+import { getCartCookie, setCartCookie } from "../utils/cart.ts";
 import type { Cart } from "../utils/client/types.ts";
 
 /**
@@ -10,17 +11,19 @@ const loader = async (
   req: Request,
   ctx: AppContext,
 ): Promise<Cart> => {
-  const { client } = ctx;
-  const cookies = req.headers.get("cookie") ?? "";
+  const { api } = ctx;
+  const cartId = getCartCookie(req.headers);
 
-  const [orderForm, relatedItems] = await Promise.all([
-    client.carrinho.get(cookies),
-    client.carrinho.relatedItems(cookies),
-  ]);
+  const orderForm = cartId
+    ? await api["GET /api/v2/carts/:cartId"]({ cartId })
+      .then((res) => res.json())
+    : await api["POST /api/v2/carts"]({}).then((res) => res.json());
+
+  setCartCookie(ctx.response.headers, orderForm.id.toString());
 
   return {
     orderForm,
-    relatedItems,
+    relatedItems: [],
   };
 };
 

vnda/loaders/productDetailsPage.ts

@@ -18,16 +18,22 @@ async function loader(
 ): Promise<ProductDetailsPage | null> {
   const url = new URL(req.url);
   const { slug } = props;
-  const { client } = ctx;
+  const { api } = ctx;
 
   if (!slug) return null;
 
   const variantId = url.searchParams.get("skuId") || null;
   const { id } = parseSlug(slug);
 
   const [maybeProduct, seo] = await Promise.all([
-    client.product.get(id),
-    client.seo.product(id),
+    api["GET /api/v2/products/:id"]({ id, include_images: true }, {
+      deco: { cache: "stale-while-revalidate" },
+    }).then((r) => r.json()).catch(() => null),
+    api["GET /api/v2/seo_data"]({
+      resource_type: "Product",
+      resource_id: id,
+      type: "category",
+    }, { deco: { cache: "stale-while-revalidate" } }).then((res) => res.json()),
   ]);
 
   // 404: product not found

vnda/loaders/productList.ts

@@ -29,15 +29,15 @@ const productListLoader = async (
   ctx: AppContext,
 ): Promise<Product[] | null> => {
   const url = new URL(req.url);
-  const { client } = ctx;
+  const { api } = ctx;
 
-  const search = await client.product.search({
+  const search = await api["GET /api/v2/products/search"]({
     term: props?.term,
     wildcard: props?.wildcard,
     sort: props?.sort,
     per_page: props?.count,
-    tags: props?.tags,
-  });
+    "tags[]": props?.tags,
+  }, { deco: { cache: "stale-while-revalidate" } }).then((res) => res.json());
 
   return search.results.map((product) =>
     toProduct(product, null, {