@ecomplus/storefront-components 1.0.0-beta.18 → 1.0.0-beta.181

package/src/js/TheProduct.js

@@ -1,40 +1,67 @@
 import {
+  i19addToFavorites,
   i19buy,
   i19close,
+  i19days,
   i19discountOf,
-  i19inStock,
+  i19endsIn,
+  i19freeShippingFrom,
   i19loadProductErrorMsg,
+  i19offer,
   i19only,
   i19outOfStock,
   i19paymentOptions,
+  i19perUnit,
+  i19productionDeadline,
+  i19removeFromFavorites,
   i19retry,
-  i19selectVariation,
-  i19unavailable
+  i19selectVariationMsg,
+  i19unavailable,
+  i19units,
+  i19unitsInStock,
+  i19workingDays
 } from '@ecomplus/i18n'
 
 import {
   i18n,
+  randomObjectId as genRandomObjectId,
   name as getName,
   inStock as checkInStock,
   onPromotion as checkOnPromotion,
   price as getPrice,
+  img as getImg,
   variationsGrids as getVariationsGrids,
-  specValueByText as getSpecValueByText
+  specTextValue as getSpecTextValue,
+  specValueByText as getSpecValueByText,
+  formatMoney,
+  $ecomConfig
 } from '@ecomplus/utils'
 
 import { store, modules } from '@ecomplus/client'
+import EcomSearch from '@ecomplus/search-engine'
 import ecomCart from '@ecomplus/shopping-cart'
+import { isMobile } from '@ecomplus/storefront-twbs'
+import lozad from 'lozad'
+import sortApps from './helpers/sort-apps'
+import addIdleCallback from './helpers/add-idle-callback'
+import scrollToElement from './helpers/scroll-to-element'
+import { Portal } from '@linusborg/vue-simple-portal'
+import ALink from '../ALink.vue'
 import AAlert from '../AAlert.vue'
+import APicture from '../APicture.vue'
 import APrices from '../APrices.vue'
+import AShare from '../AShare.vue'
 import ProductVariations from '../ProductVariations.vue'
+import KitProductVariations from '../KitProductVariations.vue'
 import ProductGallery from '../ProductGallery.vue'
+import QuantitySelector from '../QuantitySelector.vue'
 import ShippingCalculator from '../ShippingCalculator.vue'
 import PaymentOption from '../PaymentOption.vue'
+import ecomPassport from '@ecomplus/passport-client'
+import { toggleFavorite, checkFavorite } from './helpers/favorite-products'
 
-const storefront = typeof window === 'object' && window.storefront
-const getContextBody = () => storefront
-  ? storefront.context && storefront.context.body
-  : {}
+const storefront = (typeof window === 'object' && window.storefront) || {}
+const getContextBody = () => (storefront.context && storefront.context.body) || {}
 const getContextId = () => getContextBody()._id
 
 const sanitizeProductBody = body => {
@@ -42,6 +69,8 @@ const sanitizeProductBody = body => {
   delete product.body_html
   delete product.body_text
   delete product.specifications
+  delete product.inventory_records
+  delete product.price_change_records
   return product
 }
 
@@ -49,10 +78,16 @@ export default {
   name: 'TheProduct',
 
   components: {
+    Portal,
+    ALink,
     AAlert,
+    APicture,
     APrices,
+    AShare,
+    KitProductVariations,
     ProductVariations,
     ProductGallery,
+    QuantitySelector,
     ShippingCalculator,
     PaymentOption
   },
@@ -70,13 +105,47 @@ export default {
       default: 'h1'
     },
     buyText: String,
+    galleryColClassName: {
+      type: String,
+      default: 'col-12 col-md-6'
+    },
+    hasPromotionTimer: Boolean,
+    hasStickyBuyButton: {
+      type: Boolean,
+      default: true
+    },
+    hasQuantitySelector: Boolean,
     canAddToCart: {
       type: Boolean,
       default: true
     },
+    hasBuyButton: {
+      type: Boolean,
+      default: true
+    },
     lowQuantityToWarn: {
       type: Number,
       default: 12
+    },
+    maxVariationOptionsBtns: Number,
+    isQuickview: Boolean,
+    paymentAppsSort: {
+      type: Array,
+      default () {
+        return window.ecomPaymentApps || []
+      }
+    },
+    quoteLink: String,
+    isSSR: Boolean,
+    ecomPassport: {
+      type: Object,
+      default () {
+        return ecomPassport
+      }
+    },
+    accountUrl: {
+      type: String,
+      default: '/app/#/account/'
     }
   },
 
@@ -86,23 +155,41 @@ export default {
       fixedPrice: null,
       selectedVariationId: null,
       currentGalleyImg: 1,
+      isOnCart: false,
+      qntToBuy: 1,
+      isStickyBuyVisible: false,
+      isFavorite: false,
       hasClickedBuy: false,
       hasLoadError: false,
-      paymentGateways: []
+      paymentOptions: [],
+      customizations: [],
+      kitItems: [],
+      currentTimer: null
     }
   },
 
   computed: {
+    i19addToFavorites: () => i18n(i19addToFavorites),
     i19close: () => i18n(i19close),
+    i19days: () => i18n(i19days),
     i19discountOf: () => i18n(i19discountOf),
-    i19inStock: () => i18n(i19inStock),
+    i19endsIn: () => i18n(i19endsIn),
+    i19freeShippingFrom: () => i18n(i19freeShippingFrom),
     i19loadProductErrorMsg: () => i18n(i19loadProductErrorMsg),
+    i19offer: () => i18n(i19offer),
     i19only: () => i18n(i19only),
     i19outOfStock: () => i18n(i19outOfStock),
     i19paymentOptions: () => i18n(i19paymentOptions),
+    i19perUnit: () => i18n(i19perUnit),
+    i19productionDeadline: () => i18n(i19productionDeadline),
+    i19removeFromFavorites: () => i18n(i19removeFromFavorites),
     i19retry: () => i18n(i19retry),
-    i19selectVariation: () => i18n(i19selectVariation),
+    i19selectVariationMsg: () => i18n(i19selectVariationMsg),
     i19unavailable: () => i18n(i19unavailable),
+    i19quoteProduct: () => 'Cotar produto',
+    i19units: () => i18n(i19units).toLowerCase(),
+    i19unitsInStock: () => i18n(i19unitsInStock),
+    i19workingDays: () => i18n(i19workingDays),
 
     selectedVariation () {
       return this.selectedVariationId
@@ -118,6 +205,22 @@ export default {
       return checkInStock(this.body)
     },
 
+    isWithoutPrice () {
+      return !getPrice(this.body)
+    },
+
+    isVariationInStock () {
+      return checkInStock(this.selectedVariationId ? this.selectedVariation : this.body)
+    },
+
+    isLogged () {
+      return ecomPassport.checkAuthorization()
+    },
+
+    thumbnail () {
+      return getImg(this.body, null, 'small')
+    },
+
     productQuantity () {
       if (this.selectedVariation.quantity) {
         return this.selectedVariation.quantity
@@ -137,13 +240,55 @@ export default {
 
     discount () {
       const { body } = this
-      return checkOnPromotion(body)
-        ? Math.round(((body.base_price - getPrice(body)) * 100) / body.base_price)
+      const priceValue = this.fixedPrice || getPrice(body)
+      return checkOnPromotion(body) || (body.price > priceValue)
+        ? Math.round(((body.base_price - priceValue) * 100) / body.base_price)
         : 0
     },
 
+    isOnSale () {
+      const { body } = this
+      return this.hasPromotionTimer &&
+        checkOnPromotion(body) &&
+        body.price_effective_date &&
+        body.price_effective_date.end &&
+        Date.now() < new Date(body.price_effective_date.end).getTime()
+    },
+
+    ghostProductForPrices () {
+      const prices = {}
+      ;['price', 'base_price'].forEach(field => {
+        let price = this.selectedVariation[field] || this.body[field]
+        if (price !== undefined) {
+          this.customizations.forEach(customization => {
+            if (customization.add_to_price) {
+              price += this.getAdditionalPrice(customization.add_to_price)
+            }
+          })
+        }
+        prices[field] = price
+      })
+      const ghostProduct = { ...this.body }
+      if (this.selectedVariationId) {
+        Object.assign(ghostProduct, this.selectedVariation)
+        delete ghostProduct.variations
+      }
+      return {
+        ...ghostProduct,
+        ...prices
+      }
+    },
+
     hasVariations () {
       return this.body.variations && this.body.variations.length
+    },
+
+    isKit () {
+      return this.body.kit_composition && this.body.kit_composition.length
+    },
+
+    isKitWithVariations () {
+      return this.kitItems.some(item => item.variations && item.variations.length)
     }
   },
 
@@ -152,15 +297,19 @@ export default {
     getSpecValueByText,
 
     setBody (data) {
-      this.body = data
+      this.body = {
+        ...data,
+        body_html: '',
+        body_text: '',
+        inventory_records: []
+      }
       this.$emit('update:product', data)
     },
 
     fetchProduct (isRetry = false) {
-      const { storeId, productId } = this
-      store({
+      const { productId } = this
+      return store({
         url: `/products/${productId}.json`,
-        storeId,
         axiosConfig: {
           timeout: isRetry ? 2500 : 6000
         }
@@ -168,7 +317,7 @@ export default {
         .then(({ data }) => {
           this.setBody(data)
           if (getContextId() === productId) {
-            storefront.context.body = data
+            storefront.context.body = this.body
           }
           this.hasLoadError = false
         })
@@ -188,6 +337,63 @@ export default {
         })
     },
 
+    getAdditionalPrice ({ type, addition }) {
+      return type === 'fixed'
+        ? addition
+        : getPrice(this.body) * addition / 100
+    },
+
+    formatAdditionalPrice (addToPrice) {
+      if (addToPrice && addToPrice.addition) {
+        return formatMoney(this.getAdditionalPrice(addToPrice))
+      }
+      return ''
+    },
+
+    setCustomizationOption (customization, text) {
+      const index = this.customizations.findIndex(({ _id }) => _id === customization._id)
+      if (text) {
+        if (index > -1) {
+          this.customizations[index].option = { text }
+        } else {
+          this.customizations.push({
+            _id: customization._id,
+            label: customization.label,
+            add_to_price: customization.add_to_price,
+            option: { text }
+          })
+        }
+      } else if (index > -1) {
+        this.customizations.splice(index, 1)
+      }
+    },
+
+    showVariationPicture (variation) {
+      if (variation.picture_id) {
+        const pictureIndex = this.body.pictures.findIndex(({ _id }) => {
+          return _id === variation.picture_id
+        })
+        this.currentGalleyImg = pictureIndex + 1
+      }
+    },
+
+    handleGridOption ({ gridId, gridIndex, optionText }) {
+      if (gridIndex === 0) {
+        const variation = this.body.variations.find(variation => {
+          return getSpecTextValue(variation, gridId) === optionText
+        })
+        if (variation) {
+          this.showVariationPicture(variation)
+        }
+      }
+    },
+
+    toggleFavorite () {
+      if (this.isLogged) {
+        this.isFavorite = toggleFavorite(this.body._id, this.ecomPassport)
+      }
+    },
+
     buy () {
       this.hasClickedBuy = true
       const product = sanitizeProductBody(this.body)
@@ -199,9 +405,19 @@ export default {
           return
         }
       }
-      this.$emit('buy', { product, variationId })
+      const customizations = [...this.customizations]
+      this.$emit('buy', { product, variationId, customizations })
       if (this.canAddToCart) {
-        ecomCart.addProduct(product, variationId)
+        ecomCart.addProduct({ ...product, customizations }, variationId, this.qntToBuy)
+      }
+      this.isOnCart = true
+    },
+
+    buyOrScroll () {
+      if (this.hasVariations || this.isKit) {
+        scrollToElement(this.$refs.actions)
+      } else {
+        this.buy()
       }
     }
   },
@@ -212,18 +428,20 @@ export default {
         if (this.hasClickedBuy) {
           this.hasClickedBuy = false
         }
-        if (this.selectedVariation.picture_id) {
-          const pictureIndex = this.body.pictures.findIndex(({ _id }) => {
-            return _id === this.selectedVariation.picture_id
-          })
-          this.currentGalleyImg = pictureIndex + 1
-        }
+        const { pathname } = window.location
+        const searchParams = new URLSearchParams(window.location.search)
+        searchParams.set('variation_id', variationId)
+        window.history.pushState({
+          pathname,
+          params: searchParams.toString()
+        }, '', `${pathname}?${searchParams.toString()}`)
+        this.showVariationPicture(this.selectedVariation)
       }
     },
 
     fixedPrice (price) {
-      if (price > 0) {
-        const fetchPaymentOptions = () => {
+      if (price > 0 && !this.isQuickview) {
+        addIdleCallback(() => {
           modules({
             url: '/list_payments.json',
             method: 'POST',
@@ -234,35 +452,161 @@ export default {
               items: [{
                 ...sanitizeProductBody(this.body),
                 product_id: this.body._id
-              }]
+              }],
+              currency_id: this.body.currency_id || $ecomConfig.get('currency'),
+              currency_symbol: this.body.currency_symbol || $ecomConfig.get('currency_symbol')
             }
           })
             .then(({ data }) => {
-              this.paymentGateways = data.result
-                .reduce((paymentGateways, { validated, response }) => {
-                  return validated
-                    ? paymentGateways.concat(response.payment_gateways)
-                    : paymentGateways
-                }, []).sort((a, b) => {
-                  return a.discount && !b.discount ? -1 : 1
+              if (Array.isArray(this.paymentAppsSort) && this.paymentAppsSort.length) {
+                sortApps(data.result, this.paymentAppsSort)
+              }
+              this.paymentOptions = data.result
+                .reduce((paymentOptions, appResult) => {
+                  if (appResult.validated) {
+                    paymentOptions.push({
+                      app_id: appResult.app_id,
+                      ...appResult.response
+                    })
+                  }
+                  return paymentOptions
+                }, [])
+                .sort((a, b) => {
+                  return a.discount_option && a.discount_option.value &&
+                    !(b.discount_option && b.discount_option.value)
+                    ? -1
+                    : 1
                 })
             })
             .catch(console.error)
-        }
-        if (typeof window.requestIdleCallback === 'function') {
-          window.requestIdleCallback(fetchPaymentOptions)
-        } else {
-          setTimeout(fetchPaymentOptions, 500)
-        }
+        })
       }
+    },
+
+    isKit: {
+      handler (isKit) {
+        if (isKit && !this.kitItems.length) {
+          const kitComposition = this.body.kit_composition
+          const ecomSearch = new EcomSearch()
+          ecomSearch
+            .setPageSize(kitComposition.length)
+            .setProductIds(kitComposition.map(({ _id }) => _id))
+            .fetch(true)
+            .then(() => {
+              ecomSearch.getItems().forEach(product => {
+                const { quantity } = kitComposition.find(({ _id }) => _id === product._id)
+                const addKitItem = variationId => {
+                  const item = ecomCart.parseProduct(product, variationId, quantity)
+                  if (quantity) {
+                    item.min_quantity = item.max_quantity = quantity
+                  } else {
+                    item.quantity = 0
+                  }
+                  this.kitItems.push({
+                    ...item,
+                    _id: genRandomObjectId()
+                  })
+                }
+                addKitItem()
+              })
+            })
+            .catch(console.error)
+        }
+      },
+      immediate: true
     }
   },
 
   created () {
+    const presetQntToBuy = () => {
+      this.qntToBuy = this.body.min_quantity || 1
+    }
     if (this.product) {
       this.body = this.product
+      if (this.isSSR) {
+        this.fetchProduct().then(presetQntToBuy)
+      } else {
+        presetQntToBuy()
+      }
     } else {
-      this.fetchProduct()
+      this.fetchProduct().then(presetQntToBuy)
+    }
+    this.isFavorite = checkFavorite(this.body._id || this.productId, this.ecomPassport)
+  },
+
+  mounted () {
+    if (this.$refs.sticky && !this.isWithoutPrice) {
+      let isBodyPaddingSet = false
+      const setStickyBuyObserver = (isToVisible = true) => {
+        const $anchor = this.$refs[isToVisible ? 'sticky' : 'buy']
+        if (!$anchor) {
+          return
+        }
+        const $tmpDiv = document.createElement('div')
+        $anchor.parentNode.insertBefore($tmpDiv, $anchor)
+        if (isToVisible) {
+          $tmpDiv.style.position = 'absolute'
+          $tmpDiv.style.bottom = isMobile ? '-1600px' : '-1000px'
+        }
+        const obs = lozad($tmpDiv, {
+          rootMargin: '100px',
+          threshold: 0,
+          load: () => {
+            this.isStickyBuyVisible = isToVisible
+            if (isToVisible && !isBodyPaddingSet) {
+              this.$nextTick(() => {
+                const stickyHeight = this.$refs.sticky.offsetHeight
+                document.body.style.paddingBottom = `${(stickyHeight + 4)}px`
+                isBodyPaddingSet = true
+              })
+            }
+            $tmpDiv.remove()
+            setTimeout(() => {
+              const createObserver = function () {
+                setStickyBuyObserver(!isToVisible)
+                document.removeEventListener('scroll', createObserver)
+              }
+              document.addEventListener('scroll', createObserver)
+            }, 100)
+          }
+        })
+        obs.observe()
+      }
+      setStickyBuyObserver()
+    }
+    if (this.isOnSale) {
+      const promotionDate = new Date(this.body.price_effective_date.end)
+      const now = Date.now()
+      if (promotionDate.getTime() > now) {
+        let targetDate
+        const dayMs = 24 * 60 * 60 * 1000
+        const daysBetween = Math.floor((promotionDate.getTime() - now) / dayMs)
+        if (daysBetween > 2) {
+          targetDate = new Date()
+          targetDate.setHours(23, 59, 59, 999)
+        } else {
+          targetDate = promotionDate
+        }
+        const formatTime = (number) => number < 10 ? `0${number}` : number
+        const getRemainingTime = () => {
+          const distance = targetDate.getTime() - Date.now()
+          const days = Math.floor(distance / dayMs)
+          const hours = Math.floor((distance % dayMs) / (1000 * 60 * 60))
+          const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
+          const seconds = Math.floor((distance % (1000 * 60)) / 1000)
+          return (days > 0 ? `${formatTime(days)}:` : '') +
+            `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`
+        }
+        this.currentTimer = setInterval(() => {
+          this.$refs.timer.innerHTML = getRemainingTime()
+        }, 1000)
+      }
+    }
+  },
+
+  destroyed () {
+    if (this.currentTimer) {
+      clearInterval(this.currentTimer)
     }
   }
 }

package/src/js/helpers/add-idle-callback.js

@@ -0,0 +1,7 @@
+export default fn => {
+  if (typeof window === 'object' && typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(fn)
+  } else {
+    setTimeout(fn, 500)
+  }
+}

package/src/js/helpers/check-form-validity.js

@@ -0,0 +1,3 @@
+export default $form => typeof $form.reportValidity === 'function'
+  ? $form.reportValidity()
+  : $form.checkValidity()

package/src/js/helpers/favorite-products.js

@@ -0,0 +1,24 @@
+import _ecomPassport from '@ecomplus/passport-client'
+
+const toggleFavorite = (productId, ecomPassport = _ecomPassport) => {
+  const customer = ecomPassport.getCustomer()
+  const favorites = customer.favorites || []
+  const isFavorite = checkFavorite(productId, ecomPassport)
+
+  if (!isFavorite) {
+    favorites.push(productId)
+  } else {
+    const favIndex = favorites.indexOf(productId)
+    favorites.splice(favIndex, 1)
+  }
+
+  ecomPassport.requestApi('/me.json', 'patch', { favorites })
+  return !isFavorite
+}
+
+const checkFavorite = (productId, ecomPassport) => {
+  const { favorites } = ecomPassport.getCustomer()
+  return favorites && favorites.includes(productId)
+}
+
+export { toggleFavorite, checkFavorite }

package/src/js/helpers/scroll-to-element.js

@@ -0,0 +1,10 @@
+export default ($el, top = 0) => {
+  while ($el.offsetParent) {
+    top += $el.offsetTop
+    $el = $el.offsetParent
+  }
+  return window.scroll({
+    top,
+    behavior: 'smooth'
+  })
+}

package/src/js/helpers/sort-apps.js

@@ -0,0 +1,14 @@
+export default (results, order) => {
+  return results.sort((a, b) => {
+    if (a.app_id === b.app_id) {
+      return 0
+    }
+    const indexA = order.indexOf(a.app_id)
+    const indexB = order.indexOf(b.app_id)
+    return indexA > -1
+      ? indexB > -1
+          ? indexA < indexB ? -1 : 1
+          : indexA > -1 ? -1 : 1
+      : indexB > -1 ? 1 : 0
+  })
+}

package/src/js/helpers/wait-storefront-info.js

@@ -0,0 +1,21 @@
+export default (resource, field) => new Promise(resolve => {
+  const storefront = typeof window === 'object' && window.storefront
+  if (storefront) {
+    const getStorefrontInfo = () => {
+      let data = storefront.info && storefront.info[resource]
+      if (data) {
+        if (field) {
+          data = data[field]
+        }
+        if (data && Object.keys(data).length) {
+          resolve(data)
+          return true
+        }
+      }
+      return false
+    }
+    if (!getStorefrontInfo()) {
+      storefront.on(`info:${resource}`, getStorefrontInfo)
+    }
+  }
+})

package/src/scss/APicture.scss

@@ -9,9 +9,11 @@
     opacity: .3;
     height: 100%;
     min-height: 50px;
+    font-size: 0;
   }
 
   img {
+    width: auto;
     max-width: 100%;
     height: auto;
     margin: 0 auto;