payload-subscribers-plugin 0.0.1

package/dist/components/app/RequestMagicLink.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PayloadSDK } from '@payloadcms/sdk';
+import { useEffect, useState } from 'react';
+import { useSubscriber } from '../../contexts/SubscriberProvider.js';
+import { useServerUrl } from '../../react-hooks/useServerUrl.js';
+import { mergeClassNames } from './helpers.js';
+import styles from './shared.module.css';
+export const RequestMagicLink = ({ classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    message: ''
+}, handleMagicLinkRequested })=>{
+    const { subscriber } = useSubscriber();
+    const { serverURL } = useServerUrl();
+    const [status, setStatus] = useState('default');
+    const sdk = new PayloadSDK({
+        baseURL: serverURL || ''
+    });
+    const [result, setResult] = useState();
+    const [email, setEmail] = useState(subscriber?.email || '');
+    useEffect(()=>{
+        setEmail(subscriber?.email || '');
+    }, [
+        subscriber
+    ]);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        const forwardUrl = window.location.pathname + '?now=' + new Date().toISOString();
+        const emailTokenResponse = await sdk.request({
+            json: {
+                email,
+                forwardUrl
+            },
+            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}`);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: mergeClassNames([
+            styles.container,
+            classNames.container
+        ]),
+        children: [
+            result ? /*#__PURE__*/ _jsx("p", {
+                className: mergeClassNames([
+                    styles.message,
+                    classNames.message,
+                    status == 'error' ? [
+                        styles.error,
+                        classNames.error
+                    ] : []
+                ]),
+                children: result
+            }) : /*#__PURE__*/ _jsx(_Fragment, {}),
+            /*#__PURE__*/ _jsxs("form", {
+                className: mergeClassNames([
+                    styles.form,
+                    classNames.form
+                ]),
+                method: "POST",
+                onSubmit: handleSubmit,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        "aria-label": "enter your email",
+                        className: mergeClassNames([
+                            styles.emailInput,
+                            classNames.emailInput
+                        ]),
+                        onChange: (e)=>setEmail(e.target.value),
+                        placeholder: "enter your email",
+                        type: "email",
+                        value: email
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: mergeClassNames([
+                            styles.button,
+                            classNames.button
+                        ]),
+                        type: "submit",
+                        children: "Request magic link"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=RequestMagicLink.js.map

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

@@ -0,0 +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"}

package/dist/components/app/RequestMagicLink.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}

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

@@ -0,0 +1,17 @@
+import { type RequestMagicLinkResponse, type SubscribeResponse } from '../../exports/ui.js';
+export type { RequestMagicLinkResponse, SubscribeResponse };
+export type RequestOrSubscribeClasses = {
+    button?: string;
+    container?: string;
+    emailInput?: string;
+    error?: string;
+    form?: string;
+    loading?: string;
+    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;

package/dist/components/app/RequestOrSubscribe.js

@@ -0,0 +1,28 @@
+'use client';
+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 = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    section: ''
+}, handleMagicLinkRequested, handleSubscribe }) {
+    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
+        }) : /*#__PURE__*/ _jsx(RequestMagicLink, {
+            classNames: classNames,
+            handleMagicLinkRequested: handleMagicLinkRequested
+        })
+    });
+}
+
+//# sourceMappingURL=RequestOrSubscribe.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+import type { OptInChannel } from '../../copied/payload-types.js';
+export interface ISelectOptInChannels {
+    classNames?: SelectOptInChannelsClasses;
+    handleOptInChannelsSelected?: (result: OptInChannel[]) => void;
+    props?: any;
+    selectedOptInChannelIDs?: string[];
+}
+export type SelectOptInChannelsClasses = {
+    button?: string;
+    container?: string;
+    error?: string;
+    form?: string;
+    loading?: string;
+    message?: string;
+    optInCheckbox?: string;
+    optInCheckboxItem?: string;
+    optInCheckboxLabel?: string;
+    optionsGroup?: string;
+};
+export declare const SelectOptInChannels: ({ classNames, handleOptInChannelsSelected, selectedOptInChannelIDs, }: ISelectOptInChannels) => import("react").JSX.Element;

package/dist/components/app/SelectOptInChannels.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PayloadSDK } from '@payloadcms/sdk';
+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 = {
+    button: '',
+    container: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    optInCheckbox: '',
+    optInCheckboxItem: '',
+    optInCheckboxLabel: '',
+    optionsGroup: ''
+}, handleOptInChannelsSelected, selectedOptInChannelIDs })=>{
+    const { serverURL } = useServerUrl();
+    const [result, setResult] = useState();
+    const [allOptInChannels, setAllOptInChannels] = useState([]);
+    useEffect(()=>{
+        async function verify() {
+            const sdk = new PayloadSDK({
+                baseURL: serverURL || ''
+            });
+            console.log('calling optinchannels endpoint');
+            const result = await sdk.request({
+                method: 'GET',
+                path: '/api/optinchannels'
+            });
+            if (result.ok) {
+                const resultJson = await result.json();
+                setResult(resultJson);
+            } else {
+                const resultText = await result.text();
+                setResult(resultText);
+            }
+        }
+        void verify();
+    }, [
+        serverURL
+    ]);
+    useEffect(()=>{
+        const channels = result?.optInChannels?.map((channel)=>({
+                ...channel,
+                isChecked: selectedOptInChannelIDs?.includes(channel.id)
+            }));
+        setAllOptInChannels(channels);
+    }, [
+        result,
+        selectedOptInChannelIDs
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: mergeClassNames([
+            styles.container,
+            classNames.container
+        ]),
+        children: [
+            /*#__PURE__*/ _jsx("h3", {
+                children: "Opt-in Channels"
+            }),
+            !result ? /*#__PURE__*/ _jsx("p", {
+                className: mergeClassNames([
+                    styles.loading,
+                    classNames.loading
+                ]),
+                children: "verifying..."
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: mergeClassNames([
+                    styles.optionsGroup,
+                    classNames.optionsGroup
+                ]),
+                children: allOptInChannels?.map((channel)=>/*#__PURE__*/ _jsx("div", {
+                        className: mergeClassNames([
+                            styles.optInCheckboxItem,
+                            classNames.optInCheckboxItem
+                        ]),
+                        children: /*#__PURE__*/ _jsxs("label", {
+                            className: mergeClassNames([
+                                styles.optInCheckboxLabel,
+                                classNames.optInCheckboxLabel
+                            ]),
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    "aria-label": channel.title,
+                                    // The checked prop is controlled by the state
+                                    checked: channel.isChecked,
+                                    className: mergeClassNames([
+                                        styles.optInCheckbox,
+                                        classNames.optInCheckbox
+                                    ]),
+                                    // The onChange handler calls the update function with the item's ID
+                                    onChange: (event)=>{
+                                        event.preventDefault();
+                                        const checked = event.target.checked;
+                                        if (handleOptInChannelsSelected) {
+                                            handleOptInChannelsSelected(allOptInChannels.map((channel)=>({
+                                                    ...channel,
+                                                    isChecked: channel.title == event.target.value ? checked : channel.isChecked
+                                                })).filter((c)=>c.isChecked).map((channel)=>({
+                                                    ...channel,
+                                                    isChecked: undefined
+                                                })));
+                                        }
+                                    },
+                                    type: "checkbox",
+                                    value: channel.title
+                                }),
+                                channel.title
+                            ]
+                        })
+                    }, channel.id))
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=SelectOptInChannels.js.map

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

@@ -0,0 +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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"}

package/dist/components/app/SelectOptInChannels.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}

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

@@ -0,0 +1,18 @@
+import type { SubscribeResponse } from '../../endpoints/subscribe.js';
+export { SubscribeResponse };
+export interface ISubscribe {
+    classNames?: SubscribeClasses;
+    handleSubscribe?: (result: SubscribeResponse) => void;
+    props?: any;
+}
+export type SubscribeClasses = {
+    button?: string;
+    container?: string;
+    emailInput?: string;
+    error?: string;
+    form?: string;
+    loading?: string;
+    message?: string;
+    section?: string;
+};
+export declare const Subscribe: ({ classNames, handleSubscribe, }: ISubscribe) => import("react").JSX.Element;

package/dist/components/app/Subscribe.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PayloadSDK } from '@payloadcms/sdk';
+import { useEffect, useState } from 'react';
+import { useSubscriber } from '../../contexts/SubscriberProvider.js';
+import { useServerUrl } from '../../react-hooks/useServerUrl.js';
+import { mergeClassNames } from './helpers.js';
+import { SelectOptInChannels } from './SelectOptInChannels.js';
+import styles from './shared.module.css';
+export const Subscribe = ({ classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    section: ''
+}, handleSubscribe })=>{
+    const { refreshSubscriber, subscriber } = useSubscriber();
+    const { serverURL } = useServerUrl();
+    const sdk = new PayloadSDK({
+        baseURL: serverURL || ''
+    });
+    const flattenChannels = (channels)=>{
+        if (!channels) {
+            return [];
+        }
+        return channels.map((channel)=>typeof channel == 'string' ? channel : channel.id);
+    };
+    const [status, setStatus] = useState('default');
+    const [result, setResult] = useState();
+    const [email, setEmail] = useState(subscriber ? subscriber.email : '');
+    const [selectedChannelIDs, setSelectedChannelIDs] = useState(()=>flattenChannels(subscriber?.optIns));
+    useEffect(()=>{
+        setEmail(subscriber?.email || '');
+        setSelectedChannelIDs(flattenChannels(subscriber?.optIns));
+    }, [
+        subscriber
+    ]);
+    const handleOptInChannelsSelected = (result)=>{
+        setSelectedChannelIDs(result.map((channel)=>channel.id));
+    };
+    const handleSubmit = async ()=>{
+        const subscribeResult = await sdk.request({
+            json: {
+                afterVerifyUrl: window.location.pathname + '?now=' + new Date().toISOString(),
+                email,
+                optIns: selectedChannelIDs
+            },
+            method: 'POST',
+            path: '/api/subscribe'
+        });
+        if (subscribeResult.ok) {
+            const resultJson = await subscribeResult.json();
+            // // When subscriber optIns are updated...
+            // | {
+            //     email: string
+            //     now: string
+            //     optIns: string[]
+            //   }
+            // // When a verify link is emailed...
+            // | {
+            //     emailResult: any
+            //     now: string
+            //   }
+            // // When any error occurs...
+            // | {
+            //     error: string
+            //     now: string
+            //   }
+            // @ts-expect-error Silly type confusion
+            const { emailResult, error } = resultJson;
+            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 if (email) {
+                setStatus('updated');
+                setResult(`You're subscriptions have been updated.`);
+            } else {
+                setStatus('error');
+                setResult(`An error occured. Please try again. \nResult unknown`);
+            }
+            refreshSubscriber();
+            if (handleSubscribe) {
+                handleSubscribe(resultJson);
+            }
+        } else {
+            // const resultText = await subscribeResult.text()
+            setStatus('error');
+            setResult(`An error occured. Please try again. \nResult unknown`);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: mergeClassNames([
+            styles.container,
+            classNames.container
+        ]),
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: "Subscribe"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: mergeClassNames([
+                    styles.section,
+                    classNames.section
+                ]),
+                children: /*#__PURE__*/ _jsx(SelectOptInChannels, {
+                    handleOptInChannelsSelected: handleOptInChannelsSelected,
+                    selectedOptInChannelIDs: selectedChannelIDs
+                })
+            }),
+            /*#__PURE__*/ _jsx("form", {
+                className: mergeClassNames([
+                    styles.form,
+                    classNames.form
+                ]),
+                method: "POST",
+                onSubmit: async (e)=>{
+                    e.preventDefault();
+                    await handleSubmit();
+                },
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: mergeClassNames([
+                        styles.section,
+                        classNames.section
+                    ]),
+                    children: [
+                        !subscriber && /*#__PURE__*/ _jsx("input", {
+                            "aria-label": "enter your email",
+                            className: mergeClassNames([
+                                styles.emailInput,
+                                classNames.emailInput
+                            ]),
+                            onChange: (e)=>setEmail(e.target.value),
+                            placeholder: "enter your email",
+                            type: "email",
+                            value: email
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            className: mergeClassNames([
+                                styles.button,
+                                classNames.button
+                            ]),
+                            type: "submit",
+                            children: "Save choices"
+                        })
+                    ]
+                })
+            }),
+            !!result && /*#__PURE__*/ _jsx("p", {
+                className: mergeClassNames([
+                    styles.message,
+                    classNames.message,
+                    status == 'error' ? [
+                        styles.error,
+                        classNames.error
+                    ] : []
+                ]),
+                children: result
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=Subscribe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/app/Subscribe.tsx"],"sourcesContent":["'use client'\n\nimport { PayloadSDK } from '@payloadcms/sdk'\nimport { type ChangeEvent, useEffect, useState } from 'react'\n\nimport type { Config, OptInChannel } from '../../copied/payload-types.js'\nimport type { SubscribeResponse } from '../../endpoints/subscribe.js'\n\nexport { SubscribeResponse }\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\nimport { useServerUrl } from '../../react-hooks/useServerUrl.js'\nimport { mergeClassNames } from './helpers.js'\nimport { SelectOptInChannels } from './SelectOptInChannels.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 ISubscribe {\n  classNames?: SubscribeClasses\n  handleSubscribe?: (result: SubscribeResponse) => void\n  props?: any\n}\n\nexport type SubscribeClasses = {\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\ntype statusValues = 'default' | 'error' | 'sent' | 'updated'\n\nexport const Subscribe = ({\n  classNames = {\n    button: '',\n    container: '',\n    emailInput: '',\n    error: '',\n    form: '',\n    loading: '',\n    message: '',\n    section: '',\n  },\n  handleSubscribe,\n}: ISubscribe) => {\n  const { refreshSubscriber, subscriber } = useSubscriber()\n\n  const { serverURL } = useServerUrl()\n\n  const sdk = new PayloadSDK<Config>({\n    baseURL: serverURL || '',\n  })\n\n  const flattenChannels = (channels: (OptInChannel | string)[] | null | undefined) => {\n    if (!channels) {\n      return []\n    }\n    return channels.map((channel: OptInChannel | string) =>\n      typeof channel == 'string' ? channel : channel.id,\n    )\n  }\n\n  const [status, setStatus] = useState<statusValues>('default')\n  const [result, setResult] = useState<string>()\n  const [email, setEmail] = useState(subscriber ? subscriber.email : '')\n  const [selectedChannelIDs, setSelectedChannelIDs] = useState<string[]>(() =>\n    flattenChannels(subscriber?.optIns),\n  )\n\n  useEffect(() => {\n    setEmail(subscriber?.email || '')\n    setSelectedChannelIDs(flattenChannels(subscriber?.optIns))\n  }, [subscriber])\n\n  const handleOptInChannelsSelected = (result: OptInChannel[]) => {\n    setSelectedChannelIDs(result.map((channel) => channel.id))\n  }\n\n  const handleSubmit = async () => {\n    const subscribeResult = await sdk.request({\n      json: {\n        afterVerifyUrl: window.location.pathname + '?now=' + new Date().toISOString(),\n        email,\n        optIns: selectedChannelIDs,\n      },\n      method: 'POST',\n      path: '/api/subscribe',\n    })\n    if (subscribeResult.ok) {\n      const resultJson: SubscribeResponse = await subscribeResult.json()\n      // // When subscriber optIns are updated...\n      // | {\n      //     email: string\n      //     now: string\n      //     optIns: string[]\n      //   }\n      // // When a verify link is emailed...\n      // | {\n      //     emailResult: any\n      //     now: string\n      //   }\n      // // When any error occurs...\n      // | {\n      //     error: string\n      //     now: string\n      //   }\n      // @ts-expect-error Silly type confusion\n      const { emailResult, error } = resultJson\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 if (email) {\n        setStatus('updated')\n        setResult(`You're subscriptions have been updated.`)\n      } else {\n        setStatus('error')\n        setResult(`An error occured. Please try again. \\nResult unknown`)\n      }\n\n      refreshSubscriber()\n\n      if (handleSubscribe) {\n        handleSubscribe(resultJson)\n      }\n    } else {\n      // const resultText = await subscribeResult.text()\n      setStatus('error')\n      setResult(`An error occured. Please try again. \\nResult unknown`)\n    }\n  }\n\n  return (\n    <div className={mergeClassNames([styles.container, classNames.container])}>\n      <h2>Subscribe</h2>\n      <div className={mergeClassNames([styles.section, classNames.section])}>\n        <SelectOptInChannels\n          handleOptInChannelsSelected={handleOptInChannelsSelected}\n          selectedOptInChannelIDs={selectedChannelIDs}\n        />\n      </div>\n      <form\n        className={mergeClassNames([styles.form, classNames.form])}\n        method=\"POST\"\n        onSubmit={async (e) => {\n          e.preventDefault()\n          await handleSubmit()\n        }}\n      >\n        <div className={mergeClassNames([styles.section, classNames.section])}>\n          {!subscriber && (\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          )}\n          <button className={mergeClassNames([styles.button, classNames.button])} type=\"submit\">\n            Save choices\n          </button>\n        </div>\n      </form>\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    </div>\n  )\n}\n"],"names":["PayloadSDK","useEffect","useState","useSubscriber","useServerUrl","mergeClassNames","SelectOptInChannels","styles","Subscribe","classNames","button","container","emailInput","error","form","loading","message","section","handleSubscribe","refreshSubscriber","subscriber","serverURL","sdk","baseURL","flattenChannels","channels","map","channel","id","status","setStatus","result","setResult","email","setEmail","selectedChannelIDs","setSelectedChannelIDs","optIns","handleOptInChannelsSelected","handleSubmit","subscribeResult","request","json","afterVerifyUrl","window","location","pathname","Date","toISOString","method","path","ok","resultJson","emailResult","div","className","h2","selectedOptInChannelIDs","onSubmit","e","preventDefault","input","aria-label","onChange","target","value","placeholder","type","p"],"mappings":"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"}

package/dist/components/app/Subscribe.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}

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

@@ -0,0 +1,7 @@
+export type SubscriberMenuClasses = {
+    button?: string;
+    container?: string;
+};
+export declare const SubscriberMenu: ({ classNames, }: {
+    classNames?: SubscriberMenuClasses;
+}) => import("react").JSX.Element;

package/dist/components/app/SubscriberMenu.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSubscriber } from '../../contexts/SubscriberProvider.js';
+import { mergeClassNames } from './helpers.js';
+import styles from './shared.module.css';
+export const SubscriberMenu = ({ classNames = {
+    button: '',
+    container: ''
+} })=>{
+    const { logOut, subscriber } = useSubscriber();
+    return /*#__PURE__*/ _jsx("div", {
+        className: mergeClassNames([
+            styles.container,
+            classNames.container
+        ]),
+        children: subscriber && /*#__PURE__*/ _jsxs("div", {
+            children: [
+                "Welcome, ",
+                subscriber?.email,
+                " - ",
+                /*#__PURE__*/ _jsx("a", {
+                    href: '/subscribe',
+                    children: "Manage subscriptions"
+                }),
+                " -",
+                ' ',
+                /*#__PURE__*/ _jsx("button", {
+                    className: mergeClassNames([
+                        styles.button,
+                        classNames.button
+                    ]),
+                    onClick: (e)=>{
+                        e.preventDefault();
+                        logOut();
+                    },
+                    type: "button",
+                    children: "Log out"
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=SubscriberMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/app/SubscriberMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useSubscriber } from '../../contexts/SubscriberProvider.js'\n\nimport { mergeClassNames } from './helpers.js'\nimport styles from './shared.module.css'\n\n// interface IAuth {\n//   props?: any\n// }\n\nexport type SubscriberMenuClasses = {\n  button?: string\n  container?: string\n}\n\nexport const SubscriberMenu = ({\n  classNames = {\n    button: '',\n    container: '',\n  },\n}: {\n  classNames?: SubscriberMenuClasses\n}) => {\n  const { logOut, subscriber } = useSubscriber()\n  return (\n    <div className={mergeClassNames([styles.container, classNames.container])}>\n      {/* <pre>{JSON.stringify(result, null, 2)}</pre> */}\n      {subscriber && (\n        <div>\n          Welcome, {subscriber?.email} - <a href={'/subscribe'}>Manage subscriptions</a> -{' '}\n          <button\n            className={mergeClassNames([styles.button, classNames.button])}\n            onClick={(e) => {\n              e.preventDefault()\n              logOut()\n            }}\n            type=\"button\"\n          >\n            Log out\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useSubscriber","mergeClassNames","styles","SubscriberMenu","classNames","button","container","logOut","subscriber","div","className","email","a","href","onClick","e","preventDefault","type"],"mappings":"AAAA;;AAEA,SAASA,aAAa,QAAQ,uCAAsC;AAEpE,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAOC,YAAY,sBAAqB;AAWxC,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,aAAa;IACXC,QAAQ;IACRC,WAAW;AACb,CAAC,EAGF;IACC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGR;IAC/B,qBACE,KAACS;QAAIC,WAAWT,gBAAgB;YAACC,OAAOI,SAAS;YAAEF,WAAWE,SAAS;SAAC;kBAErEE,4BACC,MAACC;;gBAAI;gBACOD,YAAYG;gBAAM;8BAAG,KAACC;oBAAEC,MAAM;8BAAc;;gBAAwB;gBAAG;8BACjF,KAACR;oBACCK,WAAWT,gBAAgB;wBAACC,OAAOG,MAAM;wBAAED,WAAWC,MAAM;qBAAC;oBAC7DS,SAAS,CAACC;wBACRA,EAAEC,cAAc;wBAChBT;oBACF;oBACAU,MAAK;8BACN;;;;;AAOX,EAAC"}