@hulkapps/app-manager-vue 2.0.1 → 2.0.4
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/README.md +14 -0
- package/dist/app-manager-vue.esm.js +98 -11
- package/dist/app-manager-vue.min.js +3 -3
- package/dist/app-manager-vue.ssr.js +101 -15
- 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/Marketing/Banners.vue +1 -0
- package/src/components/Plans/AppManagerPlan.vue +45 -10
- package/src/components/Plans/YearlyPlanPromotion.vue +3 -0
package/package.json
CHANGED
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
<PStack slot="primaryAction">
|
|
9
9
|
<PStackItem style="margin-top: 20px">
|
|
10
10
|
<PButtonGroup class="btn-group" segmented>
|
|
11
|
-
<PButton v-if="monthlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
|
|
11
|
+
<PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
|
|
12
12
|
<p style="font-size: 17px; font-weight: 500" slot="default">{{('Monthly')}}</p>
|
|
13
13
|
</PButton>
|
|
14
14
|
|
|
15
|
-
<PButton v-if="yearlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
|
|
15
|
+
<PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
|
|
16
16
|
<YearlyPlanPromotion />
|
|
17
17
|
</PButton>
|
|
18
18
|
</PButtonGroup>
|
|
@@ -34,10 +34,22 @@
|
|
|
34
34
|
<template v-for="(plan, key) in monthlyPlan" >
|
|
35
35
|
<PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === monthlyPlan.length}" :style="activePlanStyle(plan)">
|
|
36
36
|
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
<div v-if="plan.discount && plan.discount > 0" >
|
|
38
|
+
<p style="display: flex;margin-top: 10px">
|
|
39
|
+
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
40
|
+
<b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
|
|
41
|
+
</p>
|
|
42
|
+
<p style="display: flex;margin-top: 7px">
|
|
43
|
+
<PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
44
|
+
<b style="margin-top: 3px;font-size: 14px">/{{("mo")}}</b>
|
|
45
|
+
</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div v-else>
|
|
48
|
+
<p style="display: flex;margin-top: 10px">
|
|
49
|
+
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
50
|
+
<b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
|
|
51
|
+
</p>
|
|
52
|
+
</div>
|
|
41
53
|
</PDataTableCol>
|
|
42
54
|
</template>
|
|
43
55
|
</PDataTableRow>
|
|
@@ -48,10 +60,22 @@
|
|
|
48
60
|
<template v-for="(plan,key) in yearlyPlan">
|
|
49
61
|
<PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === yearlyPlan.length}" :style="activePlanStyle(plan)">
|
|
50
62
|
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
63
|
+
<div v-if="plan.discount && plan.discount > 0" >
|
|
64
|
+
<p style="display: flex;margin-top: 10px">
|
|
65
|
+
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
66
|
+
<b style="margin-top: 5px;font-size: 17px">/{{("year")}}</b>
|
|
67
|
+
</p>
|
|
68
|
+
<p style="display: flex;margin-top: 7px">
|
|
69
|
+
<PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
70
|
+
<b style="margin-top: 3px;font-size: 14px">/{{("year")}}</b>
|
|
71
|
+
</p>
|
|
72
|
+
</div>
|
|
73
|
+
<div v-else>
|
|
74
|
+
<p style="display: flex;margin-top: 10px">
|
|
75
|
+
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
76
|
+
<b style="margin-top: 5px;font-size: 17px">/{{("year")}}</b>
|
|
77
|
+
</p>
|
|
78
|
+
</div>
|
|
55
79
|
</PDataTableCol>
|
|
56
80
|
</template>
|
|
57
81
|
</PDataTableRow>
|
|
@@ -251,6 +275,14 @@
|
|
|
251
275
|
return feature.value
|
|
252
276
|
}
|
|
253
277
|
},
|
|
278
|
+
calculateDiscountedPrice(plan) {
|
|
279
|
+
if (plan.discount_type === 'percentage') {
|
|
280
|
+
return plan.price - (plan.price * plan.discount)/100
|
|
281
|
+
}
|
|
282
|
+
else if (plan.discount_type === 'amount') {
|
|
283
|
+
return plan.price - plan.discount
|
|
284
|
+
}
|
|
285
|
+
},
|
|
254
286
|
async getPlanUrl(plan) {
|
|
255
287
|
let shopName = this.shop.name;
|
|
256
288
|
const response = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/plan/process/${plan.id}?shop=${shopName}`).catch(error => {
|
|
@@ -307,6 +339,9 @@
|
|
|
307
339
|
}
|
|
308
340
|
this.shopify_plan = plansData.data.shopify_plan;
|
|
309
341
|
this.plan = plansData.data.plan;
|
|
342
|
+
if (this.plan?.interval === 'ANNUAL') {
|
|
343
|
+
this.selectedPlan = 'annually'
|
|
344
|
+
}
|
|
310
345
|
this.default_plan_id = plansData.data.default_plan_id;
|
|
311
346
|
this.onboard = !this.plan
|
|
312
347
|
}
|