Skip to content

Commit 2a2b18b

Browse files
AndyEPhippsAndyEPhipps
authored
feat: allow Donate widget manual input fields to be overridden (#563)
* feat: allow Donate widget manual input fields to be overridden * Only update value when actually passed * Add new test * Missing newline
1 parent 7331fbf commit 2a2b18b

5 files changed

Lines changed: 803 additions & 15 deletions

File tree

‎src/components/Organisms/Donate/Donate.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { useMediaQuery } from 'react-responsive';
33
import PropTypes from 'prop-types';
44

@@ -39,15 +39,16 @@ const Donate = ({
3939
noMoneyBuys,
4040
PopUpText,
4141
chooseAmountText,
42-
isDesktopOverride
42+
isDesktopOverride,
43+
otherAmountValue
4344
}) => {
4445
let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
4546

4647
// To let us store any updated override, and force a re-render
4748
const [overrideValue, setOverrideValue] = useState(null);
4849

4950
// Store the updated override value
50-
React.useEffect(() => {
51+
useEffect(() => {
5152
setOverrideValue(isDesktopOverride);
5253
}, [isDesktopOverride]);
5354

@@ -122,6 +123,7 @@ const Donate = ({
122123
PopUpText={PopUpText}
123124
chooseAmountText={chooseAmountText}
124125
submitButtonColor={submitButtonColor}
126+
otherAmountValue={otherAmountValue}
125127
/>
126128
</Wrapper>
127129
</Container>
@@ -153,7 +155,8 @@ Donate.propTypes = {
153155
noMoneyBuys: PropTypes.bool,
154156
PopUpText: PropTypes.string,
155157
chooseAmountText: PropTypes.string,
156-
isDesktopOverride: PropTypes.bool
158+
isDesktopOverride: PropTypes.bool,
159+
otherAmountValue: PropTypes.number
157160
};
158161

159162
Donate.defaultProps = {
@@ -178,7 +181,8 @@ Donate.defaultProps = {
178181
noMoneyBuys: false,
179182
PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
180183
chooseAmountText: '',
181-
isDesktopOverride: null
184+
isDesktopOverride: null,
185+
otherAmountValue: null
182186
};
183187

184188
export default Donate;

‎src/components/Organisms/Donate/Donate.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,102 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
103103
/>;
104104
```
105105

106+
## Single Giving "No Money Buys" with overridden manual input value
107+
108+
```js
109+
import data from './dev-data/data-single';
110+
const mobilePictures = require('../../../styleguide/data/data').mobileImages;
111+
const desktopPictures = require('../../../styleguide/data/data').defaultData;
112+
import { useState } from 'react';
113+
114+
// Simulating default state of a parent componenet
115+
const [amountDonate, setAmountDonate] = useState(123.45);
116+
117+
// Simulating state update of a parent componenet
118+
setTimeout(()=>{
119+
setAmountDonate(567.89);
120+
}, 3000);
121+
122+
<Donate
123+
mobileBackgroundColor="blue_dark"
124+
desktopOverlayColor="blue_dark"
125+
formAlignRight={false}
126+
imageLow={desktopPictures.imageLow}
127+
images={desktopPictures.images}
128+
mobileImageLow={mobilePictures.imageLow}
129+
mobileImages={mobilePictures.images}
130+
data={data}
131+
mbshipID="mship-4"
132+
donateLink="https://donation.comicrelief.com/"
133+
clientID="donate"
134+
cartID="default-comicrelief"
135+
title="Donate Now"
136+
noMoneyBuys
137+
subtitle="Please help us fund life-changing projects in the UK and around the world."
138+
otherAmountValue={amountDonate}
139+
/>;
140+
```
141+
142+
## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button, with overridden manual input value
143+
144+
```js
145+
import data from './dev-data/data';
146+
const mobilePictures = require('../../../styleguide/data/data').mobileImages;
147+
const desktopPictures = require('../../../styleguide/data/data').defaultData;
148+
import { useState } from 'react';
149+
150+
// Simulating default state of a parent componenet
151+
const [amountDonate, setAmountDonate] = useState(111.22);
152+
153+
// Simulating state update of a parent componenet
154+
setTimeout(()=>{
155+
setAmountDonate(333.44);
156+
}, 3000);
157+
158+
<Donate
159+
alt="Background image"
160+
formAlignRight={true}
161+
imageLow={desktopPictures.imageLow}
162+
images={desktopPictures.images}
163+
mobileImageLow={mobilePictures.imageLow}
164+
mobileImages={mobilePictures.images}
165+
data={data}
166+
mbshipID="mship-1"
167+
donateLink="https://donation.comicrelief.com/"
168+
clientID="donate"
169+
cartID="default-comicrelief"
170+
title="Donate Now"
171+
subtitle="Please help us fund life-changing projects in the UK and around the world."
172+
otherAmountValue={amountDonate}
173+
/>;
174+
```
175+
176+
## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
177+
```js
178+
import data from './dev-data/data-high-value';
179+
const mobilePictures = require('../../../styleguide/data/data').mobileImages;
180+
const desktopPictures = require('../../../styleguide/data/data').defaultData;
181+
182+
<Donate
183+
mobileBackgroundColor="blue_dark"
184+
desktopOverlayColor="blue_dark"
185+
formAlignRight={false}
186+
imageLow={desktopPictures.imageLow}
187+
images={desktopPictures.images}
188+
mobileImageLow={mobilePictures.imageLow}
189+
mobileImages={mobilePictures.images}
190+
data={data}
191+
mbshipID="mship-2"
192+
donateLink="https://donation.comicrelief.com/"
193+
clientID="donate"
194+
cartID="default-comicrelief"
195+
title="Donate Now"
196+
subtitle="Please help us fund life-changing projects in the UK and around the world."
197+
otherAmountText="Overridden via the 'Other amount text' prop"
198+
/>;
199+
```
200+
201+
106202
## Form align right - no subtitle
107203

108204
```js

‎src/components/Organisms/Donate/Donate.test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,26 @@ it('Single donation with no Money Buys renders correctly', () => {
7272

7373
expect(tree).toMatchSnapshot();
7474
});
75+
76+
it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', () => {
77+
const tree = renderWithTheme(
78+
<Donate
79+
mobileBackgroundColor="blue_dark"
80+
desktopOverlayColor="blue_dark"
81+
formAlignRight={false}
82+
imageLow={defaultData.pictures.imageLow}
83+
images={defaultData.pictures.images}
84+
data={data}
85+
mbshipID="mship-4"
86+
donateLink="https://donation.comicrelief.com/"
87+
clientID="donate"
88+
cartID="default-comicrelief"
89+
title="Donate Now"
90+
noMoneyBuys
91+
subtitle="Please help us fund life-changing projects in the UK and around the world."
92+
otherAmountValue={345.67}
93+
/>
94+
).toJSON();
95+
96+
expect(tree).toMatchSnapshot();
97+
});

‎src/components/Organisms/Donate/Form/Form.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const Signup = ({
3535
PopUpText,
3636
chooseAmountText,
3737
submitButtonColor,
38+
otherAmountValue,
3839
...rest
3940
}) => {
4041
const [givingType, setGivingType] = useState('single');
@@ -46,17 +47,23 @@ const Signup = ({
4647
const [popUpShown, setPopUpShown] = useState(false);
4748

4849
useEffect(() => {
49-
const givingData = givingType === 'single' ? singleGiving : regularGiving;
50+
// If a specific 'other amount' has been passed down, use it,
51+
// otherwise assign based on the associated moneybuys:
52+
if (otherAmountValue) {
53+
setAmountDonate(parseFloat(otherAmountValue));
54+
} else {
55+
const givingData = givingType === 'single' ? singleGiving : regularGiving;
5056

51-
// Check the 2nd moneybuy exists before using it;
52-
// 'philantrophy' carts have been set up to use a single moneybuy.
53-
// See ENG-1685 for more details
54-
const thisAmount = givingData.moneybuys[1]
55-
? givingData.moneybuys[1].value
56-
: givingData.moneybuys[0].value;
57+
// Check the 2nd moneybuy exists before using it;
58+
// 'philantrophy' carts have been set up to use a single moneybuy.
59+
// See ENG-1685 for more details
60+
const thisAmount = givingData.moneybuys[1]
61+
? givingData.moneybuys[1].value
62+
: givingData.moneybuys[0].value;
5763

58-
setAmountDonate(parseFloat(thisAmount));
59-
}, [givingType, singleGiving, regularGiving]);
64+
setAmountDonate(parseFloat(thisAmount));
65+
}
66+
}, [givingType, singleGiving, regularGiving, otherAmountValue]);
6067

6168
useEffect(() => {
6269
const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -124,6 +131,13 @@ const Signup = ({
124131
}
125132
};
126133

134+
// Update the local state if the prop has been set and changed
135+
useEffect(() => {
136+
if (otherAmountValue) {
137+
setAmountDonate(parseFloat(otherAmountValue));
138+
}
139+
}, [otherAmountValue, setAmountDonate]);
140+
127141
// Create money buy boxes
128142
const givingData = givingType === 'single' ? singleGiving : regularGiving;
129143
const showGivingSelector = singleGiving !== null && regularGiving !== null;
@@ -239,7 +253,8 @@ Signup.propTypes = {
239253
data: PropTypes.objectOf(PropTypes.shape),
240254
PopUpText: PropTypes.string.isRequired,
241255
chooseAmountText: PropTypes.string.isRequired,
242-
submitButtonColor: PropTypes.string.isRequired
256+
submitButtonColor: PropTypes.string.isRequired,
257+
otherAmountValue: PropTypes.number.isRequired
243258
};
244259

245260
Signup.defaultProps = {

0 commit comments

Comments
 (0)