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

package/src/js/BuyTogether.js

@@ -0,0 +1,246 @@
+// import { i19buyTogetherWith } from '@ecomplus/i18n'
+import { formatMoney, price as getPrice, recommendedIds } from '@ecomplus/utils'
+import { modules, graphs } from '@ecomplus/client'
+import ecomCart from '@ecomplus/shopping-cart'
+import EcomSearch from '@ecomplus/search-engine'
+import APrices from './../APrices.vue'
+import ProductCard from './../ProductCard.vue'
+
+const storefront = (typeof window === 'object' && window.storefront) || {}
+const getContextBody = () => (storefront.context && storefront.context.body) || {}
+const sanitizeProductBody = body => {
+  const product = Object.assign({}, body)
+  delete product.body_html
+  delete product.body_text
+  delete product.specifications
+  delete product.inventory_records
+  delete product.price_change_records
+  return product
+}
+
+export default {
+  name: 'BuyTogether',
+
+  components: {
+    APrices,
+    ProductCard
+  },
+
+  props: {
+    baseProduct: {
+      type: Object,
+      default () {
+        return getContextBody()
+      }
+    },
+    ecomCart: {
+      type: Object,
+      default () {
+        return ecomCart
+      }
+    },
+    productCardProps: {
+      type: Object,
+      default () {
+        return {
+          isSmall: true
+        }
+      }
+    },
+    fallbackMatchType: {
+      type: String,
+      default: (typeof window === 'object' && window.ecomRecommendationsType) || 'recommended'
+    }
+  },
+
+  data () {
+    return {
+      ecomSearch: new EcomSearch()
+        .mergeFilter({
+          range: {
+            quantity: {
+              gt: 0
+            }
+          }
+        })
+        .mergeFilter({
+          term: {
+            available: true
+          }
+        }),
+      hasLoadedIds: false,
+      hasLoadedItems: false,
+      productQnts: {},
+      recommendedItems: [],
+      discount: 0,
+      discountType: 'fixed',
+      discountValue: 0
+    }
+  },
+
+  computed: {
+    i19buyTogether: () => 'Compre junto',
+    i19buyTogetherWith: () => 'Compre junto com',
+
+    items () {
+      return [
+        this.baseProduct,
+        ...this.recommendedItems
+      ]
+    },
+
+    productIds () {
+      return Object.keys(this.productQnts)
+    },
+
+    relatedProducts () {
+      const relatedProducts = this.baseProduct.related_products && this.baseProduct.related_products[0]
+      return relatedProducts && relatedProducts.product_ids.length
+        ? relatedProducts.product_ids
+        : []
+    },
+
+    subtotal () {
+      return this.items.reduce((acc, item) => {
+        return acc + (this.productQnts[item._id] || 1) * getPrice(item)
+      }, 0)
+    },
+
+    canAddToCart () {
+      return !this.items.find((item) => {
+        return item.variations || item.customizations || item.kit_composition
+      })
+    }
+  },
+
+  methods: {
+    formatMoney,
+
+    buy () {
+      const discountFactor = (this.subtotal - this.discount) / this.subtotal
+      this.items.forEach((item) => {
+        const cartItem = this.ecomCart.parseProduct({
+          ...item,
+          base_price: getPrice(item),
+          price: getPrice(item) * discountFactor,
+          price_effective_date: {}
+        })
+        cartItem.quantity = (this.productQnts[item._id] || 1)
+        cartItem.keep_item_quantity = true
+        this.ecomCart.addItem(cartItem)
+      })
+    },
+
+    calcDiscount () {
+      if (this.discountType === 'fixed') {
+        this.discount = this.discountValue
+      } else {
+        this.discount = this.subtotal * this.discountValue / 100
+      }
+    },
+
+    setProductQnts (productsIds) {
+      if (productsIds.length) {
+        const productQnts = {}
+        productsIds.slice(0, 3).forEach(id => {
+          productQnts[id] = 1
+        })
+        this.productQnts = productQnts
+      }
+    },
+
+    fetchItems () {
+      if (!this.productIds.length) {
+        this.hasLoadedItems = true
+        return
+      }
+      this.ecomSearch.setProductIds(this.productIds)
+      delete this.ecomSearch.dsl.aggs
+      this.ecomSearch.fetch().then(() => {
+        this.recommendedItems = this.recommendedItems.concat(this.ecomSearch.getItems())
+      }).finally(() => {
+        this.hasLoadedItems = true
+      })
+    }
+  },
+
+  watch: {
+    subtotal: {
+      handler (subtotal, oldSubtotal) {
+        if (subtotal !== oldSubtotal) {
+          this.calcDiscount()
+        }
+      },
+      immediate: true
+    }
+  },
+
+  created () {
+    if (this.baseProduct && this.baseProduct._id) {
+      const cartItem = ecomCart.parseProduct(sanitizeProductBody(this.baseProduct))
+      const subtotal = getPrice(cartItem) * cartItem.quantity
+      modules({
+        url: '/apply_discount.json',
+        method: 'POST',
+        data: {
+          amount: {
+            subtotal,
+            total: subtotal,
+            discount: 0
+          },
+          items: [cartItem]
+        }
+      }).then(({ data }) => {
+        for (let i = 0; i < data.result.length; i++) {
+          const { validated, error, response } = data.result[i]
+          if (validated && !error && response.buy_together) {
+            const buyTogether = response.buy_together.sort((a, b) => {
+              if (a.products && a.products.length) {
+                if (!b.products || !b.products.length) {
+                  return -1
+                }
+                if (
+                  a.products.length <= b.products.length &&
+                  a.discount.value >= b.discount.value
+                ) {
+                  return -1
+                }
+                return 0
+              }
+              return 1
+            })
+            if (buyTogether[0]) {
+              const { products, discount } = buyTogether[0]
+              this.productQnts = products || []
+              this.discountType = discount.type
+              this.discountValue = discount.value
+              this.$nextTick(() => {
+                this.calcDiscount()
+              })
+            }
+          }
+        }
+      }).finally(() => {
+        this.hasLoadedIds = true
+        this.$nextTick(() => {
+          if (!this.productIds.length) {
+            if (this.relatedProducts.length) {
+              this.setProductQnts(this.relatedProducts)
+              this.fetchItems()
+            } else if (this.fallbackMatchType) {
+              graphs({ url: `/products/${this.baseProduct._id}/${this.fallbackMatchType}.json` })
+                .then(({ data }) => {
+                  this.setProductQnts(recommendedIds(data))
+                  this.$nextTick(() => {
+                    this.fetchItems()
+                  })
+                })
+            }
+          } else {
+            this.fetchItems()
+          }
+        })
+      })
+    }
+  }
+}

package/src/js/CartItem.js

@@ -1,4 +1,6 @@
 import {
+  i19freebie,
+  i19outOfStock,
   i19quantity,
   i19remove
 } from '@ecomplus/i18n'
@@ -13,13 +15,15 @@ import {
 import ecomCart from '@ecomplus/shopping-cart'
 import ALink from '../ALink.vue'
 import APicture from '../APicture.vue'
+import ItemCustomizations from '../ItemCustomizations.vue'
 
 export default {
   name: 'CartItem',
 
   components: {
     ALink,
-    APicture
+    APicture,
+    ItemCustomizations
   },
 
   props: {
@@ -49,6 +53,8 @@ export default {
   },
 
   computed: {
+    i19freebie: () => i18n(i19freebie),
+    i19outOfStock: () => i18n(i19outOfStock),
     i19quantity: () => i18n(i19quantity),
     i19remove: () => i18n(i19remove),
 
@@ -57,15 +63,49 @@ export default {
     },
 
     price () {
-      return getPrice(this.item)
+      return this.item.final_price || getPrice(this.item)
     },
 
     img () {
-      return getImg(this.item, null, 'small')
+      return getImg(this.item.picture || this.item, null, 'small')
     },
 
     name () {
-      const { name } = this.item
+      return this.formatName(this.item.name)
+    },
+
+    isFreebie () {
+      return Array.isArray(this.item.flags)
+        ? this.item.flags.includes('freebie')
+        : false
+    },
+
+    isIntegerQnt () {
+      return Number.isInteger(this.maxQuantity) && Number.isInteger(this.quantity)
+    },
+
+    minQuantity () {
+      const minQuantity = this.item.min_quantity
+      return typeof minQuantity === 'number' && minQuantity >= 0
+        ? minQuantity
+        : 1
+    },
+
+    maxQuantity () {
+      if (this.item.available === false) {
+        return 0
+      }
+      const maxQuantity = this.item.max_quantity
+      return typeof maxQuantity === 'number' && maxQuantity >= 0
+        ? maxQuantity
+        : 9999999
+    }
+  },
+
+  methods: {
+    formatMoney,
+
+    formatName (name) {
       if (name) {
         if (name.length <= this.nameMaxLength) {
           return name
@@ -73,15 +113,21 @@ export default {
           return `${name.substr(0, this.nameMaxLength)}...`
         }
       }
-    }
-  },
+    },
 
-  methods: {
-    formatMoney,
+    validateQuantity () {
+      if (this.minQuantity <= this.maxQuantity) {
+        if (this.quantity < this.minQuantity) {
+          this.quantity = this.minQuantity
+        } else if (this.quantity > this.maxQuantity) {
+          this.quantity = this.maxQuantity
+        }
+      }
+    },
 
     updateInputType () {
-      this.canInputSelect = Number.isInteger(this.quantity) &&
-        this.quantity > 0 && this.quantity <= 10
+      this.validateQuantity()
+      this.canInputSelect = this.isIntegerQnt && this.quantity > 0 && this.quantity <= 10
     },
 
     remove () {
@@ -100,7 +146,9 @@ export default {
   watch: {
     'item.quantity': {
       handler (qnt) {
-        this.quantity = qnt || 0
+        if (this.quantity || qnt > 1) {
+          this.quantity = qnt || 0
+        }
       },
       immediate: true
     },
@@ -110,18 +158,23 @@ export default {
         qnt = 0
       }
       if (qnt !== this.item.quantity) {
-        const quantityToAdd = qnt - oldQnt
+        const quantityToAdd = qnt - this.item.quantity
         this.$emit('increase', {
           quantityToAdd,
           newQuantity: qnt
         })
         if (this.itemId && this.canUpdateCart) {
-          ecomCart.increaseItemQnt(this.itemId, quantityToAdd)
+          const item = ecomCart.increaseItemQnt(this.itemId, quantityToAdd)
+          if (this.isFreebie) {
+            item.flags = item.flags.filter(flag => !flag.startsWith('freebie'))
+          }
         }
       }
       if (qnt > 10 && oldQnt <= 10) {
         this.$nextTick(() => {
-          this.$refs.input.focus()
+          if (this.$refs.input) {
+            this.$refs.input.focus()
+          }
         })
       }
     }

package/src/js/CartQuickview.js

@@ -18,6 +18,7 @@ import ALink from '../ALink.vue'
 import ABackdrop from '../ABackdrop.vue'
 import APrices from '../APrices.vue'
 import CartItem from '../CartItem.vue'
+import ShippingCalculator from '../ShippingCalculator.vue'
 
 export default {
   name: 'CartQuickview',
@@ -26,7 +27,8 @@ export default {
     ALink,
     ABackdrop,
     APrices,
-    CartItem
+    CartItem,
+    ShippingCalculator
   },
 
   props: {
@@ -34,6 +36,7 @@ export default {
       type: Boolean,
       default: true
     },
+    hasShippingCalculator: Boolean,
     checkoutUrl: {
       type: String,
       default: '/app/#/checkout'
@@ -54,6 +57,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      selectedShippingPrice: 0
+    }
+  },
+
   computed: {
     i19checkout: () => i18n(i19checkout),
     i19close: () => i18n(i19close),
@@ -65,6 +74,10 @@ export default {
 
     cart () {
       return this.ecomCart.data
+    },
+
+    total () {
+      return this.cart.subtotal + this.selectedShippingPrice
     }
   },
 
@@ -76,6 +89,12 @@ export default {
         'update:is-visible',
         typeof isVisible === 'boolean' ? isVisible : !this.isVisible
       )
+    },
+
+    selectShippingService (service) {
+      this.selectedShippingPrice = service.shipping_line
+        ? service.shipping_line.total_price
+        : 0
     }
   },