Merge pull request #18 from deco-sites/jonasjesus/deco-5286-newsletter-real-mutation

feat(newsletter): real subscription via local invoke action (DECO-5286)

Author: JonasJesus42

src/actions/newsletter/subscribe.ts

@@ -0,0 +1,50 @@
+import { RequestContext } from "@decocms/start/sdk/requestContext";
+import { usePlatform } from "../../apps/site";
+import { readNewsletterCookie, serializeNewsletterCookie } from "../../loaders/_cookie";
+
+export interface SubscribeNewsletterProps {
+  email: string;
+}
+
+export interface SubscribeNewsletterResult {
+  success: boolean;
+  email: string;
+}
+
+async function action(
+  props: SubscribeNewsletterProps,
+  req?: Request,
+): Promise<SubscribeNewsletterResult> {
+  const email = props?.email?.trim();
+  // The invoke endpoint is publicly POST-able, so validate here too (not just
+  // via the form's type=email). Keep it minimal — a basic shape check.
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    throw new Error("a valid email is required");
+  }
+
+  const request = req ?? RequestContext.current?.request;
+  const platform = usePlatform();
+
+  if (platform === "vtex") {
+    // TODO(consumer): real VTEX newsletter opt-in, e.g.
+    //   await invoke("vtex/actions/newsletter/subscribe.ts", { email });
+  }
+  if (platform === "shopify") {
+    // TODO(consumer): Shopify has no Storefront newsletter endpoint — integrate
+    // a marketing provider (Klaviyo, Mailchimp, Resend) or set acceptsMarketing
+    // on a customer mutation.
+  }
+  if (platform === "wake") {
+    // TODO(consumer): wire wake newsletter endpoint here.
+  }
+
+  // Default: cookie-backed so the demo persists per-browser without a backend.
+  // Idempotent — re-subscribing the same email is a no-op success.
+  const emails = request ? readNewsletterCookie(request) : [];
+  if (!emails.includes(email)) emails.push(email);
+
+  RequestContext.responseHeaders.append("Set-Cookie", serializeNewsletterCookie(emails));
+  return { success: true, email };
+}
+
+export default action;

src/loaders/_cookie.ts

@@ -24,3 +24,28 @@ export function serializeWishlistCookie(state: WishlistState): string {
   const value = encodeURIComponent(JSON.stringify(state.productIDs));
   return `${WISHLIST_COOKIE}=${value}; Path=/; Max-Age=${WISHLIST_COOKIE_TTL}; SameSite=Lax`;
 }
+
+export const NEWSLETTER_COOKIE = "deco_newsletter";
+export const NEWSLETTER_COOKIE_TTL = 60 * 60 * 24 * 365;
+
+export function readNewsletterCookie(req: Request): string[] {
+  const header = req.headers.get("cookie") ?? "";
+  const match = header
+    .split(/;\s*/)
+    .find((c) => c.startsWith(`${NEWSLETTER_COOKIE}=`));
+  if (!match) return [];
+  try {
+    const raw = decodeURIComponent(match.slice(NEWSLETTER_COOKIE.length + 1));
+    const emails = JSON.parse(raw);
+    return Array.isArray(emails) && emails.every((x) => typeof x === "string")
+      ? emails
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+export function serializeNewsletterCookie(emails: string[]): string {
+  const value = encodeURIComponent(JSON.stringify(emails));
+  return `${NEWSLETTER_COOKIE}=${value}; Path=/; Max-Age=${NEWSLETTER_COOKIE_TTL}; SameSite=Lax`;
+}

src/sections/Newsletter/Newsletter.tsx

@@ -1,6 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
 import Icon from "../../components/ui/Icon";
 import Section from "../../components/ui/Section";
+import { invoke } from "../../runtime";
+import type { SubscribeNewsletterResult } from "../../actions/newsletter/subscribe";
 import { clx } from "~/sdk/clx";
 
 export interface NoticeProps {
@@ -80,10 +82,13 @@ const DEFAULT_NOTICES = {
   },
 } satisfies Required<NoticeConfig>;
 
-// TODO(phase-6): replace with a real subscribeNewsletterServerFn (createServerFn
-// or invoke.site.actions.newsletter.subscribe) once the platform action lands.
-async function subscribeNewsletter(_email: string): Promise<void> {
-  throw new Error("Newsletter subscription not yet wired to a platform action.");
+async function subscribeNewsletter(email: string): Promise<void> {
+  const result = (await invoke.site.actions.newsletter.subscribe({
+    email,
+  })) as SubscribeNewsletterResult | undefined;
+  if (!result?.success) {
+    throw new Error("Newsletter subscription failed");
+  }
 }
 
 function Notice({ title, description }: NoticeProps) {
@@ -118,7 +123,18 @@ export default function Newsletter({ notices, form }: Props) {
             className={clx(isSuccess ? "text-success" : "text-error")}
             id={isSuccess ? "check-circle" : "error"}
           />
-          <Notice {...(isSuccess ? success : failed)} />
+          <div className="flex flex-col items-center sm:items-start gap-4">
+            <Notice {...(isSuccess ? success : failed)} />
+            {subscribe.isError && (
+              <button
+                type="button"
+                className="btn btn-outline"
+                onClick={() => subscribe.reset()}
+              >
+                Try again
+              </button>
+            )}
+          </div>
         </div>
       </Section.Container>
     );

src/setup.ts

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