legacy/src/root/projects-subscription-checkout.js
import m from 'mithril';
import prop from 'mithril/stream';
import _ from 'underscore';
import moment from 'moment';
import { catarse } from '../api';
import models from '../models';
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 subscriptionVM from '../vms/subscription-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';
const { CatarseAnalytics } = window;
const I18nScope = _.partial(h.i18nScope, 'projects.contributions.edit');
const I18nIntScope = _.partial(h.i18nScope, 'projects.contributions.edit_international');
const projectsSubscriptionCheckout = {
oninit: function(vnode) {
const {
ViewContentEvent,
AddToCartEvent
} = projectVM;
projectVM.sendPageViewForCurrentProject(null, [ ViewContentEvent(), AddToCartEvent() ]);
projectVM.getCurrentProject();
const project = projectVM.currentProject;
const project_id = m.route.param('project_id');
const vm = paymentVM();
const showPaymentForm = prop(false);
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 user = usersVM.getCurrentUser();
const oldSubscription = prop({});
const countriesLoader = catarse.loader(models.country.getPageOptions());
const error = prop();
const subscriptionId = prop(m.route.param('subscription_id'));
const isEdit = prop(Boolean(subscriptionId()));
const subscriptionStatus = m.route.param('subscription_status');
const isReactivation = prop(subscriptionStatus === 'inactive' || subscriptionStatus === 'canceled');
if (isEdit) {
subscriptionVM
.getSubscription(subscriptionId())
.then(data => oldSubscription(_.first(data)))
.catch(error);
}
if (_.isNull(currentUserID)) {
projectVM.storeSubscribeAction(m.route.get());
h.navigateToDevise(`?redirect_to=/projects/${project_id}`);
}
const reward = prop(rewardVM.selectedReward() || rewardVM.noReward);
let value;
if (_.isString(rewardVM.contributionValue())) {
value = h.monetaryToFloat(rewardVM.contributionValue);
} else {
value = rewardVM.contributionValue();
}
const valueParam = m.route.param('contribution_value');
const rewardIdParam = m.route.param('reward_id');
if (valueParam) {
value = rewardVM.contributionValue(Number(valueParam));
}
if (rewardIdParam) {
rewardVM.fetchRewards(project_id).then(() => {
reward(_.findWhere(rewardVM.rewards(), { id: Number(rewardIdParam) }));
rewardVM.selectedReward(reward());
m.redraw();
});
}
const validateForm = () => {
if (vm.validate()) {
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;
vm.fetchUser().then(() => {
countriesLoader
.load()
.then((countryData) => {
vm.fields.address().countries(_.sortBy(countryData, 'name_en'));
h.redraw();
});
h.redraw();
});
vnode.state = {
project_id,
addressChange,
applyDocumentMask,
fieldHasError,
validateForm,
showPaymentForm,
reward,
value,
scope,
isCnpj,
isEdit,
subscriptionId,
isReactivation,
vm,
user,
project,
isLongDescription,
oldSubscription,
toggleDescription: h.toggleProp(false, true),
subscriptionStatus
};
},
view: function({state}) {
const user = state.user(),
project_id = state.project_id,
project = state.project(),
formatedValue = h.formatNumber(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', (state.vm.fields.address() && user && !_.isEmpty(project)) ? [
m(`.w-section.section-product.${projectVM.currentProject().mode}`),
m('.w-section.w-clearfix.section', [
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/${project_id}/subscriptions/start?${state.reward().id ? `reward_id=${state.reward().id}` : ''}${state.isEdit() ? `&subscription_id=${state.subscriptionId()}` : ''}${state.subscriptionStatus ? `&subscription_status=${state.subscriptionStatus}` : ''}"]`,
'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?redirect_to=${encodeURIComponent(m.route.get())}"]`, 'Não é você?')
]),
m('.fontsize-base.fontweight-semibold', user.name),
(user.owner_document ?
m('label.field-label', `CPF/CNPJ: ${user.owner_document}`) : ''),
])
]),
anonymousCheckbox
]) : ''),
(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, {
addressVM: state.vm.fields.address(),
vm: state.vm,
project_id,
isSubscriptionEdit: state.isEdit,
isReactivation: state.isReactivation,
subscriptionId: state.subscriptionId,
user_id: user.id,
reward: state.reward,
reward_common_id: state.reward().common_id,
project_common_id: projectVM.currentProject().common_id,
user_common_id: user.common_id,
isSubscription: true,
oldSubscription: state.oldSubscription,
value: state.value,
hideSave: true
}) : ''
]),
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/${project_id}/subscriptions/start?${state.reward().id ? `reward_id=${state.reward().id}` : ''}${state.isEdit() ? `&subscription_id=${state.subscriptionId()}` : ''}${state.subscriptionStatus ? `&subscription_status=${state.subscriptionStatus}` : ''}"]`,
{ oncreate: m.route.link },
window.I18n.t('selected_reward.edit', state.scope())
)
]),
m('.divider.u-marginbottom-10.u-margintop-10'),
m('.fontsize-smaller.fontweight-semibold.u-marginbottom-10',
window.I18n.t('selected_reward.payment_plan', state.scope())
),
m('.fontsize-smaller',
[
m('span.fontweight-semibold',
[
m('span.fa.fa-money.text-success'),
` ${window.I18n.t('selected_reward.charged_today', state.scope())} `
]
),
state.isEdit() && !state.isReactivation()
? ` ${window.I18n.t('invoice_none', I18nScope())}`
: `R$ ${formatedValue}`
]
),
m('.fontsize-smaller.u-marginbottom-10',
[
m('span.fontweight-semibold',
[
m('span.fa.fa-calendar-o.text-success'),
` ${window.I18n.t('selected_reward.next_charge', state.scope())} `
]
),
state.isEdit() && !state.isReactivation()
? state.oldSubscription().next_charge_at
? h.momentify(state.oldSubscription().next_charge_at)
: h.momentify(Date.now())
: h.lastDayOfNextMonth()
]
),
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' : ''
})
]) : ''
]),
]),
m(faqBox, {
mode: project.mode,
isEdit: state.isEdit(),
isReactivate: state.isReactivation(),
vm: state.vm,
faq: state.vm.faq(state.isEdit() ? state.isReactivation() ? `${project.mode}_reactivate` : `${project.mode}_edit` : project.mode),
projectUserId: project.user_id
})
])
])
)
] : h.loader());
}
};
export default projectsSubscriptionCheckout;