@lancom/shared 0.0.91 → 0.0.95

package/assets/js/api/admin.js

@@ -188,6 +188,18 @@ export default {
   removeSupplier(id) {
     return _delete(`admin/suppliers/${id}`);
   },
+  async fetchWarehouses(params) {
+    return sortByName(await _get('admin/warehouse', params));
+  },
+  fetchWarehouseById(id) {
+    return _get(`admin/warehouse/${id}`);
+  },
+  saveWarehouse(brand) {
+    return brand._id ? _put(`admin/warehouse/${brand._id}`, brand) : _post('admin/warehouse', brand);
+  },
+  removeWarehouse(id) {
+    return _delete(`admin/warehouse/${id}`);
+  },
   async fetchBanners(params) {
     return sortByName(await _get('admin/banners', params));
   },

package/assets/js/api/helpers.js

@@ -17,7 +17,8 @@ if (process.client) {
     });
 }
 
-export const buildPath = path => `${process.env.API_URL}/${path}`;
+const API_URL = process.client ? process.env.API_URL : process.env.LOCAL_API_URL;
+export const buildPath = path => `${API_URL}/${path}`;
 
 export const prepareHeaders = method => {
   const headers = {};

package/assets/js/utils/filters.js

@@ -16,7 +16,7 @@ export const number = (value, digits = 0) => {
   return fixed.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 };
 
-export const decimal = value => number(value || 0, 2);
+export const decimal = (value, digits = 2) => number(value || 0, digits);
 
 export const price = (value = 0, currency = 'USD') => {
   const amount = number(value, 2);
@@ -56,8 +56,12 @@ export const print = type => printsLabels[type];
 
 export const side = type => SIDE_TYPES[type];
 
+export const commaArray = (list = []) => {
+  return list.join(', ');
+};
+
 export const printsRange = (prints = []) => {
-  return prints.join(', ');
+  return commaArray(prints);
 };
 
 export const highlight = (string = '', query) => {

package/assets/js/utils/product.js

@@ -11,11 +11,12 @@ export function getProductsForCalculatePricing(mainProduct, simpleProducts, laye
     _id: mainProduct._id,
     prints: hasPrints ? prints.map(p => isCLearPrintsLayers ? ({ ...p, layers: null }) : p) : null,
     printSurcharge: mainProduct.printSurcharge || 0,
-    simpleProducts: simpleProducts.map(({ _id, amount, pricing, unprintedPricing, weight }) => ({
+    simpleProducts: simpleProducts.map(({ _id, amount, pricing, unprintedPricing, weight, volume }) => ({
       _id,
       amount,
       pricing: hasPrints ? pricing : unprintedPricing,
-      weight: weight || mainProduct.weight
+      weight: weight || mainProduct.weight,
+      volume: volume || mainProduct.volume
     }))
   }];
 }

package/components/checkout/cart/cart.mixin.js

@@ -28,11 +28,11 @@ export default {
   },
   watch: {
     entities() {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   },
   mounted() {
-    this.calculateCartPrice(this.shop);
+    this.calculateCartPrice({ shop: this.shop });
     if (!this.suburb && this.user?.suburb) {
       this.handleSuburbChange(this.user.suburb);
     }
@@ -47,7 +47,7 @@ export default {
     ]),
     handleSuburbChange(suburb) {
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     },
     async removeSimpleProducts(simpleProducts) {
       const message = 'This will delete all items in this row, Press OK to continue or Cancel';

package/components/checkout/cart/cart_entity/cart-entity.vue

@@ -17,6 +17,14 @@
             {{ product.SKU }}
           </div>
         </div>
+        <div class="CartEntity__feature">
+          <div class="lc_title-small">
+            Brand:
+          </div>
+          <div class="lc_body-small">
+            {{ product.brand.name }}
+          </div>
+        </div>
       </div>
       <div>
         <cart-entity-color-simple-products

package/components/checkout/cart/cart_price_info/cart-price-info.scss

@@ -0,0 +1,10 @@
+@import '@/assets/scss/variables';
+
+.CartPriceInfo {
+  &__error {
+    padding: 10px;
+    font-size: 12px;
+    color: $white;
+    background-color: $error;
+  }
+}

package/components/checkout/cart/cart_price_info/cart-price-info.vue

@@ -1,11 +1,16 @@
 <template>
-  <div>
+  <div class="CartPriceInfo__wrapper">
     <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
       <product-total-pricing
         v-if="cartPricing && cartPricing.amount"
         :pricing="cartPricing"
         :items-label="itemsLabel" />
     </slot>
+    <div
+      v-if="cartPricingError"
+      class="CartPriceInfo__error">
+      {{ cartPricingError }}
+    </div>
   </div>
 </template>
 
@@ -39,7 +44,8 @@ export default {
     ...mapGetters(['shop']),
     ...mapGetters('cart', [
       'entities',
-      'cartPricing'
+      'cartPricing',
+      'cartPricingError'
     ])
   },
   watch: {
@@ -55,7 +61,7 @@ export default {
       'calculateCartPrice'
     ]),
     calculatePrice() {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   }
 };

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.scss

@@ -0,0 +1,54 @@
+@import '@/assets/scss/variables';
+
+.CartShipmentsPricing {
+  &__title {
+    padding-top: 15px;
+    padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    a {
+      color: $black
+    }
+  }
+  &__supplier {
+    padding: 15px 10px 15px 10px;
+    border-bottom: 1px solid #e3e3e3;
+    &:last-child {
+      border-bottom: none;
+    }
+    &-info {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      font-size: 16px;
+    }
+    &-brands {
+      display: flex;
+      i {
+        margin-left: -2px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+  &__rate {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    font-size: 16px;
+    &--disabled {
+      pointer-events: none !important;
+      opacity: 0.6;
+      cursor: default;
+    }
+    &-icon {
+      margin-right: 10px;
+    }
+    &-info {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="CartShipmentsPricing__wrapper">
+    <div v-if="hasSuppliersWithRates">
+      <div class="CartShipmentsPricing__title">
+        <div class="lc_body-large lc_gray-main">Delivery</div>
+        <a
+          href="/info/shipping-info"
+          target="_blank">
+          Learn more <i class="icon-target"></i>
+        </a>
+      </div>
+      <div
+        v-for="(supplier, index) of suppliersWithRates"
+        :key="index"
+        class="CartShipmentsPricing__supplier">
+        <div class="CartShipmentsPricing__supplier-info">
+          <div class="CartShipmentsPricing__supplier-brands">
+            <div @click="removeSupplierConfirm(supplier)">
+              <i class="icon-delete"></i>
+            </div>
+            <div>
+              {{ supplier.brands.map(b => b.name) | commaArray }}
+            </div>
+          </div>
+          <div>
+            {{ supplier | selectedRatePrice | price }}
+          </div>
+        </div>
+        <div
+          v-for="(rate, i) of supplier.rates"
+          :key="`rate-${i}`"
+          class="CartShipmentsPricing__rate"
+          :class="{
+            'CartShipmentsPricing__rate--disabled': rate.disabled
+          }"
+          @click="selectRate({ supplier, rate, shop })">
+          <div class="CartShipmentsPricing__rate-info">
+            <div class="CartShipmentsPricing__rate-icon">
+              <checked-icon :checked="rate.selected" />
+            </div>
+            <div class="CartShipmentsPricing__rate-name">
+              <div>{{ rate.name }}</div>
+              <div
+                v-if="rate.note"
+                class="lc_regular10">
+                {{ rate.note }}
+              </div>
+            </div>
+          </div>
+          <div class="CartShipmentsPricing__rate-price">
+            {{ rate.totalPriceWithoutTax | price }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { price, commaArray } from '@lancom/shared/assets/js/utils/filters';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import confirm from '@lancom/shared/mixins/confirm';
+
+export default {
+  name: 'LancomCartShipmentsPricing',
+  components: {
+    CheckedIcon
+  },
+  filters: {
+    price,
+    commaArray,
+    selectedRatePrice(supplier) {
+      const { totalPriceWithoutTax = 0 } = supplier.rates.find(r => r.selected) || {};
+      return totalPriceWithoutTax;
+    }
+  },
+  mixins: [confirm],
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', [
+      'cartPricing'
+    ]),
+    hasSuppliersWithRates() {
+      return this.suppliersWithRates.length > 0;
+    },
+    suppliersWithRates() {
+      return this.cartPricing?.shipping?.suppliersWithRates || [];
+    }
+  },
+  methods: {
+    ...mapActions('cart', [
+      'selectRate',
+      'removeSupplier'
+    ]),
+    async removeSupplierConfirm(supplier) {
+      const message = `Will be removed all products related to brands: ${commaArray(supplier.brands.map(b => b.name))}. Are you sure?`;
+      const reset = await this.showConfirmationModal(message);
+
+      if (reset) {
+        this.removeSupplier({ supplier, shop: this.shop });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-shipments-pricing.scss';
+</style>

package/components/checkout/order/address-form/address-form.vue

@@ -295,7 +295,7 @@ export default {
     handleSuburbChange(suburb) {
       this.setAddressSuburb(suburb);
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   }
 };

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

@@ -11,14 +11,6 @@
           <address-form
             :address="order.shippingAddress"
             :without-additional-info="true" />
-          <!-- <div class="form-row mt-10">
-            <label class="form-label">
-              <checkbox v-model="copyToShippingAddress" />
-              <span class="lc_regular14 lc__grey1">
-                Ship to this address
-              </span>
-            </label>
-          </div> -->
         </div>
         <progress-steps-controls
           :disabled-next="invalid || !order.shippingAddress.postcode"

package/components/checkout/order/order-shipping-method/order-shipping-method.vue

@@ -53,7 +53,7 @@ export default {
   },
   mounted() {
     if (!this.shippingPricing) {
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     }
   },
   methods: {

package/components/common/progress_steps/progress-steps.scss

@@ -25,7 +25,7 @@
   &__content-wrapper {
     padding: 51px;
     position: relative;
-    @media (max-width: $bp-extra-small-max) {
+    @media (max-width: $bp-large-max) {
       padding: 15px;
     }
   }

package/components/editor/editor.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="Editor__wrapper">
-    <!-- <div class="Editor__header">
-      <nuxt-link
-        to="/"
-        class="lc_link">
-        <i class="icon-left"></i>
-        Go to all models
-      </nuxt-link>
-    </div> -->
     <div class="Editor__content row">
       <breakpoint
         name="md"

package/components/editor/editor_layers/editor_layer_forms/editor_layer_common_fields/editor-layer-common-fields.vue

@@ -20,55 +20,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="form-row">
-      <div class="form-label">
-        Align:
-      </div>
-      <div class="EditorLayerCommonFields__align-options">
-        <div
-          v-tooltip="'Center vertically'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'center' }"
-          @click="alignVertically = 'center'">
-          <i class="icon-vertical-align-center"></i>
-        </div>
-        <div
-          v-tooltip="'Center horizontally'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'center' }"
-          @click="alignHorizontally = 'center'">
-          <i class="icon-horizonal-align-center"></i>
-        </div>
-        <div
-          v-tooltip="'Left'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'left' }"
-          @click="alignHorizontally = 'left'">
-          <i class="icon-horizonal-align-left"></i>
-        </div>
-        <div
-          v-tooltip="'Right'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignHorizontally === 'right' }"
-          @click="alignHorizontally = 'right'">
-          <i class="icon-horizonal-align-right"></i>
-        </div>
-        <div
-          v-tooltip="'Top'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'top' }"
-          @click="alignVertically = 'top'">
-          <i class="icon-vertical-align-top"></i>
-        </div>
-        <div
-          v-tooltip="'Bottom'"
-          class="EditorLayerCommonFields__align-option ripple"
-          :class="{ active: alignVertically === 'bottom' }"
-          @click="alignVertically = 'bottom'">
-          <i class="icon-vertical-align-bottom"></i>
-        </div>
-      </div>
-    </div> -->
   </fragment>
 </template>
 

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_art/editor-layer-form-art.vue

@@ -5,12 +5,6 @@
         name="header"
         :invalid="invalid">
       </slot>
-      <!-- <div class="EditorLayerFormArt__content">
-        <input
-          v-model="url"
-          readonly
-          class="form-field" />
-      </div> -->
       <editor-layer-common-fields
         :layer="layer"
         @set-layer-field="data => $emit('set-layer-field', data)">

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

@@ -1,7 +1,6 @@
 <template>
   <div class="EditorPricing__wrapper">
     <div class="EditorPricing__main">
-      <!-- no qty, no layers -->
       <fragment v-if="!hasUsedSimpleProducts && !layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -17,7 +16,6 @@
         </div>
       </fragment>
 
-      <!-- has qty, no layers -->
       <fragment v-else-if="hasUsedSimpleProducts && !layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -36,7 +34,7 @@
           </div>
         </div>
       </fragment>
-      <!-- no qty, has layers -->
+
       <fragment v-else-if="!hasUsedSimpleProducts && layers.length">
         <div class="EditorPricing__main-alert">
           <i class="icon-attention-circled"></i>
@@ -55,7 +53,7 @@
           </div>
         </div>
       </fragment>
-      <!-- has qty, has layers -->
+
       <fragment v-else>
         <div class="EditorPricing__main-row">
           <div class="lc_regular14 EditorPricing__main-col">

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

@@ -62,9 +62,6 @@
         class="EditorWorkspaceSide__alert-error view-transition">
         <i class="icon-attention-circled"></i>
         Part of your design layer is outside the print area.
-        <!-- <i
-          class="icon-cancel EditorWorkspaceSide__offset-warning-close"
-          @click="offsetWarningVisible = false"></i> -->
       </div>
     </transition-group>
   </div>

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

@@ -331,7 +331,7 @@ export default {
     handleSuburbChange(suburb) {
       this.form.suburb = suburb;
       this.setSuburb(suburb);
-      this.calculateCartPrice(this.shop);
+      this.calculateCartPrice({ shop: this.shop });
     },
     back() {
       this.switchModal('showCartModal');

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

@@ -12,10 +12,6 @@
             btn-class="green PaymentSuccess__btn"
             btn-label="GO HOME"
             to="/" />
-          <!-- <btn
-            btn-class="green PaymentSuccess__btn"
-            btn-label="VIEW ORDER"
-            :to="`/order/${order.token}`" /> -->
         </div>
       </template>
     </payment-success>

package/components/order/order_status/order-status.vue

@@ -18,24 +18,6 @@
         {{ order.status }}
       </div>
     </div>
-    <!-- <h4 class="lc_h4">
-      Special
-    </h4>
-    <div class="OrderStatus__value">
-      <div v-if="isEditable">
-        <label class="form-label PaymentModal__label-with-checkbox">
-          <checkbox v-model="order.special" @change="changeStatus" />
-          <span class="lc_regular14 lc__grey1">
-            Special Order
-          </span>
-        </label>
-      </div>
-      <div
-        v-else
-        class="OrderStatus__status">
-        {{ order.special ? 'Yes' : 'No' }}
-      </div>
-    </div> -->
   </div>
 </template>
 

package/components/product/layouts/product_model_measurements/product-model-measurements.vue

@@ -9,11 +9,6 @@
                 src="~static/images/measurements_model.svg"
                 class="ProductModelMeasurements__icon" />
               <div class="form-actions center">
-                <!-- <btn
-                  btn-class="green-link"
-                  btn-label="Show model image"
-                  @click="showModel">
-                </btn> -->
               </div>
             </td>
             <td>

package/components/product/product.vue

@@ -30,13 +30,6 @@
         </section>
       </div>
     </div>
-    <!-- <div class="row Product__section-row">
-      <div class="col-12">
-        <section class="Product__section">
-          <product-labels-customization />
-        </section>
-      </div>
-    </div> -->
   </div>
 </template>
 

package/components/products/products_attributes/products-attributes.vue

@@ -2,7 +2,6 @@
   <div
     v-if="attributes.length"
     class="ProductsAttributes__wrapper">
-    <!-- <toggle-content label="Attributes"> -->
     <div
       v-for="attribute in attributes"
       :key="attribute._id"
@@ -11,13 +10,11 @@
         :attribute="attribute"
         :has-selected-icon="hasSelectedIcon" />
     </div>
-    <!-- </toggle-content> -->
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-// import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsAttribute from './products_attribute/products-attribute';
 
 export default {

package/components/products/products_brands/products-brands.vue

@@ -43,8 +43,8 @@ export default {
   computed: {
     ...mapGetters('products', ['brands', 'types']),
     list() {
-      const type = this.types.find(type => type.alias === this.$route.params.type);
-      return type ? this.brands.filter(({ productTypes = [] }) => productTypes.some(t => type._id === t)) : this.brands;
+      // const type = this.types.find(type => type.alias === this.$route.params.type);
+      return this.brands;
     },
     currentBrand() {
       return this.$route.params.brand;

package/components/products/products_colors/products-colors.scss

@@ -12,7 +12,8 @@
   &__selected-item {
     display: flex;
     align-items: center;
-    font-size: 18px;
+    font-size: 12px;
+    font-weight: bold;
     margin: 12px 0;
     padding-top: 4px;
     color: $grey_1;

package/components/products/products_filters/products-filters.vue

@@ -20,23 +20,6 @@
         class="icon-filter ProductsFilters__menu-toggle"
         @click="$emit('open')"></i>
     </div>
-    <!-- <div class="ProductsFilters__search hidden-sm-and-down">
-      <input
-        v-model="search"
-        name="search"
-        placeholder="Search"
-        type="text"
-        class="form-field no-label tiny-placeholder labelless"
-        @change="goToTextSearch" />
-      <i class="icon-search"></i>
-    </div> -->
-    <!-- <multiselect
-      v-model="sortBy"
-      :options="sortByOptions"
-      :option-height="35"
-      value="value"
-      label="label"
-      class="labelless" /> -->
   </div>
 </template>
 

package/components/quotes/quote_request/quote-request.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="QuoteRequest__wrapper">
-    <!-- <div class="QuoteRequest__title">
-      Quick Quote
-    </div>
-    <div class="QuoteRequest__info">
-      Fill our the form below and one of our team members will respond with a Quote ASAP!
-    </div> -->
     <div class="QuoteRequest__content">
       <validation-observer
         v-slot="{ invalid, handleSubmit, errors: submittedErrors }"

package/nuxt.config.js

@@ -32,7 +32,7 @@ module.exports = (config, axios) => ({
       '/customer/**'
     ],
     routes: async () => {
-      const { data } = await axios.get(`${config.API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
       return data.map(url => ({ url, priority: 0.8 }));
     }
   },
@@ -82,7 +82,7 @@ module.exports = (config, axios) => ({
   feed: [{
     path: '/google-shopping.xml',
     async get() {
-      const { data } = await axios.get(`${config.API_URL}/feed/products?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}`);
       const spliceFirstImage = images => (images || []).splice(0, 1)[0];
       const getImages = images => (images || []).length > 0 ? images : null;
       return {
@@ -100,7 +100,7 @@ module.exports = (config, axios) => ({
               const image = spliceFirstImage(feedImages) || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || {};
               const images = getImages(backImages) || getImages(frontImages) || [];
               const info = {
-                title: { _text: `${product.name} ${sp.color.name}-${sp.size.name}` },
+                title: { _text: `${product.name} ${sp.color.name}` },
                 description: { _text: product.description || product.fabricInfoShort || product.name },
                 link: { _text: `https://${config.HOST_NAME}/${product.brand.alias}/${product.productType.alias}/${product.alias}?color=${sp.color.alias}` },
                 'g:id': { _text: sp.SKU },

package/package.json

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

package/store/auth.js

@@ -18,6 +18,7 @@ export const getters = {
   isGuestUser: state => !state.token,
   isAdmin: state => checkRoles(state.user, ['admin']),
   isContentEditor: state => checkRoles(state.user, ['admin', 'content-editor']),
+  isWarehouse: state => checkRoles(state.user, ['admin', 'warehouse']),
   user: state => state.user,
   authStatus: state => state.status,
   stateError: state => state.err

package/store/cart.js

@@ -6,7 +6,8 @@ export const state = () => ({
   id: null,
   entities: [],
   suburb: null,
-  cartPricing: null
+  cartPricing: null,
+  cartPricingError: null
 });
 
 const getSimpleProductsQuantity = simpleProducts => {
@@ -56,6 +57,7 @@ export const getters = {
   notValidPrintsQuantities(state, { quantities }) {
     return (quantities?.prints || []).filter(({ minQuantity, quantity }) => quantity < minQuantity);
   },
+  cartPricingError: ({ cartPricingError }) => cartPricingError
 };
 
 export const actions = {
@@ -96,37 +98,24 @@ export const actions = {
     await api.saveCart(payload, shop._id);
     commit('setEntities', entities);
   },
-  async calculateCartPrice({ state: { suburb, entities }, commit }, shop) {
-    const getSimpleObj = i => i && ({ _id: i._id, name: i.name });
-    const payload = {
-      entities: entities.map(({ _id, guid, prints, simpleProducts, product }) => ({
-        _id,
-        guid,
-        simpleProducts: simpleProducts.map(({ _id, guid, amount, pricing, unprintedPricing, weight = 0 }) => ({
-          amount,
-          pricing: (prints || []).length > 0 ? pricing : unprintedPricing,
-          weight: product.weight,
-          guid,
-          _id
-        })).filter(({ amount }) => +amount > 0),
-        prints: (prints || []).map(print => {
-          const { setupCost, freeSetupOver, printCost } = getPrintTypeSizePricing(print.printType, print.printSize?._id) || {};
-          return {
-            costType: print.printType.costType,
-            setupCost,
-            printCost,
-            freeSetupOver,
-            printType: getSimpleObj(print.printType),
-            printArea: getSimpleObj(print.printArea),
-            printSize: getSimpleObj(print.printSize)
-          };
-        }),
-        printSurcharge: product.printSurcharge || 0
-      })),
-      postcode: suburb && suburb.postcode
-    };
-    const response = await api.calculateProductPrice(payload, shop._id);
-    commit('setCartPricing', response);
+  async removeSupplier({ commit, state }, { supplier, shop }) {
+    const brands = supplier.brands.map(({ _id }) => _id);
+    const entities = state.entities.filter(entity => !brands.includes(entity.product.brand._id));
+    const payload = { _id: state.id, entities };
+    await api.saveCart(payload, shop._id);
+    commit('setEntities', entities);
+  },
+  async calculateCartPrice({ state: { suburb, entities }, commit }, { shop }) {
+    const payload = generateCalculatePriceData(entities, suburb);
+    try {
+      const response = await api.calculateProductPrice(payload, shop._id);
+      commit('setCartPricing', response);
+      commit('setCartPricingError', null);
+    } catch (e) {
+      const { error = 'Error calculate pricing' } = e.response?.data || {};
+      commit('setCartPricingError', error);
+      commit('setCartPricing', null);
+    }
   },
   async setSimpleProductAmount({ state, commit }, { guid, amount, shop }) {
     const entities = (state.entities || []).map(product => ({
@@ -142,6 +131,28 @@ export const actions = {
   },
   clearCart({ commit }) {
     commit('clearCart');
+  },
+  async selectRate({ state: { cartPricing, entities, suburb }, commit }, { supplier, rate, shop }) {
+    const suppliersWithRates = cartPricing.shipping.suppliersWithRates
+      .map(supplierWithRates => ({
+        ...(
+          supplierWithRates === supplier
+            ? ({
+                ...supplierWithRates,
+                rates: supplierWithRates.rates.map(r => ({ ...r, selected: rate === r }))
+              })
+            : supplierWithRates)
+      }));
+    const payload = generateCalculatePriceData(entities, suburb, suppliersWithRates);
+    try {
+      const response = await api.calculateProductPrice(payload, shop._id);
+      commit('setCartPricing', response);
+      commit('setCartPricingError', null);
+    } catch (e) {
+      const { error = 'Error calculate pricing' } = e.response?.data || {};
+      commit('setCartPricingError', error);
+      commit('setCartPricing', null);
+    }
   }
 };
 
@@ -162,10 +173,53 @@ export const mutations = {
   setCartPricing(state, price) {
     state.cartPricing = price;
   },
+  setCartPricingError(state, error) {
+    state.cartPricingError = error;
+  },
+  setSelectedRates(state, selectedRates) {
+    state.selectedRates = selectedRates;
+  },
   clearCart(state) {
     state.id = null;
     state.entities = [];
     state.cartPricing = null;
     state.suburb = null;
+    state.cartPricingError = null;
   }
 };
+
+function generateCalculatePriceData(entities, suburb, suppliersWithRates) {
+  console.log('suburb: ', suburb);
+  const getSimpleObj = i => i && ({ _id: i._id, name: i.name });
+  return {
+    entities: entities.map(({ _id, guid, prints, simpleProducts, product }) => ({
+      _id,
+      guid,
+      brand: getSimpleObj(product.brand),
+      simpleProducts: simpleProducts.map(({ _id, guid, amount, pricing, unprintedPricing, weight = 0 }) => ({
+        amount,
+        pricing: (prints || []).length > 0 ? pricing : unprintedPricing,
+        weight: product.weight,
+        volume: product.volume,
+        guid,
+        _id
+      })).filter(({ amount }) => +amount > 0),
+      prints: (prints || []).map(print => {
+        const { setupCost, freeSetupOver, printCost } = getPrintTypeSizePricing(print.printType, print.printSize?._id) || {};
+        return {
+          costType: print.printType.costType,
+          setupCost,
+          printCost,
+          freeSetupOver,
+          printType: getSimpleObj(print.printType),
+          printArea: getSimpleObj(print.printArea),
+          printSize: getSimpleObj(print.printSize)
+        };
+      }),
+      printSurcharge: product.printSurcharge || 0
+    })),
+    postcode: suburb && suburb.postcode,
+    address: suburb ? [suburb.locality, suburb.state, suburb.postcode].filter(i => !!i).join(', ') : null,
+    suppliersWithRates
+  };
+}

package/store/order.js

@@ -22,6 +22,7 @@ export const actions = {
       order.productsTotal = pricing.products?.products?.totalPriceWithoutTax || 0;
       order.printsTotal = pricing.products?.prints?.totalPriceWithoutTax || 0;
       order.shippingTotal = pricing.shipping?.totalPriceWithoutTax || 0;
+      order.suppliersWithRates = pricing.shipping?.suppliersWithRates || [];
     }
     const response = await api.createOrder(order, shop);
     commit('setOrderData', response);