Merge pull request #18843 from mozilla/fxa-11614

feat(reg): remove newsletters from reg form, autofocus set password

Author: vbudhram

packages/fxa-settings/src/components/ChooseNewsletters/index.stories.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import ChooseNewsletters from '.';
 import AppLayout from '../AppLayout';
 import { Meta } from '@storybook/react';
-import { Subject } from './mocks';
+import { SubjectWithNewsletters, SubjectWithNone } from './mocks';
 import { withLocalization } from 'fxa-react/lib/storybooks';
 
 export default {
@@ -15,10 +15,18 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-export const Default = () => {
+export const DefaultNone = () => {
   return (
     <AppLayout>
-      <Subject />
+      <SubjectWithNone />
+    </AppLayout>
+  );
+};
+
+export const DefaultLetters = () => {
+  return (
+    <AppLayout>
+      <SubjectWithNewsletters />
     </AppLayout>
   );
 };

packages/fxa-settings/src/components/ChooseNewsletters/index.test.tsx

@@ -7,21 +7,27 @@ import { screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
 import { FluentBundle } from '@fluent/bundle';
-import { Subject } from './mocks';
-import { newsletters } from './newsletters';
+import { SubjectWithNewsletters, SubjectWithNone } from './mocks';
 
 describe('ChooseNewsletters component', () => {
   let bundle: FluentBundle;
   beforeAll(async () => {
     bundle = await getFtlBundle('settings');
   });
   it('renders newsletter options as expected', async () => {
-    renderWithLocalizationProvider(<Subject />);
+    renderWithLocalizationProvider(<SubjectWithNewsletters />);
     testAllL10n(screen, bundle);
 
     screen.getByText('Get more from Mozilla:');
 
     const checkboxes = await screen.findAllByRole('checkbox');
-    expect(checkboxes).toHaveLength(newsletters.length);
+    expect(checkboxes).toHaveLength(1);
+  });
+
+  it('does not render with empty newletters', async () => {
+    renderWithLocalizationProvider(<SubjectWithNone />);
+    expect(
+      screen.queryByText('Get more from Mozilla:')
+    ).not.toBeInTheDocument();
   });
 });

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

@@ -30,6 +30,10 @@ const ChooseNewsletters = ({
       });
     };
 
+  if (newsletters.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <FtlMsg id="choose-newsletters-prompt-2">

packages/fxa-settings/src/components/ChooseNewsletters/mocks.tsx

@@ -6,7 +6,25 @@ import React, { useState } from 'react';
 import ChooseNewsletters from '.';
 import { newsletters } from './newsletters';
 
-export const Subject = () => {
+export const SubjectWithNewsletters = () => {
+  const [, setSelected] = useState<string[]>([]);
+
+  const newsletters = [
+    {
+      label: 'Early access to test new products',
+      slug: ['test-pilot'],
+      ftlId: 'choose-newsletters-option-test-pilot',
+    },
+  ];
+  return (
+    <ChooseNewsletters
+      {...{ newsletters }}
+      setSelectedNewsletterSlugs={setSelected}
+    />
+  );
+};
+
+export const SubjectWithNone = () => {
   const [, setSelected] = useState<string[]>([]);
 
   return (

packages/fxa-settings/src/components/ChooseNewsletters/newsletters.ts

@@ -14,20 +14,22 @@ export type Newsletter = {
   ftlId: string;
 };
 
-export const newsletters: Newsletter[] = [
-  {
-    label: 'Get our latest news and product updates',
-    slug: ['mozilla-and-you', 'mozilla-accounts'],
-    ftlId: 'choose-newsletters-option-latest-news',
-  },
-  {
-    label: 'Action alerts to reclaim the internet',
-    slug: ['mozilla-foundation'],
-    ftlId: 'choose-newsletters-option-reclaim-the-internet',
-  },
-  {
-    label: 'Early access to test new products',
-    slug: ['test-pilot'],
-    ftlId: 'choose-newsletters-option-test-pilot',
-  },
-];
+/**
+ * Example newsletters:
+ *   [{
+ *     label: 'Get our latest news and product updates',
+ *     slug: ['mozilla-and-you', 'mozilla-accounts'],
+ *     ftlId: 'choose-newsletters-option-latest-news',
+ *   },
+ *   {
+ *     label: 'Action alerts to reclaim the internet',
+ *     slug: ['mozilla-foundation'],
+ *     ftlId: 'choose-newsletters-option-reclaim-the-internet',
+ *   },
+ *   {
+ *     label: 'Early access to test new products',
+ *     slug: ['test-pilot'],
+ *     ftlId: 'choose-newsletters-option-test-pilot',
+ *   }]
+ */
+export const newsletters: Newsletter[] = [];

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

@@ -95,6 +95,7 @@ export const FormPasswordWithBalloons = ({
     useState<string>();
   const [srOnlyConfirmPwdFeedbackMessage, setSROnlyConfirmPwdFeedbackMessage] =
     useState<string>();
+  const [emitEngageEvent, setEmitEngageEvent] = useState<boolean>(false);
 
   const ftlMsgResolver = useFtlMsgResolver();
   const localizedPasswordMatchError = ftlMsgResolver.getMsg(
@@ -154,13 +155,31 @@ export const FormPasswordWithBalloons = ({
     setSROnlyConfirmPwdFeedbackMessage('');
     setPasswordMatchErrorText('');
     if (!hasNewPwdFocused) {
-      if (onFocusMetricsEvent) {
-        onFocusMetricsEvent();
-      }
       setHasNewPwdFocused(true);
     }
   };
 
+  // We are currently on React form hook V6 and this version
+  // does not expose any focus methods. Upgrading is major refactor
+  // so instead we pass an optional `inputRefDOM` that can
+  // trigger focus and click events.
+  const newPasswordRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus the new password input on mount
+  useEffect(() => {
+    if (newPasswordRef.current) {
+      newPasswordRef.current.focus();
+      newPasswordRef.current.click();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (hasUserTakenAction && onFocusMetricsEvent && !emitEngageEvent) {
+      onFocusMetricsEvent();
+      setEmitEngageEvent(true);
+    }
+  }, [hasUserTakenAction, onFocusMetricsEvent, emitEngageEvent]);
+
   const onNewPwdBlur = () => {
     // do not hide the password strength balloon if there are errors in the new password
     if (!errors.newPassword) {
@@ -326,6 +345,7 @@ export const FormPasswordWithBalloons = ({
                   },
                 },
               })}
+              inputRefDOM={newPasswordRef}
               prefixDataTestId="new-password"
               aria-describedby="password-requirements"
             />

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

@@ -8,7 +8,9 @@ import { ReactComponent as OpenEye } from './eye-open.svg';
 import { ReactComponent as ClosedEye } from './eye-closed.svg';
 import { useFtlMsgResolver } from '../../models';
 
-export type InputPasswordProps = Omit<InputTextProps, 'type'>;
+export type InputPasswordProps = Omit<InputTextProps, 'type'> & {
+  inputRefDOM?: React.RefObject<HTMLInputElement>;
+};
 
 export const InputPassword = ({
   defaultValue,
@@ -20,6 +22,7 @@ export const InputPassword = ({
   onFocusCb,
   onBlurCb,
   inputRef,
+  inputRefDOM,
   hasErrors,
   errorText,
   name,
@@ -69,6 +72,7 @@ export const InputPassword = ({
         aria-describedby=""
         isPasswordInput={true}
         {...{
+          inputRefDOM,
           defaultValue,
           disabled,
           label,

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

@@ -24,6 +24,7 @@ export type InputTextProps = {
   className?: string;
   inputOnlyClassName?: string;
   inputRef?: Ref<HTMLInputElement>;
+  inputRefDOM?: Ref<HTMLInputElement>;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onFocusCb?: () => void;
   onBlurCb?: () => void;
@@ -63,6 +64,7 @@ export const InputText = ({
   className = '',
   inputOnlyClassName = '',
   inputRef,
+  inputRefDOM,
   type = 'text',
   name,
   prefixDataTestId = '',
@@ -117,6 +119,20 @@ export const InputText = ({
     return prefixDataTestId ? `${prefixDataTestId}-${id}` : id;
   }
 
+  const combinedRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      if (inputRefDOM) {
+        (
+          inputRefDOM as React.MutableRefObject<HTMLInputElement | null>
+        ).current = element;
+      }
+      if (inputRef && typeof inputRef === 'function') {
+        inputRef(element);
+      }
+    },
+    [inputRef, inputRefDOM]
+  );
+
   return (
     <label
       className={classNames(
@@ -157,7 +173,8 @@ export const InputText = ({
           )}
           data-testid={formatDataTestId('input-field')}
           onChange={textFieldChange}
-          ref={inputRef}
+          ref={combinedRef}
+          // ref={inputRef}
           {...{
             name,
             disabled,

packages/fxa-settings/src/components/Settings/PageSecondaryEmailAdd/index.tsx

@@ -17,7 +17,7 @@ export const PageSecondaryEmailAdd = (_: RouteComponentProps) => {
   const [saveBtnDisabled, setSaveBtnDisabled] = useState(true);
   const [errorText, setErrorText] = useState<string>();
   const [email, setEmail] = useState<string>();
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRefDOM = useRef<HTMLInputElement>(null);
   const { l10n } = useLocalization();
 
   const subtitleText = l10n.getString(
@@ -60,10 +60,11 @@ export const PageSecondaryEmailAdd = (_: RouteComponentProps) => {
 
   const checkEmail = useCallback(
     (ev: ChangeEvent<HTMLInputElement>) => {
-      const email = inputRef.current?.value || '';
+      const email = inputRefDOM.current?.value || '';
       const isValid = isEmailValid(email);
+      
       setSaveBtnDisabled(!isValid);
-      setEmail(inputRef.current?.value);
+      setEmail(inputRefDOM.current?.value);
       setErrorText('');
 
       if (isEmailMask(email)) {
@@ -86,7 +87,7 @@ export const PageSecondaryEmailAdd = (_: RouteComponentProps) => {
         <form
           onSubmit={(ev) => {
             ev.preventDefault();
-            if (inputRef.current) {
+            if (inputRefDOM.current) {
               createSecondaryEmail(email!);
               logViewEvent('settings.emails', 'submit');
             }
@@ -101,7 +102,8 @@ export const PageSecondaryEmailAdd = (_: RouteComponentProps) => {
                 label="Enter email address"
                 type="email"
                 onChange={checkEmail}
-                {...{ inputRef, errorText }}
+                inputRefDOM={inputRefDOM}
+                {...{ errorText }}
               />
             </Localized>
           </div>