refactor: extract wrapper for shared screen layout

apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx

@@ -2,6 +2,7 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import CircularProgress from '@mui/material/CircularProgress'
 import Stack from '@mui/material/Stack'
+import { SxProps, Theme } from '@mui/material/styles'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -50,7 +51,9 @@ interface ShareItemProps {
   handleCloseMenu?: () => void
   handleKeepMounted?: () => void
   buttonVariant?: 'icon' | 'default'
+  buttonSx?: SxProps<Theme>
   setHasOpenDialog?: (hasOpenDialog: boolean) => void
+  buttonProps?: ComponentProps<typeof Button>
 }
 
 /**
@@ -70,7 +73,8 @@ export function ShareItem({
   handleCloseMenu,
   handleKeepMounted,
   buttonVariant = 'icon',
-  setHasOpenDialog
+  setHasOpenDialog,
+  buttonProps
 }: ShareItemProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
   const { enqueueSnackbar } = useSnackbar()
@@ -124,7 +128,7 @@ export function ShareItem({
         variant={variant}
         label={t('Share')}
         onClick={handleShowMenu}
-        ButtonProps={{ variant: 'contained' }}
+        ButtonProps={{ variant: 'contained', ...buttonProps }}
         icon={buttonVariant === 'icon' ? <ShareIcon /> : undefined}
       />
       <Dialog

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

@@ -131,37 +131,14 @@ jest.mock('./Screens', () => ({
       </button>
     </div>
   ),
-  DoneScreen: ({
-    handleScreenNavigation
-  }: {
-    handleScreenNavigation: (screen: string) => void
-  }) => (
+  DoneScreen: () => (
     <div data-testid="done-screen">
       <h2>Done Screen</h2>
-      <button
-        onClick={() => handleScreenNavigation('language')}
-        data-testid="done-screen-go-to-language"
-      >
-        Go to language
-      </button>
+      <button data-testid="done-screen-go-to-language">Go to language</button>
     </div>
   )
 }))
 
-function renderMultiStepForm(
-  journeyData: Journey,
-  options: { customizableMedia?: boolean } = {}
-): ReturnType<typeof render> {
-  const { customizableMedia = false } = options
-  return render(
-    <FlagsProvider flags={{ ...defaultFlags, customizableMedia }}>
-      <JourneyProvider value={{ journey: journeyData }}>
-        <MultiStepForm />
-      </JourneyProvider>
-    </FlagsProvider>
-  )
-}
-
 describe('MultiStepForm', () => {
   afterEach(() => {
     jest.clearAllMocks()
@@ -789,90 +766,6 @@ describe('MultiStepForm', () => {
       })
     })
 
-    describe('Edit Manually button', () => {
-      it('should hide edit manually button when on the language screen', () => {
-        const journey = {
-          id: 'test-journey-id'
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-
-        const editButton = screen.getByText('Edit Manually')
-        expect(editButton).toHaveStyle('visibility: hidden')
-      })
-
-      it('should show edit manually button when on any screen after the first screen', () => {
-        const journey = {
-          id: 'test-journey-id'
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        const { rerender } = render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey: journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-
-        const editButton = screen.getByText('Edit Manually')
-        expect(editButton).toHaveStyle('visibility: hidden')
-
-        fireEvent.click(screen.getByTestId('language-next'))
-        setRouterQuery({ journeyId: 'test-journey-id', screen: 'social' })
-        rerender(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey: journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-        const editButtonAfterRerender = screen.getByText('Edit Manually')
-        expect(editButtonAfterRerender).toHaveStyle('visibility: visible')
-        expect(editButtonAfterRerender).toHaveAttribute(
-          'href',
-          '/journeys/test-journey-id'
-        )
-      })
-
-      it('should disable edit manually button if journey is not found', () => {
-        const journey = {
-          id: null
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-        expect(screen.getByText('Edit Manually')).toHaveAttribute(
-          'aria-disabled',
-          'true'
-        )
-      })
-    })
-
     describe('progress stepper', () => {
       it('should not render progress stepper when journey has no customization capabilities', async () => {
         const journeyWithNoCapabilities = {
@@ -1176,55 +1069,6 @@ describe('MultiStepForm', () => {
       })
     })
 
-    it('should call router.replace with correct URL when handleScreenNavigation is called', () => {
-      const journeyWithAllCapabilities = {
-        ...journey,
-        journeyCustomizationDescription: 'Hello {{ firstName: John }}!',
-        journeyCustomizationFields: [
-          {
-            id: '1',
-            key: 'firstName',
-            value: 'John',
-            __typename: 'JourneyCustomizationField'
-          }
-        ],
-        blocks: [
-          {
-            __typename: 'ButtonBlock',
-            id: '1',
-            label: 'Test Button',
-            action: {
-              __typename: 'LinkAction',
-              url: 'https://wa.me/123',
-              customizable: true,
-              parentStepId: null
-            }
-          }
-        ]
-      } as unknown as Journey
-
-      const journeyId = journeyWithAllCapabilities.id
-      setRouterQuery({ journeyId, screen: 'done' })
-
-      render(
-        <FlagsProvider flags={defaultFlags}>
-          <SnackbarProvider>
-            <JourneyProvider value={{ journey: journeyWithAllCapabilities }}>
-              <MultiStepForm />
-            </JourneyProvider>
-          </SnackbarProvider>
-        </FlagsProvider>
-      )
-
-      expect(screen.getByTestId('done-screen')).toBeInTheDocument()
-      fireEvent.click(screen.getByTestId('done-screen-go-to-language'))
-
-      expect(mockReplace).toHaveBeenCalledTimes(1)
-      expect(mockReplace).toHaveBeenCalledWith(
-        `/templates/${journeyId}/customize?screen=language`
-      )
-    })
-
     it('should call router.replace with override journey id and next screen when handleNext(overrideJourneyId) is called', () => {
       const journeyWithAllCapabilities = {
         ...journey,

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

@@ -1,16 +1,13 @@
 import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
-import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useUser } from 'next-firebase-auth'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useMemo } from 'react'
 
 import { useJourney } from '@core/journeys/ui/JourneyProvider'
 import { useFlags } from '@core/shared/ui/FlagsProvider'
-import Edit3 from '@core/shared/ui/icons/Edit3'
 
 import {
   CUSTOMIZE_SCREEN_QUERY_KEY,
@@ -38,42 +35,21 @@ export const MULTI_STEP_FORM_MIN_HEIGHT = 900
 
 function renderScreen(
   screen: CustomizationScreen,
-  handleNext: (overrideJourneyId?: string) => void,
-  handleScreenNavigation: (screen: CustomizationScreen) => void
+  handleNext: (overrideJourneyId?: string) => void
 ): ReactElement {
   switch (screen) {
     case 'language':
-      return (
-        <LanguageScreen
-          handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
-        />
-      )
+      return <LanguageScreen handleNext={handleNext} />
     case 'text':
-      return (
-        <TextScreen
-          handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
-        />
-      )
+      return <TextScreen handleNext={handleNext} />
     case 'links':
-      return (
-        <LinksScreen
-          handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
-        />
-      )
+      return <LinksScreen handleNext={handleNext} />
     case 'media':
       return <MediaScreen handleNext={handleNext} />
     case 'social':
-      return (
-        <SocialScreen
-          handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
-        />
-      )
+      return <SocialScreen handleNext={handleNext} />
     case 'done':
-      return <DoneScreen handleScreenNavigation={handleScreenNavigation} />
+      return <DoneScreen />
     default:
       return <></>
   }
@@ -87,7 +63,6 @@ export function MultiStepForm(): ReactElement {
   const { customizableMedia, templateCustomizationGuestFlow } = useFlags()
 
   const journeyId = journey?.id ?? ''
-  const link = `/journeys/${journeyId}`
 
   const {
     screens,
@@ -128,16 +103,11 @@ export function MultiStepForm(): ReactElement {
     )
   }
 
-  async function handleScreenNavigation(
-    screen: CustomizationScreen
-  ): Promise<void> {
-    void router.replace(buildCustomizeUrl(journeyId, screen, undefined))
-  }
-
   return (
     <TemplateVideoUploadProvider>
       <Container
         maxWidth="sm"
+        disableGutters
         sx={{
           width: '100%',
           minHeight: { xs: '100%', sm: MULTI_STEP_FORM_MIN_HEIGHT },
@@ -149,27 +119,7 @@ export function MultiStepForm(): ReactElement {
           overflow: 'hidden'
         }}
       >
-        <Stack gap={{ xs: 6, sm: 6 }} data-testid="MultiStepForm">
-          <NextLink href={link} passHref legacyBehavior>
-            <Button
-              variant="text"
-              color="primary"
-              startIcon={<Edit3 />}
-              sx={{
-                alignSelf: 'flex-end',
-                mr: '4px',
-                fontWeight: 'bold',
-                visibility: activeScreen === 'language' ? 'hidden' : 'visible',
-                '& .MuiButton-startIcon': {
-                  marginRight: 0.3,
-                  marginTop: 1
-                }
-              }}
-              disabled={journey?.id == null}
-            >
-              {t('Edit Manually')}
-            </Button>
-          </NextLink>
+        <Stack gap={{ xs: 8, sm: 17 }} data-testid="MultiStepForm">
           {(hasEditableText ||
             hasCustomizableLinks ||
             hasCustomizableMedia) && (
@@ -180,17 +130,7 @@ export function MultiStepForm(): ReactElement {
               />
             </Box>
           )}
-
-          <Box
-            sx={{
-              alignSelf: 'center',
-              width: '100%',
-              px: '14px',
-              py: { xs: '10px', sm: '24px' }
-            }}
-          >
-            {renderScreen(activeScreen, handleNext, handleScreenNavigation)}
-          </Box>
+          {renderScreen(activeScreen, handleNext)}
         </Stack>
       </Container>
     </TemplateVideoUploadProvider>

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

@@ -128,7 +128,7 @@ describe('DoneScreen', () => {
       </MockedProvider>
     )
 
-    expect(screen.getAllByText('Ready to Share!')).toHaveLength(2)
+    expect(screen.getAllByText('Ready to share!')).toHaveLength(2)
   })
 
   it('renders first card of journey as preview', async () => {