From 06d147610d7308dbcc9176734a7709d0e5f4bb2a Mon Sep 17 00:00:00 2001
From: Krecik <przemyslaw.koroscik@gmail.com>
Date: Mon, 12 Oct 2020 15:39:12 +0200
Subject: [PATCH] fix(default-theme): add currency switcher on mobile (#1165)

---
 .../default-theme/components/SwBottomMenu.vue |  19 +--
 .../components/SwBottomMoreActions.vue        | 159 ++++++++++++++++++
 .../components/SwBottomNavigation.vue         |  52 +++---
 3 files changed, 199 insertions(+), 31 deletions(-)
 create mode 100644 packages/default-theme/components/SwBottomMoreActions.vue

diff --git a/packages/default-theme/components/SwBottomMenu.vue b/packages/default-theme/components/SwBottomMenu.vue
index 9fc0d8660..42fb42394 100644
--- a/packages/default-theme/components/SwBottomMenu.vue
+++ b/packages/default-theme/components/SwBottomMenu.vue
@@ -1,23 +1,24 @@
 <template>
   <SfBottomModal
     :is-open="true"
-    @click:close="$emit('close')"
     class="sw-bottom-menu"
+    @click:close="$emit('close')"
   >
-    <template #title>
+    <template>
       <div class="sw-bottom-menu__title" @click="goBack">
         <SfIcon
+          v-if="categoryBreadcrumbs.length"
           icon="chevron_left"
           class="icon sf-chevron_left"
           size="21px"
           view-box="0 0 24 12"
-          v-if="categoryBreadcrumbs.length"
         />
         {{ currentCategoryName }}
       </div>
     </template>
+
     <transition :name="menuTransitionName" mode="out-in">
-      <SfList class="mobile-nav-list" :key="categoryBreadcrumbs.length">
+      <SfList :key="categoryBreadcrumbs.length" class="mobile-nav-list">
         <SfListItem v-for="category in categoriesList" :key="category.name">
           <nuxt-link
             class="sf-header__link"
@@ -141,18 +142,14 @@ export default {
 .menu-slide-right-enter-active {
   transition: 0.25s;
 }
-.menu-slide-left-enter {
+.menu-slide-left-enter,
+.menu-slide-right-leave-to {
   transform: translate(100%, 0);
 }
-.menu-slide-left-leave-to {
-  transform: translate(-100%, 0);
-}
+.menu-slide-left-leave-to,
 .menu-slide-right-enter {
   transform: translate(-100%, 0);
 }
-.menu-slide-right-leave-to {
-  transform: translate(100%, 0);
-}
 
 .sw-bottom-menu {
   &__title {
diff --git a/packages/default-theme/components/SwBottomMoreActions.vue b/packages/default-theme/components/SwBottomMoreActions.vue
new file mode 100644
index 000000000..c7fa50e15
--- /dev/null
+++ b/packages/default-theme/components/SwBottomMoreActions.vue
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <SfBottomModal
+      :is-open="true"
+      class="sw-bottom-more-actions"
+      @click:close="$emit('close')"
+    >
+      <template>
+        <div class="sw-bottom-more-actions__title">
+          {{ headline }}
+        </div>
+      </template>
+
+      <div class="content">
+        <div v-if="!contentChanged" class="content-list">
+          <SfBottomNavigationItem label="Currency">
+            <template #icon>
+              <SfIcon icon="credits" size="20px" @click="changeCurrency" />
+            </template>
+          </SfBottomNavigationItem>
+
+          <SfBottomNavigationItem label="Language">
+            <template #icon>
+              <SfIcon icon="marker" size="20px" @click="changeLanguage" />
+            </template>
+          </SfBottomNavigationItem>
+        </div>
+
+        <div v-if="showLanguage">
+          <SfList>
+            <SfListItem
+              v-for="language in availableLanguages"
+              :key="language.code"
+              :value="language.code"
+            >
+              <SfMenuItem
+                :label="language.name"
+                @click="changeLocale(language.code), $emit('close')"
+              />
+            </SfListItem>
+          </SfList>
+        </div>
+
+        <div v-if="showCurrency">
+          <SfList>
+            <SfListItem
+              v-for="currencyItem in availableCurrencies"
+              :key="currencyItem.id"
+              :value="currencyItem.id"
+            >
+              <SfMenuItem
+                :label="`${currencyItem.symbol} - ${currencyItem.translated.name}`"
+                @click="setCurrency(currencyItem), $emit('close')"
+              />
+            </SfListItem>
+          </SfList>
+        </div>
+      </div>
+    </SfBottomModal>
+  </div>
+</template>
+
+<script>
+import { SfBottomModal, SfIcon, SfList, SfMenuItem } from "@storefront-ui/vue"
+import { useLocales } from "@/logic/useLocales"
+import { useCurrency } from "@shopware-pwa/composables"
+import { onMounted } from "@vue/composition-api"
+
+export default {
+  name: "SwBottomMoreActions",
+  components: {
+    SfBottomModal,
+    SfIcon,
+    SfList,
+    SfMenuItem,
+  },
+  data() {
+    return {
+      headline: "",
+      contentChanged: false,
+      showCurrency: false,
+      showLanguage: false,
+    }
+  },
+  setup(props, { root }) {
+    const { availableLanguages, currentLocale, changeLocale } = useLocales(root)
+    const {
+      setCurrency,
+      loadAvailableCurrencies,
+      availableCurrencies,
+    } = useCurrency(root)
+
+    // TODO: loaded on mounted only untill fixed issue: https://github.com/DivanteLtd/storefront-ui/issues/1097
+    onMounted(async () => {
+      await loadAvailableCurrencies()
+    })
+
+    return {
+      availableLanguages,
+      changeLocale,
+      availableCurrencies,
+      setCurrency,
+    }
+  },
+  computed: {},
+  watch: {
+    $route() {
+      this.$emit("close")
+    },
+  },
+  methods: {
+    changeLanguage() {
+      this.headline = "Choose Language"
+      this.showLanguage = true
+      this.contentChanged = true
+    },
+    changeCurrency() {
+      this.headline = "Choose Currency"
+      this.showCurrency = true
+      this.contentChanged = true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.sw-bottom-more-actions {
+  flex-wrap: wrap;
+
+  ::v-deep .sf-bottom-navigation-item__label {
+    margin-top: var(--spacer-xs);
+  }
+  ::v-deep .sf-menu-item__label {
+    width: 100%;
+  }
+
+  .content {
+    --menu-item-mobile-nav-icon-display: none;
+
+    padding: 0 var(--spacer-xs) var(--spacer-xs);
+
+    &-list {
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    .sf-bottom-navigation-item {
+      margin-left: var(--spacer-xs);
+      margin-right: var(--spacer-xs);
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    padding-top: var(--spacer-xs);
+    text-align: center;
+  }
+}
+</style>
diff --git a/packages/default-theme/components/SwBottomNavigation.vue b/packages/default-theme/components/SwBottomNavigation.vue
index 51368ea30..8ee670e1c 100644
--- a/packages/default-theme/components/SwBottomNavigation.vue
+++ b/packages/default-theme/components/SwBottomNavigation.vue
@@ -43,8 +43,8 @@
           <SfIcon icon="profile" size="20px" @click="userIconClick" />
           <SfBottomModal
             :is-open="userIconActive"
-            @click:close="userIconActive = false"
             class="sw-bottom-menu"
+            @click:close="userIconActive = false"
           >
             <SfList class="mobile-nav-list">
               <SfListItem>
@@ -62,12 +62,24 @@
         </template>
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        :label="$t('Currency')"
+        :label="$t('More')"
         class="menu-button"
-        data-cy="bottom-navigation-currency"
+        data-cy="bottom-navigation-more"
+        @click.self="toggleMoreActions"
       >
         <template #icon>
-          <SwCurrencySwitcher class="menu-button__currency" />
+          <SfIcon
+            icon="tiles"
+            size="20px"
+            class="more-actions"
+            @click="toggleMoreActions"
+          />
+
+          <!-- TODO: Check / add transition after SFUI lib update to > 0.9.1 -->
+          <SwBottomMoreActions
+            v-if="moreActionsIsActive"
+            @close="moreActionsIsActive = false"
+          />
         </template>
       </SfBottomNavigationItem>
       <transition name="sf-collapse-bottom" mode="out-in">
@@ -116,12 +128,10 @@ import {
   SfMenuItem,
 } from "@storefront-ui/vue"
 import { useUIState, useUser, useCart } from "@shopware-pwa/composables"
-import SwCurrencySwitcher from "@/components/SwCurrencySwitcher"
-import { onMounted } from "@vue/composition-api"
-import SwButton from "@/components/atoms/SwButton"
 import SwBottomMenu from "@/components/SwBottomMenu"
 import { PAGE_ACCOUNT } from "@/helpers/pages"
 import { getCategoryUrl } from "@shopware-pwa/helpers"
+import SwBottomMoreActions from "@/components/SwBottomMoreActions"
 
 export default {
   name: "SwBottomNavigation",
@@ -130,16 +140,16 @@ export default {
     SfIcon,
     SfCircleIcon,
     SfBottomModal,
-    SwCurrencySwitcher,
-    SwButton,
     SwBottomMenu,
     SfList,
     SfMenuItem,
+    SwBottomMoreActions,
   },
   data() {
     return {
       mobileNavIsActive: false,
       userIconActive: false,
+      moreActionsIsActive: false,
     }
   },
   setup(props, { root }) {
@@ -161,16 +171,16 @@ export default {
       count,
     }
   },
-  watch: {
-    $route() {
-      this.userIconActive = false
-    },
-  },
   computed: {
     getPageAccount() {
       return PAGE_ACCOUNT
     },
   },
+  watch: {
+    $route() {
+      this.userIconActive = false
+    },
+  },
   methods: {
     userIconClick() {
       if (this.isLoggedIn) {
@@ -187,6 +197,9 @@ export default {
     toggleMobileNavigation() {
       this.mobileNavIsActive = !this.mobileNavIsActive
     },
+    toggleMoreActions() {
+      this.moreActionsIsActive = !this.moreActionsIsActive
+    },
   },
 }
 </script>
@@ -206,15 +219,10 @@ export default {
     min-width: 2rem;
   }
 }
+
 .menu-button {
   position: relative;
 
-  &__currency {
-    --select-padding: 0;
-    --select-height: 2rem;
-    --select-color: #afb0b6;
-  }
-
   &__select {
     --chevron-size: 0;
     --select-margin: 0;
@@ -257,5 +265,9 @@ export default {
       }
     }
   }
+
+  .more-actions {
+    margin-bottom: var(--spacer-xs);
+  }
 }
 </style>