@hulkapps/app-manager-vue 3.0.11 → 3.0.14

package/package.json

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

@@ -28,7 +28,7 @@
           <path d="M1 7L7 1L1 7Z" fill="#006FBB"/>
           <path d="M1 7L7 1" stroke="#006FBB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        {{ translateMe('Back to App pricing') }}
+        {{ translateMe('Back to app pricing') }}
       </a>
       <div class="bill-cycle-select-group__inner-left">
         <SelectButton
@@ -36,7 +36,7 @@
           :variant="selectedPlan === 'monthly' ? 'primary' : 'secondary'"
           @click="selectPlan('monthly')"
         >
-          {{ translateMe('Billed Monthly') }}
+          {{ translateMe('Billed monthly') }}
         </SelectButton>
         <SelectButton
           id="pricing-tab"
@@ -44,7 +44,7 @@
           :variant="selectedPlan === 'annually' ? 'primary' : 'secondary'"
           @click="selectPlan('annually')"
         >
-          {{ translateMe('Billed Yearly') }}
+          {{ translateMe('Billed yearly') }}
           <strong style="white-space: pre;">{{ translateMe(' 17% Off') }}</strong>
         </SelectButton>
       </div>
@@ -83,6 +83,7 @@
           :plans="plans"
           :features="features"
           :currentPlan="plan"
+          :shopifyPlan="shopify_plan"
           :promotionalDiscount="promotional_discount"
           :selectedInterval="selectedPlan"
           @plan-clicked="handlePlanClicked"
@@ -94,6 +95,7 @@
           <PlanTable
             :plans="plans"
             :currentPlan="plan"
+            :shopifyPlan="shopify_plan"
             :promotionalDiscount="promotional_discount"
             :selectedInterval="selectedPlan"
             :features="features"
@@ -119,6 +121,7 @@
             style="flex-basis: 30%; flex-grow: 1;"
           /> -->
           <BundlePlanCard
+            v-if="bundle_plan"
             :plan="bundle_plan"
             :plan_details="bundle_details"
             @plan-clicked="selectPlan"
@@ -220,7 +223,7 @@ export default {
       showPlansFeatures: false,
       showCustomizationModal: false,
       additionalBenefitsHeading:{
-        category_name: "Unlock Additional Benefits"
+        category_name: "Unlock additional benefits"
       },
     }
   },
@@ -455,7 +458,7 @@ export default {
 }
 
 .app-manager .Polaris-Page--fullWidth {
-  max-width: calc(100% - 200px) !important;
+  max-width: calc(100% - 64px) !important;
 }
 
 .app-manager .app-manager-plan-page-slider .Polaris-ResourceList__ResourceListWrapper.features li,
@@ -554,14 +557,14 @@ export default {
   align-items: center;
   justify-content: space-between;
   gap: 4px;
-  max-width: 998px;
+  max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 0px 32px;
+  padding: 0 96px;
 }
 
 .bill-cycle-select-group.full-width {
-  max-width: calc(100% - 200px);
+  max-width: calc(100% - 64px);
 }
 
 .bill-cycle-select-group__inner-left {
@@ -662,5 +665,8 @@ export default {
   .app-manager .Polaris-Button {
     padding: 7px 8px !important;
   }
+  .bill-cycle-select-group {
+    padding: 0 8px;
+  }
 }
 </style>

package/src/components/PolarisNew/AppCard.vue

@@ -152,7 +152,7 @@ export default {
       </div>
       <div class="install-app-div">
         <a :href="appData.app_shopify_store_link" class="button-link install-app-button" target="_blank">
-          {{ translateMe('Install App') }}
+          {{ translateMe('Install') }}
         </a>
       </div>
     </div>

package/src/components/PolarisNew/BundlePlanCard.vue

@@ -46,10 +46,14 @@ export default {
   <div class="block">
     <div class="bundle-header">
       <h3>{{ translateMe("Bundle") }}</h3>
-      <h2>${{ plan.price - plan.discount }}</h2>
-      <span class="mo-label">{{ translateMe("/mo") }}</span>
-      <h4>${{ plan.price }}</h4>
-      <span class="apps-count">{{ allApps.length }} {{ translateMe("Apps") }}</span>
+      <div class="bundle-price-wrapper">
+        <div style="display: flex; align-items: center; gap: 4px">
+          <h2>${{ plan.price - plan.discount }}</h2>
+          <span class="mo-label">{{ translateMe("/mo") }}</span>
+          <h4>${{ plan.price }}</h4>
+        </div>
+        <span class="apps-count">{{ allApps.length }} {{ translateMe("Apps") }}</span>
+      </div>
     </div>
     <div class="apps-list">
       <div v-for="(app, index) in allApps" :key="app.id + '_' + index" class="app">
@@ -68,7 +72,7 @@ export default {
       </div>
     </div>
     <VariantButton @click="handlePlanClick('bundle')" variant="primary" class="button">{{
-      translateMe("Start Saving Now")
+      translateMe("Start saving now")
     }}</VariantButton>
   </div>
 </template>
@@ -98,6 +102,13 @@ export default {
   gap: 8px;
   border-bottom: 1px solid #e3e3e3;
   padding-bottom: 12px;
+  align-items: center;
+}
+.bundle-price-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
 }
 .bundle-header h3 {
   font-size: 18px;
@@ -154,5 +165,11 @@ export default {
   .apps-list .app {
     flex-basis: 100%;
   }
+
+  .bundle-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
 }
 </style>

package/src/components/PolarisNew/PlanCardsHighlights.vue

@@ -1,7 +1,7 @@
 <script>
 import VariantButton from "./VariantButton";
 import Swiper, {Navigation, Pagination} from "swiper";
-import {calculatePlanPriceWithDiscounts, formatFeature} from "@/helpers";
+import {calculatePlanPriceWithDiscounts, isPlanButtonDisabled, formatFeature, getPlanButtonText} from "@/helpers";
 
 export default {
   name: "PlanCardsHighlights",
@@ -17,6 +17,10 @@ export default {
       type: Object,
       required: false,
     },
+    shopifyPlan: {
+      type: String,
+      required: false,
+    },
     promotionalDiscount: {
       type: Object,
       required: false,
@@ -102,6 +106,8 @@ export default {
     }
   },
   methods: {
+    getPlanButtonText,
+    isPlanButtonDisabled,
     formatFeature,
     async handlePlanClick(plan) {
       this.loadingPlanId = plan.id;
@@ -200,7 +206,7 @@ export default {
       slidesPerView: 1,
       speed: 500,
       pagination: {
-        el: ".swiper-pagination",
+        el: ".swiper-pagination-h-monthly",
         clickable: true,
       },
       navigation: {
@@ -209,15 +215,15 @@ export default {
       },
       breakpoints: {
         375: {
-          slidesPerView: 1.5,
+          slidesPerView: 1,
         },
         640: {
           slidesPerView: 2,
         },
-        768: {
+        840: {
           slidesPerView: Math.min(this.monthlyPlans.length, 3),
         },
-        1024: {
+        1152: {
           slidesPerView: Math.min(this.monthlyPlans.length, 4),
         },
       },
@@ -236,7 +242,7 @@ export default {
       slidesPerView: 1,
       speed: 500,
       pagination: {
-        el: ".swiper-pagination",
+        el: ".swiper-pagination-h-annually",
         clickable: true,
       },
       navigation: {
@@ -245,15 +251,15 @@ export default {
       },
       breakpoints: {
         375: {
-          slidesPerView: 1.5,
+          slidesPerView: 1,
         },
         640: {
           slidesPerView: 2,
         },
-        768: {
+        840: {
           slidesPerView: Math.min(this.annualPlans.length, 3),
         },
-        1024: {
+        1152: {
           slidesPerView: Math.min(this.annualPlans.length, 4),
         },
       },
@@ -367,7 +373,7 @@ export default {
           >
             <div class="most-popular" v-if="plan.choose_later_plan">
               <div class="most-popular-label">
-                {{ translateMe("Most Popular") }}
+                {{ translateMe("Most popular") }}
               </div>
             </div>
             <h3 class="title">
@@ -394,25 +400,23 @@ export default {
               </span>
               </h2>
             </div>
-            <h6 class="description">
-              {{
-                plan.description ? translateMe(plan.description) : translateMe(placeholder.description)
-              }}
+            <h6
+              class="description"
+              :style="{
+                visibility:
+                  plan.description
+                    ? 'visible'
+                    : 'hidden',
+              }"
+            >
+              {{ plan.description ? translateMe(plan.description) : translateMe(placeholder.description) }}
             </h6>
             <VariantButton
                 :variant="'secondary'"
-                :disabled="currentPlan && currentPlan.id === plan.id"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
-            >{{
-                currentPlan && currentPlan.id === plan.id
-                    ? translateMe("Selected Plan")
-                    : (
-                      currentPlan && plan.price > currentPlan.price
-                      ? translateMe("Upgrade")
-                      : translateMe("Choose Plan")
-                    )
-              }}
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan) }}
             </VariantButton
             >
             <div class="features">
@@ -448,7 +452,16 @@ export default {
         </div>
       </div>
     </div>
-    <div ref="swiperAnnually" class="swiper cards annually">
+    <div
+      class="swiper-pagination swiper-pagination-h-monthly"
+      :style="{
+        display:
+          selectedInterval === 'annually'
+            ? 'none'
+            : 'block',
+      }"
+    ></div>
+    <div ref="swiperAnnually" class="swiper cards annually plans-h-cards">
       <div class="swiper-wrapper">
         <div
           v-for="(plan, index) in annualPlans"
@@ -466,7 +479,7 @@ export default {
           >
             <div class="most-popular" v-if="plan.choose_later_plan">
               <div class="most-popular-label">
-                {{ translateMe("Most Popular") }}
+                {{ translateMe("Most popular") }}
               </div>
             </div>
             <h3 class="title">
@@ -493,25 +506,23 @@ export default {
               </span>
               </h2>
             </div>
-            <h6 class="description">
-              {{
-                plan.description ? translateMe(plan.description) : translateMe(placeholder.description)
-              }}
+            <h6
+              class="description"
+              :style="{
+                visibility:
+                  plan.description
+                    ? 'visible'
+                    : 'hidden',
+              }"
+            >
+              {{ plan.description ? translateMe(plan.description) : translateMe(placeholder.description) }}
             </h6>
             <VariantButton
                 :variant="'secondary'"
-                :disabled="currentPlan && currentPlan.id === plan.id"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
-            >{{
-                currentPlan && currentPlan.id === plan.id
-                    ? translateMe("Selected Plan")
-                    : (
-                      currentPlan && plan.price > currentPlan.price
-                      ? translateMe("Upgrade")
-                      : translateMe("Choose Plan")
-                    )
-              }}
+            >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan) }}
             </VariantButton
             >
             <div class="features">
@@ -548,11 +559,10 @@ export default {
       </div>
     </div>
     <div
-      class="swiper-pagination"
+      class="swiper-pagination-h-annually swiper-pagination"
       :style="{
         display:
-          (interval === 'ANNUAL' && annualPlans.length <= 4) ||
-          (interval === 'EVERY_30_DAYS' && monthlyPlans.length <= 4)
+          selectedInterval === 'monthly'
             ? 'none'
             : 'block',
       }"
@@ -695,7 +705,7 @@ export default {
 .most-popular .most-popular-label {
   background-color: #91d0ff;
   color: #00527c;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   width: 100%;
   text-align: center;

package/src/components/PolarisNew/PlanShowcaseBanner.vue

@@ -81,7 +81,7 @@ export default {
     >
       <div v-if="showDescription" class="plan-left">
         <p class="bundle-offer-label">
-          {{ translateMe("Bundle Offer") }}
+          {{ translateMe("Bundle offer") }}
         </p>
         <p class="bundle-desc-label">
           {{ translateMe("Get") }}
@@ -93,7 +93,7 @@ export default {
       </div>
       <div class="plan-right">
         <div class="plan-content">
-          <h3 class="plan-name">{{ translateMe("Monthly Bundle:") }}</h3>
+          <h3 class="plan-name">{{ translateMe("Monthly bundle:") }}</h3>
           <div class="prices">
             <span class="discounted-amount">${{ translateMe(realPrice) }}</span>
             <span class="original-amount" v-if="realPrice < oldPrice"
@@ -127,7 +127,7 @@ export default {
 <style scoped>
 .banner-card {
   display: flex;
-  padding: 16px;
+  padding: 16px 0;
   background-color: white;
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   gap: 16px;
@@ -146,16 +146,15 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 998px;
+  max-width: 1200px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding: 0px 32px;
+  padding: 0 96px;
 }
 
 .banner__inner.full-width {
-  max-width: calc(100% - 200px);
-  padding: 0 16px;
+  max-width: calc(100% - 64px);
 }
 
 .plan-name {
@@ -177,6 +176,7 @@ export default {
 .prices {
   display: flex;
   gap: 8px;
+  align-items: center;
 }
 
 .bundle-offer-label {
@@ -241,7 +241,6 @@ export default {
     flex-direction: column;
     gap: 32px;
     align-items: flex-start;
-    padding: 0;
   }
 
   .plan-right {
@@ -251,6 +250,9 @@ export default {
 }
 
 @media (max-width: 767px) {
+  .banner__inner {
+    padding: 16px;
+  }
   .banner__inner.full-width {
     max-width: 100%;
   }

package/src/components/PolarisNew/PlanTable.vue

@@ -1,7 +1,7 @@
 <script>
 import Swiper, { Navigation, Pagination } from "swiper";
 import VariantButton from "./VariantButton";
-import {calculatePlanPriceWithDiscounts, formatFeature} from "@/helpers";
+import {calculatePlanPriceWithDiscounts, formatFeature, getPlanButtonText, isPlanButtonDisabled} from "@/helpers";
 
 export default {
   data() {
@@ -33,6 +33,10 @@ export default {
       type: Object,
       required: false,
     },
+    shopifyPlan: {
+      type: String,
+      required: false,
+    },
     selectedInterval: {
       type: String,
       required: false,
@@ -48,6 +52,8 @@ export default {
     }
   },
   methods: {
+    isPlanButtonDisabled,
+    getPlanButtonText,
     formatFeature,
     async handlePlanClick(plan) {
       this.loadingPlanId = plan.id;
@@ -347,7 +353,7 @@ export default {
         0: {
           slidesPerView: 1.2,
         },
-        768: {
+        640: {
           slidesPerView: 2,
         },
         1024: {
@@ -378,7 +384,7 @@ export default {
         0: {
           slidesPerView: 1.2,
         },
-        768: {
+        640: {
           slidesPerView: 2,
         },
         1024: {
@@ -530,23 +536,11 @@ export default {
               </div>
               <VariantButton
                 :variant="'secondary'"
-                :disabled="currentPlan && currentPlan.id === plan.id"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
                 class="button"
-              >{{
-                currentPlan && currentPlan.id === plan.id
-                  ? translateMe("Selected Plan")
-                  : (
-                    !currentPlan
-                    ? translateMe("Choose Plan")
-                    : (
-                      plan.price > currentPlan.price 
-                      ? translateMe("Upgrade") 
-                      : translateMe("Switch to this plan")
-                    )
-                  )
-              }}</VariantButton>
+              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true) }}</VariantButton>
             </div>
             <template v-for="group in monthlyPlansFeatures">
               <div v-if="group.name" class="feature-group-header plan-feature plan-feature-monthly">
@@ -647,23 +641,11 @@ export default {
               </div>
               <VariantButton
                 :variant="'secondary'"
-                :disabled="currentPlan && currentPlan.id === plan.id"
+                :disabled="isPlanButtonDisabled(shopifyPlan, plan, currentPlan)"
                 :loading="loadingPlanId === plan.id"
                 @click="handlePlanClick(plan)"
                 class="button"
-              >{{
-                currentPlan && currentPlan.id === plan.id
-                  ? translateMe("Selected Plan")
-                  : (
-                    !currentPlan
-                    ? translateMe("Choose Plan")
-                    : (
-                      plan.price > currentPlan.price 
-                      ? translateMe("Upgrade") 
-                      : translateMe("Switch to this plan")
-                    )
-                  )
-              }}</VariantButton>
+              >{{ getPlanButtonText(shopifyPlan, plan, translateMe, currentPlan, true) }}</VariantButton>
             </div>
             <template v-for="group in annualPlansFeatures">
               <div v-if="group.name" class="feature-group-header plan-feature plan-feature-annually">
@@ -805,6 +787,9 @@ export default {
   padding: 12px;
   border-bottom: 1px solid #e3e3e3;
   border-left: 1px solid #e3e3e3;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 .plan-table-checkmark {
   width: 20px;
@@ -986,4 +971,10 @@ export default {
     width: calc(100% + -2px);
   }
 }
+
+@media (max-width: 540px) {
+  .plan-header-wrapper .price-wrapper .main-price {
+    flex-direction: column;
+  }
+}
 </style>

package/src/components/PolarisNew/VariantButton.vue

@@ -131,6 +131,7 @@ export default {
 
 .button-primary:hover {
   background-color: #1a1a1a !important;
+  color: #ffffff !important;
 }
 
 .button-primary:active,