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

package/src/js/APicture.js

@@ -69,6 +69,8 @@ export default {
   data () {
     return {
       sources: [],
+      imgWidth: 0,
+      imgHeight: 0,
       height: null,
       opacity: null
     }
@@ -89,7 +91,8 @@ export default {
       }
       const fixedSrc = typeof src === 'object'
         ? src.zoom
-          ? src.zoom.url : defaultImgObj.url
+          ? src.zoom.url
+          : defaultImgObj.url
         : src
       return fixedSrc ? fixedSrc.replace(/\.webp$/, '') : this.placeholder
     },
@@ -115,10 +118,13 @@ export default {
         const imgObj = this.src[thumb]
         const { url, size } = (imgObj || this.defaultImgObj)
         srcset = url
-        if (clientWidth && size && this.canCalcHeight) {
-          const [width, height] = size.split('x').map(px => parseInt(px, 10))
-          if (height) {
-            this.height = `${(clientWidth >= width ? height : clientWidth * height / width)}px`
+        if (size) {
+          [this.imgWidth, this.imgHeight] = size.split('x').map(px => parseInt(px, 10))
+          if (clientWidth && this.imgHeight && this.canCalcHeight) {
+            this.height = (clientWidth >= this.imgWidth
+              ? this.imgHeight
+              : clientWidth * this.imgHeight / this.imgWidth) +
+              'px'
           }
         }
       } else {
@@ -130,8 +136,18 @@ export default {
             srcset,
             type: 'image/webp'
           }, {
-            srcset: srcset.replace(/\.webp$/, ''),
-            type: `image/${(srcset.substr(-9, 4) === 'png' ? 'png' : 'jpeg')}`
+            srcset: /\/imgs\/[0-9]{3}px/.test(srcset)
+              ? srcset.replace(/\/imgs\/[0-9]{3}px/, '')
+              : srcset.replace(/\.webp$/, ''),
+            type: `image/${(srcset.substr(-9, 4) === '.png' ? 'png' : 'jpeg')}`
+          })
+        } else if (srcset.endsWith('.avif')) {
+          sources.push({
+            srcset,
+            type: 'image/avif'
+          }, {
+            srcset: srcset.replace('.avif', '.webp'),
+            type: 'image/webp'
           })
         } else {
           sources.push({ srcset })
@@ -151,6 +167,10 @@ export default {
           const { localFallbackSrc } = this
           const $img = $el.tagName === 'IMG' ? $el : $el.lastChild
           $img.style.opacity = 0
+          if (this.imgHeight) {
+            $img.height = this.imgHeight
+            $img.width = this.imgWidth
+          }
           $img.onerror = function () {
             console.error(new Error('Image load error'), this)
             $el.style.display = 'none'

package/src/js/APrices.js

@@ -4,7 +4,8 @@ import {
   i19interestFree,
   i19of,
   i19to,
-  i19upTo
+  i19upTo,
+  i19youEarn
 } from '@ecomplus/i18n'
 
 import {
@@ -14,14 +15,18 @@ import {
   formatMoney
 } from '@ecomplus/utils'
 
+import waitStorefrontInfo from './helpers/wait-storefront-info'
+
 const getPriceWithDiscount = (price, discount) => {
   const { type, value } = discount
+  let priceWithDiscount
   if (value) {
     if (type === 'percentage') {
-      return price * (100 - value) / 100
+      priceWithDiscount = price * (100 - value) / 100
     } else {
-      return price - value
+      priceWithDiscount = price - value
     }
+    return priceWithDiscount > 0 ? priceWithDiscount : 0
   }
 }
 
@@ -35,11 +40,16 @@ export default {
     },
     isLiteral: Boolean,
     isBig: Boolean,
+    isAmountTotal: Boolean,
     installmentsOption: Object,
     discountOption: Object,
     discountText: {
       type: [String, Boolean],
       default: ''
+    },
+    canShowPriceOptions: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -53,9 +63,13 @@ export default {
       },
       extraDiscount: {
         type: null,
-        value: 0
+        value: 0,
+        min_amount: 0
       },
-      discountLabel: this.discountText
+      discountLabel: this.discountText,
+      pointsProgramName: null,
+      pointsMinPrice: 0,
+      earnPointsFactor: 0
     }
   },
 
@@ -66,10 +80,14 @@ export default {
     i19of: () => i18n(i19of),
     i19to: () => i18n(i19to),
     i19upTo: () => i18n(i19upTo),
+    i19youEarn: () => i18n(i19youEarn),
 
     price () {
       const price = getPrice(this.product)
-      if (this.extraDiscount.value) {
+      if (
+        this.extraDiscount.value &&
+        (!this.extraDiscount.min_amount || price > this.extraDiscount.min_amount)
+      ) {
         return getPriceWithDiscount(price, this.extraDiscount)
       }
       return price
@@ -83,12 +101,29 @@ export default {
       }
     },
 
+    hasVariedPrices () {
+      const { variations } = this.product
+      if (variations) {
+        const productPrice = getPrice(this.product)
+        for (let i = 0; i < variations.length; i++) {
+          const price = getPrice({
+            ...this.product,
+            ...variations[i]
+          })
+          if (price > productPrice) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+
     priceWithDiscount () {
-      return getPriceWithDiscount(this.price, this.discount)
+      return this.canShowPriceOptions && getPriceWithDiscount(this.price, this.discount)
     },
 
     installmentValue () {
-      if (this.installmentsNumber >= 2) {
+      if (this.canShowPriceOptions && this.installmentsNumber >= 2) {
         if (!this.monthlyInterest) {
           return this.price / this.installmentsNumber
         } else {
@@ -114,7 +149,11 @@ export default {
     },
 
     updateDiscount (discount) {
-      if (discount && (!discount.min_amount || discount.min_amount <= this.price)) {
+      if (
+        discount &&
+        (!discount.min_amount || discount.min_amount <= this.price) &&
+        (!this.isAmountTotal || discount.apply_at === 'total')
+      ) {
         this.discount = discount
         if (!this.discountText && this.discountText !== false && discount.label) {
           this.discountLabel = `via ${discount.label}`
@@ -133,39 +172,39 @@ export default {
   },
 
   created () {
-    const storefront = typeof window === 'object' && window.storefront
-    if (this.discountOption) {
-      this.updateDiscount(this.discountOption)
-    } else if (storefront) {
-      const getExtraDiscount = () => {
-        const discountCampaign = storefront.info && storefront.info.apply_discount
-        if (discountCampaign) {
-          const discount = discountCampaign.available_extra_discount
-          if (discount) {
-            this.extraDiscount = discount
-          }
-          return Object.keys(discountCampaign).length > 0
-        }
-        return false
-      }
-      if (!getExtraDiscount()) {
-        storefront.on('info:apply_discount', getExtraDiscount)
-      }
-    }
-    if (this.installmentsOption) {
-      this.updateInstallments(this.installmentsOption)
-    } else if (storefront) {
-      const getPaymentInfo = () => {
-        const paymentInfo = storefront.info && storefront.info.list_payments
-        if (paymentInfo) {
-          this.updateInstallments(paymentInfo.installments_option)
-          this.updateDiscount(paymentInfo.discount_option)
-          return Object.keys(paymentInfo).length > 0
-        }
-        return false
+    if (this.canShowPriceOptions) {
+      if (this.discountOption) {
+        this.updateDiscount(this.discountOption)
+      } else {
+        waitStorefrontInfo('apply_discount')
+          .then(discountCampaign => {
+            if (discountCampaign.available_extra_discount) {
+              this.extraDiscount = discountCampaign.available_extra_discount
+            }
+          })
       }
-      if (!getPaymentInfo()) {
-        storefront.on('info:list_payments', getPaymentInfo)
+      if (this.installmentsOption) {
+        this.updateInstallments(this.installmentsOption)
+      } else {
+        waitStorefrontInfo('list_payments')
+          .then(paymentInfo => {
+            this.updateInstallments(paymentInfo.installments_option)
+            this.updateDiscount(paymentInfo.discount_option)
+            const pointsPrograms = paymentInfo.loyalty_points_programs
+            if (this.isLiteral && pointsPrograms) {
+              this.$nextTick(() => {
+                for (const programId in pointsPrograms) {
+                  const pointsProgram = pointsPrograms[programId]
+                  if (pointsProgram && pointsProgram.earn_percentage > 0) {
+                    this.pointsMinPrice = pointsProgram.min_subtotal_to_earn
+                    this.pointsProgramName = pointsProgram.name
+                    this.earnPointsFactor = pointsProgram.earn_percentage / 100
+                    break
+                  }
+                }
+              })
+            }
+          })
       }
     }
   }

package/src/js/AShare.js

@@ -0,0 +1,83 @@
+import {
+  i19email,
+  i19on,
+  i19share
+} from '@ecomplus/i18n'
+
+import { i18n } from '@ecomplus/utils'
+import { ShareNetwork } from 'vue-social-sharing'
+
+const shareNetworks = [
+  {
+    network: 'whatsapp',
+    name: 'WhatsApp',
+    icon: 'i-whatsapp',
+    color: '#25d366'
+  },
+  {
+    network: 'facebook',
+    name: 'Facebook',
+    icon: 'i-facebook',
+    color: '#1877f2'
+  },
+  {
+    network: 'twitter',
+    name: 'Twitter',
+    icon: 'i-twitter',
+    color: '#1da1f2'
+  },
+  {
+    network: 'telegram',
+    name: 'Telegram',
+    icon: 'i-telegram',
+    color: '#0088cc'
+  },
+  {
+    network: 'pinterest',
+    name: 'Pinterest',
+    icon: 'i-pinterest',
+    color: '#bd081c'
+  },
+  {
+    network: 'email',
+    name: 'Email',
+    icon: 'i-envelope',
+    color: '#333333'
+  },
+  {
+    network: 'sms',
+    name: 'SMS',
+    color: '#333333'
+  }
+]
+
+export default {
+  name: 'TheProduct',
+
+  components: {
+    ShareNetwork
+  },
+
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    title: String,
+    description: String
+  },
+
+  computed: {
+    i19email: () => i18n(i19email),
+    i19on: () => i18n(i19on).toLowerCase(),
+    i19share: () => i18n(i19share),
+    shareNetworks: () => shareNetworks,
+
+    localUrl () {
+      if (typeof window === 'object' && !this.url.startsWith('http')) {
+        return `https://${window.location.hostname}${this.url}`
+      }
+      return this.url
+    }
+  }
+}

package/src/js/AccountAddresses.js

@@ -0,0 +1,201 @@
+import {
+  i19edit,
+  i19newAddress,
+  i19noNumber,
+  i19remove
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  fullName as getFullName,
+  randomObjectId
+} from '@ecomplus/utils'
+
+import AddressForm from './../AddressForm.vue'
+
+const { sessionStorage } = window
+const storageKey = 'ecomCustomerAddress'
+
+export default {
+  name: 'AccountAddresses',
+
+  components: {
+    AddressForm
+  },
+
+  props: {
+    customer: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    zipCode: String,
+    formBtnText: String,
+    canShowForm: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      isForm: false,
+      isNewAddress: false,
+      editAddressIndex: -1
+    }
+  },
+
+  computed: {
+    i19edit: () => i18n(i19edit),
+    i19newAddress: () => i18n(i19newAddress),
+    i19remove: () => i18n(i19remove),
+    i19noNumber: () => i18n(i19noNumber),
+
+    addresses () {
+      if (this.customer.addresses) {
+        return this.customer.addresses.map((addr) => {
+          if (!addr._id) {
+            addr._id = randomObjectId()
+          }
+          return addr
+        })
+      }
+      return []
+    },
+
+    localAddress: {
+      get () {
+        let address = this.addresses[this.editAddressIndex]
+        if (!address) {
+          address = {}
+          if (this.zipCode) {
+            address.zip = this.zipCode
+          }
+          if (this.customer.name) {
+            address.name = getFullName(this.customer).substr(0, 70)
+          }
+        }
+        return address
+      },
+      set (address) {
+        const addresses = [].concat(this.addresses)
+        addresses[this.editAddressIndex] = address
+        this.$emit('update:customer', {
+          ...this.customer,
+          addresses
+        })
+        if (address.zip) {
+          this.isNewAddress = false
+          this.selectAddress(address)
+        }
+        this.isForm = false
+      }
+    }
+  },
+
+  methods: {
+    getLineAddress (address) {
+      if (address.line_address) {
+        return address.line_address
+      } else {
+        let lineAddress = `${address.street} ${(address.number || this.i19noNumber)}`
+        if (address.complement) {
+          lineAddress += ` - ${address.complement}`
+        }
+        if (address.borough) {
+          lineAddress += `, ${address.borough}`
+        }
+        return lineAddress
+      }
+    },
+
+    selectAddress (address) {
+      this.$emit('select-address', address._id)
+      sessionStorage.setItem(storageKey, JSON.stringify(address))
+    },
+
+    removeAddress (index) {
+      const addresses = [].concat(this.addresses)
+      addresses.splice(index, 1)
+      this.$emit('update:customer', {
+        ...this.customer,
+        addresses
+      })
+    }
+  },
+
+  watch: {
+    addresses (newList, oldList) {
+      if (!oldList.length) {
+        if (newList.length && this.isNewAddress) {
+          this.isForm = this.isNewAddress = false
+        }
+      } else if (!newList.length) {
+        this.isForm = this.isNewAddress = true
+      }
+    },
+
+    isNewAddress (isAddAddress) {
+      if (isAddAddress) {
+        this.editAddressIndex = this.addresses.length
+        this.isForm = true
+      }
+    },
+
+    editAddressIndex (index) {
+      if (index > -1) {
+        const address = this.addresses[index]
+        if (address) {
+          this.selectAddress(address)
+        }
+        this.isForm = true
+      }
+    },
+
+    isForm (isVisible) {
+      this.$emit('show-form', isVisible)
+      if (!isVisible) {
+        this.editAddressIndex = -1
+      }
+    }
+  },
+
+  created () {
+    if (!this.addresses.length) {
+      this.isNewAddress = true
+      const sessionAddress = JSON.parse(sessionStorage.getItem(storageKey))
+      if (sessionAddress) {
+        const address = {}
+        for (const field in sessionAddress) {
+          if (sessionAddress[field]) {
+            address[field] = sessionAddress[field]
+          }
+        }
+        if (address._id && address.zip && address.street) {
+          this.editAddressIndex = 0
+          this.$nextTick(() => {
+            this.localAddress = address
+          })
+        }
+      }
+    } else {
+      let addressIndex
+      if (this.zipCode) {
+        addressIndex = this.addresses.findIndex(addr => addr.zip === this.zipCode)
+      }
+      if (!(addressIndex >= 0)) {
+        addressIndex = this.addresses.findIndex(addr => addr.default)
+        if (addressIndex === -1) {
+          addressIndex = 0
+        }
+      }
+      const address = this.addresses[addressIndex]
+      if (address.name && ((address.street && address.city) || address.name.endsWith('*'))) {
+        this.selectAddress(address)
+      } else {
+        this.editAddressIndex = addressIndex
+      }
+    }
+  }
+}