From 3efcdfc6d6f3dc2e57d7c649853dc3de75a6a776 Mon Sep 17 00:00:00 2001
From: k2maan <ketuman333@gmail.com>
Date: Thu, 3 Aug 2023 10:38:42 +0530
Subject: [PATCH 1/4] Updated: removed skeleton text from static labeles (#139)

---
 src/views/catalog-product-details.vue | 373 +++++++++++++-------------
 1 file changed, 191 insertions(+), 182 deletions(-)

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index 7c7cbf5f..74291f0e 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -47,75 +47,88 @@
         </div>
         <div class="product-info" v-else>
           <div class="ion-padding">
-            <ion-skeleton-text animated style="width: 40%; height: 80%;" />
-            <ion-skeleton-text animated style="width: 60%;" />
+            <ion-skeleton-text animated style="width: 60%; height: 80%;" />
+            <ion-skeleton-text animated style="width: 40%; height: 40%;" />
           </div>
 
           <div class="product-features">
             <ion-list>
               <ion-skeleton-text class="ion-margin" animated style="width: 30%" />
               <ion-item lines="none">
-                <ion-skeleton-text animated style="width: 70%;" />
+                <ion-skeleton-text animated style="width: 60%;" />
               </ion-item>
             </ion-list>
 
             <ion-list>
               <ion-skeleton-text class="ion-margin" animated style="width: 30%" />
               <ion-item lines="none">
-                <ion-skeleton-text animated style="width: 70%;" />
+                <ion-skeleton-text animated style="width: 60%;" />
               </ion-item>
             </ion-list>
           </div>
         </div>
 
         <div>
-          <ion-card v-if="!poSummary.listingCountStatusMessage">
-            <ion-item>
-              <ion-skeleton-text animated style="height: 60%; width: 90%;" />
-            </ion-item>
-            <ion-item>
-              <ion-skeleton-text animated style="height: 40%; width: 70%;" />
-            </ion-item>
-            <ion-item>
-              <ion-skeleton-text animated style="height: 40%; width: 60%;" />
-            </ion-item>
-            <ion-item>
-              <ion-skeleton-text animated style="height: 40%; width: 70%;" />
-            </ion-item>
-            <ion-item>
-              <ion-skeleton-text animated style="height: 40%; width: 60%;" />
-            </ion-item>
-          </ion-card>
-          <ion-card v-else>
-            <ion-item>
-              <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
-              <ion-label slot="end">{{ poSummary.eligible ? $t("Yes") : $t("No") }}</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
-              <ion-label slot="end">{{ poSummary.categoryId === preOrderCategoryId ? $t('Pre-order') : poSummary.categoryId === backorderCategoryId ? $t('Back-order') : $t('None') }}</ion-label>
-              <ion-icon slot="end" :icon="isCategoryValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isCategoryValid() ? 'success' : 'warning'" />
-            </ion-item>
-            <ion-item>
-              <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
-              <ion-label slot="end">{{ poSummary.listingCountStatusMessage }}</ion-label>
-              <ion-icon slot="end" :icon="isShopifyListingValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isShopifyListingValid() ? 'success' : 'warning'" />
-            </ion-item>
-            <ion-item v-if="poSummary.promiseDate">
-              <ion-label class="ion-text-wrap">{{ $t("Promise date") }}</ion-label>
-              <ion-label slot="end">{{ poSummary.promiseDate }}</ion-label>
-            </ion-item>
-            <ion-item-divider color="light">
-              <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
-            </ion-item-divider>
-            <!-- internationalized while preparaion -->
-            <ion-item v-if="poSummary.header || poSummary.body">
-              <ion-icon slot="start" :icon="shirtOutline"></ion-icon>
-              <ion-label class="ion-text-wrap">
-                <h2 v-if="poSummary.header">{{ poSummary.header }}</h2>
-                <p v-if="poSummary.body">{{ poSummary.body }}</p>
-              </ion-label>
-            </ion-item>
+          <ion-card>
+            <div v-if="!poSummary.listingCountStatusMessage">
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
+                <ion-skeleton-text slot="end" animated style="height: 50%; width: 20%;" />
+              </ion-item>
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
+                <ion-skeleton-text slot="end" animated style="height: 50%; width: 40%;" />
+              </ion-item>
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
+                <ion-skeleton-text slot="end" animated style="height: 50%; width: 50%;" />
+              </ion-item>
+              <ion-item-divider color="light">
+                <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
+              </ion-item-divider>
+              <ion-item>
+                <ion-icon slot="start" :icon="shirtOutline" />
+                <ion-label>
+                  <ion-item lines="none">
+                    <ion-skeleton-text animated style="width: 90%; height: 40%;" />
+                  </ion-item>
+                  <ion-item lines="none">
+                    <ion-skeleton-text animated style="width: 100%; height: 60%;" />
+                  </ion-item>
+                </ion-label> 
+              </ion-item>
+            </div>
+            <div v-else>
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
+                <ion-label slot="end">{{ poSummary.eligible ? $t("Yes") : $t("No") }}</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
+                <ion-label slot="end">{{ poSummary.categoryId === preOrderCategoryId ? $t('Pre-order') : poSummary.categoryId === backorderCategoryId ? $t('Back-order') : $t('None') }}</ion-label>
+                <ion-icon slot="end" :icon="isCategoryValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isCategoryValid() ? 'success' : 'warning'" />
+              </ion-item>
+              <ion-item>
+                <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
+                <ion-label slot="end">{{ poSummary.listingCountStatusMessage }}</ion-label>
+                <ion-icon slot="end" :icon="isShopifyListingValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isShopifyListingValid() ? 'success' : 'warning'" />
+              </ion-item>
+              <ion-item v-if="poSummary.promiseDate">
+                <ion-label class="ion-text-wrap">{{ $t("Promise date") }}</ion-label>
+                <ion-label slot="end">{{ poSummary.promiseDate }}</ion-label>
+              </ion-item>
+              <ion-item-divider color="light">
+                <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
+              </ion-item-divider>
+              <!-- internationalized while preparaion -->
+              <ion-item v-if="poSummary.header || poSummary.body">
+                <ion-icon slot="start" :icon="shirtOutline" />
+                <ion-label class="ion-text-wrap">
+                  <h2 v-if="poSummary.header">{{ poSummary.header }}</h2>
+                  <p v-if="poSummary.body">{{ poSummary.body }}</p>
+                </ion-label>
+              </ion-item>
+            </div>
           </ion-card>
         </div>
       </div>
@@ -214,166 +227,162 @@
           </ion-item>
         </ion-card>
 
-        <ion-card v-if="!Object.keys(inventoryConfig).length">
-          <ion-item>
-            <ion-skeleton-text animated style="height: 40%; width: 70%;" />
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-        </ion-card>
-        <ion-card v-else>
+        <ion-card>
           <ion-card-header>
             <ion-card-title>
               <h3>{{ $t("Online ATP calculation") }}</h3>
             </ion-card-title>
           </ion-card-header>
-          <ion-item>
-            <ion-label>{{ $t("Online ATP") }}</ion-label>
-            <ion-label slot="end">{{ (atpCalcDetails.onlineAtp >= 0) ? atpCalcDetails.onlineAtp : '-' }}</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ $t("Quantity on hand") }}</ion-label>
-            <ion-label slot="end">{{ (atpCalcDetails.totalQOH >= 0) ? atpCalcDetails.totalQOH : '-' }}</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ $t("Excluded ATP") }}</ion-label>
-            <ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ $t("Reserve inventory") }}</ion-label>
-            <ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus" :checked="inventoryConfig.reserveInvStatus === 'Y'" @ionChange="updateReserveInvConfig($event.detail.checked)"/>
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
-            <ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @ionChange="updatePreOrdPhyInvHoldConfig($event.detail.checked)"/>
-          </ion-item>
+          <div v-if="!Object.keys(inventoryConfig).length">
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+          </div>
+          <div v-else>
+            <ion-item>
+              <ion-label>{{ $t("Online ATP") }}</ion-label>
+              <ion-label slot="end">{{ (atpCalcDetails.onlineAtp >= 0) ? atpCalcDetails.onlineAtp : '-' }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ $t("Quantity on hand") }}</ion-label>
+              <ion-label slot="end">{{ (atpCalcDetails.totalQOH >= 0) ? atpCalcDetails.totalQOH : '-' }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ $t("Excluded ATP") }}</ion-label>
+              <ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ $t("Reserve inventory") }}</ion-label>
+              <ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus" :checked="inventoryConfig.reserveInvStatus === 'Y'" @ionChange="updateReserveInvConfig($event.detail.checked)"/>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
+              <ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @ionChange="updatePreOrdPhyInvHoldConfig($event.detail.checked)"/>
+            </ion-item>
+          </div>
         </ion-card>
       </section>
 
       <hr />
 
       <section>
-        <ion-card v-if="!Object.keys(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT')).length
-          || !Object.keys(getCtgryAndBrkrngJob('JOB_BKR_ORD')).length
-          || !Object.keys(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE')).length">
-          <ion-item>
-            <ion-skeleton-text animated style="height: 40%; width: 70%;" />
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-        </ion-card>
-        <ion-card v-else>
+        <ion-card>
           <ion-card-header>
             <ion-card-title>
               <h3>{{ $t('Category and brokering jobs') }}</h3>
             </ion-card-title>
           </ion-card-header>
-
-          <!-- in case jobs are not available -->
           <div v-if="!Object.keys(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT')).length
-            && !Object.keys(getCtgryAndBrkrngJob('JOB_BKR_ORD')).length 
-            && !Object.keys(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE')).length">
-            <ion-item>{{ $t("No jobs found") }}</ion-item>
+          || !Object.keys(getCtgryAndBrkrngJob('JOB_BKR_ORD')).length
+          || !Object.keys(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE')).length">
+            <ion-item>
+              <ion-skeleton-text animated style="height: 40%; width: 70%;" />
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
+            </ion-item>
           </div>
-
           <div v-else>
-            <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT'), 'Pre-sell computation')">
-              <ion-label class="ion-text-wrap">
-                <h3>{{ $t('Pre-sell computation') }}</h3>
-                <p>{{ getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').lastRunTime) }}</p>
-              </ion-label>
-              <ion-label slot="end">
-                <p>{{ getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').runTime) : $t('disabled')}}</p>
-              </ion-label>
-            </ion-item>
+            <!-- in case jobs are not available -->
+            <div v-if="!Object.keys(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT')).length
+              && !Object.keys(getCtgryAndBrkrngJob('JOB_BKR_ORD')).length 
+              && !Object.keys(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE')).length">
+              <ion-item>{{ $t("No jobs found") }}</ion-item>
+            </div>
+
+            <div v-else>
+              <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT'), 'Pre-sell computation')">
+                <ion-label class="ion-text-wrap">
+                  <h3>{{ $t('Pre-sell computation') }}</h3>
+                  <p>{{ getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').lastRunTime) }}</p>
+                </ion-label>
+                <ion-label slot="end">
+                  <p>{{ getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_REL_PREODR_CAT').runTime) : $t('disabled')}}</p>
+                </ion-label>
+              </ion-item>
 
-            <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_BKR_ORD'), 'Order brokering')">
-              <ion-label class="ion-text-wrap">
-                <h3>{{ $t('Order brokering') }}</h3>
-                <p>{{ getCtgryAndBrkrngJob('JOB_BKR_ORD').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_BKR_ORD').lastRunTime) }}</p>
-              </ion-label>
-              <ion-label slot="end">
-                <p>{{ getCtgryAndBrkrngJob('JOB_BKR_ORD').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_BKR_ORD').runTime) : $t('disabled')}}</p>
-              </ion-label>
-            </ion-item>
+              <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_BKR_ORD'), 'Order brokering')">
+                <ion-label class="ion-text-wrap">
+                  <h3>{{ $t('Order brokering') }}</h3>
+                  <p>{{ getCtgryAndBrkrngJob('JOB_BKR_ORD').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_BKR_ORD').lastRunTime) }}</p>
+                </ion-label>
+                <ion-label slot="end">
+                  <p>{{ getCtgryAndBrkrngJob('JOB_BKR_ORD').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_BKR_ORD').runTime) : $t('disabled')}}</p>
+                </ion-label>
+              </ion-item>
 
-            <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE'), 'Auto releasing')">
-              <ion-label class="ion-text-wrap">
-                <h3>{{ $t('Auto releasing') }}</h3>
-                <p>{{ getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').lastRunTime) }}</p>
-              </ion-label>
-              <ion-label slot="end">
-                <p>{{ getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').runTime) : $t('disabled')}}</p>
-              </ion-label>
-            </ion-item>
+              <ion-item detail button @click="openJobActionsPopover($event, getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE'), 'Auto releasing')">
+                <ion-label class="ion-text-wrap">
+                  <h3>{{ $t('Auto releasing') }}</h3>
+                  <p>{{ getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').lastRunTime && timeTillJob(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').lastRunTime) }}</p>
+                </ion-label>
+                <ion-label slot="end">
+                  <p>{{ getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').runTime ? timeTillJob(getCtgryAndBrkrngJob('JOB_RLS_ORD_DTE').runTime) : $t('disabled')}}</p>
+                </ion-label>
+              </ion-item>
+            </div>
           </div>
         </ion-card>
 
-        <ion-card v-if="!poSummary.listingCountStatusMessage">
-          <ion-item>
-            <ion-skeleton-text animated style="height: 40%; width: 60%;" />
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
-          </ion-item>
-          <ion-item>
-            <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
-          </ion-item>
-        </ion-card>
-        <ion-card v-else>
+        <ion-card>
           <ion-card-header>
             <ion-card-title>
               <h3>{{ $t('Shop listing status') }}</h3>
             </ion-card-title>
           </ion-card-header>
-          <ion-item v-if="!Object.keys(shopListings).length">
-            {{ $t('No shop listings found') }}
-          </ion-item>
-          <ion-item v-else v-for="(listData, index) in shopListings" :key="index">
-            <ion-label class="ion-text-wrap">
-              <h5>{{ listData.name }}</h5>
-              <!-- internationalized while preparation -->
-              <p>{{ listData.listingTimeAndStatus }}</p>
-            </ion-label>
-            <ion-label v-if="listData.shopifyShopProductId && listData.status" :color="listData.containsError ? 'danger' : (listData.status === 'inactive' ? 'warning' : 'success')" slot="end">
-              <h5>{{ $t(listData.listingStatus) }}</h5>
-            </ion-label>
-            <ion-label v-else-if="listData.shopifyShopProductId" color="medium" slot="end">
-              <h5>{{ $t("No listing data") }}</h5>
-            </ion-label>
-            <ion-label v-else color="medium" slot="end">
-              <h5>{{ $t("Not linked") }}</h5>
-            </ion-label>
-          </ion-item>
+          <div v-if="!poSummary.listingCountStatusMessage">
+            <ion-item>
+              <ion-skeleton-text animated style="height: 40%; width: 60%;" />
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
+            </ion-item>
+            <ion-item>
+              <ion-skeleton-text animated style="height: 30%; width: 50%;" /> 
+            </ion-item>
+          </div>
+          <div v-else>
+            <ion-item v-if="!Object.keys(shopListings).length">
+              {{ $t('No shop listings found') }}
+            </ion-item>
+            <ion-item v-else v-for="(listData, index) in shopListings" :key="index">
+              <ion-label class="ion-text-wrap">
+                <h5>{{ listData.name }}</h5>
+                <!-- internationalized while preparation -->
+                <p>{{ listData.listingTimeAndStatus }}</p>
+              </ion-label>
+              <ion-label v-if="listData.shopifyShopProductId && listData.status" :color="listData.containsError ? 'danger' : (listData.status === 'inactive' ? 'warning' : 'success')" slot="end">
+                <h5>{{ $t(listData.listingStatus) }}</h5>
+              </ion-label>
+              <ion-label v-else-if="listData.shopifyShopProductId" color="medium" slot="end">
+                <h5>{{ $t("No listing data") }}</h5>
+              </ion-label>
+              <ion-label v-else color="medium" slot="end">
+                <h5>{{ $t("Not linked") }}</h5>
+              </ion-label>
+            </ion-item>
+          </div>
         </ion-card>
       </section>
     </ion-content>

From 14adbeabe56d529c481722ba2b19709d4972252b Mon Sep 17 00:00:00 2001
From: k2maan <ketuman333@gmail.com>
Date: Thu, 3 Aug 2023 10:54:42 +0530
Subject: [PATCH 2/4] Improved: increased card size to stop text from squishing
 (#139)

---
 src/views/catalog-product-details.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index 74291f0e..adbfe9f0 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -1095,7 +1095,7 @@ export default defineComponent({
 <style scoped>
 .header {
   display: grid;
-  grid-template-columns: 200px 1fr 375px;
+  grid-template-columns: 200px 1fr 400px;
   grid-gap: 16px;
   padding: 16px 16px 48px;
 }

From 02a1f211db6dd028f0a7a6f96fbe0be803e90967 Mon Sep 17 00:00:00 2001
From: k2maan <ketuman333@gmail.com>
Date: Wed, 23 Aug 2023 18:47:57 +0530
Subject: [PATCH 3/4] Improved: structure for summary section (#139)

---
 src/views/catalog-product-details.vue | 118 +++++++++++++-------------
 1 file changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index aaf9c1cf..6f42c061 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -69,66 +69,64 @@
         </div>
 
         <div>
-          <ion-card>
-            <div v-if="!poSummary.listingCountStatusMessage">
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
-                <ion-skeleton-text slot="end" animated style="height: 50%; width: 20%;" />
-              </ion-item>
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
-                <ion-skeleton-text slot="end" animated style="height: 50%; width: 40%;" />
-              </ion-item>
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
-                <ion-skeleton-text slot="end" animated style="height: 50%; width: 50%;" />
-              </ion-item>
-              <ion-item-divider color="light">
-                <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
-              </ion-item-divider>
-              <ion-item>
-                <ion-icon slot="start" :icon="shirtOutline" />
-                <ion-label>
-                  <ion-item lines="none">
-                    <ion-skeleton-text animated style="width: 90%; height: 40%;" />
-                  </ion-item>
-                  <ion-item lines="none">
-                    <ion-skeleton-text animated style="width: 100%; height: 60%;" />
-                  </ion-item>
-                </ion-label> 
-              </ion-item>
-            </div>
-            <div v-else>
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
-                <ion-label slot="end">{{ poSummary.eligible ? $t("Yes") : $t("No") }}</ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
-                <ion-label slot="end">{{ poSummary.categoryId === preOrderCategoryId ? $t('Pre-order') : poSummary.categoryId === backorderCategoryId ? $t('Back-order') : $t('None') }}</ion-label>
-                <ion-icon slot="end" :icon="isCategoryValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isCategoryValid() ? 'success' : 'warning'" />
-              </ion-item>
-              <ion-item>
-                <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
-                <ion-label slot="end">{{ poSummary.listingCountStatusMessage }}</ion-label>
-                <ion-icon slot="end" :icon="isShopifyListingValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isShopifyListingValid() ? 'success' : 'warning'" />
-              </ion-item>
-              <ion-item v-if="poSummary.promiseDate">
-                <ion-label class="ion-text-wrap">{{ $t("Promise date") }}</ion-label>
-                <ion-label slot="end">{{ poSummary.promiseDate }}</ion-label>
-              </ion-item>
-              <ion-item-divider color="light">
-                <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
-              </ion-item-divider>
-              <!-- internationalized while preparaion -->
-              <ion-item v-if="poSummary.header || poSummary.body">
-                <ion-icon slot="start" :icon="shirtOutline" />
-                <ion-label class="ion-text-wrap">
-                  <h2 v-if="poSummary.header">{{ poSummary.header }}</h2>
-                  <p v-if="poSummary.body">{{ poSummary.body }}</p>
-                </ion-label>
-              </ion-item>
-            </div>
+          <ion-card v-if="!poSummary.listingCountStatusMessage">
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
+              <ion-skeleton-text slot="end" animated style="height: 50%; width: 20%;" />
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
+              <ion-skeleton-text slot="end" animated style="height: 50%; width: 40%;" />
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
+              <ion-skeleton-text slot="end" animated style="height: 50%; width: 50%;" />
+            </ion-item>
+            <ion-item-divider color="light">
+              <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
+            </ion-item-divider>
+            <ion-item>
+              <ion-icon slot="start" :icon="shirtOutline" />
+              <ion-label>
+                <ion-item lines="none">
+                  <ion-skeleton-text animated style="width: 90%; height: 40%;" />
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-skeleton-text animated style="width: 100%; height: 60%;" />
+                </ion-item>
+              </ion-label> 
+            </ion-item>
+          </ion-card>
+          <ion-card v-else>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
+              <ion-label slot="end">{{ poSummary.eligible ? $t("Yes") : $t("No") }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
+              <ion-label slot="end">{{ poSummary.categoryId === preOrderCategoryId ? $t('Pre-order') : poSummary.categoryId === backorderCategoryId ? $t('Back-order') : $t('None') }}</ion-label>
+              <ion-icon slot="end" :icon="isCategoryValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isCategoryValid() ? 'success' : 'warning'" />
+            </ion-item>
+            <ion-item>
+              <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
+              <ion-label slot="end">{{ poSummary.listingCountStatusMessage }}</ion-label>
+              <ion-icon slot="end" :icon="isShopifyListingValid() ? checkmarkCircleOutline : alertCircleOutline" :color="isShopifyListingValid() ? 'success' : 'warning'" />
+            </ion-item>
+            <ion-item v-if="poSummary.promiseDate">
+              <ion-label class="ion-text-wrap">{{ $t("Promise date") }}</ion-label>
+              <ion-label slot="end">{{ poSummary.promiseDate }}</ion-label>
+            </ion-item>
+            <ion-item-divider color="light">
+              <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
+            </ion-item-divider>
+            <!-- internationalized while preparaion -->
+            <ion-item v-if="poSummary.header || poSummary.body">
+              <ion-icon slot="start" :icon="shirtOutline" />
+              <ion-label class="ion-text-wrap">
+                <h2 v-if="poSummary.header">{{ poSummary.header }}</h2>
+                <p v-if="poSummary.body">{{ poSummary.body }}</p>
+              </ion-label>
+            </ion-item>
           </ion-card>
         </div>
       </div>

From 58b2f7d15eb562c0738b530f4d6efa2a2f5ca33e Mon Sep 17 00:00:00 2001
From: k2maan <ketuman333@gmail.com>
Date: Mon, 4 Sep 2023 14:51:11 +0530
Subject: [PATCH 4/4] Improved: height/thickness for skeleton text loaders
 (#139)

---
 src/views/catalog-product-details.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index 6f42c061..f1269640 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -72,15 +72,15 @@
           <ion-card v-if="!poSummary.listingCountStatusMessage">
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Eligible") }}</ion-label>
-              <ion-skeleton-text slot="end" animated style="height: 50%; width: 20%;" />
+              <ion-skeleton-text slot="end" animated style="height: 30%; width: 20%;" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Category") }}</ion-label>
-              <ion-skeleton-text slot="end" animated style="height: 50%; width: 40%;" />
+              <ion-skeleton-text slot="end" animated style="height: 30%; width: 40%;" />
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Shopify listing") }}</ion-label>
-              <ion-skeleton-text slot="end" animated style="height: 50%; width: 50%;" />
+              <ion-skeleton-text slot="end" animated style="height: 30%; width: 50%;" />
             </ion-item>
             <ion-item-divider color="light">
               <ion-label color="medium">{{ $t("Timeline") }}</ion-label>
@@ -89,7 +89,7 @@
               <ion-icon slot="start" :icon="shirtOutline" />
               <ion-label>
                 <ion-item lines="none">
-                  <ion-skeleton-text animated style="width: 90%; height: 40%;" />
+                  <ion-skeleton-text animated style="width: 90%; height: 30%;" />
                 </ion-item>
                 <ion-item lines="none">
                   <ion-skeleton-text animated style="width: 100%; height: 60%;" />
@@ -133,15 +133,9 @@
 
       <hr />
 
-      <div v-if="!Object.keys(poAndAtpDetails).length">
-        <ion-item lines="none">
-          <ion-skeleton-text animated style="width: 50%; height: 50%;" />
-        </ion-item>
-      </div>
-
       <section>
         <ion-card v-if="!Object.keys(poAndAtpDetails).length">
-          <ion-item>
+          <ion-item lines="none">
             <ion-skeleton-text animated style="height: 40%; width: 70%;" />
           </ion-item>
           <ion-item>
@@ -206,7 +200,6 @@
             <ion-label slot="end">{{ (poAndAtpDetails.totalPoAtp >= 0) ? poAndAtpDetails.totalPoAtp : '-' }}</ion-label>
           </ion-item>
         </ion-card>
-
         <ion-card v-else>
           <ion-card-header>
             <ion-card-title>