feat: enhance copyright quick link with upsell description and badge (#…

…4359)
Codeinwp · Jan 27, 2025 · 7f11b02 · 7f11b02
1 parent 13ab187
commit 7f11b02
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx b/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx
@@ -10,7 +10,7 @@ type Props = {
 const Instructions: React.FC<Props> = ({ control }) => {
 	const { params, id } = control;
 	const { options } = params;
-	const { description, quickLinks, builderMigrated, hadOldBuilder } = options;
+	const { description, quickLinks } = options;
 
 	const linkKeys = Object.keys(quickLinks);
 
@@ -48,8 +48,13 @@ const Instructions: React.FC<Props> = ({ control }) => {
 					</span>
 					<ul className="quick-links">
 						{linkKeys.map((settingSlug, index) => {
-							const { label, icon, url } =
-								quickLinks[settingSlug];
+							const {
+								label,
+								icon,
+								url,
+								upsellDescription,
+								badge,
+							} = quickLinks[settingSlug];
 
 							return (
 								<li key={index}>
@@ -66,7 +71,23 @@ const Instructions: React.FC<Props> = ({ control }) => {
 									>
 										<span className={`dashicons ${icon}`} />
 										{label}
+										{url && badge && (
+											<span className="quick-links-badge">
+												{badge}
+											</span>
+										)}
 									</Button>
+									{url && upsellDescription && (
+										<div className="quick-links-upsell">
+											<p className="quick-links-description">
+												<div
+													dangerouslySetInnerHTML={{
+														__html: upsellDescription,
+													}}
+												/>
+											</p>
+										</div>
+									)}
 								</li>
 							);
 						})}

diff --git a/assets/apps/customizer-controls/src/builder/scss/_instructional-section.scss b/assets/apps/customizer-controls/src/builder/scss/_instructional-section.scss
@@ -14,6 +14,27 @@
 	button {
 	  text-decoration: none;
 	}
+
+	.quick-links-badge {
+		text-transform: uppercase;
+		margin-left: 6px;
+		color: #3965e3;
+		background-color: #dee8fc;
+		padding: 2px 6px;
+		border-radius: 5px;
+		font-weight: 600;
+		font-size: 12px;
+	}
+
+	.quick-links-upsell {
+		background-color: #f9fafb;
+		padding: 20px 15px;
+
+		p {
+			margin: 0;
+			color: #4d5562;
+		}
+	}
   }
 
   .quick-links-wrap {

diff --git a/header-footer-grid/Core/Builder/Footer.php b/header-footer-grid/Core/Builder/Footer.php
@@ -54,6 +54,9 @@ public function init() {
 				)
 			)
 		);
+
+		$upgrade_url_copyright = tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'copyright' ), 'query' );
+
 		$this->set_property(
 			'instructions_array',
 			array(
@@ -65,9 +68,16 @@ public function init() {
 				),
 				'quickLinks'  => array(
 					'footer_copyright_content'            => array(
-						'label' => esc_html__( 'Change Copyright', 'neve' ),
-						'icon'  => 'dashicons-nametag',
-						'url'   => $this->has_valid_addons() ? null : tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'copyright' ), 'query' ),
+						'label'             => esc_html__( 'Change Copyright', 'neve' ),
+						'icon'              => 'dashicons-nametag',
+						'url'               => $upgrade_url_copyright,
+						'badge'             => esc_html__( 'Pro', 'neve' ),
+						'upsellDescription' => sprintf(
+							/* translators: %1$s: opening anchor tag, %2$s: closing anchor tag */
+							__( 'The Neve theme free version doesn\'t support copyright edits. Pro unlocks this and more—%1$sexplore%2$s it when you\'re ready!', 'neve' ),
+							'<a href="' . esc_url_raw( $upgrade_url_copyright ) . '" target="_blank" rel="noopener noreferrer">',
+							'</a>'
+						),
 					),
 					'hfg_footer_layout_bottom_background' => array(
 						'label' => esc_html__( 'Change Footer Color', 'neve' ),