feat(cad): Update CAD pages

mozilla · Sep 23, 2024 · 83f6e2e · 83f6e2e
1 parent 8dab06e
commit 83f6e2e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 34 deletions.
diff --git a/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache b/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache
@@ -18,7 +18,7 @@
     {{/isSignedIn}}
   {{/showSuccessMessage}}
   <section>
-    <div class="{{graphicId}}" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
+    <div class="bg-image-triple-device-hearts" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
     {{#showSuccessMessage}}
       {{#isSignedIn}}
         {{#isFirefoxDesktop}}
@@ -65,33 +65,10 @@
           {{/isSignedIn}}
         </p>
       {{/isFirefoxDesktop}}
-      {{#isFirefoxIos}}
-        <!-- user verifies in Fx for iOS, assume they are not signed in -->
-        <p id="signin-fxios">
-          {{#t}}Still adding devices? Sign in to Firefox on another device to complete set-up{{/t}}
-        </p>
-      {{/isFirefoxIos}}
-      {{#isOtherAndroid}}
-        <!-- Another android browser, encourage Fx for Android installation -->
-        <p id="install-mobile-firefox-android">
-          {{#t}}Sign in to Firefox for Android to complete set-up{{/t}}
-        </p>
-      {{/isOtherAndroid}}
-      {{#isOtherIos}}
-        <!-- Safari or Chrome for iOS, encourage installation of Fx -->
-        <p id="install-mobile-firefox-ios">
-          {{#t}}Sign in to Firefox for iOS to complete set-up{{/t}}
-        </p>
-      {{/isOtherIos}}
-      {{#isOther}}
-        <!-- probably some desktop browser -->
-        <p id="install-mobile-firefox-other">
-          {{#isSignIn}}
-            {{#t}}Still adding devices?{{/t}}
-          {{/isSignIn}}
-          {{#t}}Sign in to Firefox on another device to complete set-up{{/t}}
-        </p>
-      {{/isOther}}
+
+      {{#isMobileAndSignedIn}}
+        {{{ unsupportedPairHtml }}}
+      {{/isMobileAndSignedIn}}
 
       {{^isFirefoxDesktop}}
         <div class="marketing-area"></div>

diff --git a/packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache b/packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache
@@ -25,7 +25,7 @@
     {{#isMobile}}
       {{#isSystemCameraUrl}}
         <div class="bg-image-pair-fail"></div>
-          <h2 id="pair-unsupported-header" class="card-header" tabindex="-1">{{#t}}Pair using an app{{/t}}</h1>
+          <h2 id="pair-unsupported-header" class="card-header" tabindex="-1">{{#t}}Pair using an app{{/t}}</h2>
         <p class="mt-4">{{#t}}Did you use the system camera? You must pair from within a Firefox app.{{/t}}</p>
       {{/isSystemCameraUrl}}
       {{^isSystemCameraUrl}}
@@ -37,11 +37,9 @@
         {{/isFirefox}}
 
         <div class="bg-image-triple-device-hearts" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
+        {{{ unsupportedPairHtml }}}
 
-        <h1 class="card-header">{{#t}}Connecting your mobile device with your Mozilla account{{/t}}</h1>
-        <p class="mt-4 text-base">Open Firefox on your computer, visit <b class="whitespace-nowrap">firefox.com/pair</b>, and follow the on-screen instructions to connect your mobile device.</p>
-        <p class="mt-3"><a href="https://support.mozilla.org/kb/how-do-i-set-sync-my-computer" target="_blank" class="link-blue" data-glean-id="cad_redirect_mobile_learn_more">{{#t}}Learn more{{/t}}</a></p>
-      {{/isSystemCameraUrl}}
+        {{/isSystemCameraUrl}}
     {{/isMobile}}
     {{^isMobile}}
       {{^isDesktopNonFirefox}}

diff --git a/packages/fxa-content-server/app/scripts/templates/partial/unsupported-pair.mustache b/packages/fxa-content-server/app/scripts/templates/partial/unsupported-pair.mustache
@@ -0,0 +1,5 @@
+<h1 class="card-header">{{#t}}Connecting your mobile device with your Mozilla account{{/t}}</h1>
+<p class="mt-4 text-base">Open Firefox on your computer, visit <b class="whitespace-nowrap">firefox.com/pair</b>, and
+  follow the on-screen instructions to connect your mobile device.</p>
+<p class="mt-3"><a href="https://support.mozilla.org/kb/how-do-i-set-sync-my-computer" target="_blank" class="link-blue"
+                   data-glean-id="cad_redirect_mobile_learn_more">{{#t}}Learn more{{/t}}</a></p>
diff --git a/packages/fxa-content-server/app/scripts/views/connect_another_device.js b/packages/fxa-content-server/app/scripts/views/connect_another_device.js
@@ -22,6 +22,7 @@ import MarketingMixin from './mixins/marketing-mixin';
 import PairingGraphicsMixin from './mixins/pairing-graphics-mixin';
 import SyncAuthMixin from './mixins/sync-auth-mixin';
 import VerificationReasonMixin from './mixins/verification-reason-mixin';
+import UnsupportedPairTemplate from '../templates/partial/unsupported-pair.mustache';
 
 const entrypoints = Object.keys(Constants)
   .filter((k) => k.endsWith('_ENTRYPOINT'))
@@ -192,7 +193,9 @@ const ConnectAnotherDeviceView = FormView.extend({
       isSignIn,
       isSignUp,
       pairingUrl,
+      isMobileAndSignedIn: this.getUserAgent().isMobile() && this._isSignedIn(),
       showSuccessMessage,
+      unsupportedPairHtml: this.renderTemplate(UnsupportedPairTemplate),
     });
   },
 

diff --git a/packages/fxa-content-server/app/scripts/views/pair/unsupported.js b/packages/fxa-content-server/app/scripts/views/pair/unsupported.js
@@ -8,6 +8,7 @@ import Template from '../../templates/pair/unsupported.mustache';
 import GleanMetrics from '../../lib/glean';
 import UserAgentMixin from '../../lib/user-agent-mixin';
 import UrlMixin from 'lib/url-mixin';
+import UnsupportedPairTemplate from '../../templates/partial/unsupported-pair.mustache';
 
 class PairUnsupportedView extends FormView {
   template = Template;
@@ -53,6 +54,7 @@ class PairUnsupportedView extends FormView {
       isSystemCameraUrl,
       escapedMobileDownloadLink,
       showCADHeader: !(isMobile && !isSystemCameraUrl),
+      unsupportedPairHtml: this.renderTemplate(UnsupportedPairTemplate),
     });
   }
 }

diff --git a/packages/fxa-settings/src/pages/Signin/utils.ts b/packages/fxa-settings/src/pages/Signin/utils.ts
@@ -42,7 +42,7 @@ export function getSyncNavigate(
 
   searchParams.set('showSuccessMessage', 'true');
   return {
-    to: `/connect_another_device?${searchParams}`,
+    to: `/pair?${searchParams}`,
     shouldHardNavigate: true,
   };
 }