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

package/src/js/ShippingCalculator.js

@@ -1,5 +1,7 @@
 import {
+  i19add$1ToEarn,
   i19calculateShipping,
+  i19freeShipping,
   i19zipCode
 } from '@ecomplus/i18n'
 
@@ -11,11 +13,13 @@ import {
 } from '@ecomplus/utils'
 
 import { modules } from '@ecomplus/client'
+import sortApps from './helpers/sort-apps'
 import CleaveInput from 'vue-cleave-component'
 import ShippingLine from '../ShippingLine.vue'
 
 const localStorage = typeof window === 'object' && window.localStorage
 const zipStorageKey = 'shipping-to-zip'
+const globalOpts = (typeof window === 'object' && window.propsShippingCalculator) || {}
 
 const reduceItemBody = itemOrProduct => {
   const shippedItem = {}
@@ -25,6 +29,7 @@ const reduceItemBody = itemOrProduct => {
     'sku',
     'name',
     'quantity',
+    'inventory',
     'currency_id',
     'currency_symbol',
     'price',
@@ -50,9 +55,17 @@ export default {
   props: {
     zipCode: String,
     canSelectServices: Boolean,
+    canAutoSelectService: {
+      type: Boolean,
+      default: typeof globalOpts.canAutoSelectService === 'boolean'
+        ? globalOpts.canAutoSelectService
+        : true
+    },
     canInputZip: {
       type: Boolean,
-      default: true
+      default: typeof globalOpts.canInputZip === 'boolean'
+        ? globalOpts.canInputZip
+        : true
     },
     countryCode: {
       type: String,
@@ -75,26 +88,66 @@ export default {
       default () {
         return {}
       }
+    },
+    skipAppIds: Array,
+    shippingAppsSort: {
+      type: Array,
+      default () {
+        return window.ecomShippingApps || []
+      }
     }
   },
 
   data () {
     return {
       localZipCode: null,
+      localShippedItems: [],
+      amountSubtotal: null,
       shippingServices: [],
       selectedService: null,
-      isWaiting: false
+      hasPaidOption: false,
+      freeFromValue: null,
+      isScheduled: false,
+      retryTimer: null,
+      isWaiting: false,
+      hasCalculated: false
     }
   },
 
   computed: {
+    i19add$1ToEarn: () => i18n(i19add$1ToEarn),
     i19calculateShipping: () => i18n(i19calculateShipping),
     i19zipCode: () => i18n(i19zipCode),
+    i19freeShipping: () => i18n(i19freeShipping).toLowerCase(),
+    i19selectShippingMsg: () => i18n({
+      pt_br: 'Selecione uma forma de envio abaixo',
+      en_us: 'Select a shipping method below'
+    }),
 
     cleaveOptions () {
       return this.countryCode === 'BR'
         ? { blocks: [5, 3], delimiter: '-' }
         : { blocks: [30] }
+    },
+
+    freeFromPercentage () {
+      return this.hasPaidOption && this.amountSubtotal < this.freeFromValue
+        ? Math.round(this.amountSubtotal * 100 / this.freeFromValue)
+        : null
+    },
+
+    productionDeadline () {
+      let maxDeadline = 0
+      this.shippedItems.forEach(item => {
+        if (item.quantity && item.production_time) {
+          const { days, cumulative } = item.production_time
+          const itemDeadline = cumulative ? days * item.quantity : days
+          if (itemDeadline > maxDeadline) {
+            maxDeadline = itemDeadline
+          }
+        }
+      })
+      return maxDeadline
     }
   },
 
@@ -105,56 +158,119 @@ export default {
       this.$emit('update:zip-code', this.localZipCode)
     },
 
-    parseShippingOptions (shippingResult = [], isRetry) {
+    parseShippingOptions (shippingResult = [], isRetry = false) {
+      this.freeFromValue = null
       this.shippingServices = []
-      let canRetry
       if (shippingResult.length) {
         shippingResult.forEach(appResult => {
           const { validated, error, response } = appResult
-          if (validated && !error) {
-            response.shipping_services.forEach(service => {
-              this.shippingServices.push({
-                app_id: appResult.app_id,
-                ...service
-              })
+          if (!validated || error) {
+            return
+          }
+          if (
+            this.skipAppIds &&
+            this.skipAppIds.includes(appResult.app_id) &&
+            shippingResult.filter(({ app_id: appId }) => !this.skipAppIds.includes(appId)).length
+          ) {
+            return
+          }
+          response.shipping_services.forEach(service => {
+            this.shippingServices.push({
+              app_id: appResult.app_id,
+              ...service
             })
-          } else if (isRetry !== true && (!response || !response.error)) {
-            canRetry = true
+          })
+          const freeShippingFromValue = response.free_shipping_from_value
+          if (
+            freeShippingFromValue &&
+            (!this.freeFromValue || this.freeFromValue > freeShippingFromValue)
+          ) {
+            this.freeFromValue = freeShippingFromValue
           }
         })
         if (!this.shippingServices.length) {
-          if (canRetry) {
+          if (!isRetry) {
             this.fetchShippingServices(true)
+          } else {
+            this.scheduleRetry()
           }
         } else {
-          this.setSelectedService(0)
+          this.shippingServices = this.shippingServices.sort((a, b) => {
+            const priceDiff = a.shipping_line.total_price - b.shipping_line.total_price
+            return priceDiff < 0
+              ? -1
+              : priceDiff > 0
+                ? 1
+                : a.shipping_line.delivery_time && b.shipping_line.delivery_time &&
+                  a.shipping_line.delivery_time.days < b.shipping_line.delivery_time.days
+                  ? -1
+                  : 1
+          })
+          if (this.canAutoSelectService) {
+            this.setSelectedService(0)
+          } else {
+            this.selectedService = null
+          }
+          this.hasPaidOption = Boolean(this.shippingServices.find(service => {
+            return service.shipping_line.total_price || service.shipping_line.price
+          }))
+          if (Array.isArray(this.shippingAppsSort) && this.shippingAppsSort.length) {
+            this.shippingServices = sortApps(this.shippingServices, this.shippingAppsSort)
+          }
         }
       }
     },
 
-    fetchShippingServices (isRetry) {
-      const { storeId } = this
-      const url = '/calculate_shipping.json'
-      const method = 'POST'
-      const data = {
-        ...this.shippingData,
-        to: {
-          zip: this.localZipCode,
-          ...this.shippingData.to
+    scheduleRetry (timeout = 10000) {
+      clearTimeout(this.retryTimer)
+      this.retryTimer = setTimeout(() => {
+        if (this.localZipCode && !this.shippingServices.length && this.shippedItems.length) {
+          this.fetchShippingServices(true)
         }
+      }, timeout)
+    },
+
+    fetchShippingServices (isRetry) {
+      if (!this.isScheduled) {
+        this.isScheduled = true
+        setTimeout(() => {
+          this.isScheduled = false
+          const { storeId } = this
+          let url = '/calculate_shipping.json'
+          if (this.skipAppIds && this.skipAppIds.length) {
+            url += '?skip_ids='
+            this.skipAppIds.forEach((appId, i) => {
+              if (i > 0) url += ','
+              url += `${appId}`
+            })
+          }
+          const method = 'POST'
+          const data = {
+            ...this.shippingData,
+            to: {
+              zip: this.localZipCode,
+              ...this.shippingData.to
+            }
+          }
+          if (this.localShippedItems.length) {
+            data.items = this.localShippedItems
+            data.subtotal = this.amountSubtotal
+          }
+          this.isWaiting = true
+          modules({ url, method, storeId, data })
+            .then(({ data }) => this.parseShippingOptions(data.result, isRetry))
+            .catch(err => {
+              if (!isRetry) {
+                this.scheduleRetry(4000)
+              }
+              console.error(err)
+            })
+            .finally(() => {
+              this.hasCalculated = true
+              this.isWaiting = false
+            })
+        }, this.hasCalculated ? 150 : 50)
       }
-      if (this.shippedItems.length) {
-        data.items = this.shippedItems.map(reduceItemBody)
-        const itemsToSubtotal = (subtotal, item) => subtotal + getPrice(item) * item.quantity
-        data.subtotal = data.items.reduce(itemsToSubtotal, 0)
-      }
-      this.isWaiting = true
-      modules({ url, method, storeId, data })
-        .then(({ data }) => this.parseShippingOptions(data.result, isRetry))
-        .catch(console.error)
-        .finally(() => {
-          this.isWaiting = false
-        })
     },
 
     submitZipCode () {
@@ -174,6 +290,27 @@ export default {
   },
 
   watch: {
+    shippedItems: {
+      handler () {
+        setTimeout(() => {
+          this.localShippedItems = this.shippedItems.map(reduceItemBody)
+          const { amountSubtotal } = this
+          this.amountSubtotal = this.shippedItems.reduce((subtotal, item) => {
+            return subtotal + getPrice(item) * item.quantity
+          }, 0)
+          if (
+            this.hasCalculated &&
+            (this.canSelectServices || amountSubtotal !== this.amountSubtotal ||
+              (!this.shippingServices.length && !this.isWaiting))
+          ) {
+            this.fetchShippingServices()
+          }
+        }, 50)
+      },
+      deep: true,
+      immediate: true
+    },
+
     localZipCode (zipCode) {
       if (this.countryCode === 'BR' && zipCode.replace(/\D/g, '').length === 8) {
         this.submitZipCode()
@@ -189,6 +326,10 @@ export default {
       immediate: true
     },
 
+    skipAppIds () {
+      this.fetchShippingServices()
+    },
+
     shippingResult: {
       handler (result) {
         if (result.length) {

package/src/js/ShippingLine.js

@@ -1,6 +1,10 @@
 import {
   i19days,
+  i19free,
   i19freeShipping,
+  i19pickUpToday,
+  i19receiveToday,
+  i19untilTomorrow,
   i19upTo,
   i19workingDays
 } from '@ecomplus/i18n'
@@ -10,6 +14,8 @@ import {
   formatMoney
 } from '@ecomplus/utils'
 
+const globalOpts = (typeof window === 'object' && window.propsShippingLine) || {}
+
 export default {
   name: 'ShippingLine',
 
@@ -17,6 +23,14 @@ export default {
     shippingLine: {
       type: Object,
       required: true
+    },
+    productionDeadline: {
+      type: Number,
+      default: 0
+    },
+    getDeadlineStr: {
+      type: Function,
+      default: globalOpts.getDeadlineStr
     }
   },
 
@@ -29,17 +43,33 @@ export default {
       if (shipping.delivery_time) {
         days += shipping.delivery_time.days
       }
-      return `${i18n(i19upTo)} ${days} ${i18n(isWorkingDays ? i19workingDays : i19days)}`
+      days += this.productionDeadline
+      if (this.getDeadlineStr) {
+        const str = this.getDeadlineStr({
+          days,
+          isWorkingDays,
+          shippingLine: this.shippingLine
+        })
+        if (str) return str
+      }
+      if (days > 1) {
+        return `${i18n(i19upTo)} ${days} ` +
+          i18n(isWorkingDays ? i19workingDays : i19days).toLowerCase()
+      }
+      return i18n(days === 1
+        ? i19untilTomorrow
+        : shipping.pick_up ? i19pickUpToday : i19receiveToday)
     },
 
     freightValueStr () {
-      const freight = typeof this.shippingLine.total_price === 'number'
-        ? this.shippingLine.total_price
-        : this.shippingLine.price
+      const { shippingLine } = this
+      const freight = typeof shippingLine.total_price === 'number'
+        ? shippingLine.total_price
+        : shippingLine.price
       if (freight) {
         return formatMoney(freight)
       } else {
-        return i18n(i19freeShipping)
+        return i18n(shippingLine.pick_up ? i19free : i19freeShipping)
       }
     }
   }

package/src/js/TheAccount.js

@@ -1,10 +1,13 @@
 import {
   i19addresses,
+  i19favorites,
   i19hello,
   i19isNotYou,
   i19logout,
+  i19noSavedFavoritesMsg,
   i19orders,
-  i19registration
+  i19registration,
+  i19subscriptions
 } from '@ecomplus/i18n'
 
 import {
@@ -14,12 +17,14 @@ import {
 
 import ecomPassport from '@ecomplus/passport-client'
 import LoginBlock from '../LoginBlock.vue'
+import RecommendedItems from '../RecommendedItems.vue'
 
 export default {
   name: 'TheAccount',
 
   components: {
-    LoginBlock
+    LoginBlock,
+    RecommendedItems
   },
 
   props: {
@@ -29,7 +34,18 @@ export default {
         return {}
       }
     },
-    isOrdersList: Boolean,
+    currentTab: {
+      type: String,
+      validator: function (value) {
+        return ['orders', 'favorites', 'subscriptions', 'points', 'account'].includes(value)
+      }
+    },
+    isExternalAuth: {
+      type: Boolean,
+      default () {
+        return Boolean(window.$firebaseConfig && window.$firebaseConfig.authDomain)
+      }
+    },
     ecomPassport: {
       type: Object,
       default () {
@@ -38,20 +54,30 @@ export default {
     }
   },
 
+  data () {
+    return {
+      favoriteIds: [],
+      navTabs: []
+    }
+  },
+
   computed: {
     i19addresses: () => i18n(i19addresses),
+    i19favorites: () => i18n(i19favorites),
     i19hello: () => i18n(i19hello),
     i19isNotYou: () => i18n(i19isNotYou),
     i19logout: () => i18n(i19logout),
+    i19noSavedFavoritesMsg: () => i18n(i19noSavedFavoritesMsg),
     i19orders: () => i18n(i19orders),
+    i19subscriptions: () => i18n(i19subscriptions),
     i19registration: () => i18n(i19registration),
 
     activeTab: {
       get () {
-        return this.isOrdersList ? 1 : 0
+        return this.currentTab || 'account'
       },
-      set (tabIndex) {
-        this.$emit('update:is-orders-list', tabIndex === 1)
+      set (tab) {
+        this.$emit('update:current-tab', tab)
       }
     },
 
@@ -70,6 +96,27 @@ export default {
   },
 
   methods: {
+    hasTab (tabValue) {
+      return this.navTabs.some(tab => tab.value === tabValue)
+    },
+
+    insertSubscriptionTab () {
+      const hasSubscriptions = this.hasTab('subscriptions')
+      if (this.ecomPassport.checkAuthorization() && !hasSubscriptions) {
+        this.ecomPassport.requestApi('/orders.json?transactions.type=recurrence&limit=1&fields=_id')
+          .then(({ data }) => {
+            const { result } = data
+            if (result.length) {
+              this.navTabs.push({
+                label: this.i19subscriptions,
+                value: 'subscriptions'
+              })
+            }
+          })
+          .catch(console.error)
+      }
+    },
+
     login (ecomPassport) {
       if (ecomPassport.checkAuthorization()) {
         this.localCustomer = ecomPassport.getCustomer()
@@ -83,5 +130,49 @@ export default {
         this.$emit('logout')
       }
     }
+  },
+
+  watch: {
+    customer: {
+      handler (customer) {
+        const hasPoints = this.hasTab('points')
+        if (Array.isArray(customer.loyalty_points_entries) && customer.loyalty_points_entries.length && !hasPoints) {
+          this.navTabs.push({
+            label: 'Cashback',
+            value: 'points'
+          })
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  created () {
+    if (this.isExternalAuth && !this.ecomPassport.checkAuthorization()) {
+      window.location.href = '/app/account'
+      return
+    }
+    this.navTabs = [
+      {
+        label: this.i19registration,
+        value: 'account'
+      },
+      {
+        label: this.i19orders,
+        value: 'orders'
+      },
+      {
+        label: this.i19favorites,
+        value: 'favorites'
+      }
+    ]
+    const { favorites } = this.ecomPassport.getCustomer()
+    this.favoriteIds = favorites || []
+    this.insertSubscriptionTab()
+    this.ecomPassport.on('login', this.insertSubscriptionTab)
+    this.$once('hook:beforeDestroy', () => {
+      this.ecomPassport.off('login', this.insertSubscriptionTab)
+    })
   }
 }

package/src/js/TheCart.js

@@ -0,0 +1,146 @@
+import {
+  i19checkout,
+  i19continueShopping,
+  i19discount,
+  i19emptyCart
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  formatMoney
+} from '@ecomplus/utils'
+
+import ecomCart from '@ecomplus/shopping-cart'
+import APrices from './../APrices.vue'
+import CartItem from './../CartItem.vue'
+import DiscountApplier from './../DiscountApplier.vue'
+import ShippingCalculator from './../ShippingCalculator.vue'
+import EarnPointsProgress from './../EarnPointsProgress.vue'
+import RecommendedItems from './../RecommendedItems.vue'
+
+export default {
+  name: 'TheCart',
+
+  components: {
+    APrices,
+    CartItem,
+    DiscountApplier,
+    ShippingCalculator,
+    EarnPointsProgress,
+    RecommendedItems
+  },
+
+  props: {
+    amount: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    checkoutUrl: {
+      type: String,
+      default: '/app/#/checkout'
+    },
+    zipCode: String,
+    discountCoupon: String,
+    modulesPayload: Object,
+    ecomCart: {
+      type: Object,
+      default () {
+        return ecomCart
+      }
+    }
+  },
+
+  data () {
+    return {
+      localZipCode: this.zipCode,
+      canApplyDiscount: false,
+      isCouponApplied: false
+    }
+  },
+
+  computed: {
+    i19checkout: () => i18n(i19checkout),
+    i19continueShopping: () => i18n(i19continueShopping),
+    i19discount: () => i18n(i19discount),
+    i19emptyCart: () => i18n(i19emptyCart),
+
+    cart () {
+      return this.ecomCart.data
+    },
+
+    isValidCart () {
+      return this.ecomCart.data.items.find(({ quantity }) => quantity)
+    },
+
+    localDiscountCoupon: {
+      get () {
+        return this.discountCoupon
+      },
+      set (couponCode) {
+        this.$emit('update:discount-coupon', couponCode)
+      }
+    }
+  },
+
+  methods: {
+    formatMoney,
+
+    selectShippingService (service) {
+      this.$emit('select-shipping', service)
+      this.$nextTick(() => {
+        this.canApplyDiscount = true
+      })
+    },
+
+    setDiscountRule (discountRule) {
+      this.$emit('set-discount-rule', discountRule)
+      this.$nextTick(() => {
+        this.isCouponApplied = Boolean(this.discountCoupon && this.amount.discount)
+      })
+    }
+  },
+
+  watch: {
+    localZipCode (zipCode) {
+      this.$emit('update:zip-code', zipCode)
+    },
+
+    canApplyDiscount (canApplyDiscount) {
+      if (!canApplyDiscount) {
+        this.isCouponApplied = false
+      }
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      this.canApplyDiscount = !this.localZipCode
+    })
+    const { ecomCart } = this
+    const getNumItems = () => ecomCart.data.items.reduce((numItems, { flags, quantity }) => {
+      if (!flags || !flags.includes('freebie')) {
+        numItems += quantity
+      }
+      return numItems
+    }, 0)
+    let oldNumItems = getNumItems()
+    const cartWatcher = () => {
+      this.canApplyDiscount = !this.localZipCode
+      const numItems = getNumItems()
+      if (oldNumItems !== numItems) {
+        ecomCart.data.items.forEach(({ _id, quantity, flags }) => {
+          if (Array.isArray(flags) && flags.includes('freebie') && quantity === 1) {
+            ecomCart.removeItem(_id)
+          }
+        })
+        oldNumItems = numItems
+      }
+    }
+    ecomCart.on('change', cartWatcher)
+    this.$once('hook:beforeDestroy', () => {
+      ecomCart.off('change', cartWatcher)
+    })
+  }
+}