@ecomplus/widget-product 0.5.1 → 1.0.0-beta.100

package/src/components/js/EcPrices.js

@@ -1,145 +0,0 @@
-import {
-  $ecomConfig,
-  price as getPrice,
-  onPromotion as checkOnPromotion,
-  formatMoney
-} from '@ecomplus/utils'
-import dictionary from './../../lib/dictionary'
-
-const getPriceWithDiscount = (price, discount) => {
-  const { type, value } = discount
-  if (value) {
-    if (type === 'percentage') {
-      return price * (100 - value) / 100
-    } else {
-      return price - value
-    }
-  }
-}
-
-export default {
-  name: 'EcPrices',
-
-  props: {
-    lang: {
-      type: String,
-      default: $ecomConfig.get('lang')
-    },
-    product: {
-      type: Object,
-      required: true
-    },
-    literal: {
-      type: Boolean
-    },
-    big: {
-      type: Boolean
-    },
-    installmentsOption: {
-      type: Object
-    },
-    discountOption: {
-      type: Object
-    },
-    discountText: {
-      type: [String, Boolean],
-      default: ''
-    }
-  },
-
-  data () {
-    return {
-      interestFreeInstallments: 0,
-      discount: {
-        type: null,
-        value: 0
-      },
-      extraDiscount: {
-        type: null,
-        value: 0
-      },
-      discountLabel: this.discountText
-    }
-  },
-
-  methods: {
-    dictionary,
-    formatMoney,
-
-    updateInstallments (installments) {
-      if (installments && !installments.monthly_interest) {
-        const minInstallment = installments.min_installment || 5
-        const installmentsNumber = parseInt(this.price / minInstallment, 10)
-        this.interestFreeInstallments = Math.min(installmentsNumber, installments.max_number)
-      }
-    },
-
-    updateDiscount (discount) {
-      if (discount && (!discount.min_amount || discount.min_amount <= this.price)) {
-        this.discount = discount
-        if (!this.discountText && this.discountText !== false && discount.label) {
-          this.discountLabel = `via ${discount.label}`
-        }
-      }
-    }
-  },
-
-  computed: {
-    price () {
-      const price = getPrice(this.product)
-      if (this.extraDiscount.value) {
-        return getPriceWithDiscount(price, this.extraDiscount)
-      }
-      return price
-    },
-
-    comparePrice () {
-      if (checkOnPromotion(this.product)) {
-        return this.product.base_price
-      } else if (this.extraDiscount.value) {
-        return getPrice(this.product)
-      }
-    },
-
-    priceWithDiscount () {
-      return getPriceWithDiscount(this.price, this.discount)
-    }
-  },
-
-  created () {
-    if (!this.installmentsOption && !this.discountOption) {
-      const { storefront } = window
-      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 (!getPaymentInfo()) {
-          storefront.on('info:list_payments', getPaymentInfo)
-        }
-        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)
-        }
-      }
-    } else {
-      this.updateInstallments(this.installmentsOption)
-      this.updateDiscount(this.discountOption)
-    }
-  }
-}

package/src/components/js/EcProduct.js

@@ -1,230 +0,0 @@
-import {
-  $ecomConfig,
-  name,
-  inStock,
-  onPromotion,
-  price,
-  variationsGrids,
-  specValueByText
-} from '@ecomplus/utils'
-
-import { store } from '@ecomplus/client'
-import ecomCart from '@ecomplus/shopping-cart'
-import EcPrices from './../EcPrices.vue'
-import EcVariations from './../EcVariations.vue'
-import EcGallery from './../EcGallery.vue'
-import EcShipping from './../EcShipping.vue'
-import dictionary from './../../lib/dictionary'
-
-const { storefront } = window
-const getContextBody = () => storefront
-  ? storefront.context && storefront.context.body
-  : {}
-const getContextId = () => getContextBody()._id
-
-export default {
-  name: 'EcProduct',
-
-  components: {
-    EcPrices,
-    EcGallery,
-    EcVariations,
-    EcShipping
-  },
-
-  props: {
-    lang: {
-      type: String,
-      default: $ecomConfig.get('lang')
-    },
-    storeId: {
-      type: Number,
-      default: $ecomConfig.get('store_id')
-    },
-    productId: {
-      type: String,
-      default: getContextId()
-    },
-    product: Object,
-    buyText: String,
-    canAddToCart: {
-      type: Boolean,
-      default: true
-    },
-    maxQuantityWarn: {
-      type: Number,
-      default: 13
-    }
-  },
-
-  data () {
-    return {
-      body: {},
-      selectedVariationId: null,
-      currentGalleyImg: 1,
-      hasClickedBuy: false
-    }
-  },
-
-  computed: {
-    selectedVariation () {
-      return this.selectedVariationId
-        ? this.body.variations.find(({ _id }) => _id === this.selectedVariationId)
-        : {}
-    },
-
-    name () {
-      return this.selectedVariation.name || name(this.body)
-    },
-
-    productQuantity () {
-      if (this.selectedVariation.quantity) {
-        return this.selectedVariation.quantity
-      } else if (this.body.quantity) {
-        return this.body.quantity
-      }
-    },
-
-    almostDoneQuantity () {
-      return (this.productQuantity > 0 && this.productQuantity < this.maxQuantityWarn) ? this.productQuantity : false
-    },
-
-    strBuy () {
-      return this.buyText || this.dictionary('buy')
-    },
-
-    discount () {
-      const { body } = this
-      return onPromotion(body)
-        ? Math.round(((body.base_price - price(body)) * 100) / body.base_price)
-        : 0
-    },
-
-    hasVariations () {
-      return this.body.variations && this.body.variations.length
-    },
-
-    photoswipeImages () {
-      const { name, pictures } = this.body
-      const psImages = []
-      if (pictures) {
-        pictures.forEach(({ zoom }) => {
-          if (zoom && zoom.size) {
-            const sizes = zoom.size.split('x')
-            if (sizes.length === 2) {
-              psImages.push({
-                src: zoom.url,
-                title: name,
-                w: parseInt(sizes[0], 10),
-                h: parseInt(sizes[1], 10)
-              })
-            }
-          }
-        })
-      }
-      return psImages
-    }
-  },
-
-  methods: {
-    dictionary,
-    inStock,
-    variationsGrids,
-    specValueByText,
-
-    setBody (data) {
-      this.body = data
-      this.$emit('update:product', data)
-    },
-
-    fetchProduct (isRetry = false) {
-      const vm = this
-      const { storeId } = vm
-      store({
-        url: `/products/${vm.productId}.json`,
-        storeId,
-        axiosConfig: {
-          timeout: isRetry ? 2500 : 6000
-        }
-      })
-        .then(({ data }) => {
-          this.setBody(data)
-          if (getContextId() === vm.productId) {
-            storefront.context.body = data
-          }
-        })
-        .catch(err => {
-          console.error(err)
-          const { response } = err
-          if (!response || !(response.status >= 400 && response.status < 500)) {
-            if (!isRetry) {
-              this.fetchProduct(true)
-            } else {
-              this.setBody(getContextBody())
-              if (!this.body.name || !this.body.price || !this.body.pictures) {
-                const errorMsg = vm.lang === 'pt_br'
-                  ? 'Não foi possível carregar informações do produto, por favor verifique sua conexão'
-                  : 'Unable to load product information, please check your internet connection'
-                vm.$bvToast.toast(errorMsg, {
-                  title: 'Offline',
-                  variant: 'danger',
-                  noAutoHide: true,
-                  solid: true
-                })
-              }
-            }
-          }
-        })
-    },
-
-    openPhotoswipe ({ index }) {
-      if (storefront && typeof storefront.photoswipe === 'function') {
-        storefront.photoswipe(this.photoswipeImages, index)
-      }
-    },
-
-    buy () {
-      this.hasClickedBuy = true
-      const product = Object.assign({}, this.body)
-      delete product.body_html
-      delete product.body_text
-      delete product.specifications
-      let variationId
-      if (this.hasVariations) {
-        if (this.selectedVariationId) {
-          variationId = this.selectedVariationId
-        } else {
-          return
-        }
-      }
-      this.$emit('buy', { product, variationId })
-      if (this.canAddToCart) {
-        ecomCart.addProduct(product, variationId)
-      }
-    }
-  },
-
-  created () {
-    if (this.product) {
-      this.body = this.product
-    } else {
-      this.fetchProduct()
-    }
-  },
-
-  watch: {
-    selectedVariationId (id) {
-      if (id) {
-        if (this.hasClickedBuy) {
-          this.hasClickedBuy = false
-        }
-        if (this.selectedVariation.picture_id) {
-          const pictureIndex = this.body.pictures.findIndex(({ _id }) => {
-            return _id === this.selectedVariation.picture_id
-          })
-          this.currentGalleyImg = pictureIndex + 1
-        }
-      }
-    }
-  }
-}

package/src/components/js/EcShipping.js

@@ -1,180 +0,0 @@
-import { $ecomConfig, price, formatMoney } from '@ecomplus/utils'
-import { modules } from '@ecomplus/client'
-import EcShippingLine from './../EcShippingLine.vue'
-import CleaveInput from 'vue-cleave-component'
-import dictionary from './../../lib/dictionary'
-
-const { localStorage } = window
-const zipStorageKey = 'ec-shipping-zip'
-
-const reduceItemBody = itemOrProduct => {
-  const shippedItem = {}
-  ;[
-    'product_id',
-    'variation_id',
-    'sku',
-    'name',
-    'quantity',
-    'currency_id',
-    'currency_symbol',
-    'price',
-    'final_price',
-    'dimensions',
-    'weight'
-  ].forEach(field => {
-    if (itemOrProduct[field] !== undefined) {
-      shippedItem[field] = itemOrProduct[field]
-    }
-  })
-  return shippedItem
-}
-
-export default {
-  name: 'EcShipping',
-
-  components: {
-    EcShippingLine,
-    CleaveInput
-  },
-
-  props: {
-    lang: {
-      type: String,
-      default: $ecomConfig.get('lang')
-    },
-    countryCode: {
-      type: String,
-      default: $ecomConfig.get('country_code')
-    },
-    storeId: {
-      type: Number,
-      default: $ecomConfig.get('store_id')
-    },
-    zipInput: {
-      type: Boolean,
-      default: true
-    },
-    zipCode: {
-      type: String
-    },
-    selectServices: {
-      type: Boolean
-    },
-    shippedItems: {
-      type: Array,
-      default: () => []
-    },
-    shippingResult: {
-      type: Array,
-      default: () => []
-    },
-    shippingData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  data () {
-    return {
-      zipCodeValue: this.zipCode,
-      shippingServices: [],
-      selectedService: null,
-      waiting: false
-    }
-  },
-
-  methods: {
-    dictionary,
-    formatMoney,
-
-    updateZipCode () {
-      this.$emit('update:zipCode', this.zipCodeValue)
-    },
-
-    parseShippingOptions (shippingResult = [], isRetry) {
-      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
-              })
-            })
-          } else if (isRetry !== true && (!response || !response.error)) {
-            canRetry = true
-          }
-        })
-        if (!this.shippingServices.length) {
-          if (canRetry) {
-            this.fetchShippingServices(true)
-          }
-        } else {
-          this.setSelectedService(0)
-        }
-      }
-    },
-
-    fetchShippingServices (isRetry) {
-      const { storeId } = this
-      const url = '/calculate_shipping.json'
-      const method = 'POST'
-      const data = {
-        ...this.shippingData,
-        to: {
-          zip: this.zipCodeValue,
-          ...this.shippingData.to
-        }
-      }
-      if (this.shippedItems.length) {
-        data.items = this.shippedItems.map(reduceItemBody)
-        const itemsToSubtotal = (subtotal, item) => subtotal + price(item) * item.quantity
-        data.subtotal = data.items.reduce(itemsToSubtotal, 0)
-      }
-      this.waiting = true
-      modules({ url, method, storeId, data })
-        .then(({ data }) => this.parseShippingOptions(data.result, isRetry))
-        .catch(console.error)
-        .finally(() => {
-          this.waiting = false
-        })
-    },
-
-    submitZipCode (e) {
-      this.updateZipCode()
-      if (localStorage) {
-        localStorage.setItem(zipStorageKey, this.zipCodeValue)
-      }
-      this.fetchShippingServices()
-    },
-
-    setSelectedService (i) {
-      if (this.selectServices) {
-        this.$emit('serviceSelected', this.shippingServices[i])
-        this.selectedService = i
-      }
-    }
-  },
-
-  created () {
-    if (localStorage) {
-      if (!this.zipCode) {
-        const storedZip = localStorage.getItem(zipStorageKey)
-        if (storedZip) {
-          this.zipCodeValue = storedZip
-          this.updateZipCode()
-        }
-      }
-      if (!this.shippingResult.length) {
-        if (this.zipCodeValue) {
-          this.fetchShippingServices()
-        }
-      } else {
-        this.parseShippingOptions(this.shippingResult)
-      }
-    }
-  }
-}

package/src/components/js/EcShippingLine.js

@@ -1,39 +0,0 @@
-import { _config, formatMoney } from '@ecomplus/utils'
-import dictionary from './../../lib/dictionary'
-
-export default {
-  name: 'EcShippingLine',
-
-  props: {
-    lang: {
-      type: String,
-      default: _config.get('lang')
-    },
-    shippingLine: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    isWorkingDays () {
-      const shipping = this.shippingLine
-      return (shipping.posting_deadline && shipping.posting_deadline.working_days) ||
-        (shipping.delivery_time && shipping.delivery_time.working_days)
-    },
-
-    deadline () {
-      const shipping = this.shippingLine
-      let days = shipping.posting_deadline ? shipping.posting_deadline.days : 0
-      if (shipping.delivery_time) {
-        days += shipping.delivery_time.days
-      }
-      return days
-    }
-  },
-
-  methods: {
-    dictionary,
-    formatMoney
-  }
-}

package/src/components/js/EcVariations.js

@@ -1,103 +0,0 @@
-import {
-  inStock as checkStock,
-  specValueByText as getSpecValueByText,
-  specTextValue as getSpecTextValue,
-  variationsGrids as getVariationsGrids,
-  gridTitle as getGridTitle
-} from '@ecomplus/utils'
-
-const { storefront } = window
-const grids = (storefront && storefront.data && storefront.data.grids) || []
-
-export default {
-  name: 'EcVariations',
-
-  props: {
-    product: {
-      type: Object,
-      required: true
-    },
-    selectedId: String
-  },
-
-  data () {
-    return {
-      selectedOptions: {},
-      filteredGrids: getVariationsGrids(this.product, null, true)
-    }
-  },
-
-  methods: {
-    getColorOptionBg (optionText) {
-      const rgbs = optionText.split(',').map(colorName => {
-        return getSpecValueByText(this.product.variations, colorName.trim(), 'colors')
-      })
-      return rgbs.length > 1
-        ? `background:linear-gradient(to right bottom, ${rgbs[0]} 50%, ${rgbs[1]} 50%)`
-        : `background:${rgbs[0]}`
-    },
-
-    getSpecValue (optionText, grid) {
-      const { variations } = this.product
-      let values
-      if (grid === 'colors') {
-        const colorNames = optionText.split(',')
-        if (colorNames.length > 1) {
-          values = []
-          colorNames.forEach(color => {
-            values.push(getSpecValueByText(variations, color.trim(), grid))
-          })
-        }
-      }
-      return values || getSpecValueByText(variations, optionText, grid)
-    },
-
-    getGridTitle (grid) {
-      return getGridTitle(grid, grids)
-    },
-
-    selectOption (optionText, grid, gridIndex) {
-      const { product, selectedOptions, orderedGrids } = this
-      this.$set(selectedOptions, grid, optionText)
-      const filterGrids = {}
-      for (let i = 0; i <= gridIndex; i++) {
-        const grid = orderedGrids[i]
-        if (selectedOptions[grid]) {
-          filterGrids[grid] = selectedOptions[grid]
-        }
-      }
-      const nextFilteredGrids = getVariationsGrids(product, filterGrids, true)
-      for (let i = gridIndex + 1; i < orderedGrids.length; i++) {
-        const grid = orderedGrids[i]
-        this.filteredGrids[grid] = nextFilteredGrids[grid]
-      }
-      const variations = product.variations.slice(0)
-      for (let i = 0; i < variations.length; i++) {
-        const variation = variations[i]
-        if (!checkStock(variation)) {
-          variations.splice(i, 1)
-        } else {
-          const { specifications } = variation
-          for (const grid in specifications) {
-            if (selectedOptions[grid] !== getSpecTextValue(variation, grid)) {
-              variations.splice(i, 1)
-              i--
-              break
-            }
-          }
-        }
-      }
-      this.$emit('update:selectedId', variations.length ? variations[0]._id : null)
-    }
-  },
-
-  computed: {
-    variationsGrids () {
-      return getVariationsGrids(this.product)
-    },
-
-    orderedGrids () {
-      return Object.keys(this.variationsGrids)
-    }
-  }
-}