@charleslemaux/cms 1.0.0-rc.1

package/dist/react.cjs

@@ -0,0 +1,665 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  ArticleBody: () => ArticleBody,
+  NewsletterForm: () => NewsletterForm,
+  NewsletterPage: () => NewsletterPage,
+  newsletterFormLabels: () => newsletterFormLabels,
+  newsletterPageLabels: () => newsletterPageLabels,
+  useArticle: () => useArticle,
+  useArticles: () => useArticles,
+  useZone: () => useZone
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/ArticleBody.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ArticleBody({ html, sanitize, as: Tag = "div", ...rest }) {
+  const cleanHtml = (0, import_react.useMemo)(() => sanitize ? sanitize(html ?? "") : html ?? "", [html, sanitize]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ...rest, dangerouslySetInnerHTML: { __html: cleanHtml } });
+}
+
+// src/react/hooks.ts
+var import_react2 = require("react");
+
+// src/errors.ts
+var CmsError = class extends Error {
+  constructor(status, code, message, retryAfter) {
+    super(message);
+    this.name = "CmsError";
+    this.status = status;
+    this.code = code;
+    if (retryAfter !== void 0) this.retryAfter = retryAfter;
+  }
+};
+function isCmsError(value) {
+  return value instanceof Error && value.name === "CmsError" && typeof value.status === "number" && typeof value.code === "string";
+}
+
+// src/react/hooks.ts
+function toCmsError(error) {
+  if (isCmsError(error)) return error;
+  return new CmsError(0, "network_error", error instanceof Error ? error.message : String(error));
+}
+function useCmsQuery(load, deps) {
+  const key = JSON.stringify(deps);
+  const [state, setState] = (0, import_react2.useState)(() => ({
+    key,
+    value: { data: void 0, error: void 0, loading: load !== null }
+  }));
+  (0, import_react2.useEffect)(() => {
+    if (!load) {
+      setState({ key, value: { data: void 0, error: void 0, loading: false } });
+      return void 0;
+    }
+    const controller = new AbortController();
+    setState({ key, value: { data: void 0, error: void 0, loading: true } });
+    load(controller.signal).then(
+      (data) => {
+        if (!controller.signal.aborted) setState({ key, value: { data, error: void 0, loading: false } });
+      },
+      (error) => {
+        if (!controller.signal.aborted) {
+          setState({ key, value: { data: void 0, error: toCmsError(error), loading: false } });
+        }
+      }
+    );
+    return () => controller.abort();
+  }, deps);
+  return state.key === key ? state.value : { data: void 0, error: void 0, loading: load !== null };
+}
+function useZone(client, options = {}) {
+  const { lang } = options;
+  return useCmsQuery((signal) => client.getZone({ lang, signal }), [client.baseUrl, client.zone, lang]);
+}
+function useArticles(client, params = {}) {
+  const { lang, category, tag, page, limit } = params;
+  return useCmsQuery(
+    (signal) => client.listArticles({ lang, category, tag, page, limit, signal }),
+    [client.baseUrl, client.zone, lang, category, tag, page, limit]
+  );
+}
+function useArticle(client, slug, options = {}) {
+  const { lang } = options;
+  return useCmsQuery(
+    slug ? (signal) => client.getArticle(slug, { lang, signal }) : null,
+    [client.baseUrl, client.zone, slug, lang]
+  );
+}
+
+// src/react/labels.ts
+var FORM_LABELS = {
+  en: {
+    email: "Email address",
+    emailPlaceholder: "you@example.com",
+    consent: "I agree to receive this newsletter and can unsubscribe at any time.",
+    submit: "Subscribe",
+    sending: "Sending\u2026",
+    sent: "Almost done: open the email we just sent you and click its link to confirm your subscription.",
+    invalidEmail: "This email address is not valid.",
+    consentRequired: "Please tick the box to agree.",
+    captchaRequired: "Please complete the verification.",
+    captchaFailed: "The verification failed. Please try again.",
+    rateLimited: "Too many attempts. Please try again later.",
+    unavailable: "The newsletter is unavailable right now. Please try again later."
+  },
+  fr: {
+    email: "Adresse e-mail",
+    emailPlaceholder: "vous@exemple.com",
+    consent: "J\u2019accepte de recevoir cette newsletter et je peux me d\xE9sinscrire \xE0 tout moment.",
+    submit: "S\u2019inscrire",
+    sending: "Envoi\u2026",
+    sent: "Presque termin\xE9 : ouvrez l\u2019e-mail que nous venons de vous envoyer et cliquez sur son lien pour confirmer votre inscription.",
+    invalidEmail: "Cette adresse e-mail n\u2019est pas valide.",
+    consentRequired: "Cochez la case pour donner votre accord.",
+    captchaRequired: "Veuillez compl\xE9ter la v\xE9rification.",
+    captchaFailed: "La v\xE9rification a \xE9chou\xE9. Veuillez r\xE9essayer.",
+    rateLimited: "Trop de tentatives. Veuillez r\xE9essayer plus tard.",
+    unavailable: "La newsletter est indisponible pour le moment. Veuillez r\xE9essayer plus tard."
+  },
+  de: {
+    email: "E-Mail-Adresse",
+    emailPlaceholder: "sie@beispiel.de",
+    consent: "Ich m\xF6chte diesen Newsletter erhalten und kann mich jederzeit abmelden.",
+    submit: "Abonnieren",
+    sending: "Wird gesendet\u2026",
+    sent: "Fast geschafft: \xD6ffnen Sie die E-Mail, die wir Ihnen gerade geschickt haben, und klicken Sie auf den Link, um Ihr Abonnement zu best\xE4tigen.",
+    invalidEmail: "Diese E-Mail-Adresse ist ung\xFCltig.",
+    consentRequired: "Bitte setzen Sie das H\xE4kchen, um zuzustimmen.",
+    captchaRequired: "Bitte schlie\xDFen Sie die \xDCberpr\xFCfung ab.",
+    captchaFailed: "Die \xDCberpr\xFCfung ist fehlgeschlagen. Bitte versuchen Sie es erneut.",
+    rateLimited: "Zu viele Versuche. Bitte versuchen Sie es sp\xE4ter erneut.",
+    unavailable: "Der Newsletter ist derzeit nicht verf\xFCgbar. Bitte versuchen Sie es sp\xE4ter erneut."
+  },
+  es: {
+    email: "Correo electr\xF3nico",
+    emailPlaceholder: "usted@ejemplo.com",
+    consent: "Acepto recibir este bolet\xEDn y puedo darme de baja en cualquier momento.",
+    submit: "Suscribirme",
+    sending: "Enviando\u2026",
+    sent: "Casi listo: abra el correo que le acabamos de enviar y haga clic en su enlace para confirmar su suscripci\xF3n.",
+    invalidEmail: "Esta direcci\xF3n de correo electr\xF3nico no es v\xE1lida.",
+    consentRequired: "Marque la casilla para dar su consentimiento.",
+    captchaRequired: "Complete la verificaci\xF3n.",
+    captchaFailed: "La verificaci\xF3n ha fallado. Int\xE9ntelo de nuevo.",
+    rateLimited: "Demasiados intentos. Int\xE9ntelo de nuevo m\xE1s tarde.",
+    unavailable: "El bolet\xEDn no est\xE1 disponible en este momento. Int\xE9ntelo de nuevo m\xE1s tarde."
+  }
+};
+var PAGE_LABELS = {
+  en: {
+    confirmIntro: "Confirm your subscription to our newsletter.",
+    confirmButton: "Confirm my subscription",
+    confirming: "Confirming\u2026",
+    confirmed: "Thank you! Your subscription is confirmed.",
+    unsubscribeIntro: "Unsubscribe from our newsletter?",
+    unsubscribeButton: "Unsubscribe",
+    unsubscribing: "Unsubscribing\u2026",
+    unsubscribed: "You are unsubscribed. You will not receive our newsletter anymore.",
+    invalidLink: "This link is invalid or has expired.",
+    noLink: "Open this page from the link in our email.",
+    failed: "Something went wrong. Please try again later."
+  },
+  fr: {
+    confirmIntro: "Confirmez votre inscription \xE0 notre newsletter.",
+    confirmButton: "Confirmer mon inscription",
+    confirming: "Confirmation\u2026",
+    confirmed: "Merci ! Votre inscription est confirm\xE9e.",
+    unsubscribeIntro: "Vous d\xE9sinscrire de notre newsletter ?",
+    unsubscribeButton: "Me d\xE9sinscrire",
+    unsubscribing: "D\xE9sinscription\u2026",
+    unsubscribed: "Votre d\xE9sinscription est confirm\xE9e. Vous ne recevrez plus notre newsletter.",
+    invalidLink: "Ce lien n\u2019est pas valide ou a expir\xE9.",
+    noLink: "Ouvrez cette page depuis le lien de notre e-mail.",
+    failed: "Une erreur s\u2019est produite. Veuillez r\xE9essayer plus tard."
+  },
+  de: {
+    confirmIntro: "Best\xE4tigen Sie Ihr Abonnement unseres Newsletters.",
+    confirmButton: "Abonnement best\xE4tigen",
+    confirming: "Wird best\xE4tigt\u2026",
+    confirmed: "Vielen Dank! Ihr Abonnement ist best\xE4tigt.",
+    unsubscribeIntro: "Von unserem Newsletter abmelden?",
+    unsubscribeButton: "Abmelden",
+    unsubscribing: "Wird abgemeldet\u2026",
+    unsubscribed: "Sie sind abgemeldet und erhalten unseren Newsletter nicht mehr.",
+    invalidLink: "Dieser Link ist ung\xFCltig oder abgelaufen.",
+    noLink: "\xD6ffnen Sie diese Seite \xFCber den Link in unserer E-Mail.",
+    failed: "Etwas ist schiefgelaufen. Bitte versuchen Sie es sp\xE4ter erneut."
+  },
+  es: {
+    confirmIntro: "Confirme su suscripci\xF3n a nuestro bolet\xEDn.",
+    confirmButton: "Confirmar mi suscripci\xF3n",
+    confirming: "Confirmando\u2026",
+    confirmed: "\xA1Gracias! Su suscripci\xF3n est\xE1 confirmada.",
+    unsubscribeIntro: "\xBFDesea darse de baja de nuestro bolet\xEDn?",
+    unsubscribeButton: "Darme de baja",
+    unsubscribing: "Dando de baja\u2026",
+    unsubscribed: "Se ha dado de baja. Ya no recibir\xE1 nuestro bolet\xEDn.",
+    invalidLink: "Este enlace no es v\xE1lido o ha caducado.",
+    noLink: "Abra esta p\xE1gina desde el enlace de nuestro correo electr\xF3nico.",
+    failed: "Algo ha fallado. Int\xE9ntelo de nuevo m\xE1s tarde."
+  }
+};
+function pickLocale(lang) {
+  const base = (lang ?? "").toLowerCase().split(/[-_]/)[0];
+  return base === "fr" || base === "de" || base === "es" ? base : "en";
+}
+function withoutUndefined(values) {
+  if (!values) return {};
+  return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== void 0));
+}
+function newsletterFormLabels(lang, overrides) {
+  return { ...FORM_LABELS[pickLocale(lang)], ...withoutUndefined(overrides) };
+}
+function newsletterPageLabels(lang, overrides) {
+  return { ...PAGE_LABELS[pickLocale(lang)], ...withoutUndefined(overrides) };
+}
+
+// src/react/NewsletterForm.tsx
+var import_react3 = require("react");
+
+// src/react/safe-callback.ts
+function callSafely(fn, ...args) {
+  if (!fn) return;
+  try {
+    fn(...args);
+  } catch (error) {
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(() => {
+        throw error;
+      });
+    } else {
+      setTimeout(() => {
+        throw error;
+      });
+    }
+  }
+}
+
+// src/react/turnstile.ts
+var TURNSTILE_SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var pending = null;
+function loadTurnstile() {
+  const win = window;
+  if (win.turnstile) return Promise.resolve(win.turnstile);
+  if (!pending) {
+    pending = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      const fail = (message) => {
+        pending = null;
+        script.remove();
+        reject(new Error(message));
+      };
+      script.src = TURNSTILE_SCRIPT_URL;
+      script.async = true;
+      script.addEventListener("load", () => {
+        if (win.turnstile) resolve(win.turnstile);
+        else fail("Turnstile loaded without its API.");
+      });
+      script.addEventListener("error", () => fail("Turnstile could not be loaded."));
+      document.head.appendChild(script);
+    });
+  }
+  return pending;
+}
+
+// src/react/NewsletterForm.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var HONEYPOT_STYLE = {
+  position: "absolute",
+  left: "-10000px",
+  top: "auto",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden"
+};
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function problemOf(error) {
+  switch (error.code) {
+    case "invalid_email":
+      return "invalidEmail";
+    case "consent_required":
+      return "consentRequired";
+    case "captcha_failed":
+      return "captchaFailed";
+    case "rate_limited":
+      return "rateLimited";
+    default:
+      return "unavailable";
+  }
+}
+function captchaLanguage(lang) {
+  return (lang ?? "").toLowerCase().split(/[-_]/)[0] || "auto";
+}
+function NewsletterForm({
+  client,
+  lang,
+  settings: givenSettings,
+  labels: overrides,
+  className,
+  captchaTheme = "auto",
+  onSuccess,
+  onError
+}) {
+  const labels = newsletterFormLabels(lang, overrides);
+  const zone = useCmsQuery(
+    givenSettings ? null : (signal) => client.getZone({ signal }),
+    [givenSettings === void 0, client.baseUrl, client.zone]
+  );
+  const settings = givenSettings ?? zone.data?.newsletter;
+  const siteKey = settings?.enabled ? settings.captcha?.siteKey : void 0;
+  const id = (0, import_react3.useId)();
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [consent, setConsent] = (0, import_react3.useState)(false);
+  const [status, setStatus] = (0, import_react3.useState)("idle");
+  const [problem, setProblem] = (0, import_react3.useState)(null);
+  const [token, setToken] = (0, import_react3.useState)(null);
+  const [captchaBroken, setCaptchaBroken] = (0, import_react3.useState)(false);
+  const honeypotRef = (0, import_react3.useRef)(null);
+  const captchaRef = (0, import_react3.useRef)(null);
+  const widgetRef = (0, import_react3.useRef)(null);
+  const sendingRef = (0, import_react3.useRef)(false);
+  const showFields = status !== "sent";
+  (0, import_react3.useEffect)(() => {
+    const container = captchaRef.current;
+    if (!siteKey || !showFields || !container) return void 0;
+    let cancelled = false;
+    setCaptchaBroken(false);
+    const fail = () => {
+      if (cancelled) return;
+      setCaptchaBroken(true);
+      setProblem("unavailable");
+    };
+    loadTurnstile().then(
+      (api) => {
+        if (cancelled) return;
+        try {
+          const widgetId = api.render(container, {
+            sitekey: siteKey,
+            language: captchaLanguage(lang),
+            theme: captchaTheme,
+            callback: (value) => {
+              setToken(value);
+              setProblem((current) => current === "captchaRequired" || current === "captchaFailed" ? null : current);
+            },
+            "expired-callback": () => setToken(null),
+            "error-callback": () => setToken(null)
+          });
+          if (widgetId) widgetRef.current = { api, id: widgetId };
+          else fail();
+        } catch {
+          fail();
+        }
+      },
+      fail
+    );
+    return () => {
+      cancelled = true;
+      if (widgetRef.current) {
+        widgetRef.current.api.remove(widgetRef.current.id);
+        widgetRef.current = null;
+      }
+      setToken(null);
+    };
+  }, [siteKey, showFields, lang, captchaTheme]);
+  function clearProblem(which) {
+    if (problem === which) {
+      setProblem(null);
+      setStatus("idle");
+    }
+  }
+  async function handleSubmit(event) {
+    event.preventDefault();
+    if (sendingRef.current || !settings) return;
+    const address = email.trim();
+    let local = null;
+    if (!EMAIL_RE.test(address) || address.length > 254) local = "invalidEmail";
+    else if (!consent) local = "consentRequired";
+    else if (siteKey && captchaBroken) local = "unavailable";
+    else if (siteKey && !token) local = "captchaRequired";
+    if (local) {
+      setStatus("error");
+      setProblem(local);
+      return;
+    }
+    sendingRef.current = true;
+    setStatus("sending");
+    setProblem(null);
+    let cmsError;
+    try {
+      await client.subscribe({
+        email: address,
+        lang,
+        consent: true,
+        captchaToken: token ?? void 0,
+        website: honeypotRef.current?.value ?? ""
+      });
+    } catch (error) {
+      cmsError = isCmsError(error) ? error : new CmsError(0, "network_error", String(error));
+    } finally {
+      sendingRef.current = false;
+      if (widgetRef.current) widgetRef.current.api.reset(widgetRef.current.id);
+      setToken(null);
+    }
+    if (cmsError) {
+      setStatus("error");
+      setProblem(problemOf(cmsError));
+      callSafely(onError, cmsError);
+    } else {
+      setStatus("sent");
+      callSafely(onSuccess, address);
+    }
+  }
+  if (settings && !settings.enabled) return null;
+  const failedToLoad = !givenSettings && zone.error !== void 0;
+  let message = "";
+  if (status === "sent") message = labels.sent;
+  else if (problem) message = labels[problem];
+  else if (failedToLoad) message = labels.unavailable;
+  const displayStatus = problem || failedToLoad ? "error" : status === "error" ? "idle" : status;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "form",
+    {
+      className: ["cms-newsletter-form", className].filter(Boolean).join(" "),
+      "data-status": displayStatus,
+      "data-captcha": !siteKey ? "none" : token ? "ready" : "pending",
+      noValidate: true,
+      onSubmit: handleSubmit,
+      children: [
+        showFields && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cms-newsletter-form__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "cms-newsletter-form__label", htmlFor: `${id}-email`, children: labels.email }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                id: `${id}-email`,
+                className: "cms-newsletter-form__email",
+                type: "email",
+                name: "email",
+                autoComplete: "email",
+                required: true,
+                placeholder: labels.emailPlaceholder,
+                value: email,
+                disabled: status === "sending",
+                "aria-invalid": problem === "invalidEmail" || void 0,
+                onChange: (event) => {
+                  setEmail(event.target.value);
+                  clearProblem("invalidEmail");
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cms-newsletter-form__consent", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                id: `${id}-consent`,
+                className: "cms-newsletter-form__checkbox",
+                type: "checkbox",
+                name: "consent",
+                checked: consent,
+                disabled: status === "sending",
+                "aria-invalid": problem === "consentRequired" || void 0,
+                onChange: (event) => {
+                  setConsent(event.target.checked);
+                  clearProblem("consentRequired");
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "cms-newsletter-form__consent-label", htmlFor: `${id}-consent`, children: labels.consent })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cms-newsletter-form__honeypot", "aria-hidden": "true", style: HONEYPOT_STYLE, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${id}-website`, children: "Website" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                id: `${id}-website`,
+                ref: honeypotRef,
+                type: "text",
+                name: "website",
+                tabIndex: -1,
+                autoComplete: "off",
+                defaultValue: ""
+              }
+            )
+          ] }),
+          siteKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cms-newsletter-form__captcha", ref: captchaRef }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              className: "cms-newsletter-form__submit",
+              type: "submit",
+              disabled: status === "sending" || !settings || captchaBroken,
+              children: status === "sending" ? labels.sending : labels.submit
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "cms-newsletter-form__message", role: "status", "aria-live": "polite", children: message })
+      ]
+    }
+  );
+}
+
+// src/react/NewsletterPage.tsx
+var import_react4 = require("react");
+
+// src/newsletter-action.ts
+var ACTIONS = ["confirm", "unsubscribe"];
+var TOKEN_RE = /^[A-Za-z0-9_-]{16,512}$/;
+function readNewsletterAction(source) {
+  if (source == null) return null;
+  const params = toSearchParams(source);
+  let found = null;
+  for (const action of ACTIONS) {
+    const values = params.getAll(action);
+    if (values.length === 0) continue;
+    if (values.length > 1 || found) return null;
+    found = { action, token: values[0] ?? "" };
+  }
+  return found && TOKEN_RE.test(found.token) ? found : null;
+}
+function toSearchParams(source) {
+  if (typeof source === "string") {
+    const query = source.includes("?") ? source.slice(source.indexOf("?") + 1) : source;
+    return new URLSearchParams(query.split("#")[0]);
+  }
+  if (isSearchParams(source)) return source;
+  if (isUrl(source)) return source.searchParams;
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(source)) {
+    const values = Array.isArray(value) ? value : value === void 0 ? [] : [value];
+    for (const item of values) params.append(key, item);
+  }
+  return params;
+}
+function isSearchParams(value) {
+  return typeof value.getAll === "function" && typeof value.append === "function";
+}
+function isUrl(value) {
+  const url = value;
+  return typeof url.href === "string" && typeof url.searchParams === "object" && isSearchParams(url.searchParams);
+}
+
+// src/react/NewsletterPage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function NewsletterPage({
+  client,
+  search,
+  lang,
+  labels: overrides,
+  className,
+  onDone,
+  cleanUrl = true
+}) {
+  const labels = newsletterPageLabels(lang, overrides);
+  const readsAddressBar = search === void 0;
+  const [fromAddressBar, setFromAddressBar] = (0, import_react4.useState)(void 0);
+  const [phase, setPhase] = (0, import_react4.useState)("ready");
+  const workingRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
+    if (readsAddressBar) setFromAddressBar(readNewsletterAction(window.location.href));
+  }, [readsAddressBar]);
+  const action = readsAddressBar ? fromAddressBar : readNewsletterAction(search);
+  async function run() {
+    if (!action || workingRef.current) return;
+    workingRef.current = true;
+    setPhase("working");
+    let result;
+    let failedPhase;
+    try {
+      result = action.action === "confirm" ? await client.confirm(action.token) : await client.unsubscribe(action.token);
+    } catch (error) {
+      failedPhase = isCmsError(error) && error.code === "invalid_token" ? "invalid" : "failed";
+    } finally {
+      workingRef.current = false;
+    }
+    if (result) {
+      setPhase("done");
+      if (cleanUrl) removeTokenFromAddressBar();
+      callSafely(onDone, result);
+    } else if (failedPhase) {
+      setPhase(failedPhase);
+    }
+  }
+  let intro = null;
+  let button = null;
+  let message = "";
+  if (action === null) {
+    message = labels.noLink;
+  } else if (action) {
+    const confirming = action.action === "confirm";
+    if (phase === "done") {
+      message = confirming ? labels.confirmed : labels.unsubscribed;
+    } else if (phase === "invalid") {
+      message = labels.invalidLink;
+    } else {
+      intro = confirming ? labels.confirmIntro : labels.unsubscribeIntro;
+      if (phase === "working") button = confirming ? labels.confirming : labels.unsubscribing;
+      else button = confirming ? labels.confirmButton : labels.unsubscribeButton;
+      if (phase === "failed") message = labels.failed;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: ["cms-newsletter-page", className].filter(Boolean).join(" "),
+      "data-action": action ? action.action : action === null ? "none" : "unknown",
+      "data-status": phase,
+      children: [
+        intro && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cms-newsletter-page__intro", children: intro }),
+        button && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "cms-newsletter-page__button", type: "button", disabled: phase === "working", onClick: run, children: button }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cms-newsletter-page__message", role: "status", "aria-live": "polite", children: message })
+      ]
+    }
+  );
+}
+function removeTokenFromAddressBar() {
+  const url = new URL(window.location.href);
+  if (!url.searchParams.has("confirm") && !url.searchParams.has("unsubscribe")) return;
+  url.searchParams.delete("confirm");
+  url.searchParams.delete("unsubscribe");
+  window.history.replaceState(
+    withoutNextRouterKeys(window.history.state),
+    "",
+    `${url.pathname}${url.search}${url.hash}`
+  );
+}
+function withoutNextRouterKeys(state) {
+  if (state === null || typeof state !== "object") return state;
+  const clone = { ...state };
+  delete clone.__NA;
+  delete clone._N;
+  return clone;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ArticleBody,
+  NewsletterForm,
+  NewsletterPage,
+  newsletterFormLabels,
+  newsletterPageLabels,
+  useArticle,
+  useArticles,
+  useZone
+});