From 7474c4d483551c3bf4b5076db4f9be0e2bab5bda Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Thu, 9 Apr 2026 11:08:06 +0300
Subject: [PATCH 01/12] feat: enhance SaveArticleButton and useUASButton: add
 title prop, implement handleSaveArticle, update tests

---
 .../SaveArticleButton/index.test.tsx          |  38 +++++++
 .../components/SaveArticleButton/index.tsx    |  22 ++--
 src/app/hooks/useUASButton/index.test.tsx     | 100 +++++++++++++++++-
 src/app/hooks/useUASButton/index.ts           |  34 ++++--
 .../useUASFetchSaveStatus/index.test.tsx      |   4 +-
 src/app/hooks/useUASFetchSaveStatus/index.ts  |  17 +--
 src/app/lib/uasApi/uasUtility.ts              |  45 ++++++--
 src/app/pages/ArticlePage/ArticlePage.tsx     |   3 +
 8 files changed, 227 insertions(+), 36 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.test.tsx b/src/app/components/SaveArticleButton/index.test.tsx
index 709b17cd8e7..763ba1d37af 100644
--- a/src/app/components/SaveArticleButton/index.test.tsx
+++ b/src/app/components/SaveArticleButton/index.test.tsx
@@ -10,8 +10,11 @@ describe('SaveArticleButton', () => {
   const defaultProps = {
     articleId: '123',
     service: 'hindi',
+    title: 'Test Article Title',
   };
 
+  const mockHandleSaveArticle = jest.fn();
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -21,6 +24,7 @@ describe('SaveArticleButton', () => {
       showButton: false,
       isSaved: false,
       isLoading: false,
+      handleSaveArticle: mockHandleSaveArticle,
     });
 
     const { container } = render(<SaveArticleButton {...defaultProps} />);
@@ -32,6 +36,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: false,
       isLoading: false,
+      handleSaveArticle: mockHandleSaveArticle,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -43,6 +48,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: true,
       isLoading: false,
+      handleSaveArticle: mockHandleSaveArticle,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -54,6 +60,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: false,
       isLoading: true,
+      handleSaveArticle: mockHandleSaveArticle,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -62,4 +69,35 @@ describe('SaveArticleButton', () => {
     expect(button).toHaveTextContent('Loading...');
     expect(button).toBeDisabled();
   });
+
+  test('calls handleSaveArticle when button is clicked', async () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: false,
+      isLoading: false,
+      handleSaveArticle: mockHandleSaveArticle,
+    });
+
+    render(<SaveArticleButton {...defaultProps} />);
+    screen.getByRole('button').click();
+
+    expect(mockHandleSaveArticle).toHaveBeenCalledTimes(1);
+  });
+
+  test('passes title to useUASButton hook', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: false,
+      isLoading: false,
+      handleSaveArticle: mockHandleSaveArticle,
+    });
+
+    render(<SaveArticleButton {...defaultProps} />);
+
+    expect(mockedUseUASButton).toHaveBeenCalledWith({
+      articleId: '123',
+      service: 'hindi',
+      title: 'Test Article Title',
+    });
+  });
 });
diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 2587917a198..17e1174909d 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -4,17 +4,20 @@ import styles from './index.styles';
 interface SaveArticleButtonProps {
   articleId: string;
   service: string;
+  title: string;
 }
-/** A button component that allows users to save an article for later reading,
- * showing the button based on user sign in status and feature toggles,
- * and displaying the saved status, loading state, and handling errors from the UAS API.
- * FUTURE TODO : Implement button click handler to toggle saved state */
 
-const SaveArticleButton = ({ articleId, service }: SaveArticleButtonProps) => {
-  const { showButton, isSaved, isLoading, error } = useUASButton({
-    articleId,
-    service,
-  });
+const SaveArticleButton = ({
+  articleId,
+  service,
+  title,
+}: SaveArticleButtonProps) => {
+  const { showButton, isSaved, isLoading, error, handleSaveArticle } =
+    useUASButton({
+      articleId,
+      service,
+      title,
+    });
 
   if (!showButton) {
     return null;
@@ -43,6 +46,7 @@ const SaveArticleButton = ({ articleId, service }: SaveArticleButtonProps) => {
     <button
       css={styles.buttonWrapper}
       type="button"
+      onClick={handleSaveArticle}
       disabled={isLoading}
       aria-label={buttonLabel}
       title={buttonLabel}
diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index c2371968beb..3dbac093112 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -1,7 +1,11 @@
 import { use } from 'react';
-import { renderHook } from '#app/components/react-testing-library-with-providers';
+import {
+  renderHook,
+  act,
+} from '#app/components/react-testing-library-with-providers';
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import isLocal from '#app/lib/utilities/isLocal';
+import uasApiRequest from '#app/lib/uasApi';
 import useUASButton from './index';
 
 import useToggle from '../useToggle';
@@ -9,6 +13,7 @@ import useToggle from '../useToggle';
 jest.mock('#app/hooks/useUASFetchSaveStatus');
 jest.mock('../useToggle');
 jest.mock('#app/lib/utilities/isLocal');
+jest.mock('#app/lib/uasApi');
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   use: jest.fn(),
@@ -17,12 +22,17 @@ jest.mock('react', () => ({
 const mockuseUASFetchSaveStatus = useUASFetchSaveStatus as jest.Mock;
 const mockUseToggle = useToggle as jest.Mock;
 const mockIsLocal = isLocal as jest.Mock;
+const mockUasApiRequest = uasApiRequest as jest.Mock;
+
 describe('useUASButton', () => {
   const defaultProps = {
     articleId: '123',
     service: 'hindi',
+    title: 'Test Article',
   };
 
+  const mockSetIsSaved = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
 
@@ -30,6 +40,7 @@ describe('useUASButton', () => {
       isSaved: false,
       isLoading: false,
       error: null,
+      setIsSaved: mockSetIsSaved,
     });
 
     (use as jest.Mock).mockReturnValue({
@@ -70,6 +81,7 @@ describe('useUASButton', () => {
       isSaved: true,
       isLoading: false,
       error: null,
+      setIsSaved: mockSetIsSaved,
     });
 
     const { result } = renderHook(() => useUASButton(defaultProps));
@@ -122,4 +134,90 @@ describe('useUASButton', () => {
 
     expect(result.current.showButton).toBe(false);
   });
+
+  describe('handleSaveArticle', () => {
+    beforeEach(() => {
+      mockUseToggle.mockReturnValue({ enabled: true });
+      mockIsLocal.mockReturnValue(false);
+      (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+      mockUasApiRequest.mockResolvedValue({ ok: true, status: 202 });
+    });
+
+    test('sends POST request with correct payload when clicked', async () => {
+      mockuseUASFetchSaveStatus.mockReturnValue({
+        isSaved: false,
+        isLoading: false,
+        error: null,
+        setIsSaved: mockSetIsSaved,
+      });
+
+      const { result } = renderHook(() => useUASButton(defaultProps));
+
+      await act(async () => {
+        await result.current.handleSaveArticle();
+      });
+
+      expect(mockUasApiRequest).toHaveBeenCalledWith('POST', 'favourites', {
+        body: {
+          activityType: 'favourites',
+          resourceDomain: 'articles',
+          resourceType: 'article',
+          resourceId: '123',
+          action: 'favourited',
+          metaData: {
+            service: 'hindi',
+            articleId: '123',
+            title: 'Test Article',
+          },
+        },
+      });
+    });
+
+    test('sets isSaved to true on successful POST', async () => {
+      mockuseUASFetchSaveStatus.mockReturnValue({
+        isSaved: false,
+        isLoading: false,
+        error: null,
+        setIsSaved: mockSetIsSaved,
+      });
+
+      const { result } = renderHook(() => useUASButton(defaultProps));
+
+      await act(async () => {
+        await result.current.handleSaveArticle();
+      });
+
+      expect(mockSetIsSaved).toHaveBeenCalledWith(true);
+    });
+
+    test('does not send POST if article is already saved', async () => {
+      mockuseUASFetchSaveStatus.mockReturnValue({
+        isSaved: true,
+        isLoading: false,
+        error: null,
+        setIsSaved: mockSetIsSaved,
+      });
+
+      const { result } = renderHook(() => useUASButton(defaultProps));
+
+      await act(async () => {
+        await result.current.handleSaveArticle();
+      });
+
+      expect(mockUasApiRequest).not.toHaveBeenCalled();
+    });
+
+    test('returns handleSaveArticle function', () => {
+      mockuseUASFetchSaveStatus.mockReturnValue({
+        isSaved: false,
+        isLoading: false,
+        error: null,
+        setIsSaved: mockSetIsSaved,
+      });
+
+      const { result } = renderHook(() => useUASButton(defaultProps));
+
+      expect(typeof result.current.handleSaveArticle).toBe('function');
+    });
+  });
 });
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index 24c1ffc256d..249086b8a6c 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -1,16 +1,18 @@
-import { use } from 'react';
+import { use, useCallback, useState } from 'react';
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import { AccountContext } from '#app/contexts/AccountContext';
 import isLocal from '#app/lib/utilities/isLocal';
+import uasApiRequest from '#app/lib/uasApi';
+import {
+  FAVOURITES_CONFIG,
+  createFavouritesPayload,
+} from '#app/lib/uasApi/uasUtility';
 import useToggle from '../useToggle';
 
-/** A hook that fetches an article’s saved status and controls showing the save UAS button
- * based on feature toggles and sign in status,
- * with room to later expand for toggling the save state based on user actions. */
-
 interface UseUASButtonProps {
   articleId: string;
   service: string;
+  title: string;
 }
 
 interface UseUASButtonReturn {
@@ -18,15 +20,18 @@ interface UseUASButtonReturn {
   isSaved: boolean;
   isLoading: boolean;
   error: Error | null;
+  handleSaveArticle: () => Promise<void>;
 }
 
 const useUASButton = ({
   service,
   articleId,
+  title,
 }: UseUASButtonProps): UseUASButtonReturn => {
   const { isSignedIn } = use(AccountContext);
   const { enabled: featureToggleOn = false, value: accountService = '' } =
     useToggle('uasPersonalization');
+  const [isSaving, setIsSaving] = useState(false);
 
   const isUASEnabled =
     featureToggleOn &&
@@ -36,14 +41,29 @@ const useUASButton = ({
 
   const showButton = isUASEnabled && isSignedIn;
 
-  const { isSaved, isLoading, error } = useUASFetchSaveStatus(
+  const { isSaved, isLoading, error, setIsSaved } = useUASFetchSaveStatus(
     showButton ? articleId : '',
   );
+
+  const handleSaveArticle = useCallback(async () => {
+    if (isSaving || isSaved) return;
+
+    setIsSaving(true);
+    try {
+      const body = createFavouritesPayload({ articleId, service, title });
+      await uasApiRequest('POST', FAVOURITES_CONFIG.activityType, { body });
+      setIsSaved(true);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [articleId, service, title, isSaving, isSaved, setIsSaved]);
+
   return {
     showButton,
     isSaved,
-    isLoading,
+    isLoading: isLoading || isSaving,
     error,
+    handleSaveArticle,
   };
 };
 
diff --git a/src/app/hooks/useUASFetchSaveStatus/index.test.tsx b/src/app/hooks/useUASFetchSaveStatus/index.test.tsx
index 8fbc9ee3843..0b416349630 100644
--- a/src/app/hooks/useUASFetchSaveStatus/index.test.tsx
+++ b/src/app/hooks/useUASFetchSaveStatus/index.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook } from '#app/components/react-testing-library-with-providers';
 import { waitFor } from '@testing-library/react';
 import uasApiRequest from '#app/lib/uasApi';
-import { buildGlobalId, ACTIVITY_TYPE } from '#app/lib/uasApi/uasUtility';
+import { buildGlobalId, FAVOURITES_CONFIG } from '#app/lib/uasApi/uasUtility';
 import useUASFetchSaveStatus from './index';
 
 jest.mock('#app/lib/uasApi');
@@ -31,7 +31,7 @@ describe('useUASFetchSaveStatus', () => {
     expect(result.current.error).toBeNull();
     expect(mockUasApiRequest).toHaveBeenCalledWith(
       'GET',
-      ACTIVITY_TYPE,
+      FAVOURITES_CONFIG.activityType,
       expect.objectContaining({ globalId: 'global-123' }),
     );
   });
diff --git a/src/app/hooks/useUASFetchSaveStatus/index.ts b/src/app/hooks/useUASFetchSaveStatus/index.ts
index ea87a17fa77..c1a274cc4ef 100644
--- a/src/app/hooks/useUASFetchSaveStatus/index.ts
+++ b/src/app/hooks/useUASFetchSaveStatus/index.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import uasApiRequest from '#app/lib/uasApi';
-import { buildGlobalId, ACTIVITY_TYPE } from '#app/lib/uasApi/uasUtility';
+import { buildGlobalId, FAVOURITES_CONFIG } from '#app/lib/uasApi/uasUtility';
 import { HTTP_NO_CONTENT } from '#app/lib/statusCodes.const';
 
 /** A hook that fetches an article’s saved status from the UAS API,
@@ -10,6 +10,7 @@ interface UseUASFetchSaveStatusReturn {
   isSaved: boolean;
   isLoading: boolean;
   error: Error | null;
+  setIsSaved: (value: boolean) => void;
 }
 
 const useUASFetchSaveStatus = (
@@ -29,10 +30,14 @@ const useUASFetchSaveStatus = (
 
       try {
         const globalId = buildGlobalId(articleId);
-        const response = await uasApiRequest('GET', ACTIVITY_TYPE, {
-          globalId,
-          signal: abortController.signal,
-        });
+        const response = await uasApiRequest(
+          'GET',
+          FAVOURITES_CONFIG.activityType,
+          {
+            globalId,
+            signal: abortController.signal,
+          },
+        );
 
         // If response is successful and not 204 (No Content), article is saved
         // 204 means no content found - article not saved
@@ -60,7 +65,7 @@ const useUASFetchSaveStatus = (
     };
   }, [articleId]);
 
-  return { isSaved, isLoading, error };
+  return { isSaved, isLoading, error, setIsSaved };
 };
 
 export default useUASFetchSaveStatus;
diff --git a/src/app/lib/uasApi/uasUtility.ts b/src/app/lib/uasApi/uasUtility.ts
index 6dabe2fa88b..86f6e7a010b 100644
--- a/src/app/lib/uasApi/uasUtility.ts
+++ b/src/app/lib/uasApi/uasUtility.ts
@@ -1,22 +1,45 @@
-const activityTypes = ['favourites'];
-const RESOURCE_DOMAIN = 'articles';
-const RESOURCE_TYPE = 'article';
-const ACTIVITY_TYPE = 'favourites';
-const ACTIVITY_FAVOURITE_ACTION = 'favourited';
+import type { UasApiRequestBody } from './index';
 
-const buildGlobalId = (articleId: string): string =>
-  `urn:bbc:${RESOURCE_DOMAIN}:${RESOURCE_TYPE}:${articleId}`;
+const FAVOURITES_CONFIG = {
+  activityType: 'favourites',
+  resourceDomain: 'articles',
+  resourceType: 'article',
+  action: 'favourited',
+} as const;
+
+const activityTypes: string[] = [FAVOURITES_CONFIG.activityType];
+
+const buildGlobalId = (
+  resourceId: string,
+  resourceDomain = FAVOURITES_CONFIG.resourceDomain,
+  resourceType = FAVOURITES_CONFIG.resourceType,
+): string => `urn:bbc:${resourceDomain}:${resourceType}:${resourceId}`;
 
 const parseArticleID = (articleId: string): string => {
   return articleId.split(':').pop() || '';
 };
 
+const createFavouritesPayload = ({
+  articleId,
+  service,
+  title,
+}: {
+  articleId: string;
+  service: string;
+  title: string;
+}): UasApiRequestBody => ({
+  activityType: FAVOURITES_CONFIG.activityType,
+  resourceDomain: FAVOURITES_CONFIG.resourceDomain,
+  resourceType: FAVOURITES_CONFIG.resourceType,
+  resourceId: articleId,
+  action: FAVOURITES_CONFIG.action,
+  metaData: { service, articleId, title },
+});
+
 export {
+  FAVOURITES_CONFIG,
   activityTypes,
   buildGlobalId,
-  ACTIVITY_TYPE,
-  RESOURCE_DOMAIN,
-  RESOURCE_TYPE,
-  ACTIVITY_FAVOURITE_ACTION,
+  createFavouritesPayload,
   parseArticleID,
 };
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 8785081ca22..812922d5209 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -110,6 +110,7 @@ const getTimestampComponent =
     readTimeTranslations: Translations['readTime'],
     articleId: string,
     service: string,
+    articleTitle: string,
   ) =>
   (props: ComponentToRenderProps & TimeStampProps) => {
     const shouldDisplayReadTime = !!(readTimeTranslations && readTimeValue);
@@ -144,6 +145,7 @@ const getTimestampComponent =
         <SaveArticleButton
           articleId={parseArticleID(articleId)}
           service={service}
+          title={articleTitle}
         />
       </>
     );
@@ -366,6 +368,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       translations.readTime,
       articleId,
       service,
+      headline,
     ),
     social: SocialEmbedContainer,
     embed: UnsupportedEmbed,

From 149013dd7094334ac01993ed9513c92d41adb406 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Thu, 9 Apr 2026 15:01:17 +0300
Subject: [PATCH 02/12] refactor: SaveArticleButton and useUASButton to unify
 save action handling

---
 .../SaveArticleButton/index.test.tsx          | 19 +++----
 .../components/SaveArticleButton/index.tsx    |  9 +++-
 src/app/hooks/useUASButton/index.test.tsx     | 25 +++------
 src/app/hooks/useUASButton/index.ts           | 53 ++++++++++++++-----
 4 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.test.tsx b/src/app/components/SaveArticleButton/index.test.tsx
index 763ba1d37af..5725d917643 100644
--- a/src/app/components/SaveArticleButton/index.test.tsx
+++ b/src/app/components/SaveArticleButton/index.test.tsx
@@ -13,7 +13,7 @@ describe('SaveArticleButton', () => {
     title: 'Test Article Title',
   };
 
-  const mockHandleSaveArticle = jest.fn();
+  const mockHandleSaveAction = jest.fn();
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -24,7 +24,7 @@ describe('SaveArticleButton', () => {
       showButton: false,
       isSaved: false,
       isLoading: false,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     const { container } = render(<SaveArticleButton {...defaultProps} />);
@@ -36,7 +36,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: false,
       isLoading: false,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -48,7 +48,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: true,
       isLoading: false,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -60,7 +60,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: false,
       isLoading: true,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
@@ -70,18 +70,19 @@ describe('SaveArticleButton', () => {
     expect(button).toBeDisabled();
   });
 
-  test('calls handleSaveArticle when button is clicked', async () => {
+  test('calls handleSaveAction with save when button is clicked and not saved', async () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
       isLoading: false,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
     screen.getByRole('button').click();
 
-    expect(mockHandleSaveArticle).toHaveBeenCalledTimes(1);
+    expect(mockHandleSaveAction).toHaveBeenCalledWith('save');
+    expect(mockHandleSaveAction).toHaveBeenCalledTimes(1);
   });
 
   test('passes title to useUASButton hook', () => {
@@ -89,7 +90,7 @@ describe('SaveArticleButton', () => {
       showButton: true,
       isSaved: false,
       isLoading: false,
-      handleSaveArticle: mockHandleSaveArticle,
+      handleSaveAction: mockHandleSaveAction,
     });
 
     render(<SaveArticleButton {...defaultProps} />);
diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 17e1174909d..00b0a1f7c25 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -7,12 +7,17 @@ interface SaveArticleButtonProps {
   title: string;
 }
 
+/** A button component that allows users to save an article for later reading,
+ * showing the button based on user sign in status and feature toggles,
+ * and displaying the saved status, loading state, and handling errors from the UAS API.
+ * FUTURE TODO : Implement button click handler to toggle saved state */
+
 const SaveArticleButton = ({
   articleId,
   service,
   title,
 }: SaveArticleButtonProps) => {
-  const { showButton, isSaved, isLoading, error, handleSaveArticle } =
+  const { showButton, isSaved, isLoading, error, handleSaveAction } =
     useUASButton({
       articleId,
       service,
@@ -46,7 +51,7 @@ const SaveArticleButton = ({
     <button
       css={styles.buttonWrapper}
       type="button"
-      onClick={handleSaveArticle}
+      onClick={() => handleSaveAction(isSaved ? 'remove' : 'save')}
       disabled={isLoading}
       aria-label={buttonLabel}
       title={buttonLabel}
diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index 3dbac093112..59f5d6232b6 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -135,7 +135,7 @@ describe('useUASButton', () => {
     expect(result.current.showButton).toBe(false);
   });
 
-  describe('handleSaveArticle', () => {
+  describe('handleSaveAction', () => {
     beforeEach(() => {
       mockUseToggle.mockReturnValue({ enabled: true });
       mockIsLocal.mockReturnValue(false);
@@ -143,7 +143,7 @@ describe('useUASButton', () => {
       mockUasApiRequest.mockResolvedValue({ ok: true, status: 202 });
     });
 
-    test('sends POST request with correct payload when clicked', async () => {
+    test('sends POST request with correct payload when saving', async () => {
       mockuseUASFetchSaveStatus.mockReturnValue({
         isSaved: false,
         isLoading: false,
@@ -154,7 +154,7 @@ describe('useUASButton', () => {
       const { result } = renderHook(() => useUASButton(defaultProps));
 
       await act(async () => {
-        await result.current.handleSaveArticle();
+        await result.current.handleSaveAction('save');
       });
 
       expect(mockUasApiRequest).toHaveBeenCalledWith('POST', 'favourites', {
@@ -173,7 +173,7 @@ describe('useUASButton', () => {
       });
     });
 
-    test('sets isSaved to true on successful POST', async () => {
+    test('sets isSaved to true on successful save', async () => {
       mockuseUASFetchSaveStatus.mockReturnValue({
         isSaved: false,
         isLoading: false,
@@ -184,7 +184,7 @@ describe('useUASButton', () => {
       const { result } = renderHook(() => useUASButton(defaultProps));
 
       await act(async () => {
-        await result.current.handleSaveArticle();
+        await result.current.handleSaveAction('save');
       });
 
       expect(mockSetIsSaved).toHaveBeenCalledWith(true);
@@ -201,23 +201,10 @@ describe('useUASButton', () => {
       const { result } = renderHook(() => useUASButton(defaultProps));
 
       await act(async () => {
-        await result.current.handleSaveArticle();
+        await result.current.handleSaveAction('save');
       });
 
       expect(mockUasApiRequest).not.toHaveBeenCalled();
     });
-
-    test('returns handleSaveArticle function', () => {
-      mockuseUASFetchSaveStatus.mockReturnValue({
-        isSaved: false,
-        isLoading: false,
-        error: null,
-        setIsSaved: mockSetIsSaved,
-      });
-
-      const { result } = renderHook(() => useUASButton(defaultProps));
-
-      expect(typeof result.current.handleSaveArticle).toBe('function');
-    });
   });
 });
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index 249086b8a6c..aff09cdc150 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -9,18 +9,24 @@ import {
 } from '#app/lib/uasApi/uasUtility';
 import useToggle from '../useToggle';
 
+/** A hook that fetches an article’s saved status and controls showing the save UAS button
+ * based on feature toggles and sign in status,
+ * with room to later expand for toggling the save state based on user actions. */
+
 interface UseUASButtonProps {
   articleId: string;
   service: string;
   title: string;
 }
 
+type UASAction = 'save' | 'remove';
+
 interface UseUASButtonReturn {
   showButton: boolean;
   isSaved: boolean;
   isLoading: boolean;
   error: Error | null;
-  handleSaveArticle: () => Promise<void>;
+  handleSaveAction: (action: UASAction) => Promise<void>;
 }
 
 const useUASButton = ({
@@ -32,6 +38,7 @@ const useUASButton = ({
   const { enabled: featureToggleOn = false, value: accountService = '' } =
     useToggle('uasPersonalization');
   const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState<Error | null>(null);
 
   const isUASEnabled =
     featureToggleOn &&
@@ -45,25 +52,43 @@ const useUASButton = ({
     showButton ? articleId : '',
   );
 
-  const handleSaveArticle = useCallback(async () => {
-    if (isSaving || isSaved) return;
+  const handleSaveAction = useCallback(
+    async (action: UASAction) => {
+      if (isSaving) return;
 
-    setIsSaving(true);
-    try {
-      const body = createFavouritesPayload({ articleId, service, title });
-      await uasApiRequest('POST', FAVOURITES_CONFIG.activityType, { body });
-      setIsSaved(true);
-    } finally {
-      setIsSaving(false);
-    }
-  }, [articleId, service, title, isSaving, isSaved, setIsSaved]);
+      setIsSaving(true);
+      try {
+        setSaveError(null);
+
+        if (action === 'save') {
+          const body = createFavouritesPayload({ articleId, service, title });
+          await uasApiRequest('POST', FAVOURITES_CONFIG.activityType, { body });
+          setIsSaved(true);
+        } else {
+          // TO be implemented with https://bbc.atlassian.net/browse/WS-2212
+          // const globalId = buildGlobalId(articleId);
+          // await uasApiRequest('DELETE', FAVOURITES_CONFIG.activityType, {
+          //   globalId,
+          // });
+          setIsSaved(false);
+        }
+      } catch (err) {
+        const saveErr = err instanceof Error ? err : new Error(String(err));
+        setSaveError(saveErr);
+        throw saveErr;
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [articleId, service, title, isSaving, setIsSaved],
+  );
 
   return {
     showButton,
     isSaved,
     isLoading: isLoading || isSaving,
-    error,
-    handleSaveArticle,
+    error: saveError || error,
+    handleSaveAction,
   };
 };
 

From 9b46eac2373dff5157784fe696bbb6ae2f3cbe97 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Fri, 10 Apr 2026 10:23:06 +0300
Subject: [PATCH 03/12] tests: remove redundant

---
 src/app/hooks/useUASButton/index.test.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index 59f5d6232b6..be94198dc77 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -189,22 +189,5 @@ describe('useUASButton', () => {
 
       expect(mockSetIsSaved).toHaveBeenCalledWith(true);
     });
-
-    test('does not send POST if article is already saved', async () => {
-      mockuseUASFetchSaveStatus.mockReturnValue({
-        isSaved: true,
-        isLoading: false,
-        error: null,
-        setIsSaved: mockSetIsSaved,
-      });
-
-      const { result } = renderHook(() => useUASButton(defaultProps));
-
-      await act(async () => {
-        await result.current.handleSaveAction('save');
-      });
-
-      expect(mockUasApiRequest).not.toHaveBeenCalled();
-    });
   });
 });

From 05352f7a297279455a6a32559bbe91cde5468fea Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 10:46:58 +0300
Subject: [PATCH 04/12] refactor: replace string literals with UASAction enum

---
 src/app/components/SaveArticleButton/index.tsx | 6 ++++--
 src/app/hooks/useUASButton/index.ts            | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 00b0a1f7c25..335e0e9b3a2 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -1,4 +1,4 @@
-import useUASButton from '#app/hooks/useUASButton';
+import useUASButton, { UASAction } from '#app/hooks/useUASButton';
 import styles from './index.styles';
 
 interface SaveArticleButtonProps {
@@ -51,7 +51,9 @@ const SaveArticleButton = ({
     <button
       css={styles.buttonWrapper}
       type="button"
-      onClick={() => handleSaveAction(isSaved ? 'remove' : 'save')}
+      onClick={() =>
+        handleSaveAction(isSaved ? UASAction.REMOVE : UASAction.SAVE)
+      }
       disabled={isLoading}
       aria-label={buttonLabel}
       title={buttonLabel}
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index aff09cdc150..e6244832123 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -19,7 +19,10 @@ interface UseUASButtonProps {
   title: string;
 }
 
-type UASAction = 'save' | 'remove';
+enum UASAction {
+  SAVE = 'save',
+  REMOVE = 'remove',
+}
 
 interface UseUASButtonReturn {
   showButton: boolean;
@@ -60,7 +63,7 @@ const useUASButton = ({
       try {
         setSaveError(null);
 
-        if (action === 'save') {
+        if (action === UASAction.SAVE) {
           const body = createFavouritesPayload({ articleId, service, title });
           await uasApiRequest('POST', FAVOURITES_CONFIG.activityType, { body });
           setIsSaved(true);
@@ -92,4 +95,5 @@ const useUASButton = ({
   };
 };
 
+export { UASAction };
 export default useUASButton;

From 88ee56637abe0a35919659d6b50244b289e2d26b Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 10:57:05 +0300
Subject: [PATCH 05/12] refactor: rename 'title' to 'articleTitle', tests

---
 src/app/components/SaveArticleButton/index.test.tsx |  4 ++--
 src/app/components/SaveArticleButton/index.tsx      |  6 +++---
 src/app/hooks/useUASButton/index.test.tsx           |  8 ++++----
 src/app/hooks/useUASButton/index.ts                 | 13 ++++++++-----
 src/app/lib/uasApi/uasUtility.ts                    |  6 +++---
 src/app/pages/ArticlePage/ArticlePage.tsx           |  2 +-
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.test.tsx b/src/app/components/SaveArticleButton/index.test.tsx
index 5725d917643..d7be86c53f2 100644
--- a/src/app/components/SaveArticleButton/index.test.tsx
+++ b/src/app/components/SaveArticleButton/index.test.tsx
@@ -10,7 +10,7 @@ describe('SaveArticleButton', () => {
   const defaultProps = {
     articleId: '123',
     service: 'hindi',
-    title: 'Test Article Title',
+    articleTitle: 'Test Article Title',
   };
 
   const mockHandleSaveAction = jest.fn();
@@ -98,7 +98,7 @@ describe('SaveArticleButton', () => {
     expect(mockedUseUASButton).toHaveBeenCalledWith({
       articleId: '123',
       service: 'hindi',
-      title: 'Test Article Title',
+      articleTitle: 'Test Article Title',
     });
   });
 });
diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 335e0e9b3a2..50e4b70ea3e 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -4,7 +4,7 @@ import styles from './index.styles';
 interface SaveArticleButtonProps {
   articleId: string;
   service: string;
-  title: string;
+  articleTitle: string;
 }
 
 /** A button component that allows users to save an article for later reading,
@@ -15,13 +15,13 @@ interface SaveArticleButtonProps {
 const SaveArticleButton = ({
   articleId,
   service,
-  title,
+  articleTitle,
 }: SaveArticleButtonProps) => {
   const { showButton, isSaved, isLoading, error, handleSaveAction } =
     useUASButton({
       articleId,
       service,
-      title,
+      articleTitle,
     });
 
   if (!showButton) {
diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index be94198dc77..1a3e52c7247 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -6,7 +6,7 @@ import {
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
-import useUASButton from './index';
+import useUASButton, { UASAction } from './index';
 
 import useToggle from '../useToggle';
 
@@ -28,7 +28,7 @@ describe('useUASButton', () => {
   const defaultProps = {
     articleId: '123',
     service: 'hindi',
-    title: 'Test Article',
+    articleTitle: 'Test Article',
   };
 
   const mockSetIsSaved = jest.fn();
@@ -154,7 +154,7 @@ describe('useUASButton', () => {
       const { result } = renderHook(() => useUASButton(defaultProps));
 
       await act(async () => {
-        await result.current.handleSaveAction('save');
+        await result.current.handleSaveAction(UASAction.SAVE);
       });
 
       expect(mockUasApiRequest).toHaveBeenCalledWith('POST', 'favourites', {
@@ -184,7 +184,7 @@ describe('useUASButton', () => {
       const { result } = renderHook(() => useUASButton(defaultProps));
 
       await act(async () => {
-        await result.current.handleSaveAction('save');
+        await result.current.handleSaveAction(UASAction.SAVE);
       });
 
       expect(mockSetIsSaved).toHaveBeenCalledWith(true);
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index e6244832123..9a0fa689e1f 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -16,7 +16,7 @@ import useToggle from '../useToggle';
 interface UseUASButtonProps {
   articleId: string;
   service: string;
-  title: string;
+  articleTitle: string;
 }
 
 enum UASAction {
@@ -35,7 +35,7 @@ interface UseUASButtonReturn {
 const useUASButton = ({
   service,
   articleId,
-  title,
+  articleTitle,
 }: UseUASButtonProps): UseUASButtonReturn => {
   const { isSignedIn } = use(AccountContext);
   const { enabled: featureToggleOn = false, value: accountService = '' } =
@@ -64,7 +64,11 @@ const useUASButton = ({
         setSaveError(null);
 
         if (action === UASAction.SAVE) {
-          const body = createFavouritesPayload({ articleId, service, title });
+          const body = createFavouritesPayload({
+            articleId,
+            service,
+            articleTitle,
+          });
           await uasApiRequest('POST', FAVOURITES_CONFIG.activityType, { body });
           setIsSaved(true);
         } else {
@@ -78,12 +82,11 @@ const useUASButton = ({
       } catch (err) {
         const saveErr = err instanceof Error ? err : new Error(String(err));
         setSaveError(saveErr);
-        throw saveErr;
       } finally {
         setIsSaving(false);
       }
     },
-    [articleId, service, title, isSaving, setIsSaved],
+    [articleId, service, articleTitle, isSaving, setIsSaved],
   );
 
   return {
diff --git a/src/app/lib/uasApi/uasUtility.ts b/src/app/lib/uasApi/uasUtility.ts
index 86f6e7a010b..ed14857a322 100644
--- a/src/app/lib/uasApi/uasUtility.ts
+++ b/src/app/lib/uasApi/uasUtility.ts
@@ -22,18 +22,18 @@ const parseArticleID = (articleId: string): string => {
 const createFavouritesPayload = ({
   articleId,
   service,
-  title,
+  articleTitle,
 }: {
   articleId: string;
   service: string;
-  title: string;
+  articleTitle: string;
 }): UasApiRequestBody => ({
   activityType: FAVOURITES_CONFIG.activityType,
   resourceDomain: FAVOURITES_CONFIG.resourceDomain,
   resourceType: FAVOURITES_CONFIG.resourceType,
   resourceId: articleId,
   action: FAVOURITES_CONFIG.action,
-  metaData: { service, articleId, title },
+  metaData: { service, articleId, title: articleTitle },
 });
 
 export {
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 812922d5209..55ffe639175 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -145,7 +145,7 @@ const getTimestampComponent =
         <SaveArticleButton
           articleId={parseArticleID(articleId)}
           service={service}
-          title={articleTitle}
+          articleTitle={articleTitle}
         />
       </>
     );

From 6624ebeefacc5ce8d22421f0b64bdecdc064ddb9 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 12:19:00 +0300
Subject: [PATCH 06/12] refactor: update service type to Services, add isAmp &
 isLite checks

---
 .../components/SaveArticleButton/index.tsx    | 22 +++++++++----------
 src/app/hooks/useUASButton/index.ts           |  9 +++++---
 src/app/lib/uasApi/uasUtility.ts              |  3 ++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 50e4b70ea3e..6e13ed0296e 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -1,9 +1,10 @@
 import useUASButton, { UASAction } from '#app/hooks/useUASButton';
+import { Services } from '#app/models/types/global';
 import styles from './index.styles';
 
 interface SaveArticleButtonProps {
   articleId: string;
-  service: string;
+  service: Services;
   articleTitle: string;
 }
 
@@ -36,16 +37,15 @@ const SaveArticleButton = ({
   };
 
   // TODO : Will modify based on future error handling implementation,
-  //  currently just hides the button if there is an error fetching save status
-  if (error) {
-    // Logging until we have proper error handling in place
-    // eslint-disable-next-line no-console
-    console.log('Error fetching saved status for article:', {
-      articleId,
-      error,
-    });
-    return null;
-  }
+  // if (error) {
+  //   // Logging until we have proper error handling in place
+  //   // eslint-disable-next-line no-console
+  //   console.log('Error fetching saved status for article:', {
+  //     articleId,
+  //     error,
+  //   });
+  //   return null;
+  // }
 
   return (
     <button
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index 9a0fa689e1f..16539058430 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -1,21 +1,23 @@
 import { use, useCallback, useState } from 'react';
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import { AccountContext } from '#app/contexts/AccountContext';
+import { RequestContext } from '#app/contexts/RequestContext';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
 import {
   FAVOURITES_CONFIG,
   createFavouritesPayload,
 } from '#app/lib/uasApi/uasUtility';
+import { Services } from '#app/models/types/global';
 import useToggle from '../useToggle';
 
-/** A hook that fetches an article’s saved status and controls showing the save UAS button
+/** A hook that fetches an article's saved status and controls showing the save UAS button
  * based on feature toggles and sign in status,
  * with room to later expand for toggling the save state based on user actions. */
 
 interface UseUASButtonProps {
   articleId: string;
-  service: string;
+  service: Services;
   articleTitle: string;
 }
 
@@ -38,6 +40,7 @@ const useUASButton = ({
   articleTitle,
 }: UseUASButtonProps): UseUASButtonReturn => {
   const { isSignedIn } = use(AccountContext);
+  const { platform } = use(RequestContext);
   const { enabled: featureToggleOn = false, value: accountService = '' } =
     useToggle('uasPersonalization');
   const [isSaving, setIsSaving] = useState(false);
@@ -49,7 +52,7 @@ const useUASButton = ({
       ? accountService?.toString().split('|').includes(service)
       : true);
 
-  const showButton = isUASEnabled && isSignedIn;
+  const showButton = isUASEnabled && isSignedIn && platform === 'canonical';
 
   const { isSaved, isLoading, error, setIsSaved } = useUASFetchSaveStatus(
     showButton ? articleId : '',
diff --git a/src/app/lib/uasApi/uasUtility.ts b/src/app/lib/uasApi/uasUtility.ts
index ed14857a322..b01afc5bcd4 100644
--- a/src/app/lib/uasApi/uasUtility.ts
+++ b/src/app/lib/uasApi/uasUtility.ts
@@ -1,4 +1,5 @@
 import type { UasApiRequestBody } from './index';
+import type { Services } from '#app/models/types/global';
 
 const FAVOURITES_CONFIG = {
   activityType: 'favourites',
@@ -25,7 +26,7 @@ const createFavouritesPayload = ({
   articleTitle,
 }: {
   articleId: string;
-  service: string;
+  service: Services;
   articleTitle: string;
 }): UasApiRequestBody => ({
   activityType: FAVOURITES_CONFIG.activityType,

From 8b2e2ef66261bae35e293e4e1ad5292073d8e6d3 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 12:24:18 +0300
Subject: [PATCH 07/12] refactor: remove unused error

---
 src/app/components/SaveArticleButton/index.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 6e13ed0296e..5d51b235f44 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -18,12 +18,11 @@ const SaveArticleButton = ({
   service,
   articleTitle,
 }: SaveArticleButtonProps) => {
-  const { showButton, isSaved, isLoading, error, handleSaveAction } =
-    useUASButton({
-      articleId,
-      service,
-      articleTitle,
-    });
+  const { showButton, isSaved, isLoading, handleSaveAction } = useUASButton({
+    articleId,
+    service,
+    articleTitle,
+  });
 
   if (!showButton) {
     return null;

From 8ea3ab1c1fccab811b983d46a5abb1ce0ecbc6ed Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 17:34:31 +0300
Subject: [PATCH 08/12] refactor: update tests, add ActivityType compile time
 check

---
 .../SaveArticleButton/index.test.tsx           |  5 +++--
 src/app/hooks/useUASButton/index.ts            |  4 +---
 src/app/lib/uasApi/index.test.ts               |  8 --------
 src/app/lib/uasApi/index.ts                    | 18 +++++-------------
 src/app/lib/uasApi/uasUtility.ts               |  3 +--
 5 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.test.tsx b/src/app/components/SaveArticleButton/index.test.tsx
index d7be86c53f2..c8cce671d17 100644
--- a/src/app/components/SaveArticleButton/index.test.tsx
+++ b/src/app/components/SaveArticleButton/index.test.tsx
@@ -1,4 +1,5 @@
 import useUASButton from '#app/hooks/useUASButton';
+import { Services } from '#app/models/types/global';
 import { render, screen } from '../react-testing-library-with-providers';
 import SaveArticleButton from './index';
 
@@ -9,7 +10,7 @@ const mockedUseUASButton = useUASButton as jest.Mock;
 describe('SaveArticleButton', () => {
   const defaultProps = {
     articleId: '123',
-    service: 'hindi',
+    service: 'hindi' as Services,
     articleTitle: 'Test Article Title',
   };
 
@@ -70,7 +71,7 @@ describe('SaveArticleButton', () => {
     expect(button).toBeDisabled();
   });
 
-  test('calls handleSaveAction with save when button is clicked and not saved', async () => {
+  test('calls handleSaveAction with save when button is clicked and not already saved', async () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index 16539058430..7e8d0c2b113 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -1,7 +1,6 @@
 import { use, useCallback, useState } from 'react';
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import { AccountContext } from '#app/contexts/AccountContext';
-import { RequestContext } from '#app/contexts/RequestContext';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
 import {
@@ -40,7 +39,6 @@ const useUASButton = ({
   articleTitle,
 }: UseUASButtonProps): UseUASButtonReturn => {
   const { isSignedIn } = use(AccountContext);
-  const { platform } = use(RequestContext);
   const { enabled: featureToggleOn = false, value: accountService = '' } =
     useToggle('uasPersonalization');
   const [isSaving, setIsSaving] = useState(false);
@@ -52,7 +50,7 @@ const useUASButton = ({
       ? accountService?.toString().split('|').includes(service)
       : true);
 
-  const showButton = isUASEnabled && isSignedIn && platform === 'canonical';
+  const showButton = isUASEnabled && isSignedIn;
 
   const { isSaved, isLoading, error, setIsSaved } = useUASFetchSaveStatus(
     showButton ? articleId : '',
diff --git a/src/app/lib/uasApi/index.test.ts b/src/app/lib/uasApi/index.test.ts
index 776264413dd..3c4bf9c8674 100644
--- a/src/app/lib/uasApi/index.test.ts
+++ b/src/app/lib/uasApi/index.test.ts
@@ -93,14 +93,6 @@ describe('uasApiRequest', () => {
     );
   });
 
-  it('should throw an error for invalid activity type', async () => {
-    const invalidActivityType = 'invalidType';
-
-    await expect(uasApiRequest('GET', invalidActivityType)).rejects.toThrow(
-      'Invalid activity type',
-    );
-  });
-
   it('should throw an error for failed requests', async () => {
     (global.fetch as jest.Mock).mockResolvedValue({
       ok: false,
diff --git a/src/app/lib/uasApi/index.ts b/src/app/lib/uasApi/index.ts
index 62442bfa244..c4056194281 100644
--- a/src/app/lib/uasApi/index.ts
+++ b/src/app/lib/uasApi/index.ts
@@ -1,11 +1,11 @@
 import isLive from '#app/lib/utilities/isLive';
 import getAuthHeaders from './getAuthHeaders';
-import { activityTypes } from './uasUtility';
+import type { ActivityType } from './uasUtility';
 
 export type UasMethod = 'POST' | 'DELETE' | 'GET';
 
 export interface UasApiRequestBody {
-  activityType: string;
+  activityType: ActivityType;
   resourceDomain?: string;
   resourceType?: string;
   resourceId?: string;
@@ -29,11 +29,7 @@ const buildUrl = (activityType: string, globalId?: string) => {
   return globalId ? `${base}/${encodeURIComponent(globalId)}` : base;
 };
 
-const validateRequest = (
-  method: UasMethod,
-  options: UasRequestOptions,
-  activityType: string,
-) => {
+const validateRequest = (method: UasMethod, options: UasRequestOptions) => {
   const { body, globalId } = options;
 
   if (method === 'DELETE' && !globalId) {
@@ -43,19 +39,15 @@ const validateRequest = (
   if (method === 'POST' && !body) {
     throw new Error('POST requests require a body');
   }
-
-  if (!activityType || !activityTypes.includes(activityType)) {
-    throw new Error('Invalid activity type');
-  }
   // TODO : Add more validation , if needed
 };
 
 const uasApiRequest = async (
   method: UasMethod,
-  activityType: string,
+  activityType: ActivityType,
   { body, globalId, signal }: UasRequestOptions = {},
 ): Promise<Response> => {
-  validateRequest(method, { body, globalId }, activityType);
+  validateRequest(method, { body, globalId });
 
   const url = buildUrl(activityType, method !== 'POST' ? globalId : undefined);
 
diff --git a/src/app/lib/uasApi/uasUtility.ts b/src/app/lib/uasApi/uasUtility.ts
index b01afc5bcd4..b8254ff242d 100644
--- a/src/app/lib/uasApi/uasUtility.ts
+++ b/src/app/lib/uasApi/uasUtility.ts
@@ -8,7 +8,7 @@ const FAVOURITES_CONFIG = {
   action: 'favourited',
 } as const;
 
-const activityTypes: string[] = [FAVOURITES_CONFIG.activityType];
+export type ActivityType = (typeof FAVOURITES_CONFIG)['activityType'];
 
 const buildGlobalId = (
   resourceId: string,
@@ -39,7 +39,6 @@ const createFavouritesPayload = ({
 
 export {
   FAVOURITES_CONFIG,
-  activityTypes,
   buildGlobalId,
   createFavouritesPayload,
   parseArticleID,

From 085aeb7b3df0cf7d077a5f6d789a15e08dce90a4 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 17:46:08 +0300
Subject: [PATCH 09/12] tests: add type annotations for Services

---
 src/app/hooks/useUASButton/index.test.tsx | 3 ++-
 src/app/lib/uasApi/index.test.ts          | 5 ++++-
 src/app/pages/ArticlePage/ArticlePage.tsx | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index 1a3e52c7247..4dbde64688e 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -6,6 +6,7 @@ import {
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
+import type { Services } from '#app/models/types/global';
 import useUASButton, { UASAction } from './index';
 
 import useToggle from '../useToggle';
@@ -27,7 +28,7 @@ const mockUasApiRequest = uasApiRequest as jest.Mock;
 describe('useUASButton', () => {
   const defaultProps = {
     articleId: '123',
-    service: 'hindi',
+    service: 'hindi' as Services,
     articleTitle: 'Test Article',
   };
 
diff --git a/src/app/lib/uasApi/index.test.ts b/src/app/lib/uasApi/index.test.ts
index 3c4bf9c8674..6e40f1599f5 100644
--- a/src/app/lib/uasApi/index.test.ts
+++ b/src/app/lib/uasApi/index.test.ts
@@ -52,7 +52,10 @@ describe('uasApiRequest', () => {
     });
 
     const activityType = 'favourites';
-    const body = { activityType: 'test', metaData: { key: 'value' } };
+    const body = {
+      activityType: 'favourites' as const,
+      metaData: { key: 'value' },
+    };
 
     const response = await uasApiRequest('POST', activityType, { body });
 
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 55ffe639175..17f713d1ebb 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -80,6 +80,7 @@ import {
   getAuthorTwitterHandle,
 } from '../../components/Byline/utilities';
 import { ServiceContext } from '../../contexts/ServiceContext';
+import type { Services } from '#app/models/types/global';
 import RelatedContentSection from '../../components/RelatedContentSection';
 import Disclaimer from '../../components/Disclaimer';
 import SecondaryColumn from './SecondaryColumn';
@@ -144,7 +145,7 @@ const getTimestampComponent =
         {/* Temporary SaveArticleButton */}
         <SaveArticleButton
           articleId={parseArticleID(articleId)}
-          service={service}
+          service={service as Services}
           articleTitle={articleTitle}
         />
       </>

From eb9aa1a34c231c204fdddc33c3a432b2abfe5a1c Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Mon, 13 Apr 2026 17:56:27 +0300
Subject: [PATCH 10/12] chore: linting

---
 src/app/lib/uasApi/uasUtility.ts          | 2 +-
 src/app/pages/ArticlePage/ArticlePage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/lib/uasApi/uasUtility.ts b/src/app/lib/uasApi/uasUtility.ts
index b8254ff242d..607c81f3c41 100644
--- a/src/app/lib/uasApi/uasUtility.ts
+++ b/src/app/lib/uasApi/uasUtility.ts
@@ -1,5 +1,5 @@
-import type { UasApiRequestBody } from './index';
 import type { Services } from '#app/models/types/global';
+import type { UasApiRequestBody } from './index';
 
 const FAVOURITES_CONFIG = {
   activityType: 'favourites',
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 17f713d1ebb..fc365df22d9 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -60,6 +60,7 @@ import ContinueReadingButton, {
   ContinueReadingButtonProps,
 } from '#app/components/ContinueReadingButton';
 import SaveArticleButton from '#app/components/SaveArticleButton';
+import type { Services } from '#app/models/types/global';
 import { parseArticleID } from '#app/lib/uasApi/uasUtility';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
@@ -80,7 +81,6 @@ import {
   getAuthorTwitterHandle,
 } from '../../components/Byline/utilities';
 import { ServiceContext } from '../../contexts/ServiceContext';
-import type { Services } from '#app/models/types/global';
 import RelatedContentSection from '../../components/RelatedContentSection';
 import Disclaimer from '../../components/Disclaimer';
 import SecondaryColumn from './SecondaryColumn';

From 98098ff86883d3bead69b00bacd5ff1dddbb3470 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Tue, 14 Apr 2026 10:59:54 +0300
Subject: [PATCH 11/12] fix: add error handling to SaveArticleButton component

---
 .../components/SaveArticleButton/index.tsx    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 5d51b235f44..2f3200109d3 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -18,11 +18,12 @@ const SaveArticleButton = ({
   service,
   articleTitle,
 }: SaveArticleButtonProps) => {
-  const { showButton, isSaved, isLoading, handleSaveAction } = useUASButton({
-    articleId,
-    service,
-    articleTitle,
-  });
+  const { showButton, isSaved, isLoading, error, handleSaveAction } =
+    useUASButton({
+      articleId,
+      service,
+      articleTitle,
+    });
 
   if (!showButton) {
     return null;
@@ -36,15 +37,14 @@ const SaveArticleButton = ({
   };
 
   // TODO : Will modify based on future error handling implementation,
-  // if (error) {
-  //   // Logging until we have proper error handling in place
-  //   // eslint-disable-next-line no-console
-  //   console.log('Error fetching saved status for article:', {
-  //     articleId,
-  //     error,
-  //   });
-  //   return null;
-  // }
+  if (error) {
+    // eslint-disable-next-line no-console
+    console.log('Error fetching saved status for article:', {
+      articleId,
+      error,
+    });
+    // return null;
+  }
 
   return (
     <button

From 680f201dd9ddce487351460b3c17b19bbcf692d2 Mon Sep 17 00:00:00 2001
From: Lukas Freimonas <lukas.freimonas.ext@bbc.co.uk>
Date: Tue, 14 Apr 2026 13:20:22 +0300
Subject: [PATCH 12/12] refactor: remove service prop from SaveArticleButton
 and related tests

---
 .../SaveArticleButton/index.test.tsx          | 15 +++----
 .../components/SaveArticleButton/index.tsx    |  4 --
 src/app/hooks/useUASButton/index.test.tsx     | 40 ++++++++++---------
 src/app/hooks/useUASButton/index.ts           |  5 +--
 src/app/pages/ArticlePage/ArticlePage.tsx     |  5 ---
 5 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/app/components/SaveArticleButton/index.test.tsx b/src/app/components/SaveArticleButton/index.test.tsx
index c8cce671d17..cc5fe13fadd 100644
--- a/src/app/components/SaveArticleButton/index.test.tsx
+++ b/src/app/components/SaveArticleButton/index.test.tsx
@@ -1,5 +1,4 @@
 import useUASButton from '#app/hooks/useUASButton';
-import { Services } from '#app/models/types/global';
 import { render, screen } from '../react-testing-library-with-providers';
 import SaveArticleButton from './index';
 
@@ -10,7 +9,6 @@ const mockedUseUASButton = useUASButton as jest.Mock;
 describe('SaveArticleButton', () => {
   const defaultProps = {
     articleId: '123',
-    service: 'hindi' as Services,
     articleTitle: 'Test Article Title',
   };
 
@@ -20,7 +18,7 @@ describe('SaveArticleButton', () => {
     jest.clearAllMocks();
   });
 
-  test('does not render button when showButton is false', () => {
+  it('does not render button when showButton is false', () => {
     mockedUseUASButton.mockReturnValue({
       showButton: false,
       isSaved: false,
@@ -32,7 +30,7 @@ describe('SaveArticleButton', () => {
     expect(container.firstChild).toBeNull();
   });
 
-  test('renders "Save for later" when not saved', () => {
+  it('renders "Save for later" when not saved', () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
@@ -44,7 +42,7 @@ describe('SaveArticleButton', () => {
     expect(screen.getByRole('button')).toHaveTextContent('Save for later');
   });
 
-  test('renders "Remove from saved" when saved', () => {
+  it('renders "Remove from saved" when saved', () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: true,
@@ -56,7 +54,7 @@ describe('SaveArticleButton', () => {
     expect(screen.getByRole('button')).toHaveTextContent('Remove from saved');
   });
 
-  test('renders loading state and disables button', () => {
+  it('renders loading state and disables button', () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
@@ -71,7 +69,7 @@ describe('SaveArticleButton', () => {
     expect(button).toBeDisabled();
   });
 
-  test('calls handleSaveAction with save when button is clicked and not already saved', async () => {
+  it('calls handleSaveAction with save when button is clicked and not already saved', async () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
@@ -86,7 +84,7 @@ describe('SaveArticleButton', () => {
     expect(mockHandleSaveAction).toHaveBeenCalledTimes(1);
   });
 
-  test('passes title to useUASButton hook', () => {
+  it('passes title to useUASButton hook', () => {
     mockedUseUASButton.mockReturnValue({
       showButton: true,
       isSaved: false,
@@ -98,7 +96,6 @@ describe('SaveArticleButton', () => {
 
     expect(mockedUseUASButton).toHaveBeenCalledWith({
       articleId: '123',
-      service: 'hindi',
       articleTitle: 'Test Article Title',
     });
   });
diff --git a/src/app/components/SaveArticleButton/index.tsx b/src/app/components/SaveArticleButton/index.tsx
index 2f3200109d3..17b03b211e0 100644
--- a/src/app/components/SaveArticleButton/index.tsx
+++ b/src/app/components/SaveArticleButton/index.tsx
@@ -1,10 +1,8 @@
 import useUASButton, { UASAction } from '#app/hooks/useUASButton';
-import { Services } from '#app/models/types/global';
 import styles from './index.styles';
 
 interface SaveArticleButtonProps {
   articleId: string;
-  service: Services;
   articleTitle: string;
 }
 
@@ -15,13 +13,11 @@ interface SaveArticleButtonProps {
 
 const SaveArticleButton = ({
   articleId,
-  service,
   articleTitle,
 }: SaveArticleButtonProps) => {
   const { showButton, isSaved, isLoading, error, handleSaveAction } =
     useUASButton({
       articleId,
-      service,
       articleTitle,
     });
 
diff --git a/src/app/hooks/useUASButton/index.test.tsx b/src/app/hooks/useUASButton/index.test.tsx
index 4dbde64688e..aca1bc70a9d 100644
--- a/src/app/hooks/useUASButton/index.test.tsx
+++ b/src/app/hooks/useUASButton/index.test.tsx
@@ -6,7 +6,6 @@ import {
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
-import type { Services } from '#app/models/types/global';
 import useUASButton, { UASAction } from './index';
 
 import useToggle from '../useToggle';
@@ -28,7 +27,6 @@ const mockUasApiRequest = uasApiRequest as jest.Mock;
 describe('useUASButton', () => {
   const defaultProps = {
     articleId: '123',
-    service: 'hindi' as Services,
     articleTitle: 'Test Article',
   };
 
@@ -46,6 +44,7 @@ describe('useUASButton', () => {
 
     (use as jest.Mock).mockReturnValue({
       isSignedIn: false,
+      service: 'hindi',
     });
   });
 
@@ -53,30 +52,30 @@ describe('useUASButton', () => {
     jest.clearAllMocks();
   });
 
-  test('returns showButton = false when feature toggle is off', () => {
+  it('returns showButton = false when feature toggle is off', () => {
     mockUseToggle.mockReturnValue({ enabled: false });
     mockIsLocal.mockReturnValue(false);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true, service: 'hindi' });
 
     const { result } = renderHook(() => useUASButton(defaultProps));
 
     expect(result.current.showButton).toBe(false);
   });
 
-  test('returns showButton = false when user is not signed in', () => {
+  it('returns showButton = false when user is not signed in', () => {
     mockUseToggle.mockReturnValue({ enabled: true });
     mockIsLocal.mockReturnValue(false);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: false });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: false, service: 'hindi' });
 
     const { result } = renderHook(() => useUASButton({ ...defaultProps }));
 
     expect(result.current.showButton).toBe(false);
   });
 
-  test('returns showButton = true when feature enabled and signed in', () => {
+  it('returns showButton = true when feature enabled and signed in', () => {
     mockUseToggle.mockReturnValue({ enabled: true });
     mockIsLocal.mockReturnValue(false);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true, service: 'hindi' });
 
     mockuseUASFetchSaveStatus.mockReturnValue({
       isSaved: true,
@@ -90,46 +89,46 @@ describe('useUASButton', () => {
     expect(result.current.showButton).toBe(true);
   });
 
-  test('passes articleId to useUASFetchSaveStatus when showButton is true', () => {
+  it('passes articleId to useUASFetchSaveStatus when showButton is true', () => {
     mockUseToggle.mockReturnValue({ enabled: true });
     mockIsLocal.mockReturnValue(false);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true, service: 'hindi' });
 
     renderHook(() => useUASButton(defaultProps));
 
     expect(mockuseUASFetchSaveStatus).toHaveBeenCalledWith('123');
   });
 
-  test('passes empty string when showButton is false', () => {
+  it('passes empty string when showButton is false', () => {
     mockUseToggle.mockReturnValue({ enabled: false });
     mockIsLocal.mockReturnValue(false);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: false });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: false, service: 'hindi' });
 
     renderHook(() => useUASButton(defaultProps));
 
     expect(mockuseUASFetchSaveStatus).toHaveBeenCalledWith('');
   });
 
-  test('respects local environment service filtering', () => {
+  it('respects local environment service filtering', () => {
     mockUseToggle.mockReturnValue({
       enabled: true,
       value: 'hindi|sport',
     });
     mockIsLocal.mockReturnValue(true);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true, service: 'hindi' });
 
     const { result } = renderHook(() => useUASButton(defaultProps));
 
     expect(result.current.showButton).toBe(true);
   });
 
-  test('hides button if service not in toggle value in local', () => {
+  it('hides button if service not in toggle value in local', () => {
     mockUseToggle.mockReturnValue({
       enabled: true,
       value: 'mundo',
     });
     mockIsLocal.mockReturnValue(true);
-    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true, service: 'hindi' });
 
     const { result } = renderHook(() => useUASButton(defaultProps));
 
@@ -140,11 +139,14 @@ describe('useUASButton', () => {
     beforeEach(() => {
       mockUseToggle.mockReturnValue({ enabled: true });
       mockIsLocal.mockReturnValue(false);
-      (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+      (use as jest.Mock).mockReturnValue({
+        isSignedIn: true,
+        service: 'hindi',
+      });
       mockUasApiRequest.mockResolvedValue({ ok: true, status: 202 });
     });
 
-    test('sends POST request with correct payload when saving', async () => {
+    it('sends POST request with correct payload when saving', async () => {
       mockuseUASFetchSaveStatus.mockReturnValue({
         isSaved: false,
         isLoading: false,
@@ -174,7 +176,7 @@ describe('useUASButton', () => {
       });
     });
 
-    test('sets isSaved to true on successful save', async () => {
+    it('sets isSaved to true on successful save', async () => {
       mockuseUASFetchSaveStatus.mockReturnValue({
         isSaved: false,
         isLoading: false,
diff --git a/src/app/hooks/useUASButton/index.ts b/src/app/hooks/useUASButton/index.ts
index 7e8d0c2b113..bac9fee913b 100644
--- a/src/app/hooks/useUASButton/index.ts
+++ b/src/app/hooks/useUASButton/index.ts
@@ -1,13 +1,13 @@
 import { use, useCallback, useState } from 'react';
 import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
 import { AccountContext } from '#app/contexts/AccountContext';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import isLocal from '#app/lib/utilities/isLocal';
 import uasApiRequest from '#app/lib/uasApi';
 import {
   FAVOURITES_CONFIG,
   createFavouritesPayload,
 } from '#app/lib/uasApi/uasUtility';
-import { Services } from '#app/models/types/global';
 import useToggle from '../useToggle';
 
 /** A hook that fetches an article's saved status and controls showing the save UAS button
@@ -16,7 +16,6 @@ import useToggle from '../useToggle';
 
 interface UseUASButtonProps {
   articleId: string;
-  service: Services;
   articleTitle: string;
 }
 
@@ -34,11 +33,11 @@ interface UseUASButtonReturn {
 }
 
 const useUASButton = ({
-  service,
   articleId,
   articleTitle,
 }: UseUASButtonProps): UseUASButtonReturn => {
   const { isSignedIn } = use(AccountContext);
+  const { service } = use(ServiceContext);
   const { enabled: featureToggleOn = false, value: accountService = '' } =
     useToggle('uasPersonalization');
   const [isSaving, setIsSaving] = useState(false);
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index fc365df22d9..d35ee23af9d 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -60,7 +60,6 @@ import ContinueReadingButton, {
   ContinueReadingButtonProps,
 } from '#app/components/ContinueReadingButton';
 import SaveArticleButton from '#app/components/SaveArticleButton';
-import type { Services } from '#app/models/types/global';
 import { parseArticleID } from '#app/lib/uasApi/uasUtility';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
@@ -110,7 +109,6 @@ const getTimestampComponent =
     readTimeValue: number | undefined,
     readTimeTranslations: Translations['readTime'],
     articleId: string,
-    service: string,
     articleTitle: string,
   ) =>
   (props: ComponentToRenderProps & TimeStampProps) => {
@@ -145,7 +143,6 @@ const getTimestampComponent =
         {/* Temporary SaveArticleButton */}
         <SaveArticleButton
           articleId={parseArticleID(articleId)}
-          service={service as Services}
           articleTitle={articleTitle}
         />
       </>
@@ -220,7 +217,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     showRelatedTopics,
     brandName,
     translations,
-    service,
   } = use(ServiceContext);
 
   const { enabled: preloadLeadImageToggle } = useToggle('preloadLeadImage');
@@ -368,7 +364,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       readTimeValue,
       translations.readTime,
       articleId,
-      service,
       headline,
     ),
     social: SocialEmbedContainer,