Add public testimony input (#409)

* fix: default color does not work * feat: Add public testimony feature to donation widget * feat: Update donation amount input value handling
everydotorg · Aug 5, 2024 · 95e0ba3 · 95e0ba3
1 parent 6c8291f
commit 95e0ba3
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 3 deletions.
diff --git a/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/CryptoFlow/index.tsx b/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/CryptoFlow/index.tsx
@@ -7,6 +7,7 @@ import {
 	SmallPaymentMethodSelect
 } from 'src/components/widget/components/PaymentProcess/PaymentMethodSelect';
 import {PrivateNote} from 'src/components/widget/components/PaymentProcess/PrivateNote';
+import {PublicTestimony} from 'src/components/widget/components/PaymentProcess/PublicTestimony';
 import {RedirectNotice} from 'src/components/widget/components/PaymentProcess/RedirectNotice';
 import {SubmitButton} from 'src/components/widget/components/PaymentProcess/SubmitButton';
 import {
@@ -57,6 +58,7 @@ export const CryptoFlow = () => {
 					)}
 				</fieldset>
 				<PrivateNote />
+				<PublicTestimony />
 				<ErrorMessage message={submitError} />
 				<SubmitButton disabled={!cryptoAmount || !cryptoCurrency}>
 					{getSubmitButtonText({method: PaymentMethod.CRYPTO, cryptoCurrency})}

diff --git a/...button-v4/src/components/widget/components/PaymentProcess/DafFlow/Views/DafAmountView.tsx b/...button-v4/src/components/widget/components/PaymentProcess/DafFlow/Views/DafAmountView.tsx
@@ -7,6 +7,7 @@ import {
 import {DonationAmount} from 'src/components/widget/components/PaymentProcess/DonationAmount';
 import {Frequency} from 'src/components/widget/components/PaymentProcess/Frequency';
 import {PrivateNote} from 'src/components/widget/components/PaymentProcess/PrivateNote';
+import {PublicTestimony} from 'src/components/widget/components/PaymentProcess/PublicTestimony';
 import {RedirectNotice} from 'src/components/widget/components/PaymentProcess/RedirectNotice';
 import {SubmitButton} from 'src/components/widget/components/PaymentProcess/SubmitButton';
 import {
@@ -34,6 +35,7 @@ export const DafAmountView = ({changeView}: DafFlowViewProps) => {
 				<Frequency />
 				<DonationAmount />
 				<PrivateNote />
+				<PublicTestimony />
 				<ErrorMessage message={submitError} />
 				<SubmitButton
 					disabled={!donationAmount || Number.isNaN(donationAmount)}

diff --git a/...es/donate-button-v4/src/components/widget/components/PaymentProcess/DefaultFlow/index.tsx b/...es/donate-button-v4/src/components/widget/components/PaymentProcess/DefaultFlow/index.tsx
@@ -6,6 +6,7 @@ import {
 	SmallPaymentMethodSelect
 } from 'src/components/widget/components/PaymentProcess/PaymentMethodSelect';
 import {PrivateNote} from 'src/components/widget/components/PaymentProcess/PrivateNote';
+import {PublicTestimony} from 'src/components/widget/components/PaymentProcess/PublicTestimony';
 import {RedirectNotice} from 'src/components/widget/components/PaymentProcess/RedirectNotice';
 import {SubmitButton} from 'src/components/widget/components/PaymentProcess/SubmitButton';
 import {
@@ -43,6 +44,7 @@ export const DefaultFlow = () => {
 					<DonationAmount />
 				</div>
 				<PrivateNote />
+				<PublicTestimony />
 				<ErrorMessage message={submitError} />
 				<SubmitButton
 					disabled={

diff --git a/...donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx b/...donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx
@@ -104,7 +104,7 @@ export const DonationAmount = () => {
 				inputMode="numeric"
 				min={0}
 				step={1}
-				value={donationAmount ? donationAmount : undefined}
+				value={donationAmount ? donationAmount : ''}
 				prefix={DEFAULT_CURRENCY.symbol}
 				inputClassName={donationAmountInputCss}
 				prefixClassName={donationAmountInputPrefixCss}

diff --git a/...onate-button-v4/src/components/widget/components/PaymentProcess/PublicTestimony/index.tsx b/...onate-button-v4/src/components/widget/components/PaymentProcess/PublicTestimony/index.tsx
@@ -0,0 +1,52 @@
+import cxs from 'cxs';
+import {useState} from 'preact/hooks';
+import {Checkbox} from 'src/components/widget/components/Checkbox';
+import {
+	fieldSetCss,
+	legendCss
+} from 'src/components/widget/components/PaymentProcess/styles';
+import {TextArea} from 'src/components/widget/components/TextInput';
+import {useNonprofitOrError} from 'src/components/widget/hooks/useNonprofit';
+import {useWidgetContext} from 'src/components/widget/hooks/useWidgetContext';
+import {verticalStackCss, Spacing} from 'src/components/widget/theme/spacing';
+
+export const PublicTestimony = () => {
+	const nonprofit = useNonprofitOrError();
+
+	const {publicTestimony, setPublicTestimony} = useWidgetContext();
+	const [showPublicTestimonyField, setShowPublicTestimonyField] = useState(
+		Boolean(publicTestimony)
+	);
+
+	return (
+		<div className={verticalStackCss.className(Spacing.L)}>
+			<Checkbox
+				checked={showPublicTestimonyField}
+				onChange={() => {
+					setShowPublicTestimonyField((previous) => !previous);
+				}}
+			>
+				Add public testimony
+			</Checkbox>
+			{showPublicTestimonyField && (
+				<fieldset
+					className={cxs({fieldSetCss, ...verticalStackCss.cxs(Spacing.XS)})}
+				>
+					<legend className={legendCss}>
+						Help {nonprofit.name} by sharing why you support them with the world
+					</legend>
+					<TextArea
+						rows={3}
+						label="Note"
+						id="publicTestimony"
+						value={publicTestimony}
+						inputClassName={cxs({resize: 'none'})}
+						onChange={({currentTarget}) => {
+							setPublicTestimony(currentTarget.value);
+						}}
+					/>
+				</fieldset>
+			)}
+		</div>
+	);
+};
diff --git a/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/StocksFlow/index.tsx b/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/StocksFlow/index.tsx
@@ -9,6 +9,7 @@ import {
 	SmallPaymentMethodSelect
 } from 'src/components/widget/components/PaymentProcess/PaymentMethodSelect';
 import {PrivateNote} from 'src/components/widget/components/PaymentProcess/PrivateNote';
+import {PublicTestimony} from 'src/components/widget/components/PaymentProcess/PublicTestimony';
 import {RedirectNotice} from 'src/components/widget/components/PaymentProcess/RedirectNotice';
 import {SubmitButton} from 'src/components/widget/components/PaymentProcess/SubmitButton';
 import {
@@ -90,6 +91,7 @@ export const StocksFlow = () => {
 					</div>
 				</fieldset>
 				<PrivateNote />
+				<PublicTestimony />
 				<ErrorMessage message={submitError} />
 				<SubmitButton disabled={!stockAmount || !stockSymbol}>
 					{getSubmitButtonText({method: PaymentMethod.STOCKS})}

diff --git a/packages/donate-button-v4/src/components/widget/context/WidgetContext.tsx b/packages/donate-button-v4/src/components/widget/context/WidgetContext.tsx
@@ -40,6 +40,9 @@ interface WidgetContextProps {
 	privateNote?: string;
 	setPrivateNote: StateUpdater<string | undefined>;
 
+	publicTestimony?: string;
+	setPublicTestimony: StateUpdater<string | undefined>;
+
 	giftCardCode?: string;
 	setGiftCardCode: StateUpdater<string | undefined>;
 }
@@ -58,6 +61,11 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 	const [donationAmount, setDonationAmount] = useState(
 		config.amount ?? config.defaultDonationAmount
 	);
+
+	useEffect(() => {
+		setDonationAmount(config.amount);
+	}, [config.amount]);
+
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
 		config.methods[0]
@@ -78,6 +86,7 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 	const paymentRequestAvailable = useCheckPaymentRequest();
 
 	const [privateNote, setPrivateNote] = useState<string>();
+	const [publicTestimony, setPublicTestimony] = useState<string>();
 
 	const [giftCardCode, setGiftCardCode] = useState<string>();
 
@@ -104,6 +113,8 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 				paymentRequestAvailable,
 				privateNote,
 				setPrivateNote,
+				publicTestimony,
+				setPublicTestimony,
 				giftCardCode,
 				setGiftCardCode
 			}}

diff --git a/packages/donate-button-v4/src/components/widget/hooks/useSubmitDonation.ts b/packages/donate-button-v4/src/components/widget/hooks/useSubmitDonation.ts
@@ -29,6 +29,7 @@ export const useSubmitDonation = () => {
 		cryptoAmount,
 		cryptoCurrency,
 		privateNote,
+		publicTestimony,
 		giftCardCode
 	} = useWidgetContext();
 	const {minDonationAmount, webhookToken, redeemGiftCardInFlow} =
@@ -46,6 +47,7 @@ export const useSubmitDonation = () => {
 				fundraiserSlug: config.fundraiserSlug,
 				utmSource: config.utmSource,
 				privateNote,
+				publicTestimony,
 				webhookToken
 			};
 			switch (selectedPaymentMethod) {
@@ -123,6 +125,7 @@ export const useSubmitDonation = () => {
 			cryptoAmount,
 			cryptoCurrency,
 			privateNote,
+			publicTestimony,
 			giftCardCode,
 			webhookToken,
 			redeemGiftCardInFlow

diff --git a/packages/donate-button-v4/src/helpers/constructDonateUrl.ts b/packages/donate-button-v4/src/helpers/constructDonateUrl.ts
@@ -16,6 +16,7 @@ interface BaseUrlParams {
 	noExit?: boolean;
 	methods?: PaymentMethod[];
 	privateNote?: string;
+	publicTestimony?: string;
 	utmSource?: string;
 	webhookToken?: string;
 }
@@ -67,6 +68,7 @@ function getBaseParams({
 	nonprofitSlug,
 	noExit,
 	privateNote,
+	publicTestimony,
 	utmSource,
 	webhookToken
 }: Pick<
@@ -75,6 +77,7 @@ function getBaseParams({
 	| 'methods'
 	| 'noExit'
 	| 'privateNote'
+	| 'publicTestimony'
 	| 'utmSource'
 	| 'webhookToken'
 >) {
@@ -85,6 +88,7 @@ function getBaseParams({
 		utm_medium: UTM_MEDIUM,
 		no_exit: noExit ?? 1,
 		private_note: privateNote,
+		public_testimony: publicTestimony,
 		webhook_token: webhookToken
 	};
 }

diff --git a/packages/donate-button-v4/src/helpers/parseDonateUrl.ts b/packages/donate-button-v4/src/helpers/parseDonateUrl.ts
@@ -52,6 +52,12 @@ function intFromString(string?: string | null) {
 	return Number.isNaN(number) ? undefined : number;
 }
 
+function removeEmptyValues<T extends Record<string, unknown>>(object: T): T {
+	return Object.fromEntries(
+		Object.entries(object).filter(([, value]) => value !== undefined)
+	) as T;
+}
+
 export function parseDonateUrl(
 	urlString: string
 ): (Partial<WidgetConfig> & {nonprofitSlug: string}) | undefined {
@@ -88,7 +94,7 @@ export function parseDonateUrl(
 		return;
 	}
 
-	return {
+	return removeEmptyValues({
 		fundraiserSlug,
 		nonprofitSlug,
 		frequency,
@@ -101,5 +107,5 @@ export function parseDonateUrl(
 		defaultDonationAmount: amount,
 		minDonationAmount: minAmount,
 		primaryColor
-	};
+	});
 }