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/ai-brand-insights-pre-launch.js

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

/**
 * @param {Object} thumbnail The thumbnail: img props.
 * @param {string} buttonLink The button link.
 * @param {string} buttonLabel The button label.
 * @param {string} productName The product name.
 * @param {string} description The description for the introduction
 * @param {string} ctbId The click to buy to register for this upsell instance.
 * @returns {JSX.Element} The element.
 */
const AiBrandInsightsPreLaunchContent = ( {
        thumbnail,
        buttonLink,
        buttonLabel = __( "Join the waitlist", "wordpress-seo" ),
        productName = sprintf(
                /* translators: %1$s expands to Yoast AI brand insights. */
                __( "Introducing %1$s", "wordpress-seo" ),
                "Yoast AI brand insights"
        ),
        description =  __( "Track visibility, control perception, and stay ahead - tools to manage your AI presence are coming soon!", "wordpress-seo" ),
} ) => {
        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 yst-drop-shadow-md"
                                        alt={ __( "Web chart showing aspects of brand visibility in AI responses", "wordpress-seo" ) }
                                        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-ai-insights-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">
                                                {
                                                        __( "How does your brand show up in AI responses?", "wordpress-seo" )
                                                }
                                        </h3>
                                        <div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
                                                <p>{ description }</p>
                                        </div>
                                </div>
                                <div className="yst-w-full yst-flex yst-mt-6">
                                        <Button
                                                as="a"
                                                className="yst-grow yst-border-slate-200 yst-ai-insights-waitlist-button"
                                                size="extra-large"
                                                variant="upsell"
                                                href={ buttonLink }
                                                target="_blank"
                                                ref={ initialFocus }
                                        >
                                                <SparklesIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5 yst-text-white" />
                                                { buttonLabel }
                                                <span className="yst-sr-only">
                                                        {
                                                                /* translators: Hidden accessibility text. */
                                                                __( "(Opens in a new browser tab)", "wordpress-seo" )
                                                        }
                                                </span>
                                        </Button>
                                </div>
                                <Button
                                        className="yst-mt-2"
                                        variant="tertiary"
                                        onClick={ onClose }
                                >
                                        { __( "Close", "wordpress-seo" ) }
                                </Button>
                        </div>
                </>
        );
};

/**
 * @returns {JSX.Element} The element.
 */
export const AiBrandInsightsPreLaunch = () => {
        const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.png" ), [] );
        const joinWishlistLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/ai-brand-insights-introduction-pre-launch/" ), [] );

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

        return (
                <Modal>
                        <AiBrandInsightsPreLaunchContent
                                buttonLink={ joinWishlistLink }
                                thumbnail={ thumbnail }
                        />
                </Modal>
        );
};

1	import { useSelect } from "@wordpress/data";
2	import { useMemo } from "@wordpress/element";
3	import { __, sprintf } from "@wordpress/i18n";
4	import { Button, useModalContext } from "@yoast/ui-library";
5	import { SparklesIcon } from "@heroicons/react/outline";
6	import { STORE_NAME_INTRODUCTIONS } from "../../constants";
7	import { Modal } from "../modal";
8
9	/**
10	* @param {Object} thumbnail The thumbnail: img props.
11	* @param {string} buttonLink The button link.
12	* @param {string} buttonLabel The button label.
13	* @param {string} productName The product name.
14	* @param {string} description The description for the introduction
15	* @param {string} ctbId The click to buy to register for this upsell instance.
16	* @returns {JSX.Element} The element.
17	*/
NEW 18	const AiBrandInsightsPreLaunchContent = ( {	×
19	thumbnail,
20	buttonLink,
21	buttonLabel = __( "Join the waitlist", "wordpress-seo" ),	×
22	productName = sprintf(	×
23	/* translators: %1$s expands to Yoast AI brand insights. */
24	__( "Introducing %1$s", "wordpress-seo" ),
25	"Yoast AI brand insights"
26	),
27	description = __( "Track visibility, control perception, and stay ahead - tools to manage your AI presence are coming soon!", "wordpress-seo" ),	×
28	} ) => {
29	const { onClose, initialFocus } = useModalContext();	×
30
31	return (	×
32	<>
33	<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
34	<img
35	className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"
36	alt={ __( "Web chart showing aspects of brand visibility in AI responses", "wordpress-seo" ) }
37	loading="lazy"
38	decoding="async"
39	{ ...thumbnail }
40	/>
41	<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
42	<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
43	<span className="yst-ai-insights-icon" />
44	{ productName }
45	</span>
46	</div>
47	</div>
48	<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
49	<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
50	<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
51	{
52	__( "How does your brand show up in AI responses?", "wordpress-seo" )
53	}
54	</h3>
55	<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
56	<p>{ description }</p>
57	</div>
58	</div>
59	<div className="yst-w-full yst-flex yst-mt-6">
60	<Button
61	as="a"
62	className="yst-grow yst-border-slate-200 yst-ai-insights-waitlist-button"
63	size="extra-large"
64	variant="upsell"
65	href={ buttonLink }
66	target="_blank"
67	ref={ initialFocus }
68	>
69	<SparklesIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5 yst-text-white" />
70	{ buttonLabel }
71	<span className="yst-sr-only">
72	{
73	/* translators: Hidden accessibility text. */
74	__( "(Opens in a new browser tab)", "wordpress-seo" )
75	}
76	</span>
77	</Button>
78	</div>
79	<Button
80	className="yst-mt-2"
81	variant="tertiary"
82	onClick={ onClose }
83	>
84	{ __( "Close", "wordpress-seo" ) }
85	</Button>
86	</div>
87	</>
88	);
89	};
90
91	/**
92	* @returns {JSX.Element} The element.
93	*/
NEW 94	export const AiBrandInsightsPreLaunch = () => {	×
NEW 95	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.png" ), [] );	×
NEW 96	const joinWishlistLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/ai-brand-insights-introduction-pre-launch/" ), [] );	×
97
NEW 98	const thumbnail = useMemo( () => ( {	×
99	src: imageLink,
100	width: "432",
101	height: "243",
102	} ), [ imageLink ] );
103
NEW 104	return (	×
105	<Modal>
106	<AiBrandInsightsPreLaunchContent
107	buttonLink={ joinWishlistLink }
108	thumbnail={ thumbnail }
109	/>
110	</Modal>
111	);
112	};

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