Fix sora card phone and route (#952)

src/components/App/Menu/AppMenu.vue

@@ -29,6 +29,7 @@
               <sidebar-item-content
                 tag="a"
                 rel="nofollow noopener"
+                tabindex="-1"
                 :href="item.href"
                 :icon="item.icon"
                 :title="t(`mainMenu.${item.title}`)"

src/components/SidebarItemContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" :class="classes">
+  <component :is="tag" :class="classes" :tabindex="tabindex">
     <!-- TODO: [TECH] move from fonts provided values -->
     <div v-if="icon === 'sora-card'" class="icon-container">
       <side-menu-card class="sora-card-sidebar-icon" />
@@ -26,6 +26,7 @@ export default class SidebarItemContent extends Mixins(TranslationMixin) {
   @Prop({ default: '', type: String }) readonly icon!: string;
   @Prop({ default: '', type: String }) readonly title!: string;
   @Prop({ default: 'div', type: String }) readonly tag!: string;
+  @Prop() readonly tabindex!: string | number;
 
   get classes(): Array<string> {
     const base = 'sidebar-item-content';
@@ -98,4 +99,7 @@ $icon-size: 42px;
   background-repeat: no-repeat;
   background-position: center center;
 }
+.el-menu-item:not(.is-active):not(.is-disabled):focus .sora-card-sidebar-icon path {
+  fill: var(--s-color-base-content-secondary) !important; // focus state of sora card item
+}
 </style>

src/components/SoraCard/steps/Phone.vue

@@ -1,14 +1,24 @@
 <template>
   <div>
     <div class="sora-card__number-input">
-      <s-input
-        ref="number"
-        placeholder="Phone number"
-        type="number"
-        v-model="phoneNumber"
-        :disabled="phoneInputDisabled"
-      />
-      <!-- <input v-mask="['+# (###) ### ## ##']" /> TODO: format number depending on country code-->
+      <div class="phone-container s-flex">
+        <s-input
+          ref="code"
+          class="phone-code"
+          :placeholder="countryCodePlaceholder"
+          v-maska="'+###'"
+          v-model="countryCode"
+          :disabled="phoneInputDisabled"
+        />
+        <s-input
+          ref="phone"
+          class="phone-number"
+          placeholder="Phone number"
+          v-maska="'############'"
+          v-model="phoneNumber"
+          :disabled="phoneInputDisabled"
+        />
+      </div>
       <s-button
         type="secondary"
         :disabled="sendSmsDisabled"
@@ -23,7 +33,7 @@
       <s-icon v-if="smsSent" class="sora-card__icon" name="basic-check-mark-24" size="14px" />
     </div>
     <s-input
-      ref="codes"
+      ref="otp"
       placeholder="Verification code"
       v-model="verificationCode"
       :disabled="otpInputDisabled"
@@ -50,6 +60,8 @@ import { action, getter, state } from '@/store/decorators';
 import { VerificationStatus } from '@/types/card';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 
+const MIN_PHONE_LENGTH_WITH_CODE = 8;
+
 @Component
 export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin) {
   @state.soraCard.authLogin authLogin!: any;
@@ -64,6 +76,7 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
   @Prop({ default: false, type: Boolean }) readonly userApplied!: boolean;
 
   phoneNumber = '';
+  phoneCode = '';
   verificationCode = '';
   smsSent = false;
   smsResendTimer = null;
@@ -99,19 +112,38 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
   }
 
   sendSms(): void {
-    this.authLogin.PayWingsSendOtp('+' + this.phoneNumber, 'Your verification code is: @Otp').catch((error) => {
-      console.error(error);
-    });
+    this.authLogin
+      .PayWingsSendOtp(`${this.countryCode}${this.phoneNumber}`, 'Your verification code is: @Otp')
+      .catch((error) => {
+        console.error(error);
+      });
 
     this.startSmsCountDown();
   }
 
+  get countryCode(): string {
+    return this.phoneCode;
+  }
+
+  set countryCode(numChar: string) {
+    if (numChar.length > 3) {
+      (this.$refs.phone as HTMLInputElement).focus();
+    }
+
+    this.phoneCode = numChar;
+  }
+
+  /** Real example when `countryCode` is empty */
+  get countryCodePlaceholder(): string {
+    return this.countryCode ? 'Code' : '+44';
+  }
+
   get buttonDisabled() {
     return !this.verificationCode || this.notPassedKycAndNotHasXorEnough;
   }
 
   get otpInputDisabled(): boolean {
-    return !this.smsSent || !this.phoneNumber;
+    return !this.smsSent || !this.isPhoneNumberValid;
   }
 
   get buttonText(): string {
@@ -139,8 +171,13 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
     return this.soraNetwork === WALLET_CONSTS.SoraNetwork.Prod;
   }
 
+  get isPhoneNumberValid(): boolean {
+    const code = this.countryCode.replace('+', '');
+    return !!(+code && this.phoneNumber && `${code}${this.phoneNumber}`.length >= MIN_PHONE_LENGTH_WITH_CODE);
+  }
+
   get sendSmsDisabled(): boolean {
-    return !this.phoneNumber || this.smsSent;
+    return !this.isPhoneNumberValid || this.smsSent;
   }
 
   get phoneInputDisabled(): boolean {
@@ -169,7 +206,7 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
   }
 
   async mounted(): Promise<void> {
-    (this.$refs.number as HTMLInputElement).focus();
+    (this.$refs.code as HTMLInputElement).focus();
 
     await this.initPayWingsAuthSdk();
 
@@ -178,8 +215,9 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
     this.authLogin
       .on('SendOtp-Success', () => {
         this.smsSent = true;
-
-        // (this.$refs.codes as HTMLInputElement).focus();
+        this.$nextTick(() => {
+          (this.$refs.otp as HTMLInputElement).focus();
+        });
       })
       .on('MinimalRegistrationReq', () => {
         this.sendOtpBtnLoading = false;
@@ -292,3 +330,19 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 </style>
+
+<style lang="scss" scoped>
+.phone {
+  &-code {
+    flex: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &-number {
+    flex: 5;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 2px;
+  }
+}
+</style>

src/components/X1/X1Dialog.vue

@@ -6,7 +6,7 @@
       </div>
       <div>
         <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>
+        <p class="disclaimer__text">Please, use the following card details:</p>
         <ul>
           <li>Card number: 4012 0000 0006 0085</li>
           <li>Card CVV: 123</li>

src/store/settings/getters.ts

@@ -44,9 +44,9 @@ const getters = defineGetters<SettingsState>()({
     const { state } = settingsGetterContext(args);
     return !!state.featureFlags.charts && state.сhartsEnabled;
   },
-  soraCardEnabled(...args): boolean {
+  soraCardEnabled(...args): Nullable<boolean> {
     const { state } = settingsGetterContext(args);
-    return !!state.featureFlags.soraCard;
+    return state.featureFlags.soraCard;
   },
   notificationActivated(...args): boolean {
     const { state } = settingsGetterContext(args);

src/views/SoraCard.vue

@@ -7,14 +7,14 @@
 </template>
 
 <script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
+
 import SubscriptionsMixin from '@/components/mixins/SubscriptionsMixin';
 import { action, getter } from '@/store/decorators';
 import { goTo, lazyComponent } from '@/router';
 import { Components, PageNames } from '@/consts';
-
-import { Component, Mixins } from 'vue-property-decorator';
-import { VerificationStatus } from '@/types/card';
+import type { VerificationStatus } from '@/types/card';
 
 enum Step {
   StartPage = 'StartPage',
@@ -31,7 +31,7 @@ enum Step {
 })
 export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, SubscriptionsMixin) {
   @getter.soraCard.currentStatus private currentStatus!: VerificationStatus;
-  @getter.settings.soraCardEnabled private soraCardEnabled!: boolean;
+  @getter.settings.soraCardEnabled private soraCardEnabled!: Nullable<boolean>;
 
   @action.soraCard.getUserStatus private getUserStatus!: AsyncFnWithoutArgs;
   @action.soraCard.subscribeToTotalXorBalance private subscribeToTotalXorBalance!: AsyncFnWithoutArgs;
@@ -42,6 +42,13 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Subsc
 
   Step = Step;
 
+  @Watch('soraCardEnabled', { immediate: true })
+  private checkAvailability(value: Nullable<boolean>): void {
+    if (value === false) {
+      goTo(PageNames.Swap);
+    }
+  }
+
   confirmApply(userApplied: boolean): void {
     this.userApplied = userApplied;
     this.step = Step.KYC;
@@ -67,9 +74,6 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Subsc
   }
 
   created(): void {
-    if (!this.soraCardEnabled) {
-      goTo(PageNames.Swap);
-    }
     this.subscribeToTotalXorBalance();
   }