[org] fix: Newsletter unsubscribe handling

packages/react/components/Newsletter/index.mjs

@@ -1,5 +1,5 @@
 // Dependencies
-import { linkClasses, validateEmail } from '@freesewing/utils'
+import { linkClasses, validateEmail, getSearchParam } from '@freesewing/utils'
 
 // Context
 import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
@@ -15,6 +15,7 @@ import { NoIcon, OkIcon, SaveIcon, RightIcon, WarningIcon } from '@freesewing/re
 import { EmailInput } from '@freesewing/react/components/Input'
 import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'
+import { MiniTip } from '@freesewing/react/components/Mini'
 
 /*
  * Component for newsletter signup (by visitors)
@@ -118,3 +119,77 @@ export const NewsletterSignup = ({ Link = false, noP = false, noTitle = false, n
     </div>
   )
 }
+
+/*
+ * Component to handle newsletter unsubscribe links
+ *
+ * @params {object} props - All React props
+ * @param {function} props.Link - An optional framework-specific Link component
+ */
+export const NewsletterUnsubscribe = ({ Link = false }) => {
+  if (!Link) Link = WebLink
+  const ehash = getSearchParam('x')
+
+  // Hooks
+  const backend = useBackend()
+
+  // State
+  const [gone, setGone] = useState(false)
+  const [error, setError] = useState(false)
+
+  // Helper method to handle subscription
+  const unsubscribe = async () => {
+    const [status, body] = await backend.newsletterUnsubscribe(ehash)
+    if (status === 204 || status === 404) setGone(true)
+    else setError(true)
+  }
+
+  if (!ehash) return <p>This does not seem to be a valid unsubscribe link.</p>
+
+  if (gone)
+    return (
+      <>
+        <h2>Done</h2>
+        <p>This email address is no longer subscribed to the FreeSewing newsletter</p>
+      </>
+    )
+
+  if (error)
+    return (
+      <>
+        <h2>Oops</h2>
+        <p>
+          Something went wrong. This is unexpected. Please{' '}
+          <Link className={linkClasses} href="/support">
+            Contact support
+          </Link>
+        </p>
+      </>
+    )
+
+  return (
+    <>
+      <p>
+        To confirm you want to unsubscribe from the FreeSewing newsletter, click the button below:
+      </p>
+      <button
+        onClick={unsubscribe}
+        className="tw-daisy-btn tw-daisy-btn-primary tw-daisy-btn-large tw-w-full tw-my-4"
+      >
+        Unsubscribe
+      </button>
+      <MiniTip>
+        Sorry, but one-click unsubscribe violates internet standards (
+        <Link
+          href="/docs/about/faq/newsletter/why-unsubscribe-multiple-clicks/"
+          className={linkClasses}
+        >
+          learn more
+        </Link>
+        ).
+      </MiniTip>
+    </>
+  )
+
+  return <p>Unsubscribe here {ehash}</p>
+}

sites/org/newsletter/unsubscribe/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Unsubscribe
+sidebar_label: ''
+sidebar_class_name: tw-hidden
+---
+
+import { NewsletterUnsubscribe } from '@freesewing/react/components/Newsletter'
+import Link from '@docusaurus/Link'
+
+<h1>Unsubscribe from the FreeSewing Newsletter</h1>
+
+<!-- truncate -->
+
+<NewsletterUnsubscribe Link={Link} />

sites/org/src/theme/BlogPostItem/index.js

@@ -66,10 +66,21 @@ export default function BlogPostItem(props) {
    */
   const type = location.pathname.split('/')[1]
 
+  /*
+   * The newsletter unsubscribe page gets special treatment
+   */
+  if (location.pathname === '/newsletter/unsubscribe')
+    return (
+      <BlogPostItemContainer className={clsx(containerClassName, className)}>
+        {children}
+      </BlogPostItemContainer>
+    )
+
   return (
     <BlogPostItemContainer className={clsx(containerClassName, className)}>
       <BlogPostHeader type={type} />
       <BlogPostItemContent>
+        {location.pathname}
         <div className="mdx">{children}</div>
       </BlogPostItemContent>
       <BlogPostItemFooter />

sites/org/src/theme/BlogPostItems/index.js

@@ -196,13 +196,15 @@ const NewsletterItems = ({ items, slug }) => {
         </>
       ) : null}
       <ul className="mdx tw-list tw-list-disc tw-ml-8">
-        {items.map((post) => (
+        {items
-          <li key={post.content.metadata.permalink}>
+          .filter((post) => post.content.metadata.title.toLowerCase() !== 'unsubscribe')
-            <Link href={post.content.metadata.permalink} className={linkClasses}>
+          .map((post) => (
-              {post.content.metadata.title}
+            <li key={post.content.metadata.permalink}>
-            </Link>
+              <Link href={post.content.metadata.permalink} className={linkClasses}>
-          </li>
+                {post.content.metadata.title}
-        ))}
+              </Link>
+            </li>
+          ))}
       </ul>
     </DocusaurusDoc>
   )