payload-subscribers-plugin 0.0.6 → 0.0.8

package/README.md

@@ -3,16 +3,16 @@
 A plugin to manage subscribers and the "channels" they can subscribe to.
 
 This includes ways to allow your subscribers to:
-* Sign up or sign in by requesting a magic link email
-* Verify the magic link to authenticate
-* Opt in or out of "opt-in channels"
+
+- Sign up or sign in by requesting a magic link email
+- Verify the magic link to authenticate
+- Opt in or out of "opt-in channels"
 
 You manage the opt-in channels via the Payload admin.
 
 The plugin relies on your email adapter configured in your payload config to send emails.
 
-That is all this plugin does currently. Potential features might include email authoring and send scheduler or simple CRM features. 
-
+That is all this plugin does currently. Potential features might include email authoring and send scheduler or simple CRM features.
 
 ## Installation
 
@@ -44,7 +44,7 @@ export default buildConfig({
       // Specify the collection to use as the subscribers collection
       //  - Optional. If not specified, the plugin will add a 'subscribers' collection.
       //  - Sets auth if not already
-      //  - Adds (or overrides) fields: email, firstName, status, optIns, 
+      //  - Adds (or overrides) fields: email, firstName, status, optIns,
       //    verificationToken, verificationTokenExpires, and source
       subscribersCollectionSlug?: CollectionSlug
 
@@ -202,7 +202,9 @@ Shows the [Subscribe](#subscribe) component to authenticated subscribers, otherw
 </div> -->
 
 ```typescript
-  <RequestMagicLink
+  <RequestOrSubscribe
+    // Provide the URL the user should go to after clicking the link in the email and having it verified
+    afterVerifyUrl={new URL(window.href)}
     // Provide your own global class names to add to the component elements. Optional
     classNames={{
       button: 'customCssClassNames',
@@ -224,6 +226,8 @@ Shows the [Subscribe](#subscribe) component to authenticated subscribers, otherw
         {text}
       </button>
     }
+    // Provide the URL to your route that has the VerifyMagicLink component on it.
+    verifyUrl={verifyUrl}
   />
 ```
 
@@ -235,6 +239,8 @@ Form to input email address and get a magic link email sent.
 
 ```typescript
   <RequestMagicLink
+    // Provide the URL the user should go to after clicking the link in the email and having it verified
+    afterVerifyUrl={new URL(window.href)}
     // Provide your own global class names to add to the component elements. Optional
     classNames={{
       button: 'customCssClassNames',
@@ -252,9 +258,22 @@ Form to input email address and get a magic link email sent.
         {text}
       </button>
     }
+    // Provide the URL to your route that has the VerifyMagicLink component on it.
+    verifyUrl={verifyUrl}
   />
 ```
 
+```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.
@@ -277,20 +296,37 @@ Component that verifies a magic link using expected url parameters.
     // Called after a magic link has been verified. Optional
     handleMagicLinkVerified={async (result: RequestMagicLinkResponse) => {}}
     // Provided your own button component. Optional
-    renderButton={({ name, forwardUrl, onClick, text }) =>
-      forwardUrl ? (
-        <a href={forwardUrl}>
-          <button name={name} type="button">
-            {text}
-          </button>
-        </a>
-      ) : (
+    renderButton={({ name, onClick, text }) =>
         <button name={name} onClick={onClick} type="button">
           {text}
         </button>
-      )
     }
-  />
+    // Provide the URL to your route that has the VerifyMagicLink component on it.
+    // Used when this VerifyMagicLink component provides an option to request another link
+    // when verifying the current one fails.
+    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
+    // as a search param, which your route can then use here.
+    <a href={forwardUrl}>
+      <button className={'customCss'} name={'continue'} type="button">
+        Continue
+      </button>
+    </a>
+  </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**
@@ -301,6 +337,8 @@ Allows a subscriber to select from among all active optInChannels.
 
 ```typescript
   <Subscribe
+    // Provide the URL the user should go to after clicking the link in the email and having it verified
+    afterVerifyUrl={new URL(window.href)}
     // Provide your own global class names to add to the component elements. Optional
     classNames={{
       button: 'customCssClassNames',
@@ -320,9 +358,43 @@ Allows a subscriber to select from among all active optInChannels.
         {text}
       </button>
     }
+    // Provide the URL to your route that has the VerifyMagicLink component on it.
+    verifyUrl={verifyUrl}
   />
 ```
 
+```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.
@@ -330,10 +402,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,10 +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?: string | URL;
 }
+/** Optional CSS class overrides for RequestMagicLink elements. */
 export type RequestMagicLinkClasses = {
     button?: string;
     container?: string;
@@ -13,4 +18,11 @@ export type RequestMagicLinkClasses = {
     form?: string;
     message?: string;
 };
-export declare const RequestMagicLink: ({ classNames, handleMagicLinkRequested, }: IRequestMagicLink) => import("react").JSX.Element;
+/**
+ * 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

@@ -6,14 +6,23 @@ 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: '',
     error: '',
     form: '',
     message: ''
-}, handleMagicLinkRequested })=>{
+}, handleMagicLinkRequested, verifyUrl })=>{
+    if (typeof verifyUrl == 'string') {
+        verifyUrl = new URL(verifyUrl);
+    }
     const { subscriber } = useSubscriber();
     const { serverURL } = useServerUrl();
     const [status, setStatus] = useState('default');
@@ -29,11 +38,10 @@ export const RequestMagicLink = ({ classNames = {
     ]);
     const handleSubmit = async (e)=>{
         e.preventDefault();
-        const forwardUrl = window.location.pathname + '?now=' + new Date().toISOString();
         const emailTokenResponse = await sdk.request({
             json: {
                 email,
-                forwardUrl
+                verifyUrl: verifyUrl?.href
             },
             method: 'POST',
             path: '/api/emailToken'
@@ -63,15 +71,18 @@ export const RequestMagicLink = ({ classNames = {
     };
     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
                     ] : []
@@ -80,6 +91,7 @@ export const RequestMagicLink = ({ classNames = {
             }) : /*#__PURE__*/ _jsx(_Fragment, {}),
             /*#__PURE__*/ _jsxs("form", {
                 className: mergeClassNames([
+                    'subscribers-form',
                     styles.form,
                     classNames.form
                 ]),
@@ -89,6 +101,7 @@ export const RequestMagicLink = ({ classNames = {
                     /*#__PURE__*/ _jsx("input", {
                         "aria-label": "enter your email",
                         className: mergeClassNames([
+                            'subscribers-emailInput',
                             styles.emailInput,
                             classNames.emailInput
                         ]),
@@ -99,6 +112,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}\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}: IRequestMagicLink) => {\n  const { subscriber } = useSubscriber()\n  const { serverURL } = useServerUrl()\n\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 forwardUrl = window.location.pathname + '?now=' + new Date().toISOString()\n    const emailTokenResponse = await sdk.request({\n      json: {\n        email,\n        forwardUrl,\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","subscriber","serverURL","status","setStatus","sdk","baseURL","result","setResult","email","setEmail","handleSubmit","e","preventDefault","forwardUrl","window","location","pathname","Date","toISOString","emailTokenResponse","request","json","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;AAqBxC,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACN;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGb;IACvB,MAAM,EAAEc,SAAS,EAAE,GAAGb;IAEtB,MAAM,CAACc,QAAQC,UAAU,GAAGjB,SAAuB;IAEnD,MAAMkB,MAAM,IAAIpB,WAAmB;QACjCqB,SAASJ,aAAa;IACxB;IAEA,MAAM,CAACK,QAAQC,UAAU,GAAGrB;IAC5B,MAAM,CAACsB,OAAOC,SAAS,GAAGvB,SAASc,YAAYQ,SAAS;IAExDvB,UAAU;QACRwB,SAAST,YAAYQ,SAAS;IAChC,GAAG;QAACR;KAAW;IAEf,MAAMU,eAAe,OAAOC;QAC1BA,EAAEC,cAAc;QAChB,MAAMC,aAAaC,OAAOC,QAAQ,CAACC,QAAQ,GAAG,UAAU,IAAIC,OAAOC,WAAW;QAC9E,MAAMC,qBAAqB,MAAMf,IAAIgB,OAAO,CAAC;YAC3CC,MAAM;gBACJb;gBACAK;YACF;YACAS,QAAQ;YACRC,MAAM;QACR;QACA,IAAIJ,mBAAmBK,EAAE,EAAE;YACzB,MAAMC,yBAAmD,MAAMN,mBAAmBE,IAAI;YACtF,IAAItB,0BAA0B;gBAC5BA,yBAAyB0B;YAC3B;YACA,2CAA2C;YAC3C,MAAM,EAAEC,WAAW,EAAE9B,KAAK,EAAE,GAAG6B;YAC/B,IAAI7B,OAAO;gBACTO,UAAU;gBACVI,UAAU,CAAC,uCAAuC,EAAEX,OAAO;YAC7D,OAAO,IAAI8B,aAAa;gBACtBvB,UAAU;gBACVI,UAAU;YACZ,OAAO;gBACLJ,UAAU;gBACVI,UAAU,CAAC,oDAAoD,CAAC;YAClE;QACF,OAAO;YACL,MAAMoB,yBAAyB,MAAMR,mBAAmBS,IAAI;YAC5DzB,UAAU;YACVI,UAAU,CAAC,sCAAsC,EAAEoB,wBAAwB;QAC7E;IACF;IAEA,qBACE,MAACE;QAAIC,WAAWzC,gBAAgB;YAACC,OAAOI,SAAS;YAAEF,WAAWE,SAAS;SAAC;;YACrEY,uBACC,KAACyB;gBACCD,WAAWzC,gBAAgB;oBACzBC,OAAOQ,OAAO;oBACdN,WAAWM,OAAO;oBAClBI,UAAU,UAAU;wBAACZ,OAAOM,KAAK;wBAAEJ,WAAWI,KAAK;qBAAC,GAAG,EAAE;iBAC1D;0BAEAU;+BAGH;0BAEF,MAACT;gBACCiC,WAAWzC,gBAAgB;oBAACC,OAAOO,IAAI;oBAAEL,WAAWK,IAAI;iBAAC;gBACzDyB,QAAO;gBACPU,UAAUtB;;kCAEV,KAACuB;wBACCC,cAAW;wBACXJ,WAAWzC,gBAAgB;4BAACC,OAAOK,UAAU;4BAAEH,WAAWG,UAAU;yBAAC;wBACrEwC,UAAU,CAACxB,IAAqCF,SAASE,EAAEyB,MAAM,CAACC,KAAK;wBACvEC,aAAY;wBACZC,MAAK;wBACLF,OAAO7B;;kCAET,KAACf;wBAAOqC,WAAWzC,gBAAgB;4BAACC,OAAOG,MAAM;4BAAED,WAAWC,MAAM;yBAAC;wBAAG8C,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  if (typeof verifyUrl == 'string') {\n    verifyUrl = new URL(verifyUrl)\n  }\n\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\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":["PayloadSDK","useEffect","useState","useSubscriber","useServerUrl","mergeClassNames","styles","RequestMagicLink","classNames","button","container","emailInput","error","form","message","handleMagicLinkRequested","verifyUrl","URL","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":"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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,8 +20,14 @@ export type RequestOrSubscribeClasses = {
     message?: string;
     section?: string;
 };
-export declare function RequestOrSubscribe({ classNames, handleMagicLinkRequested, handleSubscribe, }: {
-    classNames?: RequestOrSubscribeClasses;
-    handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
-    handleSubscribe?: (result: SubscribeResponse) => void;
-}): 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: '',
@@ -11,16 +20,21 @@ export function RequestOrSubscribe({ classNames = {
     loading: '',
     message: '',
     section: ''
-}, handleMagicLinkRequested, handleSubscribe }) {
+}, 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, {
         children: subscriber ? /*#__PURE__*/ _jsx(Subscribe, {
             classNames: classNames,
-            handleSubscribe: handleSubscribe
+            handleSubscribe: handleSubscribe,
+            verifyUrl: verifyUrl
         }) : /*#__PURE__*/ _jsx(RequestMagicLink, {
             classNames: classNames,
-            handleMagicLinkRequested: handleMagicLinkRequested
+            handleMagicLinkRequested: handleMagicLinkRequested,
+            verifyUrl: verifyUrl
         })
     });
 }

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

@@ -1 +1 @@
-{"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\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}: {\n  classNames?: RequestOrSubscribeClasses\n  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n  handleSubscribe?: (result: SubscribeResponse) => void\n}) {\n  const { subscriber } = useSubscriber()\n\n  // Example: Conditionally render something or pass the state to children\n  return (\n    <>\n      {subscriber ? (\n        <Subscribe classNames={classNames} handleSubscribe={handleSubscribe} />\n      ) : (\n        <RequestMagicLink\n          classNames={classNames}\n          handleMagicLinkRequested={handleMagicLinkRequested}\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","subscriber"],"mappings":"AAAA;;AAEA,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,EAKhB;IACC,MAAM,EAAEC,UAAU,EAAE,GAAGf;IAEvB,wEAAwE;IACxE,qBACE;kBACGe,2BACC,KAACb;YAAUE,YAAYA;YAAYU,iBAAiBA;2BAEpD,KAACb;YACCG,YAAYA;YACZS,0BAA0BA;;;AAMpC"}
+{"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,10 +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?: string | URL;
 }
+/** Optional CSS class overrides for Subscribe elements. */
 export type SubscribeClasses = {
     button?: string;
     container?: string;
@@ -15,4 +18,12 @@ export type SubscribeClasses = {
     message?: string;
     section?: string;
 };
-export declare const Subscribe: ({ classNames, handleSubscribe, }: ISubscribe) => import("react").JSX.Element;
+/**
+ * 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;