Commit f254fd21 authored by Olivia Madrid's avatar Olivia Madrid

token onboarding notice flow

parent 8df6b49e
Pipeline #118263163 passed with stages
in 89 minutes and 24 seconds
<div class="m-walletBalance--cash" *ngIf="!inProgress">
<div *ngIf="!loaded" class="m-wallet__spinner">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
<div class="m-walletBalance--cash" *ngIf="loaded">
<div
class="m-walletBalance---cash__onboardingNotice"
*ngIf="!hasAccount || !account.bankAccount"
*ngIf="viewId !== 'settings' && (!hasAccount || !account.bankAccount)"
>
<p (click)="scrollToSettings()">
<a>Add your bank information</a>
</p>
<p>Start receiving cash payouts by adding your bank details.</p>
<p>
<ng-container *ngIf="!hasAccount"
>Start receiving cash payouts by adding your bank details.
</ng-container>
<ng-container *ngIf="hasAccount"
>Finish adding your bank details to start receiving cash payouts.
</ng-container>
</p>
</div>
<div class="m-walletBalance--cash__colContainer">
<!-- ---PENDING BALANCE ------------------------------------------------- -->
<!-- ---PENDING BALANCE ------------------- -->
<div class="m-walletBalance--cash__col">
<div class="m-walletBalance--cash__colTitle">
Pending Balance<m-tooltip icon="help"
>The total amount of cash you are scheduled to receive from wires
and/or earnings. The payout date is estimated and it may take up to 7
days before your balance reaches your bank account.
>The total amount of cash you are scheduled to receive from
wires<ng-container *ngIf="isPro"> and/or Pro earnings</ng-container>.
The payout date is an estimation and it may take up to 7 days before
your cash reaches your bank account.
</m-tooltip>
</div>
<div class="m-walletBalance--cash__colValWrapper" *ngIf="!hasAccount">
......@@ -41,7 +53,8 @@
</div>
</ng-container>
</div>
<!-- ---TOTAL PAID OUT------------------------------------------------- -->
<!-- ---TOTAL PAID OUT ------------------- -->
<div class="m-walletBalance--cash__col" *ngIf="hasAccount">
<div class="m-walletBalance--cash__colTitle">
......@@ -61,7 +74,9 @@
>
</div>
</div>
<!-- ---PRO EARNINGS------------------------------------------------- -->
<!-- ---PRO EARNINGS ------------------- -->
<div class="m-walletBalance--cash__col" *ngIf="isPro">
<div class="m-walletBalance--cash__colTitle">
Pro Earnings<m-tooltip icon="help"
......
......@@ -10,7 +10,7 @@ import {
} from '@angular/core';
import { Client } from '../../../../services/api/client';
import { Session } from '../../../../services/session';
import { WalletDashboardService } from '../dashboard.service';
import { WalletDashboardService, WalletCurrency } from '../dashboard.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import * as moment from 'moment';
import { Subscription } from 'rxjs';
......@@ -21,7 +21,10 @@ import { ConfigsService } from '../../../../common/services/configs.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WalletBalanceCashComponent implements OnInit, OnDestroy {
inProgress: boolean = true;
@Output() scrollToCashSettings: EventEmitter<any> = new EventEmitter();
@Input() viewId: string;
@Input() cashWallet: WalletCurrency; // TODOOJM USE ME & make me a setter
account;
hasAccount: boolean = true;
isPro: boolean = false;
......@@ -34,8 +37,6 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
paramsSubscription: Subscription;
loaded: boolean = false;
@Output() scrollToCashSettings: EventEmitter<any> = new EventEmitter();
constructor(
protected client: Client,
protected cd: ChangeDetectorRef,
......@@ -76,19 +77,25 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
.endOf('month')
.format('ddd Do MMM');
this.account = await this.walletService.getStripeAccount();
if (!this.account || !this.account.accountNumber) {
// this.account = await this.walletService.getStripeAccount();
// if (!this.account || !this.account.accountNumber) {
if (this.cashWallet.address !== 'stripe') {
this.hasAccount = false;
this.pendingBalance = this.formatBalance(0);
this.totalPaidOut = this.formatBalance(0);
} else {
this.pendingBalance = this.formatBalance(
this.account.pendingBalance.amount / 100
);
if (this.account.bankAccount) {
this.currency = this.account.bankAccount.currency.toUpperCase();
}
this.hasAccount = true;
this.pendingBalance = this.formatBalance(this.cashWallet.balance);
this.currency = this.cashWallet.label.toUpperCase();
this.account = await this.walletService.getStripeAccount();
// this.pendingBalance = this.formatBalance(
// this.account.pendingBalance.amount / 100
// );
// if (this.account.bankAccount) {
// this.currency = this.account.bankAccount.currency.toUpperCase();
// }
let totalPaidOutRaw =
(this.account.totalBalance.amount -
......@@ -103,14 +110,10 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.totalPaidOut = this.formatBalance(totalPaidOutRaw);
}
this.inProgress = false;
this.detectChanges();
}
async getProEarnings() {
this.inProgress = true;
this.detectChanges();
try {
const response: number = await this.walletService.getProEarnings();
this.proEarnings = this.formatBalance(response);
......@@ -118,7 +121,6 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
console.error(e.message);
this.proEarnings = this.formatBalance(0);
}
this.inProgress = false;
this.detectChanges();
}
......
......@@ -21,12 +21,19 @@
(tabChanged)="updateCurrency($event)"
></m-shadowboxHeader__tabs>
<div class="m-shadowboxLayout__body">
<div class="m-walletDashboardBalances__wrapper">
<div
class="m-walletDashboardBalances__wrapper"
*ngIf="
activeCurrencyId === 'tokens' || activeCurrencyId === 'cash'
"
>
<m-walletTokenOnboarding
*ngIf="
activeCurrencyId === 'tokens' && !tokenOnboardingComplete
"
(onboardingCompleted)="tokenOnboardingCompleted()"
[hasAddress]="hasOnchainAddress"
[phoneVerified]="phoneVerified"
(onboardingComplete)="tokenOnboardingCompleted()"
(scrollToTokenSettings)="scrollToSettings('tokens')"
></m-walletTokenOnboarding>
<m-walletBalance--tokens
......@@ -37,6 +44,8 @@
<m-walletBalance--cash
class="m-shadowboxLayout__body"
*ngIf="activeCurrencyId === 'cash'"
[viewId]="activeViewId"
[cashWallet]="wallet.cash"
(scrollToCashSettings)="scrollToSettings('cash')"
></m-walletBalance--cash>
</div>
......@@ -67,6 +76,7 @@
*ngIf="activeCurrencyId === 'tokens'"
></m-walletTransactions--tokens>
<m-walletTransactions--cash
[cashWallet]="wallet.cash"
*ngIf="activeCurrencyId === 'cash'"
[noAccount]="wallet.cash.address === null"
></m-walletTransactions--cash>
......@@ -76,18 +86,18 @@
<m-walletSettings--tokens
class="m-walletDashboardViews__view"
*ngIf="activeCurrencyId === 'tokens'"
(onchainAddressChanged)="loadWallet()"
#tokenSettings
(onchainAddressChanged)="onchainAddressChanged()"
></m-walletSettings--tokens>
<m-walletSettings--cash
class="m-walletDashboardViews__view"
*ngIf="activeCurrencyId === 'cash'"
[cashWallet]="wallet.cash"
(accountChanged)="loadWallet()"
#cashSettings
></m-walletSettings--cash>
<m-walletSettings--eth
class="m-walletDashboardViews__view"
*ngIf="activeCurrencyId === 'eth'"
[ethWallet]="wallet.eth"
(scrollToTokenSettings)="scrollToSettings('tokens')"
></m-walletSettings--eth>
<m-walletSettings--btc
......
......@@ -363,203 +363,261 @@ m-walletDashboard {
}
}
}
}
// *******************************************************
// ** SETTINGS - COMMON STYLES ***************************
// *******************************************************
// *******************************************************
// ** SETTINGS - COMMON STYLES ***************************
// *******************************************************
.m-walletSettings {
// font-weight: 300;
@include m-theme() {
color: themed($m-textColor--primary);
}
m-shadowboxSubmitButton {
margin: 27px 0 0 0;
}
h2 {
margin: 0;
font-size: 26px;
line-height: 34px;
}
h4 {
margin: 0;
font-size: 21px;
line-height: 28px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
.m-walletSettings {
// font-weight: 300;
}
a {
// font-weight: 300;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
line-height: 19px;
}
p {
font-size: 14px;
line-height: 19px;
margin: 23px 0 0 0;
font-weight: 400; // TODOOJM - make this 300 on the install metamask page
@include m-theme() {
color: themed($m-textColor--tertiary);
color: themed($m-textColor--primary);
}
m-shadowboxSubmitButton {
margin: 27px 0 0 0;
}
}
.m-walletSettingsView--addressCurrent {
h2 {
margin-bottom: 23px;
margin: 0;
font-size: 26px;
line-height: 34px;
}
}
.m-walletSettingsView--addressCurrent__title {
margin-bottom: 13px;
}
.m-walletSettingsView--addressCurrent__addressContainer {
display: flex;
flex-flow: row wrap;
font-size: 15px;
line-height: 20px;
div:first-child {
margin: 0 18px 8px 0;
@include m-theme() {
color: themed($m-textColor--primary);
}
h4 {
margin: 0;
font-size: 21px;
line-height: 28px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
// font-weight: 300;
}
a {
// font-weight: 300;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
line-height: 20px;
font-weight: 300;
line-height: 19px;
}
p {
font-size: 14px;
line-height: 19px;
margin: 23px 0 0 0;
font-weight: 400; // TODOOJM - make this 300 on the install metamask page
@include m-theme() {
color: themed($m-textColor--tertiary);
}
}
}
.m-walletSettings__setupOptions__recommendation {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
font-size: 12px;
line-height: 16px;
margin: 31px 0 0 0;
@include m-theme() {
color: themed($m-textColor--tertiary);
.m-walletSettingsView--addressCurrent {
h2 {
margin-bottom: 23px;
}
}
i {
font-size: 18px;
margin-right: 8px;
.m-walletSettingsView--addressCurrent__title {
margin-bottom: 13px;
}
}
.m-walletSettingsView__setupOptions__container {
display: flex;
flex-flow: row wrap;
li {
box-sizing: border-box;
flex: 1 1 50%;
padding: 16px 0 16px 54px;
.m-walletSettingsView--addressCurrent__addressContainer {
display: flex;
flex-flow: row wrap;
font-size: 15px;
line-height: 20px;
div:first-child {
margin: 0 18px 8px 0;
@include m-theme() {
color: themed($m-textColor--primary);
}
}
a {
font-size: 14px;
line-height: 20px;
font-weight: 300;
}
}
p {
.m-walletSettings__setupOptions__recommendation {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
font-size: 12px;
line-height: 16px;
margin: 31px 0 0 0;
@include m-theme() {
color: themed($m-textColor--primary);
color: themed($m-textColor--tertiary);
}
i {
font-size: 18px;
margin-right: 8px;
}
}
.m-walletSettingsView__setupOption--custom {
div {
margin-top: 16px;
display: inline-block;
a,
span {
.m-walletSettingsView__setupOptions__container {
display: flex;
flex-flow: row wrap;
li {
box-sizing: border-box;
flex: 1 1 50%;
padding: 16px 0 16px 54px;
}
p {
@include m-theme() {
color: themed($m-textColor--primary);
}
}
.m-walletSettingsView__setupOption--custom {
div {
margin-top: 16px;
display: inline-block;
margin-right: 5px;
a,
span {
display: inline-block;
margin-right: 5px;
font-weight: 300;
}
span {
@include m-theme() {
color: themed($m-textColor--tertiary);
}
}
}
}
.m-walletSettingsView__setupOption--metamask {
padding-right: 32px;
padding-left: 0;
border-width: 0;
border-right-width: 1px;
border-style: solid;
@include m-theme() {
border-image: linear-gradient(
transparent,
rgba(themed($m-grey-200), 0.6),
transparent
)
10 100%;
}
a {
font-weight: 300;
}
span {
@include m-theme() {
color: themed($m-textColor--tertiary);
}
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
img {
height: 34px;
margin-right: 12px;
}
}
}
.m-walletSettingsView__setupOption--metamask {
padding-right: 32px;
padding-left: 0;
border-width: 0;
border-right-width: 1px;
border-style: solid;
span.m-walletSettings__address--emphasis {
@include m-theme() {
border-image: linear-gradient(
transparent,
rgba(themed($m-grey-200), 0.6),
transparent
)
10 100%;
}
a {
font-weight: 300;
color: themed($m-textColor--primary);
}
}
div {
display: flex;
a.m-walletSettings__backButton {
margin-top: 33px;
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
img {
height: 34px;
margin-right: 12px;
align-items: baseline;
text-decoration: none;
@include m-theme() {
color: themed($m-textColor--tertiary);
}
&:hover {
span {
text-decoration: underline;
}
}
i {
font-size: 14px;
font-weight: 300;
margin-right: 10px;
}
}
}
span.m-walletSettings__address--emphasis {
@include m-theme() {
color: themed($m-textColor--primary);
}
}
a.m-walletSettings__backButton {
margin-top: 33px;
display: inline-flex;
flex-flow: row nowrap;
align-items: baseline;
text-decoration: none;
@include m-theme() {
color: themed($m-textColor--tertiary);
}
&:hover {
span {
text-decoration: underline;
@media screen and (max-width: $min-tablet) {
.m-walletSettingsView__setupOptions__container {
li.m-walletSettingsView__setupOption--custom {
padding-left: 32px;
}
}
}
i {
font-size: 14px;
font-weight: 300;
margin-right: 10px;
}
}
@media screen and (max-width: $min-tablet) {
.m-walletSettingsView__setupOptions__container {
li.m-walletSettingsView__setupOption--custom {
padding-left: 32px;
@media screen and (max-width: 520px) {
.m-walletSettingsView__setupOptions__container {
li {
flex-basis: 100%;
&.m-walletSettingsView__setupOption--metamask {
padding: 16px 0 32px 0;
border-right-width: 0;
}
&.m-walletSettingsView__setupOption--custom {
padding: 32px 0 0 0;
}
}
}
}
}
@media screen and (max-width: 520px) {
.m-walletSettingsView__setupOptions__container {
li {
flex-basis: 100%;
&.m-walletSettingsView__setupOption--metamask {
padding: 16px 0 32px 0;
border-right-width: 0;
@media screen and (max-width: $max-mobile) {
[class*='m-walletTokenOnboardingStep--'] {
padding: 19px;
}
m-walletModal {
.m-walletModal__close {
top: 14px;
right: 20px;
@include m-theme() {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
}
&:hover {
@include m-theme() {
box-shadow: none;
}
}
}
.m-walletModal {
min-width: 90vw;
min-height: 96vh;
padding: 20px;
.m-phoneInput__wrapper {
min-width: 200px;