feat(core): add toggle for newsletter in account settings

jorgemoya · jorgemoya · commit b525ef5417bd · 2025-12-18T18:27:49.000-06:00
diff --git a/core/app/[locale]/(default)/account/settings/_actions/update-newsletter-subscription.ts b/core/app/[locale]/(default)/account/settings/_actions/update-newsletter-subscription.ts
@@ -0,0 +1,120 @@
+'use server';
+
+import { BigCommerceGQLError } from '@bigcommerce/catalyst-client';
+import { SubmissionResult } from '@conform-to/react';
+import { parseWithZod } from '@conform-to/zod';
+import { getTranslations } from 'next-intl/server';
+import { z } from 'zod';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { serverToast } from '~/lib/server-toast';
+
+const updateNewsletterSubscriptionSchema = z.object({
+  intent: z.enum(['subscribe', 'unsubscribe']),
+});
+
+const SubscribeToNewsletterMutation = graphql(`
+  mutation SubscribeToNewsletterMutation($input: SubscribeToNewsletterInput!) {
+    newsletter {
+      subscribe(input: $input) {
+        success
+        errors {
+          __typename
+          ... on CreateSubscriberEmailInvalidError {
+            message
+          }
+          ... on CreateSubscriberAlreadySubscribedError {
+            message
+          }
+        }
+      }
+    }
+  }
+`);
+
+const UnsubscribeFromNewsletterMutation = graphql(`
+  mutation UnsubscribeFromNewsletterMutation($input: UnsubscribeFromNewsletterInput!) {
+    newsletter {
+      unsubscribe(input: $input) {
+        success
+        errors {
+          __typename
+          ... on DeleteSubscriberEmailInvalidError {
+            message
+          }
+          ... on DeleteSubscriberNotSubscribedError {
+            message
+          }
+        }
+      }
+    }
+  }
+`);
+
+export const updateNewsletterSubscription = async (
+  {
+    customerInfo,
+  }: {
+    customerInfo: {
+      entityId: number;
+      email: string;
+      firstName: string;
+      lastName: string;
+      company: string;
+    };
+  },
+  _prevState: { lastResult: SubmissionResult | null },
+  formData: FormData,
+) => {
+  const t = await getTranslations('Account.Settings.NewsletterSubscription');
+
+  console.log('form submit!', formData);
+
+  const submission = parseWithZod(formData, { schema: updateNewsletterSubscriptionSchema });
+
+  // TODO: fix error
+  console.log('submission', submission.status);
+
+  if (submission.status !== 'success') {
+    return { lastResult: submission.reply() };
+  }
+
+  try {
+    const response = await client.fetch({
+      document:
+        submission.value.intent === 'subscribe'
+          ? SubscribeToNewsletterMutation
+          : UnsubscribeFromNewsletterMutation,
+      variables: {
+        input: {
+          email: customerInfo.email,
+          firstName: customerInfo.firstName,
+          lastName: customerInfo.lastName,
+        },
+      },
+    });
+
+    if (response.data.success) {
+      await serverToast.success(t('success'));
+    } else {
+      await serverToast.error(t('somethingWentWrong'));
+    }
+
+    return { lastResult: submission.reply() };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+
+    if (error instanceof BigCommerceGQLError) {
+      // TODO: handle custom errors?
+      await serverToast.error(t('somethingWentWrong'));
+    }
+
+    if (error instanceof Error) {
+      await serverToast.error(error.message);
+    }
+
+    return { lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }) };
+  }
+};
diff --git a/core/app/[locale]/(default)/account/settings/page-data.tsx b/core/app/[locale]/(default)/account/settings/page-data.tsx
@@ -31,6 +31,9 @@ const CustomerSettingsQuery = graphql(
               ...FormFieldsFragment
             }
           }
+          newsletter {
+            showNewsletterSignup
+          }
         }
       }
     }
@@ -70,6 +73,7 @@ export const getCustomerSettingsQuery = cache(async ({ address, customer }: Prop
   const addressFields = response.data.site.settings?.formFields.shippingAddress;
   const customerFields = response.data.site.settings?.formFields.customer;
   const customerInfo = response.data.customer;
+  const storeSettings = response.data.site.settings?.newsletter;
 
   if (!addressFields || !customerFields || !customerInfo) {
     return null;
@@ -79,5 +83,6 @@ export const getCustomerSettingsQuery = cache(async ({ address, customer }: Prop
     addressFields,
     customerFields,
     customerInfo,
+    storeSettings,
   };
 });
diff --git a/core/app/[locale]/(default)/account/settings/page.tsx b/core/app/[locale]/(default)/account/settings/page.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
@@ -6,6 +7,7 @@ import { AccountSettingsSection } from '@/vibes/soul/sections/account-settings';
 
 import { changePassword } from './_actions/change-password';
 import { updateCustomer } from './_actions/update-customer';
+import { updateNewsletterSubscription } from './_actions/update-newsletter-subscription';
 import { getCustomerSettingsQuery } from './page-data';
 
 interface Props {
@@ -35,6 +37,15 @@ export default async function Settings({ params }: Props) {
     notFound();
   }
 
+  const newsletterSubscriptionEnabled = customerSettings.storeSettings?.showNewsletterSignup;
+
+  const updateNewsletterSubscriptionActionWithCustomerInfo = updateNewsletterSubscription.bind(
+    null,
+    {
+      customerInfo: customerSettings.customerInfo,
+    },
+  );
+
   return (
     <AccountSettingsSection
       account={customerSettings.customerInfo}
@@ -44,9 +55,14 @@ export default async function Settings({ params }: Props) {
       confirmPasswordLabel={t('confirmPassword')}
       currentPasswordLabel={t('currentPassword')}
       newPasswordLabel={t('newPassword')}
+      newsletterSubscriptionCtaLabel={t('cta')}
+      newsletterSubscriptionEnabled={newsletterSubscriptionEnabled}
+      newsletterSubscriptionLabel={t('NewsletterSubscription.label')}
+      newsletterSubscriptionTitle={t('NewsletterSubscription.title')}
       title={t('title')}
       updateAccountAction={updateCustomer}
       updateAccountSubmitLabel={t('cta')}
+      updateNewsletterSubscriptionAction={updateNewsletterSubscriptionActionWithCustomerInfo}
     />
   );
 }
diff --git a/core/messages/en.json b/core/messages/en.json
@@ -198,7 +198,13 @@
       "currentPassword": "Current password",
       "newPassword": "New password",
       "confirmPassword": "Confirm password",
-      "cta": "Update"
+      "cta": "Update",
+      "NewsletterSubscription": {
+        "title": "Marketing preferences",
+        "label": "Opt-in to receive emails about new products and promotions.",
+        "success": "Marketing preferences have been updated successfully!",
+        "somethingWentWrong": "Something went wrong. Please try again later."
+      }
     }
   },
   "Wishlist": {
diff --git a/core/vibes/soul/form/switch/index.tsx b/core/vibes/soul/form/switch/index.tsx
@@ -16,6 +16,7 @@ interface Props {
   onCheckedChange?: (checked: boolean) => void | Promise<void>;
   disabled?: boolean;
   loading?: boolean;
+  value?: string;
 }
 
 export const Switch = ({
@@ -28,6 +29,7 @@ export const Switch = ({
   loading,
   checked,
   onCheckedChange,
+  value,
 }: Props) => {
   const id = useId();
   const hasLabel = label != null && label !== '';
@@ -56,6 +58,7 @@ export const Switch = ({
         id={id}
         name={name}
         onCheckedChange={onCheckedChange}
+        value={value}
       >
         <SwitchPrimitive.Thumb
           className={clsx(
diff --git a/core/vibes/soul/sections/account-settings/index.tsx b/core/vibes/soul/sections/account-settings/index.tsx
@@ -1,4 +1,8 @@
 import { ChangePasswordAction, ChangePasswordForm } from './change-password-form';
+import {
+  NewsletterSubscriptionForm,
+  UpdateNewsletterSubscriptionAction,
+} from './newsletter-subscription-form';
 import { Account, UpdateAccountAction, UpdateAccountForm } from './update-account-form';
 
 export interface AccountSettingsSectionProps {
@@ -12,6 +16,11 @@ export interface AccountSettingsSectionProps {
   confirmPasswordLabel?: string;
   currentPasswordLabel?: string;
   newPasswordLabel?: string;
+  newsletterSubscriptionEnabled?: boolean;
+  newsletterSubscriptionTitle?: string;
+  newsletterSubscriptionLabel?: string;
+  newsletterSubscriptionCtaLabel?: string;
+  updateNewsletterSubscriptionAction?: UpdateNewsletterSubscriptionAction;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -39,6 +48,11 @@ export function AccountSettingsSection({
   confirmPasswordLabel,
   currentPasswordLabel,
   newPasswordLabel,
+  newsletterSubscriptionEnabled = false,
+  newsletterSubscriptionTitle = 'Marketing preferences',
+  newsletterSubscriptionLabel = 'Opt-in to receive emails about new products and promotions.',
+  newsletterSubscriptionCtaLabel = 'Save preferences',
+  updateNewsletterSubscriptionAction,
 }: AccountSettingsSectionProps) {
   return (
     <section className="w-full @container">
@@ -56,7 +70,7 @@ export function AccountSettingsSection({
               submitLabel={updateAccountSubmitLabel}
             />
           </div>
-          <div className="border-t border-[var(--account-settings-section-border,hsl(var(--contrast-100)))] pt-12">
+          <div className="border-t border-[var(--account-settings-section-border,hsl(var(--contrast-100)))] py-12">
             <h1 className="mb-10 font-[family-name:var(--account-settings-section-font-family,var(--font-family-heading))] text-2xl font-medium leading-none text-[var(--account-settings-section-text,var(--foreground))] @xl:text-2xl">
               {changePasswordTitle}
             </h1>
@@ -68,6 +82,19 @@ export function AccountSettingsSection({
               submitLabel={changePasswordSubmitLabel}
             />
           </div>
+          {newsletterSubscriptionEnabled && updateNewsletterSubscriptionAction && (
+            <div className="border-t border-[var(--account-settings-section-border,hsl(var(--contrast-100)))] pt-12">
+              <h1 className="mb-10 font-[family-name:var(--account-settings-section-font-family,var(--font-family-heading))] text-2xl font-medium leading-none text-[var(--account-settings-section-text,var(--foreground))] @xl:text-2xl">
+                {newsletterSubscriptionTitle}
+              </h1>
+              <NewsletterSubscriptionForm
+                action={updateNewsletterSubscriptionAction}
+                ctaLabel={newsletterSubscriptionCtaLabel}
+                isCustomerSubscribed={false}
+                label={newsletterSubscriptionLabel}
+              />
+            </div>
+          )}
         </div>
       </div>
     </section>
diff --git a/core/vibes/soul/sections/account-settings/newsletter-subscription-form.tsx b/core/vibes/soul/sections/account-settings/newsletter-subscription-form.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { SubmissionResult } from '@conform-to/react';
+import { ReactNode, useActionState, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+
+import { Switch } from '@/vibes/soul/form/switch';
+import { Button } from '@/vibes/soul/primitives/button';
+
+type Action<S, P> = (state: Awaited<S>, payload: P) => S | Promise<S>;
+
+interface State {
+  lastResult: SubmissionResult | null;
+}
+
+export type UpdateNewsletterSubscriptionAction = Action<State, FormData>;
+
+export interface NewsletterSubscriptionFormProps {
+  action: UpdateNewsletterSubscriptionAction;
+  isCustomerSubscribed: boolean;
+  label?: string;
+  ctaLabel?: string;
+}
+
+export function NewsletterSubscriptionForm({
+  action,
+  isCustomerSubscribed,
+  label = 'Opt-in to receive emails about new products and promotions.',
+  ctaLabel = 'Save preferences',
+}: NewsletterSubscriptionFormProps) {
+  const [checked, setChecked] = useState(isCustomerSubscribed);
+  const [, formAction] = useActionState(action, { lastResult: null });
+
+  const onCheckedChange = (value: boolean) => {
+    setChecked(value);
+  };
+
+  return (
+    <form action={formAction} className="space-y-5">
+      <input name="intent" type="hidden" value={checked ? 'unsubscribe' : 'subscribe'} />
+      <Switch
+        checked={checked}
+        label={label}
+        name="intent"
+        onCheckedChange={onCheckedChange}
+        value={checked ? 'unsubscribe' : 'subscribe'}
+      />
+      <SubmitButton disabled={isCustomerSubscribed === checked}>{ctaLabel}</SubmitButton>
+    </form>
+  );
+}
+
+function SubmitButton({ children, disabled = false }: { children: ReactNode; disabled?: boolean }) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      disabled={disabled || pending}
+      loading={pending}
+      size="small"
+      type="submit"
+      variant="secondary"
+    >
+      {children}
+    </Button>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,9 @@ const CustomerSettingsQuery = graphql(`
`31`	`31`	`...FormFieldsFragment`
`32`	`32`	`}`
`33`	`33`	`}`
	`34`	`+ newsletter {`
	`35`	`+ showNewsletterSignup`
	`36`	`+ }`
`34`	`37`	`}`
`35`	`38`	`}`
`36`	`39`	`}`
`@@ -70,6 +73,7 @@ export const getCustomerSettingsQuery = cache(async ({ address, customer }: Prop`
`70`	`73`	`const addressFields = response.data.site.settings?.formFields.shippingAddress;`
`71`	`74`	`const customerFields = response.data.site.settings?.formFields.customer;`
`72`	`75`	`const customerInfo = response.data.customer;`
	`76`	`+ const storeSettings = response.data.site.settings?.newsletter;`
`73`	`77`
`74`	`78`	`if (!addressFields \|\| !customerFields \|\| !customerInfo) {`
`75`	`79`	`return null;`
`@@ -79,5 +83,6 @@ export const getCustomerSettingsQuery = cache(async ({ address, customer }: Prop`
`79`	`83`	`addressFields,`
`80`	`84`	`customerFields,`
`81`	`85`	`customerInfo,`
	`86`	`+ storeSettings,`
`82`	`87`	`};`
`83`	`88`	`});`