@ecomplus/storefront-components 1.0.0-beta.19 → 1.0.0-beta.190

package/src/html/LoginBlock.html

@@ -7,14 +7,14 @@
       {{ i19enterYourEmailMsg }}
     </label>
 
-    <div class="input-group input-group-lg">
+    <div class="login__email input-group input-group-lg">
       <input
         ref="inputEmail"
         type="email"
         class="form-control"
         id="login-email"
         placeholder="email@mail.com"
-        v-model="email"
+        v-model.trim="email"
         :readonly="isWaitingLogin"
         required
       >
@@ -22,14 +22,14 @@
       <div class="input-group-append">
         <button
           type="submit"
-          class="btn btn-primary"
+          class="login__email-btn btn btn-primary"
           :disabled="isWaitingLogin"
         >
           <span
             v-if="!isWaitingLogin"
             key="login"
           >
-            <i class="fas fa-arrow-right"></i>
+            <i class="i-arrow-right"></i>
             <span class="d-none d-md-inline ml-1">
               {{ i19continue }}
             </span>
@@ -83,7 +83,7 @@
               :disabled="isWaitingLogin"
               :aria-label="i19continue"
             >
-              <i class="fas fa-check"></i>
+              <i class="i-check"></i>
             </button>
           </div>
         </div>
@@ -97,37 +97,39 @@
       {{ 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, email, 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">
     <div class="login__info-title">
-      <i class="fas fa-lock"></i>
+      <i class="i-lock"></i>
       {{ i19weUseYourDataToMsg }}:
     </div>
 
@@ -135,7 +137,7 @@
       class="login__info-row"
       v-for="label in [i19identifyYourAccount, i19notifyAboutOrders, i19manageYourPurchaseHistory]"
     >
-      <i class="fas fa-check"></i>
+      <i class="i-check"></i>
       {{ label }}
     </div>
   </div>

package/src/html/LoginModal.html

@@ -68,6 +68,12 @@
               >
                 {{ i19myAccount }}
               </a-link>
+              <a-link
+                :href="favoritesUrl"
+                class="list-group-item list-group-item-action"
+              >
+                {{ i19myFavorites }}
+              </a-link>
             </div>
 
             <button
@@ -75,7 +81,7 @@
               type="button"
               @click="logout"
             >
-              <i class="fas fa-sign-out-alt"></i>
+              <i class="i-sign-out"></i>
               {{ i19logout }}
             </button>
           </div>
@@ -131,7 +137,7 @@
               @click="isLoginForm = true"
             >
               <span class="login-modal__btn-icon">
-                <i class="fas fa-envelope"></i>
+                <i class="i-envelope"></i>
               </span>
               {{ `${i19signInWith} ${i19email}` }}
             </button>
@@ -154,9 +160,8 @@
                   type="button"
                   @click="isLoginForm = false"
                 >
-                  <i class="fas fa-arrow-left"></i>
+                  <i class="i-arrow-left"></i>
                 </button>
-
                 <label for="login-modal-email">
                   {{ `${i19signInWith} ${i19email}` }}
                 </label>

package/src/html/PaymentOption.html

@@ -49,17 +49,19 @@
         v-if="installmentOptions"
         class="payment-option__installment list-unstyled"
       >
-        <option
+        <li
           v-for="({ number, value, tax }) in installmentOptions"
           v-if="number > 1"
         >
-          {{ `${number}x` }}
-          <small>{{ i19of }}</small>
-          {{ formatMoney(value) }}
+          <span>
+            {{ `${number}x` }}
+            <small>{{ i19of }}</small>
+            {{ formatMoney(value) }}
+          </span>
           <small v-if="!tax">
             {{ i19interestFree }}
           </small>
-        </option>
+        </li>
       </ul>
     </div>
   </div>

package/src/html/PointsApplier.html

@@ -0,0 +1,26 @@
+<div class="points-applier">
+  <div
+    v-for="({ name }, programId) in localPointsPrograms"
+    v-if="availablePoints[programId] >= 0.1"
+    class="custom-control custom-switch"
+  >
+    <input
+      type="checkbox"
+      class="custom-control-input"
+      :id="`points-applier-${programId}`"
+      :checked="pointsApplied[programId]"
+      @change="ev => togglePoints(programId, ev.target.checked)"
+    >
+
+    <label
+      class="custom-control-label"
+      :for="`points-applier-${programId}`"
+    >
+      <span class="badge badge-info">
+        -{{ formatMoney(getPointsAmount(programId)) }}
+      </span>
+      {{ i19use$1LoyaltyPoints.replace('$1', availablePoints[programId].toFixed(1)) }}
+      <em>{{ name }}</em>
+    </label>
+  </div>
+</div>

package/src/html/ProductCard.html

@@ -5,8 +5,10 @@
     'product-card--small': isSmall
   }"
   @mouseover="isHovered = true"
+  :data-product-id="body._id"
+  :data-sku="body.sku"
 >
-  <transition enter-active-class="animated fadeIn">
+  <transition :enter-active-class="transitionClass">
     <section v-if="!isLoading">
       <slot
         name="discount-tag"
@@ -16,10 +18,23 @@
           v-if="isActive && discount > 0"
           class="product-card__offer-stamp"
         >
-          <i class="fas fa-arrow-down"></i> <b>{{ discount }}</b>%
+          <i class="i-arrow-down"></i> <b>{{ discount }}</b>%
         </span>
       </slot>
 
+      <slot name="stamps">
+        <div v-if="validStamps.length" class="product-card__stamps">
+          <span
+            v-for="(stamp, i) in validStamps"
+            :key="`s-${i}`"
+            :class="'product-card__stamps-' +
+              + `${(stamp.id || '').toLowerCase().replace(/\s/g, '-')}`"
+          >
+            <img :src="stamp.img" :alt="stamp.id">
+          </span>
+        </div>
+      </slot>
+
       <slot name="body">
         <a-link
           class="product-card__link"
@@ -61,6 +76,7 @@
           v-once
           class="product-card__rating"
           :data-sku="body.sku"
+          v-html="ratingHtml"
         ></div>
       </slot>
 
@@ -68,7 +84,7 @@
         name="unavailable"
         v-if="!body.available || !body.visible"
       >
-        <p class="badge badge-warning">
+        <p class="badge badge-warning mt-auto">
           {{ i19unavailable }}
         </p>
       </slot>
@@ -77,16 +93,27 @@
         name="out-of-stock"
         v-else-if="!isInStock"
       >
-        <p class="badge badge-dark">
+        <p class="badge badge-dark mt-auto">
           {{ i19outOfStock }}
         </p>
       </slot>
 
+      <slot
+        name="without-price"
+        v-else-if="isWithoutPrice"
+      >
+        <p class="badge badge-info mt-auto">
+          {{ i19uponRequest }}
+        </p>
+      </slot>
+
       <template v-else>
         <slot name="prices">
           <a-prices
             class="product-card__prices"
             :product="body"
+            :installments-option="installmentsOption"
+            :discount-option="discountOption"
           />
         </slot>
 
@@ -95,23 +122,54 @@
           class="product-card__buy fade"
         >
           <slot name="buy">
-            <div v-if="buyHtml" v-html="buyHtml"></div>
+            <div
+              v-if="buyHtml"
+              v-html="buyHtml"
+            ></div>
+
             <button
               type="button"
               class="btn btn-primary"
               :class="isSmall ? 'btn-sm': 'btn-block'"
+              :disabled="isWaitingBuy"
             >
+              <span
+                v-if="isWaitingBuy"
+                class="product-card__buy-loading spinner-grow spinner-grow-sm"
+                role="status"
+              >
+                <span class="sr-only">Loading...</span>
+              </span>
+
               <slot name="buy-button-content">
-                <i class="fas fa-shopping-bag mr-1"></i>
+                <i class="i-shopping-bag mr-1"></i>
                 {{ strBuy }}
               </slot>
             </button>
           </slot>
         </div>
-      </template>
+      </template>      
+      
+      <slot name="favorite">
+        <a 
+          class="btn product-card__favorite fade"
+          @click="toggleFavorite"
+          :href="isLogged ? null : accountUrl"
+          :aria-label="i19addToFavorites"
+        >
+          <i 
+            class="i-heart mr-1"
+            :class="isFavorite ? 'active' : null"
+          >
+          </i>
+        </a>
+      </slot>
 
       <slot name="footer">
-        <div v-if="footerHtml" v-html="footerHtml"></div>
+        <div
+          v-if="footerHtml"
+          v-html="footerHtml"
+        ></div>
       </slot>
     </section>
   </transition>
@@ -126,4 +184,6 @@
       {{ error }}
     </div>
   </template>
+
+  <div ref="quickview"></div>
 </div>

package/src/html/ProductGallery.html

@@ -6,7 +6,7 @@
       :class="{ 'gallery__item--selected': localPictures.length === activeIndex }"
       @click="activeIndex = localPictures.length"
     >
-      <i class="fas fa-play"></i>
+      <i class="i-play"></i>
       <span>{{ i19video }}</span>
     </div>
 
@@ -28,6 +28,7 @@
       v-if="localPictures.length > 4"
       type="button"
       class="gallery__open btn btn-dark"
+      :style="zoomLinkStyle"
       :title="i19openGallery"
       @click.prevent="openZoom(4)"
     >
@@ -53,10 +54,19 @@
             <div @click="openZoom(i)">
               <slot v-if="i === 0 && !isSliderMoved">
                 <a-picture
+                  v-if="!elFirstPicture"
                   class="gallery__big-image"
+                  :style="zoomLinkStyle"
                   :src="getImg(picture, null, 'big')"
                 />
+                <div
+                  v-else
+                  ref="firstPicture"
+                  class="gallery__big-image"
+                  :style="zoomLinkStyle"
+                ></div>
               </slot>
+
               <a-picture
                 v-else
                 class="gallery__big-image"
@@ -73,9 +83,17 @@
             <div
               class="embed-responsive"
               :class="`embed-responsive-${videoAspectRatio}`"
-            >
+            > 
+              <div
+                v-if="activeIndex === localPictures.length"
+                class="spinner-border text-primary" 
+                role="status"
+              >
+                <span class="sr-only">Loading...</span>
+              </div>
               <iframe
                 class="embed-responsive-item"
+                v-if="activeIndex === localPictures.length"
                 :src="videoSrc"
                 allowfullscreen
               ></iframe>
@@ -151,7 +169,7 @@
           class="btn btn-success"
           @click="buy"
         >
-          <i class="fas fa-cart-arrow-down"></i>
+          <i class="i-shopping-cart"></i>
           <span class="d-none d-md-inline ml-1">
             {{ i19addToCart }}
           </span>

package/src/html/ProductQuickview.html

@@ -0,0 +1,64 @@
+<portal :selector="`#${portalId}`">
+  <div class="product-quickview">
+    <a-backdrop
+      :is-visible="isVisible"
+      @hide="hide"
+    />
+
+    <transition
+      enter-active-class="animated zoomIn"
+      leave-active-class="animated fadeOutUp slow"
+    >
+      <div
+        class="product-quickview__box card"
+        v-if="isVisible"
+      >
+        <slot name="header">
+          <div class="product-quickview__header card-header">
+            {{ productName }}
+            <button
+              type="button"
+              class="close"
+              :aria-label="i19close"
+              @click="hide"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+        </slot>
+
+        <div class="product-quickview__body card-body">
+          <div
+            v-if="!productName"
+            class="product-quickview__loading"
+          >
+            <div
+              class="spinner-border"
+              role="status"
+            >
+              <span class="sr-only">Loading...</span>
+            </div>
+          </div>
+
+          <div class="container">
+            <the-product
+              is-quickview
+              :product-id="productId"
+              :product="product"
+              @update:product="setProduct"
+              @buy="hide"
+            />
+          </div>
+
+          <a
+            v-if="productName"
+            class="product-quickview__btn-redirect btn btn-secondary"
+            :href="productLink"
+          >
+            {{ i19seeMoreInfo }}
+          </a>
+        </div>
+      </div>
+    </transition>
+  </div>
+</portal>

package/src/html/ProductVariations.html

@@ -4,18 +4,42 @@
 >
   <div
     v-for="(options, grid, index) in variationsGrids"
+    v-if="filteredGrids[grid]"
     :class="`variations__grid variations__grid--${grid}`"
   >
-    <h5>{{ getGridTitle(grid) }}</h5>
+    <div class="mb-2">
+      <span class="variations__grid-title h5">
+        {{ getGridTitle(grid) }}
+      </span>
+
+      <span
+        v-if="selectedOptions[grid]"
+        key="success"
+        class="variations__value variations__value"
+      >
+        <i class="i-check mr-1"></i>
+        {{ selectedOptions[grid] }}
+      </span>
+      <span
+        v-else
+        class="variations__value variations__value--empty"
+      >
+        <i class="i-arrow-down mr-1"></i>
+        {{ i19selectVariation }}
+      </span>
+    </div>
 
     <template v-if="options.length <= maxOptionsBtns">
       <button
         v-for="optionText in options"
         class="variations__option btn btn-light"
-        :class="selectedOptions[grid] === optionText ? 'variations__option--selected' : null"
+        :class="[
+          selectedOptions[grid] === optionText ? 'variations__option--selected' : null, 
+          `variations__option--${optionText}`, 
+          filteredGrids[grid].includes(optionText) ? null : 'disabled'
+        ]"
         :style="grid === 'colors' ? getColorOptionBg(optionText) : null"
         @click="selectOption(optionText, grid, index)"
-        :disabled="!filteredGrids[grid].includes(optionText)"
       >
         {{ optionText }}
       </button>
@@ -26,6 +50,9 @@
       class="variations__select custom-select"
       @change="$event => selectOption($event.target.value, grid, index)"
     >
+      <option :selected="!selectedOptions[grid]">
+        {{ i19select }}...
+      </option>
       <option
         v-for="optionText in options"
         :value="optionText"

package/src/html/QuantitySelector.html

@@ -0,0 +1,85 @@
+<div class="quantity-selector">
+  <div
+    class="quantity-selector__item"
+    v-for="item in items"
+  >
+    <div class="row quantity-selector__btn-container">
+      <button
+        class="btn btn-sm btn-link col-sm-3"
+        type="button"
+        @click="changeQnt(item, -1)"
+        :disabled="item.min_quantity >= selectedQnts[item._id]"
+      >
+        <i class="i-chevron-down"></i>
+      </button>
+      <input
+        type="tel"
+        class="form-control quantity-selector__input col-sm-6"
+        @change="ev => changeQnt(item, null, ev)"
+        @keyup.up="changeQnt(item, 1)"
+        @keyup.down="changeQnt(item, -1)"
+        :value="selectedQnts[item._id]"
+        :disabled="!checkInStock(item)"
+        :readonly="item.min_quantity && item.min_quantity === item.max_quantity"
+      >
+      <button
+        class="btn btn-sm btn-link col-sm-3"
+        type="button"
+        @click="changeQnt(item, 1)"
+        :disabled="item.max_quantity <= selectedQnts[item._id]"
+      >
+        <i class="i-chevron-up"></i>
+      </button>
+    </div>
+
+    <span class="quantity-selector__label">
+      <slot v-bind="{ item }">
+        <a-link
+          v-if="item.slug"
+          target="_blank"
+          :href="`/${item.slug}`"
+          :title="item.name"
+        >
+          {{ item.name }}
+        </a-link>
+        <template v-else>
+          {{ item.name }}
+        </template>
+      </slot>
+    </span>
+  </div>
+
+  <a-alert :can-show="hasMinAlert">
+    {{ i19minQuantity }}:
+    <strong>{{ min }}</strong>
+  </a-alert>
+
+  <a-alert
+    :can-show="hasMaxAlert"
+    :variant="alertVariant"
+  >
+    {{ i19maxQuantity }}:
+    <strong>{{ max }}</strong>
+  </a-alert>
+
+  <div
+    v-if="hasBuyButton"
+    class="quantity-selector__buy"
+  >
+    <slot
+      name="buy"
+      v-bind="{ selectedQnts, buy }"
+    >
+      <button
+        type="button"
+        class="btn btn-lg btn-primary my-3"
+        @click="buy"
+      >
+        <slot name="buy-button-content">
+          <i class="i-shopping-bag mr-1"></i>
+          {{ strBuy }}
+        </slot>
+      </button>
+    </slot>
+  </div>
+</div>

package/src/html/RecommendedItems.html

@@ -0,0 +1,48 @@
+<section class="recommended-items">
+  <transition enter-active-class="animated fadeIn">
+    <div v-if="items.length">
+      <div
+        v-if="!productIds.length" 
+        class="recommended-items__title"
+      >
+        <slot name="title">
+          <p class="lead">
+            {{ i19weRecommendToYou }}
+          </p>
+        </slot>
+      </div>
+
+      <div :class="rowClassName">
+        <div
+          v-for="item in items"
+          :key="item._id"
+          :class="colClassName"
+        >
+          <slot
+            name="item"
+            v-bind="{ item }"
+          >
+            <product-card
+              :product="item"
+              :is-loaded="true"
+              v-bind="productCardProps"
+            />
+          </slot>
+        </div>
+      </div>
+
+      <div
+        v-if="canLoadMore"
+        class="recommended-items__load-more"
+      >
+        <button
+          v-if="totalCount >= pageSize * (pageNumber + 1)"
+          class="btn btn-sm btn-outline-secondary"
+          @click="pageNumber++"
+        >
+          <i class="i-plus mr-1"></i> {{ i19seeMore }}
+        </button>
+      </div>
+    </div>
+  </transition>
+</section>