Skip to content

Commit 7676f45

Browse files
HardeepAsraniHardeepAsrani
committed
fix: onboarding email field
1 parent 84ef0e9 commit 7676f45

File tree

4 files changed

+63
-12
lines changed

4 files changed

+63
-12
lines changed

‎classes/Visualizer/Module/Wizard.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ public function __construct( Visualizer_Plugin $plugin ) {
5757
* @access public
5858
*/
5959
public function registerAdminMenu() {
60-
if ( ! Visualizer_Module::is_pro() && get_option( 'visualizer_fresh_install', false ) ) {
60+
// if ( ! Visualizer_Module::is_pro() && get_option( 'visualizer_fresh_install', false ) ) {
6161
$hook = add_submenu_page(
6262
Visualizer_Plugin::NAME,
6363
__( 'Setup Wizard', 'visualizer' ),
@@ -70,7 +70,7 @@ public function registerAdminMenu() {
7070
)
7171
);
7272
add_action( "load-$hook", array( $this, 'visualizer_load_setup_wizard_page' ) );
73-
}
73+
// }
7474
}
7575

7676

‎css/style-wizard.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1069,6 +1069,14 @@ display: none;
10691069
align-items: center;
10701070
gap: 8px;
10711071
}
1072+
.vz-option-card--newsletter .vz-save-email[disabled]{
1073+
opacity: 0.6;
1074+
cursor: not-allowed;
1075+
}
1076+
.vz-option-card--newsletter .vz-field-error{
1077+
display: block;
1078+
margin-top: 6px;
1079+
}
10721080
.vz-option-card--newsletter .vz-change-email{
10731081
background: transparent;
10741082
border: 0;

‎js/setup-wizard.js‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ jQuery(function ($) {
1616
* @type {boolean}
1717
*/
1818
const isLivePreview = window.location.search.includes('env=preview');
19+
const emailRegex = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
20+
21+
var showNewsletterError = function ($input, message) {
22+
var $wrap = $input.closest('.vz-option-input');
23+
$wrap.next('.vz-field-error').remove();
24+
if (message) {
25+
$wrap.after('<span class="vz-field-error">' + message + '</span>');
26+
}
27+
};
1928

2029
/**
2130
* Redirect to draft page after subscribe (optional).
@@ -304,21 +313,20 @@ jQuery(function ($) {
304313
};
305314
var emailElement = $("#vz_subscribe_email");
306315
// Remove error message.
307-
emailElement.next(".vz-field-error").remove();
316+
showNewsletterError(emailElement, '');
308317
var newsletterEnabled = $("#enable_newsletter").is(":checked");
309318

310319
if (withSubscribe && newsletterEnabled) {
311-
var subscribeEmail = emailElement.val();
312-
var EmailTest = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
320+
var subscribeEmail = emailElement.val().trim();
313321
var errorMessage = "";
314322

315323
if ("" === subscribeEmail) {
316324
errorMessage = visualizerSetupWizardData.errorMessages.requiredEmail;
317-
} else if (!EmailTest.test(subscribeEmail)) {
325+
} else if (!emailRegex.test(subscribeEmail)) {
318326
errorMessage = visualizerSetupWizardData.errorMessages.invalidEmail;
319327
}
320328
if ("" !== errorMessage) {
321-
$('<span class="vz-field-error">' + errorMessage + "</span>").insertAfter(emailElement);
329+
showNewsletterError(emailElement, errorMessage);
322330
return false;
323331
}
324332

@@ -354,6 +362,7 @@ jQuery(function ($) {
354362
var $inputWrap = $card.find('.vz-option-input');
355363
$inputWrap.show();
356364
$card.find('#vz_subscribe_email').focus();
365+
validateNewsletterEmail();
357366
});
358367

359368
var finalizeNewsletterEmail = function ($card) {
@@ -367,7 +376,37 @@ jQuery(function ($) {
367376
};
368377

369378
$(document).on('click', '.vz-save-email', function () {
370-
finalizeNewsletterEmail($(this).closest('.vz-option-card--newsletter'));
379+
var $card = $(this).closest('.vz-option-card--newsletter');
380+
if (!validateNewsletterEmail()) {
381+
return;
382+
}
383+
finalizeNewsletterEmail($card);
384+
});
385+
386+
var validateNewsletterEmail = function () {
387+
var $input = $("#vz_subscribe_email");
388+
if (!$input.length) {
389+
return true;
390+
}
391+
var $card = $input.closest('.vz-option-card--newsletter');
392+
var $saveButton = $card.find('.vz-save-email');
393+
var email = $input.val().trim();
394+
showNewsletterError($input, '');
395+
if (!email) {
396+
$saveButton.prop('disabled', false);
397+
return true;
398+
}
399+
if (!emailRegex.test(email)) {
400+
showNewsletterError($input, visualizerSetupWizardData.errorMessages.invalidEmail);
401+
$saveButton.prop('disabled', true);
402+
return false;
403+
}
404+
$saveButton.prop('disabled', false);
405+
return true;
406+
};
407+
408+
$(document).on('input blur', '#vz_subscribe_email', function () {
409+
validateNewsletterEmail();
371410
});
372411

373412
// Click to copy.
@@ -380,6 +419,9 @@ jQuery(function ($) {
380419
$("#step-1").on("change", "input:radio", function () {
381420
$("#step-1").find('[data-step_number="1"]').removeClass("disabled");
382421
});
422+
if ( $('#step-1 .vz-radio-btn:checked').length ) {
423+
$('#step-1').find('[data-step_number="1"]').removeClass('disabled');
424+
}
383425

384426
// Change button text.
385427
$(document).on("change", "#insert_shortcode", function () {

‎templates/setup-wizard.php‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
);
1616

1717
$chart_id = ! empty( $this->wizard_data['chart_id'] ) ? (int) $this->wizard_data['chart_id'] : '';
18+
$chart_type_default = ! empty( $this->wizard_data['chart_type'] ) ? $this->wizard_data['chart_type'] : 'pie';
1819
$wp_optimole_active = is_plugin_active( 'optimole-wp/optimole-wp.php' );
1920
$wp_otter_active = is_plugin_active( 'otter-blocks/otter-blocks.php' );
2021
$wp_spc_active = is_plugin_active( 'wp-cloudflare-page-cache/wp-cloudflare-super-page-cache.php' );
@@ -80,31 +81,31 @@
8081
<ul>
8182
<li>
8283
<label class="vz-chart-option" for="vz-chart-1">
83-
<input type="radio" class="vz-radio-btn" id="vz-chart-1" name="visualizer[wizard_data][chart_type]" value="pie">
84+
<input type="radio" class="vz-radio-btn" id="vz-chart-1" name="visualizer[wizard_data][chart_type]" value="pie" <?php echo checked( $chart_type_default, 'pie', false ); ?>>
8485
<h3 class="h3"><?php esc_html_e( 'Pie/Donut chart', 'visualizer' ); ?></h3>
8586
<div class="img type-box-pie"></div>
8687
<div class="bg"></div>
8788
</label>
8889
</li>
8990
<li>
9091
<label class="vz-chart-option" for="vz-chart-2">
91-
<input type="radio" class="vz-radio-btn" id="vz-chart-2" name="visualizer[wizard_data][chart_type]" value="bar">
92+
<input type="radio" class="vz-radio-btn" id="vz-chart-2" name="visualizer[wizard_data][chart_type]" value="bar" <?php echo checked( $chart_type_default, 'bar', false ); ?>>
9293
<h3 class="h3"><?php esc_html_e( 'Bar chart', 'visualizer' ); ?></h3>
9394
<div class="img type-box-bar"></div>
9495
<div class="bg"></div>
9596
</label>
9697
</li>
9798
<li>
9899
<label class="vz-chart-option" for="vz-chart-3">
99-
<input type="radio" class="vz-radio-btn" id="vz-chart-3" name="visualizer[wizard_data][chart_type]" value="line">
100+
<input type="radio" class="vz-radio-btn" id="vz-chart-3" name="visualizer[wizard_data][chart_type]" value="line" <?php echo checked( $chart_type_default, 'line', false ); ?>>
100101
<h3 class="h3"><?php esc_html_e( 'Line chart', 'visualizer' ); ?></h3>
101102
<div class="img type-box-line"></div>
102103
<div class="bg"></div>
103104
</label>
104105
</li>
105106
<li>
106107
<label class="vz-chart-option" for="vz-chart-4">
107-
<input type="radio" class="vz-radio-btn" id="vz-chart-4" name="visualizer[wizard_data][chart_type]" value="tabular">
108+
<input type="radio" class="vz-radio-btn" id="vz-chart-4" name="visualizer[wizard_data][chart_type]" value="tabular" <?php echo checked( $chart_type_default, 'tabular', false ); ?>>
108109
<h3 class="h3"><?php esc_html_e( 'Table', 'visualizer' ); ?></h3>
109110
<div class="img type-box-tabular"></div>
110111
<div class="bg"></div>

0 commit comments

Comments
 (0)