payload-subscribers-plugin 0.0.7 → 0.0.9

package/README.md

@@ -50,6 +50,9 @@ export default buildConfig({
 
       // Provide a custom expiration for magic link tokens. The default is 30 minutes.
       tokenExpiration: 60 * 60,
+      
+      // Provide your unsubscribe route. This route should include the Unsubscribe component.
+      unsubscribeUrl?: string
     }),
   ],
 })
@@ -94,7 +97,7 @@ const Page = () => {
 }
 ```
 
-**_IMPORANT:_** Be sure to create a /verify route
+**_IMPORTANT:_** Be sure to create a /verify route
 
 ```typescript
 // verify/page.tsx
@@ -263,6 +266,17 @@ Form to input email address and get a magic link email sent.
   />
 ```
 
+```html
+<!-- The HTML scaffolding with global CSS classes you can use -->
+<div class="subscribers-request subscribers-container">
+  <p class="subscribers-message subscribers-error">{result}</p>
+  <form class="subscribers-form">
+    <input class="subscribers-emailInput" type="email" />
+    <button class="subscribers-button">Request magic link</button>
+  </form>
+</div>
+```
+
 #### **VerifyMagicLink**
 
 Component that verifies a magic link using expected url parameters.
@@ -296,7 +310,7 @@ Component that verifies a magic link using expected url parameters.
     verifyUrl={verifyUrl}
   >
     // Provide children to render after link is verified. Optional
-    // Since you provide the verifyUrl to any of the plugin components, you can include a forwardUrl 
+    // Since you provide the verifyUrl to any of the plugin components, you can include a forwardUrl
     // as a search param, which your route can then use here.
     <a href={forwardUrl}>
       <button className={'customCss'} name={'continue'} type="button">
@@ -306,6 +320,18 @@ Component that verifies a magic link using expected url parameters.
   </VerifyMagicLink>
 ```
 
+```html
+<!-- The HTML scaffolding with global CSS classes you can use -->
+<div class="subscribers-verify subscribers-container">
+  <p class="subscribers-loading">verifying...</p>
+  <p class="subscribers-message">{result}</p>
+  <div class="subscribers-form">
+    {renderButton({ name: "request", onClick: handleRequestAnother, text:"Request another magic
+    link", })} {children}
+  </div>
+</div>
+```
+
 #### **Subscribe**
 
 Allows a subscriber to select from among all active optInChannels.
@@ -340,6 +366,38 @@ Allows a subscriber to select from among all active optInChannels.
   />
 ```
 
+```html
+<!-- The HTML scaffolding with global CSS classes you can use -->
+<div class="subscribers-subscribe subscribers-container">
+  <h2>Subscribe</h2>
+  <div class="subscribers-section">
+    <!-- START: SelectOptInChannels -->
+    <div class="subscribers-container">
+      <h3>Opt-in Channels</h3>
+      <p class="subscribers-loading">verifying...</p>
+      <div class="subscribers-optionsGroup">
+        <!-- START: FOR EACH CHANNEL -->
+        <div class="subscribers-optInCheckboxItem">
+          <label class="subscribers-optInCheckboxLabel" ,>
+            <input class="subscribers-optInCheckbox" type="checkbox" />
+            {channel.title}
+          </label>
+        </div>
+        <!-- END: FOR EACH CHANNEL -->
+      </div>
+    </div>
+    <!-- END: SelectOptInChannels -->
+  </div>
+  <form class="subscribers-form">
+    <div class="subscribers-section">
+      <input class="subscribers-emailInput" placeholder="enter your email" type="email" />
+      <button class="subscribers-button" type="submit">Save choices</button>
+    </div>
+  </form>
+  <p class="subscribers-message subscribers-error">{result}</p>
+</div>
+```
+
 #### **SubscriberMenu**
 
 A simple user menu, most useful for testing. Seen in the screenshots above. Includes a "welcome" message, a link to a /subscribe route, and a log out button.
@@ -347,10 +405,29 @@ A simple user menu, most useful for testing. Seen in the screenshots above. Incl
 ```typescript
 // classNames prop
 
-export type SubscriberMenuClasses = {
-  button?: string
-  container?: string
-}
+<SubscriberMenu
+  classNames={{
+    button: 'customCssClassNames',
+    container: 'customCssClassNames',
+  }}
+  subscribeUrl={new URL('/subscribe', serverURL)}
+ />
+
+```
+
+```html
+<!-- The HTML scaffolding with global CSS classes you can use -->
+<div class="subscribers-menu subscribers-container">
+  <div class="subscribers-group">
+    <div class="subscribers-welcome">Welcome, {subscriber email}</div>
+    <div class="subscribers-subs-link">
+      <a href="{subscribeUrl}">Manage subscriptions</a>
+    </div>
+    <div class="subscribers-logout">
+      <button class="subscribers-button" type="button">Log out</button>
+    </div>
+  </div>
+</div>
 ```
 
 ## Contributing

package/dist/components/app/RequestMagicLink.d.ts

@@ -1,11 +1,15 @@
 import type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js';
 export { RequestMagicLinkResponse };
+/**
+ * Props for the RequestMagicLink component.
+ */
 export interface IRequestMagicLink {
     classNames?: RequestMagicLinkClasses;
     handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
     props?: any;
-    verifyUrl?: URL;
+    verifyUrl?: string | URL;
 }
+/** Optional CSS class overrides for RequestMagicLink elements. */
 export type RequestMagicLinkClasses = {
     button?: string;
     container?: string;
@@ -14,4 +18,11 @@ export type RequestMagicLinkClasses = {
     form?: string;
     message?: string;
 };
+/**
+ * Form component that lets users request a magic-login link by email. Submits to POST /api/emailToken
+ * and shows success or error message. Uses SubscriberProvider for pre-filling email when available.
+ *
+ * @param props - See IRequestMagicLink
+ * @returns Form UI with email input and "Request magic link" button
+ */
 export declare const RequestMagicLink: ({ classNames, handleMagicLinkRequested, verifyUrl, }: IRequestMagicLink) => import("react").JSX.Element;

package/dist/components/app/RequestMagicLink.js

@@ -1,12 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PayloadSDK } from '@payloadcms/sdk';
 import { useEffect, useState } from 'react';
 import { useSubscriber } from '../../contexts/SubscriberProvider.js';
 import { useServerUrl } from '../../react-hooks/useServerUrl.js';
 import { mergeClassNames } from './helpers.js';
 import styles from './shared.module.css';
-export const RequestMagicLink = ({ classNames = {
+/**
+ * Form component that lets users request a magic-login link by email. Submits to POST /api/emailToken
+ * and shows success or error message. Uses SubscriberProvider for pre-filling email when available.
+ *
+ * @param props - See IRequestMagicLink
+ * @returns Form UI with email input and "Request magic link" button
+ */ export const RequestMagicLink = ({ classNames = {
     button: '',
     container: '',
     emailInput: '',
@@ -16,10 +21,15 @@ export const RequestMagicLink = ({ classNames = {
 }, handleMagicLinkRequested, verifyUrl })=>{
     const { subscriber } = useSubscriber();
     const { serverURL } = useServerUrl();
+    if (!verifyUrl && serverURL) {
+        console.log('verifyUrl DEFAULT');
+        verifyUrl = `${serverURL ? serverURL : ''}/verify`;
+    }
+    if (typeof verifyUrl == 'string') {
+        console.log('verifyUrl STRING: ', verifyUrl);
+        verifyUrl = new URL(verifyUrl);
+    }
     const [status, setStatus] = useState('default');
-    const sdk = new PayloadSDK({
-        baseURL: serverURL || ''
-    });
     const [result, setResult] = useState();
     const [email, setEmail] = useState(subscriber?.email || '');
     useEffect(()=>{
@@ -29,48 +39,63 @@ export const RequestMagicLink = ({ classNames = {
     ]);
     const handleSubmit = async (e)=>{
         e.preventDefault();
-        const emailTokenResponse = await sdk.request({
-            json: {
-                email,
-                verifyUrl: verifyUrl?.href
-            },
-            method: 'POST',
-            path: '/api/emailToken'
-        });
-        if (emailTokenResponse.ok) {
-            const emailTokenResponseJson = await emailTokenResponse.json();
-            if (handleMagicLinkRequested) {
-                handleMagicLinkRequested(emailTokenResponseJson);
-            }
-            // @ts-expect-error One or the other exists
-            const { emailResult, error } = emailTokenResponseJson;
-            if (error) {
-                setStatus('error');
-                setResult(`An error occured. Please try again. \n ${error}`);
-            } else if (emailResult) {
-                setStatus('sent');
-                setResult('An email has been sent containing your magic link.');
+        if (!verifyUrl) {
+            setStatus('error');
+            setResult(`An error occured. Please try again. \n(No verify URL available.)`);
+        } else {
+            // const emailTokenResponse = await sdk.request({
+            //   json: {
+            //     email,
+            //     verifyUrl: verifyUrl?.href,
+            //   },
+            //   method: 'POST',
+            //   path: '/api/emailToken',
+            // })
+            const emailTokenResponse = await fetch(`${serverURL ? serverURL : ''}/api/emailToken`, {
+                body: JSON.stringify({
+                    email,
+                    verifyUrl: verifyUrl?.href
+                }),
+                method: 'POST'
+            });
+            if (emailTokenResponse.ok) {
+                const emailTokenResponseJson = await emailTokenResponse.json();
+                if (handleMagicLinkRequested) {
+                    handleMagicLinkRequested(emailTokenResponseJson);
+                }
+                // @ts-expect-error One or the other exists
+                const { emailResult, error } = emailTokenResponseJson;
+                if (error) {
+                    setStatus('error');
+                    setResult(`An error occured. Please try again. \n ${error}`);
+                } else if (emailResult) {
+                    setStatus('sent');
+                    setResult('An email has been sent containing your magic link.');
+                } else {
+                    setStatus('error');
+                    setResult(`An error occured. Please try again. \nResult unknown`);
+                }
             } else {
+                const emailTokenResponseText = await emailTokenResponse.text();
                 setStatus('error');
-                setResult(`An error occured. Please try again. \nResult unknown`);
+                setResult(`An error occured. Please try again. \n${emailTokenResponseText}`);
             }
-        } else {
-            const emailTokenResponseText = await emailTokenResponse.text();
-            setStatus('error');
-            setResult(`An error occured. Please try again. \n${emailTokenResponseText}`);
         }
     };
     return /*#__PURE__*/ _jsxs("div", {
         className: mergeClassNames([
+            'subscribers-request subscribers-container',
             styles.container,
             classNames.container
         ]),
         children: [
             result ? /*#__PURE__*/ _jsx("p", {
                 className: mergeClassNames([
+                    'subscribers-message',
                     styles.message,
                     classNames.message,
                     status == 'error' ? [
+                        'subscribers-error',
                         styles.error,
                         classNames.error
                     ] : []
@@ -79,6 +104,7 @@ export const RequestMagicLink = ({ classNames = {
             }) : /*#__PURE__*/ _jsx(_Fragment, {}),
             /*#__PURE__*/ _jsxs("form", {
                 className: mergeClassNames([
+                    'subscribers-form',
                     styles.form,
                     classNames.form
                 ]),
@@ -88,6 +114,7 @@ export const RequestMagicLink = ({ classNames = {
                     /*#__PURE__*/ _jsx("input", {
                         "aria-label": "enter your email",
                         className: mergeClassNames([
+                            'subscribers-emailInput',
                             styles.emailInput,
                             classNames.emailInput
                         ]),
@@ -98,6 +125,7 @@ export const RequestMagicLink = ({ classNames = {
                     }),
                     /*#__PURE__*/ _jsx("button", {
                         className: mergeClassNames([
+                            'subscribers-button',
                             styles.button,
                             classNames.button
                         ]),

package/dist/components/app/RequestMagicLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/app/RequestMagicLink.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { type ChangeEvent, type SubmitEvent, useEffect, useState } from 'react'\n\nimport type { Config } from '../../copied/payload-types.js'\nimport type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\nexport { RequestMagicLinkResponse }\n\nexport interface IRequestMagicLink {\n  classNames?: RequestMagicLinkClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  props?: any\n  verifyUrl?: URL\n}\n\nexport type RequestMagicLinkClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  message?: string\n}\n\ntype statusValues = 'default' | 'error' | 'sent'\n\nexport const RequestMagicLink = ({\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    message: '',\n  },\n  handleMagicLinkRequested,\n  verifyUrl,\n}: IRequestMagicLink) => {\n  const { subscriber } = useSubscriber()\n  const { serverURL } = useServerUrl()\n  const [status, setStatus] = useState<statusValues>('default')\n\n  const sdk = new PayloadSDK<Config>({\n    baseURL: serverURL || '',\n  })\n\n  const [result, setResult] = useState<string>()\n  const [email, setEmail] = useState(subscriber?.email || '')\n\n  useEffect(() => {\n    setEmail(subscriber?.email || '')\n  }, [subscriber])\n\n  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const emailTokenResponse = await sdk.request({\n      json: {\n        email,\n        verifyUrl: verifyUrl?.href,\n      },\n      method: 'POST',\n      path: '/api/emailToken',\n    })\n    if (emailTokenResponse.ok) {\n      const emailTokenResponseJson: RequestMagicLinkResponse = await emailTokenResponse.json()\n      if (handleMagicLinkRequested) {\n        handleMagicLinkRequested(emailTokenResponseJson)\n      }\n      // @ts-expect-error One or the other exists\n      const { emailResult, error } = emailTokenResponseJson\n      if (error) {\n        setStatus('error')\n        setResult(`An error occured. Please try again. \\n ${error}`)\n      } else if (emailResult) {\n        setStatus('sent')\n        setResult('An email has been sent containing your magic link.')\n      } else {\n        setStatus('error')\n        setResult(`An error occured. Please try again. \\nResult unknown`)\n      }\n    } else {\n      const emailTokenResponseText = await emailTokenResponse.text()\n      setStatus('error')\n      setResult(`An error occured. Please try again. \\n${emailTokenResponseText}`)\n    }\n  }\n\n  return (\n    <div className={mergeClassNames([styles.container, classNames.container])}>\n      {result ? (\n        <p\n          className={mergeClassNames([\n            styles.message,\n            classNames.message,\n            status == 'error' ? [styles.error, classNames.error] : [],\n          ])}\n        >\n          {result}\n        </p>\n      ) : (\n        <></>\n      )}\n      <form\n        className={mergeClassNames([styles.form, classNames.form])}\n        method=\"POST\"\n        onSubmit={handleSubmit}\n      >\n        <input\n          aria-label=\"enter your email\"\n          className={mergeClassNames([styles.emailInput, classNames.emailInput])}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}\n          placeholder=\"enter your email\"\n          type=\"email\"\n          value={email}\n        />\n        <button className={mergeClassNames([styles.button, classNames.button])} type=\"submit\">\n          Request magic link\n        </button>\n      </form>\n    </div>\n  )\n}\n"],"names":["PayloadSDK","useEffect","useState","useSubscriber","useServerUrl","mergeClassNames","styles","RequestMagicLink","classNames","button","container","emailInput","error","form","message","handleMagicLinkRequested","verifyUrl","subscriber","serverURL","status","setStatus","sdk","baseURL","result","setResult","email","setEmail","handleSubmit","e","preventDefault","emailTokenResponse","request","json","href","method","path","ok","emailTokenResponseJson","emailResult","emailTokenResponseText","text","div","className","p","onSubmit","input","aria-label","onChange","target","value","placeholder","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAiB;AAC5C,SAA6CC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/E,SAASC,aAAa,QAAQ,uCAAsC;AACpE,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAOC,YAAY,sBAAqB;AAsBxC,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACxBC,SAAS,EACS;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGd;IACvB,MAAM,EAAEe,SAAS,EAAE,GAAGd;IACtB,MAAM,CAACe,QAAQC,UAAU,GAAGlB,SAAuB;IAEnD,MAAMmB,MAAM,IAAIrB,WAAmB;QACjCsB,SAASJ,aAAa;IACxB;IAEA,MAAM,CAACK,QAAQC,UAAU,GAAGtB;IAC5B,MAAM,CAACuB,OAAOC,SAAS,GAAGxB,SAASe,YAAYQ,SAAS;IAExDxB,UAAU;QACRyB,SAAST,YAAYQ,SAAS;IAChC,GAAG;QAACR;KAAW;IAEf,MAAMU,eAAe,OAAOC;QAC1BA,EAAEC,cAAc;QAChB,MAAMC,qBAAqB,MAAMT,IAAIU,OAAO,CAAC;YAC3CC,MAAM;gBACJP;gBACAT,WAAWA,WAAWiB;YACxB;YACAC,QAAQ;YACRC,MAAM;QACR;QACA,IAAIL,mBAAmBM,EAAE,EAAE;YACzB,MAAMC,yBAAmD,MAAMP,mBAAmBE,IAAI;YACtF,IAAIjB,0BAA0B;gBAC5BA,yBAAyBsB;YAC3B;YACA,2CAA2C;YAC3C,MAAM,EAAEC,WAAW,EAAE1B,KAAK,EAAE,GAAGyB;YAC/B,IAAIzB,OAAO;gBACTQ,UAAU;gBACVI,UAAU,CAAC,uCAAuC,EAAEZ,OAAO;YAC7D,OAAO,IAAI0B,aAAa;gBACtBlB,UAAU;gBACVI,UAAU;YACZ,OAAO;gBACLJ,UAAU;gBACVI,UAAU,CAAC,oDAAoD,CAAC;YAClE;QACF,OAAO;YACL,MAAMe,yBAAyB,MAAMT,mBAAmBU,IAAI;YAC5DpB,UAAU;YACVI,UAAU,CAAC,sCAAsC,EAAEe,wBAAwB;QAC7E;IACF;IAEA,qBACE,MAACE;QAAIC,WAAWrC,gBAAgB;YAACC,OAAOI,SAAS;YAAEF,WAAWE,SAAS;SAAC;;YACrEa,uBACC,KAACoB;gBACCD,WAAWrC,gBAAgB;oBACzBC,OAAOQ,OAAO;oBACdN,WAAWM,OAAO;oBAClBK,UAAU,UAAU;wBAACb,OAAOM,KAAK;wBAAEJ,WAAWI,KAAK;qBAAC,GAAG,EAAE;iBAC1D;0BAEAW;+BAGH;0BAEF,MAACV;gBACC6B,WAAWrC,gBAAgB;oBAACC,OAAOO,IAAI;oBAAEL,WAAWK,IAAI;iBAAC;gBACzDqB,QAAO;gBACPU,UAAUjB;;kCAEV,KAACkB;wBACCC,cAAW;wBACXJ,WAAWrC,gBAAgB;4BAACC,OAAOK,UAAU;4BAAEH,WAAWG,UAAU;yBAAC;wBACrEoC,UAAU,CAACnB,IAAqCF,SAASE,EAAEoB,MAAM,CAACC,KAAK;wBACvEC,aAAY;wBACZC,MAAK;wBACLF,OAAOxB;;kCAET,KAAChB;wBAAOiC,WAAWrC,gBAAgB;4BAACC,OAAOG,MAAM;4BAAED,WAAWC,MAAM;yBAAC;wBAAG0C,MAAK;kCAAS;;;;;;AAM9F,EAAC"}
+{"version":3,"sources":["../../../src/components/app/RequestMagicLink.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { type ChangeEvent, type SubmitEvent, useEffect, useState } from 'react'\n\nimport type { Config } from '../../copied/payload-types.js'\nimport type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\nexport { RequestMagicLinkResponse }\n\n/**\n * Props for the RequestMagicLink component.\n */\nexport interface IRequestMagicLink {\n  classNames?: RequestMagicLinkClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  props?: any\n  verifyUrl?: string | URL\n}\n\n/** Optional CSS class overrides for RequestMagicLink elements. */\nexport type RequestMagicLinkClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  message?: string\n}\n\ntype statusValues = 'default' | 'error' | 'sent'\n\n/**\n * Form component that lets users request a magic-login link by email. Submits to POST /api/emailToken\n * and shows success or error message. Uses SubscriberProvider for pre-filling email when available.\n *\n * @param props - See IRequestMagicLink\n * @returns Form UI with email input and \"Request magic link\" button\n */\nexport const RequestMagicLink = ({\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    message: '',\n  },\n  handleMagicLinkRequested,\n  verifyUrl,\n}: IRequestMagicLink) => {\n  const { subscriber } = useSubscriber()\n  const { serverURL } = useServerUrl()\n\n  if (!verifyUrl && serverURL) {\n    console.log('verifyUrl DEFAULT')\n    verifyUrl = `${serverURL ? serverURL : ''}/verify`\n  }\n  if (typeof verifyUrl == 'string') {\n    console.log('verifyUrl STRING: ', verifyUrl)\n    verifyUrl = new URL(verifyUrl)\n  }\n\n  const [status, setStatus] = useState<statusValues>('default')\n\n  const [result, setResult] = useState<string>()\n  const [email, setEmail] = useState(subscriber?.email || '')\n\n  useEffect(() => {\n    setEmail(subscriber?.email || '')\n  }, [subscriber])\n\n  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    if (!verifyUrl) {\n      setStatus('error')\n      setResult(`An error occured. Please try again. \\n(No verify URL available.)`)\n    } else {\n      // const emailTokenResponse = await sdk.request({\n      //   json: {\n      //     email,\n      //     verifyUrl: verifyUrl?.href,\n      //   },\n      //   method: 'POST',\n      //   path: '/api/emailToken',\n      // })\n      const emailTokenResponse = await fetch(`${serverURL ? serverURL : ''}/api/emailToken`, {\n        body: JSON.stringify({\n          email,\n          verifyUrl: verifyUrl?.href,\n        }),\n        method: 'POST',\n      })\n      if (emailTokenResponse.ok) {\n        const emailTokenResponseJson: RequestMagicLinkResponse = await emailTokenResponse.json()\n        if (handleMagicLinkRequested) {\n          handleMagicLinkRequested(emailTokenResponseJson)\n        }\n        // @ts-expect-error One or the other exists\n        const { emailResult, error } = emailTokenResponseJson\n        if (error) {\n          setStatus('error')\n          setResult(`An error occured. Please try again. \\n ${error}`)\n        } else if (emailResult) {\n          setStatus('sent')\n          setResult('An email has been sent containing your magic link.')\n        } else {\n          setStatus('error')\n          setResult(`An error occured. Please try again. \\nResult unknown`)\n        }\n      } else {\n        const emailTokenResponseText = await emailTokenResponse.text()\n        setStatus('error')\n        setResult(`An error occured. Please try again. \\n${emailTokenResponseText}`)\n      }\n    }\n  }\n  return (\n    <div\n      className={mergeClassNames([\n        'subscribers-request subscribers-container',\n        styles.container,\n        classNames.container,\n      ])}\n    >\n      {result ? (\n        <p\n          className={mergeClassNames([\n            'subscribers-message',\n            styles.message,\n            classNames.message,\n            status == 'error' ? ['subscribers-error', styles.error, classNames.error] : [],\n          ])}\n        >\n          {result}\n        </p>\n      ) : (\n        <></>\n      )}\n      <form\n        className={mergeClassNames(['subscribers-form', styles.form, classNames.form])}\n        method=\"POST\"\n        onSubmit={handleSubmit}\n      >\n        <input\n          aria-label=\"enter your email\"\n          className={mergeClassNames([\n            'subscribers-emailInput',\n            styles.emailInput,\n            classNames.emailInput,\n          ])}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}\n          placeholder=\"enter your email\"\n          type=\"email\"\n          value={email}\n        />\n        <button\n          className={mergeClassNames(['subscribers-button', styles.button, classNames.button])}\n          type=\"submit\"\n        >\n          Request magic link\n        </button>\n      </form>\n    </div>\n  )\n}\n"],"names":["useEffect","useState","useSubscriber","useServerUrl","mergeClassNames","styles","RequestMagicLink","classNames","button","container","emailInput","error","form","message","handleMagicLinkRequested","verifyUrl","subscriber","serverURL","console","log","URL","status","setStatus","result","setResult","email","setEmail","handleSubmit","e","preventDefault","emailTokenResponse","fetch","body","JSON","stringify","href","method","ok","emailTokenResponseJson","json","emailResult","emailTokenResponseText","text","div","className","p","onSubmit","input","aria-label","onChange","target","value","placeholder","type"],"mappings":"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"}

package/dist/components/app/RequestOrSubscribe.d.ts

@@ -1,5 +1,15 @@
 import { type RequestMagicLinkResponse, type SubscribeResponse } from '../../exports/ui.js';
 export type { RequestMagicLinkResponse, SubscribeResponse };
+/**
+ * Props for the RequestOrSubscribe component.
+ */
+export interface IRequestOrSubscribe {
+    classNames?: RequestOrSubscribeClasses;
+    handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
+    handleSubscribe?: (result: SubscribeResponse) => void;
+    verifyUrl?: string | URL;
+}
+/** Optional CSS class overrides for RequestOrSubscribe and its child components. */
 export type RequestOrSubscribeClasses = {
     button?: string;
     container?: string;
@@ -10,9 +20,14 @@ export type RequestOrSubscribeClasses = {
     message?: string;
     section?: string;
 };
-export declare function RequestOrSubscribe({ classNames, handleMagicLinkRequested, handleSubscribe, verifyUrl, }: {
-    classNames?: RequestOrSubscribeClasses;
-    handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
-    handleSubscribe?: (result: SubscribeResponse) => void;
-    verifyUrl?: URL;
-}): import("react").JSX.Element;
+/**
+ * Composite component that shows Subscribe when a subscriber is authenticated, otherwise
+ * RequestMagicLink. Used as a single entry point for "sign in or manage subscriptions."
+ *
+ * @param props.classNames - Optional class overrides passed to child components
+ * @param props.handleMagicLinkRequested - Callback when a magic link is requested (no subscriber yet)
+ * @param props.handleSubscribe - Callback when subscription/opt-ins are updated (subscriber present)
+ * @param props.verifyUrl - Base URL for verify links in emails
+ * @returns Either Subscribe or RequestMagicLink based on subscriber context
+ */
+export declare function RequestOrSubscribe({ classNames, handleMagicLinkRequested, handleSubscribe, verifyUrl, }: IRequestOrSubscribe): import("react").JSX.Element;

package/dist/components/app/RequestOrSubscribe.js

@@ -2,7 +2,16 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSubscriber } from '../../contexts/SubscriberProvider.js';
 import { RequestMagicLink, Subscribe } from '../../exports/ui.js';
-export function RequestOrSubscribe({ classNames = {
+/**
+ * Composite component that shows Subscribe when a subscriber is authenticated, otherwise
+ * RequestMagicLink. Used as a single entry point for "sign in or manage subscriptions."
+ *
+ * @param props.classNames - Optional class overrides passed to child components
+ * @param props.handleMagicLinkRequested - Callback when a magic link is requested (no subscriber yet)
+ * @param props.handleSubscribe - Callback when subscription/opt-ins are updated (subscriber present)
+ * @param props.verifyUrl - Base URL for verify links in emails
+ * @returns Either Subscribe or RequestMagicLink based on subscriber context
+ */ export function RequestOrSubscribe({ classNames = {
     button: '',
     container: '',
     emailInput: '',
@@ -12,6 +21,9 @@ export function RequestOrSubscribe({ classNames = {
     message: '',
     section: ''
 }, handleMagicLinkRequested, handleSubscribe, verifyUrl }) {
+    if (typeof verifyUrl == 'string') {
+        verifyUrl = new URL(verifyUrl);
+    }
     const { subscriber } = useSubscriber();
     // Example: Conditionally render something or pass the state to children
     return /*#__PURE__*/ _jsx(_Fragment, {

package/dist/components/app/RequestOrSubscribe.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/app/RequestOrSubscribe.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport {\n  RequestMagicLink,\n  type RequestMagicLinkResponse,\n  Subscribe,\n  type SubscribeResponse,\n} from '../../exports/ui.js'\n\nexport type { RequestMagicLinkResponse, SubscribeResponse }\n\nexport type RequestOrSubscribeClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n  section?: string\n}\n\nexport function RequestOrSubscribe({\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n    section: '',\n  },\n  handleMagicLinkRequested,\n  handleSubscribe,\n  verifyUrl,\n}: {\n  classNames?: RequestOrSubscribeClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  handleSubscribe?: (result: SubscribeResponse) => void\n  verifyUrl?: URL\n}) {\n  const { subscriber } = useSubscriber()\n\n  // Example: Conditionally render something or pass the state to children\n  return (\n    <>\n      {subscriber ? (\n        <Subscribe\n          classNames={classNames}\n          handleSubscribe={handleSubscribe}\n          verifyUrl={verifyUrl}\n        />\n      ) : (\n        <RequestMagicLink\n          classNames={classNames}\n          handleMagicLinkRequested={handleMagicLinkRequested}\n          verifyUrl={verifyUrl}\n        />\n      )}\n      {/* <div>subscriber = {JSON.stringify(subscriber)}</div> */}\n    </>\n  )\n}\n"],"names":["useSubscriber","RequestMagicLink","Subscribe","RequestOrSubscribe","classNames","button","container","emailInput","error","form","loading","message","section","handleMagicLinkRequested","handleSubscribe","verifyUrl","subscriber"],"mappings":"AAAA;;AAIA,SAASA,aAAa,QAAQ,uCAAsC;AACpE,SACEC,gBAAgB,EAEhBC,SAAS,QAEJ,sBAAqB;AAe5B,OAAO,SAASC,mBAAmB,EACjCC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACxBC,eAAe,EACfC,SAAS,EAMV;IACC,MAAM,EAAEC,UAAU,EAAE,GAAGhB;IAEvB,wEAAwE;IACxE,qBACE;kBACGgB,2BACC,KAACd;YACCE,YAAYA;YACZU,iBAAiBA;YACjBC,WAAWA;2BAGb,KAACd;YACCG,YAAYA;YACZS,0BAA0BA;YAC1BE,WAAWA;;;AAMrB"}
+{"version":3,"sources":["../../../src/components/app/RequestOrSubscribe.tsx"],"sourcesContent":["'use client'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport {\n  RequestMagicLink,\n  type RequestMagicLinkResponse,\n  Subscribe,\n  type SubscribeResponse,\n} from '../../exports/ui.js'\n\nexport type { RequestMagicLinkResponse, SubscribeResponse }\n\n/**\n * Props for the RequestOrSubscribe component.\n */\nexport interface IRequestOrSubscribe {\n  classNames?: RequestOrSubscribeClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  handleSubscribe?: (result: SubscribeResponse) => void\n  verifyUrl?: string | URL\n}\n\n/** Optional CSS class overrides for RequestOrSubscribe and its child components. */\nexport type RequestOrSubscribeClasses = {\n  button?: string\n  container?: string\n  emailInput?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n  section?: string\n}\n\n/**\n * Composite component that shows Subscribe when a subscriber is authenticated, otherwise\n * RequestMagicLink. Used as a single entry point for \"sign in or manage subscriptions.\"\n *\n * @param props.classNames - Optional class overrides passed to child components\n * @param props.handleMagicLinkRequested - Callback when a magic link is requested (no subscriber yet)\n * @param props.handleSubscribe - Callback when subscription/opt-ins are updated (subscriber present)\n * @param props.verifyUrl - Base URL for verify links in emails\n * @returns Either Subscribe or RequestMagicLink based on subscriber context\n */\nexport function RequestOrSubscribe({\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n    section: '',\n  },\n  handleMagicLinkRequested,\n  handleSubscribe,\n  verifyUrl,\n}: IRequestOrSubscribe) {\n  if (typeof verifyUrl == 'string') {\n    verifyUrl = new URL(verifyUrl)\n  }\n\n  const { subscriber } = useSubscriber()\n\n  // Example: Conditionally render something or pass the state to children\n  return (\n    <>\n      {subscriber ? (\n        <Subscribe\n          classNames={classNames}\n          handleSubscribe={handleSubscribe}\n          verifyUrl={verifyUrl}\n        />\n      ) : (\n        <RequestMagicLink\n          classNames={classNames}\n          handleMagicLinkRequested={handleMagicLinkRequested}\n          verifyUrl={verifyUrl}\n        />\n      )}\n      {/* <div>subscriber = {JSON.stringify(subscriber)}</div> */}\n    </>\n  )\n}\n"],"names":["useSubscriber","RequestMagicLink","Subscribe","RequestOrSubscribe","classNames","button","container","emailInput","error","form","loading","message","section","handleMagicLinkRequested","handleSubscribe","verifyUrl","URL","subscriber"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,uCAAsC;AACpE,SACEC,gBAAgB,EAEhBC,SAAS,QAEJ,sBAAqB;AA0B5B;;;;;;;;;CASC,GACD,OAAO,SAASC,mBAAmB,EACjCC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACxBC,eAAe,EACfC,SAAS,EACW;IACpB,IAAI,OAAOA,aAAa,UAAU;QAChCA,YAAY,IAAIC,IAAID;IACtB;IAEA,MAAM,EAAEE,UAAU,EAAE,GAAGjB;IAEvB,wEAAwE;IACxE,qBACE;kBACGiB,2BACC,KAACf;YACCE,YAAYA;YACZU,iBAAiBA;YACjBC,WAAWA;2BAGb,KAACd;YACCG,YAAYA;YACZS,0BAA0BA;YAC1BE,WAAWA;;;AAMrB"}

package/dist/components/app/SelectOptInChannels.d.ts

@@ -1,10 +1,12 @@
 import type { OptInChannel } from '../../copied/payload-types.js';
+/** Props for the SelectOptInChannels component. */
 export interface ISelectOptInChannels {
     classNames?: SelectOptInChannelsClasses;
     handleOptInChannelsSelected?: (result: OptInChannel[]) => void;
     props?: any;
     selectedOptInChannelIDs?: string[];
 }
+/** Optional CSS class overrides for SelectOptInChannels elements. */
 export type SelectOptInChannelsClasses = {
     button?: string;
     container?: string;
@@ -17,4 +19,11 @@ export type SelectOptInChannelsClasses = {
     optInCheckboxLabel?: string;
     optionsGroup?: string;
 };
+/**
+ * Fetches active opt-in channels from GET /api/optinchannels and renders a list of checkboxes.
+ * Reports selected channels via handleOptInChannelsSelected. Supports pre-selection via selectedOptInChannelIDs.
+ *
+ * @param props - See ISelectOptInChannels
+ * @returns Section titled "Opt-in Channels" with checkboxes and loading/error state
+ */
 export declare const SelectOptInChannels: ({ classNames, handleOptInChannelsSelected, selectedOptInChannelIDs, }: ISelectOptInChannels) => import("react").JSX.Element;

package/dist/components/app/SelectOptInChannels.js

@@ -5,7 +5,13 @@ import { useEffect, useState } from 'react';
 import { useServerUrl } from '../../react-hooks/useServerUrl.js';
 import { mergeClassNames } from './helpers.js';
 import styles from './shared.module.css';
-export const SelectOptInChannels = ({ classNames = {
+/**
+ * Fetches active opt-in channels from GET /api/optinchannels and renders a list of checkboxes.
+ * Reports selected channels via handleOptInChannelsSelected. Supports pre-selection via selectedOptInChannelIDs.
+ *
+ * @param props - See ISelectOptInChannels
+ * @returns Section titled "Opt-in Channels" with checkboxes and loading/error state
+ */ export const SelectOptInChannels = ({ classNames = {
     button: '',
     container: '',
     error: '',

package/dist/components/app/SelectOptInChannels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/app/SelectOptInChannels.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { useEffect, useState } from 'react'\n\nimport type { Config, OptInChannel } from '../../copied/payload-types.js'\nimport type { GetOptInChannelsResponse } from '../../endpoints/getOptInChannels.js'\n\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n// const payload = await getPayload({\n//   config: configPromise,\n// })\n\n// Pass your config from generated types as generic\n\nexport interface ISelectOptInChannels {\n  classNames?: SelectOptInChannelsClasses\n  handleOptInChannelsSelected?: (result: OptInChannel[]) => void\n  props?: any\n  selectedOptInChannelIDs?: string[]\n}\n\nexport type SelectOptInChannelsClasses = {\n  button?: string\n  container?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n  optInCheckbox?: string\n  optInCheckboxItem?: string\n  optInCheckboxLabel?: string\n  optionsGroup?: string\n}\n\nexport const SelectOptInChannels = ({\n  classNames = {\n    button: '',\n    container: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n    optInCheckbox: '',\n    optInCheckboxItem: '',\n    optInCheckboxLabel: '',\n    optionsGroup: '',\n  },\n  handleOptInChannelsSelected,\n  selectedOptInChannelIDs,\n}: ISelectOptInChannels) => {\n  const { serverURL } = useServerUrl()\n  // const { serverURL } = { serverURL: 'http://localhost:3001' }\n  type OptInChannelCheckbox = {\n    isChecked: boolean\n  } & OptInChannel\n  const [result, setResult] = useState<any>()\n  const [allOptInChannels, setAllOptInChannels] = useState<OptInChannelCheckbox[]>([])\n\n  useEffect(() => {\n    async function verify() {\n      const sdk = new PayloadSDK<Config>({\n        baseURL: serverURL || '',\n      })\n\n      console.log('calling optinchannels endpoint')\n      const result = await sdk.request({\n        method: 'GET',\n        path: '/api/optinchannels',\n      })\n      if (result.ok) {\n        const resultJson: GetOptInChannelsResponse = await result.json()\n        setResult(resultJson)\n      } else {\n        const resultText = await result.text()\n        setResult(resultText)\n      }\n    }\n    void verify()\n  }, [serverURL])\n\n  useEffect(() => {\n    const channels = result?.optInChannels?.map((channel: OptInChannel) => ({\n      ...channel,\n      isChecked: selectedOptInChannelIDs?.includes(channel.id),\n    }))\n    setAllOptInChannels(channels)\n  }, [result, selectedOptInChannelIDs])\n\n  return (\n    <div className={mergeClassNames([styles.container, classNames.container])}>\n      <h3>Opt-in Channels</h3>\n      {!result ? (\n        <p className={mergeClassNames([styles.loading, classNames.loading])}>verifying...</p>\n      ) : (\n        <div className={mergeClassNames([styles.optionsGroup, classNames.optionsGroup])}>\n          {// Map over the tasks array to render each checkbox\n          allOptInChannels?.map((channel) => (\n            <div\n              className={mergeClassNames([styles.optInCheckboxItem, classNames.optInCheckboxItem])}\n              key={channel.id}\n            >\n              <label\n                className={mergeClassNames([\n                  styles.optInCheckboxLabel,\n                  classNames.optInCheckboxLabel,\n                ])}\n              >\n                <input\n                  aria-label={channel.title}\n                  // The checked prop is controlled by the state\n                  checked={channel.isChecked}\n                  className={mergeClassNames([styles.optInCheckbox, classNames.optInCheckbox])}\n                  // The onChange handler calls the update function with the item's ID\n                  onChange={(event) => {\n                    event.preventDefault()\n\n                    const checked = event.target.checked\n\n                    if (handleOptInChannelsSelected) {\n                      handleOptInChannelsSelected(\n                        allOptInChannels\n                          .map((channel) => ({\n                            ...channel,\n                            isChecked:\n                              channel.title == event.target.value ? checked : channel.isChecked,\n                          }))\n                          .filter((c) => c.isChecked)\n                          .map((channel) => ({ ...channel, isChecked: undefined })),\n                      )\n                    }\n                  }}\n                  type=\"checkbox\"\n                  value={channel.title}\n                />\n                {channel.title}\n              </label>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["PayloadSDK","useEffect","useState","useServerUrl","mergeClassNames","styles","SelectOptInChannels","classNames","button","container","error","form","loading","message","optInCheckbox","optInCheckboxItem","optInCheckboxLabel","optionsGroup","handleOptInChannelsSelected","selectedOptInChannelIDs","serverURL","result","setResult","allOptInChannels","setAllOptInChannels","verify","sdk","baseURL","console","log","request","method","path","ok","resultJson","json","resultText","text","channels","optInChannels","map","channel","isChecked","includes","id","div","className","h3","p","label","input","aria-label","title","checked","onChange","event","preventDefault","target","value","filter","c","undefined","type"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/app/SelectOptInChannels.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { useEffect, useState } from 'react'\n\nimport type { Config, OptInChannel } from '../../copied/payload-types.js'\nimport type { GetOptInChannelsResponse } from '../../endpoints/getOptInChannels.js'\n\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n/** Props for the SelectOptInChannels component. */\nexport interface ISelectOptInChannels {\n  classNames?: SelectOptInChannelsClasses\n  handleOptInChannelsSelected?: (result: OptInChannel[]) => void\n  props?: any\n  selectedOptInChannelIDs?: string[]\n}\n\n/** Optional CSS class overrides for SelectOptInChannels elements. */\nexport type SelectOptInChannelsClasses = {\n  button?: string\n  container?: string\n  error?: string\n  form?: string\n  loading?: string\n  message?: string\n  optInCheckbox?: string\n  optInCheckboxItem?: string\n  optInCheckboxLabel?: string\n  optionsGroup?: string\n}\n\n/**\n * Fetches active opt-in channels from GET /api/optinchannels and renders a list of checkboxes.\n * Reports selected channels via handleOptInChannelsSelected. Supports pre-selection via selectedOptInChannelIDs.\n *\n * @param props - See ISelectOptInChannels\n * @returns Section titled \"Opt-in Channels\" with checkboxes and loading/error state\n */\nexport const SelectOptInChannels = ({\n  classNames = {\n    button: '',\n    container: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n    optInCheckbox: '',\n    optInCheckboxItem: '',\n    optInCheckboxLabel: '',\n    optionsGroup: '',\n  },\n  handleOptInChannelsSelected,\n  selectedOptInChannelIDs,\n}: ISelectOptInChannels) => {\n  const { serverURL } = useServerUrl()\n  // const { serverURL } = { serverURL: 'http://localhost:3001' }\n  type OptInChannelCheckbox = {\n    isChecked: boolean\n  } & OptInChannel\n  const [result, setResult] = useState<any>()\n  const [allOptInChannels, setAllOptInChannels] = useState<OptInChannelCheckbox[]>([])\n\n  useEffect(() => {\n    async function verify() {\n      const sdk = new PayloadSDK<Config>({\n        baseURL: serverURL || '',\n      })\n\n      console.log('calling optinchannels endpoint')\n      const result = await sdk.request({\n        method: 'GET',\n        path: '/api/optinchannels',\n      })\n      if (result.ok) {\n        const resultJson: GetOptInChannelsResponse = await result.json()\n        setResult(resultJson)\n      } else {\n        const resultText = await result.text()\n        setResult(resultText)\n      }\n    }\n    void verify()\n  }, [serverURL])\n\n  useEffect(() => {\n    const channels = result?.optInChannels?.map((channel: OptInChannel) => ({\n      ...channel,\n      isChecked: selectedOptInChannelIDs?.includes(channel.id),\n    }))\n    setAllOptInChannels(channels)\n  }, [result, selectedOptInChannelIDs])\n\n  return (\n    <div className={mergeClassNames([styles.container, classNames.container])}>\n      <h3>Opt-in Channels</h3>\n      {!result ? (\n        <p className={mergeClassNames([styles.loading, classNames.loading])}>verifying...</p>\n      ) : (\n        <div className={mergeClassNames([styles.optionsGroup, classNames.optionsGroup])}>\n          {// Map over the tasks array to render each checkbox\n          allOptInChannels?.map((channel) => (\n            <div\n              className={mergeClassNames([styles.optInCheckboxItem, classNames.optInCheckboxItem])}\n              key={channel.id}\n            >\n              <label\n                className={mergeClassNames([\n                  styles.optInCheckboxLabel,\n                  classNames.optInCheckboxLabel,\n                ])}\n              >\n                <input\n                  aria-label={channel.title}\n                  // The checked prop is controlled by the state\n                  checked={channel.isChecked}\n                  className={mergeClassNames([styles.optInCheckbox, classNames.optInCheckbox])}\n                  // The onChange handler calls the update function with the item's ID\n                  onChange={(event) => {\n                    event.preventDefault()\n\n                    const checked = event.target.checked\n\n                    if (handleOptInChannelsSelected) {\n                      handleOptInChannelsSelected(\n                        allOptInChannels\n                          .map((channel) => ({\n                            ...channel,\n                            isChecked:\n                              channel.title == event.target.value ? checked : channel.isChecked,\n                          }))\n                          .filter((c) => c.isChecked)\n                          .map((channel) => ({ ...channel, isChecked: undefined })),\n                      )\n                    }\n                  }}\n                  type=\"checkbox\"\n                  value={channel.title}\n                />\n                {channel.title}\n              </label>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["PayloadSDK","useEffect","useState","useServerUrl","mergeClassNames","styles","SelectOptInChannels","classNames","button","container","error","form","loading","message","optInCheckbox","optInCheckboxItem","optInCheckboxLabel","optionsGroup","handleOptInChannelsSelected","selectedOptInChannelIDs","serverURL","result","setResult","allOptInChannels","setAllOptInChannels","verify","sdk","baseURL","console","log","request","method","path","ok","resultJson","json","resultText","text","channels","optInChannels","map","channel","isChecked","includes","id","div","className","h3","p","label","input","aria-label","title","checked","onChange","event","preventDefault","target","value","filter","c","undefined","type"],"mappings":"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"}

package/dist/components/app/Subscribe.d.ts

@@ -1,11 +1,13 @@
 import type { SubscribeResponse } from '../../endpoints/subscribe.js';
 export { SubscribeResponse };
+/** Props for the Subscribe component. */
 export interface ISubscribe {
     classNames?: SubscribeClasses;
     handleSubscribe?: (result: SubscribeResponse) => void;
     props?: any;
-    verifyUrl?: URL;
+    verifyUrl?: string | URL;
 }
+/** Optional CSS class overrides for Subscribe elements. */
 export type SubscribeClasses = {
     button?: string;
     container?: string;
@@ -16,4 +18,12 @@ export type SubscribeClasses = {
     message?: string;
     section?: string;
 };
+/**
+ * Subscribe/preferences form for authenticated subscribers. Shows SelectOptInChannels and an email
+ * input when not yet authenticated. Submits to POST /api/subscribe to update opt-ins or trigger
+ * verification email. Calls refreshSubscriber and handleSubscribe on success.
+ *
+ * @param props - See ISubscribe
+ * @returns Form with channel checkboxes, optional email field, "Save choices" button, and status message
+ */
 export declare const Subscribe: ({ classNames, handleSubscribe, verifyUrl, }: ISubscribe) => import("react").JSX.Element;