From 94aaa168cd9c785b92e89256d1c7a46edecfe3be Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 5 Oct 2022 15:36:44 +0200
Subject: [PATCH] Added disabled state with CTA for Zapier integration

refs https://github.com/TryGhost/Team/issues/1157
---
 ghost/admin/app/styles/layouts/apps.css       | 16 +++++++++++++
 .../app/templates/settings/integrations.hbs   | 23 +++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css
index 95dd1ddeb5..71eec4adb7 100644
--- a/ghost/admin/app/styles/layouts/apps.css
+++ b/ghost/admin/app/styles/layouts/apps.css
@@ -256,15 +256,31 @@
     opacity: 0.4;
 }
 
+.apps-card-app-disabled .apps-card-app-title-container {
+    display: flex;
+}
+
+.apps-card-app-disabled .apps-card-app-icon {
+    filter:grayscale(1);
+    opacity:0.3;
+}
+
 .apps-card-app-disabled .apps-card-meta svg {
     margin-left: 4px;
     width: 14px;
+    opacity: 0.9;
 }
 
 .apps-card-app-disabled .apps-card-meta path {
     fill: #292d33;
 }
 
+.apps-card-app-disabled .apps-card-app-disabled-cta {
+    color: #30cf43;
+    margin-right: 28px;
+    font-weight: 600;
+}
+
 .apps-card-app-title {
     margin: 0;
     overflow: hidden;
diff --git a/ghost/admin/app/templates/settings/integrations.hbs b/ghost/admin/app/templates/settings/integrations.hbs
index aa5339117f..fd94a20f32 100644
--- a/ghost/admin/app/templates/settings/integrations.hbs
+++ b/ghost/admin/app/templates/settings/integrations.hbs
@@ -69,7 +69,26 @@
     <section class="gh-main-section">
         <h4 class="gh-main-section-header small">Built-in integrations</h4>
         <div class="apps-grid">
-            {{#unless this.zapierDisabled}}
+            {{#if this.zapierDisabled}}
+            <div class="apps-grid-cell" data-test-app="zapier">
+                <LinkTo @route="pro">
+                <article class="apps-card-app apps-card-app-disabled">
+                    <div class="apps-card-left">
+                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/zapier.svg);background-size:36px"></figure>
+                        <div class="apps-card-meta">
+                            <div class="apps-card-app-title-container"><h3 class="apps-card-app-title">Zapier</h3>{{svg-jar "lock-filled"}}</div>
+                            <p class="apps-card-app-desc">Automation for your favorite apps</p>
+                        </div>
+                    </div>
+                    <div class="gh-card-right">
+                        <div class="apps-configured">
+                            <button type="button" class="apps-card-app-disabled-cta">Upgrade</button>
+                        </div>
+                    </div>
+                </article>
+                </LinkTo>
+            </div>
+            {{else}}
             <div class="apps-grid-cell" data-test-app="zapier">
                 <LinkTo @route="settings.integrations.zapier" data-test-link="zapier">
                 <article class="apps-card-app">
@@ -89,7 +108,7 @@
                 </article>
                 </LinkTo>
             </div>
-            {{/unless}}
+            {{/if}}
 
             <div class="apps-grid-cell" data-test-app="slack">
                 <LinkTo @route="settings.integrations.slack" data-test-link="slack">