payload-subscribers-plugin 0.0.1

package/src/components/app/Subscribe.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { PayloadSDK } from '@payloadcms/sdk'
+import { type ChangeEvent, useEffect, useState } from 'react'
+
+import type { Config, OptInChannel } from '../../copied/payload-types.js'
+import type { SubscribeResponse } from '../../endpoints/subscribe.js'
+
+export { SubscribeResponse }
+
+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'
+
+// const payload = await getPayload({
+//   config: configPromise,
+// })
+
+// Pass your config from generated types as generic
+
+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
+}
+
+type statusValues = 'default' | 'error' | 'sent' | 'updated'
+
+export const Subscribe = ({
+  classNames = {
+    button: '',
+    container: '',
+    emailInput: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+    section: '',
+  },
+  handleSubscribe,
+}: ISubscribe) => {
+  const { refreshSubscriber, subscriber } = useSubscriber()
+
+  const { serverURL } = useServerUrl()
+
+  const sdk = new PayloadSDK<Config>({
+    baseURL: serverURL || '',
+  })
+
+  const flattenChannels = (channels: (OptInChannel | string)[] | null | undefined) => {
+    if (!channels) {
+      return []
+    }
+    return channels.map((channel: OptInChannel | string) =>
+      typeof channel == 'string' ? channel : channel.id,
+    )
+  }
+
+  const [status, setStatus] = useState<statusValues>('default')
+  const [result, setResult] = useState<string>()
+  const [email, setEmail] = useState(subscriber ? subscriber.email : '')
+  const [selectedChannelIDs, setSelectedChannelIDs] = useState<string[]>(() =>
+    flattenChannels(subscriber?.optIns),
+  )
+
+  useEffect(() => {
+    setEmail(subscriber?.email || '')
+    setSelectedChannelIDs(flattenChannels(subscriber?.optIns))
+  }, [subscriber])
+
+  const handleOptInChannelsSelected = (result: OptInChannel[]) => {
+    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: SubscribeResponse = 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 (
+    <div className={mergeClassNames([styles.container, classNames.container])}>
+      <h2>Subscribe</h2>
+      <div className={mergeClassNames([styles.section, classNames.section])}>
+        <SelectOptInChannels
+          handleOptInChannelsSelected={handleOptInChannelsSelected}
+          selectedOptInChannelIDs={selectedChannelIDs}
+        />
+      </div>
+      <form
+        className={mergeClassNames([styles.form, classNames.form])}
+        method="POST"
+        onSubmit={async (e) => {
+          e.preventDefault()
+          await handleSubmit()
+        }}
+      >
+        <div className={mergeClassNames([styles.section, classNames.section])}>
+          {!subscriber && (
+            <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">
+            Save choices
+          </button>
+        </div>
+      </form>
+      {!!result && (
+        <p
+          className={mergeClassNames([
+            styles.message,
+            classNames.message,
+            status == 'error' ? [styles.error, classNames.error] : [],
+          ])}
+        >
+          {result}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/app/SubscriberMenu.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useSubscriber } from '../../contexts/SubscriberProvider.js'
+
+import { mergeClassNames } from './helpers.js'
+import styles from './shared.module.css'
+
+// interface IAuth {
+//   props?: any
+// }
+
+export type SubscriberMenuClasses = {
+  button?: string
+  container?: string
+}
+
+export const SubscriberMenu = ({
+  classNames = {
+    button: '',
+    container: '',
+  },
+}: {
+  classNames?: SubscriberMenuClasses
+}) => {
+  const { logOut, subscriber } = useSubscriber()
+  return (
+    <div className={mergeClassNames([styles.container, classNames.container])}>
+      {/* <pre>{JSON.stringify(result, null, 2)}</pre> */}
+      {subscriber && (
+        <div>
+          Welcome, {subscriber?.email} - <a href={'/subscribe'}>Manage subscriptions</a> -{' '}
+          <button
+            className={mergeClassNames([styles.button, classNames.button])}
+            onClick={(e) => {
+              e.preventDefault()
+              logOut()
+            }}
+            type="button"
+          >
+            Log out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/app/VerifyMagicLink.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+import { PayloadSDK } from '@payloadcms/sdk'
+import { useSearchParams } from 'next/navigation.js'
+import { useCallback, useEffect, useState } from 'react'
+
+import type { RequestMagicLinkResponse } from '../..//endpoints/requestMagicLink.js'
+import type { Config } from '../../copied/payload-types.js'
+import type { VerifyMagicLinkResponse } from '../../endpoints/verifyMagicLink.js'
+
+export { VerifyMagicLinkResponse }
+import { useSubscriber } from '../../exports/ui.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 IVerifyMagicLink {
+  classNames?: VerifyMagicLinkClasses
+  handleMagicLinkRequested?: (result: RequestMagicLinkResponse) => void
+  handleMagicLinkVerified?: (result: VerifyMagicLinkResponse) => void
+  renderButton?: (props: {
+    forwardUrl?: string
+    name?: string
+    onClick?: () => any
+    text?: string
+  }) => React.ReactNode
+}
+
+export type VerifyMagicLinkClasses = {
+  button?: string
+  container?: string
+  error?: string
+  form?: string
+  loading?: string
+  message?: string
+}
+
+export const VerifyMagicLink = ({
+  classNames = {
+    button: '',
+    container: '',
+    error: '',
+    form: '',
+    loading: '',
+    message: '',
+  },
+  handleMagicLinkRequested,
+  handleMagicLinkVerified,
+  renderButton = ({ name, forwardUrl, onClick, text }) =>
+    forwardUrl ? (
+      <a href={forwardUrl}>
+        <button
+          className={mergeClassNames([styles.button, classNames.button])}
+          name={name}
+          type="button"
+        >
+          {text}
+        </button>
+      </a>
+    ) : (
+      <button
+        className={mergeClassNames([styles.button, classNames.button])}
+        name={name}
+        onClick={onClick}
+        type="button"
+      >
+        {text}
+      </button>
+    ),
+}: IVerifyMagicLink) => {
+  const { serverURL } = useServerUrl()
+  const {
+    // refreshSubscriber,
+    subscriber,
+  } = useSubscriber()
+
+  const searchParams = useSearchParams()
+  const email = searchParams.get('email')
+  const forwardUrl = searchParams.get('forwardUrl')
+  const token = searchParams.get('token')
+
+  const [result, setResult] = useState<string>()
+  const [isError, setIsError] = useState<boolean>(false)
+  // const [email, setEmail] = useState('')
+
+  const { refreshSubscriber } = useSubscriber()
+
+  const callVerify = useCallback(async () => {
+    const sdk = new PayloadSDK<Config>({
+      baseURL: serverURL || '',
+    })
+
+    const verifyResult = await sdk.request({
+      json: {
+        email,
+        token,
+      },
+      method: 'POST',
+      path: '/api/verifyToken',
+    })
+
+    return verifyResult
+  }, [email, serverURL, token])
+
+  useEffect(() => {
+    async function verify() {
+      const verifyResult = await callVerify()
+      if (verifyResult.ok) {
+        const resultJson = await verifyResult.json()
+        setResult(resultJson.message || resultJson.error)
+        setIsError(resultJson.error && !resultJson.message)
+
+        // // This is causing out of control rendering. Not totally sure why, or of another way to do it.
+        // refreshSubscriber()
+
+        // // This is also causing out of control rendering. Not totally sure why, or of another way to do it.
+        // if (handleMagicLinkVerified) {
+        //   handleMagicLinkVerified(resultJson)
+        // }
+      } else {
+        // const resultText = await verifyResult.text()
+        setResult('An error occured. Please try again')
+        setIsError(true)
+      }
+    }
+    if (!subscriber) {
+      void verify()
+    }
+  }, [callVerify, serverURL, email, handleMagicLinkVerified, refreshSubscriber, subscriber, token])
+
+  const handleRequestMagicLink = async () => {
+    const sdk = new PayloadSDK<Config>({
+      baseURL: serverURL || '',
+    })
+
+    const emailResult = await sdk.request({
+      json: {
+        email,
+        forwardUrl,
+      },
+      method: 'POST',
+      path: '/api/emailToken',
+    })
+    if (emailResult.ok) {
+      const resultJson = await emailResult.json()
+      setResult('An email has been sent containing your magic link.')
+      setIsError(false)
+      if (handleMagicLinkRequested) {
+        handleMagicLinkRequested(resultJson)
+      }
+    } else {
+      // const resultText = await emailResult.text()
+      setResult('An error occured. Please try again.')
+      setIsError(true)
+    }
+  }
+  return (
+    <div className={mergeClassNames([styles.container, classNames.container])}>
+      {!result && (
+        <p className={mergeClassNames([styles.loading, classNames.loading])}>verifying...</p>
+      )}
+      {result && (
+        <p
+          className={mergeClassNames([
+            styles.message,
+            classNames.message,
+            isError ? [styles.error, classNames.error] : [],
+          ])}
+        >
+          {result}
+        </p>
+      )}
+      <div className={mergeClassNames([styles.form, classNames.form])}>
+        {result &&
+          isError &&
+          renderButton({
+            name: 'request',
+            onClick: handleRequestMagicLink,
+            text: 'Request another magic link',
+          })}
+        {result &&
+          forwardUrl &&
+          renderButton({
+            name: 'continue',
+            forwardUrl,
+            text: 'Continue',
+          })}
+      </div>
+    </div>
+  )
+}

package/src/components/app/helpers.ts

@@ -0,0 +1,6 @@
+export const mergeClassNames = (classNames: ((string | undefined)[] | string | undefined)[]) => {
+  return classNames
+    .flat(Infinity)
+    .filter((className) => !!className)
+    .join(' ')
+}

package/src/components/app/shared.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+}
+
+.section {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+
+.error {
+  color: red;
+}

package/src/contexts/SubscriberProvider.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { PayloadSDK } from '@payloadcms/sdk'
+import { type ReactNode, useCallback, useEffect } from 'react'
+import { createContext, useContext, useMemo, useState } from 'react'
+
+import type { Config, Subscriber } from '../copied/payload-types.js'
+
+import { useServerUrl } from '../react-hooks/useServerUrl.js'
+
+export type SubscriberContextType = {
+  isLoaded: boolean
+  logOut: () => void
+  permissions: any
+  refreshSubscriber: () => void
+  subscriber: null | Subscriber
+}
+
+const SubscriberContext = createContext<SubscriberContextType | undefined>(undefined)
+
+interface ProviderProps {
+  children?: ReactNode // Recommended type for children
+}
+
+export function SubscriberProvider({ children }: ProviderProps) {
+  // eslint-disable-next-line
+  const [subscriber, setSubscriber] = useState<null | (Subscriber & { optIns: string[] })>(null)
+
+  const { serverURL } = useServerUrl()
+
+  // Keep track of if the selection content is loaded yet
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const [permissions, setPermissions] = useState<any>()
+
+  const refreshSubscriber = useCallback(async () => {
+    const initSubscriber = async () => {
+      setIsLoaded(false)
+      try {
+        const sdk = new PayloadSDK<Config>({
+          baseURL: serverURL || '',
+        })
+        const authResponse = await sdk.request({
+          json: {},
+          method: 'POST',
+          path: '/api/subscriberAuth',
+        })
+
+        if (authResponse.ok) {
+          // Call the server function to get the user data
+          const { permissions, subscriber } = await authResponse.json()
+          // console.log(`subscriber = `, subscriber)
+          // console.log(`permissions = `, permissions)
+          setPermissions(permissions)
+          setSubscriber(subscriber)
+        } else {
+          setPermissions(null)
+          setSubscriber(null)
+        }
+      } catch (error: unknown) {
+        console.log(`authResponse error`, error)
+      }
+      setIsLoaded(true)
+    }
+    await initSubscriber()
+  }, [serverURL])
+
+  const logOut = useCallback(async () => {
+    setIsLoaded(false)
+    try {
+      // const sdk = new PayloadSDK<Config>({
+      //   baseURL: serverURL || '',
+      // })
+      // const logoutResponse = await sdk.request({
+      //   json: {},
+      //   method: 'POST',
+      //   path: '/api/logout',
+      // })
+      // Unsure why sdk isn't working here
+      const logoutResponse = await fetch('/api/logout', {
+        method: 'POST',
+      })
+
+      // console.log(`logoutResponse`, logoutResponse)
+
+      if (logoutResponse.ok) {
+        setSubscriber(null)
+        setPermissions(null)
+      }
+    } catch (error: unknown) {
+      console.log(`logoutResponse error`, error)
+    }
+    setIsLoaded(true)
+  }, [])
+
+  useEffect(() => {
+    void refreshSubscriber()
+  }, [refreshSubscriber]) // Empty dependency array for mount/unmount
+
+  // Memoize the value to prevent unnecessary re-renders in consumers
+  const contextValue: SubscriberContextType = useMemo(
+    () => ({
+      isLoaded,
+      logOut,
+      permissions,
+      refreshSubscriber,
+      subscriber,
+    }),
+    [isLoaded, logOut, permissions, refreshSubscriber, subscriber],
+  )
+
+  return <SubscriberContext.Provider value={contextValue}>{children}</SubscriberContext.Provider>
+}
+
+// Custom hook to easily consume the context and add error handling
+export function useSubscriber() {
+  const context = useContext(SubscriberContext)
+  if (context === undefined) {
+    throw new Error('useSubscriber must be used within a SubscriberProvider')
+  }
+  return context
+}