houdini/client/js/nonprofits/donate/dedication-form.js

97 lines
2.8 KiB
JavaScript
Raw Normal View History

const h = require('snabbdom/h')
const R = require('ramda')
const flyd = require('flyd')
const uuid = require('uuid')
// A contact info form for a donor to add a dedication in honor/memory of somebody
function view(state) {
var radioId1 = uuid.v1() // need unique ids for the checkbox id and label for attrs
var radioId2 = uuid.v1()
var data = state.dedicationData$() || {}
return h('form.dedication-form', {
on: {submit: ev => {ev.preventDefault(); state.submitDedication$(ev.currentTarget)}}
}, [
h('p.u-centered.u-strong.u-marginBottom--10', I18n.t('nonprofits.donate.dedication.info'))
, h('fieldset.u-marginBottom--0.col-6', [
h('input', {props: {
name: 'dedication_type'
, type: 'radio'
, id: radioId1
, value: 'honor'
, selected: data.dedication_type === 'honor'
}})
, h('label', {props: {htmlFor: radioId1}}, I18n.t('nonprofits.donate.dedication.in_honor_label'))
])
, h('fieldset.u-marginBottom--0', [
h('input', {props: {
name: 'dedication_type'
, type: 'radio'
, value: 'memory'
, id: radioId2
, selected: data.dedication_type === 'memory'
}})
, h('label', {props: {htmlFor: radioId2}}, I18n.t('nonprofits.donate.dedication.in_memory_label'))
])
, h('fieldset.u-marginBottom--0.col-6', [
h('input', {props: {
name: 'first_name'
, placeholder: I18n.t('nonprofits.donate.dedication.first_name')
, title: 'First name'
, type: 'text'
, value: data.first_name
}})
])
, h('fieldset.u-marginBottom--0', [
h('input', {props: {
name: 'last_name'
, placeholder: I18n.t('nonprofits.donate.dedication.last_name')
, title: 'Last name'
, type: 'text'
, value: data.last_name
}})
])
, h('fieldset.u-marginBottom--0.col-6', [
h('input', {props: {
name: 'email'
, placeholder: I18n.t('nonprofits.donate.dedication.email')
, title: 'Email'
, type: 'text'
, value: data.email
}})
])
, h('fieldset.u-marginBottom--0', [
h('input', {props: {
name: 'phone'
, placeholder: I18n.t('nonprofits.donate.dedication.phone')
, title: 'Phone'
, type: 'text'
, value: data.phone
}})
])
, h('fieldset.u-marginBottom--0', [
h('input', {props: {
name: 'address'
, placeholder: I18n.t('nonprofits.donate.dedication.full_address')
, title: 'Address'
, type: 'text'
, value: data.address
}})
])
, h('fieldset', [
h('textarea', {props: {
name: 'dedication_note'
, placeholder: I18n.t('nonprofits.donate.dedication.note')
, title: 'Note'
, value: data.dedication_note
}})
])
, h('div.u-centered', [
h('button.button', I18n.t('nonprofits.donate.dedication.save'))
])
])
}
module.exports = {view}