copay/www/views/bitpayCard.html

<ion-view id="bitpayCard">
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>BitPay Visa<sup>&reg;</sup> Card ({{bitpayCard.lastFourDigits}})</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification warning m0" ng-show="network == 'testnet'">
      Sandbox version. Only for testing purpose
    </div>

    <div class="amount-wrapper" ng-show="!error">
      <div class="amount-bg"></div>
      <div class="amount">
        <div ng-if="bitpayCard.balance" ng-click="bitpayCard.update()">
          <div class="amount__balance">{{bitpayCard.currencySymbol}}{{bitpayCard.balance}}</div>

          <div class="size-12 m5r" ng-if="bitpayCard.updatedOn">
            {{bitpayCard.updatedOn  * 1000 | amTimeAgo}}
          </div>

          <a class="button button-primary button-small m5t size-14"
            style="padding: 0.5em 1em;"
            ui-sref="tabs.bitpayCard.amount({nextStep: 'tabs.bitpayCard.topup', currency: bitpayCard.currency})" no-low-fee>
            <i class="icon ion-plus m10r" style="vertical-align: baseline;"></i>
            {{'Add Funds'|translate}}
          </a>
        </div>
        <div ng-if="!bitpayCard.balance" class="m10t">
          <strong class="size-36">...</strong>
        </div>
      </div>

      <div class="wallet-details-wallet-info">
        <ion-spinner class="spinner-dark recent right" icon="crescent" ng-show="loadingHistory"  ></ion-spinner>
      </div>
    </div>

    <div ng-show="error" class="text-center m10t assertive">
      {{error}}
    </div>

    <div
      class="text-center padding get-started"
      ng-show="bitpayCard.getStarted">
      <i class="icon ion-ios-arrow-thin-up get-started__arrow"></i>
      <h1 translate>Get started</h1>
      <div class="get-started__text" translate>
        Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.
      </div>
    </div>
    <div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0] && !bitpayCard.underpaidInvoiceInList && bitpayCard.delayedInvoiceInList" class="comment">
      <span translate>Confirming transactions take up to 1 block confirmation to proccess.</span>
      <a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')" translate>Learn More</a>
    </div>
    <div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0] && bitpayCard.underpaidInvoiceInList" class="comment">
      <span translate>Confirming load transactions that are underpaid may require at least six blockchain confirmations to process.</span>
      <a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')" translate>Learn More</a>
    </div>
    <div ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0]" class="comment">
      <span translate>(Pre-Auth Holds transactions) The merchant has initiated a hold to make those funds unavailable until your transaction to them has fully settled. Funds are released within 30 days at the latest in the event the merchant decides not to complete the transaction.</span>
      <a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-was-i-overcharged-on-my-bitpay-card-account-why-is-there-a-hold-on-my-account')" translate>Learn More</a>
    </div>
    <div class="list" ng-show="!bitpayCard.getStarted">
      <label class="item item-input item-select activity-header">
        <div class="input-label" translate>
          Activity
        </div>
        <select ng-model="dateRange.value" ng-change="bitpayCard.update()">
          <option value="last30Days" selected translate>Recent</option>
          <option value="lastMonth" translate>Last Month</option>
          <option value="all" translate>All</option>
        </select>
      </label>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0]">
        <label class="item status-label">
          <div translate>
            Confirming
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryConfirming">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0]">
        <label class="item status-label">
          <div translate>
            Pre-Auth Holds
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryPreAuth">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryCompleted[0]">
        <label ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0]" class="item status-label">
          <div translate>
            Completed
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryCompleted">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>