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

package/src/js/DiscountApplier.js

@@ -1,6 +1,7 @@
 import {
   i19add,
   i19addDiscountCoupon,
+  // i19add$1ToGetDiscountMsg,
   i19campaignAppliedMsg,
   i19code,
   i19couponAppliedMsg,
@@ -10,12 +11,53 @@ import {
   i19invalidCouponMsg
 } from '@ecomplus/i18n'
 
-import { i18n } from '@ecomplus/utils'
-import { modules } from '@ecomplus/client'
+import { i18n, formatMoney } from '@ecomplus/utils'
+import { store, modules } from '@ecomplus/client'
 import ecomCart from '@ecomplus/shopping-cart'
 import ecomPassport from '@ecomplus/passport-client'
 import AAlert from '../AAlert.vue'
 
+const addFreebieItems = (ecomCart, productIds) => {
+  if (Array.isArray(productIds)) {
+    ecomCart.data.items.forEach(({ _id, product_id: productId, flags }) => {
+      if (flags && flags.includes('freebie') && !productIds.includes(productId)) {
+        ecomCart.removeItem(_id)
+      }
+    })
+    productIds.forEach(productId => {
+      const canAddFreebie = !ecomCart.data.items.find(item => {
+        return item.product_id === productId && item.flags && item.flags.includes('freebie')
+      })
+      if (canAddFreebie) {
+        store({ url: `/products/${productId}.json` })
+          .then(({ data }) => {
+            if (data.quantity > 0 && (!data.variations || !data.variations.length)) {
+              ecomCart.addProduct(
+                {
+                  ...data,
+                  flags: ['freebie', '__tmp']
+                },
+                null,
+                productIds.reduce((qnt, _id) => {
+                  return _id === productId ? qnt + 1 : qnt
+                }, 0)
+              )
+            }
+          })
+          .catch(console.error)
+      }
+    })
+  } else {
+    if (ecomCart.data && ecomCart.data.items && ecomCart.data.items.length) {
+      ecomCart.data.items.forEach(({ _id, flags }) => {
+        if (flags && flags.includes('freebie')) {
+          ecomCart.removeItem(_id)
+        }
+      })
+    }
+  }
+}
+
 export default {
   name: 'DiscountApplier',
 
@@ -33,13 +75,20 @@ export default {
     isFormAlwaysVisible: Boolean,
     isCouponApplied: Boolean,
     isAttentionWanted: Boolean,
+    canAddFreebieItems: {
+      type: Boolean,
+      default: true
+    },
     modulesPayload: Object,
+    paymentGateway: Object,
     ecomCart: {
       type: Object,
       default () {
         return ecomCart
       }
     },
+    customer: Object,
+    canPassManyDiscountApps: Boolean,
     ecomPassport: {
       type: Object,
       default () {
@@ -55,14 +104,16 @@ export default {
       isFormVisible: this.isFormAlwaysVisible || this.couponCode,
       isLoading: false,
       localCouponCode: this.couponCode,
-      localAmountTotal: this.amount.total || 0,
-      localAmountDiscount: this.amount.discount || 0,
-      extraDiscountValue: 0,
+      localAmountTotal: null,
       isUpdateSheduled: false
     }
   },
 
   computed: {
+    i19add$1ToGetDiscountMsg: () => i18n({
+      en_us: 'Add more $1 to cart to get the discount.',
+      pt_br: 'Adicione mais $1 ao carrinho para ganhar o desconto.'
+    }),
     i19add: () => i18n(i19add),
     i19addDiscountCoupon: () => i18n(i19addDiscountCoupon),
     i19code: () => i18n(i19code),
@@ -75,62 +126,129 @@ export default {
     canAddCoupon () {
       return !this.couponCode || !this.isCouponApplied ||
         this.couponCode !== this.localCouponCode
+    },
+
+    paymentGatewayDiscount () {
+      if (!this.paymentGateway) return 0
+      const { discount } = this.paymentGateway
+      if (!discount || !discount.value) return 0
+      const applyAt = discount.apply_at || 'total'
+      const maxDiscount = applyAt === 'total' ? this.localAmountTotal : this.amount[applyAt]
+      if (maxDiscount > 0) {
+        const { type, value } = discount
+        if (type === 'percentage') {
+          return maxDiscount * value / 100
+        }
+        return value <= maxDiscount ? value : maxDiscount
+      }
+      return 0
     }
   },
 
   methods: {
+    fixAmount () {
+      const amount = this.amount || {
+        subtotal: this.ecomCart.data.subtotal
+      }
+      this.localAmountTotal = (amount.subtotal || 0) +
+        (amount.freight || 0) - this.paymentGatewayDiscount
+    },
+
     parseDiscountOptions (listResult = []) {
-      this.extraDiscountValue = 0
+      let extraDiscountValue = 0
       if (listResult.length) {
-        let discountRule, invalidCouponMsg
+        let discountRule, invalidCouponMsg, invalidAlertVariant
         listResult.forEach(appResult => {
           const { validated, error, response } = appResult
           if (validated && !error) {
             const appDiscountRule = response.discount_rule
             if (appDiscountRule) {
-              const discountRuleValue = appDiscountRule.extra_discount.value
-              if (!(this.extraDiscountValue > discountRuleValue)) {
-                this.extraDiscountValue = discountRuleValue
-                discountRule = {
-                  app_id: appResult.app_id,
-                  ...appDiscountRule
+              if (!this.canPassManyDiscountApps) {
+                const discountRuleValue = appDiscountRule.extra_discount.value
+                if (!(extraDiscountValue > discountRuleValue)) {
+                  extraDiscountValue = discountRuleValue
+                  discountRule = {
+                    app_id: appResult.app_id,
+                    ...appDiscountRule
+                  }
                 }
+              } else {
+                if (extraDiscountValue) {
+                  appDiscountRule.extra_discount.value += extraDiscountValue
+                  discountRule = appDiscountRule
+                } else {
+                  discountRule = {
+                    app_id: appResult.app_id,
+                    ...appDiscountRule
+                  }
+                }
+                extraDiscountValue = appDiscountRule.extra_discount.value
               }
-            } else if (response.invalid_coupon_message) {
+            } else if (response.available_extra_discount && response.available_extra_discount.min_amount) {
+              invalidCouponMsg = this.i19add$1ToGetDiscountMsg
+                .replace('$1', formatMoney(response.available_extra_discount.min_amount - this.amount.subtotal))
+              invalidAlertVariant = 'info'
+            }
+            if (response.invalid_coupon_message) {
               invalidCouponMsg = response.invalid_coupon_message
             }
+            if (this.canAddFreebieItems) {
+              addFreebieItems(this.ecomCart, response.freebie_product_ids)
+            }
           }
         })
-        if (this.extraDiscountValue) {
+        if (extraDiscountValue) {
           if (this.localCouponCode) {
-            this.$emit('update:coupon-code', this.localCouponCode)
-            this.alertText = this.i19couponAppliedMsg
+            if (invalidCouponMsg) {
+              this.alertText = invalidCouponMsg
+              this.alertVariant = invalidAlertVariant || 'warning'
+            } else {
+              this.$emit('update:coupon-code', this.localCouponCode)
+              this.alertText = this.i19couponAppliedMsg
+              this.alertVariant = 'info'
+            }
           } else {
             this.alertText = this.i19campaignAppliedMsg
+            this.alertVariant = 'info'
           }
           this.$emit('set-discount-rule', discountRule)
-          this.alertVariant = 'info'
         } else {
           if (this.localCouponCode) {
             this.alertText = invalidCouponMsg || this.i19invalidCouponMsg
-            this.alertVariant = 'warning'
+            this.alertVariant = invalidAlertVariant || 'warning'
+          } else {
+            this.alertText = null
           }
           this.$emit('set-discount-rule', {})
         }
       }
     },
 
-    fetchDiscountOptions (data) {
+    fetchDiscountOptions (data = {}) {
       this.isLoading = true
+      const customer = this.customer || this.ecomPassport.getCustomer()
+      if (customer && (customer._id || customer.doc_number)) {
+        data.customer = {}
+        if (customer._id) {
+          data.customer._id = customer._id
+        }
+        if (customer.display_name) {
+          data.customer.display_name = customer.display_name
+        }
+        if (customer.doc_number) {
+          data.customer.doc_number = customer.doc_number
+        }
+      }
       modules({
         url: '/apply_discount.json',
         method: 'POST',
         data: {
           ...this.modulesPayload,
           amount: {
+            subtotal: this.localAmountTotal,
             ...this.amount,
             total: this.localAmountTotal,
-            discount: this.localAmountDiscount
+            discount: this.paymentGatewayDiscount
           },
           items: this.ecomCart.data.items,
           ...data
@@ -153,15 +271,6 @@ export default {
         const data = {
           discount_coupon: localCouponCode
         }
-        if (this.ecomPassport.checkLogin()) {
-          const customer = this.ecomPassport.getCustomer()
-          data.customer = {
-            _id: customer._id
-          }
-          if (customer.display_name) {
-            data.customer.display_name = customer.display_name
-          }
-        }
         this.fetchDiscountOptions(data)
       }
     },
@@ -171,9 +280,23 @@ export default {
         if (isForceUpdate || !this.isCouponApplied) {
           this.submitCoupon(isForceUpdate)
         }
-      } else if (isForceUpdate || (this.amount && this.amount.total)) {
+      } else if (
+        isForceUpdate ||
+        (!this.isUpdateSheduled && this.amount && this.localAmountTotal)
+      ) {
         this.fetchDiscountOptions()
       }
+    },
+
+    scheduleUpdateDiscount () {
+      if (this.isUpdateSheduled) return
+      this.isUpdateSheduled = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.updateDiscount()
+          this.isUpdateSheduled = false
+        }, 600)
+      })
     }
   },
 
@@ -201,32 +324,26 @@ export default {
       }
     },
 
-    localAmountTotal () {
-      if (!this.isUpdateSheduled) {
-        this.isUpdateSheduled = true
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.updateDiscount()
-            this.isUpdateSheduled = false
-          }, 150)
-        })
+    localAmountTotal (total, oldTotal) {
+      if (oldTotal !== null && Math.abs(total - oldTotal) > 0.01) {
+        this.scheduleUpdateDiscount()
       }
     },
 
     amount: {
-      handler (amount) {
-        const discountDiff = amount.discount - this.extraDiscountValue
-        this.localAmountDiscount = discountDiff > 0.01 ? discountDiff : 0
-        const fixedTotal = amount.total + this.extraDiscountValue
-        if (Math.abs(fixedTotal - this.localAmountTotal) > 0.01) {
-          this.localAmountTotal = fixedTotal
-        }
+      handler () {
+        this.fixAmount()
       },
       deep: true
+    },
+
+    paymentGatewayDiscount () {
+      this.scheduleUpdateDiscount()
     }
   },
 
-  created () {
+  mounted () {
+    this.fixAmount()
     this.updateDiscount(false)
   }
 }

package/src/js/EarnPointsProgress.js

@@ -0,0 +1,77 @@
+import {
+  i19add$1ToEarn,
+  i19loyaltyPoints
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  formatMoney
+} from '@ecomplus/utils'
+
+import waitStorefrontInfo from './helpers/wait-storefront-info'
+
+export default {
+  name: 'EarnPointsProgress',
+
+  props: {
+    pointsPrograms: Object,
+    cartSubtotal: {
+      type: Number,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      localPointsPrograms: this.pointsPrograms,
+      programName: ''
+    }
+  },
+
+  computed: {
+    i19add$1ToEarn: () => i18n(i19add$1ToEarn),
+    i19loyaltyPoints: () => i18n(i19loyaltyPoints),
+
+    minSubtotalToEarn () {
+      let minSubtotal
+      const pointsPrograms = this.localPointsPrograms
+      if (pointsPrograms) {
+        for (const programId in pointsPrograms) {
+          const pointsProgram = pointsPrograms[programId]
+          const programMinSubtotal = pointsProgram && pointsProgram.min_subtotal_to_earn
+          if (
+            programMinSubtotal >= 0 &&
+            (minSubtotal === undefined || minSubtotal > programMinSubtotal)
+          ) {
+            minSubtotal = programMinSubtotal
+            this.programName = pointsProgram.name
+            if (!minSubtotal) {
+              break
+            }
+          }
+        }
+      }
+      return minSubtotal
+    },
+
+    earnFromPercentage () {
+      return this.minSubtotalToEarn >= 0 && this.cartSubtotal < this.minSubtotalToEarn
+        ? Math.round(this.cartSubtotal * 100 / this.minSubtotalToEarn)
+        : null
+    }
+  },
+
+  methods: {
+    formatMoney
+  },
+
+  created () {
+    if (!this.pointsPrograms || !Object.keys(this.pointsPrograms).length) {
+      waitStorefrontInfo('list_payments', 'loyalty_points_programs')
+        .then(pointsPrograms => {
+          this.localPointsPrograms = pointsPrograms
+          this.$emit('update:points-programs', pointsPrograms)
+        })
+    }
+  }
+}

package/src/js/InputDate.js

@@ -36,15 +36,15 @@ export default {
     cleaveOptions () {
       return countryCode === 'BR'
         ? {
-          date: true,
-          delimiter: '/',
-          datePattern: ['d', 'm', 'Y']
-        }
+            date: true,
+            delimiter: '/',
+            datePattern: ['d', 'm', 'Y']
+          }
         : {
-          date: true,
-          delimiter: '-',
-          datePattern: ['Y', 'm', 'd']
-        }
+            date: true,
+            delimiter: '-',
+            datePattern: ['Y', 'm', 'd']
+          }
     }
   }
 }

package/src/js/InputDocNumber.js

@@ -1,5 +1,11 @@
 import { i19docNumber } from '@ecomplus/i18n'
 import { $ecomConfig, i18n } from '@ecomplus/utils'
+
+import {
+  isValidCPF as validateCPF,
+  isValidCNPJ as validateCNPJ
+} from '@brazilian-utils/brazilian-utils'
+
 import CleaveInput from 'vue-cleave-component'
 
 const countryCode = $ecomConfig.get('country_code')
@@ -39,6 +45,20 @@ export default {
       return '[\\d]+{9,19}'
     },
 
+    isInvalid () {
+      if (countryCode === 'BR') {
+        const docNumber = this.localValue.toString().replace(/D/g, '')
+        if (this.isCompany) {
+          if (docNumber.length === 14) {
+            return !validateCNPJ(this.localValue)
+          }
+        } else if (docNumber.length === 11) {
+          return !validateCPF(this.localValue)
+        }
+      }
+      return false
+    },
+
     localValue: {
       get () {
         return this.value

package/src/js/ItemCustomizations.js

@@ -0,0 +1,10 @@
+export default {
+  name: 'ItemCustomizations',
+
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+}

package/src/js/KitProductVariations.js

@@ -0,0 +1,218 @@
+import {
+  i19addToCart,
+  i19close,
+  i19next,
+  i19previous,
+  i19quantity,
+  i19selectVariationMsg,
+  i19item,
+  i19minQuantity,
+  i19maxQuantity
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  name as getName,
+  img as getImg,
+  randomObjectId as genRandomObjectId
+} from '@ecomplus/utils'
+
+import ecomCart from '@ecomplus/shopping-cart'
+import Glide from '@glidejs/glide'
+import APicture from '../APicture.vue'
+import ProductVariations from '../ProductVariations.vue'
+import APrices from '../APrices.vue'
+import ALink from '../ALink.vue'
+import AAlert from '../AAlert.vue'
+
+export default {
+  name: 'KitProductVariations',
+
+  components: {
+    ALink,
+    AAlert,
+    APicture,
+    APrices,
+    ProductVariations
+  },
+
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: Number,
+    maxOptionsBtns: {
+      type: Number,
+      default: 10
+    },
+    slug: String,
+    buyText: String,
+    kitProductId: String,
+    kitName: String,
+    kitPrice: Number,
+    canAddToCart: {
+      type: Boolean,
+      default: true
+    },
+    glideOptions: {
+      type: Object,
+      default () {
+        return {
+          type: 'slider',
+          autoplay: false,
+          rewind: false
+        }
+      }
+    }
+  },
+
+  data () {
+    return {
+      glide: null,
+      activeIndex: 0,
+      selectedVariationId: null,
+      variationKit: [],
+      variationKitReady: [],
+      alertVariant: 'warning'
+    }
+  },
+
+  computed: {
+    i19addToCart: () => i18n(i19addToCart),
+    i19close: () => i18n(i19close),
+    i19next: () => i18n(i19next),
+    i19previous: () => i18n(i19previous),
+    i19selectVariationMsg: () => i18n(i19selectVariationMsg),
+    i19quantity: () => i18n(i19quantity),
+    i19item: () => i18n(i19item),
+    i19minQuantity: () => i18n(i19minQuantity),
+    i19maxQuantity: () => i18n(i19maxQuantity),
+
+    localItems () {
+      const products = []
+      for (let index = 0; index < this.items.length; index++) {
+        if (this.items && this.items.length === this.min) {
+          const itemObject = Object.assign({}, this.items[index])
+          itemObject.key = genRandomObjectId()
+          products.push(itemObject)
+        } else {
+          for (let i = 0; i < this.min; i++) {
+            const itemObject = Object.assign({}, this.items[index])
+            itemObject.key = genRandomObjectId()
+            products.push(itemObject)
+          }
+        }
+      }
+      return products
+    }
+
+  },
+
+  methods: {
+    getImg,
+    getName,
+
+    moveSlider (index) {
+      this.activeIndex = index
+      if (this.glide) {
+        this.glide.go('=' + index)
+      }
+    },
+
+    removeItemFromKit (index) {
+      this.variationKit.splice(index, 1)
+      this.localItems[index].key = genRandomObjectId()
+      this.selectedVariationId = null
+      this.variationKitReady = this.variationKit.filter(n => n)
+    },
+
+    buy () {
+      this.alertVariant = 'warning'
+      if (this.variationKitReady.length === this.min) {
+        if (this.max === undefined || this.variationKitReady.length <= this.max) {
+          const items = []
+          const composition = []
+          this.variationKitReady.forEach(variationId => {
+            const product = this.items.find(item => {
+              const variation = item.variations.find(variation => variation._id === variationId)
+              if (variation) {
+                items.push({
+                  ...item,
+                  ...variation,
+                  variation_id: variation._id
+                })
+                return item
+              }
+            })
+            if (product) {
+              composition.push({
+                _id: product.product_id,
+                variation_id: variationId,
+                quantity: 1
+              })
+            }
+          })
+
+          items.forEach(item => {
+            const newItem = { ...item, quantity: 1 }
+            delete newItem.customizations
+            if (this.kitProductId) {
+              newItem.kit_product = {
+                _id: this.kitProductId,
+                name: this.kitName,
+                pack_quantity: this.min,
+                price: this.kitPrice,
+                composition
+              }
+            }
+            if (this.slug) {
+              newItem.slug = this.slug
+            }
+            if (this.canAddToCart) {
+              ecomCart.addItem(newItem)
+            }
+          })
+          this.$emit('buy', { items })
+        }
+      }
+    }
+  },
+
+  watch: {
+    activeIndex (index, oldIndex) {
+      if (index < this.localItems.length && index > -1) {
+        this.moveSlider(index)
+      } else {
+        this.moveSlider(oldIndex)
+      }
+      this.selectedVariationId = null
+    },
+
+    selectedVariationId (current) {
+      if (current && this.activeIndex >= 0 && (this.variationKitReady.length < this.min || this.variationKit[this.activeIndex])) {
+        this.variationKit[this.activeIndex] = current
+        this.variationKitReady = this.variationKit.filter(n => n)
+      }
+    }
+  },
+
+  mounted () {
+    const glide = new Glide(this.$refs.glide, this.glideOptions)
+    glide.on('run', () => {
+      this.moveSlider(glide.index)
+    })
+    glide.mount()
+    this.glide = glide
+  },
+
+  beforeDestroy () {
+    if (this.glide) {
+      this.glide.destroy()
+    }
+  }
+}