(chore): various changes to upgrades page

src/app/modules/plus/subscription.component.ts

@@ -6,6 +6,8 @@ import {
  Output,
  Input,
 } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 import { Client } from '../../common/api/client.service';
 import { Web3WalletService } from '../blockchain/web3-wallet.service';
@@ -36,6 +38,10 @@ export class PlusSubscriptionComponent {
  payload: any;
  minds = window.Minds;
 
+ currency: string;
+ interval: string;
+ paramSubscription: Subscription;
+
  constructor(
  private client: Client,
  private tokenContract: TokenContractService,
@@ -45,9 +51,21 @@ export class PlusSubscriptionComponent {
  private modal: SignupModalService,
  private wirePaymentHandlers: WirePaymentHandlersService,
  public session: Session,
- private cd: ChangeDetectorRef
+ private cd: ChangeDetectorRef,
+ private route: ActivatedRoute
  ) {}
 
+ ngOnInit() {
+ this.paramSubscription = this.route.queryParams.subscribe(
+ (params: Params) => {
+ this.currency = params.c || 'tokens';
+ this.interval = params.i || 'yearly';
+
+ if (params.c || params.i) this.purchase();
+ }
+ );
+ }
+
  load(): Promise<any> {
  return this.client
  .get('api/v1/plus')
@@ -80,9 +98,9 @@ export class PlusSubscriptionComponent {
  WirePaymentsCreatorComponent,
  await this.wirePaymentHandlers.get('plus'),
  {
- interval: 'monthly',
- currency: 'tokens',
- amount: this.minds.upgrades.plus['monthly']['tokens'],
+ interval: this.interval,
+ currency: this.currency,
+ amount: this.minds.upgrades.plus[this.interval][this.currency],
  onComplete: wire => {
  this.completed = true;
  this.user.plus = true;
@@ -113,4 +131,8 @@ export class PlusSubscriptionComponent {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
+
+ ngOnDestroy() {
+ this.paramSubscription.unsubscribe();
+ }
 }

src/app/modules/pro/marketing.component.html

@@ -7,14 +7,14 @@
  </h1>
 
  <h2 ngPreserveWhitespaces i18n>
- The ultimate platform for <em>independent</em> <em>content</em>
- <em>creators</em>
+ The ultimate platform for <em>creators</em> <em>and</em>
+ <em>brands</em>
  </h2>
 
  <p class="m-marketing__description" i18n>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
- doloremque eveniet incidunt magnam possimus quibusdam rem veritatis
- voluptate! Aperiam, eum.
+ Earn revenue for your content and upgrade your channel into an
+ independent website with all the professional tools you need to do
+ what you love.
  </p>
 
  <div class="">

src/app/modules/pro/subscription/subscription.component.html

-<div *ngIf="isLoggedIn">
+<div *ngIf="isLoggedIn || true">
  <ng-container *ngIf="!inProgress; else inProgressSpinner">
  <div>
  <div class="m-proSubscriptionPlan__toggleContainer">

src/app/modules/pro/subscription/subscription.component.ts

@@ -6,6 +6,9 @@ import {
  OnInit,
  Output,
 } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
+
 import { Session } from '../../../services/session';
 import { ProService } from '../pro.service';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
@@ -29,7 +32,9 @@ export class ProSubscriptionComponent implements OnInit {
 
  interval: UpgradeOptionInterval = 'yearly';
 
- currency: UpgradeOptionCurrency = 'tokens';
+ currency: UpgradeOptionCurrency = 'usd';
+
+ paramSubscription: Subscription;
 
  isLoggedIn: boolean = false;
 
@@ -48,7 +53,8 @@ export class ProSubscriptionComponent implements OnInit {
  protected session: Session,
  protected overlayModal: OverlayModalService,
  protected wirePaymentHandlers: WirePaymentHandlersService,
- protected cd: ChangeDetectorRef
+ protected cd: ChangeDetectorRef,
+ protected route: ActivatedRoute
  ) {}
 
  ngOnInit() {
@@ -57,6 +63,15 @@ export class ProSubscriptionComponent implements OnInit {
  if (this.isLoggedIn) {
  this.load();
  }
+
+ this.paramSubscription = this.route.queryParams.subscribe(
+ (params: Params) => {
+ this.currency = params.c || 'usd';
+ this.interval = params.i || 'yearly';
+
+ if (params.c || params.i) this.enable();
+ }
+ );
  }
 
  async load() {
@@ -160,4 +175,8 @@ export class ProSubscriptionComponent implements OnInit {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
+
+ ngOnDestroy() {
+ this.paramSubscription.unsubscribe();
+ }
 }

src/app/modules/upgrades/upgrade-options.component.html

@@ -104,9 +104,9 @@
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
- <li>TBD</li>
- <li>TBD</li>
- <li>TBD</li>
+ <li>Get paid for your work</li>
+ <li>Build your own custom website</li>
+ <li>Professional media tools</li>
  </ul>
 
  <p>

src/app/modules/upgrades/upgrade-options.component.ts

@@ -15,7 +15,7 @@ export class UpgradeOptionsComponent {
 
  interval: UpgradeOptionInterval = 'yearly';
 
- currency: UpgradeOptionCurrency = 'tokens';
+ currency: UpgradeOptionCurrency = 'usd';
 
  get intervalCurrencyQueryParams() {
  return { i: this.interval, c: this.currency };

src/app/modules/upgrades/upgrades.component.html

@@ -16,9 +16,11 @@
  </p>
 
  <ul class="m-marketing__points">
- <li>Lorem ipsum dolor sit amet.</li>
- <li>Aliquam eveniet impedit maiores sapiente.</li>
- <li>Aperiam laudantium nemo non soluta.</li>
+ <li>Join Plus to hide boosts, access exclusive content and more</li>
+ <li>
+ Launch Pro to build your own website and get paid for your work
+ </li>
+ <li>Buy Minds Tokens to boost content and support creators</li>
  </ul>
 
  <a

src/app/modules/wire/creator/payments/payments.creator.component.html

@@ -16,7 +16,7 @@
  [class.m-wire--creator-wide-input--reading]="!editingAmount"
  >
  <div class="m-wire--creator-wide-input--fixedAmount">
- 20
+ {{ wire.amount }}
  </div>
 
  <div
@@ -78,7 +78,7 @@
  </span>
  </div>
 
- <div class="m-wire--creator--recurring" *ngIf="canRecur">
+ <div class="m-wire--creator--recurring" *ngIf="canRecur && false">
  <label
  class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
  for="wire-recurring-1"
@@ -104,231 +104,6 @@
 
  <!-- Payment Method -->
  <section class="m-wire--creator-section m-wire--creator-payment-section">
- <h3
- class="m-wire--creator-section-title--small"
- i18n="@@WIRE__CREATOR__WIRE_TYPE_TITLE"
- >
- Payment Method
- </h3>
-
- <ul
- class="m-wire--creator-selector"
- [class.m-wire--creator-selector--has-selection]="wire.payloadType"
- >
- <li
- (click)="setPayloadType('offchain')"
- [class.m-wire--creator-selector--highlight]="
- !wire.payloadType ||
- wire.payloadType === 'onchain' ||
- wire.payloadType === 'offchain'
- "
- >
- <div class="m-wire--creator-selector-type">
- <img [src]="minds.cdn_assets_url + 'assets/logos/bulb.svg'" />
- <h5>
- <span i18n="@@M__COMMON__OFFCHAIN">Tokens</span>
- <m-tooltip icon="help" i18n="@@WIRE__CREATOR__OFFCHAIN_TOOLTIP">
- Offchain payments will not be published to the blockchain and
- are limited to 100 tokens a day.
- </m-tooltip>
- </h5>
-
- <span class="m-wire--creator-selector-subtext">
- <m-tooltip anchor="left">
- <span
- m-tooltip--anchor
- class="m-boost--creator-selector--hoverable"
- i18n="@@M__COMMON__BALANCE"
- >Balance</span
- >
-
- <ng-container i18n="@@WIRE__CREATOR__BALANCE_OFFCHAIN_TOOLTIP">
- This balance is for your Minds.com OffChain wallet.
- Transactions made from this address will not appear on the
- blockchain.
- </ng-container> </m-tooltip
- >:
-
- <ng-container
- *ngIf="balances.onchain !== null; else loadingOnchainBalance"
- >
- {{ balances.offchain | token: 18 | number }}
- </ng-container>
-
- <ng-template #loadingOnchainBalance>&hellip;</ng-template>
- </span>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
- <li
- (click)="setPayloadType('usd')"
- [class.m-wire--creator-selector--highlight]="
- !wire.payloadType || wire.payloadType === 'usd'
- "
- *mIfFeature="'wire-multi-currency'"
- >
- <div class="m-wire--creator-selector-type">
- <i class="material-icons">attach_money</i>
- <h5>
- <span i18n="@@M__COMMON__ONCHAIN">USD</span>
- <m-tooltip icon="help" i18n="@@WIRE__CREATOR__OFFCHAIN_TOOLTIP">
- This channel accepts USD.
- </m-tooltip>
- </h5>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
- <li
- (click)="setPayloadType('eth')"
- [class.m-wire--creator-selector--highlight]="
- !wire.payloadType || wire.payloadType === 'eth'
- "
- *mIfFeature="'wire-multi-currency'"
- >
- <div class="m-wire--creator-selector-type">
- <img
- [src]="
- minds.cdn_assets_url + 'assets/marketing/ethereum_logo.png'
- "
- style="margin-left: -12px"
- />
- <h5>
- <span i18n="@@M__COMMON__ONCHAIN">ETH</span>
- <m-tooltip icon="help" i18n="@@WIRE__CREATOR__OFFCHAIN_TOOLTIP">
- You can send ETH to this user, however it will not recur.
- </m-tooltip>
- </h5>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
- <li
- (click)="setPayloadType('btc')"
- [class.m-wire--creator-selector--highlight]="
- !wire.payloadType || wire.payloadType === 'btc'
- "
- *mIfFeature="'wire-multi-currency'"
- >
- <div class="m-wire--creator-selector-type">
- <img
- [src]="minds.cdn_assets_url + 'assets/marketing/btc.svg'"
- style="margin-left: -12px"
- />
- <h5>
- <span i18n="@@M__COMMON__ONCHAIN">BTC</span>
- <m-tooltip icon="help" i18n="@@WIRE__CREATOR__OFFCHAIN_TOOLTIP">
- You can send BTC to this user, however it will not recur.
- </m-tooltip>
- </h5>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
- <li
- (click)="setPayloadType('onchain')"
- [class.m-wire--creator-selector--highlight]="
- !wire.payloadType || wire.payloadType === 'onchain'
- "
- *ngIf="false"
- >
- <div class="m-wire--creator-selector-type">
- <i class="material-icons">check_circle</i>
- <h5>
- <span i18n="@@M__COMMON__ONCHAIN">OnChain</span>
- <m-tooltip icon="help" i18n="@@WIRE__CREATOR__ONCHAIN_TOOLTIP">
- Onchain payments will be published to the public blockchain. You
- may utilize Metamask or another address. These purchases require
- a Gas fee.
- </m-tooltip>
- </h5>
-
- <span class="m-wire--creator-selector-subtext">
- <m-tooltip anchor="left">
- <span
- m-tooltip--anchor
- class="m-boost--creator-selector--hoverable"
- i18n="@@M__COMMON__BALANCE"
- >Balance</span
- >
-
- <ng-container
- *ngIf="
- !balances.isReceiverOnchain;
- else receiverOnchainTooltip
- "
- i18n="@@WIRE__CREATOR__ACTIVE_ADDRESS_TOOLTIP"
- >
- This balance is for the
- {{ balances.onChainAddress | addressExcerpt: true }} wallet
- that is currently active in your Ethereum interface.
- </ng-container>
- <ng-template
- #receiverOnchainTooltip
- i18n="@@WIRE__CREATOR__RECEIVER_ADDRESS_TOOLTIP"
- >
- This balance is for the
- {{ balances.onChainAddress | addressExcerpt: true }} wallet
- that is currently set up as the receiver wallet for your
- channel.
- </ng-template> </m-tooltip
- >:
-
- <ng-container
- *ngIf="balances.onchain !== null; else loadingOnchainBalance"
- >
- {{ balances.onchain | token: 18 | number }}
- </ng-container>
-
- <ng-template #loadingOnchainBalance>&hellip;</ng-template>
- </span>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
-
- <li (click)="buyTokens()" *ngIf="false">
- <div class="m-wire--creator-selector-type">
- <i class="material-icons">monetization_on</i>
- <h5 i18n="@@M__COMMON__BUY_MINDS_TOKENS">
- <span>Buy Tokens</span>
- </h5>
-
- <span
- class="m-wire--creator-selector-subtext"
- i18n="@@M__WIRE_CREATOR__DONT_HAVE_TOKENS"
- >
- Don't have tokens?
- </span>
- </div>
- <span
- class="m-wire--creator-selector--selected-label"
- i18n="@@M__COMMON__SELECTED"
- >Selected</span
- >
- </li>
-
- <ng-template #spacer>
- <li class="m-layout--spacer"></li>
- </ng-template>
- </ul>
-
  <!-- Credit card selector -->
  <ng-container *ngIf="wire.payloadType === 'usd'">
  <h3 class="m-wire--creator-section-title--small">Select or add card</h3>

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

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { WireCreatorComponent } from '../creator.component';
 import { CurrencyPipe } from '@angular/common';
 
@@ -7,4 +7,18 @@ import { CurrencyPipe } from '@angular/common';
  selector: 'm-wire__paymentsCreator',
  templateUrl: 'payments.creator.component.html',
 })
-export class WirePaymentsCreatorComponent extends WireCreatorComponent {}
+export class WirePaymentsCreatorComponent extends WireCreatorComponent {
+ @Input('opts') set opts(opts) {
+ this._opts = opts;
+ this.wire.amount = opts.amount;
+ switch (opts.currency) {
+ case 'tokens':
+ this.wire.payloadType = 'offchain';
+ break;
+ default:
+ this.wire.payloadType = opts.currency;
+ }
+ }
+
+ ngOnInit() {}
+}