feat(ui): For new send tab entrypoints, always navigate directly to /pair

Because:
* The send tab flow will use the service=sync flow, but with Send Tab specific entrypoints. For this flow, we want to always take users to the /pair page (choice screen)

This commit:
* Skips the inline_recovery_key_flow for Sync signins with the Send Tab entrypoint, uses existing success message
* Skips the sync_signup_confirmed screen for Sync signups with the Send Tab entrypoint, updates the success message
* Skips the sync_signup_confirmed screen for passwordless users signing up for Sync with the Send Tab entrypoint, updates the success message

closes FXA-13397

Author: LZoog

packages/functional-tests/tests/react-conversion/oauthSignup.spec.ts

@@ -104,5 +104,35 @@ test.describe('severity-1 #smoke', () => {
       await expect(page).toHaveURL(/pair/);
       await signup.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
     });
+
+    test('signup oauth webchannel with Sync desktop and send-tab entrypoint skips signup_confirmed_sync', async ({
+      target,
+      syncOAuthBrowserPages: { confirmSignupCode, page, signup },
+      testAccountTracker,
+    }) => {
+      const { email, password } =
+        testAccountTracker.generateSignupAccountDetails();
+
+      const sendTabParams = new URLSearchParams(syncDesktopOAuthQueryParams);
+      sendTabParams.set('entrypoint', 'send-tab-toolbar-icon');
+
+      await signup.goto('/', sendTabParams);
+
+      await signup.fillOutEmailForm(email);
+
+      await expect(signup.signupFormHeading).toBeVisible();
+
+      await signup.fillOutSyncSignupForm(password);
+
+      await expect(page).toHaveURL(/confirm_signup_code/);
+
+      const code = await target.emailClient.getVerifyShortCode(email);
+      await confirmSignupCode.fillOutCodeForm(code);
+
+      await expect(page).toHaveURL(/pair/);
+      await expect(page).toHaveURL(/signupSuccess=true/);
+      await expect(page).toHaveURL(/showSuccessMessage=true/);
+      await signup.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
+    });
   });
 });

packages/fxa-content-server/app/scripts/templates/pair/index.mustache

@@ -4,7 +4,17 @@
     {{#showSuccessMessage}}
       <div id="fxa-connected-heading"
           class="w-full text-md font-bold p-3 mb-5 rounded bg-green-500 text-grey-900 dark:text-grey-900 flex items-center justify-center before:content-icon-circle-check-outline before:flex">
-        <span class="ps-3 align-middle">{{#t}}Signed in successfully!{{/t}}</span>
+        {{#showPasswordCreatedMessage}}
+          <span class="ps-3 align-middle">{{#t}}Password created. You’re now syncing.{{/t}}</span>
+        {{/showPasswordCreatedMessage}}
+        {{^showPasswordCreatedMessage}}
+          {{#showSignupSuccessMessage}}
+            <span class="ps-3 align-middle">{{#t}}Account created. You’re now syncing.{{/t}}</span>
+          {{/showSignupSuccessMessage}}
+          {{^showSignupSuccessMessage}}
+            <span class="ps-3 align-middle">{{#t}}Signed in successfully!{{/t}}</span>
+          {{/showSignupSuccessMessage}}
+        {{/showPasswordCreatedMessage}}
       </div>
     {{/showSuccessMessage}}
 

packages/fxa-content-server/app/scripts/views/pair/index.js

@@ -191,6 +191,8 @@ class PairIndexView extends FormView {
       graphicId,
       needsMobileConfirmed,
       showSuccessMessage: this.showSuccessMessage(),
+      showSignupSuccessMessage: this.showSignupSuccessMessage(),
+      showPasswordCreatedMessage: this.showPasswordCreatedMessage(),
       buttonTextShadowClass,
       tabletBackArrowColor,
     });
@@ -275,6 +277,14 @@ class PairIndexView extends FormView {
         !!this.getSearchParam('showSuccessMessage'))
     );
   }
+
+  showSignupSuccessMessage() {
+    return !!this.getSearchParam('signupSuccess');
+  }
+
+  showPasswordCreatedMessage() {
+    return !!this.getSearchParam('passwordCreated');
+  }
 }
 
 Cocktail.mixin(

packages/fxa-content-server/app/tests/spec/views/pair/index.js

@@ -424,4 +424,37 @@ describe('views/pair/index', () => {
       });
     });
   });
+
+  describe('success message variants', () => {
+    it('showSuccessMessage returns true when showSuccessMessage query param is present', () => {
+      windowMock.location.search = '?showSuccessMessage=true';
+      assert.isTrue(view.showSuccessMessage());
+    });
+
+    it('showSuccessMessage returns false when needsMobileConfirmed is set', () => {
+      windowMock.location.search = '?showSuccessMessage=true';
+      view.model.set('needsMobileConfirmed', true);
+      assert.isFalse(view.showSuccessMessage());
+    });
+
+    it('showSignupSuccessMessage returns true when signupSuccess query param is present', () => {
+      windowMock.location.search = '?signupSuccess=true';
+      assert.isTrue(view.showSignupSuccessMessage());
+    });
+
+    it('showSignupSuccessMessage returns false when signupSuccess query param is absent', () => {
+      windowMock.location.search = '?showSuccessMessage=true';
+      assert.isFalse(view.showSignupSuccessMessage());
+    });
+
+    it('showPasswordCreatedMessage returns true when passwordCreated query param is present', () => {
+      windowMock.location.search = '?passwordCreated=true';
+      assert.isTrue(view.showPasswordCreatedMessage());
+    });
+
+    it('showPasswordCreatedMessage returns false when passwordCreated query param is absent', () => {
+      windowMock.location.search = '?showSuccessMessage=true';
+      assert.isFalse(view.showPasswordCreatedMessage());
+    });
+  });
 });

packages/fxa-settings/src/constants/index.tsx

@@ -20,8 +20,25 @@ export enum ENTRYPOINTS {
   FIREFOX_SYNCED_TABS_ENTRYPOINT = 'synced-tabs',
   FIREFOX_TABS_SIDEBAR_ENTRYPOINT = 'tabs-sidebar',
   FIREFOX_FX_VIEW_ENTRYPOINT = 'fx-view',
+  SEND_TAB_TAB_CONTEXT_MENU = 'send-tab-tab-context-menu',
+  SEND_TAB_ACCOUNT_MENU = 'send-tab-account-menu',
+  SEND_TAB_APP_MENU = 'send-tab-app-menu',
+  SEND_TAB_FIREFOX_VIEW_THREE_DOTS = 'send-tab-firefox-view-three-dots',
+  SEND_TAB_LINK_CONTEXT_MENU = 'send-tab-link-context-menu',
+  SEND_TAB_PAGE_CONTEXT_MENU = 'send-tab-page-context-menu',
+  SEND_TAB_TOOLBAR_ICON = 'send-tab-toolbar-icon',
 }
 
+export const SEND_TAB_ENTRYPOINTS = new Set<string>([
+  ENTRYPOINTS.SEND_TAB_TAB_CONTEXT_MENU,
+  ENTRYPOINTS.SEND_TAB_ACCOUNT_MENU,
+  ENTRYPOINTS.SEND_TAB_APP_MENU,
+  ENTRYPOINTS.SEND_TAB_FIREFOX_VIEW_THREE_DOTS,
+  ENTRYPOINTS.SEND_TAB_LINK_CONTEXT_MENU,
+  ENTRYPOINTS.SEND_TAB_PAGE_CONTEXT_MENU,
+  ENTRYPOINTS.SEND_TAB_TOOLBAR_ICON,
+]);
+
 export const LINK = {
   AMO: 'https://addons.mozilla.org/',
   FX_DESKTOP: 'https://www.mozilla.org/firefox/new/',

packages/fxa-settings/src/pages/Signin/utils.test.ts

@@ -17,7 +17,13 @@ import {
   createMockSigninOAuthNativeIntegration,
   createMockSigninOAuthIntegration,
 } from './mocks';
-import { handleNavigation, ensureCanLinkAcountOrRedirect } from './utils';
+import {
+  handleNavigation,
+  ensureCanLinkAcountOrRedirect,
+  getSyncNavigate,
+  isSendTabEntrypoint,
+} from './utils';
+import { SEND_TAB_ENTRYPOINTS } from '../../constants';
 import * as ReachRouter from '@reach/router';
 import * as ReactUtils from 'fxa-react/lib/utils';
 import firefox from '../../lib/channels/firefox';
@@ -344,6 +350,65 @@ describe('Signin utils', () => {
         );
       });
     });
+
+    describe('handleNavigation with send-tab entrypoints', () => {
+      const createSendTabNavigationOptions = (
+        overrides: Partial<NavigationOptions> = {}
+      ): NavigationOptions =>
+        ({
+          email: MOCK_EMAIL,
+          signinData: {
+            uid: MOCK_UID,
+            sessionToken: MOCK_SESSION_TOKEN,
+            emailVerified: true,
+            sessionVerified: true,
+            verificationMethod: VerificationMethods.EMAIL,
+            verificationReason: VerificationReasons.SIGN_IN,
+            keyFetchToken: MOCK_KEY_FETCH_TOKEN,
+          },
+          redirectTo: '',
+          finishOAuthFlowHandler: jest
+            .fn()
+            .mockReturnValue(MOCK_OAUTH_FLOW_HANDLER_RESPONSE),
+          queryParams: '',
+          ...overrides,
+        }) as NavigationOptions;
+
+      it('clears showInlineRecoveryKeySetup for send-tab sign-in and navigates to /pair', async () => {
+        const navigationOptions = createSendTabNavigationOptions({
+          integration: createMockSigninOAuthNativeSyncIntegration(),
+          queryParams: '?service=sync&entrypoint=send-tab-toolbar-icon',
+          showInlineRecoveryKeySetup: true,
+          handleFxaLogin: true,
+        });
+
+        await handleNavigation(navigationOptions);
+
+        expect(hardNavigateSpy).toHaveBeenCalled();
+        const navigatedUrl = hardNavigateSpy.mock.calls[0][0] as string;
+        expect(navigatedUrl).toContain('/pair?');
+        expect(navigatedUrl).toContain('showSuccessMessage=true');
+        expect(navigatedUrl).not.toContain('inline_recovery_key');
+      });
+
+      it('clears showSignupConfirmedSync for send-tab post-verify and navigates to /pair with passwordCreated', async () => {
+        const navigationOptions = createSendTabNavigationOptions({
+          integration: createMockSigninOAuthNativeSyncIntegration(),
+          queryParams: '?service=sync&entrypoint=send-tab-app-menu',
+          showSignupConfirmedSync: true,
+          origin: 'post-verify-set-password',
+          handleFxaLogin: true,
+        });
+
+        await handleNavigation(navigationOptions);
+
+        expect(hardNavigateSpy).toHaveBeenCalled();
+        const navigatedUrl = hardNavigateSpy.mock.calls[0][0] as string;
+        expect(navigatedUrl).toContain('/pair?');
+        expect(navigatedUrl).toContain('showSuccessMessage=true');
+        expect(navigatedUrl).toContain('passwordCreated=true');
+      });
+    });
   });
 
   describe('ensureCanLinkAcountOrRedirect', () => {
@@ -400,4 +465,69 @@ describe('Signin utils', () => {
       });
     });
   });
+
+  describe('isSendTabEntrypoint', () => {
+    it('returns true for all send-tab entrypoints', () => {
+      for (const entrypoint of SEND_TAB_ENTRYPOINTS) {
+        expect(isSendTabEntrypoint(`?entrypoint=${entrypoint}`)).toBe(true);
+      }
+    });
+
+    it('returns false for non-send-tab entrypoints', () => {
+      expect(isSendTabEntrypoint('?entrypoint=preferences')).toBe(false);
+      expect(isSendTabEntrypoint('?entrypoint=fxa_app_menu')).toBe(false);
+      expect(isSendTabEntrypoint('')).toBe(false);
+      expect(isSendTabEntrypoint('?service=sync')).toBe(false);
+    });
+  });
+
+  describe('getSyncNavigate', () => {
+    it('returns /inline_recovery_key_setup when showInlineRecoveryKeySetup is true', () => {
+      const result = getSyncNavigate('?service=sync', {
+        showInlineRecoveryKeySetup: true,
+      });
+      expect(result.to).toContain('/inline_recovery_key_setup?');
+    });
+
+    it('returns /signup_confirmed_sync when showSignupConfirmedSync is true', () => {
+      const result = getSyncNavigate('?service=sync', {
+        showSignupConfirmedSync: true,
+      });
+      expect(result.to).toContain('/signup_confirmed_sync?');
+    });
+
+    describe('/pair redirect', () => {
+      it('returns /pair with showSuccessMessage by default', () => {
+        const result = getSyncNavigate('?service=sync');
+        expect(result.to).toContain('/pair?');
+        expect(result.to).toContain('showSuccessMessage=true');
+        expect(result.shouldHardNavigate).toBe(true);
+      });
+
+      it('includes signupSuccess param when signupSuccess is true', () => {
+        const result = getSyncNavigate('?service=sync', {
+          signupSuccess: true,
+        });
+        expect(result.to).toContain('/pair?');
+        expect(result.to).toContain('signupSuccess=true');
+        expect(result.to).toContain('showSuccessMessage=true');
+      });
+
+      it('includes passwordCreated param when origin is post-verify-set-password', () => {
+        const result = getSyncNavigate('?service=sync', {
+          origin: 'post-verify-set-password',
+        });
+        expect(result.to).toContain('/pair?');
+        expect(result.to).toContain('passwordCreated=true');
+        expect(result.to).toContain('showSuccessMessage=true');
+      });
+
+      it('does not include passwordCreated for other origins', () => {
+        const result = getSyncNavigate('?service=sync', {
+          origin: 'signup',
+        });
+        expect(result.to).not.toContain('passwordCreated');
+      });
+    });
+  });
 });

packages/fxa-settings/src/pages/Signin/utils.ts

@@ -13,6 +13,7 @@ import {
   useAuthClient,
   isOAuthWebIntegration,
 } from '../../models';
+import { SEND_TAB_ENTRYPOINTS } from '../../constants';
 import { FtlMsgResolver } from 'fxa-react/lib/utils';
 import { useNavigateWithQuery } from '../../lib/hooks/useNavigateWithQuery';
 import { navigate } from '@reach/router';
@@ -45,6 +46,8 @@ interface SyncNavigateOptions {
   isSignInWithThirdPartyAuth?: boolean;
   showSignupConfirmedSync?: boolean;
   syncHidePromoAfterLogin?: boolean;
+  signupSuccess?: boolean;
+  origin?: string;
 }
 
 export function getSyncNavigate(
@@ -54,6 +57,8 @@ export function getSyncNavigate(
     isSignInWithThirdPartyAuth,
     showSignupConfirmedSync,
     syncHidePromoAfterLogin,
+    signupSuccess,
+    origin,
   }: SyncNavigateOptions = {}
 ) {
   const searchParams = new URLSearchParams(queryParams);
@@ -87,6 +92,12 @@ export function getSyncNavigate(
   }
 
   searchParams.set('showSuccessMessage', 'true');
+  if (signupSuccess) {
+    searchParams.set('signupSuccess', 'true');
+  }
+  if (origin === 'post-verify-set-password') {
+    searchParams.set('passwordCreated', 'true');
+  }
   return {
     to: `/pair?${searchParams}`,
     // TODO: don't hard navigate once Pair is converted to React
@@ -207,6 +218,16 @@ export async function handleNavigation(navigationOptions: NavigationOptions) {
     navigationOptions.syncHidePromoAfterLogin = true;
   }
 
+  // Send Tab entrypoints skip intermediate pages (inline recovery key, signup
+  // confirmed sync) and go directly to the /pair choice screen.
+  if (
+    isSendTabEntrypoint(navigationOptions.queryParams) &&
+    integration.isSync()
+  ) {
+    navigationOptions.showInlineRecoveryKeySetup = false;
+    navigationOptions.showSignupConfirmedSync = false;
+  }
+
   // When a session is unverified, we need to redirect to the appropriate page depending on status of
   // the account and the integration being used.
   // There are 3 types of unverified sessions:
@@ -467,13 +488,15 @@ const getNonOAuthNavigationTarget = async (
     redirectTo,
     isSignInWithThirdPartyAuth,
     showSignupConfirmedSync,
+    origin,
   } = navigationOptions;
   if (integration.isSync()) {
     return {
       ...getSyncNavigate(queryParams, {
         showInlineRecoveryKeySetup,
         isSignInWithThirdPartyAuth,
         showSignupConfirmedSync,
+        origin,
       }),
     };
   }
@@ -501,6 +524,7 @@ const getOAuthNavigationTarget = async (
           navigationOptions.isSignInWithThirdPartyAuth,
         showSignupConfirmedSync: navigationOptions.showSignupConfirmedSync,
         syncHidePromoAfterLogin: navigationOptions.syncHidePromoAfterLogin,
+        origin: navigationOptions.origin,
       }),
       locationState,
     };
@@ -556,6 +580,7 @@ const getOAuthNavigationTarget = async (
           navigationOptions.isSignInWithThirdPartyAuth,
         showSignupConfirmedSync: navigationOptions.showSignupConfirmedSync,
         syncHidePromoAfterLogin: navigationOptions.syncHidePromoAfterLogin,
+        origin: navigationOptions.origin,
       }),
       oauthData: {
         code,
@@ -644,3 +669,8 @@ export async function ensureCanLinkAcountOrRedirect({
   }
   return ok;
 }
+
+export function isSendTabEntrypoint(queryParams: string): boolean {
+  const entrypoint = new URLSearchParams(queryParams).get('entrypoint');
+  return entrypoint !== null && SEND_TAB_ENTRYPOINTS.has(entrypoint);
+}