nb-journey

application.route.js

import Ember from 'ember';

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

customer.route.js

import Ember from 'ember';

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

customer.template.hbs

{{#questions-header
	title="Are you a British Gas customer?"
  back="postcode"
}}

   	<p class="p-feature">
    	British Gas HomeCare is a range of insurance products providing protection for your boiler, heating, electrics, plumbing and drains.
    </p>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<ns-inputter labelID="customer-heading">

  <input type="radio" id="question-yes" name="question" value="yes" checked="">
  <label for="question-yes">Yes</label>

  <input type="radio" id="question-no" name="question" value="no">
  <label for="question-no">No</label>
</ns-inputter>
    </div>
  </ns-panel>


{{questions-continue
	cta="Continue"
  route="situation"
}}

house.route.js

import Ember from 'ember';

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

house.template.hbs

{{#questions-header
	title="What type of house do you live in?"
  back="situation"
}}

	<p class="p-feature">
    This helps us determine the level of power your new boiler will need.
  </p>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<ns-inputter labelID="house-heading">

  <input type="radio" id="house-detached" name="house" value="detached" checked="">
  <label for="house-detached">Detached</label>

	<input type="radio" id="house-semi" name="house" value="semi-detached">
  <label for="house-semi">Semi-Detached</label>

<input type="radio" id="house-terrace" name="house" value="terrace">
  <label for="house-terrace">Terrace</label>
  
<input type="radio" id="house-flat" name="house" value="flat">
  <label for="house-flat">Flat</label>


<input type="radio" id="house-bungalow" name="house" value="bungalow">
  <label for="house-bungalow">Bungalow</label>
</ns-inputter>
    </div>
  </ns-panel>


{{questions-continue
	cta="Continue"
}}

postcode.route.js

import Ember from 'ember';

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

postcode.template.hbs

{{#questions-header
	title="What is your postcode?"
  back="welcome"
}}

   	<p class="p-feature">
    	This allows us to provide you with available installation dates in your area.
    </p>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<ns-inputter validations='["isRequired","isPostcode"]'>
      	<label slot="label">Enter your postcode</label>
        <input type="text" placeholder="SW10 1AD" />
      </ns-inputter>
    </div>
  </ns-panel>


{{questions-continue
	cta="Continue"
  route="customer"
}}

questions-continue.component.js

import Ember from 'ember';

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

questions-continue.template.hbs

<ns-panel>
  	<div class="splash">
    	{{#link-to route}}
    		<ns-cta>{{cta}}</ns-cta>
      {{/link-to}}
    </div>
</ns-panel>

{{yield}}

<ns-panel>
  	<div class="splash">
    	<ns-accordion>
      	<h2>Need help?</h2>
        <ns-expander>
        	<h3 slot="heading">Want to talk to someone?</h3>
          <p class="p-feature">
          	We are here to help you every step of the way, just call 0800028282828
          </p>
        </ns-expander>
      </ns-accordion>
    </div>
	</ns-panel>

questions-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`;
	})
 });

questions-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}} class="h2">
     {{title}}
    </h1>
		{{yield}}
  </div>

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('postcode');
  this.route('customer');
  this.route('situation');
  this.route('house');
});

export default Router;

situation.route.js

import Ember from 'ember';

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

situation.template.hbs

{{questions-header
	title="What is your current situation?"
  back="customer"
}}

  <ns-panel>
  	<div class="splash">
    	<ns-inputter labelID="situation-heading">

  <input type="radio" id="situation-a" name="situation" value="a" checked="">
  <label for="situation-a">I urgently need a boiler</label>

	<input type="radio" id="situation-b" name="situation" value="b">
  <label for="situation-b">I'm planning to get a new boiler soon</label>

<input type="radio" id="situation-c" name="situation" value="c">
  <label for="situation-c">I'm just looking around</label>

</ns-inputter>
    </div>
  </ns-panel>


{{questions-continue
	cta="Continue"
  route="house"
}}

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

{{#questions-header
	title="Getting to know you"
}}

   	<p class="p-feature">
    	In order to make sure that we find the right boiler for you, we need to as you a few questions about:
    </p>
    <div class="p-feature">
    	<ul class="ul-ticked">
      	<li>Your home</li>
      	<li>Your current combi boiler</li>
      	<li>Your flue (your boiler's exhaust pipe)</li>
    	</ul>
  	</div>

{{/questions-header}}

  <ns-panel>
  	<div class="splash">
    	<h2 class="h4">Please note:</h2>
      <p class="p-normal">
      	You will need a tape to measure the spae around your current boiler.
      </p>
      <p class="p-normal">
				You may need to step outside to locate your flue pipe.
			</p>
      <p class="p-normal">
      	If you're looking for something other than combination boiler, you should <a href="#">book an appointment</a> to speak to one of our heating experts.
      </p>
    </div>
  </ns-panel>


{{questions-continue
	cta="Get started"
  route="postcode"
}}