From dd1a763362a8663d39aa91bfdbcb81a651a105a4 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 8 May 2024 12:37:51 +0530
Subject: [PATCH] Improved: added css and some adjusments on product details
 page(#386)

---
 src/components/InventoryDetailsPopover.vue |  2 +-
 src/components/ProductListItem.vue         | 25 +++++++++++-----
 src/views/ProductDetail.vue                | 34 ++--------------------
 3 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/src/components/InventoryDetailsPopover.vue b/src/components/InventoryDetailsPopover.vue
index b964c0eab..df5de9fd0 100644
--- a/src/components/InventoryDetailsPopover.vue
+++ b/src/components/InventoryDetailsPopover.vue
@@ -11,7 +11,7 @@
         <ion-note slot="end">4</ion-note>
       </ion-item>
       <ion-item>
-        <ion-label class="ion-text-wrap">Qrder reservation</ion-label>
+        <ion-label class="ion-text-wrap">Order reservation</ion-label>
         <ion-note slot="end">1</ion-note>
       </ion-item>
       <ion-item lines="none">
diff --git a/src/components/ProductListItem.vue b/src/components/ProductListItem.vue
index ad9b32903..1f2d6ca31 100644
--- a/src/components/ProductListItem.vue
+++ b/src/components/ProductListItem.vue
@@ -11,14 +11,16 @@
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
-      <ion-note v-if="showInfoIcon"> 50 ATP </ion-note>
-      <ion-spinner v-else-if="isFetchingStock" color="medium" name="crescent" />
-      <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId)">
-        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
-      </ion-button>
-      <ion-button v-if="showInfoIcon" fill="clear" @click.stop="getInventoryComputationDetails">
-        <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium"></ion-icon>
+      <ion-button v-if="!isFetchingStock && !showInfoIcon" fill="clear" @click.stop="fetchProductStock(item.productId)">
+        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
       </ion-button>
+      <div v-else-if="showInfoIcon" class="atp-info">
+        <ion-note slot="end"> 50 ATP </ion-note>
+        <ion-button fill="clear" @click.stop="getInventoryComputationDetails($event)">
+          <ion-icon :icon="informationCircleOutline" color="medium" />
+        </ion-button>
+      </div>
+      <ion-spinner v-else color="medium" name="crescent" />
     </div>
   </ion-item>
 </template>
@@ -70,9 +72,10 @@ export default defineComponent({
       this.isFetchingStock = false
       this.showInfoIcon = true;
     },
-    async getInventoryComputationDetails(){
+    async getInventoryComputationDetails(Event: any){
       const popover = await popoverController.create({
         component: InventoryDetailsPopover,
+        event: Event,
         // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
       });
       await popover.present();
@@ -102,4 +105,10 @@ export default defineComponent({
 ion-thumbnail > img {
   object-fit: contain;
 }
+
+.atp-info {
+  display: flex;
+  align-items: center; 
+  flex-direction: row; 
+}
 </style>
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 18d505fef..a32c186d7 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -48,7 +48,7 @@
               </ion-item>
             </ion-list>
             <div>
-              <ion-segment>
+              <ion-segment value="inStore">
                 <ion-segment-button value="inStore" @click="selectedSegment = 'inStore'">
                   <ion-label>In Store</ion-label>
                 </ion-segment-button>
@@ -125,37 +125,6 @@
               </ion-item>
             </ion-card>
 
-            <ion-card>
-              <ion-item lines="none">
-                <ion-label class="ion-text-wrap"> Order ID
-                  <p>Customer name</p>
-                </ion-label>
-                <ion-badge color="primary" slot="end">In Progress</ion-badge>  
-              </ion-item>
-              <ion-item lines="none">
-                <ion-thumbnail slot="start">
-                  <DxpShopifyImg size="small" />
-                </ion-thumbnail>
-                <ion-label class="ion-text-wrap" >
-                  <p class="overline">BRAND</p>
-                  <h3 class="ion-text-wrap">Virtual name</h3>
-                </ion-label>
-                <ion-note slot="end"> 2 units </ion-note>
-              </ion-item>
-              <ion-list-header color="light">
-                <ion-label>Order items</ion-label>
-              </ion-list-header>
-              <ion-item lines="none">
-                <ion-thumbnail slot="start">
-                  <DxpShopifyImg size="small" />
-                </ion-thumbnail>
-                <ion-label class="ion-text-wrap" >
-                  <p class="overline">BRAND</p>
-                  <h3 class="ion-text-wrap">Virtual name</h3>
-                </ion-label>
-              </ion-item>
-            </ion-card>
-
             <ion-card>
               <ion-item lines="none">
                 <ion-label class="ion-text-wrap"> Order ID
@@ -396,6 +365,7 @@ export default defineComponent({
   display: grid;
   grid-template-columns: auto 500px;
   max-width: 1042px;
+  margin: auto;
 }
 
 @media (min-width: 720px) {