Repository: Automattic/wp-calypso
Pull request #102376: A4A > Feedback: Implement updated Contextual Feedback Mechanism
Author: login: yashwin
Labels: name: A8c Agencies
Created: 2025-04-04T05:59:40Z | Merged: 2025-04-10T05:54:24Z

Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/2006
Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/2007
Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/2008
Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/2009
Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/2010

## Proposed Changes

This PR:

- Updates the contextual feedback mechanism as the new requirements and design, including the adding referrals, inviting team member, updating agency details flows.
- Adds the feedback to the post-purchase flow

Note: Reset the preference (instructions below) before testing.

## Why are these changes being made?

* To help bolster our retention and get relevant, in-context feedback from agencies.

## Testing Instructions

* ~Patch 179607-ghe-Automattic/wpcom to your sandbox~
* Open the A4A live link
* Perform the below actions and verify the feedback is shown as displayed below. Fill out the form and submit it > Verify the form is submitted by checking the Slack message (channel name can be found here: https://github.com/Automattic/automattic-for-agencies-dev/issues/2006). 

1) Sending a referral (/marketplace/products > Toggle the refer mode on and send a referral)

<img width="1660" alt="Screenshot 2025-04-08 at 12 18 32 PM" src="https://github.com/user-attachments/assets/34acaca0-8d95-48c0-b7f0-57d199ed10b8" />

2) Adding a team member (/team/invite > Send invite)

<img width="1660" alt="Screenshot 2025-04-08 at 12 17 23 PM" src="https://github.com/user-attachments/assets/fab6d9bd-ba16-4600-84c4-e122d6f99cd2" />

3) Filling out partner directory information (/partner-directory/agency-details > Save public profile)

<img width="1666" alt="Screenshot 2025-04-04 at 10 54 36 AM" src="https://github.com/user-attachments/assets/b254b60f-2027-4ab4-9c57-de965dc16439" />

* Go to Marketplace > For the flows mentioned below: Verify the feedback form is shown > Submit the form > Verify you are redirected to the appropriate pages > Verify the form is submitted by checking the Slack message.

Note: Reset the preference (instructions below) after each flow.

1)  Go to Sites Dashboard > Click on Add + on backup or scan on any site > Purchase the product > Verify the feedback form is shown > Submit the form or skip it > Verify you are redirected to the sites dashboard
2) Go to Marketplace > Add a product (not free, non-WooCommerce) > Go to Checkout > Purchase the product > Verify you are redirected to the Licenses page > Click the `Assign` button > Assing the license to a site > Verify the feedback form is shown > Submit the form or skip it > Verify you are redirected to the Licenses page
3) Go to Marketplace > Add a product (not free, WooCommerce) > Go to Checkout > Purchase the product > Verify you are redirected to the Licenses page > Click the `Assign` button > Assing the license to a site > Verify that you are redirected to the Download Products page > Click the `Done` button > Verify the feedback form is shown > Submit the form or skip it > Verify you are redirected to the Licenses page
4) Go to Marketplace > Add a product (free, WooCommerce) > Go to Checkout > Purchase the product > Verify you are redirected to the Licenses page > Click the `Assign` button > Assing the license to a site > Verify that you are redirected to the Download Products page > Click the `Done` button > Verify the feedback form is not shown > Verify you are redirected to the Licenses page
3) Go to Markeplace > Add WP.com hosting > Go to Checkout > Purchase the hosting > Verify you are redirected to the Needs setup page > Create a site > Once you are in the Sites Dashboard > Click the `Set up your site` button on the banner > Verify you are redirected to the WP.com overview page > Go to A4A dashboard > Verify the feedback form is shown > Submit the form or skip it > Verify you are redirected to the Licenses page
4) Go to Markeplace > Add Pressable hosting > Go to Checkout > Purchase the hosting > Verify you are redirected to the Licenses page > Click the `Manage in Pressable` button > Verify you are redirected to Pressable > Go to A4A dashboard > Verify the feedback form is shown > Submit the form or skip it > Verify you are redirected to the Licenses page

<img width="1660" alt="Screenshot 2025-04-08 at 12 16 41 PM" src="https://github.com/user-attachments/assets/4193df0f-e847-4574-ad0b-547cd0e4ed1a" />

---
How the preferences are stored:

<img width="304" alt="Screenshot 2024-12-05 at 11 06 08 AM" src="https://github.com/user-attachments/assets/1ca12427-cee1-4f6c-9a3c-c40272e94c6a">

Preferences can be reset from staging
---
## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [x] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] [Have you written new tests](https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md) for your changes?
- [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- [x] Have you checked for TypeScript, React or other console errors?
- [ ] Have you used memoizing on expensive computations? More info in [Memoizing with create-selector](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    - [ ] For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages. 
- [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?


Diff:
diff --git a/client/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback.tsx b/client/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback.tsx
index 183e2fbdea6d..aea67062c165 100644
--- a/client/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback.tsx
+++ b/client/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback.tsx
@@ -1,5 +1,4 @@
 import page from '@automattic/calypso-router';
-import { removeQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import useUrlQueryParam from 'calypso/a8c-for-agencies/hooks/use-url-query-param';
@@ -9,9 +8,9 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { successNotice } from 'calypso/state/notices/actions';
 import { savePreference } from 'calypso/state/preferences/actions';
 import { getPreference } from '../../../../state/preferences/selectors';
+import { A4A_OVERVIEW_LINK, A4A_FEEDBACK_LINK } from '../../sidebar-menu/lib/constants';
 import { getA4AfeedbackProps } from '../lib/get-a4a-feedback-props';
 import useSaveFeedbackMutation from './use-save-feedback-mutation';
-import type { Props as A4AFeedbackProps } from '../index';
 import type {
 	FeedbackQueryData,
 	FeedbackType,
@@ -19,7 +18,6 @@ import type {
 	FeedbackSurveyResponsesPayload,
 } from '../types';
 
-const FEEDBACK_URL_HASH_FRAGMENT = '#feedback';
 const FEEDBACK_PREFERENCE = 'a4a-feedback';
 
 const redirectToDefaultUrl = ( redirectUrl?: string ) => {
@@ -27,7 +25,7 @@ const redirectToDefaultUrl = ( redirectUrl?: string ) => {
 		page.redirect( redirectUrl );
 		return;
 	}
-	page.redirect( removeQueryArgs( window.location.pathname + window.location.search, 'args' ) );
+	page.redirect( A4A_OVERVIEW_LINK );
 };
 
 const getUpdatedPreference = (
@@ -52,11 +50,12 @@ const useShowFeedback = ( type: FeedbackType ) => {
 
 	const { mutate: saveFeedback, isPending, data: apiResponseData } = useSaveFeedbackMutation();
 
-	// Let's use hash #feedback if we want to show the feedback
-	const feedbackFormHash = window.location.hash === FEEDBACK_URL_HASH_FRAGMENT;
+	// Check if the current page is the feedback page
+	const isFeedbackPage = window.location.pathname === A4A_FEEDBACK_LINK;
 
 	// Additional args, like email for invite flow
 	const { value: args } = useUrlQueryParam( 'args' );
+	const { value: redirectUrlFromQueryParam } = useUrlQueryParam( 'redirectUrl' );
 
 	// We are storing the timestamp when last feedback for given preference was submitted or skipped
 	const feedbackTimestamp = useSelector( ( state ) => getPreference( state, FEEDBACK_PREFERENCE ) );
@@ -82,13 +81,14 @@ const useShowFeedback = ( type: FeedbackType ) => {
 			if ( ! data || ! agencyId ) {
 				return;
 			}
-			const { experience, comments } = data;
+			const { experience, comments, suggestions } = data;
 			const params: FeedbackSurveyResponsesPayload = {
 				site_id: agencyId,
 				survey_id: type,
 				survey_responses: {
 					rating: experience,
-					comment: comments,
+					comment: { text: comments },
+					suggestions: { text: suggestions?.join( ', ' ) || '' },
 				},
 			};
 
@@ -97,6 +97,8 @@ const useShowFeedback = ( type: FeedbackType ) => {
 					agency_id: agencyId,
 					survey_id: params.survey_id,
 					rating: params.survey_responses.rating,
+					suggestions: params.survey_responses.suggestions?.text,
+					comment: params.survey_responses.comment.text,
 				} )
 			);
 			saveFeedback( { params } );
@@ -118,7 +120,7 @@ const useShowFeedback = ( type: FeedbackType ) => {
 	}, [ dispatch, feedbackTimestamp, type ] );
 
 	// Combine props passed to Feedback component
-	const updatedFeedbackProps: A4AFeedbackProps = useMemo(
+	const updatedFeedbackProps = useMemo(
 		() => ( {
 			...feedbackProps,
 			onSubmit: onSubmitFeedback,
@@ -138,31 +140,34 @@ const useShowFeedback = ( type: FeedbackType ) => {
 					{
 						displayOnNextPage: true,
 						id: 'submit-product-feedback-success',
-						duration: 2000,
+						duration: 10000,
 					}
 				)
 			);
 		}
 
-		if ( feedbackFormHash && ! showFeedback && ! isPending ) {
+		if ( isFeedbackPage && ! showFeedback && ! isPending ) {
 			// If the feedback form hash is present but we don't want to show the feedback form, redirect to the default URL
 			// If feedback was interacted, redirect to the URL passed in the feedbackProps
-			redirectToDefaultUrl( feedbackInteracted ? feedbackProps.redirectUrl : undefined );
+			redirectToDefaultUrl(
+				redirectUrlFromQueryParam || ( feedbackInteracted ? feedbackProps.redirectUrl : undefined )
+			);
 		}
 	}, [
 		apiResponseData,
 		dispatch,
-		feedbackFormHash,
+		isFeedbackPage,
 		feedbackInteracted,
 		feedbackProps,
 		isPending,
+		redirectUrlFromQueryParam,
 		showFeedback,
 		translate,
 	] );
 
 	return {
 		isFeedbackShown: ! showFeedback,
-		showFeedback: feedbackFormHash && showFeedback,
+		showFeedback: isFeedbackPage && showFeedback,
 		feedbackProps: updatedFeedbackProps,
 		isSubmitting: isPending,
 	};
diff --git a/client/a8c-for-agencies/components/a4a-feedback/index.tsx b/client/a8c-for-agencies/components/a4a-feedback/index.tsx
index 2a38b90a0dc9..8a6e3add36f8 100644
--- a/client/a8c-for-agencies/components/a4a-feedback/index.tsx
+++ b/client/a8c-for-agencies/components/a4a-feedback/index.tsx
@@ -1,96 +1,132 @@
 import { FormLabel } from '@automattic/components';
-import { Button } from '@wordpress/components';
+import { Button, CheckboxControl } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { ChangeEvent, useState } from 'react';
+import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
 import IconBad from 'calypso/assets/images/a8c-for-agencies/feedback/bad.svg';
 import IconGood from 'calypso/assets/images/a8c-for-agencies/feedback/good.svg';
 import IconNeutral from 'calypso/assets/images/a8c-for-agencies/feedback/neutral.svg';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextarea from 'calypso/components/forms/form-textarea';
-import type { FeedbackQueryData, FeedbackProps } from './types';
+import LayoutBody from 'calypso/layout/hosting-dashboard/body';
+import useShowFeedback from './hooks/use-show-a4a-feedback';
+import type { FeedbackType, FeedbackSuggestion } from './types';
 
 import './style.scss';
 
-export interface Props extends FeedbackProps {
-	onSubmit: ( data: FeedbackQueryData ) => void;
-	onSkip: () => void;
-}
-
-export function A4AFeedback( {
-	title,
-	description,
-	questionDetails,
-	ctaText,
-	onSubmit,
-	onSkip,
-}: Props ) {
+export function A4AFeedback( { type }: { type: FeedbackType } ) {
 	const translate = useTranslate();
 	const [ experience, setExperience ] = useState< string >( 'good' );
 	const [ comments, setComments ] = useState< string >( '' );
+	const [ suggestions, setSuggestions ] = useState< FeedbackSuggestion[] >( [] );
+
+	const {
+		feedbackProps: { title, description, suggestion, onSubmit, onSkip },
+		isSubmitting,
+	} = useShowFeedback( type );
+
+	const onSuggestionChange = ( option: FeedbackSuggestion ) => {
+		if ( suggestions.find( ( suggestion ) => suggestion.value === option.value ) ) {
+			setSuggestions( ( prev ) =>
+				prev.filter( ( suggestion ) => suggestion.value !== option.value )
+			);
+		} else {
+			setSuggestions( ( prev ) => [ ...prev, option ] );
+		}
+	};
 
 	return (
-		<div className="a4a-feedback__wrapper">
-			<div className="a4a-feedback__content">
-				<h1 className="a4a-feedback__title">{ title }</h1>
-				<div className="a4a-feedback__description">{ description }</div>
-				<div className="a4a-feedback__questions">
-					<div className="a4a-feedback__question-details">{ questionDetails }</div>
-					<div className="a4a-feedback__experience-selector">
-						<div className="a4a-feedback__experience-selector-label">
-							{ translate( 'Overall' ) }
-						</div>
-						<div className="a4a-feedback__experience-selector-buttons">
-							<Button
-								variant={ experience === 'good' ? 'primary' : 'secondary' }
-								onClick={ () => setExperience( 'good' ) }
-							>
-								<img src={ IconGood } alt="Good" />
-							</Button>
-							<Button
-								variant={ experience === 'neutral' ? 'primary' : 'secondary' }
-								onClick={ () => setExperience( 'neutral' ) }
-							>
-								<img src={ IconNeutral } alt="Neutral" />
-							</Button>
-							<Button
-								variant={ experience === 'bad' ? 'primary' : 'secondary' }
-								onClick={ () => setExperience( 'bad' ) }
-							>
-								<img src={ IconBad } alt="Bad" />
-							</Button>
-						</div>
-					</div>
-					<FormFieldset>
-						<FormLabel className="a4a-feedback__comments-label" htmlFor="comments">
-							{ translate(
-								'Additional feedback about this experience {{span}}(Optional){{/span}}',
-								{ components: { span: <span></span> } }
+		<Layout className="a4a-feedback" title={ title } wide>
+			<LayoutBody>
+				<div className="a4a-feedback__wrapper">
+					<div className="a4a-feedback__content">
+						<h1 className="a4a-feedback__title">{ title }</h1>
+						<div className="a4a-feedback__description">{ description }</div>
+						<div className="a4a-feedback__questions">
+							<div className="a4a-feedback__question-details">
+								{ translate( 'Share your feedback' ) }
+							</div>
+							<div className="a4a-feedback__experience-selector">
+								<div className="a4a-feedback__experience-selector-label">
+									{ translate( 'What was your experience like?' ) }
+								</div>
+								<div className="a4a-feedback__experience-selector-buttons">
+									<Button
+										variant={ experience === 'good' ? 'primary' : 'secondary' }
+										onClick={ () => setExperience( 'good' ) }
+									>
+										<img src={ IconGood } alt="Good" />
+									</Button>
+									<Button
+										variant={ experience === 'neutral' ? 'primary' : 'secondary' }
+										onClick={ () => setExperience( 'neutral' ) }
+									>
+										<img src={ IconNeutral } alt="Neutral" />
+									</Button>
+									<Button
+										variant={ experience === 'bad' ? 'primary' : 'secondary' }
+										onClick={ () => setExperience( 'bad' ) }
+									>
+										<img src={ IconBad } alt="Bad" />
+									</Button>
+								</div>
+							</div>
+							{ suggestion && (
+								<FormFieldset>
+									<FormLabel className="a4a-feedback__comments-label" htmlFor="suggestion">
+										{ suggestion.label }
+									</FormLabel>
+									<div className="a4a-feedback__suggestions">
+										{ suggestion.options.map( ( option ) => (
+											<CheckboxControl
+												key={ `suggestion-${ option.value }` }
+												label={ option.label }
+												checked={
+													!! suggestions.find( ( suggestion ) => suggestion.value === option.value )
+												}
+												onChange={ () => onSuggestionChange( option ) }
+											/>
+										) ) }
+									</div>
+								</FormFieldset>
 							) }
-						</FormLabel>
-						<FormTextarea
-							className="a4a-feedback__comments"
-							name="comments"
-							id="comments"
-							value={ comments }
-							onChange={ ( event: ChangeEvent< HTMLInputElement > ) =>
-								setComments( event.target.value )
-							}
-						/>
-					</FormFieldset>
-					<div className="a4a-feedback__cta">
-						<Button
-							variant="primary"
-							onClick={ () => onSubmit( { experience, comments } ) }
-							disabled={ ! experience }
-						>
-							{ ctaText }
-						</Button>
-						<Button className="a8c-blue-link" onClick={ onSkip }>
-							{ translate( 'Skip feedback' ) }
-						</Button>
+							<FormFieldset>
+								<FormLabel className="a4a-feedback__comments-label" htmlFor="comments">
+									{ translate( 'Share your suggestions' ) }
+								</FormLabel>
+								<FormTextarea
+									className="a4a-feedback__comments"
+									name="comments"
+									id="comments"
+									value={ comments }
+									onChange={ ( event: ChangeEvent< HTMLInputElement > ) =>
+										setComments( event.target.value )
+									}
+								/>
+							</FormFieldset>
+							<div className="a4a-feedback__cta">
+								<Button
+									variant="primary"
+									onClick={ () =>
+										onSubmit( {
+											experience,
+											comments,
+											suggestions: suggestions.map( ( suggestion ) => suggestion.value ),
+										} )
+									}
+									disabled={ ! experience || isSubmitting }
+									isBusy={ isSubmitting }
+								>
+									{ translate( 'Send your feedback' ) }
+								</Button>
+								<Button className="a8c-blue-link" onClick={ onSkip } disabled={ isSubmitting }>
+									{ translate( 'Skip' ) }
+								</Button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
+			</LayoutBody>
+		</Layout>
 	);
 }
diff --git a/client/a8c-for-agencies/components/a4a-feedback/lib/get-a4a-feedback-props.ts b/client/a8c-for-agencies/components/a4a-feedback/lib/get-a4a-feedback-props.ts
index 4bcc4269d219..62532148a560 100644
--- a/client/a8c-for-agencies/components/a4a-feedback/lib/get-a4a-feedback-props.ts
+++ b/client/a8c-for-agencies/components/a4a-feedback/lib/get-a4a-feedback-props.ts
@@ -1,6 +1,10 @@
 import { TAB_INVITED_MEMBERS } from 'calypso/a8c-for-agencies/sections/team/constants';
-import { A4A_TEAM_LINK, A4A_PARTNER_DIRECTORY_LINK } from '../../sidebar-menu/lib/constants';
-import type { FeedbackProps, FeedbackType } from '../types';
+import {
+	A4A_TEAM_LINK,
+	A4A_PARTNER_DIRECTORY_LINK,
+	A4A_REFERRALS_DASHBOARD,
+} from '../../sidebar-menu/lib/constants';
+import { FeedbackProps, FeedbackType } from '../types';
 
 export const getA4AfeedbackProps = (
 	type: FeedbackType,
@@ -8,43 +12,135 @@ export const getA4AfeedbackProps = (
 	args?: Record< string, unknown >
 ): FeedbackProps => {
 	switch ( type ) {
-		case 'referral-complete':
+		case FeedbackType.ReferralCompleted:
 			return {
-				title: translate( 'Your referral order is complete!' ),
+				title: translate( 'Well done! You sent your first referral!' ),
 				description: translate(
-					'Your referral order was emailed to %(email)s for payment. Once they pay, you can assign the products to a site.',
+					'We emailed your referral order to %(email)s. You can assign your products to a site or set up hosting once they pay.',
 					{ args: { email: args?.email } }
 				) as string,
-				questionDetails: translate( 'How was your experience making a referral?' ),
-				ctaText: translate( 'Submit and continue to Dashboard' ),
+				redirectUrl: A4A_REFERRALS_DASHBOARD,
+				suggestion: {
+					label: translate( 'What could have been better during the Referrals process?' ),
+					options: [
+						{
+							label: translate( 'Learning about referrals' ),
+							value: 'learning-about-referrals',
+						},
+						{
+							label: translate( 'Finding referral mode' ),
+							value: 'finding-referral-mode',
+						},
+						{
+							label: translate( 'Adding products and hosting to the referral cart' ),
+							value: 'adding-products-and-hosting-to-the-referral-cart',
+						},
+						{
+							label: translate( 'Sending a referral to my client' ),
+							value: 'sending-a-referral-to-my-client',
+						},
+						{
+							label: translate( 'Other' ),
+							value: 'other',
+						},
+					],
+				},
 			};
-		case 'agency-details-added':
+		case FeedbackType.PDDetailsAdded:
 			return {
-				title: translate( 'Agency details added!' ),
+				title: translate( 'Details successfully added!' ),
 				description: translate(
-					"Nice job! Your information has been added to your agency's public profile."
+					"Well done! We've updated your agency's public profile with your information."
 				),
-				questionDetails: translate( "How was your experience adding your agency's details?" ),
-				ctaText: translate( 'Submit and continue to Partner Directory' ),
 				redirectUrl: A4A_PARTNER_DIRECTORY_LINK,
+				suggestion: {
+					label: translate(
+						'What could have been better during the Partner Directory application process?'
+					),
+					options: [
+						{
+							label: translate( 'Discovering the Partner Directories feature' ),
+							value: 'discovering-the-partner-directories-feature',
+						},
+						{
+							label: translate( 'Understanding how Partner Directories can benefit my agency' ),
+							value: 'understanding-how-partner-directories-can-benefit-my-agency',
+						},
+						{
+							label: translate(
+								'Understanding the criteria my agency needs to meet in order to be included'
+							),
+							value: 'understanding-the-criteria-my-agency-needs-to-meet-in-order-to-be-included',
+						},
+						{
+							label: translate( 'Other' ),
+							value: 'other',
+						},
+					],
+				},
 			};
-		case 'member-invite-sent':
+		case FeedbackType.MemberInviteSent:
 			return {
-				title: translate( 'Invite sent!' ),
+				title: translate( 'Invite emailed!' ),
 				description: translate(
-					"Your team member invite was emailed to %(email)s. Once they accept, you'll see them as an active member in the Team section.",
+					"We sent %(email)s an invite. After accepting, they'll become an active member in your Team section.",
 					{ args: { email: args?.email } }
 				) as string,
-				questionDetails: translate( 'How was your experience inviting a team member?' ),
-				ctaText: translate( 'Submit and continue to Team' ),
 				redirectUrl: `${ A4A_TEAM_LINK }/${ TAB_INVITED_MEMBERS }`,
+				suggestion: {
+					label: translate( 'What could have been better during the team invitation process?' ),
+					options: [
+						{
+							label: translate( 'Finding where to invite my team members' ),
+							value: 'finding-where-to-invite-my-team-members',
+						},
+						{
+							label: translate( 'Sending an invitation to a team member' ),
+							value: 'sending-an-invitation-to-a-team-member',
+						},
+						{
+							label: translate( 'Finding documentation on team member permissions' ),
+							value: 'finding-documentation-on-team-member-permissions',
+						},
+						{
+							label: translate( 'Other' ),
+							value: 'other',
+						},
+					],
+				},
+			};
+		case FeedbackType.PurchaseCompleted:
+			return {
+				title: translate( 'Purchase complete!' ),
+				description: translate(
+					"Well done! You've made your first purchase on Automattic for Agencies."
+				),
+				suggestion: {
+					label: translate( 'What could have been better during your purchase process?' ),
+					options: [
+						{
+							label: translate( 'Finding the right products or hosting' ),
+							value: 'finding-the-right-products-or-hosting',
+						},
+						{
+							label: translate( 'Understanding the pricing structure' ),
+							value: 'understanding-the-pricing-structure',
+						},
+						{
+							label: translate( 'Setting up my product or hosting' ),
+							value: 'setting-up-my-product-or-hosting',
+						},
+						{
+							label: translate( 'Other' ),
+							value: 'other',
+						},
+					],
+				},
 			};
 		default:
 			return {
 				title: translate( 'General feedback' ),
 				description: translate( 'Please share general feedback' ),
-				questionDetails: translate( 'How was your experience?' ),
-				ctaText: translate( 'Submit and continue' ),
 			};
 	}
 };
diff --git a/client/a8c-for-agencies/components/a4a-feedback/style.scss b/client/a8c-for-agencies/components/a4a-feedback/style.scss
index fb8fa36e29c0..972323f7fd17 100644
--- a/client/a8c-for-agencies/components/a4a-feedback/style.scss
+++ b/client/a8c-for-agencies/components/a4a-feedback/style.scss
@@ -8,17 +8,24 @@ $highlight-color: #3858E9;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+
+	.form-fieldset {
+		margin-block-end: 0;
+	}
 }
 
 .a4a-feedback__content {
-	padding-block-start: 32px;
+	margin-block-start: calc(48px + 8px);
 	display: flex;
 	align-items: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
+	border: 1px solid var(--color-neutral-5);
+	border-radius: 8px; /* stylelint-disable-line scales/radii */
+	padding: 16px 24px;
 
 	@include break-large {
-		width: 600px;
+		width: 470px;
 		max-width: 90%;
 	}
 }
@@ -28,37 +35,37 @@ $highlight-color: #3858E9;
 }
 
 .a4a-feedback__description {
-	@include body-large;
+	@include body-medium;
 	color: var(--color-neutral-60);
-	padding-block: 4px 32px;
+	padding-block: 8px 12px;
+	border-bottom: 1px solid var(--color-neutral-0);
+	flex: 1 1 auto;
 }
 
 .a4a-feedback__questions {
+	padding-block-start: 16px;
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
-	border: 1px solid var(--color-neutral-5);
-	border-radius: 4px;
-	padding: 16px 24px;
 	flex: 1 1 auto;
 }
 
 .a4a-feedback__question-details {
 	@include heading-large;
+	padding-block-end: 8px;
 }
 
 .a4a-feedback__experience-selector-label {
 	@include heading-medium;
-	padding-block-end: 8px;
+	padding-block-end: 12px;
+	text-transform: uppercase;
 }
 
-.a4a-feedback__comments-label {
+.form-label.a4a-feedback__comments-label {
 	@include heading-medium;
-	padding-block-end: 8px;
-
-	span {
-		opacity: 0.8;
-	}
+	padding-block-end: 12px;
+	text-transform: uppercase;
+	margin-block-end: 0;
 }
 
 .a4a-feedback__comments {
@@ -128,3 +135,10 @@ $highlight-color: #3858E9;
 		}
 	}
 }
+
+.a4a-feedback__suggestions {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
diff --git a/client/a8c-for-agencies/components/a4a-feedback/types.ts b/client/a8c-for-agencies/components/a4a-feedback/types.ts
index dec264fa466b..2390ee44466f 100644
--- a/client/a8c-for-agencies/components/a4a-feedback/types.ts
+++ b/client/a8c-for-agencies/components/a4a-feedback/types.ts
@@ -1,25 +1,35 @@
-export type FeedbackType = 'referral-complete' | 'agency-details-added' | 'member-invite-sent';
-export type FeedbackData = {
-	title: string;
-	description: string;
-	questionDetails: string;
-};
+export enum FeedbackType {
+	ReferralCompleted = 'referral-completed',
+	PDDetailsAdded = 'partner-directory-details-added',
+	MemberInviteSent = 'team-member-invite-sent',
+	PurchaseCompleted = 'purchase-completed',
+}
+
 export type FeedbackQueryData = {
 	experience: string;
 	comments: string;
+	suggestions?: string[];
+};
+
+export type FeedbackSuggestion = {
+	label: string;
+	value: string;
 };
 
 export type FeedbackProps = {
 	title: string;
 	description: string;
-	questionDetails: string;
-	ctaText: string;
 	redirectUrl?: string;
+	suggestion?: {
+		label: string;
+		options: FeedbackSuggestion[];
+	};
 };
 
 interface FeedbackSurveyResponses {
 	rating: string;
-	comment: string;
+	comment: { text: string };
+	suggestions?: { text: string };
 }
 export interface FeedbackSurveyResponsesPayload {
 	site_id: number;
diff --git a/client/a8c-for-agencies/components/sidebar-menu/lib/constants.ts b/client/a8c-for-agencies/components/sidebar-menu/lib/constants.ts
index 8c586a01355d..d2bdd8336420 100644
--- a/client/a8c-for-agencies/components/sidebar-menu/lib/constants.ts
+++ b/client/a8c-for-agencies/components/sidebar-menu/lib/constants.ts
@@ -2,6 +2,7 @@
 // the 'calypso/a8c-for-agencies/lib/permission.ts' file
 // to include the necessary permissions for the new routes.
 export const A4A_LANDING_LINK = '/landing';
+export const A4A_FEEDBACK_LINK = '/feedback';
 export const A4A_OVERVIEW_LINK = '/overview';
 export const A4A_SITES_LINK = '/sites';
 export const A4A_SITES_LINK_NEEDS_ATTENTION = '/sites?issue_types=all_issues';
diff --git a/client/a8c-for-agencies/lib/permission.ts b/client/a8c-for-agencies/lib/permission.ts
index 6cb1ec6e37f6..89597aa9e366 100644
--- a/client/a8c-for-agencies/lib/permission.ts
+++ b/client/a8c-for-agencies/lib/permission.ts
@@ -5,6 +5,7 @@ import {
 } from 'calypso/a8c-for-agencies/sections/partner-directory/constants';
 import {
 	A4A_LANDING_LINK,
+	A4A_FEEDBACK_LINK,
 	A4A_OVERVIEW_LINK,
 	A4A_SITES_LINK,
 	A4A_SITES_LINK_NEEDS_ATTENTION,
@@ -126,7 +127,7 @@ export const isPathAllowed = ( pathname: string, agency: Agency | null ) => {
 	}
 
 	// Everyone can access the landing page and the overview page
-	if ( [ A4A_LANDING_LINK, A4A_OVERVIEW_LINK ].includes( pathname ) ) {
+	if ( [ A4A_LANDING_LINK, A4A_OVERVIEW_LINK, A4A_FEEDBACK_LINK ].includes( pathname ) ) {
 		return true;
 	}
 
diff --git a/client/a8c-for-agencies/sections/feedback/controller.tsx b/client/a8c-for-agencies/sections/feedback/controller.tsx
new file mode 100644
index 000000000000..70fb042073b2
--- /dev/null
+++ b/client/a8c-for-agencies/sections/feedback/controller.tsx
@@ -0,0 +1,9 @@
+import { type Callback } from '@automattic/calypso-router';
+import { A4AFeedback } from 'calypso/a8c-for-agencies/components/a4a-feedback';
+import MainSidebar from 'calypso/a8c-for-agencies/components/sidebar-menu/main';
+
+export const feedbackContext: Callback = ( context, next ) => {
+	context.primary = <A4AFeedback type={ context.query.type } />;
+	context.secondary = <MainSidebar path={ context.path } />;
+	next();
+};
diff --git a/client/a8c-for-agencies/sections/feedback/index.tsx b/client/a8c-for-agencies/sections/feedback/index.tsx
new file mode 100644
index 000000000000..19f3701a6c29
--- /dev/null
+++ b/client/a8c-for-agencies/sections/feedback/index.tsx
@@ -0,0 +1,8 @@
+import page from '@automattic/calypso-router';
+import { A4A_FEEDBACK_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { makeLayout, render as clientRender } from 'calypso/controller';
+import { feedbackContext } from './controller';
+
+export default function () {
+	page( A4A_FEEDBACK_LINK, feedbackContext, makeLayout, clientRender );
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/assign-license/index.tsx b/client/a8c-for-agencies/sections/marketplace/assign-license/index.tsx
index b2480b6c1074..15a055416fc7 100644
--- a/client/a8c-for-agencies/sections/marketplace/assign-license/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/assign-license/index.tsx
@@ -4,6 +4,8 @@ import { getQueryArg } from '@wordpress/url';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/layout-with-payment-notification';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
@@ -11,6 +13,7 @@ import {
 	A4A_MARKETPLACE_DOWNLOAD_PRODUCTS_LINK,
 	A4A_LICENSES_LINK,
 	A4A_SITES_LINK,
+	A4A_FEEDBACK_LINK,
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import FormRadio from 'calypso/components/forms/form-radio';
 import Pagination from 'calypso/components/pagination';
@@ -47,6 +50,8 @@ export default function AssignLicense( { initialPage, initialSearch }: Props ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PurchaseCompleted );
+
 	const [ selectedSite, setSelectedSite ] = useState( { ID: 0, domain: '' } );
 	const [ currentPage, setCurrentPage ] = useState< number >( initialPage );
 	const [ search, setSearch ] = useState< string >( initialSearch );
@@ -173,12 +178,19 @@ export default function AssignLicense( { initialPage, initialSearch }: Props ) {
 		}
 
 		const fromDashboard = getQueryArg( window.location.href, 'source' ) === 'dashboard';
-		if ( fromDashboard ) {
-			return page.redirect( A4A_SITES_LINK );
-		}
-
-		return page.redirect( A4A_LICENSES_LINK );
-	}, [ assignLicensesToSite, dispatch, licenseKeysArray, selectedSite?.ID ] );
+		const redirectUrl = fromDashboard ? A4A_SITES_LINK : A4A_LICENSES_LINK;
+		return isFeedbackShown
+			? page.redirect( redirectUrl )
+			: page.redirect(
+					addQueryArgs(
+						{
+							redirectUrl: redirectUrl,
+							type: FeedbackType.PurchaseCompleted,
+						},
+						A4A_FEEDBACK_LINK
+					)
+			  );
+	}, [ assignLicensesToSite, dispatch, isFeedbackShown, licenseKeysArray, selectedSite?.ID ] );
 
 	return (
 		<Layout
diff --git a/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx b/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx
index a651c1cac078..2bccc660c2bf 100644
--- a/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/checkout/request-client-payment.tsx
@@ -7,7 +7,11 @@ import emailValidator from 'email-validator';
 import { useTranslate } from 'i18n-calypso';
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
-import { A4A_REFERRALS_DASHBOARD } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
+import {
+	A4A_REFERRALS_DASHBOARD,
+	A4A_FEEDBACK_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { REFERRAL_EMAIL_QUERY_PARAM_KEY } from 'calypso/a8c-for-agencies/constants';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextInput from 'calypso/components/forms/form-text-input';
@@ -24,7 +28,6 @@ import useRequestClientPaymentMutation from '../hooks/use-request-client-payment
 import useShoppingCart from '../hooks/use-shopping-cart';
 import NoticeSummary from './notice-summary';
 import type { ShoppingCartItem } from '../types';
-
 interface Props {
 	checkoutItems: ShoppingCartItem[];
 }
@@ -133,17 +136,18 @@ function RequestClientPayment( { checkoutItems }: Props ) {
 		translate,
 	] );
 
-	const { isFeedbackShown } = useShowFeedback( 'referral-complete' );
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.ReferralCompleted );
 
 	useEffect( () => {
 		if ( isSuccess && !! email ) {
 			sessionStorage.setItem( MARKETPLACE_TYPE_SESSION_STORAGE_KEY, MARKETPLACE_TYPE_REGULAR );
 			page.redirect(
-				! isFeedbackShown
-					? addQueryArgs( A4A_REFERRALS_DASHBOARD, {
+				isFeedbackShown
+					? addQueryArgs( A4A_REFERRALS_DASHBOARD, { [ REFERRAL_EMAIL_QUERY_PARAM_KEY ]: email } )
+					: addQueryArgs( A4A_FEEDBACK_LINK, {
 							args: { email },
-					  } ) + '#feedback'
-					: addQueryArgs( A4A_REFERRALS_DASHBOARD, { [ REFERRAL_EMAIL_QUERY_PARAM_KEY ]: email } )
+							type: FeedbackType.ReferralCompleted,
+					  } )
 			);
 			setEmail( '' );
 			setMessage( '' );
diff --git a/client/a8c-for-agencies/sections/marketplace/download-products-form/index.tsx b/client/a8c-for-agencies/sections/marketplace/download-products-form/index.tsx
index 6aa3977c968d..3beff572ed7b 100644
--- a/client/a8c-for-agencies/sections/marketplace/download-products-form/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/download-products-form/index.tsx
@@ -1,11 +1,14 @@
 import page from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
-import { getQueryArg } from '@wordpress/url';
+import { getQueryArg, addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useEffect } from 'react';
+import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import {
 	A4A_LICENSES_LINK,
 	A4A_SITES_LINK,
+	A4A_FEEDBACK_LINK,
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useProductsQuery from 'calypso/a8c-for-agencies/data/marketplace/use-products-query';
 import {
@@ -23,6 +26,8 @@ export default function DownloadProductsForm() {
 	const sites = useSelector( getSites );
 	const { data: allProducts } = useProductsQuery();
 
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PurchaseCompleted );
+
 	const attachedSiteId = getQueryArg( window.location.href, 'attachedSiteId' ) as string;
 	const licenseKeys = getQueryArg( window.location.href, 'products' ) as string;
 	const source = getQueryArg( window.location.href, 'source' ) as string;
@@ -61,10 +66,29 @@ export default function DownloadProductsForm() {
 				allProducts={ allProducts }
 			/>
 		) );
-
-	const onNavigate = useCallback( () => {
-		return page.redirect( 'dashboard' === source ? A4A_SITES_LINK : A4A_LICENSES_LINK );
-	}, [ source ] );
+	const onNavigate = useCallback(
+		( showFeedback = true ) => {
+			const redirectUrl = 'dashboard' === source ? A4A_SITES_LINK : A4A_LICENSES_LINK;
+			const wooProduct = wooKeys?.[ 0 ];
+			const productSlug = getProductSlugFromLicenseKey( wooProduct );
+			const product = allProducts?.find(
+				( product ) => productSlug && product.slug.startsWith( productSlug )
+			);
+			// We want to show feedback only if product is not free and the user has not already submitted feedback
+			const isFreeProduct = product?.price_per_unit === 0;
+			if ( ! isFeedbackShown && showFeedback && ! isFreeProduct ) {
+				page.redirect(
+					addQueryArgs( A4A_FEEDBACK_LINK, {
+						redirectUrl: redirectUrl,
+						type: FeedbackType.PurchaseCompleted,
+					} )
+				);
+				return;
+			}
+			page.redirect( redirectUrl );
+		},
+		[ allProducts, isFeedbackShown, source, wooKeys ]
+	);
 
 	// redirect if licenseKeys does not contain a valid product
 	useEffect( () => {
@@ -80,7 +104,8 @@ export default function DownloadProductsForm() {
 		} );
 
 		if ( invalidKeys.length ) {
-			onNavigate();
+			// If there are invalid keys, we don't want to show feedback
+			onNavigate( false );
 		}
 	}, [ licenseKeys, allProducts, site, onNavigate ] );
 
@@ -100,7 +125,13 @@ export default function DownloadProductsForm() {
 						) }
 				</p>
 				<div className="download-products-form__controls">
-					<Button primary className="download-products-form__navigate" onClick={ onNavigate }>
+					<Button
+						primary
+						className="download-products-form__navigate"
+						onClick={ () => {
+							onNavigate();
+						} }
+					>
 						{ translate( 'Done' ) }
 					</Button>
 				</div>
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
index bad971a53fd9..f84e3262def4 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
@@ -136,7 +136,7 @@ function HostingOverviewV3( { section }: SectionProps ) {
 							items={ selectedCartItems }
 							onRemoveItem={ onRemoveCartItem }
 							onCheckout={ () => {
-								page( A4A_MARKETPLACE_CHECKOUT_LINK );
+								page.redirect( A4A_MARKETPLACE_CHECKOUT_LINK );
 							} }
 						/>
 
diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx b/client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx
index 5cdbb19f51d7..d8ca9c73968a 100644
--- a/client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx
@@ -2,11 +2,14 @@ import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import {
 	A4A_LICENSES_LINK,
 	A4A_SITES_LINK,
 	A4A_SITES_LINK_NEEDS_SETUP,
+	A4A_FEEDBACK_LINK,
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { AGENCY_FIRST_PURCHASE_SESSION_STORAGE_KEY } from 'calypso/a8c-for-agencies/constants';
 import useProductsQuery from 'calypso/a8c-for-agencies/data/marketplace/use-products-query';
@@ -92,11 +95,14 @@ function useIssueAndAssignLicenses(
 ) {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
+	const [ redirectWithFeedbackUrl, setRedirectWithFeedbackUrl ] = useState< string | null >( null );
 
 	const agency = useSelector( getActiveAgency );
 
 	const products = useProductsQuery();
 
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PurchaseCompleted );
+
 	const {
 		isReady: isIssueReady,
 		issueLicenses,
@@ -115,6 +121,17 @@ function useIssueAndAssignLicenses(
 
 	const getLicenseIssuedMessage = useGetLicenseIssuedMessage();
 
+	useEffect( () => {
+		if ( redirectWithFeedbackUrl ) {
+			page.redirect(
+				addQueryArgs( A4A_FEEDBACK_LINK, {
+					type: FeedbackType.PurchaseCompleted,
+					redirectUrl: redirectWithFeedbackUrl,
+				} )
+			);
+		}
+	}, [ redirectWithFeedbackUrl ] );
+
 	return useMemo( () => {
 		const isReady = isIssueReady && isAssignReady;
 
@@ -195,24 +212,30 @@ function useIssueAndAssignLicenses(
 			if ( fromDashboard ) {
 				const licenseItem =
 					products?.data?.find?.( ( p ) => p.slug === issuedLicenses[ 0 ].slug )?.name ?? '';
-				const message =
-					selectedSite?.domain && licenseItem
-						? translate(
-								'{{strong}}%(licenseItem)s{{/strong}} was successfully assigned to ' +
-									'{{em}}%(selectedSite)s{{/em}}. Please allow a few minutes ' +
-									'for your features to activate.',
-								{
-									args: { selectedSite: selectedSite.domain, licenseItem },
-									components: {
-										strong: <strong />,
-										em: <em />,
-									},
-								}
-						  )
-						: translate( 'Your license has been successfully issued and assigned to your site.' );
-				dispatch( successNotice( message, { displayOnNextPage: true } ) );
-
-				page.redirect( A4A_SITES_LINK );
+				if ( isFeedbackShown ) {
+					const message =
+						selectedSite?.domain && licenseItem
+							? translate(
+									'{{strong}}%(licenseItem)s{{/strong}} was successfully assigned to ' +
+										'{{em}}%(selectedSite)s{{/em}}. Please allow a few minutes ' +
+										'for your features to activate.',
+									{
+										args: { selectedSite: selectedSite.domain, licenseItem },
+										components: {
+											strong: <strong />,
+											em: <em />,
+										},
+									}
+							  )
+							: translate( 'Your license has been successfully issued and assigned to your site.' );
+					dispatch( successNotice( message, { displayOnNextPage: true } ) );
+				}
+
+				if ( isFeedbackShown ) {
+					page.redirect( A4A_SITES_LINK );
+				} else {
+					setRedirectWithFeedbackUrl( A4A_SITES_LINK );
+				}
 				return;
 			}
 
@@ -235,7 +258,11 @@ function useIssueAndAssignLicenses(
 			}
 
 			// Otherwise, send them to the overview of all licenses
-			page.redirect( A4A_LICENSES_LINK );
+			if ( isFeedbackShown ) {
+				page.redirect( A4A_LICENSES_LINK );
+			} else {
+				setRedirectWithFeedbackUrl( A4A_LICENSES_LINK );
+			}
 		};
 
 		return { issueAndAssignLicenses, isReady, isLoading: isIssueLoading || isAssignLoading };
@@ -254,6 +281,7 @@ function useIssueAndAssignLicenses(
 		agency?.tier,
 		isIssueLoading,
 		isAssignLoading,
+		isFeedbackShown,
 	] );
 }
 
diff --git a/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx b/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx
index c47f17651b58..b9643a72a10f 100644
--- a/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx
+++ b/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx
@@ -1,17 +1,21 @@
 import page from '@automattic/calypso-router';
 import { Button, SearchableDropdown } from '@automattic/components';
 import { TextareaControl, TextControl, ToggleControl } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback } from 'react';
-import { A4AFeedback } from 'calypso/a8c-for-agencies/components/a4a-feedback';
 import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import Form from 'calypso/a8c-for-agencies/components/form';
 import FormField from 'calypso/a8c-for-agencies/components/form/field';
 import validateEmail from 'calypso/a8c-for-agencies/components/form/hoc/with-error-handling/validators/email';
 import validateNonEmpty from 'calypso/a8c-for-agencies/components/form/hoc/with-error-handling/validators/non-empty';
 import validateUrl from 'calypso/a8c-for-agencies/components/form/hoc/with-error-handling/validators/url';
 import FormSection from 'calypso/a8c-for-agencies/components/form/section';
-import { A4A_PARTNER_DIRECTORY_DASHBOARD_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import {
+	A4A_PARTNER_DIRECTORY_DASHBOARD_LINK,
+	A4A_FEEDBACK_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import BudgetSelector from 'calypso/a8c-for-agencies/sections/partner-directory/components/budget-selector';
 import { AgencyDetails } from 'calypso/a8c-for-agencies/sections/partner-directory/types';
 import { reduxDispatch } from 'calypso/lib/redux-bridge';
@@ -44,8 +48,7 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 
 	const agency = useSelector( getActiveAgency );
 
-	const { showFeedback, isFeedbackShown, feedbackProps } =
-		useShowFeedback( 'agency-details-added' );
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PDDetailsAdded );
 
 	const onSubmitSuccess = useCallback(
 		( response: Agency ) => {
@@ -57,13 +60,13 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 					duration: 6000,
 				} )
 			);
-			! isFeedbackShown
-				? window.history.replaceState(
-						null,
-						'',
-						window.location.pathname + window.location.search + '#feedback'
-				  )
-				: page( A4A_PARTNER_DIRECTORY_DASHBOARD_LINK );
+			isFeedbackShown
+				? page( A4A_PARTNER_DIRECTORY_DASHBOARD_LINK )
+				: page(
+						addQueryArgs( A4A_FEEDBACK_LINK, {
+							type: FeedbackType.PDDetailsAdded,
+						} )
+				  );
 		},
 		[ agency, isFeedbackShown, translate ]
 	);
@@ -116,10 +119,6 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 		} );
 	};
 
-	if ( showFeedback ) {
-		return <A4AFeedback { ...feedbackProps } />;
-	}
-
 	return (
 		<Form
 			className="partner-directory-agency-details"
diff --git a/client/a8c-for-agencies/sections/purchases/licenses/license-preview/index.tsx b/client/a8c-for-agencies/sections/purchases/licenses/license-preview/index.tsx
index 64fb3bceb4db..9e6d7384e1cf 100644
--- a/client/a8c-for-agencies/sections/purchases/licenses/license-preview/index.tsx
+++ b/client/a8c-for-agencies/sections/purchases/licenses/license-preview/index.tsx
@@ -6,8 +6,14 @@ import { getQueryArg, removeQueryArgs } from '@wordpress/url';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useEffect, useState, useContext, useRef } from 'react';
+import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import A4APopover from 'calypso/a8c-for-agencies/components/a4a-popover';
-import { A4A_SITES_LINK_NEEDS_SETUP } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import {
+	A4A_SITES_LINK_NEEDS_SETUP,
+	A4A_FEEDBACK_LINK,
+	A4A_LICENSES_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import {
 	isPressableHostingProduct,
 	isWPCOMHostingProduct,
@@ -69,6 +75,8 @@ export default function LicensePreview( {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PurchaseCompleted );
+
 	const site = useSelector( ( state ) => getSite( state, blogId as number ) );
 	const isPressableLicense = isPressableHostingProduct( licenseKey );
 	const isWPCOMLicense = isWPCOMHostingProduct( licenseKey );
@@ -282,6 +290,19 @@ export default function LicensePreview( {
 										target="_blank"
 										rel="norefferer noopener noreferrer"
 										href={ pressableManageUrl }
+										onClick={ () => {
+											if ( ! isFeedbackShown ) {
+												page.redirect(
+													addQueryArgs(
+														{
+															type: FeedbackType.PurchaseCompleted,
+															redirectUrl: A4A_LICENSES_LINK,
+														},
+														A4A_FEEDBACK_LINK
+													)
+												);
+											}
+										} }
 									>
 										{ translate( 'Manage in Pressable' ) }
 										<Icon className="gridicon" icon={ external } size={ 18 } />
diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx
index 21c084d9a86f..6616adb096c5 100644
--- a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx
+++ b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx
@@ -3,8 +3,6 @@ import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useRef, useState } from 'react';
-import { A4AFeedback } from 'calypso/a8c-for-agencies/components/a4a-feedback';
-import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
 import {
 	DATAVIEWS_TABLE,
 	initialDataViewsState,
@@ -61,8 +59,6 @@ export default function ReferralsOverview( {
 		REFERRAL_EMAIL_QUERY_PARAM_KEY
 	);
 
-	const { showFeedback, feedbackProps } = useShowFeedback( 'referral-complete' );
-
 	const isDesktop = useDesktopBreakpoint();
 
 	const selectedItem = dataViewsState.selectedItem;
@@ -132,19 +128,15 @@ export default function ReferralsOverview( {
 				</LayoutTop>
 
 				<LayoutBody>
-					{ showFeedback ? (
-						<A4AFeedback { ...feedbackProps } />
-					) : (
-						<LayoutBodyContent
-							tipaltiData={ tipaltiData }
-							referrals={ referrals }
-							isLoading={ isLoading }
-							dataViewsState={ dataViewsState }
-							setDataViewsState={ setDataViewsState }
-							isArchiveView={ isArchiveView }
-							onReferralRefetch={ refetchReferrals }
-						/>
-					) }
+					<LayoutBodyContent
+						tipaltiData={ tipaltiData }
+						referrals={ referrals }
+						isLoading={ isLoading }
+						dataViewsState={ dataViewsState }
+						setDataViewsState={ setDataViewsState }
+						isArchiveView={ isArchiveView }
+						onReferralRefetch={ refetchReferrals }
+					/>
 				</LayoutBody>
 			</LayoutColumn>
 			{ dataViewsState.selectedItem && (
diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss
index c6708f0ba487..f91598faf90b 100644
--- a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss
+++ b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/style.scss
@@ -82,7 +82,7 @@ $data-view-border-color: #f1f1f1;
 		max-width: 700px;
 	}
 
-	.consolidated-view, .a4a-feedback__wrapper {
+	.consolidated-view {
 		padding: 16px;
 
 		@include breakpoint-deprecated( ">660px" ) {
diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx
index 10249b55ff0a..2cacd3c68109 100644
--- a/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx
+++ b/client/a8c-for-agencies/sections/sites/sites-dashboard/provisioning-site-notification.tsx
@@ -1,8 +1,15 @@
+import page from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
 import NoticeBanner from '@automattic/components/src/notice-banner';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
-import { A4A_SITES_LINK_DEVELOPMENT } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
+import {
+	A4A_SITES_LINK_DEVELOPMENT,
+	A4A_FEEDBACK_LINK,
+	A4A_SITES_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useIsSiteReady from 'calypso/a8c-for-agencies/data/sites/use-is-site-ready';
 import useTrackProvisioningSites from 'calypso/a8c-for-agencies/hooks/use-track-provisioning-sites';
 import { addQueryArgs } from 'calypso/lib/url';
@@ -30,6 +37,8 @@ function Banner( { siteId, migration, development, onDismiss }: BannerProps ) {
 		'https://wordpress.com/setup/hosted-site-migration/site-migration-identify'
 	);
 
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.PurchaseCompleted );
+
 	const readySiteMessage = development
 		? translate(
 				'{{a}}%(siteURL)s{{/a}} is now ready. It may take a few minutes for it to show up in the site list below. Before the site launches, you will be able to find it under {{developmentTabLink}}Development{{/developmentTabLink}}.',
@@ -58,6 +67,22 @@ function Banner( { siteId, migration, development, onDismiss }: BannerProps ) {
 		onDismiss?.();
 	};
 
+	const handleRedirectToFeedback = () => {
+		if ( isFeedbackShown ) {
+			return;
+		}
+		onClose();
+		page.redirect(
+			addQueryArgs(
+				{
+					type: FeedbackType.PurchaseCompleted,
+					redirectUrl: A4A_SITES_LINK,
+				},
+				A4A_FEEDBACK_LINK
+			)
+		);
+	};
+
 	return (
 		showBanner && (
 			<NoticeBanner
@@ -77,7 +102,13 @@ function Banner( { siteId, migration, development, onDismiss }: BannerProps ) {
 										{ translate( 'Migrate to this site' ) }
 									</Button>
 								) : (
-									<Button href={ wpOverviewUrl } target="_blank" rel="noreferrer" primary>
+									<Button
+										onClick={ handleRedirectToFeedback }
+										href={ wpOverviewUrl }
+										target="_blank"
+										rel="noreferrer"
+										primary
+									>
 										{ translate( 'Set up your site' ) }
 									</Button>
 								),
diff --git a/client/a8c-for-agencies/sections/team/primary/team-invite/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-invite/index.tsx
index 14eb889acf95..f3025c28d6b1 100644
--- a/client/a8c-for-agencies/sections/team/primary/team-invite/index.tsx
+++ b/client/a8c-for-agencies/sections/team/primary/team-invite/index.tsx
@@ -3,14 +3,17 @@ import { Button, TextControl, TextareaControl } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useState } from 'react';
-import { A4AFeedback } from 'calypso/a8c-for-agencies/components/a4a-feedback';
 import useShowFeedback from 'calypso/a8c-for-agencies/components/a4a-feedback/hooks/use-show-a4a-feedback';
+import { FeedbackType } from 'calypso/a8c-for-agencies/components/a4a-feedback/types';
 import Form from 'calypso/a8c-for-agencies/components/form';
 import FormField from 'calypso/a8c-for-agencies/components/form/field';
 import FormSection from 'calypso/a8c-for-agencies/components/form/section';
 import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/layout-with-payment-notification';
-import { A4A_TEAM_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import {
+	A4A_FEEDBACK_LINK,
+	A4A_TEAM_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useSendTeamMemberInvite from 'calypso/a8c-for-agencies/data/team/use-send-team-member-invite';
 import LayoutBody from 'calypso/layout/hosting-dashboard/body';
 import LayoutHeader, {
@@ -34,7 +37,7 @@ export default function TeamInvite() {
 
 	const { mutate: sendInvite, isPending: isSending } = useSendTeamMemberInvite();
 
-	const { showFeedback, isFeedbackShown, feedbackProps } = useShowFeedback( 'member-invite-sent' );
+	const { isFeedbackShown } = useShowFeedback( FeedbackType.MemberInviteSent );
 
 	const onSendInvite = useCallback( () => {
 		setError( '' );
@@ -67,15 +70,14 @@ export default function TeamInvite() {
 						} )
 					);
 					dispatch( recordTracksEvent( 'calypso_a4a_team_invite_success' ) );
-					! isFeedbackShown
-						? window.history.replaceState(
-								null,
-								'',
-								addQueryArgs( window.location.href, {
+					isFeedbackShown
+						? page.redirect( `${ A4A_TEAM_LINK }/${ TAB_INVITED_MEMBERS }` )
+						: page.redirect(
+								addQueryArgs( A4A_FEEDBACK_LINK, {
 									args: { email: username },
-								} ) + '#feedback'
-						  )
-						: page.redirect( `${ A4A_TEAM_LINK }/${ TAB_INVITED_MEMBERS }` );
+									type: FeedbackType.MemberInviteSent,
+								} )
+						  );
 				},
 
 				onError: ( error ) => {
@@ -108,64 +110,60 @@ export default function TeamInvite() {
 				</LayoutHeader>
 			</LayoutTop>
 			<LayoutBody>
-				{ showFeedback ? (
-					<A4AFeedback { ...feedbackProps } />
-				) : (
-					<Form
-						className="team-invite-form"
-						title={ translate( 'Invite a team member.' ) }
-						autocomplete="off"
-						description={ translate( 'Invite team members to manage client sites and purchases.' ) }
-					>
-						<FormSection title={ translate( 'Team member information' ) }>
-							<FormField
-								label={ translate( 'Email or WordPress.com Username' ) }
-								error={ error }
-								isRequired
-							>
-								<TextControl
-									type="text"
-									placeholder={ translate( 'team-member@example.com' ) }
-									value={ username }
-									onChange={ onUsernameChange }
-									onClick={ () =>
-										dispatch( recordTracksEvent( 'calypso_a4a_team_invite_username_click' ) )
-									}
-								/>
-							</FormField>
+				<Form
+					className="team-invite-form"
+					title={ translate( 'Invite a team member.' ) }
+					autocomplete="off"
+					description={ translate( 'Invite team members to manage client sites and purchases.' ) }
+				>
+					<FormSection title={ translate( 'Team member information' ) }>
+						<FormField
+							label={ translate( 'Email or WordPress.com Username' ) }
+							error={ error }
+							isRequired
+						>
+							<TextControl
+								type="text"
+								placeholder={ translate( 'team-member@example.com' ) }
+								value={ username }
+								onChange={ onUsernameChange }
+								onClick={ () =>
+									dispatch( recordTracksEvent( 'calypso_a4a_team_invite_username_click' ) )
+								}
+							/>
+						</FormField>
 
-							<FormField
-								label={ translate( 'Message' ) }
-								description={ translate(
-									'Optional: Include a custom message to provide more context to your team member.'
-								) }
-							>
-								<TextareaControl
-									value={ message }
-									onChange={ setMessage }
-									onClick={ () =>
-										dispatch( recordTracksEvent( 'calypso_a4a_team_invite_message_click' ) )
-									}
-								/>
-							</FormField>
-						</FormSection>
+						<FormField
+							label={ translate( 'Message' ) }
+							description={ translate(
+								'Optional: Include a custom message to provide more context to your team member.'
+							) }
+						>
+							<TextareaControl
+								value={ message }
+								onChange={ setMessage }
+								onClick={ () =>
+									dispatch( recordTracksEvent( 'calypso_a4a_team_invite_message_click' ) )
+								}
+							/>
+						</FormField>
+					</FormSection>
 
-						<div className="team-invite-form__required-information">
-							{ translate( '* Indicates a required field' ) }
-						</div>
+					<div className="team-invite-form__required-information">
+						{ translate( '* Indicates a required field' ) }
+					</div>
 
-						<div className="team-invite-form__footer">
-							<Button
-								variant="primary"
-								onClick={ onSendInvite }
-								disabled={ isSending }
-								isBusy={ isSending }
-							>
-								{ translate( 'Send invite' ) }
-							</Button>
-						</div>
-					</Form>
-				) }
+					<div className="team-invite-form__footer">
+						<Button
+							variant="primary"
+							onClick={ onSendInvite }
+							disabled={ isSending }
+							isBusy={ isSending }
+						>
+							{ translate( 'Send invite' ) }
+						</Button>
+					</div>
+				</Form>
 			</LayoutBody>
 		</Layout>
 	);
diff --git a/client/sections.js b/client/sections.js
index d163d30ddcb2..dab3cdac4a03 100644
--- a/client/sections.js
+++ b/client/sections.js
@@ -764,6 +764,12 @@ const sections = [
 		module: 'calypso/a8c-for-agencies/sections/landing',
 		group: 'a8c-for-agencies',
 	},
+	{
+		name: 'a8c-for-agencies-feedback',
+		paths: [ '/feedback' ],
+		module: 'calypso/a8c-for-agencies/sections/feedback',
+		group: 'a8c-for-agencies',
+	},
 	{
 		name: 'a8c-for-agencies-auth',
 		paths: [ '/connect', '/connect/oauth/token' ],
diff --git a/config/_shared.json b/config/_shared.json
index 1d7dec6ccaac..5d7e33534871 100644
--- a/config/_shared.json
+++ b/config/_shared.json
@@ -161,6 +161,7 @@
 		"a8c-for-agencies": false,
 		"a8c-for-agencies-auth": false,
 		"a8c-for-agencies-landing": false,
+		"a8c-for-agencies-feedback": false,
 		"a8c-for-agencies-overview": false,
 		"a8c-for-agencies-plugins": false,
 		"a8c-for-agencies-sites": false,
diff --git a/config/a8c-for-agencies-development.json b/config/a8c-for-agencies-development.json
index 742729427713..18f0c435a070 100644
--- a/config/a8c-for-agencies-development.json
+++ b/config/a8c-for-agencies-development.json
@@ -51,6 +51,7 @@
 		"a8c-for-agencies": true,
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
+		"a8c-for-agencies-feedback": true,
 		"a8c-for-agencies-overview": true,
 		"a8c-for-agencies-plugins": true,
 		"a8c-for-agencies-sites": true,
diff --git a/config/a8c-for-agencies-horizon.json b/config/a8c-for-agencies-horizon.json
index 01294af5bfd4..f11853601415 100644
--- a/config/a8c-for-agencies-horizon.json
+++ b/config/a8c-for-agencies-horizon.json
@@ -44,6 +44,7 @@
 		"a8c-for-agencies": true,
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
+		"a8c-for-agencies-feedback": true,
 		"a8c-for-agencies-overview": true,
 		"a8c-for-agencies-plugins": true,
 		"a8c-for-agencies-sites": true,
diff --git a/config/a8c-for-agencies-production.json b/config/a8c-for-agencies-production.json
index 7736ace2a14c..8c1e4c5090fa 100644
--- a/config/a8c-for-agencies-production.json
+++ b/config/a8c-for-agencies-production.json
@@ -44,6 +44,7 @@
 		"a8c-for-agencies": true,
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
+		"a8c-for-agencies-feedback": true,
 		"a8c-for-agencies-overview": true,
 		"a8c-for-agencies-plugins": true,
 		"a8c-for-agencies-sites": true,
diff --git a/config/a8c-for-agencies-stage.json b/config/a8c-for-agencies-stage.json
index b59128abf44d..b9b0e76579c0 100644
--- a/config/a8c-for-agencies-stage.json
+++ b/config/a8c-for-agencies-stage.json
@@ -46,6 +46,7 @@
 		"a8c-for-agencies": true,
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
+		"a8c-for-agencies-feedback": true,
 		"a8c-for-agencies-overview": true,
 		"a8c-for-agencies-plugins": true,
 		"a8c-for-agencies-sites": true,


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: 

Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.

<details>
<summary>Files not reviewed (1)</summary>

* **client/a8c-for-agencies/components/a4a-feedback/style.scss**: Language not supported
</details>

<details>
<summary>Comments suppressed due to low confidence (2)</summary>

**client/a8c-for-agencies/lib/permission.ts:116**
* The updated regex pattern for 'marketplace' is more permissive and may unintentionally match URLs that are not meant to be handled by this path. Please verify that it covers all intended cases and does not capture unintended formats.
```
marketplace: /^\/marketplace\/[^/]+(\/[ ^/]+)?(\/.*)?(\?.*)?(#.*)?$/,
```
**client/a8c-for-agencies/components/a4a-feedback/index.tsx:109**
* [nitpick] Consider whether mapping the suggestion objects to their 'text' property is intentional or if the 'value' property might be a more consistent choice for the feedback payload.
```
suggestions: suggestions.map( ( suggestion ) => suggestion.text ),
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T06:00:00Z
user: login: yashwin
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T06:27:11Z
user: login: yashwin
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T06:28:23Z
user: login: copilot-pull-request-reviewer[bot]
body: 

Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.

<details>
<summary>Files not reviewed (1)</summary>

* **client/a8c-for-agencies/components/a4a-feedback/style.scss**: Language not supported
</details>

<details>
<summary>Comments suppressed due to low confidence (2)</summary>

**client/a8c-for-agencies/components/a4a-feedback/index.tsx:89**
* [nitpick] The label 'Share your suggestions' may be ambiguous when used alongside the checkbox controls for structured feedback. Consider updating the label to more clearly differentiate between selecting suggestions and providing additional free-text feedback.
```
<FormLabel className="a4a-feedback__comments-label" htmlFor="comments">
```
**client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx:199**
* Ensure that redirectUrl is valid and properly encoded when concatenated with additional query parameters and hash fragments to avoid malformed URLs.
```
page.redirect( redirectUrl );
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T06:37:09Z
user: login: madebynoam
body: Thanks for this, @yashwin! 
Overall it looks good but we're missing a few visual details, uDy4bMwOiyDaQLiDeemNTv-fi-8657_5091.

1. The page BG should be #F8F8F8.
2. The icon buttons don't look like the latest pass. They should not have a fill. Just the outline if selected. And the colors should now be System colors.
3. The padding in of the form container looks off at the top.
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T11:37:20Z
user: login: madebynoam
body: @yashwin and I discussed that we'll tackle the updates to the emotion control in the next cycle, and use what we have currently to ship. And we'll tackle the page BG and padding in this release. 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T13:01:16Z
user: login: jkguidaven
body: Overall looks good to me. I left minor comments which are non-blocking. 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T14:37:43Z
user: login: jkguidaven
body: Thanks for applying my suggestion. Retested some flow and didn't find any issues. The changes also LGTM. Nice work! 👏 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T07:58:17Z
user: login: jkguidaven
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T10:53:30Z
user: login: jeffgolenski
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-09T16:09:26Z
user: login: jeffgolenski
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-09T16:09:32Z

Review comments:
diff_hunk: @@ -113,7 +113,7 @@ const MEMBER_ACCESSIBLE_DYNAMIC_PATHS: Record< string, string[] > = {
 
 const DYNAMIC_PATH_PATTERNS: Record< string, RegExp > = {
 	'sites-overview': /^\/sites\/overview\/[^/]+(\/.*)?$/,
-	marketplace: /^\/marketplace\/[^/]+\/[^/]+(\/.*)?$/,
+	marketplace: /^\/marketplace\/[^/]+(\/[^/]+)?(\/.*)?(\?.*)?(#.*)?$/,
path: client/a8c-for-agencies/lib/permission.ts
user: login: yashwin
body: To support URLs required for feedback
created_at: 2025-04-04T06:27:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -136,7 +136,7 @@ function HostingOverviewV3( { section }: SectionProps ) {
 							items={ selectedCartItems }
 							onRemoveItem={ onRemoveCartItem }
 							onCheckout={ () => {
-								page( A4A_MARKETPLACE_CHECKOUT_LINK );
+								page.redirect( A4A_MARKETPLACE_CHECKOUT_LINK );
path: client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
user: login: yashwin
body: To make sure the pathname is updated accurately. 
created_at: 2025-04-04T06:28:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -16,28 +16,34 @@ export interface Props extends FeedbackProps {
 	onSkip: () => void;
 }
 
-export function A4AFeedback( {
-	title,
-	description,
-	questionDetails,
-	ctaText,
-	onSubmit,
-	onSkip,
-}: Props ) {
+export function A4AFeedback( { title, description, suggestion, onSubmit, onSkip }: Props ) {
 	const translate = useTranslate();
 	const [ experience, setExperience ] = useState< string >( 'good' );
 	const [ comments, setComments ] = useState< string >( '' );
+	const [ suggestions, setSuggestions ] = useState< FeedbackSuggestion[] >( [] );
+
+	const onSuggestionChange = ( option: FeedbackSuggestion ) => {
+		if ( suggestions.find( ( suggestion ) => suggestion.value === option.value ) ) {
+			setSuggestions( ( prev ) =>
+				prev.filter( ( suggestion ) => suggestion.value !== option.value )
+			);
+		} else {
+			setSuggestions( ( prev ) => [ ...prev, option ] );
+		}
path: client/a8c-for-agencies/components/a4a-feedback/index.tsx
user: login: jkguidaven
body: Nitpicking: So it is clearer what this line of code is doing.  

```
// Toggle suggestion selection: remove if already selected, add if not
		setSuggestions( ( prev ) => {
			const isSelected = prev.some( ( suggestion ) => suggestion.value === option.value );
			return isSelected
				? prev.filter( ( suggestion ) => suggestion.value !== option.value )
				: [ ...prev, option ];
		} );
```
created_at: 2025-04-07T14:02:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -235,7 +262,11 @@ function useIssueAndAssignLicenses(
 			}
 
 			// Otherwise, send them to the overview of all licenses
path: client/a8c-for-agencies/sections/marketplace/products-overview-v2/hooks/use-issue-and-assign-licenses.tsx
user: login: jkguidaven
body: Can we move this closer to the `page.redirect` and not above the if condition?
created_at: 2025-04-07T14:04:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -8,17 +8,24 @@ $highlight-color: #3858E9;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+
+	.form-fieldset {
+		margin-block-end: 0;
+	}
 }
 
 .a4a-feedback__content {
-	padding-block-start: 32px;
+	margin-block-start: calc(48px + 8px);
path: client/a8c-for-agencies/components/a4a-feedback/style.scss
user: login: jeffgolenski
body: Look at you, gettin' fancy with calc! 
created_at: 2025-04-09T16:09:26Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-04T05:59:52Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140139%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139">https://calypso.live?image=registry.a8c.com/calypso/app:build-140139</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140139%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-140139%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-140139&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-04-04T06:00:27Z
body: <!-- icfy-watermark: c52822 -->
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

**App Entrypoints** (~201 bytes added 📈 [gzipped])
<details>

```
name                   parsed_size           gzip_size
entry-main                 +1740 B  (+0.1%)     +201 B  (+0.0%)
entry-subscriptions          +94 B  (+0.0%)     +107 B  (+0.0%)
entry-login                  +94 B  (+0.0%)     +107 B  (+0.0%)
entry-domains-landing        +94 B  (+0.0%)     +107 B  (+0.1%)
entry-browsehappy            +94 B  (+0.0%)     +107 B  (+0.2%)
```

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.
</details>

**Sections** (~36386 bytes added 📈 [gzipped])
<details>

```
name                                parsed_size           gzip_size
a8c-for-agencies-feedback             +179465 B    (new)   +56843 B    (new)
a8c-for-agencies-woopayments           +33241 B  (+3.7%)   +10847 B  (+4.6%)
a8c-for-agencies-purchases              +6906 B  (+0.9%)     +277 B  (+0.1%)
a8c-for-agencies-referrals              -6540 B  (-0.7%)    -2809 B  (-1.1%)
a8c-for-agencies-sites                  +6318 B  (+0.3%)    +1015 B  (+0.1%)
a8c-for-agencies-marketplace            +3107 B  (+0.4%)     +754 B  (+0.3%)
a8c-for-agencies-client                 +2364 B  (+0.2%)     +156 B  (+0.0%)
a8c-for-agencies-team                    -571 B  (-0.1%)     -965 B  (-0.4%)
a8c-for-agencies-partner-directory       -330 B  (-0.1%)      -95 B  (-0.1%)
a8c-for-agencies-overview                -199 B  (-0.0%)    -1735 B  (-0.6%)
a8c-for-agencies                          -97 B  (-0.1%)     -406 B  (-1.1%)
a8c-for-agencies-settings                 -96 B  (-0.0%)     -344 B  (-0.5%)
a8c-for-agencies-migrations               -96 B  (-0.0%)    -1140 B  (-0.5%)
a8c-for-agencies-agency-tier              -96 B  (-0.0%)     -559 B  (-0.8%)
scan                                      +25 B  (+0.0%)      +13 B  (+0.0%)
jetpack-social                            +25 B  (+0.0%)      +13 B  (+0.0%)
jetpack-search                            +25 B  (+0.0%)      +16 B  (+0.0%)
jetpack-cloud-agency-dashboard            +25 B  (+0.0%)       -7 B  (-0.0%)
backup                                    +25 B  (+0.0%)       -4 B  (-0.0%)
a8c-for-agencies-signup                   +25 B  (+0.0%)      +17 B  (+0.0%)
a8c-for-agencies-landing                  +25 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-plugin-management           +13 B  (+0.0%)      +30 B  (+0.0%)
```

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.
</details>

**Legend**
<details>
<summary>What is parsed and gzip size?</summary>

**Parsed Size:** Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
**Gzip Size:** Compressed size of the JS and CSS files. This much data needs to be downloaded over network.
</details>

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-04-04T06:52:18Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* help-center
* notifications
* odyssey-stats
* wpcom-block-editor

To test WordPress.com changes, run `install-plugin.sh $pluginSlug update/a4a/feedback/update-contextual-feedback` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: yashwin
created_at: 2025-04-07T14:07:49Z
body: Thanks for the review, @madebynoam!

I have fixed the padding issue. Regarding the background, as discussed, it is a bit tricky to achieve this. So, we will skip if for the initial push. 
author_association: CONTRIBUTOR
user: login: jeffgolenski
created_at: 2025-04-07T21:14:37Z
body: Thanks @yashwin! Aside from @madebynoam's feedback, I just have a couple of thoughts:

* All flows: After an action is conducted and we display the feedback prompt, can we hide the page header when the feedback prompt is visible? I'd like to keep the feedback prompt as focused as possible IE: For Referrals, can we hide "Your referrals and commissions"?
* For referrals specifically, can we also hide the notice to add payment methods until after the feedback prompt? We'll display that right after on the referrals dashboard, anyway. 
* For referrals: The sentence "Assign products to a site after they pay" feels a little strange in this location. Can we alter that to say "We emailed your referral order to [email]. You can assign your products to a site or set up hosting once they pay."

![CleanShot 2025-04-07 at 16 39 55](https://github.com/user-attachments/assets/a3964442-29b3-4b69-ab11-a8662f646423)

* Follow up for referrals UI: I also noticed that after I fill out and send the feedback, the referrals UI has a regression on wide screens. Some alignment issues—especially with the 4 cards above the table.

![CleanShot 2025-04-07 at 16 41 11](https://github.com/user-attachments/assets/c3cbef18-da26-40b3-a03e-e932197ce632)

### Purchase flow adjustments

* The mechanism works well, but doesn't display in the flow where it should. Details: pgjTho-dq-p2#comment-244. 

* We should only show this for non-free products and hosting. 

**Flow for paid products**

* It should display after license assignment for products. Example: User buys a Woo ext, assigns it, we show this download screen. Once they click "done" we take them to /purchases/licenses and that's when we should show it. 

![CleanShot 2025-04-07 at 17 00 21](https://github.com/user-attachments/assets/b75017c6-124e-47db-b005-e189a4178b10)

**Flow for hosting**

Here's a video to explain what I mean! Let me know if it's too challenging. 

https://github.com/user-attachments/assets/b03d5275-1d08-4f93-8ec6-1d080435ec49



* The prompts should only display after a hosting product is "set up".  We want to ensure we're capturing feedback to deliver to WordPress.com and Pressable, as well. 

* For WordPress.com, after they click "Create site" and configure things, we begin to spin up an instance. Then we ask them to set up their site. After they set up their site in a new tab, they should return to A4A. That's when we should display the feedback prompt. 
* Same for Pressable plan set ups, respectfully.





author_association: MEMBER
user: login: yashwin
created_at: 2025-04-08T07:12:12Z
body: Thanks for the review & feedback, everyone!

There is a significant change in the logic and feedback is rendered now. So, could you please do a fresh review? I have updated the testing instructions according to the new changes:

Updates are done as per @jeffgolenski's comment:

> All flows: After an action is conducted and we display the feedback prompt, can we hide the page header when the feedback prompt is visible? I'd like to keep the feedback prompt as focused as possible IE: For Referrals, can we hide "Your referrals and commissions"?

> For referrals specifically, can we also hide the notice to add payment methods until after the feedback prompt? We'll display that right after on the referrals dashboard, anyway.

Updated the way the feedback is rendered as per @jkguidaven's suggestion and we now have a separate page for the feedback. This makes it easy to remove the page header and the banners.

> For referrals: The sentence "Assign products to a site after they pay" feels a little strange in this location. Can we alter that to say "We emailed your referral order to [email]. You can assign your products to a site or set up hosting once they pay."

Done. 

> Follow up for referrals UI: I also noticed that after I fill out and send the feedback, the referrals UI has a regression on wide screens. Some alignment issues—especially with the 4 cards above the table.

Fixed 👍 

> The mechanism works well, but doesn't display in the flow where it should. Details: pgjTho-dq-p2#comment-244.
> We should only show this for non-free products and hosting.
> Flow for paid products
> It should display after license assignment for products. Example: User buys a Woo ext, assigns it, we show this download screen. Once they click "done" we take them to /purchases/licenses and that's when we should show it.

Done

> Flow for hosting
> The prompts should only display after a hosting product is "set up". We want to ensure we're capturing feedback to deliver to WordPress.com and Pressable, as well.
> For WordPress.com, after they click "Create site" and configure things, we begin to spin up an instance. Then we ask them to set up their site. After they set up their site in a new tab, they should return to A4A. That's when we should display the feedback prompt.
> Same for Pressable plan set ups, respectfully.

All done. 


author_association: CONTRIBUTOR
user: login: jeffgolenski
created_at: 2025-04-09T16:08:05Z
body: Just tested again @yashwin. Awesome work. The stand-alone page for the feedback prompt is great! The prompt also now displays properly after hosting set up. SO GOOD. Thank you. Two last things I noticed:

* The "Thank you, we'll use this feedback to prioritize..." notice seems to disappear really quickly. Can we adjust that timeframe a bit so users have a moment to read it?
* For maintenance outside of this project: The referral header seems to have a regression. I seem to a recall a primary CTA in that header. "Send a new referral" that would take the user to the marketplace with referral mode toggled on. Did I imagine that? 😆  It's gone now. cc @madebynoam 

![CleanShot 2025-04-09 at 12 06 54](https://github.com/user-attachments/assets/86cf4e84-6ea3-4c66-b51f-0fca448fc701)

author_association: MEMBER
user: login: a8ci18n
created_at: 2025-04-10T07:23:13Z
body: This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17376131

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @yashwin for including a screenshot in the description! This is really helpful for our translators.
author_association: NONE
user: login: yashwin
created_at: 2025-04-10T09:15:23Z
body: > Just tested again @yashwin. Awesome work. The stand-alone page for the feedback prompt is great! The prompt also now displays properly after hosting set up. SO GOOD. Thank you. Two last things I noticed:

Thank you, Jeff!

> * The "Thank you, we'll use this feedback to prioritize..." notice seems to disappear really quickly. Can we adjust that timeframe a bit so users have a moment to read it?

Yes, I made it 10 seconds before shipping!

> * For maintenance outside of this project: The referral header seems to have a regression. I seem to a recall a primary CTA in that header. "Send a new referral" that would take the user to the marketplace with referral mode toggled on. Did I imagine that? 😆  It's gone now. cc @madebynoam

This is hidden mostly because the payout method has not been added. @jkguidaven, IIRC, we enabled Referrals even if the payout method is not added. 

author_association: CONTRIBUTOR