npm - payload-subscribers-plugin - Versions diffs - 0.0.8 → 0.0.10 - Mend

payload-subscribers-plugin 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/README.md +234 -24
package/dist/components/app/RequestMagicLink.d.ts +21 -4
package/dist/components/app/RequestMagicLink.js +10 -42
package/dist/components/app/RequestMagicLink.js.map +1 -1
package/dist/components/app/RequestOrSubscribe.d.ts +21 -4
package/dist/components/app/RequestOrSubscribe.js +5 -8
package/dist/components/app/RequestOrSubscribe.js.map +1 -1
package/dist/components/app/SelectOptInChannels.d.ts +26 -3
package/dist/components/app/SelectOptInChannels.js +4 -1
package/dist/components/app/SelectOptInChannels.js.map +1 -1
package/dist/components/app/Subscribe.d.ts +26 -5
package/dist/components/app/Subscribe.js +63 -81
package/dist/components/app/Subscribe.js.map +1 -1
package/dist/components/app/SubscriberMenu.d.ts +18 -6
package/dist/components/app/SubscriberMenu.js +9 -8
package/dist/components/app/SubscriberMenu.js.map +1 -1
package/dist/components/app/Unsubscribe.d.ts +45 -0
package/dist/components/app/Unsubscribe.js +91 -0
package/dist/components/app/Unsubscribe.js.map +1 -0
package/dist/components/app/VerifyMagicLink.d.ts +32 -14
package/dist/components/app/VerifyMagicLink.js +60 -114
package/dist/components/app/VerifyMagicLink.js.map +1 -1
package/dist/contexts/SubscriberProvider.js +1 -1
package/dist/contexts/SubscriberProvider.js.map +1 -1
package/dist/endpoints/requestMagicLink.d.ts +6 -2
package/dist/endpoints/requestMagicLink.js +26 -19
package/dist/endpoints/requestMagicLink.js.map +1 -1
package/dist/endpoints/subscribe.d.ts +6 -2
package/dist/endpoints/subscribe.js +29 -13
package/dist/endpoints/subscribe.js.map +1 -1
package/dist/endpoints/unsubscribe.d.ts +21 -0
package/dist/endpoints/unsubscribe.js +120 -0
package/dist/endpoints/unsubscribe.js.map +1 -0
package/dist/endpoints/verifyMagicLink.js +3 -2
package/dist/endpoints/verifyMagicLink.js.map +1 -1
package/dist/exports/ui.d.ts +2 -0
package/dist/exports/ui.js +1 -0
package/dist/exports/ui.js.map +1 -1
package/dist/helpers/token.d.ts +3 -0
package/dist/helpers/token.js +12 -2
package/dist/helpers/token.js.map +1 -1
package/dist/helpers/utilities.d.ts +1 -0
package/dist/helpers/utilities.js +6 -0
package/dist/helpers/utilities.js.map +1 -0
package/dist/hooks/useRequestMagicLink.d.ts +35 -0
package/dist/hooks/useRequestMagicLink.js +61 -0
package/dist/hooks/useRequestMagicLink.js.map +1 -0
package/dist/hooks/useSubscribe.d.ts +38 -0
package/dist/hooks/useSubscribe.js +62 -0
package/dist/hooks/useSubscribe.js.map +1 -0
package/dist/hooks/useUnsubscribe.d.ts +43 -0
package/dist/hooks/useUnsubscribe.js +86 -0
package/dist/hooks/useUnsubscribe.js.map +1 -0
package/dist/hooks/useVerifyMagicLink.d.ts +31 -0
package/dist/hooks/useVerifyMagicLink.js +74 -0
package/dist/hooks/useVerifyMagicLink.js.map +1 -0
package/dist/index.d.ts +8 -0
package/dist/index.js +16 -2
package/dist/index.js.map +1 -1
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -50,7 +50,13 @@ 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. If not provided, your payload config must have serverURL defined, and the default will be serverURL+'/unsubscribe'
+      unsubscribeURL?: string
+      // Provide your verify route. This route should include the Unsubscribe component. If not provided, your payload config must have serverURL defined, and the default will be serverURL+'/verify'
+      verifyURL?: string
+}),
   ],
 })
 ```
@@ -94,7 +100,7 @@ const Page = () => {
 }
 ```
-**_IMPORANT:_** Be sure to create a /verify route
+**_IMPORTANT:_** Be sure to create a /verify route
 ```typescript
 // verify/page.tsx
@@ -124,7 +130,7 @@ You can specify collections in the plugin options which will be amended to inclu
 #### **tokenExpiration**
-### 🟢 Collections
+### 🔵 Collections
 #### **optInChannels**
@@ -150,7 +156,7 @@ Seeded when plugin inits.
 ---
-### 🔵 Fields
+### 🔴 Fields
 #### **OptedInChannels**
@@ -160,7 +166,7 @@ This is the same field used by the plugin **collections** to amended a relationT
 ---
-### 🔴 Payload endpoints
+### 🟢 Payload endpoints
 #### **requestMagicLink**
@@ -178,19 +184,193 @@ Returns all active optInChannels data.
 Takes an email and list of optInChannel IDs, verifies them, and if the authenticated subscriber matches the email will update the channels that subscriber is opted into.
-#### TO DO: unsubscribe
+#### **unsubscribe**
-The **subscribe** endpoint will remove all optIns. But need a way to set the subscriber status to "unsubscribed"
+The **unsubscribe** endpoint sets the subscriber status to "unsubscribed".
 ---
-### 🟢 SubscriberProvider provider with useSubscriber context
+### 🔵 SubscriberProvider provider with useSubscriber context
+**SubscriberProvider** fetches and holds the current subscriber auth state (via POST /api/subscriberAuth) and exposes it to the tree. Any component that uses **useSubscriber()**, or the plugin’s client components (RequestOrSubscribe, RequestMagicLink, Subscribe, etc.), or the plugin's client hooks (useRequestMagicLink, useSubscribe, etc.) must be a descendant of this provider.
+The context value includes:
+- **subscriber** — The current authenticated subscriber (or `null` if not logged in).
+- **isLoaded** — `true` once the initial auth check has completed.
+- **permissions** — Permissions returned from the auth endpoint (if any).
+- **refreshSubscriber** — Call to refetch the current subscriber (e.g. after verifying a magic link or updating preferences).
+- **logOut** — Calls POST /api/logout and clears subscriber state.
+Wrap your app (or the part that uses subscriber features) with **SubscriberProvider**, then use **useSubscriber** in child components:
+```typescript
+// layout.tsx (or root layout)
+import { SubscriberProvider } from 'payload-subscribers-plugin/ui'
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <SubscriberProvider>
+          {children}
+        </SubscriberProvider>
+      </body>
+    </html>
+  )
+}
+```
+```typescript
+// Any descendant component
+import { useSubscriber } from 'payload-subscribers-plugin/ui'
+function MyComponent() {
+  const { isLoaded, logOut, refreshSubscriber, subscriber } = useSubscriber()
+  if (!isLoaded) return <p>Loading…</p>
+  if (!subscriber) return <p>Not signed in.</p>
+  return (
+    <div>
+      <p>Signed in as {subscriber.email}</p>
+      <button type="button" onClick={() => void refreshSubscriber()}>
+        Refresh
+      </button>
+      <button type="button" onClick={() => void logOut()}>
+        Log out
+      </button>
+    </div>
+  )
+}
+```
+**Note:** `useSubscriber` throws if used outside a `SubscriberProvider`. Ensure the provider is mounted above any component that calls it.
 ---
-### 🔵 Provides several NextJS client components ready for use in a frontend app
+### 🔴 Client hooks
-- All App Components are client components that consume hooks, server components, server functions. Including the useSubscriber context, and so the must be used within the children descendent tree of the SubscriberProvider provider.
+Use these hooks inside components that are descendants of **SubscriberProvider**. They call the plugin endpoints and expose state and callbacks for building custom UI.
+#### **useRequestMagicLink**
+Requests a magic-login link by email (POST /api/emailToken). Exposes `sendMagicLink`, plus `result` and `status` for rendering messages and loading state.
+```typescript
+import { useRequestMagicLink } from 'payload-subscribers-plugin/hooks'
+function MySignInForm() {
+  const { result, sendMagicLink, status } = useRequestMagicLink({
+    handleMagicLinkRequested: (response) => console.log('Link sent', response),
+    verifyData: `forwardURL=${typeof window !== 'undefined' ? window.location.href : ''}`,
+  })
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const email = new FormData(e.currentTarget).get('email') as string
+    void sendMagicLink(email)
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <input name="email" type="email" required />
+      <button type="submit" disabled={status === 'sending'}>
+        {status === 'sending' ? 'Sending…' : 'Request magic link'}
+      </button>
+      {result && <p className={status === 'error' ? 'error' : ''}>{result}</p>}
+    </form>
+  )
+}
+```
+#### **useVerifyMagicLink**
+Handles the verify step of the magic-link flow: reads `email` and `token` from URL search params, calls POST /api/verifyToken, and refreshes the subscriber on success. Takes no options.
+```typescript
+import { useEffect } from 'react'
+import { useVerifyMagicLink } from 'payload-subscribers-plugin/hooks'
+function VerifyPage() {
+  const { isError, isLoading, result, verify } = useVerifyMagicLink()
+  useEffect(() => {
+    void verify()
+  }, [verify])
+  if (isLoading) return <p>Verifying…</p>
+  return <p className={isError ? 'error' : ''}>{result || 'Done.'}</p>
+}
+```
+#### **useSubscribe**
+Updates the current subscriber’s opt-in channels (POST /api/subscribe). Exposes `updateSubscriptions`, plus `subscriber`, `result`, and `status`. Use with **SubscriberProvider** so `subscriber` and refresh are available.
+```typescript
+import { useSubscribe } from 'payload-subscribers-plugin/hooks'
+function MyPreferencesForm() {
+  const { result, status, subscriber, updateSubscriptions } = useSubscribe({
+    handleSubscribe: (response) => console.log('Updated', response),
+    verifyData: `forwardURL=${typeof window !== 'undefined' ? window.location.href : ''}`,
+  })
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault()
+    const channelIds = ['channel-id-1', 'channel-id-2'] // from your form state
+    void updateSubscriptions(channelIds)
+  }
+  return (
+    <form onSubmit={handleSave}>
+      {/* your channel checkboxes, etc. */}
+      <button type="submit" disabled={status === 'updating'}>
+        {status === 'updating' ? 'Saving…' : 'Save choices'}
+      </button>
+      {result && <p>{result}</p>}
+    </form>
+  )
+}
+```
+#### **useUnsubscribe**
+Calls POST /api/unsubscribe with email and token (from the hook args or from subscriber context). For use on unsubscribe pages linked from emails.
+```typescript
+import { useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { useUnsubscribe } from 'payload-subscribers-plugin/hooks'
+function UnsubscribePage() {
+  const searchParams = useSearchParams()
+  const { isError, isLoading, result, unsubscribe } = useUnsubscribe({
+    handleUnsubscribe: (response) => console.log('Unsubscribed', response),
+  })
+  // With email/hash from URL (e.g. from email link)
+  useEffect(() => {
+    const email = searchParams.get('email')
+    const hash = searchParams.get('hash')
+    if (email && hash) void unsubscribe({ email, hash })
+  }, [searchParams, unsubscribe])
+  if (isLoading) return <p>Unsubscribing…</p>
+  return <p className={isError ? 'error' : ''}>{result}</p>
+}
+```
+---
+### 🟢 Client components
+The plugin provides several NextJS client components ready for use in a frontend app
+- All App Components are client components that consume hooks, server components, server functions. Including the useSubscriber context, and so they must be used within the children descendent tree of the SubscriberProvider provider.
 - All App Components accept a **classNames** prop to specify CSS class names to add to the different parts of the component
@@ -220,14 +400,14 @@ Shows the [Subscribe](#subscribe) component to authenticated subscribers, otherw
     handleMagicLinkRequested={async (result: RequestMagicLinkResponse) => {}}
     // Called after a subscribers opt-ins have been updated. Optional
     handleSubscribe={async (result: SubscribeResponse) => {}}
-    // Provided your own button component. Optional
+    // Provide your own button component. Optional
     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.
-    verifyUrl={verifyUrl}
+    // Provide a payload of data to put on any verify link sent by either Request or Subscribe components
+    verifyData={`forwardURL=${window.location.href}`}
   />
 ```
@@ -258,8 +438,8 @@ 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}
+    // Provide a payload of data to put on any verify link sent
+    verifyData={`forwardURL=${window.location.href}`}
   />
 ```
@@ -301,13 +481,11 @@ Component that verifies a magic link using expected url parameters.
           {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 a payload of data to put on "request another" link sent
+    verifyData={`forwardURL=${window.location.href}`}
   >
     // 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">
@@ -358,8 +536,8 @@ 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}
+    // Provide a payload of data to put on any verify link sent
+    verifyData={`forwardURL=${window.location.href}`}
   />
 ```
@@ -407,7 +585,7 @@ A simple user menu, most useful for testing. Seen in the screenshots above. Incl
     button: 'customCssClassNames',
     container: 'customCssClassNames',
   }}
-  subscribeUrl={new URL('/subscribe', serverURL)}
+  subscribeURL={new URL('/subscribe', serverURL)}
  />
 ```
@@ -418,7 +596,7 @@ A simple user menu, most useful for testing. Seen in the screenshots above. Incl
   <div class="subscribers-group">
     <div class="subscribers-welcome">Welcome, {subscriber email}</div>
     <div class="subscribers-subs-link">
-      <a href="{subscribeUrl}">Manage subscriptions</a>
+      <a href="{subscribeURL}">Manage subscriptions</a>
     </div>
     <div class="subscribers-logout">
       <button class="subscribers-button" type="button">Log out</button>
@@ -427,6 +605,38 @@ A simple user menu, most useful for testing. Seen in the screenshots above. Incl
 </div>
 ```
+#### **Unsubscribe**
+A component that uses URL parameters to execute the /api/unsubscribe end point. Should be used on your own route, as specified in the **unsubscribeURL** plugin option.
+```typescript
+// Unsubscribe with a custom "resubscribe" button
+<Unsubscribe
+  classNames={{ button: 'customCss', container: 'customCss', emailInput: 'customCss' }}
+  handleUnsubscribe={handleUnsubscribe}
+>
+// <!-- children are rendered after unsubscribe is successful -->
+  <a href={'/subscribe'}>
+    <button name={'resubscribe'} type="button">
+      Resubscribe
+    </button>
+  </a>
+</Unsubscribe>
+```
+```html
+<!-- The HTML scaffolding of the built-in render layout, with global CSS classes you can use -->
+<div class="subscribers-container">
+  <!-- While loading -->
+  <p class="subscribers-loading">unsubscribing...</p>
+  <!-- After loading -->
+  <p class="subscribers-message">{result}</p>
+  <div class="subscribers-form">{children}</div>
+</div>
+```
 ## Contributing
 Community contributions are welcome! I haven't organized around that yet, so let me know if you're interested by opening an issue on the GitHub repo.

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

@@ -2,14 +2,28 @@ import type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.
 export { RequestMagicLinkResponse };
 /**
  * Props for the RequestMagicLink component.
+ *
+ * @property classNames - Optional CSS class overrides for the component elements
+ * @property handleMagicLinkRequested - Callback when a magic link is requested
+ * @property props - Optional passthrough props (reserved for future use)
+ * @property verifyData - Optional data for magic-link verification (e.g. passed from URL)
  */
 export interface IRequestMagicLink {
     classNames?: RequestMagicLinkClasses;
     handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
     props?: any;
-    verifyUrl?: string | URL;
+    verifyData?: string;
 }
-/** Optional CSS class overrides for RequestMagicLink elements. */
+/**
+ * Optional CSS class overrides for RequestMagicLink elements.
+ *
+ * @property button - Class for the submit button
+ * @property container - Class for the main container
+ * @property emailInput - Class for the email input field
+ * @property error - Class for error messages
+ * @property form - Class for the form
+ * @property message - Class for success/error message text
+ */
 export type RequestMagicLinkClasses = {
     button?: string;
     container?: string;
@@ -22,7 +36,10 @@ export type RequestMagicLinkClasses = {
  * 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
+ * @param props - Component props (see IRequestMagicLink)
+ * @param props.classNames - Optional class overrides for the component elements
+ * @param props.handleMagicLinkRequested - Callback when a magic link is requested
+ * @param props.verifyData - Optional data to send to the magic-link verification (e.g. passed from URL)
  * @returns Form UI with email input and "Request magic link" button
  */
-export declare const RequestMagicLink: ({ classNames, handleMagicLinkRequested, verifyUrl, }: IRequestMagicLink) => import("react").JSX.Element;
+export declare const RequestMagicLink: ({ classNames, handleMagicLinkRequested, verifyData, }: IRequestMagicLink) => import("react").JSX.Element;

package/dist/components/app/RequestMagicLink.js CHANGED Viewed

@@ -1,16 +1,18 @@
 '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 { useRequestMagicLink } from '../../hooks/useRequestMagicLink.js';
 import { mergeClassNames } from './helpers.js';
 import styles from './shared.module.css';
 /**
  * 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
+ * @param props - Component props (see IRequestMagicLink)
+ * @param props.classNames - Optional class overrides for the component elements
+ * @param props.handleMagicLinkRequested - Callback when a magic link is requested
+ * @param props.verifyData - Optional data to send to the magic-link verification (e.g. passed from URL)
  * @returns Form UI with email input and "Request magic link" button
  */ export const RequestMagicLink = ({ classNames = {
     button: '',
@@ -19,17 +21,12 @@ import styles from './shared.module.css';
     error: '',
     form: '',
     message: ''
-}, handleMagicLinkRequested, verifyUrl })=>{
-    if (typeof verifyUrl == 'string') {
-        verifyUrl = new URL(verifyUrl);
-    }
+}, handleMagicLinkRequested, verifyData })=>{
     const { subscriber } = useSubscriber();
-    const { serverURL } = useServerUrl();
-    const [status, setStatus] = useState('default');
-    const sdk = new PayloadSDK({
-        baseURL: serverURL || ''
+    const { result, sendMagicLink, status } = useRequestMagicLink({
+        handleMagicLinkRequested,
+        verifyData
     });
-    const [result, setResult] = useState();
     const [email, setEmail] = useState(subscriber?.email || '');
     useEffect(()=>{
         setEmail(subscriber?.email || '');
@@ -38,36 +35,7 @@ import styles from './shared.module.css';
     ]);
     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.');
-            } 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. \n${emailTokenResponseText}`);
-        }
+        await sendMagicLink(email);
     };
     return /*#__PURE__*/ _jsxs("div", {
         className: mergeClassNames([

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

	@@ -1 +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\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":"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;~~AA0BxC;;;;;;CAMC~~,GACD,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,~~IAAI,OAAOA,aAAa,UAAU;QAChCA,YAAY,IAAIC,IAAID;IACtB;IAEA,~~MAAM,~~EAAEE~~,UAAU,EAAE,~~GAAGf~~;IACvB,MAAM,~~EAAEgB~~,~~SAAS,EAAE,GAAGf;IACtB,~~MAAM,~~CAACgB~~,~~QAAQC~~,~~UAAU~~,~~GAAGnB,SAAuB;IAEnD,MAAMoB,~~MAAM,~~IAAItB~~,~~WAAmB;QACjCuB~~,~~SAASJ,aAAa~~;~~IACxB~~;IAEA,MAAM,CAACK,~~QAAQC,UAAU,GAAGvB;IAC5B,MAAM,CAACwB,~~OAAOC,SAAS,~~GAAGzB~~,~~SAASgB~~,~~YAAYQ~~,SAAS;~~IAExDzB~~,UAAU;~~QACR0B~~,~~SAAST~~,~~YAAYQ~~,SAAS;IAChC,GAAG;~~QAACR~~;KAAW;IAEf,~~MAAMU~~,eAAe,OAAOC;QAC1BA,EAAEC,cAAc;~~QAChB~~,~~MAAMC~~,~~qBAAqB,MAAMT,IAAIU,OAAO,CAAC~~;~~YAC3CC,MAAM~~;~~gBACJP;gBACAV~~,WAAWA,WAAWkB;YACxB;YACAC,QAAQ;YACRC,MAAM;QACR;QACA,IAAIL,mBAAmBM,EAAE,EAAE;YACzB,MAAMC,yBAAmD,MAAMP,mBAAmBE,IAAI;YACtF,IAAIlB,0BAA0B;gBAC5BA,yBAAyBuB;YAC3B;YACA,2CAA2C;YAC3C,MAAM,EAAEC,WAAW,EAAE3B,KAAK,EAAE,GAAG0B;YAC/B,IAAI1B,OAAO;gBACTS,UAAU;gBACVI,UAAU,CAAC,uCAAuC,EAAEb,OAAO;YAC7D,OAAO,IAAI2B,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~~;QACCC,~~WAAWtC~~,gBAAgB;YACzB;YACAC,OAAOI,SAAS;YAChBF,WAAWE,SAAS;SACrB;;~~YAEAc~~,uBACC,~~KAACoB~~;gBACCD,~~WAAWtC~~,gBAAgB;oBACzB;oBACAC,OAAOQ,OAAO;oBACdN,WAAWM,OAAO;oBAClBM,UAAU,UAAU;wBAAC;wBAAqBd,OAAOM,KAAK;wBAAEJ,WAAWI,KAAK;qBAAC,GAAG,EAAE;iBAC/E;~~0BAEAY~~;+BAGH;0BAEF,~~MAACX~~;~~gBACC8B~~,~~WAAWtC~~,gBAAgB;oBAAC;oBAAoBC,OAAOO,IAAI;oBAAEL,WAAWK,IAAI;iBAAC;~~gBAC7EsB~~,QAAO;~~gBACPU~~,~~UAAUjB~~;;kCAEV,~~KAACkB~~;wBACCC,cAAW;~~wBACXJ~~,~~WAAWtC~~,gBAAgB;4BACzB;4BACAC,OAAOK,UAAU;4BACjBH,WAAWG,UAAU;yBACtB;~~wBACDqC~~,UAAU,~~CAACnB~~,IAAqCF,SAASE,~~EAAEoB~~,MAAM,CAACC,KAAK;wBACvEC,aAAY;wBACZC,MAAK;wBACLF,~~OAAOxB~~;;kCAET,~~KAACjB~~;~~wBACCkC~~,~~WAAWtC~~,gBAAgB;4BAAC;4BAAsBC,OAAOG,MAAM;4BAAED,WAAWC,MAAM;yBAAC;~~wBACnF2C~~,MAAK;kCACN;;;;;;AAMT,EAAC"}
1	+ {"version":3,"sources":["../../../src/components/app/RequestMagicLink.tsx"],"sourcesContent":["'use client'\n\nimport { type ChangeEvent, type SubmitEvent, useEffect, useState } from 'react'\n\nimport type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport { useRequestMagicLink } from '../../hooks/useRequestMagicLink.js'\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\nexport { RequestMagicLinkResponse }\n\n/*\n Props for the RequestMagicLink component.\n \n @property classNames - Optional CSS class overrides for the component elements\n * @property handleMagicLinkRequested - Callback when a magic link is requested\n * @property props - Optional passthrough props (reserved for future use)\n * @property verifyData - Optional data for magic-link verification (e.g. passed from URL)\n /\nexport interface IRequestMagicLink {\n classNames?: RequestMagicLinkClasses\n handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n props?: any\n verifyData?: string\n}\n\n/\n Optional CSS class overrides for RequestMagicLink elements.\n \n @property button - Class for the submit button\n * @property container - Class for the main container\n * @property emailInput - Class for the email input field\n * @property error - Class for error messages\n * @property form - Class for the form\n * @property message - Class for success/error message text\n /\nexport type RequestMagicLinkClasses = {\n button?: string\n container?: string\n emailInput?: string\n error?: string\n form?: string\n message?: string\n}\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 - Component props (see IRequestMagicLink)\n * @param props.classNames - Optional class overrides for the component elements\n * @param props.handleMagicLinkRequested - Callback when a magic link is requested\n * @param props.verifyData - Optional data to send to the magic-link verification (e.g. passed from URL)\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 verifyData,\n}: IRequestMagicLink) => {\n const { subscriber } = useSubscriber()\n const { result, sendMagicLink, status } = useRequestMagicLink({\n handleMagicLinkRequested,\n verifyData,\n })\n\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\n await sendMagicLink(email)\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","useRequestMagicLink","mergeClassNames","styles","RequestMagicLink","classNames","button","container","emailInput","error","form","message","handleMagicLinkRequested","verifyData","subscriber","result","sendMagicLink","status","email","setEmail","handleSubmit","e","preventDefault","div","className","p","method","onSubmit","input","aria-label","onChange","target","value","placeholder","type"],"mappings":"AAAA;;AAEA,SAA6CA,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,SAASC,aAAa,QAAQ,uCAAsC;AACpE,SAASC,mBAAmB,QAAQ,qCAAoC;AACxE,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAOC,YAAY,sBAAqB;AAsCxC;;;;;;;;;CASC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa;IACXC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,SAAS;AACX,CAAC,EACDC,wBAAwB,EACxBC,UAAU,EACQ;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGd;IACvB,MAAM,EAAEe,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAE,GAAGhB,oBAAoB;QAC5DW;QACAC;IACF;IAEA,MAAM,CAACK,OAAOC,SAAS,GAAGpB,SAASe,YAAYI,SAAS;IAExDpB,UAAU;QACRqB,SAASL,YAAYI,SAAS;IAChC,GAAG;QAACJ;KAAW;IAEf,MAAMM,eAAe,OAAOC;QAC1BA,EAAEC,cAAc;QAEhB,MAAMN,cAAcE;IACtB;IACA,qBACE,MAACK;QACCC,WAAWtB,gBAAgB;YACzB;YACAC,OAAOI,SAAS;YAChBF,WAAWE,SAAS;SACrB;;YAEAQ,uBACC,KAACU;gBACCD,WAAWtB,gBAAgB;oBACzB;oBACAC,OAAOQ,OAAO;oBACdN,WAAWM,OAAO;oBAClBM,UAAU,UAAU;wBAAC;wBAAqBd,OAAOM,KAAK;wBAAEJ,WAAWI,KAAK;qBAAC,GAAG,EAAE;iBAC/E;0BAEAM;+BAGH;0BAEF,MAACL;gBACCc,WAAWtB,gBAAgB;oBAAC;oBAAoBC,OAAOO,IAAI;oBAAEL,WAAWK,IAAI;iBAAC;gBAC7EgB,QAAO;gBACPC,UAAUP;;kCAEV,KAACQ;wBACCC,cAAW;wBACXL,WAAWtB,gBAAgB;4BACzB;4BACAC,OAAOK,UAAU;4BACjBH,WAAWG,UAAU;yBACtB;wBACDsB,UAAU,CAACT,IAAqCF,SAASE,EAAEU,MAAM,CAACC,KAAK;wBACvEC,aAAY;wBACZC,MAAK;wBACLF,OAAOd;;kCAET,KAACZ;wBACCkB,WAAWtB,gBAAgB;4BAAC;4BAAsBC,OAAOG,MAAM;4BAAED,WAAWC,MAAM;yBAAC;wBACnF4B,MAAK;kCACN;;;;;;AAMT,EAAC"}

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

@@ -2,14 +2,30 @@ import { type RequestMagicLinkResponse, type SubscribeResponse } from '../../exp
 export type { RequestMagicLinkResponse, SubscribeResponse };
 /**
  * Props for the RequestOrSubscribe component.
+ *
+ * @property classNames - Optional CSS class overrides for the component and its children
+ * @property handleMagicLinkRequested - Callback when a magic link is requested (no subscriber yet)
+ * @property handleSubscribe - Callback when subscription/opt-ins are updated (subscriber present)
+ * @property verifyData - Optional data passed to child components (e.g. for magic-link verification)
  */
 export interface IRequestOrSubscribe {
     classNames?: RequestOrSubscribeClasses;
     handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void;
     handleSubscribe?: (result: SubscribeResponse) => void;
-    verifyUrl?: string | URL;
+    verifyData?: string;
 }
-/** Optional CSS class overrides for RequestOrSubscribe and its child components. */
+/**
+ * Optional CSS class overrides for RequestOrSubscribe and its child components.
+ *
+ * @property button - Class for buttons
+ * @property container - Class for the main container
+ * @property emailInput - Class for the email input field
+ * @property error - Class for error messages
+ * @property form - Class for forms
+ * @property loading - Class for loading state
+ * @property message - Class for message text
+ * @property section - Class for section wrappers
+ */
 export type RequestOrSubscribeClasses = {
     button?: string;
     container?: string;
@@ -24,10 +40,11 @@ export type RequestOrSubscribeClasses = {
  * 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 - Component props (see IRequestOrSubscribe)
  * @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
+ * @param props.verifyData - Optional data passed to child components (e.g. for magic-link verification)
  * @returns Either Subscribe or RequestMagicLink based on subscriber context
  */
-export declare function RequestOrSubscribe({ classNames, handleMagicLinkRequested, handleSubscribe, verifyUrl, }: IRequestOrSubscribe): import("react").JSX.Element;
+export declare function RequestOrSubscribe({ classNames, handleMagicLinkRequested, handleSubscribe, verifyData, }: IRequestOrSubscribe): import("react").JSX.Element;

package/dist/components/app/RequestOrSubscribe.js CHANGED Viewed

@@ -6,10 +6,11 @@ import { RequestMagicLink, Subscribe } from '../../exports/ui.js';
  * 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 - Component props (see IRequestOrSubscribe)
  * @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
+ * @param props.verifyData - Optional data passed to child components (e.g. for magic-link verification)
  * @returns Either Subscribe or RequestMagicLink based on subscriber context
  */ export function RequestOrSubscribe({ classNames = {
     button: '',
@@ -20,21 +21,17 @@ import { RequestMagicLink, Subscribe } from '../../exports/ui.js';
     loading: '',
     message: '',
     section: ''
-}, handleMagicLinkRequested, handleSubscribe, verifyUrl }) {
-    if (typeof verifyUrl == 'string') {
-        verifyUrl = new URL(verifyUrl);
-    }
+}, handleMagicLinkRequested, handleSubscribe, verifyData }) {
     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,
-            verifyUrl: verifyUrl
+            verifyData: verifyData
         }) : /*#__PURE__*/ _jsx(RequestMagicLink, {
             classNames: classNames,
             handleMagicLinkRequested: handleMagicLinkRequested,
-            verifyUrl: verifyUrl
+            verifyData: verifyData
         })
     });
 }

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

	@@ -1 +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\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~~"}
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\n/*\n Props for the RequestOrSubscribe component.\n \n @property classNames - Optional CSS class overrides for the component and its children\n * @property handleMagicLinkRequested - Callback when a magic link is requested (no subscriber yet)\n * @property handleSubscribe - Callback when subscription/opt-ins are updated (subscriber present)\n * @property verifyData - Optional data passed to child components (e.g. for magic-link verification)\n /\nexport interface IRequestOrSubscribe {\n classNames?: RequestOrSubscribeClasses\n handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void\n handleSubscribe?: (result: SubscribeResponse) => void\n verifyData?: string\n}\n\n/\n Optional CSS class overrides for RequestOrSubscribe and its child components.\n \n @property button - Class for buttons\n * @property container - Class for the main container\n * @property emailInput - Class for the email input field\n * @property error - Class for error messages\n * @property form - Class for forms\n * @property loading - Class for loading state\n * @property message - Class for message text\n * @property section - Class for section wrappers\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\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 - Component props (see IRequestOrSubscribe)\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.verifyData - Optional data passed to child components (e.g. for magic-link verification)\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 verifyData,\n}: IRequestOrSubscribe) {\n const { subscriber } = useSubscriber()\n\n return (\n <>\n {subscriber ? (\n <Subscribe\n classNames={classNames}\n handleSubscribe={handleSubscribe}\n verifyData={verifyData}\n />\n ) : (\n <RequestMagicLink\n classNames={classNames}\n handleMagicLinkRequested={handleMagicLinkRequested}\n verifyData={verifyData}\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","verifyData","subscriber"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,uCAAsC;AACpE,SACEC,gBAAgB,EAEhBC,SAAS,QAEJ,sBAAqB;AA0C5B;;;;;;;;;;CAUC,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,UAAU,EACU;IACpB,MAAM,EAAEC,UAAU,EAAE,GAAGhB;IAEvB,qBACE;kBACGgB,2BACC,KAACd;YACCE,YAAYA;YACZU,iBAAiBA;YACjBC,YAAYA;2BAGd,KAACd;YACCG,YAAYA;YACZS,0BAA0BA;YAC1BE,YAAYA;;;AAMtB"}