From a526f8ba6011e2b467312da0fe926b0c28c3a485 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Tue, 17 Mar 2020 09:26:37 +0100
Subject: [PATCH 1/2] fix: new component for cms content

---
 api/composables.api.md                        | 13 +++++
 api/shopware-6-client.api.md                  |  2 +
 .../components/cms/cmsNameMapper.js           | 37 +++++++------
 .../components/cms/elements/SwImage.vue       |  4 --
 .../cms/elements/SwImageBubbleRow.vue         | 53 +++++++++++++++++++
 packages/default-theme/helpers/index.js       | 22 +++++++-
 packages/default-theme/pages/_.vue            |  4 --
 7 files changed, 111 insertions(+), 24 deletions(-)
 create mode 100644 packages/default-theme/components/cms/elements/SwImageBubbleRow.vue

diff --git a/api/composables.api.md b/api/composables.api.md
index 0d261194e..1b2ca4fa4 100644
--- a/api/composables.api.md
+++ b/api/composables.api.md
@@ -104,6 +104,19 @@ export interface UseProductListing {
 // @alpha (undocumented)
 export const useProductListing: (initialProducts?: Product[]) => UseProductListing;
 
+// @alpha (undocumented)
+export interface UseProductSearch {
+    // (undocumented)
+    [x: string]: any;
+    // (undocumented)
+    error: Ref<any>;
+    // (undocumented)
+    loading: Ref<boolean>;
+}
+
+// @alpha (undocumented)
+export const useProductSearch: () => UseProductSearch;
+
 // @alpha (undocumented)
 export interface UseSalutations {
     // (undocumented)
diff --git a/api/shopware-6-client.api.md b/api/shopware-6-client.api.md
index 14f2e46ee..8af412e5e 100644
--- a/api/shopware-6-client.api.md
+++ b/api/shopware-6-client.api.md
@@ -240,6 +240,8 @@ export interface ShopwareParams {
     page?: number;
     // (undocumented)
     sort?: string;
+    // (undocumented)
+    term?: string;
 }
 
 // @alpha
diff --git a/packages/default-theme/components/cms/cmsNameMapper.js b/packages/default-theme/components/cms/cmsNameMapper.js
index e6e31430e..bb780c846 100644
--- a/packages/default-theme/components/cms/cmsNameMapper.js
+++ b/packages/default-theme/components/cms/cmsNameMapper.js
@@ -1,19 +1,26 @@
 const slotsMap = {
-  "product-box": "CmsSwProductCart",
-  "product-slider": "SwProductSlider",
-  image: "SwImage",
-  text: "SwTextSlot",
-  "vimeo-video": "SwVimeoVideo",
-  "youtube-video": "SwYoutubeVideo",
-  "product-listing": "SwProductListingSlot",
-  "category-navigation": "SwCategoryNavigationSlot", // waiting for navigation hydration, and domething wrong with accordion
-  "sidebar-filter": "SwCategorySidebarFilter"
-};
+  'product-box': 'CmsSwProductCart',
+  'product-slider': 'SwProductSlider',
+  image: 'SwImage',
+  text: 'SwTextSlot',
+  'vimeo-video': 'SwVimeoVideo',
+  'youtube-video': 'SwYoutubeVideo',
+  'product-listing': 'SwProductListingSlot',
+  'category-navigation': 'SwCategoryNavigationSlot', // waiting for navigation hydration, and domething wrong with accordion
+  'sidebar-filter': 'SwCategorySidebarFilter',
+  'image-bubble-row': 'SwImageBubbleRow'
+}
+
+const excludedSlots = ['image-bubble-row']
 
 export function getComponentBy(content) {
-  if (!content) return;
-  const isSlot = !!content.slot;
-  let componentName = isSlot ? slotsMap[content.type] : "SwSlots";
-  if (!componentName) componentName = "SwNoComponent";
-  return () => import(`@shopware-pwa/default-theme/components/cms/elements/${componentName}`);
+  if (!content) return
+  const isSlot =
+    !!content.slot || !!excludedSlots.find(slot => slot === content.type)
+  let componentName = isSlot ? slotsMap[content.type] : 'SwSlots'
+  if (!componentName) componentName = 'SwNoComponent'
+  return () =>
+    import(
+      `@shopware-pwa/default-theme/components/cms/elements/${componentName}`
+    )
 }
diff --git a/packages/default-theme/components/cms/elements/SwImage.vue b/packages/default-theme/components/cms/elements/SwImage.vue
index 2737fb832..83caa6150 100644
--- a/packages/default-theme/components/cms/elements/SwImage.vue
+++ b/packages/default-theme/components/cms/elements/SwImage.vue
@@ -45,8 +45,4 @@ export default {
   display: flex;
   justify-content: center;
 }
-
-::v-deep .sf-image__img {
-  width: 100%;
-}
 </style>
\ No newline at end of file
diff --git a/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue b/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue
new file mode 100644
index 000000000..86940a3b7
--- /dev/null
+++ b/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="sw-image-bubble-row">
+    <SwImage v-for="image in slots.slots" :key="image.id" :content="image"/>
+  </div>
+</template>
+
+<script>
+import SwImage from "./SwImage";
+import helpers from '@shopware-pwa/default-theme/helpers'
+import { reactive } from "@vue/composition-api";
+
+export default {
+  name: 'SwImageBubbleRow',
+  components: {
+    SwImage,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const slots = reactive(helpers.setContentOrder(props.content))
+    return {slots}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@storefront-ui/vue/styles.scss';
+
+.sw-image-bubble-row {
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacer-extra-big) 0;
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}
+::v-deep .sf-image {
+  border-radius: 50%;
+  margin: var(--spacer-small);
+  & img {
+    height: 300px;
+    width: 300px;
+    object-fit: cover;
+  }
+
+}
+</style>
diff --git a/packages/default-theme/helpers/index.js b/packages/default-theme/helpers/index.js
index f14b44abf..e4c932663 100644
--- a/packages/default-theme/helpers/index.js
+++ b/packages/default-theme/helpers/index.js
@@ -14,7 +14,27 @@ const formatPrice = (
 const formatDate = (date, format = `DD-MM-YYYY H:m:s`) =>
   dayjs(date).format(format)
 
+const setContentOrder = content => {
+  const newContent = JSON.parse(JSON.stringify(content))
+  const slotsArr = []
+  newContent.slots.forEach(slot => {
+    switch (slot.slot) {
+      case 'left':
+        slotsArr[0] = slot
+        break
+      case 'right':
+        slotsArr[2] = slot
+        break
+      default:
+        slotsArr[1] = slot
+    }
+  })
+  newContent.slots = slotsArr
+  return newContent
+}
+
 export default {
   formatPrice,
-  formatDate
+  formatDate,
+  setContentOrder
 }
diff --git a/packages/default-theme/pages/_.vue b/packages/default-theme/pages/_.vue
index 85236e30f..e321e8c6e 100644
--- a/packages/default-theme/pages/_.vue
+++ b/packages/default-theme/pages/_.vue
@@ -52,10 +52,6 @@ export default {
       cmsPage
     }
   },
-  data() {
-    return {
-    }
-  },
   computed: {
     getComponent() {
       return this.page && getComponentBy(this.page.resourceType);

From f5e1c98e355492bb4f081d6ff8e120dee41df56a Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Wed, 18 Mar 2020 10:22:46 +0100
Subject: [PATCH 2/2] fix: move setContentOrder function from helpers to
 cmsNameMapper

---
 .../components/cms/cmsNameMapper.js           | 19 ++++++++++++++++
 .../cms/elements/SwImageBubbleRow.vue         |  4 ++--
 packages/default-theme/helpers/index.js       | 22 +------------------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/default-theme/components/cms/cmsNameMapper.js b/packages/default-theme/components/cms/cmsNameMapper.js
index bb780c846..c24b6426e 100644
--- a/packages/default-theme/components/cms/cmsNameMapper.js
+++ b/packages/default-theme/components/cms/cmsNameMapper.js
@@ -24,3 +24,22 @@ export function getComponentBy(content) {
       `@shopware-pwa/default-theme/components/cms/elements/${componentName}`
     )
 }
+
+export const setContentOrder = content => {
+  const newContent = JSON.parse(JSON.stringify(content))
+  const slotsArr = []
+  newContent.slots.forEach(slot => {
+    switch (slot.slot) {
+      case 'left':
+        slotsArr[0] = slot
+        break
+      case 'right':
+        slotsArr[2] = slot
+        break
+      default:
+        slotsArr[1] = slot
+    }
+  })
+  newContent.slots = slotsArr
+  return newContent
+}
diff --git a/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue b/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue
index 86940a3b7..df48cbee3 100644
--- a/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue
+++ b/packages/default-theme/components/cms/elements/SwImageBubbleRow.vue
@@ -6,7 +6,7 @@
 
 <script>
 import SwImage from "./SwImage";
-import helpers from '@shopware-pwa/default-theme/helpers'
+import { setContentOrder } from "../cmsNameMapper";
 import { reactive } from "@vue/composition-api";
 
 export default {
@@ -21,7 +21,7 @@ export default {
     }
   },
   setup(props) {
-    const slots = reactive(helpers.setContentOrder(props.content))
+    const slots = reactive(setContentOrder(props.content))
     return {slots}
   }
 };
diff --git a/packages/default-theme/helpers/index.js b/packages/default-theme/helpers/index.js
index e4c932663..f14b44abf 100644
--- a/packages/default-theme/helpers/index.js
+++ b/packages/default-theme/helpers/index.js
@@ -14,27 +14,7 @@ const formatPrice = (
 const formatDate = (date, format = `DD-MM-YYYY H:m:s`) =>
   dayjs(date).format(format)
 
-const setContentOrder = content => {
-  const newContent = JSON.parse(JSON.stringify(content))
-  const slotsArr = []
-  newContent.slots.forEach(slot => {
-    switch (slot.slot) {
-      case 'left':
-        slotsArr[0] = slot
-        break
-      case 'right':
-        slotsArr[2] = slot
-        break
-      default:
-        slotsArr[1] = slot
-    }
-  })
-  newContent.slots = slotsArr
-  return newContent
-}
-
 export default {
   formatPrice,
-  formatDate,
-  setContentOrder
+  formatDate
 }