Skip to content

Minds Frontend
Minds Frontend
Commit f640281d authored by Olivia Madrid's avatar Olivia Madrid
Browse files
Options
  • Download

updated cash balance comp and cleaned up cash settings

parent b94df65e
epic/wallet-80
1 merge request!686WIP: Epic/wallet 80
Pipeline #117168567 failed with stages
in 6 minutes and 17 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 860 additions and 471 deletions
src/app/common/components/phone-input-v2/country.component.ts
View file @ f640281d
......@@ -154,6 +154,7 @@ export class PhoneInputCountryV2Component
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const uppercaseKey = $event.key.toUpperCase();
if (this.showDropdown && chars.indexOf(uppercaseKey)) {
this.lastKeyboardFocusMoment = moment();
for (let i = 0; i < this.countries.length; ++i) {
if (this.countries[i].name.trim()[0].toUpperCase() === uppercaseKey) {
this.applyFocus(i);
......
src/app/modules/wallet/v2/balance-cash/balance-cash.component.html
View file @ f640281d
<div class="m-walletBalance--cash" *ngIf="!inProgress">
<div class="m-walletBalance--cash" *ngIf="loaded">
<div
class="m-walletTransactions__onboarding"
*ngIf="!hasAccount && !onSettingsTab"
......@@ -9,9 +9,14 @@
<p>Start receiving payouts by adding your bank details.</p>
</div>
<div *ngIf="!inProgress" class="m-walletBalance--cash__colContainer">
<!-- ---PENDING BALANCE ------------------------------------------------- -->
<div class="m-walletBalance--cash__col">
<div class="m-walletBalance--cash__colTitle">
Pending Balance<m-tooltip icon="help">placeholder</m-tooltip>
Pending Balance<m-tooltip icon="help"
>TO DO: this is the total amount of wires and earnings that you will
receive. Add something about payout date being estimated. And might
take up to 7 days
</m-tooltip>
</div>
<div class="m-walletBalance--cash__colValWrapper">
<span class="m-walletBalance--cash__colVal--int">{{
......@@ -26,10 +31,18 @@
>.{{ pendingBalance.frac }}</span
>
</div>
<div class="m-walletBalance--cash__colSubtitle">
<p>Estimated Payout</p>
<p>{{ nextPayoutDate }}</p>
</div>
</div>
<!-- ---TOTAL PAID OUT------------------------------------------------- -->
<div class="m-walletBalance--cash__col" *ngIf="hasAccount">
<div class="m-walletBalance--cash__colTitle">
Total Paid Out<m-tooltip icon="help">placeholder</m-tooltip>
Total Paid Out<m-tooltip icon="help"
>The amount you've already received</m-tooltip
>
</div>
<div class="m-walletBalance--cash__colValWrapper">
......@@ -43,14 +56,32 @@
>
</div>
</div>
<div class="m-walletBalance--cash__col" *ngIf="hasAccount">
<!-- ---PRO EARNINGS------------------------------------------------- -->
<div class="m-walletBalance--cash__col" *ngIf="isPro">
<div class="m-walletBalance--cash__colTitle">
Next Payout<m-tooltip icon="help">placeholder</m-tooltip>
Pro Earnings<m-tooltip icon="help"
>At the end of each month, your Pro earnings will move into your
pending balance if you've reached the $100 threshold. When this
happens, your Pro earnings will be reset to zero. If you haven't
reached the threshold, your earnings will rollover to the next
month.</m-tooltip
>
</div>
<div class="m-walletBalance--cash__colValWrapper">
<span class="m-walletBalance--cash__colVal--int">{{
nextPayoutDate
}}</span>
proEarnings.int | number: '1.0-0' | currency: 'USD' | slice: 0:-3
}}</span
><span
class="m-walletBalance--cash__colVal--frac"
*ngIf="pendingBalance.frac"
>.{{ proEarnings.frac }}</span
>
</div>
<div class="m-walletBalance--cash__colSubtitle">
<p>
Go to <a routerLink="/analytics/dashboard/earnings">Pro Analytics</a>
</p>
</div>
</div>
</div>
......
src/app/modules/wallet/v2/balance-cash/balance-cash.component.scss
View file @ f640281d
......@@ -6,7 +6,7 @@ m-walletBalance--cash {
font-size: 15px;
line-height: 20px;
@include m-theme() {
color: themed($m-grey-300);
color: themed($m-textColor--secondary);
}
}
.m-walletBalance--cash__colContainer {
......@@ -17,6 +17,7 @@ m-walletBalance--cash {
.m-walletBalance--cash__colTitle {
position: relative;
margin-top: 8px;
m-tooltip {
position: relative;
margin-left: 4px;
......@@ -34,45 +35,74 @@ m-walletBalance--cash {
.m-walletBalance--cash__colTitle {
.m-tooltip--bubble {
position: absolute;
right: -24px;
min-width: 140px;
right: -64px;
}
}
}
.m-walletBalance--cash__col {
max-width: 200px;
.m-walletBalance--cash__colTitle {
font-size: 16px;
line-height: 21px;
min-width: 78px;
}
.m-walletBalance--cash__colVal--int {
font-size: 24px;
line-height: 32px;
@include m-theme() {
color: themed($m-textColor--primary);
}
}
.m-walletBalance--cash__colVal--frac {
font-size: 17px;
line-height: 23px;
}
.m-walletBalance--cash__colSubtitle {
p,
a {
font-size: 13px;
line-height: 15px;
}
p {
margin: 8px 0 0 0;
@include m-theme() {
color: themed($m-textColor--tertiary);
}
}
p:first-child {
margin-top: 12px;
}
a {
margin-top: 0;
}
}
}
.m-walletBalance--cash__colTitle {
min-width: 78px;
}
// .m-walletBalance--cash__colTitle {
// min-width: 78px;
// font-size: 16px;
// line-height: 21px;
// }
.m-walletBalance--cash__colValWrapper {
font-size: 13px;
line-height: 18px;
font-weight: 500;
margin-top: 8px;
}
.m-walletBalance--cash__colVal--int {
font-size: 16px;
line-height: 21px;
@include m-theme() {
color: themed($m-grey-800);
}
}
.m-walletBalance--cash__colVal--frac {
font-size: 13px;
line-height: 18px;
}
// .m-walletBalance--cash__colVal--int {
// font-size: 16px;
// line-height: 21px;
// @include m-theme() {
// color: themed($m-grey-800);
// }
// }
// .m-walletBalance--cash__colVal--frac {
// font-size: 13px;
// line-height: 18px;
// }
a {
display: inline-block;
margin-top: 14px;
......
src/app/modules/wallet/v2/balance-cash/balance-cash.component.ts
View file @ f640281d
......@@ -14,6 +14,7 @@ import { WalletDashboardService } from '../dashboard.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import * as moment from 'moment';
import { Subscription } from 'rxjs';
import { ConfigsService } from '../../../../common/services/configs.service';
@Component({
selector: 'm-walletBalance--cash',
templateUrl: './balance-cash.component.html',
......@@ -21,14 +22,17 @@ import { Subscription } from 'rxjs';
})
export class WalletBalanceCashComponent implements OnInit, OnDestroy {
inProgress: boolean = true;
stripeAccount;
account;
hasAccount: boolean = true;
isPro: boolean = false;
pendingBalance;
totalPaidOut;
nextPayoutDate = '';
proEarnings;
onSettingsTab: boolean = false;
currency = 'usd';
paramsSubscription: Subscription;
loaded: boolean = false;
@Output() scrollToCashSettings: EventEmitter<any> = new EventEmitter();
constructor(
......@@ -36,7 +40,8 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
protected cd: ChangeDetectorRef,
protected session: Session,
protected walletService: WalletDashboardService,
protected route: ActivatedRoute
protected route: ActivatedRoute,
private configs: ConfigsService
) {}
ngOnInit() {
......@@ -46,8 +51,14 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.detectChanges();
}
);
// TOOOJM toggle
this.isPro = true;
// this.isPro = this.configs.get('pro');
this.load();
this.getProEarnings();
// this.loaded = true;
this.detectChanges();
}
ngOnDestroy() {
......@@ -57,28 +68,28 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
}
async load() {
// TODOOJM $stripe - this is not accurate for all stripe accounts
// TODOOJM confirm that mark has migrated all stripe accts to monthly intervals
this.nextPayoutDate = moment()
.endOf('month')
.format('ddd Do MMM');
this.stripeAccount = await this.walletService.getStripeAccount();
this.account = await this.walletService.getStripeAccount();
if (!this.stripeAccount || !this.stripeAccount.accountNumber) {
if (!this.account || !this.account.accountNumber) {
this.hasAccount = false;
this.pendingBalance = this.formatBalance(0);
this.totalPaidOut = this.formatBalance(0);
} else {
this.pendingBalance = this.formatBalance(
this.stripeAccount.pendingBalance.amount / 100
this.account.pendingBalance.amount / 100
);
if (this.stripeAccount.bankAccount) {
this.currency = this.stripeAccount.bankAccount.currency.toUpperCase();
if (this.account.bankAccount) {
this.currency = this.account.bankAccount.currency.toUpperCase();
}
let totalPaidOutRaw =
(this.stripeAccount.totalBalance.amount -
this.stripeAccount.pendingBalance.amount) /
(this.account.totalBalance.amount -
this.account.pendingBalance.amount) /
100;
if (totalPaidOutRaw < 0) {
......@@ -92,7 +103,25 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.detectChanges();
}
async getProEarnings() {
this.inProgress = true;
this.detectChanges();
// try {
// const response: number = await this.walletService.getProEarnings();
// this.proEarnings = this.formatBalance(response);
// } catch (e) {
// console.error(e.message);
// this.proEarnings = this.formatBalance(0);
// }
this.proEarnings = this.formatBalance(123.4);
this.inProgress = false;
this.loaded = true;
this.detectChanges();
}
formatBalance(balance) {
console.log(balance);
const formattedBalance = {
total: balance,
int: 0,
......@@ -102,12 +131,15 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
return formattedBalance;
}
const splitBalance = balance.toString().split('.');
console.log('888 splitBal...', splitBalance);
formattedBalance.int = splitBalance[0];
console.log('888 int...', formattedBalance);
if (splitBalance[1]) {
const frac = splitBalance[1].toString();
formattedBalance.frac = frac.length < 2 ? frac.concat('0') : frac;
console.log('888 frac...', formattedBalance);
}
return formattedBalance;
}
......
src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.ts
View file @ f640281d
......@@ -7,6 +7,7 @@ import {
Input,
Inject,
PLATFORM_ID,
ViewRef,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Client } from '../../../../services/api/client';
......@@ -115,7 +116,9 @@ export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
if (!(this.cd as ViewRef).destroyed) {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
}
src/app/modules/wallet/v2/dashboard.component.scss
View file @ f640281d
......@@ -101,15 +101,16 @@ m-walletDashboard {
display: block;
flex: 0 1 auto;
margin: 0 0 0 21px;
min-width: 105px;
// min-width: 105px;
box-sizing: border-box;
.m-shadowboxSubmitButton {
box-sizing: border-box;
max-height: none;
min-height: 42px;
height: 42px;
min-width: 0;
// height: 42px;
height: auto;
min-width: 105px;
font-weight: 300;
padding: 7px 15px;
font-size: 15px;
......@@ -121,6 +122,12 @@ m-walletDashboard {
}
}
.m-walletModal--confirmation {
& > p {
margin-top: none;
}
}
// *******************************************************
// ** DASHBOARD - MEDIA QUERIES **************************
// *******************************************************
......@@ -163,14 +170,21 @@ m-walletDashboard {
.m-walletForm__buttonsContainer {
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
justify-content: space-evenly;
margin-top: 10px;
m-shadowboxSubmitButton {
margin-top: 8px;
}
}
.m-walletForm__nameFieldsContainer {
display: flex;
box-sizing: border-box;
[class*='m-walletForm__field'] {
flex: 1 0 50%;
flex: 1 0 auto;
&:first-child {
margin-right: 19px;
}
}
}
[class*='m-walletForm__field'] {
......@@ -281,6 +295,11 @@ m-walletDashboard {
.m-walletForm__fieldsContainer {
flex: 1 1 auto;
}
.m-walletForm__error p {
@include m-theme() {
color: themed($m-alert);
}
}
m-phoneInput {
margin-bottom: 0;
......@@ -289,6 +308,31 @@ m-walletDashboard {
min-width: 240px;
}
}
m-date__dropdowns {
select {
outline: none;
@include m-theme() {
color: themed($m-textColor--primary);
border: 1px solid themed($m-borderColor--primary);
box-shadow: 0 1px 4px 0 rgba(themed($m-black), 0.1);
}
&:focus {
@include m-theme() {
border: 1px solid themed($m-blue);
}
}
}
}
m-formInput__checkbox {
.m-formInput__checkbox {
label {
@include m-walletText--14();
}
}
}
//////////////////////////////////////////
@media screen and (max-width: 500px) {
m-shadowboxSubmitButton {
margin: 21px 0 0 0;
......@@ -360,36 +404,6 @@ m-walletDashboard {
}
}
// input {
// outline: 0;
// font-size: 15px;
// line-height: 20px;
// font-weight: 300;
// width: 0;
// min-width: 0;
// padding: 10px 20px;
// border-radius: 2px;
// cursor: text;
// @include m-theme() {
// color: themed($m-textColor--primary);
// box-shadow: 0 1px 4px 0 rgba(themed($m-black), 0.1);
// border: 1px solid themed($m-borderColor--primary);
// }
// &:not(.m-phoneInput__input) {
// @include m-theme() {
// border: 1px solid themed($m-borderColor--primary);
// }
// }
// &:focus {
// &:not(:read-only) {
// @include m-theme() {
// border-color: themed($m-blue);
// }
// }
// }
// }
.m-walletSettingsView--addressCurrent {
h2 {
margin-bottom: 23px;
......
src/app/modules/wallet/v2/dashboard.service.ts
View file @ f640281d
......@@ -419,6 +419,28 @@ export class WalletDashboardService {
return fakeData.token_chart;
}
async getProEarnings() {
return 77.3;
// try {
// const response = <any>(
// await this.client.post(
// 'api/v2/analytics/dashboards/earnings?metric=earnings_total&timespan=today'
// )
// );
// const earnings =
// response.dashboard.metrics
// .find(m => m.id === 'earnings_total')
// .visualisation.segments[0].buckets.slice(-1)[0].value / 100;
// return earnings;
// } catch (e) {
// console.error(e);
// return e;
// }
}
async getTokenTransactions(opts) {
try {
// TODOOJM uncomment
......
src/app/modules/wallet/v2/fake-data.ts
View file @ f640281d
......@@ -157,7 +157,15 @@ const fakeData = {
routingNumber: '123455678',
destination: 'bank',
status: 'active',
verified: true,
// verified: true,
verified: false,
////////////////
// bankAccount: null,
// requirement: 'external_account',
////////////////
// requirement:
// 'individual.verification.document.individual.verification.additional_documenttos_acceptance.individual.phoneexternal_accountidividual.id_number',
requirement: 'individual.verification.document', //t.individual.verification.additional_documenttos_acceptance.individual.phoneexternal_accountidividual.id_number',
bankAccount: {
id: 'qeorij_823_a0g7',
object: 'bank_account',
......@@ -177,7 +185,6 @@ const fakeData = {
payoutInterval: 'daily',
payoutDelay: 2,
payoutAnchor: null,
requirement: null,
totalBalance: {
amount: 1100,
currency: 'gbp',
......
src/app/modules/wallet/v2/phone-verification/phone-verification.component.html
View file @ f640281d
......@@ -11,9 +11,8 @@
To start earning rewards, you will need to enter a unique phone number.
</p>
</div>
<!-- TODOOJM: ensure the three options to trigger onSubmit() don't double-trigger the fx -->
<!-- <form [formGroup]="form" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()"> -->
<form [formGroup]="form">
<!-- TODOOJM: check on the enter key behavior -->
<form [formGroup]="form" (keyup.enter)="onSubmit()">
<div class="m-walletForm__wrapper">
<div class="m-walletForm__fieldsContainer">
<div class="m-walletForm__field--text stretchedField" *ngIf="!confirming">
......@@ -21,8 +20,10 @@
<label for="number" i18n>Mobile Phone Number</label>
<m-tooltip icon="help">
<ng-container i18n
>Your mobile number is used for unique identification. It is is
private and encrypted.</ng-container
>Minds will not store the number you provide. It will be hashed
using SHA-256 and combined with a salt key for privacy and unique
identification purposes. VOIP numbers are not
allowed.</ng-container
>
</m-tooltip>
</div>
......@@ -84,11 +85,6 @@
</div>
</form>
<div class="m-walletModal__footnote--privacy" *ngIf="!confirming">
Note: Minds does not store the phone numbers you provide. The numbers are
hashed using SHA-256 and combined with a salt key for privacy and security
purposes.
</div>
<div class="m-walletModal__footnote--formStatus" *ngIf="confirming">
<div class="m-walletPhoneVerification__formStatusCodeSent">
Verification code sent to +{{ form.value.number }}
......
src/app/modules/wallet/v2/phone-verification/phone-verification.component.scss
View file @ f640281d
m-walletPhoneVerification {
.m-walletModal__footnote--privacy {
margin-top: 10px;
font-size: 13px;
line-height: 18px;
}
.m-walletModal__footnote--formStatus {
.m-walletModal__footnote {
.m-walletPhoneVerification__formStatusCodeSent {
margin-bottom: 6px;
@include m-theme() {
......@@ -34,6 +29,7 @@ m-walletPhoneVerification {
.m-walletForm__row--label m-tooltip {
.m-tooltip--bubble {
right: 12px;
width: 174px;
}
}
[class*='m-walletForm__row'] {
......
src/app/modules/wallet/v2/phone-verification/phone-verification.component.ts
View file @ f640281d
......@@ -69,14 +69,11 @@ export class WalletPhoneVerificationComponent implements OnInit {
this.inProgress = true;
this.detectChanges();
try {
const response: any = await this.client.post(
'api/v2/blockchain/rewards/confirm',
{
number: this.form.value.number,
code: this.form.value.code,
secret: this.form.value.secret,
}
);
await this.client.post('api/v2/blockchain/rewards/confirm', {
number: this.form.value.number,
code: this.form.value.code,
secret: this.form.value.secret,
});
this.phoneVerificationComplete.emit();
} catch (e) {
this.invalidCode = true;
......@@ -95,7 +92,9 @@ export class WalletPhoneVerificationComponent implements OnInit {
this.detectChanges();
}
onSubmit() {
this.confirming ? this.confirmCode() : this.validateNumber();
if (!this.inProgress) {
this.confirming ? this.confirmCode() : this.validateNumber();
}
}
detectChanges() {
this.cd.markForCheck();
......
src/app/modules/wallet/v2/settings-btc/settings-btc.component.html
View file @ f640281d
......@@ -31,7 +31,11 @@
<div class="m-walletForm__row--label">
<label for="addressInput" i18n>Bitcoin Address</label>
<m-tooltip icon="help">
<ng-container i18n>Placeholder</ng-container>
<ng-container i18n
>Enter the public address from your own Bitcoin wallet which
will be used to receive Bitcoin payments on Minds. Minds does
not store your Bitcoin.</ng-container
>
</m-tooltip>
</div>
<div
......
src/app/modules/wallet/v2/settings-cash/bank-form/bank-form.component.html
View file @ f640281d
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] *ngIf="!loaded"></div>
<div class="m-walletBankForm" *ngIf="loaded">
<div class="m-walletBankForm" *ngIf="account">
<!-- HAS NOT SET UP BANK ACCOUNT / IS UPDATING BANK ACCOUNT ------------------ -->
<ng-container *ngIf="!leftMonetization">
<form
[formGroup]="bankForm"
*ngIf="!account.bankAccount || !account.bankAccount.last4 || editing"
>
<form [formGroup]="form" *ngIf="!hasBankAccount() || editing">
<p>Enter bank account details to receive payments.</p>
<!-- ***INPUT BANKCOUNTRY DROPDOWN-->
<div class="m-walletForm__field--text stretchedField" *ngIf="editingBank">
<!-- ***INPUT COUNTRY DROPDOWN-->
<div class="m-walletForm__field--text stretchedField">
<div class="m-walletSettings__row--label">
<label for="bankCountry" i18n>Country</label>
<label for="country" i18n>Country</label>
</div>
<div class="m-walletForm__row--input">
<minds-country-input
type="text"
id="bankCountry"
name="bankCountry"
formControlName="bankCountry"
id="country"
name="country"
class="form-control"
data-minds="bankCountry"
data-minds="country"
[allowed]="allowedCountries"
[country]="bankCountry.value"
(countryChange)="bankCountry.setValue($event)"
[country]="country.value"
(countryChange)="country.setValue($event)"
></minds-country-input>
<!-- <m-countryInput
type="text"
id="bankCountry"
name="bankCountry"
formControlName="bankCountry"
id="country"
name="country"
formControlName="country"
class="form-control"
data-minds="bankCountry"
data-minds="country"
[allowedCountries]="allowedCountries"
[initCountryCode]="bankCountry.value"
(countryChange)="bankCountry.setValue($event)"
[initCountryCode]="country.value"
(countryChange)="country.setValue($event)"
></m-countryInput > -->
</div>
</div>
......@@ -71,55 +66,59 @@
/>
</div>
</div>
<!-- ERROR -------------- -->
<div class="m-walletForm__error">
<p>{{ error }}</p>
</div>
<!-- FORM BUTTONS -------------- -->
<div class="m-walletForm__buttonsContainer">
<!-- TODOOJM consider a confirmation popup on cancel -->
<m-shadowboxSubmitButton
(click)="showModal = true; modalContent = 'leaveEditMode'"
[disabled]="inProgress"
color="grey"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton
(click)="createAccount()"
[disabled]="inProgress"
>Update Personal Information</m-shadowboxSubmitButton
<m-shadowboxSubmitButton (click)="addBank()" [disabled]="inProgress"
>Add Bank Account</m-shadowboxSubmitButton
>
</div>
</form>
<!-- BANK ACCOUNT IS ALREADY SET UP ------------------ -->
<div
class="m-walletSettingsView--accountSplash"
*ngIf="account.bankAccount.last4"
>
<p>Your bank account details where cash rewards are deposited.</p>
<div class="m-walletSettingsView--accountSplash__bankPreviewWrapper">
<span>
{{ account.bankAccount.bank_name }}
</span>
<span>****{{ account.bankAccount.last4 }}</span>
</div>
<div class="m-walletSettingsView--accountSplash__linkContainer">
<a (click)="enterEditMode()">Update</a>
<a (click)="showModal = true; modalContent = 'removeBank'">Remove</a>
<ng-container *ngIf="hasBankAccount() && !editing">
<div class="m-walletSettingsView--hasAccount__accountSummary">
<p>Your bank account where cash rewards are deposited.</p>
<div class="m-walletSettingsView--hasAccount__detailsWrapper">
<div class="m-walletSettingsView--hasAccount__bankWrapper">
<span>
{{ account.bankAccount.bank_name }}
</span>
<span>****{{ account.bankAccount.last4 }}</span>
</div>
<div class="m-walletSettingsView--hasAccount__linksContainer">
<a (click)="enterEditMode()">Update</a>
<a (click)="showModal = true; modalContent = 'removeBank'"
>Remove</a
>
</div>
</div>
</div>
</div>
<div>
<h4>Leave Monetization Program</h4>
<p>
For security reasons, you won't be able to rejoin the monetization
program.
</p>
<m-shadowboxSubmitButton
color="red"
(click)="showModal = true; modalContent = 'leaveMonetization'"
>Leave Monetization Program</m-shadowboxSubmitButton
>
</div>
<div class="m-walletSettingsView--hasAccount__leaveMonetization">
<h4>Leave Monetization Program</h4>
<p>
For security reasons, you won't be able to rejoin the monetization
program.
</p>
<m-shadowboxSubmitButton
color="red"
(click)="showModal = true; modalContent = 'leaveMonetization'"
>Leave Monetization Program</m-shadowboxSubmitButton
>
</div>
</ng-container>
<!-- CONFIRMATION MODAL: LEAVE EDIT MODE -------------------- -->
<m-walletModal
class="m-walletModal--confirmation"
[showModal]="showModal && modalContent === 'leaveEditMode'"
(closeModal)="showModal = false"
>
......@@ -128,39 +127,45 @@
be lost.
</p>
<div class="m-walletSettings--cash__leaveModalButtons">
<div class="m-walletForm__buttonsContainer">
<m-shadowboxSubmitButton color="grey" (click)="showModal = false"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton color="red" (click)="leaveEditMode()"
<m-shadowboxSubmitButton
color="red"
(click)="leaveEditMode()"
[disabled]="inProgress"
[saving]="inProgress"
>I'm sure</m-shadowboxSubmitButton
>
</div>
</m-walletModal>
<!-- CONFIRMATION MODAL: LEAVE MONETIZATION -------------------- -->
<m-walletModal
class="m-walletModal--confirmation"
[showModal]="showModal && modalContent === 'leaveMonetization'"
(closeModal)="showModal = false"
>
<p *ngIf="modalContent === 'leaveMonetization'">
<p>
Are you sure you want to leave the monetization program? You won't be
able to rejoin again.
</p>
<p *ngIf="modalContent === 'removeBank'">
Are you sure you want to remove your bank account information? You won't
be able to receive payments until you add another one.
</p>
<div class="m-walletSettings--cash__leaveModalButtons">
<div class="m-walletForm__buttonsContainer">
<m-shadowboxSubmitButton color="grey" (click)="showModal = false"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton color="red" (click)="leaveMonetization()"
<m-shadowboxSubmitButton
color="red"
(click)="leaveMonetization()"
[disabled]="inProgress"
[saving]="inProgress"
>I'm sure</m-shadowboxSubmitButton
>
</div>
</m-walletModal>
<!-- CONFIRMATION MODAL: REMOVE BANK -------------------- -->
<m-walletModal
class="m-walletModal--confirmation"
[showModal]="showModal && modalContent === 'removeBank'"
(closeModal)="showModal = false"
>
......@@ -168,11 +173,15 @@
Are you sure you want to remove your bank account information? You won't
be able to receive payments until you add another one.
</p>
<div class="m-walletSettings--cash__leaveModalButtons">
<div class="m-walletForm__buttonsContainer">
<m-shadowboxSubmitButton color="grey" (click)="showModal = false"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton color="red" (click)="removeBank()"
<m-shadowboxSubmitButton
color="red"
(click)="removeBank()"
[disabled]="inProgress"
[saving]="inProgress"
>I'm sure</m-shadowboxSubmitButton
>
</div>
......
src/app/modules/wallet/v2/settings-cash/bank-form/bank-form.component.ts
View file @ f640281d
import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
import {
Component,
OnInit,
Input,
ChangeDetectorRef,
Output,
EventEmitter,
} from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { requiredFor, optionalFor } from './../settings-cash.validators';
import { WalletDashboardService } from '../../dashboard.service';
......@@ -12,10 +19,11 @@ import localLabels from './local-labels';
})
export class WalletBankFormComponent implements OnInit {
@Input() allowedCountries: string[];
account;
@Input() account;
@Output() submitted: EventEmitter<any> = new EventEmitter();
form;
error: string = '';
loaded: boolean = false;
inProgress: boolean = false;
editing: boolean = false;
showModal: boolean = false;
......@@ -33,34 +41,40 @@ export class WalletBankFormComponent implements OnInit {
) {}
ngOnInit() {
// if (!this.account) {
// this.submitted.emit();
// // this.detectChanges();
// return;
// }
this.form = this.fb.group({
country: ['', Validators.required],
accountNumber: ['', Validators.required],
routingNumber: ['', requiredFor(['US'])],
});
this.getAccount();
}
async getAccount() {
this.inProgress = true;
this.detectChanges();
this.walletService
.getStripeAccount()
.then((account: any) => {
this.account = account;
this.initCountry = account.bankAccount.country || account.country;
this.country.patchValue(this.initCountry);
this.country.setValue(account.country);
})
.catch(e => {
this.formToastService.error(e.message);
});
this.loaded = true;
this.inProgress = false;
this.initCountry = this.hasBankAccount
? this.account.bankAccount.country
: this.account.country;
this.country.patchValue(this.initCountry);
this.detectChanges();
}
// async getAccount() {
// this.inProgress = true;
// this.detectChanges();
// this.walletService
// .getStripeAccount()
// .then((account: any) => {
// this.account = account;
// this.initCountry = account.bankAccount.country || account.country;
// this.country.patchValue(this.initCountry);
// })
// .catch(e => {
// this.formToastService.error(e.message);
// });
// this.inProgress = false;
// this.detectChanges();
// }
async removeBank() {
this.inProgress = true;
this.detectChanges();
......@@ -68,57 +82,56 @@ export class WalletBankFormComponent implements OnInit {
this.walletService
.removeStripeBank()
.then((response: any) => {
this.inProgress = false;
this.formToastService.success(
'Your bank account was successfully removed.'
);
this.getAccount();
})
.catch(e => {
this.inProgress = false;
this.formToastService.error(e.message);
});
this.inProgress = false;
this.detectChanges();
if (!this.error) {
this.submitted.emit();
}
}
async leaveMonetization() {
this.showModal = false;
this.inProgress = true;
this.detectChanges();
this.walletService
.leaveMonetization()
.then((response: any) => {
this.configs.set('merchant', []);
// this.getAccount();
this.leftMonetization = true;
})
.catch(e => {
this.formToastService.error(e.message);
});
this.inProgress = false;
this.detectChanges();
}
async addBank() {
this.error = '';
this.walletService
.addStripeBank(this.form.value)
.then((response: any) => {
this.editing = false;
const toasterMessage = this.isMonetized()
? 'Your bank account has been successfully updated'
: 'Your request to join the monetization program has been submitted';
const toasterMessage = 'Your bank account has been successfully added';
this.formToastService.success(toasterMessage);
this.getAccount();
// if(filling out form for the first time){
// emit 'pending' to parent
// } else emit 'hasAccount' to parent
})
.catch(e => {
// this.error = e.message;
// todoojm - error handling
// TODO backend should include e.param and handle errors inline
this.error = e.message;
});
this.inProgress = false;
this.detectChanges();
if (!this.error) {
this.submitted.emit();
}
}
enterEditMode() {
......@@ -135,6 +148,13 @@ export class WalletBankFormComponent implements OnInit {
this.detectChanges();
}
hasBankAccount() {
if (this.account.requirement) {
return this.account.requirement.indexOf('external_account') === -1;
} else {
return true;
}
}
isCountry(countries: string[]) {
return countries.indexOf(this.country.value) > -1;
}
......@@ -144,14 +164,6 @@ export class WalletBankFormComponent implements OnInit {
this.cd.detectChanges();
}
isMonetized() {
// TODOOJM uncomment after form is done
// if (this.user && this.user.merchant.id) {
// return true;
// }
return false;
}
get accountNumber() {
return this.form.get('accountNumber');
}
......
src/app/modules/wallet/v2/settings-cash/cash-onboarding-extras/cash-onboarding-extras.component.html
View file @ f640281d
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] *ngIf="!loaded"></div>
<div class="m-walletOnboardingExtrasForm" *ngIf="loaded">
<p>
You are required to provide additional information so we can verify your
identity in order to receive payouts.
<ng-container
*ngIf="
account.requirement.indexOf('individual.verification.document') > -1
"
<div class="m-walletOnboardingExtrasForm" *ngIf="account">
<!-- TODOOJM sketchy *ngIf for pending notice. -->
<!-- <p *ngIf="!account.verified">
Your account is pending verification. Verification status updates will be
sent in your notifications.
</p> -->
<!-- <p></p> -->
<!-- **** INPUT: PHOTO ID -->
<!-- <ng-container
*ngIf="account.requirement.indexOf('individual.verification.document') > -1"
>
<b (click)="file.click()">Upload Photo ID</b>
<br />
<br />
<button (click)="file.click()" class="m-btn m-btn--action m-btn--slim">
<ng-container *ngIf="!inProgress">Select & Upload</ng-container>
<ng-container *ngIf="inProgress">Uploading...</ng-container>
</button>
<input
type="file"
#file
name="file"
(change)="uploadDocument(file, 'document')"
accept="image/*"
style="display: none;"
/>
</ng-container> -->
<ng-container
*ngIf="account.requirement.indexOf('individual.verification.document') > -1"
>
<div class="m-walletForm__field--text">
<div class="m-walletForm__row--label">
<label for="photoId" i18n>Photo ID</label>
</div>
<div class="m-walletSettings__row--input">
<input
type="file"
#file
name="photoId"
(change)="uploadDocument(file, 'document')"
accept="image/*"
style="display: none;"
/>
</div>
</div>
<m-shadowboxSubmitButton
(click)="file.click()"
[disabled]="inProgress"
[saving]="inProgress"
>Select & Upload</m-shadowboxSubmitButton
>
<b (click)="file.click()">Upload Photo ID</b>
<br />
<br />
<button (click)="file.click()" class="m-btn m-btn--action m-btn--slim">
<ng-container *ngIf="!inProgress">Select & Upload</ng-container>
<ng-container *ngIf="inProgress">Uploading...</ng-container>
</button>
<input
type="file"
#file
name="file"
(change)="uploadDocument(file, 'document')"
accept="image/*"
style="display: none;"
/>
</ng-container>
<ng-container
*ngIf="
account.requirement.indexOf(
'individual.verification.additional_document'
) > -1
"
</ng-container>
<!-- **** INPUT: PROOF OF ADDRESS -->
<ng-container
*ngIf="
account.requirement.indexOf(
'individual.verification.additional_document'
) > -1
"
>
<div class="m-walletForm__field--text">
<div class="m-walletForm__row--label">
<label for="proofOfAddress" i18n>Proof of Address</label>
</div>
<div class="m-walletSettings__row--input">
<input
type="file"
#file
name="proofOfAddress"
(change)="uploadDocument(file, 'additional_document')"
accept="image/*"
style="display: none;"
/>
</div>
</div>
<m-shadowboxSubmitButton
(click)="file.click()"
[disabled]="inProgress"
[saving]="inProgress"
>Select & Upload</m-shadowboxSubmitButton
>
<b (click)="file.click()">Upload a document with proof of address</b>
<br />
<br />
<button (click)="file.click()" class="m-btn m-btn--action m-btn--slim">
<ng-container *ngIf="!inProgress">Select & Upload</ng-container>
<ng-container *ngIf="inProgress">Uploading...</ng-container>
</button>
<input
type="file"
#file
name="file"
(change)="uploadDocument(file, 'additional_document')"
accept="image/*"
style="display: none;"
/>
</ng-container>
<ng-container *ngIf="account.requirement.indexOf('tos_acceptance.') > -1">
<b>
Accept the
<a href="https://stripe.com/legal" target="_blank">
Stripe Services Agreement
</a>
</b>
<br />
<br />
<button (click)="acceptTos()" class="m-btn m-btn--action m-btn--slim">
<ng-container *ngIf="!inProgress">Accept Terms</ng-container>
<ng-container *ngIf="inProgress">Accepting...</ng-container>
</button>
</ng-container>
<ng-container *ngIf="account.requirement.indexOf('individual.phone') > -1">
<b>Provide a phone number</b>
<br />
<m-phone-input #phone></m-phone-input>
<br />
<button
(click)="updateField('phone', phone.value)"
class="m-btn m-btn--action m-btn--slim"
>
<ng-container *ngIf="!inProgress">Save</ng-container>
<ng-container *ngIf="inProgress">Saving...</ng-container>
</button>
</ng-container>
<ng-container *ngIf="account.requirement.indexOf('external_account') > -1">
<b>Complete the payout method step below</b>
</ng-container>
<ng-container
*ngIf="account.requirement.indexOf('individual.id_number') > -1"
</ng-container>
<!-- <ng-container
*ngIf="
account.requirement.indexOf(
'individual.verification.additional_document'
) > -1
"
>
<b (click)="file.click()">Upload a document with proof of address</b>
<br />
<br />
<button (click)="file.click()" class="m-btn m-btn--action m-btn--slim">
<ng-container *ngIf="!inProgress">Select & Upload</ng-container>
<ng-container *ngIf="inProgress">Uploading...</ng-container>
</button>
<input
type="file"
#file
name="file"
(change)="uploadDocument(file, 'additional_document')"
accept="image/*"
style="display: none;"
/>
</ng-container> -->
<!-- **** INPUT: TOS CHECKBOX -->
<ng-container *ngIf="account.requirement.indexOf('tos_acceptance.') > -1">
<div class="m-walletForm__field--checkbox">
<div class="m-walletSettings__row--input">
<m-formInput__checkbox formControlName="stripeAgree">
I have read and agree to the
<a href="https://stripe.com/legal" target="_blank">
Stripe Services Agreement
</a>
</m-formInput__checkbox>
</div>
</div>
<m-shadowboxSubmitButton
(click)="acceptTos()"
[disabled]="inProgress"
[saving]="inProgress"
>Save</m-shadowboxSubmitButton
>
<b
>Provide your Personal ID / Social Security Number (SSN) / National
Insurance Number</b
>
<br />
<input
class="m-input m-revenueOptions__input"
#personalId
placeholder="Personal Id"
/>
<br />
<button
(click)="updateField('id_number', personalId.value)"
class="m-btn m-btn--action m-btn--slim"
>
<ng-container *ngIf="!inProgress">Save</ng-container>
<ng-container *ngIf="inProgress">Saving...</ng-container>
</button>
</ng-container>
</p>
</ng-container>
<!-- **** INPUT: PHONE NUMBER -->
<ng-container *ngIf="account.requirement.indexOf('individual.phone') > -1">
<div class="m-walletForm__field--text">
<div class="m-walletForm__row--label">
<label for="phoneNumber" i18n>Phone Number</label>
</div>
<div class="m-walletForm__row--input">
<m-phoneInput
#phone
id="phoneNumber"
name="phoneNumber"
class="form-control"
data-minds="phoneNumber"
initCountryCode="account.country"
[allowedCountries]="allowedCountries"
>
</m-phoneInput>
</div>
</div>
<m-shadowboxSubmitButton
(click)="updateField('phone', phone.value)"
[disabled]="inProgress"
[saving]="inProgress"
>Save</m-shadowboxSubmitButton
>
</ng-container>
<!-- **** INPUT: PERSONAL ID -->
<ng-container
*ngIf="account.requirement.indexOf('individual.id_number') > -1"
>
<div class="m-walletForm__field--text">
<div class="m-walletForm__row--label">
<label for="personalId" i18n
>Personal ID / Social Security Number (SSN) / National Insurance
Number</label
>
</div>
<div class="m-walletForm__row--input">
<input
#personalId
id="personalId"
name="personalId"
class="form-control"
data-minds="personalId"
/>
</div>
</div>
<m-shadowboxSubmitButton
(click)="updateField('id_number', personalId.value)"
[disabled]="inProgress"
[saving]="inProgress"
>Save</m-shadowboxSubmitButton
>
</ng-container>
</div>
src/app/modules/wallet/v2/settings-cash/cash-onboarding-extras/cash-onboarding-extras.component.scss
View file @ f640281d
.m-revenue--options {
margin: auto;
@include m-theme() {
background-color: themed($m-white);
}
.m-revenue--options-payout-method {
width: 100%;
padding: 16px;
box-sizing: border-box;
h3 {
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
}
}
.m-revenueOptions__input {
margin: 16px 0;
width: 300px;
border-radius: 36px;
}
.m-revenue--options-payout-method-bank {
p {
font-family: 'Roboto', Helvetica, sans-serif;
margin: 0;
}
.m-revenue--options-payout-method-bank-account {
display: flex;
align-items: center;
padding: 16px;
border-radius: 3px;
font-family: 'Roboto', Helvetica, sans-serif;
letter-spacing: 1px;
margin: 16px 0;
@include m-theme() {
border: 1px solid themed($m-grey-100);
}
.m-revenue--options-payout-method-bank--name {
font-weight: 600;
padding-right: 38px;
}
.m-revenue--options-payout-method-bank--number {
letter-spacing: 6px;
flex: 2;
}
.m-revenue--options-payout-method-bank--actions {
text-align: right;
text-transform: uppercase;
font-weight: 300;
font-size: 14px;
cursor: pointer;
@include m-theme() {
color: themed($m-grey-200);
}
}
}
}
.m-revenue--options-payout-method-setup {
p {
font-family: 'Roboto', Helvetica, sans-serif;
}
form {
label {
text-transform: uppercase;
font-family: 'Roboto', Helvetica, sans-serif;
letter-spacing: 1px;
word-spacing: 4px;
}
input {
width: 100%;
margin: 16px 0;
padding: 8px;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
}
minds-country-input {
width: 100%;
display: block;
margin: 16px 0;
select {
font-size: 16px;
font-family: 'Roboto', Helvetica, sans-serif;
font-weight: 300;
@include m-theme() {
color: themed($m-grey-400);
}
}
}
}
}
.m-error {
padding: 16px;
letter-spacing: 2px;
font-size: 14px;
font-family: 'Roboto', Helvetica, sans-serif;
font-weight: 300;
margin: 16px 0;
border-radius: 2px;
}
.m-revenue--options-cancel,
.m-revenue--options-requirements {
margin-top: 32px;
&.m-revenue--options-requirements {
margin-top: 0;
}
padding: 16px;
h3 {
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
}
p {
font-family: 'Roboto', Helvetica, sans-serif;
//margin:0;
}
button {
width: 200px;
}
}
}
src/app/modules/wallet/v2/settings-cash/cash-onboarding-extras/cash-onboarding-extras.component.ts
View file @ f640281d
......@@ -2,8 +2,14 @@
// from certain countries/regions (e.g. Australia, NZ, Europe)
// before their accounts can be verified
import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
Component,
OnInit,
ChangeDetectorRef,
Input,
Output,
EventEmitter,
} from '@angular/core';
import { WalletDashboardService } from '../../dashboard.service';
import { Client, Upload } from '../../../../../services/api';
......@@ -13,9 +19,10 @@ import { Client, Upload } from '../../../../../services/api';
templateUrl: './cash-onboarding-extras.component.html',
})
export class WalletCashOnboardingExtrasComponent implements OnInit {
loaded: boolean = false;
inProgress: boolean = true;
account;
@Input() account;
@Input() allowedCountries: string[];
@Output() submitted: EventEmitter<any> = new EventEmitter();
inProgress: boolean;
error: string = '';
constructor(
protected walletService: WalletDashboardService,
......@@ -25,25 +32,10 @@ export class WalletCashOnboardingExtrasComponent implements OnInit {
) {}
ngOnInit() {
this.getAccount();
}
async getAccount() {
this.error = '';
this.inProgress = true;
this.detectChanges();
this.walletService
.getStripeAccount()
.then((account: any) => {
this.account = account;
})
.catch(e => {
this.error = e.message;
});
this.inProgress = false;
this.detectChanges();
// if (!this.account) {
// this.submitted.emit();
// // this.detectChanges();
// }
}
async uploadDocument(fileInput: HTMLInputElement, documentType: string) {
......@@ -55,8 +47,8 @@ export class WalletCashOnboardingExtrasComponent implements OnInit {
[file]
);
this.inProgress = false;
this.account = null;
this.getAccount();
this.detectChanges();
this.submitted.emit();
}
async updateField(fieldName: string, value: string) {
......@@ -66,8 +58,8 @@ export class WalletCashOnboardingExtrasComponent implements OnInit {
body[fieldName] = value;
await this.client.post('api/v2/payments/stripe/connect/update', body);
this.inProgress = false;
this.account = null;
this.getAccount();
this.detectChanges();
this.submitted.emit();
}
async acceptTos() {
......@@ -75,8 +67,8 @@ export class WalletCashOnboardingExtrasComponent implements OnInit {
this.detectChanges();
await this.client.put('api/v2/payments/stripe/connect/terms');
this.inProgress = false;
this.account = null;
this.getAccount();
this.detectChanges();
this.submitted.emit();
}
detectChanges() {
......
src/app/modules/wallet/v2/settings-cash/cash-onboarding/cash-onboarding.component.html
View file @ f640281d
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] *ngIf="!loaded"></div>
<div class="m-walletCashOnboarding" *ngIf="loaded">
<div class="m-walletCashOnboarding">
<div class="m-walletCashOnboardingView--addDetails" *ngIf="!editing">
<m-shadowboxSubmitButton
(click)="toggleEditMode(true)"
[disabled]="inProgress"
<p>Add your bank account details where cash rewards will be deposited.</p>
<m-shadowboxSubmitButton (click)="enterEditMode()" color="grey"
>Set up cash payments</m-shadowboxSubmitButton
>
</div>
<div class="m-walletCashOnboardingView--form" *ngIf="editing">
<form [formGroup]="accountForm" *ngIf="!isMonetized() && editingAccount">
<form [formGroup]="form">
<p>Enter personal details to setup your cash payment account.</p>
<!-- ------------------------------------------------------------ -->
......@@ -23,7 +21,6 @@
type="text"
id="country"
name="country"
formControlName="country"
class="form-control"
data-minds="country"
[allowed]="allowedCountries"
......@@ -84,7 +81,12 @@
<label for="dob" i18n>Date of Birth</label>
</div>
<div class="m-walletForm__row--input">
<minds-date-input
<m-date__dropdowns
name="dob"
class="form-control"
(selectedDateChange)="dob.setValue($event)"
></m-date__dropdowns>
<!-- <minds-date-input
id="dob"
name="dob"
class="form-control"
......@@ -92,7 +94,7 @@
data-minds="dob"
[date]="dob.value"
(dateChange)="dob.setValue($event)"
></minds-date-input>
></minds-date-input> -->
</div>
</div>
......@@ -207,9 +209,9 @@
<div class="m-walletForm__row--input">
<input
type="text"
id="city"
name="city"
formControlName="city"
id="state"
name="state"
formControlName="state"
class="form-control"
/>
</div>
......@@ -261,22 +263,25 @@
<!-- ------------------------------------------------------------ -->
<!-- **** INPUT: TOS CHECKBOX -->
<div class="m-walletSettings__field--checkbox">
<div class="m-walletForm__field--checkbox">
<div class="m-walletSettings__row--input">
<m-formInput__checkbox formControlName="stripeAgree">
I have read and agree to the
<a href="https://stripe.com/legal" target="_blank">
Stripe Services Agreement </a
>.
Stripe Services Agreement
</a>
</m-formInput__checkbox>
</div>
</div>
<!-- ------------------------------------------------------------ -->
<!-- ERROR -------------- -->
<div class="m-walletForm__error">
<p>{{ error }}</p>
</div>
<!-- FORM BUTTONS -------------- -->
<div class="m-walletForm__buttonsContainer">
<!-- TODOOJM confirmation popup on cancel -->
<m-shadowboxSubmitButton
(click)="toggleEditMode(false)"
[disabled]="inProgress"
......@@ -286,9 +291,30 @@
<m-shadowboxSubmitButton
(click)="createAccount()"
[disabled]="inProgress"
[saving]="inProgress"
>Update Personal Information</m-shadowboxSubmitButton
>
</div>
</form>
</div>
<!-- CONFIRMATION MODAL: LEAVE EDIT MODE -------------------- -->
<m-walletModal
[showModal]="showModal"
(closeModal)="showModal = false"
class="m-walletModal--confirmation"
>
<p>
Are you sure you want to stop? Any personal information you've entered
will be lost.
</p>
<div class="m-walletForm__buttonsContainer">
<m-shadowboxSubmitButton color="grey" (click)="showModal = false"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton color="red" (click)="leaveEditMode()"
>I'm sure</m-shadowboxSubmitButton
>
</div>
</m-walletModal>
</div>
src/app/modules/wallet/v2/settings-cash/cash-onboarding/cash-onboarding.component.ts
View file @ f640281d
import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
import {
Component,
OnInit,
Input,
ChangeDetectorRef,
Output,
EventEmitter,
} from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { requiredFor, optionalFor } from './../settings-cash.validators';
import { WalletDashboardService } from '../../dashboard.service';
......@@ -10,12 +17,15 @@ import { FormToastService } from '../../../../../common/services/form-toast.serv
})
export class WalletCashOnboardingComponent implements OnInit {
@Input() allowedCountries: string[];
@Input() account;
@Output() submitted: EventEmitter<any> = new EventEmitter();
form;
user;
loaded: boolean = false;
inProgress: boolean = false;
showModal: boolean = false;
editing;
error: string = '';
constructor(
private cd: ChangeDetectorRef,
......@@ -25,6 +35,11 @@ export class WalletCashOnboardingComponent implements OnInit {
) {}
ngOnInit() {
// if (!this.account) {
// this.submitted.emit();
// // this.detectChanges();
// return;
// }
this.form = this.fb.group({
country: ['US', Validators.required],
......@@ -42,39 +57,19 @@ export class WalletCashOnboardingComponent implements OnInit {
postCode: ['', optionalFor(['HK', 'IE', 'JP'])],
stripeAgree: ['', Validators.required],
});
this.getAccount();
}
async getAccount() {
this.inProgress = true;
this.detectChanges();
this.walletService
.getStripeAccount()
.then((account: any) => {})
.catch(e => {
this.formToastService.error(e.message);
});
this.loaded = true;
this.inProgress = false;
this.detectChanges();
}
async createAccount() {
this.inProgress = true;
// this.error = '';
this.error = '';
const formVal = this.form.value;
formVal.stripeAgree = this.stripeAgree.value;
console.log('formVal w/ agree', formVal);
this.walletService
.createStripeAccount(formVal)
.createStripeAccount(this.form.value)
.then((response: any) => {
console.log('createAccount response', response);
this.inProgress = false;
// Is this kind of stuff necessary anymore?
// TODOOJM ask: Is this kind of stuff necessary? Is it ephemeral? what's it doing?
if (!this.user.programs) {
this.user.programs = [];
}
......@@ -89,19 +84,28 @@ export class WalletCashOnboardingComponent implements OnInit {
amount: 10,
},
};
this.detectChanges();
})
.catch(e => {
this.inProgress = false;
// TODOOJM handle errors inline
// this.error = e.message;
// TODO backend should include e.param and handle errors inline
this.error = e.message;
});
this.inProgress = false;
this.detectChanges();
if (!this.error) {
this.submitted.emit();
}
}
toggleEditMode(bool) {
this.editing = bool;
enterEditMode() {
this.editing = true;
this.detectChanges();
}
leaveEditMode() {
this.editing = false;
this.form.reset();
this.detectChanges();
}
......@@ -114,13 +118,6 @@ export class WalletCashOnboardingComponent implements OnInit {
this.cd.detectChanges();
}
isMonetized() {
// TODOOJM uncomment after form is done
// if (this.user && this.user.merchant.id) {
// return true;
// }
return false;
}
get country() {
return this.form.get('country');
}
......
src/app/modules/wallet/v2/settings-cash/settings-cash.component.html
View file @ f640281d
......@@ -3,24 +3,25 @@
<h4>Bank Information</h4>
<!-- ONBOARDING FORM ------------------ -->
<m-walletCashOnboarding
*ngIf="view === 'onboardingForm'"
*ngIf="view === 'onboarding'"
[account]="account"
[allowedCountries]="allowedCountries"
(accountCreated)="getAccount(); checkAdditionalReqts()"
(submitted)="setView()"
></m-walletCashOnboarding>
<!-- ADDITIONAL REQUIREMENTS FORM ----------- -->
<m-walletCashOnboardingExtras
*ngIf="view === 'additionalReqtsForm'"
(submittedRequirements)="getAccount(); checkAdditionalReqts()"
></m-walletCashOnboardingExtras>
<!-- BANK FORM --------------------------- -->
<m-walletBankForm
*ngIf="view === 'bankForm'"
*ngIf="view === 'bank'"
[account]="account"
[allowedCountries]="allowedCountries"
(submitted)="setView()"
></m-walletBankForm>
<!-- PENDING APPROVAL ----------------------- -->
<div *ngIf="view === 'pendingApproval'"></div>
<!-- ERROR ---------------------------------- -->
<div *ngIf="view === 'error'">
<p>{{ error }}</p>
</div>
<!-- EXTRA REQUIREMENTS FORM ----------- -->
<m-walletCashOnboardingExtras
*ngIf="view === 'extras'"
[account]="account"
[allowedCountries]="allowedCountries"
(submitted)="setView()"
></m-walletCashOnboardingExtras>
<!-- ERROR --------------------------- -->
<p *ngIf="view === 'error'" class="m-walletForm__error">{{ error }}</p>
</div>
src/app/modules/wallet/v2/settings-cash/settings-cash.component.scss
View file @ f640281d
// additional shared styles located in dashboard.component.scss
m-walletSettings--cash {
.m-walletSettingsView--accountSplash {
.m-walletSettings {
h4 {
margin-bottom: 15px;
}
}
.m-walletSettingsView--hasAccount__detailsWrapper {
max-width: 460px;
margin: 38px 0 59px 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 38px 0 59px 0;
max-width: 460px;
}
.m-walletSettingsView--accountSplash__bankPreviewWrapper {
.m-walletSettingsView--hasAccount__bankWrapper {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
......@@ -17,14 +23,14 @@ m-walletSettings--cash {
margin-right: 8px;
}
}
.m-walletSettingsView--accountSplash__linkContainer {
.m-walletSettingsView--hasAccount__linksContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
justify-content: flex-start;
flex: 1 0 auto;
max-width: 146px;
a:last-child {
margin-left: 8px;
margin-left: 28px;
}
}
......@@ -33,18 +39,14 @@ m-walletSettings--cash {
margin-bottom: 19px;
}
.m-walletForm__nameFieldsContainer {
display: flex;
box-sizing: border-box;
[class*='m-walletForm__field'] {
flex: 1 0 50%;
&:first-child {
margin-right: 19px;
}
}
}
.m-tooltip--bubble {
right: 12px;
}
// TOS checkbox
m-walletCashOnboarding {
.m-walletForm__field--checkbox {
margin-top: 100px;
}
}
}
src/app/modules/wallet/v2/settings-cash/settings-cash.component.ts
View file @ f640281d
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { WalletDashboardService } from '../dashboard.service';
import { FormToastService } from '../../../../common/services/form-toast.service';
import { Session } from '../../../../services/session';
@Component({
......@@ -14,12 +13,7 @@ export class WalletSettingsCashComponent implements OnInit {
account;
error: string = '';
view:
| 'onboardingForm'
| 'additionalReqtsForm'
| 'bankForm'
| 'pendingApproval'
| 'error';
view: 'onboarding' | 'bank' | 'extras' | 'error';
allowedCountries: string[] = [
'AT',
......@@ -48,7 +42,6 @@ export class WalletSettingsCashComponent implements OnInit {
constructor(
protected walletService: WalletDashboardService,
private formToastService: FormToastService,
private cd: ChangeDetectorRef,
protected session: Session
) {}
......@@ -56,58 +49,70 @@ export class WalletSettingsCashComponent implements OnInit {
ngOnInit() {
this.user = this.session.getLoggedInUser();
this.setFormView();
this.setView();
this.loaded = true;
this.inProgress = false;
this.detectChanges();
}
setFormView() {
async setView() {
// Flow should be:
// 1. onboarding
// 2. bank
// 3. (if necessary) extras
// 4. (once verified) bank
this.view = null;
this.inProgress = true;
this.detectChanges();
const hasMerchant = this.user && this.user.merchant.id;
// todoojm uncomment
// const hasMerchant = this.user && this.user.merchant.id;
const hasMerchant = true;
if (!hasMerchant) {
this.view = 'onboardingForm';
this.view = 'onboarding';
} else {
this.getAccount();
await this.getAccount();
if (this.error) {
return;
}
// if pending (???) pending; return
// if additional reqts, additinoalReqts
// else bankForm
if (!this.hasBankAccount() || this.account.verified) {
this.view = 'bank';
} else if (!this.account.verified && this.account.requirement) {
this.view = 'extras';
}
}
this.inProgress = false;
this.detectChanges();
}
async getAccount() {
this.inProgress = true;
this.error = '';
this.walletService
.getStripeAccount()
.then((account: any) => {
this.account = account;
// TODOOJM handle view selection
// if (!this.account.bankAccount || !this.account.bankAccount.last4) {
// this.view = 'bankForm';
// } else {
// }
// console.log('888 this account', this.account);
// this.setView();
})
.catch(e => {
this.error = e.message;
this.view = 'error';
this.inProgress = false;
this.detectChanges();
});
this.inProgress = false;
this.detectChanges();
}
switchView(view) {
this.view = view;
this.detectChanges();
hasBankAccount() {
if (this.account.requirement) {
return this.account.requirement.indexOf('external_account') === -1;
} else {
return true;
}
}
detectChanges() {
......
src/app/modules/wallet/v2/settings-eth/settings-eth.component.html
View file @ f640281d
......@@ -14,16 +14,11 @@
</p>
<div *ngIf="wallet.onchain.address">
<div>
<p>Ether total</p>
<p class="m-walletForm__row--label">Ether total</p>
<p>{{ wallet.eth.balance }}</p>
</div>
<!-- TODOOJM make it so you don't have to go to /token to buy eth -->
<!-- <m-shadowboxSubmitButton (click)="showModal()"> -->
<m-shadowboxSubmitButton [routerLink]="['/token', { purchaseEth: 'open' }]">
Buy Ether
</m-shadowboxSubmitButton>
</div>
</div>
<m-walletModal [showModal]="showModal" (closeModal)="showModal = false">
<p>TODOOJM: implement 'buy eth' modal. See issue #2423</p>
</m-walletModal>
src/app/modules/wallet/v2/transactions-cash/transactions-cash.component.html
View file @ f640281d
......@@ -3,20 +3,20 @@
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
<div class="m-walletTransactionsTable__wrapper" *ngIf="init">
<div class="m-walletTransactionsTable__row--top">
<!-- <div class="m-walletTransactionsTable__row--top">
<div class="m-walletTransactionsTable__time">
Upcoming
</div>
<div class="m-walletTransactionsTable__typeWrapper">
<!-- (mouseenter)="showRewardsPopup = true"
(mouseleave)="showRewardsPopup = false" -->
(mouseenter)="showRewardsPopup = true"
(mouseleave)="showRewardsPopup = false"
<i class="material-icons">star_border</i
><span>Estimated Pro Earnings</span>
</div>
<!-- <m-walletPendingCashPayout
<m-walletPendingCashPayout
*ngIf="showRewardsPopup"
></m-walletPendingCashPayout> -->
</div>
></m-walletPendingCashPayout>
</div> -->
<ng-container *ngIf="!inProgress || transactions">
<m-walletTransactionsTable
[currency]="currency"
......
src/app/modules/wallet/v2/transactions-cash/transactions-cash.component.ts
View file @ f640281d
......@@ -48,15 +48,15 @@ export class WalletTransactionsCashComponent implements OnInit {
}
async getStripeAccount() {
const stripeAccount = await this.walletService.getStripeAccount();
if (!stripeAccount) {
const account = await this.walletService.getStripeAccount();
if (!account) {
return;
} else {
if (stripeAccount.bankAccount) {
this.currency = stripeAccount.bankAccount.currency.toUpperCase();
if (account.bankAccount) {
this.currency = account.bankAccount.currency.toUpperCase();
}
this.runningTotal = stripeAccount.pendingBalance.amount / 100;
this.runningTotal = account.pendingBalance.amount / 100;
this.detectChanges();
}
......
Please register or to comment