From a9a8105fbcc2ecb69b86175f6932b33c7b67d9c0 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Thu, 22 May 2014 16:52:51 -0400
Subject: [PATCH] Add credit card expiration date to the billing info screen

---
 endpoints/api/billing.py               |  4 +++-
 static/css/quay.css                    | 12 ++++++++++++
 static/directives/billing-options.html |  8 ++++++++
 static/js/app.js                       |  7 +++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/endpoints/api/billing.py b/endpoints/api/billing.py
index 6880308a0..3e13df6b6 100644
--- a/endpoints/api/billing.py
+++ b/endpoints/api/billing.py
@@ -36,7 +36,9 @@ def get_card(user):
         card_info = {
           'owner': default_card.name,
           'type': default_card.type,
-          'last4': default_card.last4
+          'last4': default_card.last4,
+          'exp_month': default_card.exp_month,
+          'exp_year': default_card.exp_year
         }
 
   return {'card': card_info}
diff --git a/static/css/quay.css b/static/css/quay.css
index e6cf04f1e..68e317c70 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -478,6 +478,18 @@ i.toggle-icon:hover {
   color: black;
 }
 
+.billing-options-element .current-card .expires:before {
+  content: "Expires:";
+  color: #aaa;
+  font-size: 12px;
+}
+
+
+.billing-options-element .current-card .expires {
+  margin-left: 20px;
+  font-size: 12px;
+}
+
 .billing-options-element .current-card img {
   margin-right: 10px;
   vertical-align: middle;
diff --git a/static/directives/billing-options.html b/static/directives/billing-options.html
index 8ae5115d5..374715a2f 100644
--- a/static/directives/billing-options.html
+++ b/static/directives/billing-options.html
@@ -7,10 +7,18 @@
     <div class="panel-body">
       <div class="quay-spinner" ng-show="!currentCard || changingCard"></div>
       <div class="current-card" ng-show="currentCard && !changingCard">
+        <div class="alert alert-warning" ng-if="currentCard.last4 && isExpiringSoon(currentCard)">
+          Your current credit card is expiring soon!
+        </div>
+
         <img ng-src="{{ '/static/img/creditcards/' + getCreditImage(currentCard) }}" ng-show="currentCard.last4">
         <span class="no-card-outline" ng-show="!currentCard.last4"></span>
 
         <span class="last4" ng-show="currentCard.last4">****-****-****-<b>{{ currentCard.last4 }}</b></span>
+        <span class="expires" ng-show="currentCard.last4">
+          {{ currentCard.exp_month }} / {{ currentCard.exp_year }}
+        </span>
+
         <span class="not-found" ng-show="!currentCard.last4">No credit card found</span>
       </div>
 
diff --git a/static/js/app.js b/static/js/app.js
index b20c4b082..75220520c 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -3293,6 +3293,13 @@ quayApp.directive('billingOptions', function () {
         PlanService.unregisterListener(this);
       });
 
+      $scope.isExpiringSoon = function(cardInfo) {
+        var current = new Date();
+        var expires = new Date(cardInfo.exp_year, cardInfo.exp_month, 1);
+        var difference = expires - current;
+        return difference < (60 * 60 * 24 * 60 * 1000 /* 60 days */);
+      };
+
       $scope.changeCard = function() {
         var previousCard = $scope.currentCard;
         $scope.changingCard = true;