From e25ddf6cfad960040e84adb68bbae2f97d424b99 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Mon, 2 Mar 2026 04:04:07 +0000
Subject: [PATCH 01/21] refactor: extract ScreenWrapper for shared screen
 layout

Create ScreenWrapper component with responsive title/subtitle and
migrate all 6 customization screens to use it. Fixes MediaScreen
using wrong Typography variants and broken color prop.

Refs: NES-1364

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Screens/DoneScreen/DoneScreen.tsx         |  48 +----
 .../Screens/LanguageScreen/LanguageScreen.tsx | 188 ++++++++----------
 .../Screens/LinksScreen/LinksScreen.tsx       |  57 ++----
 .../Screens/MediaScreen/MediaScreen.tsx       |  50 +++--
 .../Screens/ScreenWrapper/ScreenWrapper.tsx   |  65 ++++++
 .../Screens/ScreenWrapper/index.ts            |   1 +
 .../Screens/SocialScreen/SocialScreen.tsx     |  80 +++-----
 .../Screens/TextScreen/TextScreen.tsx         | 160 ++++++---------
 8 files changed, 290 insertions(+), 359 deletions(-)
 create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
 create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 9fc51812375..9c94fbfbcd3 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/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>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index a1fe586c64c..8eead9c3c37 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -24,6 +24,7 @@ import { useGetParentTemplateJourneyLanguages } from '../../../../../libs/useGet
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { CardsPreview } from '../LinksScreen/CardsPreview'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
 
@@ -168,116 +169,97 @@ export function LanguageScreen({
 
   return (
     <Stack alignItems="center" gap={4} sx={{ px: { xs: 0, sm: 20 } }}>
-      <Stack alignItems="center" sx={{ pb: { xs: 6, sm: 10 } }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{ mb: 2 }}
-        >
-          {t("Let's Get Started!")}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-        >
-          {t('Get Started')}
-        </Typography>
-        <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>
+      <ScreenWrapper
+        title={t("Let's Get Started!")}
+        mobileTitle={t('Get Started')}
+        subtitle={t(
+          'A few quick edits and your template will be ready to share.'
+        )}
+        mobileSubtitle={t("A few quick edits and it's ready to share!")}
+        headerSx={{ pb: { xs: 6, sm: 10 } }}
+      >
         <Typography
           variant="subtitle2"
-          color="text.secondary"
-          align="center"
-          display={{ xs: 'block', sm: 'none' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
         >
-          {t("A few quick edits and it's ready to share!")}
+          {`'${journey?.title ?? ''}'`}
         </Typography>
-      </Stack>
 
-      <Typography
-        variant="subtitle2"
-        gutterBottom
-        sx={{ mb: { xs: 0, sm: 2 } }}
-      >
-        {`'${journey?.title ?? ''}'`}
-      </Typography>
-
-      {steps.length > 0 && <CardsPreview steps={steps} />}
+        {steps.length > 0 && <CardsPreview steps={steps} />}
 
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        enableReinitialize
-        onSubmit={handleSubmit}
-      >
-        {({ handleSubmit, setFieldValue, values }) => (
-          <Form style={{ width: '100%' }}>
-            <FormControl
-              sx={{
-                width: { xs: '100%', sm: FORM_SM_BREAKPOINT_WIDTH },
-                alignSelf: 'center'
-              }}
-            >
-              <Stack gap={2}>
-                <Typography variant="h6" display={{ xs: 'none', sm: 'block' }}>
-                  {t('Select a language')}
-                </Typography>
-                <Typography
-                  variant="body2"
-                  display={{ xs: 'block', sm: 'none' }}
-                >
-                  {t('Select a language')}
-                </Typography>
-                <LanguageAutocomplete
-                  value={values.languageSelect}
-                  languages={languages.map((language) => ({
-                    id: language?.id,
-                    name: language?.name,
-                    slug: language?.slug
-                  }))}
-                  onChange={(value) => setFieldValue('languageSelect', value)}
-                />
-                {isSignedIn && (
-                  <>
-                    <Typography
-                      variant="h6"
-                      display={{ xs: 'none', sm: 'block' }}
-                      sx={{ mt: 4 }}
-                    >
-                      {t('Select a team')}
-                    </Typography>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          enableReinitialize
+          onSubmit={handleSubmit}
+        >
+          {({ handleSubmit, setFieldValue, values }) => (
+            <Form style={{ width: '100%' }}>
+              <FormControl
+                sx={{
+                  width: { xs: '100%', sm: FORM_SM_BREAKPOINT_WIDTH },
+                  alignSelf: 'center'
+                }}
+              >
+                <Stack gap={2}>
+                  <Typography
+                    variant="h6"
+                    display={{ xs: 'none', sm: 'block' }}
+                  >
+                    {t('Select a language')}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    display={{ xs: 'block', sm: 'none' }}
+                  >
+                    {t('Select a language')}
+                  </Typography>
+                  <LanguageAutocomplete
+                    value={values.languageSelect}
+                    languages={languages.map((language) => ({
+                      id: language?.id,
+                      name: language?.name,
+                      slug: language?.slug
+                    }))}
+                    onChange={(value) =>
+                      setFieldValue('languageSelect', value)
+                    }
+                  />
+                  {isSignedIn && (
+                    <>
+                      <Typography
+                        variant="h6"
+                        display={{ xs: 'none', sm: 'block' }}
+                        sx={{ mt: 4 }}
+                      >
+                        {t('Select a team')}
+                      </Typography>
 
-                    <Typography
-                      variant="body2"
-                      display={{ xs: 'block', sm: 'none' }}
-                      sx={{ mt: 4 }}
-                    >
-                      {t('Select a team')}
-                    </Typography>
-                    <JourneyCustomizeTeamSelect />
-                  </>
-                )}
-                <CustomizeFlowNextButton
-                  label={t('Next')}
-                  onClick={() => handleSubmit()}
-                  disabled={
-                    (templateCustomizationGuestFlow && !isSignedIn) || loading
-                  }
-                  ariaLabel={t('Next')}
-                />
-              </Stack>
-            </FormControl>
-          </Form>
-        )}
-      </Formik>
+                      <Typography
+                        variant="body2"
+                        display={{ xs: 'block', sm: 'none' }}
+                        sx={{ mt: 4 }}
+                      >
+                        {t('Select a team')}
+                      </Typography>
+                      <JourneyCustomizeTeamSelect />
+                    </>
+                  )}
+                  <CustomizeFlowNextButton
+                    label={t('Next')}
+                    onClick={() => handleSubmit()}
+                    disabled={
+                      (templateCustomizationGuestFlow && !isSignedIn) || loading
+                    }
+                    ariaLabel={t('Next')}
+                  />
+                </Stack>
+              </FormControl>
+            </Form>
+          )}
+        </Formik>
+      </ScreenWrapper>
     </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index ff41feeb824..f128075d367 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -1,6 +1,5 @@
 import { useMutation } from '@apollo/client'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { Formik, FormikHelpers, FormikProvider } from 'formik'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useMemo } from 'react'
@@ -28,6 +27,7 @@ import { countries } from '../../../../Editor/Slider/Settings/CanvasDetails/Prop
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { getJourneyLinks } from '../../../utils/getJourneyLinks'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { CardsPreview } from './CardsPreview'
 import { LinksForm } from './LinksForm'
@@ -197,49 +197,18 @@ export function LinksScreen({
         width: '100%'
       }}
     >
-      <Stack alignItems="center" sx={{ pb: 1 }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Links')}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Links')}
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          display={{ xs: 'none', sm: 'block' }}
-          color="text.secondary"
-          align="center"
-        >
-          {t(
-            'This content contains buttons linking to external sites. Check them and update the links below.'
-          )}
-        </Typography>
-        <Typography
-          variant="body2"
-          display={{ xs: 'block', sm: 'none' }}
-          color="text.secondary"
-          align="center"
-        >
-          {t(
-            'Buttons here point to external sites. Check and update the links.'
-          )}
-        </Typography>
-      </Stack>
-      <CardsPreview steps={treeBlocks} />
+      <ScreenWrapper
+        title={t('Links')}
+        subtitle={t(
+          'This content contains buttons linking to external sites. Check them and update the links below.'
+        )}
+        mobileSubtitle={t(
+          'Buttons here point to external sites. Check and update the links.'
+        )}
+        headerSx={{ pb: 1 }}
+      >
+        <CardsPreview steps={treeBlocks} />
+      </ScreenWrapper>
       <Formik
         enableReinitialize
         initialValues={links.reduce<Record<string, string>>((acc, link) => {
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
index 2ba8f54673e..6998317b976 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
@@ -1,6 +1,4 @@
-import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useEffect, useState } from 'react'
 
@@ -12,6 +10,7 @@ import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys
 import { getJourneyMedia } from '../../../utils/getJourneyMedia'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { useTemplateVideoUpload } from '../../TemplateVideoUploadProvider'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import {
   CardsSection,
@@ -83,30 +82,29 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
           overflow: { xs: 'visible', sm: 'hidden' }
         }}
       >
-        <Stack gap={3} alignItems="center">
-          <Typography variant="h4" color="text.primary">
-            {t('Media')}
-          </Typography>
-          <Typography variant="body1" color="text.">
-            {t('Personalize and manage your media assets')}
-          </Typography>
-        </Stack>
-        {showLogo && <LogoSection />}
-        <CardsSection
-          customizableSteps={customizableSteps}
-          selectedStep={selectedStep}
-          handleStepClick={handleStepClick}
-        />
-        {showImages && (
-          <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
-        )}
-        {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
-        <CustomizeFlowNextButton
-          label={t('Next')}
-          onClick={() => handleNext()}
-          ariaLabel={t('Next')}
-          loading={hasActiveUploads}
-        />
+        <ScreenWrapper
+          title={t('Media')}
+          subtitle={t('Personalize and manage your media assets')}
+          footer={
+            <CustomizeFlowNextButton
+              label={t('Next')}
+              onClick={() => handleNext()}
+              ariaLabel={t('Next')}
+              loading={hasActiveUploads}
+            />
+          }
+        >
+          {showLogo && <LogoSection />}
+          <CardsSection
+            customizableSteps={customizableSteps}
+            selectedStep={selectedStep}
+            handleStepClick={handleStepClick}
+          />
+          {showImages && (
+            <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
+          )}
+          {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
+        </ScreenWrapper>
       </Stack>
     </Stack>
   )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
new file mode 100644
index 00000000000..5aab822e4bd
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -0,0 +1,65 @@
+import Stack from '@mui/material/Stack'
+import { SxProps, Theme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import { ReactElement, ReactNode } from 'react'
+
+interface ScreenWrapperProps {
+  title: string
+  mobileTitle?: string
+  subtitle: string
+  mobileSubtitle?: string
+  headerSx?: SxProps<Theme>
+  footer?: ReactNode
+  children: ReactNode
+}
+
+export function ScreenWrapper({
+  title,
+  mobileTitle,
+  subtitle,
+  mobileSubtitle,
+  headerSx,
+  footer,
+  children
+}: ScreenWrapperProps): ReactElement {
+  return (
+    <>
+      <Stack alignItems="center" sx={headerSx}>
+        <Typography
+          variant="h4"
+          display={{ xs: 'none', sm: 'block' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          variant="h6"
+          display={{ xs: 'block', sm: 'none' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
+        >
+          {mobileTitle ?? title}
+        </Typography>
+        <Typography
+          variant="subtitle2"
+          display={{ xs: 'none', sm: 'block' }}
+          color="text.secondary"
+          align="center"
+        >
+          {subtitle}
+        </Typography>
+        <Typography
+          variant="body2"
+          display={{ xs: 'block', sm: 'none' }}
+          color="text.secondary"
+          align="center"
+        >
+          {mobileSubtitle ?? subtitle}
+        </Typography>
+      </Stack>
+      {children}
+      {footer}
+    </>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts
new file mode 100644
index 00000000000..dfa2c06cdb7
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts
@@ -0,0 +1 @@
+export { ScreenWrapper } from './ScreenWrapper'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
index d054a95f5bb..ddf431b6261 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
@@ -1,5 +1,4 @@
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement } from 'react'
 
@@ -7,6 +6,7 @@ import { DescriptionEdit } from '../../../../Editor/Slider/Settings/SocialDetail
 import { TitleEdit } from '../../../../Editor/Slider/Settings/SocialDetails/TitleEdit'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { SocialScreenSocialImage } from './SocialScreenSocialImage'
 
@@ -28,56 +28,36 @@ export function SocialScreen({
         px: { xs: 5, sm: 20 }
       }}
     >
-      <Typography
-        variant="h4"
-        gutterBottom
-        display={{ xs: 'none', sm: 'block' }}
+      <ScreenWrapper
+        title={t('Final Details')}
+        subtitle={t(
+          'Customize how your invite appears when shared on social media.'
+        )}
+        mobileSubtitle={t(
+          'This is how your content will appear when shared on social media.'
+        )}
+        footer={
+          <CustomizeFlowNextButton
+            label={t('Done')}
+            onClick={() => handleNext()}
+            ariaLabel={t('Done')}
+          />
+        }
       >
-        {t('Final Details')}
-      </Typography>
-      <Typography
-        variant="h6"
-        gutterBottom
-        display={{ xs: 'block', sm: 'none' }}
-      >
-        {t('Final Details')}
-      </Typography>
-      <Typography
-        variant="subtitle2"
-        color="text.secondary"
-        align="center"
-        sx={{
-          display: { xs: 'none', sm: 'block' }
-        }}
-      >
-        {t('Customize how your invite appears when shared on social media.')}
-      </Typography>
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        align="center"
-        display={{ xs: 'block', sm: 'none' }}
-      >
-        {t('This is how your content will appear when shared on social media.')}
-      </Typography>
-      <Stack
-        alignItems="center"
-        gap={6}
-        data-testid="SocialShareAppearance"
-        sx={{
-          width: '100%',
-          py: 5
-        }}
-      >
-        <SocialScreenSocialImage />
-        <TitleEdit />
-        <DescriptionEdit />
-      </Stack>
-      <CustomizeFlowNextButton
-        label={t('Done')}
-        onClick={() => handleNext()}
-        ariaLabel={t('Done')}
-      />
+        <Stack
+          alignItems="center"
+          gap={6}
+          data-testid="SocialShareAppearance"
+          sx={{
+            width: '100%',
+            py: 5
+          }}
+        >
+          <SocialScreenSocialImage />
+          <TitleEdit />
+          <DescriptionEdit />
+        </Stack>
+      </ScreenWrapper>
     </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index 0c70d8d5e8b..a9256acf9da 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -1,7 +1,6 @@
 import { gql, useMutation } from '@apollo/client'
 import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 
@@ -11,6 +10,7 @@ import { GetJourney_journey_journeyCustomizationFields as JourneyCustomizationFi
 import { JourneyCustomizationFieldUpdate } from '../../../../../../__generated__/JourneyCustomizationFieldUpdate'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 export const JOURNEY_CUSTOMIZATION_FIELD_UPDATE = gql`
   mutation JourneyCustomizationFieldUpdate(
@@ -202,101 +202,71 @@ export function TextScreen({
         width: '100%'
       }}
     >
-      <Stack alignItems="center" sx={{ pb: 4 }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Text')}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Text')}
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          display={{ xs: 'none', sm: 'block' }}
-          color="text.secondary"
-          align="center"
-          sx={{
-            maxWidth: { xs: '100%', sm: '90%' }
-          }}
-        >
-          {t(
-            "Fill out the blue fields and we'll customize the content with your information."
-          )}
-        </Typography>
-        <Typography
-          variant="body2"
-          display={{ xs: 'block', sm: 'none' }}
-          color="text.secondary"
-          align="center"
-          sx={{
-            maxWidth: { xs: '100%', sm: '90%' }
-          }}
-        >
-          {t('Fill in the blue fields to customize the content.')}
-        </Typography>
-      </Stack>
-      <Box sx={{ position: 'relative', width: '100%' }}>
-        <Box
-          sx={{
-            border: '2px solid',
-            borderColor: '#CCCCCC',
-            borderRadius: 3,
-            p: { xs: 4, sm: 5 },
-            minHeight: 150,
-            width: '100%',
-            whiteSpace: 'pre-wrap',
-            overflowY: 'auto',
-            maxHeight: { xs: 'calc(100vh - 323px)', sm: 'calc(100vh - 370px)' },
-            '&::-webkit-scrollbar': {
-              display: 'none'
-            },
-            '-ms-overflow-style': 'none',
-            'scrollbar-width': 'none'
-          }}
-        >
-          {renderEditableText(
-            journey?.journeyCustomizationDescription ?? '',
-            replacementItems,
-            handleValueChange
-          )}
+      <ScreenWrapper
+        title={t('Text')}
+        subtitle={t(
+          "Fill out the blue fields and we'll customize the content with your information."
+        )}
+        mobileSubtitle={t(
+          'Fill in the blue fields to customize the content.'
+        )}
+        headerSx={{ pb: 4 }}
+        footer={
+          <CustomizeFlowNextButton
+            label={t('Next')}
+            onClick={handleSubmit}
+            loading={isSubmitting}
+            ariaLabel={t('Save and continue')}
+          />
+        }
+      >
+        <Box sx={{ position: 'relative', width: '100%' }}>
+          <Box
+            sx={{
+              border: '2px solid',
+              borderColor: '#CCCCCC',
+              borderRadius: 3,
+              p: { xs: 4, sm: 5 },
+              minHeight: 150,
+              width: '100%',
+              whiteSpace: 'pre-wrap',
+              overflowY: 'auto',
+              maxHeight: {
+                xs: 'calc(100vh - 323px)',
+                sm: 'calc(100vh - 370px)'
+              },
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              },
+              '-ms-overflow-style': 'none',
+              'scrollbar-width': 'none'
+            }}
+          >
+            {renderEditableText(
+              journey?.journeyCustomizationDescription ?? '',
+              replacementItems,
+              handleValueChange
+            )}
+          </Box>
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '30px',
+              background:
+                'linear-gradient(to bottom, transparent 0%, white 100%)',
+              pointerEvents: 'none',
+              borderBottomLeftRadius: 12,
+              borderBottomRightRadius: 12,
+              borderLeft: '2px solid #CCCCCC',
+              borderRight: '2px solid #CCCCCC',
+              borderBottom: '2px solid #CCCCCC'
+            }}
+          />
         </Box>
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '30px',
-            background:
-              'linear-gradient(to bottom, transparent 0%, white 100%)',
-            pointerEvents: 'none',
-            borderBottomLeftRadius: 12,
-            borderBottomRightRadius: 12,
-            borderLeft: '2px solid #CCCCCC',
-            borderRight: '2px solid #CCCCCC',
-            borderBottom: '2px solid #CCCCCC'
-          }}
-        />
-      </Box>
-      <CustomizeFlowNextButton
-        label={t('Next')}
-        onClick={handleSubmit}
-        loading={isSubmitting}
-        ariaLabel={t('Save and continue')}
-      />
+      </ScreenWrapper>
     </Stack>
   )
 }

From e381512732d0649ec9bda3aa59bf972db2b8ad70 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 2 Mar 2026 04:08:47 +0000
Subject: [PATCH 02/21] fix: lint issues

---
 .../Screens/DoneScreen/DoneScreen.tsx         | 92 ++++++++++---------
 .../Screens/LanguageScreen/LanguageScreen.tsx |  4 +-
 .../Screens/MediaScreen/MediaScreen.tsx       |  5 +-
 .../Screens/TextScreen/TextScreen.tsx         |  4 +-
 4 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 9c94fbfbcd3..dfed7dbbb01 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -47,55 +47,59 @@ export function DoneScreen({
         headerSx={{ pb: { xs: 4, sm: 6 } }}
       >
         {steps.length > 0 && (
-        <TemplateCardPreviewItem step={steps[0]} variant="preview" />
-      )}
+          <TemplateCardPreviewItem step={steps[0]} variant="preview" />
+        )}
 
-      <Stack
-        gap={4}
-        direction={{ xs: 'column', sm: 'row' }}
-        sx={{
-          width: { xs: '100%', sm: 300 },
-          mt: 6
-        }}
-      >
-        <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Button
-            data-testid="DoneScreenPreviewButton"
-            fullWidth
-            variant="outlined"
-            color="secondary"
-            href={href}
-            component={href != null ? 'a' : 'button'}
-            target={href != null ? '_blank' : undefined}
-            startIcon={<Play3Icon />}
+        <Stack
+          gap={4}
+          direction={{ xs: 'column', sm: 'row' }}
+          sx={{
+            width: { xs: '100%', sm: 300 },
+            mt: 6
+          }}
+        >
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Button
+              data-testid="DoneScreenPreviewButton"
+              fullWidth
+              variant="outlined"
+              color="secondary"
+              href={href}
+              component={href != null ? 'a' : 'button'}
+              target={href != null ? '_blank' : undefined}
+              startIcon={<Play3Icon />}
+              sx={{
+                borderRadius: 3,
+                height: '41px'
+              }}
+            >
+              <Typography variant="subtitle2">{t('Preview')}</Typography>
+            </Button>
+          </Box>
+          <Box
             sx={{
-              borderRadius: 3,
-              height: '41px'
+              flex: 1,
+              minWidth: 0,
+              '& button': { width: '100% !important' }
             }}
           >
-            <Typography variant="subtitle2">{t('Preview')}</Typography>
-          </Button>
-        </Box>
-        <Box
-          sx={{
-            flex: 1,
-            minWidth: 0,
-            '& button': { width: '100% !important' }
-          }}
+            <ShareItem
+              variant="button"
+              journey={journey}
+              buttonVariant="icon"
+            />
+          </Box>
+        </Stack>
+        <Button
+          data-testid="ProjectsDashboardButton"
+          onClick={handleGoToProjectsDashboard}
+          endIcon={<ArrowRightContained1Icon />}
+          sx={{ mt: 4 }}
         >
-          <ShareItem variant="button" journey={journey} buttonVariant="icon" />
-        </Box>
-      </Stack>
-      <Button
-        data-testid="ProjectsDashboardButton"
-        onClick={handleGoToProjectsDashboard}
-        endIcon={<ArrowRightContained1Icon />}
-        sx={{ mt: 4 }}
-      >
-        <Typography variant="subtitle2">
-          {t('Go To Projects Dashboard')}
-        </Typography>
-      </Button>
+          <Typography variant="subtitle2">
+            {t('Go To Projects Dashboard')}
+          </Typography>
+        </Button>
       </ScreenWrapper>
     </Stack>
   )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index 8eead9c3c37..230a294f4b3 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -222,9 +222,7 @@ export function LanguageScreen({
                       name: language?.name,
                       slug: language?.slug
                     }))}
-                    onChange={(value) =>
-                      setFieldValue('languageSelect', value)
-                    }
+                    onChange={(value) => setFieldValue('languageSelect', value)}
                   />
                   {isSignedIn && (
                     <>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
index 6998317b976..cfe7e36cc38 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
@@ -101,7 +101,10 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
             handleStepClick={handleStepClick}
           />
           {showImages && (
-            <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
+            <ImagesSection
+              journey={journey}
+              cardBlockId={selectedCardBlockId}
+            />
           )}
           {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
         </ScreenWrapper>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index a9256acf9da..22bdbbe7e3f 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -207,9 +207,7 @@ export function TextScreen({
         subtitle={t(
           "Fill out the blue fields and we'll customize the content with your information."
         )}
-        mobileSubtitle={t(
-          'Fill in the blue fields to customize the content.'
-        )}
+        mobileSubtitle={t('Fill in the blue fields to customize the content.')}
         headerSx={{ pb: 4 }}
         footer={
           <CustomizeFlowNextButton

From c29484406af00f2f6e88edc43b209e7892f274dd Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Mon, 2 Mar 2026 22:16:23 +0000
Subject: [PATCH 03/21] refactor: remove unused headerSx prop from multiple
 screens

Eliminate the headerSx prop from DoneScreen, LanguageScreen, LinksScreen, and ScreenWrapper components to streamline the code. Update TextScreen to maintain consistent mobileSubtitle formatting.
---
 .../MultiStepForm/Screens/DoneScreen/DoneScreen.tsx   |  1 -
 .../Screens/LanguageScreen/LanguageScreen.tsx         |  1 -
 .../MultiStepForm/Screens/LinksScreen/LinksScreen.tsx |  1 -
 .../Screens/ScreenWrapper/ScreenWrapper.tsx           | 11 ++++-------
 .../MultiStepForm/Screens/TextScreen/TextScreen.tsx   |  5 +++--
 5 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index dfed7dbbb01..6977128cbe9 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -44,7 +44,6 @@ export function DoneScreen({
       <ScreenWrapper
         title={t('Ready to Share!')}
         subtitle={t('Share your unique link on any platform.')}
-        headerSx={{ pb: { xs: 4, sm: 6 } }}
       >
         {steps.length > 0 && (
           <TemplateCardPreviewItem step={steps[0]} variant="preview" />
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index 230a294f4b3..59a70befb7d 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -176,7 +176,6 @@ export function LanguageScreen({
           'A few quick edits and your template will be ready to share.'
         )}
         mobileSubtitle={t("A few quick edits and it's ready to share!")}
-        headerSx={{ pb: { xs: 6, sm: 10 } }}
       >
         <Typography
           variant="subtitle2"
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index f128075d367..789e9be4806 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -205,7 +205,6 @@ export function LinksScreen({
         mobileSubtitle={t(
           'Buttons here point to external sites. Check and update the links.'
         )}
-        headerSx={{ pb: 1 }}
       >
         <CardsPreview steps={treeBlocks} />
       </ScreenWrapper>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
index 5aab822e4bd..72660e215db 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -1,5 +1,4 @@
 import Stack from '@mui/material/Stack'
-import { SxProps, Theme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import { ReactElement, ReactNode } from 'react'
 
@@ -8,7 +7,6 @@ interface ScreenWrapperProps {
   mobileTitle?: string
   subtitle: string
   mobileSubtitle?: string
-  headerSx?: SxProps<Theme>
   footer?: ReactNode
   children: ReactNode
 }
@@ -18,15 +16,14 @@ export function ScreenWrapper({
   mobileTitle,
   subtitle,
   mobileSubtitle,
-  headerSx,
   footer,
   children
 }: ScreenWrapperProps): ReactElement {
   return (
-    <>
-      <Stack alignItems="center" sx={headerSx}>
+    <Stack alignItems="center" data-testid="ScreenWrapper">
+      <Stack alignItems="center" sx={{ pb: { xs: 5, sm: 8 } }}>
         <Typography
-          variant="h4"
+          variant="h3"
           display={{ xs: 'none', sm: 'block' }}
           gutterBottom
           sx={{ mb: { xs: 0, sm: 2 } }}
@@ -60,6 +57,6 @@ export function ScreenWrapper({
       </Stack>
       {children}
       {footer}
-    </>
+    </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index 22bdbbe7e3f..a00a99148ce 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -207,8 +207,9 @@ export function TextScreen({
         subtitle={t(
           "Fill out the blue fields and we'll customize the content with your information."
         )}
-        mobileSubtitle={t('Fill in the blue fields to customize the content.')}
-        headerSx={{ pb: 4 }}
+        mobileSubtitle={t(
+          'Fill in the blue fields to customize the content.'
+        )}
         footer={
           <CustomizeFlowNextButton
             label={t('Next')}

From aed4750df3d128e11b3c9916163a2ea4023d6685 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 2 Mar 2026 22:22:52 +0000
Subject: [PATCH 04/21] fix: lint issues

---
 .../MultiStepForm/Screens/TextScreen/TextScreen.tsx           | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index a00a99148ce..70a3d93e58d 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -207,9 +207,7 @@ export function TextScreen({
         subtitle={t(
           "Fill out the blue fields and we'll customize the content with your information."
         )}
-        mobileSubtitle={t(
-          'Fill in the blue fields to customize the content.'
-        )}
+        mobileSubtitle={t('Fill in the blue fields to customize the content.')}
         footer={
           <CustomizeFlowNextButton
             label={t('Next')}

From 2d84add7dc9fdc78e783f1849c12ac6f00a0d752 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Mon, 2 Mar 2026 22:48:37 +0000
Subject: [PATCH 05/21] feat: add email notification toggle to DoneScreen

Refs: NES-1295

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../NotificationSwitch.spec.tsx               | 15 +++++
 .../NotificationSwitch/NotificationSwitch.tsx | 22 +++++---
 .../Screens/DoneScreen/DoneScreen.spec.tsx    | 56 +++++++++++++++++++
 .../Screens/DoneScreen/DoneScreen.tsx         | 16 ++++++
 4 files changed, 101 insertions(+), 8 deletions(-)

diff --git a/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.spec.tsx b/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.spec.tsx
index 9baa4c9a23f..7cbb5130c32 100644
--- a/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.spec.tsx
+++ b/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.spec.tsx
@@ -55,6 +55,21 @@ describe('NotificationSwitch', () => {
     )
   })
 
+  it('renders without Tooltip when name is not provided', async () => {
+    render(
+      <SnackbarProvider>
+        <MockedProvider>
+          <NotificationSwitch journeyId="journeyId" />
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    fireEvent.mouseOver(screen.getByRole('checkbox'))
+    await waitFor(() =>
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    )
+  })
+
   it('does not update event email notifications when disabled', async () => {
     render(
       <SnackbarProvider>
diff --git a/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.tsx b/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.tsx
index 2196bb9fd4f..103ed3f66fb 100644
--- a/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.tsx
+++ b/apps/journeys-admin/src/components/AccessDialog/NotificationSwitch/NotificationSwitch.tsx
@@ -60,16 +60,22 @@ export function NotificationSwitch({
     }
   }
 
+  const switchElement = (
+    <Box>
+      <Switch
+        inputProps={{ 'aria-checked': checked }}
+        checked={checked}
+        onChange={handleChange}
+        disabled={loading || disabled}
+      />
+    </Box>
+  )
+
+  if (name == null) return switchElement
+
   return (
     <Tooltip title={t('Only {{ name }} can change this', { name })}>
-      <Box>
-        <Switch
-          inputProps={{ 'aria-checked': checked }}
-          checked={checked}
-          onChange={handleChange}
-          disabled={loading || disabled}
-        />
-      </Box>
+      {switchElement}
     </Tooltip>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
index d002acd995b..ca343623a4a 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../../../../../__generated__/globalTypes'
 import { GET_CUSTOM_DOMAINS } from '../../../../../libs/useCustomDomainsQuery/useCustomDomainsQuery'
 import { GET_JOURNEY_FOR_SHARING } from '../../../../../libs/useJourneyForShareLazyQuery/useJourneyForShareLazyQuery'
+import { useJourneyNotifcationUpdateMock } from '../../../../../libs/useJourneyNotificationUpdate/useJourneyNotificationUpdate.mock'
 
 import { DoneScreen } from './DoneScreen'
 
@@ -201,6 +202,61 @@ describe('DoneScreen', () => {
     expect(push).toHaveBeenCalledWith('/')
   })
 
+  it('renders notification section heading and label', () => {
+    render(
+      <SnackbarProvider>
+        <MockedProvider mocks={[getCustomDomainsMock]}>
+          <JourneyProvider value={{ journey, variant: 'admin' }}>
+            <DoneScreen />
+          </JourneyProvider>
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    expect(
+      screen.getByText('Choose where responses go:')
+    ).toBeInTheDocument()
+    expect(screen.getByText('Send to my email')).toBeInTheDocument()
+  })
+
+  it('renders notification switch unchecked by default', () => {
+    render(
+      <SnackbarProvider>
+        <MockedProvider mocks={[getCustomDomainsMock]}>
+          <JourneyProvider value={{ journey, variant: 'admin' }}>
+            <DoneScreen />
+          </JourneyProvider>
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+  })
+
+  it('fires notification update mutation when switch is toggled', async () => {
+    const result = jest
+      .fn()
+      .mockReturnValueOnce(useJourneyNotifcationUpdateMock.result)
+    render(
+      <SnackbarProvider>
+        <MockedProvider
+          mocks={[
+            getCustomDomainsMock,
+            { ...useJourneyNotifcationUpdateMock, result }
+          ]}
+        >
+          <JourneyProvider value={{ journey, variant: 'admin' }}>
+            <DoneScreen />
+          </JourneyProvider>
+        </MockedProvider>
+      </SnackbarProvider>
+    )
+
+    fireEvent.click(screen.getByRole('checkbox'))
+    await waitFor(() => expect(result).toHaveBeenCalled())
+  })
+
   it('opens the share dialog when clicked', async () => {
     const journeyWithTeam = {
       ...journey,
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 6977128cbe9..39d433daf2e 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -14,6 +14,7 @@ import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys
 import ArrowRightContained1Icon from '@core/shared/ui/icons/ArrowRightContained1'
 import Play3Icon from '@core/shared/ui/icons/Play3'
 
+import { NotificationSwitch } from '../../../../AccessDialog/NotificationSwitch'
 import { ShareItem } from '../../../../Editor/Toolbar/Items/ShareItem'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { ScreenWrapper } from '../ScreenWrapper'
@@ -99,6 +100,21 @@ export function DoneScreen({
             {t('Go To Projects Dashboard')}
           </Typography>
         </Button>
+        <Stack gap={2} sx={{ width: '100%', mt: 4 }}>
+          <Typography variant="subtitle1">
+            {t('Choose where responses go:')}
+          </Typography>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="body2">
+              {t('Send to my email')}
+            </Typography>
+            <NotificationSwitch journeyId={journey?.id} />
+          </Stack>
+        </Stack>
       </ScreenWrapper>
     </Stack>
   )

From 7ef0dd656feea06731c58f7ddc3fbc9359287b86 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 2 Mar 2026 22:57:26 +0000
Subject: [PATCH 06/21] fix: lint issues

---
 .../MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx      | 4 +---
 .../MultiStepForm/Screens/DoneScreen/DoneScreen.tsx           | 4 +---
 .../MultiStepForm/Screens/TextScreen/TextScreen.tsx           | 4 +---
 libs/locales/en/apps-journeys-admin.json                      | 2 ++
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
index ca343623a4a..46255259d71 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
@@ -213,9 +213,7 @@ describe('DoneScreen', () => {
       </SnackbarProvider>
     )
 
-    expect(
-      screen.getByText('Choose where responses go:')
-    ).toBeInTheDocument()
+    expect(screen.getByText('Choose where responses go:')).toBeInTheDocument()
     expect(screen.getByText('Send to my email')).toBeInTheDocument()
   })
 
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 39d433daf2e..3af35982aa4 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -109,9 +109,7 @@ export function DoneScreen({
             justifyContent="space-between"
             alignItems="center"
           >
-            <Typography variant="body2">
-              {t('Send to my email')}
-            </Typography>
+            <Typography variant="body2">{t('Send to my email')}</Typography>
             <NotificationSwitch journeyId={journey?.id} />
           </Stack>
         </Stack>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index a00a99148ce..70a3d93e58d 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -207,9 +207,7 @@ export function TextScreen({
         subtitle={t(
           "Fill out the blue fields and we'll customize the content with your information."
         )}
-        mobileSubtitle={t(
-          'Fill in the blue fields to customize the content.'
-        )}
+        mobileSubtitle={t('Fill in the blue fields to customize the content.')}
         footer={
           <CustomizeFlowNextButton
             label={t('Next')}
diff --git a/libs/locales/en/apps-journeys-admin.json b/libs/locales/en/apps-journeys-admin.json
index 2cdb9f03804..42ce8a2bd27 100644
--- a/libs/locales/en/apps-journeys-admin.json
+++ b/libs/locales/en/apps-journeys-admin.json
@@ -1007,6 +1007,8 @@
   "Ready to Share!": "Ready to Share!",
   "Share your unique link on any platform.": "Share your unique link on any platform.",
   "Go To Projects Dashboard": "Go To Projects Dashboard",
+  "Choose where responses go:": "Choose where responses go:",
+  "Send to my email": "Send to my email",
   "Share!": "Share!",
   "{{count}} more cards_one": "{{count}} more cards",
   "{{count}} more cards_other": "{{count}} more cards",

From 141e92fc47e315d972cf69fe629b54daeb685e31 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Wed, 4 Mar 2026 00:44:49 +0000
Subject: [PATCH 07/21] style: ui changes for email

---
 .../Screens/DoneScreen/DoneScreen.tsx         | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 3af35982aa4..9cc95b7b848 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -90,20 +90,29 @@ export function DoneScreen({
             />
           </Box>
         </Stack>
-        <Button
-          data-testid="ProjectsDashboardButton"
-          onClick={handleGoToProjectsDashboard}
-          endIcon={<ArrowRightContained1Icon />}
-          sx={{ mt: 4 }}
+        <Stack
+          gap={6}
+          sx={{
+            width: '100%',
+            mt: 4,
+            border: 2,
+            borderColor: 'divider',
+            borderRadius: 3,
+            p: 5
+          }}
         >
-          <Typography variant="subtitle2">
-            {t('Go To Projects Dashboard')}
-          </Typography>
-        </Button>
-        <Stack gap={2} sx={{ width: '100%', mt: 4 }}>
-          <Typography variant="subtitle1">
+          <Typography
+            variant="subtitle1"
+            display={{ xs: 'none', sm: 'block' }}
+          >
             {t('Choose where responses go:')}
           </Typography>
+          <Typography
+            variant="subtitle1"
+            display={{ xs: 'block', sm: 'none' }}
+          >
+            {t('Choose Response Destination:')}
+          </Typography>
           <Stack
             direction="row"
             justifyContent="space-between"
@@ -113,6 +122,16 @@ export function DoneScreen({
             <NotificationSwitch journeyId={journey?.id} />
           </Stack>
         </Stack>
+        <Button
+          data-testid="ProjectsDashboardButton"
+          onClick={handleGoToProjectsDashboard}
+          endIcon={<ArrowRightContained1Icon />}
+          sx={{ mt: 4 }}
+        >
+          <Typography variant="subtitle2">
+            {t('Go To Projects Dashboard')}
+          </Typography>
+        </Button>
       </ScreenWrapper>
     </Stack>
   )

From 16661914cfd8300593239e0ca47495067fc65762 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Wed, 4 Mar 2026 02:52:14 +0000
Subject: [PATCH 08/21] style: spacing

---
 .../MultiStepForm/Screens/DoneScreen/DoneScreen.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 9cc95b7b848..5ffe264e2f3 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -91,7 +91,7 @@ export function DoneScreen({
           </Box>
         </Stack>
         <Stack
-          gap={6}
+          gap={3}
           sx={{
             width: '100%',
             mt: 4,

From 8be842840fa2fbe6f31c0920690d3b83fbea0f30 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 02:59:43 +0000
Subject: [PATCH 09/21] fix: styling and carousel

---
 .../Toolbar/Items/ShareItem/ShareItem.tsx     |   8 +-
 .../MultiStepForm/MultiStepForm.tsx           |  54 +----
 .../Screens/DoneScreen/DoneScreen.tsx         | 113 +++++-----
 .../Screens/LanguageScreen/LanguageScreen.tsx | 105 +++++-----
 .../LinksScreen/CardsPreview/CardsPreview.tsx |   3 +-
 .../Screens/LinksScreen/CardsPreview/index.ts |   2 +-
 .../Screens/LinksScreen/LinksScreen.tsx       | 197 ++++++++----------
 .../Screens/MediaScreen/MediaScreen.tsx       |  18 --
 .../Sections/CardsSection/CardsSection.tsx    |  11 +-
 .../Screens/ScreenWrapper/ScreenWrapper.tsx   |  13 +-
 .../Screens/SocialScreen/SocialScreen.tsx     |  17 +-
 .../Screens/TextScreen/TextScreen.tsx         | 133 ++++++------
 .../TemplateCardPreview.tsx                   |  22 ++
 .../TemplateCardPreview/index.ts              |   2 +-
 .../templateCardPreviewConfig.ts              |  16 +-
 15 files changed, 331 insertions(+), 383 deletions(-)

diff --git a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx b/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
index 861b5b09d0c..b245f05420c 100644
--- a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
+++ b/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
@@ -17,6 +17,7 @@ import { GetJourneyForSharing_journey as JourneyFromLazyQuery } from '../../../.
 import { JourneyFields as JourneyFromContext } from '../../../../../../__generated__/JourneyFields'
 import { useCustomDomainsQuery } from '../../../../../libs/useCustomDomainsQuery'
 import { Item } from '../Item/Item'
+import { SxProps, Theme } from '@mui/material/styles'
 
 const EmbedJourneyDialog = dynamic(
   async () =>
@@ -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
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 26318601407..06225332216 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -1,8 +1,6 @@
 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'
@@ -10,7 +8,6 @@ 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,
@@ -39,28 +36,24 @@ export const MULTI_STEP_FORM_MIN_HEIGHT = 900
 function renderScreen(
   screen: CustomizationScreen,
   handleNext: (overrideJourneyId?: string) => void,
-  handleScreenNavigation: (screen: CustomizationScreen) => void
 ): ReactElement {
   switch (screen) {
     case 'language':
       return (
         <LanguageScreen
           handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
         />
       )
     case 'text':
       return (
         <TextScreen
           handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
         />
       )
     case 'links':
       return (
         <LinksScreen
           handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
         />
       )
     case 'media':
@@ -69,11 +62,10 @@ function renderScreen(
       return (
         <SocialScreen
           handleNext={handleNext}
-          handleScreenNavigation={handleScreenNavigation}
         />
       )
     case 'done':
-      return <DoneScreen handleScreenNavigation={handleScreenNavigation} />
+      return <DoneScreen />
     default:
       return <></>
   }
@@ -128,16 +120,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 +136,10 @@ 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 +150,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>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 6977128cbe9..aa4cdc4fbb7 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
@@ -15,16 +14,9 @@ import ArrowRightContained1Icon from '@core/shared/ui/icons/ArrowRightContained1
 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
-}
-
-export function DoneScreen({
-  handleScreenNavigation
-}: DoneScreenProps): ReactElement {
+export function DoneScreen(): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
   const { journey } = useJourney()
   const router = useRouter()
@@ -40,55 +32,10 @@ export function DoneScreen({
   }
 
   return (
-    <Stack alignItems="center" sx={{ pb: 4, px: { xs: 4, sm: 18 } }}>
-      <ScreenWrapper
-        title={t('Ready to Share!')}
-        subtitle={t('Share your unique link on any platform.')}
-      >
-        {steps.length > 0 && (
-          <TemplateCardPreviewItem step={steps[0]} variant="preview" />
-        )}
-
-        <Stack
-          gap={4}
-          direction={{ xs: 'column', sm: 'row' }}
-          sx={{
-            width: { xs: '100%', sm: 300 },
-            mt: 6
-          }}
-        >
-          <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Button
-              data-testid="DoneScreenPreviewButton"
-              fullWidth
-              variant="outlined"
-              color="secondary"
-              href={href}
-              component={href != null ? 'a' : 'button'}
-              target={href != null ? '_blank' : undefined}
-              startIcon={<Play3Icon />}
-              sx={{
-                borderRadius: 3,
-                height: '41px'
-              }}
-            >
-              <Typography variant="subtitle2">{t('Preview')}</Typography>
-            </Button>
-          </Box>
-          <Box
-            sx={{
-              flex: 1,
-              minWidth: 0,
-              '& button': { width: '100% !important' }
-            }}
-          >
-            <ShareItem
-              variant="button"
-              journey={journey}
-              buttonVariant="icon"
-            />
-          </Box>
-        </Stack>
+    <ScreenWrapper
+      title={t('Ready to share!')}
+      subtitle={t('Share your unique link on any platform.')}
+      footer={
         <Button
           data-testid="ProjectsDashboardButton"
           onClick={handleGoToProjectsDashboard}
@@ -99,7 +46,53 @@ export function DoneScreen({
             {t('Go To Projects Dashboard')}
           </Typography>
         </Button>
-      </ScreenWrapper>
-    </Stack>
+      }
+    >
+      {steps.length > 0 && (
+        <TemplateCardPreviewItem step={steps[0]} variant="preview" />
+      )}
+
+      <Stack
+        direction={{ xs: 'column', sm: 'row' }}
+        sx={{
+          width: '100%',
+          mt: 6,
+          alignItems: { xs: 'stretch', sm: 'center' },
+          justifyContent: 'center',
+          gap: { xs: 3, sm: 2 }
+        }}
+      >
+        <Button
+          data-testid="DoneScreenPreviewButton"
+          variant="outlined"
+          color="secondary"
+          href={href}
+          component={href != null ? 'a' : 'button'}
+          target={href != null ? '_blank' : undefined}
+          startIcon={<Play3Icon />}
+          sx={{
+            borderWidth: 2,
+            borderRadius: 2,
+            height: 48,
+            width: { xs: '100%', sm: 216 },
+            borderColor: 'secondary.light'
+          }}
+        >
+          <Typography variant="subtitle2">{t('Preview')}</Typography>
+        </Button>
+        <ShareItem
+          variant="button"
+          journey={journey}
+          buttonVariant="icon"
+          buttonProps={{
+            sx: {
+              width: { xs: '100%', sm: 216 },
+              height: 48,
+              borderRadius: 2
+            }
+          }}
+        />
+      </Stack>
+    </ScreenWrapper>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index 59a70befb7d..7d870435534 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -11,8 +11,6 @@ import { object, string } from 'yup'
 import { TreeBlock } from '@core/journeys/ui/block'
 import { useJourney } from '@core/journeys/ui/JourneyProvider'
 import { useTeam } from '@core/journeys/ui/TeamProvider'
-import { TemplateCardPreview } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview'
-import { TemplateCardPreviewItem } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreviewItem'
 import { transformer } from '@core/journeys/ui/transformer'
 import { useJourneyDuplicateMutation } from '@core/journeys/ui/useJourneyDuplicateMutation'
 import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys/ui/useJourneyQuery/__generated__/GetJourney'
@@ -21,21 +19,19 @@ import { LanguageAutocomplete } from '@core/shared/ui/LanguageAutocomplete'
 
 import { useGetChildTemplateJourneyLanguages } from '../../../../../libs/useGetChildTemplateJourneyLanguages'
 import { useGetParentTemplateJourneyLanguages } from '../../../../../libs/useGetParentTemplateJourneyLanguages'
-import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
-import { CardsPreview } from '../LinksScreen/CardsPreview'
+import { CardsPreview, EDGE_FADE_PX } from '../LinksScreen/CardsPreview'
 import { ScreenWrapper } from '../ScreenWrapper'
 
 import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
+import Box from '@mui/material/Box'
 
 interface LanguageScreenProps {
   handleNext: (overrideJourneyId?: string) => void
-  handleScreenNavigation: (screen: CustomizationScreen) => void
 }
 
 export function LanguageScreen({
   handleNext,
-  handleScreenNavigation
 }: LanguageScreenProps): ReactElement {
   const { templateCustomizationGuestFlow } = useFlags()
   const { t } = useTranslation('journeys-ui')
@@ -117,8 +113,6 @@ export function LanguageScreen({
 
   const [journeyDuplicate] = useJourneyDuplicateMutation()
 
-  const FORM_SM_BREAKPOINT_WIDTH = '390px'
-
   function shouldSkipDuplicate(
     journey: {
       template?: boolean | null
@@ -168,40 +162,61 @@ export function LanguageScreen({
   }
 
   return (
-    <Stack alignItems="center" gap={4} sx={{ px: { xs: 0, sm: 20 } }}>
-      <ScreenWrapper
-        title={t("Let's Get Started!")}
-        mobileTitle={t('Get Started')}
-        subtitle={t(
-          'A few quick edits and your template will be ready to share.'
-        )}
-        mobileSubtitle={t("A few quick edits and it's ready to share!")}
-      >
-        <Typography
-          variant="subtitle2"
-          gutterBottom
-          sx={{ mb: { xs: 0, sm: 2 } }}
-        >
-          {`'${journey?.title ?? ''}'`}
-        </Typography>
-
-        {steps.length > 0 && <CardsPreview steps={steps} />}
-
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          enableReinitialize
-          onSubmit={handleSubmit}
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      enableReinitialize
+      onSubmit={handleSubmit}
+    >
+      {({ handleSubmit: formikHandleSubmit, setFieldValue, values }) => (
+        <ScreenWrapper
+          title={t("Let's Get Started!")}
+          mobileTitle={t('Get Started')}
+          subtitle={t(
+            'A few quick edits and your template will be ready to share.'
+          )}
+          mobileSubtitle={t("A few quick edits and it's ready to share!")}
+          footer={
+            <CustomizeFlowNextButton
+              label={t('Next')}
+              onClick={() => formikHandleSubmit()}
+              disabled={
+                (templateCustomizationGuestFlow && !isSignedIn) || loading
+              }
+              ariaLabel={t('Next')}
+            />
+          }
         >
-          {({ handleSubmit, setFieldValue, values }) => (
+          <Stack
+            sx={{
+              width: '100%',
+              alignItems: 'center',
+              gap: { xs: 3, sm: 4 }
+            }}
+          >
+            <Typography
+              variant="subtitle2"
+              gutterBottom
+              sx={{ mb: { xs: 0, sm: 2 } }}
+            >
+              {`'${journey?.title ?? ''}'`}
+            </Typography>
+            <Box
+              sx={{
+                mx: `-${EDGE_FADE_PX}px`,
+                width: `calc(100% + ${EDGE_FADE_PX * 2}px)`
+              }}
+            >
+              {steps.length > 0 && <CardsPreview steps={steps} />}
+            </Box>
             <Form style={{ width: '100%' }}>
               <FormControl
                 sx={{
-                  width: { xs: '100%', sm: FORM_SM_BREAKPOINT_WIDTH },
+                  width: { xs: '100%' },
                   alignSelf: 'center'
                 }}
               >
-                <Stack gap={2}>
+                <Stack gap={2} sx={{ px: { xs: 0 } }}>
                   <Typography
                     variant="h6"
                     display={{ xs: 'none', sm: 'block' }}
@@ -221,7 +236,9 @@ export function LanguageScreen({
                       name: language?.name,
                       slug: language?.slug
                     }))}
-                    onChange={(value) => setFieldValue('languageSelect', value)}
+                    onChange={(value) =>
+                      setFieldValue('languageSelect', value)
+                    }
                   />
                   {isSignedIn && (
                     <>
@@ -243,20 +260,12 @@ export function LanguageScreen({
                       <JourneyCustomizeTeamSelect />
                     </>
                   )}
-                  <CustomizeFlowNextButton
-                    label={t('Next')}
-                    onClick={() => handleSubmit()}
-                    disabled={
-                      (templateCustomizationGuestFlow && !isSignedIn) || loading
-                    }
-                    ariaLabel={t('Next')}
-                  />
                 </Stack>
               </FormControl>
             </Form>
-          )}
-        </Formik>
-      </ScreenWrapper>
-    </Stack>
+          </Stack>
+        </ScreenWrapper>
+      )}
+    </Formik>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/CardsPreview.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/CardsPreview.tsx
index 0bfa7fac69d..1e9b575e458 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/CardsPreview.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/CardsPreview.tsx
@@ -51,7 +51,7 @@ const IFRAME_SCALE = CONTAINER_WIDTH / FRAME_WIDTH
 const CONTAINER_HEIGHT = Math.round(FRAME_HEIGHT * IFRAME_SCALE)
 
 // Spacing and offsets
-const EDGE_FADE_PX = 16
+export const EDGE_FADE_PX = 40
 
 function CardsPreviewItem({ step }: CardsPreviewItemProps): ReactElement {
   const { journey } = useJourney()
@@ -159,6 +159,7 @@ export function CardsPreview({ steps }: CardsPreviewProps): ReactElement {
       slidesPerView="auto"
       spaceBetween={12}
       slidesOffsetBefore={EDGE_FADE_PX}
+      slidesOffsetAfter={EDGE_FADE_PX}
       observer
       observeParents
       sx={{
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/index.ts
index 0330eeabf1f..6e5e3f1a2bf 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/index.ts
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/index.ts
@@ -1 +1 @@
-export { CardsPreview } from './CardsPreview'
+export { CardsPreview, EDGE_FADE_PX } from './CardsPreview'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index 789e9be4806..654f460dacb 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -1,5 +1,4 @@
 import { useMutation } from '@apollo/client'
-import Stack from '@mui/material/Stack'
 import { Formik, FormikHelpers, FormikProvider } from 'formik'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useMemo } from 'react'
@@ -24,7 +23,6 @@ import { useBlockActionLinkUpdateMutation } from '../../../../../libs/useBlockAc
 import { useBlockActionPhoneUpdateMutation } from '../../../../../libs/useBlockActionPhoneUpdateMutation'
 import { JOURNEY_CHAT_BUTTON_UPDATE } from '../../../../Editor/Slider/Settings/CanvasDetails/JourneyAppearance/Chat/ChatOption/Details/Details'
 import { countries } from '../../../../Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/PhoneAction/countriesList'
-import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { getJourneyLinks } from '../../../utils/getJourneyLinks'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { ScreenWrapper } from '../ScreenWrapper'
@@ -34,13 +32,9 @@ import { LinksForm } from './LinksForm'
 
 interface LinksScreenProps {
   handleNext: (overrideJourneyId?: string) => void
-  handleScreenNavigation: (screen: CustomizationScreen) => void
 }
 
-export function LinksScreen({
-  handleNext,
-  handleScreenNavigation
-}: LinksScreenProps): ReactElement {
+export function LinksScreen({ handleNext }: LinksScreenProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
   const { journey } = useJourney()
   const links = useMemo(() => getJourneyLinks(t, journey), [journey])
@@ -189,105 +183,98 @@ export function LinksScreen({
   }
 
   return (
-    <Stack
-      alignItems="center"
-      gap={6}
-      sx={{
-        px: { xs: 2, sm: 18 },
-        width: '100%'
-      }}
+    <Formik
+      enableReinitialize
+      initialValues={links.reduce<Record<string, string>>((acc, link) => {
+        if (link.linkType === 'phone') {
+          const block = journey?.blocks?.find((b) => b.id === link.id)
+          const action =
+            (block as any)?.action?.__typename === 'PhoneAction'
+              ? ((block as any).action as JourneyPhoneAction)
+              : undefined
+          const country =
+            action?.countryCode != null
+              ? countries.find((c) => c.countryCode === action.countryCode)
+              : undefined
+          const callingCode = country?.callingCode ?? '+'
+          const ccDigits = callingCode.replace(/[^\d]/g, '')
+          const prefix = ccDigits === '' ? '' : `+${ccDigits}`
+          const local = (action?.phone ?? '').startsWith(prefix)
+            ? (action?.phone ?? '').slice(prefix.length)
+            : (action?.phone ?? '').replace(/^\+/, '')
+          acc[`${link.id}__cc`] = callingCode
+          acc[`${link.id}__local`] = local
+        } else {
+          acc[link.id] = link.url ?? ''
+        }
+        return acc
+      }, {})}
+      validationSchema={object().shape(
+        links.reduce<Record<string, ReturnType<typeof string>>>(
+          (acc, link) => {
+            if (link.linkType === 'email') {
+              acc[link.id] = string().email(t('Enter a valid email'))
+            } else if (link.linkType === 'phone') {
+              acc[`${link.id}__cc`] = string().test(
+                'valid-cc',
+                t('Enter a valid calling code'),
+                (val) => {
+                  if (val == null || val.trim() === '') return false
+                  const normalized = val.startsWith('+') ? val : `+${val}`
+                  return countries.some((c) => c.callingCode === normalized)
+                }
+              )
+              acc[`${link.id}__local`] = string().test(
+                'valid-local',
+                t('Enter a valid phone number'),
+                (val) =>
+                  val == null ||
+                  val.trim() === '' ||
+                  /^[0-9\s\-()]+$/.test(val.trim())
+              )
+            } else {
+              acc[link.id] = string().url(t('Enter a valid URL'))
+            }
+            return acc
+          },
+          {}
+        )
+      )}
+      validateOnSubmit={false}
+      onSubmit={handleFormSubmit}
+      validateOnMount
     >
-      <ScreenWrapper
-        title={t('Links')}
-        subtitle={t(
-          'This content contains buttons linking to external sites. Check them and update the links below.'
-        )}
-        mobileSubtitle={t(
-          'Buttons here point to external sites. Check and update the links.'
-        )}
-      >
-        <CardsPreview steps={treeBlocks} />
-      </ScreenWrapper>
-      <Formik
-        enableReinitialize
-        initialValues={links.reduce<Record<string, string>>((acc, link) => {
-          if (link.linkType === 'phone') {
-            const block = journey?.blocks?.find((b) => b.id === link.id)
-            const action =
-              (block as any)?.action?.__typename === 'PhoneAction'
-                ? ((block as any).action as JourneyPhoneAction)
-                : undefined
-            const country =
-              action?.countryCode != null
-                ? countries.find((c) => c.countryCode === action.countryCode)
-                : undefined
-            const callingCode = country?.callingCode ?? '+'
-            const ccDigits = callingCode.replace(/[^\d]/g, '')
-            const prefix = ccDigits === '' ? '' : `+${ccDigits}`
-            const local = (action?.phone ?? '').startsWith(prefix)
-              ? (action?.phone ?? '').slice(prefix.length)
-              : (action?.phone ?? '').replace(/^\+/, '')
-            acc[`${link.id}__cc`] = callingCode
-            acc[`${link.id}__local`] = local
-          } else {
-            acc[link.id] = link.url ?? ''
-          }
-          return acc
-        }, {})}
-        validationSchema={object().shape(
-          links.reduce<Record<string, ReturnType<typeof string>>>(
-            (acc, link) => {
-              if (link.linkType === 'email') {
-                acc[link.id] = string().email(t('Enter a valid email'))
-              } else if (link.linkType === 'phone') {
-                acc[`${link.id}__cc`] = string().test(
-                  'valid-cc',
-                  t('Enter a valid calling code'),
-                  (val) => {
-                    if (val == null || val.trim() === '') return false
-                    const normalized = val.startsWith('+') ? val : `+${val}`
-                    return countries.some((c) => c.callingCode === normalized)
-                  }
-                )
-                acc[`${link.id}__local`] = string().test(
-                  'valid-local',
-                  t('Enter a valid phone number'),
-                  (val) =>
-                    val == null ||
-                    val.trim() === '' ||
-                    /^[0-9\s\-()]+$/.test(val.trim())
-                )
-              } else {
-                acc[link.id] = string().url(t('Enter a valid URL'))
-              }
-              return acc
-            },
-            {}
-          )
-        )}
-        validateOnSubmit={false}
-        onSubmit={handleFormSubmit}
-        validateOnMount
-      >
-        {(formik) => (
-          <FormikProvider value={formik}>
+      {(formik) => (
+        <FormikProvider value={formik}>
+          <ScreenWrapper
+            title={t('Links')}
+            subtitle={t(
+              'This content contains buttons linking to external sites. Check them and update the links below.'
+            )}
+            mobileSubtitle={t(
+              'Buttons here point to external sites. Check and update the links.'
+            )}
+            footer={
+              <CustomizeFlowNextButton
+                label={t('Next')}
+                type="submit"
+                form="linksForm"
+                loading={
+                  formik.isSubmitting ||
+                  chatLoading ||
+                  linkLoading ||
+                  emailLoading ||
+                  phoneLoading
+                }
+                ariaLabel={t('Replace the links')}
+              />
+            }
+          >
+            <CardsPreview steps={treeBlocks} />
             <LinksForm links={links} />
-            <CustomizeFlowNextButton
-              label={t('Next')}
-              type="submit"
-              form="linksForm"
-              loading={
-                formik.isSubmitting ||
-                chatLoading ||
-                linkLoading ||
-                emailLoading ||
-                phoneLoading
-              }
-              ariaLabel={t('Replace the links')}
-            />
-          </FormikProvider>
-        )}
-      </Formik>
-    </Stack>
+          </ScreenWrapper>
+        </FormikProvider>
+      )}
+    </Formik>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
index cfe7e36cc38..20b0895071f 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
@@ -1,4 +1,3 @@
-import Stack from '@mui/material/Stack'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useEffect, useState } from 'react'
 
@@ -67,21 +66,6 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
     setSelectedCardBlockId(getCardBlockIdFromStep(step))
   }
   return (
-    <Stack
-      alignItems="center"
-      sx={{
-        width: '100%',
-        px: { xs: 0, sm: 3.5 }
-      }}
-    >
-      <Stack
-        gap={4}
-        sx={{
-          width: '100%',
-          px: { xs: 0, sm: 10 },
-          overflow: { xs: 'visible', sm: 'hidden' }
-        }}
-      >
         <ScreenWrapper
           title={t('Media')}
           subtitle={t('Personalize and manage your media assets')}
@@ -108,7 +92,5 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
           )}
           {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
         </ScreenWrapper>
-      </Stack>
-    </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
index c23b32ec903..220dfe02ce7 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
@@ -7,6 +7,7 @@ import { ReactElement } from 'react'
 import { TreeBlock } from '@core/journeys/ui/block'
 import { TemplateCardPreview } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview'
 import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys/ui/useJourneyQuery/__generated__/GetJourney'
+import { OVERFLOW_PX } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig'
 
 interface CardsSectionProps {
   customizableSteps: Array<TreeBlock<StepBlock>>
@@ -37,13 +38,19 @@ export function CardsSection({
       gap={4}
       data-testid="CardsSection"
       sx={{
-        width: '100%'
+        width: '100%',
+        overflow: 'visible'
       }}
     >
       <Typography variant="h6" sx={{ color: 'text.primary' }}>
         {t('Cards')}
       </Typography>
-      <Box sx={{ width: '100%', px: { xs: 0, sm: 5 } }}>
+      <Box
+        sx={{
+          width: { xs: '100%', sm: `calc(100% + ${OVERFLOW_PX * 2}px)` },
+          mx: { xs: 0, sm: `-${OVERFLOW_PX}px` }
+        }}
+      >
         <TemplateCardPreview
           steps={customizableSteps}
           variant="media"
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
index 72660e215db..660a46485f9 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -20,8 +20,15 @@ export function ScreenWrapper({
   children
 }: ScreenWrapperProps): ReactElement {
   return (
-    <Stack alignItems="center" data-testid="ScreenWrapper">
-      <Stack alignItems="center" sx={{ pb: { xs: 5, sm: 8 } }}>
+    <Stack
+      alignItems="center"
+      data-testid="ScreenWrapper"
+      sx={{ border: '1px solid red',
+        px: { xs: 6, sm: 20 },
+         overflow: 'visible'
+       }}
+    >
+      <Stack alignItems="center" sx={{ pb: { xs: 5, sm: 8 }}}>
         <Typography
           variant="h3"
           display={{ xs: 'none', sm: 'block' }}
@@ -39,7 +46,7 @@ export function ScreenWrapper({
           {mobileTitle ?? title}
         </Typography>
         <Typography
-          variant="subtitle2"
+          variant="body1"
           display={{ xs: 'none', sm: 'block' }}
           color="text.secondary"
           align="center"
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
index ddf431b6261..b7da567ff76 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
@@ -4,7 +4,6 @@ import { ReactElement } from 'react'
 
 import { DescriptionEdit } from '../../../../Editor/Slider/Settings/SocialDetails/DescriptionEdit'
 import { TitleEdit } from '../../../../Editor/Slider/Settings/SocialDetails/TitleEdit'
-import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { ScreenWrapper } from '../ScreenWrapper'
 
@@ -12,29 +11,18 @@ import { SocialScreenSocialImage } from './SocialScreenSocialImage'
 
 interface SocialScreenProps {
   handleNext: (overrideJourneyId?: string) => void
-  handleScreenNavigation: (screen: CustomizationScreen) => void
 }
 
 export function SocialScreen({
   handleNext,
-  handleScreenNavigation
 }: SocialScreenProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
 
   return (
-    <Stack
-      alignItems="center"
-      sx={{
-        px: { xs: 5, sm: 20 }
-      }}
-    >
       <ScreenWrapper
-        title={t('Final Details')}
+        title={t('Social Media')}
         subtitle={t(
-          'Customize how your invite appears when shared on social media.'
-        )}
-        mobileSubtitle={t(
-          'This is how your content will appear when shared on social media.'
+          'This is how your content will look on social media.'
         )}
         footer={
           <CustomizeFlowNextButton
@@ -58,6 +46,5 @@ export function SocialScreen({
           <DescriptionEdit />
         </Stack>
       </ScreenWrapper>
-    </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index 70a3d93e58d..a0b4df0a992 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -1,6 +1,5 @@
 import { gql, useMutation } from '@apollo/client'
 import Box from '@mui/material/Box'
-import Stack from '@mui/material/Stack'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 
@@ -8,7 +7,6 @@ import { useJourney } from '@core/journeys/ui/JourneyProvider'
 
 import { GetJourney_journey_journeyCustomizationFields as JourneyCustomizationField } from '../../../../../../__generated__/GetJourney'
 import { JourneyCustomizationFieldUpdate } from '../../../../../../__generated__/JourneyCustomizationFieldUpdate'
-import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { ScreenWrapper } from '../ScreenWrapper'
 
@@ -126,12 +124,10 @@ const renderEditableText = (
 
 interface TextScreenProps {
   handleNext: (overrideJourneyId?: string) => void
-  handleScreenNavigation: (screen: CustomizationScreen) => void
 }
 
 export function TextScreen({
   handleNext,
-  handleScreenNavigation
 }: TextScreenProps): ReactElement {
   const { t } = useTranslation()
   const { journey } = useJourney()
@@ -194,76 +190,67 @@ export function TextScreen({
   }
 
   return (
-    <Stack
-      alignItems="center"
-      gap={{ xs: 0, sm: 2 }}
-      sx={{
-        px: { xs: 2, md: 8 },
-        width: '100%'
-      }}
+    <ScreenWrapper
+      title={t('Text')}
+      subtitle={t(
+        "Fill out the blue fields and we'll customize the content with your information."
+      )}
+      mobileSubtitle={t('Fill in the blue fields to customize the content.')}
+      footer={
+        <CustomizeFlowNextButton
+          label={t('Next')}
+          onClick={handleSubmit}
+          loading={isSubmitting}
+          ariaLabel={t('Save and continue')}
+        />
+      }
     >
-      <ScreenWrapper
-        title={t('Text')}
-        subtitle={t(
-          "Fill out the blue fields and we'll customize the content with your information."
-        )}
-        mobileSubtitle={t('Fill in the blue fields to customize the content.')}
-        footer={
-          <CustomizeFlowNextButton
-            label={t('Next')}
-            onClick={handleSubmit}
-            loading={isSubmitting}
-            ariaLabel={t('Save and continue')}
-          />
-        }
-      >
-        <Box sx={{ position: 'relative', width: '100%' }}>
-          <Box
-            sx={{
-              border: '2px solid',
-              borderColor: '#CCCCCC',
-              borderRadius: 3,
-              p: { xs: 4, sm: 5 },
-              minHeight: 150,
-              width: '100%',
-              whiteSpace: 'pre-wrap',
-              overflowY: 'auto',
-              maxHeight: {
-                xs: 'calc(100vh - 323px)',
-                sm: 'calc(100vh - 370px)'
-              },
-              '&::-webkit-scrollbar': {
-                display: 'none'
-              },
-              '-ms-overflow-style': 'none',
-              'scrollbar-width': 'none'
-            }}
-          >
-            {renderEditableText(
-              journey?.journeyCustomizationDescription ?? '',
-              replacementItems,
-              handleValueChange
-            )}
-          </Box>
-          <Box
-            sx={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              height: '30px',
-              background:
-                'linear-gradient(to bottom, transparent 0%, white 100%)',
-              pointerEvents: 'none',
-              borderBottomLeftRadius: 12,
-              borderBottomRightRadius: 12,
-              borderLeft: '2px solid #CCCCCC',
-              borderRight: '2px solid #CCCCCC',
-              borderBottom: '2px solid #CCCCCC'
-            }}
-          />
+      <Box sx={{ position: 'relative', width: '100%' }}>
+        <Box
+          sx={{
+            border: '2px solid',
+            borderColor: '#CCCCCC',
+            borderRadius: 3,
+            p: { xs: 4, sm: 5 },
+            minHeight: 150,
+            width: '100%',
+            whiteSpace: 'pre-wrap',
+            overflowY: 'auto',
+            maxHeight: {
+              xs: 'calc(100vh - 323px)',
+              sm: 'calc(100vh - 370px)'
+            },
+            '&::-webkit-scrollbar': {
+              display: 'none'
+            },
+            '-ms-overflow-style': 'none',
+            'scrollbar-width': 'none'
+          }}
+        >
+          {renderEditableText(
+            journey?.journeyCustomizationDescription ?? '',
+            replacementItems,
+            handleValueChange
+          )}
         </Box>
-      </ScreenWrapper>
-    </Stack>
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '30px',
+            background:
+              'linear-gradient(to bottom, transparent 0%, white 100%)',
+            pointerEvents: 'none',
+            borderBottomLeftRadius: 12,
+            borderBottomRightRadius: 12,
+            borderLeft: '2px solid #CCCCCC',
+            borderRight: '2px solid #CCCCCC',
+            borderBottom: '2px solid #CCCCCC'
+          }}
+        />
+      </Box>
+    </ScreenWrapper>
   )
 }
diff --git a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
index dc383c7599e..b229efbc257 100644
--- a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
+++ b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
@@ -15,6 +15,7 @@ import { GetJourney_journey_blocks_StepBlock as StepBlock } from '../../../../li
 import { TemplateActionButton } from '../../TemplateViewHeader/TemplateActionButton/TemplateActionButton'
 
 import {
+  type BreakpointSwiperOptions,
   SELECTED_SCALE,
   type TemplateCardPreviewVariant,
   VARIANT_CONFIGS
@@ -64,6 +65,16 @@ function TemplateCardPreviewPlaceholder({
 const StyledSwiperSlide = styled(SwiperSlide)(() => ({}))
 const StyledSwiper = styled(Swiper)(() => ({}))
 
+function getSpacerWidth(
+  cardWidth: number,
+  bp: BreakpointSwiperOptions
+): string {
+  const selectedWidth = cardWidth * SELECTED_SCALE
+  const space = bp.spaceBetween ?? 0
+  const offset = bp.slidesOffsetBefore ?? 0
+  return `calc(100% - ${selectedWidth}px - ${space}px - ${offset}px)`
+}
+
 /**
  * Horizontal carousel of template step cards with optional "more cards" slide.
  *
@@ -165,6 +176,17 @@ export function TemplateCardPreview({
           </StyledSwiperSlide>
         )
       })}
+      {variant === 'media' && (
+        <StyledSwiperSlide
+          data-testid="MediaSpacerSlide"
+          sx={{
+            width: {
+              xs: getSpacerWidth(cardWidth.xs, config.breakpoints.xs),
+              sm: getSpacerWidth(cardWidth.sm, config.breakpoints.sm)
+            },
+          }}
+        />
+      )}
       {showMoreCardsSlide && steps.length > slidesToRender.length && (
         <StyledSwiperSlide
           data-testid="UseTemplatesSlide"
diff --git a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
index be44333288c..55aad589956 100644
--- a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
+++ b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
@@ -2,4 +2,4 @@ export { TemplateCardPreview } from './TemplateCardPreview'
 export {
   TemplateCardPreviewItem,
   type TemplateCardPreviewItemProps
-} from './TemplateCardPreviewItem/TemplateCardPreviewItem'
+} from './TemplateCardPreviewItem/TemplateCardPreviewItem'
\ No newline at end of file
diff --git a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig.ts b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig.ts
index e9069cebeb4..efe8a140369 100644
--- a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig.ts
+++ b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig.ts
@@ -11,9 +11,9 @@ interface FramePortalConfig {
   borderRadius?: number | string
 }
 
-type BreakpointSwiperOptions = Pick<
+export type BreakpointSwiperOptions = Pick<
   SwiperOptions,
-  'spaceBetween' | 'slidesOffsetAfter'
+  'spaceBetween' | 'slidesOffsetBefore'
 >
 
 export interface VariantConfig {
@@ -31,6 +31,7 @@ export interface VariantConfig {
 }
 
 export const SELECTED_SCALE = 1.07
+export const OVERFLOW_PX = 40
 const MEDIA_CARD_HEIGHT = 209
 const PREVIEW_CARD_HEIGHT_XS = 295
 const PREVIEW_CARD_HEIGHT_SM = 404
@@ -47,8 +48,8 @@ const PREVIEW_VARIANT_CONFIG: VariantConfig = {
     borderRadius: 4
   },
   breakpoints: {
-    xs: { spaceBetween: 12, slidesOffsetAfter: 0 },
-    sm: { spaceBetween: 28, slidesOffsetAfter: 0 }
+    xs: { spaceBetween: 12 },
+    sm: { spaceBetween: 28 }
   },
   cardSx: {
     position: 'relative',
@@ -91,8 +92,8 @@ const MEDIA_VARIANT_CONFIG: VariantConfig = {
     borderRadius: '24px'
   },
   breakpoints: {
-    xs: { spaceBetween: 12, slidesOffsetAfter: 265 },
-    sm: { spaceBetween: 12, slidesOffsetAfter: 260 }
+    xs: { spaceBetween: 12, slidesOffsetBefore: 0 },
+    sm: { spaceBetween: 12, slidesOffsetBefore: OVERFLOW_PX }
   },
   swiperProps: {
     mousewheel: { forceToAxis: true },
@@ -118,7 +119,8 @@ const MEDIA_VARIANT_CONFIG: VariantConfig = {
     borderRadius: '12px'
   },
   swiperSx: {
-    overflow: 'visible',
+    width: '100%',
+    overflow: { xs: 'visible', sm: 'hidden' },
     zIndex: 2,
     '& .swiper-wrapper': {
       alignItems: 'center'

From 21f7f0b5a293c7419cd6f5288f25d0ead9c9644a Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 03:00:20 +0000
Subject: [PATCH 10/21] fix: remove border

---
 .../MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
index 660a46485f9..5182ffa0dd3 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -23,12 +23,12 @@ export function ScreenWrapper({
     <Stack
       alignItems="center"
       data-testid="ScreenWrapper"
-      sx={{ border: '1px solid red',
+      sx={{
         px: { xs: 6, sm: 20 },
-         overflow: 'visible'
-       }}
+        overflow: 'visible'
+      }}
     >
-      <Stack alignItems="center" sx={{ pb: { xs: 5, sm: 8 }}}>
+      <Stack alignItems="center" sx={{ pb: { xs: 5, sm: 8 } }}>
         <Typography
           variant="h3"
           display={{ xs: 'none', sm: 'block' }}

From c11ccd3feedfab4e93be9493ecfd64beedc526b2 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 03:13:05 +0000
Subject: [PATCH 11/21] fix: add test

---
 .../MultiStepForm/MultiStepForm.tsx           |   1 -
 .../ScreenWrapper/ScreenWrapper.spec.tsx      | 103 ++++++++++++++++++
 .../Screens/ScreenWrapper/ScreenWrapper.tsx   |  10 ++
 3 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.spec.tsx

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 06225332216..51e0a1073ad 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -79,7 +79,6 @@ export function MultiStepForm(): ReactElement {
   const { customizableMedia, templateCustomizationGuestFlow } = useFlags()
 
   const journeyId = journey?.id ?? ''
-  const link = `/journeys/${journeyId}`
 
   const {
     screens,
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.spec.tsx
new file mode 100644
index 00000000000..01da9ac2667
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.spec.tsx
@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/react'
+
+import { ScreenWrapper } from './ScreenWrapper'
+
+describe('ScreenWrapper', () => {
+  it('renders title and subtitle', () => {
+    render(
+      <ScreenWrapper title="Test Title" subtitle="Test Subtitle">
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.getByTestId('ScreenWrapper')).toBeInTheDocument()
+    expect(screen.getAllByText('Test Title')[0]).toBeInTheDocument()
+    expect(screen.getAllByText('Test Subtitle')[0]).toBeInTheDocument()
+  })
+
+  it('renders children', () => {
+    render(
+      <ScreenWrapper title="Title" subtitle="Subtitle">
+        <div data-testid="child">child content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+  })
+
+  it('renders footer when provided', () => {
+    render(
+      <ScreenWrapper
+        title="Title"
+        subtitle="Subtitle"
+        footer={<div data-testid="footer">footer content</div>}
+      >
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+  })
+
+  it('does not render footer when not provided', () => {
+    render(
+      <ScreenWrapper title="Title" subtitle="Subtitle">
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.queryByTestId('footer')).not.toBeInTheDocument()
+  })
+
+  it('renders mobileTitle when provided', () => {
+    render(
+      <ScreenWrapper
+        title="Desktop Title"
+        mobileTitle="Mobile Title"
+        subtitle="Subtitle"
+      >
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.getByText('Desktop Title')).toBeInTheDocument()
+    expect(screen.getByText('Mobile Title')).toBeInTheDocument()
+  })
+
+  it('falls back to title when mobileTitle is not provided', () => {
+    render(
+      <ScreenWrapper title="Shared Title" subtitle="Subtitle">
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    const titleElements = screen.getAllByText('Shared Title')
+    expect(titleElements).toHaveLength(2)
+  })
+
+  it('renders mobileSubtitle when provided', () => {
+    render(
+      <ScreenWrapper
+        title="Title"
+        subtitle="Desktop Subtitle"
+        mobileSubtitle="Mobile Subtitle"
+      >
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    expect(screen.getByText('Desktop Subtitle')).toBeInTheDocument()
+    expect(screen.getByText('Mobile Subtitle')).toBeInTheDocument()
+  })
+
+  it('falls back to subtitle when mobileSubtitle is not provided', () => {
+    render(
+      <ScreenWrapper title="Title" subtitle="Shared Subtitle">
+        <div>content</div>
+      </ScreenWrapper>
+    )
+
+    const subtitleElements = screen.getAllByText('Shared Subtitle')
+    expect(subtitleElements).toHaveLength(2)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
index 5182ffa0dd3..b8e706ab079 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -11,6 +11,16 @@ interface ScreenWrapperProps {
   children: ReactNode
 }
 
+/**
+ * Wraps a multi-step form screen with a responsive title, subtitle, and optional footer.
+ *
+ * @param title - The heading displayed on desktop viewports.
+ * @param mobileTitle - Optional heading override for mobile viewports. Falls back to `title`.
+ * @param subtitle - The subheading displayed on desktop viewports.
+ * @param mobileSubtitle - Optional subheading override for mobile viewports. Falls back to `subtitle`.
+ * @param footer - Optional content rendered below the children.
+ * @param children - The main screen content.
+ */
 export function ScreenWrapper({
   title,
   mobileTitle,

From a1d426520ba78844abfbb0f5edd6a1f817659fc4 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 03:23:08 +0000
Subject: [PATCH 12/21] test: fix tests

---
 .../MultiStepForm/MultiStepForm.spec.tsx      | 154 +-----------------
 .../Screens/DoneScreen/DoneScreen.spec.tsx    |   2 +-
 2 files changed, 2 insertions(+), 154 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
index 58ddbb74cdf..8cf69ef0c73 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
@@ -131,15 +131,10 @@ 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
@@ -148,20 +143,6 @@ jest.mock('./Screens', () => ({
   )
 }))
 
-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 +770,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 +1073,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,
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
index d002acd995b..b4000cd53cb 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.spec.tsx
+++ b/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 () => {

From 84c9135e7d96ebbb0cf89366b3071483f51e5bb9 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 03:31:40 +0000
Subject: [PATCH 13/21] fix: tests

---
 .../Screens/LanguageScreen/LanguageScreen.spec.tsx        | 8 --------
 .../Screens/LinksScreen/LinksScreen.spec.tsx              | 5 -----
 .../Screens/MediaScreen/MediaScreen.spec.tsx              | 4 ++--
 3 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
index 0a7cd9aaba3..c91b42a9c42 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
@@ -116,7 +116,6 @@ const mockJourneyDuplicate: MockedResponse<
 
 describe('LanguageScreen', () => {
   let handleNext: jest.Mock
-  const handleScreenNavigation = jest.fn()
   let push: jest.Mock
 
   beforeEach(() => {
@@ -165,7 +164,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -203,7 +201,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -306,7 +303,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -510,7 +506,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -566,7 +561,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -627,7 +621,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
@@ -652,7 +645,6 @@ describe('LanguageScreen', () => {
             <TeamProvider>
               <LanguageScreen
                 handleNext={handleNext}
-                handleScreenNavigation={handleScreenNavigation}
               />
             </TeamProvider>
           </JourneyProvider>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
index 1037b89175c..9918d1b53f5 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
@@ -85,7 +85,6 @@ describe('LinksScreen', () => {
   //         <JourneyProvider value={{ journey, variant: 'admin' }}>
   //           <LinksScreen
   //             handleNext={jest.fn()}
-  //             handleScreenNavigation={jest.fn()}
   //           />
   //         </JourneyProvider>
   //       </MockedProvider>
@@ -135,7 +134,6 @@ describe('LinksScreen', () => {
           <JourneyProvider value={{ journey, variant: 'admin' }}>
             <LinksScreen
               handleNext={handleNext}
-              handleScreenNavigation={jest.fn()}
             />
           </JourneyProvider>
         </MockedProvider>
@@ -294,7 +292,6 @@ describe('LinksScreen', () => {
           >
             <LinksScreen
               handleNext={handleNext}
-              handleScreenNavigation={jest.fn()}
             />
           </JourneyProvider>
         </MockedProvider>
@@ -403,7 +400,6 @@ describe('LinksScreen', () => {
           >
             <LinksScreen
               handleNext={handleNext}
-              handleScreenNavigation={jest.fn()}
             />
           </JourneyProvider>
         </MockedProvider>
@@ -473,7 +469,6 @@ describe('LinksScreen', () => {
           >
             <LinksScreen
               handleNext={jest.fn()}
-              handleScreenNavigation={jest.fn()}
             />
           </JourneyProvider>
         </MockedProvider>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
index 980226690ea..61048b4388c 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
@@ -140,9 +140,9 @@ describe('MediaScreen', () => {
   it('should render the MediaScreen', () => {
     renderMediaScreen()
 
-    expect(screen.getByText('Media')).toBeInTheDocument()
+    expect(screen.getAllByText('Media')[0]).toBeInTheDocument()
     expect(
-      screen.getByText('Personalize and manage your media assets')
+      screen.getAllByText('Personalize and manage your media assets')[0]
     ).toBeInTheDocument()
     expect(screen.getByTestId('ImagesSection')).toBeInTheDocument()
     expect(screen.getByTestId('VideosSection')).toBeInTheDocument()

From 66a87cc606532940a4af2651b4d5d991476f6951 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Fri, 6 Mar 2026 03:49:48 +0000
Subject: [PATCH 14/21] fix: lint

---
 .../Screens/SocialScreen/SocialScreen.spec.tsx             | 7 +------
 .../MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx   | 4 ----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.spec.tsx
index 18f332516d1..f960366511e 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.spec.tsx
@@ -11,7 +11,6 @@ import { SocialScreen } from './SocialScreen'
 
 describe('SocialScreen', () => {
   const handleNext = jest.fn()
-  const handleScreenNavigation = jest.fn()
 
   const baseJourney = {
     ...journey,
@@ -23,7 +22,6 @@ describe('SocialScreen', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     handleNext.mockClear()
-    handleScreenNavigation.mockClear()
   })
 
   const renderSocialScreen = (
@@ -32,10 +30,7 @@ describe('SocialScreen', () => {
     return render(
       <MockedProvider mocks={mocks}>
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
-          <SocialScreen
-            handleNext={handleNext}
-            handleScreenNavigation={handleScreenNavigation}
-          />
+          <SocialScreen handleNext={handleNext} />
         </JourneyProvider>
       </MockedProvider>
     )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
index 2266102a879..025a46aec3d 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
@@ -40,7 +40,6 @@ describe('TextScreen', () => {
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
           <TextScreen
             handleNext={jest.fn()}
-            handleScreenNavigation={jest.fn()}
           />
         </JourneyProvider>
       </MockedProvider>
@@ -57,7 +56,6 @@ describe('TextScreen', () => {
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
           <TextScreen
             handleNext={jest.fn()}
-            handleScreenNavigation={jest.fn()}
           />
         </JourneyProvider>
       </MockedProvider>
@@ -117,7 +115,6 @@ describe('TextScreen', () => {
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
           <TextScreen
             handleNext={handleNext}
-            handleScreenNavigation={jest.fn()}
           />
         </JourneyProvider>
       </MockedProvider>
@@ -149,7 +146,6 @@ describe('TextScreen', () => {
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
           <TextScreen
             handleNext={handleNext}
-            handleScreenNavigation={jest.fn()}
           />
         </JourneyProvider>
       </MockedProvider>

From f3b8f24f27b160893b41622e382341216fbb7b28 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 03:54:55 +0000
Subject: [PATCH 15/21] fix: lint issues

---
 .../Toolbar/Items/ShareItem/ShareItem.tsx     |  2 +-
 .../MultiStepForm/MultiStepForm.spec.tsx      |  6 +-
 .../MultiStepForm/MultiStepForm.tsx           | 31 ++---------
 .../LanguageScreen/LanguageScreen.spec.tsx    | 28 +++-------
 .../Screens/LanguageScreen/LanguageScreen.tsx |  8 +--
 .../Screens/LinksScreen/LinksScreen.spec.tsx  | 16 ++----
 .../Screens/LinksScreen/LinksScreen.tsx       | 55 +++++++++----------
 .../Screens/MediaScreen/MediaScreen.tsx       | 49 ++++++++---------
 .../Sections/CardsSection/CardsSection.tsx    |  2 +-
 .../Screens/SocialScreen/SocialScreen.tsx     | 54 +++++++++---------
 .../Screens/TextScreen/TextScreen.spec.tsx    | 16 ++----
 .../Screens/TextScreen/TextScreen.tsx         |  4 +-
 .../TemplateCardPreview.tsx                   |  2 +-
 .../TemplateCardPreview/index.ts              |  2 +-
 libs/locales/en/apps-journeys-admin.json      | 14 ++---
 libs/locales/en/journeys-ui.json              |  4 +-
 16 files changed, 112 insertions(+), 181 deletions(-)

diff --git a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx b/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
index b245f05420c..7f0ff8d5418 100644
--- a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
+++ b/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'
@@ -17,7 +18,6 @@ import { GetJourneyForSharing_journey as JourneyFromLazyQuery } from '../../../.
 import { JourneyFields as JourneyFromContext } from '../../../../../../__generated__/JourneyFields'
 import { useCustomDomainsQuery } from '../../../../../libs/useCustomDomainsQuery'
 import { Item } from '../Item/Item'
-import { SxProps, Theme } from '@mui/material/styles'
 
 const EmbedJourneyDialog = dynamic(
   async () =>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
index 8cf69ef0c73..c40950f4cd4 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
@@ -134,11 +134,7 @@ jest.mock('./Screens', () => ({
   DoneScreen: () => (
     <div data-testid="done-screen">
       <h2>Done Screen</h2>
-      <button
-        data-testid="done-screen-go-to-language"
-      >
-        Go to language
-      </button>
+      <button data-testid="done-screen-go-to-language">Go to language</button>
     </div>
   )
 }))
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 51e0a1073ad..8c9c371c37c 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -35,35 +35,19 @@ export const MULTI_STEP_FORM_MIN_HEIGHT = 900
 
 function renderScreen(
   screen: CustomizationScreen,
-  handleNext: (overrideJourneyId?: string) => void,
+  handleNext: (overrideJourneyId?: string) => void
 ): ReactElement {
   switch (screen) {
     case 'language':
-      return (
-        <LanguageScreen
-          handleNext={handleNext}
-        />
-      )
+      return <LanguageScreen handleNext={handleNext} />
     case 'text':
-      return (
-        <TextScreen
-          handleNext={handleNext}
-        />
-      )
+      return <TextScreen handleNext={handleNext} />
     case 'links':
-      return (
-        <LinksScreen
-          handleNext={handleNext}
-        />
-      )
+      return <LinksScreen handleNext={handleNext} />
     case 'media':
       return <MediaScreen handleNext={handleNext} />
     case 'social':
-      return (
-        <SocialScreen
-          handleNext={handleNext}
-        />
-      )
+      return <SocialScreen handleNext={handleNext} />
     case 'done':
       return <DoneScreen />
     default:
@@ -135,10 +119,7 @@ export function MultiStepForm(): ReactElement {
           overflow: 'hidden'
         }}
       >
-        <Stack
-          gap={{ xs: 8, sm: 17 }}
-          data-testid="MultiStepForm"
-        >
+        <Stack gap={{ xs: 8, sm: 17 }} data-testid="MultiStepForm">
           {(hasEditableText ||
             hasCustomizableLinks ||
             hasCustomizableMedia) && (
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
index c91b42a9c42..62b54da7a74 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
@@ -162,9 +162,7 @@ describe('LanguageScreen', () => {
             value={{ journey: nonTemplateJourney, variant: 'customize' }}
           >
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -199,9 +197,7 @@ describe('LanguageScreen', () => {
         <SnackbarProvider>
           <JourneyProvider value={{ journey, variant: 'admin' }}>
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -301,9 +297,7 @@ describe('LanguageScreen', () => {
             value={{ journey: journeyWithFromTemplateId, variant: 'admin' }}
           >
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -504,9 +498,7 @@ describe('LanguageScreen', () => {
             }}
           >
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -559,9 +551,7 @@ describe('LanguageScreen', () => {
         <SnackbarProvider>
           <JourneyProvider value={{ journey, variant: 'admin' }}>
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -619,9 +609,7 @@ describe('LanguageScreen', () => {
             value={{ journey: journeyWithImage, variant: 'admin' }}
           >
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -643,9 +631,7 @@ describe('LanguageScreen', () => {
         <SnackbarProvider>
           <JourneyProvider value={{ journey, variant: 'admin' }}>
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index ef30671784f..3c391807ded 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -1,3 +1,4 @@
+import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
@@ -25,14 +26,13 @@ import { CardsPreview, EDGE_FADE_PX } from '../LinksScreen/CardsPreview'
 import { ScreenWrapper } from '../ScreenWrapper'
 
 import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
-import Box from '@mui/material/Box'
 
 interface LanguageScreenProps {
   handleNext: (overrideJourneyId?: string) => void
 }
 
 export function LanguageScreen({
-  handleNext,
+  handleNext
 }: LanguageScreenProps): ReactElement {
   const { templateCustomizationGuestFlow } = useFlags()
   const { t } = useTranslation('journeys-ui')
@@ -251,9 +251,7 @@ export function LanguageScreen({
                       name: language?.name,
                       slug: language?.slug
                     }))}
-                    onChange={(value) =>
-                      setFieldValue('languageSelect', value)
-                    }
+                    onChange={(value) => setFieldValue('languageSelect', value)}
                   />
                   {isSignedIn && (
                     <>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
index 9918d1b53f5..89bb26e4190 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.spec.tsx
@@ -132,9 +132,7 @@ describe('LinksScreen', () => {
       render(
         <MockedProvider>
           <JourneyProvider value={{ journey, variant: 'admin' }}>
-            <LinksScreen
-              handleNext={handleNext}
-            />
+            <LinksScreen handleNext={handleNext} />
           </JourneyProvider>
         </MockedProvider>
       )
@@ -290,9 +288,7 @@ describe('LinksScreen', () => {
           <JourneyProvider
             value={{ journey: journeyWithLinks, variant: 'admin' }}
           >
-            <LinksScreen
-              handleNext={handleNext}
-            />
+            <LinksScreen handleNext={handleNext} />
           </JourneyProvider>
         </MockedProvider>
       )
@@ -398,9 +394,7 @@ describe('LinksScreen', () => {
           <JourneyProvider
             value={{ journey: journeyWithPhone, variant: 'admin' }}
           >
-            <LinksScreen
-              handleNext={handleNext}
-            />
+            <LinksScreen handleNext={handleNext} />
           </JourneyProvider>
         </MockedProvider>
       )
@@ -467,9 +461,7 @@ describe('LinksScreen', () => {
               variant: 'admin'
             }}
           >
-            <LinksScreen
-              handleNext={jest.fn()}
-            />
+            <LinksScreen handleNext={jest.fn()} />
           </JourneyProvider>
         </MockedProvider>
       )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index 654f460dacb..8f644536670 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -210,35 +210,32 @@ export function LinksScreen({ handleNext }: LinksScreenProps): ReactElement {
         return acc
       }, {})}
       validationSchema={object().shape(
-        links.reduce<Record<string, ReturnType<typeof string>>>(
-          (acc, link) => {
-            if (link.linkType === 'email') {
-              acc[link.id] = string().email(t('Enter a valid email'))
-            } else if (link.linkType === 'phone') {
-              acc[`${link.id}__cc`] = string().test(
-                'valid-cc',
-                t('Enter a valid calling code'),
-                (val) => {
-                  if (val == null || val.trim() === '') return false
-                  const normalized = val.startsWith('+') ? val : `+${val}`
-                  return countries.some((c) => c.callingCode === normalized)
-                }
-              )
-              acc[`${link.id}__local`] = string().test(
-                'valid-local',
-                t('Enter a valid phone number'),
-                (val) =>
-                  val == null ||
-                  val.trim() === '' ||
-                  /^[0-9\s\-()]+$/.test(val.trim())
-              )
-            } else {
-              acc[link.id] = string().url(t('Enter a valid URL'))
-            }
-            return acc
-          },
-          {}
-        )
+        links.reduce<Record<string, ReturnType<typeof string>>>((acc, link) => {
+          if (link.linkType === 'email') {
+            acc[link.id] = string().email(t('Enter a valid email'))
+          } else if (link.linkType === 'phone') {
+            acc[`${link.id}__cc`] = string().test(
+              'valid-cc',
+              t('Enter a valid calling code'),
+              (val) => {
+                if (val == null || val.trim() === '') return false
+                const normalized = val.startsWith('+') ? val : `+${val}`
+                return countries.some((c) => c.callingCode === normalized)
+              }
+            )
+            acc[`${link.id}__local`] = string().test(
+              'valid-local',
+              t('Enter a valid phone number'),
+              (val) =>
+                val == null ||
+                val.trim() === '' ||
+                /^[0-9\s\-()]+$/.test(val.trim())
+            )
+          } else {
+            acc[link.id] = string().url(t('Enter a valid URL'))
+          }
+          return acc
+        }, {})
       )}
       validateOnSubmit={false}
       onSubmit={handleFormSubmit}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
index 20b0895071f..470037d11ba 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
@@ -66,31 +66,28 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
     setSelectedCardBlockId(getCardBlockIdFromStep(step))
   }
   return (
-        <ScreenWrapper
-          title={t('Media')}
-          subtitle={t('Personalize and manage your media assets')}
-          footer={
-            <CustomizeFlowNextButton
-              label={t('Next')}
-              onClick={() => handleNext()}
-              ariaLabel={t('Next')}
-              loading={hasActiveUploads}
-            />
-          }
-        >
-          {showLogo && <LogoSection />}
-          <CardsSection
-            customizableSteps={customizableSteps}
-            selectedStep={selectedStep}
-            handleStepClick={handleStepClick}
-          />
-          {showImages && (
-            <ImagesSection
-              journey={journey}
-              cardBlockId={selectedCardBlockId}
-            />
-          )}
-          {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
-        </ScreenWrapper>
+    <ScreenWrapper
+      title={t('Media')}
+      subtitle={t('Personalize and manage your media assets')}
+      footer={
+        <CustomizeFlowNextButton
+          label={t('Next')}
+          onClick={() => handleNext()}
+          ariaLabel={t('Next')}
+          loading={hasActiveUploads}
+        />
+      }
+    >
+      {showLogo && <LogoSection />}
+      <CardsSection
+        customizableSteps={customizableSteps}
+        selectedStep={selectedStep}
+        handleStepClick={handleStepClick}
+      />
+      {showImages && (
+        <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
+      )}
+      {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
+    </ScreenWrapper>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
index 220dfe02ce7..dd26d14b5be 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
@@ -6,8 +6,8 @@ import { ReactElement } from 'react'
 
 import { TreeBlock } from '@core/journeys/ui/block'
 import { TemplateCardPreview } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview'
-import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys/ui/useJourneyQuery/__generated__/GetJourney'
 import { OVERFLOW_PX } from '@core/journeys/ui/TemplateView/TemplatePreviewTabs/TemplateCardPreview/templateCardPreviewConfig'
+import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys/ui/useJourneyQuery/__generated__/GetJourney'
 
 interface CardsSectionProps {
   customizableSteps: Array<TreeBlock<StepBlock>>
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
index b7da567ff76..e61b47aaa6c 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
@@ -13,38 +13,34 @@ interface SocialScreenProps {
   handleNext: (overrideJourneyId?: string) => void
 }
 
-export function SocialScreen({
-  handleNext,
-}: SocialScreenProps): ReactElement {
+export function SocialScreen({ handleNext }: SocialScreenProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
 
   return (
-      <ScreenWrapper
-        title={t('Social Media')}
-        subtitle={t(
-          'This is how your content will look on social media.'
-        )}
-        footer={
-          <CustomizeFlowNextButton
-            label={t('Done')}
-            onClick={() => handleNext()}
-            ariaLabel={t('Done')}
-          />
-        }
+    <ScreenWrapper
+      title={t('Social Media')}
+      subtitle={t('This is how your content will look on social media.')}
+      footer={
+        <CustomizeFlowNextButton
+          label={t('Done')}
+          onClick={() => handleNext()}
+          ariaLabel={t('Done')}
+        />
+      }
+    >
+      <Stack
+        alignItems="center"
+        gap={6}
+        data-testid="SocialShareAppearance"
+        sx={{
+          width: '100%',
+          py: 5
+        }}
       >
-        <Stack
-          alignItems="center"
-          gap={6}
-          data-testid="SocialShareAppearance"
-          sx={{
-            width: '100%',
-            py: 5
-          }}
-        >
-          <SocialScreenSocialImage />
-          <TitleEdit />
-          <DescriptionEdit />
-        </Stack>
-      </ScreenWrapper>
+        <SocialScreenSocialImage />
+        <TitleEdit />
+        <DescriptionEdit />
+      </Stack>
+    </ScreenWrapper>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
index 025a46aec3d..0242ccec144 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.spec.tsx
@@ -38,9 +38,7 @@ describe('TextScreen', () => {
     render(
       <MockedProvider>
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
-          <TextScreen
-            handleNext={jest.fn()}
-          />
+          <TextScreen handleNext={jest.fn()} />
         </JourneyProvider>
       </MockedProvider>
     )
@@ -54,9 +52,7 @@ describe('TextScreen', () => {
     render(
       <MockedProvider>
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
-          <TextScreen
-            handleNext={jest.fn()}
-          />
+          <TextScreen handleNext={jest.fn()} />
         </JourneyProvider>
       </MockedProvider>
     )
@@ -113,9 +109,7 @@ describe('TextScreen', () => {
     render(
       <MockedProvider mocks={[journeyCustomizationFieldUpdate]}>
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
-          <TextScreen
-            handleNext={handleNext}
-          />
+          <TextScreen handleNext={handleNext} />
         </JourneyProvider>
       </MockedProvider>
     )
@@ -144,9 +138,7 @@ describe('TextScreen', () => {
     render(
       <MockedProvider>
         <JourneyProvider value={{ journey: baseJourney, variant: 'admin' }}>
-          <TextScreen
-            handleNext={handleNext}
-          />
+          <TextScreen handleNext={handleNext} />
         </JourneyProvider>
       </MockedProvider>
     )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index a0b4df0a992..86860b6274f 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -126,9 +126,7 @@ interface TextScreenProps {
   handleNext: (overrideJourneyId?: string) => void
 }
 
-export function TextScreen({
-  handleNext,
-}: TextScreenProps): ReactElement {
+export function TextScreen({ handleNext }: TextScreenProps): ReactElement {
   const { t } = useTranslation()
   const { journey } = useJourney()
   const [journeyCustomizationFieldUpdate, { loading: isSubmitting }] =
diff --git a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
index b229efbc257..a2aa3310529 100644
--- a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
+++ b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/TemplateCardPreview.tsx
@@ -183,7 +183,7 @@ export function TemplateCardPreview({
             width: {
               xs: getSpacerWidth(cardWidth.xs, config.breakpoints.xs),
               sm: getSpacerWidth(cardWidth.sm, config.breakpoints.sm)
-            },
+            }
           }}
         />
       )}
diff --git a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
index 55aad589956..be44333288c 100644
--- a/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
+++ b/libs/journeys/ui/src/components/TemplateView/TemplatePreviewTabs/TemplateCardPreview/index.ts
@@ -2,4 +2,4 @@ export { TemplateCardPreview } from './TemplateCardPreview'
 export {
   TemplateCardPreviewItem,
   type TemplateCardPreviewItemProps
-} from './TemplateCardPreviewItem/TemplateCardPreviewItem'
\ No newline at end of file
+} from './TemplateCardPreviewItem/TemplateCardPreviewItem'
diff --git a/libs/locales/en/apps-journeys-admin.json b/libs/locales/en/apps-journeys-admin.json
index 2cdb9f03804..03a813ad353 100644
--- a/libs/locales/en/apps-journeys-admin.json
+++ b/libs/locales/en/apps-journeys-admin.json
@@ -1003,21 +1003,20 @@
   "Link to project": "Link to project",
   "Feature Video Started": "Feature Video Started",
   "Feature Video Ended": "Feature Video Ended",
-  "Edit Manually": "Edit Manually",
-  "Ready to Share!": "Ready to Share!",
+  "Ready to share!": "Ready to share!",
   "Share your unique link on any platform.": "Share your unique link on any platform.",
   "Go To Projects Dashboard": "Go To Projects Dashboard",
   "Share!": "Share!",
   "{{count}} more cards_one": "{{count}} more cards",
   "{{count}} more cards_other": "{{count}} more cards",
   "Edit": "Edit",
-  "Links": "Links",
-  "This content contains buttons linking to external sites. Check them and update the links below.": "This content contains buttons linking to external sites. Check them and update the links below.",
-  "Buttons here point to external sites. Check and update the links.": "Buttons here point to external sites. Check and update the links.",
   "Enter a valid email": "Enter a valid email",
   "Enter a valid calling code": "Enter a valid calling code",
   "Enter a valid phone number": "Enter a valid phone number",
   "Enter a valid URL": "Enter a valid URL",
+  "Links": "Links",
+  "This content contains buttons linking to external sites. Check them and update the links below.": "This content contains buttons linking to external sites. Check them and update the links below.",
+  "Buttons here point to external sites. Check and update the links.": "Buttons here point to external sites. Check and update the links.",
   "Next": "Next",
   "Replace the links": "Replace the links",
   "Media": "Media",
@@ -1030,9 +1029,8 @@
   "Supports JPG, PNG, and GIF files.": "Supports JPG, PNG, and GIF files.",
   "Upload a video to see a preview here": "Upload a video to see a preview here",
   "Max size is 1 GB": "Max size is 1 GB",
-  "Final Details": "Final Details",
-  "Customize how your invite appears when shared on social media.": "Customize how your invite appears when shared on social media.",
-  "This is how your content will appear when shared on social media.": "This is how your content will appear when shared on social media.",
+  "Social Media": "Social Media",
+  "This is how your content will look on social media.": "This is how your content will look on social media.",
   "Failed to update social image, please try again later": "Failed to update social image, please try again later",
   "Social image updated": "Social image updated",
   "your.nextstep.is": "your.nextstep.is",
diff --git a/libs/locales/en/journeys-ui.json b/libs/locales/en/journeys-ui.json
index ef9ce200f88..7aeadf4622f 100644
--- a/libs/locales/en/journeys-ui.json
+++ b/libs/locales/en/journeys-ui.json
@@ -4,7 +4,7 @@
   "Get Started": "Get Started",
   "A few quick edits and your template will be ready to share.": "A few quick edits and your template will be ready to share.",
   "A few quick edits and it's ready to share!": "A few quick edits and it's ready to share!",
+  "Next": "Next",
   "Select a language": "Select a language",
-  "Select a team": "Select a team",
-  "Next": "Next"
+  "Select a team": "Select a team"
 }

From 863f28db77f7539fe435c7ec3c5610dda049fc8b Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Sun, 8 Mar 2026 20:06:16 +0000
Subject: [PATCH 16/21] fix: add back the switch

---
 .../MultiStepForm/Screens/DoneScreen/DoneScreen.tsx              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 40bde723119..b82f314b1c6 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -93,6 +93,7 @@ export function DoneScreen(): ReactElement {
             }
           }}
         />
+       <NotificationSwitch journeyId={journey?.id} />
       </Stack>
     </ScreenWrapper>
   )

From dba14e61c0c83e006eaaa57cef114d13087a0e38 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Sun, 8 Mar 2026 20:14:24 +0000
Subject: [PATCH 17/21] fix: remove validateOnSubmit from LinksScreen

---
 .../MultiStepForm/Screens/LinksScreen/LinksScreen.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index 8f644536670..22fffd3994e 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -237,7 +237,6 @@ export function LinksScreen({ handleNext }: LinksScreenProps): ReactElement {
           return acc
         }, {})
       )}
-      validateOnSubmit={false}
       onSubmit={handleFormSubmit}
       validateOnMount
     >

From 95329dac5ee988687e77cb1c921a3a6d0126435b Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Sun, 8 Mar 2026 20:32:32 +0000
Subject: [PATCH 18/21] fix: add response section

---
 .../Screens/DoneScreen/DoneScreen.tsx         | 88 ++++++++++++-------
 1 file changed, 54 insertions(+), 34 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index b82f314b1c6..5dbe09264f6 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -54,46 +54,66 @@ export function DoneScreen(): ReactElement {
       )}
 
       <Stack
-        direction={{ xs: 'column', sm: 'row' }}
-        sx={{
-          width: '100%',
-          mt: 6,
-          alignItems: { xs: 'stretch', sm: 'center' },
-          justifyContent: 'center',
-          gap: { xs: 3, sm: 2 }
-        }}
+        spacing={4}
+        sx={{ direction: { xs: 'column', sm: 'row' }, mt: 6, width: '100%' }}
       >
-        <Button
-          data-testid="DoneScreenPreviewButton"
-          variant="outlined"
-          color="secondary"
-          href={href}
-          component={href != null ? 'a' : 'button'}
-          target={href != null ? '_blank' : undefined}
-          startIcon={<Play3Icon />}
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
           sx={{
-            borderWidth: 2,
-            borderRadius: 2,
-            height: 48,
-            width: { xs: '100%', sm: 216 },
-            borderColor: 'secondary.light'
+            width: '100%',
+            alignItems: { xs: 'stretch', sm: 'center' },
+            justifyContent: 'center',
+            gap: { xs: 3, sm: 2 }
           }}
         >
-          <Typography variant="subtitle2">{t('Preview')}</Typography>
-        </Button>
-        <ShareItem
-          variant="button"
-          journey={journey}
-          buttonVariant="icon"
-          buttonProps={{
-            sx: {
-              width: { xs: '100%', sm: 216 },
+          <Button
+            data-testid="DoneScreenPreviewButton"
+            variant="outlined"
+            color="secondary"
+            href={href}
+            component={href != null ? 'a' : 'button'}
+            target={href != null ? '_blank' : undefined}
+            startIcon={<Play3Icon />}
+            sx={{
+              borderWidth: 2,
+              borderRadius: 2,
               height: 48,
-              borderRadius: 2
-            }
+              width: { xs: '100%', sm: 216 },
+              borderColor: 'secondary.light'
+            }}
+          >
+            <Typography variant="subtitle2">{t('Preview')}</Typography>
+          </Button>
+          <ShareItem
+            variant="button"
+            journey={journey}
+            buttonVariant="icon"
+            buttonProps={{
+              sx: {
+                width: { xs: '100%', sm: 216 },
+                height: 48,
+                borderRadius: 2
+              }
+            }}
+          />
+        </Stack>
+        <Stack
+          spacing={6}
+          sx={{
+            border: '2px solid',
+            borderColor: 'divider',
+            borderRadius: 2,
+            p: 5
           }}
-        />
-       <NotificationSwitch journeyId={journey?.id} />
+        >
+          <Typography variant="subtitle1">
+            {t('Choose where responses go:')}
+          </Typography>
+          <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
+            <Typography variant="body2">{t('Send to my email')}</Typography>
+            <NotificationSwitch journeyId={journey?.id} />
+          </Stack>
+        </Stack>
       </Stack>
     </ScreenWrapper>
   )

From a8c32708bfbf4ab831b185700d6edc51dbdaefe9 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Sun, 8 Mar 2026 21:15:05 +0000
Subject: [PATCH 19/21] fix: resolved comments

---
 .../src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx  | 1 -
 .../TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx b/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
index 7f0ff8d5418..ad300532b35 100644
--- a/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
+++ b/apps/journeys-admin/src/components/Editor/Toolbar/Items/ShareItem/ShareItem.tsx
@@ -51,7 +51,6 @@ interface ShareItemProps {
   handleCloseMenu?: () => void
   handleKeepMounted?: () => void
   buttonVariant?: 'icon' | 'default'
-  buttonSx?: SxProps<Theme>
   setHasOpenDialog?: (hasOpenDialog: boolean) => void
   buttonProps?: ComponentProps<typeof Button>
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
index 92a7255d4c0..c546f63488d 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
@@ -143,7 +143,6 @@ jest.mock('./Screens', () => ({
   DoneScreen: () => (
     <div data-testid="done-screen">
       <h2>Done Screen</h2>
-      <button data-testid="done-screen-go-to-language">Go to language</button>
     </div>
   )
 }))

From 65a82d21655ec0b8647da10d2b454b37f1a0a1f0 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 8 Mar 2026 21:19:15 +0000
Subject: [PATCH 20/21] fix: lint issues

---
 .../LanguageScreen/LanguageScreen.spec.tsx    | 36 +++++--------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
index d1f3768f149..7bfbdffe96a 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
@@ -225,9 +225,7 @@ describe('LanguageScreen', () => {
               value={{ journey: nonTemplateJourney, variant: 'customize' }}
             >
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -271,9 +269,7 @@ describe('LanguageScreen', () => {
           <FlagsProvider flags={{ templateCustomizationGuestFlow: true }}>
             <JourneyProvider value={{ journey, variant: 'admin' }}>
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -374,9 +370,7 @@ describe('LanguageScreen', () => {
               value={{ journey: journeyWithFromTemplateId, variant: 'admin' }}
             >
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -486,9 +480,7 @@ describe('LanguageScreen', () => {
           <FlagsProvider flags={{ templateCustomizationGuestFlow: true }}>
             <JourneyProvider value={{ journey, variant: 'admin' }}>
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -584,9 +576,7 @@ describe('LanguageScreen', () => {
           <FlagsProvider flags={{ templateCustomizationGuestFlow: true }}>
             <JourneyProvider value={{ journey, variant: 'admin' }}>
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -774,9 +764,7 @@ describe('LanguageScreen', () => {
               }}
             >
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -838,9 +826,7 @@ describe('LanguageScreen', () => {
           <FlagsProvider flags={{ templateCustomizationGuestFlow: true }}>
             <JourneyProvider value={{ journey, variant: 'admin' }}>
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>
@@ -897,9 +883,7 @@ describe('LanguageScreen', () => {
             value={{ journey: journeyWithImage, variant: 'admin' }}
           >
             <TeamProvider>
-              <LanguageScreen
-                handleNext={handleNext}
-              />
+              <LanguageScreen handleNext={handleNext} />
             </TeamProvider>
           </JourneyProvider>
         </SnackbarProvider>
@@ -922,9 +906,7 @@ describe('LanguageScreen', () => {
           <FlagsProvider flags={{ templateCustomizationGuestFlow: true }}>
             <JourneyProvider value={{ journey, variant: 'admin' }}>
               <TeamProvider>
-                <LanguageScreen
-                  handleNext={handleNext}
-                />
+                <LanguageScreen handleNext={handleNext} />
               </TeamProvider>
             </JourneyProvider>
           </FlagsProvider>

From 40da71c38f00e5f245e7370a784b300e9f08f525 Mon Sep 17 00:00:00 2001
From: edmonday <egsmond@gmail.com>
Date: Sun, 8 Mar 2026 22:59:20 +0000
Subject: [PATCH 21/21] fix: add guest flow flag on button

---
 .../MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index 6b1257259f8..db068ce2b66 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -310,7 +310,9 @@ export function LanguageScreen({
               label={t('Next')}
               onClick={() => formikHandleSubmit()}
               disabled={
-                (templateCustomizationGuestFlow && !isSignedIn) || loading
+                templateCustomizationGuestFlow == null ||
+                !templateCustomizationGuestFlow ||
+                loading
               }
               ariaLabel={t('Next')}
             />