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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ecomplus/storefront-components",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.190",
   "description": "Vue components for E-Com Plus Storefront",
   "main": "dist/storefront-components.min.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack",
+    "build": "cross-env NODE_ENV=production webpack",
     "serve": "webpack-dev-server"
   },
   "repository": {
@@ -32,17 +32,22 @@
     "@ecomplus/utils": "^1.4.1"
   },
   "dependencies": {
-    "@ecomplus/client": "^2.0.4",
-    "@ecomplus/i18n": "^1.11.0",
-    "@ecomplus/passport-client": "^1.0.10",
-    "@ecomplus/search-engine": "^2.3.0",
-    "@ecomplus/shopping-cart": "^2.1.1",
-    "@ecomplus/storefront-twbs": "^5.5.0",
-    "@glidejs/glide": "^3.4.1",
+    "@brazilian-utils/brazilian-utils": "^1.0.0-rc.12",
+    "@ecomplus/client": "^2.4.0",
+    "@ecomplus/i18n": "^1.32.2",
+    "@ecomplus/passport-client": "^1.2.1",
+    "@ecomplus/search-engine": "^2.6.1",
+    "@ecomplus/shopping-cart": "^2.6.0",
+    "@ecomplus/storefront-twbs": "^7.3.6",
+    "@glidejs/glide": "^3.7.1",
+    "@linusborg/vue-simple-portal": "^0.1.5",
+    "axios": "^0.27.2 || ^1.1.2",
     "cleave.js": "^1.6.0",
-    "lozad": "^1.15.0",
+    "lodash.clonedeep": "^4.5.0",
+    "lozad": "^1.16.0",
     "photoswipe": "^4.1.3",
-    "vue": "^2.6.11",
-    "vue-cleave-component": "^2.1.3"
+    "vue": "2.6.14",
+    "vue-cleave-component": "^2.1.3",
+    "vue-social-sharing": "^3.0.9"
   }
 }

package/src/APagination.vue

@@ -0,0 +1,2 @@
+<script src="./js/APagination.js"></script>
+<template lang="html" src="./html/APagination.html"></template>

package/src/AShare.vue

@@ -0,0 +1,2 @@
+<script src="./js/AShare.js"></script>
+<template lang="html" src="./html/AShare.html"></template>

package/src/AccountAddresses.vue

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

package/src/AccountForm.vue

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

package/src/AccountPoints.vue

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

package/src/BuyTogether.vue

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

package/src/EarnPointsProgress.vue

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

package/src/ItemCustomizations.vue

@@ -0,0 +1,2 @@
+<script src="./js/ItemCustomizations.js"></script>
+<template lang="html" src="./html/ItemCustomizations.html"></template>

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/PointsApplier.vue

@@ -0,0 +1,2 @@
+<script src="./js/PointsApplier.js"></script>
+<template lang="html" src="./html/PointsApplier.html"></template>

package/src/ProductQuickview.vue

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

package/src/QuantitySelector.vue

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

package/src/RecommendedItems.vue

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

package/src/ShippingLine.vue

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

package/src/TheCart.vue

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

package/src/html/APagination.html

@@ -0,0 +1,90 @@
+<nav class="d-flex">
+  <ul class="pagination mr-2">
+    <li
+      class="page-item"
+      :class="page <= 1 ? 'disabled' : null"
+    >
+      <a
+        href="#"
+        class="page-link"
+        :aria-disabled="page <= 1 ? true : null"
+        @click.prevent="go(page - 1)"
+      >
+        &laquo; {{ i19previous }}
+      </a>
+    </li>
+
+    <li
+      class="page-item"
+      :class="page >= totalPages ? 'disabled' : null"
+    >
+      <a
+        href="#"
+        class="page-link"
+        :aria-disabled="page >= totalPages ? true : null"
+        @click.prevent="go(page + 1)"
+      >
+        {{ i19next }} &raquo;
+      </a>
+    </li>
+  </ul>
+
+  <ul class="pagination d-none d-lg-flex">
+    <template v-if="pageNums[0] > 1">
+      <li class="page-item">
+        <a
+          class="page-link"
+          href="#"
+          @click.prevent="go(1)"
+        >
+          1
+        </a>
+      </li>
+      <li class="page-item disabled">
+        <span class="page-link">
+          ...
+        </span>
+      </li>
+    </template>
+
+    <li
+      v-for="n in pageNums"
+      :key="`p${n}`"
+      class="page-item"
+      :class="page === n ? 'active' : null"
+    >
+      <a
+        v-if="page !== n"
+        class="page-link"
+        href="#"
+        @click.prevent="go(n)"
+      >
+        {{ n }}
+      </a>
+      <span
+        v-else
+        class="page-link"
+        aria-current="page"
+      >
+        {{ n }}
+      </span>
+    </li>
+
+    <template v-if="lastPageNum < totalPages">
+      <li class="page-item disabled">
+        <span class="page-link">
+          ...
+        </span>
+      </li>
+      <li class="page-item">
+        <a
+          class="page-link"
+          href="#"
+          @click.prevent="go(totalPages)"
+        >
+          {{ totalPages }}
+        </a>
+      </li>
+    </template>
+  </ul>
+</nav>

package/src/html/APrices.html

@@ -7,21 +7,41 @@
     class="prices__compare"
   >
     <template v-if="isLiteral">
-      <small>{{ i19from }}</small>
+      <small>
+        {{ i19from }}
+      </small>
       <s>{{ formatMoney(comparePrice) }}</s>
-      <small>{{ i19to }}</small>
+      <small>
+        {{ i19to }}
+      </small>
     </template>
     <s v-else>{{ formatMoney(comparePrice) }}</s>
   </span>
 
   <strong class="prices__value">
+    <small v-if="hasVariedPrices">
+      {{ i19asOf }}
+    </small>
     {{ formatMoney(price) }}
   </strong>
 
   <transition-group enter-active-class="animated slideInDown">
+    <div
+      key="points"
+      v-if="earnPointsFactor > 0 && !(pointsMinPrice > price)"
+      class="prices__points"
+    >
+      <i class="i-check-circle"></i>
+      {{ i19youEarn }}
+      <span>
+        +{{ (earnPointsFactor * price).toFixed(1) }}
+      </span>
+      <em>{{ pointsProgramName }}</em>
+    </div>
+
     <div
       key="installments"
-      v-if="installmentsNumber > 1"
+      v-if="installmentsNumber > 1 && installmentValue"
       class="prices__installments"
     >
       <small v-if="isLiteral">
@@ -48,7 +68,7 @@
         <span>
           {{ formatMoney(priceWithDiscount) }}
         </span>
-        <small>
+        <small class="prices__discount-label">
           {{ discountLabel }}
         </small>
       </template>

package/src/html/AShare.html

@@ -0,0 +1,31 @@
+<div>
+  <share-network
+    v-for="({ network, icon, name, color }, i) in shareNetworks"
+    :key="network"
+    tag="button"
+    :class="`btn share share--${network} px-2`"
+    :network="network"
+    :url="localUrl"
+    :title="title"
+    :description="description"
+    :aria-label="`${i19share} ${i19on} ${name}`"
+  >
+    <i
+      v-if="icon"
+      :class="icon"
+      :style="`color: ${color}`"
+    ></i>
+    <strong
+      v-else
+      :style="`color: ${color}`"
+    >
+      {{ name }}
+    </strong>
+
+    <template v-if="i === 0">
+      <span class="ml-1 d-none d-xl-inline-block">
+        {{ `${i19share} ${i19on} ${name}` }}
+      </span>
+    </template>
+  </share-network>
+</div>

package/src/html/AccountAddresses.html

@@ -0,0 +1,90 @@
+<div class="account-addresses">
+  <transition-group enter-active-class="animated fadeIn">
+    <address-form 
+      key="form" 
+      v-if="isForm && canShowForm"
+      :address.sync="localAddress" 
+      :btn-text="formBtnText"
+    />
+
+    <div 
+      key="list" 
+      v-else-if="addresses.length"
+    >
+      <div
+        class="account-addresses__card card"
+        v-for="(address, index) in addresses"
+        :key="address._id"
+      >
+        <div class="card-body">
+          <div class="custom-control custom-radio">
+            <input
+              type="radio"
+              :id="`account-address-${index}`"
+              name="account-address-selected"
+              class="custom-control-input"
+              :checked="address.default"
+              @change="selectAddress(address)"
+            />
+
+            <label 
+              class="custom-control-label" 
+              :for="`account-address-${index}`"
+            >
+              <address class="account-addresses__address">
+                <span class="account-addresses__line">
+                  {{ getLineAddress(address) }}
+                </span>
+                <span 
+                  v-if="address.city" 
+                  class="account-addresses__city"
+                >
+                  {{ `${address.city} / ${address.province_code ||
+                  address.province}` }}
+                </span>
+                <span class="account-addresses__zip">
+                  {{ address.zip }}
+                </span>
+              </address>
+            </label>
+          </div>
+
+          <div class="account-addresses__actions">
+            <button
+              class="btn btn-sm btn-light"
+              type="button"
+              :aria-label="i19edit"
+              @click="editAddressIndex = index"
+            >
+              <i class="i-pencil"></i>
+            </button>
+
+            <button
+              class="btn btn-sm btn-danger"
+              type="button"
+              :aria-label="i19remove"
+              @click="removeAddress(index)"
+            >
+              <i class="i-trash"></i>
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="address.name && !address.name.endsWith('*')"
+          class="account-addresses__recipient card-footer"
+        >
+          {{ address.name }}
+        </div>
+      </div>
+
+      <button
+        class="btn btn-sm btn-outline-secondary"
+        @click="isNewAddress = true"
+        type="button"
+      >
+        <i class="i-plus mr-1"></i>
+        {{ i19newAddress }}
+      </button>
+    </div>
+  </transition-group>
+</div>

package/src/html/AccountForm.html

@@ -0,0 +1,269 @@
+<form
+  class="account-form needs-validation"
+  @submit.prevent="submit"
+  novalidate
+>
+  <div class="form-group">
+    <label for="account-form-email">
+      {{ i19emailAddress }}
+    </label>
+    <input
+      type="email"
+      pattern="\S+@\S+\.\S{2,}"
+      class="form-control"
+      id="account-form-email"
+      v-model.trim="localCustomer.main_email"
+      placeholder="email@mail.com"
+      required
+    >
+  </div>
+
+  <div class="form-row">
+    <div class="form-group col-lg-8">
+      <label for="account-form-name">
+        {{ i19fullName }}
+      </label>
+      <input
+        type="text"
+        pattern="[^\d\s]{2,}[\s][^\d\s]{2,}.*"
+        class="form-control"
+        id="account-form-name"
+        v-model.trim="fullName"
+        required
+      >
+    </div>
+
+    <div
+      class="form-group col-lg-4"
+      v-if="!isShort"
+    >
+      <label for="account-form-nickname">
+        {{ i19nickname }}
+      </label>
+      <input
+        type="text"
+        pattern="[^\d\s]{2,}.*"
+        class="form-control"
+        id="account-form-nickname"
+        v-model.trim="localCustomer.display_name"
+      >
+    </div>
+  </div>
+
+  <div
+    class="form-group"
+    v-if="!isShort"
+  >
+    <div
+      class="custom-control custom-radio custom-control-inline"
+      v-for="(label, value) in i19Gender"
+    >
+      <input
+        type="radio"
+        name="account-form-gender"
+        class="custom-control-input"
+        :id="`account-form-gender-${value}`"
+        :value="value"
+        v-model="localCustomer.gender"
+      >
+      <label
+        class="custom-control-label"
+        :for="`account-form-gender-${value}`"
+      >
+        {{ label }}
+      </label>
+    </div>
+  </div>
+
+  <div class="form-row">
+    <div class="form-group col-lg-4">
+      <label for="account-form-phone">
+        {{ i19contactPhone }}
+      </label>
+      <input-phone
+        id="account-form-phone"
+        v-model="phoneNumber"
+        required
+      />
+    </div>
+
+    <div
+      class="form-group col-lg-4"
+      v-if="!isShort"
+    >
+      <label for="account-form-cell">
+        {{ i19cellphone }}
+      </label>
+      <input-phone
+        id="account-form-cell"
+        v-model="secondPhoneNumber"
+      />
+    </div>
+
+    <div
+      v-show="!isGuestAccess"
+      class="form-group col-lg-4"
+    >
+      <label for="account-form-birth">
+        {{ i19birthdate }}
+      </label>
+      <input-date
+        id="account-form-birth"
+        v-model="birthdate"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div
+      class="custom-control custom-radio custom-control-inline"
+      v-for="(label, value) in {
+        p: i19personalRegistration,
+        j: i19companyRegistration
+      }"
+    >
+      <input
+        type="radio"
+        name="account-form-type"
+        class="custom-control-input"
+        :id="`account-form-type-${value}`"
+        :value="value"
+        v-model="localCustomer.registry_type"
+        required
+      >
+      <label
+        class="custom-control-label"
+        :for="`account-form-type-${value}`"
+      >
+        {{ label }}
+      </label>
+    </div>
+  </div>
+
+  <div class="form-row">
+    <div class="form-group col-lg-6">
+      <label for="account-form-doc">
+        {{ i19docNumber }}
+      </label>
+      <input-doc-number
+        id="account-form-doc"
+        v-model="localCustomer.doc_number"
+        :isCompany="localCustomer.registry_type !== 'p'"
+        required
+      />
+    </div>
+  </div>
+
+  <div
+    v-if="localCustomer.registry_type !== 'p'"
+    class="account-form__legal-person"
+  >
+    <div class="form-row">
+      <div class="form-group col-lg-8">
+        <label for="account-form-name">
+          {{ i19corporateName }}
+        </label>
+        <input
+          type="text"
+          pattern="[\w-]{1,}[\s][\w-]{1,}.*"
+          minlength="4"
+          class="form-control"
+          id="account-form-name"
+          v-model.trim="localCustomer.corporate_name"
+          required
+        >
+      </div>
+    </div>
+
+    <div class="form-row account-form__inscription">
+      <div class="form-group col-lg-6">
+        <label for="account-form-inscription">
+          {{ i19inscriptionNumber }}
+        </label>
+        <input
+          type="text"
+          maxlength="50"
+          class="form-control"
+          id="account-form-inscription"
+          v-model.trim="localCustomer.inscription_number"
+        >
+      </div>
+      <div class="form-group col-lg-5 pb-lg-2 ml-lg-2">
+        <div
+          class="custom-control custom-radio custom-control-inline"
+          v-for="(label, value) in i19InscriptionType"
+        >
+          <input
+            type="radio"
+            name="account-form-gender"
+            class="custom-control-input"
+            :id="`account-form-gender-${value}`"
+            :value="value"
+            v-model="localCustomer.inscription_type"
+          >
+          <label
+            class="custom-control-label"
+            :for="`account-form-gender-${value}`"
+          >
+            {{ label }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="custom-control custom-checkbox">
+      <input
+        type="checkbox"
+        class="custom-control-input"
+        id="account-form-marketing"
+        v-model="localCustomer.accepts_marketing"
+      >
+      <label
+        class="custom-control-label"
+        for="account-form-marketing"
+      >
+        {{ i19emailMarketingOptInMsg }}
+      </label>
+    </div>
+  </div>
+
+  <template v-if="!isGuestAccess">
+    <div
+      v-if="privacyPolicyUrl"
+      class="form-group"
+    >
+      <div class="custom-control custom-checkbox">
+        <input
+          type="checkbox"
+          class="custom-control-input"
+          id="account-form-privacy-policy"
+          v-model="isPrivacyOptIn"
+          required
+        >
+        <label
+          class="custom-control-label"
+          for="account-form-privacy-policy"
+        >
+          {{ i19iReadAndAccept }}
+          {{ i19a }}
+          <a
+            :href="privacyPolicyUrl"
+            target="_blank"
+            v-text="i19privacyPolicy"
+          ></a>.
+        </label>
+      </div>
+    </div>
+  </template>
+
+  <button
+    v-if="hasSubmitBtn"
+    class="btn btn-lg btn-primary"
+    type="submit"
+  >
+    <i class="i-check mr-1"></i>
+    {{ btnLabel }}
+  </button>
+</form>