Use the same url parameters as on the website

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

@@ -32,8 +32,13 @@ export const useSubmitDonation = () => {
 		publicTestimony,
 		giftCardCode
 	} = useWidgetContext();
-	const {minDonationAmount, webhookToken, redeemGiftCardInFlow} =
-		useConfigContext();
+	const {
+		minDonationAmount,
+		webhookToken,
+		redeemGiftCardInFlow,
+		designation,
+		requireShareInfo
+	} = useConfigContext();
 
 	const submitDonation = useCallback(
 		(event: JSXInternal.TargetedEvent<HTMLFormElement>) => {
@@ -48,7 +53,9 @@ export const useSubmitDonation = () => {
 				utmSource: config.utmSource,
 				privateNote,
 				publicTestimony,
-				webhookToken
+				webhookToken,
+				designation,
+				requireShareInfo
 			};
 			switch (selectedPaymentMethod) {
 				case PaymentMethod.CRYPTO:
@@ -128,7 +135,9 @@ export const useSubmitDonation = () => {
 			publicTestimony,
 			giftCardCode,
 			webhookToken,
-			redeemGiftCardInFlow
+			redeemGiftCardInFlow,
+			designation,
+			requireShareInfo
 		]
 	);
 

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

@@ -0,0 +1,71 @@
+export enum DonateUrlParameters {
+	DONATE_NONPROFIT_ID = 'donateTo',
+	JOIN_DONATION_ID = 'joinTo',
+	JOIN_DONATION_USER_ID = 'joinUser',
+	MATCH_CAMPAIGN = 'match',
+	DONATION_HEADER_TEXT = 'donation_header_text',
+
+	REDIRECT_URL = 'redirect_url',
+	FUNDRAISER_ID = 'fundraiser_id',
+	MIN_VALUE = 'min_value',
+	FREQUENCY_OPTIONS = 'frequency_options',
+	REQUIRE_SHARE_INFO = 'require_share_info',
+
+	METHOD = 'method',
+
+	AMOUNT = 'amount',
+	FREQUENCY = 'frequency',
+	DONOR_FIRST_NAME = 'first_name',
+	DONOR_LAST_NAME = 'last_name',
+	DONOR_EMAIL = 'email',
+	DESCRIPTION = 'description',
+	MONTHLY_TITLE = 'monthlyTitle',
+
+	PARTNER_DONATION_ID = 'partner_donation_id',
+	PARTNER_WEBHOOK_TOKEN = 'webhook_token',
+	PARTNER_METADATA = 'partner_metadata',
+	TO_NONPROFITS = 'to_nonprofits',
+	TO_NONPROFIT_WEIGHTS = 'to_nonprofit_weights',
+	TO_NONPROFIT_MATCHINGS = 'to_nonprofit_matchings',
+	RECURRING_MATCHES = 'recurring_matches',
+
+	SHARE_INFO = 'share_info',
+	NO_EXIT = 'no_exit',
+
+	SUCCESS_URL = 'success_url',
+
+	EXIT_URL = 'exit_url',
+
+	GIFT_CARD_AMOUNT = 'gift_card_amount',
+	GIFT_CARD_QUANTITY = 'gift_card_quantity',
+	GIFT_CARD_NONPROFIT_ID = 'gift_card_nonprofit_ID',
+	GIFT_CARD_TAG_ID = 'gift_card_tag_ID',
+
+	THEME_COLOR = 'theme_color',
+	THEME_COLOR_HIGHLIGHT = 'theme_color_highlight',
+
+	CRYPTO_AMOUNT = 'crypto_amount',
+	CRYPTO_CURRENCY = 'crypto_currency',
+
+	STOCK_SYMBOL = 'stock_symbol',
+	STOCK_AMOUNT = 'stock_amount',
+
+	SUGGESTED_AMOUNTS = 'suggestedAmounts',
+
+	DESIGNATION = 'designation',
+
+	PRIVATE_NOTE = 'private_note',
+	PUBLIC_TESTIMONY = 'public_testimony',
+
+	SEARCH_META = 'search_meta',
+
+	GIFT_CARD_CODE = 'gift_card_code'
+}
+
+export enum UTM_QUERY_PARAM {
+	utm_source = 'utm_source',
+	utm_medium = 'utm_medium',
+	utm_campaign = 'utm_campaign',
+	utm_term = 'utm_term',
+	utm_content = 'utm_content'
+}

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

@@ -48,5 +48,9 @@ export interface WidgetConfig {
 
 	redeemGiftCardInFlow?: boolean;
 
+	designation?: string;
+
+	requireShareInfo?: boolean;
+
 	previewMode?: boolean;
 }

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

@@ -4,6 +4,10 @@ import {
 	AvailablePaymentMethods,
 	PaymentMethod
 } from 'src/components/widget/types/PaymentMethod';
+import {
+	DonateUrlParameters,
+	UTM_QUERY_PARAM
+} from 'src/components/widget/types/UrlParams';
 import {BASE_URL, GIFT_CARD_URL} from 'src/constants/url';
 
 const UTM_MEDIUM = 'donate-button-0.4'; // Update this if the major version changes
@@ -19,6 +23,8 @@ interface BaseUrlParams {
 	publicTestimony?: string;
 	utmSource?: string;
 	webhookToken?: string;
+	designation?: string;
+	requireShareInfo?: boolean;
 }
 
 interface DonateUrlParams extends BaseUrlParams {
@@ -70,7 +76,9 @@ function getBaseParams({
 	privateNote,
 	publicTestimony,
 	utmSource,
-	webhookToken
+	webhookToken,
+	designation,
+	requireShareInfo
 }: Pick<
 	BaseUrlParams,
 	| 'nonprofitSlug'
@@ -80,16 +88,20 @@ function getBaseParams({
 	| 'publicTestimony'
 	| 'utmSource'
 	| 'webhookToken'
+	| 'designation'
+	| 'requireShareInfo'
 >) {
 	return {
-		method: methods?.join(','),
-		utm_campaign: 'donate-button',
-		utm_source: utmSource ?? nonprofitSlug,
-		utm_medium: UTM_MEDIUM,
-		no_exit: noExit ?? 1,
-		private_note: privateNote,
-		public_testimony: publicTestimony,
-		webhook_token: webhookToken
+		[DonateUrlParameters.METHOD]: methods?.join(','),
+		[DonateUrlParameters.NO_EXIT]: noExit ?? 1,
+		[DonateUrlParameters.PRIVATE_NOTE]: privateNote,
+		[DonateUrlParameters.PUBLIC_TESTIMONY]: publicTestimony,
+		[DonateUrlParameters.PARTNER_WEBHOOK_TOKEN]: webhookToken,
+		[DonateUrlParameters.DESIGNATION]: designation,
+		[DonateUrlParameters.REQUIRE_SHARE_INFO]: requireShareInfo,
+		[UTM_QUERY_PARAM.utm_campaign]: 'donate-button',
+		[UTM_QUERY_PARAM.utm_source]: utmSource ?? nonprofitSlug,
+		[UTM_QUERY_PARAM.utm_medium]: UTM_MEDIUM
 	};
 }
 
@@ -114,8 +126,8 @@ export function constructDonateUrl({
 	const params = getBaseParams(rest);
 
 	const parameters = serializeParams({
-		frequency,
-		amount,
+		[DonateUrlParameters.FREQUENCY]: frequency,
+		[DonateUrlParameters.AMOUNT]: amount,
 		...params
 	});
 
@@ -131,8 +143,8 @@ export function constructDonateStocksUrl({
 	const params = getBaseParams(rest);
 
 	const parameters = serializeParams({
-		stock_amount: stockAmount,
-		stock_symbol: stockSymbol,
+		[DonateUrlParameters.STOCK_AMOUNT]: stockAmount,
+		[DonateUrlParameters.STOCK_SYMBOL]: stockSymbol,
 		...params
 	});
 
@@ -148,8 +160,8 @@ export function constructDonateCryptoUrl({
 	const params = getBaseParams(rest);
 
 	const parameters = serializeParams({
-		crypto_amount: cryptoAmount,
-		crypto_currency: cryptoCurrency,
+		[DonateUrlParameters.CRYPTO_AMOUNT]: cryptoAmount,
+		[DonateUrlParameters.CRYPTO_CURRENCY]: cryptoCurrency,
 		...params
 	});
 
@@ -167,7 +179,7 @@ export function constructGiftCardUrl({
 
 		const parameters = serializeParams({
 			...params,
-			gift_card_code: giftCardCode
+			[DonateUrlParameters.GIFT_CARD_CODE]: giftCardCode
 		});
 
 		return `${baseUrl}?${parameters}#/${HASH}`;

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

@@ -3,17 +3,19 @@ import {
 	AvailablePaymentMethods,
 	PaymentMethod
 } from 'src/components/widget/types/PaymentMethod';
+import {
+	DonateUrlParameters,
+	UTM_QUERY_PARAM
+} from 'src/components/widget/types/UrlParams';
 import {WidgetConfig} from 'src/components/widget/types/WidgetConfig';
 
 const MAX_AMOUNT_SUGGESTIONS = 5;
 
-enum DonateUrlParameters {
-	METHOD = 'method',
-	FREQUENCY = 'frequency',
-	MONTHLY_TITLE = 'monthlyTitle',
-	SUGGESTED_AMOUNTS = 'suggestedAmounts',
-	AMOUNT = 'amount',
-	UTM_SOURCE = 'utm_source',
+/**
+ * Just for backwards compatibility
+ * @deprecated
+ */
+enum OLD_DonateUrlParameters {
 	MIN_AMOUNT = 'minAmount',
 	THEME_COLOR = 'themeColor'
 }
@@ -52,6 +54,11 @@ function intFromString(string?: string | null) {
 	return Number.isNaN(number) ? undefined : number;
 }
 
+function booleanFromString(string?: string | null) {
+	if (!string) return;
+	return string === 'true';
+}
+
 function removeEmptyValues<T extends Record<string, unknown>>(object: T): T {
 	return Object.fromEntries(
 		Object.entries(object).filter(([, value]) => value !== undefined)
@@ -83,12 +90,23 @@ export function parseDonateUrl(
 		searchParameters.get(DonateUrlParameters.SUGGESTED_AMOUNTS)
 	);
 	const utmSource =
-		searchParameters.get(DonateUrlParameters.UTM_SOURCE) ?? undefined;
-	const minAmount = intFromString(
-		searchParameters.get(DonateUrlParameters.MIN_AMOUNT)
+		searchParameters.get(UTM_QUERY_PARAM.utm_source) ?? undefined;
+
+	const minAmount =
+		intFromString(searchParameters.get(DonateUrlParameters.MIN_VALUE)) ??
+		intFromString(searchParameters.get(OLD_DonateUrlParameters.MIN_AMOUNT));
+
+	const designation =
+		searchParameters.get(DonateUrlParameters.DESIGNATION) ?? undefined;
+
+	const requireShareInfo = booleanFromString(
+		searchParameters.get(DonateUrlParameters.REQUIRE_SHARE_INFO)
 	);
+
 	const primaryColorFromUrl =
-		searchParameters.get(DonateUrlParameters.THEME_COLOR) ?? undefined;
+		searchParameters.get(DonateUrlParameters.THEME_COLOR) ??
+		searchParameters.get(OLD_DonateUrlParameters.THEME_COLOR) ??
+		undefined;
 	const primaryColor = primaryColorFromUrl
 		? primaryColorFromUrl.startsWith('#')
 			? primaryColorFromUrl
@@ -111,6 +129,8 @@ export function parseDonateUrl(
 		amount,
 		defaultDonationAmount: amount,
 		minDonationAmount: minAmount,
-		primaryColor
+		primaryColor,
+		designation,
+		requireShareInfo
 	});
 }