Create Discount Code Component in Open-Event-Frontend
We in Open-Event-Frontend have given the event organiser the feature to create discount coupons for his or her event. Here the organiser can either enter the discount amount or discount percentage and can set even set the total number of coupons he wants to make available for his customers. We have also automatically generated an unique link for each discount coupon.
We’ll be creating a separate component create-discount-code for creating discount codes.To create the component we’ll run the following command
ember g component forms/events/view/create-discount-code |
This will create
- components/forms/events/view/create-discount-code.js
- templates/components/forms/events/view/create-discount-code.hbs
- tests/integration/components/forms/events/view/create-discount-code-test.js
1.Create-discount-code.hbs
Here we have designed our form.We have nested all the fields used, inside semantic’s ui form class.Some of the helpers used in the form are
We have used the ember input helper in following way for all the input fields.The
attribute name,value corresponds to the id and value attached with the helper
{{input type=‘text’ name=‘discount_code’ value=data.code}} |
Ember radio buttons are used by the organizer to select between discount
{{ui-radio label=(t ‘Amount (US$)’) name=‘discount_type’ value=‘amount’ current=‘amount’ onChange=(action (mut selectedMode))}} |
We have given the organizer an additional option to set the validity of the discount code. For this we have used date-picker and time-picker component already present in Open-Event-Frontend in the following manner.
<div class=“fields”> <div class=“wide field {{if device.isMobile ‘sixteen’ ‘five’}}”> <label>{{t ‘Valid from’}}</label> {{widgets/forms/date-picker id=’start_date’ value=data.validFromDate rangePosition=’start’}} <div class=“ui hidden divider”></div> {{widgets/forms/time-picker id=’start_time’ value=data.validFromTime rangePosition=’start’}} </div> <div class=“wide field {{if device.isMobile ‘sixteen’ ‘five’}}”> <label>{{t ‘Expires on’}}</label> {{widgets/forms/date-picker id=‘end_date’ value=data.validTillDate rangePosition=‘end’}} <div class=“ui hidden divider”></div> {{widgets/forms/time-picker id=‘end_time’ value=data.validTillTime rangePosition=‘end’}} </div> </div> |
The above snippet will the following output
2.Create-discount-code.js
Here we validate the form and provide it with an unique discount code url. We have generated the url using the event id and the discount code.
discountLink: computed(‘data.code’, function() { const params = this.get(‘routing.router.router.state.params’); return location.origin + this.get(‘routing.router’) .generate(‘public’, params[‘events.view’] .event_id, { queryParams: { discount_code: this.get(‘data.code’) } }); }), actions: { submit() { this.onValid(() => { }); } } |
3.Create-discount-code-test.js
This is where we check whether our component is compatible with other components of the system or not. Here, for now, we are just making sure if our component renders or not, by checking the presence of ‘Save’.
import { test } from ’ember-qunit’; import moduleForComponent from ‘open-event-frontend/tests/helpers/component-helper’; import hbs from ‘htmlbars-inline-precompile’; moduleForComponent(‘forms/events/view/create-discount-code’, ‘Integration | Component | forms/events/view/create discount code’); test(‘it renders’, function(assert) { this.render(hbs`{{forms/events/view/create-discount-code routing=routing}}`); assert.ok(this.$().html().trim().includes(‘Save’)); }); |
Now, our component is ready, and the only part remaining is to place it in our application. We place it in app/templates/events/view/tickets/discount-codes/create.hbs in the given form.
{{forms/events/view/create-discount-code data=model}} |
Here we have passed model from create-discount-code.js to data used in Create-discount-code.hbs
Now our create discount code page is up and running
Additional Resources
You must be logged in to post a comment.