Merge pull request #176 from Emilia-Capital/add/purchase-button

Add license-key settings

Author: aristath

assets/css/admin.css

@@ -283,23 +283,53 @@ button.prpl-info-icon {
 .prpl-wrap input.prpl-button-primary,
 .prpl-wrap input.prpl-button-secondary,
 .prpl-wrap button.prpl-button-primary,
-.prpl-wrap button.prpl-button-secondary {
+.prpl-wrap button.prpl-button-secondary,
+.prpl-wrap a.prpl-button-primary,
+.prpl-wrap a.prpl-button-secondary {
 	display: block;
-	margin: 1em 0;
-	padding: 1em;
+	margin: 1rem 0;
+	padding: 0.75rem 1.25rem;
 	color: #fff;
 	text-decoration: none;
 	cursor: pointer;
 	font-size: var(--prpl-font-size-base);
 	background: var(--prpl-color-accent-red);
+	line-height: 1.25;
 	box-shadow: none;
 	border: none;
-	border-radius: var(--prpl-border-radius);
+	border-radius: 6px;
+	transition: all 0.25s ease-in-out;
+	font-weight: 600;
+	text-align: center;
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		height: 100%;
+		background: var(--prpl-color-accent-red);
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: -1;
+		border-radius: 6px;
+		transition: all 0.25s ease-in-out;
+	}
 
 	&:hover,
 	&:focus {
-		text-decoration: underline;
-		box-shadow: 3px 3px 10px var(--prpl-color-accent-red);
+		background: #cf2441;
+
+		&::after {
+			background: #cf2441;
+			box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
+			width: calc(100% + 4px);
+			height: calc(100% + 4px);
+			margin: -2px;
+		}
 	}
 }
 

assets/css/settings-page.css

@@ -222,3 +222,30 @@
 		gap: 3rem;
 	}
 }
+
+.prpl-license-keys-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+
+	.prpl-license-key-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		.prpl-license-status {
+			width: 1rem;
+			height: 1rem;
+
+			svg {
+				width: 1rem;
+				height: 1rem;
+			}
+		}
+	}
+
+	input {
+		width: 20rem;
+		max-width: calc(100% - 2rem);
+	}
+}

assets/js/settings.js

@@ -59,8 +59,12 @@ if ( !! settingsLicenseForm ) {
 
 							// Timeout so the license key is saved.
 							setTimeout( () => {
-								// Reload the page.
-								window.location.reload();
+								// Reload the page and remove `#prpl-popover-subscribe-form-trigger` from the URL.
+								window.location.href =
+									window.location.href.replace(
+										'#prpl-popover-subscribe-form-trigger',
+										''
+									);
 							}, 500 );
 						},
 						failAction: ( apiResponse ) => {
@@ -77,3 +81,9 @@ if ( !! settingsLicenseForm ) {
 			progressPlanner.l10n.subscribing;
 	} );
 }
+
+// Check if the URL has #prpl-popover-subscribe-form-trigger.
+if ( window.location.hash === '#prpl-popover-subscribe-form-trigger' ) {
+	// Show the popover.
+	document.querySelector( '#prpl-popover-subscribe-form-trigger' ).click();
+}

classes/class-base.php

@@ -86,7 +86,9 @@ public function init() {
 		$this->cached['todo'] = new Todo();
 
 		// Post-meta.
-		$this->cached['page_todos'] = new Page_Todos();
+		if ( $this->is_pro_site() ) {
+			$this->cached['page_todos'] = new Page_Todos();
+		}
 
 		\add_filter( 'plugin_action_links_' . plugin_basename( PROGRESS_PLANNER_FILE ), [ $this, 'add_action_links' ] );
 

classes/suggested-tasks/class-remote-tasks.php

@@ -86,6 +86,10 @@ public function get_tasks_to_inject() {
 				}
 			}
 		}
+
+		// If we don't have a valid response, cache an empty array for 5 minutes. This will prevent the API from being called too often.
+		\progress_planner()->get_cache()->set( self::CACHE_KEY, [], 5 * MINUTE_IN_SECONDS );
+
 		return [];
 	}
 

views/admin-page-settings.php

@@ -56,11 +56,11 @@
 			</div>
 		</div>
 
-		<div class="prpl-column" style="display:none;">
+		<div class="prpl-column">
 			<div class="prpl-widget-wrapper">
 				<h2 class="prpl-settings-section-license">
 					<span>
-						<?php \esc_html_e( 'Licenses', 'progress-planner' ); ?>
+						<?php \esc_html_e( 'License', 'progress-planner' ); ?>
 					</span>
 				</h2>
 				<div class="prpl-license-keys-wrapper">
@@ -78,13 +78,24 @@
 					<?php endif ?>
 
 					<div style="<?php echo ( '' === $prpl_free_license_key ) ? 'display: none;' : ''; ?>">
-						<label for="prpl-setting-pro-license-key">
-							<?php \esc_html_e( 'Progress Planner Pro license key', 'progress-planner' ); ?>
-						</label>
 						<?php
 						$prpl_pro_license        = \get_option( 'progress_planner_pro_license_key', '' );
 						$prpl_pro_license_status = \get_option( 'progress_planner_pro_license_status', '' );
 						?>
+						<?php if ( empty( $prpl_pro_license ) || 'valid' !== $prpl_pro_license_status ) : ?>
+							<p>
+								<?php
+								printf(
+									// translators: %s is a link to the Pro page, with the text "Progress Planner Pro".
+									\esc_html__( 'Take part in interactive challenges to solve website problems like broken links and sharpen your skills with in-context mini courses. Upgrade to %s!', 'progress-planner' ),
+									'<a href="https://progressplanner.com/pro/" target="_blank">Progress Planner Pro</a>'
+								);
+								?>
+							</p>
+						<?php endif; ?>
+						<label for="prpl-setting-pro-license-key">
+							<?php \esc_html_e( 'Progress Planner Pro license key', 'progress-planner' ); ?>
+						</label>
 						<div class="prpl-license-key-wrapper">
 							<input
 								id="prpl-setting-pro-license-key"