Refactor FormContinueButton to use Continue text if children are not …

…passed
Gary-Community-Ventures · Oct 2, 2024 · e469a29 · e469a29
1 parent 7e126cf
commit e469a29
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/src/Components/ContinueButton/FormContinueButton.tsx b/src/Components/ContinueButton/FormContinueButton.tsx
@@ -1,10 +1,11 @@
 import { Button } from '@mui/material';
 import { PropsWithChildren } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 const FormContinueButton = ({ children }: PropsWithChildren) => {
   return (
     <Button variant="contained" type="submit">
-      {children}
+      {children ?? <FormattedMessage id="continueButton" defaultMessage="Continue" />}
     </Button>
   );
 };

diff --git a/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx b/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx
@@ -4,14 +4,13 @@ import { FormattedMessageType } from '../../Types/Questions';
 
 type PrevAndContinueButtonsProps = {
   backNavigationFunction: () => void;
-  formContinueButtonFM: FormattedMessageType;
 };
 
-const PrevAndContinueButtons = ({ backNavigationFunction, formContinueButtonFM }: PrevAndContinueButtonsProps) => {
+const PrevAndContinueButtons = ({ backNavigationFunction }: PrevAndContinueButtonsProps) => {
   return (
     <div className="question-buttons">
       <PreviousButton navFunction={backNavigationFunction} />
-      <FormContinueButton formattedMessage={formContinueButtonFM} />
+      <FormContinueButton />
     </div>
   );
 };

diff --git a/src/Components/Steps/SelectLanguagePage.tsx b/src/Components/Steps/SelectLanguagePage.tsx
@@ -79,7 +79,7 @@ const SelectLanguagePage = () => {
             {createMenuItems(languageOptions, 'selectLang.disabledSelectMenuItemText', 'Select a language')}
           </Select>
         </FormControl>
-        <div style={{marginTop: '1rem'}}>
+        <div style={{ marginTop: '1rem' }}>
           <FormContinueButton>
             <FormattedMessage id="continueButton-getStarted" defaultMessage="Get Started" />
           </FormContinueButton>

diff --git a/src/Components/Steps/ZipcodeStep.tsx b/src/Components/Steps/ZipcodeStep.tsx
@@ -174,10 +174,7 @@ export const ZipcodeStep = () => {
             </FormControl>
           </div>
         )}
-        <PrevAndContinueButtons
-          backNavigationFunction={backNavigationFunction}
-          formContinueButtonFM={<FormattedMessage id="continueButton" defaultMessage="Continue" />}
-        />
+        <PrevAndContinueButtons backNavigationFunction={backNavigationFunction} />
       </form>
     </div>
   );