@hulkapps/app-manager-vue 2.4.8 → 2.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hulkapps/app-manager-vue",
-  "version": "2.4.8",
+  "version": "2.4.9",
   "description": "Vue SDK to render app manager contents",
   "main": "dist/app-manager-vue.ssr.js",
   "browser": "dist/app-manager-vue.esm.js",

package/src/components/Plans/AppManagerGroupPlan.vue

@@ -45,12 +45,15 @@
             image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
             v-if="!this.planLoading && this.plans.length === 0"
      />
+
+    <div v-else-if="!this.planLoading && this.plans.length > 0"> <PlanBanners position="header" @handlePlanBannerClose="handlePlanBannerClose" />
+
     <PPage
            class="app-manager-plan-page custom-title"
            :title="translateMe('Plans')"
            :subtitle = "subtitleContent"
-           v-else-if="!this.planLoading && this.plans.length > 0"
     >
+
         <PStack slot="primaryAction">
             <PStackItem style="margin-top: 20px">
                 <PButtonGroup class="btn-group" segmented>
@@ -211,8 +214,7 @@
                                         <PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
                                                  full-width
                                                  @click="plan ? getPlanUrl(plan):'javascript:void'"
-                                                 :primary="isPlanButtonColor(plan)"
-                                                 :class="planChooseButtonClass(plan)"
+                                                 class="custom-choose-button"
                                         >
                                             {{ translateMe('Choose Plan') }}
                                         </PButton>
@@ -235,11 +237,12 @@
                         <PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
                     </PStackItem>
                 </PStack>
-              <PlanBanners @handlePlanBannerClose="handlePlanBannerClose" />
+              <PlanBanners position="footer" @handlePlanBannerClose="handlePlanBannerClose" />
             </PLayoutSection>
         </PLayout>
         <!--====================================================================-->
     </PPage>
+    </div>
 </template>
 
 <script>
@@ -551,12 +554,12 @@
                 return false;
             },
             planChooseButtonClass(plan){
-                if(this.has_active_charge && this.shop.plan){
-                    if(plan.price > this.shop.plan.price){
-                        return '';
-                    }
+              if(this.has_active_charge && this.shop.plan){
+                if(plan.price > this.shop.plan.price){
+                  return '';
                 }
-                return 'custom-choose-button';
+              }
+              return 'custom-choose-button';
             },
             handlePlanBannerClose(payload) {
               this.$emit('handlePlanBannerClose', payload)
@@ -653,7 +656,7 @@
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) {
         overflow: hidden;
-        border-bottom-right-radius: 12px;
+        border-bottom-right-radius: 0;
         border-bottom-left-radius: 12px;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:first-child {
@@ -663,7 +666,7 @@
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:nth-last-child(2) td:last-child {
         overflow: hidden;
-        border-radius: 0 0 12px;
+        border-radius: 0 0 0;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr td:first-child {
         border-left: 0px !important;
@@ -671,13 +674,10 @@
         padding-left: 20px;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr td:last-child {
-        border-right: 0px !important;
-        border-bottom: 0px !important;
         text-align: center !important;
     }
     .app-manager .app-manager-plan-page .custom-plan table thead tr td:last-child {
-        border-right: 0px !important;
-        border-bottom: 0px !important;
+
         text-align: center !important;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody td:not(:first-child) {
@@ -687,8 +687,10 @@
         background: transparent;
         border-radius: 0 0 12px 0;
     }
+    .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:nth-child(2){
+      border-radius: 0 0 0 12px !important;
+    }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td {
-        border: 0 !important;
         background: transparent;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child td:hover {
@@ -699,11 +701,12 @@
         background: transparent !important;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child {
-        background: transparent;
+        background: #fff!important;
         opacity:1.0;
     }
     .app-manager .app-manager-plan-page .custom-plan table tbody tr:last-child  td:first-child{
         visibility: hidden;
+        border-bottom: none!important;
     }
     .app-manager .app-manager-plan-page .plan-heading {
         padding-top: 30px;
@@ -789,4 +792,18 @@
         color: #fff;
     }
 
+    @media (min-width: 0px) and (max-width: 576px) {
+      .app-manager .app-manager, .app-manager .app-manager-body {
+        overflow-x: scroll;
+      }
+    }
+
+    @media (max-width: 700px) {
+      .app-manager .Polaris-DataTable__Table{
+        width: auto !important;
+      }
+    }
+
+
+
 </style>

package/src/components/Plans/AppManagerSliderPlan.vue

@@ -46,11 +46,13 @@
             v-if="!this.planLoading && this.plans.length === 0"
     >
     </PEmptyState>
+    <div v-else-if="!this.planLoading && this.plans.length > 0" class="app-manager-plan-banner">
+      <PlanBanners position="header" @handlePlanBannerClose="handlePlanBannerClose" />
+
     <PPage
             class="app-manager-plan-page-slider custom-title"
             :title="translateMe('Plans')"
             :subtitle = "subtitleContent"
-            v-else-if="!this.planLoading && this.plans.length > 0"
     >
 
         <PStack slot="primaryAction">
@@ -138,6 +140,7 @@
                                 </div>
                                 <div>
                                     <ul>
+
                                         <li v-for="(feature, key) in features" :class="`${feature.value_type}__type__${feature.slug} feature__list feature__type__${feature.value_type}`" :key="key" :style="activePlanStyle(plan)">
                                             <div>
                                                 <template v-if="plan.features && plan.features[feature.uuid]" style="display: flex">
@@ -154,27 +157,28 @@
                                                     <PIcon color="subdued" source="MinusMinor"/>
                                                 </template>
                                             </div>
-                                        </li>
-                                        <li>
-                                            <PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
-                                                     full-width
-                                                     :pressed="isCurrentPlan(plan)">
+                                          </li>
+                                          <li v-if="features.length > 0" :class="`${features[features.length - 1].value_type}__type__${features[features.length - 1].slug} feature__list feature__type__${features[features.length - 1].value_type}`">
+                                            <div>
+                                              <PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
+                                                       full-width
+                                                       :pressed="isCurrentPlan(plan)">
                                                 {{ translateMe('Current Plan') }}
-                                            </PButton>
-                                            <PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
-                                                     full-width
-                                                     @click="plan ? getPlanUrl(plan):'javascript:void'"
-                                                     :primary="isPlanButtonColor(plan)"
-                                                     :class="planChooseButtonClass(plan)"
-                                            >
-                                                {{ translateMe('Choose Plan') }}
-                                            </PButton>
-                                            <PButton v-else :disabled="true"
-                                                     full-width
-                                                     :pressed="true">
+                                              </PButton>
+                                              <PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
+                                                       full-width
+                                                       @click="plan ? getPlanUrl(plan) : 'javascript:void'"
+                                                       class="custom-choose-button">
+                                                      {{ translateMe('Choose Plan') }}
+                                              </PButton>
+                                              <PButton v-else :disabled="true"
+                                                       full-width
+                                                       :pressed="true">
                                                 {{ translateMe('Not applicable') }}
-                                            </PButton>
-                                        </li>
+                                              </PButton>
+                                            </div>
+                                          </li>
+                                      <li></li>
                                     </ul>
                                 </div>
                             </slide>
@@ -189,8 +193,9 @@
                 <PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
             </PStackItem>
         </PStack>
-        <PlanBanners @handlePlanBannerClose="handlePlanBannerClose" />
+      <PlanBanners position="footer" @handlePlanBannerClose="handlePlanBannerClose" />
     </PPage>
+    </div>
 </template>
 
 <script>
@@ -717,6 +722,10 @@
     {
         border-bottom-right-radius: 12px;
     }
+    .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.first-slide ul li:nth-last-child(2)
+    {
+      border-bottom-left-radius: 12px;
+    }
     .app-manager .app-manager-plan-page-slider .VueCarousel-inner .VueCarousel-slide.last-slide .plan__price
     {
         border-right: 1px solid #dddddd;
@@ -770,4 +779,46 @@
         color: #fff;
     }
 
+    .app-manager-plan-banner {
+        margin-right: 30px;
+        margin-left: 30px;
+    }
+
+    @media (min-width: 0px) and (max-width: 576px) {
+      .custom-plan>.Polaris-Layout__Section>.VueCarousel>.VueCarousel-wrapper>.VueCarousel-inner {
+        overflow-x: scroll;
+      }
+    }
+
+    @media (max-width: 700px) {
+      .Polaris-ButtonGroup__Item {
+        width: auto !important;
+      }
+      .app-manager *, .app-manager :after, .app-manager :before {
+        box-sizing: revert !important;
+      }
+
+    }
+
+    @media (min-width: 0px) and (max-width: 467px) {
+
+      .pro_title , .feature__list {
+        min-height: 164px !important;
+      }
+      .app-manager .Polaris-Page-Header__RightAlign {
+        margin-left: -34px !important;
+      }
+      #app_manager > div > div.Polaris-Page-Header.Polaris-Page-Header--hasNavigation.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--mobileView > div > div.Polaris-Page-Header__RightAlign > div > div > div > div > div > div:nth-child(2) > button > span > span > div > div > div > span > span > div{
+        width: 222px !important;
+      }
+    }
+    @media (min-width: 467px) and (max-width: 1003px) {
+      #app_manager > div > div.Polaris-Page-Header.Polaris-Page-Header--hasNavigation.Polaris-Page-Header--mediumTitle.Polaris-Page-Header--mobileView > div > div.Polaris-Page-Header__RightAlign > div > div > div > div > div > div:nth-child(2) > button > span > span > div > div > div > span > span > div{
+        width: 222px !important;
+      }
+      .pro_title , .feature__list {
+        min-height: 117px !important;
+      }
+    }
+
 </style>

package/src/components/Plans/PlanBanners.vue

@@ -1,70 +1,76 @@
 <template>
     <PLayoutSection class="app-manager-plan-footer"
-                    v-if="mappedStaticContentPlan && mappedStaticContentPlan.length">
-        <div v-for="(staticContent, key) in mappedStaticContentPlan" :key="key">
-
-            <PBanner
-                    v-if="staticContent.type === 'banner'"
-                    :id="`static-content-header-${key}`"
-                    :status="staticContent.status"
-                    @dismiss="() => dismissBanner(key)"
-            >
-                <div v-html="translateMe(staticContent.content)"></div>
-            </PBanner>
-            <div v-else v-html="translateMe(staticContent.content)"></div>
-        </div>
+                    v-if="filteredPlans && filteredPlans.length">
+      <div v-for="(plan, key) in filteredPlans" :key="key">
+        <PBanner
+            v-if="plan.type === 'banner'"
+            :id="`static-content-${plan.position}-${key}`"
+            :status="plan.status"
+            @dismiss="() => dismissBanner(key)"
+        >
+          <div v-html="translateMe(plan.content)"></div>
+        </PBanner>
+        <div v-else v-html="translateMe(plan.content)"></div>
+      </div>
     </PLayoutSection>
 </template>
 
 <script>
+  import axios from 'axios'
+  import { PLayoutSection } from "../polaris-vue/src/components/PLayout/components/PLayoutSection";
+  import { PBanner } from "../polaris-vue/src/components/PBanner";
 
-    import axios from 'axios'
-    import {PLayoutSection} from "../polaris-vue/src/components/PLayout/components/PLayoutSection";
-    import {PBanner} from "../polaris-vue/src/components/PBanner";
-    export default {
-        components: { PBanner, PLayoutSection },
-        name: "PlanBanners",
-        data() {
-            return {
-                staticContent: {}
-            }
-        },
-        computed: {
-            mappedStaticContentPlan() {
-                return this.staticContent['plans'];
-            },
+  export default {
+    components: { PBanner, PLayoutSection },
+    name: "PlanBanners",
+    props: {
+      position: {
+        type: String,
+        validator(value) {
+          return ['header', 'footer'].includes(value)
         },
-        methods: {
-          translateMe(message) {
-            return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
-          },
-          dismissBanner(key) {
-            this.$emit('handlePlanBannerClose', {action:'close',type: 'plan banners'})
-            this.staticContent['plans'].splice(key, 1);
-          },
-        },
-        async mounted() {
-
-            const { data } = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/marketing-banners`).catch(error => {
-                console.error(error)
-            });
-
-            this.staticContent = data.banners
-            Object.keys(this.staticContent).map((key) => {
-                if (this.staticContent[key].length) {
-                    Object.keys(this.staticContent[key]).map((index) => {
-                        if (this.staticContent[key][index].length) {
-                            this.staticContent[key][index] = this.staticContent[key][index][Math.floor(Math.random()*this.staticContent[key][index].length)]
-                        }
-                    });
-                }
-            });
+        default: 'header'
+      },
+    },
+    data() {
+      return {
+        staticContent: {}
+      }
+    },
+    computed: {
+      filteredPlans() {
+        if (!this.staticContent || !this.staticContent.plans) {
+          return [];
+        }
+        return this.staticContent.plans
+            .flat() // Flatten the array of plans if they are nested
+            .filter(plan => plan.position === this.position);
+      },
+    },
+    methods: {
+      translateMe(message) {
+        return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
+      },
+      dismissBanner(key) {
+        this.$emit('handlePlanBannerClose', { action: 'close', type: 'plan banners' });
+        let planIndex = this.filteredPlans.findIndex((plan, index) => index === key);
+        if (planIndex !== -1) {
+          this.staticContent.plans.splice(planIndex, 1);
         }
+      },
+    },
+    async mounted() {
+      const { data } = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/marketing-banners`).catch(error => {
+        console.error(error)
+      });
+
+      this.staticContent = data.banners || {};
     }
+  }
 </script>
 
 <style scoped>
-.app-manager-plan-footer.Polaris-Layout__Section{
-  margin-bottom: 20px;
-}
-</style>
+  .app-manager-plan-footer.Polaris-Layout__Section {
+    margin-bottom: 20px;
+  }
+</style>