示例#1
0
    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,
            })
        })
    })
示例#2
0
}).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) => {
示例#3
0
    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,
            })
        })
    })
示例#4
0
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()
}