@ecomplus/storefront-components 1.0.0-beta.168 → 1.0.0-beta.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomplus/storefront-components",
-  "version": "1.0.0-beta.168",
+  "version": "1.0.0-beta.169",
   "description": "Vue components for E-Com Plus Storefront",
   "main": "dist/storefront-components.min.js",
   "scripts": {

package/src/KitProductVariations.vue

@@ -0,0 +1,3 @@
+<script src="./js/KitProductVariations.js"></script>
+<template lang="html" src="./html/KitProductVariations.html"></template>
+<style lang="scss" src="./scss/KitProductVariations.scss"></style>

package/src/html/AccountAddresses.html

@@ -69,7 +69,10 @@
             </button>
           </div>
         </div>
-        <div class="account-addresses__recipient card-footer">
+        <div
+          v-if="address.name && !address.name.endsWith('*')"
+          class="account-addresses__recipient card-footer"
+        >
           {{ address.name }}
         </div>
       </div>

package/src/html/KitProductVariations.html

@@ -0,0 +1,92 @@
+<div class="kit-product-variations">
+  <div
+    class="glide"
+    ref="glide"
+  >
+      <div
+        class="glide__track"
+        data-glide-el="track"
+      >
+        <ul class="glide__slides kit-product-variations__list">
+          <li
+            v-for="(item, index) in localItems"
+            class="glide__slide"
+          >
+            <button
+              v-if="variationKit[activeIndex]"
+              @click="removeItemFromKit(activeIndex)"
+              type="button"
+              :aria-label="i19close"
+              class="close"
+            >
+              <i class="i-times-circle"></i>
+            </button>
+            <div class="kit-product-variations__item">
+              <div class="kit-product-variations__item-head">
+                <div class="kit-product-variations__picture">
+                  <a-picture
+                    class="gallery__big-image"
+                    :src="getImg(item, null, 'normal')"
+                  />
+                </div>
+                <div class="kit-product-variations__info">
+                  <h2>{{ getName(item) }}</h2>
+                  <b>{{ i19quantity }}: 1 </b>
+                </div>
+              </div>
+
+              <slot name="variations">
+                <product-variations
+                  :key="item.key"
+                  :product="item"
+                  :selected-id.sync="selectedVariationId"
+                  :max-options-btns="maxOptionsBtns"
+                  :class="variationKit[activeIndex] || variationKitReady.length < max
+                    ? 'kit-product-variations--show'
+                    : 'kit-product-variations--hide'"
+                />
+                <a-alert
+                  v-if="variationKitReady.length === max && !variationKit[activeIndex]"
+                  :can-show="variationKitReady.length === max"
+                  :variant="alertVariant"
+                >
+                  {{ i19maxQuantity }}:
+                  <strong>{{ max }}</strong>
+                </a-alert>
+                
+                <slot name="variations-info"/>
+              </slot>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div class="glide__pagination">
+        <span class="glide__pagination--current">{{ activeIndex + 1 }}</span>
+        <span class="glide__pagination--total">/ {{ localItems.length }}</span>
+      </div>
+  </div>
+  <div class="kit-product-variations__actions">
+    <button @click="activeIndex++" class="btn btn-block btn-primary"><span>{{ i19next }} {{ i19item }}</span></button>
+    <button @click="activeIndex--" class="btn btn-block btn-outline-secondary">
+      <span>{{ i19item }} {{ i19previous }}</span>
+    </button>
+  </div>
+  <div class="kit-product-variations__buy">
+    <slot
+      name="buy"
+      v-bind="{ variationKit }"
+    >
+      <button
+        type="button"
+        class="btn btn-lg btn-primary my-3"
+        @click="buy"
+        :disabled="variationKitReady.length !== min"
+      >
+        <slot name="buy-button-content">
+          <i class="i-shopping-bag mr-1"></i>
+        </slot>
+      </button>
+    </slot>
+  </div>
+</div>

package/src/html/LoginBlock.html

@@ -97,32 +97,34 @@
       {{ failAlertText }}
     </a-alert>
 
-    <transition enter-active-class="animated fadeInUp">
-      <div
-        v-if="oauthProviders.length"
-        class="login__oauth"
-      >
-        <p class="lead">
-          {{ i19orProceedWith }}:
-        </p>
-
-        <button
-          v-for="({ link, faIcon, providerName, provider }) in oauthProviders"
-          type="button"
-          class="btn login__btn"
-          :key="provider"
-          :class="`login__btn--${provider}`"
-          @click="() => oauthPopup(link)"
+    <slot name="login-methods" v-bind="{ isWaitingLogin, confirmAccount }">
+      <transition enter-active-class="animated fadeInUp">
+        <div
+          v-if="oauthProviders.length"
+          class="login__oauth"
         >
-          <small>{{ i19signInWith }}</small>
-          <i
-            class="fab mr-2"
-            :class="faIcon"
-          ></i>
-          {{ providerName }}
-        </button>
-      </div>
-    </transition>
+          <p class="lead">
+            {{ i19orProceedWith }}:
+          </p>
+
+          <button
+            v-for="({ link, faIcon, providerName, provider }) in oauthProviders"
+            type="button"
+            class="btn login__btn"
+            :key="provider"
+            :class="`login__btn--${provider}`"
+            @click="() => oauthPopup(link)"
+          >
+            <small>{{ i19signInWith }}</small>
+            <i
+              class="fab mr-2"
+              :class="faIcon"
+            ></i>
+            {{ providerName }}
+          </button>
+        </div>
+      </transition>
+    </slot>
   </form>
 
   <div class="login__info">

package/src/html/TheProduct.html

@@ -190,7 +190,7 @@
               >
                 <transition enter-active-class="animated fadeInUp">
                   <quantity-selector
-                    v-if="kitItems.length"
+                    v-if="kitItems.length && !isKitWithVariations"
                     :items="kitItems"
                     :min="body.min_quantity"
                     :max="body.quantity"
@@ -204,6 +204,21 @@
                       <slot name="buy-button-content"/>
                     </template>
                   </quantity-selector>
+                  <kit-product-variations
+                    v-if="kitItems.length && isKitWithVariations"
+                    :items="kitItems"
+                    :min="body.min_quantity"
+                    :max="body.quantity"
+                    :slug="body.slug"
+                    :kit-product-id="body._id"
+                    :kit-name="name"
+                    :kit-price="fixedPrice"
+                    :max-options-btns="maxVariationOptionsBtns"
+                  >
+                    <template #buy-button-content>
+                      <slot name="buy-button-content"/>
+                    </template>
+                  </kit-product-variations>
                 </transition>
 
                 <span

package/src/js/AccountAddresses.js

@@ -182,7 +182,7 @@ export default {
         }
       }
       const address = this.addresses[addressIndex]
-      if (address.name && address.street && address.city) {
+      if (address.name && ((address.street && address.city) || address.name.endsWith('*'))) {
         this.selectAddress(address)
       } else {
         this.editAddressIndex = addressIndex

package/src/js/AccountForm.js

@@ -162,9 +162,10 @@ export default {
   methods: {
     getPhoneStr (index = 0) {
       const { phones } = this.localCustomer
-      return phones[index]
-        ? getPhone(this.localCustomer.phones[index])
-        : ''
+      if (phones[index] && phones[index].number.charAt(0) !== '*') {
+        return getPhone(this.localCustomer.phones[index])
+      }
+      return ''
     },
 
     parsePhoneStr (phoneStr) {

package/src/js/AddressForm.js

@@ -49,13 +49,20 @@ export default {
   },
 
   data () {
+    const localAddress = {
+      _id: getRandomObjectId(),
+      zip: '',
+      province_code: '',
+      ...this.address
+    }
+    if (localAddress.name && localAddress.name.endsWith('*')) {
+      delete localAddress.name
+    }
+    if (localAddress.line_address && localAddress.line_address.endsWith('*')) {
+      delete localAddress.line_address
+    }
     return {
-      localAddress: {
-        _id: getRandomObjectId(),
-        zip: '',
-        province_code: '',
-        ...this.address
-      },
+      localAddress,
       isZipReady: countryCode !== 'BR',
       zipLoading: null,
       addressFromZip: {},

package/src/js/DiscountApplier.js

@@ -47,6 +47,14 @@ const addFreebieItems = (ecomCart, productIds) => {
           .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)
+        }
+      })
+    }
   }
 }
 

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()
+    }
+  }
+}

package/src/js/LoginBlock.js

@@ -33,6 +33,10 @@ export default {
       type: Boolean,
       default: true
     },
+    canFetchOauth: {
+      type: Boolean,
+      default: true
+    },
     ecomPassport: {
       type: Object,
       default () {
@@ -132,6 +136,7 @@ export default {
   },
 
   created () {
+    if (!this.canFetchOauth) return
     this.ecomPassport.fetchOauthProviders()
       .then(({ host, baseUri, oauthPath, providers }) => {
         const oauthProviders = []

package/src/js/TheProduct.js

@@ -52,6 +52,7 @@ import APicture from '../APicture.vue'
 import APrices from '../APrices.vue'
 import AShare from '../AShare.vue'
 import ProductVariations from '../ProductVariations.vue'
+import KitProductVariations from '../KitProductVariations.vue'
 import ProductGallery from '../ProductGallery.vue'
 import QuantitySelector from '../QuantitySelector.vue'
 import ShippingCalculator from '../ShippingCalculator.vue'
@@ -83,6 +84,7 @@ export default {
     APicture,
     APrices,
     AShare,
+    KitProductVariations,
     ProductVariations,
     ProductGallery,
     QuantitySelector,
@@ -283,6 +285,10 @@ export default {
 
     isKit () {
       return this.body.kit_composition && this.body.kit_composition.length
+    },
+
+    isKitWithVariations () {
+      return this.kitItems.some(item => item.variations && item.variations.length)
     }
   },
 
@@ -501,14 +507,7 @@ export default {
                     _id: genRandomObjectId()
                   })
                 }
-                if (product.variations) {
-                  product.variations.forEach(variation => {
-                    variation._id = genRandomObjectId()
-                    addKitItem(variation._id)
-                  })
-                } else {
-                  addKitItem()
-                }
+                addKitItem()
               })
             })
             .catch(console.error)

package/src/scss/KitProductVariations.scss

@@ -0,0 +1,72 @@
+.kit-product-variations {
+  max-width: 350px;
+  &__item {
+    display: flex;
+    align-items:flex-start;
+    overflow-x: hidden;
+    flex-direction: column;
+    margin-bottom: .5rem;
+    max-width: 350px;
+
+    a {
+      color: inherit;
+    }
+
+    picture {
+      flex: 0 0 115px;
+      width: 115px;
+      height: auto;
+      margin-right: .5rem;
+
+      img {
+        border-radius: var(--border-radius);
+      }
+    }
+
+    small {
+      line-height: 1.3;
+      display: inline-block;
+    }
+  }
+
+  &__info {
+    h2 {
+      font-size: var(--font-size-sm);
+    }
+  }
+
+  &__item-head {
+    display: flex;
+  }
+
+  &__info {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+  }
+
+  &__buy {
+    button {
+      width: 100%;
+    }
+  }
+
+  &__actions {
+    button {
+      text-transform: uppercase;
+    }
+  }
+
+  .glide__pagination {
+    text-align: center;
+    padding-bottom: 10px;
+  }
+
+  &--hide {
+    display: none !important;
+  }
+
+  &--show {
+    margin-left: 3px;
+  }
+}