Array.prototype.slice.apply(document.querySelectorAll('.special-project_donate')).forEach((form) => {
const input = form.querySelector('.special-project_donate-amount')
const button = form.querySelector('.special-project_donate-button')
const sumInput = form.querySelector('input[name=sum]')
// Configure rendering
const localStore = createStore(localReducer)
const render = () => {
const {value, focused} = localStore.getState()
// Update view
if (!focused) {
if (currency === CurrencyType.RUB) {
input.value = value + '\u00a0' + i18n.settings.currency[currency].symbol
}
else {
input.value = i18n.settings.currency[currency].symbol + value
}
}
else {
input.value = value
}
button.disabled = !(value > 0)
sumInput.value = value
}
localStore.subscribe(render)
render()
// Bind some events to store dispatching
bindEvents(input, ['input', 'focus', 'blur'], localStore)
form.addEventListener('submit', (e) => {
e.preventDefault()
const {value} = localStore.getState()
popupStore.dispatch(setProvider(provider))
popupStore.dispatch(setCurrency(currency))
popupStore.dispatch(setAmount(value))
popupStore.dispatch(setTargets(form.querySelector('input[name=formcomment]').value))
popupStore.dispatch(setFormComment(form.querySelector('input[name=short-dest]').value))
popupStore.dispatch(setShortDesc(form.querySelector('input[name=targets]').value))
popupStore.dispatch({
type: 'SET_MODAL_DISPLAYED',
displayed: true,
})
})
})
}).then((i18n) => {
const language = i18n.detectLanguage()
const currency = CurrencyType[i18n.settings.language[language].defaultCurrency]
const provider = language === LanguageType.RU ? ProviderType.YANDEX_MONEY : ProviderType.PAYPAL
// Init store for popup
const initialState = {
modal: donateModalInitialState.modal,
form: {
...donateModalInitialState.form,
currencySettings: i18n.settings.currency,
},
}
const popupStore = createStore(donateModalReducer, initialState)
ReactDOM.render(
h(Provider, {store: popupStore},
h(DonatePopup(i18n))
),
document.querySelector('#react-donate-popup-entry')
)
const localInitialState = {
value: i18n.settings.currency[currency].donationOption3,
focused: false,
}
const localReducer = (state = localInitialState, action) => {
switch (action.type) {
case 'DOM_FOCUS': {
return merge(state, {focused: true})
}
case 'DOM_BLUR': {
return merge(state, {focused: false})
}
case 'DOM_INPUT': {
const number = Number(action.text)
if (Number.isNaN(number)) {
return state
}
else {
return merge(state, {value: number})
}
}
default: return state
}
}
/*
Common donation logic
*/
Array.prototype.slice.apply(document.querySelectorAll('.widget-main-donate-form')).forEach((formDiv) => {
const form = formDiv.querySelector('.widget-main-donate-form_form')
const tips = formDiv.querySelector('.widget-main-donate-form_tips')
const input = formDiv.querySelector('.widget-main-donate-form_amount')
const button = formDiv.querySelector('.widget-main-donate-form_donate-button')
const sumInput = form.querySelector('input[name=sum]')
// Get tips template
const tipsTempalte = tips.innerText
// Configure rendering
const localStore = createStore(localReducer)
const render = () => {
const {value, focused} = localStore.getState()
// Calculate derived values
const a = 0.005 // coefficient for PC payment type
const amountDue = value - value * (a / (1 + a))
const fee = value - amountDue
// Update view
//todo: implement formatMoney
if (!focused) {
if (currency === CurrencyType.RUB) {
input.value = value + '\u00a0' + i18n.settings.currency[currency].symbol
}
else {
input.value = i18n.settings.currency[currency].symbol + value
}
}
else {
input.value = value
}
button.disabled = !(value > 0)
if (currency === CurrencyType.RUB) {
tips.innerText = tipsTempalte
.replace('{amount}', amountDue.toFixed(2))
.replace('{fee}', fee.toFixed(2))
tips.classList.remove('hidden')
}
sumInput.value = value
}
localStore.subscribe(render)
render()
// Bind some events to store dispatching
bindEvents(input, ['input', 'focus', 'blur'], localStore)
form.addEventListener('submit', (e) => {
e.preventDefault()
const {value} = localStore.getState()
popupStore.dispatch(setProvider(provider))
popupStore.dispatch(setCurrency(currency))
popupStore.dispatch(setAmount(value))
popupStore.dispatch(setTargets(i18n.t('strings', 'widgets/shared/main-donate-form/targets')))
popupStore.dispatch(setFormComment(i18n.t('strings', 'widgets/shared/main-donate-form/formcomment')))
popupStore.dispatch(setShortDesc(i18n.t('strings', 'widgets/shared/main-donate-form/short-dest')))
popupStore.dispatch({
type: 'SET_MODAL_DISPLAYED',
displayed: true,
})
})
})
/*
Special projects logic
*/
Array.prototype.slice.apply(document.querySelectorAll('.special-project_donate')).forEach((form) => {
const input = form.querySelector('.special-project_donate-amount')
const button = form.querySelector('.special-project_donate-button')
const sumInput = form.querySelector('input[name=sum]')
// Configure rendering
const localStore = createStore(localReducer)
const render = () => {
const {value, focused} = localStore.getState()
// Update view
if (!focused) {
if (currency === CurrencyType.RUB) {
input.value = value + '\u00a0' + i18n.settings.currency[currency].symbol
}
else {
input.value = i18n.settings.currency[currency].symbol + value
}
}
else {
input.value = value
}
button.disabled = !(value > 0)
sumInput.value = value
}
localStore.subscribe(render)
render()
// Bind some events to store dispatching
bindEvents(input, ['input', 'focus', 'blur'], localStore)
form.addEventListener('submit', (e) => {
e.preventDefault()
const {value} = localStore.getState()
popupStore.dispatch(setProvider(provider))
popupStore.dispatch(setCurrency(currency))
popupStore.dispatch(setAmount(value))
popupStore.dispatch(setTargets(form.querySelector('input[name=formcomment]').value))
popupStore.dispatch(setFormComment(form.querySelector('input[name=short-dest]').value))
popupStore.dispatch(setShortDesc(form.querySelector('input[name=targets]').value))
popupStore.dispatch({
type: 'SET_MODAL_DISPLAYED',
displayed: true,
})
})
})
}).catch((e) => {
Array.prototype.slice.apply(document.querySelectorAll('.widget-main-donate-form')).forEach((formDiv) => {
const form = formDiv.querySelector('.widget-main-donate-form_form')
const tips = formDiv.querySelector('.widget-main-donate-form_tips')
const input = formDiv.querySelector('.widget-main-donate-form_amount')
const button = formDiv.querySelector('.widget-main-donate-form_donate-button')
const sumInput = form.querySelector('input[name=sum]')
// Get tips template
const tipsTempalte = tips.innerText
// Configure rendering
const localStore = createStore(localReducer)
const render = () => {
const {value, focused} = localStore.getState()
// Calculate derived values
const a = 0.005 // coefficient for PC payment type
const amountDue = value - value * (a / (1 + a))
const fee = value - amountDue
// Update view
//todo: implement formatMoney
if (!focused) {
if (currency === CurrencyType.RUB) {
input.value = value + '\u00a0' + i18n.settings.currency[currency].symbol
}
else {
input.value = i18n.settings.currency[currency].symbol + value
}
}
else {
input.value = value
}
button.disabled = !(value > 0)
if (currency === CurrencyType.RUB) {
tips.innerText = tipsTempalte
.replace('{amount}', amountDue.toFixed(2))
.replace('{fee}', fee.toFixed(2))
tips.classList.remove('hidden')
}
sumInput.value = value
}
localStore.subscribe(render)
render()
// Bind some events to store dispatching
bindEvents(input, ['input', 'focus', 'blur'], localStore)
form.addEventListener('submit', (e) => {
e.preventDefault()
const {value} = localStore.getState()
popupStore.dispatch(setProvider(provider))
popupStore.dispatch(setCurrency(currency))
popupStore.dispatch(setAmount(value))
popupStore.dispatch(setTargets(i18n.t('strings', 'widgets/shared/main-donate-form/targets')))
popupStore.dispatch(setFormComment(i18n.t('strings', 'widgets/shared/main-donate-form/formcomment')))
popupStore.dispatch(setShortDesc(i18n.t('strings', 'widgets/shared/main-donate-form/short-dest')))
popupStore.dispatch({
type: 'SET_MODAL_DISPLAYED',
displayed: true,
})
})
})
export default (settings, container, i18n) => {
// todo: need to validate json
const questionnaireInitialState = Object.assign({}, buildStateTree(settings), {
language: i18n.detectLanguage(),
})
const questionnaireReducer = (state = questionnaireInitialState, action) => {
if (action.type === 'SET_VALUE') {
const {path, value} = action
if (path.length > 0) {
const key = path[0]
if (key in state) {
const newValue = path.length === 1
? value
: questionnaireReducer(state[key], {...action, path: path.slice(1)})
return {
...state,
[key]: newValue,
}
}
}
}
return state
}
const uiReducer = (state = {state: 'IDLE'}, action) => {
if (action.type === 'SENDING_START') {
return {
...state,
state: 'SENDING',
}
}
else if (action.type === 'SENDING_DONE') {
return {
...state,
state: 'SENDING_DONE',
}
}
else if (action.type === 'SENDING_FAILED') {
return {
...state,
state: 'SENDING_FAILED',
}
}
return state
}
const reducer = combineReducers({
questionnaire: questionnaireReducer,
ui: uiReducer,
})
const store = createStore(reducer)
const handleChange = (path, value) => {
store.dispatch(action.setValue(path, value))
}
const send = () => {
const {questionnaire} = store.getState()
store.dispatch({type: 'SENDING_START'})
nanoajax.ajax({
url: '/api/volunteers/send-questionnaire',
method: 'POST',
body: JSON.stringify({
version: settings.version,
answers: questionnaire,
}),
}, (code, responseText, request) => {
const OK_CODE = 200
if (code === OK_CODE) {
store.dispatch({type: 'SENDING_DONE'})
}
else {
store.dispatch({type: 'SENDING_FAILED'})
}
})
}
const render = () => {
const bem = prefixer('questionnaire')
const {questionnaire, ui} = store.getState()
let rootEl = null
if (ui.state === 'SENDING_DONE') {
rootEl = h(bem('div#done'),
h(bem('p#done-message'), {
dangerouslySetInnerHTML: {__html: i18n.t('texts', 'volunteers/questionnaire/done-message')},
})
)
}
else {
const uiDisabled = ui.state === 'SENDING'
const mandatoryFilled = checkMandatory(settings, questionnaire)
const submitDisabled = uiDisabled || !mandatoryFilled
rootEl = h('div.questionnaire-react-root',
h(Root, {settings, state: questionnaire, onChange: handleChange}),
ui.state === 'SENDING_FAILED' && h('div.message', 'Something has gone wrong shile sending the form :('),
h(bem('button#submit'), {
onClick: send,
disabled: submitDisabled,
}, i18n.t('strings', 'volunteers/quetaionnaire/submit-button/title'))
)
}
ReactDOM.render(
rootEl,
container
)
}
store.subscribe(render)
render()
}