chore: add doc link to upsells

Author: HardeepAsrani

classes/Visualizer/Module/Sources.php

@@ -53,7 +53,7 @@ public function __construct( Visualizer_Plugin $plugin ) {
 		parent::__construct( $plugin );
 		$this->_addFilter( Visualizer_Plugin::FILTER_GET_CHART_SERIES, 'filterChartSeries', 1, 2 );
 		$this->_addFilter( Visualizer_Plugin::FILTER_GET_CHART_DATA, 'filterChartData', 1, 2 );
-		$this->_addFilter( 'visualizer_pro_upsell', 'addProUpsell', 10, 2 );
+		$this->_addFilter( 'visualizer_pro_upsell', 'addProUpsell', 10, 3 );
 	}
 
 	/**
@@ -129,7 +129,7 @@ public function filterChartData( $data, $chart_id ) {
 	 *
 	 * @return string The new html code.
 	 */
-	public function addProUpsell( $old, $feature = null ) {
+	public function addProUpsell( $old, $feature = null, string $docs_url = '' ) {
 		$pro_features   = Visualizer_Module::get_features_for_license( 1 );
 		$biz_features   = Visualizer_Module::get_features_for_license( 2 );
 		$return  = '';
@@ -153,7 +153,10 @@ public function addProUpsell( $old, $feature = null ) {
 			$return .= '	<div class="only-pro-container">';
 			$return .= '		<div class="only-pro-inner">';
 			$return .= '			<p>' . $msg . '</p>';
-			$return .= '            <a target="_blank" href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, esc_attr( $feature ) ) . '" title="' . __( 'Upgrade Now', 'visualizer' ) . '">' . __( 'Upgrade Now', 'visualizer' ) . '</a>';
+			if ( ! empty( $docs_url ) ) {
+				$return .= '            <a target="_blank" href="' . esc_url( $docs_url ) . '" class="button button-secondary">' . esc_html__( 'Documentation', 'visualizer' ) . '</a>';
+			}
+			$return .= '            <a target="_blank" href="' . tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, esc_attr( $feature ) ) . '" title="' . __( 'Upgrade Now', 'visualizer' ) . '" class="button button-primary">' . __( 'Upgrade Now', 'visualizer' ) . '</a>';
 			$return .= ' 		</div>';
 			$return .= ' 	</div>';
 			$return .= '</div>';

classes/Visualizer/Render/Layout.php

@@ -616,7 +616,7 @@ private static function _renderPermissions( $args ) {
 					array( 'visualizer-permission', 'visualizer-permission-specific', 'visualizer-permission-edit-specific' )
 				);
 			Visualizer_Render_Sidebar::_renderSectionEnd();
-			echo apply_filters( 'visualizer_pro_upsell', '', 'chart-permissions' );
+			echo apply_filters( 'visualizer_pro_upsell', '', 'chart-permissions', 'https://docs.themeisle.com/article/1280-how-to-customize-permissions' );
 			echo '</div>';
 		Visualizer_Render_Sidebar::_renderGroupEnd();
 	}
@@ -1071,7 +1071,7 @@ class="dashicons dashicons-lock"></span></h2>
 											<input type="button" id="filter-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
 											<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
 										</form>
-										<?php echo apply_filters( 'visualizer_pro_upsell', '', 'import-wp' ); ?>
+										<?php echo apply_filters( 'visualizer_pro_upsell', '', 'import-wp', 'https://docs.themeisle.com/article/1278-how-to-import-data-from-wordpress' ); ?>
 									</div>
 								</div>
 							</li>
@@ -1217,7 +1217,7 @@ class="dashicons dashicons-lock"></span></h2>
 
 									<input type="button" id="db-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
 									<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
-									<?php echo apply_filters( 'visualizer_pro_upsell', '', 'db-query' ); ?>
+									<?php echo apply_filters( 'visualizer_pro_upsell', '', 'db-query', 'https://docs.themeisle.com/article/1279-how-to-import-data-from-a-database' ); ?>
 								</form>
 							</div>
 							</div>

css/frame.css

@@ -1136,10 +1136,11 @@ button#editor-chart-button {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	gap: 12px;
 }
 
 .only-pro-content p {
-	margin: 0 0 15px;
+	margin: 0;
 	font-size: 14px;
 	font-weight: 700;
 }
@@ -1156,9 +1157,6 @@ button#editor-chart-button {
 	border-style: solid;
 	border-radius: 3px;
 }
-.only-pro-content .only-pro-container a {
-	color: #fff !important;
-}
 
 .only-pro-content a:hover {
 	background: #2D419B;