@hulkapps/app-manager-vue 2.3.5 → 2.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +16 -6
  2. package/dist/app-manager-vue.esm.js +140 -76
  3. package/dist/app-manager-vue.min.js +3 -3
  4. package/dist/app-manager-vue.ssr.js +126 -72
  5. package/dist/hulkapps-app-manager.css +1 -1
  6. package/dist/hulkapps-app-manager.min.css +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Marketing/Banners.vue +6 -1
  9. package/src/components/Plans/AppManagerGroupPlan.vue +10 -7
  10. package/src/components/Plans/AppManagerPlan.vue +9 -4
  11. package/src/components/Plans/AppManagerSliderPlan.vue +10 -7
  12. package/src/components/Plans/PlanBanners.vue +8 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hulkapps/app-manager-vue",
3
- "version": "2.3.5",
3
+ "version": "2.3.7",
4
4
  "description": "Vue SDK to render app manager contents",
5
5
  "main": "dist/app-manager-vue.ssr.js",
6
6
  "browser": "dist/app-manager-vue.esm.js",
package/src/components/Marketing/Banners.vue CHANGED
@@ -40,7 +40,9 @@
40
40
  },
41
41
  translations:{
42
42
  type: Object,
43
- default: {}
43
+ default() {
44
+ return {'hulkapps' : 'hulkapps'}
45
+ }
44
46
  }
45
47
  },
46
48
  data() {
@@ -60,6 +62,8 @@
60
62
  },
61
63
  methods: {
62
64
  dismissBanner(key) {
65
+ this.$emit('handleBannerClose', {action:'close',type: this.banner_type});
66
+ this.$emit('handle-banner-close', {action:'close',type: this.banner_type});
63
67
  this.staticContent[this.banner_type].splice(key, 1);
64
68
  },
65
69
  date_compare(published_on){
@@ -91,6 +95,7 @@
91
95
  });
92
96
  },
93
97
  created() {
98
+ console.log(Object.keys(this.translations).length);
94
99
  Vue.prototype.$translations = (Object.keys(this.translations).length > 0)?this.translations:{};
95
100
  if (this.base_url != null) {
96
101
  let config = {
package/src/components/Plans/AppManagerGroupPlan.vue CHANGED
@@ -54,11 +54,11 @@
54
54
  <PStack slot="primaryAction">
55
55
  <PStackItem style="margin-top: 20px">
56
56
  <PButtonGroup class="btn-group" segmented>
57
- <PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
57
+ <PButton v-if="monthlyPlan.length && yearlyPlan.length" :class="selectedPlan === 'monthly' ? 'plan-active-tab' : '' " :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
58
58
  <p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
59
59
  </PButton>
60
60
 
61
- <PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
61
+ <PButton v-if="yearlyPlan.length && monthlyPlan.length" :class="selectedPlan === 'annually'? 'plan-active-tab' : '' " :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
62
62
  <YearlyPlanPromotion />
63
63
  </PButton>
64
64
  </PButtonGroup>
@@ -66,7 +66,6 @@
66
66
  </PStack>
67
67
  <hr style="width: 100%; margin-right: auto;margin-left: auto;margin-bottom: 20px;" />
68
68
  <!--=======================================================-->
69
-
70
69
  <PLayout class="custom-plan">
71
70
  <PLayoutSection>
72
71
  <template style="margin-bottom: 20px;">
@@ -196,7 +195,7 @@
196
195
  <PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
197
196
  </PStackItem>
198
197
  </PStack>
199
- <PlanBanners />
198
+ <PlanBanners @handlePlanBannerClose="handlePlanBannerClose" />
200
199
  </PLayoutSection>
201
200
  </PLayout>
202
201
  <!--====================================================================-->
@@ -269,7 +268,7 @@
269
268
  },
270
269
  monthlyStyle:{
271
270
  height: '55px',
272
- backgroundColor:'#f0f8f5',
271
+ backgroundColor:'#FFFFFF',
273
272
  boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
274
273
  border:'none',
275
274
  borderRadius:'8px',
@@ -278,7 +277,7 @@
278
277
  yearlyStyle:{
279
278
  color:'#258060',
280
279
  height: '55px',
281
- backgroundColor:'#f0f8f5',
280
+ backgroundColor:'#FFFFFF',
282
281
  boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
283
282
  border:'none',
284
283
  borderRadius:'8px'
@@ -329,7 +328,7 @@
329
328
  return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
330
329
  },
331
330
  activePlanStyle(plan) {
332
- return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#f0f8f5', color: '#257f60'} : {}];
331
+ return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#FFF', color: '#202223'} : {}];
333
332
  },
334
333
  isCurrentPlan(plan) {
335
334
  return this.has_active_charge && this.shop.plan && (plan.id === this.shop.plan.id || (!plan.is_custom && plan.base_plan === this.shop.plan.id));
@@ -491,6 +490,10 @@
491
490
  }
492
491
  }
493
492
  return 'custom-choose-button';
493
+ },
494
+ handlePlanBannerClose(payload) {
495
+ this.$emit('handlePlanBannerClose', payload)
496
+ this.$emit('handle-plan-banner-close', payload)
494
497
  }
495
498
  },
496
499
  async mounted() {
package/src/components/Plans/AppManagerPlan.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <AppManagerGroupPlan @handlePlanSelect="handlePlanSelect" v-if="group_plan"
2
+ <AppManagerGroupPlan @handlePlanSelect="handlePlanSelect" @handlePlanBannerClose="handlePlanBannerClose" v-if="group_plan"
3
3
  :shop_domain="shop_domain" :host="host"></AppManagerGroupPlan>
4
- <AppManagerSliderPlan @handlePlanSelect="handlePlanSelect" v-else :shop_domain="shop_domain" :host="host"></AppManagerSliderPlan>
4
+ <AppManagerSliderPlan @handlePlanSelect="handlePlanSelect" @handlePlanBannerClose="handlePlanBannerClose" v-else :shop_domain="shop_domain" :host="host"></AppManagerSliderPlan>
5
5
  </template>
6
6
 
7
7
  <script>
@@ -31,14 +31,19 @@ export default {
31
31
  },
32
32
  translations:{
33
33
  type: Object,
34
- default: {}
34
+ default() {
35
+ return {'hulkapps' : 'hulkapps'}
36
+ }
35
37
  }
36
38
  },
37
39
  methods: {
38
40
  handlePlanSelect(payload) {
39
41
  this.$emit('handlePlanSelect', payload)
40
42
  this.$emit('handle-plan-select', payload)
41
-
43
+ },
44
+ handlePlanBannerClose(payload) {
45
+ this.$emit('handlePlanBannerClose', payload)
46
+ this.$emit('handle-plan-banner-close', payload)
42
47
  }
43
48
  },
44
49
  created() {
package/src/components/Plans/AppManagerSliderPlan.vue CHANGED
@@ -56,11 +56,11 @@
56
56
  <PStack slot="primaryAction">
57
57
  <PStackItem style="margin-top: 20px">
58
58
  <PButtonGroup class="btn-group" segmented>
59
- <PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
59
+ <PButton v-if="monthlyPlan.length && yearlyPlan.length" :class="selectedPlan === 'monthly' ? 'plan-active-tab' : '' " :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
60
60
  <p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
61
61
  </PButton>
62
62
 
63
- <PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
63
+ <PButton v-if="yearlyPlan.length && monthlyPlan.length" :class="selectedPlan === 'annually'? 'plan-active-tab' : '' " :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
64
64
  <YearlyPlanPromotion />
65
65
  </PButton>
66
66
  </PButtonGroup>
@@ -68,7 +68,6 @@
68
68
  </PStack>
69
69
  <hr style="width: 100%; margin-right: auto;margin-left: auto;margin-bottom: 20px;" />
70
70
  <!--=======================================================-->
71
-
72
71
  <PLayout class="custom-plan">
73
72
  <PLayoutSection style="display: flex;border-radius: 20px;">
74
73
  <template style="margin-bottom: 20px; display: flex !important;">
@@ -168,7 +167,7 @@
168
167
  <PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
169
168
  </PStackItem>
170
169
  </PStack>
171
- <PlanBanners />
170
+ <PlanBanners @handlePlanBannerClose="handlePlanBannerClose" />
172
171
  </PPage>
173
172
  </template>
174
173
 
@@ -241,7 +240,7 @@
241
240
  },
242
241
  monthlyStyle:{
243
242
  height: '55px',
244
- backgroundColor:'#f0f8f5',
243
+ backgroundColor:'#FFFFFF',
245
244
  boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
246
245
  border:'none',
247
246
  borderRadius:'8px',
@@ -250,7 +249,7 @@
250
249
  yearlyStyle:{
251
250
  color:'#258060',
252
251
  height: '55px',
253
- backgroundColor:'#f0f8f5',
252
+ backgroundColor:'#FFFFFF',
254
253
  boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
255
254
  border:'none',
256
255
  borderRadius:'8px'
@@ -329,7 +328,7 @@
329
328
  }
330
329
  },
331
330
  activePlanStyle(plan) {
332
- return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#f0f8f5', color: '#257f60'} : {}];
331
+ return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#FFF', color: '#202223'} : {}];
333
332
  },
334
333
  activePlanClass(plan) {
335
334
  return plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? 'active-plan' : '';
@@ -531,6 +530,10 @@
531
530
  }
532
531
  }
533
532
  return 'custom-choose-button';
533
+ },
534
+ handlePlanBannerClose(payload) {
535
+ this.$emit('handlePlanBannerClose', payload)
536
+ this.$emit('handle-plan-banner-close', payload)
534
537
  }
535
538
  },
536
539
  async mounted() {
package/src/components/Plans/PlanBanners.vue CHANGED
@@ -37,7 +37,11 @@
37
37
  methods: {
38
38
  translateMe(message) {
39
39
  return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
40
- }
40
+ },
41
+ dismissBanner(key) {
42
+ this.$emit('handlePlanBannerClose', {action:'close',type: 'plan banners'})
43
+ this.staticContent['plans'].splice(key, 1);
44
+ },
41
45
  },
42
46
  async mounted() {
43
47
 
@@ -60,5 +64,7 @@
60
64
  </script>
61
65
 
62
66
  <style scoped>
63
-
67
+ .app-manager-plan-footer.Polaris-Layout__Section{
68
+ margin-bottom: 20px;
69
+ }
64
70
  </style>