From d91f977ff41579743df346b115e4e64e6314a2de Mon Sep 17 00:00:00 2001
From: Jeremy Stucki <jeremy.stucki@gmail.com>
Date: Thu, 8 Jan 2026 17:07:03 +0100
Subject: [PATCH 1/2] handle mailchimp subscription status in user settings

---
 .../mutations/NewslettersResubscribe.gql      |  6 ++
 .../newsletters/newsletters-card.tsx          | 19 ++++-
 .../newsletters/newsletters-overview.tsx      | 16 ++++-
 .../newsletters/newsletters-section.tsx       | 13 +++-
 .../newsletters/newsletters-status.tsx        | 71 +++++++++++++++++++
 5 files changed, 116 insertions(+), 9 deletions(-)
 create mode 100644 apps/www/graphql/republik-api/mutations/NewslettersResubscribe.gql
 create mode 100644 apps/www/src/components/newsletters/newsletters-status.tsx

diff --git a/apps/www/graphql/republik-api/mutations/NewslettersResubscribe.gql b/apps/www/graphql/republik-api/mutations/NewslettersResubscribe.gql
new file mode 100644
index 0000000000..26cf444147
--- /dev/null
+++ b/apps/www/graphql/republik-api/mutations/NewslettersResubscribe.gql
@@ -0,0 +1,6 @@
+mutation NewslettersResubscribe($userId: ID!) {
+  resubscribeEmail(userId: $userId) {
+    id
+    status
+  }
+}
diff --git a/apps/www/src/components/newsletters/newsletters-card.tsx b/apps/www/src/components/newsletters/newsletters-card.tsx
index 0b068d4f10..9618f11f0a 100644
--- a/apps/www/src/components/newsletters/newsletters-card.tsx
+++ b/apps/www/src/components/newsletters/newsletters-card.tsx
@@ -19,10 +19,12 @@ function MobileButton({
   toggleSubscription,
   isPending,
   subscribed,
+  disabled,
 }: {
   toggleSubscription: (e: any) => Promise<void>
   isPending: boolean
   subscribed: boolean
+  disabled?: boolean
 }) {
   return (
     <button
@@ -32,9 +34,13 @@ function MobileButton({
         top: 4,
         right: 4,
         md: { display: 'none' },
+        '&:disabled:not([data-loading], [aria-busy="true"])': {
+          opacity: 0.5,
+        },
       })}
       onClick={toggleSubscription}
-      disabled={isPending}
+      disabled={disabled || isPending}
+      aria-busy={isPending}
     >
       {isPending ? (
         <Spinner size='large' />
@@ -69,10 +75,12 @@ function DesktopButton({
   toggleSubscription,
   isPending,
   subscribed,
+  disabled,
 }: {
   toggleSubscription: (e: any) => Promise<void>
   isPending: boolean
   subscribed: boolean
+  disabled?: boolean
 }) {
   return (
     <Button
@@ -83,7 +91,7 @@ function DesktopButton({
         md: { display: 'block' },
       })}
       onClick={toggleSubscription}
-      disabled={isPending}
+      disabled={disabled || isPending}
       type='button'
       size='small'
       variant={subscribed ? 'outline' : 'default'}
@@ -97,9 +105,11 @@ function DesktopButton({
 function NewsletterCard({
   newsletter,
   subscribed,
+  disabled,
 }: {
   newsletter: NewsletterName
   subscribed?: boolean
+  disabled?: boolean
 }) {
   const { t } = useTranslation()
   const [updateNewsletterSubscription] = useMutation(
@@ -111,7 +121,7 @@ function NewsletterCard({
   async function toggleSubscription(e) {
     e.stopPropagation()
 
-    if (isPending) return
+    if (disabled || isPending) return
 
     setIsPending(true)
     const { data } = await updateNewsletterSubscription({
@@ -152,6 +162,7 @@ function NewsletterCard({
         },
       })}
       onClick={toggleSubscription}
+      aria-disabled={disabled}
       role='button'
     >
       <Image
@@ -210,11 +221,13 @@ function NewsletterCard({
             toggleSubscription={toggleSubscription}
             isPending={isPending}
             subscribed={subscribed}
+            disabled={disabled}
           />
           <MobileButton
             toggleSubscription={toggleSubscription}
             isPending={isPending}
             subscribed={subscribed}
+            disabled={disabled}
           />
         </div>
       )}
diff --git a/apps/www/src/components/newsletters/newsletters-overview.tsx b/apps/www/src/components/newsletters/newsletters-overview.tsx
index 8ad405ee1b..abf1ca05fd 100644
--- a/apps/www/src/components/newsletters/newsletters-overview.tsx
+++ b/apps/www/src/components/newsletters/newsletters-overview.tsx
@@ -1,11 +1,11 @@
 import {
   NewsletterName,
   NewsletterSettingsDocument,
-  NewsletterSubscription,
 } from '#graphql/republik-api/__generated__/gql/graphql'
 import { useQuery } from '@apollo/client'
 import { NL_FEATURED, NL_MORE } from '@app/components/newsletters/config'
 import NewslettersSection from './newsletters-section'
+import { NewslettersStatus } from './newsletters-status'
 
 function NewslettersOverview({
   nlFeatured = NL_FEATURED,
@@ -15,20 +15,30 @@ function NewslettersOverview({
   nlMore?: NewsletterName[]
 }) {
   const { data } = useQuery(NewsletterSettingsDocument)
-  const subscriptions = data?.me?.newsletterSettings
-    ?.subscriptions as NewsletterSubscription[]
+
+  if (!data?.me) {
+    return null
+  }
+
+  const subscriptions = data.me.newsletterSettings.subscriptions
 
   return (
     <>
+      <NewslettersStatus
+        userId={data.me.id}
+        status={data.me.newsletterSettings.status}
+      />
       <NewslettersSection
         title='Beliebteste'
         newsletters={nlFeatured}
         subscriptions={subscriptions}
+        disabled={data.me.newsletterSettings.status !== 'subscribed'}
       />
       <NewslettersSection
         title='Was für Sie?'
         newsletters={nlMore}
         subscriptions={subscriptions}
+        disabled={data.me.newsletterSettings.status !== 'subscribed'}
       />
     </>
   )
diff --git a/apps/www/src/components/newsletters/newsletters-section.tsx b/apps/www/src/components/newsletters/newsletters-section.tsx
index d9a0b9e662..1492cc8f70 100644
--- a/apps/www/src/components/newsletters/newsletters-section.tsx
+++ b/apps/www/src/components/newsletters/newsletters-section.tsx
@@ -2,7 +2,7 @@
 
 import {
   NewsletterName,
-  NewsletterSubscription,
+  NewsletterSettingsQuery,
 } from '#graphql/republik-api/__generated__/gql/graphql'
 import { Section, SectionH3 } from '@app/components/ui/section'
 import { css } from '@republik/theme/css'
@@ -10,17 +10,23 @@ import NewsletterCard from './newsletters-card'
 
 const isSubscribed = (
   name: NewsletterName,
-  subscriptions?: NewsletterSubscription[],
+  subscriptions?: NonNullable<
+    NewsletterSettingsQuery['me']['newsletterSettings']['subscriptions']
+  >,
 ) => subscriptions?.find((s) => s?.name === name)?.subscribed
 
 function NewslettersSection({
   title,
   newsletters,
   subscriptions,
+  disabled,
 }: {
   title: string
   newsletters: NewsletterName[]
-  subscriptions?: NewsletterSubscription[]
+  subscriptions?: NonNullable<
+    NewsletterSettingsQuery['me']['newsletterSettings']['subscriptions']
+  >
+  disabled?: boolean
 }) {
   return (
     <Section>
@@ -42,6 +48,7 @@ function NewslettersSection({
               key={newsletter}
               newsletter={newsletter}
               subscribed={isSubscribed(newsletter, subscriptions)}
+              disabled={disabled}
             />
           ))}
         </div>
diff --git a/apps/www/src/components/newsletters/newsletters-status.tsx b/apps/www/src/components/newsletters/newsletters-status.tsx
new file mode 100644
index 0000000000..a9e640df24
--- /dev/null
+++ b/apps/www/src/components/newsletters/newsletters-status.tsx
@@ -0,0 +1,71 @@
+import { NewslettersResubscribeDocument } from '#graphql/republik-api/__generated__/gql/graphql'
+import { useMutation } from '@apollo/client'
+import { Button } from '@app/components/ui/button'
+import { css } from '@republik/theme/css'
+import { useTranslation } from 'lib/withT'
+
+export function NewslettersStatus({
+  userId,
+  status,
+}: {
+  userId: string
+  status: string
+}) {
+  const { t } = useTranslation()
+  const [resubscribe, { data, loading, error }] = useMutation(
+    NewslettersResubscribeDocument,
+    { variables: { userId } },
+  )
+
+  if (status === 'subscribed') {
+    return null
+  }
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4',
+        alignItems: 'flex-start',
+        backgroundColor: 'background.marketing',
+        p: '8',
+        mb: '16',
+      })}
+    >
+      {data?.resubscribeEmail.status === 'pending' ? (
+        <>
+          <p>{t('account/newsletterSubscriptions/resubscribed')}</p>
+        </>
+      ) : status === 'unsubscribed' ? (
+        <>
+          <p>{t('account/newsletterSubscriptions/unsubscribed')}</p>
+
+          <Button
+            onClick={() => {
+              resubscribe()
+            }}
+            loading={loading}
+          >
+            {t('account/newsletterSubscriptions/resubscribe')}
+          </Button>
+        </>
+      ) : status === 'pending' ? (
+        <>
+          <p>{t('account/newsletterSubscriptions/resubscribeEmailPending')}</p>
+
+          <Button
+            onClick={() => {
+              resubscribe()
+            }}
+            loading={loading}
+            size='small'
+            variant='outline'
+          >
+            {t('account/newsletterSubscriptions/resendResubscribeEmail')}
+          </Button>
+        </>
+      ) : null}
+    </div>
+  )
+}

From 4f3be313e8f279ea66aa19b124305ce6bfea42ea Mon Sep 17 00:00:00 2001
From: Jeremy Stucki <jeremy.stucki@gmail.com>
Date: Thu, 8 Jan 2026 17:19:02 +0100
Subject: [PATCH 2/2] don't show pointer cursor on disabled newsletter card

---
 apps/www/src/components/newsletters/newsletters-card.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/www/src/components/newsletters/newsletters-card.tsx b/apps/www/src/components/newsletters/newsletters-card.tsx
index 9618f11f0a..7879a9f75d 100644
--- a/apps/www/src/components/newsletters/newsletters-card.tsx
+++ b/apps/www/src/components/newsletters/newsletters-card.tsx
@@ -160,9 +160,13 @@ function NewsletterCard({
         md: {
           flexDirection: 'column',
         },
+        _disabled: {
+          cursor: 'default',
+        },
       })}
       onClick={toggleSubscription}
       aria-disabled={disabled}
+      data-disabled={disabled}
       role='button'
     >
       <Image