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

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 }

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">

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">

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 ) {

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: [],

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[];
 }