Include conditional content JS

src/Common/Admin/Conditional_Content/Black_Friday.php

@@ -9,6 +9,8 @@
 use TEC\Common\Admin\Settings_Section;
 use Tribe\Utils\Date_I18n;
 
+use Tribe__Main as Common;
+
 /**
  * Set up for Black Friday promo.
  *
@@ -75,7 +77,7 @@ protected function should_display(): bool {
 	protected function get_wide_banner_html(): string {
 		$template_args = [
 			'image_src' => tribe_resource_url( 'images/hero-section-wide.jpg', false, null, \Tribe__Main::instance() ),
-			'link'      => 'https://evnt.is/tec-bf-2024',
+			'link' => 'https://evnt.is/tec-bf-2024',
 		];
 
 		return $this->get_template()->template( 'black-friday', $template_args, false );
@@ -92,6 +94,18 @@ public function render_wide_banner_html(): void {
 		if ( ! $this->should_display() ) {
 			return;
 		}
+
+		/**
+		 * Fires before the wide banner is rendered.
+		 * This hook is used to add additional content before the narrow banner.
+		 *
+		 * @since TBD
+		 *
+		 * @param string       $slug The slug of the conditional content.
+		 * @param Black_Friday $this The Black Friday instance.
+		 */
+		do_action( 'tec_conditional_content_black_friday', 'wide_banner', $this );
+
 		echo $this->get_wide_banner_html(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped,StellarWP.XSS.EscapeOutput.OutputNotEscaped
 	}
 
@@ -105,7 +119,7 @@ public function render_wide_banner_html(): void {
 	protected function get_narrow_banner_html(): string {
 		$template_args = [
 			'image_src' => tribe_resource_url( 'images/hero-section-narrow.jpg', false, null, \Tribe__Main::instance() ),
-			'link'      => 'https://evnt.is/tec-bf-2024',
+			'link' => 'https://evnt.is/tec-bf-2024',
 			'is_narrow' => true,
 		];
 
@@ -123,6 +137,17 @@ public function render_narrow_banner_html(): void {
 		if ( ! $this->should_display() ) {
 			return;
 		}
+		/**
+		 * Fires before the narrow banner is rendered.
+		 * This hook is used to add additional content before the narrow banner.
+		 *
+		 * @since TBD
+		 *
+		 * @param string       $slug The slug of the conditional content.
+		 * @param Black_Friday $this The Black Friday instance.
+		 */
+		do_action( 'tec_conditional_content_black_friday', 'narrow_banner', $this );
+
 		echo $this->get_narrow_banner_html(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped,StellarWP.XSS.EscapeOutput.OutputNotEscaped
 	}
 
@@ -163,6 +188,18 @@ public function include_sidebar_section( $sidebar ): void {
 
 		$year = date_i18n( 'Y' );
 
+		/**
+		 * Fires before the settings sidebar is rendered.
+		 * This hook is used to add additional content before the narrow banner.
+		 *
+		 * @since TBD
+		 *
+		 * @param string       $slug The slug of the conditional content.
+		 * @param Black_Friday $this The Black Friday instance.
+		 */
+		do_action( 'tec_conditional_content_black_friday', 'settings-sidebar', $this );
+
+
 		$sidebar->prepend_section(
 			( new Settings_Section() )
 				->add_elements(
@@ -174,7 +211,7 @@ public function include_sidebar_section( $sidebar ): void {
 								new Attributes(
 									[
 										/* translators: %1$s: Black Friday year */
-										'alt'  => sprintf( esc_attr_x( '%1$s Black Friday Sale for The Events Calendar plugins, add-ons and bundles.', 'Alt text for the Black Friday Ad', 'tribe-common' ), esc_attr( $year ) ),
+										'alt' => sprintf( esc_attr_x( '%1$s Black Friday Sale for The Events Calendar plugins, add-ons and bundles.', 'Alt text for the Black Friday Ad', 'tribe-common' ), esc_attr( $year ) ),
 										'role' => 'presentation',
 									]
 								)
@@ -183,9 +220,9 @@ public function include_sidebar_section( $sidebar ): void {
 							new Attributes(
 								[
 									/* translators: %1$s: Black Friday year */
-									'title'  => sprintf( esc_attr_x( '%1$s Black Friday Sale for The Events Calendar plugins, add-ons and bundles.', 'Alt text for the Black Friday Ad', 'tribe-common' ), esc_attr( $year ) ),
+									'title' => sprintf( esc_attr_x( '%1$s Black Friday Sale for The Events Calendar plugins, add-ons and bundles.', 'Alt text for the Black Friday Ad', 'tribe-common' ), esc_attr( $year ) ),
 									'target' => '_blank',
-									'rel'    => 'noopener nofollow',
+									'rel' => 'noopener nofollow',
 								]
 							)
 						),

src/Common/Admin/Conditional_Content/Controller.php

@@ -32,6 +32,18 @@ public function register() {
 		$this->container->singleton(  Black_Friday::class, Black_Friday::class, [ 'hook' ] );
 
 		$this->hooks();
+
+		$plugin = Common::instance();
+		tribe_asset(
+			$plugin,
+			'tec-conditional-content',
+			'admin/conditional-content.js',
+			[
+				'wp-data',
+				'tribe-common',
+			],
+			'tec_conditional_content_black_friday',
+		);
 	}
 
 	/**

src/Common/Admin/Settings_Sidebar.php

@@ -54,11 +54,16 @@ public function render() {
 	 * @since 6.1.0
 	 *
 	 * @param Section $section The section to add.
+	 * @param bool    $append  Whether to append the section or prepend it.
 	 *
 	 * @return self
 	 */
-	public function add_section( Section $section ): self {
-		return $this->append_section( $section );
+	public function add_section( Section $section, bool $append = true ): self {
+		if ( $append ) {
+			return $this->append_section( $section );
+		}
+
+		return $this->prepend_section( $section );
 	}
 
 	/**

src/Common/Admin/Settings_Sidebar_Section.php

@@ -45,7 +45,7 @@ class Settings_Sidebar_Section extends Settings_Section {
 	 *
 	 * @return self
 	 */
-	public function header_image( Image $image ): self {
+	public function set_header_image( Image $image ): self {
 		$this->header_image = $image;
 
 		return $this;
@@ -60,7 +60,7 @@ public function header_image( Image $image ): self {
 	 *
 	 * @return void
 	 */
-	public function add_section( Section $section ) {
+	public function add_section( Section $section ): void {
 		$this->sections[] = $section;
 	}
 

src/resources/js/admin/conditional-content.js

@@ -0,0 +1,79 @@
+/**
+ * Notice Dismiss structure
+ */
+( function( $, wp, obj ) {
+	const { tec } = window;
+
+	/**
+	 * Selectors used for configuration and setup.
+	 *
+	 * @since TBD
+	 *
+	 * @type {{}}
+	 */
+	obj.selectors = {
+		dismissButton: '[data-tec-conditional-content-dismiss-button]',
+		dismissedContainer: '[data-tec-conditional-content-dismiss-container]',
+	};
+
+	$( document ).on(
+		'click',
+		obj.selectors.dismissButton,
+		( event ) => {
+			const $button = $( event.target );
+			const $container = $button.parents( obj.selectors.dismissedContainer ).eq( 0 );
+
+			if ( ! $container.length ) {
+				return;
+			}
+
+			let id = $button.data( 'tecConditionalContentDismissId' );
+
+			if ( ! id ) {
+				id = $container.data( 'tecConditionalContentDismissId' );
+			}
+
+			let nonce = $button.data( 'tecConditionalContentDismissNonce' );
+
+			if ( ! nonce ) {
+				nonce = $container.data( 'tecConditionalContentDismissNonce' );
+			}
+
+			if ( ! id || ! nonce ) {
+				return;
+			}
+
+			wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'tec/conditional-content-dismissed', id, 1 );
+
+			$.ajax( ajaxurl, {
+				dataType: 'json',
+				method: 'POST',
+				data: {
+					action: 'tec_conditional_content_dismiss',
+					id: id,
+					nonce: nonce,
+				},
+				complete: () => {
+					$container.remove();
+				},
+			} );
+		}
+	).ready(() => {
+		const preferences = wp.data.select( 'core/preferences' );
+		const dismissed = preferences.get( 'tec/conditional-content-dismissed' );
+
+		if ( ! dismissed ) {
+			return;
+		}
+
+		dismissed.forEach( ( id ) => {
+			$( `[data-tec-conditional-content-dismiss-id="${id}"]` ).remove();
+		} );
+	});
+
+
+	// Expose the object to the global scope.
+	tec.conditionalContent = obj;
+}( jQuery, window.wp, {} ) );

src/resources/js/tribe-common.js

@@ -85,3 +85,14 @@ String.prototype.varName = function () {
  * @type {object}
  */
 var tribe = tribe || {}; // eslint-disable-line no-redeclare
+
+
+/**
+ * Creates a `window.tec` variable where we should start to store all the things.
+ * Eventually we will migrate all the things from `window.tribe` to `window.tec`.
+ *
+ * @since TBD
+ *
+ * @type {object}
+ */
+window.tec = window.tec || {}; // eslint-disable-line no-redeclare