@hulkapps/app-manager-vue 3.1.3 → 3.1.5

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

@@ -226,10 +226,10 @@ export default {
       },
       breakpoints: {
         375: {
-          slidesPerView: 1,
+          slidesPerView: Math.min(this.monthlyPlans.length, 1),
         },
         640: {
-          slidesPerView: 2,
+          slidesPerView: Math.min(this.monthlyPlans.length, 2),
         },
         840: {
           slidesPerView: Math.min(this.monthlyPlans.length, 3),
@@ -262,10 +262,10 @@ export default {
       },
       breakpoints: {
         375: {
-          slidesPerView: 1,
+          slidesPerView: Math.min(this.annualPlans.length, 1),
         },
         640: {
-          slidesPerView: 2,
+          slidesPerView: Math.min(this.annualPlans.length, 2),
         },
         840: {
           slidesPerView: Math.min(this.annualPlans.length, 3),
@@ -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 {