Add WooCommerce Shipping Migration modal and contextual banner with dismissal control

Ferdev · Ferdev · commit 3161463dcced · 2025-05-13T09:21:45.000+02:00
- Extend WC_Connect_Nux to support new service settings and schemas stores.
- Add contextual after-connection banner for US users without WooCommerce Shipping plugin.
- Enqueue and localize migration modal scripts and styles; render React modal container in admin notices.
- Add dismissal logic with a shared option (`wcs_nux_any_banner_shown`) to prevent multiple simultaneous banners.
- Enhance feature announcement React component to support forced open state.
- Improve migration runner state handling for robustness.
- Add safety checks in admin notice dismiss button event listeners.
- Make `WC_Connect_Loader::get_wc_connect_base_url` public static for broader usage.
- Instantiate `WC_Connect_Nux` with new dependencies in loader.
- Add placeholder admin banner and modal manager classes.
diff --git a/classes/class-wc-connect-nux.php b/classes/class-wc-connect-nux.php
@@ -29,9 +29,34 @@ class WC_Connect_Nux {
 		 */
 		private $shipping_label;
 
-		function __construct( WC_Connect_Tracks $tracks, WC_Connect_Shipping_Label $shipping_label ) {
-			$this->tracks         = $tracks;
-			$this->shipping_label = $shipping_label;
+		/**
+		 * @var WC_Connect_Service_Settings_Store
+		 */
+		protected $service_settings_store;
+
+		/**
+		 * @var WC_Connect_Payment_Methods_Store
+		 */
+		protected $payment_methods_store;
+
+		/**
+		 * @var WC_Connect_Service_Schemas_Store
+		 */
+		protected $service_schemas_store;
+
+
+		function __construct(
+			WC_Connect_Tracks $tracks,
+			WC_Connect_Shipping_Label $shipping_label,
+			WC_Connect_Service_Settings_Store $service_settings_store,
+			WC_Connect_Payment_Methods_Store $payment_methods_store,
+			WC_Connect_Service_Schemas_Store $service_schemas_store
+		) {
+			$this->tracks                 = $tracks;
+			$this->shipping_label         = $shipping_label;
+			$this->service_settings_store = $service_settings_store;
+			$this->payment_methods_store  = $payment_methods_store;
+			$this->service_schemas_store  = $service_schemas_store;
 
 			$this->init_pointers();
 		}
@@ -436,6 +461,68 @@ public function set_up_nux_notices() {
 					add_action( 'admin_notices', array( $this, 'show_tos_banner' ) );
 					break;
 				case 'after_cxn_us_no_wcs_plugin':
+					// Enqueue the migration modal assets specifically for this banner on the plugins page.
+					$plugin_version = WC_Connect_Loader::get_wcs_version();
+					// Use the public static method from WC_Connect_Loader
+					$base_url = WC_Connect_Loader::get_wc_connect_base_url(); // Assuming get_wc_connect_base_url is static
+
+					wp_register_style( 'wcst_wcshipping_migration_admin_notice', $base_url . 'woocommerce-services-wcshipping-migration-admin-notice-' . $plugin_version . '.css', array(), null ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
+					// Add 'wp-element' and 'wc_connect_admin' dependency for React and base script
+					wp_register_script( 'wcst_wcshipping_migration_admin_notice', $base_url . 'woocommerce-services-wcshipping-migration-admin-notice-' . $plugin_version . '.js', array( 'wc_connect_admin', 'wp-element' ), null, true ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
+
+					// Localize script data - MATCHING the original register_wcshipping_migration_modal
+					// Note: The modal primarily uses data-args, localization is minimal here.
+					wp_localize_script(
+						'wcst_wcshipping_migration_admin_notice',
+						'wcsPluginData', // Ensure this matches the expected object name in the script
+						array(
+							'assetPath'       => $base_url,
+							'adminPluginPath' => admin_url( 'plugins.php' ),
+						)
+					);
+
+					// Enqueue scripts/styles needed for the banner and modal
+					wp_enqueue_script( 'wc_connect_admin' ); // Ensure base script is loaded first
+					wp_enqueue_script( 'wcst_wcshipping_migration_admin_notice' );
+					wp_enqueue_style( 'wcst_wcshipping_migration_admin_notice' );
+					wp_enqueue_style( 'wc_connect_banner' );
+
+					// Add the action to render the notice and container div
+					add_action(
+						'admin_notices',
+						function () use ( $banner_to_display ) {
+							// Instantiate settings classes HERE, inside the closure, using stored dependencies
+							$account_settings  = new WC_Connect_Account_Settings(
+								$this->service_settings_store,
+								$this->payment_methods_store
+							);
+							$packages_settings = new WC_Connect_Package_Settings(
+								$this->service_settings_store,
+								$this->service_schemas_store
+							);
+
+							// Prepare the data for the data-args attribute by calling get()
+							$container_data_args    = array(
+								'nonce'            => wp_create_nonce( 'wp_rest' ),
+								'baseURL'          => get_rest_url(),
+								'accountSettings'  => $account_settings->get(),  // Get REAL data
+								'packagesSettings' => $packages_settings->get(), // Get REAL data
+							);
+							$encoded_container_args = wp_json_encode( $container_data_args );
+
+							// Echo the container div needed for the modal React component BEFORE the banner.
+							// Add 'display: none;' initially; the script should manage visibility.
+							printf(
+								'<div id="wcst_wcshipping_migration_admin_notice_feature_announcement" data-args="%s" style="display: none;"></div>',
+								esc_attr( $encoded_container_args ) // Use the REAL encoded data
+							);
+
+							// Now show the banner itself
+							$this->show_contextual_after_connection_banner( $banner_to_display );
+						}
+					);
+					break; // End case 'after_cxn_us_no_wcs_plugin'
+
 				case 'after_cxn_us_with_wcs_plugin':
 				case 'after_cxn_non_us':
 					wp_enqueue_style( 'wc_connect_banner' );
@@ -453,6 +540,10 @@ function () use ( $banner_to_display ) {
 		}
 
 		public function show_banner_before_connection() {
+			if ( get_option( 'wcs_nux_any_banner_shown', false ) ) {
+				return;
+			}
+
 			if ( ! $this->should_display_nux_notice_for_current_store_locale() ) {
 				return;
 			}
@@ -486,10 +577,16 @@ public function show_banner_before_connection() {
 				'should_show_terms' => true,
 			);
 
+			update_option( 'wcs_nux_any_banner_shown', true );
+
 			$this->show_nux_banner( $banner_content );
 		}
 
 		public function show_banner_after_connection() {
+			if ( get_option( 'wcs_nux_any_banner_shown', false ) ) {
+				return;
+			}
+
 			if ( ! $this->should_display_nux_notice_for_current_store_locale() ) {
 				return;
 			}
@@ -504,6 +601,7 @@ public function show_banner_after_connection() {
 				WC_Connect_Options::delete_option( self::SHOULD_SHOW_AFTER_CXN_BANNER );
 				// Set the flag for the next contextual banner
 				WC_Connect_Options::update_option( self::SHOULD_SHOW_CONTEXTUAL_BANNER, true );
+				delete_option( 'wcs_nux_any_banner_shown' );
 				wp_safe_redirect( remove_query_arg( 'wcs-nux-notice' ) );
 				exit;
 			}
@@ -518,6 +616,8 @@ public function show_banner_after_connection() {
 			$description_base = __( 'You can now enjoy %s.', 'woocommerce-services' );
 			$feature_list     = $this->get_feature_list_for_country( $country );
 
+			update_option( 'wcs_nux_any_banner_shown', true );
+
 			$this->show_nux_banner(
 				array(
 					'title'             => __( 'Setup complete.', 'woocommerce-services' ),
@@ -538,6 +638,10 @@ public function show_banner_after_connection() {
 		}
 
 		public function show_contextual_after_connection_banner( $banner_type ) {
+			if ( get_option( 'wcs_nux_any_banner_shown', false ) ) {
+				return;
+			}
+
 			$screen = get_current_screen();
 
 			// This specific banner should only appear on the plugins page.
@@ -554,6 +658,7 @@ public function show_contextual_after_connection_banner( $banner_type ) {
 			if ( isset( $_GET['wcs-nux-notice'] ) && 'dismiss' === $_GET['wcs-nux-notice'] ) {
 				// Delete the flag for this contextual banner
 				WC_Connect_Options::delete_option( self::SHOULD_SHOW_CONTEXTUAL_BANNER );
+				delete_option( 'wcs_nux_any_banner_shown' );
 				wp_safe_redirect( remove_query_arg( 'wcs-nux-notice' ) );
 				exit;
 			}
@@ -564,17 +669,21 @@ public function show_contextual_after_connection_banner( $banner_type ) {
 			// Using a generic tracks event, can be made more specific if needed.
 			$this->tracks->opted_in( 'contextual_connection_banner_viewed' );
 
+			update_option( 'wcs_nux_any_banner_shown', true );
+
 			$banner_title       = '';
 			$banner_description = '';
 			$banner_button_text = '';
 			$banner_button_link = null;
 
+			update_option( 'wcshipping_migration_state', '0' );
 			switch ( $banner_type ) {
 				case 'after_cxn_us_no_wcs_plugin':
 					$banner_title       = __( 'WooCommerce Shipping & Tax has been renamed to WooCommerce Tax', 'woocommerce-services' );
 					$banner_description = __( 'Your tax functionality will continue to work as expected. The shipping functionality in this plugin will be discontinued on September 1, 2025. Please migrate to the new WooCommerce Shipping extension to get discounted labels for UPS, USPS, DHL Express— and more coming soon!', 'woocommerce-services' );
 					$banner_button_text = __( 'Try WooCommerce Shipping ', 'woocommerce-services' );
-					$banner_button_link = '';
+					// Ensure this line uses the special trigger value:
+					$banner_button_link = '#trigger-migration-modal';
 					break;
 				case 'after_cxn_us_with_wcs_plugin':
 					$banner_title       = __( 'WooCommerce Shipping & Tax has been renamed to WooCommerce Tax', 'woocommerce-services' );
@@ -613,6 +722,10 @@ public function show_contextual_after_connection_banner( $banner_type ) {
 		}
 
 		public function show_tos_banner() {
+			if ( get_option( 'wcs_nux_any_banner_shown', false ) ) {
+				return;
+			}
+
 			if ( ! $this->should_display_nux_notice_for_current_store_locale() ) {
 				return;
 			}
@@ -628,6 +741,8 @@ public function show_tos_banner() {
 
 				$this->tracks->opted_in( 'tos_banner' );
 
+				delete_option( 'wcs_nux_any_banner_shown' );
+
 				wp_safe_redirect( remove_query_arg( 'wcs-nux-tos' ) );
 				exit;
 			}
@@ -637,6 +752,8 @@ public function show_tos_banner() {
 			$description_base = __( "WooCommerce Tax is almost ready to go! Once you connect your site to WordPress.com you'll have access to %s.", 'woocommerce-services' );
 			$feature_list     = $this->get_feature_list_for_country( $country );
 
+			update_option( 'wcs_nux_any_banner_shown', true );
+
 			$this->show_nux_banner(
 				array(
 					'title'             => __( 'Connect your site to activate WooCommerce Tax', 'woocommerce-services' ),
@@ -694,12 +811,23 @@ public function show_nux_banner( $content ) {
 						</p>
 					<?php endif; ?>
 					<?php if ( isset( $content['button_link'] ) ) : ?>
-						<a
-							class="wcs-nux__notice-content-button button button-primary"
-							href="<?php echo esc_url( $content['button_link'] ); ?>"
-						>
-							<?php echo esc_html( $content['button_text'] ); ?>
-						</a>
+						<?php // Check for the special modal trigger value ?>
+						<?php if ( '#trigger-migration-modal' === $content['button_link'] ) : ?>
+							<button
+								type="button"
+								id="wcst-wcshipping-migration-notice__click" <?php // Ensure this ID matches what the JS expects ?>
+								class="wcs-nux__notice-content-button button button-primary"
+							>
+								<?php echo esc_html( $content['button_text'] ); ?>
+							</button>
+						<?php else : ?>
+							<a
+								class="wcs-nux__notice-content-button button button-primary"
+								href="<?php echo esc_url( $content['button_link'] ); ?>"
+							>
+								<?php echo esc_html( $content['button_text'] ); ?>
+							</a>
+						<?php endif; ?>
 					<?php else : ?>
 						<form action="<?php echo esc_attr( admin_url( 'admin-post.php' ) ); ?>" method="post">
 							<input type="hidden" name="action" value="register_woocommerce_services_jetpack"/>
diff --git a/client/components/migration/feature-announcement.jsx b/client/components/migration/feature-announcement.jsx
@@ -20,8 +20,9 @@ import {
 import { installAndActivatePlugins } from './migration-runner';
 import { TIME_TO_REMMEMBER_DISMISSAL_SECONDS } from './constants';
 
-const FeatureAnnouncement = ( { translate, isEligable, previousMigrationState, onClose } ) => {
-	const [isOpen, setIsOpen] = useState(isEligable);
+const FeatureAnnouncement = ( { translate, isEligable, previousMigrationState, onClose, forceOpen = false } ) => {
+	// Open if either normally eligible OR if forced open by the prop.
+	const [isOpen, setIsOpen] = useState( forceOpen || isEligable );
 	const [isUpdating, setIsUpdating] = useState(false);
 
 	useEffect( () => {
diff --git a/client/components/migration/migration-runner.js b/client/components/migration/migration-runner.js
@@ -228,11 +228,14 @@ const installAndActivatePlugins = async( previousMigrationState ) => {
      * @returns {string} The next state to run. The name of the state is the key in this object migrationStateTransitions.
      */
     const getNextStateToRun = () => {
-        if ( ! previousMigrationState ) {
-            // stateInit
+        // Check if previousMigrationState is a valid key in the map.
+        // If not, or if it's falsy, default to the initial state (stateInit).
+        if ( ! previousMigrationState || ! MIGRATION_ENUM_TO_STATE_NAME_MAP.hasOwnProperty( previousMigrationState ) ) {
+            // stateInit (key 2)
             return MIGRATION_ENUM_TO_STATE_NAME_MAP[ 2 ];
         }
 
+        // If it's a valid key, find the corresponding state name and return its success transition.
         const currentStateName = MIGRATION_ENUM_TO_STATE_NAME_MAP[ previousMigrationState ];
         const nextMigrationState = getMigrationStateByName( currentStateName );
         return nextMigrationState.success; // The next state is "success".
@@ -258,4 +261,4 @@ const installAndActivatePlugins = async( previousMigrationState ) => {
 
 export {
     installAndActivatePlugins
-}
+}
diff --git a/client/wcshipping-migration-admin-notice.js b/client/wcshipping-migration-admin-notice.js
@@ -33,20 +33,24 @@ const wcstMigrationNoticeDimissButton = document.querySelector('.wcst-wcshipping
 		 * Prevent form submission when rendered in a form or alike that listens to button click
 		 */
 		evt.preventDefault();
-		// Pop open feature announcement modal.
+		// Pop open feature announcement modal, forcing it open regardless of eligibility state.
 		ReactDOM.render(
 			<Provider store={store}>
-				<FeatureAnnouncement />
+				<FeatureAnnouncement forceOpen={ true } />
 			</Provider>,
 			container
 		);
 	});
 
 	// Dismiss it for 3 days, then remove it from view.
-	wcstMigrationNoticeDimissButton.addEventListener(eventName, () => {
-		// window.wpCookies API: wordpress/wp-includes/js/utils.js
-		window.wpCookies.set('wcst-wcshipping-migration-dismissed', 1, TIME_TO_REMMEMBER_DISMISSAL_SECONDS)
-		const wcstMigrationAdminNotice = document.querySelector('.wcst-wcshipping-migration-notice');
-		wcstMigrationAdminNotice.remove();
-	});
+	if (wcstMigrationNoticeDimissButton) {
+		wcstMigrationNoticeDimissButton.addEventListener(eventName, () => {
+			// window.wpCookies API: wordpress/wp-includes/js/utils.js
+			window.wpCookies.set('wcst-wcshipping-migration-dismissed', 1, TIME_TO_REMMEMBER_DISMISSAL_SECONDS)
+			const wcstMigrationAdminNotice = document.querySelector('.wcst-wcshipping-migration-notice');
+			if (wcstMigrationAdminNotice) {
+				wcstMigrationAdminNotice.remove();
+			}
+		});
+	}
 });
diff --git a/includes/admin/class-wc-connect-banner.php b/includes/admin/class-wc-connect-banner.php
diff --git a/includes/admin/class-wc-connect-modal-manager.php b/includes/admin/class-wc-connect-modal-manager.php
diff --git a/woocommerce-services.php b/woocommerce-services.php
@@ -337,7 +337,7 @@ public static function get_wcs_version() {
 		 *
 		 * @return string
 		 */
-		private static function get_wc_connect_base_url() {
+		public static function get_wc_connect_base_url() {
 			return trailingslashit( defined( 'WOOCOMMERCE_CONNECT_DEV_SERVER_URL' ) ? WOOCOMMERCE_CONNECT_DEV_SERVER_URL : plugins_url( 'dist/', __FILE__ ) );
 		}
 
@@ -814,7 +814,7 @@ public function load_dependencies() {
 			$payment_methods_store = new WC_Connect_Payment_Methods_Store( $settings_store, $api_client, $logger );
 			$tracks                = new WC_Connect_Tracks( $logger, __FILE__ );
 			$shipping_label        = new WC_Connect_Shipping_Label( $api_client, $settings_store, $schemas_store, $payment_methods_store );
-			$nux                   = new WC_Connect_Nux( $tracks, $shipping_label );
+			$nux                   = new WC_Connect_Nux( $tracks, $shipping_label, $settings_store, $payment_methods_store, $schemas_store );
 			$taxjar                = new WC_Connect_TaxJar_Integration( $api_client, $taxes_logger, $this->wc_connect_base_url );
 			$paypal_ec             = new WC_Connect_PayPal_EC( $api_client, $nux );
 			$label_reports         = new WC_Connect_Label_Reports( $settings_store );
