From 941b6417ad38761a7bff97ac31c33522db9f4f76 Mon Sep 17 00:00:00 2001
From: lena-larionova <54370747+lena-larionova@users.noreply.github.com>
Date: Thu, 11 Jul 2024 10:50:33 -0700
Subject: [PATCH] chore: Move the plugins CTA into sidebar (#7630)

* move the plugins CTA into sidebar

* update spec

* fix plugin name slug

* fix nesting
---
 app/_assets/stylesheets/sidebar.less        | 28 +++++++++++++++++++++
 app/_includes/plugins/sidebar.html          |  8 ++++++
 app/_layouts/extension.html                 | 13 ----------
 spec/templates/plugin_with_versions_spec.rb |  6 ++---
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/app/_assets/stylesheets/sidebar.less b/app/_assets/stylesheets/sidebar.less
index 213c5a9fcd23..920dac3408d9 100644
--- a/app/_assets/stylesheets/sidebar.less
+++ b/app/_assets/stylesheets/sidebar.less
@@ -228,3 +228,31 @@
     }
   }
 }
+
+.sidebar-button {
+  flex-shrink: 0;
+  height: auto;
+  padding: 8px 16px;
+  border: 1px solid #1155cb;
+  background: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-family: Roboto;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  color: #1155cb;
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.sidebar-button#konnect-cta {
+  margin-top: 20px;
+  &:hover {
+    background-color: #1155cb;
+    border-color: #fff;
+    color: #fff;
+  }
+}
\ No newline at end of file
diff --git a/app/_includes/plugins/sidebar.html b/app/_includes/plugins/sidebar.html
index 628046205247..860050bccf08 100644
--- a/app/_includes/plugins/sidebar.html
+++ b/app/_includes/plugins/sidebar.html
@@ -13,5 +13,13 @@
     {% for item in include.sidenav.nav_items %}
       {% include_cached sidebar/item.html item=item id=forloop.index %}
     {% endfor %}
+    {% if page.extn_publisher == "kong-inc" %}
+      <li>
+        <a id="konnect-cta" href="https://konghq.com/products/kong-konnect/register?utm_medium=referral&utm_source=docs&utm_campaign=gateway-konnect&utm_content={{ page.extn_slug }}" class="sidebar-button" target="_blank">
+          Try it in {{site.konnect_short_name}}
+        </a>
+      </li>
+    {% endif %}
   </ul>
+
 </aside>
diff --git a/app/_layouts/extension.html b/app/_layouts/extension.html
index 397f1f1e352f..298d8e3b63b5 100644
--- a/app/_layouts/extension.html
+++ b/app/_layouts/extension.html
@@ -13,19 +13,6 @@
 </blockquote>
 {% endunless %}
 
-{% unless page.free %}
-  {% if page.extn_publisher == "kong-inc" %}
-    {% if page.paid or page.premium %}
-      <blockquote class="note" role="alert">
-        <p>
-          Did you know that you can try this plugin without talking to anyone for just {% if page.paid %}{{ site.pricing.konnect.paid_plugin }}{% else %}{{ site.pricing.konnect.premium_plugin }}{% endif %}/month with Kong Konnect? <a href="https://konghq.com/products/kong-konnect/register?utm_medium=referral&utm_source=docs&utm_campaign=gateway-konnect&utm_content={{ extn_slug }}">Get started in under 5 minutes</a>.
-        </p>
-      </blockquote>
-    {% endif %}
-  {% endif %}
-{% endunless %}
-
-
 {% unless page.extn_publisher == "kong-inc" %}
     {% if page.techpartner %}
       <blockquote class="partner-plugin no-icon">
diff --git a/spec/templates/plugin_with_versions_spec.rb b/spec/templates/plugin_with_versions_spec.rb
index 9cbd06cec56e..55edb49afb49 100644
--- a/spec/templates/plugin_with_versions_spec.rb
+++ b/spec/templates/plugin_with_versions_spec.rb
@@ -54,10 +54,8 @@
       expect(nested_how_tos).to have_css('.sidebar-item', text: 'Nested Tutorial Nav title with Min and Max')
     end
 
-    context 'plugins that are `paid` or `premium`' do
-      it 'renders a banner for using the plugins in Konnect' do
-        expect(html).to have_css('blockquote', text: 'Did you know that you can try this plugin without talking to anyone')
-      end
+    it 'renders a Konnect CTA button' do
+      expect(html).to have_css('.sidebar-button', text: 'Try it in Konnect')
     end
   end
 end