84 improvements to the introduction modal

css/src/introductions.css

@@ -6,4 +6,11 @@
 		focus:yst-outline-none
 		focus:yst-ring-offset-0;
 	}
+	.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{
+		letter-spacing: 0.8px;
+		@apply yst-uppercase yst-text-slate-500;
+	}
 }

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-bg-gradient-to-b yst-from-[#EDD2E1] yst-rounded-3xl">
+				<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
 					<ModalContent onClose={ setIsModalOpenFalse } focusElementRef={ focusElementRef } />
 				</Modal.Panel>
 			</Modal>

packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js

@@ -27,7 +27,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { learnMoreLink, upsellLi
 				<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-uppercase yst-text-slate-500">
+				<span className="yst-introduction-modal-uppercase">
 					{ sprintf(
 						/* translators: %1$s expands to Yoast SEO Premium. */
 						__( "New to %1$s", "wordpress-seo" ),
@@ -76,7 +76,11 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { learnMoreLink, upsellLi
 					ref={ initialFocus }
 				>
 					<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
-					{ __( "Unlock with Premium", "wordpress-seo" ) }
+					{ sprintf(
+						/* translators: %1$s expands to Yoast SEO Premium. */
+						__( "Unlock with %1$s", "wordpress-seo" ),
+						"Yoast SEO Premium"
+					) }
 					<span className="yst-sr-only">
 						{
 							/* translators: Hidden accessibility text. */

src/user-profiles-additions/user-interface/user-profiles-additions-ui.php

@@ -2,6 +2,8 @@
 
 namespace Yoast\WP\SEO\User_Profiles_Additions\User_Interface;
 
+use WPSEO_Admin_Asset_Manager;
+use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Conditionals\User_Profile_Conditional;
 use Yoast\WP\SEO\Integrations\Integration_Interface;
 
@@ -10,6 +12,34 @@
  */
 class User_Profiles_Additions_Ui implements Integration_Interface {
 
+	/**
+	 * Holds the Product_Helper.
+	 *
+	 * @var Product_Helper
+	 */
+	private $product_helper;
+
+	/**
+	 * Holds the WPSEO_Admin_Asset_Manager.
+	 *
+	 * @var WPSEO_Admin_Asset_Manager
+	 */
+	private $asset_manager;
+
+	/**
+	 * Constructs Academy_Integration.
+	 *
+	 * @param WPSEO_Admin_Asset_Manager $asset_manager  The WPSEO_Admin_Asset_Manager.
+	 * @param Product_Helper            $product_helper The Product_Helper.
+	 */
+	public function __construct(
+		WPSEO_Admin_Asset_Manager $asset_manager,
+		Product_Helper $product_helper
+	) {
+		$this->asset_manager  = $asset_manager;
+		$this->product_helper = $product_helper;
+	}
+
 	/**
 	 * Returns the conditionals based in which this loadable should be active.
 	 *
@@ -31,13 +61,24 @@ public function register_hooks() {
 		\add_action( 'edit_user_profile', [ $this, 'add_hook_to_user_profile' ] );
 	}
 
+	/**
+	 * Enqueues the assets needed for this integration.
+	 *
+	 * @return void
+	 */
+	public function enqueue_assets() {
+		if ( $this->product_helper->is_premium() ) {
+			$this->asset_manager->enqueue_style( 'introductions' );
+		}
+	}
+
 	/**
 	 * Add the inputs needed for SEO values to the User Profile page.
 	 *
 	 * @param WP_User $user User instance to output for.
 	 */
 	public function add_hook_to_user_profile( $user ) {
-
+		$this->enqueue_assets();
 		echo '<div class="yoast yoast-settings">';
 
 		/**

tests/unit/user-profiles-additions/user-interface/user-profiles-additions-ui-test.php

@@ -4,6 +4,8 @@
 
 use Brain\Monkey;
 use Mockery;
+use WPSEO_Admin_Asset_Manager;
+use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Conditionals\User_Profile_Conditional;
 use Yoast\WP\SEO\Tests\Unit\TestCase;
 use Yoast\WP\SEO\User_Profiles_Additions\User_Interface\User_Profiles_Additions_Ui;
@@ -18,6 +20,20 @@
  */
 class User_Profiles_Additions_Ui_Test extends TestCase {
 
+	/**
+	 * The mocked asset manager.
+	 *
+	 * @var Mockery\MockInterface|WPSEO_Admin_Asset_Manager
+	 */
+	protected $asset_manager;
+
+	/**
+	 * The mocked asset product helper.
+	 *
+	 * @var Mockery\MockInterface|Product_Helper
+	 */
+	protected $product_helper;
+
 	/**
 	 * The User_Profiles_Additions_Ui.
 	 *
@@ -30,8 +46,26 @@ class User_Profiles_Additions_Ui_Test extends TestCase {
 	 */
 	protected function set_up() {
 		parent::set_up();
+		$this->asset_manager  = Mockery::mock( 'WPSEO_Admin_Asset_Manager' );
+		$this->product_helper = Mockery::mock( 'Yoast\WP\SEO\Helpers\Product_Helper' );
+
+		$this->instance = new User_Profiles_Additions_Ui( $this->asset_manager, $this->product_helper );
+	}
 
-		$this->instance = new User_Profiles_Additions_Ui();
+	/**
+	 * Test construct method.
+	 *
+	 * @covers ::__construct
+	 */
+	public function test_construct() {
+		$this->assertInstanceOf(
+			WPSEO_Admin_Asset_Manager::class,
+			$this->getPropertyValue( $this->instance, 'asset_manager' )
+		);
+		$this->assertInstanceOf(
+			Product_Helper::class,
+			$this->getPropertyValue( $this->instance, 'product_helper' )
+		);
 	}
 
 	/**
@@ -46,6 +80,26 @@ public function test_get_conditionals() {
 		);
 	}
 
+	/**
+	 * Test enqueue_assets method.
+	 *
+	 * @covers ::enqueue_assets
+	 */
+	public function test_enqueue_assets() {
+
+		$this->product_helper
+			->expects( 'is_premium' )
+			->once()
+			->andReturn( true );
+
+		$this->asset_manager
+			->expects( 'enqueue_style' )
+			->with( 'introductions' )
+			->once();
+
+		$this->instance->enqueue_assets();
+	}
+
 	/**
 	 * Tests the registration of the hooks.
 	 *
@@ -67,6 +121,11 @@ public function test_add_hook_to_user_profile() {
 
 		$user = Mockery::mock( \WP_User::class );
 
+		$this->product_helper
+			->expects( 'is_premium' )
+			->once()
+			->andReturn( false );
+
 		Monkey\Actions\expectDone( 'wpseo_user_profile_additions' )
 			->once()
 			->with( $user );