houdini/client/js/components/address-autocomplete-fields.js

95 lines
2.6 KiB
JavaScript

const flyd = require('flyd')
const h = require('snabbdom/h')
const R = require('ramda')
flyd.lift = require('flyd/module/lift')
function init(state, params$) {
state = state||{}
state = R.merge({
isManual$: flyd.stream(false)
, data$: flyd.stream(app.profile ? R.pick(['address', 'city', 'state_code', 'zip_code'], app.profile) : {})
, autocompleteInputInserted$: flyd.stream()
}, state)
state.isManual$ = flyd.stream(true)
state.params$ = params$
return state
}
function calculateToShip(state)
{
return state.params$().gift_option && state.params$().gift_option.to_ship
}
function view(state) {
return h('section.u-padding--5.pastelBox--grey clearfix', [
calculateToShip(state)
? h('label.u-centered.u-marginBottom--5', [
'Shipping address (required)'
])
: ''
, manualFields(state)
])
}
const manualFields = state => {
return h('div', [
h('fieldset.col-8.u-fontSize--14', [
h('input.u-marginBottom--0', {props: {
type: 'text'
, title: 'Street Addresss'
, name: 'address'
, placeholder: 'Street Address'
, value: state.data$().address
, required: calculateToShip(state) ? state.params$().gift_option.to_ship : undefined
}})
])
, h('fieldset.col-right-4.u-fontSize--15', [
h('input.u-marginBottom--0', {props: {
type: 'text'
, name: 'city'
, title: 'City'
, placeholder: 'City'
, value: state.data$().city
, required: calculateToShip(state) ? state.params$().gift_option.to_ship : undefined
}})
])
, h('fieldset.u-marginBottom--0.u-floatL.col-4', [
h('input.u-marginBottom--0', {props: {
type: 'text'
, name: 'state_code'
, title: 'State/Region'
, placeholder: 'State/Region'
, value: state.data$().state_code
, required: calculateToShip(state) ? state.params$().gift_option.to_ship : undefined
}})
])
, h('fieldset.u-marginBottom--0.u-floatL.col-right-4.u-fontSize--14', [
h('input.u-marginBottom--0', {props: {
type: 'text'
, title: 'Zip/Postal'
, name: 'zip_code'
, placeholder: 'Zip/Postal'
, value: state.data$().zip_code
, required: calculateToShip(state) ? state.params$().gift_option.to_ship : undefined
}})
])
, h('fieldset.u-marginBottom--0.u-floatL.col-right-4', [
h('input.u-marginBottom--0', {props: {
type: 'text'
, title: 'Country'
, name: 'country'
, placeholder: 'Country'
, value: state.data$().country
, required: calculateToShip(state) ? state.params$().gift_option.to_ship : undefined
}})
])
])
}
module.exports = {init, view}