WS-2008-account-header

src/app/components/Account/AccountHeader/README.md

@@ -0,0 +1,16 @@
+# AccountHeader
+
+Displays the account entry point in the header.
+
+## Behaviour
+- Shows **“Sign in”** when the user is signed out
+- Shows **“For you”** when the user is signed in
+
+## Data source
+- Uses `AccountContext` to determine signed-in state
+
+## Storybook
+- `Signed Out`
+- `Signed In`
+
+This is an initial MVP version. Styling and IDCTA integration will follow in later tickets.

src/app/components/Account/AccountHeader/index.stories.tsx

@@ -0,0 +1,34 @@
+import ThemeProvider from '#app/components/ThemeProvider';
+import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import { AccountContext } from '#app/contexts/AccountContext';
+import AccountHeader from '.';
+
+type WithProvidersArgs = {
+  isSignedIn: boolean;
+};
+
+const withProviders =
+  ({ isSignedIn }: WithProvidersArgs) =>
+    () => (
+      <ThemeProvider service="ws">
+        <ServiceContextProvider service="ws">
+          <AccountContext.Provider
+            value={{
+              isSignedIn,
+              signInUrl: 'https://example.com/signin',
+              forYouUrl: 'https://example.com/for-you',
+              isIdctaAvailable: true,
+            }}
+          >
+            <AccountHeader />
+          </AccountContext.Provider>
+        </ServiceContextProvider>
+      </ThemeProvider>
+    );
+export default {
+  title: 'Account/AccountHeader',
+  component: AccountHeader,
+};
+
+export const SignedOut = withProviders({ isSignedIn: false });
+export const SignedIn = withProviders({ isSignedIn: true });

src/app/components/Account/AccountHeader/index.styles.tsx

@@ -0,0 +1,22 @@
+import { Theme } from '@emotion/react';
+
+const styles = {
+  wrapper: {
+    marginInlineStart: 'auto',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    paddingInlineStart: '1rem',
+  },
+
+  link: ({ palette }: Theme) => ({
+    color: palette.WHITE,
+    textDecoration: 'none',
+
+    '&:hover, &:focus': {
+      textDecoration: 'underline',
+    },
+  }),
+};
+
+export default styles;

src/app/components/Account/AccountHeader/index.test.tsx

@@ -0,0 +1,52 @@
+import Cookie from 'js-cookie';
+import { screen } from '@testing-library/react';
+import { render } from '#app/components/react-testing-library-with-providers';
+import { IdctaConfig } from '#app/models/types/account';
+import AccountHeader from '.';
+
+const idctaConfig: IdctaConfig = {
+  'id-availability': 'GREEN',
+  unavailable_url: 'https://example.com/unavailable',
+  signin_url: 'https://example.com/signin',
+  register_url: 'https://example.com/register',
+  settings_url: 'https://example.com/settings',
+  signout_url: 'https://example.com/signout',
+  foryou_url: 'https://example.com/foryou',
+  identity: {
+    idSignedInCookieName: 'ckns_id',
+  },
+};
+
+const renderWithProviders = () =>
+  render(<AccountHeader />, {
+    service: 'ws',
+    idctaConfig,
+  });
+
+describe('AccountHeader', () => {
+  afterEach(() => {
+    Cookie.remove('ckns_id');
+  });
+
+  it('shows Sign in when signed out', async () => {
+    renderWithProviders();
+
+    const link = await screen.findByRole('link', { name: 'Sign In' });
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringContaining('https://example.com/signin'),
+    );
+  });
+
+  it('shows For you when signed in', async () => {
+    Cookie.set('ckns_id', '1');
+
+    renderWithProviders();
+
+    const link = await screen.findByRole('link', { name: 'For you' });
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringContaining('https://example.com/foryou'),
+    );
+  });
+});

src/app/components/Account/AccountHeader/index.tsx

@@ -0,0 +1,27 @@
+import { use } from 'react';
+import { AccountContext } from '#contexts/AccountContext';
+import { ServiceContext } from '#contexts/ServiceContext';
+import Text from '#app/components/Text';
+import styles from './index.styles';
+
+const AccountHeader = () => {
+  const { isSignedIn, signInUrl, forYouUrl } = use(AccountContext);
+  const { translations } = use(ServiceContext);
+
+  const href = isSignedIn ? forYouUrl : signInUrl;
+  if (!href) return null;
+
+  const label = isSignedIn
+    ? (translations?.account?.forYou ?? 'For you')
+    : (translations?.account?.signIn ?? 'Sign In');
+
+  return (
+    <div css={styles.wrapper}>
+      <Text as="a" css={styles.link} href={href}>
+        {label}
+      </Text>
+    </div>
+  );
+};
+
+export default AccountHeader;

src/app/lib/config/services/hindi.ts

@@ -102,6 +102,10 @@ export const service: DefaultServiceConfig = {
         instructions: 'You can download and view today’s news.',
         title: 'File Download',
       },
+      account: {
+        signIn: 'Sign In',
+        forYou: 'For you',
+      },
       gist: 'सारांश',
       error: {
         404: {

src/app/lib/config/services/ws.ts

@@ -70,6 +70,10 @@ export const service: DefaultServiceConfig = {
         title: 'File Download',
       },
       gist: 'At a glance',
+      account: {
+        signIn: 'Sign In',
+        forYou: 'For you',
+      },
       error: {
         404: {
           statusCode: '404',

src/app/models/types/translations.ts

@@ -40,6 +40,10 @@ export interface Translations {
     title?: string;
   };
   gist?: string;
+  account?: {
+    signIn?: string;
+    forYou?: string;
+  };
   error: {
     home?: string;
     currentPage?: string;