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

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

@@ -1,14 +1,17 @@
 import '@things-factory/biz-ui'
 import '@things-factory/grist-ui'
 import '@things-factory/import-ui'
+import '@things-factory/component-ui'
+
 import '../../components/vas-templates'
 import '../../order/vas-order/popup/vas-create-popup'
+import '../../components/select-inventory-popup'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
@@ -75,13 +78,54 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       _packingOption: Boolean,
       _disableTransport: Boolean,
       _enableTransportationServiceSetting: Boolean,
-      _vasExpanded: Boolean
+      _vasExpanded: Boolean,
+      _selectedCP: String,
+
+      /* Shipping Form Field */
+      _contactPointId: String,
+      _contactPointName: String,
+      _companyName: String,
+      _attentionTo: String,
+      _deliveryPostCode: Array,
+      _deliveryState: String,
+      _deliveryCity: String,
+      _deliveryContact: String,
+      _deliveryFullAddress: String,
+      _selectedPostCode: String,
+      _selectedDeliveryCountry: String,
+      _selectedBillingCountry: String,
+      _billingCountry: String,
+      _billingPostCode: Array,
+      _billingState: String,
+      _billingCity: String,
+      _billingContact: String,
+      _billingFullAddress: String,
+      _selectedBillingPostCode: String,
+      _switchDeliveryCountryInput: Boolean,
+      _switchBillingCountryInput: Boolean,
+      _allCountry: Array,
+      _containerClosureDate: Date,
+      _recallToggle: Boolean,
+      _savedStrategy: String,
+
+      // Export Form Field
+      containerSizes: Array,
+
+      // refractor
+      _contactPointInfo: Object,
+
+      /* Tab Toggle*/
+      _showReleasedOrderInfo: Boolean,
+      _showShippingInfo: Boolean,
+      _disableBillingAddress: Boolean,
+      _showExportInfo: Boolean
     }
   }
 
   static get styles() {
     return [
       MultiColumnFormStyles,
+      SingleColumnFormStyles,
       css`
         :host {
           display: flex;
@@ -92,7 +136,6 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           flex: 1;
           display: flex;
           overflow-y: auto;
-          min-height: 50vh;
         }
         .picking-std-container {
           margin-top: 0px;
@@ -107,6 +150,10 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           margin-right: 20px;
           padding-left: 0;
         }
+        [title] {
+          margin-top: -5px;
+          margin-bottom: -5px;
+        }
         [attachment-wrap] {
           display: flex;
           flex-direction: row;
@@ -168,6 +215,11 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           grid-auto-rows: minmax(24px, auto);
         }
 
+        .label-remindContainerDeparture {
+          margin-left: 20px;
+          width: 50%;
+        }
+
         .vas[collapsable] {
           height: 40%;
         }
@@ -203,6 +255,25 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             width: 6%;
           }
         }
+
+        .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;
+          }
+        }
       `
     ]
   }
@@ -231,8 +302,36 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
   }
 
   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`
-      <form name="releaseOrder" class="multi-column-form" autocomplete="off">
+      <div class="quick-find-content-container" >
+        <quick-find-content
+        id="order-items-list"
+        name="quickFindContent"
+        .data="${orderSet}"
+        .disabledKey="${disabledKey}"
+        @tabChanged="${e => {
+          this._tabChange(e.detail.currentTabKey)
+        }}"
+        ></quick-find-content>
+      </div>
+    
+      <form name="releaseOrder" class="multi-column-form" autocomplete="off" ?hidden="${this._showReleasedOrderInfo}">
         <fieldset>
           <legend>${i18next.t('title.release_order')}</legend>
 
@@ -306,6 +405,26 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             />
             <label for="exportOption" ?hidden="${!this._checkTransport}">${i18next.t('label.export')}</label>
 
+
+            <input
+              id="recall"
+              type="checkbox"
+              ?hidden="${!this._checkTransport}"
+              @change="${async e => {
+                this._recallToggle = e.currentTarget.checked
+
+                if (e.currentTarget.checked) {
+                  this.selectByPalletInput.checked = true
+                  this.selectByProductInput.checked = false
+                  this._pickingStd = PICKING_STANDARD.SELECT_BY_PALLET.value
+                }
+                await this.switchPickingType()
+                await this.fetchCountry()
+              }}"
+              name="recall"
+            />
+            <label for="recall" ?hidden="${!this._checkTransport}">${i18next.t('label.recall')}</label>
+
             <input
               id="packingOption"
               type="checkbox"
@@ -398,50 +517,192 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
         </fieldset>
       </form>
 
-      ${
-        this._exportOption
-          ? html`
-              <div class="so-form-container">
-                <form name="shippingOrder" class="multi-column-form" autocomplete="off">
-                  <fieldset>
-                    <legend>${i18next.t('title.export_order')}</legend>
-                    <label>${i18next.t('label.container_no')}</label>
-                    <input name="containerNo" required .value="${this.containerNo}" />
-
-                    <label>${i18next.t('label.container_arrival_date')}</label>
-                    <input
-                      name="containerArrivalDate"
-                      type="date"
-                      min="${this._getStdDate()}"
-                      .value="${this.containerArrivalDate}"
-                      required
-                      @change="${e => {
-                        this._conLeavingDateInput.setAttribute('min', e.currentTarget.value)
-                      }}"
-                    />
 
-                    <label>${i18next.t('label.container_leaving_date')}</label>
-                    <input
-                      name="containerLeavingDate"
-                      type="date"
-                      min="${this._getStdDate()}"
-                      .value="${this.containerLeavingDate}"
-                      required
-                      @change="${e => {
-                        this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
-                      }}"
-                    />
+      <form name="shippingInfo" ?hidden="${this._showShippingInfo}" class="multi-column-form" autocomplete="off">
+          <legend>${i18next.t('title.shipping_information')}</legend>
+          <label>${i18next.t('label.company')}</label>
+          <input name="attentionCompany" required .value="${this._companyName}" />
 
-                    <label>${i18next.t('label.ship_name')}</label>
-                    <input name="shipName" required .value="${this.shipName}" />
-                  </fieldset>
-                </form>
-              </div>
-            `
-          : ''
-      }
+          <label>${i18next.t('label.attention_to')}</label>
+          <input name="attentionTo" required .value="${this._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._allCountry?.map((country, key) => html`<option value=${country.name}>${country.name}</option>`)}
+        </select>
+
+
+        <label>${i18next.t('label.zip_postal_code')}</label>
+
+        ${
+          this._switchDeliveryCountryInput
+            ? html` <input name="postalCode" required .value="" /> `
+            : html`<select
+                name="postalCode"
+                @change=${e => {
+                  this._getStateAndCityByPostCode(e.target.value, e.target.name)
+                }}
+              >
+                <option value=""></option>
+                ${this._deliveryPostCode?.map(
+                  (country, key) =>
+                    html`<option value=${country.postalCode} ?selected=${this._selectedPostCode === country.postalCode}>
+                      ${country.postalCode}
+                    </option>`
+                )}
+              </select>`
+        }
+        
+
+        <label>${i18next.t('label.state')}</label>
+        <input name="state" required .value="${this._deliveryState}" />
+
+        <label>${i18next.t('label.city')}</label>
+        <input name="city" required .value="${this._deliveryCity}" />
+
+        <label>${i18next.t('label.delivery_address')}</label>
+        <textarea name="deliveryAddress1" required .value="${this._deliveryFullAddress}"></textarea>
+
+        <label>${i18next.t('label.contact')}</label>
+        <input name="phone1" required .value="${this._deliveryContact}" />  
+
+
+        <!-- billing -->
+        <label class="section-header">${i18next.t('label.billing_address')}</label>
+
+        <label>${i18next.t('label.country')}</label>
+        <select
+        name="billingCountry"
+        ?disabled=${this._disableBillingAddress ? true : false}
+        @change=${e => {
+          this._validateBillingCountry(e)
+        }}
+        >
+        ${this._allCountry?.map((country, key) => html`<option value=${country.name}>${country.name}</option>`)}
+        </select>
+
+        <label>${i18next.t('label.zip_postal_code')}</label>
+
+        ${
+          this._switchBillingCountryInput
+            ? html`
+                <input
+                  ?disabled=${this._disableBillingAddress ? true : false}
+                  name="billingPostalCode"
+                  required
+                  .value=""
+                />
+              `
+            : html`<select
+                ?disabled=${this._disableBillingAddress ? true : false}
+                name="billingPostalCode"
+                @change=${e => {
+                  this._getStateAndCityByPostCode(e.target.value, e.target.name)
+                }}
+              >
+                <option value=${this._selectedBillingPostCode ? this._selectedBillingPostCode : ''} selected>
+                  ${this._selectedBillingPostCode ? this._selectedBillingPostCode : ''}
+                </option>
+                ${this._billingPostCode?.map(
+                  (country, key) => html`<option value=${country.postalCode}>${country.postalCode}</option>`
+                )}
+              </select>`
+        }
+
+        <label>${i18next.t('label.state')}</label>
+        <input ?disabled=${this._disableBillingAddress ? true : false} name="billingState" required 
+        .value="${this._billingState}" />
+
+        <label>${i18next.t('label.city')}</label>
+        <input ?disabled=${this._disableBillingAddress ? true : false} name="billingCity" required 
+        .value="${this._billingCity}" />
+
+        <label>${i18next.t('label.billing_address')}</label>
+        <textarea ?disabled=${this._disableBillingAddress ? true : false} name="billingAddress" required 
+        .value="${this._billingFullAddress}"></textarea>
+            
+        <input type="checkbox" id="matchDeliveryAddress" name="matchDeliveryAddressInput" @click=${e => {
+          e.currentTarget.checked ? (this._disableBillingAddress = true) : (this._disableBillingAddress = false)
+        }} />
+        <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>
+
+        <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}">${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
+              />
+
+              <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)
+              }}"
+      
+              />
+
+        
+            <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)
+              }}"
+              
+            />
+
+            <label>${i18next.t('label.ship_name')}</label>
+            <input name="shipName"  />
 
-      <form class="picking-std-container multi-column-form">
+            <label>${i18next.t('label.export_remark')}</label>
+            <input name="exportRemark"  />
+
+      </form>
+
+      <form class="picking-std-container multi-column-form" ?hidden="${
+        !this._showShippingInfo || !this._showExportInfo
+      }">
         <fieldset>
           <legend>${i18next.t('title.inventory_selection_strategy')}</legend>
           <input
@@ -449,8 +710,27 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             name="picking-std"
             type="radio"
             value="${PICKING_STANDARD.SELECT_BY_PRODUCT.value}"
-            @change="${e => {
-              this._pickingStd = e.currentTarget.value
+            ?disabled="${this._recallInput?.checked}"
+            @change="${async e => {
+              const value = e.currentTarget.value
+
+              if (this.inventoryGrist.dirtyData.records.length > 0) {
+                const result = await CustomAlert({
+                  title: i18next.t('title.are_you_sure'),
+                  text: i18next.t('text.do_you_wish_to_proceed_the_selected_products_will_be_removed'),
+                  confirmButton: { text: i18next.t('button.proceed') },
+                  cancelButton: { text: i18next.t('button.cancel') }
+                })
+
+                if (!result.value) {
+                  this._pickingStd = PICKING_STANDARD.SELECT_BY_PALLET.value
+                  this.selectByPalletInput.checked = true
+                } else {
+                  this._pickingStd = value
+                }
+              } else {
+                this._pickingStd = value
+              }
             }}"
             .checked="${this._pickingStd === PICKING_STANDARD.SELECT_BY_PRODUCT.value}"
             checked
@@ -466,10 +746,28 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
                     name="picking-std"
                     type="radio"
                     value="${PICKING_STANDARD.SELECT_BY_PALLET.value}"
-                    @change="${e => {
-                      this._pickingStd = e.currentTarget.value
+                    @change="${async e => {
+                      const value = e.currentTarget.value
+                      if (this.inventoryGrist.dirtyData.records.length > 0) {
+                        const result = await CustomAlert({
+                          title: i18next.t('title.are_you_sure'),
+                          text: i18next.t('text.do_you_wish_to_proceed_the_selected_products_will_be_removed'),
+                          confirmButton: { text: i18next.t('button.proceed') },
+                          cancelButton: { text: i18next.t('button.cancel') }
+                        })
+
+                        if (!result.value) {
+                          this._pickingStd = PICKING_STANDARD.SELECT_BY_PRODUCT.value
+                          this.selectByProductInput.checked = true
+                        } else {
+                          this._pickingStd = value
+                        }
+                      } else {
+                        this._pickingStd = value
+                      }
                     }}"
-                    .checked="${this._pickingStd === PICKING_STANDARD.SELECT_BY_PALLET.value && !this._crossDocking}"
+                    .checked="${(this._pickingStd === PICKING_STANDARD.SELECT_BY_PALLET.value && !this._crossDocking) ||
+                    this._recallToggle}"
                   />
                   <label for="pick-by-pallet">${i18next.t(PICKING_STANDARD.SELECT_BY_PALLET.name)}</label>
                 `
@@ -535,26 +833,70 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     return this.shadowRoot.querySelector('form[name=releaseOrder]')
   }
 
+  get shippingInfoForm() {
+    return this.shadowRoot.querySelector('form[name=shippingInfo]')
+  }
+
+  get getDeliveryAddressInfoForm() {
+    return this.shadowRoot.querySelector('form[name=deliveryAddressInfo]')
+  }
+
+  get getBillingAddressInfoForm() {
+    return this.shadowRoot.querySelector('form[name=billingAddressInfo]')
+  }
+
   get _containerArrivalDateInput() {
     return this.shadowRoot.querySelector('input[name=containerArrivalDate]')
   }
 
+  get _containerClosureDateInput() {
+    return this.shadowRoot.querySelector('input[name=containerClosureDate]')
+  }
+
   get _conLeavingDateInput() {
-    return this.shadowRoot.querySelector('input[name=containerLeavingDate]')
+    return this.shadowRoot.querySelector('input[name=containerClosureDate]')
   }
 
   get shippingOrderForm() {
     return this.shadowRoot.querySelector('form[name=shippingOrder]')
   }
 
+  get exportInfoForm() {
+    return this.shadowRoot.querySelector('form[name=exportInfo]')
+  }
+
   get _ownTransportInput() {
     return this.shadowRoot.querySelector('input[name=ownTransport]')
   }
 
+  get _cityInput() {
+    return this.shadowRoot.querySelector('input[name=city]')
+  }
+
+  get _stateInput() {
+    return this.shadowRoot.querySelector('input[name=state]')
+  }
+
+  get _recallInput() {
+    return this.shadowRoot.querySelector('input[name=recall]')
+  }
+
+  get _cityBillingInput() {
+    return this.shadowRoot.querySelector('input[id=billingCity]')
+  }
+
+  get _stateBillingInput() {
+    return this.shadowRoot.querySelector('input[name=billingState]')
+  }
+
   get _warehouseTransportInput() {
     return this.shadowRoot.querySelector('input[name=warehouseTransport]')
   }
 
+  get _getBillingPostalCodeInput() {
+    return this.shadowRoot.querySelector('select[name=billingPostalCode]')
+  }
+
   get _exportOptionInput() {
     return this.shadowRoot.querySelector('input[name=exportOption]')
   }
@@ -583,13 +925,31 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     return this.shadowRoot.querySelector('input[name=bizplaceName]')
   }
 
+  get selectByProductInput() {
+    return this.shadowRoot.querySelector('input[id=pick-by-prod]')
+  }
+
+  get selectByPalletInput() {
+    return this.shadowRoot.querySelector('input[id=pick-by-pallet]')
+  }
+
+  get matchDeliveryAddressInput() {
+    return this.shadowRoot?.querySelector('input[name=matchDeliveryAddressInput]')
+  }
+
   get _inventoryColumns() {
     return this.inventoryGrist.columns
   }
 
+  get quickFindContent() {
+    return this.shadowRoot?.querySelector('quick-find-content[name=quickFindContent]')
+  }
+
   constructor() {
     super()
     this.initProperties()
+    this._getAllPostCode()
+    this.fetchCountry()
     this._pickingStd = PICKING_STANDARD.SELECT_BY_PRODUCT.value
     this._bundleSettingData = []
     this._vasExpanded = false
@@ -648,6 +1008,10 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       getCodeByName('PACKING_TYPES')
     ])
 
+    this.containerSizes = await getCodeByName('CONTAINER_SIZES')
+
+    this.quickFindContent.currentTabKey = i18next.t('label.order')
+    this._disableBillingAddress = false
     this._enableTransportationServiceSetting = enableTransportationServiceSetting
     this._bizplaces = bizplaces
     this.packingTypes = packingTypes
@@ -800,6 +1164,7 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     this.releaseDate = ''
     this.collectionOrderNo = ''
     this._files = []
+    this._allCountry = []
     this.containerNo = ''
     this.containerArrivalDate = ''
     this.containerLeavingDate = ''
@@ -807,15 +1172,44 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     this.inventoryData = { ...this.inventoryData, records: [] }
     this.vasData = { ...this.vasData, records: [] }
     this.bundleData = { ...this.bundleData, records: [] }
+    this._showReleasedOrderInfo = false
+    this._showShippingInfo = true
+    this._attentionTo = ''
+    this._companyName = ''
+    this._deliveryState = ''
+    this._deliveryCity = ''
+    this._deliveryFullAddress = ''
+    this._deliveryContact = ''
+    this._billingState = ''
+    this._billingCity = ''
+    this._billingFullAddress = ''
+    this._billingContact = ''
+    this._switchDeliveryCountryInput = false
+    this._switchBillingCountryInput = false
+    this._disableBillingAddress = false
+    this._showExportInfo = true
+    this._selectedDeliveryCountry = 'MALAYSIA'
+    this._selectedBillingCountry = 'MALAYSIA'
+    this.containerSizes = []
+    this._containerClosureDate = ''
+    this._recallToggle = false
   }
 
   resetPage() {
     this._selectedVasRecord = null
     this._selectedVasRecordIdx = null
     this.bundleData = {}
+    this.matchDeliveryAddressInput.checked = false
+    this.quickFindContent.currentTabKey = i18next.t('label.order')
+
     this.initProperties()
     this._clearGristConditions()
     this._validateTransport()
+    this._getAllPostCode()
+
+    if (this._exportOptionInput.checked === true && this._recallInput.checked === false) {
+      this._exportOption = true
+    }
   }
 
   async switchPickingType() {
@@ -824,7 +1218,7 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       this.inventoryGristConfig = {
         pagination: { infinite: true },
         rows: {
-          selectable: { multiple: false },
+          selectable: { multiple: true },
           classifier: (record, rowIndex) => {
             return {
               emphasized: record.isCrossDocking || record.isError
@@ -863,76 +1257,18 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
               }
             }
           },
+
           {
-            type: 'object',
-            name: 'inventory',
+            type: 'string',
+            name: 'productName',
             header: i18next.t('field.inventory_list'),
-            imex: {
-              header: i18next.t('field.inventory_list'),
-              key: 'inventory.name',
-              width: 50,
-              type: 'array',
-              arrData: []
-            },
-            record: {
-              editable: !!this._bizplaceId,
-              options: {
-                queryName: 'inventoryProductGroup',
-                basicArgs: {
-                  filters: [{ name: 'bizplace_id', operator: 'eq', value: this._bizplaceId }]
-                },
-                nameField: 'batchId',
-                descriptionField: 'productName',
-                select: [
-                  { name: 'productId', hidden: true },
-                  { name: 'remainUomValue', hidden: true },
-                  { name: 'batchId', header: i18next.t('field.batch_id') },
-                  { name: 'batchIdRef', header: i18next.t('field.batch_no_ref') },
-                  {
-                    name: 'productSKU',
-                    header: i18next.t('field.sku'),
-                    width: 150
-                  },
-                  {
-                    name: 'productName',
-                    header: i18next.t('field.product_info'),
-                    width: 280
-                  },
-                  { name: 'productBrand', header: i18next.t('field.brand') },
-                  { name: 'packingType', header: i18next.t('field.packing_type') },
-                  { name: 'packingSize', header: i18next.t('field.packing_size') },
-                  { name: 'uom', header: i18next.t('field.uom') },
-                  {
-                    name: 'remainQty',
-                    header: i18next.t('field.remain_qty'),
-                    ignoreCondition: true
-                  },
-                  {
-                    name: 'remainUomValueWithUom',
-                    header: i18next.t('field.remain_uom_value'),
-                    ignoreCondition: true
-                  },
-                  {
-                    name: 'groupType',
-                    header: i18next.t('field.group_type'),
-                    ignoreCondition: true
-                  }
-                ],
-                list: {
-                  fields: [
-                    'batchId',
-                    'batchIdRef',
-                    'productName',
-                    'productBrand',
-                    'packingType',
-                    'remainQty',
-                    'remainUomValue',
-                    'groupType'
-                  ]
-                }
+            imex: { header: i18next.t('field.inventory_list'), key: 'productName', width: 50, type: 'string' },
+            handlers: {
+              click: (columns, data, column, record, rowIndex) => {
+                this._openBulkProductSelection('product', rowIndex)
               }
             },
-            width: 250
+            width: 350
           },
           {
             type: 'string',
@@ -1005,6 +1341,9 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       }
     } else {
       const locationSortingRules = await fetchLocationSortingRule(LOCATION_SORTING_RULE.CREATE_RELEASE_ORDER.value)
+
+      const recall = this._recallInput.checked
+
       this.inventoryGristConfig = {
         pagination: { infinite: true },
         rows: {
@@ -1032,68 +1371,16 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             }
           },
           {
-            type: 'object',
-            name: 'inventory',
+            type: 'string',
+            name: 'productName',
             header: i18next.t('field.inventory_list'),
-            record: {
-              editable: !!this._bizplaceId,
-              options: {
-                queryName: 'inventoriesByPallet',
-                basicArgs: {
-                  filters: [
-                    { name: 'status', operator: 'eq', value: INVENTORY_STATUS.STORED.value },
-                    { name: 'bizplace', operator: 'in', value: [this._bizplaceId] }
-                  ],
-                  locationSortingRules
-                },
-                nameField: 'batchId',
-                descriptionField: 'palletId',
-                select: [
-                  { name: 'id', hidden: true },
-                  { name: 'name', hidden: true },
-                  { name: 'remainUomValue', hidden: true },
-                  { name: 'product', type: 'object', hidden: true },
-                  { name: 'palletId', header: i18next.t('field.lot_id') },
-                  { name: 'productSKU', header: i18next.t('field.sku') },
-                  { name: 'productName', header: i18next.t('field.product_info') },
-                  { name: 'productBrand', header: i18next.t('field.brand') },
-                  { name: 'batchId', header: i18next.t('field.batch_id') },
-                  {
-                    name: 'location',
-                    type: 'object',
-                    queryName: 'locations',
-                    field: 'name'
-                  },
-                  { name: 'packingType', header: i18next.t('field.packing_type') },
-                  { name: 'packingSize', header: i18next.t('field.packing_size') },
-                  { name: 'uom', header: i18next.t('field.uom') },
-                  { name: 'remainQty', type: 'float', header: i18next.t('field.remain_qty') },
-                  {
-                    name: 'remainUomValueWithUom',
-                    type: 'string',
-                    header: i18next.t('field.total_uom_value')
-                  },
-                  { name: 'batchIdRef', header: i18next.t('field.batch_no_ref') },
-                  {
-                    name: 'remark',
-                    type: 'string',
-                    header: i18next.t('field.remark')
-                  }
-                ],
-                list: {
-                  fields: [
-                    'palletId',
-                    'productName',
-                    'productBrand',
-                    'batchId',
-                    'location',
-                    'remainUomValue',
-                    'batchIdRef'
-                  ]
-                }
+            imex: { header: i18next.t('field.inventory_list'), key: 'productName', width: 50, type: 'string' },
+            handlers: {
+              click: (columns, data, column, record, rowIndex) => {
+                this._openBulkProductSelection('pallet', rowIndex)
               }
             },
-            width: 250
+            width: 350
           },
           {
             type: 'string',
@@ -1114,7 +1401,7 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             width: 100
           },
           {
-            type: 'object',
+            type: 'string',
             name: 'location',
             header: i18next.t('field.location'),
             width: 150
@@ -1171,72 +1458,6 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     }
   }
 
-  // _openBulkProductSelection() {
-  //   if (this._pickingStd === PICKING_STANDARD.SELECT_BY_PRODUCT.value) {
-  //     let filters = [
-  //       {
-  //         name: 'bizplace_id',
-  //         operator: 'eq',
-  //         value: this._bizplaceId
-  //       }
-  //     ]
-
-  //     const response = await client.query({
-  //       query: gql`
-  //         query inventoryProductGroup($filters: [Filter]) {
-  //           inventoryProductGroup(filters: $filters) {
-  //             items {
-  //               productId
-  //               productSKU
-  //               productName
-  //               batchId
-  //               packingType
-  //               remainQty
-  //               remainWeight
-  //               remainUomValue
-  //             }
-  //             total
-  //           }
-  //         }
-  //       `,
-  //       variables: { filters }
-  //     })
-
-  //     if (!response.errors) {
-  //     }
-  //   } else {
-  //     let filters = [
-  //       {
-  //         name: 'bizplace_id',
-  //         operator: 'eq',
-  //         value: this._bizplaceId
-  //       },
-  //       { name: 'status', operator: 'eq', value: INVENTORY_STATUS.STORED.value }
-  //     ]
-
-  //     const response = await client.query({
-  //       query: gql`
-  //         query inventoryProductGroup($filters: [Filter]) {
-  //           inventoryProductGroup(filters: $filters) {
-  //             items {
-  //               productId
-  //               productSKU
-  //               productName
-  //               batchId
-  //               packingType
-  //               remainQty
-  //               remainWeight
-  //               remainUomValue
-  //             }
-  //             total
-  //           }
-  //         }
-  //       `,
-  //       variables: { filters }
-  //     })
-  //   }
-  // }
-
   _getStdDate() {
     let date = new Date()
     date.setDate(date.getDate())
@@ -1513,6 +1734,26 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     }
   }
 
+  async fetchCountry() {
+    const response = await client.query({
+      query: gql`
+        query geoCountriesWithoutParam {
+          geoCountriesWithoutParam {
+            items {
+              id
+              name
+              description
+            }
+          }
+        }
+      `
+    })
+
+    if (!response.error) {
+      this._allCountry = response.data.geoCountriesWithoutParam.items
+    }
+  }
+
   async fetchInventoriesByBundle(productBundleId, bundleReleaseQty) {
     const page = 1
     const limit = 99999
@@ -1603,6 +1844,25 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       this._validateInventories()
       this._validateVas()
 
+      let shippingOrderInfo = {}
+
+      let contactPointInfo = this._serializeForm(this.shippingInfoForm)
+
+      shippingOrderInfo = {
+        ...contactPointInfo
+      }
+
+      delete shippingOrderInfo['']
+      delete shippingOrderInfo.matchDeliveryAddressInput
+
+      // If match delivery address is ticked, all the billing address info will be the same with delivery address info
+      if (this._disableBillingAddress) {
+        shippingOrderInfo.billingAddress = shippingOrderInfo.deliveryAddress1
+        shippingOrderInfo.billingPostalCode = shippingOrderInfo.postalCode
+        shippingOrderInfo.billingCity = shippingOrderInfo.city
+        shippingOrderInfo.billingState = shippingOrderInfo.state
+      }
+
       let result = await CustomAlert({
         title: i18next.t('title.are_you_sure'),
         text: i18next.t('text.create_release_order'),
@@ -1630,18 +1890,25 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       releaseGood.orderVass = this._getOrderVass()
       releaseGood.ownTransport = this._ownTransport
       releaseGood.type = RO_TYPES.B2B.value
+      releaseGood.orderMethod = this._pickingStd
 
       delete releaseGood.bizplaceId
       delete releaseGood.bizplaceName
 
       const response = await client.mutate({
         mutation: gql`
-          mutation generateReleaseGood(
+          mutation (
             $releaseGood: NewReleaseGood
             $shippingOrder: ShippingOrderPatch
+            $shippingOrderInfo: ShippingOrderInfoPatch
             $attachments: [Upload!]
           ) {
-            generateReleaseGood(releaseGood: $releaseGood, shippingOrder: $shippingOrder, attachments: $attachments) {
+            generateReleaseGood(
+              releaseGood: $releaseGood
+              shippingOrder: $shippingOrder
+              shippingOrderInfo: $shippingOrderInfo
+              attachments: $attachments
+            ) {
               id
               name
             }
@@ -1652,7 +1919,8 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             ...releaseGood,
             partnerBizplaceId: this._bizplaceId
           },
-          shippingOrder: this._exportOption ? this._serializeForm(this.shippingOrderForm) : null,
+          shippingOrder: this._exportOption ? this._serializeForm(this.exportInfoForm) : null,
+          shippingOrderInfo: shippingOrderInfo ? shippingOrderInfo : null,
           attachments: this._document?.files ? this._document.files : undefined
         },
         context: { hasUpload: true }
@@ -1660,6 +1928,14 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
 
       if (!response.errors) {
         this.resetPage()
+        this._resetShippingInfoForm()
+        this._resetExportInfoForm()
+        this._deliveryPostCode = []
+        this._billingPostCode = []
+        this._selectedPostCode = ''
+        this._selectedBillingPostCode = ''
+        this._recallInput.checked = false
+
         navigate(`release_order_detail/${response.data.generateReleaseGood.name}`)
         this._showToast({ message: i18next.t('text.release_order_created') })
       } else {
@@ -1740,6 +2016,10 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       throw new Error(i18next.t('text.shipping_order_form_invalid'))
     }
 
+    if (this._exportOption && !this.exportInfoForm.checkValidity()) {
+      throw new Error(i18next.t('text.export_form_is_invalid'))
+    }
+
     if (this._ownTransport && this._warehouseTransport) {
       throw new Error(i18next.t('text.you_can_only_select_one_transport_type'))
     } else if (!this._ownTransport && !this._warehouseTransport) {
@@ -1780,6 +2060,52 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     if (!this.vasGrist.dirtyData.records.every(record => record.ready)) throw new Error('there_is_not_ready_vas')
   }
 
+  _openBulkProductSelection(type, rowIndex) {
+    if (this._bizplaceId) {
+      openPopup(
+        html`
+          <select-inventory-popup
+            .bizplaceId="${this._bizplaceId}"
+            .selectMultipleProducts="${true}"
+            .switchTypePane="${type}"
+            .inventoryData="${this.inventoryGrist.dirtyData.records}"
+            .recall="${this._recallInput.checked}"
+            @selected="${e => {
+              let newRecords = []
+              for (let i = 0; i < e.detail.multipleProducts.length; i++) {
+                newRecords.push(e.detail.multipleProducts[i])
+              }
+
+              if (newRecords.length > 1) {
+                this.inventoryData = {
+                  ...this.inventoryData,
+                  records: [...this.inventoryGrist.dirtyData.records, ...newRecords]
+                }
+              } else {
+                // update existing inventory data records
+                this.inventoryGrist.dirtyData.records.splice(rowIndex, 1, {
+                  ...this.inventoryGrist.dirtyData.records[rowIndex],
+                  ...newRecords[0]
+                })
+                this.inventoryData = {
+                  ...this.inventoryData,
+                  records: [...this.inventoryGrist.dirtyData.records]
+                }
+              }
+            }}"
+          ></select-inventory-popup>
+        `,
+        {
+          backdrop: true,
+          size: 'large',
+          title: i18next.t('title.select_item')
+        }
+      )
+    } else {
+      this._showToast({ message: i18next.t('text.company_selection_is_empty') })
+    }
+  }
+
   _updateInventoryGristConfig() {
     if (this._pickingStd === PICKING_STANDARD.SELECT_BY_PRODUCT.value) {
       const _selectedInv = (this.inventoryGrist.dirtyData.records || [])
@@ -2002,8 +2328,8 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           }
         } else {
           newRecord.product = {
-            id: record.inventory.product.id,
-            name: record.inventory.product.name
+            id: record.inventory.productId || record.inventory.product.id,
+            name: record.inventory.productName || record.inventory.product.name
           }
           newRecord.inventory = { id: record.id }
         }
@@ -2078,9 +2404,105 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
       .flat()
   }
 
+  _validateCountry(e) {
+    if (e.target.value != 'MALAYSIA') {
+      this._switchDeliveryCountryInput = true
+    } else {
+      this._switchDeliveryCountryInput = false
+    }
+  }
+
+  _validateBillingCountry(e) {
+    if (e.target.value != 'MALAYSIA') {
+      this._switchBillingCountryInput = true
+      this._selectedBillingCountry = e.target.value
+    } else {
+      this._switchBillingCountryInput = false
+      this._selectedBillingCountry = e.target.value
+    }
+  }
+
+  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)
+    }
+  }
+
   _serializeForm(form) {
     let obj = {}
-    Array.from(form.querySelectorAll('input, select')).forEach(field => {
+    Array.from(form.querySelectorAll('input, select,textarea')).forEach(field => {
       if (!field.hasAttribute('hidden') && field.value) {
         obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
       }
@@ -2258,6 +2680,8 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
             this._bizplaceId = e.detail.id
             this._bizplaceName = e.detail.name
             this.switchPickingType()
+            // this._resetShippingInfoForm()
+            this.fetchCountry()
           }}"
         ></popup-partner-bizplaces-selector>
       `,
@@ -2269,6 +2693,24 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     )
   }
 
+  _openContactPointSelector() {
+    openPopup(
+      html`
+        <contact-points-popup
+          @selected="${e => {
+            this._fillUpDeliveryInfo(e.detail)
+          }}"
+          .partnerBizplaceIds="${this._bizplaces.map(itm => itm.id)}"
+        ></contact-points-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.select_destination')
+      }
+    )
+  }
+
   async bulkUploadValidateWarehousePartnersProductsQuantity(orderInventories) {
     const response = await client.query({
       query: gql`
@@ -2466,6 +2908,76 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
     }
   }
 
+  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)
+  }
+
+  _resetShippingInfoForm() {
+    this.shippingInfoForm.reset()
+  }
+
+  _resetExportInfoForm() {
+    this.exportInfoForm.reset()
+    this._containerClosureDate = ''
+  }
+
+  _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]
+            }
+          }
+        })
+      }
+    }
+  }
+
   _showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {