Move disclaimer to front page (#965)

* Update SoraCardIntroPage.vue * add to front page & fix translations * add flow with not found number * add missing translations * remove debug actions * remove unused css
sora-xor · Mar 16, 2023 · 9f26c23 · 9f26c23
1 parent 53c2ff6
commit 9f26c23
Show file tree

Hide file tree

Showing 24 changed files with 162 additions and 78 deletions.
diff --git a/src/components/SoraCard/ConfirmationInfo.vue b/src/components/SoraCard/ConfirmationInfo.vue
@@ -14,7 +14,7 @@
     </div>
 
     <div class="sora-card__header">{{ t(titleKey) }}</div>
-    <p class="sora-card__status-info">{{ text }}</p>
+    <p class="sora-card__status-info" v-html="text" />
 
     <div v-if="currentStatus === VerificationStatus.Rejected" class="sora-card__rejection">
       <s-button
@@ -95,7 +95,7 @@ export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, Transl
   }
 
   get icon(): string {
-    if (!(this.currentStatus && this.hasFreeAttempts)) return pendingIcon;
+    if (this.currentStatus === VerificationStatus.Rejected && !this.hasFreeAttempts) return 'time-time-24';
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
@@ -112,7 +112,7 @@ export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, Transl
   get computedIconClass(): string {
     const base = 'sora-card__card-icon';
 
-    if (!(this.currentStatus && this.hasFreeAttempts)) return `${base}--waiting`;
+    if (this.currentStatus === VerificationStatus.Rejected && !this.hasFreeAttempts) return `${base}--waiting`;
 
     switch (this.currentStatus) {
       case VerificationStatus.Pending:
@@ -122,7 +122,7 @@ export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, Transl
       case VerificationStatus.Rejected:
         return `${base}--reject`;
       default:
-        return '';
+        return `${base}--waiting`;
     }
   }
 
@@ -197,8 +197,8 @@ export default class ConfirmationInfo extends Mixins(mixins.LoadingMixin, Transl
     &-icon {
       height: 40px;
       width: 40px;
-      right: -10px;
-      bottom: 0px;
+      right: -14px;
+      bottom: -4px;
       position: absolute;
       border-radius: 50%;
       opacity: 0.95;

diff --git a/src/components/SoraCard/SoraCardIntroPage.vue b/src/components/SoraCard/SoraCardIntroPage.vue
@@ -17,6 +17,12 @@
       <s-icon :class="getIconClass()" name="basic-check-mark-24" size="16px" />
       <p class="sora-card__balance-indicator-text" v-html="freeStartUsingDesc" />
     </div>
+    <div class="sora-card__unsupported-countries-disclaimer">
+      {{ t('card.unsupportedCountriesDisclaimer') }}
+      <span class="sora-card__unsupported-countries-disclaimer--link" @click="openList">{{
+        t('card.unsupportedCountriesLink')
+      }}</span>
+    </div>
     <div class="sora-card__options" v-loading="isLoggedIn && !wasEuroBalanceLoaded">
       <div v-if="isEuroBalanceEnough || !isLoggedIn" class="sora-card__options--enough-euro">
         <s-button
@@ -44,6 +50,7 @@
     <span v-if="isLoggedIn" @click="loginUser" class="sora-card__user-applied">{{ t('card.alreadyAppliedTip') }}</span>
     <x1-dialog :visible.sync="showX1Dialog" />
     <paywings-dialog :visible.sync="showPaywingsDialog" />
+    <tos-dialog :visible.sync="showListDialog" :title="t('card.unsupportedCountries')" />
   </div>
 </template>
 
@@ -70,6 +77,7 @@ const hundred = '100';
   components: {
     X1Dialog: lazyComponent(Components.X1Dialog),
     PaywingsDialog: lazyComponent(Components.PaywingsDialog),
+    TosDialog: lazyComponent(Components.ToSDialog),
   },
 })
 export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, TranslationMixin) {
@@ -89,6 +97,7 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
 
   showX1Dialog = false;
   showPaywingsDialog = false;
+  showListDialog = false;
 
   get freeStartUsingDesc(): string {
     if (!this.euroBalance) {
@@ -141,6 +150,10 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
     }
   }
 
+  openList(): void {
+    this.showListDialog = true;
+  }
+
   buyTokens(type: BuyButtonType): void {
     switch (type) {
       case BuyButtonType.X1:
@@ -227,11 +240,26 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
     width: 100%;
   }
 
-  &__user-applied {
-    margin-top: 24px;
+  &__unsupported-countries-disclaimer {
     color: var(--s-color-base-content-secondary);
+    text-align: center;
+    margin-top: var(--s-size-mini);
+    width: 75%;
+    &--link {
+      border-bottom: 1px solid var(--s-color-theme-accent);
+      color: var(--s-color-theme-accent);
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__user-applied {
+    margin-top: calc(var(--s-basic-spacing) * 2);
+    color: var(--s-color-theme-accent);
+    text-transform: uppercase;
+    font-weight: 500;
     padding-bottom: calc(var(--s-basic-spacing) / 2);
-    border-bottom: 1px solid var(--s-color-base-content-secondary);
     &:hover {
       cursor: pointer;
     }

diff --git a/src/components/SoraCard/SoraCardKYC.vue b/src/components/SoraCard/SoraCardKYC.vue
@@ -1,5 +1,12 @@
 <template>
-  <wallet-base v-loading="loading" :title="title" :show-back="true" @back="handleBack" class="sora-card">
+  <wallet-base
+    v-loading="loading"
+    :title="title"
+    :show-back="showBackBtn"
+    :title-center="true"
+    @back="handleBack"
+    class="sora-card"
+  >
     <terms-and-conditions v-if="step === KycProcess.TermsAndConditions" @confirm="confirmToS" />
     <road-map v-else-if="step === KycProcess.RoadMap" @confirm="confirmSignIn" :userApplied="userApplied" />
     <phone v-else-if="step === KycProcess.Phone" @confirm="confirmPhone" :userApplied="userApplied" />
@@ -89,6 +96,10 @@ export default class SoraCardKYC extends Mixins(TranslationMixin, mixins.Loading
     }
   }
 
+  get showBackBtn(): boolean {
+    return !(this.step === KycProcess.KycView);
+  }
+
   confirmToS(): void {
     this.step = KycProcess.RoadMap;
   }

diff --git a/src/components/SoraCard/steps/Phone.vue b/src/components/SoraCard/steps/Phone.vue
@@ -95,6 +95,7 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin,
   verificationCode = '';
   smsSent = false;
   sendOtpBtnLoading = false;
+  notFoundPhoneWhenApplied = false;
 
   @Watch('smsResendCount', { immediate: true })
   private handleSmsCountChange(value: number): void {
@@ -157,15 +158,15 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin,
 
   /** Real example when `countryCode` is empty */
   get countryCodePlaceholder(): string {
-    return this.countryCode ? 'Code' : '+44'; // TODO: [CARD] Translate Code: this.t('card.code')
+    return this.countryCode ? this.t('card.code') : '+44';
   }
 
   get buttonDisabled() {
     return this.verificationCode.length !== OTP_CODE_LENGTH || this.notPassedKycAndNotHasXorEnough;
   }
 
   get otpInputDisabled(): boolean {
-    return !this.smsSent || !this.isPhoneNumberValid;
+    return !this.smsSent || !this.isPhoneNumberValid || this.notFoundPhoneWhenApplied;
   }
 
   get buttonText(): string {
@@ -220,6 +221,7 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin,
       if (this.smsResendCount < 0) {
         this.smsSent = false;
         this.verificationCode = '';
+        this.notFoundPhoneWhenApplied = false;
         this.smsResendCount = RESEND_INTERVAL;
         clearInterval(interval);
       }
@@ -247,7 +249,10 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin,
         this.sendOtpBtnLoading = false;
 
         if (this.userApplied) {
-          this.showAppNotification(this.t('card.infoMessageNoKYC'), 'info');
+          this.showAppNotification(this.t('card.userNotFound'), 'info');
+          this.notFoundPhoneWhenApplied = true;
+          this.verificationCode = '';
+          return;
         }
 
         if (!this.isEuroBalanceEnough) {

diff --git a/src/lang/card/cs.json b/src/lang/card/cs.json
@@ -9,12 +9,13 @@
         "firstNamePlaceholder": "Jméno",
         "lastNamePlaceholder": "Příjmení",
         "phonePlaceholder": "Telefonní číslo",
+        "statusPendingTitle": "Probíhá ověřování",
         "sendEmailLinkBtn": "Poslat odkaz",
         "statusAcceptText": "Vaše ověření KYC bylo úspěšné a my se již připravujeme na zaslání karty SORA!",
         "noFreeKycTitle": "Už žádné volné pokusy",
         "unsupportedCountries": "Nepodporované země",
         "getSoraCardTitle": "Získejte kartu SORA",
-        "alreadyAppliedTip": "Už jsem podal přihlášku",
+        "alreadyAppliedTip": "Již jsem požádal",
         "getSoraCardBtn": "Získejte kartu SORA zdarma",
         "bridgeTokensBtn": "Žetony mostu",
         "depositX1Btn": "Kupte si XOR",
@@ -45,8 +46,7 @@
         "personalNameInputDesc": "Použijte své skutečné jméno.",
         "infoMessageTryAgain": "Něco se pokazilo. Prosím zkuste to znovu",
         "blacklistedCountriesExcuse": "Bohužel v tuto chvíli nejsme schopni podporovat následující země:",
-        "statusPendingText": "Úspěšně jste dokončili svou žádost KYC. Kontrola čeká a brzy můžete očekávat rozhodnutí. <br \/> <br \/> Obvykle je rozhodnutí učiněno ve stejný den, ale v některých případech může trvat až 3 dny.",
-        "statusPendingTitle": "KYC dokončeno. Čekání na výsledky",
+        "statusPendingText": "Úspěšně jste dokončili žádost o KYC. Přezkoumání probíhá a rozhodnutí můžete očekávat v nejbližší době.<br \/><br \/>Obvykle je rozhodnutí vydáno tentýž den, v některých případech může trvat až 3 dny.",
         "resendInBtn": "ZNOVU ODESLAT V {value}",
         "statusRejectTitle": "Přihláška zamítnuta",
         "statusRejectText": "Vaše žádost byla zamítnuta interním auditem. Než se znovu přihlásíte, pečlivě si prostudujte naše požadavky a T&S",
@@ -55,6 +55,8 @@
         "retryKycBtn": "Dokončete znovu KYC",
         "unsupportedCountriesLink": "Podívejte se na seznam",
         "unsupportedCountriesDisclaimer": "Obyvatelé některých zemí v tuto chvíli nemohou žádat o kartu SORA",
-        "statusRejectReason": "Důvod odmítnutí"
+        "statusRejectReason": "Důvod odmítnutí",
+        "userNotFound": "Nebylo nalezeno žádné číslo mobilního telefonu, zkontrolujte ho znovu a zkuste to znovu.",
+        "code": "Kód"
     }
 }
diff --git a/src/lang/card/de.json b/src/lang/card/de.json
@@ -9,6 +9,7 @@
         "firstNamePlaceholder": "Vorname",
         "lastNamePlaceholder": "Familienname, Nachname",
         "phonePlaceholder": "Telefonnummer",
+        "statusPendingTitle": "Überprüfung läuft",
         "sendEmailLinkBtn": "Link senden",
         "statusAcceptText": "Ihre KYC-Verifizierung ist erfolgreich und wir bereiten bereits den Versand der SORA-Karte vor!",
         "noFreeKycTitle": "Keine Freiversuche mehr",
@@ -45,8 +46,7 @@
         "personalNameInputDesc": "Verwenden Sie Ihren richtigen Namen.",
         "infoMessageTryAgain": "Etwas ist schief gelaufen. Bitte versuche es erneut",
         "blacklistedCountriesExcuse": "Leider können wir derzeit die folgenden Länder nicht unterstützen:",
-        "statusPendingText": "Sie haben Ihren KYC-Antrag erfolgreich abgeschlossen. Die Überprüfung steht noch aus und Sie können in Kürze mit einer Entscheidung rechnen. <br \/> <br \/> Normalerweise wird die Entscheidung noch am selben Tag getroffen, kann aber in manchen Fällen bis zu 3 Tage dauern.",
-        "statusPendingTitle": "KYC abgeschlossen. Warten auf die Ergebnisse",
+        "statusPendingText": "Sie haben Ihren KYC-Antrag erfolgreich abgeschlossen. Die Prüfung ist noch nicht abgeschlossen und Sie können in Kürze mit einer Entscheidung rechnen.<br \/><br \/>In der Regel wird die Entscheidung noch am selben Tag getroffen, in einigen Fällen kann sie bis zu 3 Tage dauern.",
         "resendInBtn": "ERNEUT SENDEN IN {value}",
         "statusRejectTitle": "Antrag abgelehnt",
         "statusRejectText": "Ihre Bewerbung wurde von der internen Revision abgelehnt. Bitte lesen Sie unsere Anforderungen und AGB sorgfältig durch, bevor Sie sich erneut bewerben",
@@ -55,6 +55,8 @@
         "retryKycBtn": "Führen Sie KYC erneut durch",
         "unsupportedCountriesLink": "Siehe die Liste",
         "unsupportedCountriesDisclaimer": "Einwohner bestimmter Länder können derzeit keine SORA Card beantragen",
-        "statusRejectReason": "Ablehnungsgrund"
+        "statusRejectReason": "Ablehnungsgrund",
+        "userNotFound": "Keine Handynummer gefunden, bitte überprüfen Sie sie erneut und versuchen Sie es erneut.",
+        "code": "Code"
     }
 }
diff --git a/src/lang/card/en.json b/src/lang/card/en.json
@@ -9,12 +9,13 @@
         "firstNamePlaceholder": "First name",
         "lastNamePlaceholder": "Last name",
         "phonePlaceholder": "Phone Number",
+        "statusPendingTitle": "Verification in progress",
         "sendEmailLinkBtn": "Send link",
         "statusAcceptText": "Your KYC verification is successful and we are already preparing to send you the SORA card!",
         "noFreeKycTitle": "No more free attempts",
         "unsupportedCountries": "Unsupported Countries",
         "getSoraCardTitle": "Get SORA Card",
-        "alreadyAppliedTip": "I've already applied",
+        "alreadyAppliedTip": "I already applied",
         "getSoraCardBtn": "Get SORA Card for free",
         "bridgeTokensBtn": "Bridge tokens",
         "depositX1Btn": "Buy XOR",
@@ -45,8 +46,7 @@
         "personalNameInputDesc": "Use your real name.",
         "infoMessageTryAgain": "Something went wrong. Please, try again",
         "blacklistedCountriesExcuse": "Unfortunately, at this moment we’re not able to support the following countries:",
-        "statusPendingText": "You have successfully completed your KYC application. The review is pending and you can expect a decision shortly.<br \/><br \/>Usually the decision is made the same day, but in some cases can take up to 3 days.",
-        "statusPendingTitle": "KYC completed. Waiting for the results",
+        "statusPendingText": "You have successfully completed your KYC application. The review is pending and you can expect a decision shortly.<br \/><br \/>Usually the decision is made the same day and in some cases can take up to 3 days.",
         "resendInBtn": "RESEND IN {value}",
         "statusRejectTitle": "Application rejected",
         "statusRejectText": "Your application has been rejected by internal audit, please check out our requirements and T&S carefully before applying again",
@@ -55,6 +55,8 @@
         "retryKycBtn": "Try to complete KYC again",
         "unsupportedCountriesLink": "See the list",
         "unsupportedCountriesDisclaimer": "Residents from certain countries can not apply for SORA Card at this moment",
-        "statusRejectReason": "Rejection reason"
+        "statusRejectReason": "Rejection reason",
+        "userNotFound": "No mobile number found, please recheck it and try again.",
+        "code": "Code"
     }
 }
diff --git a/src/lang/card/es.json b/src/lang/card/es.json
@@ -9,6 +9,7 @@
         "firstNamePlaceholder": "Nombre de pila",
         "lastNamePlaceholder": "Apellido",
         "phonePlaceholder": "Número de teléfono",
+        "statusPendingTitle": "Verificación en progreso",
         "sendEmailLinkBtn": "Enviar enlace",
         "statusAcceptText": "¡Tu verificación KYC fue exitosa y ya nos estamos preparando para enviarte la tarjeta SORA!",
         "noFreeKycTitle": "No más intentos gratis",
@@ -45,8 +46,7 @@
         "personalNameInputDesc": "Usa tu nombre real.",
         "infoMessageTryAgain": "Algo salió mal. Inténtalo de nuevo",
         "blacklistedCountriesExcuse": "Lamentablemente, en este momento no podemos admitir los siguientes países:",
-        "statusPendingText": "Ha completado con éxito su solicitud KYC. La revisión está pendiente y puede esperar una decisión en breve. <br \/> <br \/> Por lo general, la decisión se toma el mismo día, pero en algunos casos puede demorar hasta 3 días.",
-        "statusPendingTitle": "KYC completado. Esperando los resultados",
+        "statusPendingText": "Ha completado correctamente su solicitud KYC. La revisión está pendiente y puede esperar una decisión en breve.<br \/><br \/>Normalmente la decisión se toma el mismo día y en algunos casos puede tardar hasta 3 días.",
         "resendInBtn": "REENVIAR EN {value}",
         "statusRejectTitle": "Solicitud rechazada",
         "statusRejectText": "Su solicitud ha sido rechazada por la auditoría interna, consulte nuestros requisitos y T&S detenidamente antes de volver a presentar la solicitud.",
@@ -55,6 +55,8 @@
         "retryKycBtn": "Complete KYC nuevamente",
         "unsupportedCountriesLink": "ver la lista",
         "unsupportedCountriesDisclaimer": "Los residentes de ciertos países no pueden solicitar la Tarjeta SORA en este momento",
-        "statusRejectReason": "Motivo de rechazo"
+        "statusRejectReason": "Motivo de rechazo",
+        "userNotFound": "No se ha encontrado ningún número de móvil, vuelva a comprobarlo e inténtelo de nuevo.",
+        "code": "Código"
     }
 }
diff --git a/src/lang/card/fr.json b/src/lang/card/fr.json
@@ -9,6 +9,7 @@
         "firstNamePlaceholder": "Prénom",
         "lastNamePlaceholder": "Nom de famille",
         "phonePlaceholder": "Numéro de téléphone",
+        "statusPendingTitle": "Vérification en cours",
         "sendEmailLinkBtn": "Envoyer le lien",
         "statusAcceptText": "Votre vérification KYC a été validée et nous préparons déjà votre carte pour vous l'envoyer!",
         "noFreeKycTitle": "Nombre d'essais gratuits épuisé",
@@ -45,8 +46,7 @@
         "personalNameInputDesc": "Utilisez votre vrai nom.",
         "infoMessageTryAgain": "Une erreur s'est produite. Veuillez réessayer",
         "blacklistedCountriesExcuse": "Malheureusement, pour le moment, nous ne sommes pas en mesure de prendre en charge les pays suivants:",
-        "statusPendingText": "Vous avez terminé avec succès votre demande KYC. L'examen est en cours et vous pouvez vous attendre à une décision sous peu. <br \/> <br \/> Habituellement, la décision est prise le jour même, mais dans certains cas, cela peut prendre jusqu'à 3 jours.",
-        "statusPendingTitle": "KYC terminé. En attendant les résultats",
+        "statusPendingText": "Vous avez complété avec succès votre demande KYC. L'examen est en cours et vous pouvez vous attendre à recevoir une décision sous peu.<br \/><br \/>En général, la décision est prise le jour même, mais dans certains cas, elle peut prendre jusqu'à trois jours.",
         "resendInBtn": "RENVOYER DANS {value}",
         "statusRejectTitle": "Demande rejetée",
         "statusRejectText": "Votre candidature a été rejetée par l'audit interne, veuillez vérifier attentivement nos exigences et nos conditions générales avant de postuler de nouveau",
@@ -55,6 +55,8 @@
         "retryKycBtn": "Complétez à nouveau la procédure de KYC",
         "unsupportedCountriesLink": "Voir la liste",
         "unsupportedCountriesDisclaimer": "Les résidents de certains pays ne peuvent pas demander de carte SORA pour le moment",
-        "statusRejectReason": "Motif de rejet"
+        "statusRejectReason": "Motif de rejet",
+        "userNotFound": "Aucun numéro de portable trouvé, veuillez le revérifier et réessayer.",
+        "code": "Code"
     }
 }