@hulkapps/app-manager-vue 3.1.21 → 3.1.23

package/package.json

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

@@ -68,7 +68,8 @@
         </strong>
       </ToggleButton> -->
     </div>
-    <PlanShowcaseBanner
+    <!-- -------------------- Bundle Plan Banner -------------------- -->
+    <!-- <PlanShowcaseBanner
       v-if="bundle_plan"
       :useCardStyle="true"
       :width="this.width"
@@ -76,7 +77,7 @@
       :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)"
       :oldPrice="bundle_plan.price" @plan-clicked="handlePlanClicked(bundle_plan)"
       :isCurrentPlan="isCurrentPlanId(bundle_plan)"
-    />
+    /> -->
     <PPage
       :class="[
         'app-manager-plan-page-slider',
@@ -396,7 +397,7 @@ export default {
       if (this.discount_code !== null) {
         params['discount_code'] = this.discount_code;
       }
-      params['frontend_sdk_version'] = "3.1.21"
+      params['frontend_sdk_version'] = "3.1.23"
       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

@@ -1,7 +1,7 @@
 <script>
 import VariantButton from "./VariantButton";
 import Swiper, {Navigation, Pagination} from "swiper";
-import {calculatePlanPriceWithDiscounts, isPlanButtonDisabled, formatFeature, getPlanButtonText, isPlanNote} from "@/helpers";
+import {calculatePlanPriceWithDiscounts, isPlanButtonDisabled, formatFeature, getPlanButtonText, isPlanNote, isPublicPlan} from "@/helpers";
 
 export default {
   name: "PlanCardsHighlights",
@@ -57,11 +57,17 @@ export default {
       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 => {
@@ -76,10 +82,17 @@ export default {
           ) {
             this.anyMonthlyPlanHasNote = true;
           }
+          if (this.getSortedPlanDetails(plan).length > 0 && this.anyMonthlyPlanHasDetail === false) {
+            this.anyMonthlyPlanHasDetail = true;
+          }
           return planDetails;
         });
     },
     annualPlans() {
+      this.anyAnnuallyPlanHasDiscount = false;
+      this.anyAnnuallyPlanHasNote = false;
+      this.anyAnnuallyPlanHasDetail = false;
+
       return this.plans
         .filter(plan => plan.interval === "ANNUAL")
         .map(plan => {
@@ -94,6 +107,9 @@ export default {
           ) {
             this.anyAnnuallyPlanHasNote = true;
           }
+          if (this.getSortedPlanDetails(plan).length > 0 && this.anyAnnuallyPlanHasDetail === false) {
+            this.anyAnnuallyPlanHasDetail = true;
+          }
           return planDetails;
         });
     },
@@ -105,6 +121,7 @@ export default {
     }
   },
   methods: {
+    isPublicPlan,
     getPlanButtonText,
     isPlanNote,
     isPlanButtonDisabled,
@@ -114,7 +131,8 @@ export default {
       return Number.isNaN(normalized) ? fallback : normalized;
     },
     getSortedPlanHighlights(plan) {
-      return Object.values(plan.highlights || {})
+      return Object.values(plan.details || {})
+        .filter((highlight) => highlight.type === "highlight")
         .sort((a, b) => this.normalizeSortOrder(a.sort_order) - this.normalizeSortOrder(b.sort_order))
         .map((highlight) => ({
           plan_id: highlight.plan_id,
@@ -127,6 +145,33 @@ export default {
           slug: `highlight_${highlight.id}`,
         }));
     },
+    getSortedPlanDetails(plan) {
+      return Object.values(plan.details || {})
+        .filter((detail) => 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 || {}));
 
@@ -462,7 +507,7 @@ export default {
                 visibility:
                   plan.description
                   && selectedInterval === 'monthly'
-                  && plan.is_custom === false
+                  && isPublicPlan(plan)
                     ? 'visible'
                     : 'hidden',
               }"
@@ -530,6 +575,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="anyMonthlyPlanHasDetail"
+              :style="{
+                visibility:
+                  selectedInterval === 'monthly' && getPrimaryPlanDetail(plan)
+                    ? '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>
@@ -594,7 +670,7 @@ export default {
                 visibility:
                   plan.description
                   && selectedInterval === 'annually'
-                  && plan.is_custom === false
+                  && isPublicPlan(plan)
                     ? 'visible'
                     : 'hidden',
               }"
@@ -662,6 +738,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="anyAnnuallyPlanHasDetail"
+              :style="{
+              visibility:
+                selectedInterval === 'annually' && getPrimaryPlanDetail(plan)
+                  ? '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>
@@ -712,6 +819,8 @@ export default {
 }
 
 .card {
+  position: relative;
+  z-index: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -720,6 +829,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;
@@ -759,6 +878,7 @@ export default {
 
 .card .trial_days,
 .card .description,
+.card .plan-detail,
 .card .plan-note {
   font-size: 13px;
   font-weight: 400;
@@ -766,11 +886,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: 16px;
+  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;