diff --git a/packages/react/components/Newsletter/index.mjs b/packages/react/components/Newsletter/index.mjs index bb9d26c814a..ff9d8aab744 100644 --- a/packages/react/components/Newsletter/index.mjs +++ b/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 ) } + +/* + * 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

This does not seem to be a valid unsubscribe link.

+ + if (gone) + return ( + <> +

Done

+

This email address is no longer subscribed to the FreeSewing newsletter

+ + ) + + if (error) + return ( + <> +

Oops

+

+ Something went wrong. This is unexpected. Please{' '} + + Contact support + +

+ + ) + + return ( + <> +

+ To confirm you want to unsubscribe from the FreeSewing newsletter, click the button below: +

+ + + Sorry, but one-click unsubscribe violates internet standards ( + + learn more + + ). + + + ) + + return

Unsubscribe here {ehash}

+} diff --git a/sites/org/newsletter/unsubscribe/index.mdx b/sites/org/newsletter/unsubscribe/index.mdx new file mode 100644 index 00000000000..14c799d25b3 --- /dev/null +++ b/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' + +

Unsubscribe from the FreeSewing Newsletter

+ + + + diff --git a/sites/org/src/theme/BlogPostItem/index.js b/sites/org/src/theme/BlogPostItem/index.js index 30393859058..879c3404ee0 100644 --- a/sites/org/src/theme/BlogPostItem/index.js +++ b/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 ( + + {children} + + ) + return ( + {location.pathname}
{children}
diff --git a/sites/org/src/theme/BlogPostItems/index.js b/sites/org/src/theme/BlogPostItems/index.js index 769e2fa768b..f6f885230bc 100644 --- a/sites/org/src/theme/BlogPostItems/index.js +++ b/sites/org/src/theme/BlogPostItems/index.js @@ -196,13 +196,15 @@ const NewsletterItems = ({ items, slug }) => { ) : null}
    - {items.map((post) => ( -
  • - - {post.content.metadata.title} - -
  • - ))} + {items + .filter((post) => post.content.metadata.title.toLowerCase() !== 'unsubscribe') + .map((post) => ( +
  • + + {post.content.metadata.title} + +
  • + ))}
)