@hulkapps/app-manager-vue 3.1.23 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hulkapps/app-manager-vue",
-  "version": "3.1.23",
+  "version": "3.2.0",
   "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

@@ -196,6 +196,8 @@ import CustomizationModal from "@/components/PolarisNew/CustomizationModal.vue";
 import {calculatePlanPriceWithDiscounts} from "@/helpers";
 import PlanBanners from "@/components/Plans/PlanBanners.vue";
 
+const APP_MANAGER_VUE_VERSION = "3.2.0";
+
 export default {
   name: "AppManagerSliderPlan",
   components: {
@@ -397,7 +399,7 @@ export default {
       if (this.discount_code !== null) {
         params['discount_code'] = this.discount_code;
       }
-      params['frontend_sdk_version'] = "3.1.23"
+      params['frontend_sdk_version'] = APP_MANAGER_VUE_VERSION
       let {data} = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plans`, {params: params}).catch(error => {
         console.error(error)
       });

package/src/components/PolarisNew/PlanCardsHighlights.vue

@@ -53,65 +53,37 @@ export default {
         before: 0,
         after: 0
       },
-      anyMonthlyPlanHasDiscount: false,
-      anyAnnuallyPlanHasDiscount: false,
-      anyMonthlyPlanHasNote: false,
-      anyAnnuallyPlanHasNote: false,
-      anyMonthlyPlanHasDetail: false,
-      anyAnnuallyPlanHasDetail: false,
       loadingPlanId: null
     };
   },
   computed: {
     monthlyPlans() {
-      this.anyMonthlyPlanHasDiscount = false;
-      this.anyMonthlyPlanHasNote = false;
-      this.anyMonthlyPlanHasDetail = false;
-
       return this.plans
         .filter(plan => plan.interval === "EVERY_30_DAYS")
-        .map(plan => {
-          const planDetails = calculatePlanPriceWithDiscounts(plan, this.promotionalDiscount);
-          if (planDetails.has_discount && !this.anyMonthlyPlanHasDiscount) {
-            this.anyMonthlyPlanHasDiscount = true;
-          }
-          if (
-            plan.store_base_plan
-            && this.anyMonthlyPlanHasNote === false
-            && isPlanNote(this.shopifyPlan, plan, this.currentPlan, this.hasActiveCharge)
-          ) {
-            this.anyMonthlyPlanHasNote = true;
-          }
-          if (this.getSortedPlanDetails(plan).length > 0 && this.anyMonthlyPlanHasDetail === false) {
-            this.anyMonthlyPlanHasDetail = true;
-          }
-          return planDetails;
-        });
+        .map(plan => calculatePlanPriceWithDiscounts(plan, this.promotionalDiscount));
     },
     annualPlans() {
-      this.anyAnnuallyPlanHasDiscount = false;
-      this.anyAnnuallyPlanHasNote = false;
-      this.anyAnnuallyPlanHasDetail = false;
-
       return this.plans
         .filter(plan => plan.interval === "ANNUAL")
-        .map(plan => {
-          const planDetails = calculatePlanPriceWithDiscounts(plan, this.promotionalDiscount);
-          if (planDetails.has_discount && !this.anyAnnuallyPlanHasDiscount) {
-            this.anyAnnuallyPlanHasDiscount = true;
-          }
-          if (
-            plan.store_base_plan
-            && this.anyAnnuallyPlanHasNote === false
-            && isPlanNote(this.shopifyPlan, plan, this.currentPlan, this.hasActiveCharge)
-          ) {
-            this.anyAnnuallyPlanHasNote = true;
-          }
-          if (this.getSortedPlanDetails(plan).length > 0 && this.anyAnnuallyPlanHasDetail === false) {
-            this.anyAnnuallyPlanHasDetail = true;
-          }
-          return planDetails;
-        });
+        .map(plan => calculatePlanPriceWithDiscounts(plan, this.promotionalDiscount));
+    },
+    anyMonthlyPlanHasDiscount() {
+      return this.monthlyPlans.some((plan) => plan.has_discount);
+    },
+    anyAnnuallyPlanHasDiscount() {
+      return this.annualPlans.some((plan) => plan.has_discount);
+    },
+    anyMonthlyPlanHasNote() {
+      return this.monthlyPlans.some((plan) => this.hasPlanNote(plan));
+    },
+    anyAnnuallyPlanHasNote() {
+      return this.annualPlans.some((plan) => this.hasPlanNote(plan));
+    },
+    anyMonthlyPlanHasDetail() {
+      return this.monthlyPlans.some((plan) => this.hasPlanDetail(plan));
+    },
+    anyAnnuallyPlanHasDetail() {
+      return this.annualPlans.some((plan) => this.hasPlanDetail(plan));
     },
     isMonthlyVisible() {
       return this.selectedInterval === "monthly";
@@ -130,9 +102,36 @@ export default {
       const normalized = Number(value);
       return Number.isNaN(normalized) ? fallback : normalized;
     },
+    normalizePlanDetailType(type) {
+      const normalized = String(type ?? "").trim().toLowerCase();
+
+      if (normalized === "details") {
+        return "detail";
+      }
+
+      if (normalized === "highlights") {
+        return "highlight";
+      }
+
+      return normalized;
+    },
+    hasPlanNote(plan) {
+      return isPlanNote(this.shopifyPlan, plan, this.currentPlan, this.hasActiveCharge);
+    },
+    hasPlanDetail(plan) {
+      return this.getSortedPlanDetails(plan).length > 0;
+    },
+    debugAnyPlanHasDetail(interval) {
+      const isMonthlyInterval = interval === "monthly";
+      return isMonthlyInterval ? this.anyMonthlyPlanHasDetail : this.anyAnnuallyPlanHasDetail;
+    },
+    debugPlanDetailVisibility(plan, interval) {
+      const primaryDetail = this.getPrimaryPlanDetail(plan);
+      return this.selectedInterval === interval && Boolean(primaryDetail);
+    },
     getSortedPlanHighlights(plan) {
       return Object.values(plan.details || {})
-        .filter((highlight) => highlight.type === "highlight")
+        .filter((highlight) => this.normalizePlanDetailType(highlight.type) === "highlight")
         .sort((a, b) => this.normalizeSortOrder(a.sort_order) - this.normalizeSortOrder(b.sort_order))
         .map((highlight) => ({
           plan_id: highlight.plan_id,
@@ -147,7 +146,7 @@ export default {
     },
     getSortedPlanDetails(plan) {
       return Object.values(plan.details || {})
-        .filter((detail) => detail.type === "detail")
+        .filter((detail) => this.normalizePlanDetailType(detail.type) === "detail")
         .sort((a, b) => this.normalizeSortOrder(a.sort_order) - this.normalizeSortOrder(b.sort_order))
         .map((detail) => ({
           plan_id: detail.plan_id,
@@ -577,10 +576,10 @@ export default {
             </p>
             <h6
               class="plan-detail"
-              v-if="anyMonthlyPlanHasDetail"
+              v-if="debugAnyPlanHasDetail('monthly')"
               :style="{
                 visibility:
-                  selectedInterval === 'monthly' && getPrimaryPlanDetail(plan)
+                  debugPlanDetailVisibility(plan, 'monthly')
                     ? 'visible'
                     : 'hidden',
               }"
@@ -740,10 +739,10 @@ export default {
             </p>
             <h6
               class="plan-detail"
-              v-if="anyAnnuallyPlanHasDetail"
+              v-if="debugAnyPlanHasDetail('annually')"
               :style="{
               visibility:
-                selectedInterval === 'annually' && getPrimaryPlanDetail(plan)
+                debugPlanDetailVisibility(plan, 'annually')
                   ? 'visible'
                   : 'hidden',
               }"
@@ -848,6 +847,7 @@ export default {
   font-size: 16px;
   font-weight: 700;
   color: #1A1A1A;
+  text-align: center;
 }
 
 .card .price-wrapper {
@@ -900,7 +900,7 @@ export default {
   width: 100%;
   justify-content: center;
   border-top: 1px solid #cccccc;
-  margin-top: 16px;
+  margin-top: auto;
   padding-top: 12px;
 }
 
@@ -986,6 +986,7 @@ export default {
 
 .features {
   margin-top: 19px;
+  margin-bottom: 19px;
 }
 
 .features ul {

package/src/components/PolarisNew/PlanTable.vue

@@ -582,7 +582,6 @@ export default {
                   anyMonthlyPlanHasDiscount ? 'has-discount' : ''
                 ]"
               >
-                <h4 class="plan-name mobile-plan-name">{{ translateMe(plan.name) }}</h4>
                 <template v-if="plan.strike_price">
                   <h5>
                     <span class="strike-price">${{ Number(plan.strike_price).toFixed(2) }}</span>
@@ -695,7 +694,6 @@ export default {
                   anyAnnuallyPlanHasDiscount ? 'has-discount' : ''
                 ]"
               >
-                <h4 class="plan-name mobile-plan-name">{{ translateMe(plan.name) }}</h4>
                 <template v-if="plan.strike_price">
                   <h5>
                     <span class="strike-price">${{ Number(plan.strike_price).toFixed(2) }}</span>
@@ -900,7 +898,7 @@ export default {
 
 .plan-header-wrapper .price-wrapper .main-price {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 8px;
   justify-content: center;
   align-items: center;
@@ -923,15 +921,6 @@ export default {
   line-height: 20px;
   font-weight: 700;
   color: #1A1A1A;
-  width: max-content;
-}
-
-.plan-header-wrapper .price-wrapper h4.plan-name {
-  width: 100%;
-}
-
-.plan-header-wrapper .price-wrapper .mobile-plan-name {
-  display: none;
 }
 
 .plan-header-wrapper .price-wrapper h4 h6 {
@@ -1062,20 +1051,6 @@ export default {
   overscroll-behavior: none !important;
 }
 
-@media (max-width: 1024px) {
-  .plan-header-wrapper .price-wrapper .mobile-plan-name {
-    display: inline-block;
-  }
-
-  .plan-header-wrapper .price-wrapper .desktop-plan-name {
-    display: none;
-  }
-
-  .plan-header-wrapper .price-wrapper .main-price {
-    flex-direction: column;
-  }
-}
-
 @media (max-width: 640px) {
   .swiper-plan-navigation {
     display: none !important;