From 7bf4325a78aa7250e341d85c177efda1f1f40ddb Mon Sep 17 00:00:00 2001
From: niranjan-uma-shankar <niranjan.u@gmail.com>
Date: Thu, 22 Feb 2024 10:10:36 +0400
Subject: [PATCH] Upgrade plan Happy block: Add affiliate link setting (#87668)

* Add affiliate link in Settings

* WIP commit

* 1. Validate the URL format 2. Add Tracks event

* Learn more link should point to the affiliate link
---
 .../components/block-settings.tsx             | 22 ++++++++++++++++++-
 .../components/pricing-plan-detail.tsx        | 13 ++++++++---
 .../components/pricing-plans-header.tsx       | 12 +++++++---
 .../block-library/pricing-plans/edit.tsx      |  9 +++++++-
 .../block-library/pricing-plans/index.jsx     |  3 +++
 .../block-library/pricing-plans/types.d.ts    |  1 +
 6 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/apps/happy-blocks/block-library/pricing-plans/components/block-settings.tsx b/apps/happy-blocks/block-library/pricing-plans/components/block-settings.tsx
index d9123d7e33275..2f076271ed44c 100644
--- a/apps/happy-blocks/block-library/pricing-plans/components/block-settings.tsx
+++ b/apps/happy-blocks/block-library/pricing-plans/components/block-settings.tsx
@@ -23,14 +23,16 @@ interface Props {
 const NORMALIZE_DOMAIN_REGEX = /(?:^http(?:s)?:)?(?:[/]*)(?:www\.)?([^/?]*)(?:.*)$/gi;
 const VALIDATE_DOMAIN_REGEX =
 	/^(([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)\.)+([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)$/;
+const VALIDATE_AFFILIATE_REGEX = /^https:\/\/automattic\.pxf\.io\/.+/;
 
 const BlockSettings: FunctionComponent<
 	Pick< BlockEditProps< BlockAttributes >, 'attributes' | 'setAttributes' > & Props
 > = ( { attributes, setAttributes, plans } ) => {
-	const { productSlug, planTypeOptions, domain } = attributes;
+	const { productSlug, planTypeOptions, domain, affiliateLink } = attributes;
 	const planOptions = usePlanOptions( plans );
 	const currentPlan = plans?.find( ( plan ) => plan.productSlug === productSlug );
 	const [ newDomainInputValue, setNewDomainInputValue ] = useState( domain );
+	const [ newAffiliateLinkInputValue, setNewAffiliateLinkInputValue ] = useState( affiliateLink );
 
 	const setPlan = ( type: string, term: string ) => {
 		const plan = plans?.find( ( plan ) => plan.type === type && plan.term === term );
@@ -75,6 +77,17 @@ const BlockSettings: FunctionComponent<
 		}
 	};
 
+	const onAffiliateChange = ( value: string ) => {
+		setNewAffiliateLinkInputValue( value );
+
+		if ( ! value || ! VALIDATE_AFFILIATE_REGEX.test( value ) ) {
+			setAttributes( { affiliateLink: false } );
+			return;
+		}
+
+		setAttributes( { affiliateLink: value } );
+	};
+
 	return (
 		<InspectorControls>
 			<PanelBody
@@ -105,6 +118,13 @@ const BlockSettings: FunctionComponent<
 						) }
 						onChange={ onDomainChange }
 					/>
+					<TextControl
+						className="hb-pricing-plans-embed__settings-domain"
+						label={ __( 'Affiliate Link', 'happy-blocks' ) }
+						value={ newAffiliateLinkInputValue || '' }
+						help={ __( 'Enter the affiliate link for the Upgrade CTA', 'happy-blocks' ) }
+						onChange={ onAffiliateChange }
+					/>
 					<RadioControl
 						label={ __( 'Price', 'happy-blocks' ) }
 						selected={ currentPlan?.term }
diff --git a/apps/happy-blocks/block-library/pricing-plans/components/pricing-plan-detail.tsx b/apps/happy-blocks/block-library/pricing-plans/components/pricing-plan-detail.tsx
index 61408a2217817..03a85938ef935 100644
--- a/apps/happy-blocks/block-library/pricing-plans/components/pricing-plan-detail.tsx
+++ b/apps/happy-blocks/block-library/pricing-plans/components/pricing-plan-detail.tsx
@@ -34,12 +34,19 @@ const PricingPlanDetail: FunctionComponent< BlockSaveProps< BlockAttributes > &
 		recordTracksEvent( 'calypso_happyblocks_upgrade_plan_click', {
 			plan: currentPlan.productSlug,
 			domain: attributes.domain,
+			affiliateLink: attributes.affiliateLink,
 		} );
 	};
 
-	const CtaLink = attributes.domain
-		? `${ CHECKOUT_URL }/${ attributes.domain }/${ currentPlan.pathSlug }`
-		: PLANS_URL;
+	let CtaLink = PLANS_URL;
+
+	if ( attributes.domain ) {
+		CtaLink = `${ CHECKOUT_URL }/${ attributes.domain }/${ currentPlan.pathSlug }`;
+	}
+
+	if ( attributes.affiliateLink ) {
+		CtaLink = attributes.affiliateLink;
+	}
 
 	return (
 		<section className="hb-pricing-plans-embed__detail">
diff --git a/apps/happy-blocks/block-library/pricing-plans/components/pricing-plans-header.tsx b/apps/happy-blocks/block-library/pricing-plans/components/pricing-plans-header.tsx
index 37364ffa49b65..96644784a8211 100644
--- a/apps/happy-blocks/block-library/pricing-plans/components/pricing-plans-header.tsx
+++ b/apps/happy-blocks/block-library/pricing-plans/components/pricing-plans-header.tsx
@@ -10,9 +10,15 @@ interface Props {
 }
 
 const PricingPlansHeader: FunctionComponent< Props > = ( { currentPlan, attributes } ) => {
-	const learnMoreLink = attributes.domain
-		? `https://wordpress.com/plans/${ attributes.domain }`
-		: `https://wordpress.com/pricing/`;
+	let learnMoreLink = 'https://wordpress.com/pricing/';
+
+	if ( attributes.domain ) {
+		learnMoreLink = `https://wordpress.com/plans/${ attributes.domain }`;
+	}
+
+	if ( attributes.affiliateLink ) {
+		learnMoreLink = attributes.affiliateLink;
+	}
 
 	return (
 		<section className="hb-pricing-plans-embed__header">
diff --git a/apps/happy-blocks/block-library/pricing-plans/edit.tsx b/apps/happy-blocks/block-library/pricing-plans/edit.tsx
index c5fea8a5ce8fb..31e22ac52c52b 100644
--- a/apps/happy-blocks/block-library/pricing-plans/edit.tsx
+++ b/apps/happy-blocks/block-library/pricing-plans/edit.tsx
@@ -21,8 +21,15 @@ export const Edit: FunctionComponent< BlockEditProps< BlockAttributes > > = ( {
 		setAttributes( {
 			productSlug: attributes.productSlug ?? attributes.defaultProductSlug,
 			domain: attributes.domain,
+			affiliateLink: attributes.affiliateLink,
 		} );
-	}, [ attributes.defaultProductSlug, attributes.domain, attributes.productSlug, setAttributes ] );
+	}, [
+		attributes.defaultProductSlug,
+		attributes.domain,
+		attributes.productSlug,
+		attributes.affiliateLink,
+		setAttributes,
+	] );
 
 	useEffect( () => {
 		if ( ! plans.length ) {
diff --git a/apps/happy-blocks/block-library/pricing-plans/index.jsx b/apps/happy-blocks/block-library/pricing-plans/index.jsx
index 5fb7aeed87878..c388b917500f4 100644
--- a/apps/happy-blocks/block-library/pricing-plans/index.jsx
+++ b/apps/happy-blocks/block-library/pricing-plans/index.jsx
@@ -20,6 +20,9 @@ const blockAttributes = {
 	domain: {
 		type: 'string',
 	},
+	affiliateLink: {
+		type: 'string',
+	},
 	planTypeOptions: {
 		type: 'array',
 		default: [],
diff --git a/apps/happy-blocks/block-library/pricing-plans/types.d.ts b/apps/happy-blocks/block-library/pricing-plans/types.d.ts
index 355c5b8ac8cfe..1a23a3adb2344 100644
--- a/apps/happy-blocks/block-library/pricing-plans/types.d.ts
+++ b/apps/happy-blocks/block-library/pricing-plans/types.d.ts
@@ -2,6 +2,7 @@ export interface BlockAttributes {
 	defaultProductSlug: string;
 	productSlug: string;
 	domain: string | false;
+	affiliateLink: string | false;
 	planTypeOptions: string[];
 }