Wallet/public/views/bitpayCard.html

<div ng-controller="bitpayCardController as bitpayCard">
  <div class="topbar-container">
    <nav ng-controller="topbarController as topbar" ng-style="{'background-color': '#293C92'}" class="tab-bar">
      <section ng-show="!addFunds" class="left-small">
        <a class="p10"
           ng-click="topbar.goHome()">
          <span class="text-close">Close</span>
        </a>
      </section>

      <section class="right-small" ng-show="bitpayCard.bitpayCardAuthenticated && !addFunds">
        <a class="p10" href ui-sref="preferencesBitpayCard">
          <i class="fi-widget size-24"></i>
        </a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title ellipsis">
          <span ng-show="!addFunds">BitPay Card</span>
          <span ng-show="addFunds">Add Funds</span>
        </h1>
      </section>
    </nav>
  </div>

  <div class="content bitpay_card p20b" ng-init="bitpayCard.init()">

    <div class="box-notification text-center size-12 text-warning" ng-show="bitpayCard.sandbox">
      <i class="fi-info"></i>
      Sandbox version. Only for testing purpose
    </div>

    <div class="m20t text-center size-12 text-gray" ng-show="!bitpayCard.bitpayCardAuthenticated && bitpayCard.loadingSession">
      Loading...
    </div>

    <div class="row" ng-show="!bitpayCard.bitpayCardAuthenticated && !bitpayCard.loadingSession">
      <div class="columns large-centered large-6 medium-centered medium-6 small-centered small-10">
        <div class="text-center m20v">
          <img src="img/bitpay-card-visa.svg" width="200">
        </div>
        <h2 class="m20b text-center">
          <span ng-show="!bitpayCard.bitpayCardTwoFactorPending">Login to your account</span>
          <span ng-show="bitpayCard.bitpayCardTwoFactorPending">2-Step Verification</span>
        </h2>
        <div class="m10b box-notification size-12 text-warning"
             ng-show="bitpayCard.error"
             ng-click="bitpayCard.error = null">
          {{bitpayCard.error}}
        </div>

        <form
             ng-show="!bitpayCard.bitpayCardTwoFactorPending"
             name="authenticateForm"
             ng-submit="bitpayCard.authenticate()"
             novalidate>

          <label>
            Email
            <div class="input">
              <input
                 name="email"
                 type="email"
                 ng-model="email"
                 ng-disabled="bitpayCard.authenticating"
                 required>
            </div>
          </label>

          <label>
            Password
            <div class="input">
              <input
                 name="password"
                 type="password"
                 ng-model="password"
                 ng-disabled="bitpayCard.authenticating"
                 required>
            </div>
          </label>

          <div class="input text-center">
            <input class="button black round tiny"
                   ng-style="{'background-color': '#293C92'}"
                   type="submit"
                   ng-disabled="!authenticateForm.$valid || bitpayCard.authenticating"
                   value="Login">
          </div>
        </form>

        <p ng-show="bitpayCard.bitpayCardTwoFactorPending" class="size-12 text-center text-gray">
        Enter the verification code generated by the authenticator app on your phone.
        </p>

        <form
             ng-show="bitpayCard.bitpayCardTwoFactorPending"
             name="authenticate2FAForm"
             ng-submit="bitpayCard.authenticate2FA()"
             novalidate>

          <label>
            Verification Code
            <div class="input">
              <input
                 name="twoFactorCode"
                 type="text"
                 ng-model="twoFactorCode"
                 ng-disabled="bitpayCard.authenticating"
                 required>
            </div>
          </label>

          <div class="input text-center">
            <input class="button black round tiny"
                   ng-style="{'background-color': '#293C92'}"
                   type="submit"
                   ng-disabled="!authenticate2FAForm.$valid || bitpayCard.authenticating"
                   value="Login">
          </div>
        </form>
      </div>
    </div>

    <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && !addFunds">
      <div class="oh pr">
        <div class="amount" ng-style="{'background-color': '#293C92'}">
          <div ng-show="!loadingHistory && bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
            <strong class="size-36">${{bitpayCard.bitpayCardCurrentBalance}}</strong>
            <div class="size-12">Available balance</div>
          </div>
          <div ng-show="loadingHistory">
            <strong class="size-36">...</strong>
          </div>
        </div>
        <div class="camera-icon" ng-show="bitpayCard.bitpayCardCurrentBalance">
          <a ng-click="addFunds = true">
            <i class="fi-plus size-21"></i>
          </a>
        </div>
      </div>

      <select ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
        <option value="last30Days">Recent Activity</option>
        <option value="lastMonth">Last Month</option>
        <option value="all">All Activity</option>
      </select>

      <div class="m20v size-12 text-center text-warning"
           ng-show="bitpayCard.error">
        {{bitpayCard.error}}
      </div>

      <div
        class="oh pr m20t text-gray size-12 text-center"
        ng-show="!bitpayCard.error && !bitpayCard.bitpayCardTransactionHistory[0] &&
        !bitpayCard.bitpayCardInvoiceHistory[0] && !loadingHistory">
        No transactions yet
      </div>

      <div ng-show="loadingHistory" class="oh pr m20t text-gray text-center">
        <img style="height:2em" class="animated flash infinite" src="img/icon-sync.svg">
      </div>

      <div
        ng-show="!loadingHistory"
        ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
        class="row collapse last-transactions-content"
        ng-init="bitpayCard.getMerchantInfo(tx)">
        <div class="large-1 medium-1 small-1 columns" ng-init="icon = bitpayCard.getIconName(tx)">
          <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
        </div>

        <div class="large-4 medium-4 small-4 columns">
          <div class="size-12 text-bold">
            {{tx.merchant.name}}
          </div>
          <div class="size-12">
            {{tx.merchant.city}}, {{tx.merchant.state}}
          </div>
        </div>
        <div
          ng-init="desc = bitpayCard.processDescription(tx)"
          class="large-3 medium-3 small-3 show-for-medium-up columns size-12 text-gray text-right">
          {{desc}}
        </div>
        <div class="large-1 medium-1 small-1 columns text-right">
          <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
          <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
        </div>
        <div class="large-3 medium-3 small-3 columns text-right size-12 text-gray">
          <div class="size-14"
               ng-class="{
               'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
               'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
            {{tx.amount | currency:'$':2 }}
          </div>
          <time>{{tx.timestamp | amTimeAgo}}</time>
        </div>
      </div>
    </div>

    <div class="row m20t" ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && addFunds">
      <div class="columns">
        <div class="m10b box-notification size-12 text-warning"
             ng-show="bitpayCard.error"
             ng-click="bitpayCard.error = null">
          {{bitpayCard.error}}
        </div>
        <form
           name="createInvoiceForm"
           ng-submit="bitpayCard.sendFunds()"
           novalidate>

          <label>
            Amount
            <div class="input">
              <input
                 type="number"
                 id="fiat"
                 name="fiat"
                 ng-attr-placeholder="{{'Amount in USD'}}"
                 min="0.01"
                 max="2000"
                 ng-model="fiat"
                 autocomplete="off"
                 required>

              <a class="postfix button black">USD</a>
            </div>
          </label>

          <label>
            Add From Copay Wallet
          </label>
          <div class="input">
            <input
               type="text"
               id="address"
               name="address"
               ng-disabled="bitpayCard.selectedWalletId"
               ng-attr-placeholder="{{'Choose your source wallet'}}"
               ng-model="bitpayCard.selectedWalletName" required>
            <a
              class="postfix size-12 m0 text-gray"
              ng-style="{'color': '#293C92'}"
              ng-click="openWalletsModal(bitpayCard.allWallets)">
              <i class="icon-wallet size-18"></i>
            </a>
          </div>

          <p class="size-12 text-warning" ng-show="bitpayCard.isMultisigWallet">
            You selected a multisignature wallet. Please note that the transaction will only appear on your card's
            Activity when the payment is fully signed.
          </p>

          <div class="input row">
            <div class="columns large-6 medium-6 small-6">
            <input class="button outline dark-gray round expand"
                   type="button" value="Cancel" ng-click="addFunds = false; bitpayCard.error = null">
            </div>
            <div class="columns large-6 medium-6 small-6">
            <input class="button black round expand"
                   ng-style="{'background-color': '#293C92'}"
                   ng-disabled="!bitpayCard.selectedWalletId || !fiat"
                   type="submit" value="Send">
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="extra-margin-bottom"></div>
  </div>
</div>