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

package/src/js/QuantitySelector.js

@@ -0,0 +1,175 @@
+import {
+  i19buyKit,
+  i19maxQuantity,
+  i19minQuantity
+} from '@ecomplus/i18n'
+
+import { i18n } from '@ecomplus/utils'
+
+import ecomCart from '@ecomplus/shopping-cart'
+import ALink from '../ALink.vue'
+import AAlert from '../AAlert.vue'
+
+export default {
+  name: 'QuantitySelector',
+
+  components: {
+    ALink,
+    AAlert
+  },
+
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: Number,
+    slug: String,
+    buyText: String,
+    kitProductId: String,
+    kitName: String,
+    kitPrice: Number,
+    canAddToCart: {
+      type: Boolean,
+      default: true
+    },
+    hasBuyButton: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      selectedQnts: this.items.reduce((selectedQnts, item) => {
+        selectedQnts[item._id] = item.quantity || 0
+        return selectedQnts
+      }, {}),
+      hasMinAlert: false,
+      hasMaxAlert: false,
+      alertVariant: 'warning'
+    }
+  },
+
+  computed: {
+    i19maxQuantity: () => i18n(i19maxQuantity),
+    i19minQuantity: () => i18n(i19minQuantity),
+
+    totalQuantity () {
+      let total = 0
+      const { selectedQnts } = this
+      Object.keys(selectedQnts).forEach(key => {
+        if (selectedQnts[key]) {
+          total += selectedQnts[key]
+        }
+      })
+      return total
+    },
+
+    remainingQuantity () {
+      return this.max
+        ? this.max - this.totalQuantity
+        : 9999999
+    },
+
+    strBuy () {
+      return this.buyText || i18n(i19buyKit)
+    }
+  },
+
+  methods: {
+    checkInStock (item) {
+      const maxQuantity = item.max_quantity
+      return typeof maxQuantity === 'number' && maxQuantity >= 0
+        ? maxQuantity
+        : 9999999
+    },
+
+    changeQnt (item, qntDiff, ev) {
+      const { selectedQnts, remainingQuantity } = this
+      const lastQnt = selectedQnts[item._id]
+      let newQnt
+      if (qntDiff) {
+        newQnt = selectedQnts[item._id] + qntDiff
+      } else if (ev) {
+        selectedQnts[item._id] = ev.target.value.replace(/\D/g, '')
+        newQnt = parseInt(selectedQnts[item._id], 10)
+      }
+      if (this.items.length === 1 && this.min > newQnt) {
+        newQnt = this.min
+      }
+      if (newQnt > 0) {
+        if (item.min_quantity > newQnt) {
+          newQnt = item.min_quantity
+        } else {
+          const itemMaxQnt = item.max_quantity !== undefined ? item.max_quantity : 9999999
+          const maxQnt = Math.min(itemMaxQnt, lastQnt + remainingQuantity)
+          if (maxQnt < newQnt) {
+            this.alertVariant = 'info'
+            this.hasMaxAlert = true
+            newQnt = maxQnt
+          }
+        }
+        selectedQnts[item._id] = newQnt
+      } else {
+        selectedQnts[item._id] = 0
+      }
+      this.$emit('set-quantity', {
+        item,
+        quantity: selectedQnts[item._id]
+      })
+    },
+
+    buy () {
+      this.alertVariant = 'warning'
+      if (this.totalQuantity >= this.min) {
+        if (this.max === undefined || this.totalQuantity <= this.max) {
+          const items = []
+          const composition = this.items.map(item => ({
+            _id: item.product_id,
+            variation_id: item.variation_id,
+            quantity: this.selectedQnts[item._id]
+          }))
+          this.items.forEach(item => {
+            const quantity = this.selectedQnts[item._id]
+            if (quantity > 0) {
+              const newItem = { ...item, quantity }
+              delete newItem.customizations
+              if (this.kitProductId) {
+                newItem.kit_product = {
+                  _id: this.kitProductId,
+                  name: this.kitName,
+                  pack_quantity: this.totalQuantity,
+                  price: this.kitPrice,
+                  composition
+                }
+              }
+              if (this.slug) {
+                newItem.slug = this.slug
+              }
+              items.push(newItem)
+              if (this.canAddToCart) {
+                ecomCart.addItem(newItem)
+              }
+            }
+          })
+          this.$emit('buy', { items })
+        } else {
+          this.hasMaxAlert = true
+        }
+      } else {
+        this.hasMinAlert = true
+      }
+    }
+  },
+
+  created () {
+    if (this.max < this.items.length) {
+      this.items.forEach(item => this.changeQnt(item))
+    }
+  }
+}

package/src/js/RecommendedItems.js

@@ -0,0 +1,178 @@
+import {
+  i19add,
+  i19seeMore,
+  i19weRecommendToYou
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  recommendedIds as getRecommendedIds
+} from '@ecomplus/utils'
+
+import { graphs } from '@ecomplus/client'
+import EcomSearch from '@ecomplus/search-engine'
+import ecomCart from '@ecomplus/shopping-cart'
+import { isMobile } from '@ecomplus/storefront-twbs'
+import addIdleCallback from './helpers/add-idle-callback'
+import ProductCard from '../ProductCard.vue'
+
+export default {
+  name: 'RecommendedItems',
+
+  components: {
+    ProductCard
+  },
+
+  props: {
+    pageSize: {
+      type: Number,
+      default: !isMobile ? 4 : 2
+    },
+    sortOrder: {
+      type: String,
+      default: 'sales'
+    },
+    canLoadMore: {
+      type: Boolean,
+      default: true
+    },
+    rowClassName: {
+      type: String,
+      default: 'row no-gutters'
+    },
+    colClassName: {
+      type: String,
+      default: 'col-6 col-md-4 col-lg-3'
+    },
+    productCardProps: {
+      type: Object,
+      default () {
+        return {
+          isSmall: true,
+          buyText: i18n(i19add),
+          installmentsOption: {},
+          discountOption: {}
+        }
+      }
+    },
+    ecomCart: {
+      type: Object,
+      default () {
+        return ecomCart
+      }
+    },
+    productIds: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defaultMatchType: {
+      type: String,
+      default: (typeof window === 'object' && window.ecomRecommendationsType) || 'recommended'
+    }
+  },
+
+  data () {
+    return {
+      ecomSearch: new EcomSearch()
+        .mergeFilter({
+          range: {
+            quantity: {
+              gt: 0
+            }
+          }
+        })
+        .mergeFilter({
+          term: {
+            available: true
+          }
+        }),
+      pageNumber: 1,
+      items: []
+    }
+  },
+
+  computed: {
+    i19seeMore: () => i18n(i19seeMore),
+    i19weRecommendToYou: () => i18n(i19weRecommendToYou)
+  },
+
+  methods: {
+    fetchItems () {
+      delete this.ecomSearch.dsl.aggs
+      this.ecomSearch.setPageNumber(this.pageNumber).fetch().then(() => {
+        this.items = this.items.concat(this.ecomSearch.getItems())
+        this.totalCount = this.ecomSearch.getTotalCount()
+        if (this.totalCount) {
+          this.$emit('recommend-items', {
+            items: this.items,
+            totalCount: this.totalCount
+          })
+        }
+      }).finally(() => {
+        this.$emit('fetched')
+      })
+    }
+  },
+
+  created () {
+    const fetchRecommendations = (matchType = this.defaultMatchType) => {
+      const promises = []
+      const items = this.ecomCart.data.items.sort((a, b) => a.quantity > b.quantity ? -1 : 1)
+      for (let i = 0; i < items.length && i <= 4; i++) {
+        promises.push(graphs({ url: `/products/${items[i].product_id}/${matchType}.json` }))
+      }
+      Promise.allSettled(promises).then(results => {
+        const productIds = []
+        results.forEach(({ status, value }) => {
+          if (status === 'fulfilled') {
+            getRecommendedIds(value.data).forEach(productId => {
+              if (
+                !productIds.includes(productId) &&
+                !this.ecomCart.data.items.find(item => item.product_id === productId)
+              ) {
+                productIds.push(productId)
+              }
+            })
+          }
+        })
+        if (productIds.length) {
+          this.ecomSearch.setProductIds(productIds.slice(0, 24))
+          this.fetchItems()
+        } else if (matchType === 'recommended') {
+          fetchRecommendations('related')
+        }
+      })
+    }
+    if (this.productIds.length) {
+      this.ecomSearch.setProductIds(this.productIds)
+      this.totalCount = this.items.length
+      this.fetchItems()
+    } else {
+      addIdleCallback(() => {
+        fetchRecommendations()
+      })
+    }
+  },
+
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.ecomSearch.setPageSize(pageSize)
+      },
+      immediate: true
+    },
+
+    sortOrder: {
+      handler (sortOrder) {
+        this.ecomSearch.setSortOrder(sortOrder)
+      },
+      immediate: true
+    },
+
+    pageNumber () {
+      this.fetchItems()
+    }
+  }
+}