From acb2a99722368ab21e514efd918a4b5df229cf54 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Wed, 6 Nov 2024 00:01:54 -0700
Subject: [PATCH 01/16] Initial API logic

---
 includes/ComingSoon.php            |   3 +
 includes/WooCommerceOptionSync.php | 137 +++++++++++++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 includes/WooCommerceOptionSync.php

diff --git a/includes/ComingSoon.php b/includes/ComingSoon.php
index c9ef973..e6bcc8f 100644
--- a/includes/ComingSoon.php
+++ b/includes/ComingSoon.php
@@ -49,6 +49,9 @@ public function __construct( Container $container ) {
 			// add plugin version to plugin styles file for cache busting
 			$this->args['template_styles'] = $this->args['template_styles'] . '?v=' . container()->plugin()->version;
 		}
+
+		new WooCommerceOptionSync( $container );
+
 		// set up all actions
 		\add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
 		\add_action( 'rest_api_init', array( $this, 'rest_api_init' ) );
diff --git a/includes/WooCommerceOptionSync.php b/includes/WooCommerceOptionSync.php
new file mode 100644
index 0000000..28d4bb4
--- /dev/null
+++ b/includes/WooCommerceOptionSync.php
@@ -0,0 +1,137 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\ComingSoon;
+
+class WooCommerceOptionSync {
+	/**
+	 * Service provider.
+	 *
+	 * @var Service
+	 */
+	private static $service;
+
+	/**
+	 * Flag to prevent infinite loops during synchronization.
+	 *
+	 * @var bool
+	 */
+	private static $syncing = false;
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		add_action( 'update_option_nfd_coming_soon', array( __CLASS__, 'sync_options' ), 10, 3 );
+		add_action( 'update_option_woocommerce_coming_soon', array( __CLASS__, 'sync_options' ), 10, 3 );
+		add_action( 'update_option_woocommerce_store_pages_only', array( __CLASS__, 'sync_options' ), 10, 3 );
+		add_action( 'add_option_woocommerce_coming_soon', array( __CLASS__, 'sync_when_woocommerce_option_is_added' ) );
+	}
+
+	/**
+	 * Sync coming soon options between the brand plugin and WooCommerce.
+	 *
+	 * @param mixed  $old_value   The old option value.
+	 * @param mixed  $new_value   The new option value.
+	 * @param string $option_name The option name.
+	 */
+	public static function sync_options( $old_value = '', $new_value, $option_name ): void {
+		// Prevent infinite loops
+		if ( self::$syncing ) {
+			return;
+		}
+
+		self::$syncing = true;
+
+		if ( $option_name === 'nfd_coming_soon' ) {
+			// Update WooCommerce options to match nfd_coming_soon
+			self::sync_woocommerce_coming_soon_option( $new_value );
+			self::sync_nfd_woocommerce_pages_only_option();
+		}
+	
+		if ( $option_name === 'woocommerce_coming_soon' ) {
+			// Update brand plugin's option to match woocommerce_coming_soon
+			self::sync_nfd_coming_soon_option( $new_value, $option_name );
+		}
+
+		if ( $option_name === 'woocommerce_store_pages_only' ) {
+			// Update brand plugin's option to match woocommerce_store_pages_only
+			self::sync_nfd_coming_soon_option( $new_value, $option_name );
+		}
+
+		self::$syncing = false;
+	}
+
+	/**
+	 * Get the service provider.
+	 *
+	 * @return Service
+	 */
+	private static function get_service(): Service {
+		if ( ! self::$service ) {
+			self::$service = new Service();
+		}
+
+		return self::$service;
+	}
+
+	/**
+	 * Sync the woocommerce_coming_soon option with the nfd_coming_soon option.
+	 *
+	 * @param bool $new_value The new value of the option.
+	 */
+	private static function sync_woocommerce_coming_soon_option( $new_value ): void {
+		if ( $new_value ) {
+			update_option( 'woocommerce_coming_soon', 'yes' );
+		} else {
+			update_option( 'woocommerce_coming_soon', 'no' );
+		}
+	}
+
+	/**
+	 * Sync the woocommerce_store_pages_only option with the nfd_coming_soon option.
+	 */
+	private static function sync_nfd_woocommerce_pages_only_option(): void {
+		if ( get_option( 'woocommerce_store_pages_only', false ) ) {
+			update_option( 'woocommerce_store_pages_only', 'no' );
+		}
+	}
+
+	/**
+	 * Sync the nfd_coming_soon option with the woocommerce_coming_soon || woocommerce_store_pages_only options.
+	 *
+	 * @param mixed  $new_value   The new value of the option.
+	 * @param string $option_name The option name.
+	 */
+	private static function sync_nfd_coming_soon_option( $new_value, $option_name ): void {
+		$nfd_coming_soon_service = self::get_service();
+
+		$value = 'yes' === $new_value ? true : false;
+
+		// Sync the coming soon options when the woocommerce_coming_soon option is updated.
+		if ( 'woocommerce_store_pages_only' === $option_name ) {
+			if ( $value ) {
+				$nfd_coming_soon_service->disable();
+			} else {
+				$nfd_coming_soon_service->enable();
+			}
+		}
+
+		// Sync the coming soon options when the woocommerce_coming_soon option is updated.
+		if ( 'woocommerce_coming_soon' === $option_name ) {
+			if ( $value ) {
+				$nfd_coming_soon_service->enable();
+			} else {
+				$nfd_coming_soon_service->disable();
+			}
+		}
+	}
+
+	/**
+	 * Sync the coming soon options when the woocommerce_coming_soon option is newly added.
+	 */
+	private static function sync_when_woocommerce_option_is_added(): void {
+		$nfd_coming_soon_value = get_option( 'nfd_coming_soon', false );
+
+		self::sync_woocommerce_coming_soon_option( $nfd_coming_soon_value );
+	}
+}

From e5403cea39f9e0518cfb1bb937b4dac400497e27 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 00:02:20 -0700
Subject: [PATCH 02/16] Add isWoocommerceActive helper function

---
 includes/functions.php | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/includes/functions.php b/includes/functions.php
index 3fec9b3..efc5ddf 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -4,9 +4,14 @@
 
 /**
  * Check if the coming soon module is active.
- *
- * @return bool
  */
-function isComingSoonActive() {
+function isComingSoonActive(): bool {
 	return ( new Service() )->is_enabled();
+}
+
+/**
+ * Check if WooCommerce is activated
+ */
+function isWoocommerceActive(): bool {
+	return class_exists('woocommerce');
 }
\ No newline at end of file

From 3ba1b14cd9b812d556215a2b21258d4e823f5ee5 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 00:02:56 -0700
Subject: [PATCH 03/16] Rename class to plural to reflect actual logic

---
 ...ionSync.php => WooCommerceOptionsSync.php} | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)
 rename includes/{WooCommerceOptionSync.php => WooCommerceOptionsSync.php} (85%)

diff --git a/includes/WooCommerceOptionSync.php b/includes/WooCommerceOptionsSync.php
similarity index 85%
rename from includes/WooCommerceOptionSync.php
rename to includes/WooCommerceOptionsSync.php
index 28d4bb4..b8ecac4 100644
--- a/includes/WooCommerceOptionSync.php
+++ b/includes/WooCommerceOptionsSync.php
@@ -2,7 +2,10 @@
 
 namespace NewfoldLabs\WP\Module\ComingSoon;
 
-class WooCommerceOptionSync {
+/**
+ * Sync coming soon options between the brand plugin and WooCommerce.
+ */
+class WooCommerceOptionsSync {
 	/**
 	 * Service provider.
 	 *
@@ -34,7 +37,7 @@ public function __construct() {
 	 * @param mixed  $new_value   The new option value.
 	 * @param string $option_name The option name.
 	 */
-	public static function sync_options( $old_value = '', $new_value, $option_name ): void {
+	public static function sync_options( $old_value, $new_value, $option_name ): void {
 		// Prevent infinite loops
 		if ( self::$syncing ) {
 			return;
@@ -63,8 +66,6 @@ public static function sync_options( $old_value = '', $new_value, $option_name )
 
 	/**
 	 * Get the service provider.
-	 *
-	 * @return Service
 	 */
 	private static function get_service(): Service {
 		if ( ! self::$service ) {
@@ -80,10 +81,11 @@ private static function get_service(): Service {
 	 * @param bool $new_value The new value of the option.
 	 */
 	private static function sync_woocommerce_coming_soon_option( $new_value ): void {
-		if ( $new_value ) {
-			update_option( 'woocommerce_coming_soon', 'yes' );
-		} else {
-			update_option( 'woocommerce_coming_soon', 'no' );
+		if ( get_option( 'woocommerce_coming_soon' ) ) {
+			$value = wp_validate_boolean( $new_value );
+			$value = $value ? 'yes' : 'no';
+
+			update_option( 'woocommerce_coming_soon', $value );
 		}
 	}
 
@@ -91,7 +93,7 @@ private static function sync_woocommerce_coming_soon_option( $new_value ): void
 	 * Sync the woocommerce_store_pages_only option with the nfd_coming_soon option.
 	 */
 	private static function sync_nfd_woocommerce_pages_only_option(): void {
-		if ( get_option( 'woocommerce_store_pages_only', false ) ) {
+		if ( get_option( 'woocommerce_store_pages_only' ) ) {
 			update_option( 'woocommerce_store_pages_only', 'no' );
 		}
 	}
@@ -130,8 +132,9 @@ private static function sync_nfd_coming_soon_option( $new_value, $option_name ):
 	 * Sync the coming soon options when the woocommerce_coming_soon option is newly added.
 	 */
 	private static function sync_when_woocommerce_option_is_added(): void {
-		$nfd_coming_soon_value = get_option( 'nfd_coming_soon', false );
+		$nfd_coming_soon_service = self::get_service();
+		$new_value               = $nfd_coming_soon_service->is_enabled();
 
-		self::sync_woocommerce_coming_soon_option( $nfd_coming_soon_value );
+		self::sync_woocommerce_coming_soon_option( $new_value );
 	}
 }

From 3cdfde5285dfbff8e45985220c9a03e344a2c70e Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 00:04:53 -0700
Subject: [PATCH 04/16] Export the admin bar to its own class

Since our admin bar is growing more complex and being couple with other plugins, it makes more sense to split it out of the parent class.
---
 includes/AdminBarSiteStatusBadge.php | 145 +++++++++++++++++++++++++++
 includes/ComingSoon.php              |  94 +----------------
 2 files changed, 147 insertions(+), 92 deletions(-)
 create mode 100644 includes/AdminBarSiteStatusBadge.php

diff --git a/includes/AdminBarSiteStatusBadge.php b/includes/AdminBarSiteStatusBadge.php
new file mode 100644
index 0000000..d779c4a
--- /dev/null
+++ b/includes/AdminBarSiteStatusBadge.php
@@ -0,0 +1,145 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\ComingSoon;
+
+use NewfoldLabs\WP\ModuleLoader\Container;
+use WP_Admin_Bar;
+
+/**
+ * Add site status badge (Coming Soon or Live) to WP admin bar.
+ * If WooCommerce is active, this badge will not be added.
+ * Instead, WooCommerce's site visibility badge will be displayed.
+ */
+class AdminBarSiteStatusBadge {
+	/**
+	 * Container.
+	 *
+	 * @var Container
+	 */
+	private $container;
+
+	/**
+	 * Default values.
+	 *
+	 * @var array
+	 */
+	private $defaults = array();
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct( Container $container ) {
+		// Bail if WooCommerce is active.
+		if ( isWoocommerceActive() ) {
+			return;
+		}
+
+		$this->container = $container;
+
+		$this->defaults = array(
+			'admin_bar_cs_active'   => __( 'Coming Soon', 'newfold-module-coming-soon' ),
+			'admin_bar_cs_inactive' => __( 'Live', 'newfold-module-coming-soon' ),
+		);
+
+		add_action( 'admin_bar_menu', array( $this, 'site_status_badge' ), 31 );
+		add_action( 'wp_head', array( $this, 'site_status_badge_styles' ) );
+		add_action( 'admin_head', array( $this, 'site_status_badge_styles' ) );
+		add_action( 'update_option_nfd_coming_soon', array( __CLASS__, 'site_status_badge_timer' ), 10, 2 );
+	}
+
+	/**
+	 * Add site status badge to WP admin bar.
+	 *
+	 * @param WP_Admin_Bar $admin_bar An instance of the WP_Admin_Bar class.
+	 */
+	public function site_status_badge( WP_Admin_Bar $admin_bar ): void {
+		if ( current_user_can( 'manage_options' ) ) {
+
+			$is_coming_soon = isComingSoonActive();
+			$title          = $is_coming_soon ? $this->defaults['admin_bar_cs_active'] : $this->defaults['admin_bar_cs_inactive'];
+			$class          = $this->site_status_badge_class( $is_coming_soon );
+
+			$site_status_menu = array(
+				'id'     => 'nfd-site-visibility-badge',
+				'parent' => 'root-default',
+				'href'   => admin_url( 'admin.php?page=' . $this->container->plugin()->id . '&nfd-target=coming-soon-section#/settings' ),
+				'title'  => $title,
+				'meta'   => array(
+					'class' => 'nfd-site-status-badge-' . $class,
+				),
+			);
+			$admin_bar->add_menu( $site_status_menu );
+		}
+	}
+
+	/**
+	 * Determine the class for the site status badge.
+	 *
+	 * @param bool $is_coming_soon Whether the site is in Coming Soon mode.
+	 */
+	private function site_status_badge_class( $is_coming_soon ): string {
+		$class = $is_coming_soon ? 'coming-soon' : 'live';
+
+		// Hide badge if the site has been live for more than 10 minutes.
+		if ( ! $is_coming_soon && ! get_transient( 'nfd_coming_soon_site_status_badge_timer' ) ) {
+			$class = 'hidden';
+		}
+
+		return $class;
+	}
+
+	/**
+	 * Output CSS for site status badge.
+	 */
+	public function site_status_badge_styles(): void {
+		if( is_admin_bar_showing() ) {
+			?>
+			<style>
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item {
+					background-color: #F6F7F7;
+					color: black;
+					margin-top:7px;
+					padding: 0 6px;
+					height: 18px;
+					line-height: 17px;
+					border-radius: 2px;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:hover,
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:focus {
+					background-color: #DCDCDE;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:focus {
+					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color-darker-20);
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item {
+					background-color: #E6F2E8;
+					color: #00450C;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item:hover,
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item:focus {
+					background-color: #B8E6BF;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-hidden {
+					display: none;
+				}
+			</style>
+		<?php
+		}
+	}
+
+	/**
+	 * Set 10 minutes transient timer for site status badge when coming soon is turned off.
+	 */
+	public static function site_status_badge_timer( $old_value, $new_value ): void {
+		$value = wp_validate_boolean( $new_value );
+		
+		if ( false === $value ) {
+			set_transient( 'nfd_coming_soon_site_status_badge_timer', true, 10 * MINUTE_IN_SECONDS );
+		}
+	}
+}
diff --git a/includes/ComingSoon.php b/includes/ComingSoon.php
index e6bcc8f..e978c1d 100644
--- a/includes/ComingSoon.php
+++ b/includes/ComingSoon.php
@@ -24,10 +24,6 @@ public function __construct( Container $container ) {
 			'admin_screen_id'       => container()->plugin()->id,
 			'admin_app_url'         => \admin_url( 'admin.php?page=newfold' ),
 			'admin_notice_text'     => __( 'Your site has Coming Soon mode active.', 'newfold-module-coming-soon' ),
-			'admin_bar_text'        => '<div>' . __( 'Coming Soon Active', 'newfold-module-coming-soon' ) . '</div>',
-			'admin_bar_label'       => __( 'Site Status: ', 'newfold-module-coming-soon' ),
-			'admin_bar_cs_active'   => __( 'Not Live', 'newfold-module-coming-soon' ),
-			'admin_bar_cs_inactive' => __( 'Live', 'newfold-module-coming-soon' ),
 			'template_page_title'   => __( 'Coming Soon!', 'newfold-module-coming-soon' ),
 			'template_styles'       => false,
 			'template_content'      => false,
@@ -50,7 +46,7 @@ public function __construct( Container $container ) {
 			$this->args['template_styles'] = $this->args['template_styles'] . '?v=' . container()->plugin()->version;
 		}
 
-		new WooCommerceOptionSync( $container );
+		new WooCommerceOptionsSync();
 
 		// set up all actions
 		\add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
@@ -61,15 +57,13 @@ public function __construct( Container $container ) {
 		\add_action( 'wp_ajax_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'wp_ajax_nopriv_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'plugins_loaded', array( $this, 'coming_soon_prevent_emails' ) );
-		\add_action( 'admin_bar_menu', array( $this, 'newfold_site_status' ), 100 );
 		\add_action( 'wp_body_open', array( $this, 'site_preview_warning' ) );
-		\add_action( 'admin_head', array( $this, 'admin_bar_coming_soon_admin_styles' ) );
-		\add_action( 'wp_head', array( $this, 'admin_bar_coming_soon_admin_styles' ) );
 		\add_filter( 'default_option_nfd_coming_soon', array( $this, 'filter_coming_soon_fallback' ) );
 		\add_action( 'update_option_nfd_coming_soon', array( $this, 'on_update_nfd_coming_soon' ), 10, 2 );
 		\add_action( 'update_option_mm_coming_soon', array( $this, 'on_update_mm_coming_soon' ), 10, 2 );
 		\add_filter( 'jetpack_is_under_construction_plugin', array( $this, 'filter_jetpack_is_under_construction' ) );
 
+		new AdminBarSiteStatusBadge( $container );
 		new PrePublishModal();
 	}
 
@@ -248,90 +242,6 @@ public function notice_display() {
 		}
 	}
 
-	/**
-	 * Some basic styles to control visibility of the coming soon state in the admin bar
-	 */
-	public function admin_bar_coming_soon_admin_styles() {
-		if( is_user_logged_in() ) {
-			?>
-			<style>
-				#nfd-site-status {
-					align-items: center;
-					background-color: #F8F8F8;
-					border-radius: 2px;
-					border-style: solid;
-					border-width: 1px;
-					color: #333333;
-					display: flex;
-					font-weight: 500;
-					gap: 2px;
-					height: 22px;
-					margin-top: 4px;
-					padding: 0 14px;
-				}
-
-				#wpadminbar #wp-admin-bar-site-status .ab-item{
-					height:22px;
-				}
-
-				#nfd-site-status[data-coming-soon="true"] {
-					border-color: var(--Dark-Red, #C71919);
-				}
-				
-				#nfd-site-status[data-coming-soon="false"] {
-					border-color: var(--A11y-GRN, #278224);
-				}
-
-				#nfd-site-status span { 
-					display: none;
-					text-transform: uppercase;
-					font-weight: 500;
-				}
-
-				#nfd-site-status[data-coming-soon="true"] #nfd-site-status-coming-soon {
-					color: var(--Dark-Red, #C71919);
-					display: inline-block;
-				}
-
-				#nfd-site-status[data-coming-soon="false"] #nfd-site-status-live {
-					color: var(--A11y-GRN, #278224);
-					display: inline-block;
-				}
-			</style>
-		<?php
-		}
-	}
-
-	/**
-	 * Customize the admin bar with site status.
-	 *
-	 * @param \WP_Admin_Bar $admin_bar An instance of the WP_Admin_Bar class.
-	 */
-	public function newfold_site_status( \WP_Admin_Bar $admin_bar ) {
-		if ( current_user_can( 'manage_options' ) ) {
-
-			$is_coming_soon = isComingSoonActive();
-			$current_state  = $is_coming_soon ? 'true' : 'false';
-			$content        = '<div id="nfd-site-status" data-coming-soon="' . $current_state . '">';
-			$content        .= $this->args['admin_bar_label'];
-			$content        .= '<span id="nfd-site-status-coming-soon" class="nfd-coming-soon-active">';
-			$content        .= $this->args['admin_bar_cs_active'];
-			$content        .= '</span>';
-			$content        .= '<span id="nfd-site-status-live" class="nfd-coming-soon-inactive">';
-			$content        .= $this->args['admin_bar_cs_inactive'];
-			$content        .= '</span>';
-			$content        .= '</div>';
-
-			$site_status_menu = array(
-				'id'     => 'site-status',
-				'parent' => 'top-secondary',
-				'href'   => admin_url( 'admin.php?page=' . $this->container->plugin()->id . '&nfd-target=coming-soon-section#/settings' ),
-				'title'  => $content,
-			);
-			$admin_bar->add_menu( $site_status_menu );
-		}
-	}
-
 	/**
 	 * Load warning on site Preview
 	 */

From 7403ae21a1883581744a2ac1708b95eccecf02ac Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 00:06:04 -0700
Subject: [PATCH 05/16] Update admin bar JavaScript toggle to match new logic

---
 static/js/coming-soon.js | 85 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 4 deletions(-)

diff --git a/static/js/coming-soon.js b/static/js/coming-soon.js
index f192671..9f43d2d 100644
--- a/static/js/coming-soon.js
+++ b/static/js/coming-soon.js
@@ -107,16 +107,93 @@
 		return value;
 	};
 
+	/**
+	 * Toggle the site status badge in the admin bar.
+	 *
+	 * @param {boolean} newState The new state of the site status.
+	 */
 	const toggleAdminBarSiteStatus = ( newState ) => {
-		const siteStatus = document.querySelector(
-			'#wp-toolbar #nfd-site-status'
+		/**
+		 * The badge elements for NFD and WooCommerce.
+		 * Only one of them will be active at a time.
+		 * When WooCommerce is active, the WooCommerce badge will be used.
+		 * When WooCommerce is not active, the NFD badge will be used.
+		 */
+		const badge = {
+			nfd: {
+				selector: '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge',
+				comingSoon: {
+					text: 'Coming soon',
+					class: 'nfd-site-status-badge-coming-soon',
+				},
+				live: {
+					text: 'Live',
+					class: 'nfd-site-status-badge-live',
+				},
+				hidden: {
+					class: 'nfd-site-status-badge-hidden',
+				},
+			},
+			woocommerce: {
+				selector:
+					'#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge',
+				comingSoon: {
+					text: 'Coming soon',
+					class: 'woocommerce-site-status-badge-coming-soon',
+				},
+				live: {
+					text: 'Live',
+					class: 'woocommerce-site-status-badge-live',
+				},
+				hidden: {
+					class: 'woocommerce-site-status-badge-hidden',
+				},
+			},
+		};
+
+		const getActiveBadge = () => {
+			// Return the WooCommerce badge if WooCommerce is active.
+			if ( window.NewfoldRuntime.isWoocommerceActive ) {
+				return badge.woocommerce;
+			}
+			return badge.nfd;
+		};
+		const activeBadge = getActiveBadge();
+
+		const siteVisibilityBadge = document.querySelector(
+			activeBadge.selector
 		);
 
-		if ( ! siteStatus ) {
+		if ( ! siteVisibilityBadge ) {
 			return;
 		}
 
-		siteStatus.setAttribute( 'data-coming-soon', newState );
+		const toggle = ( newState ) => {
+			if ( newState ) {
+				// Coming soon
+				siteVisibilityBadge.classList.remove(
+					activeBadge.live.class,
+					activeBadge.hidden.class
+				);
+				siteVisibilityBadge.classList.add( activeBadge.comingSoon.class );
+				const textElement = siteVisibilityBadge.querySelector( 'a.ab-item' );
+				if ( textElement ) {
+					textElement.textContent = activeBadge.comingSoon.text;
+				}
+			} else {
+				// Live
+				siteVisibilityBadge.classList.remove(
+					activeBadge.comingSoon.class,
+					activeBadge.hidden.class
+				);
+				siteVisibilityBadge.classList.add( activeBadge.live.class );
+				const textElement = siteVisibilityBadge.querySelector( 'a.ab-item' );
+				if ( textElement ) {
+					textElement.textContent = activeBadge.live.text;
+				}
+			}
+		};
+		toggle( newState );
 	};
 
 	window.addEventListener( 'DOMContentLoaded', () => {

From 605d6eca424ca478dacf3a629f1abdff7c74f387 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 14:24:53 -0700
Subject: [PATCH 06/16] Don't show our coming soon site preview notice when woo
 is active

Woo has it's own coming soon preview notice now, we'll default to that when Woo is active
---
 includes/ComingSoon.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/ComingSoon.php b/includes/ComingSoon.php
index e978c1d..3d686c5 100644
--- a/includes/ComingSoon.php
+++ b/includes/ComingSoon.php
@@ -246,7 +246,7 @@ public function notice_display() {
 	 * Load warning on site Preview
 	 */
 	public function site_preview_warning() {
-		if ( isComingSoonActive() ) {
+		if ( !isWoocommerceActive() && isComingSoonActive() ) {
 			echo "<div style='background-color: #e71616; padding: 0 16px;color:#ffffff;font-size:16px;text-align:center;font-weight: 590;'>" . esc_html__( 'Site Preview - This site is NOT LIVE, only admins can see this view.', 'newfold-module-coming-soon' ) . "</div>";
 		}
 	}

From 7ba44dd44c722ad117265a418788bc769bf5e07e Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 17:02:38 -0700
Subject: [PATCH 07/16] Export the site preview warning to its own file

---
 includes/ComingSoon.php         | 11 +----------
 includes/SitePreviewWarning.php | 29 +++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 includes/SitePreviewWarning.php

diff --git a/includes/ComingSoon.php b/includes/ComingSoon.php
index 3d686c5..db8199a 100644
--- a/includes/ComingSoon.php
+++ b/includes/ComingSoon.php
@@ -57,13 +57,13 @@ public function __construct( Container $container ) {
 		\add_action( 'wp_ajax_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'wp_ajax_nopriv_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'plugins_loaded', array( $this, 'coming_soon_prevent_emails' ) );
-		\add_action( 'wp_body_open', array( $this, 'site_preview_warning' ) );
 		\add_filter( 'default_option_nfd_coming_soon', array( $this, 'filter_coming_soon_fallback' ) );
 		\add_action( 'update_option_nfd_coming_soon', array( $this, 'on_update_nfd_coming_soon' ), 10, 2 );
 		\add_action( 'update_option_mm_coming_soon', array( $this, 'on_update_mm_coming_soon' ), 10, 2 );
 		\add_filter( 'jetpack_is_under_construction_plugin', array( $this, 'filter_jetpack_is_under_construction' ) );
 
 		new AdminBarSiteStatusBadge( $container );
+		new SitePreviewWarning();
 		new PrePublishModal();
 	}
 
@@ -242,15 +242,6 @@ public function notice_display() {
 		}
 	}
 
-	/**
-	 * Load warning on site Preview
-	 */
-	public function site_preview_warning() {
-		if ( !isWoocommerceActive() && isComingSoonActive() ) {
-			echo "<div style='background-color: #e71616; padding: 0 16px;color:#ffffff;font-size:16px;text-align:center;font-weight: 590;'>" . esc_html__( 'Site Preview - This site is NOT LIVE, only admins can see this view.', 'newfold-module-coming-soon' ) . "</div>";
-		}
-	}
-
 	/**
 	 * Load the coming soon page, if necessary.
 	 */
diff --git a/includes/SitePreviewWarning.php b/includes/SitePreviewWarning.php
new file mode 100644
index 0000000..fb21086
--- /dev/null
+++ b/includes/SitePreviewWarning.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\ComingSoon;
+
+/**
+ * Display a site preview warning when the site is not live.
+ * If WooCommerce is active, this warning will not be displayed.
+ * Instead, WooCommerce's warning will be displayed.
+ */
+class SitePreviewWarning {
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		// Bail if WooCommerce is active or if the site is live.
+		if ( isWoocommerceActive() || ! isComingSoonActive() ) {
+			return;
+		}
+
+		add_action( 'wp_body_open', array( $this, 'site_preview_warning' ) );
+	}
+
+	/**
+	 * Display site preview warning.
+	 */
+	public function site_preview_warning() {
+		echo "<div class='nfd-site-preview-warning' style='background-color: #e71616; padding: 0 16px;color:#ffffff;font-size:16px;text-align:center;font-weight: 590;'>" . esc_html__( 'Site Preview - This site is NOT LIVE, only admins can see this view.', 'newfold-module-coming-soon' ) . "</div>";
+	}
+}

From 31198a186f8885c13997b21cedb05e3461342fcb Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 17:02:53 -0700
Subject: [PATCH 08/16] Tests

---
 includes/AdminBarSiteStatusBadge.php          |  2 +-
 .../cypress/integration/coming-soon-woo.cy.js | 68 +++++++++++++++++++
 tests/cypress/integration/coming-soon.cy.js   | 38 +++++++----
 3 files changed, 92 insertions(+), 16 deletions(-)
 create mode 100644 tests/cypress/integration/coming-soon-woo.cy.js

diff --git a/includes/AdminBarSiteStatusBadge.php b/includes/AdminBarSiteStatusBadge.php
index d779c4a..7945f45 100644
--- a/includes/AdminBarSiteStatusBadge.php
+++ b/includes/AdminBarSiteStatusBadge.php
@@ -37,7 +37,7 @@ public function __construct( Container $container ) {
 		$this->container = $container;
 
 		$this->defaults = array(
-			'admin_bar_cs_active'   => __( 'Coming Soon', 'newfold-module-coming-soon' ),
+			'admin_bar_cs_active'   => __( 'Coming soon', 'newfold-module-coming-soon' ),
 			'admin_bar_cs_inactive' => __( 'Live', 'newfold-module-coming-soon' ),
 		);
 
diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
new file mode 100644
index 0000000..2efcbbd
--- /dev/null
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -0,0 +1,68 @@
+// disable eslint for this file
+/* eslint-disable */
+
+describe( 'Coming Soon with WooCommerce', function () {
+
+	before( () => {
+		// Set coming soon option to true to start with
+		cy.exec( `npx wp-env run cli wp option update mm_coming_soon true` );
+		cy.exec( `npx wp-env run cli wp option update nfd_coming_soon true` );
+
+		// Activate WooCommerce
+		cy.exec( `npx wp-env run cli wp plugin install woocommerce --activate`, {
+			timeout: 40000,
+			log: true,
+		} );
+	} );
+
+	after( () => {
+		// Deactivate WooCommerce
+		cy.exec( `npx wp-env run cli wp plugin deactivate woocommerce`, {
+			timeout: 40000,
+		} );
+	} );
+
+	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', () => {
+		// Visit settings page
+		cy.visit(
+			'/wp-admin/admin.php?page=' +
+				Cypress.env( 'pluginId' ) +
+				'#/settings'
+		);
+
+		// Our badge shouldn't be visible
+		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
+			.should( 'not.exist' );
+
+		// WooCommerce badge should be visible
+		cy.get( '#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item' )
+			.contains( 'a', 'Coming soon' )
+			.should( 'be.visible' );
+	});
+
+	it ( 'Our plugin settings should toggle WooCommerce admin bar badge', () => {
+		// Deactivate coming soon - Launch Site
+		cy.get( '[data-id="coming-soon-toggle"]' ).click();
+		cy.wait( 2000 );
+
+		// WooCommerce badge should now be live
+		cy.get( '#wp-toolbar .woocommerce-site-status-badge-live a.ab-item' )
+			.contains( 'a', 'Live' )
+			.should( 'be.visible' );
+
+		// Re-enable coming soon mode
+		cy.get( '[data-id="coming-soon-toggle"]' )
+			.click();
+
+		// WooCommerce badge should now be coming soon
+		cy.get( '#wp-toolbar .woocommerce-site-status-badge-coming-soon a.ab-item' )
+			.contains( 'a', 'Coming soon' )
+			.should( 'be.visible' );
+	});
+	
+	it( 'Hide our site preview notice when WooCommerce is active', () => {
+		cy.visit( '/' );
+		cy.get( '.nfd-site-preview-warning' )
+			.should( 'not.exist' );
+	});
+} );
diff --git a/tests/cypress/integration/coming-soon.cy.js b/tests/cypress/integration/coming-soon.cy.js
index cc3a7ae..150127b 100644
--- a/tests/cypress/integration/coming-soon.cy.js
+++ b/tests/cypress/integration/coming-soon.cy.js
@@ -6,7 +6,12 @@ describe( 'Coming Soon', function () {
 	before( () => {
 		// Set coming soon option to true to start with
 		cy.exec( `npx wp-env run cli wp option update mm_coming_soon true` );
-		cy.exec( `npx wp-env run cli wp option update nfd_coming_soon true` );		
+		cy.exec( `npx wp-env run cli wp option update nfd_coming_soon true` );
+
+		// Deactivate WooCommerce
+		cy.exec( `npx wp-env run cli wp plugin deactivate woocommerce`, {
+			timeout: 40000,
+		} );
 	} );
 
 	it( 'Coming Soon is active', () => {
@@ -18,7 +23,7 @@ describe( 'Coming Soon', function () {
 		cy.reload();
 
 		// Initial Coming Soon State
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-coming-soon' )
+		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
 			.scrollIntoView()
 			.should( 'be.visible' );
 
@@ -39,15 +44,9 @@ describe( 'Coming Soon', function () {
 
 	it( 'Displays Coming Soon in Site Status Admin Toolbar', () => {
 		// Admin bar contains label
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status' )
-			.contains( 'div', 'Site Status' )
-			.should( 'be.visible' );
-		// Admin bar contains status
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-coming-soon' )
-			.scrollIntoView()
+		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge a.ab-item' )
+			.contains( 'a', 'Coming soon' )
 			.should( 'be.visible' );
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-live' )
-			.should( 'not.be.visible' );
 	} );
 
 	it( 'Has Coming Soon Section on Home', () => {
@@ -73,7 +72,7 @@ describe( 'Coming Soon', function () {
 	} );
 
 	it( 'Coming Soon Admin bar links to setting', () => {
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-coming-soon' ).click();
+		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge a.ab-item' ).click();
 		cy.location().should( ( loc ) => {
 			expect( loc.hash ).to.eq( '#/settings' )
 		});
@@ -87,7 +86,7 @@ describe( 'Coming Soon', function () {
 		);
 		// Deactivate coming soon - Launch Site
 		cy.get( '[data-id="coming-soon-toggle"]' ).click();
-		cy.wait( 500 );
+		cy.wait( 2000 );
 
 		// Toggle is false
 		cy.get( '[data-id="coming-soon-toggle"]' )
@@ -95,8 +94,9 @@ describe( 'Coming Soon', function () {
 			.and( 'include', 'false' );
 
 		// Admin bar is updated
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-live' )
+		cy.get( '#wp-toolbar .nfd-site-status-badge-live a.ab-item' )
 			.scrollIntoView()
+			.contains( 'a', 'Live' )
 			.should( 'be.visible' );
 
 		// Snackbar notice displays properly
@@ -114,7 +114,7 @@ describe( 'Coming Soon', function () {
 
 		// Activate Coming Soon - Unlaunch Site
 		cy.get( '[data-id="coming-soon-toggle"]' ).click();
-		cy.wait( 500 );
+		cy.wait( 2000 );
 
 		// Toggle is true
 		cy.get( '[data-id="coming-soon-toggle"]' )
@@ -122,8 +122,9 @@ describe( 'Coming Soon', function () {
 			.and( 'include', 'true' );
 
 		// Admin bar is updated
-		cy.get( '#wp-toolbar #wp-admin-bar-site-status #nfd-site-status-coming-soon' )
+		cy.get( '#wp-toolbar .nfd-site-status-badge-coming-soon a.ab-item' )
 			.scrollIntoView()
+			.contains( 'a', 'Coming soon' )
 			.should( 'be.visible' );
 
 		// Snackbar notice displays properly
@@ -139,6 +140,13 @@ describe( 'Coming Soon', function () {
 			.should( 'be.visible' );
 	} );
 
+	it( 'Displays Coming Soon Site Preview Warning', () => {
+		cy.visit( '/' );
+		cy.get( '.nfd-site-preview-warning' )
+			.contains( 'div', 'Site Preview' )
+			.should( 'be.visible' );
+	} );
+
 	it( 'Displays Coming Soon on Frontend', () => {
 		cy.logout();
 		cy.visit( '/' );

From b8d9bd0cde3d870d0a0f0ad54f3ecd76b4e84b7e Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 7 Nov 2024 23:26:03 -0700
Subject: [PATCH 09/16] Lint

---
 includes/AdminBarSiteStatusBadge.php            |  9 +++++++--
 includes/WooCommerceOptionsSync.php             | 14 +++++++-------
 includes/functions.php                          |  4 ++--
 tests/cypress/integration/coming-soon-woo.cy.js |  4 +---
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/includes/AdminBarSiteStatusBadge.php b/includes/AdminBarSiteStatusBadge.php
index 7945f45..76cc98e 100644
--- a/includes/AdminBarSiteStatusBadge.php
+++ b/includes/AdminBarSiteStatusBadge.php
@@ -27,6 +27,8 @@ class AdminBarSiteStatusBadge {
 
 	/**
 	 * Constructor.
+	 * 
+	 * @param Container $container Container.
 	 */
 	public function __construct( Container $container ) {
 		// Bail if WooCommerce is active.
@@ -92,7 +94,7 @@ private function site_status_badge_class( $is_coming_soon ): string {
 	 * Output CSS for site status badge.
 	 */
 	public function site_status_badge_styles(): void {
-		if( is_admin_bar_showing() ) {
+		if ( is_admin_bar_showing() ) {
 			?>
 			<style>
 				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item {
@@ -128,12 +130,15 @@ public function site_status_badge_styles(): void {
 					display: none;
 				}
 			</style>
-		<?php
+			<?php
 		}
 	}
 
 	/**
 	 * Set 10 minutes transient timer for site status badge when coming soon is turned off.
+	 * 
+	 * @param bool $old_value The old option value.
+	 * @param bool $new_value The new option value.
 	 */
 	public static function site_status_badge_timer( $old_value, $new_value ): void {
 		$value = wp_validate_boolean( $new_value );
diff --git a/includes/WooCommerceOptionsSync.php b/includes/WooCommerceOptionsSync.php
index b8ecac4..955624e 100644
--- a/includes/WooCommerceOptionsSync.php
+++ b/includes/WooCommerceOptionsSync.php
@@ -38,26 +38,26 @@ public function __construct() {
 	 * @param string $option_name The option name.
 	 */
 	public static function sync_options( $old_value, $new_value, $option_name ): void {
-		// Prevent infinite loops
+		// Prevent infinite loops.
 		if ( self::$syncing ) {
 			return;
 		}
 
 		self::$syncing = true;
 
-		if ( $option_name === 'nfd_coming_soon' ) {
-			// Update WooCommerce options to match nfd_coming_soon
+		if ( 'nfd_coming_soon' === $option_name ) {
+			// Update WooCommerce options to match nfd_coming_soon.
 			self::sync_woocommerce_coming_soon_option( $new_value );
 			self::sync_nfd_woocommerce_pages_only_option();
 		}
 	
-		if ( $option_name === 'woocommerce_coming_soon' ) {
-			// Update brand plugin's option to match woocommerce_coming_soon
+		if ( 'woocommerce_coming_soon' === $option_name ) {
+			// Update brand plugin's option to match woocommerce_coming_soon.
 			self::sync_nfd_coming_soon_option( $new_value, $option_name );
 		}
 
-		if ( $option_name === 'woocommerce_store_pages_only' ) {
-			// Update brand plugin's option to match woocommerce_store_pages_only
+		if ( 'woocommerce_store_pages_only' === $option_name ) {
+			// Update brand plugin's option to match woocommerce_store_pages_only.
 			self::sync_nfd_coming_soon_option( $new_value, $option_name );
 		}
 
diff --git a/includes/functions.php b/includes/functions.php
index efc5ddf..1b0c3c5 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -13,5 +13,5 @@ function isComingSoonActive(): bool {
  * Check if WooCommerce is activated
  */
 function isWoocommerceActive(): bool {
-	return class_exists('woocommerce');
-}
\ No newline at end of file
+	return class_exists( 'woocommerce' );
+}
diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index 2efcbbd..dcf679a 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -1,8 +1,6 @@
-// disable eslint for this file
-/* eslint-disable */
+// <reference types="Cypress" />
 
 describe( 'Coming Soon with WooCommerce', function () {
-
 	before( () => {
 		// Set coming soon option to true to start with
 		cy.exec( `npx wp-env run cli wp option update mm_coming_soon true` );

From c3d3f86d1313d2485abf4450dc16d6e88603b671 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 11:24:33 -0700
Subject: [PATCH 10/16] Increase test timeout to give time for an ajax to
 finish

---
 .../cypress/integration/coming-soon-woo.cy.js | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index dcf679a..948789a 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -11,6 +11,9 @@ describe( 'Coming Soon with WooCommerce', function () {
 			timeout: 40000,
 			log: true,
 		} );
+
+		// reload the page
+		cy.reload();
 	} );
 
 	after( () => {
@@ -38,24 +41,26 @@ describe( 'Coming Soon with WooCommerce', function () {
 			.should( 'be.visible' );
 	});
 
-	it ( 'Our plugin settings should toggle WooCommerce admin bar badge', () => {
-		// Deactivate coming soon - Launch Site
-		cy.get( '[data-id="coming-soon-toggle"]' ).click();
-		cy.wait( 2000 );
+	it ( 'Our plugin settings should toggle WooCommerce admin bar badge',
+		{ defaultCommandTimeout: 10000 },
+		() => {
+			// Deactivate coming soon - Launch Site
+			cy.get( '[data-id="coming-soon-toggle"]' ).click();
+			cy.wait( 1000 );
 
-		// WooCommerce badge should now be live
-		cy.get( '#wp-toolbar .woocommerce-site-status-badge-live a.ab-item' )
-			.contains( 'a', 'Live' )
-			.should( 'be.visible' );
+			// WooCommerce badge should now be live
+			cy.get( '#wp-toolbar .woocommerce-site-status-badge-live a.ab-item' )
+				.contains( 'a', 'Live' )
+				.should( 'be.visible' );
 
-		// Re-enable coming soon mode
-		cy.get( '[data-id="coming-soon-toggle"]' )
-			.click();
+			// Re-enable coming soon mode
+			cy.get( '[data-id="coming-soon-toggle"]' )
+				.click();
 
-		// WooCommerce badge should now be coming soon
-		cy.get( '#wp-toolbar .woocommerce-site-status-badge-coming-soon a.ab-item' )
-			.contains( 'a', 'Coming soon' )
-			.should( 'be.visible' );
+			// WooCommerce badge should now be coming soon
+			cy.get( '#wp-toolbar .woocommerce-site-status-badge-coming-soon a.ab-item' )
+				.contains( 'a', 'Coming soon' )
+				.should( 'be.visible' );
 	});
 	
 	it( 'Hide our site preview notice when WooCommerce is active', () => {

From 45ce37c8371b503fdc9ed51e5741a3ad77d4774f Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 11:33:05 -0700
Subject: [PATCH 11/16] Attempt to fix tests

---
 tests/cypress/integration/coming-soon-woo.cy.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index 948789a..da56c8b 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -11,9 +11,6 @@ describe( 'Coming Soon with WooCommerce', function () {
 			timeout: 40000,
 			log: true,
 		} );
-
-		// reload the page
-		cy.reload();
 	} );
 
 	after( () => {
@@ -24,6 +21,9 @@ describe( 'Coming Soon with WooCommerce', function () {
 	} );
 
 	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', () => {
+		// reload the page
+		cy.reload();
+
 		// Visit settings page
 		cy.visit(
 			'/wp-admin/admin.php?page=' +

From 7296d416a63a05b830e6a1ed6321fb460410ee80 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 11:44:24 -0700
Subject: [PATCH 12/16] Another attempt to fix tests

---
 tests/cypress/integration/coming-soon-woo.cy.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index da56c8b..dc75dcf 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -21,9 +21,6 @@ describe( 'Coming Soon with WooCommerce', function () {
 	} );
 
 	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', () => {
-		// reload the page
-		cy.reload();
-
 		// Visit settings page
 		cy.visit(
 			'/wp-admin/admin.php?page=' +
@@ -31,6 +28,9 @@ describe( 'Coming Soon with WooCommerce', function () {
 				'#/settings'
 		);
 
+		// reload the page
+		cy.reload();
+
 		// Our badge shouldn't be visible
 		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
 			.should( 'not.exist' );

From 8d6ed92a0ca635400a5f6b9ec35ba5444099db30 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 11:59:26 -0700
Subject: [PATCH 13/16] attempt 3 to fix tests

---
 .../cypress/integration/coming-soon-woo.cy.js | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index dc75dcf..50c423c 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -20,25 +20,27 @@ describe( 'Coming Soon with WooCommerce', function () {
 		} );
 	} );
 
-	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', () => {
-		// Visit settings page
-		cy.visit(
-			'/wp-admin/admin.php?page=' +
-				Cypress.env( 'pluginId' ) +
-				'#/settings'
-		);
+	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', 
+		{ defaultCommandTimeout: 15000 },
+		() => {
+			// Visit settings page
+			cy.visit(
+				'/wp-admin/admin.php?page=' +
+					Cypress.env( 'pluginId' ) +
+					'#/settings'
+			);
 
-		// reload the page
-		cy.reload();
+			// reload the page
+			cy.reload();
 
-		// Our badge shouldn't be visible
-		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
-			.should( 'not.exist' );
+			// Our badge shouldn't be visible
+			cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
+				.should( 'not.exist' );
 
-		// WooCommerce badge should be visible
-		cy.get( '#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item' )
-			.contains( 'a', 'Coming soon' )
-			.should( 'be.visible' );
+			// WooCommerce badge should be visible
+			cy.get( '#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item' )
+				.contains( 'a', 'Coming soon' )
+				.should( 'be.visible' );
 	});
 
 	it ( 'Our plugin settings should toggle WooCommerce admin bar badge',

From bcdb98b44b6bd3eb4c5e00badc0a33d67884952d Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 12:21:47 -0700
Subject: [PATCH 14/16] Attempt 4 to fix tests

---
 .../cypress/integration/coming-soon-woo.cy.js | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index 50c423c..49a0ea4 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -20,9 +20,12 @@ describe( 'Coming Soon with WooCommerce', function () {
 		} );
 	} );
 
-	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', 
+	it( 'Replace our admin bar site status badge with WooCommerce\'s when active',
 		{ defaultCommandTimeout: 15000 },
 		() => {
+			// reload the page
+			cy.reload();
+
 			// Visit settings page
 			cy.visit(
 				'/wp-admin/admin.php?page=' +
@@ -30,9 +33,6 @@ describe( 'Coming Soon with WooCommerce', function () {
 					'#/settings'
 			);
 
-			// reload the page
-			cy.reload();
-
 			// Our badge shouldn't be visible
 			cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
 				.should( 'not.exist' );
@@ -43,26 +43,25 @@ describe( 'Coming Soon with WooCommerce', function () {
 				.should( 'be.visible' );
 	});
 
-	it ( 'Our plugin settings should toggle WooCommerce admin bar badge',
-		{ defaultCommandTimeout: 10000 },
-		() => {
-			// Deactivate coming soon - Launch Site
-			cy.get( '[data-id="coming-soon-toggle"]' ).click();
-			cy.wait( 1000 );
+	it ( 'Our plugin settings should toggle WooCommerce admin bar badge', () => {
+		// Deactivate coming soon - Launch Site
+		cy.get( '[data-id="coming-soon-toggle"]' ).click();
+		cy.wait( 1000 );
 
-			// WooCommerce badge should now be live
-			cy.get( '#wp-toolbar .woocommerce-site-status-badge-live a.ab-item' )
-				.contains( 'a', 'Live' )
-				.should( 'be.visible' );
+		// WooCommerce badge should now be live
+		cy.get( '#wp-toolbar .woocommerce-site-status-badge-live a.ab-item' )
+			.contains( 'a', 'Live' )
+			.should( 'be.visible' );
 
-			// Re-enable coming soon mode
-			cy.get( '[data-id="coming-soon-toggle"]' )
-				.click();
+		// Re-enable coming soon mode
+		cy.get( '[data-id="coming-soon-toggle"]' )
+			.click();
+		cy.wait( 1000 );
 
-			// WooCommerce badge should now be coming soon
-			cy.get( '#wp-toolbar .woocommerce-site-status-badge-coming-soon a.ab-item' )
-				.contains( 'a', 'Coming soon' )
-				.should( 'be.visible' );
+		// WooCommerce badge should now be coming soon
+		cy.get( '#wp-toolbar .woocommerce-site-status-badge-coming-soon a.ab-item' )
+			.contains( 'a', 'Coming soon' )
+			.should( 'be.visible' );
 	});
 	
 	it( 'Hide our site preview notice when WooCommerce is active', () => {

From 86fb0bf993726eeb257aac8e2a602d76dc48be7b Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 22:25:14 -0700
Subject: [PATCH 15/16] Add helper function to check if an option exists

---
 includes/functions.php | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/includes/functions.php b/includes/functions.php
index 1b0c3c5..f41e1ee 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -15,3 +15,13 @@ function isComingSoonActive(): bool {
 function isWoocommerceActive(): bool {
 	return class_exists( 'woocommerce' );
 }
+
+/**
+ * Check if an option exists
+ * 
+ * @param string $option_name The option name
+ */
+function optionExists( $option_name ): bool {
+	$value = get_option( $option_name, 'not_set' );
+	return 'not_set' !== $value;
+}

From 66ffab47483fa9bd8eb507dcbbe04cda3232f36a Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Fri, 8 Nov 2024 22:27:48 -0700
Subject: [PATCH 16/16] Attempt 5 to fix tests (i give up if it doesn't work)

---
 includes/WooCommerceOptionsSync.php           | 18 ++++++++--
 .../cypress/integration/coming-soon-woo.cy.js | 33 ++++++++-----------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/includes/WooCommerceOptionsSync.php b/includes/WooCommerceOptionsSync.php
index 955624e..322c349 100644
--- a/includes/WooCommerceOptionsSync.php
+++ b/includes/WooCommerceOptionsSync.php
@@ -28,6 +28,7 @@ public function __construct() {
 		add_action( 'update_option_woocommerce_coming_soon', array( __CLASS__, 'sync_options' ), 10, 3 );
 		add_action( 'update_option_woocommerce_store_pages_only', array( __CLASS__, 'sync_options' ), 10, 3 );
 		add_action( 'add_option_woocommerce_coming_soon', array( __CLASS__, 'sync_when_woocommerce_option_is_added' ) );
+		add_action( 'woocommerce_init', array( __CLASS__, 'sync_when_woocommerce_option_is_missing' ) );
 	}
 
 	/**
@@ -81,7 +82,7 @@ private static function get_service(): Service {
 	 * @param bool $new_value The new value of the option.
 	 */
 	private static function sync_woocommerce_coming_soon_option( $new_value ): void {
-		if ( get_option( 'woocommerce_coming_soon' ) ) {
+		if ( optionExists( 'woocommerce_coming_soon' ) ) {
 			$value = wp_validate_boolean( $new_value );
 			$value = $value ? 'yes' : 'no';
 
@@ -93,7 +94,7 @@ private static function sync_woocommerce_coming_soon_option( $new_value ): void
 	 * Sync the woocommerce_store_pages_only option with the nfd_coming_soon option.
 	 */
 	private static function sync_nfd_woocommerce_pages_only_option(): void {
-		if ( get_option( 'woocommerce_store_pages_only' ) ) {
+		if ( optionExists( 'woocommerce_store_pages_only' ) ) {
 			update_option( 'woocommerce_store_pages_only', 'no' );
 		}
 	}
@@ -131,10 +132,21 @@ private static function sync_nfd_coming_soon_option( $new_value, $option_name ):
 	/**
 	 * Sync the coming soon options when the woocommerce_coming_soon option is newly added.
 	 */
-	private static function sync_when_woocommerce_option_is_added(): void {
+	public static function sync_when_woocommerce_option_is_added(): void {
 		$nfd_coming_soon_service = self::get_service();
 		$new_value               = $nfd_coming_soon_service->is_enabled();
 
 		self::sync_woocommerce_coming_soon_option( $new_value );
 	}
+
+	/**
+	 * Sync options when WooCommerce is initialized but the 'woocommerce_coming_soon' option is not set.
+	 */
+	public static function sync_when_woocommerce_option_is_missing(): void {
+		if ( optionExists( 'woocommerce_coming_soon' ) ) {
+			return;
+		}
+
+		self::sync_when_woocommerce_option_is_added();
+	}
 }
diff --git a/tests/cypress/integration/coming-soon-woo.cy.js b/tests/cypress/integration/coming-soon-woo.cy.js
index 49a0ea4..84e2e45 100644
--- a/tests/cypress/integration/coming-soon-woo.cy.js
+++ b/tests/cypress/integration/coming-soon-woo.cy.js
@@ -20,27 +20,22 @@ describe( 'Coming Soon with WooCommerce', function () {
 		} );
 	} );
 
-	it( 'Replace our admin bar site status badge with WooCommerce\'s when active',
-		{ defaultCommandTimeout: 15000 },
-		() => {
-			// reload the page
-			cy.reload();
+	it( 'Replace our admin bar site status badge with WooCommerce\'s when active', () => {
+		// Visit settings page
+		cy.visit(
+			'/wp-admin/admin.php?page=' +
+				Cypress.env( 'pluginId' ) +
+				'#/settings'
+		);
 
-			// Visit settings page
-			cy.visit(
-				'/wp-admin/admin.php?page=' +
-					Cypress.env( 'pluginId' ) +
-					'#/settings'
-			);
-
-			// Our badge shouldn't be visible
-			cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
-				.should( 'not.exist' );
+		// Our badge shouldn't be visible
+		cy.get( '#wp-toolbar #wp-admin-bar-nfd-site-visibility-badge' )
+			.should( 'not.exist' );
 
-			// WooCommerce badge should be visible
-			cy.get( '#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item' )
-				.contains( 'a', 'Coming soon' )
-				.should( 'be.visible' );
+		// WooCommerce badge should be visible
+		cy.get( '#wp-toolbar #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item' )
+			.contains( 'a', 'Coming soon' )
+			.should( 'be.visible' );
 	});
 
 	it ( 'Our plugin settings should toggle WooCommerce admin bar badge', () => {