Fix visual problems

codex-team · Nov 17, 2024 · 97f9058 · 97f9058
1 parent 10f8d44
commit 97f9058
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -415,8 +415,8 @@
     "free": "БЕСПЛАТНО",
     "select": "Выбрать",
     "continue": "Продолжить",
-    "eventsPerMonth": "соб. / мес",
-    "dollarsPerMonth": "$ / мес",
+    "eventsPerMonth": "событий / мес",
+    "moneyPerMonth": "{currency} / мес",
     "loading": "Загрузка...",
     "months": [
       "января",