From 729d03a5d5555a67d420cdb0c89a0cb4ce907831 Mon Sep 17 00:00:00 2001
From: Maciek Kucmus <maciejkucmus@gmail.com>
Date: Mon, 20 Nov 2023 12:45:45 +0100
Subject: [PATCH] fix: css classes and visibility for CMS layout element (#460)

* fix(helpers): merging visibility and classes

* feat(cms-base): use css classes and visibility on cms layout level

* chore: changeset
---
 .changeset/curvy-games-unite.md               |  5 +++++
 .changeset/plenty-dancers-live.md             |  5 +++++
 .../components/public/cms/CmsPage.vue         |  2 +-
 .../public/cms/section/CmsSectionDefault.vue  |  7 +++++--
 .../src/cms/getCmsLayoutConfiguration.ts      | 20 +++++++++++++++----
 5 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/curvy-games-unite.md
 create mode 100644 .changeset/plenty-dancers-live.md

diff --git a/.changeset/curvy-games-unite.md b/.changeset/curvy-games-unite.md
new file mode 100644
index 000000000..44a906106
--- /dev/null
+++ b/.changeset/curvy-games-unite.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/helpers-next": patch
+---
+
+Proper visibility and css classes merging
diff --git a/.changeset/plenty-dancers-live.md b/.changeset/plenty-dancers-live.md
new file mode 100644
index 000000000..307fa1fc4
--- /dev/null
+++ b/.changeset/plenty-dancers-live.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": patch
+---
+
+Apply visibility and css classes for CMS layout
diff --git a/packages/cms-base/components/public/cms/CmsPage.vue b/packages/cms-base/components/public/cms/CmsPage.vue
index 67eb2ad4c..a4974e866 100644
--- a/packages/cms-base/components/public/cms/CmsPage.vue
+++ b/packages/cms-base/components/public/cms/CmsPage.vue
@@ -45,7 +45,7 @@ const DynamicRender = () => {
       return h(componentObject.component, {
         content: componentObject.section,
         class: {
-          [cssClasses ?? ""]: true,
+          ...cssClasses,
           "max-w-screen-2xl mx-auto": layoutStyles?.sizingMode === "boxed",
         },
         style: {
diff --git a/packages/cms-base/components/public/cms/section/CmsSectionDefault.vue b/packages/cms-base/components/public/cms/section/CmsSectionDefault.vue
index e178b8f3b..8688e37b2 100644
--- a/packages/cms-base/components/public/cms/section/CmsSectionDefault.vue
+++ b/packages/cms-base/components/public/cms/section/CmsSectionDefault.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { CmsSectionDefault } from "@shopware-pwa/composables-next";
+import { getCmsLayoutConfiguration } from "@shopware-pwa/helpers-next";
 
-defineProps<{
+const props = defineProps<{
   content: CmsSectionDefault;
 }>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 </script>
 
 <template>
-  <div class="cms-section-default">
+  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       class="overflow-auto"
diff --git a/packages/helpers/src/cms/getCmsLayoutConfiguration.ts b/packages/helpers/src/cms/getCmsLayoutConfiguration.ts
index dda44b6ff..fa35f2f80 100644
--- a/packages/helpers/src/cms/getCmsLayoutConfiguration.ts
+++ b/packages/helpers/src/cms/getCmsLayoutConfiguration.ts
@@ -19,7 +19,9 @@ export type LayoutConfiguration = {
     marginRight?: string | null | undefined;
     marginTop?: string | null | undefined;
   };
-  cssClasses: string | null;
+  cssClasses: {
+    [cssClass: string]: boolean;
+  } | null;
 };
 
 // predicate types
@@ -94,11 +96,21 @@ export function getCmsLayoutConfiguration(
       layoutStyles: {},
     } as LayoutConfiguration;
   }
-
   const visibilityCssClasses = getVisibilityClasses(content);
+  // convert css classes string into object in format { "css-class-name": true }
+  const mappedCssClasses =
+    typeof content.cssClass === "string"
+      ? {
+          ...content.cssClass.split(" ").reduce((accumulator, cssClass) => {
+            return { ...accumulator, [cssClass]: true };
+          }, {}),
+        }
+      : {};
+
+  // append visibility classes to the css classes object
   const cssClasses = Object.keys(visibilityCssClasses).length
-    ? Object.assign({}, content.cssClass, visibilityCssClasses)
-    : content.cssClass;
+    ? Object.assign({}, mappedCssClasses, visibilityCssClasses)
+    : mappedCssClasses;
 
   return {
     cssClasses,