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

package/src/html/AccountPoints.html

@@ -0,0 +1,39 @@
+<div
+  v-if="validPointsEntries.length"
+  class="account-points"
+>
+  <div class="account-points__info">
+    <h4>{{ i19loyaltyPoints }}</h4>
+    <span>{{ i19available }}: <b>{{ totalPoints.toFixed(1) }}</b> / Cashback: <b>{{ formatMoney(totalCashback) }}</b></span>
+  </div>
+
+  <ul class="list-group">
+    <li
+      v-for="pointsEntry in validPointsEntries"
+      class="list-group-item account-points__entry"
+    >
+      <div class="account-points__entry-title">
+        <h5 class="mb-1">
+          {{ pointsEntry.name }}
+        </h5>
+        <small v-if="pointsEntry.valid_thru">
+          {{ i19upTo }}
+          {{ formatDate(pointsEntry.valid_thru) }}
+        </small>
+      </div>
+
+      {{ i19available }}:
+      <b>{{ pointsEntry.active_points.toFixed(1) }}</b>
+      <small
+        v-if="pointsEntry.earned_points"
+        class="text-muted"
+      >
+        / {{ `${pointsEntry.earned_points.toFixed(1)} ${i19pointsEarned}` }}
+      </small>
+      <div class="account-points__cashback">
+        Cashback:
+        <b>{{ formatMoney(pointsEntry.active_points * pointsEntry.ratio) }}</b>
+      </div>
+    </li>
+  </ul>
+</div>

package/src/html/AddressForm.html

@@ -28,16 +28,16 @@
       />
 
       <div
-        v-if="!isZipReady"
+        v-if="zipLoading || zipInfoLink"
         class="input-group-append"
       >
         <span class="input-group-text">
           <a
-            v-if="!isZipLoading"
-            href="http://www.buscacep.correios.com.br/sistemas/buscacep/default.cfm"
+            v-if="!zipLoading"
+            :href="zipInfoLink"
             target="_blank"
           >
-            <i class="fas fa-question-circle"></i>
+            <i class="i-question-circle"></i>
           </a>
           <div
             v-else
@@ -102,6 +102,7 @@
             type="text"
             class="form-control"
             id="address-form-compl"
+            maxlength="100"
             v-model="localAddress.complement"
           >
         </div>
@@ -114,6 +115,7 @@
             type="text"
             class="form-control"
             id="address-form-ref"
+            maxlength="100"
             v-model="localAddress.near_to"
           >
         </div>
@@ -174,7 +176,7 @@
             type="text"
             class="form-control"
             id="address-form-pc"
-            pattern="[a-z]{2}"
+            pattern="[A-Z]{2}"
             maxlength="2"
             placeholder="AA"
             v-model="provinceCode"
@@ -189,8 +191,8 @@
         class="btn btn-lg btn-primary"
         type="submit"
       >
-        <i class="fas fa-check mr-1"></i>
-        {{ i19save }}
+        <i class="i-check mr-1"></i>
+        {{ btnText }}
       </button>
     </div>
   </transition>

package/src/html/BuyTogether.html

@@ -0,0 +1,60 @@
+<div class="buy-together">
+  <transition enter-active-class="animated fadeInDown">
+    <div v-if="hasLoadedItems && recommendedItems.length">
+      <div class="buy-together__title">
+        <div class="buy-together__discount lead mb-3">
+          {{ i19buyTogether }}
+          <span
+            v-if="discount"
+            class="badge badge-success"
+          >
+            {{ formatMoney(discount) }} <span>OFF</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="buy-together__row row">
+        <div
+          class="col-12"
+          :class="productIds.length > 1 ? 'col-md' : 'col-md-6 col-lg-4'"
+        >
+          <div class="row">
+            <div
+              v-if="items.length"
+              v-for="item in items"
+              :key="item._id"
+              class="buy-together__item col-12"
+              :class="`col-md-${(12 / items.length)}`"
+            >
+              <product-card
+                :product="item"
+                :productId="item._id"
+                :is-loaded="true"
+                v-bind="productCardProps"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="buy-together__cta col-auto">
+          <a-prices
+            :product="{ price: subtotal - discount, base_price: subtotal }"
+            :is-literal="true"
+            :is-big="true"
+          />
+          <button
+            v-if="canAddToCart"
+            class="btn btn-lg btn-primary mt-3"
+            @click="buy"
+          >
+            <i class="i-shopping-basket mr-1"></i>
+            {{ i19buyTogether }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </transition>
+
+  <transition leave-active-class="animated fadeOut">
+    <slot v-if="!hasLoadedItems"/>
+  </transition>
+</div>

package/src/html/CartItem.html

@@ -1,8 +1,11 @@
-<section class="cart-item">
+<section
+  class="cart-item"
+  :class="isFreebie ? 'cart-item--freebie' : null"
+>
   <div class="cart-item__container">
     <div class="cart-item__thumb">
       <component
-        v-if="item.picture && Object.keys(item.picture).length"
+        v-if="img"
         :is="item.slug ? 'a-link' : 'span'"
         :href="`/${item.slug}`"
       >
@@ -15,13 +18,21 @@
 
     <div class="cart-item__data">
       <button
+        v-if="!isFreebie"
         type="button"
         class="close"
         :title="i19remove"
         @click="remove"
       >
-        <i class="fas fa-trash-alt"></i>
+        <i class="i-trash"></i>
       </button>
+      <span
+        v-else
+        class="cart-item__freebie"
+      >
+        <i class="i-gift mr-1"></i>
+        {{ i19freebie }}
+      </span>
 
       <div
         class="cart-item__name"
@@ -36,51 +47,88 @@
         <template v-else>
           {{ name }}
         </template>
+
+        <small
+          class="cart-item__name-subtitle"
+          v-if="item.kit_product"
+        >
+          {{ formatName(item.kit_product.name) }}
+        </small>
       </div>
 
-      <div
-        :title="i19quantity"
-        class="cart-item__quantity"
+      <small
+        v-if="maxQuantity === 0"
+        class="cart-item__out-of-stock"
       >
-        <select
-          v-if="canInputSelect && inputType === 'select'"
-          class="custom-select"
-          v-model.number="quantity"
-          @change="updateInputType"
+        {{ i19outOfStock }}
+      </small>
+
+      <template v-else>
+        <div
+          :title="i19quantity"
+          class="cart-item__quantity"
         >
-          <option
-            v-for="qnt in (item.max_quantity || 10)"
-            :value="qnt"
-            :selected="qnt === quantity"
+          <strong v-if="item.kit_product || item.keep_item_quantity">
+            {{ quantity }}x
+          </strong>
+
+          <select
+            v-else-if="canInputSelect && inputType === 'select'"
+            class="custom-select"
+            v-model.number="quantity"
+            :disabled="!price"
+            @change="updateInputType"
           >
-            {{ qnt }}
-          </option>
-          <option :value="11">
-            11+
-          </option>
-        </select>
+            <option
+              v-for="qnt in Math.min(maxQuantity, 10)"
+              v-if="qnt >= minQuantity"
+              :key="`qnt-${qnt}`"
+              :value="qnt"
+              :selected="qnt === quantity"
+            >
+              {{ qnt }}
+            </option>
+            <option
+              v-if="maxQuantity > 10"
+              :value="11"
+            >
+              11+
+            </option>
+          </select>
 
-        <input
-          v-else
-          ref="input"
-          :type="inputType && inputType !== 'select' ? inputType : 'number'"
-          class="form-control"
-          placeholder="1"
-          v-model.number="quantity"
-          @blur="updateInputType"
-        >
-      </div>
+          <input
+            v-else
+            ref="input"
+            :type="inputType && inputType !== 'select' ? inputType : 'number'"
+            :min="minQuantity"
+            :max="maxQuantity"
+            :step="isIntegerQnt ? null : 0.001"
+            class="form-control"
+            v-model.number="quantity"
+            :readonly="!price"
+            @blur="updateInputType"
+          >
+        </div>
 
-      <div class="cart-item__prices">
         <div
-          class="cart-item__price-un fade"
-          :class="{ show: quantity > 1 }"
+          v-if="!isFreebie || price > 0"
+          class="cart-item__prices"
         >
-          {{ formatMoney(price) }}
-          <small>/un</small>
+          <div
+            class="cart-item__price-un fade"
+            :class="{ show: quantity > 1 }"
+          >
+            {{ formatMoney(price) }}
+            <small>/un</small>
+          </div>
+          {{ formatMoney(price * quantity) }}
         </div>
-        {{ formatMoney(price * quantity) }}
-      </div>
+      </template>
+
+      <item-customizations
+        :item="item"
+        class="cart-item__customizations"
+      />
     </div>
   </div>
 </section>

package/src/html/CartQuickview.html

@@ -64,11 +64,25 @@
                 href="#"
                 @click.prevent="toggle"
               >
-                <i class="fas fa-arrow-left mr-1"></i>
+                <i class="i-arrow-left mr-1"></i>
                 {{ i19continueShopping }}
               </a>
             </slot>
           </div>
+
+          <div
+            class="minicart__shipping"
+            v-if="cart.items.length && hasShippingCalculator"
+            key="shipping"
+          > 
+            <hr>
+            <shipping-calculator
+              class="minicart__shipping-calculator"
+              :can-select-services="true"
+              :shipped-items="cart.items"
+              @select-service="selectShippingService"
+            />
+          </div>
         </transition-group>
       </article>
 
@@ -79,12 +93,12 @@
         >
           <div class="minicart__summary">
             <span>{{ i19subtotal }}</span>
-            <strong class="minicart__subtotal">
+            <div class="minicart__subtotal">
               <a-prices
-                :product="{ price: cart.subtotal }"
+                :product="{ price: total || cart.subtotal }"
                 :is-literal="true"
               />
-            </strong>
+            </div>
           </div>
 
           <a-link
@@ -92,7 +106,7 @@
             role="button"
             :href="checkoutUrl"
           >
-            <i class="fas fa-check mr-1"></i>
+            <i class="i-check mr-1"></i>
             {{ i19checkout }}
           </a-link>
           <a-link
@@ -102,6 +116,15 @@
           >
             {{ i19seeCart }}
           </a-link>
+
+          <button
+            type="button"
+            class="minicart__btn-back btn btn-block btn-sm btn-link d-md-none"
+            @click="toggle"
+          >
+            <i class="i-arrow-left mr-1"></i>
+            {{ i19continueShopping }}
+          </button>
         </footer>
       </slot>
     </aside>

package/src/html/DiscountApplier.html

@@ -21,7 +21,7 @@
           @click.prevent="isFormVisible = !isFormVisible"
           type="button"
         >
-          <i class="fas fa-tag mr-1"></i>
+          <i class="i-tag mr-1"></i>
           {{ i19addDiscountCoupon }}
         </button>
       </div>
@@ -77,7 +77,7 @@
                 disabled
                 type="button"
               >
-                <i class="fas fa-check-circle"></i>
+                <i class="i-check-circle"></i>
               </button>
             </div>
           </div>

package/src/html/EarnPointsProgress.html

@@ -0,0 +1,28 @@
+<div
+  v-if="minSubtotalToEarn > cartSubtotal"
+  class="earn-points-progress"
+>
+  <span>
+    {{ i19add$1ToEarn.replace('$1', formatMoney(minSubtotalToEarn - cartSubtotal)) }}
+    <strong>{{ i19loyaltyPoints.toLowerCase() }}</strong>
+  </span>
+
+  <div
+    v-if="earnFromPercentage >= 33"
+    class="progress"
+  >
+    <div
+      class="progress-bar progress-bar-striped"
+      role="progressbar"
+      :style="`width: ${earnFromPercentage}%`"
+      :aria-valuenow="earnFromPercentage"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <span>
+        {{ programName }}
+        <strong>{{ earnFromPercentage }}%</strong>
+      </span>
+    </div>
+  </div>
+</div>

package/src/html/InputDate.html

@@ -1,7 +1,7 @@
 <cleave-input
   type="tel"
   class="form-control"
-  pattern="[\d/-]{10}"
+  pattern="[0-9\/\-]{10}"
   :options="cleaveOptions"
   v-model="localValue"
   :placeholder="placeholder"

package/src/html/InputDocNumber.html

@@ -1,6 +1,7 @@
 <cleave-input
   type="tel"
   class="form-control"
+  :class="isInvalid ? 'is-invalid' : null"
   :pattern="pattern"
   :options="cleaveOptions"
   v-model="localValue"

package/src/html/InputPhone.html

@@ -1,7 +1,7 @@
 <cleave-input
   type="tel"
   class="form-control"
-  pattern="(\+[\d]{2})?([\d]{2,})?([\s-]?[\d]{4,}){2,}"
+  pattern="(\+[\d]{2}\s?)?([1-9][\d]+)?([\s\-]?[\d]{4,}){2,}"
   :options="cleaveOptions"
   v-model="localValue"
   :placeholder="placeholder"

package/src/html/InstantSearch.html

@@ -32,7 +32,7 @@
               class="search__submit"
               :aria-label="i19search"
             >
-              <i class="fas fa-search"></i>
+              <i class="i-search"></i>
             </button>
           </div>
 
@@ -50,7 +50,7 @@
               :aria-label="i19close"
               @click="hide"
             >
-              <i class="fas fa-times-circle"></i>
+              <i class="i-times-circle"></i>
             </button>
           </div>
         </header>
@@ -111,7 +111,7 @@
               v-if="history.length"
               class="search__history d-none d-lg-block"
             >
-              <i class="fas fa-history"></i>
+              <i class="i-history"></i>
               <a
                 class="search__history-link"
                 v-for="term in history"

package/src/html/ItemCustomizations.html

@@ -0,0 +1,14 @@
+<div
+  v-if="item.customizations && item.customizations.length"
+  class="item-customizations small"
+>
+  <div
+    v-for="({ _id, label, option }) in item.customizations"
+    :key="`cs-${_id}`"
+  >
+    <span class="text-muted">
+      {{ label }}:
+    </span>
+    {{ option.text }}
+  </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>