@hulkapps/app-manager-vue 2.2.4 → 2.2.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.
- package/dist/app-manager-vue.esm.js +88 -13
- package/dist/app-manager-vue.min.js +4 -4
- package/dist/app-manager-vue.ssr.js +88 -16
- package/dist/hulkapps-app-manager.css +1 -1
- package/dist/hulkapps-app-manager.min.css +1 -1
- package/package.json +1 -1
- package/src/components/Plans/AppManagerGroupPlan.vue +66 -9
- package/src/components/Plans/AppManagerSliderPlan.vue +34 -4
package/package.json
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
/>
|
|
48
48
|
<PPage
|
|
49
49
|
class="app-manager-plan-page custom-title"
|
|
50
|
-
title="
|
|
50
|
+
title="Plans"
|
|
51
51
|
:subtitle = "subtitleContent"
|
|
52
52
|
v-else
|
|
53
53
|
>
|
|
@@ -79,8 +79,13 @@
|
|
|
79
79
|
</PDataTableCol>
|
|
80
80
|
<template v-for="(plan, key) in monthlyPlan" >
|
|
81
81
|
<PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === monthlyPlan.length}" :style="activePlanStyle(plan)">
|
|
82
|
-
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
83
|
-
<div v-if="plan.
|
|
82
|
+
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
|
|
83
|
+
<div v-if="plan.price === 0">
|
|
84
|
+
<p style="display: flex;margin-top: 10px">
|
|
85
|
+
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
84
89
|
<p style="display: flex;margin-top: 10px">
|
|
85
90
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
86
91
|
<b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
|
|
@@ -105,8 +110,13 @@
|
|
|
105
110
|
</PDataTableCol>
|
|
106
111
|
<template v-for="(plan,key) in yearlyPlan">
|
|
107
112
|
<PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === yearlyPlan.length}" :style="activePlanStyle(plan)">
|
|
108
|
-
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
109
|
-
<div v-if="plan.
|
|
113
|
+
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
|
|
114
|
+
<div v-if="plan.price === 0">
|
|
115
|
+
<p style="display: flex;margin-top: 10px">
|
|
116
|
+
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
117
|
+
</p>
|
|
118
|
+
</div>
|
|
119
|
+
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
110
120
|
<p style="display: flex;margin-top: 10px">
|
|
111
121
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
112
122
|
<b style="margin-top: 5px;font-size: 17px">/{{("year")}}</b>
|
|
@@ -153,7 +163,7 @@
|
|
|
153
163
|
</template>
|
|
154
164
|
<PDataTableRow v-if="plans.length" class="row-alignment" >
|
|
155
165
|
<PDataTableCol></PDataTableCol>
|
|
156
|
-
<PDataTableCol v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-plan`" style="max-width: 0">
|
|
166
|
+
<PDataTableCol v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-plan`" style="max-width: 0" >
|
|
157
167
|
<PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
|
|
158
168
|
full-width
|
|
159
169
|
:pressed="isCurrentPlan(plan)">
|
|
@@ -162,7 +172,9 @@
|
|
|
162
172
|
<PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
|
|
163
173
|
full-width
|
|
164
174
|
@click="plan ? getPlanUrl(plan):'javascript:void'"
|
|
165
|
-
:primary="
|
|
175
|
+
:primary="isPlanButtonColor(plan)"
|
|
176
|
+
:class="planChooseButtonClass(plan)"
|
|
177
|
+
>
|
|
166
178
|
{{ ('Choose Plan') }}
|
|
167
179
|
</PButton>
|
|
168
180
|
<PButton v-else :disabled="true"
|
|
@@ -309,10 +321,9 @@
|
|
|
309
321
|
}
|
|
310
322
|
}
|
|
311
323
|
return plans;
|
|
312
|
-
}
|
|
324
|
+
},
|
|
313
325
|
},
|
|
314
326
|
methods: {
|
|
315
|
-
|
|
316
327
|
activePlanStyle(plan) {
|
|
317
328
|
return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#f0f8f5', color: '#257f60'} : {}];
|
|
318
329
|
},
|
|
@@ -432,12 +443,41 @@
|
|
|
432
443
|
this.has_active_charge = data.has_active_charge;
|
|
433
444
|
}
|
|
434
445
|
},
|
|
446
|
+
/*cellColor(plan) {
|
|
447
|
+
let greenCell = { backgroundColor: 'rgb(240, 248, 245)',color: 'rgb(37, 127, 96)'};
|
|
448
|
+
let disableCell = { backgroundColor: '#fafbfb',color: 'rgb(37, 127, 96)'};
|
|
449
|
+
if(this.has_active_charge && this.shop.plan){
|
|
450
|
+
if((plan.id === this.shop.plan.id || (!plan.is_custom && plan.base_plan === this.shop.plan.id))){
|
|
451
|
+
return disableCell;
|
|
452
|
+
}else if(plan.price > this.shop.plan.price){
|
|
453
|
+
return greenCell;
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
return;
|
|
457
|
+
},*/
|
|
458
|
+
isPlanButtonColor(plan){
|
|
459
|
+
if(this.has_active_charge && this.shop.plan){
|
|
460
|
+
if(plan.price > this.shop.plan.price){
|
|
461
|
+
return true;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
return false;
|
|
465
|
+
},
|
|
466
|
+
planChooseButtonClass(plan){
|
|
467
|
+
if(this.has_active_charge && this.shop.plan){
|
|
468
|
+
if(plan.price > this.shop.plan.price){
|
|
469
|
+
return '';
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
return 'custom-choose-button';
|
|
473
|
+
}
|
|
435
474
|
},
|
|
436
475
|
async mounted() {
|
|
437
476
|
this.planLoading = true;
|
|
438
477
|
await this.fetchFeatures();
|
|
439
478
|
await this.fetchPlans();
|
|
440
479
|
this.planLoading = false;
|
|
480
|
+
console.log(this.shop.plan.price);
|
|
441
481
|
}
|
|
442
482
|
}
|
|
443
483
|
</script>
|
|
@@ -642,4 +682,21 @@
|
|
|
642
682
|
word-wrap:break-word !important;
|
|
643
683
|
white-space: normal !important;
|
|
644
684
|
}
|
|
685
|
+
.app-manager .app-manager-plan-page .light-green-cell{
|
|
686
|
+
background-color: rgb(240, 248, 245);
|
|
687
|
+
color: rgb(37, 127, 96);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.app-manager .app-manager-plan-page .plan-heading b{
|
|
691
|
+
overflow-wrap: break-word;
|
|
692
|
+
word-wrap: break-word;
|
|
693
|
+
white-space: initial;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.app-manager .app-manager-plan-page .custom-choose-button:hover{
|
|
697
|
+
background: #006e52;
|
|
698
|
+
border-color: transparent;
|
|
699
|
+
color: #fff;
|
|
700
|
+
}
|
|
701
|
+
|
|
645
702
|
</style>
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
</PEmptyState>
|
|
49
49
|
<PPage
|
|
50
50
|
class="app-manager-plan-page-slider custom-title"
|
|
51
|
-
title="
|
|
51
|
+
title="Plans"
|
|
52
52
|
:subtitle = "subtitleContent"
|
|
53
53
|
v-else
|
|
54
54
|
>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
97
97
|
</p>
|
|
98
98
|
</div>
|
|
99
|
-
<div v-else-if="plan.discount && plan.discount > 0" >
|
|
99
|
+
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
100
100
|
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
101
101
|
<p style="display: flex;margin-top: 10px">
|
|
102
102
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
@@ -143,7 +143,9 @@
|
|
|
143
143
|
<PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
|
|
144
144
|
full-width
|
|
145
145
|
@click="plan ? getPlanUrl(plan):'javascript:void'"
|
|
146
|
-
:primary="
|
|
146
|
+
:primary="isPlanButtonColor(plan)"
|
|
147
|
+
:class="planChooseButtonClass(plan)"
|
|
148
|
+
>
|
|
147
149
|
{{ ('Choose Plan') }}
|
|
148
150
|
</PButton>
|
|
149
151
|
<PButton v-else :disabled="true"
|
|
@@ -291,7 +293,7 @@
|
|
|
291
293
|
}
|
|
292
294
|
}
|
|
293
295
|
return plans;
|
|
294
|
-
}
|
|
296
|
+
}
|
|
295
297
|
},
|
|
296
298
|
methods: {
|
|
297
299
|
handleNavigationClick($event) {
|
|
@@ -494,6 +496,22 @@
|
|
|
494
496
|
'Polaris-DataTable__Cell--firstColumn': Boolean(firstColumn),
|
|
495
497
|
};
|
|
496
498
|
},
|
|
499
|
+
isPlanButtonColor(plan){
|
|
500
|
+
if(this.has_active_charge && this.shop.plan){
|
|
501
|
+
if(plan.price > this.shop.plan.price){
|
|
502
|
+
return true;
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
return false;
|
|
506
|
+
},
|
|
507
|
+
planChooseButtonClass(plan){
|
|
508
|
+
if(this.has_active_charge && this.shop.plan){
|
|
509
|
+
if(plan.price > this.shop.plan.price){
|
|
510
|
+
return '';
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
return 'custom-choose-button';
|
|
514
|
+
}
|
|
497
515
|
},
|
|
498
516
|
async mounted() {
|
|
499
517
|
|
|
@@ -671,4 +689,16 @@
|
|
|
671
689
|
justify-content: left;
|
|
672
690
|
}
|
|
673
691
|
|
|
692
|
+
.app-manager .app-manager-plan-page-slider .plan-heading b{
|
|
693
|
+
overflow-wrap: break-word;
|
|
694
|
+
word-wrap: break-word;
|
|
695
|
+
white-space: initial;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.app-manager .app-manager-plan-page-slider .custom-choose-button:hover{
|
|
699
|
+
background: #006e52;
|
|
700
|
+
border-color: transparent;
|
|
701
|
+
color: #fff;
|
|
702
|
+
}
|
|
703
|
+
|
|
674
704
|
</style>
|