fix(split-layout): Pass setCurrentSplitLayout to ResetPassword to prevent navigation split layout blips

Because:
* Navigating from a page with split layout to a page without, like from signin to reset password, keeps the transition screens with loading spinner set to 'split layout', causing visual blips of split layout while going through the reset PW flow

This commit:
* Passes setCurrentSplitLayout on the reset PW page to reset split layout back to a non-split layout

closes FXA-13245

Author: LZoog

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

@@ -568,7 +568,7 @@ const AuthAndAccountSetupRoutes = ({
         {/* Reset password */}
         <ResetPasswordContainer
           path="/reset_password/*"
-          {...{ flowQueryParams, serviceName }}
+          {...{ flowQueryParams, serviceName, setCurrentSplitLayout }}
         />
         <ConfirmResetPasswordContainer
           path="/confirm_reset_password/*"

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/container.tsx

@@ -15,6 +15,7 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 const ResetPasswordContainer = ({
   flowQueryParams = {},
   serviceName,
+  setCurrentSplitLayout,
 }: ResetPasswordContainerProps & RouteComponentProps) => {
   const authClient = useAuthClient();
   const ftlMsgResolver = useFtlMsgResolver();
@@ -49,6 +50,7 @@ const ResetPasswordContainer = ({
         requestResetPasswordCode,
         serviceName,
         setErrorMessage,
+        setCurrentSplitLayout,
       }}
     />
   );

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx

@@ -25,6 +25,7 @@ const ResetPassword = ({
   requestResetPasswordCode,
   serviceName,
   setErrorMessage,
+  setCurrentSplitLayout,
 }: ResetPasswordProps & RouteComponentProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -81,7 +82,7 @@ const ResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout {...{ setCurrentSplitLayout }}>
       <FtlMsg id="password-reset-flow-heading">
         <h1 className="card-header">Reset your password</h1>
       </FtlMsg>

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/interfaces.ts

@@ -8,13 +8,21 @@ import { MozServices } from '../../../lib/types';
 export interface ResetPasswordContainerProps {
   flowQueryParams?: QueryParams;
   serviceName: MozServices;
+  setCurrentSplitLayout: (value: boolean) => void;
 }
 
 export interface ResetPasswordProps {
   errorMessage?: string;
   requestResetPasswordCode: (email: string) => Promise<void>;
   serviceName: MozServices;
   setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
+  /**
+   * Although Reset Password does not use the split layout, navigating from
+   * a page that does (like signin) causes split layout to be shown during
+   * page transitions. We "reset" the layout by passing this value in on
+   * the first reset PW screen (/reset_password).
+   */
+  setCurrentSplitLayout: (value: boolean) => void;
 }
 
 export interface ResetPasswordFormData {

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/mocks.tsx

@@ -24,6 +24,7 @@ export const Subject = ({
           serviceName,
           requestResetPasswordCode,
           setErrorMessage,
+          setCurrentSplitLayout: () => {},
         }}
       />
     </LocationProvider>