aaea12fe12c7195d02e0f7ea5fe67d379d3e3227

Committed 12 Sep 2025 10:36AM UTC coverage: 41.602%. First build

Build # aaea12fe12c7195d02e0f7ea5fe67d379d3e3227

Build Type

Pull #22551

github

Committed by

web-flow

Commit Message

Merge 67ccafc8d into 166ff8a05

Pull Request Pull Request #22551: Add delayed premium upsell

Run Details

2370 of 9166 branches covered (25.86%)

Branch coverage included in aggregate %.

15 of 89 new or added lines in 10 files covered. (16.85%)

22173 of 49829 relevant lines covered (44.5%)

4.7 hits per line

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

0.0

/packages/js/src/introductions/components/modals/delayed-premium-upsell.js


import { STORE_NAME_INTRODUCTIONS } from "../../constants";
import { Modal } from "../modal";
import { __, sprintf } from "@wordpress/i18n";
import { Feature } from "../features/feature";
import { featuresData, perksData } from "../features/features-data";
import { safeCreateInterpolateElement } from "../../../helpers/i18n";
import { ExternalLinkIcon, CheckIcon } from "@heroicons/react/outline";
import { Button, useModalContext } from "@yoast/ui-library";
import { useSelect } from "@wordpress/data";

/**
 * @param {string} buttonUpgradeLink The button upgrade link.
 * @param {string} buttonExploreFeaturesLink The button explore features link.
 * @returns {JSX.Element} The element.
 */
const DelayedPremiumUpsellContent = ( { buttonUpgradeLink, exploreFeaturesLink } ) => {
        const { onClose } = useModalContext();
        return (
                <>
                        <div className="yst-px-10 yst-pt-10 yst-mb-8  yst-delayed-introduction-gradient">
                                <h1 className="yst-text-black yst-font yst-font-medium yst-text-2xl yst-leading-7">{ sprintf(
                                /* translators: %1$s expands to Yoast SEO. */
                                        __( "You've been optimizing with %1$s for a while!", "wordpress-seo" ),
                                        "Yoast SEO" ) }
                                </h1>
                                <div className="yst-text-slate-600 yst-mt-4 yst-mb-8">
                                        { safeCreateInterpolateElement(
                                                sprintf(
                                                        /* translators: %1$s and %3$s expand to <strong> and </strong> respectively. %2$s expands to Yoast SEO Premium. */
                                                        __( "Upgrade to %1$s%2$s%3$s and unlock more features to grow your traffic while making SEO easier, faster and more effective!", "wordpress-seo" ),
                                                        "<strong>",
                                                        "Yoast SEO Premium",
                                                        "</strong>" ),
                                                {
                                                        strong: <strong className="yst-font-semibold yst-text-primary-500" />,
                                                } ) }
                                </div>
                        </div>

                        <div className="yst-@container yst-grid yst-grid-cols-1 sm:yst-grid-cols-2 yst-gap-4 yst-px-10">
                                { featuresData.map( ( feature, index ) =>
                                        <Feature
                                                key={ index }
                                                icon={ feature.icon }
                                                title={ feature.title }
                                                description={ feature.description }
                                        /> )
                                }
                        </div>

                        <div className="yst-text-slate-600 yst-mt-4 yst-mb-8 yst-text-center">
                                { safeCreateInterpolateElement(
                                        sprintf(
                                                /* translators: %1$s and %3$s expand to <a> and </a> respectively. %2$s expands to Yoast SEO Premium. */
                                                __( "%1$sExplore all %2$s features%3$s", "wordpress-seo" ),
                                                "<a>",
                                                "Yoast SEO Premium",
                                                "</a>" ),
                                        {
                                                // eslint-disable-next-line jsx-a11y/anchor-has-content
                                                a: <a id="delayed-upsell" href={ exploreFeaturesLink }  className="yst-mt-6 yst-mb-8 yst-underline yst-text-indigo-600 yst-text-sm" />,
                                        } ) }
                                <ExternalLinkIcon className=" yst-inline yst--me-2 yst-ms-2 yst-h-3 yst-w-3 yst-text-indigo-600 rtl:yst-rotate-[270deg]" />
                        </div>

                        <div className="yst-mt-8 yst-mx-10 yst-text-slate-900 yst-text-[16px] yst-border-b yst-border-black yst-pb-2 yst-font-medium">
                                { __( "Extra perks & help to make SEO even easier", "wordpress-seo" ) }
                        </div>

                        <div className="yst-grid yst-grid-cols-2 yst-gap-4 yst-px-10 yst-my-4">
                                { perksData.map( ( perk, index ) =>
                                        <div key={ index }>
                                                <CheckIcon className="yst-inline yst-text-green-600 yst-w-6 yst-h-6" />
                                                <span className="yst-text-slate-800 yst-font-medium">{ perk }</span>
                                        </div> )
                                }
                        </div>
                        <div className="yst-px-10 yst-mt-8 yst-mb-4 yst-text-center">
                                <Button
                                        as="a"
                                        className={ "yst-w-full yst-h-11 yst-font-medium yst-text-base yst-text-amber-900" }
                                        variant="upsell"
                                        href={ buttonUpgradeLink }
                                        target="_blank"
                                        rel="noreferrer"
                                >
                                        { sprintf(
                                                /* translators: %1$s expands to Yoast SEO Premium. */
                                                __( "Upgrade to %1$s", "wordpress-seo" ),
                                                "Yoast SEO Premium" ) }
                                </Button>
                                <Button
                                        className={ "yst-text-center yst-mt-4 yst-font-medium yst-text-base yst-text-primary-500" }
                                        onClick={ onClose }
                                        variant="tertiary"
                                >
                                        { __( "Close", "wordpress-seo" ) }
                                </Button>
                        </div>
                </>
        );
};

/**
 * @returns {JSX.Element} The element.
 */
export const DelayedPremiumUpsell = () => {
        const buttonUpgradeLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/delayed-upsell-premium-upgrade" ), [] );
        const exploreFeaturesLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/delayed-upsell-explore-premium-features" ), [] );
        return (
                <Modal maxWidth="yst-max-w-3xl">
                        <DelayedPremiumUpsellContent
                                buttonUpgradeLink={ buttonUpgradeLink }
                                exploreFeaturesLink={ exploreFeaturesLink }
                        />
                </Modal>
        );
};

1
2	import { STORE_NAME_INTRODUCTIONS } from "../../constants";
3	import { Modal } from "../modal";
4	import { __, sprintf } from "@wordpress/i18n";
5	import { Feature } from "../features/feature";
6	import { featuresData, perksData } from "../features/features-data";
7	import { safeCreateInterpolateElement } from "../../../helpers/i18n";
8	import { ExternalLinkIcon, CheckIcon } from "@heroicons/react/outline";
9	import { Button, useModalContext } from "@yoast/ui-library";
10	import { useSelect } from "@wordpress/data";
11
12	/**
13	* @param {string} buttonUpgradeLink The button upgrade link.
14	* @param {string} buttonExploreFeaturesLink The button explore features link.
15	* @returns {JSX.Element} The element.
16	*/
NEW 17	const DelayedPremiumUpsellContent = ( { buttonUpgradeLink, exploreFeaturesLink } ) => {	×
NEW 18	const { onClose } = useModalContext();	×
NEW 19	return (	×
20	<>
21	<div className="yst-px-10 yst-pt-10 yst-mb-8 yst-delayed-introduction-gradient">
22	<h1 className="yst-text-black yst-font yst-font-medium yst-text-2xl yst-leading-7">{ sprintf(
23	/* translators: %1$s expands to Yoast SEO. */
24	__( "You've been optimizing with %1$s for a while!", "wordpress-seo" ),
25	"Yoast SEO" ) }
26	</h1>
27	<div className="yst-text-slate-600 yst-mt-4 yst-mb-8">
28	{ safeCreateInterpolateElement(
29	sprintf(
30	/* translators: %1$s and %3$s expand to <strong> and </strong> respectively. %2$s expands to Yoast SEO Premium. */
31	__( "Upgrade to %1$s%2$s%3$s and unlock more features to grow your traffic while making SEO easier, faster and more effective!", "wordpress-seo" ),
32	"<strong>",
33	"Yoast SEO Premium",
34	"</strong>" ),
35	{
36	strong: <strong className="yst-font-semibold yst-text-primary-500" />,
37	} ) }
38	</div>
39	</div>
40
41	<div className="yst-@container yst-grid yst-grid-cols-1 sm:yst-grid-cols-2 yst-gap-4 yst-px-10">
42	{ featuresData.map( ( feature, index ) =>
NEW 43	<Feature	×
44	key={ index }
45	icon={ feature.icon }
46	title={ feature.title }
47	description={ feature.description }
48	/> )
49	}
50	</div>
51
52	<div className="yst-text-slate-600 yst-mt-4 yst-mb-8 yst-text-center">
53	{ safeCreateInterpolateElement(
54	sprintf(
55	/* translators: %1$s and %3$s expand to <a> and </a> respectively. %2$s expands to Yoast SEO Premium. */
56	__( "%1$sExplore all %2$s features%3$s", "wordpress-seo" ),
57	"<a>",
58	"Yoast SEO Premium",
59	"</a>" ),
60	{
61	// eslint-disable-next-line jsx-a11y/anchor-has-content
62	a: <a id="delayed-upsell" href={ exploreFeaturesLink } className="yst-mt-6 yst-mb-8 yst-underline yst-text-indigo-600 yst-text-sm" />,
63	} ) }
64	<ExternalLinkIcon className=" yst-inline yst--me-2 yst-ms-2 yst-h-3 yst-w-3 yst-text-indigo-600 rtl:yst-rotate-[270deg]" />
65	</div>
66
67	<div className="yst-mt-8 yst-mx-10 yst-text-slate-900 yst-text-[16px] yst-border-b yst-border-black yst-pb-2 yst-font-medium">
68	{ __( "Extra perks & help to make SEO even easier", "wordpress-seo" ) }
69	</div>
70
71	<div className="yst-grid yst-grid-cols-2 yst-gap-4 yst-px-10 yst-my-4">
72	{ perksData.map( ( perk, index ) =>
NEW 73	<div key={ index }>	×
74	<CheckIcon className="yst-inline yst-text-green-600 yst-w-6 yst-h-6" />
75	<span className="yst-text-slate-800 yst-font-medium">{ perk }</span>
76	</div> )
77	}
78	</div>
79	<div className="yst-px-10 yst-mt-8 yst-mb-4 yst-text-center">
80	<Button
81	as="a"
82	className={ "yst-w-full yst-h-11 yst-font-medium yst-text-base yst-text-amber-900" }
83	variant="upsell"
84	href={ buttonUpgradeLink }
85	target="_blank"
86	rel="noreferrer"
87	>
88	{ sprintf(
89	/* translators: %1$s expands to Yoast SEO Premium. */
90	__( "Upgrade to %1$s", "wordpress-seo" ),
91	"Yoast SEO Premium" ) }
92	</Button>
93	<Button
94	className={ "yst-text-center yst-mt-4 yst-font-medium yst-text-base yst-text-primary-500" }
95	onClick={ onClose }
96	variant="tertiary"
97	>
98	{ __( "Close", "wordpress-seo" ) }
99	</Button>
100	</div>
101	</>
102	);
103	};
104
105	/**
106	* @returns {JSX.Element} The element.
107	*/
NEW 108	export const DelayedPremiumUpsell = () => {	×
NEW 109	const buttonUpgradeLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/delayed-upsell-premium-upgrade" ), [] );	×
NEW 110	const exploreFeaturesLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/delayed-upsell-explore-premium-features" ), [] );	×
NEW 111	return (	×
112	<Modal maxWidth="yst-max-w-3xl">
113	<DelayedPremiumUpsellContent
114	buttonUpgradeLink={ buttonUpgradeLink }
115	exploreFeaturesLink={ exploreFeaturesLink }
116	/>
117	</Modal>
118	);
119	};

Yoast / wordpress-seo / aaea12fe12c7195d02e0f7ea5fe67d379d3e3227

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