New Twiddle

components.primary-actions.js

import Ember from 'ember';
import { CALL_TO_ACTIONS } from '../top-card-constants';

export default Ember.Component.extend({
  init() {
  	this._super(...arguments);
    this.CALL_TO_ACTIONS = CALL_TO_ACTIONS;	
    this.callToActionClasses = this._deriveCallToActionClasses();
  },
  
  _deriveCallToActionClasses() {
  	return {
    	[this.get('supportedActions.0')]: 'primary',
      [this.get('supportedActions.1')]: 'secondary',
    };
  }
});

components.top-card.js

import Ember from 'ember';
import { CALL_TO_ACTIONS } from '../top-card-constants';

const { computed, get } = Ember;

function isBrand(organization) {
	return get(organization, 'entityUrn');
}

function isSchool(organization) {
	return Boolean(get(organization, 'school'));
}

function isAdmin(permissions) {
	return permissions.isAdmin;
}
export default Ember.Component.extend({
  callToActions: computed('organization', function() {
  	let actions = [];
    
    if (isSchool(this.get('organization'))) {
    	actions.push(CALL_TO_ACTIONS.SEE_ALUMNI);
    } else if (!isBrand(this.get('organization'))) {
      actions.push(CALL_TO_ACTIONS.SEE_JOBS);
    }
    
    if (isAdmin(this.get('organization.permissions'))) {
    	actions.push(CALL_TO_ACTIONS.MANAGE_PAGE);
    }
    
    if (this.get('organization.salesNavigatorCompanyUrl')) {
    	actions.push(CALL_TO_ACTIONS.VIEW_IN_SALES_NAVIGATOR);
    }
    
    return actions.slice(0,2);
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  init() {
  	this._super(...arguments);
    this.organization = {
      school: 'urn',
    	permissions: {
      	isAdmin: true
      },
      salesNavigatorUrl: 'myUrl'
    };
  }
});

helpers.includes.js

import Ember from 'ember';

export function includes(params/*, hash*/) {
  return params[0].includes(params[1]);
}

export default Ember.Helper.helper(includes);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

button.primary {
	background: red;
}

button.secondary {
	background: blue;
}

templates.application.hbs

{{top-card organization=organization}}

templates.components.primary-actions.hbs

{{#if (includes supportedActions CALL_TO_ACTIONS.SEE_JOBS)}}
  <button class="{{get callToActionClasses CALL_TO_ACTIONS.SEE_JOBS}}">See jobs</button>
{{/if}}

{{#if (includes supportedActions CALL_TO_ACTIONS.SEE_ALUMNI)}}
  <button class="{{get callToActionClasses CALL_TO_ACTIONS.SEE_ALUMNI}}">See alumni</button>
{{/if}}

{{#if (includes supportedActions CALL_TO_ACTIONS.MANAGE_PAGE)}}
  <button class="{{get callToActionClasses CALL_TO_ACTIONS.MANAGE_PAGE}}">Manage page</button>
{{/if}}

{{#if (includes supportedActions CALL_TO_ACTIONS.VIEW_IN_SALES_NAVIGATOR)}}
  <button class="{{get callToActionClasses CALL_TO_ACTIONS.VIEW_IN_SALES_NAVIGATOR}}">View in SN</button>
{{/if}}

templates.components.top-card.hbs

Actions: 
{{primary-actions supportedActions=callToActions}}

top-card-constants.js

export const CALL_TO_ACTIONS = Object.freeze({
	SEE_JOBS: 'see-jobs',
  SEE_ALUMNI: 'see-alumni',
  MANAGE_PAGE: 'manage-page',
  VIEW_IN_SALES_NAVIGATOR: 'view-in-sales-navigator'
});

twiddle.json

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