feat(pair): Send Tab variant and origin-driven messaging on /pair, Backbone & React

Because:
* Send Tab entrypoints need a "send some tabs" layout on /pair and /pair/auth/complete
* For new send tab entrypoints, always navigate directly to /pair - #20333 added three /pair success banners via query params, but the React conversion only renders one

This commit:
* getSyncNavigate branches on config.showReactApp.pairRoutes: React soft-navs with locationState.origin; Backbone keeps the hard-nav + query params
* Pair/Index renders all three banner variants above the headings; fixes pair-cad-header to "Connect another device"
* Adds a Send Tab variant to /pair (both apps) with a single H1 "Download or open Firefox on the device where you want to send tabs"
* Adds a Send Tab variant to /pair/auth/complete (both apps) with "You're ready to send some tabs" + dynamic device copy, no CTA
* Adds SEND_TAB_ENTRYPOINTS to fxa-content-server constants

closes FXA-11984
closes FXA-13414

Author: LZoog

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

@@ -130,8 +130,9 @@ test.describe('severity-1 #smoke', () => {
       await confirmSignupCode.fillOutCodeForm(code);
 
       await expect(page).toHaveURL(/pair/);
-      await expect(page).toHaveURL(/signupSuccess=true/);
-      await expect(page).toHaveURL(/showSuccessMessage=true/);
+      await expect(
+        page.getByText('Account created. You’re now syncing.')
+      ).toBeVisible();
       await signup.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
     });
   });

packages/fxa-content-server/app/scripts/lib/constants.js

@@ -174,6 +174,18 @@ module.exports = {
   FIREFOX_TABS_SIDEBAR_ENTRYPOINT: 'tabs-sidebar',
   FIREFOX_FX_VIEW_ENTRYPOINT: 'fx-view',
 
+  // Keep in sync with packages/fxa-settings/src/constants/index.tsx SEND_TAB_ENTRYPOINTS
+  // We're removing all this code soon enough ;)
+  SEND_TAB_ENTRYPOINTS: [
+    'send-tab-tab-context-menu',
+    'send-tab-account-menu',
+    'send-tab-app-menu',
+    'send-tab-firefox-view-three-dots',
+    'send-tab-link-context-menu',
+    'send-tab-page-context-menu',
+    'send-tab-toolbar-icon',
+  ],
+
   // This is compared against all secondary email
   // records, both verified and unverified
   MAX_SECONDARY_EMAILS: 3,

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

@@ -1,28 +1,50 @@
 <div class="card">
-  <header class="mb-9">
-    <h1 id="pair-auth-complete-header" class="card-header">{{#t}}Device connected{{/t}}</h1>
-  </header>
-
-  <section>
-    <div class="error"></div>
-
-    <div class="{{ graphicId }}" role="img" aria-label="{{#t}}Successfully connected{{/t}}"></div>
-
-    <h2 id="device-os" class="text-base">
-      {{#unsafeTranslate}}
-        You are now syncing with: <span>%(deviceFamily)s on %(deviceOS)s</span>
-      {{/unsafeTranslate}}
-    </h2>
-
-    <p class="my-5">{{#t}}Now you can access your open tabs, passwords, and bookmarks on all your devices.{{/t}}</p>
-
-    <div class="flex">
-      {{#hasFirefoxViewSupport}}
-        <button id="open-firefox-view" class="cta-primary cta-xl">{{#t}}See tabs from synced devices{{/t}}</button>
-      {{/hasFirefoxViewSupport}}
-      {{^hasFirefoxViewSupport}}
-        <button id="open-connected-services" class="cta-primary cta-xl">{{#t}}Manage devices{{/t}}</button>
-      {{/hasFirefoxViewSupport}}
-    </div>
-  </section>
+  {{#isSendTab}}
+    <header class="mb-5">
+      <h1 id="pair-auth-complete-header" class="card-header">{{#t}}You’re ready to send some tabs{{/t}}</h1>
+    </header>
+
+    <section>
+      <div class="error"></div>
+
+      <div class="{{ graphicId }}" role="img" aria-label="{{#t}}Successfully connected{{/t}}"></div>
+
+      <p class="text-sm mt-4">
+        {{#unsafeTranslate}}
+          <span>%(deviceFamily)s for %(deviceOS)s</span> is connected.
+        {{/unsafeTranslate}}
+      </p>
+
+      <p class="text-sm mt-2">{{#t}}You’re free to instantly send open tabs, passwords, and bookmarks between devices.{{/t}}</p>
+    </section>
+  {{/isSendTab}}
+
+  {{^isSendTab}}
+    <header class="mb-9">
+      <h1 id="pair-auth-complete-header" class="card-header">{{#t}}Device connected{{/t}}</h1>
+    </header>
+
+    <section>
+      <div class="error"></div>
+
+      <div class="{{ graphicId }}" role="img" aria-label="{{#t}}Successfully connected{{/t}}"></div>
+
+      <h2 id="device-os" class="text-base">
+        {{#unsafeTranslate}}
+          You are now syncing with: <span>%(deviceFamily)s on %(deviceOS)s</span>
+        {{/unsafeTranslate}}
+      </h2>
+
+      <p class="my-5">{{#t}}Now you can access your open tabs, passwords, and bookmarks on all your devices.{{/t}}</p>
+
+      <div class="flex">
+        {{#hasFirefoxViewSupport}}
+          <button id="open-firefox-view" class="cta-primary cta-xl">{{#t}}See tabs from synced devices{{/t}}</button>
+        {{/hasFirefoxViewSupport}}
+        {{^hasFirefoxViewSupport}}
+          <button id="open-connected-services" class="cta-primary cta-xl">{{#t}}Manage devices{{/t}}</button>
+        {{/hasFirefoxViewSupport}}
+      </div>
+    </section>
+  {{/isSendTab}}
 </div>

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

@@ -28,8 +28,13 @@
     {{/needsMobileConfirmed}}
 
     {{^needsMobileConfirmed}}
-      <h1 class="mb-5 text-grey-400 text-base" id="cad-header">{{#t}}Connect another device{{/t}}</h1>
-      <h2 id="pair-header" class="card-header focus:outline-none" tabindex="-1">{{#t}}Sync your Firefox experience{{/t}}</h2>
+      {{#isSendTab}}
+        <h1 id="pair-header" class="card-header focus:outline-none" tabindex="-1">{{#t}}Download or open Firefox on the device where you want to send tabs{{/t}}</h1>
+      {{/isSendTab}}
+      {{^isSendTab}}
+        <h1 class="mb-5 text-grey-400 text-base" id="cad-header">{{#t}}Connect another device{{/t}}</h1>
+        <h2 id="pair-header" class="card-header focus:outline-none" tabindex="-1">{{#t}}Sync your Firefox experience{{/t}}</h2>
+      {{/isSendTab}}
     {{/needsMobileConfirmed}}
 
     {{#needsMobileConfirmed}}
@@ -41,7 +46,9 @@
     <div class="error"></div>
 
     {{^needsMobileConfirmed}}
-      <p class="my-3 text-base">{{#t}}View your saved passwords, tabs, browsing history and more — across all your devices.{{/t}}</p>
+      {{^isSendTab}}
+        <p class="my-3 text-base">{{#t}}View your saved passwords, tabs, browsing history and more — across all your devices.{{/t}}</p>
+      {{/isSendTab}}
 
       <form novalidate id="form-ask-mobile-status">
         <fieldset>

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

@@ -43,12 +43,18 @@ class PairAuthCompleteView extends FormView {
   setInitialContext(context) {
     const deviceContext = assign({}, this.broker.get('remoteMetaData'));
     const graphicId = this.getGraphicsId();
+    const entrypoint =
+      (this.relier && this.relier.get && this.relier.get('entrypoint')) ||
+      this.getSearchParam('entrypoint');
+    const isSendTab =
+      !!entrypoint && Constants.SEND_TAB_ENTRYPOINTS.indexOf(entrypoint) !== -1;
 
     context.set({
       graphicId,
       deviceFamily: deviceContext.family,
       deviceOS: deviceContext.OS,
       hasFirefoxViewSupport: this._hasFirefoxViewSupport(),
+      isSendTab,
     });
   }
 

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

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import Cocktail from 'cocktail';
+import Constants from '../../lib/constants';
 import { MARKETING_ID_AUTUMN_2016, SYNC_SERVICE } from '../../lib/constants';
 import GleanMetrics from '../../lib/glean';
 import UserAgentMixin from '../../lib/user-agent-mixin';
@@ -187,6 +188,10 @@ class PairIndexView extends FormView {
       }
     }
 
+    const entrypoint = this.getSearchParam('entrypoint');
+    const isSendTab =
+      !!entrypoint && Constants.SEND_TAB_ENTRYPOINTS.indexOf(entrypoint) !== -1;
+
     context.set({
       graphicId,
       needsMobileConfirmed,
@@ -195,6 +200,7 @@ class PairIndexView extends FormView {
       showPasswordCreatedMessage: this.showPasswordCreatedMessage(),
       buttonTextShadowClass,
       tabletBackArrowColor,
+      isSendTab,
     });
   }
 

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

@@ -62,6 +62,7 @@ describe('views/pair/auth_complete', () => {
     view = new View({
       broker,
       notifier,
+      relier,
       user,
       viewName: 'pairAuthComplete',
       window: windowMock,
@@ -93,5 +94,32 @@ describe('views/pair/auth_complete', () => {
         assert.ok(view.$el.find('.bg-image-triple-device-hearts').length);
       });
     });
+
+    it('renders the Send Tab variant when the entrypoint is a send-tab value', () => {
+      relier.set('entrypoint', 'send-tab-toolbar-icon');
+      return view.render().then(() => {
+        assert.equal(
+          view.$el.find('#pair-auth-complete-header').text(),
+          'You’re ready to send some tabs'
+        );
+        assert.include(view.$el.text(), 'Firefox for Windows');
+        assert.include(view.$el.text(), 'is connected.');
+        // No CTA buttons in the Send Tab variant
+        assert.lengthOf(view.$el.find('#open-firefox-view'), 0);
+        assert.lengthOf(view.$el.find('#open-connected-services'), 0);
+        // The "syncing with" heading is suppressed
+        assert.lengthOf(view.$el.find('#device-os'), 0);
+      });
+    });
+
+    it('renders the default variant when entrypoint is not a send-tab value', () => {
+      relier.set('entrypoint', 'preferences');
+      return view.render().then(() => {
+        assert.equal(
+          view.$el.find('#pair-auth-complete-header').text(),
+          'Device connected'
+        );
+      });
+    });
   });
 });

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

@@ -187,6 +187,8 @@ describe('views/pair/index', () => {
         const subheading = view.$('#pair-header');
         assert.strictEqual(subheading.text(), 'Sync your Firefox experience');
         assert.equal(view.$('#pair-header-mobile').length, 0);
+        // Description paragraph should be present in the non-Send-Tab flow.
+        assert.include(view.$el.text(), 'View your saved passwords');
 
         assert.strictEqual(view.$('#form-ask-mobile-status').length, 1);
 
@@ -235,6 +237,30 @@ describe('views/pair/index', () => {
         sinon.assert.calledOnce(viewChoiceEventStub);
       });
 
+      describe('Send Tab variant', () => {
+        beforeEach(() => {
+          view.render.restore && view.render.restore();
+          const origGetSearchParam = view.getSearchParam.bind(view);
+          sinon.stub(view, 'getSearchParam').callsFake((name) => {
+            if (name === 'entrypoint') {
+              return 'send-tab-toolbar-icon';
+            }
+            return origGetSearchParam(name);
+          });
+          return view.render();
+        });
+
+        it('renders the send-tab heading without the grey "Connect another device" text', () => {
+          assert.strictEqual(view.$('#cad-header').length, 0);
+          assert.strictEqual(
+            view.$('#pair-header').text(),
+            'Download or open Firefox on the device where you want to send tabs'
+          );
+          // Description paragraph is suppressed in Send-Tab flow.
+          assert.notInclude(view.$el.text(), 'View your saved passwords');
+        });
+      });
+
       describe('handleRadioEngage', () => {
         let engageChoiceEventStub;
         beforeEach(() => {

packages/fxa-settings/src/components/App/index.tsx

@@ -804,7 +804,7 @@ const AuthAndAccountSetupRoutes = ({
 
         {/* Pairing */}
         <ConnectAnotherDevice path="/connect_another_device/*" />
-        <PairIndex path="/pair/*" />
+        <PairIndex path="/pair/*" integration={integration} />
         <PairSupp path="/pair/supp/*" integration={integration} />
         <PairSuppAllow path="/pair/supp/allow/*" integration={integration} />
         <PairSuppWaitForAuth

packages/fxa-settings/src/lib/utilities.test.ts

@@ -9,13 +9,15 @@ import {
   isBase32Crockford,
   isMobileDevice,
   isValidCmsUrl,
+  isSendTabEntrypoint,
   navigateWithQueryHelper,
   once,
   resetOnce,
   searchParam,
   searchParams,
   toGenericOSName,
 } from './utilities';
+import { SEND_TAB_ENTRYPOINTS } from '../constants';
 
 describe('deepMerge', () => {
   it('recursively merges multiple objects', () => {
@@ -349,3 +351,22 @@ describe('isValidCmsUrl', () => {
     expect(isValidCmsUrl(value as string | null | undefined)).toBe(false);
   });
 });
+
+describe('isSendTabEntrypoint', () => {
+  it('returns true for all send-tab entrypoints', () => {
+    for (const entrypoint of SEND_TAB_ENTRYPOINTS) {
+      expect(isSendTabEntrypoint(entrypoint)).toBe(true);
+    }
+  });
+
+  it('returns false for other entrypoints', () => {
+    expect(isSendTabEntrypoint('preferences')).toBe(false);
+    expect(isSendTabEntrypoint('fxa_app_menu')).toBe(false);
+  });
+
+  it('returns false for nullish values', () => {
+    expect(isSendTabEntrypoint(undefined)).toBe(false);
+    expect(isSendTabEntrypoint(null)).toBe(false);
+    expect(isSendTabEntrypoint('')).toBe(false);
+  });
+});