@lancom/shared 0.0.280 → 0.0.281

package/components/common/postcode_select/postcode-select.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="PostcodeSelect form-row">
+  <div class="PostcodeSelect">
     <validation-provider
       v-slot="{ errors }"
       tag="div"
       :rules="required ? 'required' : ''"
       name="Postcode"
-      class="form-group form-row">
+      class="form-group">
       <label
         v-if="labelless"
         class="form-label"
@@ -88,7 +88,7 @@ export default {
   },
   filters: { highlight },
   props: {
-    country: {
+    codeCountry: {
       type: Object
     },
     value: {
@@ -130,12 +130,10 @@ export default {
   computed: {
     model: {
       get() {
-        return this.selected?.value ? this.selected : null;
+        return this.selected?._id ? this.selected : null;
       },
       set(option) {
-        this.selected = option;
-        this.$emit('input', option.value);
-        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
+        this.updatePostcode(option);
       }
     }
   },
@@ -150,20 +148,32 @@ export default {
     async handleSearch(query) {
       if (query.length) {
         this.isLoading = true;
-        const country = this.country ? (this.country.isoCode === 'GB' ? 'England' : (this.country.name || this.country)) : 'Australia';
-        this.suburbs = await api.fetchSuburbs({ query, country });
+        const country = this.codeCountry || this.country;
+        const countryName = country ? (country.isoCode === 'GB' ? 'England' : (country.name || country)) : 'Australia';
+        this.suburbs = await api.fetchSuburbs({ query, country: countryName });
         this.options = this.suburbs.map(this.createOptionFromSuburb);
         this.isLoading = false;
       } else {
         this.options = [];
       }
     },
-    createOptionFromSuburb({ locality, state, postcode, city, _id }) {
+    createOptionFromSuburb({ locality, state, postcode, city, _id, address, id }) {
       return {
-        label: [locality || city, state, postcode].filter(i => !!i).join(', '),
+        label: address || [locality || city, state, postcode].filter(i => !!i).join(', '),
         value: postcode,
-        _id: _id
+        _id: id || _id
       };
+    },
+    async updatePostcode(option) {
+      this.selected = option;
+      if (!option.value) {
+        const suburb = await api.fetchAddressInfo(option._id);
+        this.$emit('input', suburb.postcode);
+        this.$emit('select', suburb);
+      } else {
+        this.$emit('input', option.value);
+        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
+      }
     }
   }
 };

package/components/common/price.vue

@@ -19,7 +19,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings'])
+    ...mapGetters(['pricingSettings', 'currency'])
   }
 };
 </script>

package/components/common/pricing_table/pricing-table.vue

@@ -71,7 +71,8 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'pricingSettings'
+      'pricingSettings',
+      'currency'
     ]),
     thList() {
       return this.items.map(item => get(item, this.nameAttr));
@@ -138,7 +139,7 @@ export default {
       const printType = this.items.find(item => printTypeName === get(item, this.nameAttr));
       const pricing = get(printType, this.pricingAttr);
       const item = pricing.find(({ min, max }) => (!min || range.min >= min) && (!max || range.min <= max));
-      return item ? (this.withGst ? priceWithTax(item.price, this.pricingSettings) : price(item.price)) : '-';
+      return item ? (this.withGst ? priceWithTax(item.price, this.pricingSettings, this.currency) : price(item.price, this.currency)) : '-';
     }
   }
 };

package/components/common/tabs.vue

@@ -10,7 +10,7 @@
           shadow: btnsShadow
         }"
         @click="select(tab)">
-        <div class="lc_medium18 tab-label">
+        <div class="lc_medium16 tab-label">
           <i
             v-if="tab.icon"
             :class="[tab.icon, 'tab-icon']">
@@ -19,7 +19,7 @@
         </div>
         <div
           v-if="tab.description"
-          class="lc_regular12 lc_grey1 mt-5">
+          class="tab-description lc_regular12 lc_grey1 mt-5">
           {{ tab.description }}
         </div>
       </div>
@@ -98,7 +98,7 @@ export default {
 @import "@/assets/scss/variables";
 
 .tab {
-  flex-grow: .2;
+  flex-basis: 100%;
   display: flex;
   align-items: center;
   border-radius: 2px;
@@ -124,10 +124,10 @@ export default {
     transition: background-color .22s ease-in-out;
   }
   &s--large & {
-    height: 80px;
+    height: 85px;
     flex-direction: column;
     padding: 10px;
-    min-width: 190px;
+    min-width: 130px;
     white-space: normal;
   }
   &s--primary & {
@@ -153,9 +153,6 @@ export default {
     padding: 0 12px;
     position: relative;
   }
-  &-icon {
-    font-size: 26px;
-  }
   &s--large &-label,
   &s--primary &-label,
   &s--secondary &-label {
@@ -180,6 +177,18 @@ export default {
   &.shadow {
     box-shadow: 1px 1px 2px rgb(214, 214, 214);
   }
+  @media (max-width: $bp-medium-max) {
+    .tab-label {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
+    .tab-icon {
+      font-size: 14px !important;
+    }
+    .tab-description {
+      font-size: 11px !important;
+    }
+  }
 }
 .fullWidth .tab {
   flex-grow: 1;

package/components/editor/editor.scss

@@ -6,6 +6,12 @@
     justify-content: flex-start;
     padding: 12px 0;
   }
+  &__workspace {
+    @media (min-width: $bp-medium-min) {
+      position: sticky;
+      top: calc(#{$navbar_height} + 50px);
+    }
+  }
   &__content {
     margin-top: -12px;
   }

package/components/editor/editor.vue

@@ -4,7 +4,7 @@
       <breakpoint
         name="md"
         mode="up">
-        <div class="col-md-5 col-12 Editor__col">
+        <div class="col-md-6 col-12 Editor__col">
           <tabs
             :tabs="tabs"
             :selected="selectedTab"
@@ -55,8 +55,10 @@
           </div>
         </div>
       </breakpoint>
-      <div class="col-md-7 col-12 Editor__col">
-        <editor-workspace />
+      <div class="col-md-6 col-12 Editor__col">
+        <client-only>
+          <editor-workspace class="Editor__workspace" />
+        </client-only>
       </div>
     </div>
     <breakpoint
@@ -190,7 +192,7 @@ export default {
       this.setEditModeSelectedLayer(false);
     },
     async showResetAllConfirm() {
-      const message = 'Are you sure? Confirmation will delete all layers, quantities and set a T-shirt to white one';
+      const message = 'This will reset the current design. Are you sure?';
       const reset = await this.showConfirmationModal(message);
 
       if (reset) {
@@ -198,22 +200,23 @@ export default {
         this.resetLayers();
       }
     },
-    proceedToCard() {
+    async proceedToCard() {
       const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
-      this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
-      this.showCartModal(async () => {
-        const message = 'Do you wish to continue with editing the current design or reset the editor?';
-        const reset = await this.showConfirmationModal(message, {
-          cancelLabel: 'Keep design',
-          submitLabel: 'Reset editor'
-        });
-        if (reset) {
-          this.clearTemplate();
-          this.resetLayers();
-        } else {
-          this.clearTemplate(true);
-        }
-      });
+      await this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
+      this.$router.push('/checkout/cart');
+      // this.showCartModal(async () => {
+      //   const message = 'Do you wish to continue with editing the current design or reset the editor?';
+      //   const reset = await this.showConfirmationModal(message, {
+      //     cancelLabel: 'Keep design',
+      //     submitLabel: 'Reset editor'
+      //   });
+      //   if (reset) {
+      //     this.clearTemplate();
+      //     this.resetLayers();
+      //   } else {
+      //     this.clearTemplate(true);
+      //   }
+      // });
     },
     goToDesignAndClosePopover() {
       this.selectTab('design');

package/components/editor/editor_layers/editor-layers.vue

@@ -53,13 +53,14 @@
     </transition>
     <editor-pricing
       v-if="hasPricing"
-      class="EditorLayers__pricing" />
+      class="EditorLayers__pricing"
+      :has-cart-btn="false" />
   </div>
 </template>
 
 <script>
 import { createNamespacedHelpers } from 'vuex';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import { cloneLayerModel } from '@lancom/shared/assets/js/models/product-layers';
 import EditorLayerForms from './editor_layer_forms';
 import EditorLayersLayer from './editor_layers_layer/editor-layers-layer';

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -70,6 +70,8 @@ export default {
       const productsOptions = this.getProductOptions();
       const options = productsOptions.filter(({ sides }) => sides.includes(this.side));
       this.options = this.allowNoPrint ? [...options, { label: 'No Print' }] : options;
+
+      this.select(this.options[0]);
     },
     select(option) {
       this.$emit('select', option);

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

@@ -6,14 +6,20 @@
   &__header {
     display: flex;
     align-items: center;
+    margin-top: 5px;
+    &-logo {
+      img {
+        max-width: 75px;
+        max-height: 55px;
+      }
+    }
     &-info {
-      margin-left: 19px;
+      margin-left: 10px;
       flex-grow: 1;
     }
     &-row {
       display: flex;
       align-items: center;
-      justify-content: space-between;
       & + & {
         margin-top: 5px;
       }

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

@@ -1,14 +1,16 @@
 <template>
   <div class="EditorProductDetails__wrapper">
+    <h3 class="lc_h3 lc_black">
+      {{ product.name }}
+    </h3>
     <div class="EditorProductDetails__header">
-      <div class="EditorProductDetails__header-logo">
+      <div
+        v-if="product.brand.logo"
+        class="EditorProductDetails__header-logo">
         <img :src="product.brand.logo | staticLink" />
       </div>
       <div class="EditorProductDetails__header-info">
         <div class="EditorProductDetails__header-row">
-          <h3 class="lc_h3 lc_black">
-            {{ product.name }}
-          </h3>
           <span
             v-if="defaultSimpleProduct && defaultSimpleProduct.pricing[0]"
             class="lc_regular16 lc_grey1">
@@ -27,18 +29,7 @@
               </template>
             </v-popover>
           </span>
-        </div>
-        <div class="EditorProductDetails__header-row">
-          <span class="EditorProductDetails__product-link">
-            SKU:
-            <a
-              :href="productLink"
-              target="_blank">
-              {{ product.SKU }}
-              <i class="icon-blank"></i>
-            </a>
-          </span>
-          <span class="lc_regular16 lc_grey1">
+          <span class="lc_regular16 lc_grey1 ml-6">
             +
             <v-popover
               ref="popover"
@@ -59,6 +50,17 @@
             </v-popover>
           </span>
         </div>
+        <div class="EditorProductDetails__header-row">
+          <span class="EditorProductDetails__product-link">
+            SKU:
+            <a
+              :href="productLink"
+              target="_blank">
+              {{ product.SKU }}
+              <i class="icon-blank"></i>
+            </a>
+          </span>
+        </div>
       </div>
     </div>
     <div
@@ -69,13 +71,10 @@
     <fragment
       v-if="productDetailsLoaded && productAvailableInCurrentCountry">
       <div class="EditorProductDetails__section">
-        <product-colors-selector />
-      </div>
-      <div class="EditorProductDetails__section">
-        <editor-pricing />
+        <product-colors-selector :has-another-print-btn="false" />
       </div>
       <div class="EditorProductDetails__section">
-        <product-size-selector />
+        <editor-pricing :has-cart-btn="false" />
       </div>
     </fragment>
   </div>
@@ -83,9 +82,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
-import ProductSizeSelector from '@lancom/shared/components/product/product_size_selector/product-size-selector';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import ProductColorsSelector from '@lancom/shared/components/product/product_colors_selector/product-colors-selector';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
 import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
@@ -96,7 +94,6 @@ export default {
   name: 'EditorProductDetails',
   components: {
     ProductColorsSelector,
-    ProductSizeSelector,
     PricingDiscountsTable,
     EditorPricing,
     PricingTable

package/components/editor/editor_wizard/editor-wizard.vue

@@ -17,13 +17,14 @@
     </div>
     <editor-pricing
       v-if="hasPricing"
+      :has-cart-btn="false"
       class="EditorWizard__pricing" />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Wizard from '@lancom/shared/components/product/wizard/wizard';
 
 export default {

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

@@ -90,6 +90,7 @@
       }">
       <editor-print-area-options
         v-if="productDetailsLoaded"
+        ref="areaOptions"
         :product="product"
         :selected="selectedPrintArea._id"
         :side="editableSide.id"
@@ -109,7 +110,7 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Tabs from '@lancom/shared/components/common/tabs';
 import EditorWorkspaceSide from './editor_workspace_side/editor-workspace-side';
 
@@ -156,7 +157,7 @@ export default {
       'setEditablePrintArea'
     ]),
     selectTab(value) {
-      this.setEditableSide({ id: value }); // todo improve later by adding real sides
+      this.setEditableSide({ id: value });
     },
     toggleSide() {
       this.setEditableSide({

package/components/modals/cart_modal/cart-modal.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Cart from '@/components/checkout/cart/cart';
+import Cart from '@lancom/shared/components/checkout/cart/cart';
 
 export default {
   name: 'CartModal',

package/components/modals/order_modal/order-modal.vue

@@ -335,6 +335,12 @@ export default {
         this.$set(this.form, 'postcode', suburb.postcode);
         this.$set(this.form, 'city', suburb.locality);
         this.$set(this.form, 'country', suburb.country);
+        if (suburb.addressLine1) {
+          this.$set(this.address, 'addressLine1', suburb.addressLine1);
+        }
+        if (suburb.addressLine2) {
+          this.$set(this.address, 'addressLine2', suburb.addressLine2);
+        }
       }
     },
     handleSuburbChange(suburb) {

package/components/modals/payment_modal/payment-modal.vue

@@ -104,7 +104,7 @@ export default {
   data() {
     return {
       processing: false,
-      loadingCard: false,
+      loadingCard: true,
       form: {},
       fields: null,
       agreeTermsAndCondition: false,
@@ -113,7 +113,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'payment']),
+    ...mapGetters(['shop', 'country', 'payment', 'currency']),
     ...mapGetters('order', ['orderData']),
     isVisibleChargeMessage() {
       return this.isSuccessOrderCharge || this.isFailedOrderCharge;
@@ -152,7 +152,7 @@ export default {
     ...mapMutations('product', ['clearTemplate']),
     ...mapMutations('layers', ['resetLayers']),
     initedCard() {
-      this.loadingCard = true;
+      this.loadingCard = false;
     },
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
@@ -165,6 +165,7 @@ export default {
           card,
           shop: this.shop._id,
           country: this.country?._id,
+          currency: this.currency?.isoCode,
           payment: this.payment,
           recaptchaToken: await this.getRecaptcha('order_payment')
         };

package/components/order/order_payment/order-payment.vue

@@ -24,12 +24,12 @@
       </div>
       <div class="OrderPrice__content">
         <div>
-          <payment-cart
+          <payment-card
             ref="paymentCart"
             :amount="model.totalGST"
             :has-spinner="false"
             :payment-data="order.shippingAddress">
-          </payment-cart>
+          </payment-card>
           <div
             v-if="errorMessage"
             class="OrderPayment__error">
@@ -51,13 +51,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
-import PaymentCart from '@lancom/shared/components/common/payment/payment_card/pinpayment/pinpayment';
+import PaymentCard from '@lancom/shared/components/common/payment/payment_card/payment-card';
 import PaymentSuccess from '@lancom/shared/components/common/payment/payment_success/payment-success';
 
 export default {
   name: 'OrderPayment',
   components: {
-    PaymentCart,
+    PaymentCard,
     PaymentSuccess
   },
   props: {
@@ -77,7 +77,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'payment']),
+    ...mapGetters(['shop', 'country', 'currency', 'payment']),
     model() {
       return this.invoice || this.order;
     }
@@ -96,7 +96,7 @@ export default {
         if (card) {
           const { _id: invoice } = this.invoice || {};
           const recaptchaToken = await this.getRecaptcha('order_payment');
-          const payload = { invoice, card, shop: this.shop._id, country: this.country?._id, payment: this.payment, recaptchaToken };
+          const payload = { invoice, card, shop: this.shop._id, country: this.country?._id, payment: this.payment, currency: this.currency?.isoCode, recaptchaToken };
           const { paid } = await api.createOrderPayment(this.order._id, payload);
           this.model.paid = paid;
         }

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

@@ -0,0 +1,75 @@
+@import "@/assets/scss/variables";
+.EditorPricing {
+  &__main {
+    &-alert {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 27px;
+      background-color: $gray;
+      color: $gray_main;
+      @media (max-width: $bp-extra-small-max) {
+        height: 63px;
+        padding: 15px;
+        font-size: 16px;
+      }
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+  &__footer {
+    background: $green;
+    height: 76px;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media (max-width: $bp-extra-small-max) {
+      flex-wrap: wrap;
+      justify-content: center;
+      height: auto;
+      min-height: 110px;
+    }
+
+    &-section {
+      display: flex;
+      align-items: center;
+    }
+  }
+  &__total {
+    margin-left: 38px;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 30px;
+    text-transform: uppercase;
+    color: $black;
+    span {
+      font-weight: bold;
+    }
+  }
+  &__toggle-details {
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    text-decoration: underline;
+    text-transform: uppercase;
+    cursor: pointer;
+    @media (max-width: $bp-extra-small-max) {
+      text-align: center;
+    }
+  }
+  &__add-to-cart-button {
+    margin-left: 30px;
+  }
+}
+::v-deep .btn-green {
+  background-color: white;
+  color: $black;
+  &.disabled {
+    background-color: $gray;
+  }
+}