diff --git a/src/components/modals/ChooseTariffPlanPopup.vue b/src/components/modals/ChooseTariffPlanPopup.vue
index 5e0b18ff..b7279d1e 100644
--- a/src/components/modals/ChooseTariffPlanPopup.vue
+++ b/src/components/modals/ChooseTariffPlanPopup.vue
@@ -14,7 +14,11 @@
class="choose-plan__description"
v-html="$t('workspaces.chooseTariffPlanDialog.description', {featuresURL: '#'})"
/>
-
+
+
+
{{ name }}
@@ -13,12 +16,14 @@
{{ price === 0 ? $t('common.free') : `${$options.filters.spacedNumber(price)}${$tc('common.moneyPerMonth', currencySign, { currency: currencySign })}` }}
+
@@ -55,17 +60,31 @@ export default {
type: Number,
required: true,
},
+ /**
+ * Currency for price
+ */
currency: {
type: String,
required: true
},
/**
- * Is plan card selected
+ * Is plan selected
*/
selected: {
type: Boolean,
default: false,
},
+ /**
+ * True if horizontal view enabled
+ */
+ horizontal: {
+ type: Boolean,
+ default: false
+ },
+ isCurrentPlan: {
+ type: Boolean,
+ default: false
+ }
},
computed: {
currencySign() {
@@ -92,6 +111,34 @@ export default {
border: 3px solid var(--color-indicator-medium);
}
+ &--horizontal {
+ height: auto;
+ width: auto;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ &:not(:last-of-type) {
+ margin-bottom: 10px;
+ }
+
+ .tariff-plan__name {
+ margin-bottom: 0;
+ width: 100px;
+ }
+ .tariff-plan__limit {
+ width: 300px;
+ }
+
+ .tariff-plan__footer {
+ margin-left: auto;
+ }
+
+ .tariff-plan__price {
+ margin-right: 20px
+ }
+ }
+
&__name {
margin: 0 0 10px;
color: var(--color-text-main);
@@ -117,8 +164,6 @@ export default {
align-items: center;
justify-content: space-between;
margin-top: auto;
- /* align-self: flex-end; */
- /* margin: 30px 0 0; */
}
&__price {
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 0ff94c01..14b3122e 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -414,6 +414,7 @@
"copiedNotification": "Copied!",
"free": "FREE",
"select": "Select",
+ "selected": "Selected",
"continue": "Continue",
"eventsPerMonth": "events / mo",
"moneyPerMonth": "{currency} / mo",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 8c40687c..66cfee3e 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -414,6 +414,7 @@
"copiedNotification": "Скопировано!",
"free": "БЕСПЛАТНО",
"select": "Выбрать",
+ "selected": "Выбрано",
"continue": "Продолжить",
"eventsPerMonth": "событий / мес",
"moneyPerMonth": "{currency} / мес",