Merge pull request #334 from amansinghbais/bopis/orderdetailupdate

Improved: order details page UI and behaviour.
hotwax · Nov 3, 2023 · a0ee228 · a0ee228
2 parents 22482fd + 405d66b
commit a0ee228
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 22 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -26,6 +26,7 @@
   "Configuration updated": "Configuration updated",
   "Confirm": "Confirm",
   "Copied": "Copied { text }",
+  "Copied to clipboard": "Copied to clipboard",
   "Copy": "Copy",
   "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels.{ space } For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.",
   "Delivery address": "Delivery address",
@@ -91,6 +92,7 @@
   "Order details": "Order details",
   "Order edit permissions": "Order edit permissions",
   "Order is now ready to handover.": "Order is now ready to handover.",
+  "Order is now ready to be shipped.": "Order is now ready to be shipped.",
   "Order is successfully handed over to customer.": "Order is successfully handed over to customer.",
   "Order is successfully shipped.": "Order is successfully shipped.",
   "Order has been rejected.": "Order has been rejected.",
@@ -126,7 +128,7 @@
   "Reason": "Reason",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
-  "Resend ready for pickup email": "Resend ready for pickup email",
+  "Resend email": "Resend email",
   "Search": "Search",
   "Search Orders": "Search Orders",
   "Search time zones": "Search time zones",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -26,6 +26,7 @@
   "Configuration updated": "Configuración actualizada",
   "Confirm": "Confirmar",
   "Copied": "Copiado { text }",
+  "Copied to clipboard": "Copied to clipboard",
   "Copy": "Copiar",
   "Depending on the reason you select for not fulfilling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "Dependiendo de la razón que selecciones para no cumplir con un artículo, se registrará una variación de inventario y se actualizarán todos los canales de ventas con nuevos niveles de inventario. { space } Por ejemplo, al seleccionar “No disponible en el inventario” HotWax Commerce dejará de dirigir los pedidos para él a tu tienda y los clientes no podrán hacer pedidos BOPIS para él en tu tienda en Shopify.",
   "Delivery address": "Dirección de entrega",
@@ -90,6 +91,7 @@
   "Order details": "Detalles de la orden",
   "Order edit permissions": "Permisos de edición de la orden",
   "Order is now ready to handover.": "Order is now ready to handover.",
+  "Order is now ready to be shipped.": "Order is now ready to be shipped.",
   "Order is successfully handed over to customer.": "Order is successfully handed over to customer.",
   "Order is successfully shipped.": "Order is successfully shipped.",
   "Order has been rejected.": "Order has been rejected.",
@@ -125,7 +127,7 @@
   "Reason": "Razón",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
-  "Resend ready for pickup email": "Reenviar correo electrónico de listo para recoger",
+  "Resend email": "Resend email",
   "Search": "Buscar",
   "Search Orders": "Buscar pedidos",
   "Search time zones": "Buscar zonas horarias",

diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -26,6 +26,7 @@
   "Configuration updated": "設定の更新",
   "Confirm": "決定",
   "Copied": "コピーされた{ text }",
+  "Copied to clipboard": "Copied to clipboard",
   "Copy": "コピー",
   "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "アイテムをフルフィルメントしないために選択した理由に応じて、在庫差異が記録され、すべての販売チャネルが新しい在庫レベルで更新されます。{ space } たとえば、[在庫なし] を選択すると、HotWax Commerce はストアへの注文のルーティングを停止し、顧客は 貴方の Shopify のストアで BOPIS 注文を行うことができなくなります。",
   "Delivery address": "お届け先住所",
@@ -90,6 +91,7 @@
   "Order details": "注文詳細",
   "Order edit permissions": "注文の編集権限",
   "Order is now ready to handover.": "Order is now ready to handover.",
+  "Order is now ready to be shipped.": "Order is now ready to be shipped.",
   "Order is successfully handed over to customer.": "Order is successfully handed over to customer.",
   "Order is successfully shipped.": "Order is successfully shipped.",
   "Order has been rejected.": "Order has been rejected.",
@@ -125,7 +127,7 @@
   "Reason": "理由",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
-  "Resend ready for pickup email": "受取準備完了メールの再送",
+  "Resend email": "Resend email",
   "Search": "検索",
   "Search Orders": "注文の検索",
   "Search time zones": "タイムゾーンの検索",

diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
@@ -478,9 +478,13 @@ const actions: ActionTree<OrderState , RootState> ={
             }
           })
         }
-        // Added ready to handover because we need to show the user that the order has moved to the packed tab (ready to handover)
-        await dispatch('updateCurrent', { order : { ...payload.order, readyToHandover: true } })
-
+        // Adding readyToHandover or readyToShip because we need to show the user that the order has moved to the packed tab
+        if(payload.order.part.shipmentMethodEnum.shipmentMethodEnumId === 'STOREPICKUP'){
+          payload.order = { ...payload.order, readyToHandover: true }
+        }else {
+          payload.order = { ...payload.order, readyToShip: true }
+        }
+        await dispatch('updateCurrent', { order : payload.order })
         showToast(translate("Order packed and ready for delivery"))
       } else {
         showToast(translate("Something went wrong"))

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -15,13 +15,17 @@ const showToast = async (message: string) => {
   return toast.present();
 }
 
-const copyToClipboard = async (text: any) => {
+const copyToClipboard = async (text: any, showCopiedValue = true) => {
   const { Clipboard } = Plugins;
 
   await Clipboard.write({
     string: text,
   }).then(() => {
-    showToast(translate("Copied", { text }));
+    if(showCopiedValue) {
+      showToast(translate("Copied", { text }));
+    } else {
+      showToast(translate("Copied to clipboard"));
+    }
   });
 }
 

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
@@ -7,7 +7,6 @@
         </ion-button>
       </ion-buttons>
       <ion-title>{{ translate("Assign Pickers") }}</ion-title>
-      <ion-button fill="clear" slot="end" @click="readyForPickup()">{{ part.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? translate("Ready for pickup") : translate("Ready to ship") }}</ion-button>
     </ion-toolbar>
   </ion-header>
 
@@ -38,13 +37,21 @@
       />
     </ion-infinite-scroll>
   </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button @click="readyForPickup()">
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
 </template>
 
 <script>
 import { 
   IonButtons,
   IonButton,
   IonContent,
+  IonFab,
+  IonFabButton,
   IonHeader,
   IonIcon,
   IonItem,
@@ -60,7 +67,7 @@ import {
   IonInfiniteScrollContent,
   modalController } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline } from "ionicons/icons";
+import { closeOutline, saveOutline } from "ionicons/icons";
 import { useStore } from "vuex";
 import { showToast } from "@/utils";
 import { hasError } from '@/adapter'
@@ -73,6 +80,8 @@ export default defineComponent({
     IonButtons,
     IonButton,
     IonContent,
+    IonFab,
+    IonFabButton,
     IonHeader,
     IonIcon,
     IonItem,
@@ -191,6 +200,7 @@ export default defineComponent({
 
     return {
       closeOutline,
+      saveOutline,
       store,
       translate
     };

diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
@@ -11,7 +11,7 @@
           <ion-button :disabled="!order?.orderId" @click="openOrderItemRejHistoryModal()">
             <ion-icon slot="icon-only" :icon="timeOutline" />
           </ion-button>
-          <ion-button v-if="orderType === 'open'" class="ion-hide-md-up" :disabled="!order?.orderId || !hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.rejected" @click="rejectOrder()">
+          <ion-button v-if="orderType === 'open'" class="ion-hide-md-up" :disabled="!order?.orderId || !hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected" @click="rejectOrder()">
             <ion-icon slot="icon-only" color="danger" :icon="bagRemoveOutline" />
           </ion-button>
           <ion-button v-else-if="orderType === 'packed' && showPackingSlip" :class="order.part?.shipmentMethodEnum?.shipmentMethodEnumId !== 'STOREPICKUP' ? 'ion-hide-md-up' : ''" :disabled="!order?.orderId || !hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped" @click="order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? printPackingSlip(order) : printShippingLabelAndPackingSlip(order)">
@@ -28,10 +28,15 @@
       </div>
       <main v-else>
         <aside>
-          <ion-item v-if="order.readyToHandover || order.rejected" color="light" lines="none">
-            <ion-icon :icon="order.readyToHandover ? checkmarkCircleOutline : closeCircleOutline" :color="order.readyToHandover ? 'success' : 'danger'" slot="start" />
-            <ion-label class="ion-text-wrap">{{ order.readyToHandover ? translate("Order is now ready to handover.") : translate("Order has been rejected.") }}</ion-label>
+          <ion-item v-if="order.readyToHandover || order.readyToShip" color="light" lines="none">
+            <ion-icon :icon="checkmarkCircleOutline" color="success" slot="start" />
+            <ion-label class="ion-text-wrap">{{ order.readyToHandover ? translate("Order is now ready to handover.") : translate("Order is now ready to be shipped.") }}</ion-label>
+          </ion-item>
+          <ion-item v-else-if="order.rejected" color="light" lines="none">
+            <ion-icon :icon="closeCircleOutline" color="danger" slot="start" />
+            <ion-label class="ion-text-wrap">{{ translate("Order has been rejected.") }}</ion-label>
           </ion-item>
+
           <ion-item v-if="order.handovered || order.shipped" color="light" lines="none">
             <ion-icon :icon="checkmarkCircleOutline" color="success" slot="start" />
             <ion-label class="ion-text-wrap">{{ order.handovered ? translate("Order is successfully handed over to customer.") : translate("Order is successfully shipped.") }}</ion-label>
@@ -56,7 +61,7 @@
           <ion-item v-if="customerEmail" lines="none">
             <ion-icon :icon="mailOutline" slot="start" />
             <ion-label>{{ customerEmail }}</ion-label>
-            <ion-button fill="clear" @click="copyToClipboard(customerEmail)">
+            <ion-button fill="clear" @click="copyToClipboard(customerEmail, false)">
               <ion-icon color="medium" :icon="copyOutline"/>
             </ion-button>
           </ion-item>
@@ -73,10 +78,10 @@
           </ion-item>
           <div v-if="orderType === 'open'" class="ion-margin-top ion-hide-md-down">
             <!-- TODO: implement functionality to change shipping address -->
-            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.rejected" expand="block" @click="readyForPickup(order, order.part)">
+            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected" expand="block" @click="readyForPickup(order, order.part)">
               {{ order?.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? translate("Ready for pickup") : translate("Ready to ship") }}
             </ion-button>
-            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.rejected" expand="block" color="danger" fill="outline" @click="rejectOrder()">
+            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected" expand="block" color="danger" fill="outline" @click="rejectOrder()">
               {{ translate("Reject Order") }}
             </ion-button>
           </div>
@@ -95,7 +100,7 @@
             <ProductListItem :item="item" />
             <!-- Checking for true as a string as the settingValue contains a string and not boolean-->
             <div v-if="orderType === 'open' && partialOrderRejectionConfig?.settingValue == 'true'" class="border-top">
-              <ion-button :disabled="order?.readyToHandover || order?.rejected" fill="clear" @click="openReportAnIssueModal(item)">
+              <ion-button :disabled="order?.readyToHandover || order.readyToShip || order?.rejected" fill="clear" @click="openReportAnIssueModal(item)">
                 {{ translate("Report an issue") }}
               </ion-button>
             </div>
@@ -105,7 +110,7 @@
       </main>
 
       <ion-fab v-if="orderType === 'open' && order?.orderId" class="ion-hide-md-up" vertical="bottom" horizontal="end" slot="fixed" @click="readyForPickup(order, order.part)">
-        <ion-fab-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.rejected">
+        <ion-fab-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected">
           <ion-icon :icon="order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? bagHandleOutline : giftOutline" />
         </ion-fab-button>
       </ion-fab>
@@ -327,7 +332,7 @@ export default defineComponent({
       }
     },
     async sendReadyForPickupEmail(order: any) {
-      const header = translate('Resend ready for pickup email')
+      const header = translate('Resend email')
       const message = translate('An email notification will be sent to that their order is ready for pickup.', { customerName: order.customer.name });
 
       const alert = await alertController

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
@@ -417,7 +417,7 @@ export default defineComponent({
       })
     },
     async sendReadyForPickupEmail(order: any) {
-      const header = translate('Resend ready for pickup email')
+      const header = translate('Resend email')
       const message = translate('An email notification will be sent to that their order is ready for pickup.', { customerName: order.customer.name });
 
       const alert = await alertController

diff --git a/src/views/ShipToStoreOrders.vue b/src/views/ShipToStoreOrders.vue
@@ -357,7 +357,7 @@ export default defineComponent({
     },
 
     async sendReadyForPickupEmail(order: any) {
-      const header = translate('Resend ready for pickup email')
+      const header = translate('Resend email')
       const message = translate('An email notification will be sent to that their order is ready for pickup.', { customerName: `${order.firstName} ${order.lastName}` })
 
       const alert = await alertController