payload-subscribers-plugin 0.0.1

package/dist/server-functions/serverUrl.js

@@ -0,0 +1,31 @@
+'use server';
+const getServerSideURL = ()=>{
+    const serverSideURL = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` : process.env.VERCEL_PROJECT_PRODUCTION_URL ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` : process.env.NEXT_PUBLIC_DEV_URL ? `http://${process.env.NEXT_PUBLIC_DEV_URL}` : 'http://localhost:3000';
+    // console.log(`process.env.NEXT_PUBLIC_DEV_URL: ${process.env.NEXT_PUBLIC_DEV_URL}`)
+    // console.log(`serverSideURL: ${serverSideURL}`)
+    return serverSideURL;
+};
+// const canUseDOM = !!(
+//   typeof window !== 'undefined' &&
+//   window.document &&
+//   window.document.createElement
+// )
+// const getClientSideURL = () => {
+//   if (canUseDOM) {
+//     const protocol = window.location.protocol
+//     const domain = window.location.hostname
+//     const port = window.location.port
+//     // `${window.location.protocol}//${window.location.host}
+//     const clientSideURL = `${protocol}//${domain}${port ? `:${port}` : ''}`
+//     // console.log(`clientSideURL: ${clientSideURL}`)
+//     return clientSideURL
+//   }
+//   return getServerSideURL()
+// }
+export const getServerUrl = async ()=>{
+    return {
+        serverURL: getServerSideURL()
+    };
+};
+
+//# sourceMappingURL=serverUrl.js.map

package/dist/server-functions/serverUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server-functions/serverUrl.ts"],"sourcesContent":["'use server'\n\nconst getServerSideURL = () => {\n  const serverSideURL = process.env.NEXT_PUBLIC_VERCEL_URL\n    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`\n    : process.env.VERCEL_PROJECT_PRODUCTION_URL\n      ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`\n      : process.env.NEXT_PUBLIC_DEV_URL\n        ? `http://${process.env.NEXT_PUBLIC_DEV_URL}`\n        : 'http://localhost:3000'\n  // console.log(`process.env.NEXT_PUBLIC_DEV_URL: ${process.env.NEXT_PUBLIC_DEV_URL}`)\n  // console.log(`serverSideURL: ${serverSideURL}`)\n  return serverSideURL\n}\n\n// const canUseDOM = !!(\n//   typeof window !== 'undefined' &&\n//   window.document &&\n//   window.document.createElement\n// )\n\n// const getClientSideURL = () => {\n//   if (canUseDOM) {\n//     const protocol = window.location.protocol\n//     const domain = window.location.hostname\n//     const port = window.location.port\n//     // `${window.location.protocol}//${window.location.host}\n//     const clientSideURL = `${protocol}//${domain}${port ? `:${port}` : ''}`\n//     // console.log(`clientSideURL: ${clientSideURL}`)\n//     return clientSideURL\n//   }\n\n//   return getServerSideURL()\n// }\n\nexport const getServerUrl = async (): Promise<{ serverURL: string }> => {\n  return { serverURL: getServerSideURL() }\n}\n"],"names":["getServerSideURL","serverSideURL","process","env","NEXT_PUBLIC_VERCEL_URL","VERCEL_PROJECT_PRODUCTION_URL","NEXT_PUBLIC_DEV_URL","getServerUrl","serverURL"],"mappings":"AAAA;AAEA,MAAMA,mBAAmB;IACvB,MAAMC,gBAAgBC,QAAQC,GAAG,CAACC,sBAAsB,GACpD,CAAC,QAAQ,EAAEF,QAAQC,GAAG,CAACC,sBAAsB,EAAE,GAC/CF,QAAQC,GAAG,CAACE,6BAA6B,GACvC,CAAC,QAAQ,EAAEH,QAAQC,GAAG,CAACE,6BAA6B,EAAE,GACtDH,QAAQC,GAAG,CAACG,mBAAmB,GAC7B,CAAC,OAAO,EAAEJ,QAAQC,GAAG,CAACG,mBAAmB,EAAE,GAC3C;IACR,qFAAqF;IACrF,iDAAiD;IACjD,OAAOL;AACT;AAEA,wBAAwB;AACxB,qCAAqC;AACrC,uBAAuB;AACvB,kCAAkC;AAClC,IAAI;AAEJ,mCAAmC;AACnC,qBAAqB;AACrB,gDAAgD;AAChD,8CAA8C;AAC9C,wCAAwC;AACxC,+DAA+D;AAC/D,8EAA8E;AAC9E,wDAAwD;AACxD,2BAA2B;AAC3B,MAAM;AAEN,8BAA8B;AAC9B,IAAI;AAEJ,OAAO,MAAMM,eAAe;IAC1B,OAAO;QAAEC,WAAWR;IAAmB;AACzC,EAAC"}

package/dist/server-functions/subscriberAuth.d.ts

@@ -0,0 +1,11 @@
+export type SubscriberAuthReturn = {
+    error: any;
+} | {
+    permissions: any;
+    subscriber: any;
+};
+export declare const subscriberAuth: () => Promise<SubscriberAuthReturn>;
+export declare function logoutAction(): Promise<{
+    message: string;
+    success: boolean;
+}>;

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "payload-subscribers-plugin",
+  "description": "A Payload CMS (3.0) plugin to add subscriber features into a site or app",
+  "author": {
+    "name": "Chad Crume",
+    "url": "https://github.com/chadcrume"
+  },
+  "repository": "chadcrume/payload-subscribers-plugin",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "import": "./dist/exports/ui.js",
+      "types": "./dist/exports/ui.d.ts",
+      "default": "./dist/exports/ui.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@payloadcms/db-mongodb": "3.73.0",
+    "@payloadcms/eslint-config": "3.9.0",
+    "@payloadcms/next": "3.73.0",
+    "@payloadcms/sdk": "3.73.0",
+    "@payloadcms/ui": "3.73.0",
+    "@playwright/test": "1.56.1",
+    "@swc-node/register": "1.10.9",
+    "@swc/cli": "0.6.0",
+    "@types/node": "^22.19.7",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "copyfiles": "2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "15.4.7",
+    "mongodb-memory-server": "10.1.4",
+    "next": "16.1.6",
+    "open": "^10.2.0",
+    "payload": "3.73.0",
+    "prettier": "^3.8.1",
+    "qs-esm": "7.0.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "sharp": "0.34.2",
+    "sort-package-json": "^2.15.1",
+    "typescript": "5.7.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "next": "^15.4.10",
+    "payload": "^3.71.1",
+    "@payloadcms/sdk": "^3.71.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0",
+    "pnpm": "^9 || ^10"
+  },
+  "registry": "https://registry.npmjs.org/",
+  "dependencies": {},
+  "version": "0.0.1",
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --outDir dist --rootDir ./src",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "pnpm dev:copyfiles && pnpm dev:next",
+    "dev:copyfiles": "copyfiles -u 1 \"dev/{payload-types}.ts\" src/copied/",
+    "dev:next": "next dev dev --turbo",
+    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
+    "dev:generate-types": "pnpm dev:payload generate:types",
+    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "generate:importmap": "pnpm dev:generate-importmap",
+    "generate:types": "pnpm dev:generate-types && pnpm dev:copyfiles",
+    "lint": "eslint",
+    "lint:fix": "eslint ./src --fix",
+    "test": "pnpm test:int && pnpm test:e2e",
+    "test:e2e": "playwright test",
+    "test:int": "vitest"
+  }
+}

package/src/collections/OptInChannels.ts

@@ -0,0 +1,45 @@
+import type { CollectionConfig } from 'payload'
+
+export const OptInChannels: CollectionConfig = {
+  slug: 'opt-in-channels',
+  access: {
+    // Public access for creation (signup form)
+    create: () => true,
+    // Admin-only access for reading, updating, and deleting
+    delete: ({ req }) => (req.user ? true : false),
+    // read: ({ req }) => (req.user ? true : false),
+    read: () => true,
+    update: ({ req }) => (req.user ? true : false),
+  },
+  admin: {
+    useAsTitle: 'title', // Specify the field to use as the title
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text', // Enforces valid email format
+      label: 'Title',
+      required: true,
+      unique: true, // Ensures no duplicate titles
+    },
+    {
+      name: 'description',
+      type: 'text',
+      label: 'Description',
+    },
+    {
+      name: 'active',
+      type: 'checkbox',
+      defaultValue: true, // Default to pending until verified
+      label: 'Active',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      label: 'slug',
+    },
+  ],
+}
+
+export default OptInChannels

package/src/collections/Subscribers.ts

@@ -0,0 +1,99 @@
+import type { CollectionConfig, CollectionSlug, Field } from 'payload'
+
+import { OptedInChannels } from './fields/OptedInChannels.js'
+
+export const defaultTokenExpiration = 30 * 60 // 30 minutes
+
+export const defaultCollectionSlug = 'subscribers'
+
+export const SubscribersCollectionFactory = ({
+  slug,
+  tokenExpiration = defaultTokenExpiration,
+}: {
+  slug?: CollectionSlug
+  tokenExpiration?: number
+}) => {
+  const Subscribers: CollectionConfig = {
+    slug: slug ? slug : defaultCollectionSlug,
+    access: {
+      // Public access for creation (signup form)
+      create: () => true,
+      // Admin-only access for reading, updating, and deleting
+      delete: ({ req }) => (req.user ? true : false),
+      read: ({ req }) => (req.user ? true : false),
+      update: ({ req }) => (req.user ? true : false),
+    },
+    admin: { useAsTitle: 'email' },
+    auth: {
+      tokenExpiration,
+      // verify: true, // Require email verification before being allowed to authenticate
+      // maxLoginAttempts: 5, // Automatically lock a user out after X amount of failed logins
+      // lockTime: 600 * 1000, // Time period to allow the max login attempts
+    },
+    fields: [...subscribersCollectionFields],
+  }
+
+  return Subscribers
+}
+
+export const subscribersCollectionFields: Field[] = [
+  {
+    name: 'email',
+    type: 'email', // Enforces valid email format
+    label: 'Email Address',
+    required: true,
+    unique: true, // Ensures no duplicate emails
+  },
+  {
+    name: 'firstName',
+    type: 'text',
+    label: 'First Name',
+  },
+  {
+    name: 'status',
+    type: 'select',
+    defaultValue: 'pending', // Default to pending until verified
+    label: 'Subscription Status',
+    options: [
+      {
+        label: 'Subscribed',
+        value: 'subscribed',
+      },
+      {
+        label: 'Unsubscribed',
+        value: 'unsubscribed',
+      },
+      {
+        label: 'Pending Verification',
+        value: 'pending',
+      },
+    ],
+    required: true,
+  },
+  {
+    name: 'source',
+    type: 'text', // e.g., 'Homepage form', 'Blog post A', etc.
+    label: 'Signup Source',
+  },
+  {
+    name: 'verificationToken',
+    type: 'text',
+    admin: {
+      hidden: true, // Hide this field in the admin panel for security/cleanliness
+    },
+    label: 'Verification Token',
+  },
+  {
+    name: 'verificationTokenExpires',
+    type: 'date',
+    admin: {
+      hidden: true, // Hide this field in the admin panel for security/cleanliness
+    },
+    label: 'Verification Token Expiration',
+  },
+
+  /**
+   * Plugin field relationship to optinchannels
+   */
+  OptedInChannels,
+]

package/src/collections/fields/OptedInChannels.ts

@@ -0,0 +1,12 @@
+import type { Field } from 'payload'
+
+export const OptedInChannels: Field = {
+  name: 'optIns',
+  type: 'relationship',
+  admin: {
+    position: 'sidebar',
+  },
+  hasMany: true,
+  label: 'Opted-in channels',
+  relationTo: 'opt-in-channels',
+}

package/src/components/app/RequestMagicLink.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { PayloadSDK } from '@payloadcms/sdk'
+import { type ChangeEvent, type SubmitEvent, useEffect, useState } from 'react'
+
+import type { Config } from '../../copied/payload-types.js'
+import type { RequestMagicLinkResponse } from '../../endpoints/requestMagicLink.js'
+
+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 { RequestMagicLinkResponse }
+
+export interface IRequestMagicLink {
+  classNames?: RequestMagicLinkClasses
+  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void
+  props?: any
+}
+
+export type RequestMagicLinkClasses = {
+  button?: string
+  container?: string
+  emailInput?: string
+  error?: string
+  form?: string
+  message?: string
+}
+
+type statusValues = 'default' | 'error' | 'sent'
+
+export const RequestMagicLink = ({
+  classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    message: '',
+  },
+  handleMagicLinkRequested,
+}: IRequestMagicLink) => {
+  const { subscriber } = useSubscriber()
+  const { serverURL } = useServerUrl()
+
+  const [status, setStatus] = useState<statusValues>('default')
+
+  const sdk = new PayloadSDK<Config>({
+    baseURL: serverURL || '',
+  })
+
+  const [result, setResult] = useState<string>()
+  const [email, setEmail] = useState(subscriber?.email || '')
+
+  useEffect(() => {
+    setEmail(subscriber?.email || '')
+  }, [subscriber])
+
+  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
+    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: RequestMagicLinkResponse = 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 (
+    <div className={mergeClassNames([styles.container, classNames.container])}>
+      {result ? (
+        <p
+          className={mergeClassNames([
+            styles.message,
+            classNames.message,
+            status == 'error' ? [styles.error, classNames.error] : [],
+          ])}
+        >
+          {result}
+        </p>
+      ) : (
+        <></>
+      )}
+      <form
+        className={mergeClassNames([styles.form, classNames.form])}
+        method="POST"
+        onSubmit={handleSubmit}
+      >
+        <input
+          aria-label="enter your email"
+          className={mergeClassNames([styles.emailInput, classNames.emailInput])}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+          placeholder="enter your email"
+          type="email"
+          value={email}
+        />
+        <button className={mergeClassNames([styles.button, classNames.button])} type="submit">
+          Request magic link
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/components/app/RequestOrSubscribe.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useSubscriber } from '../../contexts/SubscriberProvider.js'
+import {
+  RequestMagicLink,
+  type RequestMagicLinkResponse,
+  Subscribe,
+  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 function RequestOrSubscribe({
+  classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    section: '',
+  },
+  handleMagicLinkRequested,
+  handleSubscribe,
+}: {
+  classNames?: RequestOrSubscribeClasses
+  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void
+  handleSubscribe?: (result: SubscribeResponse) => void
+}) {
+  const { subscriber } = useSubscriber()
+
+  // Example: Conditionally render something or pass the state to children
+  return (
+    <>
+      {subscriber ? (
+        <Subscribe classNames={classNames} handleSubscribe={handleSubscribe} />
+      ) : (
+        <RequestMagicLink
+          classNames={classNames}
+          handleMagicLinkRequested={handleMagicLinkRequested}
+        />
+      )}
+      {/* <div>subscriber = {JSON.stringify(subscriber)}</div> */}
+    </>
+  )
+}

package/src/components/app/SelectOptInChannels.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { PayloadSDK } from '@payloadcms/sdk'
+import { useEffect, useState } from 'react'
+
+import type { Config, OptInChannel } from '../../copied/payload-types.js'
+import type { GetOptInChannelsResponse } from '../../endpoints/getOptInChannels.js'
+
+import { useServerUrl } from '../../react-hooks/useServerUrl.js'
+import { mergeClassNames } from './helpers.js'
+import styles from './shared.module.css'
+
+// const payload = await getPayload({
+//   config: configPromise,
+// })
+
+// Pass your config from generated types as generic
+
+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 const SelectOptInChannels = ({
+  classNames = {
+    button: '',
+    container: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    optInCheckbox: '',
+    optInCheckboxItem: '',
+    optInCheckboxLabel: '',
+    optionsGroup: '',
+  },
+  handleOptInChannelsSelected,
+  selectedOptInChannelIDs,
+}: ISelectOptInChannels) => {
+  const { serverURL } = useServerUrl()
+  // const { serverURL } = { serverURL: 'http://localhost:3001' }
+  type OptInChannelCheckbox = {
+    isChecked: boolean
+  } & OptInChannel
+  const [result, setResult] = useState<any>()
+  const [allOptInChannels, setAllOptInChannels] = useState<OptInChannelCheckbox[]>([])
+
+  useEffect(() => {
+    async function verify() {
+      const sdk = new PayloadSDK<Config>({
+        baseURL: serverURL || '',
+      })
+
+      console.log('calling optinchannels endpoint')
+      const result = await sdk.request({
+        method: 'GET',
+        path: '/api/optinchannels',
+      })
+      if (result.ok) {
+        const resultJson: GetOptInChannelsResponse = await result.json()
+        setResult(resultJson)
+      } else {
+        const resultText = await result.text()
+        setResult(resultText)
+      }
+    }
+    void verify()
+  }, [serverURL])
+
+  useEffect(() => {
+    const channels = result?.optInChannels?.map((channel: OptInChannel) => ({
+      ...channel,
+      isChecked: selectedOptInChannelIDs?.includes(channel.id),
+    }))
+    setAllOptInChannels(channels)
+  }, [result, selectedOptInChannelIDs])
+
+  return (
+    <div className={mergeClassNames([styles.container, classNames.container])}>
+      <h3>Opt-in Channels</h3>
+      {!result ? (
+        <p className={mergeClassNames([styles.loading, classNames.loading])}>verifying...</p>
+      ) : (
+        <div className={mergeClassNames([styles.optionsGroup, classNames.optionsGroup])}>
+          {// Map over the tasks array to render each checkbox
+          allOptInChannels?.map((channel) => (
+            <div
+              className={mergeClassNames([styles.optInCheckboxItem, classNames.optInCheckboxItem])}
+              key={channel.id}
+            >
+              <label
+                className={mergeClassNames([
+                  styles.optInCheckboxLabel,
+                  classNames.optInCheckboxLabel,
+                ])}
+              >
+                <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}
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}