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

package/client/pages/outbound/picking-product.js

@@ -6,12 +6,12 @@ import './show-my-worksheet-list-popup'
 import '../components/worksheet-information-popup'
 import './serial-number-popup'
 import './tote-popup'
-import { sleep } from '@operato/utils'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
+import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
@@ -21,7 +21,8 @@ import { isMobileDevice } from '@things-factory/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { fetchSettingRule } from '../../fetch-setting-value'
-import { BATCH_PICKING, LOCATION_SORTING_RULE, ORDER_SOURCES, PICKING } from '../constants'
+import { showToast } from '../../util/index'
+import { BATCH_PICKING, LOCATION_SORTING_RULE, LOCATION_TYPE, ORDER_SOURCES, PICKING, RO_TYPES } from '../constants'
 
 const PICKING_TYPES = { PICKING, BATCH_PICKING }
 class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
@@ -42,10 +43,14 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       _worksheetInfo: Object,
       _locationName: String,
       _scannable: Boolean,
+      _enableInputQty: Boolean,
+      _releaseGoodType: String,
+      _isLastUnit: Boolean,
       config: Object,
       data: Object,
       isWholePicking: Boolean,
       locationNameSplit: Array,
+      _isReleaseGoodRecall: Boolean,
       locations: Array,
       orderNo: String,
       refPickingType: String,
@@ -140,9 +145,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
     if (
       (this.releaseGoodId || this.taskNo) &&
-      this._selectedOrderInventory.status !== 'MISSING' &&
-      this._selectedOrderInventory.hasMissingInventoryChanges !== true &&
-      this._selectedOrderInventory.status !== 'DONE'
+      this._selectedOrderInventory?.status !== 'MISSING' &&
+      this._selectedOrderInventory?.hasMissingInventoryChanges !== true &&
+      this._selectedOrderInventory?.status !== 'DONE'
     ) {
       actions.push({
         title: i18next.t('button.missing_stock'),
@@ -211,7 +216,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   get serialInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=serialNumber]')?.shadowRoot.querySelector('input')
+    return this.shadowRoot
+      ?.querySelector('barcode-scanable-input[name=serialNumber]')
+      ?.shadowRoot.querySelector('input')
   }
 
   _focusOnNewLocationInput() {
@@ -286,6 +293,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this._reusablePalletList = { records: [] }
     this._selectedOrderInventory = null
     this.scannable = false
+    this._isLastUnit = false
   }
 
   render() {
@@ -338,6 +346,16 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     this.completeHandler()
                   }
                 }
+                let [enableProductScanning, enableToteScanning, enableInputQty] = await Promise.all([
+                  fetchSettingRule('enable-product-scanning', this._worksheetInfo.partnerDomainId),
+                  fetchSettingRule('enable-tote-scanning', this._worksheetInfo.partnerDomainId),
+                  fetchSettingRule('enable-input-qty', this._worksheetInfo.partnerDomainId)
+                ])
+                this._enableProductScanning = enableProductScanning
+                this._enableToteScanning = enableToteScanning
+                this._enableInputQty = enableInputQty
+
+                this.focusOnInput()
               }
             }}"
           >
@@ -349,7 +367,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         ${this.scannable
           ? html`
               <fieldset>
-                ${this._hasBinPicking && (!this.toteNo || this.tote !== '')
+                ${this._hasBinPicking && (!this.toteNo || this.tote == '')
                   ? html`
                       <label>${i18next.t('label.bin_location')}</label>
                       <barcode-scanable-input
@@ -373,32 +391,41 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                       <label>${i18next.t('label.lot_id')}</label>
                       <barcode-scanable-input name="palletId" custom-input></barcode-scanable-input>
                     `}
-                ${this._enableProductScanning
+                ${this._enableProductScanning && this._isCartonLabel
                   ? html`
                       <label>${i18next.t('label.product_barcode')}</label>
                       <barcode-scanable-input name="productBarcode" custom-input></barcode-scanable-input>
                     `
-                  : html`
-                      ${this._isRequireSerialNumberScanningOutbound
-                        ? ''
-                        : html`
-                            <label>${i18next.t('label.picked_qty')}</label>
-                            <input type="number" min="1" name="confirmedQty" />
-                          `}
-                    `}
+                  : ''}
+                ${!this._isRequireSerialNumberScanningOutbound &&
+                ((this._enableInputQty !== 0 && this._releaseGoodType != RO_TYPES.B2B.value) || !this._isCartonLabel)
+                  ? html`${(this._enableInputQty == 1 && !this._releaseGoodType) ||
+                    (this._enableInputQty == 2 && this._releaseGoodType == RO_TYPES.B2C.value) ||
+                    this._enableInputQty == 3 ||
+                    !this._isCartonLabel
+                      ? html`<label>${i18next.t('label.picked_qty')}</label>
+                          <input type="number" min="1" name="confirmedQty" /> `
+                      : ''} `
+                  : ''}
+                ${this._isRequireSerialNumberScanningOutbound
+                  ? html`
+                      <label>${i18next.t('label.serial_number')}</label>
+                      <barcode-scanable-input name="serialNumber" custom-input></barcode-scanable-input>
+                    `
+                  : ``}
                 ${this.isWholePicking ||
                 this._crossDocking ||
                 this._isCartonLabel ||
-                this._enableProductScanning ||
-                this._isRequireSerialNumberScanningOutbound
+                (this._enableProductScanning && this._isCartonLabel)
                   ? ''
                   : html`
                       ${this._incompleteLocationName
                         ? ''
-                        : html`
-                            <label>${i18next.t('label.return_location')}</label>
-                            <barcode-scanable-input name="locationName" custom-input></barcode-scanable-input>
-                          `}
+                        : html`${(this._isRequireSerialNumberScanningOutbound && this._isLastUnit) ||
+                          !this._isRequireSerialNumberScanningOutbound
+                            ? html` <label>${i18next.t('label.return_location')}</label>
+                                <barcode-scanable-input name="locationName" custom-input></barcode-scanable-input>`
+                            : ''}`}
                       <select
                         ?hidden="${!this._incompleteLocationName}"
                         name="newLocationCode"
@@ -416,12 +443,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                         )}
                       </select>
                     `}
-                ${this._isRequireSerialNumberScanningOutbound
-                  ? html`
-                      <label>${i18next.t('label.serial_number')}</label>
-                      <barcode-scanable-input name="serialNumber" custom-input></barcode-scanable-input>
-                    `
-                  : ``}
               </fieldset>
             `
           : ''}
@@ -476,7 +497,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 this.inputForm.reset()
                 this._isReplacement = false
 
-                if (this.binLocationInput) this.binLocationInput.value = ''
                 if (this.productBarcodeInput) this.productBarcodeInput.value = ''
                 if (this.cartonInput) this.cartonInput.value = ''
                 if (this.palletInput) this.palletInput.value = ''
@@ -487,6 +507,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 await this.fetchInventories(
                   this.refPickingType === PICKING_TYPES.PICKING.value ? this.releaseGoodNo : this.taskNo
                 )
+
+                this.focusOnInput
                 let updatedRecords = this._selectedOrderInventory
                 if (updatedRecords.releaseQty === updatedRecords.pickedQty) {
                   updatedRecords.status = 'DONE'
@@ -603,976 +625,1042 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this._hasBinPicking = await enableBinPickingTask
   }
 
-  autoFetchPickingTasks(orderNo) {
-    this.releaseGoodNoInput.value = orderNo
-    this.fetchAll(this.releaseGoodNoInput.value)
-  }
+  formatWorksheetDetailInfos(wsdInfos) {
+    return wsdInfos
+      .map(record => {
+        if (record.pickedQty == record.releaseQty || record.status == 'MISSING') {
+          record.completed = true
+        } else {
+          record.completed = false
+        }
+        record.locationName = record?.location?.name
+        record.product = record?.relatedOrderInv && record?.relatedOrderInv?.product
 
-  async fetchInventories(pickingRefNo) {
-    if (!pickingRefNo) return
+        if (this._crossDocking) {
+          record.batchId = record.relatedOrderInv.batchId
+          record.packingType = record.relatedOrderInv.packingType
+        }
 
-    const data = this._selectedOrderInventory
-    let response
-    switch (this.refPickingType) {
-      case PICKING_TYPES.PICKING.value:
-        response = await client.query({
-          query: gql`
-            query pickingWorksheet($releaseGoodNo: String!, $locationSortingRules: [Sorting!]) {
-              pickingWorksheet(releaseGoodNo: $releaseGoodNo, locationSortingRules: $locationSortingRules) {
-                worksheetInfo {
-                  releaseGood {
-                    id
-                    name
-                    crossDocking
-                  }
-                  bizplaceName
-                  partnerDomainId
-                  refNo
-                  refNo2
-                  refNo3
-                  startedAt
-                  containerNo
-                  marketplaceStatus
-                  shippingProvider
-                  trackingNo
-                }
-                worksheetDetailInfos {
-                  hasMissingInventoryChanges
-                  name
-                  palletId
-                  cartonId
-                  batchId
-                  batchIdRef
-                  product {
-                    id
-                    sku
-                    name
-                    description
-                    isRequireSerialNumberScanningOutbound
-                  }
-                  qty
-                  releaseQty
-                  pickedQty
-                  expirationDate
-                  status
-                  description
-                  targetName
-                  packingType
-                  packingSize
-                  location {
-                    name
-                    description
-                  }
-                  binLocation {
-                    name
-                    description
-                  }
-                  relatedOrderInv {
-                    id
-                    batchId
-                    batchIdRef
-                    packingType
-                    binLocation {
-                      id
-                      name
-                    }
-                    product {
-                      id
-                      sku
-                      name
-                      description
-                      isRequireSerialNumberScanningOutbound
-                    }
-                  }
-                }
-              }
-            }
-          `,
-          variables: { releaseGoodNo: pickingRefNo, locationSortingRules: this.locationSortingRules }
-        })
+        if (this._hasBinPicking) {
+          record.binLocation = record.binLocation?.name
+        }
 
-        if (!response.errors) {
-          this.releaseGoodNo = response.data.pickingWorksheet.worksheetInfo.releaseGood.name
-          this.releaseGoodId = response.data.pickingWorksheet.worksheetInfo.releaseGood.id
-          if (!response.data?.pickingWorksheet) return
+        if (record?.cartonId) {
+          record.hasCartonLabel = true
+        }
 
-          const { worksheetInfo, worksheetDetailInfos } = response.data.pickingWorksheet
-          this._crossDocking = worksheetInfo.releaseGood?._crossDocking
-          this._bizplaceName = worksheetInfo.bizplaceName
-          this._orderNo = this.releaseGoodNo
-          this._worksheetInfo = worksheetInfo
-          this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+        record.releaseProgress = `${record.pickedQty} / ${record.releaseQty}`
+        record.sku = record?.relatedOrderInv.product?.sku
 
-          if (!this._selectedOrderInventory) {
-            this._selectedOrderInventory = this.data.records[0]
-          }
+        return record
+      })
+      .sort((a, b) => a.hasMissingInventoryChanges - b.hasMissingInventoryChanges)
+      .sort((a, b) => a.completed - b.completed)
+  }
 
-          if (
-            this._selectedOrderInventory &&
-            this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty &&
-            !this._selectedOrderInventory.hasMissingInventoryChanges &&
-            this._selectedOrderInventory.status !== 'MISSING'
-          ) {
-            this.scannable = true
+  clearView() {
+    this.data = { records: [] }
+    this.infoForm.reset()
+    this.inputForm.reset()
+    this._isRequireSerialNumberScanningOutbound = false
+    this.releaseGoodNo = null
+    this.releaseGoodId = null
+    this.taskNo = null
+    this._crossDocking = false
+    this._selectedOrderInventory = null
+    this._incompleteLocationName = false
+    this._isExecuting = false
+    this._locationName = null
+    this.toteNo = ''
+  }
+
+  fillUpForm(form, data) {
+    this._incompleteLocationName = false
+    form.reset()
+    for (let key in data) {
+      Array.from(form.querySelectorAll('input')).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 {
-            this.scannable = false
+            field.value = data[key]
           }
+        }
+      })
+    }
+  }
 
-          if (!this._isCartonLabel && data) {
-            const findPalletId = worksheetDetailInfos.find(res => res.palletId == data.palletId)
+  async picking(e) {
+    if (e.keyCode !== 13) return
+    e.preventDefault()
+    try {
+      let answer = await this.validatePicking()
+      if (answer) {
+        if (!answer?.value) return
+      }
+      let orderNo = this.refPickingType === PICKING_TYPES.PICKING.value ? this.releaseGoodNo : this.taskNo
 
-            if (data && findPalletId.hasMissingInventoryChanges) {
-              this.scannable = false
-            }
+      let response = {}
+      if (this.crossDocking) {
+        response = await this.pickCrossDocking()
+      } else if (this._enableProductScanning && this._isCartonLabel) {
+        response = await this.productBarcodePicking()
+      } else {
+        if (this._isReplacement && !this._isCartonLabel) {
+          if (this._isReleaseGoodRecall) {
+            throw new Error(i18next.t('text.lot_replacement_is_not_applicable_on_recall_release_order'))
+          } else {
+            this.openPalletReplacementPopup()
           }
+          return
+        } else {
+          response = await this.pickCommonPicking()
+        }
+      }
 
-          if (this._isCartonLabel && data) {
-            const findCartonId = worksheetDetailInfos.find(res => res.cartonId == data.cartonId)
+      if (!response.errors) {
+        if (this._hasBinPicking && (!this.toteNo || this.tote == '')) {
+          this._currentBinLocation = this.binLocationInput.value
+        }
+        if (this._isRequireSerialNumberScanningOutbound) this.serialInput.value = ''
+        else if (this._enableProductScanning) this.productBarcodeInput.value = ''
+        else this.releaseQtyInput.value = ''
 
-            if (data && findCartonId.hasMissingInventoryChanges) {
-              this.scannable = false
-            }
-          }
+        if (!this._isCartonLabel && !this._isRequireSerialNumberScanningOutbound) {
+          this.palletInput.value = ''
+        }
 
-          if (this._selectedOrderInventory) {
-            const record = this.data.records.find(record => record.name === this._selectedOrderInventory.name)
-            this._selectedOrderInventory = record
-            this.updateSelectedItemProp(record)
-            await this.updateComplete
-            await this.grist.reset()
-            this.fillUpForm(this.inputForm, {
-              ...record,
-              binLocation: record?.binLocation ? record.binLocation : ''
-            })
+        if (!this.isWholePicking && !this._crossDocking && !this._isCartonLabel && this.locationInput)
+          this.locationInput.value = ''
+      }
 
-            if (record.pickedQty == record.releaseQty) {
-              if (this.cartonInput) this.cartonInput.value = ''
-              if (this.palletInput) this.palletInput.value = ''
-            } else {
-              // pre-set bin location from last scan if none was set
-              if (
-                this._hasBinPicking &&
-                this.binLocationInput &&
-                (!this._currentBinLocation || this._currentBinLocation == '')
-              ) {
-                this._currentBinLocation = record?.binLocation ? record.binLocation : ''
-              }
-              this.focusOnInput()
-            }
-          }
+      await this.fetchInventories(orderNo)
 
-          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
-          this._enableToteScanning = await fetchSettingRule('enable-tote-scanning', worksheetInfo.partnerDomainId)
-        }
-        break
-
-      case PICKING_TYPES.BATCH_PICKING.value:
-        response = await client.query({
-          query: gql`
-            query batchPickingWorksheet($taskNo: String!, $locationSortingRules: [Sorting!]) {
-              batchPickingWorksheet(taskNo: $taskNo, locationSortingRules: $locationSortingRules) {
-                worksheetInfo {
-                  bizplaceName
-                  partnerDomainId
-                  startedAt
-                }
-                worksheetDetailInfos {
-                  hasMissingInventoryChanges
-                  palletId
-                  cartonId
-                  batchId
-                  product {
-                    id
-                    name
-                    description
-                    sku
-                    isRequireSerialNumberScanning
-                  }
-                  qty
-                  releaseQty
-                  pickedQty
-                  expirationDate
-                  status
-                  packingType
-                  packingSize
-                  location {
-                    name
-                  }
-                  binLocation {
-                    name
-                  }
-                  relatedOrderInv {
-                    batchId
-                    packingType
-                    product {
-                      id
-                      name
-                      description
-                      sku
-                    }
-                  }
-                }
-              }
-            }
-          `,
-          variables: { taskNo: pickingRefNo, locationSortingRules: this.locationSortingRules }
-        })
+      this.focusOnInput()
 
-        if (!response.errors) {
-          if (!this._selectedOrderInventory) this.clearView()
-          this.taskNo = pickingRefNo
-          if (!response.data?.batchPickingWorksheet) return
+      this.isReplacement = false
+    } catch (e) {
+      showToast(e)
+    }
+  }
 
-          const { worksheetInfo, worksheetDetailInfos } = response.data.batchPickingWorksheet
-          await this.updateComplete
-          this._bizplaceName = worksheetInfo.bizplaceName
-          this._orderNo = this.taskNo
-          this._worksheetInfo = worksheetInfo
-          this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+  openPalletReplacementPopup() {
+    openPopup(
+      html`
+        <picking-replacement-popup
+          .orderInventory="${this._selectedOrderInventory}"
+          .refPickingType="${this.refPickingType}"
+          .replacePalletId="${this.palletInput.value}"
+          @completed="${() => {
+            this._selectedOrderInventory = null
+            let a = this._selectedOrderInventory
+            if (this.refPickingType === PICKING_TYPES.PICKING.value) {
+              this.fetchInventories(this.releaseGoodNoInput.value)
+              this.fetchPalletsHandler(this.releaseGoodNoInput.value)
+            } else {
+              this.fetchInventories(this.taskNoInput.value)
+              this.fetchPalletsHandler(this.taskNoInput.value)
+            }
+            // this._selectedTaskStatus = null
+            this._isReplacement = false
+            this._isExecuting = false
+          }}"
+        ></picking-replacement-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.pallet_replacement')
+      }
+    )
+  }
 
-          if (!this._selectedOrderInventory) {
-            this._selectedOrderInventory = this.data.records[0]
-          }
+  async openSerialNumberPopup() {
+    await sleep(1010)
+    openPopup(
+      html`
+        <serial-number-popup
+          .orderInventory="${this?._selectedOrderInventory?.relatedOrderInv}"
+          .orderType="${i18next.t('text.outbound')}"
+          .orderSource="${ORDER_SOURCES.PICKING.value}"
+          .orderId="${this.releaseGoodId}"
+          .data="${this?._selectedOrderInventory}"
+          @close-serial-number-popup="${async e => {
+            await this.fetchAll(this.releaseGoodNo)
+          }}"
+        ></serial-number-popup>
+      `,
+      {
+        closable: false,
+        backdrop: false,
+        escapable: false,
+        size: 'large',
+        title: i18next.t('title.serial_number_list')
+      }
+    )
+  }
 
-          if (
-            this._selectedOrderInventory &&
-            this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty &&
-            !this._selectedOrderInventory.hasMissingInventoryChanges &&
-            this._selectedOrderInventory.status !== 'MISSING'
-          ) {
-            this.scannable = true
-          } else {
-            this.scannable = false
-          }
+  async openTotePopup() {
+    await sleep(1010)
+    openPopup(
+      html`
+        <tote-popup
+          .orderNo="${this.releaseGoodNo}"
+          .toteNo="${this.toteNo}"
+          .bizplace="${this._bizplaceName}"
+          @completed="${async e => {
+            this.toteNo = e.detail
+          }}"
+        ></tote-popup>
+      `,
+      {
+        closable: false,
+        backdrop: false,
+        escapable: false,
+        size: 'large',
+        title: i18next.t('title.tote_scanning')
+      }
+    )
+  }
 
-          if (!this._isCartonLabel && data) {
-            const findPalletId = worksheetDetailInfos.find(res => res.palletId == data.palletId)
+  _openWorksheetInformation() {
+    openPopup(
+      html`
+        <worksheet-information-popup .worksheetInformation="${this._worksheetInfo}"></worksheet-information-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.order_information')
+      }
+    )
+  }
 
-            if (data && findPalletId.hasMissingInventoryChanges) {
-              this.scannable = false
-            }
-          }
+  async pick_crossDocking() {
+    return await client.mutate({
+      mutation: gql`
+        mutation crossDockPicking(
+          $worksheetDetailName: String!
+          $worksheetType: String!
+          $palletId: String!
+          $releaseQty: Int!
+        ) {
+          crossDockPicking(
+            worksheetDetailName: $worksheetDetailName
+            worksheetType: $worksheetType
+            palletId: $palletId
+            releaseQty: $releaseQty
+          )
+        }
+      `,
+      variables: {
+        worksheetDetailName: this._selectedOrderInventory.name,
+        worksheetType: this.refPickingType,
+        palletId: this.palletInput.value,
+        releaseQty: parseInt(this.releaseQtyInput.value)
+      }
+    })
+  }
 
-          if (this._isCartonLabel && data) {
-            const findCartonId = worksheetDetailInfos.find(res => res.cartonId == data.cartonId)
+  async pickCommonPicking() {
+    if (this._isExecuting) throw new Error(i18next.t('text.previous_picking_is_still_executing_please_wait'))
+    this._isExecuting = true
 
-            if (data && findCartonId.hasMissingInventoryChanges) {
-              this.scannable = false
+    try {
+      switch (this.refPickingType) {
+        case PICKING_TYPES.PICKING.value:
+          return await client.mutate({
+            mutation: gql`
+              mutation picking(
+                $worksheetDetailName: String!
+                $worksheetType: String!
+                $palletId: String
+                $locationName: String!
+                $releaseQty: Int!
+                $binLocation: String
+                $serialNumber: String
+                $toteNo: String
+              ) {
+                picking(
+                  worksheetDetailName: $worksheetDetailName
+                  worksheetType: $worksheetType
+                  palletId: $palletId
+                  locationName: $locationName
+                  releaseQty: $releaseQty
+                  binLocation: $binLocation
+                  serialNumber: $serialNumber
+                  toteNo: $toteNo
+                )
+              }
+            `,
+            variables: {
+              worksheetDetailName: this._selectedOrderInventory.name,
+              worksheetType: this.refPickingType,
+              palletId: this.palletInput.value.trim(),
+              locationName: this._locationName ? this._locationName : this._selectedOrderInventory?.location.name,
+              releaseQty: this._isRequireSerialNumberScanningOutbound ? 1 : parseInt(this.releaseQtyInput.value),
+              binLocation:
+                this._hasBinPicking && (!this.toteNo || this.tote == '') ? this.binLocationInput.value : null,
+              serialNumber: this._isRequireSerialNumberScanningOutbound ? this.serialInput.value : null,
+              toteNo: this._enableToteScanning && this.toteNo !== '' ? this.toteNo : null
             }
-          }
-
-          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
-
-          if (this._selectedOrderInventory) {
-            const record = this.data.records.find(
-              record =>
-                record.product.sku === this._selectedOrderInventory.product.sku &&
-                record.palletId === this._selectedOrderInventory.palletId
-            )
-
-            this._selectedOrderInventory = record
-            this.updateSelectedItemProp(record)
+          })
 
-            if (record.pickedQty == record.releaseQty) {
-              if (this._isCartonLabel) {
-                //need to relook into clearview logic
-                if (this.cartonInput) this.cartonInput.value = ''
-                if (this.productBarcodeInput) this.productBarcodeInput.value = ''
+        case PICKING_TYPES.BATCH_PICKING.value:
+          return await client.mutate({
+            mutation: gql`
+              mutation batchPicking(
+                $taskNo: String!
+                $worksheetType: String!
+                $palletId: String!
+                $locationName: String
+                $binLocationName: String
+                $releaseQty: Int!
+              ) {
+                batchPicking(
+                  taskNo: $taskNo
+                  worksheetType: $worksheetType
+                  palletId: $palletId
+                  locationName: $locationName
+                  binLocationName: $binLocationName
+                  releaseQty: $releaseQty
+                )
               }
-              this.fillUpForm(this.inputForm, record)
-            } else {
-              this.fillUpForm(this.inputForm, record)
-              this.focusOnInput()
+            `,
+            variables: {
+              taskNo: this.taskNo,
+              worksheetType: this.refPickingType,
+              palletId: this.palletInput.value.trim(),
+              locationName: this._locationName ? this._locationName : this._selectedOrderInventory?.location.name,
+              binLocationName:
+                this._hasBinPicking && (!this.toteNo || this.tote == '') ? this.binLocationInput.value : null,
+              releaseQty: parseInt(this.releaseQtyInput.value)
             }
-          }
-        }
-        break
+          })
+      }
+    } catch (e) {
+      showToast(e)
+    } finally {
+      this._isExecuting = false
     }
-
-    this.updateContext()
   }
 
-  formatWorksheetDetailInfos(wsdInfos) {
-    return wsdInfos
-      .map(record => {
-        if (record.pickedQty == record.releaseQty || record.status == 'MISSING') {
-          record.completed = true
-        } else {
-          record.completed = false
-        }
-        record.locationName = record?.location?.name
-        record.product = record?.relatedOrderInv && record?.relatedOrderInv?.product
+  async productBarcodePicking() {
+    if (this._isExecuting) throw new Error(i18next.t('text.previous_picking_is_still_executing_please_wait'))
+    this._isExecuting = true
 
-        if (this._crossDocking) {
-          record.batchId = record.relatedOrderInv.batchId
-          record.packingType = record.relatedOrderInv.packingType
-        }
+    try {
+      switch (this.refPickingType) {
+        case PICKING_TYPES.PICKING.value:
+          return await client.mutate({
+            mutation: gql`
+              mutation scanProductPicking(
+                $worksheetDetailName: String!
+                $worksheetType: String!
+                $productBarcode: String!
+                $cartonId: String!
+                $binLocation: String
+                $serialNumber: String
+                $toteNo: String
+                $pickingQty: Int
+              ) {
+                scanProductPicking(
+                  worksheetDetailName: $worksheetDetailName
+                  worksheetType: $worksheetType
+                  productBarcode: $productBarcode
+                  cartonId: $cartonId
+                  binLocation: $binLocation
+                  serialNumber: $serialNumber
+                  toteNo: $toteNo
+                  pickingQty: $pickingQty
+                )
+              }
+            `,
+            variables: {
+              worksheetDetailName: this._selectedOrderInventory.name,
+              worksheetType: this.refPickingType,
+              productBarcode: this.productBarcodeInput.value.trim(),
+              cartonId: this.cartonInput.value.trim(),
+              serialNumber: this._isRequireSerialNumberScanningOutbound ? this.serialInput.value : null,
+              binLocation:
+                this._hasBinPicking && (!this.toteNo || this.tote == '') ? this.binLocationInput.value : null,
+              toteNo: this._enableToteScanning && this.toteNo !== '' ? this.toteNo : null,
+              pickingQty: this.releaseQtyInput?.value ? parseInt(this.releaseQtyInput.value) : 1
+            }
+          })
+
+        case PICKING_TYPES.BATCH_PICKING.value:
+          return await client.mutate({
+            mutation: gql`
+              mutation scanProductBatchPicking(
+                $taskNo: String!
+                $worksheetType: String!
+                $cartonId: String!
+                $inventory: InventoryPatch!
+                $productBarcode: String!
+                $binLocationName: String
+                $pickingQty: Int
+              ) {
+                scanProductBatchPicking(
+                  taskNo: $taskNo
+                  worksheetType: $worksheetType
+                  cartonId: $cartonId
+                  inventory: $inventory
+                  productBarcode: $productBarcode
+                  binLocationName: $binLocationName
+                  pickingQty: $pickingQty
+                )
+              }
+            `,
+            variables: {
+              taskNo: this.taskNo,
+              worksheetType: this.refPickingType,
+              cartonId: this.cartonInput.value.trim(),
+              productBarcode: this.productBarcodeInput.value.trim(),
+              inventory: {
+                batchId: this._selectedOrderInventory.batchId,
+                packingType: this._selectedOrderInventory.packingType,
+                packingSize: this._selectedOrderInventory.packingSize,
+                product: { id: this._selectedOrderInventory.product.id }
+              },
+              binLocationName:
+                this._hasBinPicking && (!this.toteNo || this.tote == '') ? this.binLocationInput.value : null,
+              pickingQty: this.releaseQtyInput?.value ? parseInt(this.releaseQtyInput.value) : 1
+            }
+          })
+      }
+    } catch (e) {
+      throw e
+    } finally {
+      this._isExecuting = false
+    }
+  }
 
-        if (this._hasBinPicking) {
-          record.binLocation = record.binLocation?.name
-        }
+  async validatePicking() {
+    // validate for order selection
+    // pallet id existing
 
-        if (record?.cartonId) {
-          record.hasCartonLabel = true
-        }
+    if ((!this.palletInput?.value || !this.cartonInput?.value) && this._isRequireSerialNumberScanningOutbound) {
+      if (!this.serialInput?.value) {
+        this._focusOnSerialInput()
+        throw new Error(i18next.t('text.empty_serial_number'))
+      }
+    }
 
-        record.releaseProgress = `${record.pickedQty} / ${record.releaseQty}`
-        record.sku = record?.relatedOrderInv.product?.sku
+    if (!this._isCartonLabel) {
+      if (!this.palletInput.value) {
+        this._focusOnLotNoInput()
+        throw new Error(i18next.t('text.lot_id_is_empty'))
+      } else {
+        if (
+          this._selectedOrderInventory.palletId !== this.palletInput.value &&
+          !this._isRequireSerialNumberScanningOutbound
+        ) {
+          const isInProgressing = await this.checkProgressingPallet(this.palletInput.value)
+          if (isInProgressing) throw new Error(i18next.t('text.pallet_is_in_progressing'))
 
-        return record
-      })
-      .sort((a, b) => a.hasMissingInventoryChanges - b.hasMissingInventoryChanges)
-      .sort((a, b) => a.completed - b.completed)
-  }
+          this._isReplacement = await this.checkProductIdenticality(
+            this._selectedOrderInventory.palletId,
+            this.palletInput.value
+          )
 
-  async fetchPalletsHandler(releaseGoodNo) {
-    const response = await client.query({
-      query: gql`
-        query pallets($filters: [Filter!]!, $pagination: Pagination) {
-          pallets(filters: $filters, pagination: $pagination) {
-            items {
-              id
-              name
-              owner {
-                id
-                name
-                description
-              }
-              holder {
-                id
-                name
-                description
-              }
-              status
-            }
+          if (!this._isReplacement) {
+            this._focusOnLotNoInput()
+            throw new Error(i18next.t('text.wrong_lot_id'))
           }
         }
-      `,
-      variables: {
-        filters: [{ name: 'refOrderNo', value: releaseGoodNo, operator: 'eq' }],
-        pagination: { page: 1, limit: 9999999 }
       }
-    })
+    } else {
+      if (!this.cartonInput?.value) {
+        this._focusOnCartonNoInput()
+        throw new Error(i18next.t('text.carton_id_is_empty'))
+      }
 
-    if (!response.errors) {
-      this._reusablePalletList = { records: response.data.pallets.items }
-    }
-  }
+      if (this._selectedOrderInventory.cartonId) {
+        if (this._selectedOrderInventory.cartonId !== this.cartonInput.value) {
+          //carton replacement?
+          throw new Error(i18next.t('text.invalid_carton_id'))
+          this._isReplacement = await this.checkCartonIdenticality(
+            this._selectedOrderInventory.cartonId,
+            this._selectedOrderInventory.palletId,
+            this.cartonInput.value
+          )
 
-  clearView() {
-    this.data = { records: [] }
-    this.infoForm.reset()
-    this.inputForm.reset()
-    this._isRequireSerialNumberScanningOutbound = false
-    this.releaseGoodNo = null
-    this.releaseGoodId = null
-    this.taskNo = null
-    this._crossDocking = false
-    this._selectedOrderInventory = null
-    this._incompleteLocationName = false
-    this._isExecuting = false
-    this._locationName = null
-    this.toteNo = ''
-  }
+          if (!this._isReplacement) {
+            this.cartonInput.value = ''
+            this._focusOnCartonNoInput()
+            throw new Error(i18next.t('text.wrong_carton_id'))
+          }
+        }
 
-  fillUpForm(form, data) {
-    this._incompleteLocationName = false
-    form.reset()
-    for (let key in data) {
-      Array.from(form.querySelectorAll('input')).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]
+        if (this._enableProductScanning) {
+          if (!this.productBarcodeInput?.value) {
+            this._focusOnProductBarcodeInput()
+            throw new Error(i18next.t('text.empty_product_barcode'))
           }
         }
-      })
+      }
     }
-  }
 
-  async picking(e) {
-    if (e.keyCode !== 13) return
-    e.preventDefault()
-    try {
-      let answer = await this.validatePicking()
+    if (!this._isReplacement) {
+      if (!this._isRequireSerialNumberScanningOutbound) {
+        if (this.releaseQtyInput) {
+          if (!parseInt(this.releaseQtyInput?.value)) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.release_qty_is_empty'))
+          }
 
-      if (answer) {
-        if (!answer?.value) return
-      }
+          if (!this.releaseQtyInput?.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
 
-      let response = {}
-      if (this.crossDocking) {
-        response = await this.pickCrossDocking()
-      } else if (this._enableProductScanning || this._isCartonLabel) {
-        response = await this.productBarcodePicking()
-      } else {
-        if (this._isReplacement && !this._isCartonLabel) {
-          this.openPalletReplacementPopup()
-          return
-        } else {
-          response = await this.pickCommonPicking()
+          // typed qty should be matched with release qty.
+          if (
+            parseInt(this.releaseQtyInput.value) !==
+              this._selectedOrderInventory.releaseQty -
+                (this._selectedOrderInventory.pickedQty ? this._selectedOrderInventory.pickedQty : 0) &&
+            !this._isCartonLabel
+          ) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.wrong_release_qty'))
+          }
         }
       }
 
-      if (!response.errors) {
-        if (this._hasBinPicking) {
-          this._currentBinLocation = this.binLocationInput.value
-        }
-        if (this._isRequireSerialNumberScanningOutbound) this.serialInput.value = ''
-        else if (this._enableProductScanning) this.productBarcodeInput.value = ''
-        else this.releaseQtyInput.value = ''
+      if (!this._isCartonLabel) {
+        // location id existing
+        if (!this.isWholePicking && this.locationInput) {
+          if (!this.locationInput.value) {
+            this._focusOnLocationNameInput()
+            throw new Error(i18next.t('text.location_id_is_empty'))
+          }
+          // check if actual return location
+          this._locationName =
+            this.isWholePicking || !this.locationInput
+              ? this._selectedOrderInventory.location.name
+              : this.locationInput.value
+          // 1. Check whether location is changed
+          if (this._selectedOrderInventory.location.name !== this._locationName) {
+            this.locationNameSplit = this.locationInput.value.split('-')
+            if (this.locationNameSplit.length < 3) {
+              this._focusOnLocationNameInput()
+              throw new Error(i18next.t('text.invalid_return_location'))
+            }
+            const zonePortions = this.locationNameSplit[0].match(/[a-zA-Z0-9]+/g)
+            const rowPortions = this.locationNameSplit[1].match(/[a-zA-Z0-9]+/g)
+            const columnPortions = this.locationNameSplit[2].match(/[a-zA-Z0-9]+/g)
+            const shelfPortions = this.locationNameSplit[3].match(/[a-zA-Z0-9]+/g)
+            if (this.locationNameSplit.length === 3) {
+              this.locations = await this.fetchLocations(zonePortions[0], rowPortions[0], columnPortions[0])
+              this._focusOnNewLocationInput()
 
-        if (!this._isCartonLabel && !this._isRequireSerialNumberScanningOutbound) {
-          this.palletInput.value = ''
-        }
+              const selectedLocations = this.locations.find(res => {
+                return res.name === this._locationName
+              })
 
-        if (!this.isWholePicking && !this._crossDocking && !this._isCartonLabel && this.locationInput)
-          this.locationInput.value = ''
-        if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-          await this.fetchInventories(this.releaseGoodNo)
-        } else {
-          await this.fetchInventories(this.taskNo)
-        }
+              if (this._isReleaseGoodRecall) {
+                if (![selectedLocations.type].includes(LOCATION_TYPE.QUARANTINE.value, LOCATION_TYPE.RESERVE.value)) {
+                  throw new Error(i18next.t('text.location_scanned_is_not_a_quarantine_zone_or_reserved_zone'))
+                }
+              }
 
-        if (
-          this._selectedOrderInventory &&
-          this._selectedOrderInventory.pickedQty == this._selectedOrderInventory.releaseQty
-        ) {
-          this._selectedOrderInventory = null
-          if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-            await this.fetchInventories(this.releaseGoodNo)
-          } else {
-            await this.fetchInventories(this.taskNo)
-          }
-        }
-      } else {
-        this._selectedOrderInventory = null
-        if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-          await this.fetchInventories(this.releaseGoodNo)
-        } else {
-          await this.fetchInventories(this.taskNo)
-        }
-      }
+              if (this.locations.length > 0) {
+                this._incompleteLocationName = true
+                throw new Error(i18next.t('text.please_select_the_location_again'))
+              } else {
+                throw new Error(i18next.t('text.invalid_return_location'))
+              }
+            } else if (this.locationNameSplit.length === 4) {
+              this.locations = await this.fetchLocations(
+                zonePortions[0],
+                rowPortions[0],
+                columnPortions[0],
+                shelfPortions[0]
+              )
+
+              const selectedLocations = this.locations.find(res => {
+                return res.name === this._locationName
+              })
 
-      this.focusOnInput()
+              if (this._isReleaseGoodRecall) {
+                if (![selectedLocations.type].includes(LOCATION_TYPE.QUARANTINE.value, LOCATION_TYPE.RESERVE.value)) {
+                  throw new Error(i18next.t('text.location_scanned_is_not_a_quarantine_zone_or_reserved_zone'))
+                }
+              }
 
-      this.isReplacement = false
-    } catch (e) {
-      this._showToast(e)
-    }
-  }
+              let relocateConfirmation = await CustomAlert({
+                title: i18next.t('title.relocate'),
+                text: i18next.t('text.are_you_sure'),
+                confirmButton: { text: i18next.t('button.relocate') },
+                cancelButton: { text: i18next.t('button.cancel') }
+              })
 
-  openPalletReplacementPopup() {
-    openPopup(
-      html`
-        <picking-replacement-popup
-          .orderInventory="${this._selectedOrderInventory}"
-          .refPickingType="${this.refPickingType}"
-          .replacePalletId="${this.palletInput.value}"
-          @completed="${() => {
-            this._selectedOrderInventory = null
-            let a = this._selectedOrderInventory
-            if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-              this.fetchInventories(this.releaseGoodNoInput.value)
-              this.fetchPalletsHandler(this.releaseGoodNoInput.value)
-            } else {
-              this.fetchInventories(this.taskNoInput.value)
-              this.fetchPalletsHandler(this.taskNoInput.value)
+              if (!relocateConfirmation.isConfirmed) {
+                this._incompleteLocationName = false
+                this.locationNameSplit = []
+                return relocateConfirmation
+              }
             }
-            // this._selectedTaskStatus = null
-            this._isReplacement = false
-            this._isExecuting = false
-          }}"
-        ></picking-replacement-popup>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.pallet_replacement')
+          }
+        }
       }
-    )
-  }
+    }
 
-  async openSerialNumberPopup() {
-    await sleep(1010)
-    openPopup(
-      html`
-        <serial-number-popup
-          .orderInventory="${this?._selectedOrderInventory?.relatedOrderInv}"
-          .orderType="${i18next.t('text.outbound')}"
-          .orderSource="${ORDER_SOURCES.PICKING.value}"
-          .orderId="${this.releaseGoodId}"
-          .data="${this?._selectedOrderInventory}"
-          @close-serial-number-popup="${async e => {
-            await this.fetchAll(this.releaseGoodNo)
-          }}"
-        ></serial-number-popup>
-      `,
-      {
-        closable: false,
-        backdrop: false,
-        escapable: false,
-        size: 'large',
-        title: i18next.t('title.serial_number_list')
+    if (this._crossDocking) {
+      // typed qty should be smaller than release qty.
+      if (parseInt(this.releaseQtyInput.value) > this._selectedOrderInventory.releaseQty) {
+        this._focusOnReleaseQtyInput()
+        throw new Error(i18next.t('text.wrong_release_qty'))
       }
-    )
+    }
   }
 
-  async openTotePopup() {
-    await sleep(1010)
-    openPopup(
-      html`
-        <tote-popup
-          .orderNo="${this.releaseGoodNo}"
-          .toteNo="${this.toteNo}"
-          .bizplace="${this._bizplaceName}"
-          @completed="${async e => {
-            this.toteNo = e.detail
-          }}"
-        ></tote-popup>
+  async checkProgressingPallet(palletId) {
+    const response = await client.query({
+      query: gql`
+        query checkProgressingPallet($palletId: String!) {
+          checkProgressingPallet(palletId: $palletId)
+        }
       `,
-      {
-        closable: false,
-        backdrop: false,
-        escapable: false,
-        size: 'large',
-        title: i18next.t('title.tote_scanning')
-      }
-    )
+      variables: { palletId }
+    })
+
+    if (!response.errors) {
+      return response.data.checkProgressingPallet
+    }
   }
 
-  _openWorksheetInformation() {
-    openPopup(
-      html`
-        <worksheet-information-popup .worksheetInformation="${this._worksheetInfo}"></worksheet-information-popup>
+  async checkProductIdenticality(palletA, palletB) {
+    const response = await client.query({
+      query: gql`
+        query checkProductIdenticality($palletA: String!, $palletB: String!) {
+          checkProductIdenticality(palletA: $palletA, palletB: $palletB)
+        }
       `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.order_information')
-      }
-    )
+      variables: { palletA, palletB }
+    })
+
+    if (!response.errors) {
+      return response.data.checkProductIdenticality
+    }
   }
 
-  async pick_crossDocking() {
-    return await client.mutate({
-      mutation: gql`
-        mutation crossDockPicking(
-          $worksheetDetailName: String!
-          $worksheetType: String!
-          $palletId: String!
-          $releaseQty: Int!
-        ) {
-          crossDockPicking(
-            worksheetDetailName: $worksheetDetailName
-            worksheetType: $worksheetType
-            palletId: $palletId
-            releaseQty: $releaseQty
-          )
+  async checkCartonIdenticality(cartonA, palletA, cartonB) {
+    const response = await client.query({
+      query: gql`
+        query checkCartonIdenticality($cartonA: String!, $palletA: String!, $cartonB: String!) {
+          checkCartonIdenticality(cartonA: $cartonA, palletA: $palletA, cartonB: $cartonB)
         }
       `,
-      variables: {
-        worksheetDetailName: this._selectedOrderInventory.name,
-        worksheetType: this.refPickingType,
-        palletId: this.palletInput.value,
-        releaseQty: parseInt(this.releaseQtyInput.value)
-      }
+      variables: { cartonA, palletA, cartonB }
     })
+
+    if (!response.errors) {
+      return response.data.checkCartonIdenticality
+    }
+  }
+
+  async fetchLocations(zone, row, column) {
+    const sortings = [{ name: 'name', desc: false }]
+    const filters = [
+      { name: 'zone', operator: 'eq', value: zone },
+      { name: 'row', operator: 'eq', value: row },
+      { name: 'column', operator: 'eq', value: column }
+    ]
+
+    if (filters) {
+      const response = await client.query({
+        query: gql`
+          query locations($filters: [Filter!], $sortings: [Sorting!]) {
+            locations(filters: $filters, sortings: $sortings) {
+              items {
+                id
+                name
+                zone
+                row
+                column
+                shelf
+                status
+                type
+              }
+            }
+          }
+        `,
+        variables: { filters, sortings }
+      })
+
+      if (!response.errors) {
+        return response.data.locations.items || []
+      }
+    }
+  }
+
+  autoFetchPickingTasks(orderNo) {
+    this.releaseGoodNoInput.value = orderNo
+    this.fetchAll(this.releaseGoodNoInput.value)
   }
 
-  async pickCommonPicking() {
-    if (this._isExecuting) throw new Error(i18next.t('text.previous_picking_is_still_executing_please_wait'))
-    this._isExecuting = true
+  async fetchInventories(pickingRefNo) {
+    if (!pickingRefNo) return
+
+    //this.releaseGoodNo will be incorrect if worksheet list is used, therefore it's assigned here
+    //this._selectedOrderInventory still has the value of previous order, therefore it's cleared here
+    if (this.releaseGoodNo !== pickingRefNo) {
+      this.releaseGoodNo = pickingRefNo
+      this._selectedOrderInventory = null
+    }
+
+    const data = this._selectedOrderInventory
+    let response
+    switch (this.refPickingType) {
+      case PICKING_TYPES.PICKING.value:
+        response = await client.query({
+          query: gql`
+            query pickingWorksheet($releaseGoodNo: String!, $locationSortingRules: [Sorting!]) {
+              pickingWorksheet(releaseGoodNo: $releaseGoodNo, locationSortingRules: $locationSortingRules) {
+                worksheetInfo {
+                  releaseGood {
+                    id
+                    name
+                    recall
+                    crossDocking
+                    type
+                  }
+                  bizplaceName
+                  partnerDomainId
+                  refNo
+                  refNo2
+                  refNo3
+                  startedAt
+                  containerNo
+                  marketplaceStatus
+                  shippingProvider
+                  trackingNo
+                }
+                worksheetDetailInfos {
+                  hasMissingInventoryChanges
+                  name
+                  palletId
+                  cartonId
+                  batchId
+                  batchIdRef
+                  product {
+                    id
+                    sku
+                    name
+                    description
+                    isRequireSerialNumberScanningOutbound
+                  }
+                  qty
+                  releaseQty
+                  pickedQty
+                  expirationDate
+                  status
+                  description
+                  targetName
+                  packingType
+                  packingSize
+                  location {
+                    name
+                    description
+                  }
+                  binLocation {
+                    name
+                    description
+                  }
+                  relatedOrderInv {
+                    id
+                    batchId
+                    batchIdRef
+                    packingType
+                    binLocation {
+                      id
+                      name
+                    }
+                    product {
+                      id
+                      sku
+                      name
+                      description
+                      isRequireSerialNumberScanningOutbound
+                    }
+                  }
+                }
+              }
+            }
+          `,
+          variables: { releaseGoodNo: pickingRefNo, locationSortingRules: this.locationSortingRules }
+        })
+
+        if (!response.errors) {
+          this._isReleaseGoodRecall = response.data.pickingWorksheet.worksheetInfo.releaseGood.recall
+          let releaseGood = response.data.pickingWorksheet.worksheetInfo.releaseGood
+          this.releaseGoodId = releaseGood.id
+          this._releaseGoodType = releaseGood.type
+
+          if (!response.data?.pickingWorksheet) return
+          const { worksheetInfo, worksheetDetailInfos } = response.data.pickingWorksheet
+          this._crossDocking = worksheetInfo.releaseGood?._crossDocking
+          this._bizplaceName = worksheetInfo.bizplaceName
+          this._orderNo = this.releaseGoodNo
+          this._worksheetInfo = worksheetInfo
+          let data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+          this.data = { ...data }
 
-    try {
-      switch (this.refPickingType) {
-        case PICKING_TYPES.PICKING.value:
-          return await client.mutate({
-            mutation: gql`
-              mutation picking(
-                $worksheetDetailName: String!
-                $worksheetType: String!
-                $palletId: String
-                $locationName: String!
-                $releaseQty: Int!
-                $binLocation: String
-                $serialNumber: String
-                $toteNo: String
-              ) {
-                picking(
-                  worksheetDetailName: $worksheetDetailName
-                  worksheetType: $worksheetType
-                  palletId: $palletId
-                  locationName: $locationName
-                  releaseQty: $releaseQty
-                  binLocation: $binLocation
-                  serialNumber: $serialNumber
-                  toteNo: $toteNo
-                )
+          if (!this._selectedOrderInventory) {
+            this._selectedOrderInventory = data.records[0]
+          } else {
+            let currentData = data.records.find(record => record.name === this._selectedOrderInventory.name)
+
+            if (currentData.completed) {
+              if (this.cartonInput) this.cartonInput.value = ''
+              if (this.palletInput) this.palletInput.value = ''
+              let nextData = data.records.filter(rec => !rec.completed)
+              if (nextData.length > 0) {
+                this._selectedOrderInventory = nextData[0]
+              } else {
+                this._selectedOrderInventory = null
               }
-            `,
-            variables: {
-              worksheetDetailName: this._selectedOrderInventory.name,
-              worksheetType: this.refPickingType,
-              palletId: this.palletInput.value.trim(),
-              locationName: this._locationName ? this._locationName : this._selectedOrderInventory?.location.name,
-              releaseQty: this._isRequireSerialNumberScanningOutbound ? 1 : parseInt(this.releaseQtyInput.value),
-              binLocation: this._hasBinPicking ? this.binLocationInput.value : null,
-              serialNumber: this._isRequireSerialNumberScanningOutbound ? this.serialInput.value : null,
-              toteNo: this._enableToteScanning && this.toteNo !== '' ? this.toteNo : null
             }
-          })
+          }
 
-        case PICKING_TYPES.BATCH_PICKING.value:
-          return await client.mutate({
-            mutation: gql`
-              mutation batchPicking(
-                $taskNo: String!
-                $worksheetType: String!
-                $palletId: String!
-                $locationName: String
-                $binLocationName: String
-                $releaseQty: Int!
+          if (this._selectedOrderInventory) {
+            const record = data.records.find(record => record.name === this._selectedOrderInventory.name)
+            this._selectedOrderInventory = record
+            this.updateSelectedItemProp(record)
+            await this.updateComplete
+            await this.grist.reset()
+            this.fillUpForm(this.inputForm, {
+              ...record,
+              binLocation: record?.binLocation ? record.binLocation : ''
+            })
+
+            if (record.pickedQty == record.releaseQty) {
+              if (this.cartonInput) this.cartonInput.value = ''
+              if (this.palletInput) this.palletInput.value = ''
+            } else {
+              // pre-set bin location from last scan if none was set
+              if (
+                this._hasBinPicking &&
+                this.binLocationInput &&
+                (!this._currentBinLocation || this._currentBinLocation == '')
               ) {
-                batchPicking(
-                  taskNo: $taskNo
-                  worksheetType: $worksheetType
-                  palletId: $palletId
-                  locationName: $locationName
-                  binLocationName: $binLocationName
-                  releaseQty: $releaseQty
-                )
+                this._currentBinLocation = record?.binLocation ? record.binLocation : ''
               }
-            `,
-            variables: {
-              taskNo: this.taskNo,
-              worksheetType: this.refPickingType,
-              palletId: this.palletInput.value.trim(),
-              locationName: this._locationName ? this._locationName : this._selectedOrderInventory?.location.name,
-              binLocationName: this._hasBinPicking ? this.binLocationInput.value : null,
-              releaseQty: parseInt(this.releaseQtyInput.value)
             }
-          })
-      }
-    } catch (e) {
-      this._showToast(e)
-    } finally {
-      this._selectedOrderInventory = null
-      this._isExecuting = false
-    }
-  }
 
-  async productBarcodePicking() {
-    if (this._isExecuting) throw new Error(i18next.t('text.previous_picking_is_still_executing_please_wait'))
-    this._isExecuting = true
+            if (
+              record.releaseQty - record.pickedQty == 1 &&
+              !this._isCartonLabel &&
+              this._isRequireSerialNumberScanningOutbound
+            ) {
+              this._isLastUnit = true
+            } else {
+              this._isLastUnit = false
+            }
+          }
 
-    try {
-      switch (this.refPickingType) {
-        case PICKING_TYPES.PICKING.value:
-          return await client.mutate({
-            mutation: gql`
-              mutation scanProductPicking(
-                $worksheetDetailName: String!
-                $worksheetType: String!
-                $productBarcode: String!
-                $cartonId: String!
-                $binLocation: String
-                $serialNumber: String
-                $toteNo: String
-              ) {
-                scanProductPicking(
-                  worksheetDetailName: $worksheetDetailName
-                  worksheetType: $worksheetType
-                  productBarcode: $productBarcode
-                  cartonId: $cartonId
-                  binLocation: $binLocation
-                  serialNumber: $serialNumber
-                  toteNo: $toteNo
-                )
+          if (
+            this._selectedOrderInventory &&
+            this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty &&
+            !this._selectedOrderInventory?.hasMissingInventoryChanges &&
+            this._selectedOrderInventory.status !== 'MISSING'
+          ) {
+            this.scannable = true
+          } else {
+            this.scannable = false
+          }
+
+          if (data) {
+            if (!this._isCartonLabel) {
+              const findPalletId = worksheetDetailInfos.find(res => res.palletId == data.palletId)
+
+              if (data && findPalletId?.hasMissingInventoryChanges) {
+                this.scannable = false
               }
-            `,
-            variables: {
-              worksheetDetailName: this._selectedOrderInventory.name,
-              worksheetType: this.refPickingType,
-              productBarcode: this.productBarcodeInput.value.trim(),
-              cartonId: this.cartonInput.value.trim(),
-              serialNumber: this._isRequireSerialNumberScanningOutbound ? this.serialInput.value : null,
-              binLocation: this._hasBinPicking ? this.binLocationInput.value : null,
-              toteNo: this._enableToteScanning && this.toteNo !== '' ? this.toteNo : null
-            }
-          })
+            } else {
+              const findCartonId = worksheetDetailInfos.find(res => res.cartonId == data.cartonId)
 
-        case PICKING_TYPES.BATCH_PICKING.value:
-          return await client.mutate({
-            mutation: gql`
-              mutation scanProductBatchPicking(
-                $taskNo: String!
-                $worksheetType: String!
-                $cartonId: String!
-                $inventory: InventoryPatch!
-                $productBarcode: String!
-                $binLocationName: String
-              ) {
-                scanProductBatchPicking(
-                  taskNo: $taskNo
-                  worksheetType: $worksheetType
-                  cartonId: $cartonId
-                  inventory: $inventory
-                  productBarcode: $productBarcode
-                  binLocationName: $binLocationName
-                )
+              if (data && findCartonId?.hasMissingInventoryChanges) {
+                this.scannable = false
               }
-            `,
-            variables: {
-              taskNo: this.taskNo,
-              worksheetType: this.refPickingType,
-              cartonId: this.cartonInput.value.trim(),
-              productBarcode: this.productBarcodeInput.value.trim(),
-              inventory: {
-                batchId: this._selectedOrderInventory.batchId,
-                packingType: this._selectedOrderInventory.packingType,
-                packingSize: this._selectedOrderInventory.packingSize,
-                product: { id: this._selectedOrderInventory.product.id }
-              },
-              binLocationName: this._hasBinPicking ? this.binLocationInput.value : null
             }
-          })
-      }
-    } catch (e) {
-      this._showToast(e)
-    } finally {
-      this._isExecuting = false
-    }
-  }
+          }
+        }
+        break
 
-  async validatePicking() {
-    // validate for order selection
-    // pallet id existing
-    if (!this._isCartonLabel) {
-      if (!this.palletInput.value) {
-        this._focusOnLotNoInput()
-        throw new Error(i18next.t('text.lot_id_is_empty'))
-      } else {
-        if (
-          this._selectedOrderInventory.palletId !== this.palletInput.value &&
-          !this._isRequireSerialNumberScanningOutbound
-        ) {
-          const isInProgressing = await this.checkProgressingPallet(this.palletInput.value)
-          if (isInProgressing) throw new Error(i18next.t('text.pallet_is_in_progressing'))
+      case PICKING_TYPES.BATCH_PICKING.value:
+        response = await client.query({
+          query: gql`
+            query batchPickingWorksheet($taskNo: String!, $locationSortingRules: [Sorting!]) {
+              batchPickingWorksheet(taskNo: $taskNo, locationSortingRules: $locationSortingRules) {
+                worksheetInfo {
+                  bizplaceName
+                  partnerDomainId
+                  startedAt
+                }
+                worksheetDetailInfos {
+                  hasMissingInventoryChanges
+                  palletId
+                  cartonId
+                  batchId
+                  product {
+                    id
+                    name
+                    description
+                    sku
+                    isRequireSerialNumberScanning
+                  }
+                  qty
+                  releaseQty
+                  pickedQty
+                  expirationDate
+                  status
+                  packingType
+                  packingSize
+                  location {
+                    name
+                  }
+                  binLocation {
+                    name
+                  }
+                  relatedOrderInv {
+                    batchId
+                    packingType
+                    product {
+                      id
+                      name
+                      description
+                      sku
+                    }
+                  }
+                }
+              }
+            }
+          `,
+          variables: { taskNo: pickingRefNo, locationSortingRules: this.locationSortingRules }
+        })
 
-          this._isReplacement = await this.checkProductIdenticality(
-            this._selectedOrderInventory.palletId,
-            this.palletInput.value
-          )
+        if (!response.errors) {
+          if (!this._selectedOrderInventory) this.clearView()
+          this.taskNo = pickingRefNo
+          if (!response.data?.batchPickingWorksheet) return
 
-          if (!this._isReplacement) {
-            this._focusOnLotNoInput()
-            throw new Error(i18next.t('text.wrong_lot_id'))
-          }
-        }
-      }
+          const { worksheetInfo, worksheetDetailInfos } = response.data.batchPickingWorksheet
+          await this.updateComplete
+          this._bizplaceName = worksheetInfo.bizplaceName
+          this._orderNo = this.taskNo
+          this._worksheetInfo = worksheetInfo
+          this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
 
-      // Release qty existing
-      if (!this._isReplacement) {
-        if (!this._isRequireSerialNumberScanningOutbound) {
-          if (!parseInt(this.releaseQtyInput?.value)) {
-            this._focusOnReleaseQtyInput()
-            throw new Error(i18next.t('text.release_qty_is_empty'))
+          if (!this._selectedOrderInventory) {
+            this._selectedOrderInventory = this.data.records[0]
           }
 
-          if (!this.releaseQtyInput.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
-
-          // typed qty should be matched with release qty.
-
           if (
-            parseInt(this.releaseQtyInput.value) !==
-            this._selectedOrderInventory.releaseQty -
-              (this._selectedOrderInventory.pickedQty ? this._selectedOrderInventory.pickedQty : 0)
+            this._selectedOrderInventory &&
+            this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty &&
+            !this._selectedOrderInventory?.hasMissingInventoryChanges &&
+            this._selectedOrderInventory.status !== 'MISSING'
           ) {
-            this._focusOnReleaseQtyInput()
-            throw new Error(i18next.t('text.wrong_release_qty'))
+            this.scannable = true
+          } else {
+            this.scannable = false
           }
-        }
 
-        // location id existing
-        if (!this.isWholePicking && this.locationInput) {
-          if (!this.locationInput.value) {
-            this._focusOnLocationNameInput()
-            throw new Error(i18next.t('text.location_id_is_empty'))
-          }
-          // check if actual return location
-          this._locationName =
-            this.isWholePicking || !this.locationInput
-              ? this._selectedOrderInventory.location.name
-              : this.locationInput.value
-          // 1. Check whether location is changed
-          if (this._selectedOrderInventory.location.name !== this._locationName) {
-            this.locationNameSplit = this.locationInput.value.split('-')
-            if (this.locationNameSplit.length < 3) {
-              this._focusOnLocationNameInput()
-              throw new Error(i18next.t('text.invalid_return_location'))
-            }
-            const zonePortions = this.locationNameSplit[0].match(/[a-zA-Z0-9]+/g)
-            const rowPortions = this.locationNameSplit[1].match(/[a-zA-Z0-9]+/g)
-            const columnPortions = this.locationNameSplit[2].match(/[a-zA-Z0-9]+/g)
-            if (this.locationNameSplit.length === 3) {
-              this.locations = await this.fetchLocations(zonePortions[0], rowPortions[0], columnPortions[0])
-              this._focusOnNewLocationInput()
-              if (this.locations.length > 0) {
-                this._incompleteLocationName = true
-                throw new Error(i18next.t('text.please_select_the_location_again'))
-              } else {
-                throw new Error(i18next.t('text.invalid_return_location'))
-              }
-            } else if (this.locationNameSplit.length === 4) {
-              let relocateConfirmation = await CustomAlert({
-                title: i18next.t('title.relocate'),
-                text: i18next.t('text.are_you_sure'),
-                confirmButton: { text: i18next.t('button.relocate') },
-                cancelButton: { text: i18next.t('button.cancel') }
-              })
+          if (!this._isCartonLabel && data) {
+            const findPalletId = worksheetDetailInfos.find(res => res.palletId == data.palletId)
 
-              if (!relocateConfirmation.isConfirmed) {
-                this._incompleteLocationName = false
-                this.locationNameSplit = []
-                return relocateConfirmation
-              }
+            if (data && findPalletId?.hasMissingInventoryChanges) {
+              this.scannable = false
             }
           }
-        }
-      }
-    } else {
-      if (!this.cartonInput?.value) {
-        this._focusOnCartonNoInput()
-        throw new Error(i18next.t('text.carton_id_is_empty'))
-      }
 
-      if (this._selectedOrderInventory.cartonId) {
-        if (this._selectedOrderInventory.cartonId !== this.cartonInput.value) {
-          //carton replacement?
-          throw new Error(i18next.t('text.invalid_carton_id'))
-          this._isReplacement = await this.checkCartonIdenticality(
-            this._selectedOrderInventory.cartonId,
-            this._selectedOrderInventory.palletId,
-            this.cartonInput.value
-          )
-
-          if (!this._isReplacement) {
-            this.cartonInput.value = ''
-            this._focusOnCartonNoInput()
-            throw new Error(i18next.t('text.wrong_carton_id'))
-          }
-        }
+          if (this._isCartonLabel && data) {
+            const findCartonId = worksheetDetailInfos.find(res => res.cartonId == data.cartonId)
 
-        if (this._enableProductScanning) {
-          if (!this.productBarcodeInput?.value) {
-            this._focusOnProductBarcodeInput()
-            throw new Error(i18next.t('text.empty_product_barcode'))
+            if (data && findCartonId?.hasMissingInventoryChanges) {
+              this.scannable = false
+            }
           }
-        }
-      }
-    }
 
-    if (this._isRequireSerialNumberScanningOutbound) {
-      if (!this.serialInput?.value) {
-        this._focusOnSerialInput()
-        throw new Error(i18next.t('text.empty_serial_number'))
-      }
-    }
+          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
+          this._enableInputQty = await fetchSettingRule('enable-input-qty', worksheetInfo.partnerDomainId)
 
-    if (this._crossDocking) {
-      // typed qty should be smaller than release qty.
-      if (parseInt(this.releaseQtyInput.value) > this._selectedOrderInventory.releaseQty) {
-        this._focusOnReleaseQtyInput()
-        throw new Error(i18next.t('text.wrong_release_qty'))
-      }
-    }
-  }
+          if (this._selectedOrderInventory) {
+            const record = this.data.records.find(
+              record =>
+                record.product.sku === this._selectedOrderInventory.product.sku &&
+                record.palletId === this._selectedOrderInventory.palletId
+            )
 
-  async checkProgressingPallet(palletId) {
-    const response = await client.query({
-      query: gql`
-        query checkProgressingPallet($palletId: String!) {
-          checkProgressingPallet(palletId: $palletId)
-        }
-      `,
-      variables: { palletId }
-    })
+            this._selectedOrderInventory = record
+            await this.updateSelectedItemProp(record)
 
-    if (!response.errors) {
-      return response.data.checkProgressingPallet
-    }
-  }
+            if (record.pickedQty == record.releaseQty) {
+              if (this._isCartonLabel) {
+                //need to relook into clearview logic
+                if (this.cartonInput) this.cartonInput.value = ''
+                if (this.productBarcodeInput) this.productBarcodeInput.value = ''
+              }
+              this.fillUpForm(this.inputForm, record)
+            } else {
+              this.fillUpForm(this.inputForm, record)
+            }
 
-  async checkProductIdenticality(palletA, palletB) {
-    const response = await client.query({
-      query: gql`
-        query checkProductIdenticality($palletA: String!, $palletB: String!) {
-          checkProductIdenticality(palletA: $palletA, palletB: $palletB)
+            if (
+              record.releaseQty - record.pickedQty == 1 &&
+              !this._isCartonLabel &&
+              this._isRequireSerialNumberScanningOutbound
+            ) {
+              this._isLastUnit = true
+            } else {
+              this._isLastUnit = false
+            }
+          }
         }
-      `,
-      variables: { palletA, palletB }
-    })
-
-    if (!response.errors) {
-      return response.data.checkProductIdenticality
+        break
     }
+
+    this.updateContext()
   }
 
-  async checkCartonIdenticality(cartonA, palletA, cartonB) {
+  async fetchPalletsHandler(releaseGoodNo) {
     const response = await client.query({
       query: gql`
-        query checkCartonIdenticality($cartonA: String!, $palletA: String!, $cartonB: String!) {
-          checkCartonIdenticality(cartonA: $cartonA, palletA: $palletA, cartonB: $cartonB)
-        }
-      `,
-      variables: { cartonA, palletA, cartonB }
-    })
-
-    if (!response.errors) {
-      return response.data.checkCartonIdenticality
-    }
-  }
-
-  async fetchLocations(zone, row, column) {
-    const sortings = [{ name: 'name', desc: false }]
-    const filters = [
-      { name: 'zone', operator: 'eq', value: zone },
-      { name: 'row', operator: 'eq', value: row },
-      { name: 'column', operator: 'eq', value: column }
-    ]
-
-    if (filters) {
-      const response = await client.query({
-        query: gql`
-          query locations($filters: [Filter!], $sortings: [Sorting!]) {
-            locations(filters: $filters, sortings: $sortings) {
-              items {
+        query pallets($filters: [Filter!]!, $pagination: Pagination) {
+          pallets(filters: $filters, pagination: $pagination) {
+            items {
+              id
+              name
+              owner {
                 id
                 name
-                zone
-                row
-                column
-                shelf
-                status
+                description
               }
+              holder {
+                id
+                name
+                description
+              }
+              status
             }
           }
-        `,
-        variables: { filters, sortings }
-      })
-
-      if (!response.errors) {
-        return response.data.locations.items || []
+        }
+      `,
+      variables: {
+        filters: [{ name: 'refOrderNo', value: releaseGoodNo, operator: 'eq' }],
+        pagination: { page: 1, limit: 9999999 }
       }
+    })
+
+    if (!response.errors) {
+      this._reusablePalletList = { records: response.data.pallets.items }
     }
   }
 
@@ -1807,7 +1895,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         }
       }
     } catch (e) {
-      this._showToast(e)
+      showToast(e)
     }
   }
 
@@ -1829,44 +1917,41 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   focusOnInput() {
     if (this.scannable) {
       // set bin location value if already has value else focus on bin input if bin picking setting is active
-      if (this._currentBinLocation) {
+      if (this._currentBinLocation && this.binLocationInput) {
         this.binLocationInput.value = this._currentBinLocation
       }
 
       if (this._hasBinPicking && this.binLocationInput && this.binLocationInput.value == '') {
-        this._focusOnBinLocationInput()
-        return true
+        return this._focusOnBinLocationInput()
       } else {
         if (this._isCartonLabel) {
           if (!this._enableProductScanning) this.cartonInput.value = ''
 
           if (this.cartonInput.value == '') {
-            this._focusOnCartonNoInput()
-            return true
+            return this._focusOnCartonNoInput()
           }
         } else {
           if (!this._enableProductScanning && !this._isRequireSerialNumberScanningOutbound) this.palletInput.value = ''
 
           if (this.palletInput.value == '') {
-            this._focusOnLotNoInput()
-            return true
+            return this._focusOnLotNoInput()
           }
         }
       }
 
-      if (this._enableProductScanning && !this._isRequireSerialNumberScanningOutbound) {
+      if (this._enableProductScanning && this._isCartonLabel && !this._isRequireSerialNumberScanningOutbound) {
         this.productBarcodeInput.value = ''
-        this._focusOnProductBarcodeInput()
-        return true
+        return this._focusOnProductBarcodeInput()
       }
 
       if (this._isRequireSerialNumberScanningOutbound) {
-        this.serialInput.value = ''
-        this._focusOnSerialInput()
-        return true
+        if (this._isLastUnit) {
+          return this._focusOnNewLocationInput()
+        } else {
+          this.serialInput.value = ''
+          return this._focusOnSerialInput()
+        }
       }
-
-      return true
     }
   }
 
@@ -1882,17 +1967,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     this._isCartonLabel = selectedRecords.hasCartonLabel
     this._isRequireSerialNumberScanningOutbound = selectedRecords?.product?.isRequireSerialNumberScanningOutbound
   }
-
-  _showToast({ type, message }) {
-    document.dispatchEvent(
-      new CustomEvent('notify', {
-        detail: {
-          type,
-          message
-        }
-      })
-    )
-  }
 }
 
 window.customElements.define('picking-product', PickingProduct)