gaq-journey

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    didTransition(){
      window.scrollTo(0,0);
    }
  }
});

controllers.application.js

import Ember from 'ember';
export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

quote-about-you.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

quote-about-you.template.hbs

{{#quote-header title="A bit about you" back="welcome"}}
{{/quote-header}}

<ns-panel>
	<div class="splash">
  
		<ns-inputter validation='["isRequired", "isPostcode"]' helper="Providing your postcode will improve the accuracy of your quote">
			<label slot="label">Postcode</label>
			<input type="text" placeholder="TW18 6PQ" name="postcode" autocomplete="postal-code">
		</ns-inputter>
		
		<ns-inputter helper="Your telephone number is optional">
			<div slot="tip-details">
				<p>The information you provide may be used to contact you in connection with this quote.</p>
        <p>Find out more about how we use your data in our <a href="javascript:void(0)">privacy policy</a></p>
			</div>
			<label slot="label">Telephone number</label>
			<input type="tel" placeholder="01252 876 987" name="tel">
		</ns-inputter>
    
    
    {{#link-to 'quote-options'}}
   		<ns-cta>Continue</ns-cta>
    {{/link-to}}

  </div>

</ns-panel>

<ns-panel decoration="invert-bridge-grey-light">
	{{quote-questions}}
</ns-panel>

quote-header.component.js

import Ember from 'ember';
const {
  getOwner,
  computed
} = Ember;

export default Ember.Component.extend({
	tagName: 'ns-panel',
  attributeBindings: ['decoration'],
  decoration: 'invert-ramp-grey-light',
  headingID: computed(function() {
  	const route = getOwner(this).lookup('controller:application').currentPath;
  return `${route}-heading`;
	})
 });

quote-header.template.hbs

{{#if back}}
  <div class="splash">
  	{{#link-to back}}
      <ns-cta type="text" icon="arrow-left">Go back</ns-cta>
    {{/link-to}}
   </div>
 {{/if}}

<div class="splash">
 	<h1 id={{headingID}}>
    {{title}}
   </h1>
	{{yield}}
 </div>

quote-options.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

quote-options.template.hbs

{{#quote-header title="About your energy" back="quote-about-you"}}
{{/quote-header}}

<ns-panel>
	<div class="splash">
	
    <ns-inputter heading="What would you like a quote for?">
      <input type="radio" id="gas-electricity" name="fuel-type" value="dual" checked>
      <label for="gas-electricity">Gas &amp; electricity</label>
      <input type="radio" id="gas" name="fuel-type" value="gas">
      <label for="gas">Gas</label>
      <input type="radio" id="electricity" name="fuel-type" value="electricity">
      <label for="electricity">Electricity</label>
    </ns-inputter>
    
    <ns-inputter heading="What type of meter do you have?" helper="If you aren't sure what type of meter you have, select Standard.">
      <div slot="tip-details">
        <p>If you already have smart meters with another energy supplier, you may lose some smart features when transferring your energy supply to British Gas. We're working on this and will support all smart meters in the near future.</p>
      </div>
      <input type="radio" id="meter-standard" name="meter-type" value="standard" checked>
      <label for="meter-standard">Standard</label>
      <input type="radio" id="meter-multi-other" name="meter-type" value="multi-other">
      <label for="meter-multi-other">Multi-Rate</label>
      <input type="radio" id="meter-smart" name="meter-type" value="smart">
      <label for="meter-smart">Smart</label>
    </ns-inputter>
    
    <ns-inputter heading="How do you currently pay for your energy?">
      <div slot="tip-details">
      	<p>If you pay by Direct Debit you will be saving, on average, £42 per year for gas and £43 per year for electricity. (Based on an average consumption of 12,000 kWh for gas and 3,100 kWh for single rate electricity, rounded and VAT.)</p>
      </div>
      <input type="radio" id="pay-dd" name="pay-type" value="dual" checked>
      <label for="pay-dd">Monthly Direct Debit</label>
      <input type="radio" id="pay-cash" name="pay-type" value="gas">
      <label for="pay-cash">Quarterly cash or cheque</label>
      <input type="radio" id="pay-go" name="pay-type" value="electricity">
      <label for="pay-go">Pay As You Go</label>
    </ns-inputter>
  
    {{#link-to 'quote-usage'}}
   		<ns-cta>Continue</ns-cta>
    {{/link-to}}
    
	</div>
</ns-panel>

<ns-panel decoration="invert-bridge-grey-light">
	{{quote-questions}}
</ns-panel>

quote-questions.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

quote-questions.template.hbs

  <div class="splash">
    <ns-accordion>
      <h2 slot="heading">Frequently asked questions</h2>
      <ns-expander>
        <h3 slot="heading">What is a kilowatt hour (kWh)?</h3>
        <p>A kWh stands for kilowatt hour – the unit used to measure energy use. 1 kWh will power a 40 watt light bulb for 25 hours.</p>
      </ns-expander>
      <ns-expander>
        <h3 slot="heading">What is a Tariff Information Label?</h3>
        <p>The Tariff Information Label (TIL) gives you the key facts about a tariff upfront and in one place. It lets you know any special rewards that may apply to the tariff.</p>
      </ns-expander>
      <ns-expander>
        <h3 slot="heading">What is a Personal Projection?</h3>
        <p class="p-feature">A Personalised Projection is a personalised quote based on your home and your consumption. It gives you the best estimate on how much you will pay to help you pick the right tariff.</p>
      </ns-expander>
    </ns-accordion>
  </div>

quote-usage.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

quote-usage.template.hbs

{{#quote-header title="Your energy usage" back="quote-options"}}
  <p class="p-large">Please provide details about how much energy you use.</p>
{{/quote-header}}

<ns-panel>
	<div class="splash">

		<ns-inputter helper="Your annual gas usage in kWh">
			<label slot="label">Gas usage</label>
			<input type="number" placeholder="12000" name="gas-kwh" style="width: 6em;">
		</ns-inputter>

		<ns-inputter helper="Your annual elecricity usage in kWh">
			<label slot="label">Electricity usage</label>
			<input type="number" placeholder="3100" name="elecricity-kwh" style="width: 6em;">
		</ns-inputter>
    
    <ns-inputter>
      <input type="checkbox" id="dont-know">
      <label for="dont-know">I don't know my energy usage</label>
    </ns-inputter>
    
    {{#link-to 'quote-usage'}}
   		<ns-cta>View your tariffs</ns-cta>
    {{/link-to}}
    
	</div>
</ns-panel>

<ns-panel decoration="invert-bridge-grey-light">
	{{quote-questions}}
</ns-panel>

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('welcome', {path: '/'});
  this.route('quote-about-you');
  this.route('quote-options');
  this.route('quote-usage');
});

export default Router;

templates.application.hbs

<main class="ndsn">
  {{outlet}}
</main>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
  	"nucleus": "https://nucleus.bgdigital.xyz/feature/ns-inputter/nucleus.min.js",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}

welcome.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

welcome.template.hbs

<ns-panel decoration="invert-ramp-cyan">
	<div class="splash">
    <h1>Get an energy quote</h1>
    <p class="p-large">Let's find the best energy tariff for you.</p>
  </div>
</ns-panel>

<ns-panel>
  <div class="splash">
    <ns-inputter heading="What type of customer are you?" helper="We just need to make sure we send you to the right place.">
    
      <input type="radio" id="customer-new" name="customer-type" checked>
      <label for="customer-new">I'm new to British Gas</label>
      
      <input type="radio" id="customer-already" name="customer-type">
      <label for="customer-already">I'm already a British Gas customer</label>
      
      <input type="radio" id="customer-moving" name="customer-type">
      <label for="customer-moving">I'm moving into a home supplied by British Gas</label>
      
    </ns-inputter>
  
    {{#link-to 'quote-about-you'}}
   		<ns-cta>Continue</ns-cta>
    {{/link-to}}
    
	</div>
</ns-panel>

<ns-panel decoration="invert-bridge-grey-light">
	{{quote-questions}}
</ns-panel>