signup-plan.html

<ion-header>
  <ion-navbar color="navbar">
    <ion-buttons left>
      <button ion-button icon-only (click)="closeModal($event)">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons right>
      <button color="primary" #next ion-button text-only [solid]="website == true ? 'true' : null" (click)="showNext($event)">Next</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item text-wrap class="heading">
      <img src="assets/images/logo-dots.png"/>
      <h2>Ready to choose your plan?</h2>
    </ion-item>
    <ion-item text-wrap no-lines text-center class="info">
      <h1 text-center no-padding no-margin>$3</h1>
      <p class="usage">per user,<br>per month</p>
      <p class="features">
        <strong>Unlimited in-app messages</strong><br>
        <strong>Unlimited email messages</strong><br>
        <strong>Unlimited Slack messages</strong><br>
        <strong>5 text messages (SMS) credits per user, per month</strong>
        <!-- <button ion-button clear color="primary" (click)="needMore($event)">Need to send more text messages?</button> -->
      </p>
    </ion-item>
    <ion-item no-lines text-center class="action">
      <button ion-button color="primary" *ngIf="trial == false" tappable (click)="startPlan($event)">Signup for this plan</button>
      <button ion-button outline color="primary" *ngIf="trial == true" tappable (click)="startPlan($event)">Signup for this plan</button>
      <button ion-button color="secondary" *ngIf="trial == true" tappable (click)="startTrial($event)">Try free for 7 days</button>
      <button ion-button outline color="primary" *ngIf="trial == false" tappable (click)="startTrial($event)">Try free for 7 days</button>
    </ion-item>
  </ion-list>
</ion-content>