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

package/src/js/LoginBlock.js

@@ -33,6 +33,10 @@ export default {
       type: Boolean,
       default: true
     },
+    canFetchOauth: {
+      type: Boolean,
+      default: true
+    },
     ecomPassport: {
       type: Object,
       default () {
@@ -74,7 +78,9 @@ export default {
         getCustomer().main_email === this.email
       if (isIdentified) {
         this.$nextTick(() => {
-          this.$refs.InputDoc.$el.focus()
+          if (this.$refs.InputDoc) {
+            this.$refs.InputDoc.$el.focus()
+          }
         })
       }
       return isIdentified
@@ -84,7 +90,8 @@ export default {
       if (!this.isWaitingLogin) {
         this.isWaitingLogin = true
         this.failAlertText = null
-        const { email, docNumber } = this
+        const { docNumber } = this
+        const email = this.email && this.email.toLowerCase()
         const isAccountConfirm = this.confirmAccount()
         const emitUpdate = () => this.$emit('update', { email, docNumber })
         this.ecomPassport.fetchLogin(email, isAccountConfirm ? docNumber : null)
@@ -111,8 +118,12 @@ export default {
       }
     },
 
-    oauthPopup (link) {
-      this.ecomPassport.popupOauthLink(link)
+    oauthPopup (fnOrLink) {
+      if (typeof fnOrLink === 'function') {
+        fnOrLink()
+      } else {
+        this.ecomPassport.popupOauthLink(fnOrLink)
+      }
       this.isWaitingPopup = true
       setTimeout(() => {
         this.isWaitingPopup = false
@@ -131,14 +142,41 @@ export default {
   },
 
   created () {
+    if (Array.isArray(window.OAUTH_PROVIDERS)) {
+      this.oauthProviders = []
+      if (window.OAUTH_PROVIDERS.includes('google') && window.signInWithGoogle) {
+        this.oauthProviders.push({
+          link: window.signInWithGoogle,
+          faIcon: 'fa-google',
+          provider: 'google',
+          providerName: 'Google'
+        })
+      }
+      if (window.OAUTH_PROVIDERS.includes('facebook') && window.signInWithFacebook) {
+        this.oauthProviders.push({
+          link: window.signInWithFacebook,
+          faIcon: 'fa-facebook-f',
+          provider: 'facebook',
+          providerName: 'Facebook'
+        })
+      }
+      if (this.oauthProviders.length) return
+    }
+    if (!this.canFetchOauth) return
     this.ecomPassport.fetchOauthProviders()
       .then(({ host, baseUri, oauthPath, providers }) => {
         const oauthProviders = []
         for (const provider in providers) {
           if (providers[provider]) {
             const { faIcon, providerName } = providers[provider]
+            let link = host + baseUri + provider + oauthPath
+            const referral = typeof window === 'object' &&
+              window.sessionStorage.getItem('ecomReferral')
+            if (referral) {
+              link += `?referral=${referral}`
+            }
             oauthProviders.push({
-              link: host + baseUri + provider + oauthPath,
+              link,
               faIcon,
               provider,
               providerName
@@ -162,6 +200,9 @@ export default {
         const customer = getCustomer()
         this.email = customer.main_email
         this.isCompany = customer.registry_type === 'j'
+        if (customer._id && customer.doc_number) {
+          this.$emit('login', this.ecomPassport)
+        }
       }
     }
     ecomPassport.on('login', () => {

package/src/js/LoginModal.js

@@ -8,6 +8,7 @@ import {
   i19login,
   i19logout,
   i19myAccount,
+  i19myFavorites,
   i19myOrders,
   i19noProfileFoundWithEmail,
   i19signInWith,
@@ -45,6 +46,10 @@ export default {
       type: String,
       default: '/app/#/account/orders'
     },
+    favoritesUrl: {
+      type: String,
+      default: '/app/#/account/favorites'
+    },
     ecomPassport: {
       type: Object,
       default () {
@@ -63,19 +68,21 @@ export default {
       oauthProviders: [],
       isLoginForm: false,
       hasLoginError: false,
-      hasNoProfileFound: false
+      hasNoProfileFound: false,
+      isWrongCode: false
     }
   },
 
   computed: {
     i19close: () => i18n(i19close),
     i19continueLoginOnPopup: () => i18n(i19continueLoginOnPopup),
-    i19email: () => i18n(i19email),
+    i19email: () => i18n(i19email).toLowerCase(),
     i19guestCheckoutMsg: () => i18n(i19guestCheckoutMsg),
     i19loginErrorMsg: () => i18n(i19loginErrorMsg),
     i19login: () => i18n(i19login),
     i19logout: () => i18n(i19logout),
     i19myAccount: () => i18n(i19myAccount),
+    i19myFavorites: () => i18n(i19myFavorites),
     i19myOrders: () => i18n(i19myOrders),
     i19noProfileFoundWithEmail: () => i18n(i19noProfileFoundWithEmail),
     i19signInWith: () => i18n(i19signInWith),
@@ -120,8 +127,14 @@ export default {
           for (const provider in providers) {
             if (providers[provider]) {
               const { faIcon, providerName } = providers[provider]
+              let link = host + baseUri + provider + oauthPath
+              const referral = typeof window === 'object' &&
+                window.sessionStorage.getItem('ecomReferral')
+              if (referral) {
+                link += `?referral=${referral}`
+              }
               oauthProviders.push({
-                link: host + baseUri + provider + oauthPath,
+                link,
                 faIcon,
                 provider,
                 providerName
@@ -180,7 +193,7 @@ export default {
 
     submitEmail () {
       this.isLoginForm = false
-      const promise = this.ecomPassport.fetchLogin(this.email)
+      const promise = this.ecomPassport.fetchLogin(this.email.toLowerCase())
         .catch(err => {
           const { response } = err
           if (response && response.status === 403) {

package/src/js/PaymentOption.js

@@ -19,6 +19,7 @@ export default {
       type: Object,
       required: true
     },
+    installmentsOption: Object,
     price: Number
   },
 
@@ -43,6 +44,31 @@ export default {
         return this.paymentGateway.installment_options.concat().sort((a, b) => {
           return a.number - b.number
         })
+      } else if (
+        this.price &&
+        this.installmentsOption &&
+        this.paymentGateway.payment_method.code === 'credit_card'
+      ) {
+        const installmentOptions = []
+        for (let number = 2; number <= this.installmentsOption.max_number; number++) {
+          const tax = this.installmentsOption.monthly_interest > 0
+          const minInstallment = this.installmentsOption.min_installment || 5
+          let value
+          if (!tax) {
+            value = this.price / number
+          } else {
+            const interest = this.installmentsOption.monthly_interest / 100
+            value = this.price * interest / (1 - Math.pow(1 + interest, -number))
+          }
+          if (value >= minInstallment) {
+            installmentOptions.push({
+              number,
+              value,
+              tax
+            })
+          }
+        }
+        return installmentOptions
       }
     },
 
@@ -51,7 +77,8 @@ export default {
         if (this.discount.type === 'percentage') {
           return this.price * (100 - this.discount.value) / 100
         } else {
-          return Math.min(this.price - this.discount.value, 0)
+          const finalPrice = this.price - this.discount.value
+          return (finalPrice > 0 ? finalPrice : 0)
         }
       }
       return this.price

package/src/js/PointsApplier.js

@@ -0,0 +1,110 @@
+import { i19use$1LoyaltyPoints } from '@ecomplus/i18n'
+
+import {
+  i18n,
+  formatMoney
+} from '@ecomplus/utils'
+
+import ecomPassport from '@ecomplus/passport-client'
+import waitStorefrontInfo from './helpers/wait-storefront-info'
+
+export default {
+  name: 'PointsApplier',
+
+  props: {
+    pointsPrograms: Object,
+    pointsApplied: {
+      type: Object,
+      required: true
+    },
+    pointsAmount: Number,
+    maxPointsAmount: Number,
+    ecomPassport: {
+      type: Object,
+      default () {
+        return ecomPassport
+      }
+    }
+  },
+
+  data () {
+    return {
+      localPointsPrograms: this.pointsPrograms || {},
+      availablePoints: {}
+    }
+  },
+
+  computed: {
+    i19use$1LoyaltyPoints: () => i18n(i19use$1LoyaltyPoints)
+  },
+
+  methods: {
+    formatMoney,
+
+    updatePrograms (pointsPrograms) {
+      if (pointsPrograms && Object.keys(pointsPrograms).length) {
+        this.localPointsPrograms = pointsPrograms
+        this.$emit('update:points-programs', pointsPrograms)
+        this.$nextTick(this.fixAvailablePoints)
+      }
+    },
+
+    fixAvailablePoints () {
+      const pointsEntries = this.ecomPassport.getCustomer().loyalty_points_entries
+      this.availablePoints = pointsEntries
+        ? pointsEntries.reduce((availablePoints, pointsEntry) => {
+          const validThru = pointsEntry.valid_thru
+          if (!validThru || new Date(validThru).getTime() >= Date.now()) {
+            const programId = pointsEntry.program_id
+            const points = pointsEntry.active_points
+            if (this.localPointsPrograms[programId]) {
+              if (availablePoints[programId]) {
+                availablePoints[programId] += points
+              } else {
+                availablePoints[programId] = points
+              }
+              if (availablePoints[programId] > pointsEntry.max_points) {
+                availablePoints[programId] = pointsEntry.max_points
+              }
+              const { ratio } = this.localPointsPrograms[programId]
+              if (availablePoints[programId] * ratio > this.maxPointsAmount) {
+                availablePoints[programId] = this.maxPointsAmount / ratio
+              }
+            }
+          }
+          return availablePoints
+        }, {})
+        : {}
+    },
+
+    getPointsAmount (programId) {
+      return this.availablePoints[programId] * this.localPointsPrograms[programId].ratio
+    },
+
+    togglePoints (programId, isChecked) {
+      const pointsApplied = {}
+      if (isChecked) {
+        pointsApplied[programId] = this.availablePoints[programId]
+      }
+      this.$emit('update:points-applied', pointsApplied)
+      let pointsAmount = 0
+      for (programId in pointsApplied) {
+        pointsAmount += this.getPointsAmount(programId)
+      }
+      this.$emit('update:points-amount', pointsAmount)
+    }
+  },
+
+  created () {
+    if (!this.pointsPrograms || !Object.keys(this.pointsPrograms).length) {
+      waitStorefrontInfo('list_payments', 'loyalty_points_programs')
+        .then(this.updatePrograms)
+    } else {
+      this.fixAvailablePoints()
+    }
+    this.ecomPassport.on('login', this.fixAvailablePoints)
+    this.$once('hook:beforeDestroy', () => {
+      this.ecomPassport.off('login', this.fixAvailablePoints)
+    })
+  }
+}

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,61 @@ 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
   },
 
   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,6 +128,10 @@ export default {
       return this.body.available && this.body.visible && this.isInStock
     },
 
+    isLogged () {
+      return ecomPassport.checkAuthorization()
+    },
+
     discount () {
       const { body } = this
       return checkOnPromotion(body)
@@ -90,13 +145,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 +171,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
+  }
+}