From 55b6d3737d236ab0f132a8764c0d02ec2a04b676 Mon Sep 17 00:00:00 2001
From: negue <eugen.bolz@gmail.com>
Date: Wed, 20 Sep 2017 20:35:14 +0200
Subject: [PATCH] toggle pin in buy-dialogs

---
 website/client/app.vue                            |  2 +-
 website/client/components/shops/buyModal.vue      | 13 +++++++++++--
 .../components/shops/quests/buyQuestModal.vue     | 15 +++++++++++++--
 website/client/components/shops/quests/index.vue  |  1 -
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/website/client/app.vue b/website/client/app.vue
index 5e15471a204..1d144c0eed8 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -10,7 +10,7 @@
         app-header
         buyModal(
           :item="selectedItemToBuy",
-          :withPin="false",
+          :withPin="true",
           @change="resetItemToBuy($event)",
           @buyPressed="customPurchase($event)",
           :genericPurchase="genericPurchase(selectedItemToBuy)",
diff --git a/website/client/components/shops/buyModal.vue b/website/client/components/shops/buyModal.vue
index 3546e33d8f4..301827de855 100644
--- a/website/client/components/shops/buyModal.vue
+++ b/website/client/components/shops/buyModal.vue
@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -253,6 +253,8 @@
           pin: svgPin,
           clock: svgClock,
         }),
+
+        isPinned: false,
       };
     },
     computed: {
@@ -283,6 +285,11 @@
         return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
       },
     },
+    watch: {
+      item: function throttleSearch () {
+        this.isPinned = this.item.pinned;
+      },
+    },
     methods: {
       onChange ($event) {
         this.$emit('change', $event);
@@ -316,7 +323,9 @@
         this.$root.$emit('show::modal', 'buy-gems');
       },
       togglePinned () {
-        if (!this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path})) {
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
           this.text(this.$t('unpinnedItem', {item: this.item.text}));
         }
       },
diff --git a/website/client/components/shops/quests/buyQuestModal.vue b/website/client/components/shops/quests/buyQuestModal.vue
index 258e76e5c5f..d58d2b0c23a 100644
--- a/website/client/components/shops/quests/buyQuestModal.vue
+++ b/website/client/components/shops/quests/buyQuestModal.vue
@@ -6,7 +6,7 @@
     @change="onChange($event)"
   )
     span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': item.pinned}",
+      :class="{'item-selected-badge': isPinned}",
       v-if="withPin",
       @click.prevent.stop="togglePinned()"
     )
@@ -212,8 +212,15 @@
           pin: svgPin,
           experience: svgExperience,
         }),
+
+        isPinned: false,
       };
     },
+    watch: {
+      item: function throttleSearch () {
+        this.isPinned = this.item.pinned;
+      },
+    },
     computed: {
       ...mapState({
         content: 'content',
@@ -250,7 +257,11 @@
         this.hideDialog();
       },
       togglePinned () {
-        this.$emit('togglePinned', this.item);
+        this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
+
+        if (!this.isPinned) {
+          this.text(this.$t('unpinnedItem', {item: this.item.text}));
+        }
       },
       hideDialog () {
         this.$root.$emit('hide::modal', 'buy-quest-modal');
diff --git a/website/client/components/shops/quests/index.vue b/website/client/components/shops/quests/index.vue
index 48667cf1ef9..0e30dc378b0 100644
--- a/website/client/components/shops/quests/index.vue
+++ b/website/client/components/shops/quests/index.vue
@@ -183,7 +183,6 @@
       :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
       :withPin="true",
       @change="resetItemToBuy($event)",
-      @togglePinned="togglePinned($event)"
     )
       template(slot="item", scope="ctx")
         item.flat(