From 8fed351b723551b9bfd1009858e44672849c0d68 Mon Sep 17 00:00:00 2001
From: Filip Ilic <ilic.filip@gmail.com>
Date: Mon, 3 Mar 2025 14:57:51 +0100
Subject: [PATCH] WIP email frequencies

---
 assets/css/admin.css              |  6 +-
 assets/js/onboard.js              | 38 +++++++++++--
 views/popovers/subscribe-form.php | 93 +++++++++++++++++++------------
 views/welcome.php                 | 16 +++++-
 4 files changed, 109 insertions(+), 44 deletions(-)

diff --git a/assets/css/admin.css b/assets/css/admin.css
index 691c14e07d..601b04022e 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -454,10 +454,14 @@ button.prpl-info-icon {
 
 	label {
 		display: grid;
-		grid-template-columns: 1fr 3fr;
+		grid-template-columns: 2fr 8fr;
 		margin-bottom: 0.5em;
 		gap: var(--prpl-padding);
 	}
+
+	.prpl-onboard-form-radio-select {
+		margin-bottom: 1em;
+	}
 }
 
 
diff --git a/assets/js/onboard.js b/assets/js/onboard.js
index 893dc8504c..b5c0d2c56f 100644
--- a/assets/js/onboard.js
+++ b/assets/js/onboard.js
@@ -103,6 +103,22 @@ if ( document.getElementById( 'prpl-onboarding-form' ) ) {
 						.forEach( ( inputField ) => {
 							inputField.required = false;
 						} );
+
+					// Hide the form fields and the primary button.
+					document
+						.getElementById( 'prpl-onboarding-form' )
+						.querySelectorAll(
+							'.prpl-form-fields, .prpl-button-primary'
+						)
+						.forEach( ( el ) => el.classList.add( 'prpl-hidden' ) );
+
+					// Show the secondary button.
+					document
+						.getElementById( 'prpl-onboarding-form' )
+						.querySelectorAll( '.prpl-button-secondary--no-email' )
+						.forEach( ( el ) =>
+							el.classList.remove( 'prpl-hidden' )
+						);
 				} else {
 					document
 						.getElementById( 'prpl-onboarding-form' )
@@ -115,13 +131,23 @@ if ( document.getElementById( 'prpl-onboarding-form' ) ) {
 								inputField.required = true;
 							}
 						} );
+
+					// Show the form fields and the primary button.
+					document
+						.getElementById( 'prpl-onboarding-form' )
+						.querySelectorAll(
+							'.prpl-form-fields, .prpl-button-primary'
+						)
+						.forEach( ( el ) =>
+							el.classList.remove( 'prpl-hidden' )
+						);
+
+					// Hide the secondary button.
+					document
+						.getElementById( 'prpl-onboarding-form' )
+						.querySelectorAll( '.prpl-button-secondary--no-email' )
+						.forEach( ( el ) => el.classList.add( 'prpl-hidden' ) );
 				}
-				document
-					.getElementById( 'prpl-onboarding-form' )
-					.querySelectorAll(
-						'.prpl-form-fields, .prpl-form-fields, .prpl-button-primary, .prpl-button-secondary--no-email'
-					)
-					.forEach( ( el ) => el.classList.toggle( 'prpl-hidden' ) );
 			} );
 		} );
 
diff --git a/views/popovers/subscribe-form.php b/views/popovers/subscribe-form.php
index 1cd1228f28..90266d031f 100644
--- a/views/popovers/subscribe-form.php
+++ b/views/popovers/subscribe-form.php
@@ -26,45 +26,68 @@
 	?>
 	</p>
 	<div class="prpl-form-fields">
-		<label>
-			<span class="prpl-label-content">
-				<?php \esc_html_e( 'First name', 'progress-planner' ); ?>
-			</span>
+		<div class="prpl-onboard-form-radio-select">
+			<label>
+				<input type="radio" name="with-email" value="weekly" checked>
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'Yes, send me weekly updates!', 'progress-planner' ); ?>
+				</span>
+			</label>
+			<label>
+				<input type="radio" name="with-email" value="monthly">
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'Monthly, tell me what to do next month!', 'progress-planner' ); ?>
+				</span>
+			</label>
+			<label>
+				<input type="radio" name="with-email" value="quarterly">
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'Quarterly, just keep me posted on your plugin updates.', 'progress-planner' ); ?>
+				</span>
+			</label>
+			<label>
+				<input type="radio" name="with-email" value="no">
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'No, I don’t want emails right now.', 'progress-planner' ); ?>
+				</span>
+			</label>
+		</div>
+		<div class="prpl-form-fields">
+			<label>
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'First name', 'progress-planner' ); ?>
+				</span>
+				<input
+					type="text"
+					name="name"
+					class="prpl-input"
+					required
+					value="<?php echo \esc_attr( \get_user_meta( $prpl_current_user->ID, 'first_name', true ) ); ?>"
+				>
+			</label>
+			<label>
+				<span class="prpl-label-content">
+					<?php \esc_html_e( 'Email', 'progress-planner' ); ?>
+				</span>
+				<input
+					type="email"
+					name="email"
+					class="prpl-input"
+					required
+					value="<?php echo \esc_attr( $prpl_current_user->user_email ); ?>"
+				>
+			</label>
 			<input
-				type="text"
-				name="name"
-				class="prpl-input"
-				required
-				value="<?php echo \esc_attr( \get_user_meta( $prpl_current_user->ID, 'first_name', true ) ); ?>"
+				type="hidden"
+				name="site"
+				value="<?php echo \esc_attr( \set_url_scheme( \site_url() ) ); ?>"
 			>
-		</label>
-		<label>
-			<span class="prpl-label-content">
-				<?php \esc_html_e( 'Email', 'progress-planner' ); ?>
-			</span>
 			<input
-				type="email"
-				name="email"
-				class="prpl-input"
-				required
-				value="<?php echo \esc_attr( $prpl_current_user->user_email ); ?>"
+				type="hidden"
+				name="timezone_offset"
+				value="<?php echo (float) ( \wp_timezone()->getOffset( new \DateTime( 'midnight' ) ) / 3600 ); ?>"
 			>
-		</label>
-		<input
-			type="hidden"
-			name="site"
-			value="<?php echo \esc_attr( \set_url_scheme( \site_url() ) ); ?>"
-		>
-		<input
-			type="hidden"
-			name="timezone_offset"
-			value="<?php echo (float) ( \wp_timezone()->getOffset( new \DateTime( 'midnight' ) ) / 3600 ); ?>"
-		>
-		<input
-			type="hidden"
-			name="with-email"
-			value="yes"
-		>
+		</div>
 	</div>
 	<button id="submit-license-key" class="button button-primary"><?php \esc_html_e( 'Subscribe', 'progress-planner' ); ?></button>
 </form>
diff --git a/views/welcome.php b/views/welcome.php
index 6843c978a9..21f1d3c7ca 100644
--- a/views/welcome.php
+++ b/views/welcome.php
@@ -87,11 +87,23 @@
 				<strong><?php \esc_html_e( 'Choose your preference:', 'progress-planner' ); ?></strong>
 				<div class="prpl-onboard-form-radio-select">
 					<label>
-						<input type="radio" name="with-email" value="yes" checked>
+						<input type="radio" name="with-email" value="weekly" checked>
 						<span class="prpl-label-content">
 							<?php \esc_html_e( 'Yes, send me weekly updates!', 'progress-planner' ); ?>
 						</span>
 					</label>
+					<label>
+						<input type="radio" name="with-email" value="monthly">
+						<span class="prpl-label-content">
+							<?php \esc_html_e( 'Monthly, tell me what to do next month!', 'progress-planner' ); ?>
+						</span>
+					</label>
+					<label>
+						<input type="radio" name="with-email" value="quarterly">
+						<span class="prpl-label-content">
+							<?php \esc_html_e( 'Quarterly, just keep me posted on your plugin updates.', 'progress-planner' ); ?>
+						</span>
+					</label>
 					<label>
 						<input type="radio" name="with-email" value="no">
 						<span class="prpl-label-content">
@@ -161,7 +173,7 @@ class="prpl-input"
 						<span>
 							<input
 								type="submit"
-								value="<?php \esc_attr_e( 'Get going and send me weekly emails', 'progress-planner' ); ?>"
+								value="<?php \esc_attr_e( 'Get going and send me emails', 'progress-planner' ); ?>"
 								class="prpl-button-primary"
 							>
 						</span>