From a60bf7c86b558fcd5907f8beb3132eceaf3255c6 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Thu, 30 Jun 2022 12:40:29 +0200
Subject: [PATCH] fix: empty list of currencies while trying to change currency
 - currency and store switcher will no behave in the same way on the desktop
 and the mobile

---
 packages/theme/components/AppHeader.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 9f33f65f3..ce5ac04ea 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -12,8 +12,14 @@
       </template>
       <template #aside>
         <div class="sf-header__switchers">
-          <CurrencySelector class="smartphone-only" />
-          <StoreSwitcher class="smartphone-only" />
+          <CurrencySelector
+            v-if="hasCurrencyToSelect"
+            class="smartphone-only"
+          />
+          <StoreSwitcher
+            v-if="hasStoresToSelect"
+            class="smartphone-only"
+          />
         </div>
       </template>
       <template #header-icons="{ activeIcon }">
@@ -127,22 +133,21 @@ import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
 import type { CategoryTree, ProductInterface } from '~/modules/GraphQL/types';
-import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
-import StoreSwitcher from '~/components/StoreSwitcher.vue';
+import { useTopBar } from './TopBar/useTopBar';
 
 export default defineComponent({
   components: {
     HeaderNavigation,
     SfHeader,
     SfOverlay,
-    CurrencySelector,
     HeaderLogo,
-    StoreSwitcher,
     SvgImage,
     SfButton,
     SfBadge,
+    CurrencySelector: () => import('~/components/CurrencySelector.vue'),
+    StoreSwitcher: () => import('~/components/StoreSwitcher.vue'),
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
     SearchResults: () => import(
       /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
@@ -158,6 +163,8 @@ export default defineComponent({
     const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
     const { categories: categoryList, load: categoriesListLoad } = useCategory();
 
+    const { hasCurrencyToSelect, hasStoresToSelect } = useTopBar();
+
     const isSearchOpen = ref(false);
     const productSearchResults = ref<ProductInterface[] | null>(null);
 
@@ -205,6 +212,8 @@ export default defineComponent({
       toggleWishlistSidebar,
       wishlistHasProducts,
       wishlistItemsQty,
+      hasCurrencyToSelect,
+      hasStoresToSelect,
     };
   },
 });