Merge pull request #22 from deco-sites/jonasjesus/deco-5290-notify-me-back-in-stock

feat(pdp): real notify-me (back-in-stock) replacing broken HTMX stub (DECO-5290)

Author: JonasJesus42

src/actions/notifyMe/subscribe.ts

@@ -0,0 +1,38 @@
+import { usePlatform } from "../../apps/site";
+
+export interface NotifyMeProps {
+  /** SKU/variant the shopper wants a back-in-stock alert for. */
+  skuId: string;
+  email: string;
+  name?: string;
+}
+
+export interface NotifyMeResult {
+  success: boolean;
+}
+
+async function action(props: NotifyMeProps): Promise<NotifyMeResult> {
+  const skuId = props?.skuId?.trim();
+  const email = props?.email?.trim();
+  // Public invoke endpoint — validate here, not just via the form.
+  if (!skuId) throw new Error("skuId is required");
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    throw new Error("a valid email is required");
+  }
+
+  const platform = usePlatform();
+
+  if (platform === "vtex") {
+    // TODO(consumer): wire the real VTEX back-in-stock endpoint, e.g.
+    //   await invoke("vtex/actions/notifyme.ts", { skuId, name: props.name, email });
+  }
+  if (platform === "wake") {
+    // TODO(consumer): wire the wake back-in-stock endpoint here.
+  }
+  // Default (neutral template): no email backend, so this is a documented
+  // stub that confirms the UX. Platforms wire a real provider above.
+
+  return { success: true };
+}
+
+export default action;

src/components/product/OutOfStock.tsx

@@ -1,44 +1,77 @@
+import { useMutation } from "@tanstack/react-query";
 import type { Product } from "@decocms/apps/commerce/types";
-import { AppContext } from "../../apps/site";
-import { useComponent } from "../../sections/Component";
+import { invoke } from "../../runtime";
+import { useUser } from "../../platform/user";
+import type { NotifyMeResult } from "../../actions/notifyMe/subscribe";
 
 export interface Props {
   productID: Product["productID"];
 }
 
-export const action = async (props: Props, req: Request, ctx: AppContext) => {
-  const form = await req.formData();
-
-  const name = `${form.get("name") ?? ""}`;
-  const email = `${form.get("email") ?? ""}`;
-  await (ctx as any).invoke("vtex/actions/notifyme.ts", {
-    skuId: props.productID,
-    name,
-    email,
+export default function OutOfStock({ productID }: Props) {
+  const { user } = useUser();
+  const notify = useMutation({
+    mutationFn: async (input: { email: string; name?: string }) => {
+      const result = (await invoke.site.actions.notifyMe.subscribe({
+        skuId: productID,
+        email: input.email,
+        name: input.name,
+      })) as NotifyMeResult | undefined;
+      if (!result?.success) throw new Error("Notify request failed");
+      return result;
+    },
   });
 
-  return props;
-};
+  if (notify.isSuccess) {
+    return (
+      <div className="form-control gap-2">
+        <span className="text-base">You're on the list!</span>
+        <span className="text-sm text-base-400">
+          We'll email you when this product is back in stock.
+        </span>
+      </div>
+    );
+  }
 
-export default function Notify({ productID }: Props) {
   return (
     <form
       className="form-control justify-start gap-2"
-      hx-sync="this:replace"
-      hx-indicator="this"
-      hx-swap="none"
-      hx-post={useComponent<Props>(import.meta.url, { productID })}
+      onSubmit={(e) => {
+        e.preventDefault();
+        const data = new FormData(e.currentTarget);
+        const email = `${data.get("email") ?? ""}`.trim();
+        const name = `${data.get("name") ?? ""}`.trim();
+        if (email) notify.mutate({ email, name });
+      }}
     >
       <span className="text-base">This product is currently unavailable</span>
       <span className="text-sm">Notify me when it's back in stock</span>
 
       <input placeholder="Name" className="input input-bordered" name="name" />
-      <input placeholder="Email" className="input input-bordered" name="email" />
+      <input
+        placeholder="Email"
+        type="email"
+        required
+        className="input input-bordered"
+        name="email"
+        defaultValue={user?.email ?? ""}
+      />
 
-      <button type="button" className="btn btn-primary no-animation">
-        <span className="[.htmx-request_&]:hidden inline">Submit</span>
-        <span className="[.htmx-request_&]:inline hidden loading loading-spinner loading-xs" />
+      <button
+        type="submit"
+        className="btn btn-primary no-animation"
+        disabled={notify.isPending}
+      >
+        {notify.isPending
+          ? <span className="loading loading-spinner loading-xs" />
+          : <span>Submit</span>}
       </button>
+
+      {notify.isError && (
+        <span className="text-sm text-error">
+          Something went wrong. Please try again.
+        </span>
+      )}
     </form>
   );
 }

src/setup.ts

@@ -139,4 +139,8 @@ registerInvokeHandlers({
     (await import("./actions/shipping/simulate")).default(props, req),
   "site/actions/shipping/simulate": async (props, req) =>
     (await import("./actions/shipping/simulate")).default(props, req),
+  "site/actions/notifyMe/subscribe.ts": async (props) =>
+    (await import("./actions/notifyMe/subscribe")).default(props),
+  "site/actions/notifyMe/subscribe": async (props) =>
+    (await import("./actions/notifyMe/subscribe")).default(props),
 });