Add webhook_token, update gift card redemption (#399)

* Update Gift Card Redemption

* Update README.md

README.md

@@ -149,6 +149,10 @@ The `createWidget` function accepts an object with the following properties:
      * @default false
      */
     showGiftCardOption?: boolean;
+    /**
+     * Partner webhook token
+     */
+    webhookToken?: string;
   }
 ```
 

packages/donate-button-v4/src/components/widget/components/PaymentProcess/GiftCardFlow/index.tsx

@@ -1,3 +1,4 @@
+import cxs from 'cxs';
 import {giftCardIconCss} from 'src/components/widget/components/PaymentProcess/GiftCardFlow/styles';
 import {
 	LargePaymentMethodSelect,
@@ -9,13 +10,19 @@ import {
 	formCss,
 	formContainerCss
 } from 'src/components/widget/components/PaymentProcess/styles';
+import {TextInput} from 'src/components/widget/components/TextInput';
+import {useConfigContext} from 'src/components/widget/hooks/useConfigContext';
 import {useSubmitDonation} from 'src/components/widget/hooks/useSubmitDonation';
+import {useWidgetContext} from 'src/components/widget/hooks/useWidgetContext';
 import {GiftIcon} from 'src/components/widget/icons/GiftIcon';
+import {textSize} from 'src/components/widget/theme/font-sizes';
 import {PaymentMethod} from 'src/components/widget/types/PaymentMethod';
 import {getSubmitButtonText} from 'src/helpers/getSubmitButtonText';
 
 export const GiftCardFlow = () => {
 	const submitDonation = useSubmitDonation();
+	const {redeemGiftCardInFlow} = useConfigContext();
+	const {giftCardCode, setGiftCardCode} = useWidgetContext();
 
 	return (
 		<form className={formCss} onSubmit={submitDonation}>
@@ -24,6 +31,16 @@ export const GiftCardFlow = () => {
 				<SmallPaymentMethodSelect />
 				<GiftIcon className={giftCardIconCss} />
 				<p>Redeem a gift card to add donation credits to your account.</p>
+				{redeemGiftCardInFlow && (
+					<TextInput
+						id="gift-card-code-input"
+						type="text"
+						value={giftCardCode}
+						onInput={(event) => {
+							setGiftCardCode(event.currentTarget.value);
+						}}
+					/>
+				)}
 				<SubmitButton>
 					{getSubmitButtonText({method: PaymentMethod.GIFT_CARD})}
 				</SubmitButton>
@@ -32,3 +49,9 @@ export const GiftCardFlow = () => {
 		</form>
 	);
 };
+
+export const giftCardCodeInputCss = cxs({
+	fontSize: textSize.l.fontSize,
+	lineHeight: textSize.l.fontSize,
+	fontWeight: 700
+});

packages/donate-button-v4/src/components/widget/context/WidgetContext.tsx

@@ -39,6 +39,9 @@ interface WidgetContextProps {
 
 	privateNote?: string;
 	setPrivateNote: StateUpdater<string | undefined>;
+
+	giftCardCode?: string;
+	setGiftCardCode: StateUpdater<string | undefined>;
 }
 
 export const WidgetContext = createContext<WidgetContextProps>(
@@ -70,6 +73,8 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 
 	const [privateNote, setPrivateNote] = useState<string>();
 
+	const [giftCardCode, setGiftCardCode] = useState<string>();
+
 	return (
 		<WidgetContext.Provider
 			value={{
@@ -92,7 +97,9 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 				setCryptoCurrency,
 				paymentRequestAvailable,
 				privateNote,
-				setPrivateNote
+				setPrivateNote,
+				giftCardCode,
+				setGiftCardCode
 			}}
 		>
 			{children}

packages/donate-button-v4/src/components/widget/hooks/useSubmitDonation.ts

@@ -4,6 +4,7 @@ import {useConfigContext} from 'src/components/widget/hooks/useConfigContext';
 import {useWidgetContext} from 'src/components/widget/hooks/useWidgetContext';
 import {DonationFrequency} from 'src/components/widget/types/DonationFrequency';
 import {
+	AvailablePaymentMethods,
 	OneTimeFrequencyMethods,
 	PaymentMethod
 } from 'src/components/widget/types/PaymentMethod';
@@ -27,9 +28,11 @@ export const useSubmitDonation = () => {
 		stockSymbol,
 		cryptoAmount,
 		cryptoCurrency,
-		privateNote
+		privateNote,
+		giftCardCode
 	} = useWidgetContext();
-	const {minDonationAmount} = useConfigContext();
+	const {minDonationAmount, webhookToken, redeemGiftCardInFlow} =
+		useConfigContext();
 
 	const submitDonation = useCallback(
 		(event: JSXInternal.TargetedEvent<HTMLFormElement>) => {
@@ -42,7 +45,8 @@ export const useSubmitDonation = () => {
 				nonprofitSlug: config.nonprofitSlug,
 				fundraiserSlug: config.fundraiserSlug,
 				utmSource: config.utmSource,
-				privateNote
+				privateNote,
+				webhookToken
 			};
 			switch (selectedPaymentMethod) {
 				case PaymentMethod.CRYPTO:
@@ -76,7 +80,15 @@ export const useSubmitDonation = () => {
 					);
 					break;
 				case PaymentMethod.GIFT_CARD:
-					window.open(constructGiftCardUrl(config.nonprofitSlug), target);
+					window.open(
+						constructGiftCardUrl({
+							redeemGiftCardInFlow,
+							giftCardCode,
+							...baseParameters,
+							methods: undefined
+						}),
+						target
+					);
 					break;
 				default:
 					if (!donationAmount || donationAmount < minDonationAmount) {
@@ -110,7 +122,10 @@ export const useSubmitDonation = () => {
 			stockSymbol,
 			cryptoAmount,
 			cryptoCurrency,
-			privateNote
+			privateNote,
+			giftCardCode,
+			webhookToken,
+			redeemGiftCardInFlow
 		]
 	);
 

packages/donate-button-v4/src/components/widget/types/WidgetConfig.ts

@@ -33,4 +33,8 @@ export interface WidgetConfig {
 	showGiftCardOption?: boolean;
 
 	utmSource?: string;
+
+	webhookToken?: string;
+
+	redeemGiftCardInFlow?: boolean;
 }

packages/donate-button-v4/src/helpers/constructDonateUrl.ts

@@ -1,6 +1,9 @@
 /* eslint-disable unicorn/prevent-abbreviations */
 import {DonationFrequency} from 'src/components/widget/types/DonationFrequency';
-import {PaymentMethod} from 'src/components/widget/types/PaymentMethod';
+import {
+	AvailablePaymentMethods,
+	PaymentMethod
+} from 'src/components/widget/types/PaymentMethod';
 import {BASE_URL, GIFT_CARD_URL} from 'src/constants/url';
 
 const UTM_MEDIUM = 'donate-button-0.4'; // Update this if the major version changes
@@ -14,6 +17,7 @@ interface BaseUrlParams {
 	methods?: PaymentMethod[];
 	privateNote?: string;
 	utmSource?: string;
+	webhookToken?: string;
 }
 
 interface DonateUrlParams extends BaseUrlParams {
@@ -31,6 +35,11 @@ interface DonateCryptoUrlParams extends BaseUrlParams {
 	cryptoCurrency: string;
 }
 
+interface GiftCardUrlParams extends BaseUrlParams {
+	giftCardCode?: string;
+	redeemGiftCardInFlow?: boolean;
+}
+
 function serializeParams(
 	params: Record<string, string | number | boolean | undefined>
 ) {
@@ -58,18 +67,25 @@ function getBaseParams({
 	nonprofitSlug,
 	noExit,
 	privateNote,
-	utmSource
+	utmSource,
+	webhookToken
 }: Pick<
 	BaseUrlParams,
-	'nonprofitSlug' | 'methods' | 'noExit' | 'privateNote' | 'utmSource'
+	| 'nonprofitSlug'
+	| 'methods'
+	| 'noExit'
+	| 'privateNote'
+	| 'utmSource'
+	| 'webhookToken'
 >) {
 	return {
 		method: methods?.join(','),
 		utm_campaign: 'donate-button',
 		utm_source: utmSource ?? nonprofitSlug,
 		utm_medium: UTM_MEDIUM,
 		no_exit: noExit ?? 1,
-		private_note: privateNote
+		private_note: privateNote,
+		webhook_token: webhookToken
 	};
 }
 
@@ -136,9 +152,25 @@ export function constructDonateCryptoUrl({
 	return `${baseUrl}?${parameters}#/${HASH}`;
 }
 
-export function constructGiftCardUrl(nonprofitSlug: string) {
+export function constructGiftCardUrl({
+	redeemGiftCardInFlow,
+	giftCardCode,
+	...rest
+}: GiftCardUrlParams) {
+	if (redeemGiftCardInFlow) {
+		const baseUrl = getBaseUrl(rest);
+		const params = getBaseParams(rest);
+
+		const parameters = serializeParams({
+			...params,
+			gift_card_code: giftCardCode
+		});
+
+		return `${baseUrl}?${parameters}#/${HASH}`;
+	}
+
 	const parameters = serializeParams({
-		nonprofitSlug
+		nonprofitSlug: rest.nonprofitSlug
 	});
 
 	return `${GIFT_CARD_URL}?${parameters}`;

packages/donate-button-v4/src/helpers/optionsTypes.ts

@@ -14,7 +14,8 @@ const defaults: Partial<WidgetConfig> = {
 	defaultFrequency: DonationFrequency.OneTime,
 	minDonationAmount: 5,
 	primaryColor: '#018669',
-	showGiftCardOption: false
+	showGiftCardOption: false,
+	redeemGiftCardInFlow: false
 };
 
 const DEEP_MERGE_OPTIONS: DeepMergeOptions = {