@things-factory/operato-mms 4.0.0-alpha.7 → 4.0.0-beta.1

package/client/pages/order/logistics/batch-init-popup.js

@@ -0,0 +1,566 @@
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
+import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
+class BatchInitPopup extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object,
+      shippingProviders: Array,
+      store: Object,
+      marketplaceSettings: Array
+    }
+  }
+
+  constructor() {
+    super()
+    this.shippingProviders = []
+  }
+
+  static get styles() {
+    return [
+      MultiColumnFormStyles,
+      css`
+        :host {
+          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--main-section-background-color);
+        }
+        .grist {
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+        data-grist {
+          overflow-y: hidden;
+          flex: 1;
+        }
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+        }
+        search-form {
+          overflow: visible;
+          background-color: var(--main-section-background-color);
+        }
+      `
+    ]
+  }
+
+  render() {
+    const shippingProviders = [{ name: 'SeeBuu Logistics' }, { name: 'GDex' }]
+
+    return html`
+      <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
+
+      <div name="batchUpdate" class="multi-column-form">
+        <label>${i18next.t('label.courier_service')}</label>
+        <select name="shippingProvider">
+          <option value="">${i18next.t('text.select_courier')}</option>
+          ${(shippingProviders || []).map(
+            shippingProvider => html` <option value="${shippingProvider.name}">${shippingProvider.name}</option> `
+          )}
+        </select>
+
+        <div class="set-button-container">
+          <mwc-button
+            @click="${e => this._batchUpdateSetHandler()}"
+            raised
+            label="${i18next.t('button.set')}"
+          ></mwc-button>
+        </div>
+      </div>
+
+      <div class="grist">
+        <data-grist
+          id="grist"
+          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+          .fetchHandler="${this.fetchHandler.bind(this)}"
+          .config=${this.config}
+        ></data-grist>
+        <div class="button-container">
+          <mwc-button
+            @click="${this.splitOrders.bind(this)}"
+            raised
+            label="${i18next.t('button.split_order')}"
+          ></mwc-button>
+          <mwc-button
+            @click="${this.initLogistics.bind(this)}"
+            raised
+            label="${i18next.t('button.initialise')}"
+          ></mwc-button>
+        </div>
+      </div>
+    `
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  get shippingProviderInput() {
+    return this.shadowRoot.querySelector('select[name=shippingProvider]')
+  }
+
+  async firstUpdated() {
+    const geoCities = await this.fetchCityList()
+    this.marketplaceSettings = await this.fetchMarketplaceSettings()
+    const maxWeightSetting = this.marketplaceSettings.filter(
+      setting => setting.category === 'marketplace_order_max_weight'
+    )
+    // this.shippingProviders = await this.fetchShippingProvider()
+
+    this._searchFields = [
+      {
+        label: i18next.t('field.city'),
+        name: 'city',
+        type: 'select',
+        options: [
+          { value: '' },
+          ...geoCities.map(geoCity => {
+            return {
+              name: geoCity.name,
+              value: geoCity.name
+            }
+          })
+        ],
+        props: { searchOper: 'eq' }
+      }
+    ]
+
+    this.config = {
+      list: {
+        fields: [
+          'orderNoRef',
+          'city',
+          'postCode',
+          'trackingNo',
+          'shippingProvider',
+          'totalVolume',
+          'totalWeight',
+          'status'
+        ]
+      },
+      rows: {
+        selectable: { multiple: true },
+        appendable: false,
+        classifier: function (record, rowIndex) {
+          const totalWeight = record['totalWeight']
+          const maxWeight = maxWeightSetting[0].value
+          var emphasized
+          if (totalWeight > maxWeight) {
+            emphasized = ['#F43838', 'yellow']
+          }
+
+          return { emphasized }
+        }
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'orderNoRef',
+          header: i18next.t('field.order_no'),
+          label: true,
+          sortable: true,
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'city',
+          header: i18next.t('field.city'),
+          label: true,
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'postCode',
+          header: i18next.t('field.postal_code'),
+          label: true,
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'trackingNo',
+          header: i18next.t('field.tracking_no'),
+          record: { editable: true },
+          label: true,
+          sortable: false,
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'ownTrackingNo',
+          header: i18next.t('field.own_tracking_no'),
+          record: { editable: true },
+          label: true,
+          sortable: false,
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'shippingProvider',
+          header: i18next.t('field.shipping_carrier'),
+          label: true,
+          sortable: true,
+          width: 130
+        },
+        {
+          type: 'string',
+          name: 'ownShippingProvider',
+          header: i18next.t('field.own_shipping_carrier'),
+          label: true,
+          sortable: true,
+          width: 130
+        },
+        {
+          type: 'number',
+          name: 'totalVolume',
+          header: i18next.t('field.total_volume'),
+          label: true,
+          width: 120
+        },
+        {
+          type: 'number',
+          name: 'totalWeight',
+          header: i18next.t('field.total_weight'),
+          label: true,
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'status',
+          header: i18next.t('field.status'),
+          label: true,
+          sortable: true,
+          width: 120
+        }
+      ]
+    }
+  }
+
+  async fetchCityList() {
+    const filters = []
+    const sortings = []
+
+    const response = await client.query({
+      query: gql`
+        query geoCities($filters: [Filter!], $sortings: [Sorting!]) {
+          geoCities(filters: $filters, sortings: $sortings) {
+            items {
+              id
+              name
+            }
+          }
+        }
+      `,
+      variables: { filters, sortings }
+    })
+
+    if (!response.errors) {
+      return response.data.geoCities.items || []
+    }
+  }
+
+  async fetchHandler({
+    page,
+    limit,
+    sorters = [
+      { name: 'totalWeight', desc: true },
+      { name: 'orderNoRef', desc: true }
+    ]
+  }) {
+    const filters = [
+      {
+        name: 'marketplaceStoreId',
+        operator: 'eq',
+        value: this.store.id
+      },
+      {
+        name: 'transporter',
+        operator: 'is_null',
+        value: ''
+      },
+      {
+        name: 'status',
+        operator: 'notin',
+        value: ['canceled', 'cancelled']
+      }
+    ]
+
+    const pagination = { page, limit }
+    const sortings = sorters
+
+    const response = await client.query({
+      query: gql`
+        query marketplaceOrderShippingsForBatchInit($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+          marketplaceOrderShippingsForBatchInit(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              address1
+              address2
+              address3
+              address4
+              address5
+              city
+              postCode
+              country
+              state
+              phone1
+              phone2
+              attentionTo
+              trackingNo
+              ownTrackingNo
+              transporter
+              ownTransporter
+              orderNoRef
+              subOrderNoRef
+              totalWeight
+              weightUnit
+              totalVolume
+              volumeUnit
+              marketplaceStore {
+                id
+                name
+                platform
+                description
+              }
+              marketplaceOrder {
+                id
+                name
+                marketplaceOrderItems {
+                  marketplaceProductVariation {
+                    name
+                    variationSku
+                  }
+                  qty
+                }
+                orderNo
+                type
+                paymentMethod
+                status
+                itemCount
+                shippingProvider
+                totalAmount
+                orderCreatedAt
+                orderUpdatedAt
+                updatedAt
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters, pagination, sortings }
+    })
+
+    if (!response.errors) {
+      const marketplaceOrderShippings = response.data.marketplaceOrderShippingsForBatchInit.items || []
+
+      return {
+        total: marketplaceOrderShippings.length || 0,
+        records:
+          marketplaceOrderShippings.map(itm => {
+            return {
+              ...itm,
+              status: itm.marketplaceOrder.status,
+              shippingProvider: itm.transporter,
+              ownShippingProvider: itm.ownTransporter
+            }
+          }) || []
+      }
+    }
+  }
+
+  async fetchShippingProvider() {
+    const filters = []
+    const response = await client.query({
+      query: gql`
+        query courierServices($filters: [Filter]) {
+          courierServices(filters: $filters) {
+            items {
+              id
+              name
+              description
+              transporterId
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters }
+    })
+
+    if (!response.errors) {
+      return response.data.courierServices
+    }
+  }
+
+  async fetchMarketplaceSettings() {
+    const filters = []
+    const sortings = []
+
+    const response = await client.query({
+      query: gql`
+        query marketplaceSettings($filters: [Filter], $sortings: [Sorting]) {
+          marketplaceSettings(filters: $filters, sortings: $sortings) {
+            items {
+              id
+              name
+              marketplaceStore {
+                id
+                name
+                storeName
+                platform
+                description
+              }
+              category
+              value
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters, sortings }
+    })
+
+    return response.data.marketplaceSettings.items || []
+  }
+
+  _batchUpdateSetHandler() {
+    const selectedData = this.dataGrist.selected
+    const shippingProviderValue = this.shippingProviderInput?.value
+
+    this.dataGrist._data.records = [
+      ...this.dataGrist._data.records.map(item => {
+        if (selectedData.find(selected => selected.id == item.id) && shippingProviderValue) {
+          return {
+            ...item,
+            shippingProvider: shippingProviderValue,
+            ownShippingProvider: shippingProviderValue
+          }
+        } else {
+          return item
+        }
+      })
+    ]
+
+    this.dataGrist.refresh()
+  }
+
+  async initLogistics() {
+    try {
+      let selectedData = this.dataGrist.selected
+      this._validateInit(selectedData)
+
+      const patches = selectedData.map(patch => {
+        return {
+          id: patch.id,
+          orderNo: patch.marketplaceOrder.orderNo,
+          trackingNo: patch?.trackingNo,
+          shippingProvider: patch?.shippingProvider
+        }
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation initialiseLogisticsByBatch($patches: [LogisticsInfo]!) {
+            initialiseLogisticsByBatch(patches: $patches)
+          }
+        `,
+        variables: { patches }
+      })
+
+      if (!response.errors) {
+        this.dispatchEvent(new CustomEvent('order-updated'))
+        history.back()
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async splitOrders() {
+    try {
+      let selectedData = this.dataGrist.selected
+      this._validateSplitting(selectedData)
+
+      const patches = selectedData.map(patch => {
+        return {
+          id: patch.marketplaceOrder.id,
+          orderNo: patch.orderNo
+        }
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation splitOrdersByBatch($patches: [LogisticsInfo]!) {
+            splitOrdersByBatch(patches: $patches)
+          }
+        `,
+        variables: { patches }
+      })
+
+      if (!response.errors) {
+        this.dispatchEvent(new CustomEvent('order-updated'))
+        history.back()
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  _validateInit(data) {
+    if (!data) {
+      throw new Error('No order to initiate logistics')
+    }
+
+    if (!this.shippingProviderInput?.value || this.shippingProviderInput.value == '') {
+      throw new Error('Shipping provider selection is required for initiate logistics')
+    }
+  }
+
+  _validateSplitting(data) {
+    if (!data) {
+      throw new Error('No order to split')
+    }
+
+    if (data.some(item => item.trackingNo)) {
+      throw new Error('Order with tracking no not allowed to split')
+    }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('batch-init-popup', BatchInitPopup)