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/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';
+
+test(
+  'Successfully subscribes a user to the newsletter',
+  { tag: [TAGS.writesData] },
+  async ({ page }) => {
+    const t = await getTranslations('Components.Subscribe');
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    const email = faker.internet.email();
+
+    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();
+  },
+);
+
+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',
+  { tag: [TAGS.writesData] },
+  async ({ page }) => {
+    const t = await getTranslations('Components.Subscribe');
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    const email = faker.internet.email();
+
+    const emailInput = page.getByPlaceholder(t('placeholder'));
+    const submitButton = page.locator('input[type="email"]').locator('..').getByRole('button');
+
+    // First subscription - should succeed
+    await emailInput.fill(email);
+    await submitButton.click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.getByText(t('success'))).toBeVisible();
+
+    // Try to subscribe again with the same email
+    await emailInput.fill(email);
+    await submitButton.click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.getByText(t('Errors.subcriberAlreadyExists'))).toBeVisible();
+  },
+);