@hulkapps/app-manager-vue 3.1.7 → 3.1.9

package/package.json

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

@@ -53,7 +53,8 @@
           </strong>
         </SelectButton>
       </div>
-      <ToggleButton
+      <!-- -------------------- Bundle Plan Toggle -------------------- -->
+      <!-- <ToggleButton
         id="pricing-tab"
         v-if="bundle_plan !== null"
         :toggled="selectedPlan === 'bundle'"
@@ -65,7 +66,7 @@
           <span>{{ translateMe(Math.floor((Number(bundle_plan.discount * 100) / bundle_plan.price) / 10) * 10) }}%</span>
           <span>{{ translateMe('Off') }}</span>
         </strong>
-      </ToggleButton>
+      </ToggleButton> -->
     </div>
     <PlanShowcaseBanner
       v-if="bundle_plan"
@@ -97,6 +98,7 @@
           :plans="plans"
           :features="features"
           :currentPlan="plan"
+          :hasActiveCharge="has_active_charge"
           :shopifyPlan="shopify_plan"
           :promotionalDiscount="promotional_discount"
           :selectedInterval="selectedPlan"
@@ -109,6 +111,7 @@
           <PlanTable
             :plans="plans"
             :currentPlan="plan"
+            :hasActiveCharge="has_active_charge"
             :shopifyPlan="shopify_plan"
             :promotionalDiscount="promotional_discount"
             :selectedInterval="selectedPlan"
@@ -136,12 +139,13 @@
             :buttonText="translateMe('Get customization now')"
             style="flex-basis: 30%; flex-grow: 1;"
           /> -->
-          <BundlePlanCard
+          <!-- -------------------- Bundle Block -------------------- -->
+          <!-- <BundlePlanCard
             v-if="bundle_plan"
             :plan="bundle_plan"
             :plan_details="bundle_details"
             @plan-clicked="selectPlan"
-          />
+          /> -->
         </div>
         <CustomizationModal
           :visible="this.showCustomizationModal"
@@ -188,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 {

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) {
@@ -428,12 +449,23 @@ 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) }}
-            </VariantButton
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, false, hasActiveCharge) }}
+            </VariantButton>
+            <h6
+              class="trial_days"
+              :style="{
+                visibility:
+                  plan.trial_days > 0
+                  && selectedInterval === 'monthly'
+                    ? 'visible'
+                    : 'hidden',
+              }"
             >
+              {{plan.trial_days + translateMe("-") + translateMe("day free trial") }}
+            </h6>
             <div class="features">
               <ul>
                 <li
@@ -463,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>
@@ -535,12 +580,23 @@ 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) }}
-            </VariantButton
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, false, hasActiveCharge) }}
+            </VariantButton>
+            <h6
+              class="trial_days"
+              :style="{
+                visibility:
+                  plan.trial_days > 0
+                  && selectedInterval === 'annually'
+                    ? 'visible'
+                    : 'hidden',
+              }"
             >
+              {{plan.trial_days + translateMe("-") + translateMe("day free trial") }}
+            </h6>
             <div class="features">
               <ul>
                 <li
@@ -570,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>
@@ -665,12 +734,19 @@ export default {
   line-height: 0;
 }
 
-.card .description {
+.card .trial_days,
+.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">