Improved: fixed UI issues in ion-thumbnail and ion-icon, and ensured shipped quantity is visible for orders.

src/components/TransferOrderItem.vue

@@ -52,7 +52,7 @@
         </ion-chip>
       </div>
 
-      <div class="to-item-history" v-else>
+      <div class="to-item-history" v-else-if="!router.currentRoute.value.path.includes('/create-transfer-order/')">
         <ion-chip outline @click="item.shippedQuantity && shippedHistory(item.productId)">
           <ion-icon :icon="checkmarkDone"/>
           <ion-label> {{ item.shippedQuantity || 0 }} {{ translate("shipped") }} </ion-label>
@@ -63,9 +63,11 @@
         <ion-label>{{ item.orderedQuantity }} {{ translate("ordered") }}</ion-label>
       </div>
 
-      <ion-item v-if="router.currentRoute.value.path.includes('/create-transfer-order/')" class="qty-qoh" lines="none">
-        <ion-label>{{ item.qoh != null ? item.qoh : '-' }} {{ translate("Qoh") }}</ion-label>
-        <ion-icon data-testid="remove-item-btn" slot="end" color="danger" :icon="removeCircleOutline" @click="removeOrderItem(item)" />
+      <ion-item v-if="router.currentRoute.value.path.includes('/create-transfer-order/')" class="ion-no-padding qty-qoh" lines="none">
+        <ion-label>{{ item.qoh != null ? item.qoh : 0 }} {{ translate("Qoh") }}</ion-label>
+        <ion-button fill="clear" size="default" color="medium" @click="removeOrderItem(item)">
+          <ion-icon data-testid="remove-item-btn" slot="icon-only" color="danger" :icon="removeCircleOutline" />
+        </ion-button>
       </ion-item>
     </div>
   </ion-card>
@@ -85,7 +87,7 @@
   modalController,
   popoverController,
 } from '@ionic/vue';
 import { computed, defineComponent, onMounted } from 'vue';
 import { add, caretDownOutline, checkmarkDone, closeCircleOutline, barcodeOutline, removeCircleOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
@@ -200,7 +202,7 @@
     markPickedQuantityTouched() {
       (this as any).$refs.pickedQuantity.$el.classList.add('ion-touched');
     },
     getErrorText(item: any) {
       const path = this.router.currentRoute.value.path;
       return path.includes('/create-transfer-order')
         ? translate("Please enter valid item quantity.")

src/views/CreateTransferOrder.vue

@@ -55,8 +55,8 @@
             </ion-item>
             <!-- product found after scan (reads from searchedProduct) -->
             <ion-item lines="none" v-if="searchedProduct.productId">
-              <ion-thumbnail>
-                <DxpShopifyImg :src="getProduct(searchedProduct.productId)?.mainImageUrl || searchedProduct.mainImageUrl" />
+              <ion-thumbnail slot="start">
+                <DxpShopifyImg :src="getProduct(searchedProduct.productId)?.mainImageUrl || searchedProduct.mainImageUrl" :key="getProduct(searchedProduct.productId)?.mainImageUrl || searchedProduct.mainImageUrl" />
               </ion-thumbnail>
               <ion-label>
                 {{ getProductIdentificationValue(barcodeIdentifier, getProduct(searchedProduct.productId)) }}
@@ -82,7 +82,7 @@
 
             <!-- scanner not focused -->
             <ion-item lines="none" v-else-if="!isScanningEnabled">
-              <ion-thumbnail>
+              <ion-thumbnail slot="start">
                 <DxpShopifyImg/>
               </ion-thumbnail>
               <ion-label>
@@ -98,7 +98,7 @@
 
             <!-- default / idle state -->
             <ion-item lines="none" v-else>
-              <ion-thumbnail>
+              <ion-thumbnail slot="start">
                 <DxpShopifyImg/>
               </ion-thumbnail>
               <ion-label>
@@ -122,8 +122,8 @@
             <!-- result found -->
             <ion-list lines="none" v-else-if="searchedProduct.productId">
               <ion-item>
-                <ion-thumbnail>
-                  <DxpShopifyImg :product="searchedProduct" />
+                <ion-thumbnail slot="start">
+                  <DxpShopifyImg :src="searchedProduct.mainImageUrl" :key="searchedProduct.mainImageUrl" />
                 </ion-thumbnail>
                 <ion-label>
                   {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(searchedProduct.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(searchedProduct.productId)) : getProduct(searchedProduct.productId)?.internalName }}

src/views/ShipTransferOrder.vue

@@ -26,8 +26,8 @@
           <ion-list>
             <ion-list-header>{{ translate("Items") }}</ion-list-header>
             <ion-item v-for="item in shipmentItems" :key="item.shipmentItemSeqId">
-              <ion-thumbnail>
-                <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl"/>
+              <ion-thumbnail slot="start">
+                <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" :key="getProduct(item.productId).mainImageUrl"/>
               </ion-thumbnail>
               <ion-label>
                 {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId)?.internalName }}
@@ -62,7 +62,9 @@
                 <!-- <p>estimated delivery date</p> -->
               </ion-label>
               <ion-note slot="end" class="ion-margin">{{ shipmentDetails.trackingIdNumber }}</ion-note>
-              <ion-icon data-testid="tracking-code-link" slot="end" :icon="openOutline" @click="redirectToTrackingUrl()"/>
+              <ion-button fill="clear" size="default" color="medium" @click="redirectToTrackingUrl()">
+                <ion-icon data-testid="tracking-code-link" slot="icon-only" :icon="openOutline" />
+              </ion-button>
             </ion-item>
             <ion-card-content>
               <ion-button data-testid="reprint-label-btn" fill="outline" color="primary" @click="printShippingLabel">