Update dynamic component handling for illustrations on split layout

client/src/helpers/app-flavor.constants.ts

@@ -20,7 +20,7 @@ export const defaultFlavorValues: FlavorValues = {
   showInstrumentFilterSidebar: true,
   showPortfolio: true,
   showEHB: true,
-  helloIllustration: () => import('@/components/illustrations/HelloIllustration.vue'),
+  helloIllustration: 'HelloIllustration',
 };
 
 export const myKvValues: FlavorValues = {
@@ -43,18 +43,18 @@ export const myKvValues: FlavorValues = {
   showInstrumentFilterSidebar: true,
   showPortfolio: true,
   showEHB: false,
-  helloIllustration: () => import('@/components/illustrations/HelloMyKVIllustration.vue'),
+  helloIllustration: 'HelloMyKvIllustration',
 };
 
 export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dhf',
   appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
   textAppName: 'myDHF',
-  helloIllustration: () => import('@/components/illustrations/HelloMyDHFIllustration.vue'),
+  helloIllustration: 'HelloMyDHFIllustration',
 });
 export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dha',
   appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
   textAppName: 'myDHA',
-  helloIllustration: () => import('@/components/illustrations/HelloMyDHAIllustration.vue'),
+  helloIllustration: 'HelloMyDHAIllustration',
 });

client/src/helpers/types.ts

@@ -14,5 +14,5 @@ export interface FlavorValues {
   showInstrumentFilterSidebar: boolean;
   showPortfolio: boolean;
   showEHB: boolean;
-  helloIllustration: () => Promise<any>;
+  helloIllustration: string;
 }

client/src/layouts/SplitLayout.vue

@@ -9,32 +9,46 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineAsyncComponent } from 'vue';
 import flavorValues from '@/helpers/app-flavor';
-const ContentsIllustration = defineAsyncComponent(() =>
-  import('@/components/illustrations/ContentsIllustration.vue')
+const ContentsIllustration = defineAsyncComponent(() => import('@/components/illustrations/ContentsIllustration.vue'));
+const PortfolioIllustration = defineAsyncComponent(
+  () => import('@/components/illustrations/PortfolioIllustration.vue')
 );
-const PortfolioIllustration = defineAsyncComponent(() =>
-  import('@/components/illustrations/PortfolioIllustration.vue')
+const RoomsIllustration = defineAsyncComponent(() => import('@/components/illustrations/RoomsIllustration.vue'));
+const HelloIllustration = defineAsyncComponent(() => import('@/components/illustrations/HelloIllustration.vue'));
+const HelloMyKVIllustration = defineAsyncComponent(
+  () => import('@/components/illustrations/HelloMyKVIllustration.vue')
 );
-const RoomsIllustration = defineAsyncComponent(() =>
-  import('@/components/illustrations/RoomsIllustration.vue')
+const HelloMyDHAIllustration = defineAsyncComponent(
+  () => import('@/components/illustrations/HelloMyDHAIllustration.vue')
+);
+const HelloMyDHFIllustration = defineAsyncComponent(
+  () => import('@/components/illustrations/HelloMyDHFIllustration.vue')
 );
 
 const Hello = flavorValues.helloIllustration;
+console.log(Hello);
 
 export default {
   components: {
     contents: ContentsIllustration,
     portfolio: PortfolioIllustration,
     rooms: RoomsIllustration,
-    hello: Hello,
+    HelloIllustration,
+    HelloMyKVIllustration,
+    HelloMyDHAIllustration,
+    HelloMyDHFIllustration,
   },
 
   computed: {
     illustration() {
-      return this.$route.meta.illustration;
+      const illustration = this.$route.meta.illustration;
+      if (illustration === 'hello') {
+        return Hello;
+      }
+      return illustration;
     },
     illustrationAlignment() {
       return this.$route.meta.illustrationAlign