From 97f90589604965aab31814b35456d9e2c2945f15 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Sun, 17 Nov 2024 17:12:23 +0300
Subject: [PATCH] Fix visual problems

---
 .../modals/ChooseTariffPlanPopup.vue          |  1 +
 .../modals/PaymentDetailsDialog.vue           |  9 ++++---
 src/components/utils/TariffPlan.vue           | 25 ++++++++++++++++---
 src/i18n/messages/en.json                     |  2 +-
 src/i18n/messages/ru.json                     |  4 +--
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/modals/ChooseTariffPlanPopup.vue b/src/components/modals/ChooseTariffPlanPopup.vue
index d3cfe1a68..5e0b18ff3 100644
--- a/src/components/modals/ChooseTariffPlanPopup.vue
+++ b/src/components/modals/ChooseTariffPlanPopup.vue
@@ -21,6 +21,7 @@
             :name="plan.name"
             :limit="plan.eventsLimit"
             :price="plan.monthlyCharge"
+            :currency="plan.monthlyChargeCurrency"
             :selected="plan.id === selectedPlan.id"
             @click.native="selectPlan(plan.id)"
           />
diff --git a/src/components/modals/PaymentDetailsDialog.vue b/src/components/modals/PaymentDetailsDialog.vue
index d98947a62..4724ddc39 100644
--- a/src/components/modals/PaymentDetailsDialog.vue
+++ b/src/components/modals/PaymentDetailsDialog.vue
@@ -64,7 +64,7 @@
             {{ $t('common.price') }}
           </div>
           <div class="payment-details__details-item-value">
-            {{ priceWithDollar }}
+            {{ price }}
           </div>
         </div>
 
@@ -194,6 +194,7 @@ import { PayWithCardInput } from '../../api/billing';
 import { BusinessOperation } from '../../types/business-operation';
 import { BusinessOperationStatus } from '../../types/business-operation-status';
 import UiCheckboxWithLabel from '../forms/UiCheckboxWithLabel/UiCheckboxWithLabel.vue';
+import { getCurrencySign } from '@/utils';
 
 /**
  * Id for the 'New card' option in select
@@ -348,8 +349,8 @@ export default Vue.extend({
      *
      * example: 100$
      */
-    priceWithDollar(): string {
-      return `${this.plan.monthlyCharge}$`;
+    price(): string {
+      return `${this.plan.monthlyCharge}${getCurrencySign(this.plan.monthlyChargeCurrency)}`;
     },
 
     /**
@@ -726,7 +727,7 @@ export default Vue.extend({
     display: flex;
 
     &-button {
-      margin-right: 118px;
+      margin-right: auto;
     }
 
     &-cp-logo {
diff --git a/src/components/utils/TariffPlan.vue b/src/components/utils/TariffPlan.vue
index 34252f855..442b049e5 100644
--- a/src/components/utils/TariffPlan.vue
+++ b/src/components/utils/TariffPlan.vue
@@ -7,11 +7,11 @@
       {{ name }}
     </h4>
     <div class="tariff-plan__limit">
-      {{ limit | spacedNumber }} {{ $t('common.eventsPerMonth') }}
+      {{ limit | spacedNumber }} <span class="tariff-plan__limit-text">{{ $t('common.eventsPerMonth') }}</span>
     </div>
     <div class="tariff-plan__footer">
       <div class="tariff-plan__price">
-        {{ price === 0 ? $t('common.free') : `${$options.filters.spacedNumber(price)}${$t('common.dollarsPerMonth')}` }}
+        {{ price === 0 ? $t('common.free') : `${$options.filters.spacedNumber(price)}${$tc('common.moneyPerMonth', currencySign, { currency: currencySign })}` }}
       </div>
       <UiButton
         small
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { getCurrencySign } from '@/utils';
 import UiButton from './UiButton';
 
 export default {
@@ -54,6 +55,10 @@ export default {
       type: Number,
       required: true,
     },
+    currency: {
+      type: String,
+      required: true
+    },
     /**
      * Is plan card selected
      */
@@ -62,6 +67,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    currencySign() {
+      return getCurrencySign(this.currency)
+    }
+  }
 };
 </script>
 
@@ -73,6 +83,9 @@ export default {
     background: var(--color-bg-main);
     border-radius: 7px;
     cursor: pointer;
+    height: 140px;
+    display: flex;
+    flex-direction: column;
 
     &--selected {
       padding: 17px 22px;
@@ -95,11 +108,17 @@ export default {
       letter-spacing: 0;
     }
 
+    &__limit-text {
+      white-space: nowrap;
+    }
+
     &__footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin: 30px 0 0;
+      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 84d787e87..0ff94c011 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -416,7 +416,7 @@
     "select": "Select",
     "continue": "Continue",
     "eventsPerMonth": "events / mo",
-    "dollarsPerMonth": "$ / mo",
+    "moneyPerMonth": "{currency} / mo",
     "loading": "Loading...",
     "months": [
       "january",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 252d834b5..8c40687cf 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -415,8 +415,8 @@
     "free": "БЕСПЛАТНО",
     "select": "Выбрать",
     "continue": "Продолжить",
-    "eventsPerMonth": "соб. / мес",
-    "dollarsPerMonth": "$ / мес",
+    "eventsPerMonth": "событий / мес",
+    "moneyPerMonth": "{currency} / мес",
     "loading": "Загрузка...",
     "months": [
       "января",