SORA Card translation

src/components/SoraCard/ConfirmationInfo.vue

@@ -25,68 +25,59 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { VerificationStatus } from '@/types/card';
 import { getter } from '@/store/decorators';
 
-// Lokalise
-const pendingTitle = 'Your KYC is completed. Waiting for the results';
-const acceptedTitle = 'Your application has been approved';
-const rejectedTitle = 'Your application has not been approved';
-const tryAgainText = 'Try to complete KYC again';
-const pendingText =
-  'You have successfully completed your KYC application. The review is pending, you can expect a decision shortly.';
-const acceptedText = 'Your KYC verification is successful and we are already preparing to send you the SORA card!';
-const rejectedText = 'Your application has failed.';
-//
-const pendingIcon = 'time-time-24';
-
 @Component
 export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, TranslationMixin) {
   @getter.soraCard.currentStatus currentStatus!: VerificationStatus;
 
-  get buttonText(): string {
-    return tryAgainText;
-  }
+  readonly pendingTitle = this.t('card.statusPendingTitle');
+  readonly pendingText = this.t('card.statusPendingText');
+  readonly acceptedTitle = this.t('card.statusAcceptTitle');
+  readonly acceptedText = this.t('card.statusAcceptText');
+  readonly rejectedTitle = this.t('card.statusRejectTitle');
+  readonly rejectedText = this.t('card.statusRejectText');
 
   get title(): string {
-    if (!this.currentStatus) return pendingTitle;
+    if (!this.currentStatus) return this.pendingTitle;
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
-        return pendingTitle;
+        return this.pendingTitle;
       case VerificationStatus.Accepted:
-        return acceptedTitle;
+        return this.acceptedTitle;
       case VerificationStatus.Rejected:
-        return rejectedTitle;
+        return this.rejectedTitle;
       default:
-        return pendingTitle;
+        return this.pendingTitle;
     }
   }
 
   get text(): string {
-    if (!this.currentStatus) return pendingText;
+    if (!this.currentStatus) return this.pendingText;
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
-        return pendingText;
+        return this.pendingText;
       case VerificationStatus.Accepted:
-        return acceptedText;
+        return this.acceptedText;
       case VerificationStatus.Rejected:
-        return rejectedText;
+        return this.rejectedText;
       default:
-        return pendingText;
+        return this.pendingText;
     }
   }
 
   get icon(): string {
-    if (!this.currentStatus) return pendingIcon;
+    if (!this.currentStatus) return 'time-time-24';
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
-        return pendingIcon;
+        return 'time-time-24';
       case VerificationStatus.Accepted:
         return 'basic-check-marks-24';
       case VerificationStatus.Rejected:
         return 'basic-close-24';
       default:
-        return pendingIcon;
+        return 'time-time-24';
     }
   }
 
@@ -129,6 +120,14 @@ export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, Transl
     font-weight: 300;
     line-height: 150%;
   }
+  &__status-info-test {
+    white-space: pre-line;
+    margin-top: $basic-spacing;
+    text-align: center;
+    width: 85%;
+    font-weight: 300;
+    line-height: 150%;
+  }
   &__btn {
     width: 100%;
   }

src/components/SoraCard/SoraCardIntroPage.vue

@@ -10,15 +10,12 @@
     <div v-if="isLoggedIn" class="sora-card__balance-indicator">
       <s-icon class="sora-card__icon--checked" name="basic-check-mark-24" size="16px" />
       <p class="sora-card__balance-indicator-text">
-        <span class="sora-card__balance-indicator-text--bold">€0</span> {{ feeDesc }}
+        <span class="sora-card__balance-indicator-text--bold">{{ feeDesc }}</span>
       </p>
     </div>
     <div v-if="isPriceCalculated && isLoggedIn" class="sora-card__balance-indicator">
       <s-icon :class="getIconClass()" name="basic-check-mark-24" size="16px" />
-      <p class="sora-card__balance-indicator-text">
-        <span class="sora-card__balance-indicator-text--bold">{{ balanceIndicatorAmount }}</span>
-        {{ freeStartUsingDesc }}
-      </p>
+      <p class="sora-card__balance-indicator-text" v-html="freeStartUsingDesc" />
     </div>
     <div class="sora-card__options" v-loading="isLoggedIn && !wasEuroBalanceLoaded">
       <div v-if="isEuroBalanceEnough || !isLoggedIn" class="sora-card__options--enough-euro">
@@ -51,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
+import { Component, Mixins, Watch } from 'vue-property-decorator';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { FPNumber } from '@sora-substrate/math';
 
@@ -69,31 +66,27 @@ enum BuyButtonType {
 }
 type BuyButton = { type: BuyButtonType; text: string; button: 'primary' | 'secondary' | 'tertiary' };
 const hundred = '100';
-// Lokalise
-const buyUsingX1 = 'BUY XOR';
-const buyUsingBridge = 'BRIDGE TOKENS';
-// const buyUsingPaywings = 'ISSUE CARD FOR €12';
-const getCardForFree = 'GET SORA CARD FOR FREE';
-//
+
 @Component({
   components: {
     X1Dialog: lazyComponent(Components.X1Dialog),
     PaywingsDialog: lazyComponent(Components.PaywingsDialog),
   },
 })
 export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, TranslationMixin) {
-  // Lokalise
-  readonly alreadyAppliedText = "I've already applied";
-  readonly freeStartUsingDesc = 'of XOR in your account for free start';
-  readonly feeDesc = 'annual re-issuance fee';
-  readonly getCardTitle = 'Get SORA Card';
-  readonly getCardText = `Top up your SORA Card with fiat or crypto and pay online, in-store or withdraw from an ATM.\n
-Get a Euro IBAN account and a Mastercard Debit Card`;
-  //
+  readonly buyUsingX1 = this.t('card.depositX1Btn');
+  readonly buyUsingBridge = this.t('card.bridgeTokensBtn');
+  // buyUsingPaywings = 'ISSUE CARD FOR €12';
+  readonly getCardForFree = this.t('card.getSoraCardBtn');
+  readonly alreadyAppliedText = this.t('card.alreadyAppliedTip');
+  readonly getCardTitle = this.t('card.getSoraCardTitle');
+  readonly getCardText = this.t('card.getSoraCardDesc');
+  readonly feeDesc = this.t('card.reIssuanceFee');
+  freeStartUsingDesc = '';
 
   readonly buyOptions: Array<BuyButton> = [
-    { type: BuyButtonType.X1, text: buyUsingX1, button: 'primary' },
-    { type: BuyButtonType.Bridge, text: buyUsingBridge, button: 'secondary' },
+    { type: BuyButtonType.X1, text: this.buyUsingX1, button: 'primary' },
+    { type: BuyButtonType.Bridge, text: this.buyUsingBridge, button: 'secondary' },
     // TODO: [CARD] bring back when option becomes available
     // { type: BuyButtonType.Paywings, text: buyUsingPaywings, button: 'tertiary' },
   ];
@@ -109,17 +102,24 @@ Get a Euro IBAN account and a Mastercard Debit Card`;
   showX1Dialog = false;
   showPaywingsDialog = false;
 
+  @Watch('euroBalance', { immediate: true })
+  private handleEuroBalanceTranslationChange(value: number): void {
+    this.freeStartUsingDesc = this.t('card.freeStartDesc', { value: this.balanceIndicatorAmount });
+  }
+
   get buttonText(): string {
     if (!this.isLoggedIn) {
       return this.t('connectWalletText');
     }
 
-    return getCardForFree;
+    return this.getCardForFree;
   }
 
   get balanceIndicatorAmount(): string {
     const euroBalance = parseInt(this.euroBalance, 10);
-    return `€${this.isEuroBalanceEnough ? hundred : euroBalance}/${hundred}`;
+    return `<span class="sora-card__balance-indicator-text--bold">€${
+      this.isEuroBalanceEnough ? hundred : euroBalance
+    }/${hundred}</span>`;
   }
 
   getIconClass(): string {
@@ -200,6 +200,10 @@ Get a Euro IBAN account and a Mastercard Debit Card`;
     }
   }
 }
+
+.sora-card__balance-indicator-text--bold {
+  font-weight: 600;
+}
 </style>
 
 <style lang="scss" scoped>

src/components/SoraCard/SoraCardKYC.vue

@@ -74,15 +74,15 @@ export default class SoraCardKYC extends Mixins(TranslationMixin, mixins.Loading
   get title(): string {
     switch (this.step) {
       case KycProcess.TermsAndConditions:
-        return 'Terms & Conditions';
+        return this.t('card.termsAndConditions');
       case KycProcess.RoadMap:
-        return 'Complete KYC';
+        return this.t('card.completeKYC');
       case KycProcess.Phone:
-        return 'Phone Confirmation';
+        return this.t('card.phoneConfirmation');
       case KycProcess.Email:
-        return 'Email Confirmation';
+        return this.t('card.emailConfirmation');
       case KycProcess.KycView:
-        return 'Complete KYC';
+        return this.t('card.completeKYC');
       default:
         return '';
     }

src/components/SoraCard/steps/Email.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="sora-card">
-    <s-input maxlength="320" placeholder="Email" v-model="email" :disabled="loading" type="email" />
+    <s-input
+      maxlength="320"
+      :placeholder="t('card.emailPlaceholder')"
+      v-model="email"
+      :disabled="loading"
+      type="email"
+    />
     <p class="sora-card__email-input-description">{{ emailInputDescription }}</p>
     <s-icon v-if="emailSent" name="basic-check-mark-24" size="16px" />
     <div v-if="showNameInputs">
       <s-input
         class="sora-card__input-name"
         maxlength="50"
-        placeholder="First Name"
+        :placeholder="t('card.firstNamePlaceholder')"
         v-model="firstName"
         :disabled="loading"
       />
-      <s-input maxlength="50" placeholder="Last Name" v-model="lastName" :disabled="loading" />
-      <p class="sora-card__name-input-description">Use your real name.</p>
+      <s-input maxlength="50" :placeholder="t('card.lastNamePlaceholder')" v-model="lastName" :disabled="loading" />
+      <p class="sora-card__name-input-description">{{ t('card.personalNameInputDesc') }}</p>
     </div>
     <s-button
       type="primary"
@@ -52,8 +58,8 @@ export default class SmsCode extends Mixins(TranslationMixin, mixins.LoadingMixi
   @Watch('emailResendCount', { immediate: true })
   private handleSmsCountChange(value: number): void {
     const digit = value.toString().length > 1 ? '' : '0';
-    const countDown = `${digit}${value}`;
-    this.emailResendText = `RESEND AVAILABLE IN 00:${countDown}`;
+    const countDown = `00:${digit}${value}`;
+    this.emailResendText = this.t('card.resendInBtn', { value: countDown });
   }
 
   handleSendEmail(): void {
@@ -93,13 +99,13 @@ export default class SmsCode extends Mixins(TranslationMixin, mixins.LoadingMixi
   }
 
   get emailInputDescription(): string {
-    if (this.emailSent) return 'We’ve sent you the magic link. Check your email!';
-    return 'We’ll send you a verification email.';
+    if (this.emailSent) return this.t('card.emailInputAfterSendDesc');
+    return this.t('card.emailInputBeforeSendDesc');
   }
 
   get buttonText() {
     if (this.emailSent) return this.emailResendText;
-    return 'SEND VERIFICATION EMAIL';
+    return this.t('card.sendEmailLinkBtn');
   }
 
   get sendBtnDisabled(): boolean {

src/components/SoraCard/steps/KycView.vue

@@ -60,7 +60,7 @@ export default class KycView extends Mixins(TranslationMixin) {
       console.error('[SoraCard]: Error while initiating KYC', data);
 
       this.$notify({
-        message: 'Something went wrong. Please, start again',
+        message: this.t('card.infoMessageTryAgain'),
         title: '',
       });
       this.$emit('confirm-kyc', false);
@@ -122,7 +122,7 @@ export default class KycView extends Mixins(TranslationMixin) {
             console.error('[SoraCard]: Error while initiating KYC', data);
 
             this.$notify({
-              message: 'Something went wrong. Please, start again',
+              message: this.t('card.infoMessageTryAgain'),
               title: '',
             });
             this.$emit('confirm-kyc', false);