diff --git a/packages/commerce-sdk-react/src/constant.ts b/packages/commerce-sdk-react/src/constant.ts
index 2e6b332995..a11b3c0237 100644
--- a/packages/commerce-sdk-react/src/constant.ts
+++ b/packages/commerce-sdk-react/src/constant.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Salesforce, Inc.
+ * Copyright (c) 2025, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -46,6 +46,7 @@ export const SERVER_AFFINITY_HEADER_KEY = 'sfdc_dwsid'
 
 export const CLIENT_KEYS = {
     SHOPPER_BASKETS: 'shopperBaskets',
+    SHOPPER_CONSENTS: 'shopperConsents',
     SHOPPER_CONTEXTS: 'shopperContexts',
     SHOPPER_CUSTOMERS: 'shopperCustomers',
     SHOPPER_EXPERIENCE: 'shopperExperience',
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/cache.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/cache.ts
new file mode 100644
index 0000000000..b0323cf46a
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/cache.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {ApiClients, CacheUpdateMatrix} from '../types'
+import {getSubscriptions} from './queryKeyHelpers'
+import {CLIENT_KEYS} from '../../constant'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONSENTS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+
+export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
+    updateSubscription(customerId, {parameters}, response) {
+        // When a subscription is updated, we invalidate the getSubscriptions query
+        // to ensure the UI reflects the latest subscription state
+        return {
+            invalidate: [{queryKey: getSubscriptions.queryKey(parameters)}]
+        }
+    },
+    updateSubscriptions(customerId, {parameters}, response) {
+        // When multiple subscriptions are updated, we invalidate the getSubscriptions query
+        // to ensure the UI reflects the latest subscription states
+        return {
+            invalidate: [{queryKey: getSubscriptions.queryKey(parameters)}]
+        }
+    }
+}
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.test.ts
new file mode 100644
index 0000000000..c46e5bd8df
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.test.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {ShopperConsents} from 'commerce-sdk-isomorphic'
+import {getUnimplementedEndpoints} from '../../test-utils'
+import {cacheUpdateMatrix} from './cache'
+import {ShopperConsentsMutations as mutations} from './mutation'
+import * as queries from './query'
+
+describe('Shopper Consents hooks', () => {
+    test('all endpoints have hooks', () => {
+        // unimplemented = SDK method exists, but no query hook or value in mutations enum
+        const unimplemented = getUnimplementedEndpoints(ShopperConsents, queries, mutations)
+        // If this test fails: create a new query hook, add the endpoint to the mutations enum,
+        // or add it to the `expected` array with a comment explaining "TODO" or "never" (and why).
+        expect(unimplemented).toEqual([])
+    })
+    test('all mutations have cache update logic', () => {
+        // unimplemented = value in mutations enum, but no method in cache update matrix
+        const unimplemented = new Set<string>(Object.values(mutations))
+        Object.entries(cacheUpdateMatrix).forEach(([method, implementation]) => {
+            if (implementation) unimplemented.delete(method)
+        })
+        // If this test fails: add cache update logic, remove the endpoint from the mutations enum,
+        // or add it to the `expected` array to indicate that it is still a TODO.
+        expect([...unimplemented]).toEqual([])
+    })
+})
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.ts
new file mode 100644
index 0000000000..0d56f4873c
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export * from './mutation'
+export * from './query'
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.test.ts
new file mode 100644
index 0000000000..820823b972
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.test.ts
@@ -0,0 +1,269 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {act} from '@testing-library/react'
+import {ShopperConsentsTypes} from 'commerce-sdk-isomorphic'
+import nock from 'nock'
+import {
+    assertInvalidateQuery,
+    mockMutationEndpoints,
+    mockQueryEndpoint,
+    renderHookWithProviders,
+    waitAndExpectSuccess
+} from '../../test-utils'
+import {ShopperConsentsMutation, useShopperConsentsMutation} from '../ShopperConsents'
+import {ApiClients, Argument} from '../types'
+import * as queries from './query'
+import {CLIENT_KEYS} from '../../constant'
+
+jest.mock('../../auth/index.ts', () => {
+    const {default: mockAuth} = jest.requireActual('../../auth/index.ts')
+    mockAuth.prototype.ready = jest.fn().mockResolvedValue({access_token: 'access_token'})
+    return mockAuth
+})
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONSENTS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+const consentsEndpoint = '/shopper/shopper-consents/'
+/** All Shopper Consents parameters. Can be used for all endpoints, as unused params are ignored. */
+const PARAMETERS = {
+    siteId: 'RefArch'
+} as const
+/** Options object that can be used for all query endpoints. */
+const queryOptions = {parameters: PARAMETERS}
+
+const baseSubscriptionResponse: ShopperConsentsTypes.ConsentSubscriptionResponse = {
+    data: [
+        {
+            subscriptionId: 'test-subscription',
+            channels: ['email' as ShopperConsentsTypes.ChannelType],
+            contactPointValue: 'test@example.com'
+        }
+    ]
+}
+
+type Mutation = ShopperConsentsMutation
+/** Map of mutation method name to test options. */
+type TestMap = {[Mut in Mutation]?: Argument<Client[Mut]>}
+const testMap: TestMap = {
+    updateSubscription: {
+        parameters: PARAMETERS,
+        body: {
+            subscriptionId: 'test-subscription',
+            channel: 'email',
+            status: 'opt_in',
+            contactPointValue: 'test@example.com'
+        }
+    },
+    updateSubscriptions: {
+        parameters: PARAMETERS,
+        body: {
+            subscriptions: [
+                {
+                    subscriptionId: 'test-subscription',
+                    channel: 'email' as ShopperConsentsTypes.ChannelType,
+                    status: 'opt_in' as ShopperConsentsTypes.ConsentStatus,
+                    contactPointValue: 'test@example.com'
+                }
+            ]
+        }
+    }
+}
+// Type assertion is necessary because `Object.entries` is limited
+type TestCase = [Mutation, NonNullable<TestMap[Mutation]>]
+const testCases = Object.entries(testMap) as TestCase[]
+
+describe('Shopper Consents mutations', () => {
+    beforeEach(() => nock.cleanAll())
+    test.each(testCases)('`%s` returns data on success', async (mutationName, options) => {
+        mockMutationEndpoints(consentsEndpoint, {})
+        const {result} = renderHookWithProviders(() => {
+            return useShopperConsentsMutation(mutationName)
+        })
+        act(() => result.current.mutate(options))
+        await waitAndExpectSuccess(() => result.current)
+    })
+})
+
+describe('Cache update behavior', () => {
+    describe('updateSubscription', () => {
+        beforeEach(() => nock.cleanAll())
+
+        test('invalidates `getSubscriptions` query', async () => {
+            mockQueryEndpoint(consentsEndpoint, baseSubscriptionResponse)
+            mockMutationEndpoints(consentsEndpoint, {})
+            const {result} = renderHookWithProviders(() => {
+                return {
+                    query: queries.useSubscriptions(queryOptions),
+                    mutation: useShopperConsentsMutation('updateSubscription')
+                }
+            })
+            await waitAndExpectSuccess(() => result.current.query)
+            const oldData = result.current.query.data
+
+            act(() =>
+                result.current.mutation.mutate({
+                    parameters: PARAMETERS,
+                    body: {
+                        subscriptionId: 'test-subscription',
+                        channel: 'email',
+                        status: 'opt_out',
+                        contactPointValue: 'test@example.com'
+                    }
+                })
+            )
+            await waitAndExpectSuccess(() => result.current.mutation)
+            assertInvalidateQuery(result.current.query, oldData)
+        })
+
+        test('triggers refetch after cache invalidation', async () => {
+            const updatedResponse: ShopperConsentsTypes.ConsentSubscriptionResponse = {
+                data: [
+                    {
+                        subscriptionId: 'test-subscription',
+                        channels: ['email' as ShopperConsentsTypes.ChannelType],
+                        contactPointValue: 'test@example.com'
+                    }
+                ]
+            }
+
+            mockQueryEndpoint(consentsEndpoint, baseSubscriptionResponse)
+            mockMutationEndpoints(consentsEndpoint, {})
+            mockQueryEndpoint(consentsEndpoint, updatedResponse) // Refetch returns updated data
+
+            const {result} = renderHookWithProviders(() => {
+                return {
+                    query: queries.useSubscriptions(queryOptions),
+                    mutation: useShopperConsentsMutation('updateSubscription')
+                }
+            })
+            await waitAndExpectSuccess(() => result.current.query)
+            expect(result.current.query.data).toEqual(baseSubscriptionResponse)
+
+            act(() =>
+                result.current.mutation.mutate({
+                    parameters: PARAMETERS,
+                    body: {
+                        subscriptionId: 'test-subscription',
+                        channel: 'email',
+                        status: 'opt_out',
+                        contactPointValue: 'test@example.com'
+                    }
+                })
+            )
+            await waitAndExpectSuccess(() => result.current.mutation)
+
+            // Wait for refetch to complete
+            await waitAndExpectSuccess(() => result.current.query)
+            // After refetch, data should be updated
+            expect(result.current.query.data).toEqual(updatedResponse)
+        })
+    })
+
+    describe('updateSubscriptions', () => {
+        beforeEach(() => nock.cleanAll())
+
+        test('invalidates `getSubscriptions` query', async () => {
+            mockQueryEndpoint(consentsEndpoint, baseSubscriptionResponse)
+            mockMutationEndpoints(consentsEndpoint, {})
+            const {result} = renderHookWithProviders(() => {
+                return {
+                    query: queries.useSubscriptions(queryOptions),
+                    mutation: useShopperConsentsMutation('updateSubscriptions')
+                }
+            })
+            await waitAndExpectSuccess(() => result.current.query)
+            const oldData = result.current.query.data
+
+            act(() =>
+                result.current.mutation.mutate({
+                    parameters: PARAMETERS,
+                    body: {
+                        subscriptions: [
+                            {
+                                subscriptionId: 'test-subscription',
+                                channel: 'email' as ShopperConsentsTypes.ChannelType,
+                                status: 'opt_out' as ShopperConsentsTypes.ConsentStatus,
+                                contactPointValue: 'test@example.com'
+                            },
+                            {
+                                subscriptionId: 'test-subscription-2',
+                                channel: 'sms' as ShopperConsentsTypes.ChannelType,
+                                status: 'opt_in' as ShopperConsentsTypes.ConsentStatus,
+                                contactPointValue: '+15551234567'
+                            }
+                        ]
+                    }
+                })
+            )
+            await waitAndExpectSuccess(() => result.current.mutation)
+            assertInvalidateQuery(result.current.query, oldData)
+        })
+
+        test('ensures stale cache is not served after mutation', async () => {
+            const staleResponse = baseSubscriptionResponse
+            const freshResponse: ShopperConsentsTypes.ConsentSubscriptionResponse = {
+                data: [
+                    {
+                        subscriptionId: 'test-subscription',
+                        channels: ['email' as ShopperConsentsTypes.ChannelType],
+                        contactPointValue: 'test@example.com'
+                    },
+                    {
+                        subscriptionId: 'test-subscription-2',
+                        channels: ['sms' as ShopperConsentsTypes.ChannelType],
+                        contactPointValue: '+15551234567'
+                    }
+                ]
+            }
+
+            mockQueryEndpoint(consentsEndpoint, staleResponse)
+            mockMutationEndpoints(consentsEndpoint, {})
+            mockQueryEndpoint(consentsEndpoint, freshResponse) // Refetch returns fresh data
+
+            const {result} = renderHookWithProviders(() => {
+                return {
+                    query: queries.useSubscriptions(queryOptions),
+                    mutation: useShopperConsentsMutation('updateSubscriptions')
+                }
+            })
+
+            // Initial fetch - get stale data
+            await waitAndExpectSuccess(() => result.current.query)
+            expect(result.current.query.data?.data).toHaveLength(1)
+
+            // Perform mutation
+            act(() =>
+                result.current.mutation.mutate({
+                    parameters: PARAMETERS,
+                    body: {
+                        subscriptions: [
+                            {
+                                subscriptionId: 'test-subscription',
+                                channel: 'email' as ShopperConsentsTypes.ChannelType,
+                                status: 'opt_out' as ShopperConsentsTypes.ConsentStatus,
+                                contactPointValue: 'test@example.com'
+                            },
+                            {
+                                subscriptionId: 'test-subscription-2',
+                                channel: 'sms' as ShopperConsentsTypes.ChannelType,
+                                status: 'opt_in' as ShopperConsentsTypes.ConsentStatus,
+                                contactPointValue: '+15551234567'
+                            }
+                        ]
+                    }
+                })
+            )
+            await waitAndExpectSuccess(() => result.current.mutation)
+
+            // Wait for automatic refetch
+            await waitAndExpectSuccess(() => result.current.query)
+            // Should have fresh data, not stale
+            expect(result.current.query.data?.data).toHaveLength(2)
+            expect(result.current.query.data).toEqual(freshResponse)
+        })
+    })
+})
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.ts
new file mode 100644
index 0000000000..22cef56a52
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/mutation.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {ApiClients, ApiMethod, Argument, CacheUpdateGetter, DataType, MergedOptions} from '../types'
+import {useMutation} from '../useMutation'
+import {UseMutationResult} from '@tanstack/react-query'
+import {NotImplementedError} from '../utils'
+import {cacheUpdateMatrix} from './cache'
+import {CLIENT_KEYS} from '../../constant'
+import useCommerceApi from '../useCommerceApi'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONSENTS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+
+/**
+ * Mutations available for Shopper Consents.
+ * @group ShopperConsents
+ * @category Mutation
+ * @enum
+ */
+export const ShopperConsentsMutations = {
+    /**
+     * Updates the customer's consent subscription for a specific channel.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Consents `updateSubscription` endpoint.
+     */
+    UpdateSubscription: 'updateSubscription',
+    /**
+     * Updates multiple customer consent subscriptions.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Consents `updateSubscriptions` endpoint.
+     */
+    UpdateSubscriptions: 'updateSubscriptions'
+} as const
+
+/**
+ * Mutation for Shopper Consents.
+ * @group ShopperConsents
+ * @category Mutation
+ */
+export type ShopperConsentsMutation =
+    (typeof ShopperConsentsMutations)[keyof typeof ShopperConsentsMutations]
+
+/**
+ * Mutation hook for Shopper Consents.
+ * @group ShopperConsents
+ * @category Mutation
+ */
+export function useShopperConsentsMutation<Mutation extends ShopperConsentsMutation>(
+    mutation: Mutation
+): UseMutationResult<DataType<Client[Mutation]>, unknown, Argument<Client[Mutation]>> {
+    const getCacheUpdates = cacheUpdateMatrix[mutation]
+    // TODO: Remove this check when all mutations are implemented.
+    if (!getCacheUpdates) throw new NotImplementedError(`The '${mutation}' mutation`)
+
+    // The `Options` and `Data` types for each mutation are similar, but distinct, and the union
+    // type generated from `Client[Mutation]` seems to be too complex for TypeScript to handle.
+    // I'm not sure if there's a way to avoid the type assertions in here for the methods that
+    // use them. However, I'm fairly confident that they are safe to do, as they seem to be simply
+    // re-asserting what we already have.
+    const client = useCommerceApi(CLIENT_KEY)
+    type Options = Argument<Client[Mutation]>
+    type Data = DataType<Client[Mutation]>
+    return useMutation({
+        client,
+        method: (opts: Options) => (client[mutation] as ApiMethod<Options, Data>)(opts),
+        getCacheUpdates: getCacheUpdates as unknown as CacheUpdateGetter<
+            MergedOptions<Client, Options>,
+            Data
+        >
+    })
+}
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.test.ts
new file mode 100644
index 0000000000..588cef455e
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.test.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {ShopperConsentsTypes} from 'commerce-sdk-isomorphic'
+import nock from 'nock'
+import {
+    mockQueryEndpoint,
+    renderHookWithProviders,
+    waitAndExpectError,
+    waitAndExpectSuccess,
+    createQueryClient
+} from '../../test-utils'
+import * as queries from './query'
+
+jest.mock('../../auth/index.ts', () => {
+    const {default: mockAuth} = jest.requireActual('../../auth/index.ts')
+    mockAuth.prototype.ready = jest.fn().mockResolvedValue({access_token: 'access_token'})
+    return mockAuth
+})
+type Queries = typeof queries
+const consentsEndpoint = '/shopper/shopper-consents/'
+// Not all endpoints use all parameters, but unused parameters are safely discarded
+const OPTIONS = {parameters: {siteId: 'RefArch'}}
+
+/** Map of query name to returned data type */
+type TestMap = {[K in keyof Queries]: NonNullable<ReturnType<Queries[K]>['data']>}
+// This is an object rather than an array to more easily ensure we cover all hooks
+const testMap: TestMap = {
+    // Type assertion so that we don't have to implement the full type
+    useSubscriptions: {data: []} as ShopperConsentsTypes.ConsentSubscriptionResponse
+}
+// Type assertion is necessary because `Object.entries` is limited
+const testCases = Object.entries(testMap) as Array<[keyof TestMap, TestMap[keyof TestMap]]>
+describe('Shopper Consents query hooks', () => {
+    beforeEach(() => nock.cleanAll())
+    afterEach(() => {
+        expect(nock.pendingMocks()).toHaveLength(0)
+    })
+    test.each(testCases)('`%s` returns data on success', async (queryName, data) => {
+        mockQueryEndpoint(consentsEndpoint, data)
+        const {result} = renderHookWithProviders(() => {
+            return queries[queryName](OPTIONS)
+        })
+        await waitAndExpectSuccess(() => result.current)
+        expect(result.current.data).toEqual(data)
+    })
+
+    test.each(testCases)('`%s` has meta.displayName defined', async (queryName, data) => {
+        mockQueryEndpoint(consentsEndpoint, data)
+        const queryClient = createQueryClient()
+        const {result} = renderHookWithProviders(
+            () => {
+                return queries[queryName](OPTIONS)
+            },
+            {queryClient}
+        )
+        await waitAndExpectSuccess(() => result.current)
+        expect(queryClient.getQueryCache().getAll()[0].meta?.displayName).toBe(queryName)
+    })
+
+    test.each(testCases)('`%s` returns error on error', async (queryName) => {
+        mockQueryEndpoint(consentsEndpoint, {}, 400)
+        const {result} = renderHookWithProviders(() => {
+            return queries[queryName](OPTIONS)
+        })
+        await waitAndExpectError(() => result.current)
+    })
+})
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.ts
new file mode 100644
index 0000000000..0abb3ac154
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/query.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {UseQueryResult} from '@tanstack/react-query'
+import {ShopperConsents} from 'commerce-sdk-isomorphic'
+import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
+import {useQuery} from '../useQuery'
+import {mergeOptions, omitNullableParameters, pickValidParams} from '../utils'
+import * as queryKeyHelpers from './queryKeyHelpers'
+import {CLIENT_KEYS} from '../../constant'
+import useCommerceApi from '../useCommerceApi'
+
+const CLIENT_KEY = CLIENT_KEYS.SHOPPER_CONSENTS
+type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
+
+/**
+ * Gets the customer's consents for receiving marketing emails, SMS, etc.
+ * @group ShopperConsents
+ * @category Query
+ * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters.
+ * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set.
+ * @returns A TanStack Query query hook with data from the Shopper Consents `getSubscriptions` endpoint.
+ * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-consents?meta=getSubscriptions| Salesforce Developer Center} for more information about the API endpoint.
+ * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperconsents.shopperconsents-1.html#getsubscriptions | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type.
+ * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value.
+ */
+export const useSubscriptions = (
+    apiOptions: NullableParameters<Argument<Client['getSubscriptions']>>,
+    queryOptions: ApiQueryOptions<Client['getSubscriptions']> = {}
+): UseQueryResult<DataType<Client['getSubscriptions']>> => {
+    type Options = Argument<Client['getSubscriptions']>
+    type Data = DataType<Client['getSubscriptions']>
+    const client = useCommerceApi(CLIENT_KEY)
+    const methodName = 'getSubscriptions'
+    const requiredParameters = ShopperConsents.paramKeys[`${methodName}Required`]
+
+    // Parameters can be set in `apiOptions` or `client.clientConfig`;
+    // we must merge them in order to generate the correct query key.
+    const netOptions = omitNullableParameters(mergeOptions(client, apiOptions))
+    const parameters = pickValidParams(netOptions.parameters, ShopperConsents.paramKeys[methodName])
+    const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters)
+
+    // We don't use `netOptions` here because we manipulate the options in `useQuery`.
+    const method = async (options: Options) => await client[methodName](options)
+
+    queryOptions.meta = {
+        displayName: 'useSubscriptions',
+        ...queryOptions.meta
+    }
+
+    // For some reason, if we don't explicitly set these generic parameters, the inferred type for
+    // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
+        method,
+        queryKey,
+        requiredParameters
+    })
+}
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperConsents/queryKeyHelpers.ts b/packages/commerce-sdk-react/src/hooks/ShopperConsents/queryKeyHelpers.ts
new file mode 100644
index 0000000000..4e8e8bbde0
--- /dev/null
+++ b/packages/commerce-sdk-react/src/hooks/ShopperConsents/queryKeyHelpers.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {ShopperConsents} from 'commerce-sdk-isomorphic'
+import {Argument, ExcludeTail} from '../types'
+import {pickValidParams} from '../utils'
+
+// We must use a client with no parameters in order to have required/optional match the API spec
+type Client = ShopperConsents<{shortCode: string}>
+type Params<T extends keyof QueryKeys> = Partial<Argument<Client[T]>['parameters']>
+export type QueryKeys = {
+    getSubscriptions: [
+        '/commerce-sdk-react',
+        '/organizations/',
+        string | undefined,
+        '/shopper-consents/subscriptions',
+        Params<'getSubscriptions'>
+    ]
+}
+
+// This is defined here, rather than `types.ts`, because it relies on `Client` and `QueryKeys`,
+// and making those generic would add too much complexity.
+type QueryKeyHelper<T extends keyof QueryKeys> = {
+    /** Generates the path component of the query key for an endpoint. */
+    path: (params: Params<T>) => ExcludeTail<QueryKeys[T]>
+    /** Generates the full query key for an endpoint. */
+    queryKey: (params: Params<T>) => QueryKeys[T]
+}
+
+export const getSubscriptions: QueryKeyHelper<'getSubscriptions'> = {
+    path: (params) => [
+        '/commerce-sdk-react',
+        '/organizations/',
+        params?.organizationId,
+        '/shopper-consents/subscriptions'
+    ],
+    queryKey: (params: Params<'getSubscriptions'>) => {
+        return [
+            ...getSubscriptions.path(params),
+            pickValidParams(params || {}, ShopperConsents.paramKeys.getSubscriptions)
+        ]
+    }
+}
diff --git a/packages/commerce-sdk-react/src/hooks/index.ts b/packages/commerce-sdk-react/src/hooks/index.ts
index c285391d0c..43cc7daaad 100644
--- a/packages/commerce-sdk-react/src/hooks/index.ts
+++ b/packages/commerce-sdk-react/src/hooks/index.ts
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2024, Salesforce, Inc.
+ * Copyright (c) 2025, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 export * from './ShopperBaskets'
+export * from './ShopperConsents'
 export * from './ShopperContexts'
 export * from './ShopperCustomers'
 export * from './ShopperExperience'
diff --git a/packages/commerce-sdk-react/src/hooks/types.ts b/packages/commerce-sdk-react/src/hooks/types.ts
index 6390bd262f..a86ded5753 100644
--- a/packages/commerce-sdk-react/src/hooks/types.ts
+++ b/packages/commerce-sdk-react/src/hooks/types.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Salesforce, Inc.
+ * Copyright (c) 2025, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -8,6 +8,7 @@ import {InvalidateQueryFilters, QueryFilters, Updater, UseQueryOptions} from '@t
 import {
     ShopperBaskets,
     ShopperConfigurations,
+    ShopperConsents,
     ShopperContexts,
     ShopperCustomers,
     ShopperExperience,
@@ -86,6 +87,7 @@ export type ApiClientConfigParams = {
  */
 export interface ApiClients {
     shopperBaskets?: ShopperBaskets<ApiClientConfigParams>
+    shopperConsents?: ShopperConsents<ApiClientConfigParams>
     shopperContexts?: ShopperContexts<ApiClientConfigParams>
     shopperCustomers?: ShopperCustomers<ApiClientConfigParams>
     shopperExperience?: ShopperExperience<ApiClientConfigParams>
diff --git a/packages/commerce-sdk-react/src/provider.tsx b/packages/commerce-sdk-react/src/provider.tsx
index 11605f6e8a..bb4ce39f1d 100644
--- a/packages/commerce-sdk-react/src/provider.tsx
+++ b/packages/commerce-sdk-react/src/provider.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, salesforce.com, inc.
+ * Copyright (c) 2025, salesforce.com, inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -11,6 +11,7 @@ import {Logger} from './types'
 import {DWSID_COOKIE_NAME, SERVER_AFFINITY_HEADER_KEY} from './constant'
 import {
     ShopperBaskets,
+    ShopperConsents,
     ShopperContexts,
     ShopperConfigurations,
     ShopperCustomers,
@@ -257,6 +258,7 @@ const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
 
         return {
             shopperBaskets: new ShopperBaskets(config),
+            shopperConsents: new ShopperConsents(config),
             shopperContexts: new ShopperContexts(config),
             shopperConfigurations: new ShopperConfigurations(config),
             shopperCustomers: new ShopperCustomers(config),
diff --git a/packages/template-retail-react-app/app/components/footer/index.jsx b/packages/template-retail-react-app/app/components/footer/index.jsx
index 9500aad913..daebaa5d3d 100644
--- a/packages/template-retail-react-app/app/components/footer/index.jsx
+++ b/packages/template-retail-react-app/app/components/footer/index.jsx
@@ -13,27 +13,23 @@ import {
     SimpleGrid,
     useMultiStyleConfig,
     Select as ChakraSelect,
-    Heading,
-    Input,
-    InputGroup,
-    InputRightElement,
     createStylesContext,
-    Button,
     FormControl
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useIntl} from 'react-intl'
 
 import LinksList from '@salesforce/retail-react-app/app/components/links-list'
-import SocialIcons from '@salesforce/retail-react-app/app/components/social-icons'
+import SubscribeMarketingConsent from '@salesforce/retail-react-app/app/components/subscription'
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import {getPathWithLocale} from '@salesforce/retail-react-app/app/utils/url'
 import LocaleText from '@salesforce/retail-react-app/app/components/locale-text'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import styled from '@emotion/styled'
 import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
+import {CONSENT_TAGS} from '@salesforce/retail-react-app/app/constants/marketing-consent'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
-const [StylesProvider, useStyles] = createStylesContext('Footer')
+const [StylesProvider] = createStylesContext('Footer')
 const Footer = ({...otherProps}) => {
     const styles = useMultiStyleConfig('Footer')
     const intl = useIntl()
@@ -129,13 +125,13 @@ const Footer = ({...otherProps}) => {
                                 links={makeOurCompanyLinks()}
                             />
                             <Box>
-                                <Subscribe />
+                                <SubscribeMarketingConsent tag={CONSENT_TAGS.EMAIL_CAPTURE} />
                             </Box>
                         </SimpleGrid>
                     </HideOnMobile>
 
                     <HideOnDesktop>
-                        <Subscribe />
+                        <SubscribeMarketingConsent tag={CONSENT_TAGS.EMAIL_CAPTURE} />
                     </HideOnDesktop>
 
                     {showLocaleSelector && (
@@ -202,56 +198,6 @@ const Footer = ({...otherProps}) => {
 
 export default Footer
 
-const Subscribe = ({...otherProps}) => {
-    const styles = useStyles()
-    const intl = useIntl()
-    return (
-        <Box {...styles.subscribe} {...otherProps}>
-            <Heading as="h2" {...styles.subscribeHeading}>
-                {intl.formatMessage({
-                    id: 'footer.subscribe.heading.first_to_know',
-                    defaultMessage: 'Be the first to know'
-                })}
-            </Heading>
-            <Text {...styles.subscribeMessage}>
-                {intl.formatMessage({
-                    id: 'footer.subscribe.description.sign_up',
-                    defaultMessage: 'Sign up to stay in the loop about the hottest deals'
-                })}
-            </Text>
-
-            <Box>
-                <InputGroup>
-                    {/* Had to swap the following InputRightElement and Input
-                        to avoid the hydration error due to mismatched html between server and client side.
-                        This is a workaround for Lastpass plugin that automatically injects its icon for input fields.
-                    */}
-                    <InputRightElement {...styles.subscribeButtonContainer}>
-                        <Button variant="footer">
-                            {intl.formatMessage({
-                                id: 'footer.subscribe.button.sign_up',
-                                defaultMessage: 'Sign Up'
-                            })}
-                        </Button>
-                    </InputRightElement>
-                    <Input
-                        type="email"
-                        placeholder="you@email.com"
-                        aria-label={intl.formatMessage({
-                            id: 'footer.subscribe.email.assistive_msg',
-                            defaultMessage: 'Email address for newsletter'
-                        })}
-                        id="subscribe-email"
-                        {...styles.subscribeField}
-                    />
-                </InputGroup>
-            </Box>
-
-            <SocialIcons variant="flex-start" pinterestInnerColor="black" {...styles.socialIcons} />
-        </Box>
-    )
-}
-
 const LegalLinks = ({variant}) => {
     const intl = useIntl()
     return (
diff --git a/packages/template-retail-react-app/app/components/footer/index.test.js b/packages/template-retail-react-app/app/components/footer/index.test.js
index 335656bcbf..8fc63383ec 100644
--- a/packages/template-retail-react-app/app/components/footer/index.test.js
+++ b/packages/template-retail-react-app/app/components/footer/index.test.js
@@ -12,7 +12,8 @@ import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-u
 
 test('renders component', () => {
     renderWithProviders(<Footer />)
-    expect(screen.getByRole('link', {name: 'Privacy Policy'})).toBeInTheDocument()
+    const privacyLinks = screen.getAllByRole('link', {name: 'Privacy Policy'})
+    expect(privacyLinks.length).toBeGreaterThanOrEqual(1)
 })
 
 test('renders mobile version by default', () => {
@@ -20,3 +21,14 @@ test('renders mobile version by default', () => {
     // This link is hidden initially, but would be shown for desktop
     expect(screen.getByRole('link', {name: 'About Us', hidden: true})).toBeInTheDocument()
 })
+
+test('renders SubscribeForm within Footer', () => {
+    renderWithProviders(<Footer />)
+    // Verify SubscribeForm renders correctly inside Footer
+    // Note: Footer renders SubscribeForm twice (mobile + desktop versions), so we use getAllBy
+    expect(screen.getByRole('heading', {name: /subscribe to stay updated/i})).toBeInTheDocument()
+    const emailInputs = screen.getAllByLabelText(/email address for newsletter/i)
+    expect(emailInputs.length).toBeGreaterThanOrEqual(1)
+    const signUpButtons = screen.getAllByRole('button', {name: /subscribe/i})
+    expect(signUpButtons.length).toBeGreaterThanOrEqual(1)
+})
diff --git a/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js b/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js
new file mode 100644
index 0000000000..ccaca21be1
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {useCallback, useMemo, useState} from 'react'
+import {
+    CONSENT_CHANNELS,
+    CONSENT_STATUS
+} from '@salesforce/retail-react-app/app/constants/marketing-consent'
+import {useMarketingConsent} from '@salesforce/retail-react-app/app/hooks/use-marketing-consent'
+import {validateEmail} from '@salesforce/retail-react-app/app/utils/subscription-validators'
+import {useIntl} from 'react-intl'
+
+/**
+ * Hook for managing email subscription form state and submission.
+ * This hook dynamically fetches all subscriptions matching a given tag and email channel,
+ * then opts the user into ALL matching subscriptions when they submit their email.
+ *
+ * Subscriptions are fetched on-demand when the user clicks submit, not on component mount.
+ *
+ * This allows marketers to configure subscriptions without code changes to the storefront UI.
+ *
+ * @param {Object} options
+ * @param {string|Array<string>} options.tag - The consent tag(s) to filter subscriptions by (e.g., CONSENT_TAGS.EMAIL_CAPTURE or [CONSENT_TAGS.EMAIL_CAPTURE, CONSENT_TAGS.ACCOUNT])
+ * @returns {Object} Email subscription state and actions
+ * @returns {Object} return.state - Current form state
+ * @returns {string} return.state.email - Current email value
+ * @returns {boolean} return.state.isLoading - Whether submission is in progress
+ * @returns {Object} return.state.feedback - Feedback message and type
+ * @returns {string} return.state.feedback.message - User-facing message
+ * @returns {string} return.state.feedback.type - Message type ('success' | 'error')
+ * @returns {Object} return.actions - Available actions
+ * @returns {Function} return.actions.setEmail - Update email value
+ * @returns {Function} return.actions.submit - Submit the subscription
+ *
+ * @example
+ * const {state, actions} = useEmailSubscription({
+ *   tag: CONSENT_TAGS.EMAIL_CAPTURE
+ * })
+ */
+export const useEmailSubscription = ({tag} = {}) => {
+    // Normalize tag to array for API call
+    const tags = useMemo(() => {
+        if (!tag) return []
+        return Array.isArray(tag) ? tag : [tag]
+    }, [tag])
+
+    const {
+        refetch: fetchSubscriptions,
+        updateSubscriptions,
+        isUpdating,
+        isFeatureEnabled
+    } = useMarketingConsent({
+        tags,
+        enabled: false
+    })
+
+    const intl = useIntl()
+    const {formatMessage} = intl
+
+    const [email, setEmail] = useState('')
+    const [message, setMessage] = useState(null)
+    const [messageType, setMessageType] = useState('success')
+
+    const messages = useMemo(
+        () => ({
+            success_confirmation: formatMessage({
+                id: 'footer.success_confirmation',
+                defaultMessage: 'Thanks for subscribing!'
+            }),
+            error: {
+                enter_valid_email: formatMessage({
+                    id: 'footer.error.enter_valid_email',
+                    defaultMessage: 'Enter a valid email address.'
+                }),
+                generic_error: formatMessage({
+                    id: 'footer.error.generic_error',
+                    defaultMessage: "We couldn't process the subscription. Try again."
+                })
+            }
+        }),
+        [formatMessage]
+    )
+
+    const handleSignUp = useCallback(async () => {
+        // return immediately if feature is not enabled.
+        if (!isFeatureEnabled) {
+            console.error('[useEmailSubscription] Feature not enabled. Subscribe action ignored.')
+            return
+        }
+
+        // Clear any prior validation messages
+        setMessage(null)
+
+        // Validate email using the utility validator
+        const validation = validateEmail(email)
+
+        if (!validation.valid) {
+            setMessage(messages.error.enter_valid_email)
+            setMessageType('error')
+            return
+        }
+
+        try {
+            // Fetch subscriptions on-demand when submitting
+            const {data: freshSubscriptionsData} = await fetchSubscriptions()
+            const allSubscriptions = freshSubscriptionsData?.data || []
+
+            // Find matching subscriptions
+            const matchingSubs = allSubscriptions.filter((sub) => {
+                const hasEmailChannel = sub.channels?.includes(CONSENT_CHANNELS.EMAIL)
+                const hasAnyTag = tags.some((t) => sub.tags?.includes(t))
+                return hasEmailChannel && hasAnyTag
+            })
+
+            // Check if there are any matching subscriptions
+            if (matchingSubs.length === 0) {
+                const tagList = tags.join(', ')
+                console.error(
+                    `[useEmailSubscription] No subscriptions found for tag(s) "${tagList}" and channel "${CONSENT_CHANNELS.EMAIL}".`
+                )
+                setMessage(messages.error.generic_error)
+                setMessageType('error')
+                return
+            }
+
+            // Build array of subscription updates for ALL matching subscriptions
+            const subscriptionUpdates = matchingSubs.map((sub) => ({
+                subscriptionId: sub.subscriptionId,
+                contactPointValue: email,
+                channel: CONSENT_CHANNELS.EMAIL,
+                status: CONSENT_STATUS.OPT_IN
+            }))
+
+            console.log(
+                `[useEmailSubscription] Opting in to ${subscriptionUpdates.length} subscription(s):`,
+                subscriptionUpdates.map((s) => s.subscriptionId)
+            )
+
+            // Submit the consent using Shopper Consents Bulk API
+            await updateSubscriptions(subscriptionUpdates)
+
+            setMessage(messages.success_confirmation)
+            setMessageType('success')
+            setEmail('')
+        } catch (err) {
+            console.error('[useEmailSubscription] Subscription error:', err)
+            setMessage(messages.error.generic_error)
+            setMessageType('error')
+        }
+    }, [email, tags, isFeatureEnabled, fetchSubscriptions, updateSubscriptions, messages])
+
+    return {
+        state: {
+            email,
+            isLoading: isUpdating,
+            feedback: {message, type: messageType}
+        },
+        actions: {
+            setEmail,
+            submit: handleSignUp
+        }
+    }
+}
+
+export default useEmailSubscription
diff --git a/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.test.js b/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.test.js
new file mode 100644
index 0000000000..53aaef3280
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.test.js
@@ -0,0 +1,980 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import {renderHook, act, waitFor} from '@testing-library/react'
+import {IntlProvider} from 'react-intl'
+import {useEmailSubscription} from '@salesforce/retail-react-app/app/components/subscription/hooks/use-email-subscription'
+import {useMarketingConsent} from '@salesforce/retail-react-app/app/hooks/use-marketing-consent'
+
+// Mock dependencies
+jest.mock('@salesforce/retail-react-app/app/hooks/use-marketing-consent')
+
+// Create a wrapper component that provides IntlProvider with mocked formatMessage
+const createWrapper = () => {
+    // eslint-disable-next-line react/prop-types
+    const Wrapper = ({children}) => (
+        <IntlProvider
+            locale="en-US"
+            defaultLocale="en-US"
+            messages={{}}
+            // Override formatMessage to return plain strings
+            onError={() => {}}
+        >
+            {children}
+        </IntlProvider>
+    )
+    Wrapper.displayName = 'IntlWrapper'
+    return Wrapper
+}
+
+// Mock formatMessage globally to ensure it returns plain strings
+const originalFormatMessage = IntlProvider.prototype.formatMessage
+beforeAll(() => {
+    // Mock formatMessage on IntlProvider
+    IntlProvider.prototype.formatMessage = function (msg) {
+        return msg.defaultMessage || msg.id
+    }
+})
+afterAll(() => {
+    IntlProvider.prototype.formatMessage = originalFormatMessage
+})
+
+// Mock console.error and console.log to avoid cluttering test output
+const originalConsoleError = console.error
+const originalConsoleLog = console.log
+beforeAll(() => {
+    console.error = jest.fn()
+    console.log = jest.fn()
+})
+afterAll(() => {
+    console.error = originalConsoleError
+    console.log = originalConsoleLog
+})
+
+describe('useEmailSubscription', () => {
+    const mockUpdateSubscriptions = jest.fn()
+    const mockGetSubscriptionsByTagAndChannel = jest.fn()
+
+    const mockMatchingSubscriptions = [
+        {
+            subscriptionId: 'weekly-newsletter',
+            channels: ['email'],
+            tags: ['email_capture']
+        },
+        {
+            subscriptionId: 'promotional-offers',
+            channels: ['email'],
+            tags: ['email_capture']
+        }
+    ]
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        // Default mock implementations
+        mockGetSubscriptionsByTagAndChannel.mockReturnValue(mockMatchingSubscriptions)
+
+        useMarketingConsent.mockReturnValue({
+            data: {data: mockMatchingSubscriptions},
+            isLoading: false,
+            isFeatureEnabled: true,
+            refetch: jest.fn().mockResolvedValue({data: {data: mockMatchingSubscriptions}}),
+            updateSubscriptions: mockUpdateSubscriptions,
+            isUpdating: false,
+            getSubscriptionsByTagAndChannel: mockGetSubscriptionsByTagAndChannel
+        })
+    })
+
+    describe('Initial state', () => {
+        test('returns correct initial state', () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(result.current.state.email).toBe('')
+            expect(result.current.state.isLoading).toBe(false)
+            expect(result.current.state.feedback.message).toBeNull()
+            expect(result.current.state.feedback.type).toBe('success')
+        })
+
+        test('provides setEmail and submit actions', () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(typeof result.current.actions.setEmail).toBe('function')
+            expect(typeof result.current.actions.submit).toBe('function')
+        })
+
+        test('passes tags to useMarketingConsent when tag is a string', () => {
+            renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({
+                tags: ['email_capture'],
+                enabled: false
+            })
+        })
+
+        test('passes tags to useMarketingConsent when tag is an array', () => {
+            renderHook(() => useEmailSubscription({tag: ['email_capture', 'account']}), {
+                wrapper: createWrapper()
+            })
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({
+                tags: ['email_capture', 'account'],
+                enabled: false
+            })
+        })
+
+        test('handles empty tag gracefully', () => {
+            mockGetSubscriptionsByTagAndChannel.mockReturnValue([])
+            const {result} = renderHook(() => useEmailSubscription({tag: undefined}), {
+                wrapper: createWrapper()
+            })
+
+            // Should not throw error with undefined tag
+            expect(result.current.state.email).toBe('')
+            expect(result.current.state.isLoading).toBe(false)
+        })
+    })
+
+    describe('setEmail action', () => {
+        test('updates email state', () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('user@example.com')
+            })
+
+            expect(result.current.state.email).toBe('user@example.com')
+        })
+
+        test('allows email to be cleared', () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('user@example.com')
+            })
+            expect(result.current.state.email).toBe('user@example.com')
+
+            act(() => {
+                result.current.actions.setEmail('')
+            })
+            expect(result.current.state.email).toBe('')
+        })
+    })
+
+    describe('submit action - validation', () => {
+        test('shows error for empty email', async () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(result.current.state.feedback.type).toBe('error')
+            expect(result.current.state.feedback.message).toBe('Enter a valid email address.')
+            expect(mockUpdateSubscriptions).not.toHaveBeenCalled()
+        })
+
+        test('shows error for invalid email format', async () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('invalid-email')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(result.current.state.feedback.type).toBe('error')
+            expect(result.current.state.feedback.message).toBe('Enter a valid email address.')
+            expect(mockUpdateSubscriptions).not.toHaveBeenCalled()
+        })
+
+        test('accepts valid email format', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('user@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(mockUpdateSubscriptions).toHaveBeenCalled()
+        })
+    })
+
+    describe('submit action - no matching subscriptions', () => {
+        test('shows error when no subscriptions match tag', async () => {
+            mockGetSubscriptionsByTagAndChannel.mockReturnValue([])
+            const {result} = renderHook(() => useEmailSubscription({tag: 'nonexistent_tag'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(result.current.state.feedback.type).toBe('error')
+            expect(result.current.state.feedback.message).toBe(
+                "We couldn't process the subscription. Try again."
+            )
+            expect(mockUpdateSubscriptions).not.toHaveBeenCalled()
+        })
+
+        test('logs developer-friendly error message with single tag', async () => {
+            const mockRefetch = jest.fn().mockResolvedValue({data: {data: []}})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: []},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining('[useEmailSubscription] No subscriptions found')
+            )
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining('tag(s) "email_capture"')
+            )
+        })
+
+        test('logs developer-friendly error message with multiple tags', async () => {
+            const mockRefetch = jest.fn().mockResolvedValue({data: {data: []}})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: []},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+            const {result} = renderHook(
+                () => useEmailSubscription({tag: ['email_capture', 'account']}),
+                {
+                    wrapper: createWrapper()
+                }
+            )
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining('[useEmailSubscription] No subscriptions found')
+            )
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining('tag(s) "email_capture, account"')
+            )
+        })
+    })
+
+    describe('submit action - successful bulk subscription', () => {
+        test('calls updateSubscriptions with ALL matching subscriptions', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'weekly-newsletter',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                },
+                {
+                    subscriptionId: 'promotional-offers',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+
+        test('logs subscription details to console', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(console.log).toHaveBeenCalledWith(
+                expect.stringContaining('[useEmailSubscription] Opting in to 2 subscription(s)'),
+                expect.any(Array)
+            )
+        })
+
+        test('shows success message after successful submission', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.feedback.type).toBe('success')
+                expect(result.current.state.feedback.message).toBe('Thanks for subscribing!')
+            })
+        })
+
+        test('clears email field after successful submission', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.email).toBe('')
+            })
+        })
+
+        test('handles single subscription in bulk update', async () => {
+            const mockRefetch = jest
+                .fn()
+                .mockResolvedValue({data: {data: [mockMatchingSubscriptions[0]]}})
+            mockUpdateSubscriptions.mockResolvedValue({})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: [mockMatchingSubscriptions[0]]},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'weekly-newsletter',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+    })
+
+    describe('submit action - failed subscription', () => {
+        test('shows generic error message when API call fails', async () => {
+            mockUpdateSubscriptions.mockRejectedValue(new Error('API Error'))
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.feedback.type).toBe('error')
+                expect(result.current.state.feedback.message).toBe(
+                    "We couldn't process the subscription. Try again."
+                )
+            })
+        })
+
+        test('does not clear email field on failure', async () => {
+            mockUpdateSubscriptions.mockRejectedValue(new Error('API Error'))
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.email).toBe('test@example.com')
+            })
+        })
+
+        test('logs error to console when submission fails', async () => {
+            const mockError = new Error('Network error')
+            mockUpdateSubscriptions.mockRejectedValue(mockError)
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(console.error).toHaveBeenCalledWith(
+                    '[useEmailSubscription] Subscription error:',
+                    mockError
+                )
+            })
+        })
+    })
+
+    describe('submit action - 207 Multi-Status (error thrown by useMarketingConsent)', () => {
+        test('shows error when bulk update rejects due to per-item failures', async () => {
+            const bulkError = new Error('1 of 1 subscription update(s) failed.')
+            bulkError.failures = [
+                {
+                    subscriptionId: 'weekly-newsletter',
+                    success: false,
+                    error: {code: 'UPDATE_FAILED', message: 'Failed'}
+                }
+            ]
+            mockUpdateSubscriptions.mockRejectedValue(bulkError)
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.feedback.type).toBe('error')
+                expect(result.current.state.feedback.message).toBe(
+                    "We couldn't process the subscription. Try again."
+                )
+            })
+        })
+
+        test('does not clear email field on 207 failure', async () => {
+            const bulkError = new Error('1 of 1 subscription update(s) failed.')
+            mockUpdateSubscriptions.mockRejectedValue(bulkError)
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(result.current.state.email).toBe('test@example.com')
+            })
+        })
+
+        test('logs the thrown error to console', async () => {
+            const bulkError = new Error('1 of 2 subscription update(s) failed.')
+            mockUpdateSubscriptions.mockRejectedValue(bulkError)
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            await waitFor(() => {
+                expect(console.error).toHaveBeenCalledWith(
+                    '[useEmailSubscription] Subscription error:',
+                    bulkError
+                )
+            })
+        })
+    })
+
+    describe('submit action - feature disabled (no-op)', () => {
+        beforeEach(() => {
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockMatchingSubscriptions},
+                isLoading: false,
+                isFeatureEnabled: false,
+                refetch: jest.fn().mockResolvedValue({data: {data: mockMatchingSubscriptions}}),
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false,
+                getSubscriptionsByTagAndChannel: mockGetSubscriptionsByTagAndChannel
+            })
+        })
+
+        test('does nothing when feature is disabled', async () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(result.current.state.feedback.message).toBeNull()
+            expect(result.current.state.feedback.type).toBe('success')
+            expect(result.current.state.email).toBe('test@example.com')
+            expect(mockUpdateSubscriptions).not.toHaveBeenCalled()
+        })
+
+        test('does not validate email when feature is disabled', async () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            expect(result.current.state.feedback.type).toBe('success')
+            expect(mockUpdateSubscriptions).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('Loading states', () => {
+        test('reflects isUpdating state from useMarketingConsent', () => {
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockMatchingSubscriptions},
+                isLoading: false,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: true,
+                getSubscriptionsByTagAndChannel: mockGetSubscriptionsByTagAndChannel
+            })
+
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(result.current.state.isLoading).toBe(true)
+        })
+
+        test('isLoading is false when not updating', () => {
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(result.current.state.isLoading).toBe(false)
+        })
+    })
+
+    describe('Tag filtering', () => {
+        test('filters subscriptions by single tag on submit', async () => {
+            const mockCheckoutSubscriptions = [
+                {
+                    subscriptionId: 'checkout-updates',
+                    channels: ['email'],
+                    tags: ['checkout']
+                }
+            ]
+
+            const mockRefetch = jest
+                .fn()
+                .mockResolvedValue({data: {data: mockCheckoutSubscriptions}})
+            mockUpdateSubscriptions.mockResolvedValue({})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockCheckoutSubscriptions},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+
+            const {result} = renderHook(() => useEmailSubscription({tag: 'checkout'}), {
+                wrapper: createWrapper()
+            })
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({tags: ['checkout'], enabled: false})
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            // Should call updateSubscriptions with the checkout subscription
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'checkout-updates',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+
+        test('passes multiple tags to useMarketingConsent with enabled=false', () => {
+            renderHook(() => useEmailSubscription({tag: ['email_capture', 'account']}), {
+                wrapper: createWrapper()
+            })
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({
+                tags: ['email_capture', 'account'],
+                enabled: false
+            })
+        })
+
+        test('filters subscriptions with actual API format on submit', async () => {
+            // Test that the filtering logic works with the actual API format
+            const mockApiFormatSubscriptions = [
+                {
+                    subscriptionId: 'marketing-email',
+                    channels: ['email'],
+                    tags: ['email_capture']
+                },
+                {
+                    subscriptionId: 'account-newsletter',
+                    channels: ['email'],
+                    tags: ['account']
+                }
+            ]
+
+            const mockRefetch = jest
+                .fn()
+                .mockResolvedValue({data: {data: mockApiFormatSubscriptions}})
+            mockUpdateSubscriptions.mockResolvedValue({})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockApiFormatSubscriptions},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+
+            const {result} = renderHook(
+                () => useEmailSubscription({tag: ['email_capture', 'account']}),
+                {
+                    wrapper: createWrapper()
+                }
+            )
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            // Should call updateSubscriptions with both matching subscriptions
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'marketing-email',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                },
+                {
+                    subscriptionId: 'account-newsletter',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+
+        test('matches subscription with multiple tags', async () => {
+            // Test that subscriptions with multiple tags are matched correctly
+            const mockMultipleTagsSubscriptions = [
+                {
+                    subscriptionId: 'marketing-email',
+                    channels: ['email'],
+                    tags: ['email_capture', 'account', 'checkout'] // Multiple tags
+                }
+            ]
+
+            const mockRefetch = jest
+                .fn()
+                .mockResolvedValue({data: {data: mockMultipleTagsSubscriptions}})
+            mockUpdateSubscriptions.mockResolvedValue({})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockMultipleTagsSubscriptions},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+
+            const {result} = renderHook(
+                () => useEmailSubscription({tag: ['email_capture', 'account']}),
+                {
+                    wrapper: createWrapper()
+                }
+            )
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            // Should match because subscription has both tags
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'marketing-email',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+
+        test('filters out non-email channel subscriptions on submit', async () => {
+            // Test that SMS and other channels are excluded
+            const mockMixedChannelSubscriptions = [
+                {
+                    subscriptionId: 'email-newsletter',
+                    channels: ['email'],
+                    tags: ['email_capture']
+                },
+                {
+                    subscriptionId: 'sms-alerts',
+                    channels: ['sms'],
+                    tags: ['email_capture']
+                },
+                {
+                    subscriptionId: 'push-notifications',
+                    channels: ['push'],
+                    tags: ['email_capture']
+                }
+            ]
+
+            const mockRefetch = jest
+                .fn()
+                .mockResolvedValue({data: {data: mockMixedChannelSubscriptions}})
+            mockUpdateSubscriptions.mockResolvedValue({})
+
+            useMarketingConsent.mockReturnValue({
+                data: {data: mockMixedChannelSubscriptions},
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false
+            })
+
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            // Should only include the email subscription, not SMS or push
+            expect(mockUpdateSubscriptions).toHaveBeenCalledWith([
+                {
+                    subscriptionId: 'email-newsletter',
+                    contactPointValue: 'test@example.com',
+                    channel: 'email',
+                    status: 'opt_in'
+                }
+            ])
+        })
+
+        test('uses updated tag when rerendered', () => {
+            const {rerender} = renderHook(({tag}) => useEmailSubscription({tag}), {
+                initialProps: {tag: 'email_capture'},
+                wrapper: createWrapper()
+            })
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({
+                tags: ['email_capture'],
+                enabled: false
+            })
+
+            // Change the tag
+            rerender({tag: 'registration'})
+
+            expect(useMarketingConsent).toHaveBeenCalledWith({
+                tags: ['registration'],
+                enabled: false
+            })
+        })
+    })
+
+    describe('Edge cases', () => {
+        test('handles undefined subscriptions data', () => {
+            const mockRefetch = jest.fn().mockResolvedValue({data: undefined})
+            useMarketingConsent.mockReturnValue({
+                data: undefined,
+                isLoading: false,
+                isFeatureEnabled: true,
+                refetch: mockRefetch,
+                updateSubscriptions: mockUpdateSubscriptions,
+                isUpdating: false,
+                getSubscriptionsByTagAndChannel: mockGetSubscriptionsByTagAndChannel
+            })
+            mockGetSubscriptionsByTagAndChannel.mockReturnValue([])
+
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            // Should not throw an error
+            expect(result.current.state.email).toBe('')
+        })
+
+        test('clears previous feedback messages before submission', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                wrapper: createWrapper()
+            })
+
+            // First submission with error
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+            expect(result.current.state.feedback.message).toBeTruthy()
+
+            // Second submission with valid email
+            act(() => {
+                result.current.actions.setEmail('test@example.com')
+            })
+
+            await act(async () => {
+                await result.current.actions.submit()
+            })
+
+            // Should show success, not previous error
+            await waitFor(() => {
+                expect(result.current.state.feedback.type).toBe('success')
+            })
+        })
+
+        test('accepts various valid email formats', async () => {
+            mockUpdateSubscriptions.mockResolvedValue({})
+            const validEmails = [
+                'simple@example.com',
+                'user+tag@example.com',
+                'first.last@example.com',
+                'user123@example456.com',
+                'user@subdomain.example.com'
+            ]
+
+            for (const email of validEmails) {
+                const {result} = renderHook(() => useEmailSubscription({tag: 'email_capture'}), {
+                    wrapper: createWrapper()
+                })
+
+                act(() => {
+                    result.current.actions.setEmail(email)
+                })
+
+                await act(async () => {
+                    await result.current.actions.submit()
+                })
+
+                await waitFor(() => {
+                    expect(mockUpdateSubscriptions).toHaveBeenCalled()
+                })
+
+                mockUpdateSubscriptions.mockClear()
+            }
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/components/subscription/index.js b/packages/template-retail-react-app/app/components/subscription/index.js
new file mode 100644
index 0000000000..44cd23385f
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/index.js
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export {default} from './subscribe-marketing-consent'
diff --git a/packages/template-retail-react-app/app/components/subscription/subscribe-form.jsx b/packages/template-retail-react-app/app/components/subscription/subscribe-form.jsx
new file mode 100644
index 0000000000..ef6c17acde
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/subscribe-form.jsx
@@ -0,0 +1,168 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React, {useRef, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {
+    Box,
+    Text,
+    Heading,
+    Input,
+    InputGroup,
+    InputRightElement,
+    Button,
+    Alert,
+    AlertIcon,
+    AlertDescription,
+    Link,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {useIntl, FormattedMessage} from 'react-intl'
+import SocialIcons from '@salesforce/retail-react-app/app/components/social-icons'
+
+const SubscribeForm = ({subscription, ...otherProps}) => {
+    // Use SubscribeForm's own theme config instead of Footer's context
+    const subscribeFormStyles = useMultiStyleConfig('SubscribeForm')
+
+    // Ref to manage focus on the email input
+    const emailInputRef = useRef(null)
+
+    // Map SubscribeForm theme parts to Footer's expected structure
+    const styles = {
+        subscribe: subscribeFormStyles.container,
+        subscribeHeading: subscribeFormStyles.heading,
+        subscribeMessage: subscribeFormStyles.message,
+        subscribeField: subscribeFormStyles.field,
+        subscribeButtonContainer: subscribeFormStyles.buttonContainer,
+        socialIcons: subscribeFormStyles.socialIcons,
+        subscribeDisclaimer: subscribeFormStyles.disclaimer
+    }
+
+    // Helper to create themed links for FormattedMessage
+    const createLink = (chunks) => (
+        <Link href="/" {...subscribeFormStyles.link}>
+            {chunks}
+        </Link>
+    )
+
+    const intl = useIntl()
+    const {state, actions} = subscription
+
+    // Restore focus to the email input after submission completes (success or error)
+    // Track previous loading state to detect when submission completes
+    const prevLoadingRef = useRef(false)
+
+    useEffect(() => {
+        // Only restore focus when transitioning from loading to not loading
+        // This ensures we only focus after a submission completes, not on mount
+        if (prevLoadingRef.current && !state?.isLoading && emailInputRef.current) {
+            emailInputRef.current.focus()
+        }
+        prevLoadingRef.current = state?.isLoading
+    }, [state?.isLoading])
+
+    const messages = {
+        heading: intl.formatMessage({
+            id: 'footer.subscribe.heading.stay_updated',
+            defaultMessage: 'Subscribe to Stay Updated'
+        }),
+        description: intl.formatMessage({
+            id: 'footer.subscribe.description.sign_up',
+            defaultMessage: 'Be the first to know about latest offers, news, tips, and more.'
+        }),
+        emailAriaLabel: intl.formatMessage({
+            id: 'footer.subscribe.email.assistive_msg',
+            defaultMessage: 'Email address for newsletter'
+        }),
+        buttonSignUp: intl.formatMessage({
+            id: 'footer.subscribe.button.sign_up',
+            defaultMessage: 'Subscribe'
+        }),
+        emailPlaceholder: intl.formatMessage({
+            id: 'footer.subscribe.email.placeholder_text',
+            defaultMessage: 'Enter your email address...'
+        })
+    }
+
+    return (
+        <Box {...styles.subscribe} {...otherProps}>
+            <Heading as="h2" {...styles.subscribeHeading}>
+                {messages.heading}
+            </Heading>
+            <Text {...styles.subscribeMessage}>{messages.description}</Text>
+
+            {state?.feedback?.message && (
+                <Alert status={state.feedback.type === 'error' ? 'error' : 'success'} mb={4}>
+                    <AlertIcon />
+                    <AlertDescription>{state.feedback.message}</AlertDescription>
+                </Alert>
+            )}
+
+            <Box>
+                <InputGroup>
+                    <Input
+                        ref={emailInputRef}
+                        type="email"
+                        placeholder={messages.emailPlaceholder}
+                        aria-label={messages.emailAriaLabel}
+                        value={state?.email || ''}
+                        onChange={(e) => actions?.setEmail?.(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' && !state?.isLoading) {
+                                actions?.submit?.()
+                            }
+                        }}
+                        disabled={state?.isLoading}
+                        id="subscribe-email"
+                        {...styles.subscribeField}
+                    />
+                    <InputRightElement {...styles.subscribeButtonContainer}>
+                        <Button
+                            variant="footer"
+                            onClick={actions?.submit}
+                            isLoading={state?.isLoading}
+                            loadingText={messages.buttonSignUp}
+                        >
+                            {messages.buttonSignUp}
+                        </Button>
+                    </InputRightElement>
+                </InputGroup>
+
+                <Text {...styles.subscribeDisclaimer}>
+                    <FormattedMessage
+                        id="footer.subscribe.disclaimer"
+                        defaultMessage="By submitting this, I agree to the <terms>Terms & Conditions</terms> and <privacy>Privacy Policy</privacy>."
+                        values={{
+                            terms: createLink,
+                            privacy: createLink
+                        }}
+                    />
+                </Text>
+            </Box>
+
+            <SocialIcons variant="flex-start" pinterestInnerColor="black" {...styles.socialIcons} />
+        </Box>
+    )
+}
+
+SubscribeForm.propTypes = {
+    subscription: PropTypes.shape({
+        state: PropTypes.shape({
+            email: PropTypes.string,
+            isLoading: PropTypes.bool,
+            feedback: PropTypes.shape({
+                message: PropTypes.string,
+                type: PropTypes.oneOf(['success', 'error'])
+            })
+        }),
+        actions: PropTypes.shape({
+            setEmail: PropTypes.func,
+            submit: PropTypes.func
+        })
+    }).isRequired
+}
+
+export default SubscribeForm
diff --git a/packages/template-retail-react-app/app/components/subscription/subscribe-form.test.jsx b/packages/template-retail-react-app/app/components/subscription/subscribe-form.test.jsx
new file mode 100644
index 0000000000..402a4ca17c
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/subscribe-form.test.jsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {screen, waitFor} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import SubscribeForm from '@salesforce/retail-react-app/app/components/subscription/subscribe-form'
+
+const mockSubscriptionState = {
+    state: {
+        email: '',
+        isLoading: false,
+        feedback: {message: null, type: 'success'}
+    },
+    actions: {
+        setEmail: jest.fn(),
+        submit: jest.fn()
+    }
+}
+
+describe('SubscribeForm', () => {
+    test('renders component with all essential elements', () => {
+        renderWithProviders(<SubscribeForm subscription={mockSubscriptionState} />)
+
+        // Check heading
+        expect(
+            screen.getByRole('heading', {name: /subscribe to stay updated/i})
+        ).toBeInTheDocument()
+
+        // Check description
+        expect(screen.getByText(/be the first to know about latest/i)).toBeInTheDocument()
+
+        // Check email input
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+        expect(emailInput).toBeInTheDocument()
+        expect(emailInput).toHaveAttribute('type', 'email')
+        expect(emailInput).toHaveAttribute('placeholder', 'Enter your email address...')
+
+        // Check sign up button
+        expect(screen.getByRole('button', {name: /subscribe/i})).toBeInTheDocument()
+
+        // Check disclaimer text with links
+        expect(screen.getByText(/by submitting this, i agree to the/i)).toBeInTheDocument()
+        expect(screen.getByRole('link', {name: /terms & conditions/i})).toBeInTheDocument()
+        expect(screen.getByRole('link', {name: /privacy policy/i})).toBeInTheDocument()
+    })
+
+    test('renders independently without Footer context', () => {
+        // This is the key test - SubscribeForm should render without being wrapped in Footer
+        const {container} = renderWithProviders(
+            <SubscribeForm subscription={mockSubscriptionState} />
+        )
+
+        // Should render without errors
+        expect(container).toBeInTheDocument()
+        expect(
+            screen.getByRole('heading', {name: /subscribe to stay updated/i})
+        ).toBeInTheDocument()
+    })
+
+    test('applies theme styles correctly', () => {
+        renderWithProviders(<SubscribeForm subscription={mockSubscriptionState} />)
+
+        // The component should apply SubscribeForm theme styles
+        // We can't directly test Chakra styles, but we can verify the component structure
+        const heading = screen.getByRole('heading', {name: /subscribe to stay updated/i})
+        expect(heading.tagName).toBe('H2')
+
+        // Verify the input and button exist within an input group
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+        const submitButton = screen.getByRole('button', {name: /subscribe/i})
+
+        // Verify both elements are in the document and properly structured
+        expect(emailInput).toBeInTheDocument()
+        expect(submitButton).toBeInTheDocument()
+        expect(emailInput.parentElement).toBeTruthy()
+    })
+
+    test('calls setEmail when user types in email field', async () => {
+        const mockSetEmail = jest.fn()
+        const subscription = {
+            ...mockSubscriptionState,
+            actions: {
+                ...mockSubscriptionState.actions,
+                setEmail: mockSetEmail
+            }
+        }
+
+        const {user} = renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+
+        await user.type(emailInput, 'test@example.com')
+
+        await waitFor(() => {
+            expect(mockSetEmail).toHaveBeenCalled()
+        })
+    })
+
+    test('calls submit when sign up button is clicked', async () => {
+        const mockSubmit = jest.fn()
+        const subscription = {
+            ...mockSubscriptionState,
+            actions: {
+                ...mockSubscriptionState.actions,
+                submit: mockSubmit
+            }
+        }
+
+        const {user} = renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const submitButton = screen.getByRole('button', {name: /subscribe/i})
+
+        await user.click(submitButton)
+
+        expect(mockSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    test('calls submit when Enter key is pressed in email field', async () => {
+        const mockSubmit = jest.fn()
+        const subscription = {
+            ...mockSubscriptionState,
+            actions: {
+                ...mockSubscriptionState.actions,
+                submit: mockSubmit
+            }
+        }
+
+        const {user} = renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+
+        await user.type(emailInput, 'test@example.com')
+        await user.keyboard('{Enter}')
+
+        expect(mockSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    test('does not call submit when Enter is pressed while loading', async () => {
+        const mockSubmit = jest.fn()
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                isLoading: true
+            },
+            actions: {
+                ...mockSubscriptionState.actions,
+                submit: mockSubmit
+            }
+        }
+
+        const {user} = renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+
+        await user.type(emailInput, 'test@example.com')
+        await user.keyboard('{Enter}')
+
+        expect(mockSubmit).not.toHaveBeenCalled()
+    })
+
+    test('displays loading state on button', () => {
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                isLoading: true
+            },
+            actions: mockSubscriptionState.actions
+        }
+
+        renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const submitButton = screen.getByRole('button', {name: /subscribe/i})
+
+        expect(submitButton).toBeDisabled()
+    })
+
+    test('disables email input when loading', () => {
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                isLoading: true
+            },
+            actions: mockSubscriptionState.actions
+        }
+
+        renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+
+        expect(emailInput).toBeDisabled()
+    })
+
+    test('displays success feedback message', () => {
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                feedback: {
+                    type: 'success',
+                    message: 'Successfully subscribed!'
+                }
+            },
+            actions: mockSubscriptionState.actions
+        }
+
+        renderWithProviders(<SubscribeForm subscription={subscription} />)
+
+        expect(screen.getByText(/successfully subscribed!/i)).toBeInTheDocument()
+        expect(screen.getByRole('alert')).toHaveAttribute('data-status', 'success')
+    })
+
+    test('displays error feedback message', () => {
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                feedback: {
+                    type: 'error',
+                    message: 'Subscription failed. Please try again.'
+                }
+            },
+            actions: mockSubscriptionState.actions
+        }
+
+        renderWithProviders(<SubscribeForm subscription={subscription} />)
+
+        expect(screen.getByText(/subscription failed. please try again./i)).toBeInTheDocument()
+        expect(screen.getByRole('alert')).toHaveAttribute('data-status', 'error')
+    })
+
+    test('displays email value from state', () => {
+        const subscription = {
+            state: {
+                ...mockSubscriptionState.state,
+                email: 'prefilled@example.com'
+            },
+            actions: mockSubscriptionState.actions
+        }
+
+        renderWithProviders(<SubscribeForm subscription={subscription} />)
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+
+        expect(emailInput).toHaveValue('prefilled@example.com')
+    })
+
+    test('accepts custom props via otherProps', () => {
+        renderWithProviders(
+            <SubscribeForm
+                subscription={mockSubscriptionState}
+                data-testid="custom-subscribe-form"
+            />
+        )
+
+        expect(screen.getByTestId('custom-subscribe-form')).toBeInTheDocument()
+    })
+
+    test('form is interactive when not fetching and not loading', () => {
+        renderWithProviders(<SubscribeForm subscription={mockSubscriptionState} />)
+
+        const emailInput = screen.getByLabelText(/email address for newsletter/i)
+        const submitButton = screen.getByRole('button', {name: /subscribe/i})
+
+        expect(emailInput).not.toBeDisabled()
+        expect(submitButton).not.toBeDisabled()
+    })
+})
diff --git a/packages/template-retail-react-app/app/components/subscription/subscribe-marketing-consent.jsx b/packages/template-retail-react-app/app/components/subscription/subscribe-marketing-consent.jsx
new file mode 100644
index 0000000000..dd3ea291c1
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/subscription/subscribe-marketing-consent.jsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import SubscribeForm from '@salesforce/retail-react-app/app/components/subscription/subscribe-form'
+import {useEmailSubscription} from '@salesforce/retail-react-app/app/components/subscription/hooks/use-email-subscription'
+import {CONSENT_TAGS} from '@salesforce/retail-react-app/app/constants/marketing-consent'
+
+/**
+ * Marketing consent subscription component for email subscriptions.
+ * This component dynamically fetches all subscriptions matching a given consent tag
+ * and email channel, then opts the user into ALL matching subscriptions.
+ *
+ * This allows marketers to configure subscriptions without code changes to the storefront UI.
+ *
+ * Subscriptions are fetched only when the user submits the form, keeping the initial page load lightweight.
+ *
+ * @param {Object} props
+ * @param {string|Array<string>} props.tag - The consent tag(s) to filter subscriptions by (e.g., CONSENT_TAGS.EMAIL_CAPTURE or [CONSENT_TAGS.EMAIL_CAPTURE, CONSENT_TAGS.ACCOUNT])
+ *
+ * @example
+ * // In footer
+ * <SubscribeMarketingConsent tag={CONSENT_TAGS.EMAIL_CAPTURE} />
+ *
+ * // Multiple tags
+ * <SubscribeMarketingConsent tag={[CONSENT_TAGS.EMAIL_CAPTURE, CONSENT_TAGS.ACCOUNT]} />
+ *
+ * // On registration page
+ * <SubscribeMarketingConsent tag={CONSENT_TAGS.REGISTRATION} />
+ */
+const SubscribeMarketingConsent = ({tag = CONSENT_TAGS.EMAIL_CAPTURE, ...props}) => {
+    const {state, actions} = useEmailSubscription({tag})
+    return <SubscribeForm subscription={{state, actions}} {...props} />
+}
+
+SubscribeMarketingConsent.propTypes = {
+    tag: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
+}
+
+export default SubscribeMarketingConsent
diff --git a/packages/template-retail-react-app/app/constants/marketing-consent.js b/packages/template-retail-react-app/app/constants/marketing-consent.js
new file mode 100644
index 0000000000..0e31115245
--- /dev/null
+++ b/packages/template-retail-react-app/app/constants/marketing-consent.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+// Shopper Configurations feature flag for marketing consent
+export const ENABLE_CONSENT_WITH_MARKETING_CLOUD = 'EnableConsentWithMarketingCloud'
+
+// Marketing consent status constants
+export const CONSENT_STATUS = {
+    OPT_IN: 'opt_in',
+    OPT_OUT: 'opt_out'
+}
+
+// Marketing consent channels, as configured by an administrator.
+export const CONSENT_CHANNELS = {
+    EMAIL: 'email',
+    SMS: 'sms'
+}
+
+// Marketing consent tags, as configured by an administrator.
+// These tags allow you to organize subscriptions by where they appear in the UI
+export const CONSENT_TAGS = {
+    ACCOUNT: 'account',
+    CHECKOUT: 'checkout',
+    REGISTRATION: 'registration',
+    EMAIL_CAPTURE: 'email_capture'
+}
diff --git a/packages/template-retail-react-app/app/hooks/index.js b/packages/template-retail-react-app/app/hooks/index.js
index ac1455f702..ae1d493dc5 100644
--- a/packages/template-retail-react-app/app/hooks/index.js
+++ b/packages/template-retail-react-app/app/hooks/index.js
@@ -19,3 +19,4 @@ export {useRuleBasedBonusProducts} from '@salesforce/retail-react-app/app/hooks/
 export {useControlledVariations} from '@salesforce/retail-react-app/app/hooks/use-controlled-variations'
 export {useCountdown} from '@salesforce/retail-react-app/app/hooks/use-countdown'
 export {useOtpInputs} from '@salesforce/retail-react-app/app/hooks/use-otp-inputs'
+export {useMarketingConsent} from '@salesforce/retail-react-app/app/hooks/use-marketing-consent'
diff --git a/packages/template-retail-react-app/app/hooks/use-marketing-consent.js b/packages/template-retail-react-app/app/hooks/use-marketing-consent.js
new file mode 100644
index 0000000000..e36af4fc30
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-marketing-consent.js
@@ -0,0 +1,290 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {
+    useSubscriptions,
+    useConfigurations,
+    useShopperConsentsMutation,
+    ShopperConsentsMutations
+} from '@salesforce/commerce-sdk-react'
+import {useEffect} from 'react'
+import {ENABLE_CONSENT_WITH_MARKETING_CLOUD} from '@salesforce/retail-react-app/app/constants/marketing-consent'
+
+/**
+ * A hook for managing customer marketing consent subscriptions.
+ * Provides functionality to retrieve consent preferences and update them individually or in bulk.
+ *
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.enabled - Whether to enable the subscriptions query (defaults to true)
+ * @param {Array<string>} options.tags - Optional array of tags to filter subscriptions (all included)
+ * @param {string} options.expand - Optional expand parameter (e.g., 'consentStatus' for logged-in user status on profile page)
+ * @returns {Object} Object containing:
+ *   - data: The consent subscription data
+ *   - isLoading: Whether the initial query is loading (only true when enabled=true on mount)
+ *   - isFetching: Whether the query is fetching (true during refetch() calls)
+ *   - error: Any error from the query
+ *   - refetch: Function to manually fetch subscriptions (for use with enabled=false)
+ *   - updateSubscription: Function to update a single subscription
+ *   - updateSubscriptions: Function to update multiple subscriptions
+ *   - isUpdating: Whether any operation is in progress (fetching OR updating)
+ *   - updateError: Any error from update mutations
+ *   - getSubscriptionStatus: Helper to get status for a specific subscription and channel
+ *   - hasChannel: Helper to check if a subscription has a specific channel
+ *   - getSubscriptionsByTagAndChannel: Helper to filter subscriptions by tag and channel
+ *
+ * @example
+ * // Basic usage
+ * const {
+ *   data,
+ *   updateSubscription,
+ *   updateSubscriptions,
+ *   getSubscriptionStatus,
+ *   hasChannel
+ * } = useMarketingConsent()
+ *
+ * // Update single subscription
+ * await updateSubscription({
+ *   subscriptionId: 'marketing-email',
+ *   channel: 'email',
+ *   status: 'opt_in',
+ *   contactPointValue: 'customer@example.com'
+ * })
+ *
+ * // Update multiple subscriptions
+ * await updateSubscriptions([
+ *   {
+ *     subscriptionId: 'marketing-email',
+ *     channel: 'email',
+ *     status: 'opt_in',
+ *     contactPointValue: 'customer@example.com'
+ *   },
+ *   {
+ *     subscriptionId: 'marketing-sms',
+ *     channel: 'sms',
+ *     status: 'opt_out',
+ *     contactPointValue: '+15551234567'
+ *   }
+ * ])
+ *
+ * // Check subscription status
+ * const isOptedIn = getSubscriptionStatus('marketing-email', 'email') === 'opt_in'
+ *
+ * // Check if subscription has a channel
+ * const hasEmailChannel = hasChannel('marketing-email', 'email')
+ */
+export const useMarketingConsent = ({enabled = true, tags = [], expand} = {}) => {
+    // Check if the feature is enabled via Shopper Configurations
+    const {data: configurations} = useConfigurations()
+    const isFeatureEnabled =
+        configurations?.configurations?.find(
+            (config) => config.id === ENABLE_CONSENT_WITH_MARKETING_CLOUD
+        )?.value === true
+
+    // Query hook to get current subscriptions
+    const subscriptionsQuery = useSubscriptions(
+        {
+            parameters: {
+                ...(tags.length > 0 && {tags: tags.join(',')}),
+                ...(expand && {expand})
+            }
+        },
+        {
+            enabled
+        }
+    )
+
+    // Mutation hooks for updating subscriptions
+    const updateSubscriptionMutation = useShopperConsentsMutation(
+        ShopperConsentsMutations.UpdateSubscription
+    )
+    const updateSubscriptionsMutation = useShopperConsentsMutation(
+        ShopperConsentsMutations.UpdateSubscriptions
+    )
+
+    // Log warning if no subscriptions found after initial fetch
+    useEffect(() => {
+        // Only check after the query has completed loading
+        if (!subscriptionsQuery.isLoading && enabled) {
+            const subscriptions = subscriptionsQuery.data?.data || []
+            const hasError = subscriptionsQuery.error
+
+            // Warn if there's an error or no subscriptions found
+            if (hasError || subscriptions.length === 0) {
+                const tagFilter = tags.length > 0 ? ` (filtered by tags: ${tags.join(', ')})` : ''
+                console.warn(
+                    `[useMarketingConsent] Marketing Consent feature was enabled, but no subscriptions were found${tagFilter}.`
+                )
+                if (hasError) {
+                    console.error('[useMarketingConsent] API Error:', subscriptionsQuery.error)
+                }
+            }
+        }
+    }, [
+        subscriptionsQuery.isLoading,
+        subscriptionsQuery.data,
+        subscriptionsQuery.error,
+        enabled,
+        tags
+    ])
+
+    const subscriptions = subscriptionsQuery.data?.data || []
+
+    /**
+     * Get the opt-in/opt-out status for a specific subscription and channel
+     * @param {string} subscriptionId - The subscription ID
+     * @param {string} channel - The channel type ('email', 'sms', etc.)
+     * @param {string} contactPointValue - Optional contact point (email/phone) to check status for specific contact
+     * @returns {string|null} The consent status ('opt_in', 'opt_out') or null if not found
+     */
+    const getSubscriptionStatus = (subscriptionId, channel, contactPointValue) => {
+        const subscription = subscriptions.find((sub) => sub.subscriptionId === subscriptionId)
+        if (!subscription) return null
+
+        // If expanded with status data and contactPointValue is provided, use the actual status
+        if (subscription.status && contactPointValue) {
+            const statusEntry = subscription.status.find(
+                (s) => s.channel === channel && s.contactPointValue === contactPointValue
+            )
+            if (statusEntry) {
+                return statusEntry.status
+            }
+        }
+
+        // Fall back to defaultStatus if available (for logged-in users without explicit status)
+        if (subscription.defaultStatus) {
+            return subscription.defaultStatus
+        }
+
+        // Legacy fallback: check if channel exists in channels array
+        const hasChannelInArray = subscription.channels && subscription.channels.includes(channel)
+        return hasChannelInArray ? 'opt_in' : 'opt_out'
+    }
+
+    /**
+     * Check if a subscription includes a specific channel
+     * @param {string} subscriptionId - The subscription ID
+     * @param {string} channel - The channel type ('email', 'sms', etc.)
+     * @returns {boolean} True if the subscription includes the channel
+     */
+    const hasChannel = (subscriptionId, channel) => {
+        const subscription = subscriptions.find((sub) => sub.subscriptionId === subscriptionId)
+        return subscription?.channels?.includes(channel) || false
+    }
+
+    /**
+     * Get all subscriptions for a specific contact point value (email or phone)
+     * @param {string} contactPointValue - The email or phone number
+     * @returns {Array} Array of subscriptions matching the contact point
+     */
+    const getSubscriptionsByContact = (contactPointValue) => {
+        return subscriptions.filter((sub) => sub.contactPointValue === contactPointValue)
+    }
+
+    /**
+     * Get subscriptions filtered by tag and channel
+     * Useful for finding all subscriptions that should be opted into for a specific UI location
+     * @param {string} tag - The tag to filter by (e.g., 'homepage_banner', 'footer')
+     * @param {string} channel - The channel type ('email', 'sms', etc.)
+     * @returns {Array} Array of subscription objects matching the tag and channel
+     */
+    const getSubscriptionsByTagAndChannel = (tag, channel) => {
+        return subscriptions.filter((sub) => {
+            const hasTag = sub.tags && sub.tags.includes(tag)
+            const hasChannelMatch = sub.channels && sub.channels.includes(channel)
+            return hasTag && hasChannelMatch
+        })
+    }
+
+    /**
+     * Update a single consent subscription
+     * @param {Object} subscriptionData - The subscription data
+     * @param {string} subscriptionData.subscriptionId - The subscription ID
+     * @param {string} subscriptionData.channel - The channel type ('email', 'sms', etc.)
+     * @param {string} subscriptionData.status - The consent status ('opt_in', 'opt_out')
+     * @param {string} subscriptionData.contactPointValue - The email or phone number
+     * @returns {Promise} Promise resolving to the mutation result
+     */
+    const updateSubscription = async (subscriptionData) => {
+        return updateSubscriptionMutation.mutateAsync({
+            parameters: {},
+            body: subscriptionData
+        })
+    }
+
+    /**
+     * Update multiple consent subscriptions in bulk.
+     * The bulk endpoint may return HTTP 207 Multi-Status where individual items can fail
+     * even though the HTTP request itself succeeds. This function inspects the response
+     * and throws if any item has success === false, so callers get standard error semantics.
+     *
+     * @param {Array<Object>} subscriptionsData - Array of subscription data objects
+     * @returns {Promise} Promise resolving to the mutation result
+     * @throws {Error} If any item in the bulk response has success === false.
+     *   The error includes `response` (full API response) and `failures` (failed items).
+     */
+    const updateSubscriptions = async (subscriptionsData) => {
+        const response = await updateSubscriptionsMutation.mutateAsync({
+            parameters: {},
+            body: {
+                subscriptions: subscriptionsData
+            }
+        })
+
+        const results = response?.results || []
+        const failures = results.filter((r) => r.success === false)
+
+        if (failures.length > 0) {
+            failures.forEach((failure) => {
+                console.error(
+                    '[useMarketingConsent] Bulk update item failed:',
+                    failure.error || failure
+                )
+            })
+
+            const error = new Error(
+                `${failures.length} of ${results.length} subscription update(s) failed.`
+            )
+            error.response = response
+            error.failures = failures
+            throw error
+        }
+
+        return response
+    }
+
+    return {
+        // Feature flag from Shopper Configurations
+        isFeatureEnabled,
+
+        // Query data and status
+        data: subscriptionsQuery.data,
+        isLoading: subscriptionsQuery.isLoading,
+        isFetching: subscriptionsQuery.isFetching,
+        error: subscriptionsQuery.error,
+        refetch: subscriptionsQuery.refetch,
+
+        // Mutation functions
+        updateSubscription,
+        updateSubscriptions,
+
+        // Combined loading state - tracks ANY async operation (fetch or mutation)
+        // Use this for showing spinners/disabled states during form submission
+        isUpdating:
+            subscriptionsQuery.isFetching ||
+            updateSubscriptionMutation.isLoading ||
+            updateSubscriptionsMutation.isLoading,
+        isUpdateSuccess:
+            updateSubscriptionMutation.isSuccess || updateSubscriptionsMutation.isSuccess,
+        updateError: updateSubscriptionMutation.error || updateSubscriptionsMutation.error,
+
+        // Helper functions
+        getSubscriptionStatus,
+        hasChannel,
+        getSubscriptionsByContact,
+        getSubscriptionsByTagAndChannel
+    }
+}
diff --git a/packages/template-retail-react-app/app/hooks/use-marketing-consent.test.js b/packages/template-retail-react-app/app/hooks/use-marketing-consent.test.js
new file mode 100644
index 0000000000..446ea54aee
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-marketing-consent.test.js
@@ -0,0 +1,1050 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {renderHook} from '@testing-library/react'
+import {useMarketingConsent} from '@salesforce/retail-react-app/app/hooks/use-marketing-consent'
+import {
+    useSubscriptions,
+    useConfigurations,
+    useShopperConsentsMutation,
+    ShopperConsentsMutations
+} from '@salesforce/commerce-sdk-react'
+
+// Mock the commerce-sdk-react hooks
+jest.mock('@salesforce/commerce-sdk-react', () => {
+    const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
+    return {
+        ...originalModule,
+        useSubscriptions: jest.fn(),
+        useConfigurations: jest.fn(),
+        useShopperConsentsMutation: jest.fn()
+    }
+})
+
+const mockSubscriptionsData = {
+    data: [
+        {
+            subscriptionId: 'marketing-email',
+            channels: ['email'],
+            tags: ['homepage_banner', 'footer'],
+            contactPointValue: 'customer@example.com'
+        },
+        {
+            subscriptionId: 'marketing-sms',
+            channels: ['sms'],
+            tags: ['checkout_page'],
+            contactPointValue: '+15551234567'
+        },
+        {
+            subscriptionId: 'newsletter',
+            channels: ['email', 'push'],
+            tags: ['homepage_banner', 'registration'],
+            contactPointValue: 'customer@example.com'
+        },
+        {
+            subscriptionId: 'promotional-offers',
+            channels: ['email'],
+            tags: ['homepage_banner'],
+            contactPointValue: 'customer@example.com'
+        }
+    ]
+}
+
+const mockExpandedSubscriptionsData = {
+    data: [
+        {
+            subscriptionId: 'marketing-email',
+            channels: ['email'],
+            tags: ['homepage_banner', 'footer'],
+            defaultStatus: 'opt_out',
+            status: [
+                {
+                    channel: 'email',
+                    contactPointValue: 'customer@example.com',
+                    status: 'opt_in'
+                }
+            ]
+        },
+        {
+            subscriptionId: 'marketing-sms',
+            channels: ['sms'],
+            tags: ['checkout_page'],
+            defaultStatus: 'opt_out',
+            status: [
+                {
+                    channel: 'sms',
+                    contactPointValue: '+15551234567',
+                    status: 'opt_out'
+                }
+            ]
+        },
+        {
+            subscriptionId: 'newsletter',
+            channels: ['email', 'push'],
+            tags: ['homepage_banner', 'registration'],
+            defaultStatus: 'opt_out',
+            status: [
+                {
+                    channel: 'email',
+                    contactPointValue: 'customer@example.com',
+                    status: 'opt_in'
+                }
+            ]
+        }
+    ]
+}
+
+const mockEmptySubscriptionsData = {
+    data: []
+}
+
+const mockUseQueryResult = {
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: jest.fn()
+}
+
+const mockUseMutationResult = {
+    mutateAsync: jest.fn(),
+    isLoading: false,
+    isSuccess: false,
+    error: null
+}
+
+const mockConfigurationsEnabled = {
+    configurations: [
+        {
+            configurationType: 'globalConfiguration',
+            id: 'EnableConsentWithMarketingCloud',
+            value: true
+        }
+    ]
+}
+
+const mockConfigurationsDisabled = {
+    configurations: [
+        {
+            configurationType: 'globalConfiguration',
+            id: 'EnableConsentWithMarketingCloud',
+            value: false
+        }
+    ]
+}
+
+describe('useMarketingConsent', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        // Default mock implementations
+        useSubscriptions.mockReturnValue({
+            ...mockUseQueryResult,
+            data: mockSubscriptionsData
+        })
+        useConfigurations.mockReturnValue({
+            data: mockConfigurationsEnabled
+        })
+        useShopperConsentsMutation.mockImplementation(() => {
+            return mockUseMutationResult
+        })
+    })
+
+    describe('Query functionality', () => {
+        test('returns subscription data when query succeeds', () => {
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.data).toEqual(mockSubscriptionsData)
+            expect(result.current.isLoading).toBe(false)
+            expect(result.current.error).toBeNull()
+        })
+
+        test('returns loading state when query is loading', () => {
+            useSubscriptions.mockReturnValue({
+                ...mockUseQueryResult,
+                data: undefined,
+                isLoading: true
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isLoading).toBe(true)
+            expect(result.current.data).toBeUndefined()
+        })
+
+        test('returns error state when query fails', () => {
+            const mockError = new Error('Failed to fetch subscriptions')
+            useSubscriptions.mockReturnValue({
+                ...mockUseQueryResult,
+                error: mockError
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.error).toEqual(mockError)
+        })
+
+        test('respects enabled option', () => {
+            renderHook(() => useMarketingConsent({enabled: false}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith({parameters: {}}, {enabled: false})
+        })
+
+        test('defaults to enabled when no option provided', () => {
+            renderHook(() => useMarketingConsent())
+
+            expect(useSubscriptions).toHaveBeenCalledWith({parameters: {}}, {enabled: true})
+        })
+
+        test('passes tags parameter when provided as array', () => {
+            renderHook(() => useMarketingConsent({tags: ['homepage_banner', 'footer']}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith(
+                {parameters: {tags: 'homepage_banner,footer'}},
+                {enabled: true}
+            )
+        })
+
+        test('passes single tag parameter when provided', () => {
+            renderHook(() => useMarketingConsent({tags: ['homepage_banner']}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith(
+                {parameters: {tags: 'homepage_banner'}},
+                {enabled: true}
+            )
+        })
+
+        test('handles empty tags array', () => {
+            renderHook(() => useMarketingConsent({tags: []}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith({parameters: {}}, {enabled: true})
+        })
+
+        test('combines tags and enabled options', () => {
+            renderHook(() =>
+                useMarketingConsent({tags: ['homepage_banner', 'footer'], enabled: false})
+            )
+
+            expect(useSubscriptions).toHaveBeenCalledWith(
+                {parameters: {tags: 'homepage_banner,footer'}},
+                {enabled: false}
+            )
+        })
+
+        test('passes expand parameter when provided as string', () => {
+            renderHook(() => useMarketingConsent({expand: 'consentStatus'}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith(
+                {parameters: {expand: 'consentStatus'}},
+                {enabled: true}
+            )
+        })
+
+        test('does not pass expand parameter when not provided', () => {
+            renderHook(() => useMarketingConsent())
+
+            expect(useSubscriptions).toHaveBeenCalledWith({parameters: {}}, {enabled: true})
+        })
+
+        test('does not pass expand parameter when set to undefined', () => {
+            renderHook(() => useMarketingConsent({expand: undefined}))
+
+            expect(useSubscriptions).toHaveBeenCalledWith({parameters: {}}, {enabled: true})
+        })
+
+        test('combines expand, tags, and enabled options', () => {
+            renderHook(() =>
+                useMarketingConsent({
+                    tags: ['account'],
+                    expand: 'consentStatus',
+                    enabled: true
+                })
+            )
+
+            expect(useSubscriptions).toHaveBeenCalledWith(
+                {parameters: {tags: 'account', expand: 'consentStatus'}},
+                {enabled: true}
+            )
+        })
+    })
+
+    describe('Helper functions', () => {
+        describe('getSubscriptionStatus', () => {
+            test('returns opt_in when subscription has the channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const status = result.current.getSubscriptionStatus('marketing-email', 'email')
+                expect(status).toBe('opt_in')
+            })
+
+            test('returns opt_out when subscription does not have the channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const status = result.current.getSubscriptionStatus('marketing-email', 'sms')
+                expect(status).toBe('opt_out')
+            })
+
+            test('returns null when subscription does not exist', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const status = result.current.getSubscriptionStatus('non-existent', 'email')
+                expect(status).toBeNull()
+            })
+
+            test('handles subscription with multiple channels', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                expect(result.current.getSubscriptionStatus('newsletter', 'email')).toBe('opt_in')
+                expect(result.current.getSubscriptionStatus('newsletter', 'push')).toBe('opt_in')
+                expect(result.current.getSubscriptionStatus('newsletter', 'sms')).toBe('opt_out')
+            })
+
+            test('handles empty subscriptions data', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: mockEmptySubscriptionsData
+                })
+
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const status = result.current.getSubscriptionStatus('marketing-email', 'email')
+                expect(status).toBeNull()
+            })
+
+            test('returns actual status from expanded data when contactPointValue provided', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: mockExpandedSubscriptionsData
+                })
+
+                const {result} = renderHook(() => useMarketingConsent({expand: 'consentStatus'}))
+
+                // marketing-email has status: 'opt_in' for email channel
+                const status = result.current.getSubscriptionStatus(
+                    'marketing-email',
+                    'email',
+                    'customer@example.com'
+                )
+                expect(status).toBe('opt_in')
+            })
+
+            test('returns actual opt_out status from expanded data', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: mockExpandedSubscriptionsData
+                })
+
+                const {result} = renderHook(() => useMarketingConsent({expand: 'consentStatus'}))
+
+                // marketing-sms has status: 'opt_out' for sms channel
+                const status = result.current.getSubscriptionStatus(
+                    'marketing-sms',
+                    'sms',
+                    '+15551234567'
+                )
+                expect(status).toBe('opt_out')
+            })
+
+            test('falls back to defaultStatus when status not found in expanded data', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: {
+                        data: [
+                            {
+                                subscriptionId: 'test-sub',
+                                channels: ['email'],
+                                defaultStatus: 'opt_out',
+                                status: []
+                            }
+                        ]
+                    }
+                })
+
+                const {result} = renderHook(() => useMarketingConsent({expand: 'consentStatus'}))
+
+                const status = result.current.getSubscriptionStatus(
+                    'test-sub',
+                    'email',
+                    'different@example.com'
+                )
+                expect(status).toBe('opt_out')
+            })
+
+            test('uses defaultStatus when no status array and no contactPointValue', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: {
+                        data: [
+                            {
+                                subscriptionId: 'test-sub',
+                                channels: ['email'],
+                                defaultStatus: 'opt_in'
+                            }
+                        ]
+                    }
+                })
+
+                const {result} = renderHook(() => useMarketingConsent({expand: 'consentStatus'}))
+
+                const status = result.current.getSubscriptionStatus('test-sub', 'email')
+                expect(status).toBe('opt_in')
+            })
+        })
+
+        describe('hasChannel', () => {
+            test('returns true when subscription has the channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                expect(result.current.hasChannel('marketing-email', 'email')).toBe(true)
+            })
+
+            test('returns false when subscription does not have the channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                expect(result.current.hasChannel('marketing-email', 'sms')).toBe(false)
+            })
+
+            test('returns false when subscription does not exist', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                expect(result.current.hasChannel('non-existent', 'email')).toBe(false)
+            })
+        })
+
+        describe('getSubscriptionsByContact', () => {
+            test('returns subscriptions for a given contact point value', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions =
+                    result.current.getSubscriptionsByContact('customer@example.com')
+                expect(subscriptions).toHaveLength(3)
+                expect(subscriptions[0].subscriptionId).toBe('marketing-email')
+                expect(subscriptions[1].subscriptionId).toBe('newsletter')
+                expect(subscriptions[2].subscriptionId).toBe('promotional-offers')
+            })
+
+            test('returns empty array when no subscriptions match', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions =
+                    result.current.getSubscriptionsByContact('nonexistent@example.com')
+                expect(subscriptions).toHaveLength(0)
+            })
+        })
+
+        describe('getSubscriptionsByTagAndChannel', () => {
+            test('returns subscriptions matching both tag and channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'homepage_banner',
+                    'email'
+                )
+                expect(subscriptions).toHaveLength(3)
+                expect(subscriptions[0].subscriptionId).toBe('marketing-email')
+                expect(subscriptions[1].subscriptionId).toBe('newsletter')
+                expect(subscriptions[2].subscriptionId).toBe('promotional-offers')
+            })
+
+            test('filters out subscriptions with wrong channel', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'homepage_banner',
+                    'sms'
+                )
+                expect(subscriptions).toHaveLength(0)
+            })
+
+            test('filters out subscriptions with wrong tag', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'checkout_page',
+                    'email'
+                )
+                expect(subscriptions).toHaveLength(0)
+            })
+
+            test('returns subscriptions matching tag across multiple channels', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'checkout_page',
+                    'sms'
+                )
+                expect(subscriptions).toHaveLength(1)
+                expect(subscriptions[0].subscriptionId).toBe('marketing-sms')
+            })
+
+            test('returns empty array when no subscriptions match both criteria', () => {
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'nonexistent_tag',
+                    'email'
+                )
+                expect(subscriptions).toHaveLength(0)
+            })
+
+            test('handles subscriptions without tags property', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: {
+                        data: [
+                            {
+                                subscriptionId: 'no-tags-sub',
+                                channels: ['email']
+                            }
+                        ]
+                    }
+                })
+
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'homepage_banner',
+                    'email'
+                )
+                expect(subscriptions).toHaveLength(0)
+            })
+
+            test('handles subscriptions without channels property', () => {
+                useSubscriptions.mockReturnValue({
+                    ...mockUseQueryResult,
+                    data: {
+                        data: [
+                            {
+                                subscriptionId: 'no-channels-sub',
+                                tags: ['homepage_banner']
+                            }
+                        ]
+                    }
+                })
+
+                const {result} = renderHook(() => useMarketingConsent())
+
+                const subscriptions = result.current.getSubscriptionsByTagAndChannel(
+                    'homepage_banner',
+                    'email'
+                )
+                expect(subscriptions).toHaveLength(0)
+            })
+        })
+    })
+
+    describe('Update single subscription', () => {
+        test('calls updateSubscription mutation with correct parameters', async () => {
+            const mockMutateAsync = jest.fn().mockResolvedValue({})
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscription) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const subscriptionData = {
+                subscriptionId: 'marketing-email',
+                channel: 'email',
+                status: 'opt_in',
+                contactPointValue: 'customer@example.com'
+            }
+
+            await result.current.updateSubscription(subscriptionData)
+
+            expect(mockMutateAsync).toHaveBeenCalledWith({
+                parameters: {},
+                body: subscriptionData
+            })
+        })
+
+        test('returns mutation result on success', async () => {
+            const mockResponse = {success: true}
+            const mockMutateAsync = jest.fn().mockResolvedValue(mockResponse)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscription) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const response = await result.current.updateSubscription({
+                subscriptionId: 'marketing-email',
+                channel: 'email',
+                status: 'opt_out',
+                contactPointValue: 'customer@example.com'
+            })
+
+            expect(response).toEqual(mockResponse)
+        })
+
+        test('reflects loading state during mutation', () => {
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscription) {
+                    return {
+                        ...mockUseMutationResult,
+                        isLoading: true
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isUpdating).toBe(true)
+        })
+
+        test('reflects error state when mutation fails', () => {
+            const mockError = new Error('Update failed')
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscription) {
+                    return {
+                        ...mockUseMutationResult,
+                        error: mockError
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.updateError).toEqual(mockError)
+        })
+    })
+
+    describe('Update multiple subscriptions', () => {
+        test('calls updateSubscriptions mutation with correct parameters', async () => {
+            const mockMutateAsync = jest.fn().mockResolvedValue({})
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const subscriptionsData = [
+                {
+                    subscriptionId: 'marketing-email',
+                    channel: 'email',
+                    status: 'opt_in',
+                    contactPointValue: 'customer@example.com'
+                },
+                {
+                    subscriptionId: 'marketing-sms',
+                    channel: 'sms',
+                    status: 'opt_out',
+                    contactPointValue: '+15551234567'
+                }
+            ]
+
+            await result.current.updateSubscriptions(subscriptionsData)
+
+            expect(mockMutateAsync).toHaveBeenCalledWith({
+                parameters: {},
+                body: {
+                    subscriptions: subscriptionsData
+                }
+            })
+        })
+
+        test('returns mutation result on success', async () => {
+            const mockResponse = {success: true}
+            const mockMutateAsync = jest.fn().mockResolvedValue(mockResponse)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const response = await result.current.updateSubscriptions([
+                {
+                    subscriptionId: 'marketing-email',
+                    channel: 'email',
+                    status: 'opt_in',
+                    contactPointValue: 'customer@example.com'
+                }
+            ])
+
+            expect(response).toEqual(mockResponse)
+        })
+
+        test('throws when bulk response contains failed items (207 Multi-Status)', async () => {
+            const mock207Response = {
+                results: [
+                    {
+                        channel: 'email',
+                        contactPointValue: 'customer@example.com',
+                        error: {
+                            code: 'UPDATE_FAILED',
+                            message: 'Failed to update consent subscription'
+                        },
+                        status: 'opt_in',
+                        subscriptionId: 'marketing-email',
+                        success: false
+                    }
+                ]
+            }
+            const mockMutateAsync = jest.fn().mockResolvedValue(mock207Response)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            await expect(
+                result.current.updateSubscriptions([
+                    {
+                        subscriptionId: 'marketing-email',
+                        channel: 'email',
+                        status: 'opt_in',
+                        contactPointValue: 'customer@example.com'
+                    }
+                ])
+            ).rejects.toThrow('1 of 1 subscription update(s) failed.')
+        })
+
+        test('attaches response and failures to error thrown on 207', async () => {
+            const mock207Response = {
+                results: [
+                    {
+                        subscriptionId: 'marketing-email',
+                        success: false,
+                        error: {code: 'UPDATE_FAILED', message: 'Failed'}
+                    },
+                    {
+                        subscriptionId: 'marketing-sms',
+                        success: true
+                    }
+                ]
+            }
+            const mockMutateAsync = jest.fn().mockResolvedValue(mock207Response)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const promise = result.current.updateSubscriptions([
+                {
+                    subscriptionId: 'marketing-email',
+                    channel: 'email',
+                    status: 'opt_in',
+                    contactPointValue: 'customer@example.com'
+                }
+            ])
+
+            await expect(promise).rejects.toThrow('1 of 2 subscription update(s) failed.')
+
+            const err = await promise.catch((e) => e)
+            expect(err.response).toEqual(mock207Response)
+            expect(err.failures).toHaveLength(1)
+            expect(err.failures[0].subscriptionId).toBe('marketing-email')
+        })
+
+        test('resolves successfully when all results have success: true', async () => {
+            const allSuccessResponse = {
+                results: [
+                    {subscriptionId: 'marketing-email', success: true},
+                    {subscriptionId: 'marketing-sms', success: true}
+                ]
+            }
+            const mockMutateAsync = jest.fn().mockResolvedValue(allSuccessResponse)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const response = await result.current.updateSubscriptions([
+                {
+                    subscriptionId: 'marketing-email',
+                    channel: 'email',
+                    status: 'opt_in',
+                    contactPointValue: 'customer@example.com'
+                }
+            ])
+
+            expect(response).toEqual(allSuccessResponse)
+        })
+
+        test('resolves successfully when response has no results array', async () => {
+            const noResultsResponse = {success: true}
+            const mockMutateAsync = jest.fn().mockResolvedValue(noResultsResponse)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            const response = await result.current.updateSubscriptions([
+                {
+                    subscriptionId: 'marketing-email',
+                    channel: 'email',
+                    status: 'opt_in',
+                    contactPointValue: 'customer@example.com'
+                }
+            ])
+
+            expect(response).toEqual(noResultsResponse)
+        })
+
+        test('logs each failed item error to console on 207', async () => {
+            const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+            const mock207Response = {
+                results: [
+                    {
+                        subscriptionId: 'marketing-email',
+                        success: false,
+                        error: {code: 'UPDATE_FAILED', message: 'Failed'}
+                    }
+                ]
+            }
+            const mockMutateAsync = jest.fn().mockResolvedValue(mock207Response)
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        mutateAsync: mockMutateAsync
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            try {
+                await result.current.updateSubscriptions([
+                    {
+                        subscriptionId: 'marketing-email',
+                        channel: 'email',
+                        status: 'opt_in',
+                        contactPointValue: 'customer@example.com'
+                    }
+                ])
+            } catch {
+                // expected
+            }
+
+            expect(consoleSpy).toHaveBeenCalledWith(
+                '[useMarketingConsent] Bulk update item failed:',
+                {code: 'UPDATE_FAILED', message: 'Failed'}
+            )
+            consoleSpy.mockRestore()
+        })
+
+        test('reflects loading state during mutation', () => {
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        isLoading: true
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isUpdating).toBe(true)
+        })
+
+        test('reflects error state when mutation fails', () => {
+            const mockError = new Error('Bulk update failed')
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscriptions) {
+                    return {
+                        ...mockUseMutationResult,
+                        error: mockError
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.updateError).toEqual(mockError)
+        })
+    })
+
+    describe('Mutation hooks initialization', () => {
+        test('initializes UpdateSubscription mutation hook', () => {
+            renderHook(() => useMarketingConsent())
+
+            expect(useShopperConsentsMutation).toHaveBeenCalledWith(
+                ShopperConsentsMutations.UpdateSubscription
+            )
+        })
+
+        test('initializes UpdateSubscriptions mutation hook', () => {
+            renderHook(() => useMarketingConsent())
+
+            expect(useShopperConsentsMutation).toHaveBeenCalledWith(
+                ShopperConsentsMutations.UpdateSubscriptions
+            )
+        })
+
+        test('initializes both mutation hooks', () => {
+            renderHook(() => useMarketingConsent())
+
+            expect(useShopperConsentsMutation).toHaveBeenCalledTimes(2)
+        })
+    })
+
+    describe('Edge cases', () => {
+        test('handles undefined data gracefully', () => {
+            useSubscriptions.mockReturnValue({
+                ...mockUseQueryResult,
+                data: undefined
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.getSubscriptionStatus('marketing-email', 'email')).toBeNull()
+            expect(result.current.hasChannel('marketing-email', 'email')).toBe(false)
+            expect(result.current.getSubscriptionsByContact('customer@example.com')).toEqual([])
+        })
+
+        test('handles subscription without channels property', () => {
+            useSubscriptions.mockReturnValue({
+                ...mockUseQueryResult,
+                data: {
+                    data: [
+                        {
+                            subscriptionId: 'test-subscription',
+                            contactPointValue: 'test@example.com'
+                        }
+                    ]
+                }
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.hasChannel('test-subscription', 'email')).toBe(false)
+        })
+
+        test('exposes refetch function from query', () => {
+            const mockRefetch = jest.fn()
+            useSubscriptions.mockReturnValue({
+                ...mockUseQueryResult,
+                refetch: mockRefetch
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            result.current.refetch()
+            expect(mockRefetch).toHaveBeenCalled()
+        })
+
+        test('reflects success state after mutation completes', () => {
+            useShopperConsentsMutation.mockImplementation((mutationType) => {
+                if (mutationType === ShopperConsentsMutations.UpdateSubscription) {
+                    return {
+                        ...mockUseMutationResult,
+                        isSuccess: true
+                    }
+                }
+                return mockUseMutationResult
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isUpdateSuccess).toBe(true)
+        })
+    })
+
+    describe('Feature flag (EnableConsentWithMarketingCloud)', () => {
+        test('isFeatureEnabled is true when configuration value is true', () => {
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isFeatureEnabled).toBe(true)
+        })
+
+        test('isFeatureEnabled is false when configuration value is false', () => {
+            useConfigurations.mockReturnValue({
+                data: mockConfigurationsDisabled
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isFeatureEnabled).toBe(false)
+        })
+
+        test('isFeatureEnabled is false when configuration is missing', () => {
+            useConfigurations.mockReturnValue({
+                data: {configurations: []}
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isFeatureEnabled).toBe(false)
+        })
+
+        test('isFeatureEnabled is false when configurations data is undefined', () => {
+            useConfigurations.mockReturnValue({data: undefined})
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isFeatureEnabled).toBe(false)
+        })
+
+        test('isFeatureEnabled is false when value is string "true" (must be boolean)', () => {
+            useConfigurations.mockReturnValue({
+                data: {
+                    configurations: [{id: 'EnableConsentWithMarketingCloud', value: 'true'}]
+                }
+            })
+
+            const {result} = renderHook(() => useMarketingConsent())
+
+            expect(result.current.isFeatureEnabled).toBe(false)
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/da-DK.json b/packages/template-retail-react-app/app/static/translations/compiled/da-DK.json
index bd319ce1e6..38362c72ca 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/da-DK.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/da-DK.json
@@ -1535,12 +1535,6 @@
       "value": "E-mailadresse til nyhedsbrev"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Vær blandt de første, der får besked"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/de-DE.json b/packages/template-retail-react-app/app/static/translations/compiled/de-DE.json
index 413732a9c9..3db29b67a7 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/de-DE.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/de-DE.json
@@ -1543,12 +1543,6 @@
       "value": "E-Mail-Adresse für den Newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Aktuelle Infos für Sie"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
index bd748d942c..91dc211169 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
@@ -1947,6 +1947,18 @@
       "value": "Our Company"
     }
   ],
+  "footer.error.enter_valid_email": [
+    {
+      "type": 0,
+      "value": "Enter a valid email address."
+    }
+  ],
+  "footer.error.generic_error": [
+    {
+      "type": 0,
+      "value": "We couldn't process the subscription. Try again."
+    }
+  ],
   "footer.link.about_us": [
     {
       "type": 0,
@@ -2016,13 +2028,47 @@
   "footer.subscribe.button.sign_up": [
     {
       "type": 0,
-      "value": "Sign Up"
+      "value": "Subscribe"
     }
   ],
   "footer.subscribe.description.sign_up": [
     {
       "type": 0,
-      "value": "Sign up to stay in the loop about the hottest deals"
+      "value": "Be the first to know about latest offers, news, tips, and more."
+    }
+  ],
+  "footer.subscribe.disclaimer": [
+    {
+      "type": 0,
+      "value": "By submitting this, I agree to the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Terms & Conditions"
+        }
+      ],
+      "type": 8,
+      "value": "terms"
+    },
+    {
+      "type": 0,
+      "value": " and "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Privacy Policy"
+        }
+      ],
+      "type": 8,
+      "value": "privacy"
+    },
+    {
+      "type": 0,
+      "value": "."
     }
   ],
   "footer.subscribe.email.assistive_msg": [
@@ -2031,10 +2077,22 @@
       "value": "Email address for newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
+  "footer.subscribe.email.placeholder_text": [
+    {
+      "type": 0,
+      "value": "Enter your email address..."
+    }
+  ],
+  "footer.subscribe.heading.stay_updated": [
+    {
+      "type": 0,
+      "value": "Subscribe to Stay Updated"
+    }
+  ],
+  "footer.success_confirmation": [
     {
       "type": 0,
-      "value": "Be the first to know"
+      "value": "Thanks for subscribing!"
     }
   ],
   "form_action_buttons.button.cancel": [
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
index bd748d942c..91dc211169 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
@@ -1947,6 +1947,18 @@
       "value": "Our Company"
     }
   ],
+  "footer.error.enter_valid_email": [
+    {
+      "type": 0,
+      "value": "Enter a valid email address."
+    }
+  ],
+  "footer.error.generic_error": [
+    {
+      "type": 0,
+      "value": "We couldn't process the subscription. Try again."
+    }
+  ],
   "footer.link.about_us": [
     {
       "type": 0,
@@ -2016,13 +2028,47 @@
   "footer.subscribe.button.sign_up": [
     {
       "type": 0,
-      "value": "Sign Up"
+      "value": "Subscribe"
     }
   ],
   "footer.subscribe.description.sign_up": [
     {
       "type": 0,
-      "value": "Sign up to stay in the loop about the hottest deals"
+      "value": "Be the first to know about latest offers, news, tips, and more."
+    }
+  ],
+  "footer.subscribe.disclaimer": [
+    {
+      "type": 0,
+      "value": "By submitting this, I agree to the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Terms & Conditions"
+        }
+      ],
+      "type": 8,
+      "value": "terms"
+    },
+    {
+      "type": 0,
+      "value": " and "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Privacy Policy"
+        }
+      ],
+      "type": 8,
+      "value": "privacy"
+    },
+    {
+      "type": 0,
+      "value": "."
     }
   ],
   "footer.subscribe.email.assistive_msg": [
@@ -2031,10 +2077,22 @@
       "value": "Email address for newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
+  "footer.subscribe.email.placeholder_text": [
+    {
+      "type": 0,
+      "value": "Enter your email address..."
+    }
+  ],
+  "footer.subscribe.heading.stay_updated": [
+    {
+      "type": 0,
+      "value": "Subscribe to Stay Updated"
+    }
+  ],
+  "footer.success_confirmation": [
     {
       "type": 0,
-      "value": "Be the first to know"
+      "value": "Thanks for subscribing!"
     }
   ],
   "form_action_buttons.button.cancel": [
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
index 498ddbbedf..9440e39a3f 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
@@ -4011,6 +4011,34 @@
       "value": "]"
     }
   ],
+  "footer.error.enter_valid_email": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗƞŧḗḗř ȧȧ ṽȧȧŀīḓ ḗḗḿȧȧīŀ ȧȧḓḓřḗḗşş."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "footer.error.generic_error": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ẇḗḗ ƈǿǿŭŭŀḓƞ'ŧ ƥřǿǿƈḗḗşş ŧħḗḗ şŭŭƀşƈřīƥŧīǿǿƞ. Ŧřẏ ȧȧɠȧȧīƞ."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "footer.link.about_us": [
     {
       "type": 0,
@@ -4172,7 +4200,7 @@
     },
     {
       "type": 0,
-      "value": "Şīɠƞ Ŭƥ"
+      "value": "Şŭŭƀşƈřīƀḗḗ"
     },
     {
       "type": 0,
@@ -4186,7 +4214,49 @@
     },
     {
       "type": 0,
-      "value": "Şīɠƞ ŭŭƥ ŧǿǿ şŧȧȧẏ īƞ ŧħḗḗ ŀǿǿǿǿƥ ȧȧƀǿǿŭŭŧ ŧħḗḗ ħǿǿŧŧḗḗşŧ ḓḗḗȧȧŀş"
+      "value": "Ɓḗḗ ŧħḗḗ ƒīřşŧ ŧǿǿ ķƞǿǿẇ ȧȧƀǿǿŭŭŧ ŀȧȧŧḗḗşŧ ǿǿƒƒḗḗřş, ƞḗḗẇş, ŧīƥş, ȧȧƞḓ ḿǿǿřḗḗ."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "footer.subscribe.disclaimer": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ɓẏ şŭŭƀḿīŧŧīƞɠ ŧħīş, Ī ȧȧɠřḗḗḗḗ ŧǿǿ ŧħḗḗ "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Ŧḗḗřḿş & Ƈǿǿƞḓīŧīǿǿƞş"
+        }
+      ],
+      "type": 8,
+      "value": "terms"
+    },
+    {
+      "type": 0,
+      "value": " ȧȧƞḓ "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Ƥřīṽȧȧƈẏ Ƥǿǿŀīƈẏ"
+        }
+      ],
+      "type": 8,
+      "value": "privacy"
+    },
+    {
+      "type": 0,
+      "value": "."
     },
     {
       "type": 0,
@@ -4207,14 +4277,42 @@
       "value": "]"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
+  "footer.subscribe.email.placeholder_text": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḗƞŧḗḗř ẏǿǿŭŭř ḗḗḿȧȧīŀ ȧȧḓḓřḗḗşş..."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "footer.subscribe.heading.stay_updated": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Şŭŭƀşƈřīƀḗḗ ŧǿǿ Şŧȧȧẏ Ŭƥḓȧȧŧḗḗḓ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "footer.success_confirmation": [
     {
       "type": 0,
       "value": "["
     },
     {
       "type": 0,
-      "value": "Ɓḗḗ ŧħḗḗ ƒīřşŧ ŧǿǿ ķƞǿǿẇ"
+      "value": "Ŧħȧȧƞķş ƒǿǿř şŭŭƀşƈřīƀīƞɠ!"
     },
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/es-MX.json b/packages/template-retail-react-app/app/static/translations/compiled/es-MX.json
index d62af6f069..6446c7830a 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/es-MX.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/es-MX.json
@@ -1557,12 +1557,6 @@
       "value": "Dirección de correo electrónico para el boletín informativo"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Sea el primero en saber"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/fi-FI.json b/packages/template-retail-react-app/app/static/translations/compiled/fi-FI.json
index 9dd7c540ca..6a6297293a 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/fi-FI.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/fi-FI.json
@@ -1543,12 +1543,6 @@
       "value": "Sähköpostiosoite uutiskirjettä varten"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Saat tietää ensimmäisten joukossa"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/fr-FR.json b/packages/template-retail-react-app/app/static/translations/compiled/fr-FR.json
index 4acaf37247..ac41c117b8 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/fr-FR.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/fr-FR.json
@@ -1557,12 +1557,6 @@
       "value": "Adresse e-mail pour la newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Soyez parmi les premiers informés"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/it-IT.json b/packages/template-retail-react-app/app/static/translations/compiled/it-IT.json
index cd4c4698a9..9e35ea8ac1 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/it-IT.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/it-IT.json
@@ -1539,12 +1539,6 @@
       "value": "Indirizzo e-mail per la newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Ricevi le novità in anteprima"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/ja-JP.json b/packages/template-retail-react-app/app/static/translations/compiled/ja-JP.json
index 163a236827..d380066ce3 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/ja-JP.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/ja-JP.json
@@ -1547,12 +1547,6 @@
       "value": "ニュースレターの Eメールアドレス"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "最新情報を誰よりも早く入手"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/ko-KR.json b/packages/template-retail-react-app/app/static/translations/compiled/ko-KR.json
index 8d5c55d1e5..5c7c1535e1 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/ko-KR.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/ko-KR.json
@@ -1527,12 +1527,6 @@
       "value": "뉴스레터 수신 이메일 주소"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "최신 정보를 누구보다 빨리 받아보세요."
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/nl-NL.json b/packages/template-retail-react-app/app/static/translations/compiled/nl-NL.json
index 561acf35c7..0fc74e59c5 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/nl-NL.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/nl-NL.json
@@ -1543,12 +1543,6 @@
       "value": "E-mailadres voor nieuwsbrief"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Zorg dat je als eerste op de hoogte bent"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/no-NO.json b/packages/template-retail-react-app/app/static/translations/compiled/no-NO.json
index 8188dc732e..7b35608e93 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/no-NO.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/no-NO.json
@@ -1539,12 +1539,6 @@
       "value": "E-postadresse for nyhetsbrev"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Bli den første som får vite det"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/pl-PL.json b/packages/template-retail-react-app/app/static/translations/compiled/pl-PL.json
index aa27d5563b..bb3be071e2 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/pl-PL.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/pl-PL.json
@@ -1539,12 +1539,6 @@
       "value": "Adres e-mail do wysyłania newslettera"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Bądź na bieżąco"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/pt-BR.json b/packages/template-retail-react-app/app/static/translations/compiled/pt-BR.json
index 3ca8ef3d5e..f9a291cdaa 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/pt-BR.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/pt-BR.json
@@ -1543,12 +1543,6 @@
       "value": "Endereço de e-mail para newsletter"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Seja o primeiro a saber"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/sv-SE.json b/packages/template-retail-react-app/app/static/translations/compiled/sv-SE.json
index 055deac38c..f8df619111 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/sv-SE.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/sv-SE.json
@@ -1539,12 +1539,6 @@
       "value": "E-postadress för nyhetsbrev"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "Håll dig uppdaterad"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/zh-CN.json b/packages/template-retail-react-app/app/static/translations/compiled/zh-CN.json
index 83c3f07aae..3c32cff2e2 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/zh-CN.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/zh-CN.json
@@ -1573,12 +1573,6 @@
       "value": "资讯订阅电子邮箱"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "率先了解"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/zh-TW.json b/packages/template-retail-react-app/app/static/translations/compiled/zh-TW.json
index 5d5e8d9a8c..f7b9a26fc3 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/zh-TW.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/zh-TW.json
@@ -1539,12 +1539,6 @@
       "value": "電子報的電子郵件地址"
     }
   ],
-  "footer.subscribe.heading.first_to_know": [
-    {
-      "type": 0,
-      "value": "搶先獲得消息"
-    }
-  ],
   "form_action_buttons.button.cancel": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/theme/components/base/alert.js b/packages/template-retail-react-app/app/theme/components/base/alert.js
index 93fe89a2f9..c27deaadab 100644
--- a/packages/template-retail-react-app/app/theme/components/base/alert.js
+++ b/packages/template-retail-react-app/app/theme/components/base/alert.js
@@ -4,14 +4,48 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+
+// Helper function to get the appropriate colorScheme based on status
+function getColorScheme(props) {
+    const statusColorMap = {
+        error: 'red',
+        success: 'green',
+        warning: 'orange',
+        info: 'blue'
+    }
+    return props.colorScheme || statusColorMap[props.status] || 'green'
+}
+
 export default {
-    variants: {
-        subtle: (props) => ({
+    baseStyle: (props) => {
+        const colorScheme = getColorScheme(props)
+
+        return {
             container: {
-                borderColor: `${props.colorScheme || 'green'}.600`,
-                borderWidth: 1,
-                borderStyle: 'solid'
+                borderRadius: 'base'
+            },
+            icon: {
+                color: `${colorScheme}.500`,
+                boxSize: 4
+            },
+            description: {
+                fontSize: 'sm',
+                ml: 3,
+                color: `${colorScheme}.700`
+            }
+        }
+    },
+    variants: {
+        subtle: (props) => {
+            const colorScheme = getColorScheme(props)
+
+            return {
+                container: {
+                    borderColor: `${colorScheme}.600`,
+                    borderWidth: 1,
+                    borderStyle: 'solid'
+                }
             }
-        })
+        }
     }
 }
diff --git a/packages/template-retail-react-app/app/theme/components/project/subscribe-form.js b/packages/template-retail-react-app/app/theme/components/project/subscribe-form.js
new file mode 100644
index 0000000000..695dd13016
--- /dev/null
+++ b/packages/template-retail-react-app/app/theme/components/project/subscribe-form.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2025, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export default {
+    parts: [
+        'container',
+        'heading',
+        'message',
+        'field',
+        'buttonContainer',
+        'socialIcons',
+        'link',
+        'disclaimer'
+    ],
+    baseStyle: {
+        container: {
+            maxWidth: {base: '21.5rem', lg: 'none'}
+        },
+        heading: {
+            fontSize: 'md',
+            paddingTop: {base: 0, lg: 3},
+            marginBottom: 2
+        },
+        message: {
+            fontSize: 'sm',
+            marginBottom: 4
+        },
+        field: {
+            background: 'white',
+            color: 'gray.900'
+        },
+        buttonContainer: {
+            width: 'auto'
+        },
+        socialIcons: {
+            marginTop: 4
+        },
+        link: {
+            color: 'blue.600'
+        },
+        disclaimer: {
+            fontSize: 'xs',
+            color: 'gray.600',
+            marginTop: 2
+        }
+    }
+}
diff --git a/packages/template-retail-react-app/app/theme/index.js b/packages/template-retail-react-app/app/theme/index.js
index 5da80d9ecb..178c4ea696 100644
--- a/packages/template-retail-react-app/app/theme/index.js
+++ b/packages/template-retail-react-app/app/theme/index.js
@@ -52,6 +52,7 @@ import SwatchGroup from '@salesforce/retail-react-app/app/theme/components/proje
 import ImageGallery from '@salesforce/retail-react-app/app/theme/components/project/image-gallery'
 import SearchSuggestions from '@salesforce/retail-react-app/app/theme/components/project/search-suggestions'
 import HorizontalSuggestions from '@salesforce/retail-react-app/app/theme/components/project/horizontal-suggestions'
+import SubscribeForm from '@salesforce/retail-react-app/app/theme/components/project/subscribe-form'
 
 // Please refer to the Chakra-Ui theme customization docs found
 // here https://chakra-ui.com/docs/theming/customize-theme to learn
@@ -101,7 +102,8 @@ export const overrides = {
         SwatchGroup,
         ImageGallery,
         SearchSuggestions,
-        HorizontalSuggestions
+        HorizontalSuggestions,
+        SubscribeForm
     }
 }
 
diff --git a/packages/template-retail-react-app/app/utils/subscription-validators.js b/packages/template-retail-react-app/app/utils/subscription-validators.js
new file mode 100644
index 0000000000..bd0d9a63ba
--- /dev/null
+++ b/packages/template-retail-react-app/app/utils/subscription-validators.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * Regular expression for email validation
+ * Validates standard email format with domain and TLD
+ */
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/
+
+/**
+ * Regular expression for phone number validation (E.164 format)
+ * Supports international phone numbers with optional + prefix
+ * Example: +15551234567
+ */
+export const PHONE_REGEX = /^\+?[1-9]\d{1,14}$/
+
+/**
+ * Validation result type
+ * @typedef {Object} ValidationResult
+ * @property {boolean} valid - Whether the value is valid
+ * @property {string} [error] - Error code if validation failed ('required' | 'invalid_format')
+ */
+
+/**
+ * Validates an email address
+ * @param {string} email - The email address to validate
+ * @returns {ValidationResult} Validation result with error code if invalid
+ */
+export const validateEmail = (email) => {
+    if (!email || email.trim() === '') {
+        return {valid: false, error: 'required'}
+    }
+    if (!EMAIL_REGEX.test(email)) {
+        return {valid: false, error: 'invalid_format'}
+    }
+    return {valid: true}
+}
+
+/**
+ * Validates a phone number (E.164 international format)
+ * @param {string} phone - The phone number to validate
+ * @returns {ValidationResult} Validation result with error code if invalid
+ */
+export const validatePhone = (phone) => {
+    if (!phone || phone.trim() === '') {
+        return {valid: false, error: 'required'}
+    }
+    if (!PHONE_REGEX.test(phone)) {
+        return {valid: false, error: 'invalid_format'}
+    }
+    return {valid: true}
+}
+
+/**
+ * Generic validator factory for custom validation logic
+ * @param {RegExp} regex - Regular expression for format validation
+ * @returns {Function} Validator function that returns ValidationResult
+ */
+export const createValidator = (regex) => {
+    return (value) => {
+        if (!value || value.trim() === '') {
+            return {valid: false, error: 'required'}
+        }
+        if (!regex.test(value)) {
+            return {valid: false, error: 'invalid_format'}
+        }
+        return {valid: true}
+    }
+}
diff --git a/packages/template-retail-react-app/app/utils/subscription-validators.test.js b/packages/template-retail-react-app/app/utils/subscription-validators.test.js
new file mode 100644
index 0000000000..d32cb6f89b
--- /dev/null
+++ b/packages/template-retail-react-app/app/utils/subscription-validators.test.js
@@ -0,0 +1,259 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {
+    validateEmail,
+    validatePhone,
+    createValidator,
+    EMAIL_REGEX,
+    PHONE_REGEX
+} from '@salesforce/retail-react-app/app/utils/subscription-validators'
+
+describe('subscription-validators', () => {
+    describe('EMAIL_REGEX', () => {
+        test('matches valid email addresses', () => {
+            expect(EMAIL_REGEX.test('user@example.com')).toBe(true)
+            expect(EMAIL_REGEX.test('test.user@example.com')).toBe(true)
+            expect(EMAIL_REGEX.test('user+tag@example.co.uk')).toBe(true)
+            expect(EMAIL_REGEX.test('user123@subdomain.example.com')).toBe(true)
+            expect(EMAIL_REGEX.test('user_name@exampledomain.com')).toBe(true)
+        })
+
+        test('rejects invalid email addresses', () => {
+            expect(EMAIL_REGEX.test('invalid')).toBe(false)
+            expect(EMAIL_REGEX.test('invalid@')).toBe(false)
+            expect(EMAIL_REGEX.test('@example.com')).toBe(false)
+            expect(EMAIL_REGEX.test('invalid@.com')).toBe(false)
+            expect(EMAIL_REGEX.test('invalid@domain')).toBe(false)
+            expect(EMAIL_REGEX.test('invalid @example.com')).toBe(false)
+            expect(EMAIL_REGEX.test('')).toBe(false)
+        })
+    })
+
+    describe('PHONE_REGEX', () => {
+        test('matches valid phone numbers in E.164 format', () => {
+            expect(PHONE_REGEX.test('+15551234567')).toBe(true)
+            expect(PHONE_REGEX.test('+442071234567')).toBe(true)
+            expect(PHONE_REGEX.test('+61412345678')).toBe(true)
+            expect(PHONE_REGEX.test('15551234567')).toBe(true) // Optional +
+        })
+
+        test('rejects invalid phone numbers', () => {
+            expect(PHONE_REGEX.test('+0123456789')).toBe(false) // Starts with 0
+            expect(PHONE_REGEX.test('+1')).toBe(false) // Too short (only 1 digit)
+            expect(PHONE_REGEX.test('1')).toBe(false) // Too short (only 1 digit)
+            expect(PHONE_REGEX.test('+1234567890123456')).toBe(false) // Too long
+            expect(PHONE_REGEX.test('abc123456789')).toBe(false) // Contains letters
+            expect(PHONE_REGEX.test('')).toBe(false)
+        })
+    })
+
+    describe('validateEmail', () => {
+        describe('valid emails', () => {
+            test('returns valid: true for standard email', () => {
+                const result = validateEmail('user@example.com')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for email with subdomain', () => {
+                const result = validateEmail('user@mail.example.com')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for email with plus addressing', () => {
+                const result = validateEmail('user+tag@example.com')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for email with dots', () => {
+                const result = validateEmail('first.last@example.com')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for email with numbers', () => {
+                const result = validateEmail('user123@example456.com')
+                expect(result).toEqual({valid: true})
+            })
+        })
+
+        describe('invalid emails', () => {
+            test('returns error "required" for empty string', () => {
+                const result = validateEmail('')
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for whitespace only', () => {
+                const result = validateEmail('   ')
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for undefined', () => {
+                const result = validateEmail(undefined)
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for null', () => {
+                const result = validateEmail(null)
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "invalid_format" for missing @', () => {
+                const result = validateEmail('userexample.com')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for missing domain', () => {
+                const result = validateEmail('user@')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for missing TLD', () => {
+                const result = validateEmail('user@example')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for missing username', () => {
+                const result = validateEmail('@example.com')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for spaces in email', () => {
+                const result = validateEmail('user name@example.com')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for invalid characters', () => {
+                const result = validateEmail('user@exam ple.com')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+        })
+    })
+
+    describe('validatePhone', () => {
+        describe('valid phone numbers', () => {
+            test('returns valid: true for US number with +', () => {
+                const result = validatePhone('+15551234567')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for US number without +', () => {
+                const result = validatePhone('15551234567')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for UK number', () => {
+                const result = validatePhone('+442071234567')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for Australian number', () => {
+                const result = validatePhone('+61412345678')
+                expect(result).toEqual({valid: true})
+            })
+
+            test('returns valid: true for German number', () => {
+                const result = validatePhone('+4915112345678')
+                expect(result).toEqual({valid: true})
+            })
+        })
+
+        describe('invalid phone numbers', () => {
+            test('returns error "required" for empty string', () => {
+                const result = validatePhone('')
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for whitespace only', () => {
+                const result = validatePhone('   ')
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for undefined', () => {
+                const result = validatePhone(undefined)
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "required" for null', () => {
+                const result = validatePhone(null)
+                expect(result).toEqual({valid: false, error: 'required'})
+            })
+
+            test('returns error "invalid_format" for number starting with 0', () => {
+                const result = validatePhone('+01234567890')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for too short number', () => {
+                const result = validatePhone('+1') // Only 1 digit
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for too long number', () => {
+                const result = validatePhone('+12345678901234567')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for number with letters', () => {
+                const result = validatePhone('+1555ABC1234')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for number with spaces', () => {
+                const result = validatePhone('+1 555 123 4567')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+
+            test('returns error "invalid_format" for number with dashes', () => {
+                const result = validatePhone('+1-555-123-4567')
+                expect(result).toEqual({valid: false, error: 'invalid_format'})
+            })
+        })
+    })
+
+    describe('createValidator', () => {
+        test('creates a validator function that validates against custom regex', () => {
+            const zipCodeRegex = /^\d{5}$/
+            const validateZipCode = createValidator(zipCodeRegex)
+
+            expect(validateZipCode('12345')).toEqual({valid: true})
+            expect(validateZipCode('ABCDE')).toEqual({valid: false, error: 'invalid_format'})
+            expect(validateZipCode('123')).toEqual({valid: false, error: 'invalid_format'})
+        })
+
+        test('created validator returns error "required" for empty value', () => {
+            const customValidator = createValidator(/^test$/)
+
+            expect(customValidator('')).toEqual({valid: false, error: 'required'})
+            expect(customValidator('   ')).toEqual({valid: false, error: 'required'})
+        })
+
+        test('created validator returns error "invalid_format" for mismatched value', () => {
+            const customValidator = createValidator(/^ABC\d{3}$/)
+
+            expect(customValidator('XYZ123')).toEqual({valid: false, error: 'invalid_format'})
+            expect(customValidator('ABC12')).toEqual({valid: false, error: 'invalid_format'})
+        })
+
+        test('created validator returns valid: true for matched value', () => {
+            const customValidator = createValidator(/^[A-Z]{3}\d{3}$/)
+
+            expect(customValidator('ABC123')).toEqual({valid: true})
+            expect(customValidator('XYZ789')).toEqual({valid: true})
+        })
+
+        test('creates independent validators that do not interfere', () => {
+            const validator1 = createValidator(/^\d{5}$/)
+            const validator2 = createValidator(/^[A-Z]{3}$/)
+
+            expect(validator1('12345')).toEqual({valid: true})
+            expect(validator1('ABC')).toEqual({valid: false, error: 'invalid_format'})
+
+            expect(validator2('ABC')).toEqual({valid: true})
+            expect(validator2('12345')).toEqual({valid: false, error: 'invalid_format'})
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/translations/da-DK.json b/packages/template-retail-react-app/translations/da-DK.json
index e75eb67a51..439e5544bd 100644
--- a/packages/template-retail-react-app/translations/da-DK.json
+++ b/packages/template-retail-react-app/translations/da-DK.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "E-mailadresse til nyhedsbrev"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Vær blandt de første, der får besked"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Annuller"
   },
diff --git a/packages/template-retail-react-app/translations/de-DE.json b/packages/template-retail-react-app/translations/de-DE.json
index 70536c89bc..aad62afb23 100644
--- a/packages/template-retail-react-app/translations/de-DE.json
+++ b/packages/template-retail-react-app/translations/de-DE.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "E-Mail-Adresse für den Newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Aktuelle Infos für Sie"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Abbrechen"
   },
diff --git a/packages/template-retail-react-app/translations/en-GB.json b/packages/template-retail-react-app/translations/en-GB.json
index 4a2c79e17d..0e1848b42f 100644
--- a/packages/template-retail-react-app/translations/en-GB.json
+++ b/packages/template-retail-react-app/translations/en-GB.json
@@ -777,6 +777,12 @@
   "footer.column.our_company": {
     "defaultMessage": "Our Company"
   },
+  "footer.error.enter_valid_email": {
+    "defaultMessage": "Enter a valid email address."
+  },
+  "footer.error.generic_error": {
+    "defaultMessage": "We couldn't process the subscription. Try again."
+  },
   "footer.link.about_us": {
     "defaultMessage": "About Us"
   },
@@ -811,16 +817,25 @@
     "defaultMessage": "Salesforce or its affiliates. All rights reserved. This is a demo store only. Orders made WILL NOT be processed."
   },
   "footer.subscribe.button.sign_up": {
-    "defaultMessage": "Sign Up"
+    "defaultMessage": "Subscribe"
   },
   "footer.subscribe.description.sign_up": {
-    "defaultMessage": "Sign up to stay in the loop about the hottest deals"
+    "defaultMessage": "Be the first to know about latest offers, news, tips, and more."
+  },
+  "footer.subscribe.disclaimer": {
+    "defaultMessage": "By submitting this, I agree to the <terms>Terms & Conditions</terms> and <privacy>Privacy Policy</privacy>."
   },
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Email address for newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Be the first to know"
+  "footer.subscribe.email.placeholder_text": {
+    "defaultMessage": "Enter your email address..."
+  },
+  "footer.subscribe.heading.stay_updated": {
+    "defaultMessage": "Subscribe to Stay Updated"
+  },
+  "footer.success_confirmation": {
+    "defaultMessage": "Thanks for subscribing!"
   },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Cancel"
diff --git a/packages/template-retail-react-app/translations/en-US.json b/packages/template-retail-react-app/translations/en-US.json
index 4a2c79e17d..0e1848b42f 100644
--- a/packages/template-retail-react-app/translations/en-US.json
+++ b/packages/template-retail-react-app/translations/en-US.json
@@ -777,6 +777,12 @@
   "footer.column.our_company": {
     "defaultMessage": "Our Company"
   },
+  "footer.error.enter_valid_email": {
+    "defaultMessage": "Enter a valid email address."
+  },
+  "footer.error.generic_error": {
+    "defaultMessage": "We couldn't process the subscription. Try again."
+  },
   "footer.link.about_us": {
     "defaultMessage": "About Us"
   },
@@ -811,16 +817,25 @@
     "defaultMessage": "Salesforce or its affiliates. All rights reserved. This is a demo store only. Orders made WILL NOT be processed."
   },
   "footer.subscribe.button.sign_up": {
-    "defaultMessage": "Sign Up"
+    "defaultMessage": "Subscribe"
   },
   "footer.subscribe.description.sign_up": {
-    "defaultMessage": "Sign up to stay in the loop about the hottest deals"
+    "defaultMessage": "Be the first to know about latest offers, news, tips, and more."
+  },
+  "footer.subscribe.disclaimer": {
+    "defaultMessage": "By submitting this, I agree to the <terms>Terms & Conditions</terms> and <privacy>Privacy Policy</privacy>."
   },
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Email address for newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Be the first to know"
+  "footer.subscribe.email.placeholder_text": {
+    "defaultMessage": "Enter your email address..."
+  },
+  "footer.subscribe.heading.stay_updated": {
+    "defaultMessage": "Subscribe to Stay Updated"
+  },
+  "footer.success_confirmation": {
+    "defaultMessage": "Thanks for subscribing!"
   },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Cancel"
diff --git a/packages/template-retail-react-app/translations/es-MX.json b/packages/template-retail-react-app/translations/es-MX.json
index 7f1d08938c..db5a6d84e2 100644
--- a/packages/template-retail-react-app/translations/es-MX.json
+++ b/packages/template-retail-react-app/translations/es-MX.json
@@ -663,9 +663,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Dirección de correo electrónico para el boletín informativo"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Sea el primero en saber"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Cancelar"
   },
diff --git a/packages/template-retail-react-app/translations/fi-FI.json b/packages/template-retail-react-app/translations/fi-FI.json
index 5363d98053..a9602d2a2f 100644
--- a/packages/template-retail-react-app/translations/fi-FI.json
+++ b/packages/template-retail-react-app/translations/fi-FI.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Sähköpostiosoite uutiskirjettä varten"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Saat tietää ensimmäisten joukossa"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Peruuta"
   },
diff --git a/packages/template-retail-react-app/translations/fr-FR.json b/packages/template-retail-react-app/translations/fr-FR.json
index 09d1816dd8..db12d40c75 100644
--- a/packages/template-retail-react-app/translations/fr-FR.json
+++ b/packages/template-retail-react-app/translations/fr-FR.json
@@ -663,9 +663,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Adresse e-mail pour la newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Soyez parmi les premiers informés"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Annuler"
   },
diff --git a/packages/template-retail-react-app/translations/it-IT.json b/packages/template-retail-react-app/translations/it-IT.json
index 17d106a61a..9dae069be7 100644
--- a/packages/template-retail-react-app/translations/it-IT.json
+++ b/packages/template-retail-react-app/translations/it-IT.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Indirizzo e-mail per la newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Ricevi le novità in anteprima"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Annulla"
   },
diff --git a/packages/template-retail-react-app/translations/ja-JP.json b/packages/template-retail-react-app/translations/ja-JP.json
index b8c39af2d4..a0869523cb 100644
--- a/packages/template-retail-react-app/translations/ja-JP.json
+++ b/packages/template-retail-react-app/translations/ja-JP.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "ニュースレターの Eメールアドレス"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "最新情報を誰よりも早く入手"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "キャンセル"
   },
diff --git a/packages/template-retail-react-app/translations/ko-KR.json b/packages/template-retail-react-app/translations/ko-KR.json
index 3d989cd277..14b309eca5 100644
--- a/packages/template-retail-react-app/translations/ko-KR.json
+++ b/packages/template-retail-react-app/translations/ko-KR.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "뉴스레터 수신 이메일 주소"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "최신 정보를 누구보다 빨리 받아보세요."
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "취소"
   },
diff --git a/packages/template-retail-react-app/translations/nl-NL.json b/packages/template-retail-react-app/translations/nl-NL.json
index 102a4e4408..b5e42f91f4 100644
--- a/packages/template-retail-react-app/translations/nl-NL.json
+++ b/packages/template-retail-react-app/translations/nl-NL.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "E-mailadres voor nieuwsbrief"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Zorg dat je als eerste op de hoogte bent"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Annuleren"
   },
diff --git a/packages/template-retail-react-app/translations/no-NO.json b/packages/template-retail-react-app/translations/no-NO.json
index 59f5b2111b..81f5c0c878 100644
--- a/packages/template-retail-react-app/translations/no-NO.json
+++ b/packages/template-retail-react-app/translations/no-NO.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "E-postadresse for nyhetsbrev"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Bli den første som får vite det"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Avbryt"
   },
diff --git a/packages/template-retail-react-app/translations/pl-PL.json b/packages/template-retail-react-app/translations/pl-PL.json
index 24cd3e5bda..4568246bc8 100644
--- a/packages/template-retail-react-app/translations/pl-PL.json
+++ b/packages/template-retail-react-app/translations/pl-PL.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Adres e-mail do wysyłania newslettera"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Bądź na bieżąco"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Anuluj"
   },
diff --git a/packages/template-retail-react-app/translations/pt-BR.json b/packages/template-retail-react-app/translations/pt-BR.json
index 5358a28a07..0b182ead8c 100644
--- a/packages/template-retail-react-app/translations/pt-BR.json
+++ b/packages/template-retail-react-app/translations/pt-BR.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "Endereço de e-mail para newsletter"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Seja o primeiro a saber"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Cancelar"
   },
diff --git a/packages/template-retail-react-app/translations/sv-SE.json b/packages/template-retail-react-app/translations/sv-SE.json
index bb76f61271..369fbffb01 100644
--- a/packages/template-retail-react-app/translations/sv-SE.json
+++ b/packages/template-retail-react-app/translations/sv-SE.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "E-postadress för nyhetsbrev"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "Håll dig uppdaterad"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "Avbryt"
   },
diff --git a/packages/template-retail-react-app/translations/zh-CN.json b/packages/template-retail-react-app/translations/zh-CN.json
index 8538f5d6ef..73b0bacb01 100644
--- a/packages/template-retail-react-app/translations/zh-CN.json
+++ b/packages/template-retail-react-app/translations/zh-CN.json
@@ -663,9 +663,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "资讯订阅电子邮箱"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "率先了解"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "取消"
   },
diff --git a/packages/template-retail-react-app/translations/zh-TW.json b/packages/template-retail-react-app/translations/zh-TW.json
index c10548a08f..e45865407a 100644
--- a/packages/template-retail-react-app/translations/zh-TW.json
+++ b/packages/template-retail-react-app/translations/zh-TW.json
@@ -636,9 +636,6 @@
   "footer.subscribe.email.assistive_msg": {
     "defaultMessage": "電子報的電子郵件地址"
   },
-  "footer.subscribe.heading.first_to_know": {
-    "defaultMessage": "搶先獲得消息"
-  },
   "form_action_buttons.button.cancel": {
     "defaultMessage": "取消"
   },