@things-factory/operato-wms 5.0.13 → 6.0.0-alpha.1

package/client/pages/order/transport-order/delivery-note-popup.js

@@ -1,5 +1,11 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@things-factory/grist-ui'
+import '@things-factory/import-ui'
+import '@things-factory/component-ui'
+import '@things-factory/biz-ui'
+import { sleep } from '@operato/utils'
+import '../../outbound/transport-vehicles-popup'
+
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
 import { client } from '@things-factory/shell'
@@ -30,15 +36,83 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
       selectedCP: String,
       status: String,
       orderInfo: Object,
-      contactPointInput: String
+      contactPointInput: String,
+      roNo: String,
+      refNo: String,
+      coNo: String,
+      totalPalletQty: String,
+      _transportType: Array,
+      _statusOwnTransport: Boolean,
+      /* Shipping Form Field */
+      _contactPointId: String,
+      _contactPointName: String,
+      _companyName: String,
+      _deliveryCountry: String,
+      _deliveryPostCode: Array,
+      _deliveryState: String,
+      _deliveryCity: String,
+      _deliveryContact: String,
+      _selectedPostCode: String,
+      _billingCountry: String,
+      _billingPostCode: Array,
+      _billingState: String,
+      _billingCity: String,
+      _billingContact: String,
+      _selectedBillingPostCode: String,
+      _selectedOwnTransport: Boolean,
+      _valueOfTransportType: String,
+      _showCoNumber: Boolean,
+      _exportOption: Boolean,
+      _selectedDeliveryCountry: String,
+      _deliveryAllCountry: Array,
+      _billingAllCountry: Array,
+      _determineOwnCollection: String,
+
+      //  Export Form Field
+
+      _containerArrivalDate: Date,
+      _containerLeavingDate: Date,
+      _containerNo: String,
+      _shipName: String,
+
+      // Refractor
+      _deliveryOrder: Object,
+      _selectedCountry: String,
+      _selectedBillingCountry: String,
+
+      /* Tab Toggle*/
+      _showReleasedOrderInfo: Boolean,
+      _showShippingInfo: Boolean,
+      _disableBillingAddress: Boolean
     }
   }
 
   constructor() {
     super()
+    this._deliveryAllCountry = []
     this._otherDestination = false
     this._isDisabled = true
+    this._showReleasedOrderInfo = false
+    this._showShippingInfo = true
+    this._exportOption = false
+    this._companyName = ''
+    this._deliveryCountry = 'Malaysia'
+    this._deliveryPostCode = []
+    this._deliveryState = ''
+    this._deliveryCity = ''
+    this._deliveryContact = ''
+    this._billingCountry = 'Malaysia'
+    this._billingPostCode = []
+    this._billingState = ''
+    this._billingCity = ''
+    this._billingContact = ''
+    this._selectedPostCode = ''
+    this._selectedBillingPostCode = ''
+    this._selectedTransportType = ''
     this.status = ''
+    this._transportType = ['Own Transport', 'Warehouse Transport']
+    this._switchDeliveryCountryInput = false
+    this._switchBillingCountryInput = false
   }
 
   static get styles() {
@@ -58,6 +132,15 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
           min-height: 20vh;
         }
 
+        [title] {
+          margin-top: -10px;
+          margin-bottom: -10px;
+        }
+
+        [export] {
+          margin-top: -10px;
+        }
+
         .grist {
           display: flex;
           flex-direction: column;
@@ -90,6 +173,33 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
           background-color: var(--button-container-background);
           height: var(--button-container-height);
         }
+
+        .content-container {
+          overflow-y: auto;
+        }
+
+        [hidden] {
+          display: none;
+        }
+
+        .section-header {
+          grid-column: span 36 / auto !important;
+          text-align: left !important;
+          margin-top: 10px !important;
+          font-weight: 600 !important;
+        }
+        .quick-find-content-container {
+          margin: 0 15px;
+        }
+
+        @media screen and (max-width: 480px) {
+          .section-header {
+            grid-column: span 12 / auto !important;
+          }
+          .quick-find-content-container {
+            margin: 0;
+          }
+        }
       `
     ]
   }
@@ -99,10 +209,21 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     this._truckNo = this.orderInfo.truckNo || ''
     const deliverTo = this.orderInfo.deliverTo || {}
     this.selectedCP = deliverTo.id || null
-    this.contactPointInput.value =
-      deliverTo.contactName && deliverTo.address ? `${deliverTo.contactName}, ${deliverTo.address}` : ''
+    // this.contactPointInput.value = deliverTo.contactName && deliverTo.address ? `${deliverTo.contactName}, ${deliverTo.address}` : ''
+    await this.fetchCountry()
+    await this._getAllPostCode()
 
     await this.fetchDeliveryInfo(this.manualDo)
+    const roResponse = await this._fetchReleaseOrder(this.roNo)
+    const doRepsonse = await this._fetchDeliveryOrder(this.doNo)
+
+    this.totalPalletQty = doRepsonse.data.deliveryOrder.palletQty
+
+    roResponse !== undefined
+      ? roResponse.ownTransport == true
+        ? (this._showCoNumber = true)
+        : (this._showCoNumber = false)
+      : ''
 
     this._isDisabled = await fetchSettingRule('disable-reusable-pallet')
 
@@ -167,122 +288,352 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
   }
 
   render() {
+    const RELEASE_ORDER_TABS = {
+      SHIPPING_INFO: i18next.t('label.shipment'),
+      RELEASE_ORDER_INFO: i18next.t('label.order')
+    }
+
+    const orderSet = {
+      [RELEASE_ORDER_TABS.RELEASE_ORDER_INFO]: {},
+      [RELEASE_ORDER_TABS.SHIPPING_INFO]: {}
+    }
+
     return html`
-      <form id="input-form" name="doForm" class="multi-column-form">
-        <fieldset>
-          <legend>${i18next.t('title.delivery_information')} - ${this.doNo}</legend>
-          <label>${i18next.t('label.delivery_date')}</label>
-          <input
-            name="deliveryDate"
-            type="date"
-            min=${this.status === ORDER_STATUS.READY_TO_DISPATCH.value
-              ? `${this._getStdDate()}`
-              : `${this.orderInfo.createdDate}`}
-            value="${this.orderInfo.deliveryDate}"
-            required
-          />
+      <div class="quick-find-content-container">
+        <quick-find-content
+          id="order-items-list"
+          name="quickFindContent"
+          .data="${orderSet}"
+          @tabChanged="${e => {
+            this._tabChange(e.detail.currentTabKey)
+          }}"
+        ></quick-find-content>
+      </div>
 
-          <label>${i18next.t('label.driver_name')}</label>
-          <input name="otherDriver" value="${this.orderInfo.otherDriver}" ?hidden="${!this._ownCollection}" />
-          <input
-            name="ownDriver"
-            ?hidden="${this._ownCollection}"
-            value="${this.orderInfo.driverName}"
-            @click="${this._openDriverSelector.bind(this)}"
-            readonly
-          />
+      <div class="content-container">
+        <div ?hidden="${this._showReleasedOrderInfo}">
+          <form id="input-form" name="doForm" class="multi-column-form">
+            <legend>${i18next.t('title.delivery_information')} - ${this.doNo}</legend>
+            <label>${i18next.t('label.delivery_date')}</label>
+            <input
+              name="deliveryDate"
+              type="date"
+              min=${this.status === ORDER_STATUS.READY_TO_DISPATCH.value
+                ? `${this._getStdDate()}`
+                : `${this.orderInfo.createdDate}`}
+              value="${this.orderInfo.deliveryDate}"
+              required
+            />
 
-          <label>${i18next.t('label.truck_no')}</label>
-          <input name="otherTruck" ?hidden="${!this._ownCollection}" value="${this._truckNo}" />
-          <input
-            name="ownTruck"
-            ?hidden="${this._ownCollection}"
-            readonly
-            @click="${this._openTruckSelector.bind(this)}"
-            value="${this.orderInfo.truckNo || ''}"
-          />
+            <label>${i18next.t('label.release_good_no')}</label>
+            <input name="releaseGoodNo" ?disabled="${true}" value="${this.roNo}" />
 
-          <label ?hidden="${this._otherDestination}">${i18next.t('label.to')}</label>
-          <input
-            name="contactPoint"
-            ?hidden="${this._otherDestination}"
-            readonly
-            @click="${this._openCPSelector.bind(this)}"
-          />
+            <label>${i18next.t('label.ref_no')}</label>
+            <input name="refNo" ?disabled="${true}" value="${this.refNo}" />
 
-          <input
-            name="otherDestBoolean"
-            type="checkbox"
-            ?checked="${this._otherDestination}"
-            @change="${e => (this._otherDestination = e.currentTarget.checked)}"
-          />
-          <label>${i18next.t('label.other_destination')}</label>
+            <label>${i18next.t('label.transport_type')}</label>
+            <select
+              name="transportType"
+              @change=${e => {
+                this._setTransportType(e.target.value, e.target.name)
+              }}
+            >
+              ${this._transportType.map(
+                (tp, key) => html`<option value=${tp} ?selected=${this._determineOwnCollection === tp}>${tp}</option>`
+              )}
+            </select>
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_name')}</label>
-          <input name="contactName" ?hidden="${!this._otherDestination}" />
+            <label ?hidden="${this._showCoNumber}">${i18next.t('label.co_no')}</label>
+            <input name="coNo" ?hidden="${this._showCoNumber}" value="${this.coNo}" />
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_phone_no')}</label>
-          <input
-            name="contactPhone"
-            ?hidden="${!this._otherDestination}"
-            placeholder="(${i18next.t('text.optional')})"
-          />
+            <label>${i18next.t('label.driver_name')}</label>
+            <input name="otherDriver" value="${this.orderInfo.otherDriver}" ?hidden="${!this._ownCollection}" />
+            <input
+              name="ownDriver"
+              ?hidden="${this._ownCollection}"
+              value="${this.orderInfo.driverName}"
+              @click="${this._openDriverSelector.bind(this)}"
+              readonly
+            />
+
+            <label>${i18next.t('label.vehicle_no')}</label>
+            <input name="otherTruck" ?hidden="${!this._ownCollection}" value="${this._truckNo}" />
+            <input
+              name="ownTruck"
+              readonly
+              ?hidden="${this._ownCollection}"
+              @click="${this._openBufferSelector.bind(this)}"
+              value="${this.orderInfo.truckNo || ''}"
+            />
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_name')}</label>
+            <input name="contactName" ?hidden="${!this._otherDestination}" />
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_phone_no')}</label>
+            <input
+              name="contactPhone"
+              ?hidden="${!this._otherDestination}"
+              placeholder="(${i18next.t('text.optional')})"
+            />
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_email')}</label>
+            <input
+              name="contactEmail"
+              ?hidden="${!this._otherDestination}"
+              placeholder="(${i18next.t('text.optional')})"
+            />
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.company_name')}</label>
+            <input
+              name="contactCompany"
+              ?hidden="${!this._otherDestination}"
+              placeholder="(${i18next.t('text.optional')})"
+            />
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_type')}</label>
+            <select name="contactType" ?hidden="${!this._otherDestination}">
+              <option value="">-- ${i18next.t('text.please_select_the_contact_type')} --</option>
+              <!-- Temporarily use hardcoded value -->
+              <option value="CUSTOMER">${i18next.t('text.customer')}</option>
+              <option value="SUPPLIER">${i18next.t('text.supplier')}</option>
+            </select>
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.delivery_address')}</label>
+            <textarea name="otherDestination" ?hidden="${!this._otherDestination}"></textarea>
+
+            <label ?hidden="${!this._otherDestination}">${i18next.t('label.billing_address')}</label>
+            <textarea name="billingAddress" ?hidden="${!this._otherDestination}"></textarea>
+
+            <label>${i18next.t('label.total_pallet_qty')}</label>
+            <input name="totalPalletQty" value="${this.totalPalletQty}" />
+
+            <label>${i18next.t('label.overall_remark')}</label>
+            <textarea name="remark" value="${this.orderInfo.remark}">${this.orderInfo.remark}</textarea>
+
+            <input
+              id="exportOption"
+              type="checkbox"
+              name="exportOption"
+              ?hidden=${this._determineOwnCollection == 'Warehouse Transport'}
+              ?checked="${this._exportOption}"
+              @change="${e => {
+                this._exportOption = e.currentTarget.checked
+                if (this._exportOption == true) {
+                  this._exportOption = true
+                  this._valueOfTransportType = 'Own Transport'
+                  this._showCoNumber = false
+                }
+                if (this._exportOption == false) {
+                  this._exportOption = false
+                  this._showCoNumber = true
+                  this._valueOfTransportType = 'Warehouse Transport'
+                }
+              }}"
+            />
+            <label for="exportOption" ?hidden=${this._determineOwnCollection == 'Warehouse Transport'}
+              >${i18next.t('label.export')}</label
+            >
+          </form>
+        </div>
+
+        <div class="so-form-container" export ?hidden=${!this._exportOption}>
+          <form name="shippingOrder" class="multi-column-form">
+            <fieldset>
+              <legend>${i18next.t('title.export_order')}</legend>
+              <label>${i18next.t('label.container_no')}</label>
+              <input name="containerNo" .value="${this._containerNo}" required />
+
+              <label>${i18next.t('label.container_arrival_date')}</label>
+              <input
+                name="containerArrivalDate"
+                type="date"
+                .value="${this._containerArrivalDate}"
+                @change="${e => {
+                  this._containerLeavingDateInput.setAttribute('min', e.currentTarget.value)
+                }}"
+                required
+              />
+
+              <label>${i18next.t('label.container_leaving_date')}</label>
+              <input
+                name="containerLeavingDate"
+                type="date"
+                .value="${this._containerLeavingDate}"
+                @change="${e => {
+                  this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
+                }}"
+                required
+              />
+
+              <label>${i18next.t('label.ship_name')}</label>
+              <input name="shipName" .value="${this._shipName}" required />
+            </fieldset>
+          </form>
+        </div>
+
+        <form name="shippingInfo" class="multi-column-form" autocomplete="off" ?hidden="${this._showShippingInfo}">
+          <legend>${i18next.t('title.shipping_information')}</legend>
+
+          <label>${i18next.t('label.company')}</label>
+          <input name="attentionCompany" .value="${this._deliveryOrder?.attentionCompany}" />
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_email')}</label>
+          <label>${i18next.t('label.attention_to')}</label>
+          <input name="attentionTo" .value="${this._deliveryOrder?.attentionTo}" />
+
+          <button type="button" @click="${this._openContactPointSelector.bind(this)}">import</button>
+
+          <!-- delivery -->
+          <label class="section-header">${i18next.t('label.delivery_address')}</label>
+          <label>${i18next.t('label.country')}</label>
+
+          <select
+            name="country"
+            @change=${e => {
+              this._validateCountry(e)
+            }}
+          >
+            ${this._deliveryAllCountry?.map(
+              (country, key) =>
+                html`<option value=${country.name} ?selected=${country.name === this._selectedCountry}>
+                  ${country.name}
+                </option>`
+            )}
+          </select>
+
+          <label>${i18next.t('label.zip_postal_code')}</label>
+          ${this._selectedCountry !== 'MALAYSIA'
+            ? html` <input name="postalCode" .value="" /> `
+            : html`<select
+                name="postalCode"
+                @change=${e => {
+                  this._getStateAndCityByPostCode(e.target.value, e.target.name)
+                }}
+                value=${this?._selectedPostCode || ''}
+              >
+                <option value=""></option>
+                ${this._deliveryPostCode.map(
+                  (country, key) =>
+                    html`<option
+                      ?selected=${(this._selectedPostCode?.length > 0
+                        ? this._selectedPostCode
+                        : this._deliveryOrder.postalCode) == country.postalCode}
+                      value=${country.postalCode}
+                    >
+                      ${country.postalCode}
+                    </option>`
+                )}
+              </select>`}
+
+          <label>${i18next.t('label.state')}</label>
+          <input name="state" required .value="${this._deliveryOrder?.state}" />
+
+          <label>${i18next.t('label.city')}</label>
+          <input name="city" required .value="${this._deliveryOrder?.city}" />
+
+          <label>${i18next.t('label.delivery_address')}</label>
+          <textarea name="deliveryAddress1" required .value="${this._deliveryOrder?.deliveryAddress1}"></textarea>
+
+          <label>${i18next.t('label.contact')}</label>
+          <input name="phone1" required .value="${this._deliveryOrder?.phone1}" />
+
+          <!-- billing -->
+          <label class="section-header">${i18next.t('label.billing_address')}</label>
+          <label>${i18next.t('label.country')}</label>
+          <select
+            name="billingCountry"
+            ?disabled=${this._disableBillingAddress}
+            @change=${e => {
+              this._validateBillingCountry(e)
+            }}
+          >
+            ${this._deliveryAllCountry.map(
+              (country, key) =>
+                html`<option value=${country.name} ?selected=${country.name === this._selectedBillingCountry}>
+                  ${country.name}
+                </option>`
+            )}
+          </select>
+
+          <label>${i18next.t('label.zip_postal_code')}</label>
+
+          ${this._selectedBillingCountry !== 'MALAYSIA'
+            ? html`
+                <input
+                  ?disabled=${this._disableBillingAddress}
+                  name="billingPostalCode"
+                  .value=${this._deliveryOrder?.billingPostalCode}
+                />
+              `
+            : html`<select
+                ?disabled=${this._disableBillingAddress}
+                name="billingPostalCode"
+                @change=${e => {
+                  this._getStateAndCityByPostCode(e.target.value, e.target.name)
+                }}
+                value=${this._deliveryOrder?.billingPostalCode}
+              >
+                <option value=""></option>
+
+                ${this._billingPostCode.map(
+                  (country, key) => html`<option
+                    value=${country.postalCode}
+                    ?selected=${this._deliveryOrder.billingPostalCode == country.postalCode}
+                  >
+                    ${country.postalCode}
+                  </option>`
+                )}
+              </select>`}
+
+          <label>${i18next.t('label.state')}</label>
           <input
-            name="contactEmail"
-            ?hidden="${!this._otherDestination}"
-            placeholder="(${i18next.t('text.optional')})"
+            ?disabled=${this._disableBillingAddress}
+            name="billingState"
+            required
+            .value="${this._deliveryOrder?.billingState}"
           />
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.company_name')}</label>
+          <label>${i18next.t('label.city')}</label>
           <input
-            name="contactCompany"
-            ?hidden="${!this._otherDestination}"
-            placeholder="(${i18next.t('text.optional')})"
+            ?disabled=${this._disableBillingAddress}
+            name="billingCity"
+            required
+            .value="${this._deliveryOrder?.billingCity}"
           />
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.contact_type')}</label>
-          <select name="contactType" ?hidden="${!this._otherDestination}">
-            <option value="">-- ${i18next.t('text.please_select_the_contact_type')} --</option>
-            <!-- Temporarily use hardcoded value -->
-            <option value="CUSTOMER">${i18next.t('text.customer')}</option>
-            <option value="SUPPLIER">${i18next.t('text.supplier')}</option>
-          </select>
-
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.delivery_address')}</label>
-          <textarea name="otherDestination" ?hidden="${!this._otherDestination}"></textarea>
+          <label>${i18next.t('label.billing_address')}</label>
+          <textarea
+            ?disabled=${this._disableBillingAddress}
+            name="billingAddress"
+            required
+            .value="${this._deliveryOrder?.billingAddress}"
+          ></textarea>
 
-          <label ?hidden="${!this._otherDestination}">${i18next.t('label.billing_address')}</label>
-          <textarea name="billingAddress" ?hidden="${!this._otherDestination}"></textarea>
+          <input
+            type="checkbox"
+            id="matchDeliveryAddress"
+            name="matchDeliveryAddressInputa"
+            ?checked=${this._deliveryOrder?.postalCode == this._deliveryOrder?.billingPostalCode &&
+            this._deliveryOrder?.billingAddress == this._deliveryOrder?.deliveryAddress1}
+            @click=${e => {
+              e.currentTarget.checked ? (this._disableBillingAddress = true) : (this._disableBillingAddress = false)
+            }}
+          />
+          <label for="matchDeliveryAddress">${i18next.t('label.match_delivery_address')}</label>
+        </form>
 
-          <label>${i18next.t('label.overall_remark')}</label>
-          <textarea name="remark" value="${this.orderInfo.remark}">${this.orderInfo.remark}</textarea>
+        <div class="container">
+          <div class="grist">
+            <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.edit_remark')}</h2>
 
-          <label ?hidden="${this._isDisabled}">${i18next.t('label.reusable_pallet')}</label>
-          <textarea
-            name="reusablePallet"
-            ?hidden="${this._isDisabled}"
-            ?disabled="${this._isDisabled}"
-            value="${this.orderInfo.reusablePallet}"
-            placeholder="(${i18next.t('text.optional')})"
-          >${this.orderInfo.reusablePallet}</textarea>
-        </fieldset>
-      </form>
-
-      <div class="container">
-        <div class="grist">
-          <h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.edit_remark')}</h2>
-
-          <data-grist
-            id="do-grist"
-            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-            .config=${this.doGristConfig}
-            .data=${this.doData}
-          ></data-grist>
+            <data-grist
+              id="do-grist"
+              .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+              .config=${this.doGristConfig}
+              .data=${this.doData}
+            ></data-grist>
+          </div>
         </div>
       </div>
-
       <div class="button-container">
         <mwc-button
           @click="${this._saveDeliveryInfo.bind(this)}"
@@ -295,10 +646,50 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     `
   }
 
+  get getDeliveryOrderForm() {
+    return this.shadowRoot.querySelector('form[name=deliveryOrderInfo]')
+  }
+
+  get shippingInfoForm() {
+    return this.shadowRoot.querySelector('form[name=shippingInfo]')
+  }
+
+  get deliveryAddressForm() {
+    return this.shadowRoot.querySelector('form[name=deliveryAddressInfo]')
+  }
+
+  get billingAddressForm() {
+    return this.shadowRoot.querySelector('form[name=billingAddressInfo]')
+  }
+
+  get contactPointForm() {
+    return this.shadowRoot.querySelector('form[name=contactPointInfo]')
+  }
+
+  get _getBillingPostalCodeInput() {
+    return this.shadowRoot.querySelector('select[name=billingPostalCode]')
+  }
+
+  get shippingOrderForm() {
+    return this.shadowRoot.querySelector('form[name=shippingOrder]')
+  }
+
+  get _exportOptionInput() {
+    return this.shadowRoot.querySelector('input[name=exportOption]')
+  }
+
   get doForm() {
     return this.shadowRoot.querySelector('form[name=doForm]')
   }
 
+  get otherDriverInput() {
+    return this.shadowRoot.querySelector('input[name=otherDriver]')
+  }
+
+  get otherTruckInput() {
+    return this.shadowRoot.querySelector('input[name=otherTruck]')
+  }
+
   get contactPointInput() {
     return this.shadowRoot.querySelector('input[name=contactPoint]')
   }
@@ -307,6 +698,26 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     return this.shadowRoot.querySelector('input[name=ownTruck]')
   }
 
+  get _otherTruckInput() {
+    return this.shadowRoot.querySelector('input[name=otherTruck]')
+  }
+
+  get _cityInput() {
+    return this.shadowRoot.querySelector('input[name=city]')
+  }
+
+  get _stateInput() {
+    return this.shadowRoot.querySelector('input[name=state]')
+  }
+
+  get _cityBillingInput() {
+    return this.shadowRoot.querySelector('input[name=billingCity]')
+  }
+
+  get _stateBillingInput() {
+    return this.shadowRoot.querySelector('input[name=billingState]')
+  }
+
   get _truckDriverInput() {
     return this.shadowRoot.querySelector('input[name=ownDriver]')
   }
@@ -346,6 +757,24 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     return obj
   }
 
+  _setTransportType(e, v) {
+    if (e == 'Own Transport') {
+      this._showCoNumber = false
+      this._ownCollection = true
+      this._determineOwnCollection = 'Own Transport'
+      this._otherTruckInput.value = ''
+      this.otherDriverInput.value = ''
+    } else {
+      this._showCoNumber = true
+      this._exportOption = false
+      this._exportOptionInput.checked = false
+      this._ownCollection = false
+      this._determineOwnCollection = 'Warehouse Transport'
+      this._truckNoInput.value = ''
+      this._truckDriverInput.value = ''
+    }
+  }
+
   _openCPSelector() {
     openPopup(
       html`
@@ -382,6 +811,23 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     )
   }
 
+  async _openBufferSelector() {
+    openPopup(
+      html`
+        <transport-vehicles-popup
+          @selected="${e => {
+            this._truckNoInput.value = e.detail.name
+          }}"
+        ></transport-vehicles-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('label.lorry_no')
+      }
+    )
+  }
+
   _openDriverSelector() {
     openPopup(
       html`
@@ -399,6 +845,101 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     )
   }
 
+  _openContactPointSelector() {
+    openPopup(
+      html`
+        <contact-points-popup
+          @selected="${e => {
+            this._fillUpDeliveryInfo(e.detail)
+          }}"
+        ></contact-points-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.select_destination')
+      }
+    )
+  }
+
+  async _getAllPostCode() {
+    try {
+      const response = await client.query({
+        query: gql`
+          query geoAreasAllPostCode {
+            geoAreasAllPostCode {
+              items {
+                postalCode
+              }
+              total
+            }
+          }
+        `
+      })
+
+      if (!response.errors) {
+        const items = response.data.geoAreasAllPostCode.items
+        this._deliveryPostCode = items
+        this._billingPostCode = items
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async _getStateAndCityByPostCode(value, name) {
+    const postCode = value
+
+    // If user select the first empty postal code, the city and state will change to empty
+    if (postCode == '') {
+      if (name == 'postalCode') {
+        this._cityInput.value = ''
+        this._stateInput.value = ''
+        return
+      } else if (name == 'billingPostalCode') {
+        this._cityBillingInput.value = ''
+        this._stateBillingInput.value = ''
+        return
+      }
+    }
+
+    try {
+      const response = await client.query({
+        query: gql`
+          query geoAreasGetStateAndCityByPosCode($postCode: String!) {
+            geoAreasGetStateAndCityByPosCode(postCode: $postCode) {
+              stateName
+              cityName
+            }
+          }
+        `,
+        variables: {
+          postCode
+        }
+      })
+
+      if (!response.errors) {
+        const { stateName, cityName } = response.data.geoAreasGetStateAndCityByPosCode
+
+        switch (name) {
+          case 'postalCode':
+            this._cityInput.value = stateName
+            this._stateInput.value = cityName.toUpperCase()
+            break
+
+          case 'billingPostalCode':
+            this._cityBillingInput.value = stateName
+            this._stateBillingInput.value = cityName.toUpperCase()
+
+          default:
+            break
+        }
+      }
+    } catch (error) {
+      this._showToast(e)
+    }
+  }
+
   async _fetchTruckDriver() {
     const response = await client.query({
       query: gql`
@@ -452,6 +993,7 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
   }
 
   async fetchDeliveryInfo(isManualDO) {
+    let responseData = ''
     if (isManualDO) {
       const response = await client.query({
         query: gql`
@@ -462,6 +1004,7 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
                 releaseUomValue
                 status
                 remark
+                palletQty
                 systemRemark
                 batchId
                 productId
@@ -481,7 +1024,9 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
         this.doData = {
           records: response.data.manualDeliveryOrderItems.items || []
         }
+        this.totalPalletQty = this.doData.palletQty
       }
+      responseData = response
     } else {
       const response = await client.query({
         query: gql`
@@ -492,6 +1037,7 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
                 releaseUomValue
                 status
                 remark
+                palletQty
                 systemRemark
                 batchId
                 productName
@@ -510,11 +1056,43 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
         this.doData = {
           records: response.data.deliveryOrderItems.items || []
         }
+
+        this.totalPalletQty = this.doData.palletQty
       }
+      responseData = response
     }
+
+    return responseData
   }
 
   async _saveDeliveryInfo() {
+    let shippingOrderInfo = {}
+
+    let contactPointInfo = this._serializeForm(this.shippingInfoForm)
+
+    let exportInfo = {}
+    if (this.shippingOrderForm != null) {
+      exportInfo = this._serializeForm(this.shippingOrderForm)
+    } else {
+      exportInfo = {}
+    }
+
+    shippingOrderInfo = {
+      ...contactPointInfo
+    }
+
+    delete shippingOrderInfo['']
+    delete shippingOrderInfo.matchDeliveryAddressInputa
+
+    // If match delivery address is ticked, all the billing address info will be the same with delivery address info
+    if (this._disableBillingAddress) {
+      shippingOrderInfo.billingAddress = contactPointInfo.deliveryAddress1
+      shippingOrderInfo.billingPostalCode = contactPointInfo.postalCode
+      shippingOrderInfo.billingCity = contactPointInfo.city
+      shippingOrderInfo.billingState = contactPointInfo.state
+      shippingOrderInfo.billingCountry = contactPointInfo.country
+    }
+
     try {
       let response = null
       if (this.manualDo) {
@@ -537,8 +1115,18 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
       } else {
         response = await client.mutate({
           mutation: gql`
-            mutation dispatchDeliveryOrder($orderInfo: DeliveryOrderPatch, $orderItems: [OrderInventoryPatch!]) {
-              dispatchDeliveryOrder(orderInfo: $orderInfo, orderItems: $orderItems) {
+            mutation dispatchDeliveryOrder(
+              $orderInfo: DeliveryOrderPatch
+              $orderItems: [OrderInventoryPatch!]
+              $shippingInfo: ShippingOrderInfoPatch
+              $exportInfo: ExportInformationPatch
+            ) {
+              dispatchDeliveryOrder(
+                orderInfo: $orderInfo
+                orderItems: $orderItems
+                shippingInfo: $shippingInfo
+                exportInfo: $exportInfo
+              ) {
                 id
                 name
                 description
@@ -548,7 +1136,9 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
           `,
           variables: {
             orderInfo: { ...this._getDeliveryInfo() },
-            orderItems: this._getOrderItems()
+            orderItems: this._getOrderItems(),
+            shippingInfo: shippingOrderInfo ? shippingOrderInfo : null,
+            exportInfo: exportInfo ? exportInfo : null
           }
         })
       }
@@ -567,6 +1157,235 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     }
   }
 
+  async fetchCountry() {
+    const response = await client.query({
+      query: gql`
+        query geoCountriesWithoutParam {
+          geoCountriesWithoutParam {
+            items {
+              id
+              name
+              description
+            }
+          }
+        }
+      `
+    })
+
+    if (!response.error) {
+      this._billingAllCountry = response.data.geoCountriesWithoutParam.items
+      this._deliveryAllCountry = response.data.geoCountriesWithoutParam.items
+    }
+  }
+
+  async _fetchReleaseOrder(roNo) {
+    if (!roNo) return
+    const response = await client.query({
+      query: gql`
+        query releaseGoodDetail($name: String!) {
+          releaseGoodDetail(name: $name) {
+            id
+            name
+            truckNo
+            type
+            attentionTo
+            attentionCompany
+            phone1
+            deliveryAddress1
+            billingAddress
+            billingCity
+            billingCountry
+            billingPostalCode
+            billingState
+            city
+            state
+            postalCode
+            country
+            remark
+            bizplace {
+              id
+              name
+            }
+            invStatus
+            status
+            refNo
+            refNo2
+            refNo3
+            ownTransport
+            crossDocking
+            arrivalNotice {
+              name
+            }
+            exportOption
+            courierOption
+            packingOption
+            releaseDate
+            collectionOrderNo
+            attachment {
+              id
+              name
+              refBy
+              path
+              mimetype
+            }
+            bizplace {
+              id
+              name
+              description
+            }
+            inventoryInfos {
+              id
+              name
+              batchId
+              batchIdRef
+              palletId
+              product {
+                id
+                sku
+                brand
+                name
+                description
+              }
+              productName
+              packingType
+              packingSize
+              qty
+              lockedQty
+              lockedUomValue
+              uomValue
+              releaseQty
+              releaseUomValue
+              uom
+              location {
+                id
+                name
+              }
+              status
+            }
+            shippingOrderInfo {
+              id
+              containerNo
+              containerLeavingDate
+              containerArrivalDate
+              shipName
+            }
+            orderVass {
+              vas {
+                name
+                operationGuide
+                operationGuideType
+              }
+              set
+              targetType
+              targetBatchId
+              targetProduct {
+                id
+                name
+                description
+              }
+              packingType
+              qty
+              uomValue
+              otherTarget
+              description
+              remark
+              status
+              operationGuide
+            }
+          }
+        }
+      `,
+      variables: { name: roNo }
+    })
+
+    if (!response.errors) {
+      const releaseOrder = response.data.releaseGoodDetail
+      // shipment info
+      this._companyName = releaseOrder?.attentionCompany
+      this._deliveryCity = releaseOrder?.city
+      this._deliveryState = releaseOrder?.state
+      this._deliveryCountry = releaseOrder?.country
+      this._deliveryContact = releaseOrder?.phone1
+      this._selectedBillingPostCode = releaseOrder?.billingPostalCode
+      this._billingCity = releaseOrder?.billingCity
+      this._billingState = releaseOrder?.billingState
+      this._billingCountry = releaseOrder?.billingCountry
+      this._selectedOwnTransport = releaseOrder?.ownTransport
+      this.coNo = releaseOrder?.collectionOrderNo
+      this._containerArrivalDate = releaseOrder?.shippingOrderInfo.containerArrivalDate
+      this._containerLeavingDate = releaseOrder?.shippingOrderInfo.containerLeavingDate
+      this._containerNo = releaseOrder?.shippingOrderInfo.containerNo
+      this._shipName = releaseOrder?.shippingOrderInfo.shipName
+      this._exportOption = releaseOrder?.exportOption
+
+      return releaseOrder
+    }
+  }
+
+  async _fetchDeliveryOrder(doNo) {
+    if (!doNo) return
+
+    const response = await client.query({
+      query: gql`
+        query deliveryOrder($name: String!) {
+          deliveryOrder(name: $name) {
+            palletQty
+            ownCollection
+            attentionTo
+            attentionCompany
+            city
+            state
+            postalCode
+            country
+            phone1
+            deliveryAddress1
+            billingAddress
+            billingCountry
+            billingPostalCode
+            billingState
+            billingCity
+          }
+        }
+      `,
+      variables: { name: doNo }
+    })
+
+    this._ownCollection = response.data.deliveryOrder.ownCollection
+
+    const deliveryOrder = response.data.deliveryOrder
+
+    this._deliveryOrder = {
+      ...deliveryOrder
+    }
+
+    this._fillupDAForm(deliveryOrder)
+
+    this._fillupBLForm(deliveryOrder)
+
+    this._fillupCPForm(deliveryOrder)
+
+    if (
+      deliveryOrder?.postalCode === deliveryOrder?.billingPostalCode &&
+      deliveryOrder?.billingAddress === deliveryOrder?.deliveryAddress1
+    ) {
+      this._disableBillingAddress = true
+    } else {
+      this._disableBillingAddress = false
+    }
+
+    if (response.data.deliveryOrder.ownCollection) {
+      this._determineOwnCollection = 'Own Transport'
+    } else {
+      this._determineOwnCollection = 'Warehouse Transport'
+    }
+
+    return response
+  }
+
+  initProperties() {
+    this._transportType = ['Own Transport', 'Warehouse Transport']
+  }
+
   _validateDeliveryInfo() {
     let errorFields = []
 
@@ -574,11 +1393,11 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     const transportFields = this._ownCollection
       ? {
           otherDriver: i18next.t('field.driver_name'),
-          otherTruck: i18next.t('field.truck_no')
+          otherTruck: i18next.t('field.vehicle_no')
         }
       : {
           ownDriver: i18next.t('field.driver_name'),
-          ownTruck: i18next.t('field.truck_no')
+          ownTruck: i18next.t('field.vehicle_no')
         }
 
     // destination field entries
@@ -612,7 +1431,25 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
 
   _getDeliveryInfo() {
     if (this.shadowRoot.querySelector('form').checkValidity()) {
-      this._validateDeliveryInfo()
+      // this._validateDeliveryInfo()
+
+      if (this._ownCollection) {
+        if (this.otherDriverInput.value == '') {
+          throw new Error(i18next.t('text.driver_is_empty'))
+        }
+
+        if (this.otherTruckInput.value == '') {
+          throw new Error(i18next.t('text.vehicle_no_is_empty'))
+        }
+      } else {
+        if (this._truckNoInput.value == '') {
+          throw new Error(i18next.t('text.vehicle_no_is_empty'))
+        }
+
+        if (this._truckDriverInput.value == '') {
+          throw new Error(i18next.t('text.driver_is_empty'))
+        }
+      }
 
       const deliveryInfo = this._serializeForm(this.doForm)
       delete deliveryInfo.otherDestBoolean
@@ -621,7 +1458,10 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
         ...deliveryInfo,
         name: this.doNo,
         contactPoint: this._otherDestination ? null : this.selectedCP,
-        otherTruck: this._ownCollection ? deliveryInfo.otherTruck.toUpperCase().replace(/\s+/g, '') : null
+        otherTruck:
+          this._ownCollection && deliveryInfo.otherTruck
+            ? deliveryInfo.otherTruck.toUpperCase().replace(/\s+/g, '')
+            : null
       }
     } else {
       throw new Error(i18next.t('text.delivery_info_not_valid'))
@@ -646,6 +1486,109 @@ class DeliveryNotePopup extends localize(i18next)(LitElement) {
     }
   }
 
+  async _tabChange(key) {
+    if (key == 'order') {
+      this._showReleasedOrderInfo = false
+      this._showShippingInfo = true
+      this.initProperties()
+    } else {
+      await this._getAllPostCode()
+      this._showReleasedOrderInfo = true
+      this._showShippingInfo = false
+      this._exportOption = false
+    }
+  }
+
+  _fillUpDeliveryInfo(data) {
+    // remapping according release good table
+    const remapData = {
+      attentionCompany: data.companyName || '',
+      attentionTo: data.name || '',
+      city: data.city || '',
+      state: data.state || '',
+      postalCode: data.postCode || '',
+      country: 'Malaysia',
+      phone1: data.phone || '',
+      deliveryAddress1: data.address ? data.address : '' + data.address2 ? data.address2 : '',
+      billingAddress: data.billingAddress
+    }
+
+    this._selectedPostCode = data.postCode
+
+    this._fillupForm(this.shippingInfoForm, remapData)
+  }
+
+  _resetShippingInfoForm() {
+    this.getContactPointForm.reset()
+  }
+
+  _fillupForm(form, data) {
+    if (form) {
+      form.reset()
+      for (let key in data) {
+        Array.from(form.querySelectorAll('input, textarea', 'select')).forEach(field => {
+          if (field.name === key && field.type === 'checkbox') {
+            field.checked = data[key]
+          } else if (field.name === key && field.type === 'datetime-local') {
+            const datetime = Number(data[key])
+            const timezoneOffset = new Date(datetime).getTimezoneOffset() * 60000
+            field.value = new Date(datetime - timezoneOffset).toISOString().slice(0, -1)
+          } else if (field.name === key) {
+            if (data[key] instanceof Object) {
+              const objectData = data[key]
+              field.value = `${objectData.name} ${objectData.description ? `(${objectData.description})` : ''}`
+            } else {
+              field.value = data[key]
+            }
+          }
+        })
+      }
+    }
+  }
+
+  _validateCountry(e) {
+    if (e.target.value != 'MALAYSIA') {
+      this._selectedCountry = e.target.value
+    } else {
+      this._selectedCountry = e.target.value
+    }
+  }
+
+  _validateBillingCountry(e) {
+    if (e.target.value != 'MALAYSIA') {
+      this._selectedBillingCountry = e.target.value
+    } else {
+      this._selectedBillingCountry = e.target.value
+    }
+  }
+
+  _fillupDAForm(data) {
+    this._fillupForm(this.deliveryAddressForm, data)
+    this._selectedCountry = data.country || 'MALAYSIA'
+    this._deliveryOrder.postalCode = data.postalCode
+  }
+
+  _fillupBLForm(data) {
+    this._fillupForm(this.billingAddressForm, data)
+    this._selectedBillingCountry = data.billingCountry || 'MALAYSIA'
+    this._deliveryOrder.billingPostalCode = data.billingPostalCode
+  }
+
+  _fillupCPForm(data) {
+    this._fillupForm(this.contactPointForm, data)
+  }
+
+  _serializeFormRO(form) {
+    let obj = {}
+    Array.from(form.querySelectorAll('input, select')).forEach(field => {
+      if (!field.hasAttribute('hidden') && field.value) {
+        obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
+      }
+    })
+
+    return obj
+  }
+
   _showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {