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

package/src/html/SearchEngine.html

@@ -26,6 +26,75 @@
           class="card-body"
           :key="searchFilterId"
         >
+          <div
+            v-if="hasSetPriceRange || priceOptions.length"
+            class="search-engine__filter search-engine__filter--price"
+          >
+            <h5>{{ i19price }}</h5>
+            <a
+              v-if="hasSetPriceRange"
+              href="#"
+              class="btn btn-link btn-sm mb-2"
+              @click.prevent="setPriceRange()"
+            >
+              <i class="i-arrow-left mr-1"></i>
+              {{ i19all }}
+            </a>
+
+            <div
+              class="search-engine__option custom-control custom-radio"
+              v-for="({ label, min, max }, index) in priceOptions"
+              :key="`Price-${index}`"
+            >
+              <input
+                type="radio"
+                class="custom-control-input"
+                name="price-option"
+                :id="`Price-${index}`"
+                @click="setPriceRange(min, max)"
+              >
+              <label
+                class="custom-control-label"
+                :for="`Price-${index}`"
+              >
+                {{ label }}
+              </label>
+            </div>
+
+            <div
+              v-if="priceRange.max - priceRange.min > 2"
+              class="search-engine__option-range input-group input-group-sm mt-2"
+            >
+              <input
+                ref="inputMinPrice"
+                type="text"
+                class="form-control"
+                aria-describedby="search-engine-price-range"
+                :aria-label="`Min ${i19price}`"
+                :placeholder="`Min: ${Math.floor(priceRange.min)}`"
+              >
+              <input
+                ref="inputMaxPrice"
+                type="text"
+                class="form-control"
+                aria-label="Max"
+                aria-describedby="search-engine-price-range"
+                :aria-label="`Max ${i19price}`"
+                :placeholder="`Max: ${Math.ceil(priceRange.max)}`"
+              >
+              <div class="input-group-append">
+                <button
+                  class="btn btn-outline-secondary"
+                  type="button"
+                  id="search-engine-price-range"
+                  @click="handlePriceInputs()"
+                >
+                  <i class="i-chevron-right"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+
           <div
             v-for="({ filter, options, isSpec }, i) in filters"
             v-if="options.length"
@@ -35,15 +104,14 @@
           >
             <template v-once>
               <button
-                class="btn"
+                class="btn text-truncate"
                 type="button"
                 data-toggle="collapse"
                 :data-target="`#collapse-${filter}`"
                 :aria-expanded="i < 5 ? 'true' : 'false'"
                 :aria-controls="`collapse-${filter}`"
               >
-                <i class="fas fa-chevron-down"></i>
-                <i class="fas fa-chevron-up"></i>
+                <i class="i-chevron-down"></i><i class="i-chevron-up"></i>
                 {{ getFilterLabel(filter) }}
               </button>
 
@@ -56,6 +124,7 @@
                   class="search-engine__option custom-control custom-checkbox"
                   v-for="(opt, index) in options"
                   :key="`${filter}-${index}`"
+                  :data-opt="opt.key"
                 >
                   <input
                     type="checkbox"
@@ -69,9 +138,7 @@
                     :for="`${filter}-${index}`"
                   >
                     {{ opt.key }}
-                    <small v-if="!isSpec">
-                      ({{ opt.doc_count }})
-                    </small>
+                    <small v-if="!isSpec">({{ opt.doc_count }})</small>
                   </label>
                 </div>
               </div>
@@ -86,7 +153,7 @@
             @click="clearFilters"
           >
             <span class="mr-1">
-              <i class="fas fa-trash-alt"></i>
+              <i class="i-trash"></i>
             </span>
             {{ i19clearFilters }}
           </button>
@@ -116,9 +183,9 @@
       </span>
       <span v-else>
         <span class="d-none d-md-inline">
-          <i class="fas fa-search"></i>
+          <i class="i-search"></i>
         </span>
-        <i class="fas fa-filter"></i>
+        <i class="i-filter"></i>
       </span>
     </button>
   </transition>
@@ -158,8 +225,8 @@
               @click="toggleFilters(true)"
               type="button"
             >
-              <i class="fas fa-filter mr-1"></i>
-              <span class="d-none d-md-inline">
+              <i class="i-filter mr-1"></i>
+              <span class="d-none d-md-inline-block">
                 {{ i19filterResults }}
               </span>
               <span class="d-md-none">
@@ -176,7 +243,7 @@
                 aria-haspopup="true"
                 aria-expanded="false"
               >
-                <i class="fas fa-sort mr-1"></i>
+                <i class="i-sort mr-1"></i>
                 {{ i19sort }}
               </button>
 
@@ -188,6 +255,7 @@
                   v-for="({ value, label }, index) in sortOptions"
                   :key="`sort-${index}`"
                   class="dropdown-item"
+                  :class="`search-engine__sort--${value}`"
                   href="#"
                   @click.prevent="setSortOrder(value)"
                   :active="selectedSortOption === value"
@@ -251,7 +319,7 @@
             </div>
           </template>
 
-          <h3 v-else-if="popularItems.length">
+          <h3 v-else-if="hasEmptyResult && popularItems.length">
             {{ i19popularProducts }}
           </h3>
 
@@ -265,7 +333,7 @@
                 type="button"
                 @click="clearFilters"
               >
-                <i class="fas fa-trash-alt mr-1"></i>
+                <i class="i-trash mr-1"></i>
                 {{ i19clearFilters }}
               </button>
 
@@ -276,7 +344,7 @@
                   v-for="option in options"
                   @click="setFilterOption(filter, option, false)"
                 >
-                  <i class="fas fa-times mr-1"></i>
+                  <i class="i-times mr-1"></i>
                   {{ option }}
                   <small>{{ getFilterLabel(filter) }}</small>
                 </button>
@@ -285,12 +353,16 @@
           </transition>
         </div>
 
-        <article class="search-engine__retail">
+        <article
+          v-if="canShowItems"
+          class="search-engine__retail"
+        >
           <div class="row">
             <div
               class="col-6 col-md-4 col-lg-3"
-              v-for="product in suggestedItems"
+              v-for="(product, i) in suggestedItems"
               :key="product._id"
+              :ref="i === pageAnchorIndex ? 'pageAnchor' : null"
             >
               <slot
                 name="product-card"
@@ -312,7 +384,7 @@
             role="alert"
             v-if="hasNetworkError"
           >
-            <i class="fas fa-wifi mr-2"></i>
+            <i class="i-wifi mr-2"></i>
             {{ i19searchOfflineErrorMsg }}
             <a
               href="#"
@@ -331,10 +403,15 @@
     <slot v-if="!hasSearched || isLoadingMore"/>
   </transition>
 
-  <div
-    v-if="resultItems.length < totalSearchResults"
-    :key="lastRequestId"
-    id="search-engine-load-more"
-    style="width: 100%; margin-top: 20px; height: 5px"
-  ></div>
+  <component
+    :is="loadMoreSelector ? 'portal' : 'div'"
+    :selector="loadMoreSelector"
+  >
+    <div
+      v-if="resultItems.length < totalSearchResults"
+      :key="lastRequestId"
+      id="search-engine-load-more"
+      style="width: 100%; margin-top: 20px; height: 5px"
+    ></div>
+  </component>
 </section>

package/src/html/ShippingCalculator.html

@@ -22,8 +22,9 @@
           <button
             class="btn btn-outline-secondary"
             type="submit"
+            :aria-label="i19calculateShipping"
           >
-            <i class="fas fa-shipping-fast"></i>
+            <i class="i-shipping-fast"></i>
           </button>
         </div>
       </div>
@@ -49,6 +50,19 @@
         key="services"
         class="list-group"
       >
+        <transition
+          enter-active-class="animated fadeInUp"
+          leave-active-class="animated fadeOutDown"
+        >
+          <div
+            v-if="canSelectServices && !canAutoSelectService &&
+              selectedService === null && shippingServices.length"
+            class="shipping-calculator__label"
+          >
+            <i class="i-arrow-down animated wobble"></i>
+            {{ i19selectShippingMsg }}
+          </div>
+        </transition>
         <component
           :is="canSelectServices ? 'a' : 'div'"
           :href="canSelectServices && '#'"
@@ -62,11 +76,78 @@
           @click.prevent="setSelectedService(i)"
         >
           <span class="shipping-calculator__option">
-            <shipping-line :shipping-line="service.shipping_line"/>
-            <small>{{ service.label }}</small>
+            <slot
+              name="option"
+              v-bind="{ service }"
+            >
+              <shipping-line
+                :shipping-line="service.shipping_line"
+                :production-deadline="productionDeadline"
+                :data-service-code="service.service_code"
+              />
+              <div
+                v-if="canSelectServices && !canAutoSelectService"
+                class="custom-control custom-radio"
+              >
+                <input
+                  type="radio"
+                  :id="`shipping-method-${service.service_code}`"
+                  name="shipping-method-select"
+                  class="custom-control-input"
+                  :checked="selectedService === i"
+                />
+                <label 
+                  class="custom-control-label" 
+                  :for="`shipping-method-${service.service_code}`"
+                >
+                  <small>{{ service.label }}</small>
+                </label>
+              </div>
+              <small v-else>{{ service.label }}</small>
+            </slot>
           </span>
         </component>
       </div>
     </transition-group>
+
+    <transition
+      enter-active-class="animated fadeInUp"
+      leave-active-class="animated fadeOutDown"
+    >
+      <div
+        v-if="freeFromPercentage"
+        class="shipping-calculator__free-from-value"
+      >
+        <slot
+          name="free-from-value"
+          v-bind="{ amountSubtotal, freeFromValue, freeFromPercentage }"
+        >
+          <span>
+            {{ i19add$1ToEarn.replace('$1', formatMoney(freeFromValue - amountSubtotal)) }}
+            <strong>{{ i19freeShipping }}</strong>
+          </span>
+
+          <div
+            v-if="freeFromPercentage >= 33"
+            class="progress"
+          >
+            <div
+              class="progress-bar progress-bar-striped"
+              role="progressbar"
+              :style="`width: ${freeFromPercentage}%`"
+              :aria-valuenow="freeFromPercentage"
+              aria-valuemin="0"
+              aria-valuemax="100"
+            >
+              <span>
+                {{ i19freeShipping }}
+                <i class="i-truck mx-1"></i>
+                <strong>{{ freeFromPercentage }}%</strong>
+              </span>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </transition>
   </div>
 </div>

package/src/html/ShippingLine.html

@@ -1,8 +1,11 @@
 <div class="shipping-line">
-  <strong>
+  <strong class="mr-2">
     {{ deadlineStr }}
   </strong>
-  <span class="mx-2">
+  <span class="mr-2">
     {{ freightValueStr }}
   </span>
+  <small v-if="shippingLine.delivery_instructions">
+    {{ shippingLine.delivery_instructions }}
+  </small>
 </div>

package/src/html/TheAccount.html

@@ -4,7 +4,7 @@
     class="account__logged"
   >
     <h2 class="account__greetings">
-      <i class="fas fa-user-circle"></i>
+      <i class="i-user-circle"></i>
       {{ `${i19hello} ${nickname}` }}
     </h2>
 
@@ -14,21 +14,21 @@
         href="#"
         @click.prevent="logout"
       >
-        <i class="fas fa-sign-out-alt"></i>
+        <i class="i-sign-out"></i>
         {{ i19logout }}
       </a>
     </div>
 
     <ul class="account__nav nav nav-tabs">
       <li
-        v-for="(label, i) in [i19registration, i19orders]"
+        v-for="({ label, value }) in navTabs"
         class="nav-item"
       >
         <a
           class="nav-link"
-          :class="activeTab === i ? 'active' : null"
+          :class="activeTab === value ? 'active' : null"
           href="#"
-          @click.prevent="activeTab = i"
+          @click.prevent="activeTab = value"
         >
           {{ label }}
         </a>
@@ -40,13 +40,13 @@
         enter-active-class="animated fadeInLeft slow"
         leave-active-class="animated fadeOutLeft"
       >
-        <div v-if="!isOrdersList">
+        <div v-if="currentTab === 'account' || !currentTab">
           <slot name="registration">
             <div class="row">
-              <div class="col-lg-8 col-md-7">
+              <div class="col-md-7">
                 <slot name="account-form"/>
               </div>
-              <div class="col-lg-4 col-md-5 mt-3 mt-md-0">
+              <div class="col-md-5 mt-3 mt-md-0">
                 <h4>{{ i19addresses }}</h4>
                 <slot name="account-addresses"/>
               </div>
@@ -59,10 +59,44 @@
         enter-active-class="animated fadeInRight slow"
         leave-active-class="animated fadeOutRight position-absolute"
       >
-        <div v-if="isOrdersList">
+        <div v-if="currentTab === 'orders'">
           <slot name="orders-list"/>
         </div>
       </transition>
+
+      <transition
+        enter-active-class="animated fadeInRight slow"
+        leave-active-class="animated fadeOutRight position-absolute"
+      >
+        <div v-if="currentTab === 'favorites'">
+          <slot name="favorites">
+            <recommended-items
+              v-if="favoriteIds.length"
+              :product-ids="favoriteIds"
+            >
+            </recommended-items>
+            <div v-else>
+              {{ i19noSavedFavoritesMsg }}
+            </div>
+          </slot>          
+        </div>
+      </transition>
+      <transition
+        enter-active-class="animated fadeInRight slow"
+        leave-active-class="animated fadeOutRight position-absolute"
+      >
+        <div v-if="currentTab === 'points'">
+          <slot name="account-points"/>
+        </div>
+      </transition>
+      <transition
+        enter-active-class="animated fadeInRight slow"
+        leave-active-class="animated fadeOutRight position-absolute"
+      >
+        <div v-if="currentTab === 'subscriptions'">
+          <slot name="subscriptions" />
+        </div>
+      </transition>
     </div>
   </div>
 

package/src/html/TheCart.html

@@ -0,0 +1,156 @@
+<div class="cart">
+  <transition-group enter-active-class="animated fadeInDown">
+    <div
+      class="row"
+      v-if="cart.items.length"
+      key="list"
+    >
+      <div class="col-md-7 col-lg-8">
+        <div class="cart__list">
+          <slot
+            name="list"
+            v-bind="{ items: cart.items }"
+          >
+            <transition-group
+              enter-active-class="animated fadeInDown"
+              leave-active-class="animated fadeOutUp faster position-absolute"
+            >
+              <cart-item
+                v-for="item in cart.items"
+                :key="item._id"
+                :item="item"
+                :name-max-length="80"
+              />
+            </transition-group>
+          </slot>
+        </div>
+
+        <earn-points-progress
+          class="my-3"
+          :cart-subtotal="cart.subtotal"
+        />
+
+        <recommended-items col-class-name="col-6 col-lg-3"/>
+
+        <slot name="back-shopping">
+          <div class="cart__back d-none d-md-block my-4">
+            <a
+              class="cart__btn-back btn btn-link"
+              role="button"
+              href="/"
+            >
+              <i class="i-arrow-left mr-1"></i>
+              {{ i19continueShopping }}
+            </a>
+          </div>
+        </slot>
+      </div>
+
+      <div class="col-md-5 col-lg-4 mt-3 mt-md-0">
+        <div class="cart__info">
+          <slot name="info">
+            <div
+              class="cart__summary-row"
+              :data-subtotal="cart.subtotal.toFixed(2)"
+            >
+              <span>Subtotal</span>
+              <div>{{ formatMoney(cart.subtotal) }}</div>
+            </div>
+
+            <template v-if="isValidCart">
+              <transition enter-active-class="animated fadeInDown">
+                <div
+                  class="cart__summary-row mt-1"
+                  v-if="amount.discount"
+                  :data-discount="amount.discount.toFixed(2)"
+                >
+                  <span>
+                    <i class="i-tag mr-1"></i>
+                    {{ i19discount }}
+                  </span>
+                  <div>{{ formatMoney(amount.discount) }}</div>
+                </div>
+              </transition>
+
+              <shipping-calculator
+                class="cart__shipping"
+                :can-select-services="true"
+                :shipped-items="cart.items"
+                :zip-code.sync="localZipCode"
+                @select-service="selectShippingService"
+              />
+
+              <div
+                class="cart__summary-row cart__total"
+                :data-total="(amount.total || cart.subtotal).toFixed(2)"
+              >
+                <span>Total</span>
+                <a-prices
+                  :product="{ price: amount.total || cart.subtotal }"
+                  :discount-option="{ value: amount.discount }"
+                  :is-literal="true"
+                  :is-amount-total="true"
+                />
+              </div>
+            </template>
+
+            <slot name="checkout">
+              <a
+                v-if="isValidCart"
+                class="cart__btn-checkout btn btn-lg btn-block btn-success"
+                role="button"
+                :href="checkoutUrl"
+              >
+                <span class="mr-1">
+                  <i class="i-shopping-bag"></i>
+                </span>
+                {{ i19checkout }}
+              </a>
+
+              <a
+                class="cart__btn-back btn btn-block btn-outline-secondary"
+                :class="isValidCart ? 'd-md-none' : 'mt-3'"
+                role="button"
+                href="/"
+              >
+                <i class="i-arrow-left mr-1"></i>
+                {{ i19continueShopping }}
+              </a>
+            </slot>
+          </slot>
+        </div>
+
+        <discount-applier
+          v-if="isValidCart && canApplyDiscount"
+          class="cart__discount"
+          :amount="amount"
+          :is-coupon-applied="isCouponApplied"
+          :coupon-code.sync="localDiscountCoupon"
+          @set-discount-rule="setDiscountRule"
+          :modules-payload="modulesPayload"
+        />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="cart__empty"
+      key="empty"
+    >
+      <slot name="empty">
+        <p class="lead text-muted">
+          {{ i19emptyCart }} ...
+        </p>
+        <a
+          class="btn btn-primary"
+          href="/"
+        >
+          <span class="mr-1">
+            <i class="i-arrow-left"></i>
+          </span>
+          {{ i19continueShopping }}
+        </a>
+      </slot>
+    </div>
+  </transition-group>
+</div>