From a1ea232bb4934869d79702eecb1663228a068d9d Mon Sep 17 00:00:00 2001
From: Heitor Ramon Ribeiro <heitor.ramon@gmail.com>
Date: Wed, 23 Mar 2022 18:22:24 -0300
Subject: [PATCH] refactor(theme): update Storefront-UI to 0.13.0

---
 docs/guide/configuration.md                   |  3 +-
 .../Header/SearchBar/SearchResults.vue        | 72 +----------------
 packages/theme/components/HeaderLogo.vue      |  6 +-
 packages/theme/components/InstagramFeed.vue   | 57 +++++++------
 .../theme/components/MobileStoreBanner.vue    | 52 +++++++-----
 .../Products/GroupedProductSelector.vue       |  7 +-
 .../theme/components/ProductsCarousel.vue     | 37 ++-------
 packages/theme/components/StoreSwitcher.vue   |  8 +-
 .../components/StoreSwitcher/StoresModal.vue  | 11 ++-
 packages/theme/components/WishlistSidebar.vue |  5 +-
 packages/theme/getters/productGetters.ts      |  4 +-
 .../theme/modules/catalog/pages/default.vue   | 62 ++------------
 packages/theme/package.json                   |  2 +-
 packages/theme/pages/Checkout/Payment.vue     |  5 +-
 packages/theme/pages/MyAccount.vue            | 18 +----
 packages/theme/pages/MyAccount/MyWishlist.vue | 68 ++--------------
 packages/theme/pages/Product.vue              |  6 +-
 yarn.lock                                     | 81 +++++++------------
 18 files changed, 145 insertions(+), 359 deletions(-)

diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 94f18659d..d6ae01c7d 100644
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -130,7 +130,8 @@ return {
 ```
 3. Use the `getMagentoImage` method in template like this:
 ```vue
-<nuxt-img
+<SfImage
+  image-tag="nuxt-img"
   :src="getMagentoImage(wishlistGetters.getItemImage(product))"
   :alt="wishlistGetters.getItemName(product)"
   :width="140"
diff --git a/packages/theme/components/Header/SearchBar/SearchResults.vue b/packages/theme/components/Header/SearchBar/SearchResults.vue
index 213e5df07..197c5721e 100644
--- a/packages/theme/components/Header/SearchBar/SearchResults.vue
+++ b/packages/theme/components/Header/SearchBar/SearchResults.vue
@@ -65,6 +65,7 @@
                   v-for="(product, index) in products"
                   :key="index"
                   class="result-card"
+                  image-tag="nuxt-img"
                   :regular-price="$fc(productGetters.getPrice(product).regular)"
                   :max-rating="5"
                   :score-rating="productGetters.getAverageRating(product)"
@@ -92,40 +93,7 @@
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
                   @click:wishlist="addItemToWishlist(product)"
-                >
-                  <template #image="imageSlotProps">
-                    <SfButton
-                      :link="imageSlotProps.link"
-                      class="sf-button--pure sf-product-card__link"
-                      data-testid="product-link"
-                      aria-label="Go To Product"
-                      v-on="$listeners"
-                    >
-                      <template v-if="Array.isArray(imageSlotProps.image)">
-                        <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(
-                            0,
-                            2
-                          )"
-                          :key="key"
-                          class="sf-product-card__picture"
-                          :src="picture"
-                          :alt="imageSlotProps.title"
-                          :width="imageSlotProps.imageWidth"
-                          :height="imageSlotProps.imageHeight"
-                        />
-                      </template>
-                      <nuxt-img
-                        v-else
-                        class="sf-product-card__image lol"
-                        :src="imageSlotProps.image"
-                        :alt="imageSlotProps.title"
-                        :width="imageSlotProps.imageWidth"
-                        :height="imageSlotProps.imageHeight"
-                      />
-                    </SfButton>
-                  </template>
-                </SfProductCard>
+                />
               </div>
             </SfScrollable>
             <div class="results--mobile smartphone-only">
@@ -133,6 +101,7 @@
                 v-for="(product, index) in products"
                 :key="index"
                 class="result-card"
+                image-tag="nuxt-img"
                 :regular-price="$fc(productGetters.getPrice(product).regular)"
                 :max-rating="5"
                 :score-rating="productGetters.getAverageRating(product)"
@@ -157,40 +126,7 @@
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"
                 @click:wishlist="addItemToWishlist(product)"
-              >
-                <template #image="imageSlotProps">
-                  <SfButton
-                    :link="imageSlotProps.link"
-                    class="sf-button--pure sf-product-card__link"
-                    data-testid="product-link"
-                    aria-label="Go To Product"
-                    v-on="$listeners"
-                  >
-                    <template v-if="Array.isArray(imageSlotProps.image)">
-                      <nuxt-img
-                        v-for="(picture, key) in imageSlotProps.image.slice(
-                          0,
-                          2
-                        )"
-                        :key="key"
-                        class="sf-product-card__picture"
-                        :src="picture"
-                        :alt="imageSlotProps.title"
-                        :width="imageSlotProps.imageWidth"
-                        :height="imageSlotProps.imageHeight"
-                      />
-                    </template>
-                    <nuxt-img
-                      v-else
-                      class="sf-product-card__image lol"
-                      :src="imageSlotProps.image"
-                      :alt="imageSlotProps.title"
-                      :width="imageSlotProps.imageWidth"
-                      :height="imageSlotProps.imageHeight"
-                    />
-                  </SfButton>
-                </template>
-              </SfProductCard>
+              />
             </div>
           </SfMegaMenuColumn>
           <div class="action-buttons smartphone-only">
diff --git a/packages/theme/components/HeaderLogo.vue b/packages/theme/components/HeaderLogo.vue
index eef08f867..5a155e670 100644
--- a/packages/theme/components/HeaderLogo.vue
+++ b/packages/theme/components/HeaderLogo.vue
@@ -3,8 +3,9 @@
     :to="localePath('/')"
     class="sf-header__logo"
   >
-    <nuxt-img
+    <SfImage
       v-if="logoSrc"
+      image-tag="nuxt-img"
       :src="logoSrc"
       :alt="logoAlt"
       :title="logoAlt"
@@ -22,6 +23,7 @@
 </template>
 
 <script lang="ts">
+import { SfImage } from '@storefront-ui/vue';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
 import { useConfig } from '~/composables';
 import { storeConfigGetters } from '~/getters';
@@ -29,7 +31,7 @@ import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
   name: 'HeaderLogo',
-  components: { SvgImage },
+  components: { SvgImage, SfImage },
   setup() {
     const { config } = useConfig();
 
diff --git a/packages/theme/components/InstagramFeed.vue b/packages/theme/components/InstagramFeed.vue
index 9ff01accf..a1f0bbf5e 100644
--- a/packages/theme/components/InstagramFeed.vue
+++ b/packages/theme/components/InstagramFeed.vue
@@ -7,37 +7,41 @@
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <nuxt-img
-            v-if="isMobile"
+          <SfImage
             src="/homepage/imageAm.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="smartphone-only"
             :width="160"
             :height="160"
           />
-          <nuxt-img
-            v-else
+          <SfImage
             src="/homepage/imageAd.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="desktop-only"
             :width="470"
             :height="470"
           />
         </div>
         <div class="grid__col small">
-          <nuxt-img
-            v-if="isMobile"
+          <SfImage
             src="/homepage/imageBm.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="smartphone-only"
             :width="160"
             :height="160"
           />
-          <nuxt-img
-            v-else
+          <SfImage
             src="/homepage/imageCd.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="desktop-only"
             :width="470"
             :height="160"
           />
@@ -45,37 +49,41 @@
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <nuxt-img
-            v-if="isMobile"
+          <SfImage
             src="/homepage/imageCm.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="smartphone-only"
             :width="160"
             :height="160"
           />
-          <nuxt-img
-            v-else
+          <SfImage
             src="/homepage/imageBd.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="desktop-only"
             :width="470"
             :height="160"
           />
         </div>
         <div class="grid__col">
-          <nuxt-img
-            v-if="isMobile"
+          <SfImage
             src="/homepage/imageDm.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="smartphone-only"
             :width="160"
             :height="160"
           />
-          <nuxt-img
-            v-else
+          <SfImage
             src="/homepage/imageDd.webp"
             alt="katherina_trn"
             loading="lazy"
+            image-tag="nuxt-img"
+            class="desktop-only"
             :width="470"
             :height="470"
           />
@@ -87,26 +95,15 @@
 <script>
 import {
   SfSection,
+  SfImage,
 } from '@storefront-ui/vue';
-import {
-  mapMobileObserver,
-  unMapMobileObserver,
-} from '@storefront-ui/vue/src/utilities/mobile-observer.js';
-import { computed, defineComponent, onBeforeUnmount } from '@nuxtjs/composition-api';
+import { defineComponent } from '@nuxtjs/composition-api';
 
 export default defineComponent({
   name: 'InstagramFeed',
   components: {
     SfSection,
-  },
-  setup() {
-    const isMobile = computed(() => mapMobileObserver().isMobile.get());
-
-    onBeforeUnmount(() => {
-      unMapMobileObserver();
-    });
-
-    return { isMobile };
+    SfImage,
   },
 });
 </script>
diff --git a/packages/theme/components/MobileStoreBanner.vue b/packages/theme/components/MobileStoreBanner.vue
index c6c3eeb97..644874e63 100644
--- a/packages/theme/components/MobileStoreBanner.vue
+++ b/packages/theme/components/MobileStoreBanner.vue
@@ -6,29 +6,31 @@
     class="sf-banner--left desktop-only banner-app"
   >
     <template #call-to-action>
-      <div class="banner-app__call-to-action">
+      <div class="app-banner__call-to-action">
         <SfButton
-          class="banner-app__button sf-button--pure"
+          class="app-banner__button sf-banner__call-to-action"
           aria-label="Go to Apple Product"
-          @click="() => {}"
+          data-testid="banner-cta-button"
         >
-          <nuxt-img
+          <SfImage
             src="/homepage/apple.png"
             loading="lazy"
-            width="174"
-            height="57"
+            alt="Apple"
+            :width="134"
+            :height="44"
           />
         </SfButton>
         <SfButton
-          class="banner-app__button sf-button--pure"
+          class="app-banner__button sf-banner__call-to-action"
           aria-label="Go to Google Product"
-          @click="() => {}"
+          data-testid="banner-cta-button"
         >
-          <nuxt-img
+          <SfImage
             src="/homepage/google.png"
             loading="lazy"
-            width="174"
-            height="57"
+            alt="Google"
+            :width="134"
+            :height="44"
           />
         </SfButton>
       </div>
@@ -39,6 +41,7 @@
 import {
   SfBanner,
   SfButton,
+  SfImage,
 } from '@storefront-ui/vue';
 import { defineComponent } from '@nuxtjs/composition-api';
 
@@ -47,39 +50,44 @@ export default defineComponent({
   components: {
     SfBanner,
     SfButton,
+    SfImage,
   },
 });
 </script>
 <style lang="scss" scoped>
-
-.banner-app {
+.app-banner {
   --banner-title-margin: var(--spacer-base) 0 var(--spacer-xl) 0;
   --banner-padding: 0 0 var(--spacer-2xl);
   --banner-title-font-size: var(--h1-font-size);
   --banner-subtitle-font-size: var(--font-size--xl);
   --banner-title-font-weight: var(--font-weight--semibold);
   --banner-subtitle-font-weight: var(--font-weight--medium);
-  --banner-title-text-transform: capitalize;
   --banner-title-text-transform: none;
   --banner-background-size: contain;
   --banner-background-position: right;
+  &__title {
+    margin: var(--spacer-base) 0 var(--spacer-xl) 0;
+    font-size: var(--h1-font-size);
+    font-family: var(--font-family--secondary);
+    font-weight: var(--font-weight--semibold);
+    text-transform: capitalize;
+  }
   display: block;
   min-height: 26.25rem;
-  max-width: 77.5rem;
+  max-width: 65rem;
   margin: 0 auto;
-  padding: 5.625rem 31.25rem 0 5.625rem;
+  padding: 0 calc(25% + var(--spacer-2xl)) 0 var(--spacer-xl);
   &__call-to-action {
+    --button-background: transparent;
     display: flex;
-    flex-wrap: nowrap;
   }
   &__button {
-    --image-width: 10.875rem;
-    --image-height: 3.5625rem;
-    pointer-events: visible;
+    --button-padding: 0;
+    --button-width: 8.375rem;
+    --button-height: 2.75rem;
     & + & {
-      margin: 0 0 0 var(--spacer-base);
+      margin: 0 0 0 calc(var(--spacer-xl) / 2);
     }
   }
 }
-
 </style>
diff --git a/packages/theme/components/Products/GroupedProductSelector.vue b/packages/theme/components/Products/GroupedProductSelector.vue
index dac39009b..43745bb97 100644
--- a/packages/theme/components/Products/GroupedProductSelector.vue
+++ b/packages/theme/components/Products/GroupedProductSelector.vue
@@ -6,7 +6,8 @@
         :key="index"
         class="grouped_items--item"
       >
-        <nuxt-img
+        <SfImage
+          image-tag="nuxt-img"
           :src="
             getMagentoImage(
               productGetters.getProductThumbnailImage(groupedItem.product)
@@ -48,11 +49,12 @@ import {
   SfPrice,
   SfButton,
   SfQuantitySelector,
+  SfImage,
 } from '@storefront-ui/vue';
-import { productGetters } from '~/getters';
 import {
   computed, watch, ref, defineComponent,
 } from '@nuxtjs/composition-api';
+import { productGetters } from '~/getters';
 import { useCart, useImage } from '~/composables';
 import { productData } from '~/helpers/product/productData';
 
@@ -63,6 +65,7 @@ export default defineComponent({
     SfPrice,
     SfButton,
     SfQuantitySelector,
+    SfImage,
   },
   props: {
     canAddToCart: {
diff --git a/packages/theme/components/ProductsCarousel.vue b/packages/theme/components/ProductsCarousel.vue
index e62e85be6..0bd83a168 100644
--- a/packages/theme/components/ProductsCarousel.vue
+++ b/packages/theme/components/ProductsCarousel.vue
@@ -18,6 +18,7 @@
           class="carousel__item"
         >
           <SfProductCard
+            image-tag="nuxt-img"
             :title="productGetters.getName(product)"
             :image-width="imageSizes.productCard.width"
             :image-height="imageSizes.productCard.height"
@@ -45,37 +46,7 @@
             :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
             @click:wishlist="addItemToWishlist(product)"
             @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-          >
-            <template #image="imageSlotProps">
-              <SfButton
-                :link="imageSlotProps.link"
-                class="sf-button--pure sf-product-card__link"
-                data-testid="product-link"
-                aria-label="Go To Product"
-                v-on="$listeners"
-              >
-                <template v-if="Array.isArray(imageSlotProps.image)">
-                  <nuxt-img
-                    v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
-                    :key="key"
-                    class="sf-product-card__picture"
-                    :src="picture"
-                    :alt="imageSlotProps.title"
-                    :width="imageSlotProps.imageWidth"
-                    :height="imageSlotProps.imageHeight"
-                  />
-                </template>
-                <nuxt-img
-                  v-else
-                  class="sf-product-card__image lol"
-                  :src="imageSlotProps.image"
-                  :alt="imageSlotProps.title"
-                  :width="imageSlotProps.imageWidth"
-                  :height="imageSlotProps.imageHeight"
-                />
-              </SfButton>
-            </template>
-          </SfProductCard>
+          />
         </SfCarouselItem>
         <template #prev="prevArrow">
           <SfButton
@@ -115,10 +86,11 @@ import {
   SfSection,
   SfLoader,
   SfButton,
+  SfImage,
 } from '@storefront-ui/vue';
 
-import { productGetters } from '~/getters';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { productGetters } from '~/getters';
 import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useImage, useWishlist, useUser } from '~/composables';
 import SvgImage from '~/components/General/SvgImage.vue';
@@ -131,6 +103,7 @@ export default defineComponent({
     SfSection,
     SfLoader,
     SfButton,
+    SfImage,
     SvgImage,
   },
   props: {
diff --git a/packages/theme/components/StoreSwitcher.vue b/packages/theme/components/StoreSwitcher.vue
index 7d65ef3db..e2350d417 100644
--- a/packages/theme/components/StoreSwitcher.vue
+++ b/packages/theme/components/StoreSwitcher.vue
@@ -12,7 +12,8 @@
           v-if="storeConfigGetters.getLocale(storeConfig)"
           #icon
         >
-          <nuxt-img
+          <SfImage
+            image-tag="nuxt-img"
             :src="`/icons/langs/${storeConfigGetters.getLocale(
               storeConfig
             )}.webp`"
@@ -37,11 +38,11 @@
 
 <script>
 import LazyHydrate from 'vue-lazy-hydration';
-import { storeConfigGetters, storeGetters } from '~/getters';
 
-import { SfButton, SfCharacteristic } from '@storefront-ui/vue';
+import { SfButton, SfCharacteristic, SfImage } from '@storefront-ui/vue';
 
 import { ref, defineComponent } from '@nuxtjs/composition-api';
+import { storeConfigGetters, storeGetters } from '~/getters';
 import StoresModal from '~/components/StoreSwitcher/StoresModal.vue';
 import { useConfig } from '~/composables';
 
@@ -51,6 +52,7 @@ export default defineComponent({
     StoresModal,
     SfButton,
     SfCharacteristic,
+    SfImage,
     LazyHydrate,
   },
   setup() {
diff --git a/packages/theme/components/StoreSwitcher/StoresModal.vue b/packages/theme/components/StoreSwitcher/StoresModal.vue
index b4b238f9d..0f8f8f579 100644
--- a/packages/theme/components/StoreSwitcher/StoresModal.vue
+++ b/packages/theme/components/StoreSwitcher/StoresModal.vue
@@ -30,7 +30,8 @@
               <span>{{ storeConfigGetters.getName(store) }}</span>
             </template>
             <template #icon>
-              <nuxt-img
+              <SfImage
+                image-tag="nuxt-img"
                 :src="`/icons/langs/${storeConfigGetters.getLocale(
                   store
                 )}.webp`"
@@ -48,7 +49,12 @@
 </template>
 <script>
 import { defineComponent, onMounted, computed } from '@nuxtjs/composition-api';
-import { SfList, SfBottomModal, SfCharacteristic } from '@storefront-ui/vue';
+import {
+  SfList,
+  SfBottomModal,
+  SfCharacteristic,
+  SfImage,
+} from '@storefront-ui/vue';
 import { useStore } from '~/composables';
 import { storeGetters, storeConfigGetters } from '~/getters';
 import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
@@ -59,6 +65,7 @@ export default defineComponent({
     SfList,
     SfBottomModal,
     SfCharacteristic,
+    SfImage,
   },
   props: {
     isLangModalOpen: Boolean,
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index 3efa364a6..55906ee19 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -81,7 +81,8 @@
                     )
                   "
                 >
-                  <nuxt-img
+                  <SfImage
+                    image-tag="nuxt-img"
                     :src="
                       getMagentoImage(wishlistGetters.getItemImage(product))
                     "
@@ -174,6 +175,7 @@ import {
   SfCollectedProduct,
   SfLink,
   SfLoader,
+  SfImage,
 } from '@storefront-ui/vue';
 import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import { wishlistGetters, productGetters } from '~/getters';
@@ -193,6 +195,7 @@ export default defineComponent({
     SfCollectedProduct,
     SfLink,
     SfLoader,
+    SfImage,
     SvgImage,
   },
   setup() {
diff --git a/packages/theme/getters/productGetters.ts b/packages/theme/getters/productGetters.ts
index 4a8afdb76..2e5664049 100644
--- a/packages/theme/getters/productGetters.ts
+++ b/packages/theme/getters/productGetters.ts
@@ -222,9 +222,7 @@ export const getBreadcrumbs = (product: any, category?: Category): AgnosticBread
 
   breadcrumbs.push({
     text: getName(product),
-    route: {
-      path: getSlug(product),
-    },
+    link: getSlug(product) || '',
   });
 
   return breadcrumbs;
diff --git a/packages/theme/modules/catalog/pages/default.vue b/packages/theme/modules/catalog/pages/default.vue
index 1355b1f19..98f58df2c 100644
--- a/packages/theme/modules/catalog/pages/default.vue
+++ b/packages/theme/modules/catalog/pages/default.vue
@@ -51,6 +51,7 @@
               v-for="(product, i) in products"
               :key="getSlug(product)"
               v-e2e="'category-product-card'"
+              image-tag="nuxt-img"
               :image="getMagentoImage(getProductThumbnailImage(product))"
               :image-height="imageSizes.productCard.height"
               :image-width="imageSizes.productCard.width"
@@ -78,37 +79,7 @@
               class="products__product-card"
               @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            >
-              <template #image="imageSlotProps">
-                <SfButton
-                  :link="imageSlotProps.link"
-                  aria-label="Go To Product"
-                  class="sf-button--pure sf-product-card__link"
-                  data-testid="product-link"
-                  v-on="$listeners"
-                >
-                  <template v-if="Array.isArray(imageSlotProps.image)">
-                    <nuxt-img
-                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
-                      :key="key"
-                      :alt="imageSlotProps.title"
-                      :height="imageSlotProps.imageHeight"
-                      :src="picture"
-                      :width="imageSlotProps.imageWidth"
-                      class="sf-product-card__picture"
-                    />
-                  </template>
-                  <nuxt-img
-                    v-else
-                    :alt="imageSlotProps.title"
-                    :height="imageSlotProps.imageHeight"
-                    :src="imageSlotProps.image"
-                    :width="imageSlotProps.imageWidth"
-                    class="sf-product-card__image lol"
-                  />
-                </SfButton>
-              </template>
-            </SfProductCard>
+            />
           </transition-group>
           <transition-group
             v-else
@@ -120,6 +91,7 @@
             <SfProductCardHorizontal
               v-for="(product, i) in products"
               :key="getSlug(product)"
+              image-tag="nuxt-img"
               :description="getDescription(product)"
               :image="getMagentoImage(getProductThumbnailImage(product))"
               :image-height="imageSizes.productCardHorizontal.height"
@@ -147,32 +119,6 @@
               @click:add-to-cart="addItemToCart({ product, quantity: $event })"
               @click:wishlist="addItemToWishlist(product)"
             >
-              <template #image="imageSlotProps">
-                <SfLink
-                  :link="imageSlotProps.link"
-                  class="sf-product-card-horizontal__link sf-product-card-horizontal__link--image"
-                >
-                  <template v-if="Array.isArray(imageSlotProps.image)">
-                    <nuxt-img
-                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
-                      :key="key"
-                      :alt="imageSlotProps.title"
-                      :height="imageSlotProps.imageHeight"
-                      :src="picture"
-                      :width="imageSlotProps.imageWidth"
-                      class="sf-product-card-horizontal__picture"
-                    />
-                  </template>
-                  <nuxt-img
-                    v-else
-                    :alt="imageSlotProps.title"
-                    :height="imageSlotProps.imageHeight"
-                    :src="imageSlotProps.image"
-                    :width="imageSlotProps.imageWidth"
-                    class="sf-product-card-horizontal__image"
-                  />
-                </SfLink>
-              </template>
               <template #configuration>
                 <SfProperty
                   class="desktop-only"
@@ -374,6 +320,7 @@ import {
   SfRadio,
   SfSelect,
   SfSidebar,
+  SfImage,
 } from '@storefront-ui/vue';
 import {
   defineComponent, ref, useContext, useFetch,
@@ -418,6 +365,7 @@ export default defineComponent({
     SfProperty,
     SfLink,
     LazyHydrate,
+    SfImage,
   },
   middleware: cacheControl({
     'max-age': 60,
diff --git a/packages/theme/package.json b/packages/theme/package.json
index ee75cf51e..32cd71a2d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -34,7 +34,7 @@
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.2.1",
     "@pinia/nuxt": "^0.1.8",
-    "@storefront-ui/vue": "^0.11.5",
+    "@storefront-ui/vue": "^0.13.0",
     "@vue-storefront/cache": "~2.5.6",
     "@vue-storefront/core": "~2.5.6",
     "@vue-storefront/middleware": "~2.5.6",
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 92086f65f..17c6f4711 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -25,7 +25,8 @@
         class="table__row"
       >
         <SfTableData class="table__image">
-          <nuxt-img
+          <SfImage
+            image-tag="nuxt-img"
             :src="getMagentoImage(cartGetters.getItemImage(product))"
             :alt="cartGetters.getItemName(product)"
             :width="imageSizes.cartItem.width"
@@ -164,6 +165,7 @@ import {
   SfPrice,
   SfProperty,
   SfLink,
+  SfImage,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -190,6 +192,7 @@ export default defineComponent({
     SfPrice,
     SfProperty,
     SfLink,
+    SfImage,
     VsfPaymentProvider: () => import('~/components/Checkout/VsfPaymentProvider.vue'),
   },
   setup() {
diff --git a/packages/theme/pages/MyAccount.vue b/packages/theme/pages/MyAccount.vue
index 567168ce4..910e4c40c 100644
--- a/packages/theme/pages/MyAccount.vue
+++ b/packages/theme/pages/MyAccount.vue
@@ -48,16 +48,11 @@ import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
 import {
   computed,
   defineComponent,
-  onBeforeUnmount,
   ref,
   useContext,
   useRoute,
   useRouter,
 } from '@nuxtjs/composition-api';
-import {
-  mapMobileObserver,
-  unMapMobileObserver,
-} from '@storefront-ui/vue/src/utilities/mobile-observer.js';
 import { useUser, useCart } from '~/composables';
 import MyProfile from './MyAccount/MyProfile.vue';
 import AddressesDetails from './MyAccount/AddressesDetails.vue';
@@ -87,7 +82,6 @@ export default defineComponent({
     const { logout } = useUser();
     const { clear } = useCart();
     const { localePath, app } = useContext();
-    const isMobile = computed(() => mapMobileObserver().isMobile.get());
     const breadcrumbs = ref([
       {
         text: app.i18n.t('Home'),
@@ -101,12 +95,8 @@ export default defineComponent({
 
     const activePage = computed(() => {
       const { pageName } = route.value.params;
-      if (pageName) {
-        return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
-      } if (!isMobile.value) {
-        return app.i18n.t('My profile');
-      }
-      return '';
+
+      return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
     });
 
     const changeActivePage = async (title) => {
@@ -123,10 +113,6 @@ export default defineComponent({
       await router.push(`${localePath(transformedPath)}`);
     };
 
-    onBeforeUnmount(() => {
-      unMapMobileObserver();
-    });
-
     return {
       activePage,
       breadcrumbs,
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index a2efa7d7b..1ff2def85 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -68,6 +68,7 @@
                   :key="productGetters.getSlug(product.product)"
                   v-e2e="'wishlist-product-card'"
                   class="products__product-card"
+                  image-tag="nuxt-img"
                   :image-width="imageSizes.productCard.width"
                   :image-height="imageSizes.productCard.height"
                   :image="
@@ -108,40 +109,7 @@
                   @click:add-to-cart="
                     addItemToCart({ product: product.product, quantity: 1 })
                   "
-                >
-                  <template #image="imageSlotProps">
-                    <SfButton
-                      :link="imageSlotProps.link"
-                      class="sf-button--pure sf-product-card__link"
-                      data-testid="product-link"
-                      :aria-label="$t('Go To Product')"
-                      v-on="$listeners"
-                    >
-                      <template v-if="Array.isArray(imageSlotProps.image)">
-                        <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(
-                            0,
-                            2
-                          )"
-                          :key="key"
-                          class="sf-product-card__picture"
-                          :src="picture"
-                          :alt="imageSlotProps.title"
-                          :width="imageSlotProps.imageWidth"
-                          :height="imageSlotProps.imageHeight"
-                        />
-                      </template>
-                      <nuxt-img
-                        v-else
-                        class="sf-product-card__image lol"
-                        :src="imageSlotProps.image"
-                        :alt="imageSlotProps.title"
-                        :width="imageSlotProps.imageWidth"
-                        :height="imageSlotProps.imageHeight"
-                      />
-                    </SfButton>
-                  </template>
-                </SfProductCard>
+                />
               </transition-group>
               <transition-group
                 v-else
@@ -154,6 +122,7 @@
                   v-for="(product, i) in products"
                   :key="productGetters.getSlug(product.product)"
                   class="products__product-card-horizontal"
+                  image-tag="nuxt-img"
                   :description="productGetters.getDescription(product.product)"
                   :image="
                     getMagentoImage(
@@ -194,35 +163,6 @@
                     addItemToCart({ product: product.product, quantity: 1 })
                   "
                 >
-                  <template #image="imageSlotProps">
-                    <SfLink
-                      :link="imageSlotProps.link"
-                      class="sf-product-card-horizontal__link sf-product-card-horizontal__link--image"
-                    >
-                      <template v-if="Array.isArray(imageSlotProps.image)">
-                        <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(
-                            0,
-                            2
-                          )"
-                          :key="key"
-                          class="sf-product-card-horizontal__picture"
-                          :src="picture"
-                          :alt="imageSlotProps.title"
-                          :width="imageSlotProps.imageWidth"
-                          :height="imageSlotProps.imageHeight"
-                        />
-                      </template>
-                      <nuxt-img
-                        v-else
-                        class="sf-product-card-horizontal__image"
-                        :src="imageSlotProps.image"
-                        :alt="imageSlotProps.title"
-                        :width="imageSlotProps.imageWidth"
-                        :height="imageSlotProps.imageHeight"
-                      />
-                    </SfLink>
-                  </template>
                   <template #configuration>
                     <SfProperty
                       class="desktop-only"
@@ -303,6 +243,7 @@ import {
   SfPagination,
   SfSelect,
   SfProperty,
+  SfImage,
 } from '@storefront-ui/vue';
 import {
   computed,
@@ -332,6 +273,7 @@ export default defineComponent({
     SfPagination,
     SfSelect,
     SfProperty,
+    SfImage,
     LazyHydrate,
     SvgImage,
   },
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 137b5f13e..347447518 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -17,6 +17,10 @@
             >
               <SfGallery
                 :images="productGallery"
+                :image-width="422"
+                :image-height="664"
+                :thumb-width="160"
+                :thumb-height="160"
                 :enable-zoom="true"
                 class="product__gallery"
               />
@@ -282,7 +286,7 @@ import {
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 import productGetters, {
   getSwatchData as getProductSwatchData,
-  getName as getProductName
+  getName as getProductName,
 } from '~/getters/productGetters';
 import reviewGetters, {
   getReviewId,
diff --git a/yarn.lock b/yarn.lock
index 0c6e14e0a..79fc6cd73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1982,11 +1982,6 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@juggle/resize-observer@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
-  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
-
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -3532,28 +3527,26 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storefront-ui/shared@0.11.5":
-  version "0.11.5"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.11.5.tgz#14214d6298536d9e5a9567d00d23b321caaf2a7f"
-  integrity sha512-VjPP9kPIyBKtypDjPeQpkaoR0f7Afkv12gMlubr2LCCd/0eHm+x7R9Ve2nuCjCEuSvnb1a5A2S+4qpSxBWl2ag==
+"@storefront-ui/shared@0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.13.0.tgz#9c30599688a2d5cf8d0654e914d26e175554c546"
+  integrity sha512-GaYMRcYLDJyBoiSh72CBWZoW52S2oEtDDRxN3KYLfkLyoNjf4X+7FjueLVtlnJQhrKB/uWs4k50rr8EMFtWFRw==
 
-"@storefront-ui/vue@^0.11.5":
-  version "0.11.5"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.11.5.tgz#4d430deeeb405c45e0c54bb06d4fc367245b8d8c"
-  integrity sha512-bevOM1oAtXFGQBRZYJ0i5n9xIDl5eeOi0blGW/pTVYbjxtAzJCC2JE/hmLTmV2wx98sY6xyEi1VbpM24kpkO+A==
+"@storefront-ui/vue@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.13.0.tgz#51e2f81d6dbf8393eb21beabbe10d2e21c1d9c32"
+  integrity sha512-KVyEKQGwjl0t16LGmjRN+RmAk0FWtiGR/sm8g+I5DA8OpMAoHoJanqPBg/ArqHXdhIrsdIcOShaP66yhFLmnDA==
   dependencies:
     "@glidejs/glide" "^3.3.0"
-    "@storefront-ui/shared" "0.11.5"
+    "@storefront-ui/shared" "0.13.0"
     body-scroll-lock "^3.0.1"
     cloudinary-build-url "^0.1.1"
     core-js "^3.6.5"
     glob "^7.1.4"
-    hammerjs "^2.0.8"
     leaflet "^1.5.1"
     nouislider "^15.2.0"
     sass "^1.32.13"
     sass-loader "^10.0.3"
-    simplebar-vue "^1.4.0"
     vue "^2.6.12"
     vue2-leaflet "^2.5.2"
 
@@ -3894,6 +3887,11 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
+"@types/js-cookie@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.1.tgz#04aa743e2e0a85a22ee9aa61f6591a8bc19b5d68"
+  integrity sha512-7wg/8gfHltklehP+oyJnZrz9XBuX5ZPP4zB6UsI84utdlkRYLnOm2HfpLXazTwZA+fpGn0ir8tGNgVnMEleBGQ==
+
 "@types/js-levenshtein@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/js-levenshtein/-/js-levenshtein-1.1.1.tgz#ba05426a43f9e4e30b631941e0aa17bf0c890ed5"
@@ -6359,11 +6357,6 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -7362,7 +7355,7 @@ core-js@^2.4.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.0.1, core-js@^3.6.5:
+core-js@^3.6.5:
   version "3.21.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
   integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
@@ -10431,11 +10424,6 @@ hable@^3.0.0:
   resolved "https://registry.yarnpkg.com/hable/-/hable-3.0.0.tgz#6de089b2df946635cf8134b9e4859f1b62de255f"
   integrity sha512-7+G0/2/COR8pwteYFqHIVYfQpuEiO2HXwJrhCBJVgrNrl9O5eaUoJVDGXUJX+0RpGncNVTuestexjk1afj01wQ==
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
-
 handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@@ -12410,6 +12398,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsdom-global@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
+  integrity sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=
+
 jsdom@^16.6.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
@@ -13163,11 +13156,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
 lodash.unescape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -17696,26 +17684,6 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-simplebar-vue@^1.4.0:
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/simplebar-vue/-/simplebar-vue-1.6.8.tgz#ba6d6dc0e61d07f5bcb84f4bd8e3187c39452ff2"
-  integrity sha512-rykHqyDxeylI3z2NOAsiD+rhcx+cfiOrfnIotDJFC8FqoO4jyJMEN8Q+61PTMOfVJA0oSWFZySlagCH6lG+5qQ==
-  dependencies:
-    core-js "^3.0.1"
-    simplebar "^5.3.6"
-
-simplebar@^5.3.6:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.3.6.tgz#d9383576a09a6fd09e19543f8e9906a3e87c3896"
-  integrity sha512-FJUMbV+hNDd/m+1/fvD41TXKd5mSdlI5zgBygkaQIV3SffNbcLhSbJT6ufTs8ZNRLJ6i+qc/KCFMqWmvlGWMhA==
-  dependencies:
-    "@juggle/resize-observer" "^3.3.1"
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-
 sirv@^1.0.7:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
@@ -19646,6 +19614,11 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
   integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
 
+vue-demi@^0.12.1:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"
+  integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
+
 vue-eslint-parser@^8.0.0, vue-eslint-parser@^8.0.1, vue-eslint-parser@^8.2.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"
@@ -19748,7 +19721,7 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.12, vue-template-compiler@^2.6.14:
+vue-template-compiler@^2.6.12, vue-template-compiler@^2.6.14, vue-template-compiler@^2.6.x:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
   integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
@@ -19766,7 +19739,7 @@ vue2-leaflet@^2.5.2:
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
   integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
 
-vue@^2.6.11, vue@^2.6.12:
+vue@^2.6.11, vue@^2.6.12, vue@^2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==