WS-2209-UAS GET -Single Article status retrieval with new feature toggle

src/app/components/SaveArticleButton/index.styles.ts

@@ -0,0 +1,10 @@
+/** Temporary css styling until UX work is complete */
+const styles = {
+  buttonWrapper: {
+    display: 'flex',
+    marginTop: '1rem',
+    marginBottom: '1rem',
+  },
+};
+
+export default styles;

src/app/components/SaveArticleButton/index.test.tsx

@@ -0,0 +1,65 @@
+import useUASButton from '#app/hooks/useUASButton';
+import { render, screen } from '../react-testing-library-with-providers';
+import SaveArticleButton from './index';
+
+jest.mock('#app/hooks/useUASButton');
+
+const mockedUseUASButton = useUASButton as jest.Mock;
+
+describe('SaveArticleButton', () => {
+  const defaultProps = {
+    articleId: '123',
+    service: 'hindi',
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('does not render button when showButton is false', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: false,
+      isSaved: false,
+      isLoading: false,
+    });
+
+    const { container } = render(<SaveArticleButton {...defaultProps} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders "Save for later" when not saved', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: false,
+      isLoading: false,
+    });
+
+    render(<SaveArticleButton {...defaultProps} />);
+    expect(screen.getByRole('button')).toHaveTextContent('Save for later');
+  });
+
+  test('renders "Remove from saved" when saved', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: true,
+      isLoading: false,
+    });
+
+    render(<SaveArticleButton {...defaultProps} />);
+    expect(screen.getByRole('button')).toHaveTextContent('Remove from saved');
+  });
+
+  test('renders loading state and disables button', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: false,
+      isLoading: true,
+    });
+
+    render(<SaveArticleButton {...defaultProps} />);
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveTextContent('Loading...');
+    expect(button).toBeDisabled();
+  });
+});

src/app/components/SaveArticleButton/index.tsx

@@ -0,0 +1,49 @@
+import useUASButton from '#app/hooks/useUASButton';
+import styles from './index.styles';
+
+interface SaveArticleButtonProps {
+  articleId: string;
+  service: 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,
+  });
+
+  if (!showButton) {
+    return null;
+  }
+  // TODO : Labels and text will be updated in a future PR to support translations and figma designs
+  const buttonLabel = isSaved ? 'Remove from saved' : 'Save for later';
+
+  const getButtonText = () => {
+    if (isLoading) return 'Loading...';
+    return isSaved ? 'Remove from saved' : 'Save for later';
+  };
+
+  // TODO : Will modify based on future error handling implementation,
+  //  currently just hides the button if there is an error fetching save status
+  if (error) {
+    return null;
+  }
+
+  return (
+    <button
+      css={styles.buttonWrapper}
+      type="button"
+      disabled={isLoading}
+      aria-label={buttonLabel}
+      title={buttonLabel}
+    >
+      {getButtonText()}
+    </button>
+  );
+};
+
+export default SaveArticleButton;

src/app/contexts/AccountContext/index.tsx

@@ -9,6 +9,7 @@ import {
 import { AccountContextProps, IdctaConfig } from '#app/models/types/account';
 import appendCtaQueryParams from '#app/lib/idcta/appendCtaQueryParams';
 import { ServiceContext } from '#app/contexts/ServiceContext';
+import { RequestContext } from '#app/contexts/RequestContext';
 import onClient from '#app/lib/utilities/onClient';
 import Cookie from 'js-cookie';
 
@@ -29,13 +30,20 @@ export const AccountProvider = ({
   initialConfig,
 }: PropsWithChildren<AccountProviderProps>) => {
   const { locale } = use(ServiceContext);
+  const { isAmp = false, isApp = false, isLite = false } = use(RequestContext);
   const [pageToReturnTo, setPageToReturnTo] = useState<string | null>(null);
 
   useEffect(() => {
     setPageToReturnTo(window.location.href);
   }, []);
 
-  const isIdctaAvailable = initialConfig?.['id-availability'] === 'GREEN';
+  // IDCTA / UAS is not available on AMP, Lite or App platforms — ensure provider
+  // centralises this logic so individual components don't need to check platform.
+  const isIdctaAvailable =
+    initialConfig?.['id-availability'] === 'GREEN' &&
+    !isAmp &&
+    !isLite &&
+    !isApp;
 
   const buildAccountUrl = (url?: string) => {
     return isIdctaAvailable && url

src/app/hooks/useUASButton/index.test.tsx

@@ -0,0 +1,125 @@
+import { use } from 'react';
+import { renderHook } from '#app/components/react-testing-library-with-providers';
+import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
+import isLocal from '#app/lib/utilities/isLocal';
+import useUASButton from './index';
+
+import useToggle from '../useToggle';
+
+jest.mock('#app/hooks/useUASFetchSaveStatus');
+jest.mock('../useToggle');
+jest.mock('#app/lib/utilities/isLocal');
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  use: jest.fn(),
+}));
+
+const mockuseUASFetchSaveStatus = useUASFetchSaveStatus as jest.Mock;
+const mockUseToggle = useToggle as jest.Mock;
+const mockIsLocal = isLocal as jest.Mock;
+describe('useUASButton', () => {
+  const defaultProps = {
+    articleId: '123',
+    service: 'hindi',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockuseUASFetchSaveStatus.mockReturnValue({
+      isSaved: false,
+      isLoading: false,
+      error: null,
+    });
+
+    (use as jest.Mock).mockReturnValue({
+      isSignedIn: false,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('returns showButton = false when feature toggle is off', () => {
+    mockUseToggle.mockReturnValue({ enabled: false });
+    mockIsLocal.mockReturnValue(false);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+
+    const { result } = renderHook(() => useUASButton(defaultProps));
+
+    expect(result.current.showButton).toBe(false);
+  });
+
+  test('returns showButton = false when user is not signed in', () => {
+    mockUseToggle.mockReturnValue({ enabled: true });
+    mockIsLocal.mockReturnValue(false);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: false });
+
+    const { result } = renderHook(() => useUASButton({ ...defaultProps }));
+
+    expect(result.current.showButton).toBe(false);
+  });
+
+  test('returns showButton = true when feature enabled and signed in', () => {
+    mockUseToggle.mockReturnValue({ enabled: true });
+    mockIsLocal.mockReturnValue(false);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+
+    mockuseUASFetchSaveStatus.mockReturnValue({
+      isSaved: true,
+      isLoading: false,
+      error: null,
+    });
+
+    const { result } = renderHook(() => useUASButton(defaultProps));
+
+    expect(result.current.showButton).toBe(true);
+  });
+
+  test('passes articleId to useUASFetchSaveStatus when showButton is true', () => {
+    mockUseToggle.mockReturnValue({ enabled: true });
+    mockIsLocal.mockReturnValue(false);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+
+    renderHook(() => useUASButton(defaultProps));
+
+    expect(mockuseUASFetchSaveStatus).toHaveBeenCalledWith('123');
+  });
+
+  test('passes empty string when showButton is false', () => {
+    mockUseToggle.mockReturnValue({ enabled: false });
+    mockIsLocal.mockReturnValue(false);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: false });
+
+    renderHook(() => useUASButton(defaultProps));
+
+    expect(mockuseUASFetchSaveStatus).toHaveBeenCalledWith('');
+  });
+
+  test('respects local environment service filtering', () => {
+    mockUseToggle.mockReturnValue({
+      enabled: true,
+      value: 'hindi|sport',
+    });
+    mockIsLocal.mockReturnValue(true);
+    (use as jest.Mock).mockReturnValue({ isSignedIn: true });
+
+    const { result } = renderHook(() => useUASButton(defaultProps));
+
+    expect(result.current.showButton).toBe(true);
+  });
+
+  test('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 });
+
+    const { result } = renderHook(() => useUASButton(defaultProps));
+
+    expect(result.current.showButton).toBe(false);
+  });
+});

src/app/hooks/useUASButton/index.ts

@@ -0,0 +1,50 @@
+import { use } from 'react';
+import useUASFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
+import { AccountContext } from '#app/contexts/AccountContext';
+import isLocal from '#app/lib/utilities/isLocal';
+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;
+}
+
+interface UseUASButtonReturn {
+  showButton: boolean;
+  isSaved: boolean;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const useUASButton = ({
+  service,
+  articleId,
+}: UseUASButtonProps): UseUASButtonReturn => {
+  const { isSignedIn } = use(AccountContext);
+  const { enabled: featureToggleOn = false, value: accountService = '' } =
+    useToggle('uasPersonalization');
+
+  const isUASEnabled =
+    featureToggleOn &&
+    (isLocal()
+      ? accountService?.toString().split('|').includes(service)
+      : true);
+
+  const showButton = isUASEnabled && isSignedIn;
+
+  const { isSaved, isLoading, error } = useUASFetchSaveStatus(
+    showButton ? articleId : '',
+  );
+  return {
+    showButton,
+    isSaved,
+    isLoading,
+    error,
+  };
+};
+
+export default useUASButton;