@hulkapps/app-manager-vue 3.1.9 → 3.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hulkapps/app-manager-vue",
-  "version": "3.1.9",
+  "version": "3.1.11",
   "description": "Vue SDK to render app manager contents",
   "main": "dist/app-manager-vue.ssr.js",
   "browser": "dist/app-manager-vue.esm.js",

package/src/components/Plans/AppManagerSliderPlan.vue

@@ -408,6 +408,12 @@ export default {
         this.plans = data.plans;
         this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
 
+        if (this.plans?.length > 0 && data.most_popular_plan_ids?.length > 0) {
+          this.plans.forEach(plan => {
+            plan.most_popular = data.most_popular_plan_ids.includes(plan.id);
+          });
+        }
+
         if (this.plans[0].store_base_plan) {
           this.subtitleContent = this.translateMe('App plans are based on your existing shopify plan');
         }

package/src/components/PolarisNew/PlanCardsHighlights.vue

@@ -406,7 +406,7 @@ export default {
               index === (monthlyPlans.length - 1) ? 'last-card' : '',
             ]"
           >
-            <div class="most-popular" v-if="plan.choose_later_plan">
+            <div class="most-popular" v-if="plan.most_popular">
               <div class="most-popular-label">
                 {{ translateMe("Most popular") }}
               </div>
@@ -537,7 +537,7 @@ export default {
               index === (annualPlans.length - 1) ? 'last-card' : '',
             ]"
           >
-            <div class="most-popular" v-if="plan.choose_later_plan">
+            <div class="most-popular" v-if="plan.most_popular">
               <div class="most-popular-label">
                 {{ translateMe("Most popular") }}
               </div>

package/src/components/PolarisNew/PlanTable.vue

@@ -105,7 +105,17 @@ export default {
               featureNames.forEach((featureName, index) => {
                 const feature = features[index];
                 if (featureName && feature) {
-                  feature.style.height = `${featureName.offsetHeight}px`;
+                  featureName.style.height = 'auto';
+                  feature.style.height = 'auto';
+
+                  let measured = featureName.getBoundingClientRect().height;
+                  if (!measured || measured <= 0) {
+                    measured = featureName.offsetHeight;
+                  }
+
+                  const intHeight = Math.ceil(measured);
+                  featureName.style.height = `${intHeight}px`;
+                  feature.style.height = `${intHeight}px`;
                 }
               });
             });
@@ -128,10 +138,12 @@ export default {
             slides.forEach((slide, index) => {
               const planName = planNames[index];
               if (planName) {
-                planNameHeight = Math.max(
-                  planName.offsetHeight,
-                  planNameHeight
-                );
+                let measured = planName.getBoundingClientRect().height;
+                if (!measured || measured <= 0) {
+                  measured = planName.offsetHeight;
+                }
+                const intMeasured = Math.ceil(measured);
+                planNameHeight = Math.max(planNameHeight, intMeasured);
               }
             });
             // Set the minHeight for the plans available name
@@ -838,8 +850,8 @@ export default {
   padding: 12px;
   border-bottom: 1px solid #e3e3e3;
   border-left: 1px solid #e3e3e3;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
+/*  word-wrap: break-word;
+  overflow-wrap: break-word;*/
   word-break: normal;
   hyphens: none;
 }
@@ -1051,4 +1063,10 @@ export default {
     width: calc(100% + -2px);
   }
 }
+
+@media (max-width: 400px) {
+  .plan-feature-name {
+    padding: 12px 4px;
+  }
+}
 </style>