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,66 @@
+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 = {
+    isSignedIn: true,
+    articleId: '123',
+    service: 'hindi',
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('does not render button when showButton is false', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: false,
+      isSaved: false,
+      loading: false,
+    });
+
+    const { container } = render(<SaveArticleButton {...defaultProps} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders "Save for later" when not saved', () => {
+    mockedUseUASButton.mockReturnValue({
+      showButton: true,
+      isSaved: false,
+      loading: 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,
+      loading: 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,
+      loading: 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,55 @@
+import useUASButton from '#app/hooks/useUASButton';
+import styles from './index.styles';
+
+interface SaveArticleButtonProps {
+  isSignedIn: boolean;
+  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 = ({
+  isSignedIn,
+  articleId,
+  service,
+}: SaveArticleButtonProps) => {
+  const { showButton, isSaved, loading, error } = useUASButton({
+    isSignedIn,
+    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 (loading) 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={loading}
+      aria-label={buttonLabel}
+      title={buttonLabel}
+    >
+      {getButtonText()}
+    </button>
+  );
+};
+
+export default SaveArticleButton;

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

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

src/app/hooks/useUASButton/index.ts

@@ -0,0 +1,49 @@
+import useFetchSaveStatus from '#app/hooks/useUASFetchSaveStatus';
+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 {
+  isSignedIn: boolean;
+  articleId: string;
+  service: string;
+}
+
+interface UseUASButtonReturn {
+  showButton: boolean;
+  isSaved: boolean;
+  loading: boolean;
+  error: Error | null;
+}
+
+const useUASButton = ({
+  service,
+  isSignedIn,
+  articleId,
+}: UseUASButtonProps): UseUASButtonReturn => {
+  const { enabled: featureToggleOn, value: accountService = '' } =
+    useToggle('uasEnable') || {};
+
+  const isUASEnabled =
+    featureToggleOn &&
+    (isLocal()
+      ? accountService?.toString().split('|').includes(service)
+      : true);
+
+  const showButton = isUASEnabled && isSignedIn;
+
+  const { isSaved, loading, error } = useFetchSaveStatus(
+    showButton ? articleId : '',
+  );
+  return {
+    showButton,
+    isSaved,
+    loading,
+    error,
+  };
+};
+
+export default useUASButton;

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

@@ -0,0 +1,65 @@
+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 useFetchSaveStatus from './index';
+
+jest.mock('#app/lib/uasApi');
+jest.mock('#app/lib/uasApi/uasUtility');
+
+const mockUasApiRequest = uasApiRequest as jest.Mock;
+const mockBuildGlobalId = buildGlobalId as jest.Mock;
+
+describe('useFetchSaveStatus', () => {
+  const defaultArticleId = '123';
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('returns isSaved = true when API returns 200', async () => {
+    mockBuildGlobalId.mockReturnValue('global-123');
+    mockUasApiRequest.mockResolvedValue({ ok: true, status: 200 });
+
+    const { result } = renderHook(() => useFetchSaveStatus(defaultArticleId));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.isSaved).toBe(true);
+    expect(result.current.error).toBeNull();
+    expect(mockUasApiRequest).toHaveBeenCalledWith('GET', ACTIVITY_TYPE, {
+      globalId: 'global-123',
+    });
+  });
+
+  test('returns isSaved = false when API returns 204', async () => {
+    mockBuildGlobalId.mockReturnValue('global-123');
+    mockUasApiRequest.mockResolvedValue({ ok: true, status: 204 });
+
+    const { result } = renderHook(() => useFetchSaveStatus(defaultArticleId));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.isSaved).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  test('returns error and isSaved = false when API fails', async () => {
+    mockBuildGlobalId.mockReturnValue('global-123');
+    const apiError = new Error('API failed');
+    mockUasApiRequest.mockRejectedValue(apiError);
+
+    const { result } = renderHook(() => useFetchSaveStatus(defaultArticleId));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.isSaved).toBe(false);
+    expect(result.current.error).toBe(apiError);
+  });
+
+  test('does not call API when articleId is empty', () => {
+    renderHook(() => useFetchSaveStatus(''));
+
+    expect(mockUasApiRequest).not.toHaveBeenCalled();
+  });
+});