@hulkapps/app-manager-vue 3.1.22 → 3.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hulkapps/app-manager-vue",
-  "version": "3.1.22",
+  "version": "3.1.25",
   "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/AppManagerPlan.vue

@@ -17,6 +17,8 @@ import AppManagerSliderPlan from "./AppManagerSliderPlan";
 import Vue from "vue";
 import install from "@/entry.esm";
 
+const APP_MANAGER_VUE_VERSION = "3.1.24";
+
 export default {
   name: "AppManagerPlan",
   components: {AppManagerSliderPlan},
@@ -77,6 +79,10 @@ export default {
       }
       install(Vue, config)
     }
+
+    console.info("[AppManagerPlan] mounted wrapper context", {
+      sdkVersion: APP_MANAGER_VUE_VERSION,
+    });
   }
 }
 </script>

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.1.24";
+
 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.22"
+      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)
       });
@@ -445,6 +447,10 @@ export default {
         if (data.bundle_details) {
           this.bundle_details = data.bundle_details;
         }
+
+        console.info("[AppManagerSliderPlan] plans loaded", {
+          sdkVersion: APP_MANAGER_VUE_VERSION,
+        });
       }
     },
     handlePlanBannerClose(payload) {
@@ -464,6 +470,9 @@ export default {
   },
   async mounted() {
     this.planLoading = true;
+    console.info("[AppManagerSliderPlan] mounting plan view", {
+      sdkVersion: APP_MANAGER_VUE_VERSION,
+    });
     await this.fetchFeatures();
     await this.fetchPlans();
     this.planLoading = false;

package/src/components/PolarisNew/PlanCardsHighlights.vue

@@ -53,10 +53,6 @@ export default {
         before: 0,
         after: 0
       },
-      anyMonthlyPlanHasDiscount: false,
-      anyAnnuallyPlanHasDiscount: false,
-      anyMonthlyPlanHasNote: false,
-      anyAnnuallyPlanHasNote: false,
       loadingPlanId: null
     };
   },
@@ -64,38 +60,30 @@ export default {
     monthlyPlans() {
       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;
-          }
-          return planDetails;
-        });
+        .map(plan => calculatePlanPriceWithDiscounts(plan, this.promotionalDiscount));
     },
     annualPlans() {
       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;
-          }
-          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";
@@ -114,8 +102,57 @@ 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";
+      const value = isMonthlyInterval ? this.anyMonthlyPlanHasDetail : this.anyAnnuallyPlanHasDetail;
+
+      console.info("[PlanCardsHighlights][render] detail-row gate", {
+        interval,
+        selectedInterval: this.selectedInterval,
+        anyMonthlyPlanHasDetail: this.anyMonthlyPlanHasDetail,
+        anyAnnuallyPlanHasDetail: this.anyAnnuallyPlanHasDetail,
+        value,
+      });
+
+      return value;
+    },
+    debugPlanDetailVisibility(plan, interval) {
+      const primaryDetail = this.getPrimaryPlanDetail(plan);
+      const isVisible = this.selectedInterval === interval && Boolean(primaryDetail);
+
+      console.info("[PlanCardsHighlights][render] detail-row visibility", {
+        interval,
+        selectedInterval: this.selectedInterval,
+        planId: plan?.id,
+        hasPrimaryDetail: Boolean(primaryDetail),
+        primaryDetail: primaryDetail?.name || null,
+        isVisible,
+      });
+
+      return isVisible;
+    },
     getSortedPlanHighlights(plan) {
-      return Object.values(plan.highlights || {})
+      return Object.values(plan.details || {})
+        .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,
@@ -128,6 +165,33 @@ export default {
           slug: `highlight_${highlight.id}`,
         }));
     },
+    getSortedPlanDetails(plan) {
+      return Object.values(plan.details || {})
+        .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,
+          feature_id: `detail_${detail.id}`,
+          uuid: `detail_${detail.id}`,
+          value: "1",
+          value_type: "boolean",
+          name: detail.text,
+          format: null,
+          slug: `detail_${detail.id}`,
+        }));
+    },
+    getPrimaryPlanDetail(plan) {
+      const details = this.getSortedPlanDetails(plan);
+      return details.length ? details[0] : null;
+    },
+    getAdditionalPlanDetails(plan) {
+      const details = this.getSortedPlanDetails(plan);
+      if (details.length <= 1) {
+        return [];
+      }
+
+      return details.slice(1);
+    },
     getSortedPlanFeatures(plan) {
       const assignedFeatureUuids = new Set(Object.keys(plan.features || {}));
 
@@ -531,6 +595,37 @@ export default {
             >
               {{ translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan') }}
             </p>
+            <h6
+              class="plan-detail"
+              v-if="debugAnyPlanHasDetail('monthly')"
+              :style="{
+                visibility:
+                  debugPlanDetailVisibility(plan, 'monthly')
+                    ? 'visible'
+                    : 'hidden',
+              }"
+            >
+              <span>
+                {{ getPrimaryPlanDetail(plan) ? translateMe(getPrimaryPlanDetail(plan).name) : '' }}
+                <span
+                  v-if="getAdditionalPlanDetails(plan).length"
+                  class="plan-detail-tooltip-wrapper"
+                  tabindex="0"
+                  role="button"
+                  aria-label="Show more plan details"
+                >
+                  <span class="plan-detail-info">i</span>
+                  <span class="plan-detail-tooltip">
+                    <span
+                      v-for="(detail, detailIndex) in getAdditionalPlanDetails(plan)"
+                      :key="`monthly_detail_${plan.id}_${detailIndex}`"
+                    >
+                      {{ translateMe(detail.name) }}
+                    </span>
+                  </span>
+                </span>
+              </span>
+            </h6>
           </div>
         </div>
       </div>
@@ -663,6 +758,37 @@ export default {
             >
               {{ translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan') }}
             </p>
+            <h6
+              class="plan-detail"
+              v-if="debugAnyPlanHasDetail('annually')"
+              :style="{
+              visibility:
+                debugPlanDetailVisibility(plan, 'annually')
+                  ? 'visible'
+                  : 'hidden',
+              }"
+            >
+              <span>
+                {{ getPrimaryPlanDetail(plan) ? translateMe(getPrimaryPlanDetail(plan).name) : '' }}
+                <span
+                  v-if="getAdditionalPlanDetails(plan).length"
+                  class="plan-detail-tooltip-wrapper"
+                  tabindex="0"
+                  role="button"
+                  aria-label="Show more plan details"
+                >
+                  <span class="plan-detail-info">i</span>
+                  <span class="plan-detail-tooltip">
+                    <span
+                      v-for="(detail, detailIndex) in getAdditionalPlanDetails(plan)"
+                      :key="`annually_detail_${plan.id}_${detailIndex}`"
+                    >
+                      {{ translateMe(detail.name) }}
+                    </span>
+                  </span>
+                </span>
+              </span>
+            </h6>
           </div>
         </div>
       </div>
@@ -713,6 +839,8 @@ export default {
 }
 
 .card {
+  position: relative;
+  z-index: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -721,6 +849,16 @@ export default {
   padding: 16px;
 }
 
+.swiper-wrapper .swiper-slide {
+  position: relative;
+  z-index: 1;
+}
+
+.swiper-wrapper .swiper-slide:hover,
+.swiper-wrapper .swiper-slide:focus-within {
+  z-index: 4;
+}
+
 .swiper-wrapper .swiper-slide .card-border.last-card,
 .swiper-wrapper .swiper-slide:not(.swiper-slide-active) .card-border {
   border-left: 1px solid #cccccc;
@@ -730,6 +868,7 @@ export default {
   font-size: 16px;
   font-weight: 700;
   color: #1A1A1A;
+  text-align: center;
 }
 
 .card .price-wrapper {
@@ -760,6 +899,7 @@ export default {
 
 .card .trial_days,
 .card .description,
+.card .plan-detail,
 .card .plan-note {
   font-size: 13px;
   font-weight: 400;
@@ -767,11 +907,92 @@ export default {
 }
 
 .card .trial_days,
-.card .description {
+.card .description,
+.card .plan-detail {
   text-align: center;
   text-transform: unset;
 }
 
+.card .plan-detail {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+  width: 100%;
+  justify-content: center;
+  border-top: 1px solid #cccccc;
+  margin-top: auto;
+  padding-top: 12px;
+}
+
+.plan-detail-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid #757575;
+  color: #4A4A4A;
+  font-size: 12px;
+  line-height: 1;
+  cursor: help;
+  user-select: none;
+}
+
+.plan-detail-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.plan-detail-tooltip {
+  position: absolute;
+  right: -8px;
+  bottom: calc(100% + 8px);
+  background-color: white;
+  color: #333;
+  font-weight: 500;
+  max-width: 250px;
+  min-width: 150px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  box-shadow: 0 4px 8px #00000026;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 20;
+}
+
+.plan-detail-tooltip span {
+  display: block;
+  text-align: left;
+}
+
+.plan-detail-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 12px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid white;
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+}
+
+.plan-detail-tooltip-wrapper:hover .plan-detail-tooltip,
+.plan-detail-tooltip-wrapper:focus .plan-detail-tooltip,
+.plan-detail-tooltip-wrapper:focus-within .plan-detail-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
 .card .plan-note {
   margin-top: 8px;
   text-align: center;
@@ -786,6 +1007,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;