Merge pull request #1017 from Financial-Times/account-entry-points-test

Account and myFT entry points test

packages/dotcom-ui-header/src/__stories__/story.tsx

@@ -55,6 +55,46 @@ DefaultHeaderWithDrawer.args = {
   showLogoLink: false
 }
 
+export const DefaultHeaderWithDrawerEntryTestAnon = (args) => (
+  <OnReady callback={onReadyCallback}>
+    <HeaderSimple {...storyData} {...args} />
+    <Drawer {...storyData} {...args} />
+  </OnReady>
+)
+
+DefaultHeaderWithDrawerEntryTestAnon.story = {
+  name: 'Default header with drawer - Account entry test [Anon]'
+}
+DefaultHeaderWithDrawerEntryTestAnon.args = {
+  showSubNavigation: true,
+  showMegaNav: true,
+  showUserNavigation: true,
+  userIsLoggedIn: false,
+  userIsSubscribed: false,
+  showLogoLink: false,
+  experimentalAccountEntryTest: true
+}
+
+export const DefaultHeaderWithDrawerEntryTest = (args) => (
+  <OnReady callback={onReadyCallback}>
+    <HeaderSimple {...storyData} {...args} />
+    <Drawer {...storyData} {...args} />
+  </OnReady>
+)
+
+DefaultHeaderWithDrawerEntryTest.story = {
+  name: 'Default header with drawer - Account entry test'
+}
+DefaultHeaderWithDrawerEntryTest.args = {
+  showSubNavigation: true,
+  showMegaNav: true,
+  showUserNavigation: true,
+  userIsLoggedIn: true,
+  userIsSubscribed: false,
+  showLogoLink: false,
+  experimentalAccountEntryTest: true
+}
+
 export const DefaultHeaderWithRightAlignedSubnav = (args) => (
   <OnReady callback={onReadyCallback}>
     <HeaderSimple {...profileStoryData} {...args} />

packages/dotcom-ui-header/src/components/navigation/partials.tsx

@@ -77,10 +77,26 @@ const NavListLeft = (props: THeaderProps) => (
 )
 
 const NavListRight = (props: THeaderProps) => {
-  return props.userIsLoggedIn ? <NavListRightLoggedIn items={props.data['navbar-right'].items} /> : null
+  return props.userIsLoggedIn ? (
+    <NavListRightLoggedIn
+      items={props.data['navbar-right'].items}
+      experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+    />
+  ) : null
 }
 
-const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
+const NavListRightLoggedIn = ({
+  items,
+  experimentalAccountEntryTest
+}: {
+  items: TNavMenuItem[]
+  experimentalAccountEntryTest?: boolean
+}) => {
+  /**
+   * Accounts entry test
+   * In this rendering theres a hacky solution to replace "Settings & Account" with "MyFT Feed"
+   * Once the test is concluded the real data should be updated accordingly and the hack removed
+   */
   return (
     <ul
       data-component="nav-list--right"
@@ -89,9 +105,15 @@ const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
     >
       {items.map((item, index) => (
         <li className="o-header__nav-item" key={`link-${index}`}>
-          <a className="o-header__nav-link" href={item.url ?? undefined} data-trackable={item.label}>
-            {item.label}
-          </a>
+          {item.label === 'Settings & Account' && experimentalAccountEntryTest ? (
+            <a className="o-header__nav-link" href="/myft" data-trackable="my-ft">
+              myFT Feed
+            </a>
+          ) : (
+            <a className="o-header__nav-link" href={item.url ?? undefined} data-trackable={item.label}>
+              {item.label}
+            </a>
+          )}
         </li>
       ))}
     </ul>

packages/dotcom-ui-header/src/components/top/partials.tsx

@@ -39,7 +39,23 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyFt = ({ className }: { className?: string }) => (
+const TopRightAccountEntry = ({
+  className,
+  signedIn,
+  experimentalAccountEntryTest
+}: {
+  className?: string
+  signedIn: boolean
+  experimentalAccountEntryTest?: boolean
+}) => {
+  if (experimentalAccountEntryTest) {
+    return <MyAccountLink signedIn={signedIn} />
+  } else {
+    return <MyFtLogoLink className={className} />
+  }
+}
+
+const MyFtLogoLink = ({ className }: { className?: string }) => (
   <a
     className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
     id="o-header-top-link-myft"
@@ -52,6 +68,34 @@ const MyFt = ({ className }: { className?: string }) => (
   </a>
 )
 
+const MyAccountLink = ({ signedIn }: { signedIn: boolean }) => {
+  const classNames = 'o-header__top-link ft-header__top-link--myaccount'
+
+  if (signedIn) {
+    return (
+      <a
+        className={classNames}
+        id="o-header-top-link-myaccount"
+        href="/myaccount"
+        data-trackable="my-account"
+      >
+        <span>My Account</span>
+      </a>
+    )
+  } else {
+    return (
+      <a
+        className={classNames}
+        id="o-header-top-link-signin"
+        href="/login?location=/"
+        data-trackable="Sign In"
+      >
+        <span>Sign In</span>
+      </a>
+    )
+  }
+}
+
 const TopWrapper = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-top">
     <div className="o-header__container">
@@ -100,7 +144,11 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <MyFt className="" />
+      <TopRightAccountEntry
+        className=""
+        signedIn={true}
+        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+      />
     </div>
   )
 }
@@ -151,18 +199,31 @@ const SubscribeButton = ({
   )
 }
 
-const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
+const TopColumnRightAnon = ({
+  items,
+  variant,
+  experimentalAccountEntryTest
+}: {
+  items: TNavMenuItem[]
+  variant?: string
+  experimentalAccountEntryTest?: boolean
+}) => {
   // If user is anonymous the second list item is styled as a button
   const [signInAction, subscribeAction] = items
+
   return (
     <div className="o-header__top-column o-header__top-column--right">
       {subscribeAction && (
         <SubscribeButton item={subscribeAction} variant={variant} className="o-header__top-button--hide-m" />
       )}
-      {signInAction && (
+      {signInAction && !experimentalAccountEntryTest && (
         <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
       )}
-      <MyFt className="o-header__top-icon-link--show-m" />
+      <TopRightAccountEntry
+        className="o-header__top-icon-link--show-m"
+        signedIn={false}
+        experimentalAccountEntryTest={experimentalAccountEntryTest}
+      />
     </div>
   )
 }
@@ -172,7 +233,13 @@ const TopColumnRight = (props: THeaderProps) => {
     return <TopColumnRightLoggedIn {...props} />
   } else {
     const userNavAnonItems = props.data['navbar-right-anon'].items
-    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
+    return (
+      <TopColumnRightAnon
+        items={userNavAnonItems}
+        variant={props.variant}
+        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+      />
+    )
   }
 }
 

packages/dotcom-ui-header/src/header.scss

@@ -3,7 +3,7 @@
 // Once for a core experience, once for an enhanced experience.
 // The enhanced version is hidden until toggled with JavaScript.
 // Instead since we can rely on the `core` class we can use the
-// one enhanced experience search block and reveal for the core 
+// one enhanced experience search block and reveal for the core
 // experience if needed.
 .core [data-o-header-search] {
   display: block;
@@ -27,3 +27,39 @@
 .n-typeahead {
   display: none;
 }
+
+// The styles below are part of an AB test
+// If the test is successful these should be incorporated into o-header
+.ft-header__top-link--myaccount {
+  @include oTypographySans(0);
+}
+
+
+.ft-header__top-link--myaccount span {
+  vertical-align: middle;
+  // Hide the myaccount/sign in text on smaller screens leaving the icon only
+  @include oGridRespondTo($until: 'M') {
+    @include oNormaliseVisuallyHidden;
+  }
+}
+
+// Override the hover styles so the underline
+// Is only under the text and not the icon
+// And is closer to the text
+.ft-header__top-link--myaccount::after {
+  width: calc(100% - 32px);
+  left: unset;
+  right: 0;
+  bottom: 8px;
+}
+
+.ft-header__top-link--myaccount::before {
+  content: '';
+  display: block;
+  @include oIconsContent(
+		$icon-name: 'user',
+		$color: oColorsByName('black'),
+		$size: 32
+	);
+  vertical-align: middle;
+}

packages/dotcom-ui-header/src/interfaces.d.ts

@@ -10,6 +10,12 @@ export type THeaderOptions = {
   showStickyHeader?: boolean
   showMegaNav?: boolean
   showLogoLink?: boolean
+  /*
+   * experimentalAccountEntryTest is an experimental feature switch
+   * This is being run as an AB test and should be removed afterwards
+   * This option shouldn't be used by anyone without consulting the CP Retention team first
+   */
+  experimentalAccountEntryTest?: boolean
 }
 
 export type THeaderProps = THeaderOptions & {