@hulkapps/app-manager-vue 3.1.2 → 3.1.4

package/src/components/PolarisNew/GetCustomBlock.vue

@@ -40,19 +40,19 @@ export default {
 <template>
   <div class="block">
     <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M49.6768 9.31236V2.68228C49.6768 2.02914 49.146 1.5 48.4918 1.5H34.5281C33.8735 1.5 33.3431 2.02914 33.3431 2.68228V9.31236C33.3431 9.83518 32.9983 10.2952 32.4964 10.4449C30.426 11.0617 28.4454 11.8862 26.5784 12.8936C26.1188 13.1415 25.5508 13.0558 25.1816 12.6874L20.481 7.9978C20.0183 7.53618 19.2678 7.53618 18.8051 7.9978L8.93175 17.8481C8.46905 18.3098 8.46905 19.0585 8.93175 19.5201L13.6323 24.2097C14.0016 24.5781 14.0875 25.1452 13.8389 25.6032C12.8292 27.4659 12.0028 29.4423 11.3846 31.5075C11.2345 32.0086 10.7734 32.3522 10.2494 32.3522H3.60301C2.94835 32.3522 2.41797 32.8813 2.41797 33.5345V47.4655C2.41797 48.1187 2.94835 48.6478 3.60301 48.6478H10.2486C10.7726 48.6478 11.2338 48.9918 11.3838 49.4925C12.002 51.5581 12.8285 53.5341 13.8382 55.3968C14.0867 55.8552 14.0008 56.4219 13.6315 56.7903L8.93095 61.4799C8.46826 61.9415 8.46826 62.6902 8.93095 63.1519L18.8043 73.0022C19.267 73.4638 20.0175 73.4638 20.4802 73.0022L25.1808 68.3126C25.5501 67.9441 26.1184 67.8585 26.5776 68.1064C28.4446 69.1138 30.4256 69.9383 32.4957 70.5551C32.9979 70.7048 33.3423 71.1648 33.3423 71.6876V78.3177C33.3423 78.9709 33.8727 79.5 34.5273 79.5H48.491C49.1456 79.5 49.676 78.9705 49.676 78.3177V71.6876" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M37.2891 64.3588V32.7" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M37.2891 23.9823V18.4764" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M49.6777 64.3588V59.3118" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M49.6777 50.1353V18.4764" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M62.0645 64.3588V41.8765" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M62.0645 33.1588V18.4764" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M74.4531 64.3588V29.947" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M74.4531 21.6882V18.4764" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M41.4188 23.9824H32.7012V32.7001H41.4188V23.9824Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M53.8055 50.1353H45.0879V59.3117H53.8055V50.1353Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M66.1942 33.1588H57.4766V41.8765H66.1942V33.1588Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M78.5829 21.6882H69.8652V29.9471H78.5829V21.6882Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M49.6768 9.31236V2.68228C49.6768 2.02914 49.146 1.5 48.4918 1.5H34.5281C33.8735 1.5 33.3431 2.02914 33.3431 2.68228V9.31236C33.3431 9.83518 32.9983 10.2952 32.4964 10.4449C30.426 11.0617 28.4454 11.8862 26.5784 12.8936C26.1188 13.1415 25.5508 13.0558 25.1816 12.6874L20.481 7.9978C20.0183 7.53618 19.2678 7.53618 18.8051 7.9978L8.93175 17.8481C8.46905 18.3098 8.46905 19.0585 8.93175 19.5201L13.6323 24.2097C14.0016 24.5781 14.0875 25.1452 13.8389 25.6032C12.8292 27.4659 12.0028 29.4423 11.3846 31.5075C11.2345 32.0086 10.7734 32.3522 10.2494 32.3522H3.60301C2.94835 32.3522 2.41797 32.8813 2.41797 33.5345V47.4655C2.41797 48.1187 2.94835 48.6478 3.60301 48.6478H10.2486C10.7726 48.6478 11.2338 48.9918 11.3838 49.4925C12.002 51.5581 12.8285 53.5341 13.8382 55.3968C14.0867 55.8552 14.0008 56.4219 13.6315 56.7903L8.93095 61.4799C8.46826 61.9415 8.46826 62.6902 8.93095 63.1519L18.8043 73.0022C19.267 73.4638 20.0175 73.4638 20.4802 73.0022L25.1808 68.3126C25.5501 67.9441 26.1184 67.8585 26.5776 68.1064C28.4446 69.1138 30.4256 69.9383 32.4957 70.5551C32.9979 70.7048 33.3423 71.1648 33.3423 71.6876V78.3177C33.3423 78.9709 33.8727 79.5 34.5273 79.5H48.491C49.1456 79.5 49.676 78.9705 49.676 78.3177V71.6876" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M37.2891 64.3588V32.7" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M37.2891 23.9823V18.4764" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M49.6777 64.3588V59.3118" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M49.6777 50.1353V18.4764" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M62.0645 64.3588V41.8765" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M62.0645 33.1588V18.4764" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M74.4531 64.3588V29.947" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M74.4531 21.6882V18.4764" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M41.4188 23.9824H32.7012V32.7001H41.4188V23.9824Z" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M53.8055 50.1353H45.0879V59.3117H53.8055V50.1353Z" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M66.1942 33.1588H57.4766V41.8765H66.1942V33.1588Z" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M78.5829 21.6882H69.8652V29.9471H78.5829V21.6882Z" stroke="#1A1A1A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
     <h3>{{ title }}</h3>
     <h6>{{ description }}</h6>
@@ -83,12 +83,12 @@ export default {
 .block h3 {
     font-size: 16px;
     font-weight: 700;
-    color: black;
+    color: #1A1A1A;
 }
 .block h6 {
     font-size: 13px;
     font-weight: 400;
-    color: #00000080;
+    color: #1A1A1A80;
     max-width: 186px;
     text-align: center;
 }

package/src/components/PolarisNew/PlanCardsHighlights.vue

@@ -284,12 +284,15 @@ export default {
       },
     });
     this.syncNavigationWidth(); // Sync navigation width after mount
-
+    window.addEventListener('resize', this.syncNavigationWidth);
     // console.log('Plans:', this.plans);
     // console.log('Monthly Plans:', this.monthlyPlans);
     // console.log('Annually Plans:', this.annualPlans);
     // console.log('Features:', this.features);
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.syncNavigationWidth);
+  },
 };
 </script>
 
@@ -298,7 +301,7 @@ export default {
     <div class="swiper-plan-h-navigation nav-monthly">
       <button class="swiper-plan-h-prev-monthly">
         <span class="plans-remaining" v-if="this.remainingPlansMonthly.before > 0">
-          +{{ this.remainingPlansMonthly.before + " " + (this.remainingPlansMonthly.before === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansMonthly.before + " " + (this.remainingPlansMonthly.before === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9388)">
@@ -315,7 +318,7 @@ export default {
       </button>
       <button class="swiper-plan-h-next-monthly">
         <span class="plans-remaining" v-if="this.remainingPlansMonthly.after > 0">
-          +{{ this.remainingPlansMonthly.after + " " + (this.remainingPlansMonthly.after === 1 ? translateMe("Plan") : translateMe("Plans")) }}</span>
+          +{{ this.remainingPlansMonthly.after + " " + (this.remainingPlansMonthly.after === 1 ? translateMe("plan") : translateMe("plans")) }}</span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9381)">
           <path d="M19 12H5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -333,7 +336,7 @@ export default {
     <div class="swiper-plan-h-navigation nav-annually">
       <button class="swiper-plan-h-prev-annually">
         <span class="plans-remaining" v-if="this.remainingPlansAnnually.before > 0">
-          +{{ this.remainingPlansAnnually.before + " " + (this.remainingPlansAnnually.before === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansAnnually.before + " " + (this.remainingPlansAnnually.before === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9388)">
@@ -350,7 +353,7 @@ export default {
       </button>
       <button class="swiper-plan-h-next-annually">
         <span class="plans-remaining" v-if="this.remainingPlansAnnually.after > 0">
-          +{{ this.remainingPlansAnnually.after + " " + (this.remainingPlansAnnually.after === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansAnnually.after + " " + (this.remainingPlansAnnually.after === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9381)">
@@ -398,14 +401,14 @@ export default {
             >
               <template v-if="plan.strike_price">
                 <h5 class="strike-price">
-                  <span style="text-decoration: line-through;">${{ plan.strike_price }}</span>
+                  <span style="text-decoration: line-through;">${{ Number(plan.strike_price).toFixed(2) }}</span>
                   <span v-if="plan.strike_price !== 0">
                 /{{ translateMe("mo") }}
               </span>
                 </h5>
               </template>
               <h2 class="price">
-                {{ plan.price !== 0 ? "$" + plan.price : translateMe("Free") }}
+                {{ plan.price !== 0 ? "$" + Number(plan.price).toFixed(2) : translateMe("Free") }}
                 <span v-if="plan.price !== 0">
                 /{{ translateMe("mo") }}
               </span>
@@ -449,7 +452,7 @@ export default {
                       fill-rule="evenodd"
                       clip-rule="evenodd"
                       d="M15.7803 5.96967C16.0732 6.26256 16.0732 6.73744 15.7803 7.03033L9.28033 13.5303C8.98744 13.8232 8.51256 13.8232 8.21967 13.5303L4.96967 10.2803C4.67678 9.98744 4.67678 9.51256 4.96967 9.21967C5.26256 8.92678 5.73744 8.92678 6.03033 9.21967L8.75 11.9393L14.7197 5.96967C15.0126 5.67678 15.4874 5.67678 15.7803 5.96967Z"
-                      fill="#303030"
+                      fill="#1A1A1A"
                     />
                   </svg>
 
@@ -505,14 +508,14 @@ export default {
             >
               <template v-if="plan.strike_price">
                 <h5 class="strike-price">
-                  <span style="text-decoration: line-through;">${{ plan.strike_price }}</span>
+                  <span style="text-decoration: line-through;">${{ Number(plan.strike_price).toFixed(2) }}</span>
                   <span v-if="plan.strike_price !== 0">
                 /{{ translateMe("yr") }}
               </span>
                 </h5>
               </template>
               <h2 class="price">
-                {{ plan.price !== 0 ? "$" + plan.price : translateMe("Free") }}
+                {{ plan.price !== 0 ? "$" + Number(plan.price).toFixed(2) : translateMe("Free") }}
                 <span v-if="plan.price !== 0">
                 /{{ translateMe("yr") }}
               </span>
@@ -556,7 +559,7 @@ export default {
                       fill-rule="evenodd"
                       clip-rule="evenodd"
                       d="M15.7803 5.96967C16.0732 6.26256 16.0732 6.73744 15.7803 7.03033L9.28033 13.5303C8.98744 13.8232 8.51256 13.8232 8.21967 13.5303L4.96967 10.2803C4.67678 9.98744 4.67678 9.51256 4.96967 9.21967C5.26256 8.92678 5.73744 8.92678 6.03033 9.21967L8.75 11.9393L14.7197 5.96967C15.0126 5.67678 15.4874 5.67678 15.7803 5.96967Z"
-                      fill="#303030"
+                      fill="#1A1A1A"
                     />
                   </svg>
 
@@ -633,7 +636,7 @@ export default {
 .card .title {
   font-size: 16px;
   font-weight: 700;
-  color: rgba(48, 48, 48, 1);
+  color: #1A1A1A;
 }
 
 .card .price-wrapper {
@@ -651,13 +654,13 @@ export default {
 .card .price {
   font-size: 30px;
   font-weight: 700;
-  color: rgba(48, 48, 48, 1);
+  color: #4A4A4A;
 }
 
 .card .price span {
   font-size: 13px;
   font-weight: 400;
-  color: rgba(97, 97, 97, 1);
+  color: #4A4A4A;
   margin-left: -6px;
   line-height: 0;
 }
@@ -665,7 +668,7 @@ export default {
 .card .description {
   font-size: 13px;
   font-weight: 400;
-  color: rgba(97, 97, 97, 1);
+  color: #4A4A4A;
 }
 
 .button {
@@ -700,11 +703,11 @@ export default {
 .feature span {
   font-size: 13px;
   font-weight: 400;
-  color: rgba(97, 97, 97, 1);
+  color: #4A4A4A;
 }
 
 .card .strike-price span {
-  color: rgba(97, 97, 97, 1);
+  color: #4A4A4A;
 }
 
 .most-popular {

package/src/components/PolarisNew/PlanShowcaseBanner.vue

@@ -42,15 +42,11 @@ export default {
       required: false,
       default: false,
     },
-    fullWidth: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    narrowWidth: {
-      type: Boolean,
+    width: {
+      type: String,
       required: false,
-      default: false,
+      default: 'base',
+      validator: value => ['tight', 'base', 'loose'].includes(value)
     },
     bundleApps: {
       type: Number,
@@ -81,8 +77,9 @@ export default {
     <div
       :class="[
         'banner__inner',
-        this.fullWidth ? 'full-width' : '',
-        this.narrowWidth ? 'narrow-width' : '',
+        width === 'loose' ? 'loose-width' : '',
+        width === 'tight' ? 'tight-width' : '',
+        width === 'base' ? 'base-width' : '',
       ]"
     >
       <div v-if="showDescription" class="plan-left">
@@ -93,7 +90,7 @@ export default {
           {{ translateMe("Get") }}
           {{bundleApps}}
           {{ translateMe("Shopify apps and save more than") }}
-          <strong>{{ translateMe("$1000") }}</strong>
+          <strong>{{ translateMe("$800") }}</strong>
           {{ translateMe("per month!") }}
         </p>
       </div>
@@ -123,7 +120,7 @@ export default {
           @click="handlePlanClick"
           variant="primary"
         >
-          {{ translateMe("Current Plan") }}
+          {{ translateMe("Current plan") }}
         </VariantButton>
       </div>
     </div>
@@ -152,25 +149,25 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px !important;
+  max-width: 1190px !important;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding: 0 96px;
 }
 
-.banner__inner.full-width {
-  max-width: none !important;
+.banner__inner.loose-width {
+  max-width: 1600px !important;
 }
 
-.banner__inner.narrow-width {
+.banner__inner.tight-width {
   max-width: 840px !important;
 }
 
 .plan-name {
   font-size: 14px;
   font-weight: 450;
-  color: #303030;
+  color: #1A1A1A;
 }
 
 .plan-left {
@@ -199,18 +196,18 @@ export default {
 .bundle-desc-label {
   font-size: 14px;
   font-weight: 450;
-  color: #303030;
+  color: #1A1A1A;
 }
 
 .discounted-amount {
   font-size: 30px;
   font-weight: bold;
-  color: #303030;
+  color: #1A1A1A;
 }
 
 .original-amount {
   text-decoration: line-through;
-  color: #616161;
+  color: #4A4A4A;
   font-size: 14px;
   font-weight: 650;
 }
@@ -243,7 +240,7 @@ export default {
 
 @media (max-width: 992px) {
 
-  .banner__inner.full-width {
+  .banner__inner.loose-width {
     max-width: none !important;
   }
 
@@ -263,7 +260,7 @@ export default {
   .banner__inner {
     padding: 16px;
   }
-  .banner__inner.full-width {
+  .banner__inner.loose-width {
     max-width: 100%;
   }
   .bundle-plan-showcase-banner {

package/src/components/PolarisNew/PlanTable.vue

@@ -2,6 +2,7 @@
 import Swiper, { Navigation, Pagination } from "swiper";
 import VariantButton from "./VariantButton";
 import {calculatePlanPriceWithDiscounts, formatFeature, getPlanButtonText, isPlanButtonDisabled} from "@/helpers";
+import CustomTooltip from "./CustomTooltip.vue";
 
 export default {
   data() {
@@ -23,6 +24,7 @@ export default {
   name: "PlanTable",
   components: {
     VariantButton,
+    CustomTooltip,
   },
   props: {
     plans: {
@@ -50,7 +52,13 @@ export default {
       required: false,
       default: () => []
     },
-    narrowWidth: {
+    width: {
+      type: String,
+      required: false,
+      default: 'base',
+      validator: value => ['tight', 'base', 'loose'].includes(value)
+    },
+    enableFeatureTooltip: {
       type: Boolean,
       required: false,
       default: false,
@@ -368,7 +376,7 @@ export default {
           slidesPerView: 2,
         },
         1024: {
-          slidesPerView: Math.min(this.monthlyPlans.length, this.narrowWidth ? 2: 3),
+          slidesPerView: Math.min(this.monthlyPlans.length, this.width === 'tight' ? 2 : 3),
         },
       },
       on: {
@@ -399,7 +407,7 @@ export default {
           slidesPerView: 2,
         },
         1024: {
-          slidesPerView: Math.min(this.annualPlans.length, this.narrowWidth ? 2 : 3),
+          slidesPerView: Math.min(this.annualPlans.length, this.width === 'tight' ? 2 : 3),
         },
       },
       on: {
@@ -416,8 +424,14 @@ export default {
 
     this.syncAllHeights(); // Run syncHeights once after mount
     this.syncNavigationWidth(); // Sync navigation width after mount
+    window.addEventListener('resize', this.syncNavigationWidth);
+    window.addEventListener('resize', this.syncAllHeights);
     this.setupScrollListeners();
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.syncNavigationWidth);
+    window.removeEventListener('resize', this.syncAllHeights);
+  },
 };
 </script>
 
@@ -426,7 +440,7 @@ export default {
     <div class="swiper-plan-navigation nav-monthly-table">
       <button class="swiper-plan-monthly-prev">
         <span class="plans-remaining" v-if="this.remainingPlansMonthly.before > 0">
-          +{{ this.remainingPlansMonthly.before + " " + (this.remainingPlansMonthly.before === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansMonthly.before + " " + (this.remainingPlansMonthly.before === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9388)">
@@ -443,7 +457,7 @@ export default {
       </button>
       <button class="swiper-plan-monthly-next">
         <span class="plans-remaining" v-if="this.remainingPlansMonthly.after > 0">
-          +{{ this.remainingPlansMonthly.after + " " + (this.remainingPlansMonthly.after === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansMonthly.after + " " + (this.remainingPlansMonthly.after === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9381)">
@@ -462,7 +476,7 @@ export default {
     <div class="swiper-plan-navigation nav-annually-table">
       <button class="swiper-plan-annually-prev">
         <span class="plans-remaining" v-if="this.remainingPlansAnnually.before > 0">
-          +{{ this.remainingPlansAnnually.before + " " + (this.remainingPlansAnnually.before === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansAnnually.before + " " + (this.remainingPlansAnnually.before === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9388)">
@@ -479,7 +493,7 @@ export default {
       </button>
       <button class="swiper-plan-annually-next">
         <span class="plans-remaining" v-if="this.remainingPlansAnnually.after > 0">
-          +{{ this.remainingPlansAnnually.after + " " + (this.remainingPlansAnnually.after === 1 ? translateMe("Plan") : translateMe("Plans")) }}
+          +{{ this.remainingPlansAnnually.after + " " + (this.remainingPlansAnnually.after === 1 ? translateMe("plan") : translateMe("plans")) }}
         </span>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0_859_9381)">
@@ -500,7 +514,7 @@ export default {
       <div class="pricing-table-inner__left" id="table-left">
         <div class="table-header plans-available plans-available-monthly">
           <h3>
-            {{ monthlyPlans.length }} {{ translateMe("Plans available") }}
+            {{ monthlyPlans.length }} {{ translateMe("plans available") }}
           </h3>
         </div>
         <template v-for="group in monthlyPlansFeatures">
@@ -512,7 +526,14 @@ export default {
             v-for="feature in group.features"
             :key="feature.uuid"
           >
-            {{ translateMe(feature.name) }}
+            <template v-if="enableFeatureTooltip && feature.description">
+              <CustomTooltip :text="translateMe(feature.description)">
+                <span>{{ translateMe(feature.name) }}</span>
+              </CustomTooltip>
+            </template>
+            <template v-else>
+              <span>{{ translateMe(feature.name) }}</span>
+            </template>
           </div>
         </template>
       </div>
@@ -531,16 +552,17 @@ export default {
                   anyMonthlyPlanHasDiscount ? 'has-discount' : ''
                 ]"
               >
+                <h4 class="plan-name mobile-plan-name">{{ translateMe(plan.name) }}</h4>
                 <template v-if="plan.strike_price">
                   <h5>
-                    <span class="strike-price">${{ plan.strike_price }}</span>
+                    <span class="strike-price">${{ Number(plan.strike_price).toFixed(2) }}</span>
                     <span class="plan-interval" v-if="plan.strike_price !== 0">/{{ translateMe("mo") }}</span>
                   </h5>
                 </template>
                 <div class="main-price">
-                  <h4 class="plan-name">{{ translateMe(plan.name) }}</h4>
+                  <h4 class="plan-name desktop-plan-name">{{ translateMe(plan.name) }}</h4>
                   <h4 v-if="plan.name !== 'free' && plan.name !== 'FREE'">
-                    <span class="plan-price">${{ plan.price }}</span>
+                    <span class="plan-price">${{ Number(plan.price).toFixed(2) }}</span>
                     <span class="plan-interval">/{{ translateMe("mo") }}</span>
                   </h4>
                 </div>
@@ -567,8 +589,8 @@ export default {
                     <span class="plan-table-checkmark">
                       <svg width="21" height="20" viewBox="0 0 21 20" fill="white" xmlns="http://www.w3.org/2000/svg">
                         <g clip-path="url(#clip0_859_9134)">
-                        <path d="M3.25 10C3.25 10.9849 3.44399 11.9602 3.8209 12.8701C4.19781 13.7801 4.75026 14.6069 5.4467 15.3033C6.14314 15.9997 6.96993 16.5522 7.87987 16.9291C8.78982 17.306 9.76509 17.5 10.75 17.5C11.7349 17.5 12.7102 17.306 13.6201 16.9291C14.5301 16.5522 15.3569 15.9997 16.0533 15.3033C16.7497 14.6069 17.3022 13.7801 17.6791 12.8701C18.056 11.9602 18.25 10.9849 18.25 10C18.25 9.01509 18.056 8.03982 17.6791 7.12987C17.3022 6.21993 16.7497 5.39314 16.0533 4.6967C15.3569 4.00026 14.5301 3.44781 13.6201 3.0709C12.7102 2.69399 11.7349 2.5 10.75 2.5C9.76509 2.5 8.78982 2.69399 7.87987 3.0709C6.96993 3.44781 6.14314 4.00026 5.4467 4.6967C4.75026 5.39314 4.19781 6.21993 3.8209 7.12987C3.44399 8.03982 3.25 9.01509 3.25 10Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M8.25 9.99998L9.91667 11.6666L13.25 8.33331" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M3.25 10C3.25 10.9849 3.44399 11.9602 3.8209 12.8701C4.19781 13.7801 4.75026 14.6069 5.4467 15.3033C6.14314 15.9997 6.96993 16.5522 7.87987 16.9291C8.78982 17.306 9.76509 17.5 10.75 17.5C11.7349 17.5 12.7102 17.306 13.6201 16.9291C14.5301 16.5522 15.3569 15.9997 16.0533 15.3033C16.7497 14.6069 17.3022 13.7801 17.6791 12.8701C18.056 11.9602 18.25 10.9849 18.25 10C18.25 9.01509 18.056 8.03982 17.6791 7.12987C17.3022 6.21993 16.7497 5.39314 16.0533 4.6967C15.3569 4.00026 14.5301 3.44781 13.6201 3.0709C12.7102 2.69399 11.7349 2.5 10.75 2.5C9.76509 2.5 8.78982 2.69399 7.87987 3.0709C6.96993 3.44781 6.14314 4.00026 5.4467 4.6967C4.75026 5.39314 4.19781 6.21993 3.8209 7.12987C3.44399 8.03982 3.25 9.01509 3.25 10Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M8.25 9.99998L9.91667 11.6666L13.25 8.33331" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         </g>
                         <defs>
                         <clipPath id="clip0_859_9134">
@@ -606,7 +628,7 @@ export default {
     <div class="pricing-table annually-table">
       <div class="pricing-table-inner__left" id="table-left">
         <div class="table-header plans-available plans-available-annually">
-          <h3>{{ annualPlans.length }} {{ translateMe("Plans available") }}</h3>
+          <h3>{{ annualPlans.length }} {{ translateMe("plans available") }}</h3>
         </div>
         <template v-for="group in annualPlansFeatures">
           <div v-if="group.name" class="feature-group-header plan-feature-name plan-feature-name-annually">
@@ -617,7 +639,14 @@ export default {
             v-for="feature in group.features"
             :key="feature.uuid"
           >
-            {{ translateMe(feature.name) }}
+            <template v-if="enableFeatureTooltip && feature.description">
+              <CustomTooltip :text="translateMe(feature.description)">
+                <span>{{ translateMe(feature.name) }}</span>
+              </CustomTooltip>
+            </template>
+            <template v-else>
+              <span>{{ translateMe(feature.name) }}</span>
+            </template>
           </div>
         </template>
       </div>
@@ -637,15 +666,16 @@ export default {
                 ]"
               >
                 <template v-if="plan.strike_price">
+                  <h4 class="plan-name mobile-plan-name">{{ translateMe(plan.name) }}</h4>
                   <h5>
-                    <span class="strike-price">${{ plan.strike_price }}</span>
+                    <span class="strike-price">${{ Number(plan.strike_price).toFixed(2) }}</span>
                     <span class="plan-interval" v-if="plan.strike_price !== 0">/{{ translateMe("yr") }}</span>
                   </h5>
                 </template>
                 <div class="main-price">
-                  <h4 class="plan-name">{{ translateMe(plan.name) }}</h4>
+                  <h4 class="plan-name desktop-plan-name">{{ translateMe(plan.name) }}</h4>
                   <h4 v-if="plan.name !== 'free' && plan.name !== 'FREE'">
-                    <span class="plan-price">${{ plan.price }}</span>
+                    <span class="plan-price">${{ Number(plan.price).toFixed(2) }}</span>
                     <span class="plan-interval">/{{ translateMe("yr") }}</span>
                   </h4>
                 </div>
@@ -672,8 +702,8 @@ export default {
                     <span class="plan-table-checkmark">
                       <svg width="21" height="20" viewBox="0 0 21 20" fill="white" xmlns="http://www.w3.org/2000/svg">
                         <g clip-path="url(#clip0_859_9134)">
-                        <path d="M3.25 10C3.25 10.9849 3.44399 11.9602 3.8209 12.8701C4.19781 13.7801 4.75026 14.6069 5.4467 15.3033C6.14314 15.9997 6.96993 16.5522 7.87987 16.9291C8.78982 17.306 9.76509 17.5 10.75 17.5C11.7349 17.5 12.7102 17.306 13.6201 16.9291C14.5301 16.5522 15.3569 15.9997 16.0533 15.3033C16.7497 14.6069 17.3022 13.7801 17.6791 12.8701C18.056 11.9602 18.25 10.9849 18.25 10C18.25 9.01509 18.056 8.03982 17.6791 7.12987C17.3022 6.21993 16.7497 5.39314 16.0533 4.6967C15.3569 4.00026 14.5301 3.44781 13.6201 3.0709C12.7102 2.69399 11.7349 2.5 10.75 2.5C9.76509 2.5 8.78982 2.69399 7.87987 3.0709C6.96993 3.44781 6.14314 4.00026 5.4467 4.6967C4.75026 5.39314 4.19781 6.21993 3.8209 7.12987C3.44399 8.03982 3.25 9.01509 3.25 10Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M8.25 9.99998L9.91667 11.6666L13.25 8.33331" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M3.25 10C3.25 10.9849 3.44399 11.9602 3.8209 12.8701C4.19781 13.7801 4.75026 14.6069 5.4467 15.3033C6.14314 15.9997 6.96993 16.5522 7.87987 16.9291C8.78982 17.306 9.76509 17.5 10.75 17.5C11.7349 17.5 12.7102 17.306 13.6201 16.9291C14.5301 16.5522 15.3569 15.9997 16.0533 15.3033C16.7497 14.6069 17.3022 13.7801 17.6791 12.8701C18.056 11.9602 18.25 10.9849 18.25 10C18.25 9.01509 18.056 8.03982 17.6791 7.12987C17.3022 6.21993 16.7497 5.39314 16.0533 4.6967C15.3569 4.00026 14.5301 3.44781 13.6201 3.0709C12.7102 2.69399 11.7349 2.5 10.75 2.5C9.76509 2.5 8.78982 2.69399 7.87987 3.0709C6.96993 3.44781 6.14314 4.00026 5.4467 4.6967C4.75026 5.39314 4.19781 6.21993 3.8209 7.12987C3.44399 8.03982 3.25 9.01509 3.25 10Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M8.25 9.99998L9.91667 11.6666L13.25 8.33331" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         </g>
                         <defs>
                         <clipPath id="clip0_859_9134">
@@ -766,13 +796,14 @@ export default {
   border-bottom: 1px solid #e3e3e3;
   position: sticky;
   top: 0;
+  z-index: 10;
 }
 
 .table-header h3 {
   font-size: 13px;
   font-weight: 700;
   line-height: 20px;
-  color: #303030;
+  color: #1A1A1A;
 }
 
 .plan-header-wrapper {
@@ -800,7 +831,8 @@ export default {
   border-left: 1px solid #e3e3e3;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  white-space: normal;
+  word-break: normal;
+  hyphens: none;
 }
 .plan-table-checkmark {
   width: 20px;
@@ -847,18 +879,27 @@ export default {
 }
 
 .plan-header-wrapper .price-wrapper .plan-interval {
-  color: rgba(97, 97, 97, 1);
+  color: #4A4A4A;
   font-weight: normal;
 }
 
 .plan-header-wrapper .price-wrapper h4 {
-  display: inline;
+  display: inline-flex;
+  text-align: center;
   font-size: 16px;
   font-weight: 700;
-  color: #303030;
+  color: #1A1A1A;
   width: max-content;
 }
 
+.plan-header-wrapper .price-wrapper h4.plan-name {
+  width: 100%;
+}
+
+.plan-header-wrapper .price-wrapper .mobile-plan-name {
+  display: none;
+}
+
 .plan-header-wrapper .price-wrapper h4 h6 {
   display: inline;
   font-size: 13px;
@@ -957,7 +998,7 @@ export default {
   font-size: 14px;
   font-weight: 600;
   background-color: #f5f5f5;
-  color: #303030;
+  color: #1A1A1A;
   max-height: 30px;
   padding: 5px !important;
   border-bottom: 1px solid #e3e3e3;
@@ -973,6 +1014,20 @@ export default {
   border-right: 1px solid #e3e3e3;
 }
 
+@media (max-width: 1024px) {
+  .plan-header-wrapper .price-wrapper .mobile-plan-name {
+    display: inline-block;
+  }
+
+  .plan-header-wrapper .price-wrapper .desktop-plan-name {
+    display: none;
+  }
+
+  .plan-header-wrapper .price-wrapper .main-price {
+    flex-direction: column;
+  }
+}
+
 @media (max-width: 640px) {
   .swiper-plan-navigation {
     display: none !important;
@@ -982,10 +1037,4 @@ 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/SelectButton.vue

@@ -61,7 +61,7 @@ export default {
   border-radius: 40px !important;
 }
 .button-secondary {
-  color: black !important;
+  color: #1A1A1A !important;
   background-color: none;
 }
 .button-secondary:hover {
@@ -71,7 +71,7 @@ export default {
 }
 .additional-info-primary {
   background-color: rgba(0, 0, 0, 0.06) !important;
-  color: #616161 !important;
+  color: #4A4A4A !important;
   padding: 0px 6px !important;
   border-radius: 8px !important;
   font-size: 13px !important;
@@ -79,7 +79,7 @@ export default {
 }
 .additional-info-secondary {
   background-color: rgba(0, 0, 0, 0.06) !important;
-  color: #616161 !important;
+  color: #4A4A4A !important;
   padding: 0px 6px !important;
   border-radius: 8px !important;
   font-weight: 550 !important;