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

package/client/pages/order/release-order/release-order-detail.js

@@ -1,9 +1,13 @@
+import '@things-factory/biz-ui'
 import '@things-factory/grist-ui'
 import '../../components/attachment-viewer'
 import '../../components/vas-templates'
 import './release-extra-product-popup'
 import '../../components/popup-note'
+import '@things-factory/component-ui'
+import '@things-factory/import-ui'
 
+import { getCodeByName } from '@things-factory/code-base'
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -19,6 +23,7 @@ import { isMobileDevice } from '@things-factory/utils'
 import { fetchSettingRule } from '../../../fetch-setting-value'
 import {
   ORDER_STATUS,
+  PICKING_STANDARD,
   VAS_BATCH_AND_PRODUCT_TYPE,
   VAS_BATCH_NO_TYPE,
   VAS_ETC_TYPE,
@@ -39,11 +44,13 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       _courierOption: Boolean,
       _packingOption: Boolean,
       roType: String,
+      _orderMethod: String,
       customerBizplaceId: String,
       partnerBizplaceId: String,
       inventoryGristConfig: Object,
       vasGristConfig: Object,
       inventoryData: Object,
+      orderInventoryData: Object,
       vasData: Object,
       _attachments: Array,
       _status: String,
@@ -56,7 +63,47 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       _containerLeavingDate: Date,
       _vasExpanded: Boolean,
       _beforeRemark: String,
-      isUserBelongsDomain: Boolean
+      isUserBelongsDomain: Boolean,
+      _isInBatchPicking: Boolean,
+      /* Shipping Form Field */
+      _contactPointId: String,
+      _contactPointName: String,
+      _companyName: String,
+      _attentionTo: String,
+      _deliveryCountry: String,
+      _deliveryPostCode: Array,
+      _deliveryState: String,
+      _deliveryCity: String,
+      _deliveryContact: String,
+      _deliveryFullAddress: String,
+      _selectedPostCode: String,
+      _selectedDeliveryCountry: String,
+      _billingCountry: String,
+      _billingPostCode: Array,
+      _billingState: String,
+      _billingCity: String,
+      _billingContact: String,
+      _billingFullAddress: String,
+      _selectedBillingPostCode: String,
+      _deliveryAllCountry: Array,
+      _containerClosureDate: Date,
+      _recallOption: Boolean,
+
+      // Export Form Field
+      containerSizes: Array,
+      _remindContainerDepature: Boolean,
+
+      // Refractor
+      _shippingInfo: Object,
+      _selectedCountry: String,
+      _selectedBillingCountry: String,
+
+      /* Tab Toggle*/
+      _showReleasedOrderInfo: Boolean,
+      _showShippingInfo: Boolean,
+      _disableBillingAddress: Boolean,
+      _showExportInfo: Boolean,
+      currentTab: Object
     }
   }
 
@@ -90,6 +137,12 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
           overflow-y: hidden;
           flex: 1;
         }
+
+        .label-remind-container-departure {
+          margin-left: 20px;
+          width: 50%;
+        }
+
         h2 {
           padding: var(--subtitle-padding);
           font: var(--subtitle-font);
@@ -127,6 +180,10 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         h2.vas-title {
           padding-bottom: 0px;
         }
+        [title] {
+          margin-top: -5px;
+          margin-bottom: -5px;
+        }
 
         [options-wrap] *,
         [attachment-wrap] a * {
@@ -142,6 +199,15 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         [attachment-wrap] {
           grid-column: span 9 / auto;
         }
+        [remind-wrap] {
+          display: flex;
+          flex-direction: row;
+          grid-column: span 36 / auto;
+        }
+        [remind-wrap] label {
+          width: 8%;
+        }
+
         [attachment-wrap] a {
           display: block;
           text-overflow: ellipsis;
@@ -169,226 +235,464 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         .form-container > form {
           flex: 1;
         }
+
+        [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;
+          }
+        }
       `
     ]
   }
 
   render() {
+    const RELEASE_ORDER_TABS = {
+      RELEASE_ORDER_INFO: i18next.t('label.order'),
+      SHIPPING_INFO: i18next.t('label.shipment'),
+      EXPORT_INFO: i18next.t('label.export')
+    }
+
+    const orderSet = {
+      [RELEASE_ORDER_TABS.RELEASE_ORDER_INFO]: {},
+      [RELEASE_ORDER_TABS.SHIPPING_INFO]: {},
+      [RELEASE_ORDER_TABS.EXPORT_INFO]: {}
+    }
+
+    const disabledKey = {
+      export: this._exportOption
+    }
+
     return html`
-      <div class="form-container">
-        <form name="releaseOrder" class="multi-column-form">
-          <fieldset>
-            <legend>${i18next.t('title.release_order_no')}: ${this._releaseOrderNo}</legend>
-
-            <label>${i18next.t('label.options')}</label>
-            <div options-wrap>
-              <input
-                id="ownTransport"
-                type="checkbox"
-                name="ownTransport"
-                ?checked="${this._ownTransport}"
-                ?disabled="${this._disableTransport || !this?._editable}"
-                @change="${e => {
-                  this._ownTransport = e.currentTarget.checked
-                  if (this._ownTransport) {
-                    this._warehouseTransportInput.checked = false
-                    this._warehouseTransport = false
-                  } else {
-                    this._warehouseTransportInput.checked = true
-                    this._warehouseTransport = true
-                    this._exportInput.checked = false
-                    this._exportOption = false
-                  }
-                  this._validateTransport()
-                }}"
-              />
-              <label for="ownTransport">${i18next.t('label.own_transport')}</label>
-
-              <input
-                id="warehouseTransport"
-                type="checkbox"
-                name="warehouseTransport"
-                ?checked="${!this._ownTransport}"
-                ?disabled="${this._disableTransport || !this?._editable}"
-                @change="${e => {
-                  this._warehouseTransport = e.currentTarget.checked
-                  if (this._warehouseTransport) {
-                    this._ownTransportInput.checked = false
-                    this._ownTransport = false
-                    this._exportInput.checked = false
-                    this._exportOption = false
-                  } else {
-                    this._ownTransportInput.checked = true
-                    this._ownTransport = true
-                  }
-                  this._validateTransport()
-                }}"
-              />
-              <label for="warehouseTransport">${i18next.t('label.warehouse_transport')}</label>
-
-              <input
-                id="courierOption"
-                type="checkbox"
-                name="courierOption"
-                ?checked="${this._courierOption}"
-                disabled
-              />
-              <label>${i18next.t('label.courier')}</label>
-
-              <input
-                id="packingOption"
-                type="checkbox"
-                name="packingOption"
-                ?checked="${this._packingOption}"
-                disabled
-              />
-              <label>${i18next.t('label.packing')}</label>
-
-              <input
-                id="exportOption"
-                type="checkbox"
-                name="exportOption"
-                ?checked="${this._exportOption}"
-                ?disabled="${!this?._editable}"
-                @change="${e => {
-                  this._exportOption = e.currentTarget.checked
-                  if (this._exportOption == true) {
-                    this._warehouseTransportInput.checked = false
-                    this._warehouseTransport = false
-                    this._ownTransportInput.checked = true
-                    this._ownTransport = true
-                  }
-                  if (this._warehouseTransport) {
-                    this._exportInput.checked = false
-                    this._exportOption = false
-                  }
-                }}"
-              />
-              <label for="exportOption">${i18next.t('label.export')}</label>
+     <div class="quick-find-content-container" >
+        <quick-find-content
+        id="order-items-list"
+        name="quickFindContent"
+        .disabledKey="${disabledKey}"
+        .data="${orderSet}"
+        @tabChanged="${e => {
+          this._tabChange(e.detail.currentTabKey)
+        }}"
+        ></quick-find-content>
+      </div>
+
+      <div ?hidden="${this._showReleasedOrderInfo}">
+        <div class="form-container">
+
+          <form name="releaseOrder" class="multi-column-form">
+            <fieldset>
+              <legend>${i18next.t('title.release_order_no')}: ${this._releaseOrderNo}</legend>
+
+              <label>${i18next.t('label.options')}</label>
+              <div options-wrap>
+                <input
+                  id="ownTransport"
+                  type="checkbox"
+                  name="ownTransport"
+                  ?checked="${this._ownTransport}"
+                  ?disabled="${this._disableTransport || !this?._editable}"
+                  @change="${e => {
+                    this._ownTransport = e.currentTarget.checked
+                    if (this._ownTransport) {
+                      this._warehouseTransportInput.checked = false
+                      this._warehouseTransport = false
+                    } else {
+                      this._warehouseTransportInput.checked = true
+                      this._warehouseTransport = true
+                      this._exportInput.checked = false
+                      this._exportOption = false
+                    }
+                    this._validateTransport()
+                  }}"
+                />
+                <label for="ownTransport">${i18next.t('label.own_transport')}</label>
+
+                <input
+                  id="warehouseTransport"
+                  type="checkbox"
+                  name="warehouseTransport"
+                  ?checked="${!this._ownTransport}"
+                  ?disabled="${this._disableTransport || !this?._editable}"
+                  @change="${e => {
+                    this._warehouseTransport = e.currentTarget.checked
+                    if (this._warehouseTransport) {
+                      this._ownTransportInput.checked = false
+                      this._ownTransport = false
+                      this._exportInput.checked = false
+                      this._exportOption = false
+                    } else {
+                      this._ownTransportInput.checked = true
+                      this._ownTransport = true
+                    }
+                    this._validateTransport()
+                  }}"
+                />
+                <label for="warehouseTransport">${i18next.t('label.warehouse_transport')}</label>
+
+                <input
+                  id="courierOption"
+                  type="checkbox"
+                  name="courierOption"
+                  ?checked="${this._courierOption}"
+                  disabled
+                />
+                <label>${i18next.t('label.courier')}</label>
+
+                <input
+                  id="packingOption"
+                  type="checkbox"
+                  name="packingOption"
+                  ?checked="${this._packingOption}"
+                  disabled
+                />
+                <label>${i18next.t('label.packing')}</label>
+
+                <input
+                  id="exportOption"
+                  type="checkbox"
+                  name="exportOption"
+                  ?checked="${this._exportOption}"
+                  ?disabled="${true}"
+                  @change="${e => {
+                    this._exportOption = e.currentTarget.checked
+                    if (this._exportOption == true) {
+                      this._warehouseTransportInput.checked = false
+                      this._warehouseTransport = false
+                      this._ownTransportInput.checked = true
+                      this._ownTransport = true
+                    }
+                    if (this._warehouseTransport) {
+                      this._exportInput.checked = false
+                      this._exportOption = false
+                    }
+                  }}"
+                />
+                <label for="exportOption">${i18next.t('label.export')}</label>
+
+                <input
+              id="recall"
+              type="checkbox"
+              name="recall"
+              ?checked="${this._recallOption}"
+              disabled
+            />
+            <label for="recall">${i18next.t('label.recall')}</label>
+
+                ${
+                  this._crossDocking
+                    ? html`
+                        <input
+                          id="crossDocking"
+                          type="checkbox"
+                          name="crossDocking"
+                          ?checked="${this._crossDocking}"
+                          disabled
+                        />
+                        <label for="crossDocking">${i18next.t('label.cross_docking')}</label>
+                      `
+                    : ''
+                }
+              </div>
+
+              <label>${i18next.t('label.company')}</label>
+              <input name="bizplaceName" disabled />
+
+              <label>${i18next.t('label.ref_no')}</label>
+              <input name="refNo" ?readonly="${!this?._editable}" />
+
+              <label>${i18next.t('label.ref_no_2')}</label>
+              <input name="refNo2" ?readonly="${!this?._editable}" />
+
+              <label>${i18next.t('label.ref_no_3')}</label>
+              <input name="refNo3" ?readonly="${!this?._editable}" />
+
+              <label>${i18next.t('label.release_date')}</label>
+              <input name="releaseDate" type="date" ?readonly="${!this?._editable}" min="${this._getStdDate()}" />
+
+              <label ?hidden="${!this._ownTransport}">${i18next.t('label.co_no')}</label>
+              <input name="collectionOrderNo" ?hidden="${!this._ownTransport}" ?readonly="${!this?._editable}" />
+
+              <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.order_remark')}</label>
+              <textarea name="remark" ?hidden="${this.roType === 'b2b'}" rows="5" ?readonly="${!this
+      ?._editable}"></textarea>
 
               ${
                 this._crossDocking
                   ? html`
-                      <input
-                        id="crossDocking"
-                        type="checkbox"
-                        name="crossDocking"
-                        ?checked="${this._crossDocking}"
-                        disabled
-                      />
-                      <label for="crossDocking">${i18next.t('label.cross_docking')}</label>
+                      <label for="ganNo">${i18next.t('label.arrival_notice')}</label>
+                      <input disabled name="ganNo" .value="${this._ganNo}" />
                     `
                   : ''
               }
-            </div>
+              ${
+                this._attachments?.length > 0
+                  ? html`
+                      <label>${i18next.t('label.attachment')}</label>
+                      <ul attachment-wrap>
+                        ${(this._attachments || []).map(
+                          attachment =>
+                            html`
+                              <li>
+                                <a href="${location.origin}/attachment/${attachment.path}" download
+                                  ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
+                                >
+                              </li>
+                            `
+                        )}
+                      </ul>
+                    `
+                  : ''
+              }
+            </fieldset>
+          </form>
 
-            <label>${i18next.t('label.company')}</label>
-            <input name="bizplaceName" disabled />
+          <barcode-tag bcid="qrcode" .value=${this._releaseOrderNo}></barcode-tag>
+        </div>
+      </div>
 
-            <label>${i18next.t('label.ref_no')}</label>
-            <input name="refNo" ?readonly="${!this?._editable}" />
+   
+      <form name="shippingInfo"  ?hidden="${this._showShippingInfo}"  class="multi-column-form" autocomplete="off">
 
-            <label>${i18next.t('label.ref_no_2')}</label>
-            <input name="refNo2" ?readonly="${!this?._editable}" />
+        <legend>${i18next.t('title.shipping_information')}</legend>
 
-            <label>${i18next.t('label.ref_no_3')}</label>
-            <input name="refNo3" ?readonly="${!this?._editable}" />
+     
+          <label>${i18next.t('label.company')}</label>
+          <input name="attentionCompany"  .value="${this._releaseOrder.attentionCompany}" />
 
-            <label>${i18next.t('label.release_date')}</label>
-            <input name="releaseDate" type="date" ?readonly="${!this
-              ?._editable}" min="${this._getStdDate()}" required />
+          <label>${i18next.t('label.attention_to')}</label>
+          <input name="attentionTo"  .value="${this._releaseOrder.attentionTo}" />
 
-            <label ?hidden="${!this._ownTransport}">${i18next.t('label.co_no')}</label>
-            <input name="collectionOrderNo" ?hidden="${!this._ownTransport}" ?readonly="${!this?._editable}" />
+        
+          <button type="button" @click="${this._openContactPointSelector.bind(this)}">import</button>
 
-            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.attention_to')}</label>
-            <input name="attentionTo" ?hidden="${this.roType === 'b2b'}" readonly />
 
-            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.phone_no')}</label>
-            <input name="phone1" ?hidden="${this.roType === 'b2b'}" readonly />
+      <!-- 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._releaseOrder.postalCode) == country.postalCode}
+                        value=${country.postalCode}
+                      >
+                        ${country.postalCode}
+                      </option>`
+                  )}
+                </select>`
+          }
 
-            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.delivery_address')}</label>
-            <textarea name="deliveryAddress1" ?hidden="${this.roType === 'b2b'}" rows="5" readonly></textarea>
+          <label>${i18next.t('label.state')}</label>
+          <input name="state" .value="${this._releaseOrder.state}" />
+
+          <label>${i18next.t('label.city')}</label>
+          <input name="city" .value="${this._releaseOrder.city}" />
+
+          <label>${i18next.t('label.delivery_address')}</label>
+          <textarea name="deliveryAddress1" .value="${this._releaseOrder.deliveryAddress1}"></textarea>
+
+          <label>${i18next.t('label.contact')}</label>
+          <input name="phone1" value="${this._releaseOrder.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>
 
-            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.order_remark')}</label>
-            <textarea name="remark" ?hidden="${this.roType === 'b2b'}" rows="5" ?readonly="${!this
-      ?._editable}"></textarea>
 
             ${
-              this._crossDocking
-                ? html`
-                    <label for="ganNo">${i18next.t('label.arrival_notice')}</label>
-                    <input disabled name="ganNo" .value="${this._ganNo}" />
-                  `
-                : ''
-            }
-            ${
-              this._attachments?.length > 0
+              this._selectedBillingCountry !== 'MALAYSIA'
                 ? html`
-                    <label>${i18next.t('label.attachment')}</label>
-                    <ul attachment-wrap>
-                      ${(this._attachments || []).map(
-                        attachment =>
-                          html`
-                            <li>
-                              <a href="${location.origin}/attachment/${attachment.path}" download
-                                ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
-                              >
-                            </li>
-                          `
-                      )}
-                    </ul>
+                    <input
+                      ?disabled=${this._disableBillingAddress}
+                      name="billingPostalCode"
+                      .value=${this._releaseOrder.billingPostalCode}
+                    />
                   `
-                : ''
+                : html`<select
+                    ?disabled=${this._disableBillingAddress}
+                    name="billingPostalCode"
+                    @change=${e => {
+                      this._getStateAndCityByPostCode(e.target.value, e.target.name)
+                    }}
+                    value=${this._releaseOrder.billingPostalCode}
+                  >
+                    <option value=""></option>
+
+                    ${this._billingPostCode.map(
+                      (country, key) =>
+                        html`<option
+                          ?selected=${this._releaseOrder.billingPostalCode == country.postalCode}
+                          value=${country.postalCode}
+                        >
+                          ${country.postalCode}
+                        </option>`
+                    )}
+                  </select>`
             }
-          </fieldset>
-        </form>
 
-        <barcode-tag bcid="qrcode" .value=${this._releaseOrderNo}></barcode-tag>
-      </div>
+            <label>${i18next.t('label.state')}</label>
+            <input ?disabled=${this._disableBillingAddress} name="billingState" .value="${
+      this._releaseOrder.billingState
+    }" />
+
+            <label>${i18next.t('label.city')}</label>
+            <input ?disabled=${this._disableBillingAddress} name="billingCity" .value="${
+      this._releaseOrder.billingCity
+    }" />
+
+            <label>${i18next.t('label.billing_address')}</label>
+            <textarea ?disabled=${this._disableBillingAddress} name="billingAddress" .value="${
+      this._releaseOrder.billingAddress || ''
+    }"></textarea>
+                
+              <input type="checkbox" id="matchDeliveryAddress"  name="matchDeliveryAddressInputa" ?checked=${
+                this._releaseOrder.postalCode == this._releaseOrder.billingPostalCode &&
+                this._releaseOrder.billingAddress == this._releaseOrder.deliveryAddress1
+              } @click=${e => {
+      e.currentTarget.checked ? (this._disableBillingAddress = true) : (this._disableBillingAddress = false)
+      e.currentTarget.checked ? this.matchDeliveryAddress() : ''
+    }} />
+              <label for="matchDeliveryAddress">${i18next.t('label.match_delivery_address')}</label>
+
+ 
+      </form>
+
+      <form name="exportInfo" ?hidden="${this._showExportInfo}" class="multi-column-form" autocomplete="off">
+        <legend>${i18next.t('title.export_information')}</legend>
+
+        <!-- <div remind-wrap>
+          <input type="checkbox" id="remindContainerDeparture" name="remindContainerDeparture" 
+          ?checked="${this._containerClosureDate !== '' || this._remindContainerDepature == true ? true : false}"
+          />
+          <label style="width:500px" class="label-remind-container-departure" for="remindContainerDeparture">${i18next.t(
+            'label.remind_container_departure'
+          )}</label>
+        </div> -->
+
+        <label>${i18next.t('label.container_size')}</label>
+          <select name="containerSize" required>
+            <option value="">--${i18next.t('label.please_select_a_container_size')}--</option>
+            ${(this.containerSizes || []).map(
+              containerSize =>
+                html`
+                  <option
+                    value="${containerSize && containerSize.name}"
+                    ?selected="${containerSize.name === this._shippingOrder?.containerSize ? true : false}"
+                  >
+                    ${containerSize && containerSize.name}
+                  </option>
+                `
+            )}
+          </select>
+
+            <label>${i18next.t('label.container_no')}</label>
+            <input name="containerNo" required />
+        
+
+            <label>${i18next.t('label.container_arrival_date')}</label>
+            <input
+              name="containerArrivalDate"
+              type="date"
+              .value="${this._containerArrivalDate}"
+              @change="${e => {
+                this._containerClosureDateInput.setAttribute('min', e.currentTarget.value)
+              }}"
+              required
+              />
 
-      ${
-        this._exportOption
-          ? html`
-              <div class="so-form-container">
-                <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" ?readonly="${!this?._editable}" required />
-
-                    <label>${i18next.t('label.container_arrival_date')}</label>
-                    <input
-                      name="containerArrivalDate"
-                      type="date"
-                      ?readonly="${!this?._editable}"
-                      .value="${this._containerArrivalDate}"
-                      @change="${e => {
-                        this._containerLeavingDateInput.setAttribute('min', e.currentTarget.value)
-                      }}"
-                      required
-                    />
+              <label>${i18next.t('label.container_departure_date')}</label>
+            <input
+              name="containerLeavingDate"
+              type="date"
+              .value="${this._containerArrivalDate}"
+              @change="${e => {
+                this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
+              }}"
+              required
+              />
 
-                    <label>${i18next.t('label.container_leaving_date')}</label>
-                    <input
-                      name="containerLeavingDate"
-                      type="date"
-                      ?readonly="${!this?._editable}"
-                      .value="${this._containerLeavingDate}"
-                      @change="${e => {
-                        this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
-                      }}"
-                      required
-                    />
+        
+            <label>${i18next.t('label.container_closure_date')}</label>
+            <input
+              name="containerClosureDate"
+              type="date"
+              .value="${this._containerClosureDate}"
+              @change="${e => {
+                this._containerClosureDate = e.currentTarget.value
+                this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
+              }}"
+              required
+            />
 
-                    <label>${i18next.t('label.ship_name')}</label>
-                    <input name="shipName" ?readonly="${!this?._editable}" required />
-                  </fieldset>
-                </form>
-              </div>
-            `
-          : ''
-      }
+            <label>${i18next.t('label.ship_name')}</label>
+            <input name="shipName"  required/>
+
+            <label>${i18next.t('label.export_remark')}</label>
+            <input name="exportRemark" required />
+
+      </form>
 
       <div class="container">
         <div class="grist">
@@ -428,10 +732,33 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   constructor() {
     super()
     this._clearPage()
+    this._deliveryAllCountry = []
     this._editable = false
     this._disableTransport = false
     this._shippingOrder = null
     this._vasExpanded = false
+    this._showReleasedOrderInfo = false
+    this._showShippingInfo = true
+    this._attentionTo = ''
+    this._companyName = ''
+    this._deliveryPostCode = []
+    this._deliveryState = ''
+    this._deliveryCity = ''
+    this._deliveryFullAddress = ''
+    this._deliveryContact = ''
+    this._billingPostCode = []
+    this._billingState = ''
+    this._billingCity = ''
+    this._billingFullAddress = ''
+    this._billingContact = ''
+    this._selectedPostCode = ''
+    this._selectedBillingPostCode = ''
+    this.currentTab = {
+      selected: 'order'
+    }
+    this.containerSizes = []
+    this._containerClosureDate = ''
+    this._showExportInfo = true
   }
 
   get context() {
@@ -501,7 +828,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       }
 
       let addProductStatus = [ORDER_STATUS.PICKING.value, ORDER_STATUS.LOADING.value]
-      if (addProductStatus.indexOf(this._status) >= 0 && this._allowROAddProductSetting) {
+      if (addProductStatus.indexOf(this._status) >= 0 && this._allowROAddProductSetting && !this._isInBatchPicking) {
         actions.push({
           title: i18next.t('button.edit'),
           action: this._openExtraProductPopup.bind(this),
@@ -527,7 +854,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
 
     let cancelOrderStatus = [
       ORDER_STATUS.PICKING.value,
-      ORDER_STATUS.PENDING_WORKSHEET,
+      ORDER_STATUS.PENDING_WORKSHEET.value,
       ORDER_STATUS.READY_TO_PICK.value,
       ORDER_STATUS.LOADING.value
     ]
@@ -546,14 +873,46 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
+  get shippingInfoForm() {
+    return this.shadowRoot.querySelector('form[name=shippingInfo]')
+  }
+
   get releaseOrderForm() {
     return this.shadowRoot.querySelector('form[name=releaseOrder]')
   }
 
+  get _containerClosureDateInput() {
+    return this.shadowRoot.querySelector('input[name=containerClosureDate]')
+  }
+
+  get exportInfoForm() {
+    return this.shadowRoot.querySelector('form[name=exportInfo]')
+  }
+
+  get deliveryOrderForm() {
+    return this.shadowRoot.querySelector('form[name=deliveryOrderInfo]')
+  }
+
+  get billingPostalCodeInput() {
+    return this.shadowRoot.querySelector('select[name=billingPostalCode]')
+  }
+
   get shippingOrderForm() {
     return this.shadowRoot.querySelector('form[name=shippingOrder]')
   }
 
+  get contactPointForm() {
+    return this.shadowRoot.querySelector('form[name=contactPointInfo]')
+  }
+
+  get billingAddressForm() {
+    return this.shadowRoot.querySelector('form[name=billingAddressInfo]')
+  }
+
+  get deliveryAddressForm() {
+    return this.shadowRoot.querySelector('form[name=deliveryAddressInfo]')
+  }
+
   get _ownTransportInput() {
     return this.shadowRoot.querySelector('input[name=ownTransport]')
   }
@@ -586,11 +945,32 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('data-grist#vas-grist')
   }
 
+  get matchDeliveryAddressInput() {
+    return this.shadowRoot?.querySelector('input[name=matchDeliveryAddressInputa]')
+  }
+
+  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]')
+  }
+
   async pageUpdated(changes) {
     if (this.active) {
       if (changes.resourceId) {
         this._releaseOrderNo = changes.resourceId
       }
+      this._clearPage()
 
       if (this._releaseOrderNo) {
         await this._fetchReleaseOrder(this._releaseOrderNo)
@@ -600,6 +980,10 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async pageInitialized() {
+    await this._getAllPostCode()
+    await this.fetchCountry()
+    this.containerSizes = await getCodeByName('CONTAINER_SIZES')
+
     this.isUserBelongsDomain = await this._checkUserBelongsDomain()
     let [allowROAddProductSetting, userRoles] = [fetchSettingRule('allow-ro-add-product'), this.fetchUserRoleHandler()]
     let [enableTransportationServiceSetting] = await Promise.all([fetchSettingRule('enable-transportation-service')])
@@ -612,7 +996,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     this.inventoryGristConfig = {
       pagination: { infinite: true },
       rows: { selectable: { multiple: true }, appendable: false },
-      list: { fields: ['sku', 'productName', 'batchId','invStatus', 'packingType', 'releaseQty', 'releaseUomValue'] },
+      list: { fields: ['sku', 'productName', 'batchId', 'invStatus', 'packingType', 'releaseQty', 'releaseUomValue'] },
       columns: [
         { name: 'releaseUomValue', hidden: true },
         { name: 'remainUomValue', hidden: true },
@@ -804,13 +1188,24 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             truckNo
             type
             attentionTo
+            attentionCompany
             phone1
             deliveryAddress1
+            billingAddress
+            billingCity
+            billingCountry
+            billingPostalCode
+            billingState
+            city
+            state
+            postalCode
+            country
             remark
             bizplace {
               id
               name
             }
+            orderMethod
             invStatus
             status
             refNo
@@ -824,6 +1219,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             exportOption
             courierOption
             packingOption
+            recall
             releaseDate
             collectionOrderNo
             attachment {
@@ -838,6 +1234,25 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
               name
               description
             }
+            orderProducts {
+              id
+              name
+              batchId
+              batchIdRef
+              packingType
+              packingSize
+              product {
+                id
+                sku
+                brand
+                name
+                description
+              }
+              uom
+              releaseQty
+              releaseUomValue
+              status
+            }
             inventoryInfos {
               id
               name
@@ -866,13 +1281,18 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
                 name
               }
               status
+              refWorksheetId
             }
             shippingOrderInfo {
               id
               containerNo
               containerLeavingDate
               containerArrivalDate
+              containerClosureDate
+              containerSize
+              remindContainerDeparture
               shipName
+              remark
             }
             orderVass {
               vas {
@@ -906,8 +1326,21 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     if (!response.errors) {
       const releaseOrder = response.data.releaseGoodDetail
       const shippingOrder = releaseOrder.shippingOrderInfo
+      const orderProducts = releaseOrder.orderProducts.map(op => {
+        let roundedUomValue = parseFloat(op.releaseUomValue.toFixed(2))
+        return {
+          ...op,
+          productSKU: op?.product?.sku || '',
+          productName: op?.product?.name || '',
+          productBrand: op?.product?.brand || '',
+          roundedUomValue: `${roundedUomValue} ${op.uom}`,
+          releaseUomValueWithUom: op.releaseUomValue + ' ' + op.uom
+        }
+      })
 
       this.roType = releaseOrder.type
+      this._orderMethod = releaseOrder.orderMethod
+      this._isInBatchPicking = releaseOrder.inventoryInfos.some(inventoryInfo => inventoryInfo.refWorksheetId)
       const orderInventories = releaseOrder.inventoryInfos.map(inventoryInfo => {
         let roundedUomValue = parseFloat(inventoryInfo.releaseUomValue.toFixed(2))
         return {
@@ -939,7 +1372,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
           releaseUomValueWithUom: inventoryInfo.releaseUomValue + ' ' + inventoryInfo.uom,
           remainUomValueWithUom: `${inventoryInfo.uomValue - inventoryInfo.releaseUomValue} ${inventoryInfo.uom}`,
           status: inventoryInfo.status,
-          invStatus: inventoryInfo.status == "MISSING"?true:false,
+          invStatus: inventoryInfo.status == 'MISSING',
           existing: true,
           roundedUomValue: `${roundedUomValue} ${inventoryInfo.uom}`,
           addableQty: inventoryInfo.qty - inventoryInfo.lockedQty,
@@ -948,16 +1381,29 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       })
 
       const orderVass = releaseOrder.orderVass
+      this._releaseOrder = {
+        ...releaseOrder
+      }
 
       this._releaseOrderId = releaseOrder.id
       this.partnerBizplaceId = releaseOrder.bizplace.id
       this._exportOption = releaseOrder.exportOption
+      this._recallOption = releaseOrder.recall
 
       this._beforeRemark = releaseOrder?.remark
       this._courierOption = releaseOrder.courierOption
       this._packingOption = releaseOrder.packingOption
       this._crossDocking = releaseOrder?.crossDocking
 
+      if (
+        releaseOrder?.postalCode === releaseOrder?.billingPostalCode &&
+        releaseOrder?.billingAddress === releaseOrder.deliveryAddress1
+      ) {
+        this._disableBillingAddress = true
+      } else {
+        this._disableBillingAddress = false
+      }
+
       await this.updateComplete
 
       this._ganNo = releaseOrder?.arrivalNotice?.name
@@ -973,6 +1419,8 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         this._fillupSOForm(shippingOrder)
       }
 
+      this._fillupDAForm(releaseOrder)
+
       if (this._exportOption) {
         this._ownTransport = true
         this._ownTransportInput.checked = true
@@ -991,7 +1439,12 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       } else {
         this._editable = false
       }
-      this.inventoryData = { records: orderInventories }
+      this.inventoryData = {
+        records: this._orderMethod == PICKING_STANDARD.SELECT_BY_PRODUCT.value ? orderProducts : orderInventories
+      }
+      this.orderInventoryData = {
+        records: orderInventories
+      }
       this.vasData = {
         records: orderVass
           .sort((a, b) => a.set - b.set)
@@ -1165,15 +1618,15 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     try {
       const response = await client.mutate({
         mutation: gql`
-          mutation generateReleaseGoodWorksheet($releaseGoodNo: String!) {
-            generateReleaseGoodWorksheet(releaseGoodNo: $releaseGoodNo) {
+          mutation generateReleaseGoodWorksheet($releaseGoodNo: String!, $currentStatus: String) {  
+            generateReleaseGoodWorksheet(releaseGoodNo: $releaseGoodNo, currentStatus: $currentStatus) {
               pickingWorksheet {
                 name
               }
             }
           }
         `,
-        variables: { releaseGoodNo: this._releaseOrderNo }
+        variables: { releaseGoodNo: this._releaseOrderNo, currentStatus: this._status }
       })
 
       if (!response.errors) {
@@ -1194,7 +1647,16 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   }
 
   _fillupSOForm(data) {
-    this._fillupForm(this.shippingOrderForm, data)
+    data.exportRemark = data.remark
+    this._remindContainerDepature = data?.remindContainerDepature || ''
+    this._fillupForm(this.exportInfoForm, data)
+  }
+
+  _fillupDAForm(data) {
+    this._fillupForm(this.shippingInfoForm, data)
+    this._selectedCountry = data.country
+    this._selectedBillingCountry = data.billingCountry
+    this._releaseOrder.billingPostalCode = data.billingPostalCode
   }
 
   _fillupForm(form, data) {
@@ -1222,8 +1684,15 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   }
 
   _clearPage() {
+    this._showReleasedOrderInfo = false
+    this._showShippingInfo = true
+    this._showExportInfo = true
+
+    this._releaseOrder = {}
     this._status = null
     this.roType = 'b2b'
+    this._orderMethod = PICKING_STANDARD.SELECT_BY_PRODUCT.value
+    this._isInBatchPicking = false
     this._exportOption = false
     this._courierOption = false
     this._packingOption = false
@@ -1232,6 +1701,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     this._beforeRemark = null
     this._attachments = []
     this.inventoryData = { records: [] }
+    this.orderInventoryData = { records: [] }
     this.vasData = { records: [] }
   }
 
@@ -1298,7 +1768,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
 
       if (!response.errors) {
         this._showToast({ message: i18next.t('text.release_order_is_submitted_for_cancellation') })
-        navigate(`b2b_orders`)
+        this.roType === 'b2b' ? navigate(`b2b_orders`) : navigate(`b2c_order_requests`)
       }
     } catch (e) {
       throw e
@@ -1389,7 +1859,8 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         <release-extra-product-popup
           .releaseGoodNo="${this._releaseOrderNo}"
           .bizplace="${this.partnerBizplaceId}"
-          .existingInventoryData="${this.inventoryData}"
+          .existingInventoryData="${this.orderInventoryData}"
+          .recall="${this._recallOption}"
           @completed="${e => {
             this._fetchReleaseOrder(this._releaseOrderNo)
             this.updateContext()
@@ -1446,22 +1917,45 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       delete releaseOrder.bizplaceName
       delete releaseOrder.status
       delete releaseOrder.ganNo
+      delete releaseOrder.recall
+
+      let shippingOrderInfo = {}
+
+      let contactPointInfo = this._serializeForm(this.shippingInfoForm)
+
+      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
+      }
 
       let afterRemarkValue
       if (releaseOrder?.remark) {
         afterRemarkValue = releaseOrder.remark = releaseOrder.remark.trimStart()
       }
 
-      if (this._beforeRemark !== afterRemarkValue) {
-        if (!afterRemarkValue) {
-          const remarkResult = await CustomAlert({
-            title: i18next.t('title.removing_order_remark'),
-            text: i18next.t('text.do_you_want_to_proceed'),
-            confirmButton: { text: i18next.t('button.proceed') },
-            cancelButton: { text: i18next.t('button.cancel') }
-          })
-
-          if (!remarkResult.value) return
+      if (this.roType === 'b2c') {
+        if (this._beforeRemark !== afterRemarkValue) {
+          if (!afterRemarkValue) {
+            const remarkResult = await CustomAlert({
+              title: i18next.t('title.removing_order_remark'),
+              text: i18next.t('text.do_you_want_to_proceed'),
+              confirmButton: { text: i18next.t('button.proceed') },
+              cancelButton: { text: i18next.t('button.cancel') }
+            })
+
+            if (!remarkResult.value) return
+          }
         }
       }
 
@@ -1474,12 +1968,18 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
 
       if (!result.value) return
 
-      let shippingOrder = this._exportOption ? this._serializeForm(this.shippingOrderForm) : null
-
       const response = await client.mutate({
         mutation: gql`
-          mutation updateReleaseGoodDetails($releaseOrder: ReleaseGoodPatch!, $shippingOrder: ShippingOrderPatch) {
-            updateReleaseGoodDetails(releaseGood: $releaseOrder, shippingOrder: $shippingOrder) {
+          mutation updateReleaseGoodDetails(
+            $releaseOrder: ReleaseGoodPatch!
+            $shippingOrder: ShippingOrderPatch
+            $shippingOrderInfo: ShippingOrderInfoPatch
+          ) {
+            updateReleaseGoodDetails(
+              releaseGood: $releaseOrder
+              shippingOrder: $shippingOrder
+              shippingOrderInfo: $shippingOrderInfo
+            ) {
               id
               name
             }
@@ -1492,7 +1992,8 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             name: this._releaseOrderNo,
             ownTransport: this._importCargo ? true : this._ownTransport
           },
-          shippingOrder
+          shippingOrder: this._exportOption ? this._serializeForm(this.exportInfoForm) : null,
+          shippingOrderInfo: shippingOrderInfo ? shippingOrderInfo : null
         }
       })
 
@@ -1505,6 +2006,130 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
+  _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')
+      }
+    )
+  }
+
+  matchDeliveryAddress() {
+    this._billingFullAddress = ''
+    this._billingState = ''
+    this._billingCity = ''
+  }
+
+  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
+
+        return true
+      }
+    } 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 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
+    }
+  }
+
   _getFormInfo() {
     let formData = this._serializeForm(this.releaseOrderForm)
     delete formData.importedOrder
@@ -1537,6 +2162,10 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       throw new Error(i18next.t('text.release_order_form_invalid'))
     }
 
+    if (this._exportOption && !this.exportInfoForm.checkValidity()) {
+      throw new Error(i18next.t('text.export_form_is_invalid'))
+    }
+
     //    - condition: export is ticked
     if (this.shippingOrderForm) {
       if (!this.shippingOrderForm.checkValidity()) {
@@ -1561,6 +2190,59 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     date.setDate(date.getDate())
     return date.toISOString().split('T')[0]
   }
+
+  async _tabChange(key) {
+    if (key == 'order') {
+      this._showReleasedOrderInfo = false
+      this._showShippingInfo = true
+      this._showExportInfo = true
+    } else if (key == 'shipment') {
+      this._showReleasedOrderInfo = true
+      this._showShippingInfo = false
+      this._showExportInfo = true
+    } else {
+      this.containerSizes = await getCodeByName('CONTAINER_SIZES')
+
+      this._showReleasedOrderInfo = true
+      this._showShippingInfo = true
+      this._showExportInfo = 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)
+  }
+
+  _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
+    }
+  }
 }
 
 window.customElements.define('release-order-detail', ReleaseOrderDetail)