Merge branch 'main' of https://github.com/hotwax/fulfillment-pwa into #…

…244-inprogress-page

src/authorization/Actions.ts

@@ -11,5 +11,6 @@ export default {
     "APP_CARRIERS_CREATE" : "APP_CARRIERS_CREATE",
     "APP_ORDER_LOOKUP_VIEW": "APP_ORDER_LOOKUP_VIEW",
     "APP_PARTIAL_ORDER_REJECTION_CONFIG_UPDATE": "APP_PARTIAL_ORDER_REJECTION_CONFIG_UPDATE",
-    "APP_COLLATERAL_REJECTION_CONFIG_UPDATE": "APP_COLLATERAL_REJECTION_CONFIG_UPDATE"
+    "APP_COLLATERAL_REJECTION_CONFIG_UPDATE": "APP_COLLATERAL_REJECTION_CONFIG_UPDATE",
+    "APP_UPDT_FULFILL_FORCE_SCAN_CONFIG": "APP_UPDT_FULFILL_FORCE_SCAN_CONFIG",
 }

src/authorization/Rules.ts

@@ -20,5 +20,6 @@ export default {
     "APP_CARRIERS_CREATE": "CARRIER_SETUP_VIEW",
     "APP_ORDER_LOOKUP_VIEW": "FF_ORDER_LOOKUP_VIEW",
     "APP_PARTIAL_ORDER_REJECTION_CONFIG_UPDATE": "COMMON_ADMIN",
-    "APP_COLLATERAL_REJECTION_CONFIG_UPDATE": "COMMON_ADMIN"
+    "APP_COLLATERAL_REJECTION_CONFIG_UPDATE": "COMMON_ADMIN",
+    "APP_UPDT_FULFILL_FORCE_SCAN_CONFIG": "COMMON_ADMIN"
 } as any

src/components/OrderLimitPopover.vue

@@ -76,6 +76,7 @@ export default defineComponent({
           name: "setLimit",
           placeholder: translate("Order fulfillment capacity"),
           type: "number",
+          value: this.fulfillmentOrderLimit?.toString(),
           min: 0
         }] : [],
         buttons: [{

src/components/TransferOrderItem.vue

@@ -31,7 +31,7 @@
       </div>
 
       <div class="qty-progress">
-        <ion-progress-bar :color="getPickedToOrderedFraction(item) > 1 ? 'danger' : 'primary'" :value="getPickedToOrderedFraction(item)" />
+        <ion-progress-bar :color="getProgressBarColor(item)" :value="getPickedToOrderedFraction(item)" />
       </div>
 
       <div class="to-item-history">
@@ -100,6 +100,13 @@ export default defineComponent({
     }),
   },
   methods: {
+    getProgressBarColor(item: any) {
+      const fraction = this.getPickedToOrderedFraction(item);
+      if(fraction > 1) return 'danger'
+      else if(fraction == 1) return 'success'
+      else if(fraction == 0) return 'primary'
+      return 'warning'
+    },
     getPickedToOrderedFraction(item: any) {
       return (parseInt(item.pickedQuantity) + this.getShippedQuantity(item)) / item.orderedQuantity;
     },

src/locales/en.json

@@ -107,6 +107,7 @@
   "Date range": "Date range",
   "Debit Card": "Debit Card",
   "Declined": "Declined",
+  "Default": "Default",
   "Define custom label for": "Define custom label for {field}",
   "Description": "Description",
   "Dismiss": "Dismiss",
@@ -289,6 +290,7 @@
   "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching In Progress or Completed tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
   "No ship groups found": "No ship groups found",
   "No time zone found": "No time zone found",
+  "None": "None",
   "Not in Stock": "Not in Stock",
   "Not-Authorized": "Not-Authorized",
   "Not-Received": "Not-Received",

src/locales/es.json

@@ -105,6 +105,7 @@
   "Date range": "Rango de fechas",
   "Debit Card": "Tarjeta de Debito",
   "Declined": "Rechazado",
+  "Default": "Default",
   "Define custom label for": "Definir etiqueta personalizada para {field}",
   "Dismiss": "Descartar",
   "Delete": "Borrar",
@@ -287,6 +288,7 @@
   "No fulfillment capacity": "Sin capacidad de cumplimiento",
   "No keyword matches the search criteria.": "La palabra coincide con los criterios de búsqueda.",
   "No variance": "No variance",
+  "None": "None",
   "Not in Stock": "No en inventario",
   "Not-Authorized": "No autorizado",
   "Not-Received": "No recibido",

src/locales/ja.json

@@ -107,6 +107,7 @@
   "Date range": "日付範囲",
   "Debit Card": "デビットカード",
   "Declined": "拒否されました",
+  "Default": "Default",
   "Define custom label for ": "{field}のカスタムラベルを定義",
   "Description": "説明",
   "Dismiss": "閉じる",
@@ -292,6 +293,7 @@
   "Not-Authorized": "未承認",
   "Not-Received": "未受領",
   "No Capacity": "容量なし",
+  "None": "None",
   "Notification Preference": "通知設定",
   "Notifications": "通知",
   "No packed shipments to ship for these orders": "これらの注文には出荷する梱包済み出荷はありません",

src/store/modules/transferorder/actions.ts

@@ -282,7 +282,7 @@ const actions: ActionTree<TransferOrderState, RootState> = {
       return { isCompleted: true }
       item.pickedQuantity = parseInt(item.pickedQuantity) + 1;
       commit(types.ORDER_CURRENT_UPDATED, state.current )
-      return { isProductFound: true }
+      return { isProductFound: true, orderItem: item }
     }
     return { isProductFound: false }
   },

src/store/modules/util/actions.ts

@@ -487,7 +487,7 @@ const actions: ActionTree<UtilState, RootState> = {
       }
     } catch(err) {
       console.error(err)
-      commit(types.UTIL_FORCE_SCAN_STATUS_UPDATED, "false")
+      commit(types.UTIL_FORCE_SCAN_STATUS_UPDATED, false)
     }
   },
 

src/views/Completed.vue

@@ -87,7 +87,8 @@
                 </div>
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
                   <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
@@ -197,7 +198,7 @@ import {
   modalController
 } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
-import { caretDownOutline, cubeOutline, printOutline, downloadOutline, listOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
+import { caretDownOutline, chevronUpOutline, cubeOutline, printOutline, downloadOutline, listOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
 import Popover from '@/views/ShippingPopover.vue'
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex'
@@ -746,6 +747,7 @@ export default defineComponent({
     return {
       Actions,
       caretDownOutline,
+      chevronUpOutline,
       copyToClipboard,
       checkmarkDoneOutline,
       cubeOutline,

src/views/InProgress.vue

@@ -136,7 +136,8 @@
 
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-button fill="clear" size="small" class="desktop-only" @click.stop="openRejectReasonPopover($event, item, order)">
                     <ion-icon color="danger" slot="icon-only" :icon="trashBinOutline"/>
@@ -197,11 +198,13 @@
           </ion-infinite-scroll>
         </div>
       </div>
-      <ion-fab v-if="inProgressOrders.total && !isForceScanEnabled" class="mobile-only" vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button @click="packOrders()">
-          <ion-icon :icon="checkmarkDoneOutline" />
-        </ion-fab-button>
-      </ion-fab>
+      <template v-if="inProgressOrders.total">
+        <ion-fab v-if="!isForceScanEnabled" class="mobile-only" vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button @click="packOrders()">
+            <ion-icon :icon="checkmarkDoneOutline" />
+          </ion-fab-button>
+        </ion-fab>
+      </template>
       <div class="empty-state" v-else>
         <p v-html="getErrorMessage()"></p>
       </div>
@@ -268,6 +271,7 @@ import { computed, defineComponent } from 'vue';
 import {
   addOutline,
   caretDownOutline,
+  chevronUpOutline,
   checkmarkDoneOutline,
   closeCircleOutline,
   cubeOutline,
@@ -1263,6 +1267,7 @@ export default defineComponent({
       addOutline,
       authStore,
       caretDownOutline,
+      chevronUpOutline,
       copyToClipboard,
       checkmarkDoneOutline,
       closeCircleOutline,

src/views/OpenOrders.vue

@@ -81,7 +81,8 @@
                 </div>
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
                   <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
@@ -169,7 +170,7 @@ import {
   popoverController
 } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
-import { caretDownOutline, cubeOutline, listOutline, notificationsOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
+import { caretDownOutline, chevronUpOutline, cubeOutline, listOutline, notificationsOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
 import AssignPickerModal from '@/views/AssignPickerModal.vue';
 import { mapGetters, useStore } from 'vuex';
 import { getProductIdentificationValue, DxpShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
@@ -437,6 +438,7 @@ export default defineComponent({
     return{
       Actions,
       caretDownOutline,
+      chevronUpOutline,
       cubeOutline,
       formatUtcDate,
       getFeature,

src/views/OrderDetail.vue

@@ -126,7 +126,8 @@
               </ion-button>
               <ion-button v-if="isKit(item)" fill="clear" color="medium" size="small" @click.stop="fetchKitComponent(item)">
                 {{ translate('Components') }}
-                <ion-icon color="medium" slot="end" :icon="listOutline"/>
+                <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
               </ion-button>
             </div>
             </div>
@@ -246,7 +247,8 @@
                   <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
                 </ion-button>
                 <ion-button slot="end" v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponent(item, true)">
-                  <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                  <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                  <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                 </ion-button>
               </div>
             </ion-item>
@@ -312,6 +314,7 @@ import {
   bagCheckOutline,
   caretDownOutline,
   cashOutline,
+  chevronUpOutline,
   closeCircleOutline,
   cubeOutline,
   documentTextOutline,
@@ -1316,6 +1319,7 @@ export default defineComponent({
       bagCheckOutline,
       cashOutline,
       caretDownOutline,
+      chevronUpOutline,
       closeCircleOutline,
       copyToClipboard,
       cubeOutline,

src/views/Settings.vue

@@ -167,7 +167,7 @@
             {{ translate("Control whether the store requires the force scan during order packing or not.") }}
           </ion-card-content>
           <ion-item lines="none" >
-            <ion-toggle label-placement="start" :checked="isForceScanEnabled" @click.prevent="updateForceScanStatus($event)">{{ translate("Require scan") }}</ion-toggle>
+            <ion-toggle label-placement="start" :disabled="!hasPermission(Actions.APP_UPDT_FULFILL_FORCE_SCAN_CONFIG)" :checked="isForceScanEnabled" @click.prevent="updateForceScanStatus($event)">{{ translate("Require scan") }}</ion-toggle>
           </ion-item>
         </ion-card>
 

src/views/ShippingDetails.vue

@@ -33,6 +33,7 @@
       <ion-item>
         <ion-select :disabled="currentOrder.trackingCode" :label="translate('Method')" v-model="shipmentMethodTypeId" interface="popover" @ionChange="updateCarrierAndShippingMethod(carrierPartyId, shipmentMethodTypeId)">
           <ion-select-option v-for="method in carrierMethods" :key="method.shipmentMethodTypeId" :value="method.shipmentMethodTypeId">{{ translate(method.description) }}</ion-select-option>
+          <ion-select-option value="">{{ translate("None") }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>

src/views/TransferOrderDetail.vue

@@ -295,15 +295,21 @@
           showToast(translate("Scanned item is already completed:", { itemName: payload }))
         }
         else if (result.isProductFound) {
-          showToast(translate("Scanned successfully.", { itemName: payload }))
-          this.lastScannedId = payload
-          // Highlight specific element
-          const scannedElement = document.getElementById(payload);
-          scannedElement && (scannedElement.scrollIntoView());
-          // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
-          setTimeout(() => {
-            this.lastScannedId = ''
-          }, 3000)
+          const item = result.orderItem
+          const shippedQuantity = this.getShippedQuantity(item)
+          if(item.pickedQuantity > item.orderedQuantity - shippedQuantity) {
+            showToast(translate('The picked quantity cannot exceed the ordered quantity.') + " " + translate("already shipped.", {shippedQuantity: shippedQuantity}))
+          } else {
+            showToast(translate("Scanned successfully.", { itemName: payload }))
+            this.lastScannedId = payload
+            // Highlight specific element
+            const scannedElement = document.getElementById(payload);
+            scannedElement && (scannedElement.scrollIntoView());
+            // Scanned product should get un-highlighted after 3s for better experience hence adding setTimeOut
+            setTimeout(() => {
+              this.lastScannedId = ''
+            }, 3000)
+          }
         } else {
           showToast(translate("Scanned item is not present within the order:", { itemName: payload }));
         }