@hulkapps/app-manager-vue 3.1.8 → 3.1.10

package/package.json

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

@@ -98,6 +98,7 @@
           :plans="plans"
           :features="features"
           :currentPlan="plan"
+          :hasActiveCharge="has_active_charge"
           :shopifyPlan="shopify_plan"
           :promotionalDiscount="promotional_discount"
           :selectedInterval="selectedPlan"
@@ -110,6 +111,7 @@
           <PlanTable
             :plans="plans"
             :currentPlan="plan"
+            :hasActiveCharge="has_active_charge"
             :shopifyPlan="shopify_plan"
             :promotionalDiscount="promotional_discount"
             :selectedInterval="selectedPlan"
@@ -190,7 +192,7 @@ import GetCustomBlock from "../PolarisNew/GetCustomBlock.vue";
 import PlanTable from "../PolarisNew/PlanTable.vue";
 import BundlePlanCard from "../PolarisNew/BundlePlanCard.vue";
 import CustomizationModal from "@/components/PolarisNew/CustomizationModal.vue";
-import { calculatePlanPriceWithDiscounts } from "@/helpers";
+import {calculatePlanPriceWithDiscounts} from "@/helpers";
 import PlanBanners from "@/components/Plans/PlanBanners.vue";
 
 export default {
@@ -406,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

@@ -1,7 +1,7 @@
 <script>
 import VariantButton from "./VariantButton";
 import Swiper, {Navigation, Pagination} from "swiper";
-import {calculatePlanPriceWithDiscounts, isPlanButtonDisabled, formatFeature, getPlanButtonText} from "@/helpers";
+import {calculatePlanPriceWithDiscounts, isPlanButtonDisabled, formatFeature, getPlanButtonText, isPlanNote} from "@/helpers";
 
 export default {
   name: "PlanCardsHighlights",
@@ -17,6 +17,10 @@ export default {
       type: Object,
       required: false,
     },
+    hasActiveCharge: {
+      type: Boolean,
+      required: false,
+    },
     shopifyPlan: {
       type: String,
       required: false,
@@ -51,6 +55,8 @@ export default {
       },
       anyMonthlyPlanHasDiscount: false,
       anyAnnuallyPlanHasDiscount: false,
+      anyMonthlyPlanHasNote: false,
+      anyAnnuallyPlanHasNote: false,
       loadingPlanId: null
     };
   },
@@ -63,6 +69,13 @@ export default {
           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;
         });
     },
@@ -74,6 +87,13 @@ export default {
           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;
         });
     },
@@ -113,6 +133,7 @@ export default {
   },
   methods: {
     getPlanButtonText,
+    isPlanNote,
     isPlanButtonDisabled,
     formatFeature,
     async handlePlanClick(plan) {
@@ -385,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>
@@ -428,10 +449,10 @@ export default {
             </h6>
             <VariantButton
                 :variant="'secondary'"
-                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan, hasActiveCharge)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
-            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan) }}
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, false, hasActiveCharge) }}
             </VariantButton>
             <h6
               class="trial_days"
@@ -474,6 +495,19 @@ export default {
                 </li>
               </ul>
             </div>
+            <p
+              class="plan-note"
+              v-if="anyMonthlyPlanHasNote"
+              :style="{
+                visibility:
+                  selectedInterval === 'monthly'
+                  && isPlanNote(shopifyPlan, plan, currentPlan, hasActiveCharge)
+                    ? 'visible'
+                    : 'hidden',
+              }"
+            >
+              {{ translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan') }}
+            </p>
           </div>
         </div>
       </div>
@@ -503,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>
@@ -546,10 +580,10 @@ export default {
             </h6>
             <VariantButton
                 :variant="'secondary'"
-                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan, hasActiveCharge)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
-            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan) }}
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, false, hasActiveCharge) }}
             </VariantButton>
             <h6
               class="trial_days"
@@ -592,6 +626,19 @@ export default {
                 </li>
               </ul>
             </div>
+            <p
+              class="plan-note"
+              v-if="anyAnnuallyPlanHasNote"
+              :style="{
+                visibility:
+                  selectedInterval === 'annually'
+                  && isPlanNote(shopifyPlan, plan, currentPlan, hasActiveCharge)
+                    ? 'visible'
+                    : 'hidden',
+              }"
+            >
+              {{ translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan') }}
+            </p>
           </div>
         </div>
       </div>
@@ -688,12 +735,18 @@ export default {
 }
 
 .card .trial_days,
-.card .description {
+.card .description,
+.card .plan-note {
   font-size: 13px;
   font-weight: 400;
   color: #4A4A4A;
 }
 
+.card .plan-note {
+  margin-top: 8px;
+  text-align: center;
+}
+
 .button {
   display: flex;
   justify-content: center;

package/src/components/PolarisNew/PlanTable.vue

@@ -35,6 +35,10 @@ export default {
       type: Object,
       required: false,
     },
+    hasActiveCharge: {
+      type: Boolean,
+      required: false,
+    },
     shopifyPlan: {
       type: String,
       required: false,
@@ -574,11 +578,11 @@ export default {
               </div>
               <VariantButton
                 :variant="'secondary'"
-                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan, hasActiveCharge)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
                 class="button"
-              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true) }}</VariantButton>
+              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true, hasActiveCharge) }}</VariantButton>
             </div>
             <template v-for="group in monthlyPlansFeatures">
               <div v-if="group.name" class="feature-group-header plan-feature plan-feature-monthly">
@@ -687,11 +691,11 @@ export default {
               </div>
               <VariantButton
                 :variant="'secondary'"
-                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan, hasActiveCharge)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
                 class="button"
-              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true) }}</VariantButton>
+              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true, hasActiveCharge) }}</VariantButton>
             </div>
             <template v-for="group in annualPlansFeatures">
               <div v-if="group.name" class="feature-group-header plan-feature plan-feature-annually">