e6a7e0b80499bdb8a730b54214937f6933fbef32

Committed 21 Aug 2025 12:15PM UTC coverage: 41.435%. First build

Build # e6a7e0b80499bdb8a730b54214937f6933fbef32

Build Type

Pull #22507

github

Committed by

web-flow

Commit Message

Merge 4876d7f1c into bff8b27b5

Pull Request Pull Request #22507: Add the Black Friday announcement modal

Run Details

2331 of 8826 branches covered (26.41%)

Branch coverage included in aggregate %.

23 of 69 new or added lines in 8 files covered. (33.33%)

21982 of 49851 relevant lines covered (44.1%)

4.68 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/introductions/components/modals/google-docs-addon-upsell.js

import { useSelect } from "@wordpress/data";
import { useMemo } from "@wordpress/element";
import { LockOpenIcon } from "@heroicons/react/outline";
import { __, sprintf } from "@wordpress/i18n";
import { Button, useModalContext } from "@yoast/ui-library";
import { STORE_NAME_INTRODUCTIONS } from "../../constants";
import { Modal } from "../modal";
import { get } from "lodash";

/**
 * @returns {JSX.Element} The element.
 */
// eslint-disable-next-line complexity
const GoogleDocsAddonUpsellContent = ( {
        thumbnail,
        buttonLink,
        buttonLabel = sprintf(
                /* translators: %1$s expands to Yoast SEO Premium. */
                __( "Unlock with %1$s", "wordpress-seo" ),
                "Yoast SEO Premium"
        ),
        productName = "Yoast SEO Premium",
        freeCopy =  __( "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. " +
                "Purchase separately or with Yoast SEO Premium.", "wordpress-seo" ),
        premiumCopy =  __( "Access all your favorite Yoast content analysis tools for SEO, readability, and inclusivity, " +
                "right inside Google Docs. You can draft, collaborate, edit and export content perfectly formatted for WordPress.",
        "wordpress-seo" ),
        isPremium = false,
        ctbId = "f6a84663-465f-4cb5-8ba5-f7a6d72224b2",
} ) => {
        const { onClose, initialFocus } = useModalContext();

        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="Thumbnail for Yoast SEO Google Docs Add-On"
                                        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" />
                                                { productName }
                                        </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">
                                                {
                                                        __( "Get one seat for the new Google Docs Add-On", "wordpress-seo" )
                                                }
                                        </h3>
                                        <div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
                                                {
                                                        isPremium ? (
                                                                <p>{ premiumCopy }</p>
                                                        ) : (
                                                                <p>{ freeCopy }</p>
                                                        )
                                                }
                                        </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>
                                <Button
                                        as="a"
                                        className="yst-mt-4"
                                        variant="tertiary"
                                        onClick={ onClose }
                                >
                                        { __( "Close", "wordpress-seo" ) }
                                </Button>
                        </div>
                </>
        );
};

/**
 * @returns {JSX.Element} The element.
 */
export const GoogleDocsAddonUpsell = () => {
        const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "google-docs-addon-thumbnail.png" ), [] );
        const isPremium = useMemo( () => Boolean( get( window, "wpseoIntroductions.isPremium", false ) ), [] );
        const upsellLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-upsell/" ), [] );
        const premiumLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-get-started/" ), [] );

        const thumbnail = useMemo( () => ( {
                src: imageLink,
                width: "432",
                height: "243",
        } ), [ imageLink ] );

        const buttonLabel = useMemo( () => {
                if ( isPremium ) {
                        return __( "Activate your free seat", "wordpress-seo" );
                }

                return sprintf(
                        /* translators: %1$s expands to Yoast SEO Premium. */
                        __( "Unlock with %1$s", "wordpress-seo" ),
                        "Yoast SEO Premium"
                );
        }
        , [ isPremium ] );

        return (
                <Modal>
                        <GoogleDocsAddonUpsellContent
                                buttonLink={ isPremium ? premiumLink : upsellLink }
                                thumbnail={ thumbnail }
                                buttonLabel={ buttonLabel }
                                isPremium={ isPremium }
                        />
                </Modal>
        );
};

1	import { useSelect } from "@wordpress/data";
2	import { useMemo } from "@wordpress/element";
3	import { LockOpenIcon } from "@heroicons/react/outline";
4	import { __, sprintf } from "@wordpress/i18n";
5	import { Button, useModalContext } from "@yoast/ui-library";
6	import { STORE_NAME_INTRODUCTIONS } from "../../constants";
7	import { Modal } from "../modal";
8	import { get } from "lodash";
9
10	/**
11	* @returns {JSX.Element} The element.
12	*/
13	// eslint-disable-next-line complexity
NEW 14	const GoogleDocsAddonUpsellContent = ( {	×
15	thumbnail,
16	buttonLink,
17	buttonLabel = sprintf(	×
18	/* translators: %1$s expands to Yoast SEO Premium. */
19	__( "Unlock with %1$s", "wordpress-seo" ),
20	"Yoast SEO Premium"
21	),
22	productName = "Yoast SEO Premium",	×
23	freeCopy = __( "Optimize as you draft for SEO, inclusivity, and readability. " +	×
24	"The Yoast SEO Google Docs add-on lets you export content ready for WordPress, no reformatting required. " +
25	"Purchase separately or with Yoast SEO Premium.", "wordpress-seo" ),
26	premiumCopy = __( "Access all your favorite Yoast content analysis tools for SEO, readability, and inclusivity, " +	×
27	"right inside Google Docs. You can draft, collaborate, edit and export content perfectly formatted for WordPress.",
28	"wordpress-seo" ),
29	isPremium = false,	×
30	ctbId = "f6a84663-465f-4cb5-8ba5-f7a6d72224b2",	×
31	} ) => {
32	const { onClose, initialFocus } = useModalContext();	×
33
34	return (	×
35	<>
36	<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
37	<img
38	className="yst-w-full yst-h-auto yst-rounded-md"
39	alt="Thumbnail for Yoast SEO Google Docs Add-On"
40	loading="lazy"
41	decoding="async"
42	{ ...thumbnail }
43	/>
44	<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
45	<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
46	<span className="yst-logo-icon" />
47	{ productName }
48	</span>
49	</div>
50	</div>
51	<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
52	<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
53	<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
54	{
55	__( "Get one seat for the new Google Docs Add-On", "wordpress-seo" )
56	}
57	</h3>
58	<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
59	{
60	isPremium ? (	×
61	<p>{ premiumCopy }</p>
62	) : (
63	<p>{ freeCopy }</p>
64	)
65	}
66	</div>
67	</div>
68	<div className="yst-w-full yst-flex yst-mt-6">
69	{
70	isPremium ? (	×
71	<Button
72	as="a"
73	className="yst-grow"
74	size="extra-large"
75	variant="primary"
76	href={ buttonLink }
77	target="_blank"
78	ref={ initialFocus }
79	>
80	{ buttonLabel }
81	<span className="yst-sr-only">
82	{
83	/* translators: Hidden accessibility text. */
84	__( "(Opens in a new browser tab)", "wordpress-seo" )
85	}
86	</span>
87	</Button>
88	) : (
89	<Button
90	as="a"
91	className="yst-grow"
92	size="extra-large"
93	variant="upsell"
94	href={ buttonLink }
95	target="_blank"
96	ref={ initialFocus }
97	data-action="load-nfd-ctb"
98	data-ctb-id={ ctbId }
99	>
100	<LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />
101	{ buttonLabel }
102	<span className="yst-sr-only">
103	{
104	/* translators: Hidden accessibility text. */
105	__( "(Opens in a new browser tab)", "wordpress-seo" )
106	}
107	</span>
108	</Button>
109	)
110	}
111	</div>
112	<Button
113	as="a"
114	className="yst-mt-4"
115	variant="tertiary"
116	onClick={ onClose }
117	>
118	{ __( "Close", "wordpress-seo" ) }
119	</Button>
120	</div>
121	</>
122	);
123	};
124
125	/**
126	* @returns {JSX.Element} The element.
127	*/
NEW 128	export const GoogleDocsAddonUpsell = () => {	×
NEW 129	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "google-docs-addon-thumbnail.png" ), [] );	×
NEW 130	const isPremium = useMemo( () => Boolean( get( window, "wpseoIntroductions.isPremium", false ) ), [] );	×
NEW 131	const upsellLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-upsell/" ), [] );	×
NEW 132	const premiumLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/google-docs-add-on-introduction-get-started/" ), [] );	×
133
NEW 134	const thumbnail = useMemo( () => ( {	×
135	src: imageLink,
136	width: "432",
137	height: "243",
138	} ), [ imageLink ] );
139
NEW 140	const buttonLabel = useMemo( () => {	×
NEW 141	if ( isPremium ) {	×
NEW 142	return __( "Activate your free seat", "wordpress-seo" );	×
143	}
144
NEW 145	return sprintf(	×
146	/* translators: %1$s expands to Yoast SEO Premium. */
147	__( "Unlock with %1$s", "wordpress-seo" ),
148	"Yoast SEO Premium"
149	);
150	}
151	, [ isPremium ] );
152
NEW 153	return (	×
154	<Modal>
155	<GoogleDocsAddonUpsellContent
156	buttonLink={ isPremium ? premiumLink : upsellLink }	×
157	thumbnail={ thumbnail }
158	buttonLabel={ buttonLabel }
159	isPremium={ isPremium }
160	/>
161	</Modal>
162	);
163	};

Yoast / wordpress-seo / e6a7e0b80499bdb8a730b54214937f6933fbef32

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous