fix: unify customization flow next step button styling

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/CustomizeFlowNextButton.spec.tsx

@@ -0,0 +1,101 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { CustomizeFlowNextButton } from './CustomizeFlowNextButton'
+
+describe('CustomizeFlowNextButton', () => {
+  const defaultProps = {
+    label: 'New Next Button'
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render the button with default props', () => {
+    render(<CustomizeFlowNextButton {...defaultProps} />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('type', 'button')
+    expect(button).not.toBeDisabled()
+    expect(screen.getByText('New Next Button')).toBeInTheDocument()
+  })
+
+  it('should render button end adornment', () => {
+    render(<CustomizeFlowNextButton {...defaultProps} />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should render as disabled when disabled prop is true', () => {
+    render(<CustomizeFlowNextButton {...defaultProps} disabled />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button).toBeDisabled()
+  })
+
+  it('should render with submit type when type is submit', () => {
+    render(<CustomizeFlowNextButton {...defaultProps} type="submit" />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button).toHaveAttribute('type', 'submit')
+  })
+
+  it('should render with form attribute when form prop is provided', () => {
+    render(<CustomizeFlowNextButton {...defaultProps} form="test-form" />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button).toHaveAttribute('form', 'test-form')
+  })
+
+  it('should handle empty string label', () => {
+    render(<CustomizeFlowNextButton label="" />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    expect(button).toBeInTheDocument()
+
+    const typography = button.querySelector('.MuiTypography-root')
+    expect(typography).toBeInTheDocument()
+    expect(typography).toHaveTextContent('')
+  })
+
+  it('should call onClick handler when clicked', () => {
+    const handleClick = jest.fn()
+    render(<CustomizeFlowNextButton {...defaultProps} onClick={handleClick} />)
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    fireEvent.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call onClick when disabled', () => {
+    const handleClick = jest.fn()
+    render(
+      <CustomizeFlowNextButton
+        {...defaultProps}
+        onClick={handleClick}
+        disabled
+      />
+    )
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    fireEvent.click(button)
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('should not call onClick when loading', () => {
+    const handleClick = jest.fn()
+    render(
+      <CustomizeFlowNextButton
+        {...defaultProps}
+        onClick={handleClick}
+        loading
+      />
+    )
+
+    const button = screen.getByTestId('CustomizeFlowNextButton')
+    fireEvent.click(button)
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/CustomizeFlowNextButton.tsx

@@ -0,0 +1,63 @@
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { SxProps, Theme } from '@mui/material/styles'
+import { ReactElement } from 'react'
+
+import ArrowRightIcon from '@core/shared/ui/icons/ArrowRight'
+
+import {
+  BUTTON_NEXT_STEP_WIDTH,
+  BUTTON_NEXT_STEP_HEIGHT
+} from '../../utils/sharedStyles'
+
+interface CustomizeFlowNextButtonProps {
+  label: string
+  loading?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit'
+  form?: string
+  ariaLabel?: string
+  onClick?: () => void
+  sx?: SxProps<Theme>
+}
+
+export const CustomizeFlowNextButton = ({
+  label,
+  loading = false,
+  disabled = false,
+  type = 'button',
+  form,
+  ariaLabel,
+  onClick,
+  sx = {}
+}: CustomizeFlowNextButtonProps): ReactElement => {
+  return (
+    <Button
+      variant="contained"
+      color="secondary"
+      type={type}
+      form={form}
+      onClick={onClick}
+      loading={loading}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      data-testid="CustomizeFlowNextButton"
+      sx={{
+        width: BUTTON_NEXT_STEP_WIDTH,
+        height: BUTTON_NEXT_STEP_HEIGHT,
+        alignSelf: 'center',
+        mt: { xs: 6, sm: 4 },
+        borderRadius: 2,
+        ...sx
+      }}
+    >
+      <Stack direction="row" alignItems="center" gap={1}>
+        <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
+          {label}
+        </Typography>
+        <ArrowRightIcon sx={{ fontSize: 24 }} />
+      </Stack>
+    </Button>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/CustomizeFlowNextButton/index.ts

@@ -0,0 +1 @@
+export { CustomizeFlowNextButton } from './CustomizeFlowNextButton'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx

@@ -127,9 +127,7 @@ describe('DoneScreen', () => {
       </MockedProvider>
     )
 
-    expect(screen.getAllByRole('heading', { level: 1 })[0]).toHaveTextContent(
-      "It's Ready!"
-    )
+    expect(screen.getAllByText("It's Ready!")).toHaveLength(2)
   })
 
   it('renders journey preview card with title and description', () => {

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx

@@ -2,7 +2,6 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import dynamic from 'next/dynamic'
 import NextImage from 'next/image'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -31,9 +30,8 @@ export function DoneScreen({
   }
 
   return (
-    <Stack alignItems="center" sx={{ pb: 4, px: 4 }}>
+    <Stack alignItems="center" sx={{ pb: 4, px: { xs: 4, sm: 18 } }}>
       <Typography
-        component="h1"
         variant="h4"
         gutterBottom
         display={{ xs: 'none', sm: 'block' }}
@@ -42,7 +40,6 @@ export function DoneScreen({
         {t("It's Ready!")}
       </Typography>
       <Typography
-        component="h1"
         variant="h6"
         display={{ xs: 'block', sm: 'none' }}
         gutterBottom
@@ -53,7 +50,7 @@ export function DoneScreen({
       <Typography
         color="text.secondary"
         align="center"
-        variant="h6"
+        variant="subtitle2"
         display={{ xs: 'none', sm: 'block' }}
         sx={{
           maxWidth: { xs: '100%', sm: '90%' }

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx

@@ -157,7 +157,7 @@ describe('LanguageScreen', () => {
         'Team One'
       )
     )
-    fireEvent.click(screen.getByTestId('LanguageScreenSubmitButton'))
+    fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
     await waitFor(() =>
       expect(mockJourneyDuplicateMockResult).toHaveBeenCalled()
     )
@@ -274,7 +274,7 @@ describe('LanguageScreen', () => {
       fireEvent.click(screen.getByRole('option', { name: 'Spanish' }))
     )
 
-    fireEvent.click(screen.getByTestId('LanguageScreenSubmitButton'))
+    fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
     await waitFor(() =>
       expect(mockJourneyDuplicateMockResult).toHaveBeenCalled()
     )
@@ -320,7 +320,7 @@ describe('LanguageScreen', () => {
         'Team One'
       )
     )
-    fireEvent.click(screen.getByTestId('LanguageScreenSubmitButton'))
+    fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
     await waitFor(() =>
       expect(mockJourneyDuplicateMockResult).toHaveBeenCalled()
     )
@@ -421,9 +421,9 @@ describe('LanguageScreen', () => {
       expect(screen.getByRole('combobox', { name: 'Team' })).toBeInTheDocument()
     })
 
-    expect(screen.getByTestId('LanguageScreenSubmitButton')).toBeInTheDocument()
-    expect(screen.getByTestId('LanguageScreenSubmitButton')).toHaveTextContent(
-      'Next Step'
+    expect(screen.getByTestId('CustomizeFlowNextButton')).toBeInTheDocument()
+    expect(screen.getByTestId('CustomizeFlowNextButton')).toHaveTextContent(
+      'Next'
     )
   })
 

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx

@@ -1,4 +1,3 @@
-import Button from '@mui/material/Button'
 import FormControl from '@mui/material/FormControl'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
@@ -13,18 +12,14 @@ import { object, string } from 'yup'
 import { useJourney } from '@core/journeys/ui/JourneyProvider'
 import { useTeam } from '@core/journeys/ui/TeamProvider'
 import { useJourneyDuplicateMutation } from '@core/journeys/ui/useJourneyDuplicateMutation'
-import ArrowRightIcon from '@core/shared/ui/icons/ArrowRight'
 
 import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
 import { useGetChildTemplateJourneyLanguages } from '../../../../../libs/useGetChildTemplateJourneyLanguages'
 import { useGetParentTemplateJourneyLanguages } from '../../../../../libs/useGetParentTemplateJourneyLanguages'
 import { LanguageAutocomplete } from '@core/shared/ui/LanguageAutocomplete'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { SocialImage } from '@core/journeys/ui/TemplateView/TemplateViewHeader/SocialImage'
-import {
-  BUTTON_NEXT_STEP_WIDTH,
-  BUTTON_NEXT_STEP_HEIGHT
-} from '../../../utils/sharedStyles'
+import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 
 interface LanguageScreenProps {
   handleNext: () => void
@@ -170,12 +165,21 @@ export function LanguageScreen({
         >
           {t("Let's get started!")}
         </Typography>
-        <Typography variant="h6" color="text.secondary" align="center">
+        <Typography
+          variant="subtitle2"
+          color="text.secondary"
+          align="center"
+          display={{ xs: 'none', sm: 'block' }}
+        >
           {t('A few quick edits and your template will be ready to share.')}
         </Typography>
       </Stack>
       <SocialImage />
-      <Typography variant="h6" gutterBottom sx={{ mb: { xs: 0, sm: 2 } }}>
+      <Typography
+        variant="subtitle2"
+        gutterBottom
+        sx={{ mb: { xs: 0, sm: 2 } }}
+      >
         {journey?.title ?? ''}
       </Typography>
       <Formik
@@ -226,34 +230,12 @@ export function LanguageScreen({
                   {t('Select a team')}
                 </Typography>
                 {isSignedIn && <JourneyCustomizeTeamSelect />}
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  disabled={loading}
+                <CustomizeFlowNextButton
+                  label={t('Next')}
                   onClick={() => handleSubmit()}
-                  data-testid="LanguageScreenSubmitButton"
-                  sx={{
-                    width: BUTTON_NEXT_STEP_WIDTH,
-                    height: BUTTON_NEXT_STEP_HEIGHT,
-                    alignSelf: 'center',
-                    mt: { xs: 6, sm: 4 },
-                    borderRadius: '8px'
-                  }}
-                >
-                  <Stack direction="row" alignItems="center" gap={1}>
-                    <Typography
-                      sx={{
-                        fontWeight: 'bold',
-                        display: { xs: 'none', sm: 'block' }
-                      }}
-                    >
-                      {t('Next Step')}
-                    </Typography>
-                    <ArrowRightIcon
-                      sx={{ fontSize: { xs: '24px', sm: '16px' } }}
-                    />
-                  </Stack>
-                </Button>
+                  disabled={loading}
+                  ariaLabel={t('Next')}
+                />
               </Stack>
             </FormControl>
           </Form>

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx

@@ -112,7 +112,7 @@ describe('LinksScreen', () => {
   //   const chatInput = within(chatGroup).getByRole('textbox') as HTMLInputElement
   //   fireEvent.change(chatInput, { target: { value: 'wa.me/999' } })
 
-  //   fireEvent.click(screen.getByRole('button', { name: 'Replace the links' }))
+  //   fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
   //   await waitFor(() =>
   //     expect(screen.getByText('Enter a valid URL')).toBeInTheDocument()
   //   )
@@ -133,7 +133,7 @@ describe('LinksScreen', () => {
       )
     })
 
-    fireEvent.click(screen.getByRole('button', { name: 'Replace the links' }))
+    fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
     await waitFor(() => expect(handleNext).toHaveBeenCalled())
   })
 
@@ -310,7 +310,7 @@ describe('LinksScreen', () => {
     // const chatInput = within(chatGroup).getByRole('textbox') as HTMLInputElement
     // fireEvent.change(chatInput, { target: { value: 'https://wa.me/999' } })
 
-    fireEvent.click(screen.getByRole('button', { name: 'Replace the links' }))
+    fireEvent.click(screen.getByTestId('CustomizeFlowNextButton'))
 
     await waitFor(() => {
       expect(linkUpdateMock.result).toHaveBeenCalled()