copay-crown/src/pages/integrations/mercado-libre/mercado-libre.html

A Secure Crown Wallet

<ion-header>
  <ion-navbar>
    <ion-title>{{'Mercado Livre Brazil Gift Cards'|translate}}s</ion-title>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div class="container" *ngIf="!giftCards">
    <div class="box-notification warning" *ngIf="network == 'testnet'">
      Sandbox version. Only for testing purpose.
    </div>
    <div class="center-header">
      <div class="logo">
        <img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
      </div>
      <div class="description" translate padding>
        <b>Only</b> redeemable on Mercado Livre (Brazil)
      </div>
      <div *ngIf="!showOauthForm">
        <button ion-button outline block (click)="goTo('Amount')" no-low-fee translate>Buy a Gift Card</button>
        <button ion-button clear small block color="dark" (click)="openExternalLink('https://www.mercadolivre.com.br')" translate>Visit mercadolivre.com.br &rarr;</button>
      </div>
    </div>
  </div>
  <div class="container" *ngIf="giftCards">
    <div class="box-notification warning" *ngIf="network == 'testnet'">
      Sandbox version. Only for testing purpose.
    </div>

    <div class="integration-giftCard-logo">
      <img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
      <div class="subtitle" translate>
        <b>Only</b> redeemable on Mercado Livre (Brazil)
      </div>
      <button color="dark" ion-button clear icon-right no-low-fee (click)="goTo('Amount')">
        <span translate>Buy Gift Card</span>
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </div>

    <ion-list>
      <ion-item-divider>{{'Your Gift Cards'|translate}}</ion-item-divider>
      <button ion-item *ngFor="let item of (giftCards | keys : 'date') | orderBy : ['-order']" (click)="openCardModal(item.value)">
        <div class="mercado-libre-card">
          <img src="assets/img/mercado-libre/meli-card-24px.png" alt="" class="avatar">
          <div class="card-info">
            <div class="amount">
              <h2 *ngIf="item.value.amount">
                {{item.value.amount | currency : '$ ' : 2}} {{item.value.currency}}
              </h2>
              <span>
                <span class="assertive" *ngIf="item.value.status == 'FAILURE'">Error</span>
                <span class="dark" *ngIf="item.value.status == 'expired'">Invoice expired</span>
                <span class="calm" *ngIf="item.value.status == 'invalid'">Still pending</span>
                <span class="positive" *ngIf="item.value.status == 'PENDING'">Pending</span>
                <span class="assertive" *ngIf="item.value.cardStatus == 'inactive'" translate>Inactive</span>
                <span class="assertive" *ngIf="item.value.cardStatus == 'expired'" translate>Expired</span>
              </span>
            </div>
            <span class="dark">{{item.value.date | amTimeAgo}}</span>
          </div>
        </div>
      </button>
    </ion-list>
  </div>
</ion-content>