Implement portions of new card component

app/components/donation/credit-card.js

@@ -2,11 +2,71 @@ import Ember from 'ember';
 
 const {
   Component,
-  computed: { not }
+  computed,
+  computed: { and, not },
+  inject: { service }
 } = Ember;
 
 export default Component.extend({
   classNames: ['credit-card-form'],
-  canDonate: true,
-  cannotDonate: not('canDonate')
+  month: '',
+  months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+  year: '',
+  years: [],
+
+  /**
+    @property stripe
+    @type Ember.Service
+   */
+  stripe: service(),
+
+  cannotDonate: not('canDonate'),
+
+  cannotSubmit: not('canSubmit'),
+
+  canSubmit: and('isCardValid', 'isCVCValid', 'isExpiryValid'),
+
+  date: computed('month', 'year', function() {
+    let month = this.get('month');
+    let year = this.get('year');
+    return `${month} ${year}`;
+  }),
+
+  isCardValid: computed('cardNumber', function() {
+    let stripe = this.get('stripe');
+    let cardNumber = this.get('cardNumber');
+    return stripe.card.validateCardNumber(cardNumber);
+  }),
+
+  isCVCValid: computed('cvc', function() {
+    let stripe = this.get('stripe');
+    let cvc = this.get('cvc');
+    return stripe.card.validateCVC(cvc);
+  }),
+
+  isExpiryValid: computed('date', function() {
+    let stripe = this.get('stripe');
+    let date = this.get('date');
+    return stripe.card.validateExpiry(date);
+  }),
+
+  init() {
+    let date = new Date();
+    let currentMonth = `0${date.getMonth() + 1}`.slice(-2);
+    this.set('month', currentMonth);
+    let currentYear = date.getFullYear();
+    this.set('year', currentYear);
+    let years = this.generateYears(currentYear);
+    this.set('years', years);
+    this._super(...arguments);
+  },
+
+  generateYears(currentYear) {
+    let years = [];
+    let endYear = currentYear + 20;
+    while (endYear >= currentYear) {
+      years.push(currentYear++);
+    }
+    return years;
+  }
 });

app/styles/_forms.scss

@@ -46,10 +46,14 @@ $outer-border-radius: 4px;
   .row {
     display: flex;
     justify-content: space-between;
+  }
 
-    label {
-      width: 49%;
-      position: relative;
+  label {
+    span {
+      display: block;
+      font-size: $body-font-size-small;
+      font-weight: 700;
+      margin-bottom: 3px;
     }
   }
 
@@ -186,14 +190,19 @@ form {
   }
 }
 
+select {
+  border: 1px solid $border-default;
+  font-family: $body-font-family;
+  font-size: $body-font-size-normal;
+  height: 41px;
+  padding: 0 16px;
+  cursor: pointer;
+}
+
 .task-type {
   select {
     border: none;
-    font-family: $body-font-family;
-    font-size: $body-font-size-normal;
     height: 34px;
-    padding: 0 16px;
-    cursor: pointer;
     width: 100px;
 
     &:focus {

app/styles/components/donation-payment.scss

@@ -33,25 +33,3 @@
     margin-bottom: 15px;
   }
 }
-
-.credit-card-label {
-  &:before {
-    @include sprite($credit-card);
-  }
-
-  .icon-input {
-    padding-left: 45px;
-  }
-}
-
-.lock-label {
-  &:before {
-    @include sprite($lock);
-  }
-}
-
-.calendar-label {
-  &:before {
-    @include sprite($calendar);
-  }
-}

app/templates/components/donation/credit-card.hbs

@@ -8,36 +8,39 @@
   <img src="assets/images/icons/diners-club.png" alt="diners-club">
 </div>
 <div class="input-group">
-  <label class="icon-label credit-card-label">
-    <span class="visually-hidden">Credit Card</span>
+  <label>
+    <span>Card number</span>
     {{input
-      type="text"
-      class="icon-input"
       disabled=cannotDonate
-      placeholder="Card number"}}
+      type="text"
+      value=cardNumber}}
   </label>
 </div>
 
 <div class="input-group">
   <div class="row">
-    <label class="icon-label calendar-label">
-      <span class="visually-hidden">Expiration Date</span>
-      {{input
-        type="text"
-        class="icon-input"
-        disabled=cannotDonate
-        placeholder="MM / YY"}}
+    <label>
+      <span>Expiration date</span>
+      <select onchange={{action (mut month) value="target.value"}}>
+        {{#each months as |monthChoice|}}
+          <option value={{monthChoice}} selected={{eq month monthChoice}}>{{monthChoice}}</option>
+        {{/each}}
+      </select>
+      <select onchange={{action (mut year) value="target.value"}}>
+        {{#each years as |yearChoice|}}
+          <option value={{yearChoice}} selected={{eq year yearChoice}}>{{yearChoice}}</option>
+        {{/each}}
+      </select>
     </label>
 
-    <label class="icon-label lock-label">
-      <span class="visually-hidden">CVC</span>
+    <label>
+      <span>CVC</span>
       {{input
         type="text"
-        class="icon-input"
-        disabled=cannotDonate
-        placeholder="CVC"}}
+        value=cvc
+        disabled=cannotDonate}}
     </label>
   </div>
 </div>
 
-<button class="button default">Donate</button>
+<button class="button {{if canSubmit "default" "clear"}}" disabled={{cannotSubmit}}>Donate</button>

app/templates/components/donation/donation-container.hbs

@@ -2,7 +2,6 @@
   <h3>{{format-currency donationAmount}}</h3>
   <div class="footnote additional-content">
     given each month
-    <a href="#">edit</a>
   </div>
 </div>
 

config/environment.js

@@ -78,6 +78,8 @@ module.exports = function(environment) {
     sentry: {
       dsn: 'https://[email protected]/82741'
     },
+
+    stripe: {}
   };
 
   if (environment === 'development') {
@@ -92,6 +94,8 @@ module.exports = function(environment) {
 
     ENV.sentry.development = true;
 
+    ENV.stripe.publishableKey = 'pk_test_hiQ7tWKKdLSw8jJdE98NSW74';
+
     ENV['ember-cli-mirage'] = {
       enabled: false
     };

package.json

@@ -79,6 +79,7 @@
     "ember-simple-auth": "1.1.0",
     "ember-simple-auth-token": "^1.2.0",
     "ember-sinon": "0.5.1",
+    "ember-stripe-service": "4.4.2",
     "ember-tether": "0.3.1",
     "ember-tooltips": "2.4.0",
     "ember-truth-helpers": "1.2.0",