Help Center: Fix article feedback in /sites (#98537)

Automattic · Jan 22, 2025 · 3b4063a · 3b4063a
1 parent f620850
commit 3b4063a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 52 deletions.
diff --git a/packages/help-center/src/components/help-center-feedback-form.tsx b/packages/help-center/src/components/help-center-feedback-form.tsx
@@ -20,7 +20,7 @@ const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 
 	const { data } = useSupportStatus();
 	const isUserEligibleForPaidSupport = Boolean( data?.eligibility?.is_user_eligible );
-	const { site } = useHelpCenterContext();
+	const { canConnectToZendesk } = useHelpCenterContext();
 	const navigate = useNavigate();
 	const resetSupportInteraction = useResetSupportInteraction();
 	const { startNewInteraction } = useManageSupportInteraction();
@@ -80,7 +80,7 @@ const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 			{ startedFeedback !== null && answerValue === 1 && (
 				<p>{ __( 'Great! Thanks.', __i18n_text_domain__ ) }</p>
 			) }
-			{ startedFeedback !== null && answerValue === 2 && site && (
+			{ startedFeedback !== null && answerValue === 2 && (
 				<>
 					<div className="odie-chatbox-dislike-feedback-message">
 						<p>
@@ -93,6 +93,7 @@ const HelpCenterFeedbackForm = ( { postId }: { postId: number } ) => {
 					<GetSupport
 						onClickAdditionalEvent={ handleContactSupportClick }
 						isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
+						canConnectToZendesk={ canConnectToZendesk }
 					/>
 				</>
 			) }

diff --git a/packages/odie-client/src/components/message/get-support.scss b/packages/odie-client/src/components/message/get-support.scss
@@ -1,38 +1,56 @@
+.help-center__container-chat .chatbox-messages,
+.help-center-article-content .help-center-feedback__form {
+	.odie__transfer-chat {
+		display: flex;
+		width: 100%;
+		padding-bottom: 16px;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
 
+		.odie__transfer-chat--button-container {
+			display: flex;
+			gap: 8px;
 
-.help-center__container-chat .chatbox-messages .odie__transfer-chat,
-.help-center-article-content .help-center-feedback__form .odie__transfer-chat {
-	display: flex;
-	width: 100%;
-	padding-bottom: 16px;
+			.odie__transfer-chat--wait-time {
+				font-size: 0.75rem;
+				color: var( --studio-gray-50 );
+				align-content: center;
+			}
+		}
 
-	button {
-		border-radius: 2px;
-		border: 1px solid var(--studio-gray-10);
-		background: var(--studio-white);
-		display: flex;
-		height: 40px;
-		padding: 8px 14px;
-		justify-content: center;
-		align-items: center;
-		gap: 4px;
-		color: var(--studio-gray-70);
+		button {
+			border-radius: 2px;
+			border: 1px solid var( --studio-gray-10 );
+			background: var( --studio-white );
+			display: flex;
+			height: 40px;
+			padding: 8px 14px;
+			justify-content: center;
+			align-items: center;
+			gap: 4px;
+			color: var( --studio-gray-70 );
 
-		&:hover {
-			border: 1px solid var(--studio-gray-20);
-			cursor: pointer;
-		}
+			&:hover {
+				border: 1px solid var( --studio-gray-20 );
+				cursor: pointer;
+			}
 
-		&:focus,
-		&:active {
-			outline: none;
+			&:focus,
+			&:active {
+				outline: none;
+			}
 		}
 	}
+
+	.help-center__cookie-warning {
+		margin-top: 16px;
+	}
 }
 
 .help-center__cookie-warning {
-	background-color: var(--studio-yellow-0);
-	border-left: 4px solid var(--studio-yellow-20);
+	background-color: var( --studio-yellow-0 );
+	border-left: 4px solid var( --studio-yellow-20 );
 	padding: 8px 16px;
 	margin-bottom: 30px;
 
@@ -41,26 +59,6 @@
 	}
 }
 
-.help-center__container-chat .chatbox-messages {
-	.odie__transfer-chat {
-		margin-left: 46px;
-		flex-direction: column;
-    	align-items: flex-start;
-		gap: 8px;
-
-		.odie__transfer-chat--button-container {
-			display: flex;
-			gap: 8px;
-
-			.odie__transfer-chat--wait-time {
-				font-size: 0.75rem;	
-				color: var(--studio-gray-50);
-				align-content: center;
-			}
-		}
-	}
-
-	.help-center__cookie-warning {
-		margin-top: 16px;
-	}
-}
+.help-center__container-chat .chatbox-messages .odie__transfer-chat {
+	margin-left: 46px;
+}
diff --git a/packages/odie-client/src/components/message/get-support.tsx b/packages/odie-client/src/components/message/get-support.tsx
@@ -9,6 +9,7 @@ import './get-support.scss';
 interface GetSupportProps {
 	onClickAdditionalEvent?: ( destination: string ) => void;
 	isUserEligibleForPaidSupport?: boolean;
+	canConnectToZendesk?: boolean;
 }
 
 interface ButtonConfig {
@@ -43,13 +44,14 @@ export const NewThirdPartyCookiesNotice: React.FC = () => {
 export const GetSupport: React.FC< GetSupportProps > = ( {
 	onClickAdditionalEvent,
 	isUserEligibleForPaidSupport,
+	canConnectToZendesk = false,
 } ) => {
 	const navigate = useNavigate();
 	const newConversation = useCreateZendeskConversation();
 	const {
 		chat,
 		isUserEligibleForPaidSupport: contextIsUserEligibleForPaidSupport,
-		canConnectToZendesk,
+		canConnectToZendesk: contextCanConnectToZendesk,
 	} = useOdieAssistantContext();
 	const isEnglishLocale = useIsEnglishLocale();
 
@@ -59,7 +61,7 @@ export const GetSupport: React.FC< GetSupportProps > = ( {
 	}
 
 	if (
-		! canConnectToZendesk &&
+		! ( canConnectToZendesk || contextCanConnectToZendesk ) &&
 		( isUserEligibleForPaidSupport || contextIsUserEligibleForPaidSupport )
 	) {
 		return <NewThirdPartyCookiesNotice />;