-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from pdud/pd-glimmer
feat: octanify
- Loading branch information
Showing
28 changed files
with
515 additions
and
358 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <form class="credit-card-form {{if this.isValid 'isValid'}}" ...attributes> | ||
| <div class="clearfix"> | ||
| <div class="{{if this.numberValid 'has-success'}} form-group cc-number"> | ||
| <label class="control-label">{{if @numberLabel @numberLabel 'Card Number'}}</label> | ||
| <InputCreditCardNumber | ||
| @number={{@number}} | ||
| @onUpdate={{fn this.setValue 'number'}} | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="{{if this.cvcValid 'has-success'}} form-group cc-cvc"> | ||
| <label class="control-label">{{if @securityCodeLabel @securityCodeLabel 'Security Code'}}</label> | ||
| <InputCreditCardCvc | ||
| @cvc={{@cvc}} | ||
| @onUpdate={{fn this.setValue 'cvc'}} | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="clearfix"> | ||
| <div class="{{if this.nameValid 'has-success'}} form-group cc-name"> | ||
| <label class="control-label">{{ if @nameOnCardLabel @nameOnCardLabel 'Name on Card'}}</label> | ||
| {{!-- template-lint-disable require-input-label --}} | ||
| <Input @type="text" @value={{@name}} class="form-control" /> | ||
| </div> | ||
|
|
||
| <div class="{{if this.expirationValid 'has-success'}} form-group cc-expiration"> | ||
| <label class="control-label">{{ if @expirationLabel @expirationLabel 'Expiration'}}</label> | ||
| <InputCreditCardExpiration | ||
| @month={{@month}} | ||
| @year={{@year}} | ||
| @onUpdateMonth={{fn this.setValue 'month'}} | ||
| @onUpdateYear={{fn this.setValue 'year'}} | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {{#if @zipcodeRequired}} | ||
| <div class="{{if this.zipcodeValid 'has-success'}} form-group cc-zipcode"> | ||
| <label class="control-label">{{ if @zipCodeLabel @zipCodeLabel 'Zip Code'}}</label> | ||
| <InputCreditCardZipcode | ||
| @zipcode={{@zipcode}} | ||
| @onUpdate={{fn this.setValue "zipcode"}} | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
| {{/if}} | ||
|
|
||
|
|
||
| <div class="type"> | ||
| {{this.type}} | ||
| </div> | ||
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,75 @@ | ||
| /* eslint-disable ember/require-tagless-components */ | ||
| /* eslint-disable ember/no-classic-components */ | ||
| /* eslint-disable ember/no-classic-classes */ | ||
| /* eslint-disable ember/no-observers */ | ||
|
|
||
| import { and } from '@ember/object/computed'; | ||
| import Component from '@ember/component'; | ||
| import { computed, observer } from '@ember/object'; | ||
| import Component from '@glimmer/component'; | ||
| import { action } from '@ember/object'; | ||
| import Validations from 'ember-credit-cards/utils/validations'; | ||
| import Cards from 'ember-credit-cards/utils/cards'; | ||
|
|
||
| export default Component.extend({ | ||
| tagName: 'form', | ||
| classNames: ['credit-card-form'], | ||
| classNameBindings: ['isValid'], | ||
| name: null, | ||
| number: null, | ||
| month: null, | ||
| year: null, | ||
| cvc: null, | ||
| zipcode: null, | ||
| zipcodeRequired: false, | ||
| onValidate() {}, | ||
|
|
||
| isValid: and( | ||
| 'nameValid', | ||
| 'numberValid', | ||
| 'expirationValid', | ||
| 'cvcValid', | ||
| 'zipcodeValid' | ||
| ), | ||
|
|
||
| becameValid: observer('isValid', function () { | ||
| this.onValidate(this.isValid); | ||
| }), | ||
|
|
||
| nameValid: computed('name', function () { | ||
| var name = this.name; | ||
| export default class CreditCardFormComponent extends Component { | ||
| get isValid() { | ||
| return ( | ||
| this.nameValid && | ||
| this.numberValid && | ||
| this.expirationValid && | ||
| this.cvcValid && | ||
| this.zipcodeValid | ||
| ); | ||
| } | ||
|
|
||
| get nameValid() { | ||
| var name = this.args.name; | ||
|
|
||
| if (name) { | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| }), | ||
|
|
||
| numberValid: computed('number', function () { | ||
| var number = this.number; | ||
| } | ||
|
|
||
| return Validations.validateNumber(number); | ||
| }), | ||
| get numberValid() { | ||
| return Validations.validateNumber(this.args.number); | ||
| } | ||
|
|
||
| expirationValid: computed('month', 'year', function () { | ||
| var month = this.month; | ||
| var year = this.year; | ||
| get expirationValid() { | ||
| var month = this.args.month; | ||
| var year = this.args.year; | ||
|
|
||
| return Validations.validateExpiration(month, year); | ||
| }), | ||
| } | ||
|
|
||
| cvcValid: computed('cvc', 'type', function () { | ||
| var cvc = this.cvc; | ||
| get cvcValid() { | ||
| var cvc = this.args.cvc; | ||
| var type = this.type; | ||
|
|
||
| return Validations.validateCVC(cvc, type); | ||
| }), | ||
| } | ||
|
|
||
| zipcodeValid: computed('zipcodeRequired', 'zipcode', function () { | ||
| if (this.zipcodeRequired) { | ||
| var zip = this.zipcode; | ||
| get zipcodeValid() { | ||
| if (this.args.zipcodeRequired) { | ||
| var zip = this.args.zipcode; | ||
|
|
||
| return Validations.validateZipcode(zip); | ||
| } | ||
|
|
||
| return true; | ||
| }), | ||
| } | ||
|
|
||
| type: computed('number', function () { | ||
| var number = this.number; | ||
| get type() { | ||
| var number = this.args.number; | ||
| var card = Cards.fromNumber(number); | ||
|
|
||
| if (card) { | ||
| return card.type; | ||
| } else { | ||
| return ''; | ||
| } | ||
| }), | ||
| }); | ||
| } | ||
|
|
||
| @action | ||
| setValue(key, value) { | ||
| this.args.onUpdate(key, value); | ||
| this._onValidate(); | ||
| } | ||
|
|
||
| _onValidate() { | ||
| (this.args.onValidate || (() => {}))(this.isValid); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <Input | ||
| @type="tel" | ||
| @value={{this.cvc}} | ||
| class="input-credit-card-cvc" | ||
| placeholder="•••" | ||
| ...attributes | ||
| {{on "keypress" this.keyPress}} | ||
| /> |
Oops, something went wrong.