Merge pull request #21601 from Yoast/162-black-friday-in-plugin-ads-2024

Updates BF banners and sets the correct date.

admin/class-premium-upsell-admin-block.php

@@ -97,7 +97,7 @@ public function render() {
 		$class = $this->get_html_class();
 
 		/* translators: %s expands to Yoast SEO Premium */
-		$button_text = YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ? esc_html__( 'Claim your 30% off now!', 'wordpress-seo' ) : sprintf( esc_html__( 'Explore %s now!', 'wordpress-seo' ), 'Yoast SEO Premium' );
+		$button_text = YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ? esc_html__( 'Upgrade now', 'wordpress-seo' ) : sprintf( esc_html__( 'Explore %s now!', 'wordpress-seo' ), 'Yoast SEO Premium' );
 		/* translators: Hidden accessibility text. */
 		$button_text .= '<span class="screen-reader-text">' . esc_html__( '(Opens in a new browser tab)', 'wordpress-seo' ) . '</span>'
 			. '<span aria-hidden="true" class="yoast-button-upsell__caret"></span>';
@@ -111,11 +111,10 @@ public function render() {
 
 		echo '<div class="' . esc_attr( $class ) . '">';
 
-		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ) {
-			$bf_label   = esc_html__( 'BLACK FRIDAY', 'wordpress-seo' );
-			$sale_label = esc_html__( '30% OFF', 'wordpress-seo' );
+		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ) {
+			$bf_label = esc_html__( '30% OFF | Code: BF2024', 'wordpress-seo' );
 			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped above.
-			echo "<div class='black-friday-container'><span>$bf_label</span> <span style='margin-left: auto;'>$sale_label</span> </div>";
+			echo "<div class='black-friday-container'><span>$bf_label</span></div>";
 		}
 
 		echo '<div class="' . esc_attr( $class . '--container' ) . '">';

admin/menu/class-base-menu.php

@@ -260,7 +260,7 @@ protected function get_license_page_title() {
 			$title = __( 'Upgrades', 'wordpress-seo' );
 		}
 
-		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) && ! YoastSEO()->helpers->product->is_premium() ) {
+		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) && ! YoastSEO()->helpers->product->is_premium() ) {
 			$title = __( 'Upgrades', 'wordpress-seo' ) . '<span class="yoast-menu-bf-sale-badge">' . __( '30% OFF', 'wordpress-seo' ) . '</span>';
 		}
 

admin/views/licenses.php

@@ -133,9 +133,9 @@
 $sale_badge         = '';
 $premium_sale_badge = '';
 
-if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ) {
+if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ) {
 	/* translators: %1$s expands to opening span, %2$s expands to closing span */
-	$sale_badge_span = sprintf( esc_html__( '%1$sSALE 30%% OFF!%2$s', 'wordpress-seo' ), '<span>', '</span>' );
+	$sale_badge_span = sprintf( esc_html__( '%1$s30%% OFF | Use code: BF2024%2$s', 'wordpress-seo' ), '<span>', '</span>' );
 
 	$sale_badge = '<div class="yoast-seo-premium-extension-sale-badge">' . $sale_badge_span . '</div>';
 

inc/class-wpseo-admin-bar-menu.php

@@ -587,10 +587,10 @@ protected function add_get_help_submenu( WP_Admin_Bar $wp_admin_bar ) {
 	 */
 	protected function add_premium_link( WP_Admin_Bar $wp_admin_bar ) {
 		$sale_percentage = '';
-		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ) {
+		if ( YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ) {
 			$sale_percentage = sprintf(
 				'<span class="admin-bar-premium-promotion">%1$s</span>',
-				esc_html__( '-30%', 'wordpress-seo' )
+				esc_html__( '30% OFF | Code: BF2024', 'wordpress-seo' )
 			);
 		}
 		$wp_admin_bar->add_menu(

packages/js/src/components/BlackFridayPromotion.js

@@ -24,14 +24,14 @@ export const BlackFridayPromotion = ( {
 	const title = location === "sidebar"
 		? sprintf(
 			/* translators: %1$s expands to YOAST SEO PREMIUM */
-			__( "BLACK FRIDAY SALE: %1$s", "wordpress-seo" ),
-			"YOAST SEO PREMIUM"
+			__( "30%% OFF %1$s | Use code: BF2024", "wordpress-seo" ),
+			"Yoast SEO Premium"
 		)
 		: createInterpolateElement(
 			sprintf(
 				/* translators: %1$s expands to YOAST SEO PREMIUM, %2$s expands to a link on yoast.com, %3$s expands to the anchor end tag. */
-				__( "BLACK FRIDAY SALE: %1$s %2$sBuy now!%3$s", "wordpress-seo" ),
-				"YOAST SEO PREMIUM",
+				__( "30%% OFF %1$s | Use code: BF2024 %2$sBuy now!%3$s", "wordpress-seo" ),
+				"Yoast SEO Premium",
 				"<a>",
 				"</a>"
 			),
@@ -42,15 +42,14 @@ export const BlackFridayPromotion = ( {
 		);
 	return isPremium ? null : (
 		<TimeConstrainedNotification
-			id={ `black-friday-2023-promotion-${ location }` }
-			promoId="black-friday-2023-promotion"
-			alertKey="black-friday-2023-promotion"
+			id={ `black-friday-2024-promotion-${ location }` }
+			promoId="black-friday-2024-promotion"
+			alertKey="black-friday-2024-promotion"
 			store={ store }
 			title={ title }
-			image={ Image }
 			{ ...props }
 		>
-			<span className="yoast-bf-sale-badge">{ __( "30% OFF!", "wordpress-seo" ) } </span>
+			<span className="yoast-bf-sale-badge">{ __( "Black Friday", "wordpress-seo" ) } </span>
 			{ location === "sidebar" && <a
 				// Styling is to counteract the WP paragraph margin-bottom.
 				className="yst-block yst--mb-[1em]"

packages/js/src/components/UpsellBox.js

@@ -108,16 +108,15 @@ class UpsellBox extends Component {
 	 * @returns {wp.Element} The rendered UpsellBox component.
 	 */
 	render() {
-		const isBlackFriday = select( "yoast-seo/editor" ).isPromotionActive( "black-friday-2023-promotion" );
+		const isBlackFriday = select( "yoast-seo/editor" ).isPromotionActive( "black-friday-2024-promotion" );
 		const { defaultPrice } = this.state;
 		const newPrice = isBlackFriday ? "69.30" : null;
 		const price = newPrice ? newPrice : defaultPrice;
 		return (
 			<Fragment>
 				{ isBlackFriday &&
-				<div className="yst-flex yst-justify-between yst-items-center yst-text-lg yst-content-between yst-bg-black yst-text-amber-300 yst-h-9 yst-border-amber-300 yst-border-y yst-border-x-0 yst-border-solid yst-px-6">
-					<div>{ __( "BLACK FRIDAY", "wordpress-seo" ) }</div>
-					<div>{ __( "30% OFF", "wordpress-seo" ) }</div>
+				<div className="yst-flex  yst-items-center yst-text-lg yst-content-between yst-bg-black yst-text-amber-300 yst-h-9 yst-border-amber-300 yst-border-y yst-border-x-0 yst-border-solid yst-px-6">
+					<div className="yst-mx-auto">{ __( "BLACK FRIDAY | 30% OFF", "wordpress-seo" ) }</div>
 				</div> }
 				<Container>
 					<Heading>{ this.props.title }</Heading>

packages/js/src/elementor/components/fills/ElementorFill.js

@@ -54,7 +54,11 @@ export default function ElementorFill( { isLoading, onLoad, settings } ) {
 			<Fill name="YoastElementor">
 				<SidebarItem renderPriority={ 1 }>
 					<Alert />
-					{ FirstEligibleNotification && <FirstEligibleNotification /> }
+					{ FirstEligibleNotification && (
+						<div className="yst-inline-block yst-px-1.5">
+							<FirstEligibleNotification />
+						</div>
+					) }
 				</SidebarItem>
 				{ settings.isKeywordAnalysisActive && <SidebarItem renderPriority={ 8 }>
 					<KeywordInput

packages/js/src/helpers/shouldShowWebinarPromotionNotification.js

@@ -26,8 +26,8 @@ const shouldShowWebinarPromotionNotificationInDashboard = ( store = "yoast-seo/e
 	 * @returns {boolean} Whether the Webinar promotion should be shown.
 	 */
 const shouldShowWebinarPromotionNotificationInSidebar = ( store = "yoast-seo/editor" ) => {
-	const isBlackFridayPromotionActive = select( store ).isPromotionActive( "black-friday-2023-promotion" );
-	const isBlackFridayPromotionAlertDismissed = select( store ).isAlertDismissed( "black-friday-2023-promotion" );
+	const isBlackFridayPromotionActive = select( store ).isPromotionActive( "black-friday-2024-promotion" );
+	const isBlackFridayPromotionAlertDismissed = select( store ).isAlertDismissed( "black-friday-2024-promotion" );
 
 	if ( isBlackFridayPromotionActive ) {
 		return isBlackFridayPromotionAlertDismissed;

packages/js/src/hooks/use-first-eligible-notification.js

@@ -1,8 +1,6 @@
 import { BlackFridayPromotion } from "../components/BlackFridayPromotion";
-import { BlackFridaySidebarChecklistPromotion } from "../components/BlackFridaySidebarChecklistPromotion";
 import { TrustpilotReviewNotification, useTrustpilotReviewNotification } from "../components/trustpilot-review-notification";
 import WebinarPromoNotification from "../components/WebinarPromoNotification";
-import { isWooCommerceActive } from "../helpers/isWooCommerceActive";
 import { shouldShowWebinarPromotionNotificationInSidebar } from "../helpers/shouldShowWebinarPromotionNotification";
 
 /**
@@ -43,10 +41,6 @@ export const useFirstEligibleNotification = ( { webinarIntroUrl } ) => {
 			getIsEligible: shouldShowWebinarPromotionNotificationInSidebar,
 			component: () => <WebinarPromoNotification hasIcon={ false } image={ null } url={ webinarIntroUrl } />,
 		},
-		{
-			getIsEligible: isWooCommerceActive,
-			component: () => <BlackFridaySidebarChecklistPromotion hasIcon={ false } />,
-		},
 		{
 			getIsEligible: () => true,
 			component: () => <BlackFridayPromotion hasIcon={ false } />,

packages/js/src/settings/app.js

@@ -165,13 +165,12 @@ const PremiumUpsellList = () => {
 	const premiumLink = useSelectSettings( "selectLink", [], "https://yoa.st/17h" );
 	const premiumUpsellConfig = useSelectSettings( "selectUpsellSettingsAsProps" );
 	const promotions = useSelectSettings( "selectPreference", [], "promotions", [] );
-	const isBlackFriday = promotions.includes( "black-friday-2023-promotion" );
+	const isBlackFriday = promotions.includes( "black-friday-2024-promotion" );
 
 	return (
 		<Paper as="div" className="xl:yst-max-w-3xl">
-			{ isBlackFriday && <div className="yst-rounded-t-lg yst-h-9 yst-flex yst-justify-between yst-items-center yst-bg-black yst-text-amber-300 yst-px-4 yst-text-lg yst-border-b yst-border-amber-300 yst-border-solid yst-font-semibold">
-				<div>{ __( "BLACK FRIDAY", "wordpress-seo" ) }</div>
-				<div>{ __( "30% OFF", "wordpress-seo" ) }</div>
+			{ isBlackFriday && <div className="yst-rounded-t-lg yst-h-9 yst-flex yst-items-center yst-bg-black yst-text-amber-300 yst-px-4 yst-text-lg yst-border-b yst-border-amber-300 yst-border-solid yst-font-semibold">
+				<div>{ __( "30% OFF | Code: BF2024", "wordpress-seo" ) }</div>
 			</div> }
 			<div className="yst-p-6 yst-flex yst-flex-col">
 				<Title as="h2" size="4" className="yst-text-xl yst-text-primary-500">

packages/js/src/shared-admin/components/premium-upsell-card.js

@@ -16,8 +16,9 @@ import { ReactComponent as G2Logo } from "./g2-logo-white.svg";
  * @returns {JSX.Element} The premium upsell card.
  */
 export const PremiumUpsellCard = ( { link, linkProps, promotions } ) => {
-	const info = useMemo( () => __( "Use AI to generate titles and meta descriptions, automatically redirect deleted pages, get 24/7 support, and much, much more!", "wordpress-seo" ), [] );
-	const getPremium = createInterpolateElement(
+	let info = useMemo( () => __( "Use AI to generate titles and meta descriptions, automatically redirect deleted pages, get 24/7 support, and much, much more!", "wordpress-seo" ), [] );
+	const isBlackFriday = promotions.includes( "black-friday-2024-promotion" );
+	let getPremium = createInterpolateElement(
 		sprintf(
 			/* translators: %1$s and %2$s expand to a span wrap to avoid linebreaks. %3$s expands to "Yoast SEO Premium". */
 			__( "%1$sGet%2$s %3$s", "wordpress-seo" ),
@@ -29,19 +30,21 @@ export const PremiumUpsellCard = ( { link, linkProps, promotions } ) => {
 			nowrap: <span className="yst-whitespace-nowrap" />,
 		}
 	);
-	const isBlackFriday = promotions.includes( "black-friday-2023-promotion" );
-	const saveMoneyText = createInterpolateElement(
-		sprintf(
-			/* translators: %1$s and %2$s expand to strong tags. */
-			__( "%1$sSAVE 30%%%2$s on your 12 month subscription", "wordpress-seo" ),
-			"<strong>",
-			"</strong>"
-		),
-		{
-			strong: <strong />,
-		}
-	);
+	if ( isBlackFriday ) {
+		info = useMemo( () => __( "If you were thinking about upgrading, now's the time! 30% OFF ends 3rd Dec 11am (CET)", "wordpress-seo" ), [] );
 
+		getPremium = createInterpolateElement(
+			sprintf(
+				/* translators: %1$s and %2$s expand to a span wrap to avoid linebreaks. %3$s expands to "Yoast SEO Premium". */
+				__( "%1$sAll annual plans incl. %2$s", "wordpress-seo" ),
+				"<nowrap>",
+				"</nowrap>"
+			),
+			{
+				nowrap: <span className="yst-whitespace-nowrap" />,
+			}
+		);
+	}
 	return (
 		<div className="yst-p-6 yst-rounded-lg yst-text-white yst-bg-primary-500 yst-shadow">
 			<figure
@@ -51,18 +54,13 @@ export const PremiumUpsellCard = ( { link, linkProps, promotions } ) => {
 			</figure>
 			{ isBlackFriday && <div className="sidebar__sale_banner_container">
 				<div className="sidebar__sale_banner">
-					<span className="banner_text">{ __( "BLACK FRIDAY - 30% OFF", "wordpress-seo" ) }</span>
+					<span className="banner_text">{ __( "30% OFF | Code: BF2024", "wordpress-seo" ) }</span>
 				</div>
 			</div> }
 			<Title as="h2" className="yst-mt-6 yst-text-base yst-font-extrabold yst-text-white">
 				{ getPremium }
 			</Title>
 			<p className="yst-mt-2">{ info }</p>
-			{ isBlackFriday && <div className="yst-text-center yst-border-t-[1px] yst-border-white yst-italic yst-mt-3">
-				<p className="yst-text-[10px] yst-my-3 yst-mx-0">
-					{ saveMoneyText }
-				</p>
-			</div> }
 			<Button
 				as="a"
 				variant="upsell"
@@ -72,7 +70,7 @@ export const PremiumUpsellCard = ( { link, linkProps, promotions } ) => {
 				className="yst-flex yst-justify-center yst-gap-2 yst-mt-4 focus:yst-ring-offset-primary-500"
 				{ ...linkProps }
 			>
-				<span>{ isBlackFriday ? __( "Claim your 30% off now!", "wordpress-seo" ) : getPremium }</span>
+				<span>{ isBlackFriday ? __( "Buy now", "wordpress-seo" ) : getPremium }</span>
 				<ArrowNarrowRightIcon className="yst-w-4 yst-h-4 yst-icon-rtl" />
 			</Button>
 			<p className="yst-text-center yst-text-xs yst-mx-2 yst-font-light yst-leading-5 yst-mt-2">

src/integrations/alerts/black-friday-promotion-notification.php

@@ -12,5 +12,5 @@ class Black_Friday_Promotion_Notification extends Abstract_Dismissable_Alert {
 	 *
 	 * @var string
 	 */
-	protected $alert_identifier = 'black-friday-2023-promotion';
+	protected $alert_identifier = 'black-friday-2024-promotion';
 }

src/integrations/settings-integration.php

@@ -378,7 +378,7 @@ public function enqueue_assets() {
 		\wp_enqueue_media();
 		$this->asset_manager->enqueue_script( 'new-settings' );
 		$this->asset_manager->enqueue_style( 'new-settings' );
-		if ( \YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ) {
+		if ( \YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ) {
 			$this->asset_manager->enqueue_style( 'black-friday-banner' );
 		}
 		$this->asset_manager->localize_script( 'new-settings', 'wpseoScriptData', $this->get_script_data() );

src/integrations/support-integration.php

@@ -133,7 +133,7 @@ public function enqueue_assets() {
 		\remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 		$this->asset_manager->enqueue_script( 'support' );
 		$this->asset_manager->enqueue_style( 'support' );
-		if ( \YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2023-promotion' ) ) {
+		if ( \YoastSEO()->classes->get( Promotion_Manager::class )->is( 'black-friday-2024-promotion' ) ) {
 			$this->asset_manager->enqueue_style( 'black-friday-banner' );
 		}
 		$this->asset_manager->localize_script( 'support', 'wpseoScriptData', $this->get_script_data() );