Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Commit

Permalink
Feature/show one off button alone (#1662)
Browse files Browse the repository at this point in the history 
* Display only one off donation button when akid and source params are set
  • Loading branch information
@shivashankar-f22labs
shivashankar-f22labs committed Apr 23, 2020
1 parent 81fca66 commit 7de61ac
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 144 deletions.
152 changes: 82 additions & 70 deletions app/javascript/components/ExpressDonation/ExpressDonation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import PaymentMethodWrapper from './PaymentMethodWrapper';
import PaymentMethodItem from './PaymentMethod';
import { setRecurring } from '../../state/fundraiser/actions';
import CurrencyAmount from '../CurrencyAmount';
import ShowIf from '../ShowIf';

import Popup from 'reactjs-popup';
import Button from '../../components/Button/Button';
Expand All @@ -30,10 +31,11 @@ export class ExpressDonation extends Component {
: null,
submitting: false,
openPopup: false,
onlyRecurring: props.fundraiser.recurringDefault === 'only_recurring',
recurringDonar:
window.champaign.personalization.member?.donor_status ==
'recurring_donor',
recurringDonar: false,
recurringDefault: '',
onlyRecurring: false,
akid: '',
source: '',
optForRedonation: false,
failureReason: '',
};
Expand Down Expand Up @@ -104,7 +106,6 @@ export class ExpressDonation extends Component {

submit() {
const data = this.oneClickData();
console.log('recurringDonar', this.state.recurringDonar);

if (data) {
if (data.allow_duplicate == false) delete data.allow_duplicate;
Expand Down Expand Up @@ -174,6 +175,50 @@ export class ExpressDonation extends Component {
);
}

showMonthlyButton() {
let keys = ['recurring', 'only_recurring'];
// recurring donor
if (this.state.recurringDonar) {
return false;
}
// non recurring donors
if (
this.state.source == 'fwd' &&
this.state.akid &&
this.state.akid.length > 5 &&
!keys.includes(this.state.recurringDefault)
) {
return false;
}
return true;
}

showOneOffButton() {
// recurring donor
if (this.state.recurringDonar) {
return true;
}

// non recurring donors
if (this.state.onlyRecurring) {
return false;
}
return true;
}

componentDidMount() {
const urlInfo = window.champaign.personalization.urlParams;
const donor_status = window.champaign.personalization.member.donor_status;

this.setState({
recurringDonar: donor_status == 'recurring_donor',
akid: urlInfo.akid,
source: urlInfo.source,
recurringDefault: urlInfo.recurring_default,
onlyRecurring: urlInfo.recurring_default == 'only_recurring',
});
}

render() {
if (!this.props.paymentMethods.length || this.props.hidden) return null;

Expand All @@ -193,7 +238,6 @@ export class ExpressDonation extends Component {
/>
</a>
</div>

{/* <Checkbox
className="ExpressDonation__recurring-checkbox"
disabled={this.props.fundraiser.recurringDefault === 'only_recurring'}
Expand All @@ -205,10 +249,9 @@ export class ExpressDonation extends Component {
defaultMessage="Make my donation monthly"
/>
</Checkbox> */}

<div className="payment-message">
<br />
{!this.state.recurringDonar && (
{this.showMonthlyButton() && (
<FormattedMessage
id={'fundraiser.make_monthly_donation'}
defaultMessage={`{name} a monthly donation will support our movement to plan ahead, so we can more effectively take on the biggest corporations that threaten people and planet.`}
Expand Down Expand Up @@ -254,68 +297,37 @@ export class ExpressDonation extends Component {
</div>
)} */}
</div>

{this.state.recurringDonar && (
<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
name="one_time"
recurring={false}
submitting={this.state.submitting}
recurringDonar={true}
disabled={!this.state.currentPaymentMethod || this.state.submitting}
onClick={e => this.onClickHandle(e)}
/>
)}

{!this.state.recurringDonar && (
<>
{this.state.onlyRecurring && (
<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
recurring={true}
name="recurring"
recurringDonar={false}
submitting={this.state.submitting}
disabled={
!this.state.currentPaymentMethod || this.state.submitting
}
onClick={e => this.onClickHandle(e)}
/>
)}

{!this.state.onlyRecurring && (
<>
<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
recurring={true}
name="recurring"
recurringDonar={false}
submitting={this.state.submitting}
disabled={
!this.state.currentPaymentMethod || this.state.submitting
}
onClick={e => this.onClickHandle(e)}
/>

<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
name="one_time"
recurring={false}
submitting={this.state.submitting}
recurringDonar={false}
disabled={
!this.state.currentPaymentMethod || this.state.submitting
}
onClick={e => this.onClickHandle(e)}
/>
</>
)}
</>
)}
<>
<ShowIf condition={this.showMonthlyButton()}>
<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
recurring={true}
name="recurring"
recurringDonar={this.state.recurringDonar}
submitting={this.state.submitting}
disabled={
!this.state.currentPaymentMethod || this.state.submitting
}
onClick={e => this.onClickHandle(e)}
/>
</ShowIf>

<ShowIf condition={this.showOneOffButton()}>
<DonateButton
currency={this.props.fundraiser.currency}
amount={this.props.fundraiser.donationAmount || 0}
name="one_time"
recurring={false}
submitting={this.state.submitting}
recurringDonar={this.state.recurringDonar}
disabled={
!this.state.currentPaymentMethod || this.state.submitting
}
onClick={e => this.onClickHandle(e)}
/>
</ShowIf>
</>

<Popup
open={this.state.openPopup}
Expand Down

0 comments on commit 7de61ac

Please sign in to comment.