corporate-frontend-mithril
Version:
Corporate frontend MithrilJS modules
150 lines (137 loc) • 6.63 kB
JavaScript
const FPO = require('fpo');
const ViewModel = require('./news-subscription-vm');
const FormInput = require('./../../blocks/form-input/form-input');
const FormCheckbox = require('./../../blocks/form-checkbox/form-checkbox');
const Dropdown = require('./../dropdown/dropdown');
const Button = require('./../../blocks/button/button');
const Spinner = require('./../../blocks/spinner/spinner');
module.exports = function() {
let vm = new ViewModel();
let view = function() {
return m('.b-component', [
// Form
vm.formState != vm.formStateCompleted && m('form.b-form.b-component', [
m('.b-component', [
m('p', [
'With your subscription you will receive the latest News & Opinion pieces straight to your inbox. You can select the ',
m('a.b-link', {
href: 'https://news-opinion.sydney.edu.au/link/id/zzzz5a6561263f3b6488/page.html',
}, 'categories and email frequency'),
' that suits you.']),
m('p', [
'Please fill in the mandatory fields (your email and preferred subscription frequency). We will handle your information in accordance with our ',
m('a.b-link', {
href: 'https://news-opinion.sydney.edu.au/link/id/zzzz5a38953615fd7320/page.html',
}, 'privacy policy'),
'.']),
m('p', 'Please enter your details to subscribe.'),
]),
m('h3.b-title.b-title--h3', 'Details to subscribe'),
m('.grid.grid--center', [
m('.1/3--mobile-up.grid__cell', [
m('p.b-form-control__label', 'Email*'),
]),
m('.2/3--mobile-up.grid__cell', [
m(FormInput, {
label: 'Email',
name: 'EMAIL',
type: 'email',
required: 'true',
presets: '["email"]',
vFn: FPO.partial({fn: vm.setItem, args: {key: 'EMAIL'}}),
isValidFn: (v)=> { !v ? vm.setItem({key: 'EMAIL', v: null}) : ''; },
}),
]),
]),
m('.grid.grid--center', [
m('.1/3--mobile-up.grid__cell', [
m('p.b-form-control__label', 'First name'),
]),
m('.2/3--mobile-up.grid__cell', [
m(FormInput, {
label: 'First name',
name: 'FIRST_NAME',
vFn: FPO.partial({fn: vm.setItem, args: {key: 'FIRST_NAME'}}),
}),
]),
]),
m('.grid.grid--center', [
m('.1/3--mobile-up.grid__cell', [
m('p.b-form-control__label', 'Last name / Surname'),
]),
m('.2/3--mobile-up.grid__cell', [
m(FormInput, {
label: 'Last name',
name: 'LAST_NAME',
vFn: FPO.partial({fn: vm.setItem, args: {key: 'LAST_NAME'}}),
}),
]),
]),
m('.grid.grid--center', [
m('.1/3--mobile-up.grid__cell', [
m('p.b-form-control__label', 'Primary role / Affiliation'),
]),
m('.2/3--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.roles,
placeholder: vm.rolePlaceholder,
nextFn: FPO.partial({fn: vm.selectedRole, args: {key: 'ROLE'}}),
}),
]),
]),
m('h3.b-title.b-title--h3', 'Subscription categories'),
m('p', 'Please select the categories you would like to subscribe to'),
m('.grid', vm.categories.map(function(category) {
return m('.1/2--mobile-up.1/3--sm-desk-up.grid__cell', [
m(FormCheckbox, Object.assign(
{
label: category.name,
name: category.value,
vFn: FPO.partial({
fn: vm.selectedCategory,
args: {category},
}),
},
vm.getCategoryInitialCheckedState(category)
)),
]);
})),
m('p', 'Please select a how often you would like to receive news articles.'),
m('h3.b-title.b-title--h3', 'Subscription frequency'),
m('p', 'How often would you like to receive news articles?'),
m('.grid', vm.frequencies.map(function(frequency) {
return m(`.1/2--mobile-up.${vm.getFrequencySpace(frequency)}--sm-desk-up.grid__cell`, [
m(FormCheckbox, {
label: frequency.name,
name: frequency.value,
vFn: FPO.partial({
fn: vm.selectedFrequency,
args: {frequency}}),
}),
]);
})),
m('.b-component'),
vm.formState != vm.formStateLoading && m('.b-form__button-group', [
m(Button, {
text: 'Submit',
htmlTag: 'a',
nextFn: vm.submit,
}),
]),
vm.formState == vm.formStateLoading && m('.grid', [
m('.1/2.1/3--mobile-up.1/4--tablet-up.grid__cell', [
m(Spinner),
]),
]),
]),
// form result
vm.formState == vm.formStateCompleted && m('.b-component', [
m('h3.b-title.b-title--first.b-title--h3', 'Thank you'),
m('p', vm.resultMsg),
]),
]);
};
return {
view,
};
};