catarse/catarse.js

View on GitHub
legacy/src/root/projects-payment.js

Summary

Maintainability
F
1 wk
Test Coverage
import m from 'mithril';
import prop from 'mithril/stream';
import _ from 'underscore';
import h from '../h';
import contributionVM from '../vms/contribution-vm';
import rewardVM from '../vms/reward-vm';
import paymentVM from '../vms/payment-vm';
import projectVM from '../vms/project-vm';
import addressVM from '../vms/address-vm';
import usersVM from '../vms/user-vm';
import faqBox from '../c/faq-box';
import nationalityRadio from '../c/nationality-radio';
import paymentForm from '../c/payment-form';
import inlineError from '../c/inline-error';
import addressForm from '../c/address-form';
import { catarse } from '../api';
import models from '../models';

const { CatarseAnalytics } = window;

const I18nScope = _.partial(h.i18nScope, 'projects.contributions.edit');
const I18nIntScope = _.partial(h.i18nScope, 'projects.contributions.edit_international');

const projectsPayment = {
    oninit: function (vnode) {
        
        const {
            ViewContentEvent,
            AddToCartEvent
        } = projectVM;
        
        projectVM.sendPageViewForCurrentProject(null, [ ViewContentEvent(), AddToCartEvent() ]);

        const project = projectVM.currentProject;
        const vm = paymentVM();
        const showPaymentForm = prop(false);
        const contribution = contributionVM.getCurrentContribution();
        const reward = prop(contribution().reward);
        const value = contribution().value;
        const documentMask = _.partial(h.mask, '999.999.999-99');
        const documentCompanyMask = _.partial(h.mask, '99.999.999/9999-99');
        const isCnpj = prop(false);
        const currentUserID = h.getUserID();
        const countriesLoader = catarse.loader(models.country.getPageOptions());
        const user = usersVM.getCurrentUser();
        
        vm.fields.address().setFields(vnode.attrs.address || vm.fields.address());

        const shippingFee = () =>
            _.findWhere(rewardVM.fees(), {
                id: contribution().shipping_fee_id,
            });

        const validateForm = () => {
            if (vm.validate()) {
                vm.kondutoExecute();
                showPaymentForm(true);
                h.redraw();
            }
        };

        const fieldHasError = fieldName => {
            const fieldWithError = _.findWhere(vm.fields.errors(), {
                field: fieldName,
            });

            return fieldWithError
                ? m(inlineError, {
                    message: fieldWithError.message,
                })
                : '';
        };

        const applyDocumentMask = value => {
            if (value.length > 14) {
                isCnpj(true);
                vm.fields.ownerDocument(documentCompanyMask(value));
            } else {
                isCnpj(false);
                vm.fields.ownerDocument(documentMask(value));
            }
        };

        const addressChange = fn => e => {
            CatarseAnalytics.oneTimeEvent({
                cat: 'contribution_finish',
                act: vm.isInternational ? 'contribution_address_br' : 'contribution_address_int',
            });

            if (_.isFunction(fn)) {
                fn(e);
            }
        };

        const scope = attr => (vm.isInternational() ? I18nIntScope(attr) : I18nScope(attr));

        const isLongDescription = reward => reward.description && reward.description.length > 110;

        if (_.isNull(currentUserID)) {
            return h.navigateToDevise();
        }
        if (reward() && !_.isNull(reward().id)) {
            rewardVM
                .getFees(reward())
                .then(fees => {
                    rewardVM.fees(fees);
                    h.redraw();
                })
                .catch(err => m.redraw());
        }

        vm.fetchUser().then(() => {
            countriesLoader
                .load()
                .then((countryData) => {
                    vm.fields.address().countries(_.sortBy(countryData, 'name_en'));
                    h.redraw();
                });
            h.redraw();
        });

        vm.kondutoExecute();
        projectVM.getCurrentProject();

        vnode.state = {
            addressChange,
            applyDocumentMask,
            fieldHasError,
            validateForm,
            showPaymentForm,
            contribution,
            reward,
            value,
            scope,
            isCnpj,
            vm,
            user,
            project,
            shippingFee,
            isLongDescription,
            toggleDescription: h.toggleProp(false, true),
        };
    },
    view: function ({ state }) {
        const user = state.user(),
            project = state.project(),
            formatedValue = h.formatNumber(Number(state.value), 2, 3),
            anonymousCheckbox = m('.w-row', [
                m('.w-checkbox.w-clearfix', [
                    m("input.w-checkbox-input[id='anonymous'][name='anonymous'][type='checkbox']", {
                        onclick: () =>
                            CatarseAnalytics.event({
                                cat: 'contribution_finish',
                                act: 'contribution_anonymous_change',
                            }),
                        onchange: () => {
                            state.vm.fields.anonymous.toggle();
                        },
                        checked: state.vm.fields.anonymous(),
                    }),
                    m("label.w-form-label.fontsize-smallest[for='anonymous']", window.I18n.t('fields.anonymous', state.scope())),
                ]),

                state.vm.fields.anonymous()
                    ? m(
                        '.card.card-message.u-radius.zindex-10.fontsize-smallest',
                        m('div', [
                            m('span.fontweight-bold', [window.I18n.t('anonymous_confirmation_title', state.scope()), m('br')]),
                            m('br'),
                            window.I18n.t('anonymous_confirmation', state.scope()),
                        ])
                    )
                    : '',
            ]);

        return m(
            '#project-payment.w-section.w-clearfix.section',
            state.vm.fields.address() && !_.isEmpty(project)
                ? [
                    m(
                        '.w-col',
                        m('.w-clearfix.w-hidden-main.w-hidden-medium.card.u-radius.u-marginbottom-20', [
                            m('.fontsize-smaller.fontweight-semibold.u-marginbottom-20', window.I18n.t('selected_reward.value', state.scope())),
                            m('.w-clearfix', [
                                m('.fontsize-larger.text-success.u-left', `R$ ${formatedValue}`),
                                m(
                                    `a.alt-link.fontsize-smaller.u-right[href="/projects/${projectVM.currentProject().project_id}/contributions/new${
                                    state.reward().id ? `?reward_id=${state.reward().id}` : ''
                                    }"]`,
                                    'Editar'
                                ),
                            ]),
                            m('.divider.u-marginbottom-10.u-margintop-10'),
                            m('.back-payment-info-reward', [
                                m('.fontsize-smaller.fontweight-semibold.u-marginbottom-10', window.I18n.t('selected_reward.reward', state.scope())),
                                m('.fontsize-smallest.fontweight-semibold', state.reward().title),
                                m(
                                    '.fontsize-smallest.reward-description.opened.fontcolor-secondary',
                                    {
                                        class: state.isLongDescription(state.reward()) ? (state.toggleDescription() ? 'extended' : '') : 'extended',
                                    },
                                    state.reward().description
                                        ? state.reward().description
                                        : m.trust(
                                            window.I18n.t(
                                                'selected_reward.review_without_reward_html',
                                                state.scope(
                                                    _.extend({
                                                        value: formatedValue,
                                                    })
                                                )
                                            )
                                        )
                                ),
                                state.isLongDescription(state.reward())
                                    ? m(
                                        'a[href="javascript:void(0);"].link-hidden.link-more.u-marginbottom-20',
                                        {
                                            onclick: state.toggleDescription.toggle,
                                        },
                                        [
                                            state.toggleDescription() ? 'menos ' : 'mais ',
                                            m('span.fa.fa-angle-down', {
                                                class: state.toggleDescription() ? 'reversed' : '',
                                            }),
                                        ]
                                    )
                                    : '',
                                state.reward().deliver_at
                                    ? m('.fontcolor-secondary.fontsize-smallest.u-margintop-10', [
                                        m('span.fontweight-semibold', 'Entrega prevista:'),
                                        ` ${h.momentify(state.reward().deliver_at, 'MMM/YYYY')}`,
                                    ])
                                    : '',
                                rewardVM.hasShippingOptions(state.reward()) || state.reward().shipping_options === 'presential'
                                    ? m('.fontcolor-secondary.fontsize-smallest', [
                                        m('span.fontweight-semibold', 'Forma de envio: '),
                                        window.I18n.t(`shipping_options.${state.reward().shipping_options}`, {
                                            scope: 'projects.contributions',
                                        }),
                                    ])
                                    : '',
                            ]),
                        ])
                    ),

                    m(
                        '.w-container',
                        m('.w-row', [
                            m('.w-col.w-col-8', [
                                m('.w-form', [
                                    m('form.u-marginbottom-40', [
                                        m('.u-marginbottom-40.u-text-center-small-only', [
                                            m('.fontweight-semibold.lineheight-tight.fontsize-large', window.I18n.t('title', state.scope())),
                                            m('.fontsize-smaller', window.I18n.t('required', state.scope())),
                                        ]),

                                        user.name && user.owner_document
                                            ? m('.card.card-terciary.u-radius.u-marginbottom-40', [
                                                m('.w-row.u-marginbottom-20', [
                                                    m('.w-col.w-col-2.w-col-small-2.w-col-tiny-2.w-hidden-tiny', [
                                                        m(
                                                            `img.thumb.u-margintop-10.u-round[src="${h.useAvatarOrDefault(
                                                                user.profile_img_thumbnail
                                                            )}"][width="100"]`
                                                        ),
                                                    ]),
                                                    m('.w-col.w-col-10.w-col-small-10.w-col-tiny-10', [
                                                        m('.fontcolor-secondary.fontsize-smallest.u-marginbottom-10', [
                                                            project ? 'Dados do apoiador ' : 'Dados do usuário ',
                                                            m(
                                                                `a.alt-link[href="/not-my-account${project ? `?project_id=${project.project_id}` : ''}${
                                                                state.reward() ? `&reward_id=${state.reward().id}` : ''
                                                                }${state.value ? `&value=${state.value * 100}` : ''}"]`,
                                                                'Não é você?'
                                                            ),
                                                        ]),
                                                        m('.fontsize-base.fontweight-semibold', user.name),
                                                        user.owner_document ? m('label.field-label', `CPF/CNPJ: ${user.owner_document}`) : '',
                                                    ]),
                                                ]),
                                                anonymousCheckbox,
                                            ])
                                            : '',
                                        // m(
                                        //     '.card.card-terciary.u-marginbottom-30.u-radius.w-form',
                                        //     m(nationalityRadio, {
                                        //         fields: addVM.fields,
                                        //         defaultCountryID: addVM.defaultCountryID,
                                        //         defaultForeignCountryID: addVM.defaultForeignCountryID,
                                        //         international: addVM.international,
                                        //     })
                                        // ),

                                        user.name && user.owner_document
                                            ? ''
                                            : m('.card.card-terciary.u-radius.u-marginbottom-40', [
                                                m('.w-row', [
                                                    m('.w-col.w-col-7.w-sub-col', [
                                                        m(
                                                            "label.field-label.fontweight-semibold[for='complete-name']",
                                                            window.I18n.t('fields.complete_name', state.scope())
                                                        ),
                                                        m("input.positive.w-input.text-field[id='complete-name'][name='complete-name']", {
                                                            onfocus: state.vm.resetFieldError('completeName'),
                                                            class: state.fieldHasError('completeName') ? 'error' : false,
                                                            type: 'text',
                                                            onchange: m.withAttr('value', state.vm.fields.completeName),
                                                            value: state.vm.fields.completeName(),
                                                            placeholder: 'Nome Completo',
                                                        }),
                                                        state.fieldHasError('completeName'),
                                                    ]),
                                                    m(
                                                        '.w-col.w-col-5',
                                                        state.vm.isInternational()
                                                            ? ''
                                                            : [
                                                                m(
                                                                    "label.field-label.fontweight-semibold[for='document']",
                                                                    window.I18n.t('fields.owner_document', state.scope())
                                                                ),
                                                                m("input.positive.w-input.text-field[id='document']", {
                                                                    onfocus: state.vm.resetFieldError('ownerDocument'),
                                                                    class: state.fieldHasError('ownerDocument') ? 'error' : false,
                                                                    type: 'tel',
                                                                    onkeyup: m.withAttr('value', state.applyDocumentMask),
                                                                    value: state.vm.fields.ownerDocument(),
                                                                }),
                                                                state.fieldHasError('ownerDocument'),
                                                            ]
                                                    ),
                                                ]),
                                                anonymousCheckbox,
                                            ]),

                                        m('.card.card-terciary.u-radius.u-marginbottom-40',
                                            m(addressForm, {
                                                addVM: state.vm.fields.address(),
                                                addressFields: state.vm.fields.address().fields,
                                                international: state.vm.isInternational,
                                                hideNationality: true,
                                            })
                                        ),
                                    ]),
                                ]),
                                m(
                                    '.w-row.u-marginbottom-40',
                                    !state.showPaymentForm()
                                        ? m(
                                            '.w-col.w-col-push-3.w-col-6',
                                            m(
                                                'button.btn.btn-large',
                                                {
                                                    onclick: () =>
                                                        CatarseAnalytics.event(
                                                            {
                                                                cat: 'contribution_finish',
                                                                act: 'contribution_next_click',
                                                            },
                                                            state.validateForm
                                                        ),
                                                },
                                                window.I18n.t('next_step', state.scope())
                                            )
                                        )
                                        : ''
                                ),
                                state.showPaymentForm()
                                    ? m(paymentForm, {
                                        vm: state.vm,
                                        contribution_id: state.contribution().id,
                                        project_id: projectVM.currentProject().project_id,
                                        user_id: user.id,
                                    })
                                    : '',
                            ]),
                            m('.w-col.w-col-4', [
                                m('.card.u-marginbottom-20.u-radius.w-hidden-small.w-hidden-tiny', [
                                    m('.fontsize-smaller.fontweight-semibold.u-marginbottom-20', window.I18n.t('selected_reward.value', state.scope())),
                                    m('.w-clearfix', [
                                        m('.fontsize-larger.text-success.u-left', `R$ ${formatedValue}`),
                                        m(
                                            `a.alt-link.fontsize-smaller.u-right[href="/projects/${projectVM.currentProject().project_id}/contributions/new${
                                            state.reward().id ? `?reward_id=${state.reward().id}` : ''
                                            }"]`,
                                            'Editar'
                                        ),
                                    ]),
                                    m('.divider.u-marginbottom-10.u-margintop-10'),
                                    m('.back-payment-info-reward', [
                                        m('.fontsize-smaller.fontweight-semibold.u-marginbottom-10', window.I18n.t('selected_reward.reward', state.scope())),
                                        m('.fontsize-smallest.fontweight-semibold', state.reward().title),
                                        m(
                                            '.fontsize-smallest.reward-description.opened.fontcolor-secondary',
                                            {
                                                class: state.isLongDescription(state.reward()) ? (state.toggleDescription() ? 'extended' : '') : 'extended',
                                            },
                                            state.reward().description
                                                ? state.reward().description
                                                : m.trust(
                                                    window.I18n.t(
                                                        'selected_reward.review_without_reward_html',
                                                        state.scope(
                                                            _.extend({
                                                                value: Number(state.value).toFixed(),
                                                            })
                                                        )
                                                    )
                                                )
                                        ),
                                        state.isLongDescription(state.reward())
                                            ? m(
                                                'a[href="javascript:void(0);"].link-hidden.link-more.u-marginbottom-20',
                                                {
                                                    onclick: state.toggleDescription.toggle,
                                                },
                                                [
                                                    state.toggleDescription() ? 'menos ' : 'mais ',
                                                    m('span.fa.fa-angle-down', {
                                                        class: state.toggleDescription() ? 'reversed' : '',
                                                    }),
                                                ]
                                            )
                                            : '',
                                        state.reward().deliver_at
                                            ? m('.fontcolor-secondary.fontsize-smallest.u-margintop-10', [
                                                m('span.fontweight-semibold', 'Entrega prevista:'),
                                                ` ${h.momentify(state.reward().deliver_at, 'MMM/YYYY')}`,
                                            ])
                                            : '',
                                        state.reward() && (rewardVM.hasShippingOptions(state.reward()) || state.reward().shipping_options === 'presential')
                                            ? m('.fontcolor-secondary.fontsize-smallest', [
                                                m('span.fontweight-semibold', 'Forma de envio: '),
                                                window.I18n.t(`shipping_options.${state.reward().shipping_options}`, {
                                                    scope: 'projects.contributions',
                                                }),
                                            ])
                                            : '',
                                        m(
                                            'div'
                                            // state.contribution().shipping_fee_id ? [
                                            //     m('.divider.u-marginbottom-10.u-margintop-10'),
                                            //     m('.fontsize-smaller.fontweight-semibold',
                                            //         'Destino da recompensa:'
                                            //     ),
                                            //     m(`a.alt-link.fontsize-smaller.u-right[href="/projects/${projectVM.currentProject().project_id}/contributions/new${state.reward().id ? `?reward_id=${state.reward().id}` : ''}"]`,
                                            //         'Editar'
                                            //     ),
                                            //     m('.fontsize-smaller', { style: 'padding-right: 42px;' },
                                            //         `${rewardVM.feeDestination(state.reward(), state.contribution().shipping_fee_id)}`
                                            //     ),
                                            //     m('p.fontsize-smaller', `(R$ ${rewardVM.shippingFeeById(state.contribution().shipping_fee_id) ? rewardVM.shippingFeeById(state.contribution().shipping_fee_id).value : '...'})`)
                                            // ] : ''
                                        ),
                                    ]),
                                ]),
                                m(faqBox, {
                                    mode: project.mode,
                                    vm: state.vm,
                                    faq: state.vm.faq(project.mode),
                                    projectUserId: project.user_id,
                                }),
                            ]),
                        ])
                    ),
                ]
                : h.loader()
        );
    },
};

export default projectsPayment;