Announce the addition of the Google docs add on to Free & Premium #4603

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

@@ -1,33 +1,56 @@
-import { useDispatch, useSelect } from "@wordpress/data";
+import { useSelect } from "@wordpress/data";
 import { useMemo } from "@wordpress/element";
-import { AIOptimizeUpsell } from "../../shared-admin/components";
+import { GoogleDocsAddonUpsell } from "../../shared-admin/components";
 import { STORE_NAME_INTRODUCTIONS } from "../constants";
+import { Modal } from "./modal";
+import { __, sprintf } from "@wordpress/i18n";
+import { get } from "lodash";
 
 /**
  * @returns {JSX.Element} The element.
  */
 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 learnMoreLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoast.com/products/google-docs-addon/" ), [] );
+	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "google-docs-addon-thumbnail.png" ), [] );
+	const isPremium = useMemo( () => Boolean( get( window, "wpseoIntroductions.isPremium", false ) ), [] );
 
-	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-fix-assessments-thumbnail.png" ), [] );
 	const thumbnail = useMemo( () => ( {
 		src: imageLink,
 		width: "432",
-		height: "244",
+		height: "243",
 	} ), [ imageLink ] );
 
-	const value = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectWistiaEmbedPermissionValue(), [] );
-	const status = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectWistiaEmbedPermissionStatus(), [] );
-	const { setWistiaEmbedPermission: set } = useDispatch( STORE_NAME_INTRODUCTIONS );
-	const wistiaEmbedPermission = useMemo( () => ( { value, status, set } ), [ value, status, set ] );
+	const buttonLabel = useMemo( () => {
+		if ( isPremium ) {
+			return __( "Get started for free", "wordpress-seo" );
+		}
+
+
+		return sprintf(
+			/* translators: %1$s expands to Yoast SEO Premium. */
+			__( "Unlock with %1$s", "wordpress-seo" ),
+			"Yoast SEO Premium"
+		);
+	}
+	, [ isPremium ] );
+
+	const buttonLink = useMemo( () => {
+		if ( isPremium ) {
+			return useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-get-started/" ), [] );
+		}
+
+		return useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-upsell/" ), [] );
+	}, [ isPremium ] );
 
 	return (
-		<AIOptimizeUpsell
-			learnMoreLink={ learnMoreLink }
-			upsellLink={ upsellLink }
-			thumbnail={ thumbnail }
-			wistiaEmbedPermission={ wistiaEmbedPermission }
-		/>
+		<Modal>
+			<GoogleDocsAddonUpsell
+				learnMoreLink={ learnMoreLink }
+				buttonLink={ buttonLink }
+				thumbnail={ thumbnail }
+				buttonLabel={ buttonLabel }
+				isPremium={ isPremium }
+			/>
+		</Modal>
 	);
 };

packages/js/src/introductions/initialize.js

@@ -4,15 +4,14 @@ import { render } from "@wordpress/element";
 import { Root } from "@yoast/ui-library";
 import { get, isEmpty } from "lodash";
 import { LINK_PARAMS_NAME, PLUGIN_URL_NAME, WISTIA_EMBED_PERMISSION_NAME } from "../shared-admin/store";
-import { Introduction, IntroductionProvider } from "./components";
+import { Content, Introduction, IntroductionProvider } from "./components";
 import { STORE_NAME_INTRODUCTIONS } from "./constants";
 import { registerStore } from "./store";
 
 const DATA_NAME = "wpseoIntroductions";
 
 domReady( () => {
 	const initialIntroductions = get( window, `${ DATA_NAME }.introductions`, [] );
-
 	if ( isEmpty( initialIntroductions ) ) {
 		return;
 	}
@@ -29,7 +28,9 @@ domReady( () => {
 	const rootContext = {
 		isRtl: Boolean( get( window, `${ DATA_NAME }.isRtl`, false ) ),
 	};
-	const initialComponents = {};
+	const initialComponents = {
+		"google-docs-addon-upsell": Content,
+	};
 
 	const root = document.createElement( "div" );
 	root.id = "wpseo-introductions";

packages/js/src/shared-admin/components/google-docs-addon-upsell.js

@@ -0,0 +1,171 @@
+import { LockOpenIcon } from "@heroicons/react/outline";
+import { ArrowNarrowRightIcon } from "@heroicons/react/solid";
+import { __, sprintf } from "@wordpress/i18n";
+import { safeCreateInterpolateElement } from "../../helpers/i18n";
+import { Button, useModalContext } from "@yoast/ui-library";
+import PropTypes from "prop-types";
+import { OutboundLink } from ".";
+
+/**
+ * @param {string} learnMoreLink The learn more link.
+ * @param {Object} thumbnail The thumbnail: img props.
+ * @param {string} buttonLink The button link.
+ * @param {string} buttonLabel The button label.
+ * @param {string} newToText The new to text.
+ * @param {string|JSX.Element} bundleNote The bundle note.
+ * @param {string} ctbId The click to buy to register for this upsell instance.
+ * @returns {JSX.Element} The element.
+ */
+export const GoogleDocsAddonUpsell = ( {
+	learnMoreLink,
+	thumbnail,
+	buttonLink,
+	buttonLabel,
+	newToText,
+	isPremium,
+	bundleNote,
+	ctbId,
+} ) => {
+	const { onClose, initialFocus } = useModalContext();
+
+	const learnMoreLinkStructure = {
+		a: <OutboundLink
+			href={ learnMoreLink }
+			className="yst-inline-flex yst-items-center yst-gap-1 yst-no-underline yst-font-medium"
+			variant="primary"
+		/>,
+		ArrowNarrowRightIcon: <ArrowNarrowRightIcon className="yst-w-4 yst-h-4 rtl:yst-rotate-180" />,
+		br: <br />,
+	};
+
+	return (
+		<>
+			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
+				<img
+					className="yst-w-full yst-h-auto yst-rounded-md"
+					alt=""
+					loading="lazy"
+					decoding="async"
+					{ ...thumbnail }
+				/>
+				<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" />
+						{ newToText }
+					</span>
+				</div>
+			</div>
+			<div className="yst-px-10 yst-pb-4 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">
+						{
+							sprintf(
+								/* translators: %s: Yoast SEO Google Docs Add-On" */
+								__( "%s - incl. in Premium", "wordpress-seo" ),
+								"Yoast SEO Google Docs Add-On"
+							)
+						}
+					</h3>
+					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
+						{ safeCreateInterpolateElement(
+							sprintf(
+								/* translators: %1$s is a break tag; %2$s and %3$s are anchor tags; %4$s is the arrow icon. */
+								__(
+									"Optimize as you draft for SEO, inclusivity, and readability. The Yoast SEO Google Docs add-on lets you export content ready for WordPress, no reformatting required.%1$s%2$sLearn more%3$s%4$s",
+									"wordpress-seo"
+								),
+								"<br/>",
+								"<a>",
+								"<ArrowNarrowRightIcon />",
+								"</a>"
+							),
+							learnMoreLinkStructure
+						) }
+					</div>
+				</div>
+				<div className="yst-w-full yst-flex yst-mt-6">
+					{
+						isPremium ? (
+							<Button
+								as="a"
+								className="yst-grow"
+								size="extra-large"
+								variant="primary"
+								href={ buttonLink }
+								target="_blank"
+								ref={ initialFocus }
+							>
+								{ buttonLabel }
+								<span className="yst-sr-only">
+									{
+									/* translators: Hidden accessibility text. */
+										__( "(Opens in a new browser tab)", "wordpress-seo" )
+									}
+								</span>
+							</Button>
+						) : (
+							<Button
+								as="a"
+								className="yst-grow"
+								size="extra-large"
+								variant="upsell"
+								href={ buttonLink }
+								target="_blank"
+								ref={ initialFocus }
+								data-action="load-nfd-ctb"
+								data-ctb-id={ ctbId }
+							>
+								<LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />
+								{ buttonLabel }
+								<span className="yst-sr-only">
+									{
+										/* translators: Hidden accessibility text. */
+										__( "(Opens in a new browser tab)", "wordpress-seo" )
+									}
+								</span>
+							</Button>
+						)
+					}
+				</div>
+				{ bundleNote }
+				<Button
+					as="a"
+					className="yst-mt-4"
+					variant="tertiary"
+					onClick={ onClose }
+				>
+					{ __( "Close", "wordpress-seo" ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+GoogleDocsAddonUpsell.propTypes = {
+	learnMoreLink: PropTypes.string.isRequired,
+	buttonLink: PropTypes.string.isRequired,
+	thumbnail: PropTypes.shape( {
+		src: PropTypes.string.isRequired,
+		width: PropTypes.string,
+		height: PropTypes.string,
+	} ).isRequired,
+	buttonLabel: PropTypes.string,
+	newToText: PropTypes.string,
+	isPremium: PropTypes.bool,
+	bundleNote: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.element,
+	] ),
+	ctbId: PropTypes.string,
+};
+
+GoogleDocsAddonUpsell.defaultProps = {
+	buttonLabel: sprintf(
+		/* translators: %1$s expands to Yoast SEO Premium. */
+		__( "Unlock with %1$s", "wordpress-seo" ),
+		"Yoast SEO Premium"
+	),
+	newToText: "Yoast SEO Premium",
+	isPremium: false,
+	bundleNote: "",
+	ctbId: "f6a84663-465f-4cb5-8ba5-f7a6d72224b2",
+};

packages/js/src/shared-admin/components/index.js

@@ -1,6 +1,7 @@
 export { AcademyUpsellCard } from "./academy-upsell-card";
 export { AiGenerateTitlesAndDescriptionsUpsell } from "./ai-generate-titles-and-descriptions-upsell";
 export { AIOptimizeUpsell } from "./ai-optimize-upsell";
+export { GoogleDocsAddonUpsell } from "./google-docs-addon-upsell";
 export { ErrorFallback } from "./error-fallback";
 export { FieldsetLayout } from "./fieldset-layout";
 export { ReactComponent as G2LogoWhite } from "./g2-logo-white.svg";

src/introductions/application/google-docs-addon-upsell.php

@@ -0,0 +1,82 @@
+<?php
+
+
+namespace Yoast\WP\SEO\Introductions\Application;
+
+use Yoast\WP\SEO\Helpers\Product_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
+use Yoast\WP\SEO\Introductions\Domain\Introduction_Interface;
+
+/**
+ * Represents the introduction for the Google Docs Addon feature.
+ */
+class Google_Docs_Addon_Upsell implements Introduction_Interface {
+
+	use User_Allowed_Trait;
+
+	public const ID = 'google-docs-addon-upsell';
+
+	/**
+	 * Holds the user helper.
+	 *
+	 * @var User_Helper
+	 */
+	private $user_helper;
+
+	/**
+	 * Holds the product helper.
+	 *
+	 * @var Product_Helper
+	 */
+	private $product_helper;
+
+	/**
+	 * Constructs the introduction.
+	 *
+	 * @param User_Helper    $user_helper    The user helper.
+	 * @param Product_Helper $product_helper The product helper.
+	 */
+	public function __construct( User_Helper $user_helper, Product_Helper $product_helper ) {
+		$this->user_helper    = $user_helper;
+		$this->product_helper = $product_helper;
+	}
+
+	/**
+	 * Returns the ID.
+	 *
+	 * @return string The ID.
+	 */
+	public function get_id() {
+		return self::ID;
+	}
+
+	/**
+	 * Returns the name of the introdyction.
+	 *
+	 * @return string The name.
+	 */
+	public function get_name() {
+		\_deprecated_function( __METHOD__, 'Yoast SEO Premium 21.6', 'Please use get_id() instead' );
+
+		return self::ID;
+	}
+
+	/**
+	 * Returns the requested pagination priority. Lower means earlier.
+	 *
+	 * @return int The priority.
+	 */
+	public function get_priority() {
+		return 10;
+	}
+
+	/**
+	 * Returns whether this introduction should show.
+	 * We no longer show this introduction, so we always return false.
+	 *
+	 * @return bool Whether this introduction should show.
+	 */
+	public function should_show() {
+		return true;
+	}
+}