feat: add Black Friday banner rendering (#269)

assets/css/banner.css

@@ -0,0 +1,50 @@
+.tsdk-banner-cta {
+    position: relative;
+    display: inline-block;
+}
+
+.tsdk-banner-urgency-text {
+    position: absolute;
+    top: 6%;
+    left: 1%;
+    color: white;
+    padding: 5px;
+    font-size: 16px;
+    z-index: 10;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+.tsdk-banner-img {
+    width: 100%;
+    height: auto;
+}
+
+@media (max-width: 1100px) {
+    .tsdk-banner-urgency-text {
+        font-size: 10px;
+        top: 0;
+        left: 1%;
+    }
+}
+
+@media (max-width: 950px) {
+    .tsdk-banner-urgency-text {
+        font-size: 10px;
+        left: 1%;
+    }
+}
+
+@media (max-width: 500px) {
+    .tsdk-banner-urgency-text {
+        font-size: 6px;
+        top: -10%;
+        left: 1%;
+    }
+}
+
+@media (max-width: 420px) {
+    .tsdk-banner-urgency-text {
+        left: 0%;
+    }
+}

assets/js/build/banner/banner.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '9c795bb600f6ae533935');

assets/js/src/banner.js

@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.dispatchEvent(new Event('themeisle:banner:init'));
+});
+
+// NOTE: use this event if you need to load the banner on an event other than DOMContentLoaded
+document.addEventListener('themeisle:banner:init', () => {
+    initializeBanner();
+});
+
+function initializeBanner() {
+    if ( 'undefined' === typeof window.tsdk_banner_data ) {
+        return;
+    }
+
+    const bannerRoot = document.getElementById('tsdk_banner');
+    if ( ! bannerRoot ) {
+        return;
+    }
+
+    bannerRoot.innerHTML = window.tsdk_banner_data.content;
+}

package.json

@@ -6,13 +6,15 @@
     "dev": "npm run start",
     "start:promos": "wp-scripts start assets/js/src/index.js --output-path=assets/js/build/promos",
     "start:survey": "wp-scripts start assets/js/src/survey_deps.js --output-path=assets/js/build/survey --devtool inline-source-map",
+    "start:banner": "wp-scripts start assets/js/src/banner.js --output-path=assets/js/build/banner --devtool inline-source-map",
     "build:promos": "wp-scripts build assets/js/src/index.js --output-path=assets/js/build/promos",
     "start:about": "wp-scripts start assets/js/src/about/about.js --output-path=assets/js/build/about",
     "build:about": "wp-scripts build assets/js/src/about/about.js --output-path=assets/js/build/about",
     "start:float": "wp-scripts start assets/js/src/float_widget/float.js --output-path=assets/js/build/float_widget",
     "build:float": "wp-scripts build assets/js/src/float_widget/float.js --output-path=assets/js/build/float_widget",
     "build:tracking": "wp-scripts build assets/js/src/tracking.js --output-path=assets/js/build/tracking",
     "build:survey": "wp-scripts build assets/js/src/survey_deps.js --output-path=assets/js/build/survey",
+    "build:banner": "wp-scripts build assets/js/src/banner.js --output-path=assets/js/build/banner",
     "start": "npm-run-all --parallel start:*",
     "build": "npm-run-all --parallel build:*",
     "release": "semantic-release --debug",

src/Modules/Announcements.php

@@ -35,6 +35,17 @@ class Announcements extends Abstract_Module {
 		),
 	);
 
+	/**
+	 * Mark is a banner for a product was already loaded.
+	 *
+	 * @var array
+	 */
+	private static $banner_loaded = array();
+
+	const PLUGIN_PAGE   = 'https://themeisle.com/plugins';
+	const THEME_PAGE    = 'https://themeisle.com/themes';
+	const REVIVE_SOCIAL = 'https://revive.social/plugins';
+
 	/**
 	 * Holds the option prefix for the announcements.
 	 *
@@ -51,6 +62,17 @@ class Announcements extends Abstract_Module {
 	 */
 	public $time = '';
 
+	/**
+	 * Constructor for the Announcements module.
+	 *
+	 * @param array $timeline Optional. An array representing the timeline of announcements. Default is an empty array.
+	 */
+	public function __construct( $timeline = array() ) {
+		if ( is_array( $timeline ) && ! empty( $timeline ) ) {
+			self::$timeline = $timeline;
+		}
+	}
+
 	/**
 	 * Check if the module can be loaded.
 	 *
@@ -83,6 +105,7 @@ public function load( $product ) {
 		add_action( 'admin_init', array( $this, 'load_announcements' ) );
 		add_filter( 'themeisle_sdk_active_announcements', array( $this, 'get_active_announcements' ) );
 		add_filter( 'themeisle_sdk_announcements', array( $this, 'get_announcements_for_plugins' ) );
+		add_action( 'themeisle_sdk_load_banner', array( $this, 'load_dashboard_banner_renderer' ) );
 	}
 
 	/**
@@ -143,9 +166,18 @@ public function get_announcements_for_plugins() {
 				$announcements[ $announcement ]['active'] = $this->is_active( $dates );
 
 				// Dashboard banners URLs.
-				$announcements[ $announcement ]['feedzy_dashboard_url'] = tsdk_utmify( 'https://themeisle.com/plugins/feedzy-rss-feeds/blackfriday/', 'bfcm24', 'dashboard' );
-				$announcements[ $announcement ]['neve_dashboard_url']   = tsdk_utmify( 'https://themeisle.com/themes/neve/blackfriday/', 'bfcm24', 'dashboard' );
-				$announcements[ $announcement ]['otter_dashboard_url']  = tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['neve_dashboard_url']       = tsdk_utmify( self::THEME_PAGE . '/neve/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['hestia_dashboard_url']     = tsdk_utmify( self::THEME_PAGE . '/hestia/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['feedzy_dashboard_url']     = tsdk_utmify( self::PLUGIN_PAGE . '/feedzy-rss-feeds/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['otter_dashboard_url']      = tsdk_utmify( self::PLUGIN_PAGE . '/otter-blocks/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['mpg_dashboard_url']        = tsdk_utmify( self::PLUGIN_PAGE . '/multi-pages-generator/blackfriday', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['ppom_dashboard_url']       = tsdk_utmify( self::PLUGIN_PAGE . '/ppom-pro/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['rfc7r_dashboard_url']      = tsdk_utmify( self::PLUGIN_PAGE . '/wpcf7-redirect/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['hyve_dashboard_url']       = tsdk_utmify( self::PLUGIN_PAGE . '/hyve/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['spc_dashboard_url']        = tsdk_utmify( self::PLUGIN_PAGE . '/super-page-cache-pro/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['visualizer_dashboard_url'] = tsdk_utmify( self::PLUGIN_PAGE . '/visualizer-charts-and-graphs/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['feedzy_dashboard_url']     = tsdk_utmify( self::PLUGIN_PAGE . '/feedzy-rss-feeds/blackfriday/', 'bfcm24', 'dashboard' );
+				$announcements[ $announcement ]['rop_dashboard_url']        = tsdk_utmify( self::REVIVE_SOCIAL . '/revive-old-post/', 'bfcm24', 'dashboard' );
 
 				// Customizer banners URLs.
 				$announcements[ $announcement ]['hestia_customizer_url'] = tsdk_utmify( 'https://themeisle.com/black-friday/', 'bfcm24', 'hestiacustomizer' );
@@ -155,6 +187,22 @@ public function get_announcements_for_plugins() {
 				$remaining_time                                   = $this->get_remaining_time_for_event( $dates['end'] );
 				$announcements[ $announcement ]['remaining_time'] = $remaining_time;
 				$announcements[ $announcement ]['urgency_text']   = ! empty( $remaining_time ) ? sprintf( Loader::$labels['announcements']['hurry_up'], $remaining_time ) : '';
+
+				$announcements[ $announcement ]['feedzy_banner_src']     = defined( 'FEEDZY_ABSURL' ) ? FEEDZY_ABSURL . 'img/black-friday.jpg' : '';
+				$announcements[ $announcement ]['visualizer_banner_src'] = defined( 'VISUALIZER_ABSURL' ) ? VISUALIZER_ABSURL . 'images/black-friday.jpg' : '';
+				$announcements[ $announcement ]['ppom_banner_src']       = defined( 'PPOM_URL' ) ? PPOM_URL . '/images/black-friday.jpg' : '';
+				$announcements[ $announcement ]['mpg_banner_src']        = defined( 'MPG_BASE_IMG_PATH' ) ? MPG_BASE_IMG_PATH . '/black-friday.jpg' : '';
+				$announcements[ $announcement ]['spc_banner_src']        = defined( 'SWCFPC_PLUGIN_URL' ) ? SWCFPC_PLUGIN_URL . 'assets/img/black-friday.jpg' : '';
+				$announcements[ $announcement ]['hestia_banner_src']     = defined( 'HESTIA_ASSETS_URL' ) ? HESTIA_ASSETS_URL . 'img/black-friday.jpg' : '';
+				$announcements[ $announcement ]['hyve_banner_src']       = defined( 'HYVE_LITE_URL' ) ? HYVE_LITE_URL . 'assets/images/black-friday.jpg' : '';
+				$announcements[ $announcement ]['rfc7r_banner_src']      = defined( 'WPCF7_PRO_REDIRECT_ASSETS_PATH' ) ? WPCF7_PRO_REDIRECT_ASSETS_PATH . 'images/black-friday.jpg' : '';
+				$announcements[ $announcement ]['rop_banner_src']        = defined( 'ROP_LITE_URL' ) ? ROP_LITE_URL . 'assets/img/black-friday.jpg' : '';
+
+				foreach ( $announcements[ $announcement ] as $key => $value ) {
+					if ( strpos( $key, '_url' ) !== false ) {
+						$announcements[ $announcement ][ $key ] = tsdk_translate_link( $value );
+					}
+				}
 			}
 		}
 
@@ -299,11 +347,10 @@ public function black_friday_notice_render() {
 		<div class="themeisle-sale notice notice-info is-dismissible" data-announcement="black_friday">
 			<img width="24" src="<?php echo esc_url_raw( $this->get_sdk_uri() . 'assets/images/themeisle-logo.png' ); ?>"/>
 			<p>
-				<strong><?php echo esc_html( Loader::$labels['announcements']['sale_live'] ); ?> ></strong>
-				- <?php echo sprintf( esc_html( Loader::$labels['announcements']['max_savings'] ), esc_html( implode( ', ', $product_names ) ) ); ?>
-				.
+				<strong><?php echo esc_html( Loader::$labels['announcements']['sale_live'] ); ?></strong>
+				- <?php echo sprintf( esc_html( Loader::$labels['announcements']['max_savings'] ), esc_html( implode( ', ', $product_names ) ) ); ?>.
 				<a href="<?php echo esc_url_raw( tsdk_utmify( 'https://themeisle.com/blackfriday/', 'bfcm24', 'globalnotice' ) ); ?>"
-				   target="_blank"><?php echo esc_html( Loader::$labels['announcements']['learn_more'] ); ?>></a>
+				   target="_blank"><?php echo esc_html( Loader::$labels['announcements']['learn_more'] ); ?></a>
 				<span class="themeisle-sale-error"></span>
 			</p>
 		</div>
@@ -359,4 +406,92 @@ public function black_friday_notice_render() {
 		</script>
 		<?php
 	}
+
+	/**
+	 * Load the dashboard banner renderer.
+	 *
+	 * @param string $product_key The product key.
+	 *
+	 * @return void
+	 */
+	public function load_dashboard_banner_renderer( $product_key ) {
+
+		$banner_handler = apply_filters( 'themeisle_sdk_dependency_script_handler', 'banner' );
+
+		if ( empty( $banner_handler ) ) {
+			return;
+		}
+
+		if ( isset( self::$banner_loaded[ $product_key ] ) && true === self::$banner_loaded[ $product_key ] ) {
+			return;
+		}
+		self::$banner_loaded[ $product_key ] = true;
+
+		$banner_data = array();
+
+		// Get the first active banner.
+		foreach ( $this->get_announcements_for_plugins() as $announcement ) {
+			if ( false === $announcement['active'] ) {
+				continue;
+			}
+
+			$cta_key        = $product_key . '_dashboard_url';
+			$banner_src_key = $product_key . '_banner_src';
+
+			if (
+				! isset( $announcement[ $cta_key ] ) ||
+				! isset( $announcement[ $banner_src_key ] ) ||
+				empty( $announcement[ $banner_src_key ] ) ||
+				! isset( $announcement['urgency_text'] )
+			) {
+				continue;
+			}
+
+			$banner_data = array(
+				'content' => $this->render_banner(
+					array(
+						'cta_url'      => $announcement[ $cta_key ],
+						'img_src'      => $announcement[ $banner_src_key ],
+						'urgency_text' => $announcement['urgency_text'],
+					)
+				),
+			);
+
+			break;
+		}
+
+		if ( empty( $banner_data ) ) {
+			return;
+		}
+
+		do_action( 'themeisle_sdk_dependency_enqueue_script', 'banner' );
+		wp_localize_script( $banner_handler, 'tsdk_banner_data', $banner_data );
+	}
+
+	/**
+	 * Renders a banner with the provided settings.
+	 *
+	 * @param array $settings {
+	 *     Optional. An array of settings for the banner.
+	 *
+	 *     @type string $cta_url       The URL for the call-to-action link.
+	 *     @type string $img_src       The source URL for the banner image.
+	 *     @type string $urgency_text  The urgency text to display on the banner.
+	 * }
+	 * @return string The HTML output of the banner.
+	 */
+	public function render_banner( $settings = array() ) {
+		if ( empty( $settings ) ) {
+			return '';
+		}
+
+		return wp_kses_post(
+			wp_sprintf(
+				'<a href="%s" target="_blank" class="tsdk-banner-cta"><img src="%s" class="tsdk-banner-img"><div class="tsdk-banner-urgency-text">%s</div></a>',
+				esc_url_raw( $settings['cta_url'] ),
+				esc_url_raw( $settings['img_src'] ),
+				sanitize_text_field( $settings['urgency_text'] )
+			)
+		);
+	}
 }

src/Modules/Script_loader.php

@@ -78,7 +78,7 @@ public function get_script_handler( $slug ) {
 			return '';
 		}
 
-		if ( 'tracking' !== $slug && 'survey' !== $slug ) {
+		if ( 'tracking' !== $slug && 'survey' !== $slug && 'banner' !== $slug ) {
 			return '';
 		}
 
@@ -100,6 +100,8 @@ public function enqueue_script( $slug ) {
 			$this->load_tracking( $handler );
 		} elseif ( 'survey' === $slug ) {
 			$this->load_survey( $handler );
+		} elseif ( 'banner' === $slug ) {
+			$this->load_banner( $handler );
 		}
 	}
 
@@ -151,4 +153,31 @@ public function load_tracking( $handler ) {
 			true
 		);
 	}
+
+	/**
+	 * Load the banner script.
+	 * 
+	 * @param string $handler The script handler.
+	 * 
+	 * @return void
+	 */
+	public function load_banner( $handler ) {
+		global $themeisle_sdk_max_path;
+		$asset_file = require $themeisle_sdk_max_path . '/assets/js/build/banner/banner.asset.php';
+
+		wp_enqueue_script(
+			$handler,
+			$this->get_sdk_uri() . 'assets/js/build/banner/banner.js',
+			$asset_file['dependencies'],
+			$asset_file['version'],
+			true
+		);
+
+		wp_enqueue_style(
+			$handler . '_style',
+			$this->get_sdk_uri() . 'assets/css/banner.css',
+			[],
+			$asset_file['version']
+		);
+	}
 }