Handle errors. Cancel gift card

public/views/amazon.html

@@ -40,7 +40,7 @@
 
   <div ng-init="amazon.init()">
 
-    <div class="p20t text-center">
+    <div class="p20t text-center" ng-click="amazon.init()">
       <img src="img/amazon-gift-card.png" alt="Amazon Gift Card" width="200">
     </div>
 
@@ -60,8 +60,9 @@
           {{item.cardInfo.value.amount | currency : item.cardInfo.value.currencyCode + ' ' : 2}}
         </div>
         <div class="large-5 medium-5 small-5 columns text-right">
-          <span class="text-warning" ng-if="item.status == 'ERROR'">Error</span>
-          <span class="text-light" ng-if="item.status != 'ERROR'">{{item.date * 1000 | amTimeAgo}}</span>
+          <span class="text-warning" ng-if="item.status == 'FAILURE'">Error</span>
+          <span class="text-secondary" ng-if="item.status == 'RESEND'">Resend is required</span>
+          <span class="text-light" ng-if="item.status == 'SUCCESS'">{{item.date * 1000 | amTimeAgo}}</span>
         </div>
         <div class="large-1 medium-1 small-1 columns text-right">
           <i class="icon-arrow-right3 size-18"></i>

public/views/buyAmazon.html

@@ -27,6 +27,17 @@
         <span class="text-warning">
           {{buy.error}}
         </span>
+        <div class="m10t size-12" ng-show="buy.errorInfo">
+          There was an error when trying to buy gift card, but the funds were sent to BitPay Invoice. Please, contact
+          BitPay to refund your bitcoin
+          <div class="p10 m10t">
+            Amount: {{buy.errorInfo.amount}} {{buy.errorInfo.currencyCode}}<br>
+            BitPay Invoice ID: {{buy.errorInfo.bitpayInvoiceId}}.
+          </div>
+          <div class="text-center">
+            <a ng-click="$root.openExternalLink(buy.errorInfo.bitpayInvoiceUrl)">Open invoice</a>
+          </div>
+        </div>
       </div>     
 
       <div class="text-center">
@@ -73,7 +84,27 @@
   </div>
 
   <div class="m20t row" ng-show="buy.giftCard">
-    <div class="columns">
+    <div class="columns" ng-show="buy.giftCard.status != 'SUCCESS'">
+      <h1 class="text-center">Amazon.com Gift Card could not be created</h1>
+      <div class="box-notification m20b">
+        <span class="text-warning">
+          There was an error when trying to create the Amazon.com Gift Card. Status: {{buy.giftCard.status}}
+        </span>
+      </div>
+      <div class="text-gray size-12 m20t">
+        <span ng-show="buy.giftCard.status == 'RESEND'">
+          This is a temporary/recoverable system failure that can be
+          resolved retrying the request from your list of cards
+        </span>
+        <span ng-show="buy.giftCard.status == 'FAILURE'">
+          This failure could not be recoverable. Request your refund from your list of cards 
+        </span>
+        <button class="m20t button outline round dark-gray expand" ng-click="$root.go('amazon')">
+          Back 
+        </button>
+      </div>
+    </div>
+    <div class="columns" ng-show="buy.giftCard.status == 'SUCCESS'">
       <h1 class="text-center">Gift card ready to redeem!</h1>
 
       <div class="size-12 text-center">

public/views/modals/amazon-card-details.html

@@ -17,28 +17,55 @@
      ng-swipe-right="cancel()">
   <div class="header-modal bg-gray text-center">
 
-    <img src="img/amazon-card.png" alt="Amazon" width="200">
+    <img src="img/amazon-card.png" alt="Amazon" width="200" ng-click="refreshGiftCard()">
     
     <div class="size-24 text-bold m10t">
       {{card.cardInfo.value.amount | currency : card.cardInfo.value.currencyCode + ' ' : 2}}
     </div>
   </div>
 
+  <div class="box-notification m20b" ng-show="error" ng-click="error = null">
+    <span class="text-warning">
+      {{error}}
+    </span>
+  </div>
+
+  <div class="text-center size-12" ng-show="card.status != 'SUCCESS' && !loading">
+    <div ng-show="card.status == 'RESEND'">
+      <div class="text-secondary m10h">
+        There was a temporary/recoverable system failure that can be resolved by retrying the request
+      </div>
+      <button class="m10t button outline round dark-gray tiny" ng-click="refreshGiftCard()">
+        Try again
+      </button>
+    </div>
+    <div class="text-warning m10" ng-show="card.status == 'FAILURE'">
+      There was a failure to the create gift card that could not be recoverable. Please, contact BitPay to refund your bitcoin
+    </div>
+  </div>
+
   <ul class="no-bullet size-14">
-    <li class="line-b p10 oh pointer" ng-click="$root.openExternalLink()">
+    <li class="line-b p10 oh pointer" ng-show="card.gcClaimCode" ng-click="$root.openExternalLink()">
       <i class="icon-arrow-right3 size-24 right text-bold"></i>  
       <span class="text-gray">Claim code</span>
       <span class="text-bold right enable_text_select">{{card.gcClaimCode}}</span>
     </li>
     <li class="line-b p10 oh">
-      <span class="text-gray">Created at</span>
-      <span class="test-gray right enable_text_select">{{card.date * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</span>
+      <span class="text-gray">Card status</span>
+      <span class="text-success right" ng-if="card.cardInfo.cardStatus == 'Fulfilled'">Fulfilled</span>
+      <span class="text-secondary right" ng-if="card.cardInfo.cardStatus == 'RefundedToPurchaser'">Refunded to purchaser</span>
+      <span class="text-warning right" ng-if="card.cardInfo.cardStatus == 'Expired'">Expired</span>
     </li>
     <li class="line-b p10 oh">
-      <span class="text-gray">Status</span>
-      <span class="text-success right" ng-if="card.status == 'SUCCESS'">Completed</span>
-      <span class="text-info right" ng-if="card.status == 'PENDING'">Pending</span>
-      <span class="text-warning right" ng-if="card.status == 'ERROR'">Error</span>
+      <span class="text-gray">Created at</span>
+      <span class="test-gray right">{{card.date * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</span>
+    </li>
+    <li class="line-b p10 oh">
+      <span class="text-gray">Creation status</span>
+      <span class="text-success right" ng-if="card.status == 'SUCCESS'">Success</span>
+      <span class="text-secondary right" ng-if="card.status == 'RESEND'">Resend is required</span>
+      <span class="text-warning right" ng-if="card.status == 'FAILURE'">Error</span>
+      <span class="text-warning right" ng-if="card.status == 'REFUND'">Refunded</span>
     </li>
     <li class="line-b p10 oh pointer" ng-click="$root.openExternalLink(card.bitpayInvoiceUrl)">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
@@ -47,5 +74,33 @@
     </li>
   </ul>
 
+  <div class="row m20t" ng-show="card.status == 'FAILURE'">
+    <div class="columns text-center">
+      <p class="size-12 text-gray">
+      This action will remove the gift card
+      </p>
+      <button class="button outline round dark-gray tiny" 
+              ng-click="remove();"
+              ng-disabled="loading">
+        <i class="fi-x"></i>
+        Remove
+      </button>
+    </div>
+  </div>
+
+  <div class="row m20t" ng-show="card.status == 'SUCCESS' && card.cardInfo.cardStatus == 'Fulfilled'">
+    <div class="columns text-center">
+      <p class="size-12 text-gray">
+        This action will cancel the gift card
+      </p>
+      <button class="button outline round dark-gray tiny" 
+              ng-click="cancelGiftCard()"
+              ng-disabled="loading">
+        <i class="fi-x"></i>
+        Cancel
+      </button>
+    </div>
+  </div>
+
   <div class="extra-margin-bottom"></div>
 </div>