@lancom/shared 0.0.354 → 0.0.356

package/assets/js/utils/shop.js

@@ -4,6 +4,10 @@ export function getShopCountrySettings(shop, country) {
 
   return {
     ...shop.settings,
+    contacts: {
+      ...(shop.settings.app || {}),
+      ...settingsValues(countrySetting?.settings?.app)
+    },
     contacts: {
       ...shop.settings.contacts,
       ...settingsValues(countrySetting?.settings?.contacts)

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -11,23 +11,31 @@
         <div class="form-row OrderPaymentInformation__form">
           <label
             class="form-label OrderPaymentInformation__checkbox"
-            @click="updatePaymentType(false)">
-            <checked-icon :checked="!isDepositPayment" />
+            @click="updatePaymentType('card')">
+            <checked-icon :checked="paymentMethod === 'card'" />
             <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
               Credit Card
             </span>
           </label>
           <label
             class="form-label OrderPaymentInformation__checkbox"
-            @click="updatePaymentType(true)">
-            <checked-icon :checked="isDepositPayment" />
+            @click="updatePaymentType('deposit')">
+            <checked-icon :checked="paymentMethod === 'deposit'" />
             <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
               Bank Transfer
             </span>
           </label>
+          <label
+            class="form-label OrderPaymentInformation__checkbox"
+            @click="updatePaymentType('google')">
+            <checked-icon :checked="paymentMethod === 'google'" />
+            <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+              Google Pay
+            </span>
+          </label>
         </div>
         <div
-          v-if="isDepositPayment"
+          v-if="paymentMethod === 'deposit'"
           class="OrderPaymentInformation__direct-deposit">
           <div
             class="OrderPaymentInformation__direct-deposit-info"
@@ -60,6 +68,8 @@
           <payment-card
             v-if="orderData"
             ref="paymentCart"
+            :key="paymentMethod"
+            :google="paymentMethod === 'google'"
             :amount="cartPricing.totalPrice"
             :order="orderData"
             @inited="initedCard">
@@ -108,6 +118,7 @@ export default {
       creating: false,
       submitting: false,
       loadingCard: true,
+      paymentMethod: this.order.paymentMethod || ORDER_PAYMENT_METHOD.CARD,
       isDepositPayment: this.order.paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT
     };
   },
@@ -162,8 +173,9 @@ export default {
         }
       }
     },
-    updatePaymentType(isDeposit) {
-      this.isDepositPayment = isDeposit;
+    updatePaymentType(paymentMethod) {
+      this.isDepositPayment = paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT;
+      this.paymentMethod = paymentMethod;
       this.errorMessage = null;
     },
     depositInfo(info) {

package/components/checkout/order/order-success/order-success.vue

@@ -13,7 +13,8 @@
         Order {{ orderData.code }}
       </div>
       <div class="OrderSuccess__card-info">
-        Thanks for your order! You will receive an order confirmation email shortly. 
+        Thanks for your order! Your order has been successfully processed using <b>{{ orderData.googleCharge ? 'Google Pay' : orderData.paymentMethod }} {{ cardInfo ? `(${cardInfo})` : '' }}</b>. You will receive an order confirmation email shortly.
+        <b></b>
       </div>
       <div>
         <btn
@@ -31,7 +32,11 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'OrderSuccess',
   computed: {
-    ...mapGetters('order', ['orderData'])
+    ...mapGetters('order', ['orderData']),
+    cardInfo() {
+      const { card } = this.orderData.charge?.payment_method_details || this.orderData.charge || {};
+      return card ? `${card.brand || card.scheme} ${card.display_number || `XXXX-XXXX-XXXX-${card.last4 || 'XXXX'}`}` : null;
+    }
   }
 };
 </script>

package/components/common/payment/payment_card/googlepay/googlepay.scss

@@ -0,0 +1,73 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.example {
+  margin: 5px;
+  display: flex;
+  flex-direction: row;
+}
+
+.example > .title {
+  width: 250px;
+  align-items: center;
+  display: inherit;
+}
+
+.example > .demo {
+  flex: 1 0 0;
+}
+
+.example > .demo > * {
+  margin: 1px;
+}
+
+.Payment {
+  &__wrapper {
+    .pin-form-field {
+      // @extend .form-field;
+      // @extend .labelless;
+      border-radius: 0px;
+      background-color: #F4F4F4;
+    }
+  }
+  &__field-container {
+    width: 100%;
+  }
+  &__message {
+    padding: 50px 140px;
+  }
+  &__content {
+    position: relative;
+    min-height: 100px;
+  }
+  &__fileds-spinner {
+    background-color: white;
+  }
+  &__terms {
+    margin-top: 20px;
+  }
+  &__label-with-checkbox {
+    display: flex !important;
+    align-items: center;
+    margin-bottom: 3px !important;
+    a {
+      color: $green;
+    }
+  }
+}
+
+.form-row--cols {
+  @media (max-width: $bp-extra-small-max) {
+    flex-direction: column;
+  }
+  .col-half {
+    @media (max-width: $bp-extra-small-max) {
+      flex-basis: 100%;
+      width: 100%;
+      margin-left: 0 !important;
+      &:nth-child(2) {
+        margin-top: 20px;
+      }
+    }
+  }
+}

package/components/common/payment/payment_card/googlepay/googlepay.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="Payment__wrapper">
+    <div v-if="(hasSpinner && processing) || loading">
+      <spinner />
+    </div>
+    <div
+      :style="{
+        opacity: loading ? 0 : 1
+      }">
+      <div
+        v-if="amount"
+        class="form-row">
+        <label
+          for="payment-amount"
+          class="form-label">
+          Amount to Pay
+        </label>
+        <input
+          id="payment-amount"
+          :value="`${amount} AUD`"
+          name="payment-amount"
+          placeholder="payment-amount"
+          disabled
+          type="text"
+          class="form-field labelless" />
+      </div>
+      <div class="examples">
+        <div>
+          <div class="example">
+            <div class="demo">
+              <google-pay-button
+                v-if="!loading"
+                environment="TEST"
+                button-type="plain"
+                button-color="black"
+                v-bind:paymentRequest.prop="{
+                  apiVersion: 2,
+                  apiVersionMinor: 0,
+                  allowedPaymentMethods: [
+                    {
+                      type: 'CARD',
+                      parameters: {
+                        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+                        allowedCardNetworks: ['MASTERCARD', 'VISA', 'AMEX'],
+                      },
+                      tokenizationSpecification: {
+                        type: 'PAYMENT_GATEWAY',
+                        parameters: {
+                          gateway: 'pinpayments',
+                          gatewayMerchantId: app.PAYMENT_GOOGLE_GATEWAY,
+                        }
+                      },
+                    },
+                  ],
+                  merchantInfo: {
+                    merchantId: app.PAYMENT_GOOGLE_MERCHANT_ID,
+                    merchantName: app.PAYMENT_GOOGLE_MERCHANT_NAME,
+                  },
+                  transactionInfo: {
+                    totalPriceStatus: 'FINAL',
+                    totalPriceLabel: 'Total',
+                    totalPrice: amountString,
+                    currencyCode: currencyCode,
+                    countryCode: countryCode
+                  },
+                }"
+                @loadpaymentdata="onLoadPaymentData"
+                @error="onError" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot v-if="!loading" name="controls" v-bind="{ processing }"></slot>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import '@google-pay/button-element';
+
+let timer = null;
+let googlepayStartLoaded = false;
+
+export default {
+  name: 'Googlepay',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    amount: {
+      type: Number
+    },
+    hasSpinner: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      paymentData: null,
+      paymentError: null,
+      processing: false,
+      loading: false,
+      fields: null
+    };
+  },
+  async mounted() {
+    this.loading = true;
+    await this.loadGooglepay();
+    this.loading = false;
+  },
+  destroyed() {
+    clearInterval(timer);
+  },
+  computed: {
+    ...mapGetters(['country', 'currency', 'app']),
+    amountString() {
+      return `${this.amount.toFixed(2)}`;
+    },
+    currencyCode() {
+      return this.currency?.isoCode || 'AUSD';
+    },
+    countryCode() {
+      return this.country?.isoCode || 'AU';
+    }
+  },
+  methods: {
+    onLoadPaymentData(event) {
+      const token = JSON.parse(event.detail.paymentMethodData.tokenizationData.token);
+      this.paymentData = { google: true, token }
+    },
+    onError(event) {
+      this.paymentError = event.error;
+      console.log('this.paymentError: ', this.paymentError);
+    },
+    tokenize() {
+      this.processing = true;
+      return new Promise((resolve, reject) => {
+        if (this.paymentError || !this.paymentData) {
+          reject(!this.paymentData ? 'Payment Failed. Need to choose card' : 'Payment Failed')
+        } else {
+          resolve(this.paymentData);
+        }
+        this.processing = false;
+      });
+    },
+    async loadGooglepay() {
+      if (process.browser) {
+        await (new Promise((resolve, reject) => {
+          if (!googlepayStartLoaded) {
+            googlepayStartLoaded = true;
+            resolve();
+            googlepayStartLoaded = false;
+            // let domElement = document.createElement('script');
+            // domElement.type = "text/javascript";
+            // domElement.setAttribute('src', 'https://cdn.pinpayments.com/pin.hosted_fields.v1.js');
+            // domElement.onload = () => {
+            //   resolve();
+            // };
+            // domElement.onerror = () => {
+            //   setTimeout(() => this.loadPinpayments(), 1000);
+            // };
+            // document.body.appendChild(domElement);
+          } else {
+            let repeated = 0;
+            timer = setInterval(() => {
+              if (!googlepayStartLoaded || repeated++ > 40) {
+                clearInterval(timer);
+                resolve();
+              }
+            }, 500);
+          }
+        }));
+      }
+    }
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'googlepay.scss';
+</style>

package/components/common/payment/payment_card/payment-card.vue

@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'PaymentCard',
   components: {
+    Googlepay: () => import('./googlepay/googlepay'),
     Pinpayment: () => import('./pinpayment/pinpayment'),
     Stripe: () => import('./stripe_card/stripe-card'),
     StripePayment: () => import('./stripe_payment/stripe-payment')
@@ -28,11 +29,17 @@ export default {
     },
     amount: {
       type: Number
+    },
+    google: {
+      type: Boolean
     }
   },
   computed: {
     ...mapGetters(['payment']),
     cardComponent() {
+      if (this.google) {
+        return 'googlepay';
+      }
       return this.payment?.type || 'stripe-payment';
     }
   },

package/components/common/spinner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Spinner">
+  <div class="Spinner" :class="{ small }">
     <div class="Spinner__container">
       <div
         v-for="petal in 12"
@@ -17,16 +17,23 @@ export default {
   props: {
     background: {
       type: String
+    },
+    small: {
+      type: Boolean,
+      default: false
     }
   }
 };
 </script>
 
 <style lang="scss">
-$size: 26px;
+$spinnerSize: 26px;
 $delay_step: 1/12;
 
 .Spinner {
+  &.small {
+    $spinnerSize: 14px !global;  
+  }
   @keyframes lds-spinner {
     0% {
       opacity: 1;
@@ -45,22 +52,22 @@ $delay_step: 1/12;
   }
 
   &__container {
-    width: $size;
-    height: $size;
+    width: $spinnerSize;
+    height: $spinnerSize;
     margin: 0 auto;
     position: relative;
-    transform: translate(-$size, -$size) scale(1) translate($size, $size);
+    transform: translate(-$spinnerSize, -$spinnerSize) scale(1) translate($spinnerSize, $spinnerSize);
   }
 
   &__petal{
-    left: calc(#{($size / 16) * 7});
+    left: calc(#{($spinnerSize / 16) * 7});
     position: absolute;
     animation: lds-spinner linear 1s infinite;
     background: #55A8FF;
-    width: calc(#{$size} / 8);
-    height: calc(#{$size} / 4);
+    width: calc(#{$spinnerSize} / 8);
+    height: calc(#{$spinnerSize} / 4);
     border-radius: 40%;
-    transform-origin: calc(#{$size} / 16) calc(#{$size} / 2);
+    transform-origin: calc(#{$spinnerSize} / 16) calc(#{$spinnerSize} / 2);
 
     @for $i from 1 through 12 {
       &:nth-child(#{$i}) {

package/components/editor/editor_product_details/editor-product-details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="EditorProductDetails__wrapper">
     <h3 class="lc_h3 lc_black EditorProductDetails__name">
-      {{ product.name }}
+      {{ fullProductName }}
     </h3>
     <div class="EditorProductDetails__header">
       <div
@@ -208,7 +208,9 @@ export default {
       'defaultSimpleProduct',
       'selectedPrintType',
       'isPrintPricing',
-      'printsPrice'
+      'printsPrice',
+      'availableSizes',
+      'availableColors'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
@@ -218,6 +220,12 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    fullProductName() {
+      const name = this.product.name;
+      const color = this.availableColors?.find(c => c.alias === this.$route.query?.color);
+      const size = this.availableSizes?.find(c => c.shortName === this.$route.query?.size);
+      return `${name}${(color || size) ? ` | ${[color?.name, size?.shortName].filter(i => !!i).join(', ') || ''}` : ''}`;
+    },
     hasImages() {
       return this.modelImages.length > 0;
     },

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.scss

@@ -20,6 +20,8 @@
     font-size: 14px;
     cursor: pointer;
     margin-right: 5px;
+    display: flex;
+    align-items: center;
     &--active {
       background: rgb(196, 226, 236);
     }

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -28,7 +28,11 @@
           'EditorWorkspaceSide__toggle-wireframe--active': visibleOnpress
         }"
         @mousedown.stop.prevent="toggleOnpressImage(true)">
-        {{ visibleOnpress ? 'Hide On Press' : 'Show On Press' }}
+        <spinner
+          v-if="visibleOnpress && !backgroundImageLoaded"
+          :small="true"
+          style="margin-right: 10px;" />
+        {{ visibleOnpress ? 'Real product photo' : 'Press for real product photo' }}
       </div>
     </div>
     <div

package/feeds/google-shopping.js

@@ -59,6 +59,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 .replace(/·/, '·');
                 
               let link = `https://${config.HOST_NAME}${generateProductLink(product, sp.color, isEditor)}`;
+              link = link.includes('?') ? `${link}&size=${sp.size?.shortName}` : `${link}?size=${sp.size?.shortName}`
               link = link.includes('?') ? `${link}&price=IT` : `${link}?price=IT`
               if (sp.multipackQty) {
                 link = link.includes('?') ? `${link}&multipack=${sp.SKU}` : `${link}?multipack=${sp.SKU}`;

package/layouts/products.vue

@@ -285,7 +285,7 @@
         ]
       };
   
-      return [productsSchema, breadcrumbSchema];
+      return [productsSchema, breadcrumbSchema, this.$store.state.shop?.schema].filter(s => !!s);
     },
     methods: {
       ...mapActions([

package/mixins/payment.js

@@ -38,7 +38,7 @@ export default {
     ...mapMutations('layers', ['resetLayers']),
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
-      const defaultMessage = 'Payment error';
+      const defaultMessage = typeof err === 'string' ? err : 'Payment error';
       this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || err.message || defaultMessage;
     },
     async proceedPayment(card) {

package/mixins/product-view.js

@@ -4,7 +4,7 @@ import { fitLayerToEditorSize } from '@lancom/shared/assets/js/utils/layers';
 import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
 import { tax, staticLink, inRange } from '@lancom/shared/assets/js/utils/filters';
-import { getProductLargeCover } from '@lancom/shared/assets/js/utils/colors';
+import { getProductLargeCover, isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
 import metaInfo from '@lancom/shared/mixins/meta-info';
 import { STORE_CODES } from '@/constants/store';
 import { generateProductLink, generateProductsLink } from '@lancom/shared/assets/js/utils/product';
@@ -255,19 +255,20 @@ 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 productSchema = {
       '@context': 'https://schema.org',
-      '@type': 'Product',
-      description: (this.product.gsFeedDescription || this.product.description || '').replace(/<[^>]*>/g, ''),
+      '@type': 'ProductGroup',
+      description: description,
       name,
-      offers: this.productDetails?.simpleProducts.map(sp => {
+      hasVariant: this.productDetails?.simpleProducts.map(sp => {
         const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);
         const maxPrice = this.printsPrice ? spMaxPrice + this.printsPrice : spMaxPrice;
         const availability = sp.quantityStock > 0 ? 'InStock' : 'OutOfStock';
     
         const offer = {
           '@type': 'Offer',
-          name: `${sp.size?.name || ''} / ${sp.color?.name || ''}`,
+          name: `${sp.size?.shortName || ''} / ${sp.color?.name || ''}`,
           url,
           availability: `https://schema.org/${availability}`,
           price: +tax(maxPrice, this.gstTax).toFixed(2),
@@ -295,7 +296,22 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
           };
         }
 
-        return offer;
+        const galleryImages = this.product.images?.filter(i => !(i.types || []).includes('designer') && i.color === sp.color?._id) || [];
+        const image = getProductLargeCover(this.product, 'front', sp.color);
+        return {
+          "@type": "Product",
+          "sku": sp.SKU,
+          "gtin13": sp.gtin,
+          "image": [
+            image,
+            ...galleryImages.map(i => i.large).filter(i => !!i && i !== image)
+          ],
+          "name": `${this.product.name} | ${sp.size?.shortName || ''} ${sp.color?.name || ''}`,
+          "description": description,
+          "color": sp.color?.name,
+          "size": sp.size?.shortName,
+          "offers": offer
+        };
       })
     };
 
@@ -308,7 +324,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     }
 
     if (SKU) {
-      productSchema.sku = SKU;
+      productSchema.productGroupID = SKU;
       // schema.gtin = SKU;
     }
 
@@ -384,7 +400,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     return [
       productSchema,
       breadcrumbSchema,
-      mainEntity.length > 0 ? faqSchema : null
+      mainEntity.length > 0 ? faqSchema : null,
+      this.$store.state.shop?.shippingPolicySchema,
+      this.$store.state.shop?.returnPolicySchema
     ].filter(s => !!s);
   }
 });

package/package.json

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

package/store/index.js

@@ -13,6 +13,7 @@ export const state = () => ({
   payment: null,
   shop: {},
   menus: [],
+  app: {},
   contacts: {},
   orderInfo: {},
   pricing: {},
@@ -23,6 +24,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  app: ({ app }) => app,
   stockCountry: ({ stockCountry }) => stockCountry,
   country: ({ country }) => country,
   countries: ({ shop }) => (shop.countries || []).map(({ country }) => country).filter(c => !!c),
@@ -147,7 +149,8 @@ export const mutations = {
   setCurrency(state, currency) {
     state.currency = currency;
   },
-  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo, pricing }) {
+  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo, pricing, app }) {
+    state.app = app;
     state.contacts = contacts;
     state.orderInfo = order;
     state.notificationBar = notificationBar;