Fix lokalise and SORA Card issues

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.15.0",
+    "@soramitsu/soraneo-wallet-web": "1.15.1",
     "@walletconnect/web3-provider": "^1.8.0",
     "base-64": "^1.0.0",
     "core-js": "^3.26.0",

src/components/SelectNetwork.vue

@@ -3,7 +3,7 @@
     <p class="networks-info">{{ t('bridge.networkInfo') }}</p>
     <s-radio-group v-model="selectedNetworkId">
       <s-radio v-for="network in subNetworks" :key="network.id" :label="network.id" class="network">
-        <span class="network-name">{{ t(`bridge.${network.name}`) }}</span>
+        <span class="network-name">{{ TranslationConsts.evmNetwork[network.name] }}</span>
         <token-logo :token-symbol="network.symbol" />
       </s-radio>
     </s-radio-group>

src/components/SoraCard/ConfirmationInfo.vue

@@ -9,34 +9,12 @@
         class="unselectable sora-card__card-image"
       />
       <div class="sora-card__card-icon" :class="computedIconClass">
-        <s-icon
-          v-if="!currentStatus || currentStatus === VerificationStatus.Pending"
-          name="time-time-24"
-          class="sora-card__card-icon-element"
-        />
-        <s-icon
-          v-if="currentStatus === VerificationStatus.Accepted"
-          name="basic-check-marks-24"
-          class="sora-card__card-icon-element"
-        />
-        <s-icon
-          v-if="currentStatus === VerificationStatus.Rejected"
-          name="basic-close-24"
-          class="sora-card__card-icon-element"
-        />
+        <s-icon class="sora-card__card-icon-element" :name="icon" />
       </div>
     </div>
 
-    <div class="sora-card__header">{{ headerText }}</div>
-    <p v-if="currentStatus === VerificationStatus.Pending" class="sora-card__status-info">
-      You have successfully completed your KYC application. The review is pending and you can expect a decision shortly.
-    </p>
-    <p v-if="currentStatus === VerificationStatus.Accepted" class="sora-card__status-info">
-      Your KYC verification is successful and we are already preparing to send you the SORA card!
-    </p>
-    <p v-if="currentStatus === VerificationStatus.Rejected" class="sora-card__status-info">
-      Your application has failed.
-    </p>
+    <div class="sora-card__header">{{ title }}</div>
+    <p class="sora-card__status-info">{{ text }}</p>
   </div>
 </template>
 
@@ -47,28 +25,68 @@ 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;
 
-  readonly VerificationStatus = VerificationStatus;
-
   get buttonText(): string {
-    return 'Try to complete KYC again';
+    return tryAgainText;
+  }
+
+  get title(): string {
+    if (!this.currentStatus) return pendingTitle;
+
+    switch (this.currentStatus) {
+      case VerificationStatus.Pending:
+        return pendingTitle;
+      case VerificationStatus.Accepted:
+        return acceptedTitle;
+      case VerificationStatus.Rejected:
+        return rejectedTitle;
+      default:
+        return pendingTitle;
+    }
+  }
+
+  get text(): string {
+    if (!this.currentStatus) return pendingText;
+
+    switch (this.currentStatus) {
+      case VerificationStatus.Pending:
+        return pendingText;
+      case VerificationStatus.Accepted:
+        return acceptedText;
+      case VerificationStatus.Rejected:
+        return rejectedText;
+      default:
+        return pendingText;
+    }
   }
 
-  get headerText(): Nullable<string> {
-    if (!this.currentStatus) return 'KYC completed. Waiting for the results';
+  get icon(): string {
+    if (!this.currentStatus) return pendingIcon;
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
-        return 'KYC completed. Waiting for the results';
+        return pendingIcon;
       case VerificationStatus.Accepted:
-        return 'Your application has been approved';
+        return 'basic-check-marks-24';
       case VerificationStatus.Rejected:
-        return 'Your application has not been approved';
+        return 'basic-close-24';
       default:
-        return null;
+        return pendingIcon;
     }
   }
 

src/components/SoraCard/SoraCardIntroPage.vue

@@ -2,23 +2,22 @@
   <div class="container sora-card">
     <s-image src="card/sora-card.png" lazy fit="cover" draggable="false" class="unselectable sora-card__image" />
     <div class="sora-card__intro">
-      <h3 class="sora-card__intro-title">Get SORA Card</h3>
+      <h3 class="sora-card__intro-title">{{ getCardTitle }}</h3>
       <span class="sora-card__intro-info">
-        Top up SORA Card with fiat or crypto and pay online, in-store or withdraw in ATM. Get Euro IBAN account and
-        Mastercard Debit Card.
+        {{ getCardText }}
       </span>
     </div>
     <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> annual re-issuance fee
+        <span class="sora-card__balance-indicator-text--bold">€0</span> {{ feeDesc }}
       </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> of XOR in your account
-        for free start
+        <span class="sora-card__balance-indicator-text--bold">{{ balanceIndicatorAmount }}</span>
+        {{ freeStartUsingDesc }}
       </p>
     </div>
     <div class="sora-card__options">
@@ -32,30 +31,20 @@
           <span class="text"> {{ buttonText }}</span>
         </s-button>
       </div>
-      <div class="sora-card__options--not-enough-euro" v-else>
+      <div v-else class="sora-card__options--not-enough-euro s-flex">
         <s-button
-          type="primary"
-          class="sora-card__btn sora-card__btn--fiat-buy s-typography-button--large"
+          v-for="item in buyOptions"
+          class="sora-card__btn sora-card__btn--buy s-typography-button--large"
+          :key="item.type"
+          :type="item.button"
           :loading="btnLoading"
-          @click="openX1"
+          @click="buyTokens(item.type)"
         >
-          <span class="text">BUY XOR WITH FIAT</span>
-        </s-button>
-        <s-button class="sora-card__btn--bridge s-typography-button--large" :loading="btnLoading" @click="bridgeTokens">
-          <span class="text">BRIDGE TOKENS</span>
+          <span class="text">{{ item.text }}</span>
         </s-button>
-        <!-- TODO: bring back when option becomes available<p class="line">OR</p>
-        <s-button
-          type="tertiary"
-          class="sora-card__btn--fiat-issuance s-typography-button--large"
-          :loading="btnLoading"
-          @click="issueCardByPaywings"
-        >
-          <span class="text">ISSUE CARD FOR €12</span>
-        </s-button> -->
       </div>
     </div>
-    <span v-if="isLoggedIn" @click="loginUser" class="sora-card__user-applied">I've already applied</span>
+    <span v-if="isLoggedIn" @click="loginUser" class="sora-card__user-applied">{{ alreadyAppliedText }}</span>
     <x1-dialog :visible.sync="showX1Dialog" />
     <paywings-dialog :visible.sync="showPaywingsDialog" />
   </div>
@@ -73,13 +62,42 @@ import { delay } from '@/utils';
 import { clearTokensFromSessionStorage } from '@/utils/card';
 import TranslationMixin from '../mixins/TranslationMixin';
 
+enum BuyButtonType {
+  X1,
+  Bridge,
+  Paywings,
+}
+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 buyOptions: Array<BuyButton> = [
+    { type: BuyButtonType.X1, text: buyUsingX1, button: 'primary' },
+    { type: BuyButtonType.Bridge, text: buyUsingBridge, button: 'secondary' },
+    // TODO: [CARD] bring back when option becomes available
+    // { type: BuyButtonType.Paywings, text: buyUsingPaywings, button: 'tertiary' },
+  ];
+
   @state.soraCard.euroBalance private euroBalance!: string;
   @state.soraCard.xorToDeposit private xorToDeposit!: FPNumber;
 
@@ -95,12 +113,12 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
       return this.t('connectWalletText');
     }
 
-    return 'GET SORA CARD FOR FREE';
+    return getCardForFree;
   }
 
   get balanceIndicatorAmount(): string {
     const euroBalance = parseInt(this.euroBalance, 10);
-    return `€${this.isEuroBalanceEnough ? '100' : euroBalance}/100`;
+    return `€${this.isEuroBalanceEnough ? hundred : euroBalance}/${hundred}`;
   }
 
   getIconClass(): string {
@@ -114,18 +132,32 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
     return this.loading || !this.isPriceCalculated;
   }
 
-  openX1(): void {
+  private openX1(): void {
     this.showX1Dialog = true;
   }
 
-  bridgeTokens(): void {
+  private issueCardByPaywings(): void {
+    this.showPaywingsDialog = true;
+  }
+
+  private bridgeTokens(): void {
     if (!this.isEuroBalanceEnough) {
       router.push({ name: PageNames.Bridge, params: { xorToDeposit: this.xorToDeposit.toString() } });
     }
   }
 
-  issueCardByPaywings(): void {
-    this.showPaywingsDialog = true;
+  buyTokens(type: BuyButtonType): void {
+    switch (type) {
+      case BuyButtonType.X1:
+        this.openX1();
+        break;
+      case BuyButtonType.Bridge:
+        this.bridgeTokens();
+        break;
+      case BuyButtonType.Paywings:
+        this.issueCardByPaywings();
+        break;
+    }
   }
 
   handleConfirm(): void {
@@ -234,16 +266,12 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
 
   &__btn {
     width: 100%;
-    &--fiat-buy,
-    &--bridge {
-      width: 48%;
+    &--buy {
+      margin-top: var(--s-size-mini);
       .text {
         font-size: var(--s-heading4-font-size);
       }
     }
-    &--fiat-issuance {
-      width: 100%;
-    }
   }
 }
 

src/components/SoraCard/steps/RoadMap.vue

@@ -79,12 +79,7 @@ import { mixins, components, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web
     NotificationEnablingPage: components.NotificationEnablingPage,
   },
 })
-export default class RoadMap extends Mixins(
-  TranslationMixin,
-  mixins.LoadingMixin,
-  mixins.CameraPermissionMixin,
-  mixins.TranslationMixin
-) {
+export default class RoadMap extends Mixins(TranslationMixin, mixins.LoadingMixin, mixins.CameraPermissionMixin) {
   @state.wallet.settings.soraNetwork soraNetwork!: WALLET_CONSTS.SoraNetwork;
 
   @getter.soraCard.isEuroBalanceEnough isEuroBalanceEnough!: boolean;

src/components/X1/X1Dialog.vue

@@ -5,11 +5,13 @@
         <s-icon name="notifications-alert-triangle-24" size="42px" />
       </div>
       <div>
-        <p class="disclaimer__text">DO NOT ENTER your real card number. This is test environment.</p>
-        <p class="disclaimer__text">Please, use the following ones:</p>
+        <p class="disclaimer__text">DO NOT ENTER YOUR REAL CARD NUMBER. This is a test environment.</p>
+        <p class="disclaimer__text">Please use the following card details:</p>
         <ul>
-          <li>4012000000060085</li>
-          <li>4066330000000004</li>
+          <li>Card number: 4012 0000 0006 0085</li>
+          <li>Card CVV: 123</li>
+          <li>Card expiration date: Input any date</li>
+          <li>Card owner name: Input any name & surname</li>
         </ul>
       </div>
     </div>