✨ Added Zapier app with pre-built zap templates list (#943)

no issue

- add Zapier app to Apps screen
- use Zapier's zap template embed widget to list our pre-built templates

app/controllers/settings/apps/zapier.js

@@ -0,0 +1,4 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+});

app/router.js

@@ -56,6 +56,7 @@ Router.map(function () {
         this.route('slack', {path: 'slack'});
         this.route('amp', {path: 'amp'});
         this.route('unsplash', {path: 'unsplash'});
+        this.route('zapier', {path: 'zapier'});
     });
 
     this.route('subscribers', function () {

app/routes/settings/apps/zapier.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/styles/layouts/settings.css

@@ -18,6 +18,10 @@
     margin: 0 50px 0 0;
 }
 
+.gh-setting-content--no-action {
+    margin: 0;
+}
+
 .gh-setting-title {
     margin-bottom: 2px;
     font-size: 1.8rem;

app/templates/settings/apps/index.hbs

@@ -77,6 +77,26 @@
                 </article>
                 {{/link-to}}
             </div>
+
+            <div class="apps-grid-cell" data-test-app="zapier">
+                {{#link-to "settings.apps.zapier" data-test-link="zapier"}}
+                <article class="apps-card-app">
+                    <div class="apps-card-left">
+                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:45px;"></figure>
+                        <div class="apps-card-meta">
+                            <h3 class="apps-card-app-title">Zapier</h3>
+                            <p class="apps-card-app-desc">Automation for your favourite apps</p>
+                        </div>
+                    </div>
+                    <div class="gh-card-right">
+                        <div class="apps-configured">
+                            <span data-test-app-status>Configure</span>
+                            {{inline-svg "arrow-right"}}
+                        </div>
+                    </div>
+                </article>
+                {{/link-to}}
+            </div>
         </div>
         <p class="apps-grid-note">(More coming soon!)</p>
     </section>

app/templates/settings/apps/slack.hbs

@@ -32,7 +32,7 @@
         <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
             <div class="gh-setting-header">Slack configuration</div>
             <div class="gh-setting">
-                <div class="gh-setting-content">
+                <div class="gh-setting-content gh-setting-content--no-action">
                     <div class="gh-setting-title">Webhook URL</div>
                     <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
                     <div class="gh-setting-content-extended">

app/templates/settings/apps/zapier.hbs

@@ -0,0 +1,38 @@
+<section class="gh-canvas">
+    <header class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            {{#link-to "settings.apps.index"}}Apps{{/link-to}}
+            <span>{{inline-svg "arrow-right"}}</span>
+            Zapier
+        </h2>
+        <section class="view-actions">
+            {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
+        </section>
+    </header>
+
+    <section class="view-container">
+        <br>
+        <section class="app-grid">
+            <div class="app-cell">
+                <img class="app-icon" src="assets/img/zapiericon.png" />
+            </div>
+            <div class="app-cell">
+                <h3>Zapier</h3>
+                <p>Automation for your favourite apps</p>
+            </div>
+        </section>
+
+        <div class="gh-setting-header">Zapier configuration</div>
+        <div class="gh-setting" id="zapier-toggle">
+            <div class="gh-setting-content gh-setting-content--no-action">
+                <div class="gh-setting-title">Zapier Templates</div>
+                <div class="gh-setting-desc">Explore pre-built templates for common automation tasks</div>
+                <div class="gh-setting-content-extended">
+                    <div id="zapier-templates">
+                        <script src="https://zapier.com/apps/embed/widget.js?services=ghost&container=true&limit=10&html_id=zapier-templates"></script>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</section>