feat(callout-admin-ux): Moved intro message to sidebar tabs

Introduce an intro message tab in the sidebar for callouts. This change includes the addition of a new `IntroMessageTab` component and updates to the sidebar tabs interface to accommodate the new tab. The intro text is now editable via a rich text editor, enhancing the user experience by allowing customization of introductory content.
beabee-communityrm · Feb 18, 2025 · 81ea3aa · 81ea3aa
1 parent 9604dfd
commit 81ea3aa
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/apps/frontend/src/components/pages/admin/callouts/callouts.interface.ts b/apps/frontend/src/components/pages/admin/callouts/callouts.interface.ts
@@ -39,7 +39,6 @@ export interface TitleAndImageTabProps {
   title: LocaleProp;
   description: LocaleProp;
   coverImageURL: string;
-  introText: LocaleProp;
   autoSlug: string;
   useCustomSlug: boolean;
   slug: string;

diff --git a/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/ContentTab.vue b/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/ContentTab.vue
@@ -105,6 +105,7 @@ import CalloutSlideItem from '../../CalloutSlideItem.vue';
 import SidebarTabs from './SidebarTabs.vue';
 import ContentFormTab from './sidebar-tabs/ContentFormTab.vue';
 import EndMessageTab from './sidebar-tabs/EndMessageTab.vue';
+import IntroMessageTab from './sidebar-tabs/IntroMessageTab.vue';
 
 import { getSlideSchema } from '@utils/callouts';
 
@@ -158,6 +159,13 @@ const sidebarTabs = reactive<SidebarTabsType>({
     component: markRaw(ContentFormTab),
     data: props.data.sidebarTabs.content,
   },
+  intro: {
+    name: t('createCallout.tabs.intro.title'),
+    validated: false,
+    error: false,
+    component: markRaw(IntroMessageTab),
+    data: props.data.sidebarTabs.intro,
+  },
   endMessage: {
     name: t('createCallout.tabs.endMessage.title'),
     validated: false,

diff --git a/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/SidebarTabs.vue b/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/SidebarTabs.vue
@@ -48,6 +48,11 @@ const allTabItems = computed<TabItem[]>(() => [
     to: '',
     hidden: true,
   },
+  {
+    id: props.sidebarTabs.intro.name,
+    label: props.sidebarTabs.intro.name,
+    to: '',
+  },
   {
     id: props.sidebarTabs.endMessage.name,
     label: props.sidebarTabs.endMessage.name,

diff --git a/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/sidebar-tabs.interface.ts b/apps/frontend/src/components/pages/admin/callouts/tabs/ContentTab/sidebar-tabs.interface.ts
@@ -35,6 +35,14 @@ export interface EndMessageTabProps {
   thankYouRedirect: LocaleProp;
 }
 
+/**
+ * Props for the intro message tab in the sidebar
+ */
+export interface IntroMessageTabProps {
+  /** Intro text shown at the beginning of the form */
+  introText: LocaleProp;
+}
+
 /**
  * Combined props for all sidebar tabs
  */
@@ -47,6 +55,7 @@ export interface SidebarTabsProps {
     hasLocales: boolean;
     locales: string[];
   };
+  intro: IntroMessageTabProps;
   endMessage: EndMessageTabProps;
 }
 

diff --git a/apps/frontend/src/components/pages/admin/callouts/tabs/TitleAndImageTab.vue b/apps/frontend/src/components/pages/admin/callouts/tabs/TitleAndImageTab.vue
@@ -28,14 +28,6 @@
         required
       />
     </AppFormSection>
-    <AppFormSection :help="inputT('intro.help')">
-      <LocaleRichTextEditor
-        v-model="data.introText"
-        :locales="tabs.settings.data.locales"
-        :label="inputT('intro.label')"
-        required
-      />
-    </AppFormSection>
     <AppFormSection v-if="canEditSlug" :help="inputT('slug.help')">
       <AppLabel :label="inputT('slug.label')" required />
       <AppRadioGroup
@@ -106,7 +98,6 @@ import slugify from 'slugify';
 import AppFormSection from '../../../../forms/AppFormSection.vue';
 import LocaleTextArea from '@components/forms/LocaleTextArea.vue';
 import LocaleInput from '@components/forms/LocaleInput.vue';
-import LocaleRichTextEditor from '@components/forms/LocaleRichTextEditor.vue';
 
 const emit = defineEmits(['update:error', 'update:validated']);
 const props = defineProps<{

diff --git a/apps/frontend/src/utils/callouts.ts b/apps/frontend/src/utils/callouts.ts
@@ -161,6 +161,10 @@ export function convertCalloutToTabs(
     ).componentText,
     sidebarTabs: {
       content: {
+        currentSlide: convertSlidesForSteps(
+          callout?.formSchema.slides,
+          callout?.variants
+        ).slides[0],
         slides: convertSlidesForSteps(
           callout?.formSchema.slides,
           callout?.variants
@@ -169,10 +173,6 @@ export function convertCalloutToTabs(
           callout?.formSchema.slides,
           callout?.variants
         ).componentText,
-        currentSlide: convertSlidesForSteps(
-          callout?.formSchema.slides,
-          callout?.variants
-        ).slides[0],
         showAdvanced: false,
         hasLocales: callout?.variants
           ? Object.keys(callout.variants).length > 1
@@ -181,6 +181,9 @@ export function convertCalloutToTabs(
           ? Object.keys(callout.variants).filter((v) => v !== 'default')
           : [],
       },
+      intro: {
+        introText: variants.intro,
+      },
       endMessage: {
         whenFinished: callout?.thanksRedirect ? 'redirect' : 'message',
         thankYouTitle: variants.thanksTitle,