Merge pull request #3 from deco-sites/JonasJesus42/sync-main

refactor: migrate storefront off Fresh-era patterns to TanStack Start idioms

Author: JonasJesus42

bun.lock

@@ -0,0 +1,78 @@
+import { usePlatform } from "../../apps/site";
+
+export interface ShippingMethod {
+  id: string;
+  name: string;
+  /** Estimated delivery in business days. */
+  days: number;
+  /** Price in major units of `currency`. 0 = free. */
+  price: number;
+  /** ISO-4217 currency code (e.g. "USD", "BRL"). */
+  currency: string;
+}
+
+export interface ShippingSimulation {
+  postalCode: string;
+  methods: ShippingMethod[];
+}
+
+interface Props {
+  postalCode: string;
+}
+
+const sanitize = (s: string) => (s ?? "").replace(/\D+/g, "");
+
+async function action(
+  props: Props,
+  _req?: Request,
+): Promise<ShippingSimulation> {
+  const cep = sanitize(props.postalCode);
+  if (cep.length < 4) throw new Error("Invalid postal code");
+
+  const platform = usePlatform();
+
+  if (platform === "vtex") {
+    // TODO(consumer): call VTEX shipping simulator (sla simulation),
+    // map response to ShippingMethod[].
+  }
+  if (platform === "shopify") {
+    // TODO(consumer): create a draft cart with the line item(s),
+    // run buyerIdentityUpdate with this postal code, read deliveryGroups.
+  }
+  if (platform === "wake") {
+    // TODO(consumer): wire wake shipping endpoint here.
+  }
+
+  // Default: deterministic mock so the demo works without a backend.
+  // Remove this fallback once a real platform branch is implemented.
+  const seed = Number.parseInt(cep.slice(0, 3) || "0", 10) || 0;
+  const baseDays = 2 + (seed % 7);
+
+  const methods: ShippingMethod[] = [
+    {
+      id: "standard",
+      name: "Standard shipping",
+      days: baseDays + 2,
+      price: 19.9,
+      currency: "USD",
+    },
+    {
+      id: "express",
+      name: "Express shipping",
+      days: Math.max(1, baseDays - 1),
+      price: 39.9,
+      currency: "USD",
+    },
+    {
+      id: "free",
+      name: "Free shipping",
+      days: baseDays + 5,
+      price: 0,
+      currency: "USD",
+    },
+  ];
+
+  return { postalCode: cep, methods };
+}
+
+export default action;

src/actions/shipping/simulate.ts

@@ -1,51 +1,56 @@
-import { type AppContext, usePlatform } from "../../apps/site";
-import { type Wishlist } from "../../components/wishlist/Provider";
+import { RequestContext } from "@decocms/start/sdk/requestContext";
+import { usePlatform } from "../../apps/site";
+import {
+  EMPTY_WISHLIST,
+  type WishlistState,
+} from "../../platform/wishlist";
+import {
+  readWishlistCookie,
+  serializeWishlistCookie,
+} from "../../loaders/_cookie";
 
 interface Props {
   productID: string;
   productGroupID: string;
 }
 
-// Phase 6 TODO: replace `any` with the real VTEX context once we re-export
-// AppContextVTEX from @decocms/apps/vtex.
-type AppContextVTEX = AppContext & { invoke: (...args: any[]) => any };
-
 async function action(
   props: Props,
-  _req?: Request,
-  ctx: AppContext = {} as AppContext,
-): Promise<Wishlist> {
-  const { productID, productGroupID } = props;
+  req?: Request,
+): Promise<WishlistState> {
+  if (!props?.productID) throw new Error("productID is required");
+
+  const request = req ?? RequestContext.current?.request;
   const platform = usePlatform();
 
   if (platform === "vtex") {
-    const vtex = ctx as unknown as AppContextVTEX;
-
-    const list: any[] = await vtex.invoke("vtex/loaders/wishlist.ts");
-    const item = list.find((i: any) => i.sku === productID);
-
-    try {
-      const response = item
-        ? await vtex.invoke(
-          "vtex/actions/wishlist/removeItem.ts",
-          { id: item.id },
-        )
-        : await vtex.invoke(
-          "vtex/actions/wishlist/addItem.ts",
-          { sku: productID, productId: productGroupID },
-        );
+    // TODO(consumer): real VTEX wishlist toggle, e.g.
+    //   const list = await invoke("vtex/loaders/wishlist.ts");
+    //   const item = list.find((i) => i.sku === props.productID);
+    //   const next = item
+    //     ? await invoke("vtex/actions/wishlist/removeItem.ts", { id: item.id })
+    //     : await invoke("vtex/actions/wishlist/addItem.ts", {
+    //         sku: props.productID, productId: props.productGroupID,
+    //       });
+    //   return { productIDs: next.map((i) => i.sku) };
+  }
+  if (platform === "wake") {
+    // TODO(consumer): wire wake wishlist endpoint here.
+  }
 
-      return {
-        productIDs: response.map((item) => item.sku),
-      };
-    } catch {
-      return {
-        productIDs: list.map((item) => item.sku),
-      };
+  // Default: cookie-backed so the demo persists per-browser without a backend.
+  const current = request ? readWishlistCookie(request) : EMPTY_WISHLIST;
+  const next: WishlistState = current.productIDs.includes(props.productID)
+    ? {
+      productIDs: current.productIDs.filter((id) => id !== props.productID),
     }
-  }
+    : { productIDs: [...current.productIDs, props.productID] };
 
-  throw new Error(`Unsupported platform: ${platform}`);
+  RequestContext.responseHeaders.append(
+    "Set-Cookie",
+    serializeWishlistCookie(next),
+  );
+  return next;
 }
 
 export default action;

src/actions/wishlist/submit.ts

@@ -1,58 +1,34 @@
+import { Link } from "@tanstack/react-router";
 import { clx } from "~/sdk/clx";
-import { useId } from "react";
+import { useUser } from "../../platform/user";
 import Icon from "../ui/Icon";
-import { useScript } from "@decocms/start/sdk/useScript";
-const onLoad = (containerID: string) => {
-  window.STOREFRONT.USER.subscribe((sdk) => {
-    const container = document.getElementById(containerID) as HTMLDivElement;
-    const nodes = container.querySelectorAll<HTMLAnchorElement>("a");
-    const login = nodes.item(0);
-    const account = nodes.item(1);
-    const user = sdk.getUser();
-    if (user?.email) {
-      login.classList.add("hidden");
-      account.classList.remove("hidden");
-    } else {
-      login.classList.remove("hidden");
-      account.classList.add("hidden");
-    }
-  });
-};
-function SignIn({ variant }: {
+
+interface Props {
   variant: "mobile" | "desktop";
-}) {
-  const id = useId();
-  return (
-    <div id={id}>
-      <a
-        className={clx(
-          "btn btn-sm font-thin btn-ghost no-animation",
-          variant === "mobile" && "btn-square",
-        )}
-        href="/login"
-        aria-label="Login"
-      >
-        <Icon id="account_circle" />
-        {variant === "desktop" && <span>Sign in</span>}
-      </a>
-      <a
-        className={clx(
-          "hidden",
-          "btn btn-sm font-thin btn-ghost no-animation",
-          variant === "mobile" && "btn-square",
-        )}
-        href="/account"
-        aria-label="Account"
-      >
+}
+
+function SignIn({ variant }: Props) {
+  const { isAuthenticated } = useUser();
+  const className = clx(
+    "btn btn-sm font-thin btn-ghost no-animation",
+    variant === "mobile" && "btn-square",
+  );
+
+  if (isAuthenticated) {
+    return (
+      <Link to="/account" preload="intent" className={className} aria-label="Account">
         <Icon id="account_circle" />
         {variant === "desktop" && <span>My account</span>}
-      </a>
-      <script
-        type="module"
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: useScript(onLoad, id) }}
-      />
-    </div>
+      </Link>
+    );
+  }
+
+  return (
+    <Link to="/login" preload="intent" className={className} aria-label="Login">
+      <Icon id="account_circle" />
+      {variant === "desktop" && <span>Sign in</span>}
+    </Link>
   );
 }
+
 export default SignIn;