feat(core): allow customer subscription to Newsletter

Author: jorgemoya

core/components/subscribe/_actions/subscribe.ts

@@ -1,10 +1,32 @@
 '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 { schema } from '@/vibes/soul/primitives/inline-email-form/schema';
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+
+const SubscribeToNewsletterMutation = graphql(`
+  mutation SubscribeToNewsletterMutation($input: SubscribeToNewsletterInput!) {
+    newsletter {
+      subscribe(input: $input) {
+        success
+        errors {
+          __typename
+          ... on CreateSubscriberEmailInvalidError {
+            message
+          }
+          ... on CreateSubscriberAlreadySubscribedError {
+            message
+          }
+        }
+      }
+    }
+  }
+`);
 
 export const subscribe = async (
   _lastResult: { lastResult: SubmissionResult | null },
@@ -18,8 +40,59 @@ export const subscribe = async (
     return { lastResult: submission.reply() };
   }
 
-  // Simulate a network request
-  await new Promise((resolve) => setTimeout(resolve, 1000));
+  try {
+    const response = await client.fetch({
+      document: SubscribeToNewsletterMutation,
+      variables: {
+        input: {
+          email: submission.value.email,
+        },
+      },
+      fetchOptions: {
+        cache: 'no-store',
+      },
+    });
+
+    if (response.data.success) {
+      return { lastResult: submission.reply(), successMessage: t('success') };
+    }
+
+    if (response.errors?.length > 0) {
+      return {
+        lastResult: submission.reply({
+          formErrors: response.errors.map(({ __typename }) => {
+            switch (__typename) {
+              case 'CreateSubscriberAlreadySubscribedError':
+                return t('Errors.subcriberAlreadyExists');
+
+              case 'CreateSubscriberEmailInvalidError':
+                return t('Errors.invalidEmail');
 
-  return { lastResult: submission.reply(), successMessage: t('success') };
+              default:
+                return t('Errors.somethingWentWrong');
+            }
+          }),
+        }),
+      };
+    }
+
+    return { lastResult: submission.reply({ formErrors: [t('Errors.somethingWentWrong')] }) };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+
+    if (error instanceof BigCommerceGQLError) {
+      return {
+        lastResult: submission.reply({
+          formErrors: error.errors.map(({ message }) => message),
+        }),
+      };
+    }
+
+    if (error instanceof Error) {
+      return { lastResult: submission.reply({ formErrors: [error.message] }) };
+    }
+
+    return { lastResult: submission.reply({ formErrors: [t('Errors.somethingWentWrong')] }) };
+  }
 };

core/messages/en.json

@@ -504,7 +504,12 @@
       "title": "Sign up for our newsletter",
       "placeholder": "Enter your email",
       "description": "Stay up to date with the latest news and offers from our store.",
-      "success": "Thank you for your interest! Newsletter feature is coming soon!"
+      "success": "You have been subscribed to our newsletter.",
+      "Errors": {
+        "subcriberAlreadyExists": "You are already subscribed to our newsletter.",
+        "invalidEmail": "Please enter a valid email address.",
+        "somethingWentWrong": "Something went wrong. Please try again later."
+      }
     },
     "ConsentManager": {
       "Common": {

core/tests/fixtures/index.ts

@@ -16,6 +16,7 @@ import { extendedPage, toHaveURL } from './page';
 import { PromotionFixture } from './promotion';
 import { RedirectsFixture } from './redirects';
 import { SettingsFixture } from './settings';
+import { SubscribeFixture } from './subscribe';
 import { WebPageFixture } from './webpage';
 
 interface Fixtures {
@@ -27,6 +28,7 @@ interface Fixtures {
   promotion: PromotionFixture;
   redirects: RedirectsFixture;
   settings: SettingsFixture;
+  subscribe: SubscribeFixture;
   webPage: WebPageFixture;
   /**
    * 'reuseCustomerSession' sets the the configuration for the customer fixture and determines whether to reuse the customer session.
@@ -131,6 +133,16 @@ export const test = baseTest.extend<Fixtures>({
     },
     { scope: 'test' },
   ],
+  subscribe: [
+    async ({ page }, use, currentTest) => {
+      const subscribeFixture = new SubscribeFixture(page, currentTest);
+
+      await use(subscribeFixture);
+
+      await subscribeFixture.cleanup();
+    },
+    { scope: 'test' },
+  ],
   webPage: [
     async ({ page }, use, currentTest) => {
       const webPageFixture = new WebPageFixture(page, currentTest);

core/tests/fixtures/subscribe/index.ts

@@ -0,0 +1,16 @@
+import { Fixture } from '~/tests/fixtures/fixture';
+
+export class SubscribeFixture extends Fixture {
+  subscribedEmails: string[] = [];
+
+  trackSubscription(email: string): void {
+    this.subscribedEmails.push(email);
+  }
+
+  async cleanup(): Promise<void> {
+    // Note: BigCommerce GraphQL API does not currently provide an unsubscribe mutation.
+    // Newsletter subscriptions cannot be cleaned up programmatically.
+    // This method is kept for consistency with other fixtures and future extensibility.
+    this.subscribedEmails = [];
+  }
+}

core/tests/ui/e2e/subscribe.spec.ts

@@ -0,0 +1,79 @@
+import { faker } from '@faker-js/faker';
+
+import { expect, test } from '~/tests/fixtures';
+import { getTranslations } from '~/tests/lib/i18n';
+import { TAGS } from '~/tests/tags';
+
+// Shared email for tests that need to use the same email
+const sharedEmail = faker.internet.email();
+
+test(
+  'Successfully subscribes a user to the newsletter',
+  { tag: [TAGS.writesData] },
+  async ({ page, subscribe }) => {
+    const t = await getTranslations('Components.Subscribe');
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    const email = sharedEmail;
+
+    const emailInput = page.getByPlaceholder(t('placeholder'));
+
+    await emailInput.fill(email);
+
+    const submitButton = page.locator('input[type="email"]').locator('..').getByRole('button');
+
+    await submitButton.click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.getByText(t('success'))).toBeVisible();
+
+    subscribe.trackSubscription(email);
+  },
+);
+
+test('Shows error when email is invalid', async ({ page }) => {
+  const t = await getTranslations('Components.Subscribe');
+
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+
+  const invalidEmail = 'not-an-email';
+
+  const emailInput = page.getByPlaceholder(t('placeholder'));
+
+  await emailInput.fill(invalidEmail);
+
+  const submitButton = page.locator('input[type="email"]').locator('..').getByRole('button');
+
+  await submitButton.click();
+  await page.waitForLoadState('networkidle');
+
+  await expect(page.getByText(t('Errors.invalidEmail'))).toBeVisible();
+});
+
+test('Shows error when user tries to subscribe again with the same email', async ({
+  page,
+  subscribe,
+}) => {
+  const t = await getTranslations('Components.Subscribe');
+
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+
+  const email = sharedEmail;
+
+  const emailInput = page.getByPlaceholder(t('placeholder'));
+  const submitButton = page.locator('input[type="email"]').locator('..').getByRole('button');
+
+  // Try to subscribe again with the same email (already subscribed in first test)
+  await emailInput.fill(email);
+  await submitButton.click();
+  await page.waitForLoadState('networkidle');
+
+  await expect(page.getByText(t('Errors.subcriberAlreadyExists'))).toBeVisible();
+
+  // Track that we attempted to subscribe this email (already tracked in first test)
+  subscribe.trackSubscription(email);
+});