@ecomplus/storefront-components 1.0.0-beta.17 → 1.0.0-beta.171

package/src/js/SearchEngine.js

@@ -1,4 +1,6 @@
 import {
+  i19all,
+  i19asOf,
   i19brands,
   i19categories,
   i19clearFilters,
@@ -9,21 +11,31 @@ import {
   i19highestPrice,
   i19itemsFound,
   i19lowestPrice,
+  i19name,
   i19noResultsFor,
   i19popularProducts,
+  i19price,
   i19refineSearch,
+  i19releases,
   i19relevance,
   i19results,
   i19sales,
   i19searchAgain,
   i19searchingFor,
   i19searchOfflineErrorMsg,
-  i19sort
+  i19sort,
+  i19upTo
 } from '@ecomplus/i18n'
 
-import { i18n } from '@ecomplus/utils'
+import {
+  i18n,
+  formatMoney
+} from '@ecomplus/utils'
+
 import lozad from 'lozad'
 import EcomSearch from '@ecomplus/search-engine'
+import { Portal } from '@linusborg/vue-simple-portal'
+import scrollToElement from './helpers/scroll-to-element'
 import ABackdrop from '../ABackdrop.vue'
 import ProductCard from '../ProductCard.vue'
 
@@ -44,6 +56,7 @@ export default {
   name: 'SearchEngine',
 
   components: {
+    Portal,
     ABackdrop,
     ProductCard
   },
@@ -63,6 +76,7 @@ export default {
     isFixedBrands: Boolean,
     isFixedCategories: Boolean,
     defaultSort: String,
+    defaultFilters: Object,
     autoFixScore: {
       type: Number,
       default: 0.6
@@ -79,10 +93,15 @@ export default {
       type: Boolean,
       default: true
     },
+    loadMoreSelector: String,
     canRetry: {
       type: Boolean,
       default: true
     },
+    canShowItems: {
+      type: Boolean,
+      default: true
+    },
     productCardProps: Object,
     gridsData: {
       type: Array,
@@ -103,6 +122,9 @@ export default {
       noResultsTerm: '',
       keepNoResultsTerm: false,
       filters: [],
+      priceRange: {},
+      priceOptions: [],
+      hasSetPriceRange: false,
       lastSelectedFilter: null,
       selectedOptions: {},
       selectedSortOption: null,
@@ -110,6 +132,7 @@ export default {
       lastRequestId: null,
       isScheduled: false,
       isLoadingMore: false,
+      mustSkipLoadMore: false,
       hasNetworkError: false,
       popularItems: [],
       hasSetPopularItems: false,
@@ -119,6 +142,7 @@ export default {
   },
 
   computed: {
+    i19all: () => i18n(i19all),
     i19clearFilters: () => i18n(i19clearFilters),
     i19closeFilters: () => i18n(i19closeFilters),
     i19didYouMean: () => i18n(i19didYouMean),
@@ -127,8 +151,9 @@ export default {
     i19itemsFound: () => i18n(i19itemsFound),
     i19noResultsFor: () => i18n(i19noResultsFor),
     i19popularProducts: () => i18n(i19popularProducts),
-    i19relevance: () => i18n(i19relevance),
+    i19price: () => i18n(i19price),
     i19refineSearch: () => i18n(i19refineSearch),
+    i19relevance: () => i18n(i19relevance),
     i19results: () => i18n(i19results),
     i19searchAgain: () => i18n(i19searchAgain),
     i19searchingFor: () => i18n(i19searchingFor),
@@ -158,6 +183,12 @@ export default {
       }, {
         value: 'highest_price',
         label: i18n(i19highestPrice)
+      }, {
+        value: 'news',
+        label: i18n(i19releases)
+      }, {
+        value: 'slug',
+        label: i18n(i19name)
       }
     ],
 
@@ -172,7 +203,10 @@ export default {
 
     isNavVisible () {
       return this.hasSearched && this.isFilterable &&
-        (this.isSearching || this.totalSearchResults > 8 || this.hasSelectedOptions)
+        (this.isSearching ||
+          this.totalSearchResults > 8 ||
+          this.hasSelectedOptions ||
+          this.hasSetPriceRange)
     },
 
     isResultsVisible () {
@@ -181,7 +215,8 @@ export default {
 
     hasFilters () {
       return this.hasSelectedOptions ||
-        this.filters.find(({ options }) => options.length)
+        this.filters.find(({ options }) => options.length) ||
+        this.hasSetPriceRange
     },
 
     suggestedItems () {
@@ -191,10 +226,18 @@ export default {
     loadObserver () {
       return this.canLoadMore && lozad('#search-engine-load-more', {
         load: () => {
-          this.isLoadingMore = true
-          this.fetchItems()
+          if (!this.mustSkipLoadMore) {
+            this.mustSkipLoadMore = this.isLoadingMore = true
+            this.fetchItems()
+          }
         }
       })
+    },
+
+    pageAnchorIndex () {
+      const count = this.suggestedItems.length
+      const rest = count % this.pageSize
+      return (rest === 0 ? count - this.pageSize : count - rest) - 1
     }
   },
 
@@ -208,7 +251,7 @@ export default {
         ecomSearch.setPageNumber(this.page + Math.ceil(this.resultItems.length / this.pageSize))
       }
       const fetching = ecomSearch.setPageSize(this.pageSize).fetch()
-        .then(() => {
+        .then(result => {
           if (this.lastRequestId === requestId) {
             this.hasNetworkError = false
             if (!isPopularItems) {
@@ -219,6 +262,7 @@ export default {
             this.hasSetPopularItems = true
             this.popularItems = ecomSearch.getItems()
           }
+          return result
         })
         .catch(err => {
           console.error(err)
@@ -232,9 +276,15 @@ export default {
         })
         .finally(() => {
           this.countOpenRequests--
-          this.isLoadingMore = false
+          if (this.isLoadingMore) {
+            this.isLoadingMore = false
+            this.$nextTick(() => setTimeout(() => {
+              this.mustSkipLoadMore = false
+              this.loadObserver.observe()
+            }, 300))
+          }
         })
-      this.$emit('fetch', { ecomSearch, fetching })
+      this.$emit('fetch', { ecomSearch, fetching, isPopularItems })
     },
 
     updateFilters () {
@@ -256,7 +306,8 @@ export default {
             options,
             isSpec
           }
-          const optionsList = !this.selectedOptions[filter] ? []
+          const optionsList = !this.selectedOptions[filter]
+            ? []
             : this.selectedOptions[filter]
               .filter(option => options.find(({ key }) => key === option))
           this.$set(this.selectedOptions, filter, optionsList)
@@ -265,46 +316,75 @@ export default {
       }
       addFilter('Brands', this.ecomSearch.getBrands())
       addFilter('Categories', this.ecomSearch.getCategories())
-      this.ecomSearch.getSpecs().forEach(({ key, options }, index) => {
+      this.ecomSearch.getSpecs().forEach(({ key, options }) => {
         addFilter(key, options, true)
       })
       this.filters = this.filters.filter((_, i) => updatedFilters.includes(i))
       this.searchFilterId = Date.now()
     },
 
-    handleSuggestions () {
-      const { ecomSearch, term } = this
-      let suggestTerm = term
-      let canAutoFix = false
-      this.suggestedTerm = ''
-      ecomSearch.getTermSuggestions().forEach(({ options, text }) => {
-        if (options.length) {
-          const opt = options[0]
-          if (
-            !this.totalSearchResults &&
-            this.autoFixScore > 0 &&
-            opt.score >= this.autoFixScore &&
-            opt.text.indexOf(term) === -1
-          ) {
-            canAutoFix = true
-          }
-          suggestTerm = suggestTerm.replace(text, opt.text)
+    updatePriceOptions () {
+      this.priceRange = this.ecomSearch.getPriceRange()
+      if (Math.round(this.priceRange.min) < Math.round(this.priceRange.avg)) {
+        const price1 = Math.ceil(Math.max(this.priceRange.min * 1.5, this.priceRange.avg / 2))
+        const price2 = Math.ceil(Math.min(this.priceRange.max / 1.5, this.priceRange.avg * 2))
+        if (price1 !== price2) {
+          this.priceOptions = [Math.min(price1, price2), Math.max(price1, price2), null]
+            .map((max, i, prices) => {
+              const min = prices[i - 1]
+              return {
+                min,
+                max,
+                label: !min
+                  ? `${i18n(i19upTo)} ${formatMoney(max)}`
+                  : i < 2
+                    ? `${formatMoney(min)} - ${formatMoney(max)}`
+                    : `${i18n(i19asOf)} ${formatMoney(min)}`
+              }
+            })
+          return
         }
-      })
-      if (!this.keepNoResultsTerm) {
-        this.noResultsTerm = ''
-      } else {
-        this.keepNoResultsTerm = false
       }
-      if (suggestTerm !== term) {
-        if (canAutoFix) {
-          this.noResultsTerm = term
-          this.keepNoResultsTerm = true
-          this.$emit('update:term', suggestTerm)
+      this.priceOptions = []
+    },
+
+    handleSuggestions () {
+      if (this.term) {
+        const { ecomSearch } = this
+        const term = this.term.toLowerCase()
+        let suggestTerm = term
+        let canAutoFix = false
+        this.suggestedTerm = ''
+        ecomSearch.getTermSuggestions().forEach(({ options, text }) => {
+          if (options.length) {
+            const opt = options[0]
+            const optTerm = opt.text.toLowerCase()
+            if (
+              !this.totalSearchResults &&
+              this.autoFixScore > 0 &&
+              opt.score >= this.autoFixScore &&
+              optTerm.indexOf(term) === -1
+            ) {
+              canAutoFix = true
+            }
+            suggestTerm = suggestTerm.replace(new RegExp(text, 'i'), optTerm)
+          }
+        })
+        if (!this.keepNoResultsTerm) {
+          this.noResultsTerm = ''
         } else {
-          this.suggestedTerm = suggestTerm
+          this.keepNoResultsTerm = false
+        }
+        if (suggestTerm !== term) {
+          if (canAutoFix) {
+            this.noResultsTerm = term
+            this.keepNoResultsTerm = true
+            this.$emit('update:term', suggestTerm)
+          } else {
+            this.suggestedTerm = suggestTerm
+          }
+          ecomSearch.history.shift()
         }
-        ecomSearch.history.shift()
       }
     },
 
@@ -315,6 +395,17 @@ export default {
         ? this.resultItems.concat(ecomSearch.getItems())
         : ecomSearch.getItems()
       this.updateFilters()
+      if (!this.hasSearched && this.defaultFilters) {
+        for (const filter in this.defaultFilters) {
+          const options = this.defaultFilters[filter]
+          if (Array.isArray(options)) {
+            options.forEach(option => this.setFilterOption(filter, option, true))
+          } else if (typeof options === 'string') {
+            this.setFilterOption(filter, options, true)
+          }
+        }
+      }
+      this.updatePriceOptions()
       this.handleSuggestions()
       if (!this.totalSearchResults && this.hasPopularItems && !this.hasSetPopularItems) {
         this.fetchItems(false, true)
@@ -349,7 +440,8 @@ export default {
 
     toggleFilters (isVisible) {
       this.isAsideVisible = typeof isVisible === 'boolean'
-        ? isVisible : !this.isAsideVisible
+        ? isVisible
+        : !this.isAsideVisible
     },
 
     getFilterLabel (filter) {
@@ -409,23 +501,53 @@ export default {
       }
     },
 
+    handlePriceInputs () {
+      const { inputMinPrice, inputMaxPrice } = this.$refs
+      const min = Number(inputMinPrice.value) || null
+      const max = Number(inputMaxPrice.value) || null
+      if ((min && !max) || min <= max) {
+        this.setPriceRange(min, max)
+      }
+      inputMinPrice.value = (min || '')
+      inputMaxPrice.value = (max || '')
+    },
+
+    setPriceRange (min, max) {
+      if (
+        (min && min !== this.priceRange.min) ||
+        (max && max !== this.priceRange.max)
+      ) {
+        this.hasSetPriceRange = true
+      } else if (this.hasSetPriceRange) {
+        this.hasSetPriceRange = false
+      } else {
+        return
+      }
+      this.ecomSearch.setPriceRange(min, max)
+      this.scheduleFetch()
+    },
+
     setFilterOption (filter, option, isSet) {
       const { selectedOptions } = this
       const optionsList = selectedOptions[filter]
-      if (isSet) {
-        this.lastSelectedFilter = filter
-        optionsList.push(option)
-      } else {
+      if (optionsList) {
         const optionIndex = optionsList.indexOf(option)
-        if (optionIndex > -1) {
-          optionsList.splice(optionIndex, 1)
-        }
-        if (!optionsList.length && this.lastSelectedFilter === filter) {
-          this.lastSelectedFilter = null
+        if (isSet) {
+          if (optionIndex === -1) {
+            this.lastSelectedFilter = filter
+            optionsList.push(option)
+          }
+        } else {
+          if (optionIndex > -1) {
+            optionsList.splice(optionIndex, 1)
+          }
+          if (!optionsList.length && this.lastSelectedFilter === filter) {
+            this.lastSelectedFilter = null
+          }
         }
+        this.updateSearchFilter(filter)
+        this.scheduleFetch()
       }
-      this.updateSearchFilter(filter)
-      this.scheduleFetch()
     },
 
     clearFilters () {
@@ -442,7 +564,11 @@ export default {
     setSortOrder (sort) {
       this.selectedSortOption = sort
       this.ecomSearch.setSortOrder(sort)
-      this.scheduleFetch()
+      if (this.page > 1) {
+        this.page = 1
+      } else {
+        this.scheduleFetch()
+      }
     }
   },
 
@@ -465,7 +591,11 @@ export default {
     isSearching (isSearching) {
       if (!isSearching && this.loadObserver) {
         this.$nextTick(() => {
-          this.loadObserver.observe()
+          if (!this.mustSkipLoadMore) {
+            this.loadObserver.observe()
+          } else {
+            setTimeout(() => scrollToElement(this.$refs.pageAnchor[0], 40), 100)
+          }
         })
       }
     }

package/src/js/ShippingCalculator.js

@@ -1,5 +1,7 @@
 import {
+  i19add$1ToEarn,
   i19calculateShipping,
+  i19freeShipping,
   i19zipCode
 } from '@ecomplus/i18n'
 
@@ -11,6 +13,7 @@ import {
 } from '@ecomplus/utils'
 
 import { modules } from '@ecomplus/client'
+import sortApps from './helpers/sort-apps'
 import CleaveInput from 'vue-cleave-component'
 import ShippingLine from '../ShippingLine.vue'
 
@@ -25,6 +28,7 @@ const reduceItemBody = itemOrProduct => {
     'sku',
     'name',
     'quantity',
+    'inventory',
     'currency_id',
     'currency_symbol',
     'price',
@@ -75,26 +79,62 @@ export default {
       default () {
         return {}
       }
+    },
+    skipAppIds: Array,
+    shippingAppsSort: {
+      type: Array,
+      default () {
+        return window.ecomShippingApps || []
+      }
     }
   },
 
   data () {
     return {
       localZipCode: null,
+      localShippedItems: [],
+      amountSubtotal: null,
       shippingServices: [],
       selectedService: null,
-      isWaiting: false
+      hasPaidOption: false,
+      freeFromValue: null,
+      isScheduled: false,
+      retryTimer: null,
+      isWaiting: false,
+      hasCalculated: false
     }
   },
 
   computed: {
+    i19add$1ToEarn: () => i18n(i19add$1ToEarn),
     i19calculateShipping: () => i18n(i19calculateShipping),
     i19zipCode: () => i18n(i19zipCode),
+    i19freeShipping: () => i18n(i19freeShipping).toLowerCase(),
 
     cleaveOptions () {
       return this.countryCode === 'BR'
         ? { blocks: [5, 3], delimiter: '-' }
         : { blocks: [30] }
+    },
+
+    freeFromPercentage () {
+      return this.hasPaidOption && this.amountSubtotal < this.freeFromValue
+        ? Math.round(this.amountSubtotal * 100 / this.freeFromValue)
+        : null
+    },
+
+    productionDeadline () {
+      let maxDeadline = 0
+      this.shippedItems.forEach(item => {
+        if (item.quantity && item.production_time) {
+          const { days, cumulative } = item.production_time
+          const itemDeadline = cumulative ? days * item.quantity : days
+          if (itemDeadline > maxDeadline) {
+            maxDeadline = itemDeadline
+          }
+        }
+      })
+      return maxDeadline
     }
   },
 
@@ -105,56 +145,115 @@ export default {
       this.$emit('update:zip-code', this.localZipCode)
     },
 
-    parseShippingOptions (shippingResult = [], isRetry) {
+    parseShippingOptions (shippingResult = [], isRetry = false) {
+      this.freeFromValue = null
       this.shippingServices = []
-      let canRetry
       if (shippingResult.length) {
         shippingResult.forEach(appResult => {
           const { validated, error, response } = appResult
-          if (validated && !error) {
-            response.shipping_services.forEach(service => {
-              this.shippingServices.push({
-                app_id: appResult.app_id,
-                ...service
-              })
+          if (!validated || error) {
+            return
+          }
+          if (
+            this.skipAppIds &&
+            this.skipAppIds.includes(appResult.app_id) &&
+            shippingResult.filter(({ app_id: appId }) => !this.skipAppIds.includes(appId)).length
+          ) {
+            return
+          }
+          response.shipping_services.forEach(service => {
+            this.shippingServices.push({
+              app_id: appResult.app_id,
+              ...service
             })
-          } else if (isRetry !== true && (!response || !response.error)) {
-            canRetry = true
+          })
+          const freeShippingFromValue = response.free_shipping_from_value
+          if (
+            freeShippingFromValue &&
+            (!this.freeFromValue || this.freeFromValue > freeShippingFromValue)
+          ) {
+            this.freeFromValue = freeShippingFromValue
           }
         })
         if (!this.shippingServices.length) {
-          if (canRetry) {
+          if (!isRetry) {
             this.fetchShippingServices(true)
+          } else {
+            this.scheduleRetry()
           }
         } else {
+          this.shippingServices = this.shippingServices.sort((a, b) => {
+            const priceDiff = a.shipping_line.total_price - b.shipping_line.total_price
+            return priceDiff < 0
+              ? -1
+              : priceDiff > 0
+                ? 1
+                : a.shipping_line.delivery_time && b.shipping_line.delivery_time &&
+                  a.shipping_line.delivery_time.days < b.shipping_line.delivery_time.days
+                  ? -1
+                  : 1
+          })
           this.setSelectedService(0)
+          this.hasPaidOption = Boolean(this.shippingServices.find(service => {
+            return service.shipping_line.total_price || service.shipping_line.price
+          }))
+          if (Array.isArray(this.shippingAppsSort) && this.shippingAppsSort.length) {
+            this.shippingServices = sortApps(this.shippingServices, this.shippingAppsSort)
+          }
         }
       }
     },
 
-    fetchShippingServices (isRetry) {
-      const { storeId } = this
-      const url = '/calculate_shipping.json'
-      const method = 'POST'
-      const data = {
-        ...this.shippingData,
-        to: {
-          zip: this.localZipCode,
-          ...this.shippingData.to
+    scheduleRetry (timeout = 10000) {
+      clearTimeout(this.retryTimer)
+      this.retryTimer = setTimeout(() => {
+        if (this.localZipCode && !this.shippingServices.length && this.shippedItems.length) {
+          this.fetchShippingServices(true)
         }
+      }, timeout)
+    },
+
+    fetchShippingServices (isRetry) {
+      if (!this.isScheduled) {
+        this.isScheduled = true
+        setTimeout(() => {
+          this.isScheduled = false
+          const { storeId } = this
+          let url = '/calculate_shipping.json'
+          if (this.skipAppIds && this.skipAppIds.length) {
+            url += '?skip_ids='
+            this.skipAppIds.forEach((appId, i) => {
+              if (i > 0) url += ','
+              url += `${appId}`
+            })
+          }
+          const method = 'POST'
+          const data = {
+            ...this.shippingData,
+            to: {
+              zip: this.localZipCode,
+              ...this.shippingData.to
+            }
+          }
+          if (this.localShippedItems.length) {
+            data.items = this.localShippedItems
+            data.subtotal = this.amountSubtotal
+          }
+          this.isWaiting = true
+          modules({ url, method, storeId, data })
+            .then(({ data }) => this.parseShippingOptions(data.result, isRetry))
+            .catch(err => {
+              if (!isRetry) {
+                this.scheduleRetry(4000)
+              }
+              console.error(err)
+            })
+            .finally(() => {
+              this.hasCalculated = true
+              this.isWaiting = false
+            })
+        }, this.hasCalculated ? 150 : 50)
       }
-      if (this.shippedItems.length) {
-        data.items = this.shippedItems.map(reduceItemBody)
-        const itemsToSubtotal = (subtotal, item) => subtotal + getPrice(item) * item.quantity
-        data.subtotal = data.items.reduce(itemsToSubtotal, 0)
-      }
-      this.isWaiting = true
-      modules({ url, method, storeId, data })
-        .then(({ data }) => this.parseShippingOptions(data.result, isRetry))
-        .catch(console.error)
-        .finally(() => {
-          this.isWaiting = false
-        })
     },
 
     submitZipCode () {
@@ -174,6 +273,27 @@ export default {
   },
 
   watch: {
+    shippedItems: {
+      handler () {
+        setTimeout(() => {
+          this.localShippedItems = this.shippedItems.map(reduceItemBody)
+          const { amountSubtotal } = this
+          this.amountSubtotal = this.shippedItems.reduce((subtotal, item) => {
+            return subtotal + getPrice(item) * item.quantity
+          }, 0)
+          if (
+            this.hasCalculated &&
+            (this.canSelectServices || amountSubtotal !== this.amountSubtotal ||
+              (!this.shippingServices.length && !this.isWaiting))
+          ) {
+            this.fetchShippingServices()
+          }
+        }, 50)
+      },
+      deep: true,
+      immediate: true
+    },
+
     localZipCode (zipCode) {
       if (this.countryCode === 'BR' && zipCode.replace(/\D/g, '').length === 8) {
         this.submitZipCode()
@@ -189,6 +309,10 @@ export default {
       immediate: true
     },
 
+    skipAppIds () {
+      this.fetchShippingServices()
+    },
+
     shippingResult: {
       handler (result) {
         if (result.length) {