Updates the copy for the introduction and consent modals

css/src/introductions.css

@@ -1,3 +1,6 @@
+@import url(../src/icons.css);
+@import url(../../packages/components/src/base/colors.css);
+
 .yst-root {
 	.yst-introduction-modal .yst-modal__close-button {
 		@apply
@@ -9,8 +12,22 @@
 	.yst-introduction-modal-panel {
         background-image: linear-gradient(180deg, rgba(166, 30, 105, 0.25) 10%, rgba(255, 255, 255, 0.25) 50%);
 	}
-	.yst-introduction-modal-uppercase{
+
+	.yst-introduction-gradient {
+		background: linear-gradient(180deg, rgba(166, 30, 105, 0.25) 10%, rgba(255, 255, 255, 0) 80%);
+	}
+	.yst-introduction-modal-uppercase {
 		letter-spacing: 0.8px;
 		@apply yst-uppercase yst-text-slate-500;
 	}
+
+	.yst-logo-icon {
+		background-color: var(--yoast-color-primary);
+		mask-image: var(--yoast-svg-icon-yoast);
+		-webkit-mask-image: var(--yoast-svg-icon-yoast);
+		mask-size: 100% 100%;
+		-webkit-mask-size: 100% 100%;
+		width: 17px;
+		height: 17px;
+	}
 }

packages/js/src/ai-assessment-fixes/components/modal-content.js

@@ -10,7 +10,7 @@ const STORE = "yoast-seo/editor";
  * @returns {JSX.Element} The element.
  */
 export const ModalContent = () => {
-	const learnMoreLink = useSelect( select => select( STORE ).selectLink( "https://yoa.st/ai-fix-assessments-learn-more" ), [] );
+	const learnMoreLink = useSelect( select => select( STORE ).selectLink( "https://yoa.st/ai-fix-assessments-upsell-learn-more" ), [] );
 	const upsellLinkPremium = useSelect( select => select( STORE ).selectLink( "https://yoa.st/ai-fix-assessments-upsell" ), [] );
 
 	const postModalprops = {
@@ -23,7 +23,7 @@ export const ModalContent = () => {
 		),
 	};
 
-	const imageLink = useSelect( select => select( STORE ).selectImageLink( "ai-generator-preview.png" ), [] );
+	const imageLink = useSelect( select => select( STORE ).selectImageLink( "ai-fix-assessments-thumbnail.png" ), [] );
 	const thumbnail = useMemo( () => ( {
 		src: imageLink,
 		width: "432",

packages/js/src/ai-generator/initialize.js

@@ -32,7 +32,7 @@ const AiGeneratorUpsell = ( { fieldId } ) => {
 				{ __( "Use AI", "wordpress-seo" ) }
 			</button>
 			<Modal className="yst-introduction-modal" isOpen={ isModalOpen } onClose={ setIsModalOpenFalse } initialFocus={ focusElementRef }>
-				<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
+				<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl">
 					<ModalContent onClose={ setIsModalOpenFalse } focusElementRef={ focusElementRef } />
 				</Modal.Panel>
 			</Modal>

packages/js/src/introductions/components/content.js

@@ -10,7 +10,7 @@ export const Content = () => {
 	const learnMoreLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/ai-fix-assessments-upsell-learn-more" ), [] );
 	const upsellLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/ai-fix-assessments-upsell" ), [] );
 
-	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-generator-preview.png" ), [] );
+	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-fix-assessments-thumbnail.png" ), [] );
 	const thumbnail = useMemo( () => ( {
 		src: imageLink,
 		width: "432",

packages/js/src/introductions/components/modal.js

@@ -22,7 +22,7 @@ export const Modal = ( { children } ) => {
 			onClose={ handleClose }
 			initialFocus={ initialFocusRef }
 		>
-			<PureModal.Panel className="yst-max-w-lg yst-p-0 yst-bg-gradient-to-b yst-from-[#EDD2E1] yst-rounded-3xl">
+			<PureModal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl">
 				{ children }
 			</PureModal.Panel>
 		</PureModal>

packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js

@@ -11,21 +11,15 @@ import { OutboundLink, VideoFlow } from ".";
  * @param {Object} thumbnail The thumbnail: img props.
  * @param {Object} wistiaEmbedPermission The value, status and set for the Wistia embed permission.
  * @param {string} upsellLink The upsell link.
- * @param {string} title The title.
  * @param {string} upsellLabel The upsell label.
- * @param {string} newToText The new to text.
- * @param {string|JSX.Element } bundleNote The bundle note.
  * @returns {JSX.Element} The element.
  */
 export const AiFixAssessmentsUpsell = ( {
 	learnMoreLink,
 	thumbnail,
 	wistiaEmbedPermission,
 	upsellLink,
-	title,
 	upsellLabel,
-	newToText,
-	bundleNote,
 } ) => {
 	const { onClose, initialFocus } = useModalContext();
 
@@ -40,70 +34,82 @@ export const AiFixAssessmentsUpsell = ( {
 	};
 
 	return (
-		<div className="yst-flex yst-flex-col yst-items-center yst-p-10">
-			<div className="yst-relative yst-w-full">
-				<VideoFlow
-					videoId="vmrahpfjxp"
-					thumbnail={ thumbnail }
-					wistiaEmbedPermission={ wistiaEmbedPermission }
-				/>
-				<Badge className="yst-absolute yst-top-0 yst-right-2 yst-mt-2 yst-ml-2" variant="info">Beta</Badge>
-			</div>
-			<div className="yst-mt-6 yst-text-xs yst-font-medium">
-				<span className="yst-introduction-modal-uppercase">
-					{ newToText }
-				</span>
+		<>
+			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
+				<div className="yst-relative yst-w-full">
+					<VideoFlow
+						videoId="vmrahpfjxp"
+						thumbnail={ thumbnail }
+						wistiaEmbedPermission={ wistiaEmbedPermission }
+					/>
+					<Badge className="yst-absolute yst-right-0 yst-mr-4 yst-text-center yst-justify-center" variant="info" style={ { top: "-8px" } }>
+						{ __( "Beta", "wordpress-seo-premium" ) }
+					</Badge>
+				</div>
+				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
+					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
+						<span className="yst-logo-icon" />
+						Yoast SEO Premium
+					</span>
+				</div>
 			</div>
-			<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
-				<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
-					{ title }
-				</h3>
-				<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
-					{ createInterpolateElement(
+			<div className="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center">
+				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
+					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
+						{ 
+						/* translators: %s: Yoast AI */
 						sprintf(
-							/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
-							__(
-								"Let AI fix assessments. %1$sLearn more%2$s%3$s",
-								"wordpress-seo"
+							__( "Optimize your SEO content with %s", "wordpress-seo" ),
+							"Yoast AI"
+						)
+						}
+					</h3>
+					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
+								__(
+									"Tired of editing your content to get good scores? Upgrade to access our AI features. Receive recommendations to optimize your content with just one click. %1$sLearn more%2$s%3$s",
+									"wordpress-seo"
+								),
+								"<a>",
+								"<ArrowNarrowRightIcon />",
+								"</a>"
 							),
-							"<a>",
-							"<ArrowNarrowRightIcon />",
-							"</a>"
-						),
-						learnMoreLinkStructure
-					  ) }
+							learnMoreLinkStructure
+						) }
+					</div>
+				</div>
+				<div className="yst-w-full yst-flex yst-mt-6">
+					<Button
+						as="a"
+						className="yst-grow"
+						size="extra-large"
+						variant="upsell"
+						href={ upsellLink }
+						target="_blank"
+						ref={ initialFocus }
+					>
+						<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
+						{ upsellLabel }
+						<span className="yst-sr-only">
+							{
+								/* translators: Hidden accessibility text. */
+								__( "(Opens in a new browser tab)", "wordpress-seo" )
+							}
+						</span>
+					</Button>
 				</div>
-			</div>
-			<div className="yst-w-full yst-flex yst-mt-10">
 				<Button
 					as="a"
-					className="yst-grow"
-					size="extra-large"
-					variant="upsell"
-					href={ upsellLink }
-					target="_blank"
-					ref={ initialFocus }
+					className="yst-mt-4"
+					variant="tertiary"
+					onClick={ onClose }
 				>
-					<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
-					{ upsellLabel }
-					<span className="yst-sr-only">
-						{
-							/* translators: Hidden accessibility text. */
-							__( "(Opens in a new browser tab)", "wordpress-seo" )
-						}
-					</span>
+					{ __( "Close", "wordpress-seo" ) }
 				</Button>
 			</div>
-			{ bundleNote }
-			<Button
-				as="a"
-				className="yst-mt-4"
-				variant="tertiary"
-				onClick={ onClose }
-			>
-				{ __( "Close", "wordpress-seo" ) }
-			</Button>
-		</div>
+		</>
 	);
 };
 AiFixAssessmentsUpsell.propTypes = {
@@ -119,26 +125,13 @@ AiFixAssessmentsUpsell.propTypes = {
 		status: PropTypes.string.isRequired,
 		set: PropTypes.func.isRequired,
 	} ).isRequired,
-	title: PropTypes.string,
 	upsellLabel: PropTypes.string,
-	newToText: PropTypes.string,
-	bundleNote: PropTypes.oneOfType( [
-		PropTypes.string,
-		PropTypes.element,
-	] ),
 };
 
 AiFixAssessmentsUpsell.defaultProps = {
-	title: __( "Use AI to fix assessments!", "wordpress-seo" ),
 	upsellLabel: sprintf(
 		/* translators: %1$s expands to Yoast SEO Premium. */
 		__( "Unlock with %1$s", "wordpress-seo" ),
 		"Yoast SEO Premium"
 	),
-	newToText: sprintf(
-		/* translators: %1$s expands to Yoast SEO Premium. */
-		__( "New in %1$s", "wordpress-seo" ),
-		"Yoast SEO Premium"
-	),
-	bundleNote: "",
 };

packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap

@@ -3,7 +3,7 @@
 exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
 <div>
   <div
-    class="yst-flex yst-flex-col yst-items-center yst-p-10"
+    class="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center"
   >
     <div
       class="yst-relative yst-w-full"
@@ -20,32 +20,40 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
         </div>
       </div>
       <span
-        class="yst-badge yst-badge--info yst-absolute yst-top-0 yst-right-2 yst-mt-2 yst-ml-2"
+        class="yst-badge yst-badge--info yst-absolute yst-right-0 yst-mr-4 yst-text-center yst-justify-center"
+        style="top: -8px;"
       >
-        Beta
+        Trial
       </span>
     </div>
     <div
-      class="yst-mt-6 yst-text-xs yst-font-medium"
+      class="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center"
     >
       <span
-        class="yst-introduction-modal-uppercase"
+        class="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center"
       >
-        Test New To Text
+        <span
+          class="yst-logo-icon"
+        />
+        Yoast SEO Premium
       </span>
     </div>
+  </div>
+  <div
+    class="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center"
+  >
     <div
       class="yst-mt-4 yst-mx-1.5 yst-text-center"
     >
       <h3
         class="yst-text-slate-900 yst-text-lg yst-font-medium"
       >
-        Test Title
+        Optimize your SEO content with Yoast AI
       </h3>
       <div
         class="yst-mt-2 yst-text-slate-600 yst-text-sm"
       >
-        Let AI fix assessments. 
+        Tired of editing your content to get good scores? Upgrade to access our AI features. Receive recommendations to optimize your content with just one click. 
         <a
           class="yst-link yst-link--primary yst-inline-flex yst-items-center yst-gap-1 yst-no-underline yst-font-medium"
           href="https://example.com/learn-more"
@@ -75,7 +83,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
       </div>
     </div>
     <div
-      class="yst-w-full yst-flex yst-mt-10"
+      class="yst-w-full yst-flex yst-mt-6"
     >
       <a
         class="yst-button yst-button--upsell yst-button--extra-large yst-grow"
@@ -105,7 +113,6 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
         </span>
       </a>
     </div>
-    Test Bundle Note
     <a
       class="yst-button yst-button--tertiary yst-mt-4"
     >