PayAssistPrototype

README.txt

DISCUSSION:

Properties That would need to be added to call flow:
	- isEnd
  - branches
  	-- I am demoing branches as a boolean value but I am considering making it an array to show 	     possibilities
  - nextFlowId
  	-- We can possibly make this an array and not use the branches property
  - max and min (for input validation)
    -- Should work with number and dates
    
    
 I am using session as a simple way of keeping track of dynamic steps, but I believe we may not need session if we pass in "startingCallFlowId" and "currentCallFlowId".  Using those values we should be able to figure out which step we are at and how to go forward/backward.

components.bold-when-eq.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  classNameBindings: ['valuesEqual:bold-me'],
  valuesEqual: function() {
  	return this.get('value1') === this.get('value2');
  }.property('value1', 'value2')
});

components.default-flow-lister.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: [
    { name: 'Main', id: 1 },
    { name: '?' }
  ]
});

components.flow-lister.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: []
});

components.show-flow-value.js

import Ember from 'ember';

export default Ember.Component.extend({
  isInput: Ember.computed.equal('callFlow.valueType', 'input'),
  isInfo: Ember.computed.equal('callFlow.valueType', 'info'),
  isCheckbox: Ember.computed.equal('callFlow.valueType', 'checkbox'),
});

components.simple-tab.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'h3',
  classNames: ['simple-tab']
});

controllers.application.js

import Ember from 'ember';

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

router.js

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('pay-assist-main');
  this.route('pay-assist-1', { path: 'pay-assist/:callFlowId' });
  this.route('pay-assist-2');
  this.route('pay-assist-3');
});

export default Router;

routes.pay-assist-1.js

import Ember from 'ember';

export default Ember.Route.extend({
  mockStore: Ember.inject.service('mock-store'),
  model(params) {
    let id = parseInt(params.callFlowId);
  	let store = this.get('mockStore');
    let items = store.getRecord('crawl-flow');
    let callFlow = store.getRecord('call-flow', id);
        
    return {
    	items,
      callFlow
    }
  },

  actions: {
    goToPrevious(id) {
    	let store = this.get('mockStore');
      let cf = store.getPreviousCallflow('call-flow', id);
      store.popSession(); // can use server side session to determine when to pop after getting a previous value in model route
      this.send('goToNext', cf.id);
    },
  	goToNext(id, branches, value) {
      let store = this.get('mockStore');
      if(branches) {
        let cf = store.getDynamicNextCallflow(value);
        id = cf.id
      	store.addRecord('session', { callFlowId: id });
      }
			// We could save the value from this step's call flow here
     	this.transitionTo('pay-assist-1', id);
    },
    clearSession() {
      this.get('mockStore').clearRecords('session');
      alert('Complete');
    },
    willTransition: function() {
      this.controllerFor('pay-assist-1').set('value', undefined);
    }
  }
});

routes.pay-assist-2.js

import Ember from 'ember';

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

routes.pay-assist-3.js

import Ember from 'ember';

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

routes.pay-assist-main.js

import Ember from 'ember';

export default Ember.Route.extend({
  mockStore: Ember.inject.service('mock-store'),
  model() {
  	return this.get('mockStore').getRecord('pay-assists-flows');
  },
  actions: {
  	goToNext(id) {
      this.get('mockStore').clearRecords('session');
      this.get('mockStore').addRecord('session', { callFlowId: id });      
    	this.transitionTo('pay-assist-1', id);
    }
  }
});

services.mock-store.js

import Ember from 'ember';
const { isEmpty, get } = Ember;

// This is just used to mock server logic

export default Ember.Service.extend({
  
  _db: {
    'session': [],
    'call-flow': [
      { id: 1, name: 'Static Steps Example', nextFlowId: 4 }, //
      { id: 2, name: 'Dynamic Steps Example', nextFlowId: 6 },
      { id: 3, name: 'Goes right to last step', nextFlowId: 10 },
      { id: 4, name: 'Call flow 4', valueType: 'info', 
       text: 'demo text call flow 4', nextFlowId: 5}, //
      { id: 5, name: 'Call flow 5', valueType: 'input', 
       text: 'demo text call flow 5', nextFlowId: 10}, //
      
      //nextFlow is dynamic 7 or 8
      //branches can be array instead of boolean
      { id: 6, name: 'Call flow 6', valueType: 'input',
       	text: 'please enter 7 or 8 to dynamically choose that flow.<br>REQUIRED',
        branches: true }, 
      
      { id: 7, name: 'Call flow 7', text: 'You selected call flow 7!',
       valueType: 'info', nextFlowId: 10},
      { id: 8, name: 'Call flow 8', text: 'You selected call flow 8!',
       valueType: 'checkbox', nextFlowId: 10},
      
      { id: 9, name: 'Call flow 9', text: 'abc', valueType: 'checkbox', nextFlowId: 10},
      { id: 10, name: 'End', 
       	text: 'This is the final step click complete to clear session', 
        valueType: 'info', nextFlowId: null, isEnd: true }
    ]
  },
  
  _translate: {
  	'pay-assists-flows': (db) => {
      	return db['call-flow'].filter(c => [1,2,3].contains(c.id));
     },
    'crawl-flow': (db) => {
       // mock logic to figure out crawl but basically crawl items 
      //unless callFlow branches and if branches perform logic.
      let session = db['session'];
    	let sessionId = get(session, 'firstObject.callFlowId');
      let crawls = {
      	'4': [
          { name: 'Call flow 4', id: 4 },
          { name: 'Call flow 5', id: 5 },
          { name: 'End', id: 10 }
        ],
        '6': [
        	{ name: 'Call flow 6', id: 6 },
          { name: '?' },
          { name: 'End', id: 10 }
        ]
      };
      
      let callFlow = db['call-flow'].findBy('id', sessionId);
      if(callFlow.branches && session.length > 1) {
        let r = [callFlow];
      	for(let i = 1; i < session.length; i++) {
        	r.push(db['call-flow']
             .findBy('id', get(session[i], 'callFlowId')));
        }
        r.push({ name: 'End', id: 10 });
        return r;
      }else{
      	return crawls[sessionId];
      }    
    }
  },
  
  _bl(model, k) {
  	let db = this.get('_db');
    let t = this._translate[model];
    let v;
    
    if(!isEmpty(t)) {
    	v = t(db, model, k);
    }else {
      v = !isEmpty(k) ? db[model].findBy('id', k) : db[model];
    }
	  return v;
  },
  
  popSession() {
  	let db = this.get('_db');
    let session = db['session'];
    if(session.length) {
    	return session.pop();
    }
  },
  
  getPreviousCallflow(currentCallflowId) {
  	let crawl = this._bl('crawl-flow');
    let cf = crawl.findBy('id', currentCallflowId);
    let i = crawl.indexOf(cf);
    return i > 0 ? crawl[i-1] : crawl[0];
  },
  
  getDynamicNextCallflow(valueEntered) {
  	return this._bl('call-flow', parseInt(valueEntered));
  },
    
  getRecord(model, k) {
    return this._bl(model, k);
  },
  
  addRecord(model, value) {
  	let db = this.get('_db');
    db[model].push(value);
  },
  clearRecords(model) {
  	let db = this.get('_db');
    db[model] = [];
  }
});

templates.application.hbs

<style>
	.top-bar {
  	color: white;
    background-color: black;
    margin-bottom: 15px;
    text-align: center;
  }
  .btn {
    display: inline-block;
    background-color: #f44336;
    color: #FFFFFF;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin-left: 20px;
    opacity: 0.9;
	}
  .btn:hover, .btn:active {
    background-color: red;
	}
</style>

<h4 class="top-bar">Pay Assist Prototype</h4>
{{#link-to 'pay-assist-main' class="btn"}}Go To Pay Assist Main{{/link-to}}
<hr>
{{outlet}}
<br>
<br>

templates.components.bold-when-eq.hbs

<style>
	.bold-me {
  	font-weight: bolder;
  }
</style>
{{yield}}

templates.components.default-flow-lister.hbs

{{flow-lister items=items currentFlowId=1}}

templates.components.flow-lister.hbs

{{!-- This represents jim's step component --}}
{{#each items as |item i|}}
  {{#bold-when-eq value1=item.id value2=currentFlowId}}
  	{{#if i}}<span>&rarr;</span>{{/if}}
  	((&nbsp;{{item.name}}&nbsp;))
  {{/bold-when-eq}}
{{/each}}

templates.components.show-flow-value.hbs

{{!-- This Component represents out call-flow component that generates html according to the call flow --}}

<p>{{{callFlow.text}}}</p>
{{#if isInput}}
  {{input type="text" value=value}}
{{else if isCheckbox}}
  {{input type='checkbox' checked=value}}
{{/if}}

templates.components.simple-tab.hbs

<style>
	.simple-tab {
    display: flex;
    flex-flow: row wrap;
  }
	.simple-tab div.tab {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid white;
    padding-left: 3px;
    padding-right: 3px;    
	}
  .simple-tab div.tab-filler {
    border-bottom: 1px solid black;
    flex-grow: 2;
  }
</style>
<div class="tab">{{yield}}</div>
<div class="tab-filler"></div>

templates.pay-assist-1.hbs

<h4 style="color:red; font-weight: bold">
	Please make sure you go to the last step to clear session.
</h4>
{{#simple-tab}}{{model.callFlow.name}}{{/simple-tab}}
{{flow-lister items=model.items currentFlowId=model.callFlow.id}}
<hr>
{{show-flow-value callFlow=model.callFlow value=value}}
<hr>
<div>
{{#unless model.callFlow.isEnd}}
	<button type="button" {{action send 'goToPrevious' model.callFlow.id}}>
  	Back
  </button>
	<button type="submit" 
   {{action send 'goToNext'
   	 model.callFlow.nextFlowId
   	 model.callFlow.branches
     value}}
   >
  		Next
  </button>
{{else}}
	<button type="submit" {{action send 'clearSession'}}>Complete</button>
{{/unless}}
</div>

templates.pay-assist-2.hbs

{{!-- not used --}}
{{#simple-tab}}Pay Assist 2{{/simple-tab}}

templates.pay-assist-3.hbs

{{!-- not used --}}
{{#simple-tab}}Pay Assist 3{{/simple-tab}}

templates.pay-assist-main.hbs

{{#simple-tab}}Main{{/simple-tab}}
{{default-flow-lister}}

<ul>
{{#each model as |option|}}
	<li><a href='' {{action send 'goToNext' option.nextFlowId}}>{{option.name}}</a></li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}