Add user synchronization

.wp-env.json

@@ -10,5 +10,9 @@
   },
   "lifecycleScripts": {
     "afterStart": "bash ./tests/bin/initialize.sh"
+  },
+  "config": {
+    "ALTERNATE_WP_CRON": true,
+    "WP_AUTO_UPDATE_CORE": false
   }
 }

assets/css/admin.css

@@ -19,7 +19,8 @@
 table.mc-user,
 .mc-list-row,
 .mc-list-note,
-.mc-section {
+.mc-section,
+.mailchimp-sf-nav-tab-wrapper {
 	max-width: 900px;
 	width: 100%;
 }
@@ -38,17 +39,23 @@ table.mc-user,
 }
 
 /* Sections */
-table.mc-widefat {
+table.mc-widefat, .mailchimp-sf-user-sync-page table.form-table {
 	background: var(--mailchimp-color-white);
 	border: 2px solid var(--mailchimp-color-header-bg) !important;
 	border-radius: 6px;
 	margin: 2.75rem 0 2.25rem;
 }
 
+.mailchimp-sf-user-sync-page table.form-table {
+	display: block;
+}
+
+.mailchimp-sf-user-sync-page table.form-table tr:first-child,
 table.mc-widefat tr:first-child {
 	background: var(--mailchimp-color-header-bg);
 }
 
+.mailchimp-sf-user-sync-page table.form-table tr:first-child th,
 table.mc-widefat tr:first-child th {
 	color: var(--mailchimp-color-text);
 	font-weight: 500;
@@ -181,13 +188,17 @@ table.mc-list-select {
 }
 
 /* Table */
+.mailchimp-sf-user-sync-page table.form-table td,
+.mailchimp-sf-user-sync-page table.form-table th,
 table.mc-widefat td,
 table.mc-widefat th {
 	padding: 18px;
 	text-align: left;
 	text-shadow: none;
 }
 
+.mailchimp-sf-user-sync-page table.form-table .last-row td,
+.mailchimp-sf-user-sync-page table.form-table .last-row th,
 table.mc-widefat .last-row td,
 table.mc-widefat .last-row th {
 	border-bottom: none !important;
@@ -199,6 +210,11 @@ table.mc-widefat th {
 	width: 130px;
 }
 
+.mailchimp-sf-user-sync-page table.form-table th {
+	color: var(--mailchimp-color-text-light);
+	font-weight: 500;
+}
+
 table.mc-widefat td label {
 	display: block;
 	font-size: 0.75rem;
@@ -213,6 +229,7 @@ table.mc-widefat td {
 	line-height: 1.125 !important;
 }
 
+.mailchimp-sf-user-sync-page table.form-table td input,
 table.mc-widefat td input {
 	display: inline-block;
 	font-style: normal;
@@ -261,6 +278,31 @@ th.mailchimp-connect {
 	margin-top: 26px;
 }
 
+/**
+ * Navigation
+ */
+.mailchimp-sf-nav-tab-wrapper {
+	margin-top: 1em;
+}
+
+.mailchimp-sf-nav-tab-wrapper a.nav-tab {
+	border: 0px;
+	background: transparent;
+	color: #000;
+	margin-left: 0;
+    font-weight: 500;
+    padding: 5px 12px;
+}
+
+.mailchimp-sf-nav-tab-wrapper a.nav-tab:hover {
+	color: var(--mailchimp-color-link);
+}
+
+.mailchimp-sf-nav-tab-wrapper a.nav-tab.nav-tab-active {
+	border-bottom: 2px solid var(--mailchimp-color-link);
+	color: var(--mailchimp-color-link);
+}
+
 /**
  * Mailchimp OAuth CSS
  */
@@ -390,6 +432,11 @@ body.toplevel_page_mailchimp_sf_options a {
 	color: var(--mailchimp-color-link);
 }
 
+body.admin_page_mailchimp_sf_create_account a:hover,
+body.toplevel_page_mailchimp_sf_options a:hover {
+	color: #006570;
+}
+
 body.admin_page_mailchimp_sf_create_account #footer-upgrade,
 body.toplevel_page_mailchimp_sf_options #footer-upgrade {
 	display: none;
@@ -516,7 +563,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade {
 	cursor: not-allowed;
 }
 
-.button.mailchimp-sf-button.small {
+.button.mailchimp-sf-button.small,
+.button.mailchimp-sf-button.user-sync-settings-submit {
 	padding: 8px 16px;
 	line-height: 14px;
 	float: right;
@@ -749,3 +797,97 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade {
 		column-gap: 16px;
 	}
 }
+
+.mailchimp-sf-user-sync-page {
+	max-width: 900px;
+}
+
+.mailchimp-sf-user-sync-page .subscribe_status_label {
+	font-weight: 500;
+}
+
+.mailchimp-sf-user-sync-page p.description_small {
+	font-size: 0.9em;
+	margin-bottom: 10px;
+}
+
+.mailchimp-sf-user-sync-status {
+	margin: 15px 0;
+	padding: 10px;
+	background: #fff;
+	border: 1px solid #ccd0d4;
+	border-radius: 4px;
+}
+.mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+}
+.mailchimp-sf-user-sync-status .sync-status-text {
+	font-size: 14px;
+	line-height: 1.4;
+}
+
+.button.mailchimp-cancel-user-sync-button {
+	margin-left: auto;
+}
+
+@media screen and (max-width: 480px) {
+	.mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.button.mailchimp-cancel-user-sync-button {
+		margin-left: 0px;
+		margin-top: 10px;
+	}
+}
+
+.mailchimp-sf-user-sync-errors {
+	margin-top: 2rem;
+}
+
+.mailchimp-sf-user-sync-errors-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.mailchimp-sf-user-sync-error-action {
+	min-width: 120px;
+	text-align: right;
+}
+
+.mailchimp-sf-start-user-sync-wrapper {
+	width: 100%;
+	margin-top: 2em;
+	background-color: #ffffff;
+	border: 1px solid #ccd0d4;
+	border-radius: 6px;
+}
+
+.mailchimp-sf-start-user-sync-box {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+}
+
+.mailchimp-sf-start-user-sync-box h2 {
+	margin: 0;
+}
+
+.mailchimp-sf-start-user-sync-box p {
+	margin-top: 0.5rem;
+}
+
+.mailchimp-sf-start-user-sync-box .mailchimp-sf-button {
+	float: none;
+	margin-right: 8px;
+}
+
+.mailchimp-sf-start-user-sync-box a {
+	text-decoration: none;
+}
+

assets/js/admin.js

@@ -414,3 +414,143 @@
 		});
 	});
 })(jQuery); // eslint-disable-line no-undef
+
+// User Sync Settings.
+(function ($) {
+	const userSyncSettingsPage = $('.mailchimp-sf-user-sync-page');
+	if (userSyncSettingsPage.length > 0) {
+		const syncExistingContactsOnly = $(
+			'tr.mailchimp-user-sync-existing-contacts-only input[type="checkbox"]',
+		);
+		if (syncExistingContactsOnly) {
+			syncExistingContactsOnly.change(function () {
+				if (this.checked) {
+					$('tr.mailchimp-user-sync-subscriber-status').hide();
+				} else {
+					$('tr.mailchimp-user-sync-subscriber-status').show();
+				}
+			});
+
+			// Trigger change event to hide/show subscriber status.
+			syncExistingContactsOnly.trigger('change');
+		}
+	}
+})(jQuery); // eslint-disable-line no-undef
+
+// Update the user sync status.
+(function ($) {
+	const statusWrapper = $('.mailchimp-sf-user-sync-status');
+	const processRunning = statusWrapper.length;
+	if (!processRunning) {
+		return;
+	}
+
+	const params = window.mailchimp_sf_admin_params || {};
+	const ajaxUrl = params.ajax_url;
+	const ajaxNonce = params.user_sync_status_nonce;
+
+	const intervalId = setInterval(function () {
+		$.ajax({
+			url: ajaxUrl,
+			type: 'POST',
+			data: {
+				action: 'mailchimp_sf_get_user_sync_status',
+				nonce: ajaxNonce,
+			},
+			success(response) {
+				if (response.success && response.data) {
+					if (response.data.is_running && response.data.status) {
+						// Update the sync status on the page
+						statusWrapper.html(response.data.status);
+					} else {
+						// Clear interval and reload the page.
+						clearInterval(intervalId);
+						window.location.reload();
+					}
+				}
+			},
+			error(jqXHR, textStatus, errorThrown) {
+				// eslint-disable-next-line no-console
+				console.error('Error: ', textStatus, ', Details: ', errorThrown);
+			},
+		});
+	}, 30000); // 30000 milliseconds = 30 seconds
+})(jQuery); // eslint-disable-line no-undef
+
+// User Sync Error logs.
+(function ($) {
+	const userSyncErrors = $('.mailchimp-sf-user-sync-errors');
+	if (!userSyncErrors) {
+		return;
+	}
+
+	const params = window.mailchimp_sf_admin_params || {};
+	const tableSelector = 'table.mailchimp-sf-user-sync-errors-table';
+	const noErrorsFoundRow =
+		'<tr><td colspan="4"><em>' + params.no_errors_found + '</em></td></tr>';
+	$('#mailchimp-sf-clear-user-sync-errors').on('click', function (e) {
+		e.preventDefault();
+		$(this).prop('disabled', true);
+		$('.mailchimp-sf-user-sync-errors-header-actions .spinner').addClass('is-active');
+
+		$.ajax({
+			url: params.ajax_url,
+			type: 'POST',
+			data: {
+				action: 'mailchimp_sf_delete_user_sync_error',
+				id: 'all',
+				nonce: params.delete_user_sync_error_nonce,
+			},
+			success(response) {
+				if (response && response.success) {
+					$(tableSelector + ' tbody').html(noErrorsFoundRow);
+					$('.mailchimp-sf-user-sync-errors-header-actions .spinner').removeClass(
+						'is-active',
+					);
+				} else {
+					window.location.reload();
+				}
+			},
+			error(jqXHR, textStatus, errorThrown) {
+				// eslint-disable-next-line no-console
+				console.error('Error: ', textStatus, ', Details: ', errorThrown);
+				window.location.reload();
+			},
+		});
+	});
+
+	$(tableSelector).on('click', '.mailchimp-sf-user-sync-error-delete', function (e) {
+		e.preventDefault();
+
+		const errorId = $(this).data('id');
+		const rowId = '#row-' + errorId;
+		$(rowId).find('.mailchimp-sf-user-sync-error-action .spinner').addClass('is-active');
+		$(this).prop('disabled', true);
+		$.ajax({
+			url: params.ajax_url,
+			type: 'POST',
+			data: {
+				action: 'mailchimp_sf_delete_user_sync_error',
+				nonce: params.delete_user_sync_error_nonce,
+				id: errorId,
+			},
+			success(response) {
+				if (response && response.success) {
+					$(rowId).remove();
+
+					if (!$(tableSelector + ' tbody tr').length) {
+						$(tableSelector + ' tbody').html(noErrorsFoundRow);
+						$('#mailchimp-sf-clear-user-sync-errors').prop('disabled', true);
+					}
+				} else {
+					window.location.reload();
+				}
+			},
+			error(jqXHR, textStatus, errorThrown) {
+				// eslint-disable-next-line no-console
+				console.error('Error: ', textStatus, ', Details: ', errorThrown);
+				window.location.reload();
+			},
+		});
+	});
+})(jQuery); // eslint-disable-line no-undef

composer.json

@@ -12,7 +12,8 @@
   ],
   "prefer-stable": true,
   "require": {
-    "php": ">=7.0"
+    "php": ">=7.0",
+    "woocommerce/action-scheduler": "3.8.2"
   },
   "require-dev": {
     "10up/phpcs-composer": "^3.0",
@@ -37,4 +38,4 @@
   "scripts": {
     "lint": "phpcs --standard=./phpcs.xml -p -s ."
   }
-}
+}