@lancom/shared 0.0.478 → 0.0.479

package/assets/js/utils/product.js

@@ -110,12 +110,13 @@ function getCategoryPathFromRoute(routeParams) {
 }
 
 export function generateProductsLink($route, data, skipParams = false) {
-  let { type, category, brand, text, sort, minimumQty, productionTime } = data;
+  let { type, category, brand, text, sort, minimumQty, productionTime, clearancePercent } = data;
   category = (category || category === null) ? generateCategoryPath(category) : getCategoryPathFromRoute($route?.params);
   type = (type || type === null) ? type : ($route?.params?.type || $route?.query?.type);
   brand = (brand || brand === null) ? brand : ($route?.params?.brand || $route?.query?.brand);
   minimumQty = (minimumQty || minimumQty === null) ? minimumQty : ($route?.params?.minimumQty || $route?.query?.minimumQty);
   productionTime = (productionTime || productionTime === null) ? productionTime : ($route?.params?.productionTime || $route?.query?.productionTime);
+  clearancePercent = (clearancePercent || clearancePercent === null) ? clearancePercent : ($route?.query?.clearancePercent || null);
   text = (text || text === '') ? text : $route?.query?.text;
   sort = (sort || sort === '') ? sort : $route?.query?.sort;
 
@@ -133,6 +134,9 @@ export function generateProductsLink($route, data, skipParams = false) {
   if (productionTime) {
     params.push(`productionTime=${productionTime}`);
   }
+  if (clearancePercent) {
+    params.push(`clearancePercent=${clearancePercent}`);
+  }
 
   const { page = 1 } = data;
   if (page > 1) {
@@ -140,7 +144,7 @@ export function generateProductsLink($route, data, skipParams = false) {
   }
 
   Object.keys({ ...(($route && $route.query) || {}), ...data }).forEach(key => {
-    const rootKeys = ['text', 'sort', 'page', 'category', 'type', 'brand', 'minimumQty', 'productionTime', 'srsltid'];
+    const rootKeys = ['text', 'sort', 'page', 'category', 'type', 'brand', 'minimumQty', 'productionTime', 'clearancePercent', 'srsltid'];
     if (!rootKeys.includes(key)) {
       let items = ($route && $route.query[key]) ? $route.query[key].split(',') : [];
       items = (data[key] ? (items.includes(data[key]) ? items.filter(c => c !== data[key]) : [...items, data[key]]) : items).join(',');

package/components/order/order_refund_view/order-refund-view.scss

@@ -41,8 +41,8 @@
     flex-direction: column;
     align-items: flex-end;
     &--paid {
-      background-image: url(../../../static/images/paid.svg);
-      background-repeat: no-repeat;    
+      background-image: url(../../../static/images/refunded.svg);
+      background-repeat: no-repeat;
       background-position: 0px 0px;
       background-size: contain;
     }

package/components/order/order_refund_view/order-refund-view.vue

@@ -97,6 +97,11 @@
           <div class="lc_regular16">
             Total inc {{ taxName }}: <b>{{ refund.totalGST | price(order.currency) }}</b>
           </div>
+          <div
+            class="lc_regular16"
+            style="background-color: #000; color: #fff; padding: 4px 8px; display: inline-block;">
+            {{ isPaid ? 'REFUNDED' : 'Pending Refund' }}: <b>{{ refund.totalGST | price(order.currency) }}</b>
+          </div>
         </div>
       </div>
     </div>

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

@@ -97,6 +97,10 @@ export default {
   props: {
     value: {
       type: Object
+    },
+    defaultLocation: {
+      type: String,
+      default: 'London, Greater London'
     }
   },
   data() {
@@ -125,7 +129,7 @@ export default {
       if (locality && state) {
         return `${locality}, ${state}`;
       }
-      return 'London, Greater London';
+      return this.defaultLocation;
     }
   },
   watch: {

package/components/products/products_aside/products-aside.vue

@@ -56,6 +56,14 @@
           :toggleable="toggleable"
           :display-mode="colorDisplayMode" />
       </div>
+      <div
+        v-if="hasClearancePercent"
+        class="ProductsAside__item">
+        <products-clearance-percent
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle"
+          :toggleable="toggleable" />
+      </div>
       <div class="ProductsAside__item">
         <products-attributes
           :has-selected-icon="hasSelectedIcon"
@@ -84,6 +92,7 @@ import ProductsColorGroups from '@lancom/shared/components/products/products_col
 import ProductsProductionTime from '@lancom/shared/components/products/products_production_time/products-production-time';
 import ProductsMinimumQty from '@lancom/shared/components/products/products_minimum_qty/products-minimum-qty';
 import ProductsSelectedFilters from '@lancom/shared/components/products/products_selected_filters/products-selected-filters';
+import ProductsClearancePercent from '@lancom/shared/components/products/products_clearance_percent/products-clearance-percent';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 
 export default {
@@ -97,7 +106,8 @@ export default {
     ProductsColorGroups,
     ProductsProductionTime,
     ProductsMinimumQty,
-    ProductsSelectedFilters
+    ProductsSelectedFilters,
+    ProductsClearancePercent
   },
   props: {
     hasSelectedIcon: {
@@ -148,6 +158,10 @@ export default {
     hasSelectedFilters: {
       type: Boolean,
       default: false
+    },
+    hasClearancePercent: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/components/products/products_clearance_percent/products-clearance-percent.scss

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+.ProductsClearancePercent {
+  &__item {
+    margin: 13px 0;
+    font-size: 15px;
+    font-weight: 400;
+    a {
+      color: $grey_1;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &--active a {
+      color: $green;
+    }
+  }
+}

package/components/products/products_clearance_percent/products-clearance-percent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="clearancePercents.length"
+    class="ProductsClearancePercent__wrapper">
+    <toggle-content label="Clearance" :toggleable="toggleable">
+      <div
+        v-for="percent in clearancePercents"
+        :key="percent"
+        class="ProductsClearancePercent__item"
+        :class="{
+          'ProductsClearancePercent__item--active': isSelected(percent)
+        }">
+        <products-link
+          class="ProductsClearancePercent__more"
+          :clearance-percent="isSelected(percent) ? null : percent">
+          <span>Up to {{ percent }}% off</span>
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="isSelected(percent)"
+            :circle="selectedIconCircle" />
+        </products-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'ProductsClearancePercent',
+  components: {
+    ToggleContent,
+    ProductsLink,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters('products', ['clearancePercents']),
+    selectedClearancePercent() {
+      return this.$route.query.clearancePercent ? +this.$route.query.clearancePercent : null;
+    }
+  },
+  methods: {
+    isSelected(percent) {
+      return this.selectedClearancePercent === percent;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-clearance-percent';
+</style>

package/components/products/products_link/products-link.vue

@@ -36,6 +36,9 @@ export default {
     minimumQty: {
       type: String
     },
+    clearancePercent: {
+      type: Number
+    },
     attributes: {
       type: Object
     },
@@ -57,6 +60,7 @@ export default {
         colorGroups: this.colorGroup,
         productionTime: this.productionTime,
         minimumQty: this.minimumQty,
+        clearancePercent: this.clearancePercent,
         option: this.option,
         text: this.text,
         sort: this.sort,

package/mixins/product-view.js

@@ -282,7 +282,12 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       brandAdditionalProductsRichSnippet = JSON.parse(this.product.brand.additionalProductsRichSnippet);
     } catch (e) {}
 
-    const description = (this.product.gsFeedDescription || this.product.description || '').replace(/<[^>]*>/g, '');
+    const rawDescription = (this.product.gsFeedDescription || this.product.description || '').replace(/<[^>]*>/g, '');
+    const interpolateDescription = (sp) => rawDescription
+      .replace(/\{color\}/g, sp?.color?.name || '')
+      .replace(/\{size\}/g, sp?.size?.shortName || '');
+    const firstSp = this.productDetails?.simpleProducts?.[0];
+    const description = interpolateDescription(firstSp);
     const productSchema = {
       '@context': 'https://schema.org',
       '@type': 'ProductGroup',
@@ -294,6 +299,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
         const maxPrice = this.printsPrice ? spMaxPrice + this.printsPrice : spMaxPrice;
         const availability = sp.quantityStock > 0 ? 'InStock' : 'OutOfStock';
         const name = `${this.product.name} | ${sp.size?.shortName || ''} ${sp.color?.name || ''}`;
+        const variantDescription = interpolateDescription(sp);
 
         const offer = {
           '@type': 'Offer',
@@ -341,7 +347,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
             ...galleryImages.map(i => i.extralarge || i.large).filter(i => !!i && i !== image)
           ],
           "name": name,
-          "description": description,
+          "description": variantDescription,
           "color": sp.color?.name,
           "size": sp.size?.shortName,
           "offers": offer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.478",
+  "version": "0.0.479",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/static/images/refunded.svg

@@ -0,0 +1,14 @@
+<svg width="220" height="78" viewBox="0 0 220 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="5.44" y="18.95" width="205" height="53.32" transform="rotate(-4.06 5.44 18.95)" stroke="#FB3D01" stroke-width="4.19"/>
+  <rect x="0.64" y="14.79" width="214" height="62.31" transform="rotate(-4.06 0.64 14.79)" stroke="#FB3D01" stroke-width="1.2"/>
+  <text
+    x="110"
+    y="52"
+    fill="#FB3D01"
+    font-family="Arial, Helvetica, sans-serif"
+    font-size="28"
+    font-weight="900"
+    letter-spacing="5"
+    text-anchor="middle"
+    transform="rotate(-4.06 110 39)">REFUNDED</text>
+</svg>

package/store/products.js

@@ -16,6 +16,7 @@ export const state = () => ({
   childrenCategories: [],
   tags: [],
   attributes: [],
+  clearancePercents: [],
   loadError: null,
   placeholder: false
 });
@@ -34,6 +35,7 @@ export const getters = {
   childrenCategories: ({ childrenCategories }) => childrenCategories,
   tags: ({ tags }) => tags || [],
   attributes: ({ attributes }) => attributes || [],
+  clearancePercents: ({ clearancePercents }) => clearancePercents || [],
   page: ({ page }) => page,
   count: ({ count }) => count,
   minPrice: ({ minPrice }) => minPrice,
@@ -57,7 +59,7 @@ export const actions = {
       commit('setLoadError', null);
       const {
         products, count, page, perPage, productTypes, colors, colorGroups, brands, tags, attributes,
-        categories, minPrice, maxPrice, category
+        categories, minPrice, maxPrice, category, clearancePercents
       } = await api.fetchProducts(shop, params);
       commit('setCategory', category);
       commit('setProducts', products);
@@ -73,6 +75,7 @@ export const actions = {
       commit('setAttributes', attributes);
       commit('setMinPrice', minPrice);
       commit('setMaxPrice', maxPrice);
+      commit('setClearancePercents', clearancePercents || []);
 
       return { products };
     } catch (e) {
@@ -148,6 +151,9 @@ export const mutations = {
   setAttributes(state, attributes) {
     state.attributes = attributes;
   },
+  setClearancePercents(state, clearancePercents) {
+    state.clearancePercents = clearancePercents;
+  },
   clearProducts(state) {
     state.products = [];
   },