diff --git a/clients/libs/webpage/src/lib/plugins/donation/analytics.js b/clients/libs/webpage/src/lib/plugins/donation/analytics.js deleted file mode 100644 index 6ecbcb55ae..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/analytics.js +++ /dev/null @@ -1,25 +0,0 @@ -import AnalyticsBase from '../../analytics-base' - -const DONATION_STARTED = { - category: 'Doação', - action: 'Escolheu Valor' -} - -const DONATION_FINISHED = { - category: 'Doação', - action: 'Servidor Recebeu Dados' -} - -class Analytics extends AnalyticsBase { - - - donationSetValue () { - return this.sendEvent(DONATION_STARTED) - } - - donationFinishRequest (value) { - return this.sendEvent({ ...DONATION_FINISHED, label: value }) - } -} - -export default new Analytics() diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/form-select.js b/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/form-select.js deleted file mode 100644 index 85361b850b..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/form-select.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react' -import { FormattedMessage } from 'react-intl' -import PropTypes from 'prop-types' - -const FormSelect = (props) => { - const { - widget: { settings }, - mobilization: { header_font }, - onChange, - value, - onSubmit - } = props - - const mainColor = (settings && settings.main_color) || '#54d0f6' - - const { donation_value1, donation_value2, donation_value3, donation_value4, donation_value5 } = settings - - return ( -
-

- -

-
-
- - -
- -
-
- -
-
- - - -
-
-
- ) -} - -FormSelect.propTypes = { - mobilization: PropTypes.shape({ - header_font: PropTypes.string - }), - widget: PropTypes.shape({ - settings: PropTypes.any - }), - onChange: PropTypes.func, - value: PropTypes.string -} - -export default FormSelect \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.js b/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.js deleted file mode 100644 index 69624011de..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react' -import FormSelect from './form-select' -import PropTypes from 'prop-types' -import { TellAFriend } from '..'; -import { FormattedMessage } from 'react-intl'; - -class FinishPostDonation extends React.Component { - constructor(p) { - super(p) - this.state = { - value: this.props.defaultSelectedValue, - success: false - } - - this.handleChange = this.handleChange.bind(this) - } - - handleChange(e) { - const {value} = e.currentTarget - this.setState({ value: Number(value) }) - } - - render() { - const { - // Passed Donation to Finish by props - mobilization, - widget, - donationCustomerData, - // Passed Donation to Finish by state - defaultSelectedValue, - onClickDonation, - finishDonationComponent: FinishDonationComponent, - imageUrl - } = this.props - - return this.state.success ? ( - } - imageUrl={this.state.donationValue && imageUrl} - /> - ) : ( - { - await onClickDonation(value) - this.setState({ - success: true, - donationValue: value - }) - }} - /> - ) - } -} - -FinishPostDonation.propTypes = { - mobilization: PropTypes.object.isRequired, - widget: PropTypes.object.isRequired.isRequired, - donationCustomerData: PropTypes.object.isRequired, - defaultSelectedValue: PropTypes.number.isRequired, - onClickDonation: PropTypes.func.isRequired, - finishDonationComponent: PropTypes.func.isRequired, - imageUrl: PropTypes.string -} - -export default FinishPostDonation \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.spec.js b/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.spec.js deleted file mode 100644 index 2f9c1947ca..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/finish-post-donation/index.spec.js +++ /dev/null @@ -1,73 +0,0 @@ -import FinishPostDonation from './' -import { shallow, mount } from 'enzyme' -import * as React from 'react' -import { IntlProvider } from 'react-intl' -import test from 'ava' -import sinon from 'sinon' -import FormSelect from './form-select' - -import {JSDOM} from 'jsdom' -const doc = new JSDOM('') -global.window = doc.window -global.document = window.document - -const finishDonationStub = sinon.fake.returns('oi') - -const props = { - widget: { - settings: { - donation_value1: '10', - donation_value2: '20', - donation_value3: '30', - donation_value4: '40', - donation_value5: '50', - } - }, - mobilization: { - header_font: 'ubuntu' - }, - defaultSelectedValue: '3', - onClickDonation: sinon.spy(), - finishDonationComponent: finishDonationStub -} - -function setupFinishPostDonation() { - const wrapper = mount( - - ) - - return wrapper -} - -test('FormSelect rendered', t => { - const wrapper = setupFinishPostDonation() - t.is(wrapper.find(FormSelect).length, 1) -}) - -test('submit buttons are rendered on form-select', t => { - const wrapper = setupFinishPostDonation() - t.is(wrapper.find('button').length, 2) -}) - -test('default value for select its the same of donation configuration option', t => { - const wrapper = setupFinishPostDonation() - t.is(wrapper.find('select[value="3"]').length, 1) -}) - -test('selecting an option changes component state', t => { - const wrapper = setupFinishPostDonation().find(FinishPostDonation) - wrapper.find('select').invoke('onChange')({currentTarget: {value: '2'}}) - t.is(wrapper.state('value'), 2) -}) - -test('donate submit button call onSubmit with default selected value', t => { - const wrapper = setupFinishPostDonation() - wrapper.find('#donate-btn').simulate('click') - t.true(props.onClickDonation.calledWith('3')) -}) - -test('donate submit button call onSubmit with undefined value', t => { - const wrapper = setupFinishPostDonation() - wrapper.find('#donate-btn').simulate('click') - t.true(props.onClickDonation.calledWith('3')) -}) \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/index.js b/clients/libs/webpage/src/lib/plugins/donation/components/index.js deleted file mode 100644 index dbef0dca7e..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as Progress } from './progress' -export { default as TellAFriend } from './tell-a-friend' -export { default as FinishPostDonation } from './finish-post-donation' \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/progress.js b/clients/libs/webpage/src/lib/plugins/donation/components/progress.js deleted file mode 100644 index 229c855a00..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/progress.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import tinycolor from 'tinycolor2' -import { numberUtils } from '../utils' - -if (require('exenv').canUseDOM) require('./progress.scss') - -const colorStrategy = color => tinycolor(color).isDark() ? '#FFFFFF' : '#333333' - -const Progress = ({ - className, - value, - max, - valueTopLeft, - valueTopCenter, - valueTopRight, - valueBottomLeft, - valueBottomCenter, - valueBottomRight, - fillColor -}) => ( -
-
- {valueTopLeft &&
{valueTopLeft}
} - {valueTopCenter &&
{valueTopCenter}
} - {valueTopRight &&
{valueTopRight}
} -
- -
-
100 ? 100 : value}%` - }} - > - {value > 5 && ( - - {numberUtils.number(value).split(',')[0]}% - - )} -
-
- -
- {valueBottomLeft &&
{valueBottomLeft}
} - {valueBottomCenter &&
{valueBottomCenter}
} - {valueBottomRight &&
{valueBottomRight}
} -
-
-) - -Progress.propTypes = { - className: PropTypes.string, - value: PropTypes.number, - max: PropTypes.number, - valueTopLeft: PropTypes.node, - valueTopRight: PropTypes.node, - valueTopCenter: PropTypes.node, - valueBottomLeft: PropTypes.node, - valueBottomRight: PropTypes.node, - valueBottomCenter: PropTypes.node, - fillColor: PropTypes.string -} - -Progress.defaultProps = { - max: 100, - value: 0, - fillColor: 'hsl(171, 100%, 41%)' -} - -export default Progress \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/progress.scss b/clients/libs/webpage/src/lib/plugins/donation/components/progress.scss deleted file mode 100644 index 6fe11bdce1..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/progress.scss +++ /dev/null @@ -1,170 +0,0 @@ -// Colors -$black: hsl(0, 0%, 4%); -$black-bis: hsl(0, 0%, 7%); -$black-ter: hsl(0, 0%, 14%); - -$grey-darker: hsl(0, 0%, 21%); -$grey-dark: hsl(0, 0%, 29%); -$grey: hsl(0, 0%, 48%); -$grey-light: hsl(0, 0%, 71%); -$grey-lighter: hsl(0, 0%, 86%); - -$white-ter: hsl(0, 0%, 96%); -$white-bis: hsl(0, 0%, 98%); -$white: hsl(0, 0%, 100%); - -$orange: hsl(14, 100%, 53%); -$yellow: hsl(48, 100%, 67%); -$green: hsl(141, 71%, 48%); -$turquoise: hsl(171, 100%, 41%); -$blue: hsl(217, 71%, 53%); -$purple: hsl(271, 100%, 71%); -$red: hsl(348, 100%, 61%); - -// Primary colors -$primary: $turquoise; - -$info: $blue; -$success: $green; -$warning: $yellow; -$danger: $red; - -$light: $white-ter; -$dark: $grey-darker; - -// Invert colors -$orange-invert: findColorInvert($orange); -$yellow-invert: findColorInvert($yellow); -$green-invert: findColorInvert($green); -$turquoise-invert: findColorInvert($turquoise); -$blue-invert: findColorInvert($blue); -$purple-invert: findColorInvert($purple); -$red-invert: findColorInvert($red); - -$primary-invert: $turquoise-invert; -$info-invert: $blue-invert; -$success-invert: $green-invert; -$warning-invert: $yellow-invert; -$danger-invert: $red-invert; -$light-invert: $dark; -$dark-invert: $light; - -// Sizes -$size-1: 3rem; -$size-2: 2.5rem; -$size-3: 2rem; -$size-4: 1.5rem; -$size-5: 1.25rem; -$size-6: 1rem; -$size-7: 0.75rem; - -$border: $grey-lighter; -$text: $grey-dark; - -$size-small: $size-7; -$size-normal: $size-6; -$size-medium: $size-5; -$size-large: $size-4; - -$progress-bar-background-color: $border; -$progress-value-background-color: $text; - -$colors: ( - "white": ($white, $black), - "black": ($black, $white), - "light": ($light, $light-invert), - "dark": ($dark, $dark-invert), - "primary": ($primary, $primary-invert), - "info": ($info, $info-invert), - "success": ($success, $success-invert), - "warning": ($warning, $warning-invert), - "danger": ($danger, $danger-invert) -); - -@mixin block() { - &:not(:last-child) { - margin-bottom: 1.5rem - } -} - -.progress-container { - color: #666; - font-size: 1rem; - line-height: 1rem; - - .progress { - @include block(); - border: none; - border-radius: 290486px; - display: block; - height: $size-normal; - overflow: hidden; - padding: 0; - width: 100%; - margin: 1rem 0 !important; - background-color: $progress-bar-background-color; - - .progress-value { - height: 100%; - display: flex; - justify-content: center; - align-items: center; - border-radius: 290486px; - - .percentage { - font-size: .65rem; - font-weight: bold; - } - - // Colors - @each $name, $pair in $colors { - $color: nth($pair, 1); - &.is-#{$name} { background-color: $color } - } - } - // Sizes - &.is-small { height: $size-small } - &.is-medium { height: $size-medium } - &.is-large { height: $size-large } - } - - .progress-top, .progress-bottom { - display: flex; - justify-content: space-between; - font-size: .8em; - } - - .progress-top > div, .progress-bottom > div { - flex-basis: 33.33%; - flex-shrink: 0; - } - - .progress-top-left:only-child, - .progress-top-center:only-child, - .progress-top-right:only-child { - flex-basis: 100%; - } - - .progress-top-left, .progress-bottom-left { text-align: left } - .progress-top-center, .progress-bottom-center { text-align: center } - .progress-top-right, .progress-bottom-right { text-align: right } - - - @media screen and (max-width: 831px) { - .progress { height: 25px } - .percentage { font-size: 1rem !important } - .progress-top > div, - .progress-bottom > div { - text-align: left; - margin: .5rem; - } - .progress-top { font-size: 1.25rem } - .progress-bottom { - font-size: 1.05rem; - flex-direction: column; - } - .progress-bottom-center { order: 1 } - .progress-bottom-left { order: 2 } - .progress-bottom-right { order: 3 } - } -} \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/components/tell-a-friend.js b/clients/libs/webpage/src/lib/plugins/donation/components/tell-a-friend.js deleted file mode 100644 index 680385d540..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/components/tell-a-friend.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { FormattedMessage } from 'react-intl' - -import { TellAFriendBase } from '../../../ux' - -const DonationTellAFriend = ({ preview, mobilization, widget, ...props }) => { - return ( - - } - {...props} - /> - ) -} - -DonationTellAFriend.propTypes = { - preview: PropTypes.bool, - mobilization: PropTypes.object.isRequired, - widget: PropTypes.object.isRequired -} - -export default DonationTellAFriend diff --git a/clients/libs/webpage/src/lib/plugins/donation/graphql/queries.js b/clients/libs/webpage/src/lib/plugins/donation/graphql/queries.js deleted file mode 100644 index dd6250c707..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/graphql/queries.js +++ /dev/null @@ -1,7 +0,0 @@ -import { gql } from 'react-apollo' - -export const fetchDonationGoalStats = gql` - query fetchDonationGoalStats($widgetId: Int!) { - data: getWidgetDonationStats(widgetId: $widgetId) - } -` diff --git a/clients/libs/webpage/src/lib/plugins/donation/images/donation-recurring.png b/clients/libs/webpage/src/lib/plugins/donation/images/donation-recurring.png deleted file mode 100755 index e264ddb608..0000000000 Binary files a/clients/libs/webpage/src/lib/plugins/donation/images/donation-recurring.png and /dev/null differ diff --git a/clients/libs/webpage/src/lib/plugins/donation/images/donation-unique.png b/clients/libs/webpage/src/lib/plugins/donation/images/donation-unique.png deleted file mode 100755 index a7263e28da..0000000000 Binary files a/clients/libs/webpage/src/lib/plugins/donation/images/donation-unique.png and /dev/null differ diff --git a/clients/libs/webpage/src/lib/plugins/donation/images/thin-circular-cross.svg b/clients/libs/webpage/src/lib/plugins/donation/images/thin-circular-cross.svg deleted file mode 100644 index 49315c1d21..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/images/thin-circular-cross.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/clients/libs/webpage/src/lib/plugins/donation/index.js b/clients/libs/webpage/src/lib/plugins/donation/index.js deleted file mode 100644 index 4afd5e98a4..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as DonationPlugin } from './plugin.connected' -export { default as DonationAnalytics } from './analytics' -export { default as DonationTellAFriend } from './components/tell-a-friend' \ No newline at end of file diff --git a/clients/libs/webpage/src/lib/plugins/donation/plugin.connected.js b/clients/libs/webpage/src/lib/plugins/donation/plugin.connected.js deleted file mode 100644 index 3655f41414..0000000000 --- a/clients/libs/webpage/src/lib/plugins/donation/plugin.connected.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Donation from './plugin' - -class DonationConnected extends React.Component { - constructor (props) { - super(props) - this.state = { - donationCustomerData: undefined - } - } - - handleTransactionCreate (values) { - const { - mobilization, - widget, - selectedValue, - selectedPaymentType, - storedDonationCustomerData - } = values - - return new Promise((resolve, reject) => { - const paymentType = widget.settings.payment_type - const recurringPeriod = widget.settings.recurring_period - const mainColor = widget.settings.main_color - ? widget.settings.main_color - : '#43a2cc' - - const checkout = new window.PagarMeCheckout.Checkout({ - encryption_key: this.props.pagarmeKey || 'setup env var', - success: (data) => { - data.subscription = paymentType === 'users_choice' - ? (selectedPaymentType !== 'unique') - : data.subscription = (paymentType !== 'unique') - - data.recurring_period = recurringPeriod - data.mobilization_id = mobilization.id - data.widget_id = widget.id - data.amount = widget.settings['donation_value' + selectedValue] + '00' - - return this.props.donationTransactionCreate(data) - .then((resp) => { - this.setState({ donationCustomerData: undefined }) - this.props.analyticsEvents.donationFinishRequest() - return resolve({ donation: resp.data }) - }) - .catch(failure => { - if (failure.config && failure.config.data) { - try { - const failureData = JSON.parse(failure.config.data) - this.setState({ donationCustomerData: failureData.donation.customer }) - } catch (error) { - console.error('Customer data is not parsable. Cannot store the customer data.') - console.error(error) - } - } else { - console.error(failure) - } - }) - }, - error: (err) => { - console.error(err) - return reject() - } - }) - - let customerData = {} - if (storedDonationCustomerData) { - const d = storedDonationCustomerData - - // reference: https://docs.pagar.me/v2017-07-17/docs/inserindo-o-formulario - customerData.customerName = d.name - customerData.customerDocumentNumber = d.document_number - customerData.customerEmail = d.email - customerData.customerPhoneDdd = d.phone.ddd - customerData.customerPhoneNumber = d.phone.number - customerData.customerAddressZipcode = d.address.zipcode - customerData.customerAddressStreet = d.address.street - customerData.customerAddressStreetNumber = d.address.street_number - customerData.customerAddressComplementary = d.address.complementary - customerData.customerAddressNeighborhood = d.address.neighborhood - customerData.customerAddressCity = d.address.city - customerData.customerAddressState = d.address.state - } - - const params = { - createToken: 'false', - amount: widget.settings['donation_value' + selectedValue] + '00', - customerData: 'true', - paymentMethods: widget.settings.payment_methods === 'true' ? 'credit_card,boleto' : 'credit_card', - uiColor: mainColor, - paymentButtonText: widget.settings.button_text, - ...customerData - } - - this.props.analyticsEvents.donationSetValue() - - checkout.open(params) - }) - } - - render () { - return ( - - ) - } -} - -DonationConnected.propTypes = { - pagarmeKey: PropTypes.string.isRequired -} - -export default DonationConnected - -/* TOOD: script inserted on top level for rendering, but need thing a better solution -// eslint-disable-next-line -const pagarmeScript = `(function(i,s,o,g,r,a,m){i['PagarMeCheckoutObject']=r;i[r]=i[r]||function(){(i[].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://assets.pagar.me/checkout/checkout.js','PagarMeCheckout');` -