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 · c94e50b · c94e50b
1 parent 9604dfd
commit c94e50b
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 16 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/...tend/src/components/pages/admin/callouts/tabs/ContentTab/sidebar-tabs/IntroMessageTab.vue b/...tend/src/components/pages/admin/callouts/tabs/ContentTab/sidebar-tabs/IntroMessageTab.vue
@@ -0,0 +1,29 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="flex h-full flex-col overflow-y-hidden">
+    <AppFormSection>
+      <!-- TODO: Change locale key path to calloutBuilder.intro.label -->
+      <LocaleRichTextEditor
+        v-model="data.introText"
+        :locales="locales"
+        :label="t('createCallout.tabs.titleAndImage.inputs.intro.label')"
+        required
+      />
+    </AppFormSection>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import AppFormSection from '@components/forms/AppFormSection.vue';
+import LocaleRichTextEditor from '@components/forms/LocaleRichTextEditor.vue';
+import type { IntroMessageTabProps } from '../sidebar-tabs.interface';
+
+interface Props {
+  data: IntroMessageTabProps;
+  locales: string[];
+}
+
+defineProps<Props>();
+const { t } = useI18n();
+</script>
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,
@@ -196,7 +199,6 @@ export function convertCalloutToTabs(
       title: variants.title,
       description: variants.excerpt,
       coverImageURL: callout?.image || '',
-      introText: variants.intro,
       useCustomSlug: !!callout,
       autoSlug: '',
       slug: callout?.slug || '',
@@ -273,7 +275,7 @@ function convertVariantsForCallout(
     variants[variant] = {
       title: steps.titleAndImage.title[variant] || '',
       excerpt: steps.titleAndImage.description[variant] || '',
-      intro: steps.titleAndImage.introText[variant] || '',
+      intro: steps.content.sidebarTabs.intro.introText[variant] || '',
       ...(steps.content.sidebarTabs.endMessage.whenFinished === 'redirect'
         ? {
             thanksText: '',