Fix WooCommerce product sync button functionality

- Move sync handler from wc-integration.js to admin.js (uses wpBnbAdmin)
- Add CSS for button icon vertical alignment with inline-flex
- Add spin animation for sync button icon during operation
- Add sync status styling (success/error colors)
- Add i18n strings for syncing messages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/admin.css

@@ -2098,3 +2098,45 @@
 	width: 16px;
 	height: 16px;
 }
+
+/* ============================================
+   WooCommerce Sync Button
+   ============================================ */
+.bnb-sync-rooms-btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.bnb-sync-rooms-btn .dashicons {
+	font-size: 16px;
+	width: 16px;
+	height: 16px;
+	line-height: 1;
+}
+
+.bnb-sync-rooms-btn .dashicons.bnb-spin {
+	animation: bnb-spin 1s linear infinite;
+}
+
+@keyframes bnb-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.sync-status {
+	margin-left: 10px;
+	font-style: italic;
+}
+
+.sync-status .bnb-sync-success {
+	color: #00a32a;
+}
+
+.sync-status .bnb-sync-error {
+	color: #d63638;
+}

assets/js/admin.js

@@ -1199,6 +1199,51 @@
 		});
 	}
 
+	/**
+	 * Initialize WooCommerce sync button.
+	 */
+	function initWooCommerceSync() {
+		var $syncBtn = $('.bnb-sync-rooms-btn');
+
+		if (!$syncBtn.length) {
+			return;
+		}
+
+		$syncBtn.on('click', function(e) {
+			e.preventDefault();
+
+			var $btn = $(this);
+			var $status = $btn.siblings('.sync-status');
+
+			$btn.prop('disabled', true);
+			$btn.find('.dashicons').addClass('bnb-spin');
+			$status.text(wpBnbAdmin.i18n.syncing || 'Syncing...');
+
+			$.ajax({
+				url: wpBnbAdmin.ajaxUrl,
+				type: 'POST',
+				data: {
+					action: 'wp_bnb_sync_all_rooms',
+					nonce: wpBnbAdmin.nonce
+				},
+				success: function(response) {
+					if (response.success) {
+						$status.html('<span class="bnb-sync-success">' + response.data.message + '</span>');
+					} else {
+						$status.html('<span class="bnb-sync-error">' + (response.data.message || 'Error') + '</span>');
+					}
+				},
+				error: function() {
+					$status.html('<span class="bnb-sync-error">' + (wpBnbAdmin.i18n.error || 'Error occurred') + '</span>');
+				},
+				complete: function() {
+					$btn.prop('disabled', false);
+					$btn.find('.dashicons').removeClass('bnb-spin');
+				}
+			});
+		});
+	}
+
 	// Initialize on document ready.
 	$(document).ready(function() {
 		initLicenseManagement();
@@ -1214,6 +1259,7 @@
 		initBookingServices();
 		initDashboardCharts();
 		initReportsPage();
+		initWooCommerceSync();
 	});
 
 })(jQuery);

src/Plugin.php

@@ -350,6 +350,8 @@ final class Plugin {
 				'checkingUpdates'       => __( 'Checking for updates...', 'wp-bnb' ),
 				'occupancy'             => __( 'Occupancy %', 'wp-bnb' ),
 				'revenue'               => __( 'Revenue', 'wp-bnb' ),
+				'syncing'               => __( 'Syncing...', 'wp-bnb' ),
+				'syncComplete'          => __( 'Sync complete', 'wp-bnb' ),
 			),
 		);