@hulkapps/app-manager-vue 2.5.2 → 2.5.4

package/package.json

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

@@ -56,7 +56,7 @@
 
         <PStack slot="primaryAction">
             <PStackItem style="margin-top: 20px">
-                <PButtonGroup class="btn-group" segmented>
+                <!-- <PButtonGroup class="btn-group" segmented> -->
                     <!-- <PButton v-if="monthlyPlan.length && yearlyPlan.length" :class="selectedPlan === 'monthly' ? 'plan-active-tab' : '' " :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle "  @click="selectPlan('monthly')">
                         <p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
                     </PButton>
@@ -64,16 +64,18 @@
                     <PButton v-if="yearlyPlan.length && monthlyPlan.length" :class="selectedPlan === 'annually'? 'plan-active-tab' : '' " :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
                         <YearlyPlanPromotion />
                     </PButton> -->
-                    <VariantButton v-if="!isCurrentPlanId(bundle_plan)" :variant="selectedPlan === 'annually' ? 'primary' : 'secondary'" @click="selectPlan('annually')" :additionalText="'20% off'">
-                        {{ translateMe('Annually') }}
-                    </VariantButton>
+                <div class="button-group-new">    
                     <VariantButton :variant="selectedPlan === 'monthly' ? 'primary' : 'secondary'" @click="selectPlan('monthly')" :additionalText="'1 App'">
                         {{ translateMe('Monthly') }}
                     </VariantButton>
+                    <VariantButton v-if="valid_annual_plans.length > 0" :variant="selectedPlan === 'annually' ? 'primary' : 'secondary'" @click="selectPlan('annually')">
+                        {{ translateMe('Annually') }}
+                    </VariantButton>
                     <VariantButton v-if="bundle_plan !== null" :variant="selectedPlan === 'bundle' ? 'primary' : 'secondary'" @click="selectPlan('bundle')" :additionalText="'24 Apps'">
                         {{ translateMe('Bundle') }}
                     </VariantButton>
-                </PButtonGroup>
+                </div>
+                <!-- </PButtonGroup> -->
             </PStackItem>
         </PStack>
         <!-- <hr style="width: 100%; margin-right: auto;margin-left: auto;margin-bottom: 20px;" /> -->
@@ -250,8 +252,8 @@
               <PlanBanners position="footer" @handlePlanBannerClose="handlePlanBannerClose" />
             </PLayoutSection>
         </PLayout>
-        <div class="bundle-plan" v-if="bundle_plan !== null">
-            <PlanShowcaseBanner :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" @plan-clicked="handlePlanClicked(bundle_plan)"/>
+        <div v-if="bundle_plan !== null" class="bundle-plan">
+            <PlanShowcaseBanner useCardStyle="true" :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" @plan-clicked="handlePlanClicked(bundle_plan)" :isCurrentPlan="isCurrentPlanId(bundle_plan)"/>
             <div class="light-divider"></div>
             <div class="bundle-category" v-for="category in bundle_details">
                 <CategoryHeading :headingData="category" />
@@ -261,7 +263,7 @@
             </div>
             <CategoryHeading :headingData="additionalBenefitsHeading" />
             <BenefitsBanner />
-            <PlanShowcaseBanner style="margin-top: 20px;" :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" :showDescription="false" @plan-clicked="handlePlanClicked(bundle_plan)"/>
+            <PlanShowcaseBanner style="margin-top: 20px;" :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" :showDescription="false" :isCurrentPlan="isCurrentPlanId(bundle_plan)" @plan-clicked="handlePlanClicked(bundle_plan)"/>
         </div>
         <!--====================================================================-->
     </PPage>
@@ -307,6 +309,7 @@
             return {
                 plan: {},
                 plans: [],
+                valid_annual_plans: [],
                 promotional_discount: [],
                 features: [],
                 featureValues: [],
@@ -418,6 +421,9 @@
             isCurrentPlan(plan) {
                 return this.has_active_charge && this.shop.plan && (plan.id === this.shop.plan.id || (!plan.is_custom && plan.base_plan === this.shop.plan.id));
             },
+            isCurrentPlanId(plan) {
+                return this.shop.plan && plan.id === this.shop.plan.id;
+            },
             isSamePlanInOtherInterval(plan) {
                 return this.shop.plan && (plan.shopify_plans === this.shop.plan.shopify_plans)
             },
@@ -564,6 +570,11 @@
                     console.error(error)
                 });
                 if (data.plans.length) {
+                    for (let i = 0; i < data.plans.length; i++) {
+                        if (data.plans[i].interval === 'ANNUAL') {
+                            this.valid_annual_plans.push(data.plans[i]);
+                        }
+                    }
                     this.plans = data.plans;
                     this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
 
@@ -847,9 +858,45 @@
     }
 
     .app-manager .app-manager-plan-page .custom-choose-button:hover{
-        background: #006e52;
-        border-color: transparent;
-        color: #fff;
+        // background: #006e52;
+        // border-color: transparent;
+        // color: #fff;
+    }
+
+    .bundle-plan {
+      display: none;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .bundle-category {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-bottom: 10px;
+    }
+
+    .bundle-category-apps {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .light-divider {
+      border-top: 1px solid #E3E3E3;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    .app-manager .Polaris-Icon--colorSuccess svg {
+      fill: black !important;
+    }
+
+    .button-group-new {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
     }
 
     @media (min-width: 0px) and (max-width: 576px) {
@@ -864,29 +911,6 @@
       }
     }
 
-    .bundle-plan {
-        display: none;
-        flex-direction: column;
-        gap: 20px;
-    }
-    
-    .bundle-category {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        margin-bottom: 10px;
-    }
-
-    .bundle-category-apps {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
 
-    .light-divider {
-        border-top: 1px solid #E3E3E3;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
 
 </style>

package/src/components/Plans/AppManagerSliderPlan.vue

@@ -57,7 +57,7 @@
 
         <PStack slot="primaryAction">
             <PStackItem style="margin-top: 20px">
-                <PButtonGroup class="btn-group" segmented>
+                <!-- <PButtonGroup class="btn-group" segmented> -->
                     <!-- <PButton v-if="monthlyPlan.length && yearlyPlan.length" :class="selectedPlan === 'monthly' ? 'plan-active-tab' : '' " :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle "  @click="selectPlan('monthly')">
                         <p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
                     </PButton>
@@ -68,16 +68,18 @@
                     <PButton :class="selectedPlan === 'bundle' ? 'plan-active-tab' : '' " :style="selectedPlan === 'bundle' ? bundleSelectedSyle : bundleStyle "  @click="selectPlan('bundle')">
                         <p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Bundle')}}</p>
                     </PButton> -->
-                    <VariantButton v-if="!isCurrentPlanId(bundle_plan)" :variant="selectedPlan === 'annually' ? 'primary' : 'secondary'" @click="selectPlan('annually')" :additionalText="'20% off'">
-                        {{ translateMe('Annually') }}
-                    </VariantButton>
+                <div class="button-group-new">
                     <VariantButton :variant="selectedPlan === 'monthly' ? 'primary' : 'secondary'" @click="selectPlan('monthly')" :additionalText="'1 App'">
                         {{ translateMe('Monthly') }}
                     </VariantButton>
+                    <VariantButton v-if="valid_annual_plans.length > 0" :variant="selectedPlan === 'annually' ? 'primary' : 'secondary'" @click="selectPlan('annually')">
+                        {{ translateMe('Annually') }}
+                    </VariantButton>
                     <VariantButton v-if="bundle_plan !== null" :variant="selectedPlan === 'bundle' ? 'primary' : 'secondary'" @click="selectPlan('bundle')" :additionalText="'24 Apps'">
                         {{ translateMe('Bundle') }}
                     </VariantButton>
-                </PButtonGroup>
+                </div>
+                <!-- </PButtonGroup> -->
             </PStackItem>
         </PStack>
         <!-- <hr style="width: 100%; margin-right: auto;margin-left: auto;margin-bottom: 20px;" /> -->
@@ -87,7 +89,7 @@
             <PLayoutSection style="display: flex;border-radius: 20px;">
                 <template style="margin-bottom: 20px; display: flex !important;">
                     <template >
-                        <div class="Polaris-ResourceList__ResourceListWrapper features" style="width: 30%">
+                        <div class="Polaris-ResourceList__ResourceListWrapper features" style="width: 20%">
                             <div class="plan__price"></div>
                             <ul class="Polaris-ResourceList">
                                 <li class="Polaris-ResourceList__ItemWrapper pro_title" :class="`${feature.value_type}__type__${feature.slug} feature__type__${feature.value_type} feature__class`" v-for="(feature, key) in features" :key="key">
@@ -100,20 +102,20 @@
                             </ul>
                         </div>
                     </template>
-                    <carousel style="width: 70%" :per-page="perPage" :mouseDrag="false" :navigation-enabled="true" :paginationEnabled="false" :navigateTo="[this.currentSlide,true]" @transition-start="handleNavigationClick($event)">
+                    <carousel style="width: 80%" :per-page="perPage" :mouseDrag="false" :navigation-enabled="true" :paginationEnabled="false" :navigateTo="[this.currentSlide,true]" @transition-start="handleNavigationClick($event)">
                         <template>
                             <slide :id="key" :class="`slide-${key}`" v-for="(plan, key) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`slide-${key}`" >
                                 <div class="plan__price" :style="activePlanStyle(plan)">
                                     <div v-if="plan.price === 0">
                                         <b v-if="plan.name !== 'Free'" style="font-size: 16px">{{translateMe(plan.name)}}</b>
                                         <p style="display: flex;margin-top: 10px">
-                                            <PHeading style="font-size: 25px;font-weight: 700;">{{translateMe('Free')}}</PHeading>
+                                            <PHeading style="font-size: 23px;font-weight: 700;">{{translateMe('Free')}}</PHeading>
                                         </p>
                                     </div>
                                     <div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
                                         <b style="font-size: 16px">{{translateMe(plan.name)}}</b>
                                         <p style="display: flex;margin-top: 10px">
-                                            <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
+                                            <PHeading style="font-size: 23px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
                                             <b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
                                         </p>
                                         <p style="display: flex;margin-top: 7px">
@@ -124,7 +126,7 @@
                                   <div v-else-if="promotional_discount && promotional_discount.length !== 0 && !promotional_discount.errors && !plan.is_global && promotional_discount.plan_relation.length > 0 && promotional_discount.plan_relation.includes(plan.id)  && !isCurrentPlan(plan)" >
                                     <b style="font-size: 16px">{{translateMe(plan.name)}}</b>
                                     <p style="display: flex;margin-top: 10px">
-                                      <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculatePromotionalDiscountedPrice(plan, promotional_discount)).toFixed(2)}}</PHeading>
+                                      <PHeading style="font-size: 23px;font-weight: 700;">${{parseFloat(calculatePromotionalDiscountedPrice(plan, promotional_discount)).toFixed(2)}}</PHeading>
                                       <b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
                                     </p>
                                     <p style="display: flex;margin-top: 7px">
@@ -135,7 +137,7 @@
                                   <div v-else-if="promotional_discount && promotional_discount.length !== 0 && !promotional_discount.errors && !plan.is_global && promotional_discount.plan_relation.length === 0 && promotional_discount.value > 0 && !isCurrentPlan(plan)" >
                                     <b style="font-size: 16px">{{translateMe(plan.name)}}</b>
                                     <p style="display: flex;margin-top: 10px">
-                                      <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculatePromotionalDiscountedPrice(plan, promotional_discount)).toFixed(2)}}</PHeading>
+                                      <PHeading style="font-size: 23px;font-weight: 700;">${{parseFloat(calculatePromotionalDiscountedPrice(plan, promotional_discount)).toFixed(2)}}</PHeading>
                                       <b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
                                     </p>
                                     <p style="display: flex;margin-top: 7px">
@@ -146,7 +148,7 @@
                                     <div v-else>
                                         <b style="font-size: 16px">{{translateMe(plan.name)}}</b>
                                         <p style="display: flex;margin-top: 10px">
-                                            <PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
+                                            <PHeading style="font-size: 23px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
                                                <b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
                                         </p>
                                     </div>
@@ -201,7 +203,7 @@
             </PLayoutSection>
         </PLayout>
         <div v-if="bundle_plan !== null" class="bundle-plan">
-            <PlanShowcaseBanner :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" @plan-clicked="handlePlanClicked(bundle_plan)" :isCurrentPlan="isCurrentPlanId(bundle_plan)"/>
+            <PlanShowcaseBanner useCardStyle="true" :showcaseData="bundle_plan" :realPrice="parseFloat(calculateDiscountedPrice(bundle_plan)).toFixed(0)" :oldPrice="bundle_plan.price" @plan-clicked="handlePlanClicked(bundle_plan)" :isCurrentPlan="isCurrentPlanId(bundle_plan)"/>
             <div class="light-divider"></div>
             <div class="bundle-category" v-for="category in bundle_details">
                 <CategoryHeading :headingData="category" />
@@ -268,6 +270,7 @@
                 planLoading: false,
                 plan: {},
                 plans: [],
+                valid_annual_plans: [],
                 promotional_discount: [],
                 features: [],
                 featureValues:[],
@@ -608,6 +611,11 @@
                     console.error(error)
                 });
                 if (data.plans.length) {
+                    for (let i = 0; i < data.plans.length; i++) {
+                        if (data.plans[i].interval === 'ANNUAL') {
+                            this.valid_annual_plans.push(data.plans[i]);
+                        }
+                    }
                     this.plans = data.plans;
                     this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
 
@@ -848,9 +856,9 @@
     }
 
     .app-manager .app-manager-plan-page-slider .custom-choose-button:hover{
-        background: #006e52;
-        border-color: transparent;
-        color: #fff;
+        // background: #006e52;
+        // border-color: transparent;
+        // color: #fff;
     }
 
     .app-manager-plan-banner {
@@ -858,6 +866,42 @@
         margin-left: 30px;
     }
 
+    .bundle-plan {
+      display: none;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .bundle-category {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-bottom: 10px;
+    }
+
+    .bundle-category-apps {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .light-divider {
+      border-top: 1px solid #E3E3E3;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    .app-manager .Polaris-Icon--colorSuccess svg {
+      fill: black !important;
+    }
+
+    .button-group-new {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
     @media (min-width: 0px) and (max-width: 576px) {
       .custom-plan>.Polaris-Layout__Section>.VueCarousel>.VueCarousel-wrapper>.VueCarousel-inner {
         overflow-x: scroll;
@@ -871,7 +915,6 @@
       .app-manager .Polaris-Button {
         padding: 7px 8px !important;
       }
-
     }
 
     @media (min-width: 0px) and (max-width: 467px) {
@@ -905,29 +948,4 @@
       }
     }
 
-    .bundle-plan {
-        display: none;
-        flex-direction: column;
-        gap: 20px;
-    }
-    
-    .bundle-category {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        margin-bottom: 10px;
-    }
-
-    .bundle-category-apps {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .light-divider {
-        border-top: 1px solid #E3E3E3;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-
 </style>

package/src/components/PolarisNew/AppCard.vue

@@ -130,19 +130,6 @@ export default {
           </div>
         </div>
         <div class="lower-details">
-          <p class="app-option-type-count">
-            <svg
-              width="4"
-              height="4"
-              viewBox="0 0 4 4"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="4" height="4" rx="2" fill="black" />
-            </svg>
-            {{ appData.app_bundle_details.features.length }}
-            {{ translateMe("Option Types") }}
-          </p>
           <span
             class="featured-options"
             v-for="option in appData.app_bundle_details.features"
@@ -183,7 +170,9 @@ export default {
 .upper-details,
 .lower-details {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  row-gap: 2px;
+  column-gap: 8px;
 }
 .app-name {
   font-size: 14px;
@@ -227,10 +216,14 @@ export default {
   font-size: 13px;
   font-weight: 450;
   line-height: 20px;
+  text-wrap: nowrap;
   color: #5c5c5c;
 }
 
 @media (max-width: 767px) {
+  .featured-options {
+    text-wrap: wrap;
+  }
   .details {
     gap: 8px;
   }
@@ -243,7 +236,9 @@ export default {
   .upper-details,
   .lower-details {
     flex-direction: column;
-    gap: 8px;
+    flex-wrap: wrap;
+    row-gap: 2px;
+    column-gap: 8px;
   }
 }
 </style>

package/src/components/PolarisNew/PlanShowcaseBanner.vue

@@ -37,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    useCardStyle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     handlePlanClick() {
@@ -58,7 +63,7 @@ export default {
 
 <template>
   <div>
-    <div class="plan-showcase-banner">
+    <div :class="`plan-showcase-banner` + (useCardStyle ? ' banner-card' : '')">
       <div v-if="showDescription" class="plan-left">
         <p>
           {{ translateMe("Get 24 Shopify apps and save more than") }}
@@ -102,6 +107,15 @@ export default {
 </template>
 
 <style scoped>
+
+.banner-card {
+  display: flex;
+  padding: 16px;
+  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);
+  border-radius: 12px;
+  gap: 16px;
+}
 .plan-showcase-banner {
   display: flex;
   justify-content: space-between;

package/src/components/PolarisNew/VariantButton.vue

@@ -63,50 +63,53 @@ export default {
 </template>
 
 <style scoped>
-.button, .button:hover {
+.button {
   display: flex;
-  height: 32px !important;
+  width: fit-content !important;
+  height: 28px !important;
   align-items: center !important;
   gap: 8px !important;
-  padding: 6px 12px !important;
+  padding: 4px 12px !important;
   text-decoration: none !important;
-  font-size: 12px !important;
-  font-weight: 600 !important;
+  font-size: 13px !important;
+  font-weight: 450 !important;
+  color: rgb(74, 74, 74) !important;
 }
-.button-primary, .button-primary:hover {
-  background-color: rgb(48, 48, 48) !important;
-  background-image: linear-gradient(
-      rgba(48, 48, 48, 0) 63.53%,
-      rgba(255, 255, 255, 0.15)
-    ),
-    none !important;
-  color: white !important;
-  border-bottom-color: rgb(255, 255, 255) !important;
-  box-shadow: rgba(0, 0, 0, 0.8) 0px -1px 0px 1px inset,
-    rgb(48, 48, 48) 0px 0px 0px 1px inset,
-    rgba(255, 255, 255, 0.25) 0px 0.5px 0px 1.5px inset !important;
+.button:hover {
+  background-color: #0000000d !important;
   border-radius: 8px !important;
 }
+.button-primary {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  color: #303030 !important;
+  border-radius: 8px !important;
+}
+.button-primary:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;  
+}
 .button-secondary {
   color: black !important;
 }
 .additional-info-primary {
-  background-color: #656565 !important;
-  color: white !important;
+  background-color: rgba(0, 0, 0, 0.06) !important;
+  color: #616161 !important;
   padding: 0px 6px !important;
-  border-radius: 6px !important;
+  border-radius: 8px !important;
+  font-size: 13px !important;
   font-weight: 550 !important;
 }
 .additional-info-secondary {
-  background-color: #e3e3e3 !important;
+  background-color: rgba(0, 0, 0, 0.06) !important;
   color: #616161 !important;
   padding: 0px 6px !important;
-  border-radius: 6px !important;
+  border-radius: 8px !important;
   font-weight: 550 !important;
 }
 .disabled {
-  background-color: rgb(120, 120, 120) !important;
-  color: white !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  font-size: 13px !important;
+  font-weight: 450 !important;
+  color: rgb(74, 74, 74) !important;
   cursor: not-allowed !important;
   pointer-events: none !important;
 }