@lancom/shared 0.0.430 → 0.0.432

package/components/product/add-to-cart-btn.vue

@@ -1,10 +1,14 @@
 <template>
   <btn
-    btn-class="green"
+    :btn-class="btnClass"
     btn-label="Add to cart"
     :btn-disabled="addToCartDisabled"
     :btn-processing="addingToCart"
-    @onclick="proceedToCard" />
+    @onclick="proceedToCard">
+    <template slot="icon-before">
+      <slot name="icon-before"></slot>
+    </template>
+  </btn>
 </template>
 
 <script>
@@ -12,7 +16,13 @@ import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
 export default {
   name: 'AddToCartBtn',
-  mixins: [addToCartMixin]
+  mixins: [addToCartMixin],
+  props: {
+    btnClass: {
+      type: String,
+      default: 'green'
+    }
+  }
 };
 </script>
 

package/components/product/editor_pricing/editor-pricing.vue

@@ -89,9 +89,11 @@
             @click="toggleDetails">
             {{ showDetails ? 'Hide' : 'Show' }} detail
           </div>
-          <add-to-cart-btn
-            v-if="hasCartBtn"
-            class="EditorPricing__add-to-cart-button" />
+          <slot>
+            <add-to-cart-btn
+              v-if="hasCartBtn"
+              class="EditorPricing__add-to-cart-button" />
+          </slot>
         </div>
       </div>
     </div>

package/components/product/other_products/other-products.scss

@@ -0,0 +1,34 @@
+.OtherProducts {
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 4px 0 16px;
+    gap: 16px;
+  }
+
+  &__title {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  &__all {
+    color: #194BB3;
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  &__list {
+    display: grid;
+    gap: 14px;
+  }
+}

package/components/product/other_products/other-products.vue

@@ -0,0 +1,76 @@
+<template>
+  <section class="OtherProducts__wrapper">
+    <div class="OtherProducts__head">
+      <h2 class="OtherProducts__title">
+        Other Products
+      </h2>
+      <a href="#" class="OtherProducts__all">
+        View all products in this category
+      </a>
+    </div>
+    <div class="OtherProducts__list">
+      <other-product
+        v-for="product in products"
+        :key="product._id"
+        :product="product"
+        class="OtherProducts__product" />
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import OtherProduct from './other_product/other-product';
+
+export default {
+  name: 'OtherProducts',
+  components: {
+    OtherProduct
+  },
+  props: {
+    additionalCondition: {
+      type: Object,
+      default: () => ({})
+    },
+    limit: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {
+      products: [],
+      loading: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency'])
+  },
+  mounted() {
+    this.loadProducts();
+  },
+  methods: {
+    async loadProducts() {
+      try {
+        this.loading = true;
+        const condition = {
+          ...this.additionalCondition,
+          country: this.country?._id,
+          currency: this.currency?._id,
+          limit: this.limit
+        };
+        this.products = (await api.fetchProducts(this.shop._id, condition)).products;
+        console.log('this.products: ', this.products);
+      } catch (e) {
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'other-products';
+</style>

package/components/product/other_products/other_product/other-product.scss

@@ -0,0 +1,80 @@
+.OtherProduct {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    background: #ffffff;
+    border-radius: 14px;
+    border: 1px solid #E5E5E5;
+    background: #FFF;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
+    padding: 16px 18px;
+  }
+  &__img {
+    width: 80px;
+    height: 80px;
+    object-fit: contain;
+    pointer-events: none;
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    opacity: 0.8;
+  }
+
+  &__body {
+    min-width: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__title {
+    color: #0A0A0A;
+    font-size: 19px;
+    font-style: normal;
+    font-weight:500;
+    line-height: 16px;
+    text-decoration: none;
+  }
+
+  &__pill {
+    padding: 8px 14px;
+    background: #e9efff;
+    color: #2946d5;
+    font-weight: 700;
+    border-radius: 999px;
+    font-size: 16px;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  &__rating-val {
+    color: #6b7280;
+    font-weight: 600;
+  }
+
+  &__price {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    margin-top: 10px;
+    &-old {
+      color: #525252;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 16px;
+      text-decoration-line: line-through;
+    }
+    &-current {
+      color: #0A0A0A;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+    }
+  }
+}

package/components/product/other_products/other_product/other-product.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="OtherProduct__wrapper">
+    <a
+      v-if="productСover"
+      :href="productLink">
+      <img
+        :src="productСover"
+        :alt="product.name"
+        class="OtherProduct__img" />
+    </a>
+    <div class="OtherProduct__body">
+      <div class="OtherProduct__row">
+        <a
+          :href="productLink"
+          class="OtherProduct__title">
+          {{ product.name }}
+        </a>
+      </div>
+      <div
+        v-if="product.isClearance"
+        class="OtherProduct__price">
+        <span v-if="product.oldPrice" class="OtherProduct__price-old">
+          {{ minPrice | price }}
+        </span>
+        <span class="OtherProduct__price-current">
+          {{ product.minPrice | price }}
+        </span>
+      </div>
+      <div
+        v-else
+        class="OtherProduct__price">
+        <span class="OtherProduct__price-current">
+          {{ minPrice | price }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+import { mapGetters } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OtherProduct',
+  filters: {
+    price
+  },
+  mixins: [productPreview],
+  computed: {
+    ...mapGetters(['currency'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'other-product';
+</style>

package/components/product/product.vue

@@ -32,12 +32,6 @@
         <section class="Product__section">
           <wizard-editor />
         </section>
-        <!-- <section class="Product__section">
-          <product-colors-selector v-if="productDetails" />
-        </section> -->
-        <!-- <section class="Product__section">
-          <product-tier-prices :product="product" />
-        </section> -->
         <section class="Product__section">
           <product-fabric-and-size-info :product="product" />
         </section>
@@ -59,23 +53,16 @@ import RelatedProducts from '@lancom/shared/components/product/related_products/
 import Gallery from '@lancom/shared/components/product/gallery/gallery';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
-import ProductColorsSelector from './product_colors_selector/product-colors-selector';
-import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
 import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/product-fabric-and-size-info';
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
 import WizardEditor from './wizard-editor/wizard-editor.vue';
 
-    
-// import ProductLabelsCustomization from './layouts/product_labels_customization/product-labels-customization';
-
 export default {
   name: 'Product',
   components: {
     ProductMainInfo,
-    ProductColorsSelector,
-    ProductTierPrices,
     ProductFabricAndSizeInfo,
     ProductPackaging,
     ProductModelMeasurements,
@@ -83,7 +70,6 @@ export default {
     RelatedProducts,
     Gallery,
     WizardEditor
-    // ProductLabelsCustomization
   },
   computed: {
     ...mapGetters('product', [

package/components/product/product_check_delivery/product-check-delivery.scss

@@ -0,0 +1,31 @@
+.ProductCheckDelivery {
+  &__title {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+  &__detected {
+    border-radius: 4px;
+    background: rgba(245, 245, 245, 0.50);
+    padding: 8px;
+    margin-top: 18px;
+    &-label {
+      color: #737373;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+    }
+    &-position {
+      color: #0A0A0A;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 16px;
+      margin-top: 8px;
+    }
+  }
+
+  &__postcode {
+    margin-top: 18px;
+  }
+}

package/components/product/product_check_delivery/product-check-delivery.vue

@@ -0,0 +1,73 @@
+<template>
+  <section class="ProductCheckDelivery__wrapper">
+    <div class="ProductCheckDelivery__title">
+      Delivery ETA
+    </div>
+    <div class="ProductCheckDelivery__detected">
+      <div class="ProductCheckDelivery__detected-label">
+        <i class="icon-palette"></i>
+        <span>Detected:</span>
+      </div>
+      <div class="ProductCheckDelivery__detected-position">
+        London, Greater London
+      </div>
+    </div>
+    <div class="ProductCheckDelivery__postcode">
+      <postcode-select v-model="postcode" />
+    </div>
+    <!-- <div class="ProductCheckDelivery__estimates">
+      <div class="ProductCheckDelivery__estimate">
+        <div class="ProductCheckDelivery__estimate-icon">
+          <i class="icon-map"></i>
+        </div>
+        <div class="ProductCheckDelivery__estimate-label">
+          Next day collection
+        </div>
+        <div class="ProductCheckDelivery__estimate-info">
+          - Order before 2pm
+        </div>
+        <div class="ProductCheckDelivery__estimate-price">
+          Free
+        </div>
+      </div>
+      <div class="ProductCheckDelivery__estimate">
+        <div class="ProductCheckDelivery__estimate-icon">
+          <i class="icon-local-shipping"></i>
+        </div>
+        <div class="ProductCheckDelivery__estimate-label">
+          Home delivery
+        </div>
+        <div class="ProductCheckDelivery__estimate-info">
+          - Next working day
+        </div>
+        <div class="ProductCheckDelivery__estimate-price">
+          £3.95
+        </div>
+      </div>
+    </div> -->
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+
+export default {
+  name: 'ProductCheckDelivery',
+  components: {
+    PostcodeSelect
+  },
+  data() {
+    return {
+      postcode: null
+    };
+  },
+  computed: {
+    ...mapGetters('product', ['product'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-check-delivery';
+</style>

package/components/product/product_colors_selector/product-colors-selector.scss

@@ -4,6 +4,13 @@
   &__wrapper {
     margin-top: 35px;
   }
+  &__label {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px;
+  }
   &__controls {
     display: flex;
     @media (max-width: $bp-extra-small-max) {
@@ -76,9 +83,14 @@
     position: relative;
     bottom: -13px;
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     font-size: 13px;
     align-items: center;
+    &-stock {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
   }
 }
 
@@ -122,4 +134,4 @@
   .multiselect__input {
     font-weight: bold;
   }
-}
+}

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -1,8 +1,12 @@
 <template>
   <product-colors-selector class="ProductColorsSelector__wrapper">
     <div>
+      <div class="ProductColorsSelector__label">
+        Choose a colour to see stock availability
+      </div>
       <div class="ProductColorsSelector__controls">
         <div
+          v-if="hasColorsDropdown"
           class="ProductColorsSelector__head"
           :class="{
             'ProductColorsSelector__head--opened': opened
@@ -75,9 +79,10 @@
           </div>
           <div class="ProductColorsSelector__countries">
             <div>
-              Stock by countries:
+              Stock Availability
             </div>
-            <div>
+            <div class="ProductColorsSelector__countries-stock">
+              <span>Stock by countries:</span>
               <client-settings-stock-country />
             </div>
           </div>
@@ -123,6 +128,10 @@ export default {
     hasToggleGst: {
       type: Boolean,
       default: true
+    },
+    hasColorsDropdown: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/product/product_pricing_tiers/product-pricing-tiers.scss

@@ -0,0 +1,53 @@
+.ProductPricingTiers {
+  &__title {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+  &__tiers {
+    display: flex;
+    gap: 6px;
+    margin-top: 16px;
+  }
+  &__tier {
+    padding: 4px;
+    width: 152px;
+    border-radius: 12px;
+    border: 1px solid #E5E5E5;
+    background: #FFF;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+    &-single-price {
+      padding: 12px 0;
+      border-radius: 8px;
+      background: #EFEFEF;
+      text-align: center;
+      color: #525252;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 28px;
+      text-align: center;
+      span {
+        color: #194BB3;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 28px;
+      }
+    }
+    &-price {
+      color: #000;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 20px;
+      margin-top: 6px;
+      padding: 4px;
+      text-align: center;
+      span {
+        color: #194BB3;
+        font-size: 12px;
+        font-weight: 700;
+        line-height: 20px;
+      }
+    }
+  }
+}

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="ProductPricingTiers__wrapper">
+    <h3 class="ProductPricingTiers__title">
+      Pricing Tiers
+    </h3>
+    <div class="ProductPricingTiers__tiers">
+      <div
+        v-for="(tier, index) in product.pricing"
+        :key="index"
+        class="ProductPricingTiers__tier">
+        <div class="ProductPricingTiers__tier-single-price">
+          <span>{{ (tier.price / tier.min) | priceWithTax(pricingSettings, currency) }}</span> each
+        </div>
+        <div class="ProductPricingTiers__tier-price">
+          Buy {{ tier.min }} for <span>{{ tier.price | priceWithTax(pricingSettings, currency) }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductPricingTiers',
+  filters: {
+    priceWithTax
+  },
+  computed: {
+    ...mapGetters('product', ['product']),
+    ...mapGetters(['pricingSettings'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-pricing-tiers';
+</style>

package/components/product/product_reviews/product-reviews.vue

@@ -41,6 +41,12 @@ export default {
     ProductReview
   },
   mixins: [],
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     const reviews = this.product.reviews || [];
     const [, mainReviewId] = (this.$route.hash || '').match(/review-([a-z0-9]+)/i) || [];
@@ -56,12 +62,6 @@ export default {
       ].filter(review => !!review)
     };
   },
-  props: {
-    product: {
-      type: Object,
-      required: true
-    }
-  },
   computed: {
     currentReview() {
       return this.reviews[this.activeIndex];

package/components/product/product_stock_status/product-stock-status.scss

@@ -0,0 +1,28 @@
+.ProductStockStatus {
+  &__wrapper {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 4px 12px;
+    text-align: center;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    &--green {
+      background-color: #DCFCE7;
+      color: #155724;
+      border: 1px solid #c3e6cb;
+    }
+    &--orange {
+      background-color: #fff3cd;
+      color: #856404;
+      border: 1px solid #ffeaa7;
+    }
+    &--red {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+    }
+  }
+}