feat: text screen (#7355)

Author: csiyang

apps/journeys-admin/__generated__/JourneyCustomizationDescriptionUpdate.ts

@@ -51,7 +51,19 @@ function JourneyQuickSettingsPage({ status }): ReactElement {
       {status === 'noAccess' ? (
         <AccessDenied />
       ) : (
-        <JourneyProvider value={{ journey: data?.journey, variant: 'admin' }}>
+        <JourneyProvider
+          value={{
+            journey:
+              data?.journey != null
+                ? {
+                    ...data.journey,
+                    journeyCustomizationFields:
+                      (data.journey as any).journeyCustomizationFields ?? []
+                  }
+                : undefined,
+            variant: 'admin'
+          }}
+        >
           <EditorProvider>
             <JourneyQuickSettings displayName={displayName ?? undefined} />
           </EditorProvider>

apps/journeys-admin/__generated__/JourneyCustomizationFieldUpdate.ts

@@ -1,10 +1,10 @@
-import Typography from '@mui/material/Typography'
 import { useRouter } from 'next/router'
 import { withUser, withUserTokenSSR } from 'next-firebase-auth'
 import { useTranslation } from 'next-i18next'
 import { NextSeo } from 'next-seo'
 
 import { GET_JOURNEY, useJourneyQuery } from '@core/journeys/ui/useJourneyQuery'
+import { JourneyProvider } from '@core/journeys/ui/JourneyProvider'
 
 import {
   GetJourney,
@@ -22,13 +22,17 @@ function CustomizePage() {
     idType: IdType.databaseId
   })
 
-  const title = data?.journey?.title
-
   return (
     <>
       <NextSeo title={t('Customize Template')} />
-      <Typography variant="h1">{title}</Typography>
-      <MultiStepForm />
+      <JourneyProvider
+        value={{
+          journey: data?.journey,
+          variant: 'admin'
+        }}
+      >
+        <MultiStepForm />
+      </JourneyProvider>
     </>
   )
 }

apps/journeys-admin/__generated__/globalTypes.ts

@@ -8,7 +8,7 @@ import {
 } from '@core/journeys/ui/TemplateView/data'
 import { journeysAdminConfig } from '@core/shared/ui/storybook'
 
-import { GetJourney_journey as Journey } from '../../../__generated__/GetJourney'
+import { JourneyFields as Journey } from '@core/journeys/ui/JourneyProvider/__generated__/JourneyFields'
 import { GetStepBlocksWithPosition } from '../../../__generated__/GetStepBlocksWithPosition'
 import {
   JourneyStatus,
@@ -85,7 +85,8 @@ const journey: Journey = {
   menuButtonIcon: null,
   menuStepBlock: null,
   journeyTheme: null,
-  journeyCustomizationDescription: null
+  journeyCustomizationDescription: null,
+  journeyCustomizationFields: []
 }
 
 const mockGetStepBlocksWithPosition: MockedResponse<GetStepBlocksWithPosition> =

apps/journeys-admin/pages/journeys/[journeyId]/quick.tsx

@@ -8,7 +8,7 @@ import { JourneyProvider } from '@core/journeys/ui/JourneyProvider'
 import { journeysAdminConfig } from '@core/shared/ui/storybook'
 
 import { BlockFields_ImageBlock as ImageBlock } from '../../../../../../__generated__/BlockFields'
-import { GetJourney_journey as Journey } from '../../../../../../__generated__/GetJourney'
+import { JourneyFields as Journey } from '@core/journeys/ui/JourneyProvider/__generated__/JourneyFields'
 import {
   JourneyStatus,
   ThemeMode,
@@ -77,7 +77,8 @@ const journey: Journey = {
   menuButtonIcon: null,
   menuStepBlock: null,
   journeyTheme: null,
-  journeyCustomizationDescription: null
+  journeyCustomizationDescription: null,
+  journeyCustomizationFields: []
 }
 
 const image: ImageBlock = {

apps/journeys-admin/pages/templates/[journeyId]/customize.tsx

@@ -28,6 +28,35 @@ export function CustomizeTemplate(): ReactElement {
     void setFieldValue('journeyCustomizationDescription', newValue)
   }
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.key !== 'Tab') return
+
+    event.preventDefault()
+
+    const target = event.target as HTMLTextAreaElement | HTMLInputElement
+    const currentValue = journeyCustomizationDescription ?? ''
+    const selectionStart = target.selectionStart ?? currentValue.length
+    const selectionEnd = target.selectionEnd ?? selectionStart
+
+    const SPECIAL_EM_SPACE = '\u2003'
+    const updatedValue =
+      currentValue.slice(0, selectionStart) +
+      SPECIAL_EM_SPACE +
+      currentValue.slice(selectionEnd)
+
+    void setFieldValue('journeyCustomizationDescription', updatedValue)
+
+    // Restore caret position after React re-renders the controlled value
+    const newCaretPosition = selectionStart + SPECIAL_EM_SPACE.length
+    requestAnimationFrame(() => {
+      try {
+        target.setSelectionRange(newCaretPosition, newCaretPosition)
+      } catch {
+        // noop if element is not focusable
+      }
+    })
+  }
+
   const handleRefresh = (): void => {
     const formattedCustomizationText = formatTemplateCustomizationString(
       getTemplateCustomizationFields(journey),
@@ -61,6 +90,7 @@ export function CustomizeTemplate(): ReactElement {
         multiline
         value={journeyCustomizationDescription}
         onChange={handleChange}
+        onKeyDown={handleKeyDown}
         variant="outlined"
       />
     </Box>

apps/journeys-admin/src/components/Editor/Editor.stories.tsx

@@ -16,7 +16,7 @@ import { Dialog } from '@core/shared/ui/Dialog'
 import { TabPanel, tabA11yProps } from '@core/shared/ui/TabPanel'
 
 import { JourneyFeature } from '../../../../../../../__generated__/JourneyFeature'
-import { JourneyCustomizationFieldUpdate } from '../../../../../../../__generated__/JourneyCustomizationFieldUpdate'
+import { JourneyCustomizationDescriptionUpdate } from '../../../../../../../__generated__/JourneyCustomizationDescriptionUpdate'
 import { useJourneyUpdateMutation } from '../../../../../../libs/useJourneyUpdateMutation'
 
 import { AboutTabPanel } from './AboutTabPanel'
@@ -35,8 +35,11 @@ export const JOURNEY_FEATURE_UPDATE = gql`
   }
 `
 
-export const JOURNEY_CUSTOMIZATION_FIELD_UPDATE = gql`
-  mutation JourneyCustomizationFieldUpdate($journeyId: ID!, $string: String!) {
+export const JOURNEY_CUSTOMIZATION_DESCRIPTION_UPDATE = gql`
+  mutation JourneyCustomizationDescriptionUpdate(
+    $journeyId: ID!
+    $string: String!
+  ) {
     journeyCustomizationFieldPublisherUpdate(
       journeyId: $journeyId
       string: $string
@@ -63,9 +66,9 @@ export function TemplateSettingsDialog({
   const { journey } = useJourney()
   const [journeySettingsUpdate] = useJourneyUpdateMutation()
   const [journeyFeature] = useMutation<JourneyFeature>(JOURNEY_FEATURE_UPDATE)
-  const [journeyCustomizationFieldUpdate] =
-    useMutation<JourneyCustomizationFieldUpdate>(
-      JOURNEY_CUSTOMIZATION_FIELD_UPDATE
+  const [journeyCustomizationDescriptionUpdate] =
+    useMutation<JourneyCustomizationDescriptionUpdate>(
+      JOURNEY_CUSTOMIZATION_DESCRIPTION_UPDATE
     )
   const { enqueueSnackbar } = useSnackbar()
 
@@ -128,7 +131,7 @@ export function TemplateSettingsDialog({
           }
         }
       })
-      await journeyCustomizationFieldUpdate({
+      await journeyCustomizationDescriptionUpdate({
         variables: {
           journeyId: journey.id,
           string: values.journeyCustomizationDescription

apps/journeys-admin/src/components/Editor/Slider/Settings/SocialDetails/SocialDetails.stories.tsx

@@ -52,7 +52,7 @@ export function MultiStepForm(): ReactElement {
     <Container
       maxWidth="lg"
       sx={{
-        height: '100svh',
+        height: '100%',
         width: '100%',
         backgroundColor: 'background.paper'
       }}