@hulkapps/app-manager-vue 2.3.3 → 2.3.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 +3 -3
- package/dist/app-manager-vue.esm.js +94 -60
- package/dist/app-manager-vue.min.js +3 -3
- package/dist/app-manager-vue.ssr.js +143 -111
- 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 +13 -3
- package/src/components/Plans/AppManagerGroupPlan.vue +33 -30
- package/src/components/Plans/AppManagerPlan.vue +11 -4
- package/src/components/Plans/AppManagerSliderPlan.vue +26 -24
- package/src/components/Plans/YearlyPlanPromotion.vue +6 -1
package/package.json
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
v-for="(header, key) in mappedStaticContentHeaders" :key="key"
|
|
5
5
|
:id="`static-content-header-${key}`"
|
|
6
6
|
:status="header.status"
|
|
7
|
-
:title="header.title"
|
|
7
|
+
:title="translateMe(header.title)"
|
|
8
8
|
@dismiss="() => dismissBanner(key)"
|
|
9
9
|
v-if="date_compare(header.published_on) && (header.expired_on == null || !date_compare(header.expired_on))"
|
|
10
10
|
>
|
|
11
|
-
<span v-html="header.content"></span>
|
|
11
|
+
<span v-html="translateMe(header.content)"></span>
|
|
12
12
|
</PBanner>
|
|
13
13
|
</PLayoutSection>
|
|
14
14
|
</template>
|
|
@@ -37,6 +37,10 @@
|
|
|
37
37
|
base_url: {
|
|
38
38
|
type: String,
|
|
39
39
|
default: null
|
|
40
|
+
},
|
|
41
|
+
translations:{
|
|
42
|
+
type: Object,
|
|
43
|
+
default: {}
|
|
40
44
|
}
|
|
41
45
|
},
|
|
42
46
|
data() {
|
|
@@ -64,7 +68,10 @@
|
|
|
64
68
|
var compareDate = new Date(published_on_obj[2]+'/'+published_on_obj[0]+'/'+published_on_obj[1]);
|
|
65
69
|
var isShow = now.getTime() >= compareDate.getTime();
|
|
66
70
|
return isShow;
|
|
67
|
-
}
|
|
71
|
+
},
|
|
72
|
+
translateMe(message){
|
|
73
|
+
return this.$translations.hasOwnProperty(message)?this.$translations[message]:message;
|
|
74
|
+
},
|
|
68
75
|
},
|
|
69
76
|
async mounted() {
|
|
70
77
|
|
|
@@ -84,6 +91,9 @@
|
|
|
84
91
|
});
|
|
85
92
|
},
|
|
86
93
|
created() {
|
|
94
|
+
if(Object.keys(this.translations).length > 0){
|
|
95
|
+
Vue.prototype.$translations = this.translations;
|
|
96
|
+
};
|
|
87
97
|
if (this.base_url != null) {
|
|
88
98
|
let config = {
|
|
89
99
|
baseUrl: this.base_url
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<PSkeletonPage title="Plans"
|
|
2
|
+
<PSkeletonPage :title="translateMe('Plans')"
|
|
3
3
|
:fullWidth="false"
|
|
4
4
|
primaryAction
|
|
5
5
|
:secondaryActions="2"
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
</PLayout>
|
|
42
42
|
</PSkeletonPage>
|
|
43
43
|
<PEmptyState
|
|
44
|
-
heading="No Plans"
|
|
44
|
+
:heading="translateMe('No Plans')"
|
|
45
45
|
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
|
|
46
46
|
v-else-if="!this.planLoading && this.plans.length === 0"
|
|
47
47
|
/>
|
|
48
48
|
<PPage
|
|
49
49
|
class="app-manager-plan-page custom-title"
|
|
50
|
-
title="Plans"
|
|
50
|
+
:title="translateMe('Plans')"
|
|
51
51
|
:subtitle = "subtitleContent"
|
|
52
52
|
v-else
|
|
53
53
|
>
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
<PStackItem style="margin-top: 20px">
|
|
56
56
|
<PButtonGroup class="btn-group" segmented>
|
|
57
57
|
<PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
|
|
58
|
-
<p style="font-size: 17px; font-weight: 500" slot="default">{{('Monthly')}}</p>
|
|
58
|
+
<p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
|
|
59
59
|
</PButton>
|
|
60
60
|
|
|
61
61
|
<PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
|
|
@@ -75,30 +75,30 @@
|
|
|
75
75
|
<template slot="head">
|
|
76
76
|
<PDataTableRow v-if="selectedPlan === 'monthly'" style="box-shadow: none!important;">
|
|
77
77
|
<PDataTableCol style="opacity: 0;visibility: hidden;border: 0 !important;" class="plan-heading">
|
|
78
|
-
<b>{{('features')}}</b>
|
|
78
|
+
<b>{{translateMe('features')}}</b>
|
|
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 v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
|
|
82
|
+
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{translateMe(plan.name)}}</b>
|
|
83
83
|
<div v-if="plan.price === 0">
|
|
84
84
|
<p style="display: flex;margin-top: 10px">
|
|
85
|
-
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
85
|
+
<PHeading style="font-size: 25px;font-weight: 700;">{{ translateMe('Free') }}</PHeading>
|
|
86
86
|
</p>
|
|
87
87
|
</div>
|
|
88
88
|
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
89
89
|
<p style="display: flex;margin-top: 10px">
|
|
90
90
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
91
|
-
<b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
|
|
91
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe("mo")}}</b>
|
|
92
92
|
</p>
|
|
93
93
|
<p style="display: flex;margin-top: 7px">
|
|
94
94
|
<PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
95
|
-
<b style="margin-top: 3px;font-size: 14px">/{{("mo")}}</b>
|
|
95
|
+
<b style="margin-top: 3px;font-size: 14px">/{{translateMe("mo")}}</b>
|
|
96
96
|
</p>
|
|
97
97
|
</div>
|
|
98
98
|
<div v-else>
|
|
99
99
|
<p style="display: flex;margin-top: 10px">
|
|
100
100
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
101
|
-
<b style="margin-top: 5px;font-size: 17px">/{{("mo")}}</b>
|
|
101
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe("mo")}}</b>
|
|
102
102
|
</p>
|
|
103
103
|
</div>
|
|
104
104
|
</PDataTableCol>
|
|
@@ -106,30 +106,30 @@
|
|
|
106
106
|
</PDataTableRow>
|
|
107
107
|
<PDataTableRow v-else>
|
|
108
108
|
<PDataTableCol style="opacity: 0;visibility: hidden; border: 0 !important;" class="plan-heading">
|
|
109
|
-
<b>{{('features')}}</b>
|
|
109
|
+
<b>{{translateMe('features')}}</b>
|
|
110
110
|
</PDataTableCol>
|
|
111
111
|
<template v-for="(plan,key) in yearlyPlan">
|
|
112
112
|
<PDataTableCol :class="{'first-column': key === 0, 'plan-heading': true, 'last-column': (key+1) === yearlyPlan.length}" :style="activePlanStyle(plan)">
|
|
113
|
-
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
|
|
113
|
+
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{translateMe(plan.name)}}</b>
|
|
114
114
|
<div v-if="plan.price === 0">
|
|
115
115
|
<p style="display: flex;margin-top: 10px">
|
|
116
|
-
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
116
|
+
<PHeading style="font-size: 25px;font-weight: 700;">{{ translateMe('Free') }}</PHeading>
|
|
117
117
|
</p>
|
|
118
118
|
</div>
|
|
119
119
|
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
120
120
|
<p style="display: flex;margin-top: 10px">
|
|
121
121
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(calculateDiscountedPrice(plan)).toFixed(2)}}</PHeading>
|
|
122
|
-
<b style="margin-top: 5px;font-size: 17px">/{{("year")}}</b>
|
|
122
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe("year")}}</b>
|
|
123
123
|
</p>
|
|
124
124
|
<p style="display: flex;margin-top: 7px">
|
|
125
125
|
<PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
126
|
-
<b style="margin-top: 3px;font-size: 14px">/{{("year")}}</b>
|
|
126
|
+
<b style="margin-top: 3px;font-size: 14px">/{{translateMe("year")}}</b>
|
|
127
127
|
</p>
|
|
128
128
|
</div>
|
|
129
129
|
<div v-else>
|
|
130
130
|
<p style="display: flex;margin-top: 10px">
|
|
131
131
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
132
|
-
<b style="margin-top: 5px;font-size: 17px">/{{("year")}}</b>
|
|
132
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe("year")}}</b>
|
|
133
133
|
</p>
|
|
134
134
|
</div>
|
|
135
135
|
</PDataTableCol>
|
|
@@ -139,10 +139,10 @@
|
|
|
139
139
|
<template slot="body">
|
|
140
140
|
<template v-for="(featureGroup, groupKey) in featuresByGroup">
|
|
141
141
|
<PDataTableRow v-if="groupKey !== 'null'" class="app-manager-group-row">
|
|
142
|
-
<PDataTableCol :colspan="selectedPlan === 'monthly' ? monthlyPlan.length + 1 : yearlyPlan.length + 1" class="app-manager-group-cell">{{ (groupKey) }}</PDataTableCol>
|
|
142
|
+
<PDataTableCol :colspan="selectedPlan === 'monthly' ? monthlyPlan.length + 1 : yearlyPlan.length + 1" class="app-manager-group-cell">{{ translateMe(groupKey) }}</PDataTableCol>
|
|
143
143
|
</PDataTableRow>
|
|
144
144
|
<PDataTableRow v-for="(feature, rIndex) in featureGroup" :key="`row-${rIndex + groupKey}`">
|
|
145
|
-
<PDataTableCol :class="`feature__type__${feature.value_type} feature__class`">{{ (feature.name) }}</PDataTableCol>
|
|
145
|
+
<PDataTableCol :class="`feature__type__${feature.value_type} feature__class`">{{ translateMe(feature.name) }}</PDataTableCol>
|
|
146
146
|
<PDataTableCol :class="`feature__type__${feature.value_type}`" v-for="(plan, cIndex) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`cell-${cIndex}-row-${rIndex}`" :style="activePlanStyle(plan)">
|
|
147
147
|
<template v-if="plan.features">
|
|
148
148
|
<template v-if="feature.value_type === 'boolean'">
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
<PIcon v-else color="subdued" source="MinusMinor"/>
|
|
152
152
|
</template>
|
|
153
153
|
<template v-else>
|
|
154
|
-
<span v-if="plan.features[feature.uuid]">{{ format(plan.features[feature.uuid]) }}</span>
|
|
154
|
+
<span v-if="plan.features[feature.uuid]">{{ translateMe(format(plan.features[feature.uuid])) }}</span>
|
|
155
155
|
<PIcon v-else color="subdued" source="MinusMinor"/>
|
|
156
156
|
</template>
|
|
157
157
|
</template>
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
<PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
|
|
168
168
|
full-width
|
|
169
169
|
:pressed="isCurrentPlan(plan)">
|
|
170
|
-
{{ ('Current Plan') }}
|
|
170
|
+
{{ translateMe('Current Plan') }}
|
|
171
171
|
</PButton>
|
|
172
172
|
<PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
|
|
173
173
|
full-width
|
|
@@ -175,15 +175,15 @@
|
|
|
175
175
|
:primary="isPlanButtonColor(plan)"
|
|
176
176
|
:class="planChooseButtonClass(plan)"
|
|
177
177
|
>
|
|
178
|
-
{{ ('Choose Plan') }}
|
|
178
|
+
{{ translateMe('Choose Plan') }}
|
|
179
179
|
</PButton>
|
|
180
180
|
<PButton v-else :disabled="true"
|
|
181
181
|
full-width
|
|
182
182
|
:pressed="true">
|
|
183
|
-
{{ ('Not applicable') }}
|
|
183
|
+
{{ translateMe('Not applicable') }}
|
|
184
184
|
</PButton>
|
|
185
185
|
<PTextContainer v-if="plan.store_base_plan && shop.plan && plan.shopify_plans.includes(shop.shopify_plan) && !isCurrentPlan(plan)" class="footer-note-container">
|
|
186
|
-
<PTextStyle class="text-break" v-if="plan.store_base_plan && !plan.shopify_plans.includes(shop.shopify_plan) && !(isCurrentPlan(plan)) && !isSamePlanInOtherInterval(plan)">Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan</PTextStyle>
|
|
186
|
+
<PTextStyle class="text-break" v-if="plan.store_base_plan && !plan.shopify_plans.includes(shop.shopify_plan) && !(isCurrentPlan(plan)) && !isSamePlanInOtherInterval(plan)">{{ translateMe('Note: On account of your recent Shopify plan upgrade, you should consider upgrading your current app plan')}}</PTextStyle>
|
|
187
187
|
</PTextContainer>
|
|
188
188
|
</PDataTableCol>
|
|
189
189
|
</PDataTableRow>
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
</template>
|
|
194
194
|
<PStack v-if="onboard" class="choose-plan-btn" alignment="center" distribution="center" vertical>
|
|
195
195
|
<PStackItem fill>
|
|
196
|
-
<PButton plain @click="activePlan">{{ ('I will choose the plan later') }}</PButton>
|
|
196
|
+
<PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
|
|
197
197
|
</PStackItem>
|
|
198
198
|
</PStack>
|
|
199
199
|
<PlanBanners />
|
|
@@ -296,11 +296,11 @@
|
|
|
296
296
|
};
|
|
297
297
|
},
|
|
298
298
|
headings() {
|
|
299
|
-
let headings = [('Plans & Features')];
|
|
299
|
+
let headings = [this.translateMe('Plans & Features')];
|
|
300
300
|
this.plans.forEach(plan => {
|
|
301
301
|
|
|
302
302
|
let heading = (plan.name);
|
|
303
|
-
if (plan.price > 0) heading += ` ($${plan.price}
|
|
303
|
+
if (plan.price > 0) heading += ` ($${plan.price}/` + this.translateMe('mo') + ')';
|
|
304
304
|
headings.push(heading);
|
|
305
305
|
});
|
|
306
306
|
return headings;
|
|
@@ -325,6 +325,9 @@
|
|
|
325
325
|
},
|
|
326
326
|
},
|
|
327
327
|
methods: {
|
|
328
|
+
translateMe(message) {
|
|
329
|
+
return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
|
|
330
|
+
},
|
|
328
331
|
activePlanStyle(plan) {
|
|
329
332
|
return [plan.shopify_plans.includes(this.shop.shopify_plan) || !plan.store_base_plan ? {backgroundColor: '#f0f8f5', color: '#257f60'} : {}];
|
|
330
333
|
},
|
|
@@ -339,19 +342,19 @@
|
|
|
339
342
|
if (feature.format === 'percentage') {
|
|
340
343
|
return `${feature.value}%`
|
|
341
344
|
} else if (feature.format === 'count') {
|
|
342
|
-
return (feature.value < 0 ? (`Unlimited`) : feature.value)
|
|
345
|
+
return (feature.value < 0 ? this.translateMe(`Unlimited`) : feature.value)
|
|
343
346
|
} else return feature.value
|
|
344
347
|
}
|
|
345
348
|
else if(feature?.value_type === 'array') {
|
|
346
349
|
let values= JSON.parse(feature.value);
|
|
347
350
|
let that = this;
|
|
348
351
|
values = values.map(function(value){
|
|
349
|
-
return that.featureValues[feature.feature_id][value];
|
|
352
|
+
return that.translateMe(that.featureValues[feature.feature_id][value]);
|
|
350
353
|
});
|
|
351
354
|
return values.join(', ')
|
|
352
355
|
}
|
|
353
356
|
else if(feature?.value_type === 'string') {
|
|
354
|
-
return feature.value.replace('"', '').replace('"', '')
|
|
357
|
+
return this.translateMe(feature.value.replace('"', '').replace('"', ''));
|
|
355
358
|
}
|
|
356
359
|
},
|
|
357
360
|
calculateDiscountedPrice(plan) {
|
|
@@ -446,7 +449,7 @@
|
|
|
446
449
|
this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
|
|
447
450
|
|
|
448
451
|
if (this.plans[0].store_base_plan) {
|
|
449
|
-
this.subtitleContent = 'App plans are based on your existing shopify plan';
|
|
452
|
+
this.subtitleContent = this.translateMe('App plans are based on your existing shopify plan');
|
|
450
453
|
}
|
|
451
454
|
|
|
452
455
|
this.plan = data.plan;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AppManagerGroupPlan
|
|
2
|
+
<AppManagerGroupPlan @handlePlanSelect="handlePlanSelect" v-if="group_plan"
|
|
3
3
|
:shop_domain="shop_domain" :host="host"></AppManagerGroupPlan>
|
|
4
4
|
<AppManagerSliderPlan @handlePlanSelect="handlePlanSelect" v-else :shop_domain="shop_domain" :host="host"></AppManagerSliderPlan>
|
|
5
5
|
</template>
|
|
@@ -28,6 +28,10 @@ export default {
|
|
|
28
28
|
host:{
|
|
29
29
|
type: String,
|
|
30
30
|
default: null
|
|
31
|
+
},
|
|
32
|
+
translations:{
|
|
33
|
+
type: Object,
|
|
34
|
+
default: {}
|
|
31
35
|
}
|
|
32
36
|
},
|
|
33
37
|
methods: {
|
|
@@ -38,12 +42,15 @@ export default {
|
|
|
38
42
|
}
|
|
39
43
|
},
|
|
40
44
|
created() {
|
|
41
|
-
if(this.
|
|
45
|
+
if(Object.keys(this.translations).length > 0){
|
|
46
|
+
Vue.prototype.$translations = this.translations;
|
|
47
|
+
};
|
|
48
|
+
if (this.base_url != null) {
|
|
42
49
|
let config = {
|
|
43
50
|
baseUrl: this.base_url
|
|
44
51
|
}
|
|
45
|
-
install(Vue,config)
|
|
46
|
-
}
|
|
52
|
+
install(Vue, config)
|
|
53
|
+
}
|
|
47
54
|
}
|
|
48
55
|
}
|
|
49
56
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<PSkeletonPage title="Plans"
|
|
2
|
+
<PSkeletonPage :title="translateMe('Plans')"
|
|
3
3
|
:fullWidth="false"
|
|
4
4
|
primaryAction
|
|
5
5
|
:secondaryActions="2"
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
</PLayout>
|
|
42
42
|
</PSkeletonPage>
|
|
43
43
|
<PEmptyState
|
|
44
|
-
|
|
44
|
+
:heading="translateMe('No Plans')"
|
|
45
45
|
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
|
|
46
46
|
v-else-if="!this.planLoading && this.plans.length === 0"
|
|
47
47
|
>
|
|
48
48
|
</PEmptyState>
|
|
49
49
|
<PPage
|
|
50
50
|
class="app-manager-plan-page-slider custom-title"
|
|
51
|
-
title="Plans"
|
|
51
|
+
:title="translateMe('Plans')"
|
|
52
52
|
:subtitle = "subtitleContent"
|
|
53
53
|
v-else
|
|
54
54
|
>
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<PStackItem style="margin-top: 20px">
|
|
58
58
|
<PButtonGroup class="btn-group" segmented>
|
|
59
59
|
<PButton v-if="monthlyPlan.length && yearlyPlan.length" :style="selectedPlan === 'monthly' ? monthlySelectedStyle : monthlyStyle " @click="selectPlan('monthly')">
|
|
60
|
-
<p style="font-size: 17px; font-weight: 500" slot="default">{{('Monthly')}}</p>
|
|
60
|
+
<p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Monthly')}}</p>
|
|
61
61
|
</PButton>
|
|
62
62
|
|
|
63
63
|
<PButton v-if="yearlyPlan.length && monthlyPlan.length" :style="selectedPlan === 'annually' ? yearlySelectedStyle : yearlyStyle " @click="selectPlan('annually')" :primary="selectedPlan === 'annually' " >
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
<li class="Polaris-ResourceList__ItemWrapper pro_title" :class="`${feature.value_type}__type__${feature.slug} feature__type__${feature.value_type} feature__class`" v-for="(feature, key) in features" :key="key">
|
|
80
80
|
<div class="Polaris-ResourceList-Item__Container">
|
|
81
81
|
<div class="Polaris-ResourceList-Item__Content">
|
|
82
|
-
<h1 class="for-price-per-month"><span>{{ feature.name }}</span></h1>
|
|
82
|
+
<h1 class="for-price-per-month"><span>{{ translateMe(feature.name) }}</span></h1>
|
|
83
83
|
</div>
|
|
84
84
|
</div>
|
|
85
85
|
</li>
|
|
@@ -91,27 +91,27 @@
|
|
|
91
91
|
<slide :id="key" :class="`slide-${key}`" v-for="(plan, key) in selectedPlan === 'monthly' ? monthlyPlan : yearlyPlan" :key="`slide-${key}`" >
|
|
92
92
|
<div class="plan__price" :style="activePlanStyle(plan)">
|
|
93
93
|
<div v-if="plan.price === 0">
|
|
94
|
-
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{(plan.name)}}</b>
|
|
94
|
+
<b v-if="plan.name !== 'Free'" style="font-size: 16px">{{translateMe(plan.name)}}</b>
|
|
95
95
|
<p style="display: flex;margin-top: 10px">
|
|
96
|
-
<PHeading style="font-size: 25px;font-weight: 700;">Free</PHeading>
|
|
96
|
+
<PHeading style="font-size: 25px;font-weight: 700;">{{translateMe('Free')}}</PHeading>
|
|
97
97
|
</p>
|
|
98
98
|
</div>
|
|
99
99
|
<div v-else-if="plan.discount && plan.discount > 0 && !isCurrentPlan(plan)" >
|
|
100
|
-
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
100
|
+
<b style="font-size: 16px">{{translateMe(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>
|
|
103
|
-
<b style="margin-top: 5px;font-size: 17px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
|
|
103
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
|
|
104
104
|
</p>
|
|
105
105
|
<p style="display: flex;margin-top: 7px">
|
|
106
106
|
<PHeading style="font-size: 18px;font-weight: 500; text-decoration:line-through;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
107
|
-
<b style="margin-top: 3px;font-size: 14px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
|
|
107
|
+
<b style="margin-top: 3px;font-size: 14px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
|
|
108
108
|
</p>
|
|
109
109
|
</div>
|
|
110
110
|
<div v-else>
|
|
111
|
-
<b style="font-size: 16px">{{(plan.name)}}</b>
|
|
111
|
+
<b style="font-size: 16px">{{translateMe(plan.name)}}</b>
|
|
112
112
|
<p style="display: flex;margin-top: 10px">
|
|
113
113
|
<PHeading style="font-size: 25px;font-weight: 700;">${{parseFloat(plan.price).toFixed(2)}}</PHeading>
|
|
114
|
-
<b style="margin-top: 5px;font-size: 17px">/{{selectedPlan === 'monthly' ? ("mo") : ("year")}}</b>
|
|
114
|
+
<b style="margin-top: 5px;font-size: 17px">/{{translateMe(selectedPlan === 'monthly' ? ("mo") : ("year"))}}</b>
|
|
115
115
|
</p>
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
<PButton v-if="isCurrentPlan(plan)" :disabled="isCurrentPlan(plan)"
|
|
139
139
|
full-width
|
|
140
140
|
:pressed="isCurrentPlan(plan)">
|
|
141
|
-
{{ ('Current Plan') }}
|
|
141
|
+
{{ translateMe('Current Plan') }}
|
|
142
142
|
</PButton>
|
|
143
143
|
<PButton v-else-if="!plan.store_base_plan || plan.shopify_plans.includes(shop.shopify_plan)"
|
|
144
144
|
full-width
|
|
@@ -146,12 +146,12 @@
|
|
|
146
146
|
:primary="isPlanButtonColor(plan)"
|
|
147
147
|
:class="planChooseButtonClass(plan)"
|
|
148
148
|
>
|
|
149
|
-
{{ ('Choose Plan') }}
|
|
149
|
+
{{ translateMe('Choose Plan') }}
|
|
150
150
|
</PButton>
|
|
151
151
|
<PButton v-else :disabled="true"
|
|
152
152
|
full-width
|
|
153
153
|
:pressed="true">
|
|
154
|
-
{{ ('Not applicable') }}
|
|
154
|
+
{{ translateMe('Not applicable') }}
|
|
155
155
|
</PButton>
|
|
156
156
|
</li>
|
|
157
157
|
</ul>
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
<!--====================================================================-->
|
|
166
166
|
<PStack v-if="onboard" class="choose-plan-btn" alignment="center" distribution="center" vertical>
|
|
167
167
|
<PStackItem fill>
|
|
168
|
-
<PButton plain @click="activePlan">{{ ('I will choose the plan later') }}</PButton>
|
|
168
|
+
<PButton plain @click="activePlan">{{ translateMe('I will choose the plan later') }}</PButton>
|
|
169
169
|
</PStackItem>
|
|
170
170
|
</PStack>
|
|
171
171
|
<PlanBanners />
|
|
@@ -268,7 +268,7 @@
|
|
|
268
268
|
};
|
|
269
269
|
},
|
|
270
270
|
headings() {
|
|
271
|
-
let headings = [('Plans & Features')];
|
|
271
|
+
let headings = [this.translateMe('Plans & Features')];
|
|
272
272
|
this.plans.forEach(plan => {
|
|
273
273
|
|
|
274
274
|
let heading = (plan.name);
|
|
@@ -297,6 +297,9 @@
|
|
|
297
297
|
}
|
|
298
298
|
},
|
|
299
299
|
methods: {
|
|
300
|
+
translateMe(message){
|
|
301
|
+
return this.$translations.hasOwnProperty(message)?this.$translations[message]:message;
|
|
302
|
+
},
|
|
300
303
|
handleNavigationClick($event) {
|
|
301
304
|
const activeSlideIds = [];
|
|
302
305
|
let activeSlides = document.getElementsByClassName('VueCarousel-slide-active')
|
|
@@ -342,19 +345,19 @@
|
|
|
342
345
|
if (feature.format === 'percentage') {
|
|
343
346
|
return `${feature.value}%`
|
|
344
347
|
} else if (feature.format === 'count') {
|
|
345
|
-
return (feature.value < 0 ? (`Unlimited`) : feature.value)
|
|
346
|
-
} else return feature.value
|
|
348
|
+
return (feature.value < 0 ? this.translateMe(`Unlimited`) : feature.value)
|
|
349
|
+
} else return this.translateMe(feature.value);
|
|
347
350
|
}
|
|
348
351
|
else if(feature?.value_type === 'array') {
|
|
349
352
|
let values= JSON.parse(feature.value);
|
|
350
353
|
let that = this;
|
|
351
354
|
values = values.map(function(value){
|
|
352
|
-
return that.featureValues[feature.feature_id][value];
|
|
355
|
+
return that.translateMe(that.featureValues[feature.feature_id][value]);
|
|
353
356
|
});
|
|
354
|
-
return values.join(', ')
|
|
357
|
+
return values.join(', ');
|
|
355
358
|
}
|
|
356
359
|
else if(feature?.value_type === 'string') {
|
|
357
|
-
return feature.value.replace('"', '').replace('"', '')
|
|
360
|
+
return this.translateMe(feature.value.replace('"', '').replace('"', ''));
|
|
358
361
|
}
|
|
359
362
|
},
|
|
360
363
|
calculateDiscountedPrice(plan) {
|
|
@@ -490,7 +493,7 @@
|
|
|
490
493
|
this.plans = this.plans?.sort((planA, planB) => parseFloat(planA.price) - parseFloat(planB.price));
|
|
491
494
|
|
|
492
495
|
if (this.plans[0].store_base_plan) {
|
|
493
|
-
this.subtitleContent = 'App plans are based on your existing shopify plan';
|
|
496
|
+
this.subtitleContent = this.translateMe('App plans are based on your existing shopify plan');
|
|
494
497
|
}
|
|
495
498
|
|
|
496
499
|
this.plan = data.plan;
|
|
@@ -531,7 +534,6 @@
|
|
|
531
534
|
}
|
|
532
535
|
},
|
|
533
536
|
async mounted() {
|
|
534
|
-
|
|
535
537
|
this.planLoading = true;
|
|
536
538
|
await this.fetchFeatures();
|
|
537
539
|
await this.fetchPlans();
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
</div>
|
|
6
6
|
</PLayoutSection>
|
|
7
7
|
<span v-else>
|
|
8
|
-
<p style="font-size: 17px; font-weight: 500" slot="default">{{('Annually')}}</p>
|
|
8
|
+
<p style="font-size: 17px; font-weight: 500" slot="default">{{translateMe('Annually')}}</p>
|
|
9
9
|
</span>
|
|
10
10
|
</template>
|
|
11
11
|
|
|
@@ -26,6 +26,11 @@
|
|
|
26
26
|
return this.staticContent['yearlyPlanPromotions'];
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
|
+
methods: {
|
|
30
|
+
translateMe(message) {
|
|
31
|
+
return this.$translations.hasOwnProperty(message) ? this.$translations[message] : message;
|
|
32
|
+
},
|
|
33
|
+
},
|
|
29
34
|
async mounted() {
|
|
30
35
|
const { data } = await axios.get(`${this.app_manager_config.baseUrl}/api/app-manager/marketing-banners`).catch(error => {
|
|
31
36
|
console.error(error)
|