feat(cad): Update CAD pages

mozilla · Sep 25, 2024 · 83ba127 · 83ba127
1 parent 3da291f
commit 83ba127
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 28 deletions.
diff --git a/packages/functional-tests/tests/misc/recoveryKeyPromo.spec.ts b/packages/functional-tests/tests/misc/recoveryKeyPromo.spec.ts
@@ -150,7 +150,7 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await expect(connectAnotherDevice.header).toBeEnabled();
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
     });
 
     test('can setup recovery key inline after email code', async ({
@@ -187,8 +187,8 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await page.waitForURL(/connect_another_device/);
-      await expect(connectAnotherDevice.header).toBeAttached();
+      await page.waitForURL(/pair/);
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
     });
 
     test('can setup recovery key inline after 2FA', async ({
@@ -235,8 +235,8 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.fillOutHint('hint');
       await inlineRecoveryKey.clickFinish();
 
-      await page.waitForURL(/connect_another_device/);
-      await expect(connectAnotherDevice.header).toBeEnabled();
+      await page.waitForURL(/pair/);
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
 
       await settings.goto();
       await settings.disconnectTotp(); // Required before teardown
@@ -266,10 +266,10 @@ test.describe('recovery key promo', () => {
       await inlineRecoveryKey.clickDoItLater();
 
       // User taken to connect another device page
-      await page.waitForURL(/connect_another_device/);
-      await expect(connectAnotherDevice.header).toBeEnabled();
+      await page.waitForURL(/pair/);
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
 
-      await connectAnotherDevice.startBrowsingButton.click();
+      await connectAnotherDevice.clickNotNowPair();
 
       await expect(settings.settingsHeading).toBeVisible();
       await expect(settings.recoveryKey.status).toHaveText('Not Set');

diff --git a/packages/functional-tests/tests/oauth/oauthPromptNone.spec.ts b/packages/functional-tests/tests/oauth/oauthPromptNone.spec.ts
@@ -33,6 +33,7 @@ test.describe('severity-1 #smoke', () => {
       await relier.signInPromptNone();
 
       //Verify error message
+      await page.waitForURL(/authorization/);
       await expect(page.getByText('User is not signed in')).toBeVisible();
     });
 
@@ -118,7 +119,8 @@ test.describe('severity-1 #smoke', () => {
       await page.goto(`${target.relierUrl}/?${query.toString()}`);
       await relier.signInPromptNone();
 
-      //Verify error message
+      // Verify error message
+      await page.waitForURL(/authorization/);
       await expect(page.getByText('User is not signed in')).toBeVisible();
     });
 

diff --git a/packages/functional-tests/tests/react-conversion/signup.spec.ts b/packages/functional-tests/tests/react-conversion/signup.spec.ts
@@ -140,7 +140,7 @@ test.describe('severity-2 #smoke', () => {
       await expect(signup.cannotCreateAccountHeading).toBeVisible();
     });
 
-    test('signup via product page and redirect after confirm', async ({
+    test('signup via product subscription page and redirect after confirm', async ({
       page,
       target,
       pages: { confirmSignupCode, relier, settings, signup, subscribe },

diff --git a/packages/fxa-content-server/app/scripts/templates/pair/index.mustache b/packages/fxa-content-server/app/scripts/templates/pair/index.mustache
@@ -2,7 +2,13 @@
 <div class="card-base">
   <header class="relative">
     {{#showSuccessMessage}}
-      <h2 id="fxa-connected-heading" class="w-full text-md font-bold p-3 my-3 rounded bg-green-500 text-gray-900 text-center">{{#t}}Signed in successfully!{{/t}}</h2>
+      <h2 id="fxa-connected-heading"
+          class="w-full text-md font-bold p-3 my-3 rounded bg-green-500 text-gray-900 flex items-center justify-center">
+        <span class="relative mr-2">
+          <span class="w-6 h-6 rounded-full border-2 border-gray-900 flex items-center justify-center text-gray-900 text-sm font-bold">✓</span>
+        </span>
+        {{#t}}Signed in successfully!{{/t}}
+      </h2>
     {{/showSuccessMessage}}
 
     {{#needsMobileConfirmed}}

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
@@ -61,11 +61,7 @@ const ConnectAnotherDeviceView = FormView.extend({
 
     // If users are signed in, directly access this page (no query params)
     // on desktop, redirect them
-    if (
-      this._isSignedIn() &&
-      window.location.search === '' &&
-      !this.getUserAgent().isMobile()
-    ) {
+    if (this._isSignedIn() && !this.getUserAgent().isMobile()) {
       this.navigate('/pair');
     }
   },

diff --git a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.test.tsx b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.test.tsx
@@ -61,14 +61,14 @@ describe('InlineRecoveryKeySetup', () => {
     });
   });
 
-  it('clicks `do it later` navigates to `connect_another_device`', async () => {
+  it('clicks `do it later` navigates to `pair`', async () => {
     renderWithLocalizationProvider(<Subject />);
     await act(async () => {
       fireEvent.click(await screen.findByText('Do it later'));
     });
     expect(ReactUtils.hardNavigate).toHaveBeenCalledWith(
-      '/connect_another_device',
-      {},
+      '/pair',
+      { showSuccessMessage: false },
       true
     );
     expect(

diff --git a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
@@ -35,7 +35,7 @@ export const InlineRecoveryKeySetup = ({
     // We do a hard navigate because this page is still in the content server, this
     // also keeps all query params so that correct metrics are emitted
     // but does not show the signed into FF success message
-    hardNavigate('/connect_another_device', {}, true);
+    hardNavigate('/pair', { showSuccessMessage: false }, true);
     return <></>;
   };
 
@@ -52,8 +52,7 @@ export const InlineRecoveryKeySetup = ({
             <RecoveryKeySetupHint
               {...{ viewName }}
               navigateForward={() => {
-                // Navigate to CAD without success messaging
-                hardNavigate('/connect_another_device', {}, true);
+                hardNavigate('/pair', { showSuccessMessage: false }, true);
               }}
               updateRecoveryKeyHint={updateRecoveryHintHandler}
             />

diff --git a/packages/fxa-settings/src/pages/Signin/CompleteSignin/container.test.tsx b/packages/fxa-settings/src/pages/Signin/CompleteSignin/container.test.tsx
@@ -83,11 +83,7 @@ describe('CompleteSignin container', () => {
 
       expect(screen.getByText('Validating sign-in…')).toBeInTheDocument();
       await waitFor(() => {
-        expect(ReactUtils.hardNavigate).toHaveBeenCalledWith(
-          '/connect_another_device',
-          {},
-          true
-        );
+        expect(ReactUtils.hardNavigate).toHaveBeenCalledWith('/pair', {}, true);
       });
     });
 

diff --git a/packages/fxa-settings/src/pages/Signin/CompleteSignin/container.tsx b/packages/fxa-settings/src/pages/Signin/CompleteSignin/container.tsx
@@ -74,7 +74,7 @@ const CompleteSigninContainer = (_: RouteComponentProps) => {
     // TODO in FXA-9132 - Add metrics event
     // Backbone had 'verification.success' and 'signin.success';
 
-    hardNavigate('/connect_another_device', {}, true);
+    hardNavigate('/pair', {}, true);
   };
 
   if (validationError) {