Merge pull request #14935 from mozilla/FXA-6498-signup_verified--func…

…tionality feat(fxa-settings): setup signup_confirmed in react app
mozilla · Mar 1, 2023 · a853ed4 · a853ed4
2 parents 8f1547e + a0e919f
commit a853ed4
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 16 deletions.
diff --git a/packages/fxa-content-server/app/scripts/lib/router.js b/packages/fxa-content-server/app/scripts/lib/router.js
@@ -361,15 +361,29 @@ Router = Router.extend({
       type: VerificationReasons.SIGN_IN,
     }),
     'signup(/)': createViewHandler(SignUpPasswordView),
-    'signup_confirmed(/)': createViewHandler(ReadyView, {
-      type: VerificationReasons.SIGN_UP,
-    }),
+    'signup_confirmed(/)': function () {
+      this.createReactOrBackboneViewHandler(
+        'signup_confirmed',
+        ReadyView,
+        null,
+        {
+          type: VerificationReasons.SIGN_UP,
+        }
+      );
+    },
     'signup_permissions(/)': createViewHandler(PermissionsView, {
       type: VerificationReasons.SIGN_UP,
     }),
-    'signup_verified(/)': createViewHandler(ReadyView, {
-      type: VerificationReasons.SIGN_UP,
-    }),
+    'signup_verified(/)': function () {
+      this.createReactOrBackboneViewHandler(
+        'signup_verified',
+        ReadyView,
+        null,
+        {
+          type: VerificationReasons.SIGN_UP,
+        }
+      );
+    },
     'subscriptions/products/:productId': createViewHandler(
       SubscriptionsProductRedirectView
     ),

diff --git a/packages/fxa-content-server/server/lib/amplitude.js b/packages/fxa-content-server/server/lib/amplitude.js
@@ -101,6 +101,12 @@ const EVENTS = {
     event: 'signup_code_submit',
   },
 
+  // Signup confirmed metrics
+  'screen.signup-confirmed': {
+    group: GROUPS.registration,
+    event: 'signup_confirmed_view',
+  },
+
   // Add account recovery key metrics, on `post_verify/account_recovery/*`
   'screen.add-recovery-key': {
     group: GROUPS.activity,

diff --git a/packages/fxa-content-server/server/lib/routes/react-app/index.js b/packages/fxa-content-server/server/lib/routes/react-app/index.js
@@ -55,7 +55,11 @@ const getReactRouteGroups = (showReactApp, reactRoute) => {
 
     signUpRoutes: {
       featureFlagOn: showReactApp.signUpRoutes,
-      routes: [reactRoute.getRoute('primary_email_verified')],
+      routes: reactRoute.getRoutes([
+        'primary_email_verified',
+        'signup_confirmed',
+        'signup_verified',
+      ]),
     },
 
     pairRoutes: {

diff --git a/packages/fxa-settings/src/components/App/index.tsx b/packages/fxa-settings/src/components/App/index.tsx
@@ -24,6 +24,7 @@ import PrimaryEmailVerified from '../../pages/Signup/PrimaryEmailVerified';
 import CompleteResetPassword from '../../pages/ResetPassword/CompleteResetPassword';
 import ResetPasswordConfirmed from '../../pages/ResetPassword/ResetPasswordConfirmed';
 import AccountRecoveryConfirmKey from '../../pages/ResetPassword/AccountRecoveryConfirmKey';
+import SignupConfirmed from '../../pages/Signup/SignupConfirmed';
 
 export const App = ({
   flowQueryParams,
@@ -69,6 +70,14 @@ export const App = ({
                 Page={PrimaryEmailVerified}
                 path="/primary_email_verified/*"
               />
+              <PageWithLoggedInStatusState
+                Page={SignupConfirmed}
+                path="/signup_verified/*"
+              />
+              <PageWithLoggedInStatusState
+                Page={SignupConfirmed}
+                path="/signup_confirmed/*"
+              />
             </>
           )}
           <Settings path="/settings/*" {...{ flowQueryParams }} />

diff --git a/packages/fxa-settings/src/lib/gql.ts b/packages/fxa-settings/src/lib/gql.ts
@@ -13,6 +13,8 @@ const pagesViewableWithoutAuthentication = [
   'primary_email_confirmed',
   'reset_password_verified',
   'reset_password_with_recovery_key_verified',
+  'signup_verified',
+  'signup_confirmed',
 ];
 
 export const errorHandler: ErrorHandler = ({ graphQLErrors, networkError }) => {

diff --git a/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.stories.tsx b/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.stories.tsx
@@ -4,7 +4,6 @@
 
 import React from 'react';
 import SignupConfirmed from '.';
-import AppLayout from '../../../components/AppLayout';
 import { LocationProvider } from '@reach/router';
 import { Meta } from '@storybook/react';
 import { withLocalization } from '../../../../.storybook/decorators';
@@ -17,16 +16,12 @@ export default {
 
 export const DefaultSignedIn = () => (
   <LocationProvider>
-    <AppLayout>
-      <SignupConfirmed isSignedIn />
-    </AppLayout>
+    <SignupConfirmed isSignedIn />
   </LocationProvider>
 );
 
 export const DefaultSignedOut = () => (
   <LocationProvider>
-    <AppLayout>
-      <SignupConfirmed isSignedIn={false} />
-    </AppLayout>
+    <SignupConfirmed isSignedIn={false} />
   </LocationProvider>
 );
diff --git a/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.test.tsx b/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.test.tsx
@@ -9,7 +9,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import SignupConfirmed, { viewName } from '.';
 import { logViewEvent, usePageViewEvent } from '../../../lib/metrics';
 import { REACT_ENTRYPOINT } from '../../../constants';
-import { MozServices } from '../../../lib/types';
 
 jest.mock('../../../lib/metrics', () => ({
   logViewEvent: jest.fn(),

diff --git a/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.tsx b/packages/fxa-settings/src/pages/Signup/SignupConfirmed/index.tsx
@@ -5,6 +5,7 @@
 import React from 'react';
 import { RouteComponentProps } from '@reach/router';
 import Ready from '../../../components/Ready';
+import AppLayout from '../../../components/AppLayout';
 import { MozServices } from '../../../lib/types';
 
 type SignupConfirmedProps = {
@@ -20,7 +21,9 @@ const SignupConfirmed = ({
   isSignedIn,
   serviceName,
 }: SignupConfirmedProps & RouteComponentProps) => (
-  <Ready {...{ continueHandler, isSignedIn, viewName, serviceName }} />
+  <AppLayout>
+    <Ready {...{ continueHandler, isSignedIn, viewName, serviceName }} />
+  </AppLayout>
 );
 
 export default SignupConfirmed;