Handle mailchimp subscription status in user settings

apps/www/graphql/republik-api/mutations/NewslettersResubscribe.gql

@@ -0,0 +1,6 @@
+mutation NewslettersResubscribe($userId: ID!) {
+  resubscribeEmail(userId: $userId) {
+    id
+    status
+  }
+}

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({
@@ -150,8 +160,13 @@ function NewsletterCard({
         md: {
           flexDirection: 'column',
         },
+        _disabled: {
+          cursor: 'default',
+        },
       })}
       onClick={toggleSubscription}
+      aria-disabled={disabled}
+      data-disabled={disabled}
       role='button'
     >
       <Image
@@ -210,11 +225,13 @@ function NewsletterCard({
             toggleSubscription={toggleSubscription}
             isPending={isPending}
             subscribed={subscribed}
+            disabled={disabled}
           />
           <MobileButton
             toggleSubscription={toggleSubscription}
             isPending={isPending}
             subscribed={subscribed}
+            disabled={disabled}
           />
         </div>
       )}

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'}
       />
     </>
   )

apps/www/src/components/newsletters/newsletters-section.tsx

@@ -2,25 +2,31 @@
 
 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'
 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>

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>
+  )
+}