Permalink
Browse files

feat: UI for ticket purchase page (#105)

  • Loading branch information...
harshitagupta30 authored and CosmicCoder96 committed Jun 11, 2017
1 parent 3c77329 commit c1ae0367181610313835bcad7ac96102d933fcfc
@@ -0,0 +1,6 @@
import Ember from 'ember';
const { Component } = Ember;
export default Component.extend({
});
@@ -0,0 +1,170 @@
import Ember from 'ember';
import FormMixin from 'open-event-frontend/mixins/form';
import { countries } from 'open-event-frontend/utils/dictionary/demography';
const { Component, computed, set } = Ember;
export default Component.extend(FormMixin, {
buyer: {
firstName : '',
lastName : '',
email : ''
},
holders: [
{
firstName : '',
lastName : '',
email : '',
sameAsBuyer : ''
},
{
firstName : '',
lastName : '',
email : '',
sameAsBuyer : ''
},
{
firstName : '',
lastName : '',
email : '',
sameAsBuyer : ''
}
],
getValidationRules() {
let firstNameValidation = {
rules: [
{
type : 'empty',
prompt : this.i18n.t('Please enter your first name')
}
]
};
let lastNameValidation = {
rules: [
{
type : 'empty',
prompt : this.i18n.t('Please enter your last name')
}
]
};
let emailValidation = {
rules: [
{
type : 'empty',
prompt : this.i18n.t('Please enter your email')
}
]
};
let validationRules = {
inline : true,
delay : false,
on : 'blur',
fields : {
firstname: {
identifier : 'first_name',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your first name')
}
]
},
lastname: {
identifier : 'last_name',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your last name')
}
]
},
email: {
identifier : 'email',
rules : [
{
type : 'email',
prompt : this.i18n.t('Please enter a valid email address')
}
]
},
country: {
identifier : 'country',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your country')
}
]
},
address: {
identifier : 'address',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your address')
}
]
},
city: {
identifier : 'city',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your city ')
}
]
},
state: {
identifier : 'state',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your state')
}
]
},
zipcode: {
identifier : 'zip_code',
rules : [
{
type : 'empty',
prompt : this.i18n.t('Please enter your zip code')
}
]
},
payvia: {
identifier : 'pay_via',
rules : [
{
type : 'checked',
prompt : this.i18n.t('Please specify your choice of payment method ')
}
]
}
}
};
this.holders.forEach((value, index) => {
validationRules.fields[`first_name_${index}`] = firstNameValidation;
validationRules.fields[`last_name_${index}`] = lastNameValidation;
validationRules.fields[`email_${index}`] = emailValidation;
});
return validationRules;
},
countries: computed(function() {
return countries;
}),
actions: {
submit() {
this.onValid(() => {
});
},
fillHolderData(holder, isCheckboxChecked) {
if (isCheckboxChecked) {
set(holder, 'firstName', this.get('buyer.firstName'));
set(holder, 'lastName', this.get('buyer.lastName'));
set(holder, 'email', this.get('buyer.email'));
set(holder, 'sameAsBuyer', true);
}
}
}
});
@@ -0,0 +1,6 @@
import Ember from 'ember';
const { Component } = Ember;
export default Component.extend({
});
@@ -108,6 +108,9 @@ router.map(function() {
this.route('translations');
});
});
this.route('orders', function() {
this.route('new');
});
});
export default router;
@@ -0,0 +1,10 @@
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
const { Route } = Ember;
export default Route.extend(AuthenticatedRouteMixin, {
titleToken() {
return this.i18n.t('Orders');
}
});
@@ -0,0 +1,9 @@
import Ember from 'ember';
const { Route } = Ember;
export default Route.extend({
titleToken() {
return this.i18n.t('New Order');
}
});
@@ -0,0 +1,10 @@
<div class="ui segments">
<div class="ui secondary segment">
<h3 class="weight-400">{{t 'When & Where'}}</h3>
</div>
<div class="ui padded segment">
freiLand Friedrich-Engels-StraBe 22 Postdam Germany 14473
<br>
Thursday, May 25,2017 at 09:00 AM - Thursday, May 25,2017 at 09:00 PM (Europe/Berlin)
</div>
</div>
@@ -0,0 +1,116 @@
<form class="ui form" {{action 'submit' on='submit' }}>
<div class="ui segments">
<div class="ui aligned secondary segment">
<h3 class="weight-400">{{t 'Registration Information'}}</h3>
</div>
<div class="ui yellow inverted segment">
<div class="ui inverted small horizontal statistic">
<div class="value">
8:48
</div>
<div class="label">
{{t 'Please complete registration within 10:00 minutes.'}}
<br>
{{t 'After 10:00 minutes, the reservation we\'re holding will be released to others.'}}
</div>
</div>
</div>
<div class="ui padded segment">
<h4 class="ui horizontal divider header">
<i class="ticket icon"></i>
{{t 'Ticket Buyer'}}
</h4>
<div class="field">
<label class="required" for="firstname">{{t 'First Name'}}</label>
{{input type='text' name='first_name' value=buyer.firstName}}
</div>
<div class="field">
<label class="required" for="lastname">{{t 'Last Name'}}</label>
{{input type='text' name='last_name' value=buyer.lastName}}
</div>
<div class="field">
<label class="required" for="email">{{t 'Email'}}</label>
{{input type='text' name='email' value=buyer.email}}
</div>
<h4 class="ui horizontal divider header">
<i class="ticket icon"></i>
{{t 'Ticket Holder\'s Information'}}
</h4>
{{#each holders as |holder index|}}
<div class="inline field">
<i class="user icon"></i>
<label>{{t 'Ticket Holder '}}{{inc index}}</label>
</div>
<div class="field">
<label class="required" for="firstname">{{t 'First Name'}}</label>
{{input type='text' name=(concat 'first_name_' index) value=holder.firstName}}
</div>
<div class="field">
<label class="required" for="lastname">{{t 'Last Name'}}</label>
{{input type='text' name=(concat 'last_name_' index) value=holder.lastName}}
</div>
<div class="field">
<label class="required" for="email">{{t 'Email'}}</label>
{{input type='text' name=(concat 'email_' index) value=holder.email}}
</div>
<div class="field">
{{ui-checkbox label=(t 'Same as Ticket Buyer') checked=holder.sameAsBuyer onChange=(action 'fillHolderData' holder)}}
</div>
{{/each}}
<h4 class="ui horizontal divider header">
<i class="ticket icon"></i>
{{t 'Billing Information'}}
</h4>
<div class="field">
<label class="required">{{t 'Select country'}}</label>
{{#ui-dropdown class='search selection'}}
{{input type='hidden' id='country'}}
<i class="dropdown icon"></i>
<div class="default text">{{t 'Select country'}}</div>
<div class="menu">
{{#each countries as |country|}}
<div class="item">
{{country.name}}
</div>
{{/each}}
</div>
{{/ui-dropdown}}
</div>
<div class="field">
<label class="required" for="address">{{t 'Address'}}</label>
{{textarea rows='2' id='address'}}
</div>
<div class="field">
<label class="required" for="city">{{t 'City'}}</label>
{{input type='text' id='city'}}
</div>
<div class="field">
<label class="required" for="state">{{t 'State/Province'}}</label>
{{input type='text' id='state'}}
</div>
<div class="field">
<label class="required" for="zipcode">{{t 'Zip Code'}}</label>
{{input type='text' id='zip_code'}}
</div>
<div class="field">
<label class="required" for="pay_via">{{t 'Pay Via'}}</label>
<div class="grouped inline fields">
<div class="field">
{{ui-radio name='pay_via' value='stripe'}}
<label for="pay_via"><img class="ui small image" src="/images/payment-logos/stripe.png" alt="stripe"></label>
</div>
<div class="field">
{{ui-radio name='pay_via' value='paypal'}}
<label for="pay_via"><img src="/images/payment-logos/paypal.png" alt="paypal"></label>
</div>
</div>
</div>
<p>
{{t 'By clicking "Pay Now", I acknowledge that I have read and agree with the Open Event terms of services and privacy policy.'}}
</p>
<div class="center aligned">
<button type="submit" class="ui teal submit button">{{t 'Pay Now'}}</button>
</div>
</div>
</div>
</form>
@@ -0,0 +1,48 @@
<div class="ui segments">
<div class="ui secondary segment">
<h3 class="weight-400">{{t 'Order Summary'}}</h3>
</div>
<table class="ui very basic tablet stackable table" style="padding:10px">
<thead>
<tr>
<th class="four wide">{{t 'Ticket Type'}}</th>
<th class="four wide">{{t 'Price'}}</th>
<th class="ui aligned two wide">{{t 'Fee'}}</th>
<th class="one wide">{{t 'Quantity'}}</th>
<th class="ui aligned two wide">{{t 'Subtotal'}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ui small">
{{t 'Student/In'}}
</div>
</td>
<td>Thu, May 25</td>
<td>$ {{number-format 4.0}}</td>
<td>1</td>
<td>
$ {{number-format 4.0}}
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th></th>
<th></th>
<th></th>
<th>
<div class="ui aligned small primary icon">
{{t 'Order Total'}}:
</div>
</th>
<th colspan="4">
<div class="ui aligned small primary icon">
$ {{number-format 4.0}}
</div>
</th>
</tr>
</tfoot>
</table>
</div>
@@ -0,0 +1 @@
{{outlet}}
Oops, something went wrong.

0 comments on commit c1ae036

Please sign in to comment.