From 4025915ac465a4c1ee448f9cbcb0d472070d8c11 Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Thu, 15 Apr 2021 12:33:32 +1000
Subject: [PATCH 1/6] fix: Add currency support for price range.

---
 components/RangeSlider.vue | 17 ++++++++++++++---
 pages/categories/_slug.vue | 10 +++++++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/components/RangeSlider.vue b/components/RangeSlider.vue
index 20b8b4dd..5e749efe 100644
--- a/components/RangeSlider.vue
+++ b/components/RangeSlider.vue
@@ -10,7 +10,7 @@
         :clickable="false"
         tooltip="always"
         tooltip-placement="bottom"
-        :tooltip-formatter="'${value}'"
+        :tooltip-formatter="'{value}'"
         :process-style="slider.processStyle"
         :rail-style="slider.railStyle"
         :dot-size="20"
@@ -21,7 +21,7 @@
         </template>
 
         <template v-slot:tooltip="{ value: rangeValue }">
-          <div class="label-sm">${{ rangeValue }}</div>
+          <div class="label-sm">{{ currencySymbol }}{{ rangeValue }}</div>
         </template>
       </vue-slider>
     </ClientOnly>
@@ -29,6 +29,9 @@
 </template>
 
 <script>
+// Helpers
+import { mapState } from 'vuex'
+
 // Components
 import 'vue-slider-component/dist-css/vue-slider-component.css'
 import 'vue-slider-component/theme/default.css'
@@ -54,6 +57,13 @@ export default {
   },
 
   computed: {
+    ...mapState(['currency']),
+
+    currencySymbol() {
+      const { symbol } = this.$swell.currency.get(this.currency)
+      return symbol
+    },
+
     slider() {
       const [min, max] = this.filter.options
 
@@ -67,7 +77,8 @@ export default {
   },
 
   watch: {
-    filterState: 'setValue'
+    filterState: 'setValue',
+    filter: 'setValue'
   },
 
   created() {
diff --git a/pages/categories/_slug.vue b/pages/categories/_slug.vue
index ea09330a..1c2d4867 100644
--- a/pages/categories/_slug.vue
+++ b/pages/categories/_slug.vue
@@ -118,6 +118,7 @@ import get from 'lodash/get'
 import isObject from 'lodash/isObject'
 import pageMeta from '~/mixins/pageMeta'
 import { getFilterStateFromQuery } from '~/modules/swell'
+import { mapState } from 'vuex'
 
 // Calculate product limit from category rows/cols
 function getProductLimit(category) {
@@ -183,6 +184,7 @@ export default {
   },
 
   computed: {
+    ...mapState(['currency']),
     settings() {
       return get(this, 'category.content', {})
     },
@@ -207,7 +209,13 @@ export default {
 
   watch: {
     // Call the update method when the URL query changes
-    '$route.query': 'updateProductsFiltered'
+    '$route.query': 'updateProductsFiltered',
+
+    // Grab new filter value ranges when currency is chanegd
+    currency() {
+      if (!this.currency) return
+      this.filters = this.$swell.products.filters(this.products, { currency: this.currency })
+    }
   },
 
   created() {

From 2fcd58a570a9898a26f670b7aed1a375d72dd846 Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Thu, 15 Apr 2021 14:11:32 +1000
Subject: [PATCH 2/6] fix: Localised price range filter logic.

---
 components/FilterPanel.vue      |  30 ++++++--
 components/PriceRangeSlider.vue | 128 ++++++++++++++++++++++++++++++++
 components/RangeSlider.vue      |  15 +---
 3 files changed, 154 insertions(+), 19 deletions(-)
 create mode 100644 components/PriceRangeSlider.vue

diff --git a/components/FilterPanel.vue b/components/FilterPanel.vue
index 7854a566..81d036d4 100644
--- a/components/FilterPanel.vue
+++ b/components/FilterPanel.vue
@@ -76,7 +76,7 @@
             <span class="label-xs-bold-faded uppercase">{{ filter.label }}</span>
             <!-- Range slider input -->
             <div v-if="filter.type === 'range'" class="w-full pt-4 pb-10">
-              <RangeSlider
+              <PriceRangeSlider
                 :filter="filter"
                 :filter-state="localFilterState"
                 @change="updateFilter"
@@ -120,6 +120,7 @@
 
 <script>
 // Helpers
+import { mapState } from 'vuex'
 import { mergeFilterState, listActiveFilters } from '~/modules/swell'
 
 export default {
@@ -143,9 +144,16 @@ export default {
   },
 
   computed: {
+    ...mapState(['currency']),
+
+    currencyObj() {
+      return this.$swell.currency.get(this.currency)
+    },
+
     activeFilters() {
       return listActiveFilters(this.filters, this.localFilterState)
     },
+
     activeFilterCountLabel() {
       const count = this.activeFilters.length
       return `${count} filter${count === 1 ? '' : 's'} active`
@@ -174,13 +182,23 @@ export default {
 
     activeRangeLabel(filter) {
       const [lower, upper] = filter.options
-      const prefix = filter.id === 'price' ? '$' : ''
-      return prefix + lower.label + '–' + upper.label
+
+      let prefix
+      let lowerLabel = lower.label
+      let upperLabel = upper.label
+
+      if (filter.id === 'price') {
+        const { rate, symbol } = this.currencyObj
+        console.log(rate)
+        prefix = symbol
+        lowerLabel = Math.floor((lowerLabel *= rate))
+        upperLabel = Math.floor((upperLabel *= rate))
+      }
+
+      return prefix + lowerLabel + '–' + upperLabel
     }
   }
 }
 </script>
 
-<style lang="postcss" scoped>
-
-</style>
+<style lang="postcss" scoped></style>
diff --git a/components/PriceRangeSlider.vue b/components/PriceRangeSlider.vue
new file mode 100644
index 00000000..4ffb2877
--- /dev/null
+++ b/components/PriceRangeSlider.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <ClientOnly>
+      <vue-slider
+        v-model="value"
+        :value="value"
+        :min="slider.minValue"
+        :max="slider.maxValue"
+        :interval="filter.interval"
+        :clickable="false"
+        tooltip="always"
+        tooltip-placement="bottom"
+        :tooltip-formatter="'{value}'"
+        :process-style="slider.processStyle"
+        :rail-style="slider.railStyle"
+        :dot-size="20"
+        @change="updateValue(value)"
+      >
+        <template v-slot:dot="{ focus }">
+          <div :class="['custom-dot', { focus }]"></div>
+        </template>
+
+        <template v-slot:tooltip="{ value: rangeValue }">
+          <div class="label-sm">{{ formatTooltip(rangeValue) }}</div>
+        </template>
+      </vue-slider>
+    </ClientOnly>
+  </div>
+</template>
+
+<script>
+// Helpers
+import { mapState } from 'vuex'
+
+// Components
+import 'vue-slider-component/dist-css/vue-slider-component.css'
+import 'vue-slider-component/theme/default.css'
+
+export default {
+  name: 'RangeSlider',
+
+  props: {
+    filter: {
+      type: Object,
+      default: () => ({})
+    },
+    filterState: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data() {
+    return {
+      value: null
+    }
+  },
+
+  computed: {
+    ...mapState(['currency']),
+
+    currencyObj() {
+      return this.$swell.currency.get(this.currency)
+    },
+
+    slider() {
+      const [min, max] = this.filter.options
+
+      return {
+        minValue: min.value,
+        maxValue: max.value,
+        railStyle: { background: this.$swell.settings.get('colors.primary.light') },
+        processStyle: { background: this.$swell.settings.get('colors.primary.darkest') }
+      }
+    }
+  },
+
+  watch: {
+    filterState: 'setValue'
+  },
+
+  created() {
+    this.setValue()
+  },
+
+  methods: {
+    formatTooltip(value) {
+      const { symbol, rate } = this.currencyObj
+      console.log(rate)
+      console.log(value)
+      const price = Math.floor(value * rate)
+      return `${symbol}${price}`
+    },
+
+    setValue() {
+      const [min, max] = this.filter.options
+      const stateValue = this.filterState[this.filter.id]
+
+      // Use the state value if it exists, otherwise the filter's min/max
+      this.value = stateValue || [min.value, max.value]
+    },
+
+    updateValue(value) {
+      const [min, max] = this.filter.options
+      let optionValue
+
+      // If the value isn't the same as the filter's min/max, pass it on
+      if (value[0] !== min.value || value[1] !== max.value) {
+        optionValue = value
+      }
+      // Otherwise, don't pass anything so the filter gets removed
+
+      this.$emit('change', { filter: this.filter, optionValue })
+    }
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.custom-dot {
+  @apply w-full h-full bg-primary-lightest rounded-full border border-primary-med;
+  transition: all 0.3s;
+
+  &.focus {
+    @apply border-primary-darkest;
+  }
+}
+</style>
diff --git a/components/RangeSlider.vue b/components/RangeSlider.vue
index 5e749efe..af47f415 100644
--- a/components/RangeSlider.vue
+++ b/components/RangeSlider.vue
@@ -21,7 +21,7 @@
         </template>
 
         <template v-slot:tooltip="{ value: rangeValue }">
-          <div class="label-sm">{{ currencySymbol }}{{ rangeValue }}</div>
+          <div class="label-sm">${{ rangeValue }}</div>
         </template>
       </vue-slider>
     </ClientOnly>
@@ -29,9 +29,6 @@
 </template>
 
 <script>
-// Helpers
-import { mapState } from 'vuex'
-
 // Components
 import 'vue-slider-component/dist-css/vue-slider-component.css'
 import 'vue-slider-component/theme/default.css'
@@ -57,13 +54,6 @@ export default {
   },
 
   computed: {
-    ...mapState(['currency']),
-
-    currencySymbol() {
-      const { symbol } = this.$swell.currency.get(this.currency)
-      return symbol
-    },
-
     slider() {
       const [min, max] = this.filter.options
 
@@ -77,8 +67,7 @@ export default {
   },
 
   watch: {
-    filterState: 'setValue',
-    filter: 'setValue'
+    filterState: 'setValue'
   },
 
   created() {

From c4e1e7c005007a3144b6098a20abe7083045abc7 Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Fri, 16 Apr 2021 10:59:59 +1000
Subject: [PATCH 3/6] fix: Consol. price range filter + eslint console.

---
 .eslintrc.js                    |   2 +-
 components/FilterPanel.vue      |  37 ++++++---
 components/PriceRangeSlider.vue | 128 --------------------------------
 components/RangeSlider.vue      |  30 +++++++-
 4 files changed, 58 insertions(+), 139 deletions(-)
 delete mode 100644 components/PriceRangeSlider.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 885ac749..5e86fdb9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
   plugins: ['prettier'],
   // add your custom rules here
   rules: {
-    'no-console': 'off',
+    'no-console': 'warn',
     'arrow-parens': ['error', 'as-needed'],
     'object-shorthand': 'off',
     'vue/no-v-html': 'off',
diff --git a/components/FilterPanel.vue b/components/FilterPanel.vue
index 81d036d4..5e6f3d1c 100644
--- a/components/FilterPanel.vue
+++ b/components/FilterPanel.vue
@@ -74,9 +74,19 @@
           <div v-for="filter in filters">
             <!-- Label -->
             <span class="label-xs-bold-faded uppercase">{{ filter.label }}</span>
+            <!-- Price range slider input -->
+            <div v-if="filter.type === 'range' && filter.id === 'price'" class="w-full pt-4 pb-10">
+              <RangeSlider
+                :filter="filter"
+                :filter-state="localFilterState"
+                :is-price="true"
+                @change="updateFilter"
+              />
+            </div>
+
             <!-- Range slider input -->
-            <div v-if="filter.type === 'range'" class="w-full pt-4 pb-10">
-              <PriceRangeSlider
+            <div v-else-if="filter.type === 'range'" class="w-full pt-4 pb-10">
+              <RangeSlider
                 :filter="filter"
                 :filter-state="localFilterState"
                 @change="updateFilter"
@@ -183,19 +193,28 @@ export default {
     activeRangeLabel(filter) {
       const [lower, upper] = filter.options
 
-      let prefix
       let lowerLabel = lower.label
       let upperLabel = upper.label
 
       if (filter.id === 'price') {
-        const { rate, symbol } = this.currencyObj
-        console.log(rate)
-        prefix = symbol
-        lowerLabel = Math.floor((lowerLabel *= rate))
-        upperLabel = Math.floor((upperLabel *= rate))
+        const { rate } = this.currencyObj
+        const lowerPrice = lower.value * rate
+        const upperPrice = upper.value * rate
+
+        lowerLabel = new Intl.NumberFormat('default', {
+          style: 'currency',
+          currency: this.currency,
+          currencyDisplay: 'narrowSymbol',
+          maximumFractionDigits: 0
+        }).format(lowerPrice)
+
+        upperLabel = new Intl.NumberFormat('default', {
+          style: 'decimal',
+          maximumFractionDigits: 0
+        }).format(upperPrice)
       }
 
-      return prefix + lowerLabel + '–' + upperLabel
+      return lowerLabel + ' – ' + upperLabel
     }
   }
 }
diff --git a/components/PriceRangeSlider.vue b/components/PriceRangeSlider.vue
deleted file mode 100644
index 4ffb2877..00000000
--- a/components/PriceRangeSlider.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div>
-    <ClientOnly>
-      <vue-slider
-        v-model="value"
-        :value="value"
-        :min="slider.minValue"
-        :max="slider.maxValue"
-        :interval="filter.interval"
-        :clickable="false"
-        tooltip="always"
-        tooltip-placement="bottom"
-        :tooltip-formatter="'{value}'"
-        :process-style="slider.processStyle"
-        :rail-style="slider.railStyle"
-        :dot-size="20"
-        @change="updateValue(value)"
-      >
-        <template v-slot:dot="{ focus }">
-          <div :class="['custom-dot', { focus }]"></div>
-        </template>
-
-        <template v-slot:tooltip="{ value: rangeValue }">
-          <div class="label-sm">{{ formatTooltip(rangeValue) }}</div>
-        </template>
-      </vue-slider>
-    </ClientOnly>
-  </div>
-</template>
-
-<script>
-// Helpers
-import { mapState } from 'vuex'
-
-// Components
-import 'vue-slider-component/dist-css/vue-slider-component.css'
-import 'vue-slider-component/theme/default.css'
-
-export default {
-  name: 'RangeSlider',
-
-  props: {
-    filter: {
-      type: Object,
-      default: () => ({})
-    },
-    filterState: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  data() {
-    return {
-      value: null
-    }
-  },
-
-  computed: {
-    ...mapState(['currency']),
-
-    currencyObj() {
-      return this.$swell.currency.get(this.currency)
-    },
-
-    slider() {
-      const [min, max] = this.filter.options
-
-      return {
-        minValue: min.value,
-        maxValue: max.value,
-        railStyle: { background: this.$swell.settings.get('colors.primary.light') },
-        processStyle: { background: this.$swell.settings.get('colors.primary.darkest') }
-      }
-    }
-  },
-
-  watch: {
-    filterState: 'setValue'
-  },
-
-  created() {
-    this.setValue()
-  },
-
-  methods: {
-    formatTooltip(value) {
-      const { symbol, rate } = this.currencyObj
-      console.log(rate)
-      console.log(value)
-      const price = Math.floor(value * rate)
-      return `${symbol}${price}`
-    },
-
-    setValue() {
-      const [min, max] = this.filter.options
-      const stateValue = this.filterState[this.filter.id]
-
-      // Use the state value if it exists, otherwise the filter's min/max
-      this.value = stateValue || [min.value, max.value]
-    },
-
-    updateValue(value) {
-      const [min, max] = this.filter.options
-      let optionValue
-
-      // If the value isn't the same as the filter's min/max, pass it on
-      if (value[0] !== min.value || value[1] !== max.value) {
-        optionValue = value
-      }
-      // Otherwise, don't pass anything so the filter gets removed
-
-      this.$emit('change', { filter: this.filter, optionValue })
-    }
-  }
-}
-</script>
-
-<style lang="postcss" scoped>
-.custom-dot {
-  @apply w-full h-full bg-primary-lightest rounded-full border border-primary-med;
-  transition: all 0.3s;
-
-  &.focus {
-    @apply border-primary-darkest;
-  }
-}
-</style>
diff --git a/components/RangeSlider.vue b/components/RangeSlider.vue
index af47f415..8c87ac91 100644
--- a/components/RangeSlider.vue
+++ b/components/RangeSlider.vue
@@ -21,7 +21,7 @@
         </template>
 
         <template v-slot:tooltip="{ value: rangeValue }">
-          <div class="label-sm">${{ rangeValue }}</div>
+          <div class="label-sm">{{ formatTooltip(rangeValue) }}</div>
         </template>
       </vue-slider>
     </ClientOnly>
@@ -29,6 +29,9 @@
 </template>
 
 <script>
+// Helpers
+import { mapState } from 'vuex'
+
 // Components
 import 'vue-slider-component/dist-css/vue-slider-component.css'
 import 'vue-slider-component/theme/default.css'
@@ -44,6 +47,10 @@ export default {
     filterState: {
       type: Object,
       default: () => ({})
+    },
+    isPrice: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -54,6 +61,12 @@ export default {
   },
 
   computed: {
+    ...mapState(['currency']),
+
+    currencyObj() {
+      return this.$swell.currency.get(this.currency)
+    },
+
     slider() {
       const [min, max] = this.filter.options
 
@@ -75,6 +88,21 @@ export default {
   },
 
   methods: {
+    formatTooltip(value) {
+      if (this.isPrice) {
+        const { rate } = this.currencyObj
+        const price = value * rate
+
+        return new Intl.NumberFormat('default', {
+          style: 'currency',
+          currency: this.currency,
+          currencyDisplay: 'narrowSymbol',
+          maximumFractionDigits: 0
+        }).format(price)
+      }
+      return value
+    },
+
     setValue() {
       const [min, max] = this.filter.options
       const stateValue = this.filterState[this.filter.id]

From c94d5e2e0bbf66b92c4c59e8256e1a88eb25082e Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Fri, 16 Apr 2021 11:09:28 +1000
Subject: [PATCH 4/6] fix: Remove dupe component.

---
 components/FilterPanel.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/components/FilterPanel.vue b/components/FilterPanel.vue
index 5e6f3d1c..850d40a9 100644
--- a/components/FilterPanel.vue
+++ b/components/FilterPanel.vue
@@ -75,23 +75,15 @@
             <!-- Label -->
             <span class="label-xs-bold-faded uppercase">{{ filter.label }}</span>
             <!-- Price range slider input -->
-            <div v-if="filter.type === 'range' && filter.id === 'price'" class="w-full pt-4 pb-10">
+            <div v-if="filter.type === 'range'" class="w-full pt-4 pb-10">
               <RangeSlider
                 :filter="filter"
                 :filter-state="localFilterState"
-                :is-price="true"
+                :is-price="filter.id === 'price'"
                 @change="updateFilter"
               />
             </div>
 
-            <!-- Range slider input -->
-            <div v-else-if="filter.type === 'range'" class="w-full pt-4 pb-10">
-              <RangeSlider
-                :filter="filter"
-                :filter-state="localFilterState"
-                @change="updateFilter"
-              />
-            </div>
             <!-- Checkbox input -->
             <div v-else class="pt-4 pb-8">
               <InputSelect

From 827ae08d6f3fdd343fbeb223cced90f5d6c08c04 Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Mon, 19 Apr 2021 10:26:50 +1000
Subject: [PATCH 5/6] refactor: Add interval prop and logic.

---
 components/RangeSlider.vue | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/components/RangeSlider.vue b/components/RangeSlider.vue
index 8c87ac91..d808d7b7 100644
--- a/components/RangeSlider.vue
+++ b/components/RangeSlider.vue
@@ -6,7 +6,7 @@
         :value="value"
         :min="slider.minValue"
         :max="slider.maxValue"
-        :interval="filter.interval"
+        :interval="slider.interval"
         :clickable="false"
         tooltip="always"
         tooltip-placement="bottom"
@@ -51,6 +51,10 @@ export default {
     isPrice: {
       type: Boolean,
       default: false
+    },
+    withIntervals: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -69,10 +73,35 @@ export default {
 
     slider() {
       const [min, max] = this.filter.options
+      let minVal = min.value
+      let maxVal = max.value
+      let interval = 1
+
+      if (this.withIntervals) {
+        if (minVal === maxval) return
+        interval = Math.ceil((maxVal - minVal) / 10) || 1
+        if (interval > 1000) {
+          interval = 1000
+        } else if (interval > 100) {
+          interval = 100
+        } else if (interval > 10) {
+          interval = 10
+        }
+        if (maxVal % interval > 0) {
+          maxVal = interval + maxVal - (maxVal % interval)
+        }
+        if (minVal % interval > 0) {
+          minVal = minVal - (minVal % interval)
+        }
+        while (((maxVal - minVal) / interval) % 1 > 0) {
+          maxVal++
+        }
+      }
 
       return {
-        minValue: min.value,
-        maxValue: max.value,
+        minValue: minVal,
+        maxValue: maxVal,
+        interval: interval,
         railStyle: { background: this.$swell.settings.get('colors.primary.light') },
         processStyle: { background: this.$swell.settings.get('colors.primary.darkest') }
       }

From f2ac8ece2ad77bc0d21d7aadc15a78911f1f259c Mon Sep 17 00:00:00 2001
From: by-tim <hello@timazarcon.xyz>
Date: Mon, 19 Apr 2021 23:52:19 +1000
Subject: [PATCH 6/6] fix: Terse variables

---
 components/RangeSlider.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/RangeSlider.vue b/components/RangeSlider.vue
index d808d7b7..e71cd3f5 100644
--- a/components/RangeSlider.vue
+++ b/components/RangeSlider.vue
@@ -73,13 +73,13 @@ export default {
 
     slider() {
       const [min, max] = this.filter.options
-      let minVal = min.value
-      let maxVal = max.value
+      let minValue = min.value
+      let maxValue = max.value
       let interval = 1
 
       if (this.withIntervals) {
-        if (minVal === maxval) return
-        interval = Math.ceil((maxVal - minVal) / 10) || 1
+        if (minValue === maxValue) return
+        interval = Math.ceil((maxValue - minValue) / 10) || 1
         if (interval > 1000) {
           interval = 1000
         } else if (interval > 100) {
@@ -87,21 +87,21 @@ export default {
         } else if (interval > 10) {
           interval = 10
         }
-        if (maxVal % interval > 0) {
-          maxVal = interval + maxVal - (maxVal % interval)
+        if (maxValue % interval > 0) {
+          maxValue = interval + maxValue - (maxValue % interval)
         }
-        if (minVal % interval > 0) {
-          minVal = minVal - (minVal % interval)
+        if (minValue % interval > 0) {
+          minValue = minValue - (minValue % interval)
         }
-        while (((maxVal - minVal) / interval) % 1 > 0) {
-          maxVal++
+        while (((maxValue - minValue) / interval) % 1 > 0) {
+          maxValue++
         }
       }
 
       return {
-        minValue: minVal,
-        maxValue: maxVal,
-        interval: interval,
+        minValue,
+        maxValue,
+        interval,
         railStyle: { background: this.$swell.settings.get('colors.primary.light') },
         processStyle: { background: this.$swell.settings.get('colors.primary.darkest') }
       }