fix: remove edit manually button

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 
@@ -789,90 +789,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 = {

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,
@@ -87,7 +84,6 @@ export function MultiStepForm(): ReactElement {
   const { customizableMedia, templateCustomizationGuestFlow } = useFlags()
 
   const journeyId = journey?.id ?? ''
-  const link = `/journeys/${journeyId}`
 
   const {
     screens,
@@ -150,26 +146,6 @@ export function MultiStepForm(): ReactElement {
         }}
       >
         <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>
           {(hasEditableText ||
             hasCustomizableLinks ||
             hasCustomizableMedia) && (

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

@@ -16,6 +16,7 @@ import Play3Icon from '@core/shared/ui/icons/Play3'
 
 import { ShareItem } from '../../../../Editor/Toolbar/Items/ShareItem'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 interface DoneScreenProps {
   handleScreenNavigation?: (screen: CustomizationScreen) => void
@@ -40,48 +41,12 @@ export function DoneScreen({
 
   return (
     <Stack alignItems="center" sx={{ pb: 4, px: { xs: 4, sm: 18 } }}>
-      <Typography
-        variant="h4"
-        gutterBottom
-        display={{ xs: 'none', sm: 'block' }}
-        sx={{ mb: { xs: 0, sm: 2 } }}
+      <ScreenWrapper
+        title={t('Ready to Share!')}
+        subtitle={t('Share your unique link on any platform.')}
+        headerSx={{ pb: { xs: 4, sm: 6 } }}
       >
-        {t('Ready to Share!')}
-      </Typography>
-      <Typography
-        variant="h6"
-        display={{ xs: 'block', sm: 'none' }}
-        gutterBottom
-        sx={{ mb: { xs: 0, sm: 2 } }}
-      >
-        {t('Ready to Share!')}
-      </Typography>
-      <Typography
-        color="text.secondary"
-        align="center"
-        variant="subtitle2"
-        display={{ xs: 'none', sm: 'block' }}
-        sx={{
-          maxWidth: { xs: '100%', sm: '90%' },
-          pb: 6
-        }}
-      >
-        {t('Share your unique link on any platform.')}
-      </Typography>
-      <Typography
-        color="text.secondary"
-        align="center"
-        variant="body2"
-        display={{ xs: 'block', sm: 'none' }}
-        sx={{
-          maxWidth: { xs: '100%', sm: '90%' },
-          pb: 4
-        }}
-      >
-        {t('Share your unique link on any platform.')}
-      </Typography>
-
-      {steps.length > 0 && (
+        {steps.length > 0 && (
         <TemplateCardPreviewItem step={steps[0]} variant="preview" />
       )}
 
@@ -131,6 +96,7 @@ export function DoneScreen({
           {t('Go To Projects Dashboard')}
         </Typography>
       </Button>
+      </ScreenWrapper>
     </Stack>
   )
 }