src/app/modules/monetization/revenue/console.component.html

@@ -50,6 +50,7 @@
  </i>
  <span>Back to the Token Wallet</span>
  </a>
+ <m-walletUsd__balance></m-walletUsd__balance>
  <router-outlet></router-outlet>
  </div>
 </div>

src/app/modules/monetization/revenue/options.component.html

 <div class="m-revenue--options m-border">
+ <div class="m-revenue--options-requirements" *ngIf="account.requirement">
+ <h3>Account Requirements</h3>
+ <p>
+ You are required to complete the following action in order to receive
+ payouts:
+ <ng-container
+ *ngIf="account.requirement === 'individual.verification.document'"
+ >
+ <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="!editing">Select & Upload</ng-container>
+ <ng-container *ngIf="editing">Uploading...</ng-container>
+ </button>
+ <input
+ type="file"
+ #file
+ name="file"
+ (change)="uploadRequirement(file)"
+ 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="!editing">Accept Terms</ng-container>
+ <ng-container *ngIf="editing">Accepting...</ng-container>
+ </button>
+ </ng-container>
+ </p>
+ </div>
+
  <div class="m-revenue--options-payout-method">
  <h3 i18n="@@MONETIZATION__REVENUE__OPTIONS__PAYOUT_METHOD_TITLE">
  Payout Method

src/app/modules/monetization/revenue/options.component.scss

@@ -102,8 +102,12 @@
  border-radius: 2px;
  }
 
- .m-revenue--options-cancel {
+ .m-revenue--options-cancel,
+ .m-revenue--options-requirements {
  margin-top: 32px;
+ &.m-revenue--options-requirements {
+ margin-top: 0;
+ }
  padding: 16px;
 
  h3 {

src/app/modules/monetization/revenue/options.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { ChartColumn } from '../../../common/components/chart/chart.component';
-import { Client } from '../../../services/api';
+import { Client, Upload } from '../../../services/api';
 
 @Component({
  moduleId: module.id,
@@ -18,12 +18,14 @@ export class RevenueOptionsComponent {
  account: null,
  country: 'US',
  };
+ account;
  error: string = '';
  leaving: boolean = false;
  leaveError: string = '';
 
  constructor(
  private client: Client,
+ private upload: Upload,
  private cd: ChangeDetectorRef,
  private fb: FormBuilder,
  private router: Router
@@ -42,6 +44,7 @@ export class RevenueOptionsComponent {
  this.inProgress = true;
  this.client.get('api/v2/payments/stripe/connect').then(({ account }) => {
  this.inProgress = false;
+ this.account = account;
  this.payoutMethod.country = account.country;
  this.form.controls.country.setValue(account.country);
  if (account.bankAccount.last4) {
@@ -97,6 +100,25 @@ export class RevenueOptionsComponent {
  this.detectChanges();
  }
 
+ async uploadRequirement(fileInput: HTMLInputElement) {
+ const file = fileInput ? fileInput.files[0] : null;
+ this.editing = true;
+ this.detectChanges();
+ await this.upload.post('api/v2/payments/stripe/connect/photoid', [file]);
+ this.editing = false;
+ this.account = null;
+ this.getSettings();
+ }
+
+ async acceptTos() {
+ this.editing = true;
+ this.detectChanges();
+ await this.client.put('api/v2/payments/stripe/connect/terms');
+ this.editing = false;
+ this.account = null;
+ this.getSettings();
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

src/app/modules/settings/settings.component.html

@@ -53,6 +53,17 @@
  >
  </a>
 
+ <a
+ class="m-page--sidebar--navigation--item"
+ routerLink="/settings/tiers"
+ routerLinkActive="m-page--sidebar--navigation--item-active"
+ >
+ <i class="material-icons">card_giftcard</i>
+ <span i18n="@@SETTINGS__NAVIGATION__SUBSCRIPTIONS_NAV"
+ >Subscription Tiers</span
+ >
+ </a>
+
  <a
  class="m-page--sidebar--navigation--item"
  routerLink="/settings/billing"

src/app/modules/settings/settings.module.ts

@@ -26,6 +26,7 @@ import { SettingsWireComponent } from './wire/wire.component';
 import { WireModule } from '../wire/wire.module';
 import { SettingsP2PMediaComponent } from './p2pmedia/p2pmedia.component';
 import { SettingsBlockedChannelsComponent } from './blocked-channels/blocked-channels.component';
+import { SettingsTiersComponent } from './tiers/tiers.component';
 
 const settingsRoutes: Routes = [
  {
@@ -43,6 +44,7 @@ const settingsRoutes: Routes = [
  { path: 'reported-content', component: SettingsReportedContentComponent },
  { path: 'p2pmedia', component: SettingsP2PMediaComponent },
  { path: 'blocked-channels', component: SettingsBlockedChannelsComponent },
+ { path: 'tiers', component: SettingsTiersComponent },
  ],
  },
 ];
@@ -76,6 +78,7 @@ const settingsRoutes: Routes = [
  SettingsWireComponent,
  SettingsP2PMediaComponent,
  SettingsBlockedChannelsComponent,
+ SettingsTiersComponent,
  ],
  providers: [SettingsService],
  exports: [

src/app/modules/settings/tiers/tiers.component.html

+<div class="m-settings--section m-layout__row m-border">
+ <div
+ class="minds-error mdl-color--red mdl-color-text--white"
+ [hidden]="!error"
+ >
+ {{ error }}
+ </div>
+ <div class="m-layout__spacer"></div>
+
+ <button
+ class="m-btn m-btn--slim m-btn--action"
+ *ngIf="!isSaving && !isSaved"
+ (click)="save()"
+ >
+ <ng-container i18n="@@M__ACTION__SAVE">Save</ng-container>
+ </button>
+ <button class="m-btn m-btn--slim" *ngIf="isSaved">
+ <ng-container i18n="@@M__COMMON__SAVED">Saved</ng-container>
+ </button>
+ <div
+ id="p2"
+ class="mdl-progress mdl-js-progress mdl-progress__indeterminate"
+ [hidden]="!isSaving"
+ ></div>
+</div>
+
+<div class="m-border m-settings--section">
+ <h4>Subscription Tiers</h4>
+
+ <p>
+ Create tiers below to incentivise supporters to wire you. These tiers will
+ be displayed on the sidebar of your channel page on in the wire screen.
+ </p>
+
+ <m-wire__subscriptionTiers
+ [user]="session.getLoggedInUser()"
+ [editing]="true"
+ (isSaving)="isSaving = $event"
+ (isSaved)="isSaved = $event"
+ [saveEventListener]="triggerSave"
+ >
+ </m-wire__subscriptionTiers>
+</div>

src/app/modules/settings/tiers/tiers.component.scss

+m-settings__tiers .m-settings--section {
+ display: block;
+ @include m-theme() {
+ background-color: themed($m-white);
+ }
+
+ textarea {
+ padding: 16px;
+ width: 100%;
+ }
+
+ m-wire-channel-table {
+ display: block;
+ margin-top: $minds-margin * 2;
+
+ table {
+ width: 100%;
+ .m-wire-channel--reward-amount {
+ display: inline-flex;
+ width: 100%;
+ }
+ }
+ }
+}

src/app/modules/settings/tiers/tiers.component.ts

+import { Component, EventEmitter } from '@angular/core';
+
+import { Session } from '../../../services/session';
+import { Client } from '../../../services/api';
+
+@Component({
+ selector: 'm-settings__tiers',
+ templateUrl: 'tiers.component.html',
+})
+export class SettingsTiersComponent {
+ isSaving = false;
+ isSaved = false;
+ triggerSave = new EventEmitter(true);
+ error: string;
+
+ constructor(public session: Session, public client: Client) {}
+
+ save() {
+ this.triggerSave.next(true);
+ }
+}

src/app/modules/wallet/usd/balance.component.html

+<div class="m-walletUsd__balance m-border">
+ <div class="m-layout__row">
+ <div class="m-layout__cell">
+ <label>Future Payouts</label>
+ <span>{{ balance | number }} {{ currency | uppercase }}</span>
+ </div>
+ <div class="m-layout__spacer"></div>
+ <div class="m-layout_cell">
+ <label>Payout Schedule:</label>
+ <span>{{ interval | titlecase }}</span>
+ <m-tooltip icon="help" i18n="@@MINDS__WALLET__USD__PAYOUT__SCHEDULE">
+ <ng-container *ngIf="interval === 'daily'">
+ Daily payouts are sent {{ delay }} days after a payment has been
+ processed
+ </ng-container>
+ <ng-container *ngIf="interval === 'monthly'">
+ Monthly payouts will be issued on the {{ anchor }} day of the month
+ </ng-container>
+ </m-tooltip>
+ </div>
+ </div>
+</div>

src/app/modules/wallet/usd/balance.component.scss

+.m-walletUsd__balance {
+ padding: $minds-padding * 2;
+ margin-bottom: $minds-margin * 2;
+
+ @include m-theme() {
+ background-color: themed($m-white);
+ }
+ label {
+ font-weight: 600;
+ }
+ span {
+ margin-left: 8px;
+ }
+
+ m-tooltip {
+ vertical-align: middle;
+ i {
+ font-size: 16px;
+ color: #666;
+ margin-left: 4px;
+ }
+ }
+}

src/app/modules/wallet/usd/balance.component.ts

+import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
+
+import { RevenueLedgerComponent } from '../../monetization/revenue/ledger.component';
+import { Client } from '../../../services/api/client';
+
+@Component({
+ selector: 'm-walletUsd__balance',
+ templateUrl: './balance.component.html',
+})
+export class WalletUSDBalanceComponent {
+ balance: number;
+ currency: string;
+ interval: string;
+ delay: number;
+ anchor: number;
+
+ constructor(private client: Client) {}
+
+ ngOnInit() {
+ this.load();
+ }
+
+ async load() {
+ const { account } = <any>(
+ await this.client.get('api/v2/payments/stripe/connect')
+ );
+ this.balance =
+ (account.totalBalance.amount + account.pendingBalance.amount) / 100;
+ this.currency = account.totalBalance.currency;
+ this.interval = account.payoutInterval;
+ this.delay = account.payoutDelay;
+ this.anchor = account.payoutAnchor;
+ }
+}

src/app/modules/wallet/wallet.module.ts

@@ -47,6 +47,7 @@ import { ModalsModule } from '../modals/modals.module';
 import { WalletTokenTestnetComponent } from './tokens/testnet/testnet.component';
 import { ReferralsModule } from './tokens/referrals/referrals.module';
 import { ReferralsComponent } from './tokens/referrals/referrals.component';
+import { WalletUSDBalanceComponent } from './usd/balance.component';
 
 const walletRoutes: Routes = [
  {
@@ -148,6 +149,7 @@ const walletRoutes: Routes = [
  WalletTokenContributionsChartComponent,
  WalletToken101Component,
  WalletTokenTestnetComponent,
+ WalletUSDBalanceComponent,
  ],
  exports: [
  WalletComponent,
@@ -160,6 +162,7 @@ const walletRoutes: Routes = [
  WalletFlyoutComponent,
  WalletBalanceUSDComponent,
  WalletBalanceTokensComponent,
+ WalletUSDBalanceComponent,
  ],
  entryComponents: [WalletComponent, WalletUSDTermsComponent],
 })

src/app/modules/wire/channel/channel.component.html

@@ -34,38 +34,8 @@
  </span>
  </div>
 
- <div
- class="mdl-card__supporting-text mdl-color-text--grey-600 m-wire-channel--rewards"
- >
- <p
- *ngIf="!editing && rewards.description"
- class="m-wire-channel--description"
- [innerText]="rewards.description"
- ></p>
-
- <textarea
- *ngIf="editing"
- class="m-wire-channel--description-editor"
- [(ngModel)]="rewards.description"
- [autoGrow]
- placeholder="About your offerings. eg. Describe what your supporters will receive…"
- i18n-placeholder="@@WIRE__CHANNEL__REWARD_DESCRIPTION_PLACEHOLDER"
- ></textarea>
-
- <m-wire-channel-table
- type="tokens"
- [(rewards)]="rewards.rewards.tokens"
- [(editing)]="editing"
- [channel]="channel"
- ></m-wire-channel-table>
-
- <p
- class="m-wire-channel--disclaimer"
- *ngIf="false"
- i18n="@@WIRE__CHANNEL__REWARD_CHANGE_NOTICE"
- >
- <span>@</span>{{ channel.username }} reserves the right to change rewards
- at anytime without notice
- </p>
- </div>
+ <m-wire__subscriptionTiers
+ [user]="channel"
+ [editing]="editing"
+ ></m-wire__subscriptionTiers>
 </div>

src/app/modules/wire/channel/channel.component.scss

@@ -86,7 +86,8 @@ m-wire-channel {
  .m-wire-channel--description-editor {
  line-height: 1.3;
  letter-spacing: 0.5px;
- margin: 0 0 ($minds-padding * 2);
+ margin: 0;
+ padding: $minds-padding * 2;
  }
 
  .m-wire-channel--description {

src/app/modules/wire/channel/table/table.component.html

 <table
  class="m-wire-channel--rewards"
  [ngClass]="['m-wire-channel--rewards-' + type]"
+ [class.m-wire-channel--rewards--is-editing]="editing"
  cellspacing="0"
  cellspacing="0"
 >
@@ -8,7 +9,8 @@
  *ngFor="let reward of rewards; let i = index"
  (click)="openWireModal(reward)"
  >
- <td>
+ <td [class.m-border]="editing">
+ <label *ngIf="editing">Threshold</label>
  <div class="m-wire-channel--reward-amount">
  <span *ngIf="!editing && type == 'money'"
  >{{ reward.amount || 0 | currency: 'USD':true:'1.0-0' }}+</span
@@ -30,6 +32,7 @@
  [ngModel]="reward.amount"
  (ngModelChange)="setAmount(i, $event)"
  [placeholder]="getAmountPlaceholder()"
+ class="m-input"
  />
  <ng-container *ngIf="type == 'points'" i18n="@@M__COMMON__POINTS_SUFFIX"
  >points</ng-container
@@ -43,26 +46,29 @@
 
  <div class="m-wire-channel--reward-description">
  <p *ngIf="!editing">{{ reward.description }}</p>
- <textarea
- *ngIf="editing"
- [ngModel]="reward.description"
- (ngModelChange)="setDescription(i, $event)"
- class="m-border"
- [autoGrow]
- placeholder="Describe the reward"
- i18n-placeholder="@@WIRE__CHANNEL__TABLE__REWARD_PLACEHOLDER"
- >
- </textarea>
+ <ng-container *ngIf="editing">
+ <label>Description</label>
+ <textarea
+ *ngIf="editing"
+ [ngModel]="reward.description"
+ (ngModelChange)="setDescription(i, $event)"
+ class="m-border"
+ [autoGrow]
+ placeholder="Describe the reward"
+ i18n-placeholder="@@WIRE__CHANNEL__TABLE__REWARD_PLACEHOLDER"
+ >
+ </textarea>
+ </ng-container>
  </div>
  </td>
  </tr>
 </table>
 
 <div
- class="m-wire-channel--rewards--add-tier m-border"
+ class="m-wire-channel--rewards--add-tier"
  *ngIf="session.getLoggedInUser().guid == channel.guid"
 >
- <a (click)="addTier()">
+ <a (click)="addTier()" class="m-btn m-btn--action m-btn--slim">
  <i class="material-icons">playlist_add</i>
  <span i18n="@@WIRE__CHANNEL__TABLE__ADD_REWARD_ACTION">Add Reward</span>
  </a>

src/app/modules/wire/channel/table/table.component.scss

+.m-wire-channel--rewards > tr > td {
+ padding: $minds-padding * 2;
+ margin-bottom: $minds-margin * 2;
+
+ label {
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 26px;
+ }
+}
+
+.m-wire-channel--reward-amount {
+ display: inline-flex;
+ align-items: center;
+
+ .m-input {
+ flex: 1;
+ border-radius: 24px;
+ }
+ > span {
+ flex: 1;
+ }
+}
+
+.m-wire-channel--rewards--is-editing {
+ .m-wire-channel--rewards {
+ padding: $minds-padding $minds-padding * 2;
+ }
+ .m-wire-channel--reward-amount > span {
+ margin-left: $minds-margin * 2;
+ }
+}
+
+.m-wire-channel--reward-description {
+ margin-top: $minds-margin * 2;
+}
+
+.m-wire-channel--rewards--add-tier {
+ line-height: 56px;
+ .m-btn > * {
+ vertical-align: middle;
+ }
+}

src/app/modules/wire/channel/tiers.component.html

+<div class="m-wire-channel--rewards">
+ <p
+ *ngIf="!editing && rewards.description"
+ class="m-wire-channel--description"
+ [innerText]="rewards.description"
+ ></p>
+
+ <textarea
+ *ngIf="editing"
+ class="m-wire-channel--description-editor m-border"
+ [(ngModel)]="rewards.description"
+ [autoGrow]
+ placeholder="About your offerings. eg. Describe what your supporters will receive…"
+ i18n-placeholder="@@WIRE__CHANNEL__REWARD_DESCRIPTION_PLACEHOLDER"
+ ></textarea>
+
+ <m-wire-channel-table
+ type="tokens"
+ [(rewards)]="rewards.rewards.tokens"
+ [(editing)]="editing"
+ [channel]="user"
+ ></m-wire-channel-table>
+
+ <m-wire-channel-table
+ type="money"
+ [(rewards)]="rewards.rewards.money"
+ [(editing)]="editing"
+ [channel]="user"
+ *mIfFeature="'wire-multi-currency'"
+ ></m-wire-channel-table>
+</div>

src/app/modules/wire/channel/tiers.component.ts

+import { Component, Input, EventEmitter, Output } from '@angular/core';
+
+import { Session } from '../../../services/session';
+import { Client } from '../../../services/api';
+import {
+ WireRewardsType,
+ WireRewardsStruc,
+} from '../interfaces/wire.interfaces';
+import { WireTypeLabels } from '../wire';
+
+@Component({
+ selector: 'm-wire__subscriptionTiers',
+ templateUrl: 'tiers.component.html',
+})
+export class WireSubscriptionTiersComponent {
+ @Input() user;
+ @Input() editing;
+ @Input() saveEventListener = new EventEmitter();
+ @Output() isSaving = new EventEmitter();
+ @Output() isSaved = new EventEmitter();
+
+ rewards = {
+ description: '',
+ rewards: {
+ points: [],
+ money: [],
+ tokens: [],
+ },
+ };
+
+ constructor(public session: Session, private client: Client) {}
+
+ ngOnInit() {
+ if (this.user && this.user.wire_rewards) {
+ this.rewards = this.user.wire_rewards;
+ }
+ this.saveEventListener.subscribe(() => this.save());
+ }
+
+ async save() {
+ this.rewards.rewards.points = this._cleanAndSortRewards(
+ this.rewards.rewards.points
+ );
+ this.rewards.rewards.money = this._cleanAndSortRewards(
+ this.rewards.rewards.money
+ );
+ this.rewards.rewards.tokens = this._cleanAndSortRewards(
+ this.rewards.rewards.tokens
+ );
+
+ try {
+ await this.client.post('api/v1/wire/rewards', {
+ rewards: this.rewards,
+ });
+ this.session.getLoggedInUser().wire_rewards = this.rewards;
+ this.isSaved.next(true);
+ } catch (e) {
+ alert((e && e.message) || 'Server error');
+ } finally {
+ this.isSaving.next(false);
+ }
+ }
+
+ // Internal
+
+ private _cleanAndSortRewards(rewards: any[]) {
+ if (!rewards) {
+ return [];
+ }
+
+ return rewards
+ .filter(reward => reward.amount || `${reward.description}`.trim())
+ .map(reward => ({
+ ...reward,
+ amount: Math.abs(Math.floor(reward.amount || 0)),
+ }))
+ .sort((a, b) => (a.amount > b.amount ? 1 : -1));
+ }
+}

src/app/modules/wire/creator/creator.component.ts

@@ -416,6 +416,7 @@ export class WireCreatorComponent {
 
  switch (this.wire.payloadType) {
  case 'onchain':
+ case 'eth':
  if (!this.wire.payload && !this.wire.payload.receiver) {
  throw new Error('Invalid receiver.');
  }
@@ -447,9 +448,11 @@ export class WireCreatorComponent {
  break;
 
  case 'usd':
- //if (!this.wire.payload) {
- // throw new Error('Payment method not processed.');
- //}
+ if (!this.owner.merchant || !this.owner.merchant.id) {
+ throw new VisibleWireError(
+ 'This channel is not able to receive USD at the moment'
+ );
+ }
  break;
  case 'btc':
  if (!this.wire.payload.receiver) {

src/app/modules/wire/creator/rewards/rewards.component.ts

@@ -67,6 +67,11 @@ export class WireCreatorRewardsComponent {
 
  @Input('rewards') set _rewards(rewards) {
  this.rewards = [];
+
+ if (!rewards || !rewards.rewards) {
+ return;
+ }
+
  const methodsMap = [{ method: 'tokens', currency: 'tokens' }];
 
  if (this.featuresService.has('wire-multi-currency')) {
@@ -74,6 +79,9 @@ export class WireCreatorRewardsComponent {
  }
 
  for (const { method, currency } of methodsMap) {
+ if (!rewards.rewards[method]) {
+ continue;
+ }
  for (const reward of rewards.rewards[method]) {
  this.rewards.push({
  amount: parseInt(reward.amount),

src/app/modules/wire/wire.module.ts

@@ -26,6 +26,7 @@ import { WireMarketingComponent } from './marketing.component';
 import { WireConsoleOverviewComponent } from './console/overview/overview.component';
 import { WireConsoleRewardsInputsComponent } from './console/rewards-table/inputs/wire-console-rewards-inputs.component';
 import { WireConsoleRewardsComponent } from './console/rewards-table/rewards.component';
+import { WireSubscriptionTiersComponent } from './channel/tiers.component';
 
 const wireRoutes: Routes = [
  { path: 'wire', component: WireMarketingComponent },
@@ -60,6 +61,7 @@ const wireRoutes: Routes = [
  WireConsoleSettingsComponent,
  WireMarketingComponent,
  WireConsoleOverviewComponent,
+ WireSubscriptionTiersComponent,
  ],
  providers: [WireService],
  exports: [
@@ -74,6 +76,7 @@ const wireRoutes: Routes = [
  WireConsoleRewardsComponent,
  WireConsoleSettingsComponent,
  WireConsoleOverviewComponent,
+ WireSubscriptionTiersComponent,
  ],
  entryComponents: [
  WireCreatorComponent,