settings-payments.html

<ion-header>
  <ion-navbar color="navbar">
    <ion-buttons left>
      <button ion-button color="cancel" *ngIf="modal == true" (click)="closeModal($event)">Close</button>
    </ion-buttons>
    <ion-title>Subscription Plans</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-12 col-sm-4>
        <h2 class="extra-sms-credits" [class.enabled]="organization && organization.hasProPlan()">Extra SMS Credits</h2>
          <ion-card class="extra-sms-credits" [class.enabled]="organization && organization.hasProPlan()">
          <ion-card-header>
            {{this.CREDIT_BUNDLE_RATE | currency}} USD per credit <span *ngIf="addCreditsRecurring">per month</span>
          </ion-card-header>
          <ion-card-content>
            <ion-list class="features">
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>1 credit = 1 text message in the United States</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>International credits vary</ion-item>
              <!-- <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Renewed every month</ion-item> -->
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Ensure you always have enough credits to reach your team in an emergency</ion-item>
            </ion-list>
            <div *ngIf="organization && organization.hasProPlan()">
              <p>Add credits</p>
              <ion-input type="number" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="50" (keyup)="onCreditsChange($event)" (change)="onCreditsChange($event)" [(ngModel)]="updatedCredits"></ion-input>
              <ion-item text-wrap color="white">
                <ion-label>Add extra credits immediately</ion-label>
                <ion-checkbox [(ngModel)]="addCreditsImmediately"></ion-checkbox>
              </ion-item>
              <ion-item text-wrap color="white">
                <ion-label>Make this a recurring payment</ion-label>
                <ion-checkbox [(ngModel)]="addCreditsRecurring"></ion-checkbox>
              </ion-item>
              <p *ngIf="updatedCreditsCost">Cost: {{updatedCreditsCost | currency}} <span *ngIf="addCreditsRecurring">per month</span></p>
            </div>
            <button ion-button block disabled color="primary" *ngIf="organization && !organization.hasProPlan()">TenFour Pro Only</button>
            <button ion-button block color="primary" *ngIf="organization && organization.hasProPlan()" (click)="addCredits($event)">Add SMS Credits</button>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col col-12 col-sm-4>
        <h2 [class.activated]="organization && organization.hasProPlan()">Pro</h2>
        <ion-card [class.activated]="organization && organization.hasProPlan()">
          <ion-card-header>{{PRO_FLAT_RATE | currency}} USD per month</ion-card-header>
          <ion-card-content>
            <ion-list class="features">
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Unlimited in-app check-ins</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Unlimited email check-ins</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Unlimited Slack check-ins</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>100 SMS credits per month</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>100 users included</ion-item>
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>$5 per month for every additional 25 users</ion-item>
              <ion-item *ngIf="organization && organization.hasProPlan() && organization.credits_extra"><ion-icon name="checkmark-circle" item-start></ion-icon>{{organization.credits_extra | number}} extra credits per month</ion-item>
            </ion-list>
            <ion-list *ngIf="organization && organization.hasProPlan() && subscription">
              <ion-item text-wrap><ion-icon name="people" item-start></ion-icon>{{billingEstimate | currency}} per month for {{organization.user_count}}
                <ng-container *ngIf="organization.user_count == 1">person</ng-container>
                <ng-container *ngIf="organization.user_count > 1">people</ng-container>
                (estimate)</ion-item>
              <ion-item text-wrap><ion-icon name="calculator" item-start></ion-icon>Billed on {{subscription.next_billing_at | dayOfMonth}} of every month</ion-item>
              <ion-item text-wrap *ngIf="subscription.promo_code"><ion-icon name="pricetag" item-start></ion-icon>Coupon code: {{subscription.promo_code}}</ion-item>
              <ion-item text-wrap><ion-icon name="card" item-start></ion-icon>XXXX-XXXX-XXXX-{{subscription.last_four}} {{subscription.card_type}}</ion-item>
            </ion-list>
            <p text-center *ngIf="organization && organization.hasProPlan()">
              <button ion-button block clear color="secondary" (click)="updateBillingInfo($event)">Update your billing info</button>
            </p>
            <button ion-button icon-left outline disabled block color="primary" *ngIf="organization && organization.hasProPlan()"><ion-icon name="checkmark"></ion-icon> You have TenFour Pro</button>
            <button ion-button block color="primary" *ngIf="organization && !organization.hasProPlan()" (click)="switchToPro($event)">Upgrade to TenFour Pro</button>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col col-12 col-sm-4>
        <h2 [class.activated]="organization && organization.hasFreePlan()">Free</h2>
        <ion-card [class.activated]="organization && organization.hasFreePlan()">
          <ion-card-header>Free!</ion-card-header>
          <ion-card-content>
            <ion-list class="features">
              <ion-item text-wrap><ion-icon name="checkmark-circle" item-start></ion-icon>Unlimited in-app check-ins</ion-item>
            </ion-list>
            <button ion-button icon-left outline block disabled color="primary" *ngIf="organization && organization.hasFreePlan()"><ion-icon name="checkmark"></ion-icon> You are on free plan</button>
            <button ion-button block color="primary" *ngIf="organization && !organization.hasFreePlan()" (click)="switchToFree($event)">Switch to TenFour free</button>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>