@ecomplus/storefront-components 1.0.0-beta.19 → 1.0.0-beta.191

package/src/js/ProductCard.js

@@ -1,4 +1,5 @@
 import {
+  i19addToFavorites,
   i19buy,
   i19connectionErrorProductMsg,
   i19outOfStock,
@@ -13,11 +14,27 @@ import {
   price as getPrice
 } from '@ecomplus/utils'
 
+import Vue from 'vue'
 import { store } from '@ecomplus/client'
 import ecomCart from '@ecomplus/shopping-cart'
 import ALink from '../ALink.vue'
 import APicture from '../APicture.vue'
 import APrices from '../APrices.vue'
+import ecomPassport from '@ecomplus/passport-client'
+import { toggleFavorite, checkFavorite } from './helpers/favorite-products'
+
+const getExternalHtml = (varName, product) => {
+  if (typeof window === 'object') {
+    varName = `productCard${varName}Html`
+    const html = typeof window[varName] === 'function'
+      ? window[varName](product)
+      : window[varName]
+    if (typeof html === 'string') {
+      return html
+    }
+  }
+  return undefined
+}
 
 export default {
   name: 'ProductCard',
@@ -37,27 +54,67 @@ export default {
       default: 'h3'
     },
     buyText: String,
+    transitionClass: {
+      type: String,
+      default: 'animated fadeIn'
+    },
     canAddToCart: {
       type: Boolean,
       default: true
     },
-    isLoaded: Boolean
+    ecomPassport: {
+      type: Object,
+      default () {
+        return ecomPassport
+      }
+    },
+    accountUrl: {
+      type: String,
+      default: '/app/#/account/'
+    },
+    isLoaded: Boolean,
+    installmentsOption: Object,
+    discountOption: Object,
+    stamps: {
+      type: Array,
+      default () {
+        return window.productCardStamps || []
+      }
+    }
   },
 
   data () {
     return {
       body: {},
       isLoading: false,
+      isWaitingBuy: false,
       isHovered: false,
+      isFavorite: false,
       error: ''
     }
   },
 
   computed: {
+    i19addToFavorites: () => i18n(i19addToFavorites),
     i19outOfStock: () => i18n(i19outOfStock),
     i19unavailable: () => i18n(i19unavailable),
-    buyHtml: () => typeof window === 'object' && window.productCardBuyHtml,
-    footerHtml: () => typeof window === 'object' && window.productCardFooterHtml,
+    i19uponRequest: () => 'Sob consulta',
+
+    isWithoutPrice () {
+      return !getPrice(this.body)
+    },
+
+    ratingHtml () {
+      return getExternalHtml('Rating', this.body)
+    },
+
+    buyHtml () {
+      return getExternalHtml('Buy', this.body)
+    },
+
+    footerHtml () {
+      return getExternalHtml('Footer', this.body)
+    },
 
     name () {
       return getName(this.body)
@@ -77,11 +134,27 @@ export default {
       return this.body.available && this.body.visible && this.isInStock
     },
 
+    isLogged () {
+      return ecomPassport.checkAuthorization()
+    },
+
     discount () {
       const { body } = this
       return checkOnPromotion(body)
         ? Math.round(((body.base_price - getPrice(body)) * 100) / body.base_price)
         : 0
+    },
+
+    validStamps () {
+      if (!Array.isArray(this.stamps)) return []
+      return this.stamps.filter((stamp) => {
+        if (stamp && stamp.img) {
+          if (Array.isArray(stamp.skus) && stamp.skus.length) {
+            return stamp.skus.includes(this.body.sku)
+          }
+        }
+        return false
+      })
     }
   },
 
@@ -90,13 +163,15 @@ export default {
       this.body = Object.assign({}, data)
       delete this.body.body_html
       delete this.body.body_text
+      delete this.body.inventory_records
+      delete this.body.price_change_records
+      this.isFavorite = checkFavorite(this.body._id, this.ecomPassport)
     },
 
     fetchItem () {
       if (this.productId) {
         this.isLoading = true
-        const { storeId, productId } = this
-        store({ url: `/products/${productId}.json`, storeId })
+        store({ url: `/products/${this.productId}.json` })
           .then(({ data }) => {
             this.$emit('update:product', data)
             this.setBody(data)
@@ -114,16 +189,45 @@ export default {
       }
     },
 
+    toggleFavorite () {
+      if (this.isLogged) {
+        this.isFavorite = toggleFavorite(this.body._id, this.ecomPassport)
+      }
+    },
+
     buy () {
       const product = this.body
       this.$emit('buy', { product })
       if (this.canAddToCart) {
-        const { variations, slug } = product
-        if (variations && variations.length) {
-          window.location = `/${slug}`
-        } else {
-          ecomCart.addProduct(product)
-        }
+        this.isWaitingBuy = true
+        store({ url: `/products/${product._id}.json` })
+          .then(({ data }) => {
+            const selectFields = ['variations', 'customizations', 'kit_composition']
+            for (let i = 0; i < selectFields.length; i++) {
+              const selectOptions = data[selectFields[i]]
+              if (selectOptions && selectOptions.length) {
+                return import('../ProductQuickview.vue')
+                  .then(quickview => {
+                    new Vue({
+                      render: h => h(quickview.default, {
+                        props: {
+                          product: data
+                        }
+                      })
+                    }).$mount(this.$refs.quickview)
+                  })
+              }
+            }
+            const { quantity, price } = data
+            ecomCart.addProduct({ ...product, quantity, price })
+          })
+          .catch(err => {
+            console.error(err)
+            window.location = `/${product.slug}`
+          })
+          .finally(() => {
+            this.isWaitingBuy = false
+          })
       }
     }
   },

package/src/js/ProductGallery.js

@@ -18,8 +18,6 @@ import {
 
 import ecomCart from '@ecomplus/shopping-cart'
 import Glide from '@glidejs/glide'
-import * as PhotoSwipe from 'photoswipe'
-import * as psUi from 'photoswipe/dist/photoswipe-ui-default'
 import APicture from '../APicture.vue'
 
 export default {
@@ -43,7 +41,7 @@ export default {
     video: Object,
     videoAspectRatio: {
       type: String,
-      default: '4by3'
+      default: '16by9'
     },
     canAddToCart: {
       type: Boolean,
@@ -62,7 +60,8 @@ export default {
           rewind: false
         }
       }
-    }
+    },
+    isSSR: Boolean
   },
 
   data () {
@@ -70,7 +69,9 @@ export default {
       glide: null,
       pswp: null,
       activeIndex: null,
-      isSliderMoved: false
+      isSliderMoved: false,
+      elFirstPicture: null,
+      zoomLinkStyle: null
     }
   },
 
@@ -86,7 +87,8 @@ export default {
 
     localPictures () {
       return this.pictures && this.pictures.length
-        ? this.pictures : (this.product.pictures || [])
+        ? this.pictures
+        : (this.product.pictures || [])
     },
 
     videoSrc () {
@@ -162,13 +164,23 @@ export default {
     },
 
     openZoom (index) {
-      if (!this.pswd) {
-        this.pswp = new PhotoSwipe(this.$refs.pswp, psUi, this.pswpItems, {
-          ...this.pswpOptions,
-          index
+      this.zoomLinkStyle = 'cursor: wait'
+      return import(/* webpackPrefetch: true */ 'photoswipe')
+        .then(pack => {
+          const PhotoSwipe = pack.default
+          return import(/* webpackPrefetch: true */ 'photoswipe/dist/photoswipe-ui-default').then(pack => {
+            const psUi = pack.default
+            this.pswp = new PhotoSwipe(this.$refs.pswp, psUi, this.pswpItems, {
+              ...this.pswpOptions,
+              index
+            })
+            this.pswp.init()
+          })
+        })
+        .catch(console.error)
+        .finally(() => {
+          this.zoomLinkStyle = null
         })
-      }
-      this.pswp.init()
     },
 
     buy () {
@@ -203,6 +215,14 @@ export default {
   },
 
   mounted () {
+    if (this.isSSR) {
+      this.elFirstPicture = document.querySelector('#product-gallery .product__picture')
+      if (this.elFirstPicture) {
+        this.$nextTick(() => {
+          this.$refs.firstPicture[0].appendChild(this.elFirstPicture)
+        })
+      }
+    }
     const glide = new Glide(this.$refs.glide, this.glideOptions)
     glide.on('run', () => {
       this.moveSlider(glide.index)

package/src/js/ProductQuickview.js

@@ -0,0 +1,72 @@
+import {
+  i19close,
+  i19seeMoreInfo
+} from '@ecomplus/i18n'
+
+import { i18n } from '@ecomplus/utils'
+import { Portal } from '@linusborg/vue-simple-portal'
+import TheProduct from '../TheProduct.vue'
+import ABackdrop from '../ABackdrop.vue'
+
+export default {
+  name: 'ProductQuickView',
+
+  components: {
+    Portal,
+    TheProduct,
+    ABackdrop
+  },
+
+  props: {
+    productId: String,
+    product: Object,
+    portalId: {
+      type: String,
+      default: 'quickview'
+    }
+  },
+
+  data () {
+    return {
+      productName: '',
+      productLink: '',
+      isVisible: false
+    }
+  },
+
+  computed: {
+    i19close: () => i18n(i19close),
+    i19seeMoreInfo: () => i18n(i19seeMoreInfo)
+  },
+
+  methods: {
+    setProduct ({ name, slug }) {
+      this.productName = name
+      this.productLink = `/${slug}`
+    },
+
+    hide () {
+      this.isVisible = false
+      setTimeout(() => {
+        if (!this.isVisible) {
+          this.$destroy()
+        }
+      }, 450)
+    }
+  },
+
+  created () {
+    let portal = document.getElementById(this.portalId)
+    if (!portal) {
+      portal = document.createElement('div')
+      portal.setAttribute('id', this.portalId)
+      document.body.appendChild(portal)
+    } else {
+      portal.innerHTML = ''
+    }
+    if (this.product) {
+      this.setProduct(this.product)
+    }
+    this.isVisible = true
+  }
+}

package/src/js/ProductVariations.js

@@ -1,5 +1,10 @@
 import {
-  inStock as checkStock,
+  i19select,
+  i19selectVariation
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
   specValueByText as getSpecValueByText,
   specTextValue as getSpecTextValue,
   variationsGrids as getVariationsGrids,
@@ -32,7 +37,31 @@ export default {
   data () {
     return {
       selectedOptions: {},
-      filteredGrids: getVariationsGrids(this.product, null, true)
+      filteredGrids: {}
+    }
+  },
+
+  computed: {
+    i19select: () => i18n(i19select),
+    i19selectVariation: () => i18n(i19selectVariation),
+
+    variationsGrids () {
+      return getVariationsGrids(this.product)
+    },
+
+    orderedGrids () {
+      return Object.keys(this.variationsGrids)
+    },
+
+    variationFromUrl () {
+      if (typeof window === 'object') {
+        const urlParams = new URLSearchParams(window.location.search)
+        const variationId = urlParams.get('variation_id')
+        if (variationId) {
+          return variationId
+        }
+      }
+      return null
     }
   },
 
@@ -68,6 +97,11 @@ export default {
     selectOption (optionText, grid, gridIndex) {
       const { product, selectedOptions, orderedGrids } = this
       this.$set(selectedOptions, grid, optionText)
+      this.$emit('select-option', {
+        gridId: grid,
+        gridIndex,
+        optionText
+      })
       const filterGrids = {}
       for (let i = 0; i <= gridIndex; i++) {
         const grid = orderedGrids[i]
@@ -78,21 +112,21 @@ export default {
       const nextFilteredGrids = getVariationsGrids(product, filterGrids, true)
       for (let i = gridIndex + 1; i < orderedGrids.length; i++) {
         const grid = orderedGrids[i]
-        this.filteredGrids[grid] = nextFilteredGrids[grid]
+        const options = nextFilteredGrids[grid]
+        this.filteredGrids[grid] = options
+        if (selectedOptions[grid] && !options.includes(selectedOptions[grid])) {
+          this.$set(selectedOptions, grid, undefined)
+        }
       }
       const variations = product.variations.slice(0)
       for (let i = 0; i < variations.length; i++) {
         const variation = variations[i]
-        if (!checkStock(variation)) {
-          variations.splice(i, 1)
-        } else {
-          const { specifications } = variation
-          for (const grid in specifications) {
-            if (selectedOptions[grid] !== getSpecTextValue(variation, grid)) {
-              variations.splice(i, 1)
-              i--
-              break
-            }
+        const { specifications } = variation
+        for (const grid in specifications) {
+          if (selectedOptions[grid] !== getSpecTextValue(variation, grid)) {
+            variations.splice(i, 1)
+            i--
+            break
           }
         }
       }
@@ -100,13 +134,36 @@ export default {
     }
   },
 
-  computed: {
-    variationsGrids () {
-      return getVariationsGrids(this.product)
-    },
+  watch: {
+    'product.variations': {
+      handler () {
+        this.filteredGrids = getVariationsGrids(this.product, null, true)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
 
-    orderedGrids () {
-      return Object.keys(this.variationsGrids)
+  mounted () {
+    if (this.variationFromUrl && Array.isArray(this.product.variations)) {
+      const selectedVariation = this.product.variations.find(variation => variation._id === this.variationFromUrl)
+      if (selectedVariation) {
+        const { specifications } = selectedVariation
+        const specs = Object.keys(specifications)
+        const nextSpec = (specIndex = 0) => {
+          const spec = specs[specIndex]
+          if (specs[specIndex] && specifications[spec] && specifications[spec].length === 1) {
+            const specText = specifications[spec][0].text
+            if (this.variationsGrids[spec].find(option => option === specText)) {
+              this.$nextTick(() => {
+                this.selectOption(specText, spec, this.orderedGrids.indexOf(spec))
+                nextSpec(specIndex + 1)
+              })
+            }
+          }
+        }
+        nextSpec()
+      }
     }
   }
 }

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))
+    }
+  }
+}