Feature/x1-widget (#876)

* move to separate module

* add enabling flag

* Update getters.ts

* remove route

* Update types.ts

* x1 widget

* redesign

* refactor & add X1

* Update RoadMap.vue

* improvements in flow & KYC status

* remove logs

* fixes

* take into account different statuses matches

* settings & stub

* fixes & x1 enabling

* add prod settings

* wip

* organize credentials

* change css

* Update env.json

* css refactoring

* Update env.json

* fixes

* roll out prod widget X1

* remove console.log

* refactor & fixes

* handle no record response

* Update SoraCardIntroPage.vue

src/components/SoraCard/ConfirmationInfo.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="sora-card container" v-loading="loading">
+    <div class="sora-card__card">
+      <s-image
+        src="card/sora-card-front.png"
+        lazy
+        fit="cover"
+        draggable="false"
+        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"
+        />
+      </div>
+    </div>
+
+    <div class="sora-card__header">{{ headerText }}</div>
+    <p class="sora-card__status-info">
+      We will let you know if you’re eligible for the SORA card as soon as we get information from our partner,
+      Paywings. We will notify you.
+    </p>
+
+    <s-button
+      v-if="currentStatus === VerificationStatus.Rejected"
+      type="primary"
+      class="sora-card__btn s-typography-button--large"
+    >
+      <span class="text">{{ buttonText }}</span>
+    </s-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+import { mixins } from '@soramitsu/soraneo-wallet-web';
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { VerificationStatus } from '@/types/card';
+import { getter } from '@/store/decorators';
+
+@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';
+  }
+
+  get headerText(): Nullable<string> {
+    if (!this.currentStatus) return 'KYC completed. Waiting for the results';
+
+    switch (this.currentStatus) {
+      case VerificationStatus.Pending:
+        return 'KYC completed. Waiting for the results';
+      case VerificationStatus.Accepted:
+        return 'You’re approved for SORA Card';
+      case VerificationStatus.Rejected:
+        return 'You’re not been approved for SORA Card';
+      default:
+        return null;
+    }
+  }
+
+  get computedIconClass(): string {
+    const base = 'sora-card__card-icon';
+
+    if (!this.currentStatus) return `${base}--waiting`;
+
+    switch (this.currentStatus) {
+      case VerificationStatus.Pending:
+        return `${base}--waiting`;
+      case VerificationStatus.Accepted:
+        return `${base}--succcess`;
+      case VerificationStatus.Rejected:
+        return `${base}--reject`;
+      default:
+        return '';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sora-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &__header {
+    margin-top: var(--s-size-mini);
+    text-align: center;
+    font-weight: 600;
+    font-size: 28px;
+    width: 80%;
+  }
+  &__status-info {
+    margin-top: $basic-spacing;
+    text-align: center;
+    width: 85%;
+  }
+  &__card {
+    position: relative;
+
+    &-image {
+      width: 360px;
+    }
+    &-icon {
+      height: 40px;
+      width: 40px;
+      right: -10px;
+      bottom: 0px;
+      position: absolute;
+      border-radius: 50%;
+
+      &-element {
+        display: block;
+        color: #fff;
+        margin: 20%;
+      }
+
+      &--waiting {
+        background-color: var(--s-color-base-content-secondary);
+        opacity: 0.95;
+      }
+      &--success {
+        background-color: var(--s-color-theme-secondary);
+      }
+      &--reject {
+        background-color: var(--s-color-status-error);
+      }
+    }
+  }
+
+  .s-icon-basic-check-mark-24 {
+    color: var(--s-color-status-success);
+  }
+}
+</style>

src/components/SoraCard/Paywings/PaywingsDialog.vue

@@ -0,0 +1,48 @@
+<template>
+  <dialog-base v-loading="loading" :visible.sync="isVisible" class="pw-dialog">
+    <div class="wrapper">To be implemented</div>
+  </dialog-base>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { getter, state } from '@/store/decorators';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { loadScript, unloadScript } from 'vue-plugin-load-script';
+
+// TODO: Set up widget for payment
+@Component({
+  components: {
+    DialogBase: components.DialogBase,
+  },
+})
+export default class PaywingsDialog extends Mixins(mixins.DialogMixin, mixins.LoadingMixin) {
+  @state.soraCard.euroBalance private euroBalance!: string;
+  @getter.soraCard.accountAddress accountAddress!: string;
+
+  @Watch('isVisible', { immediate: true })
+  private handleVisibleStateChange(visible: boolean): void {
+    if (visible) {
+      this.loadPaywings();
+    } else {
+      this.unloadPaywings();
+    }
+  }
+
+  private loadPaywings(): void {
+    loadScript('https://checkout.paywings.io/HostedFields/custom/js/client.min.js').then(() => {});
+  }
+
+  private unloadPaywings(): void {
+    unloadScript('https://checkout.paywings.io/HostedFields/custom/js/client.min.js').catch(() => {});
+  }
+}
+</script>
+
+<style lang="scss">
+.pw-dialog .el-dialog {
+  .wrapper {
+    min-height: 420px;
+  }
+}
+</style>