feat: Integrate Zapier App Directory

app/scenes/Settings/Zapier.tsx

@@ -1,32 +1,49 @@
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import Button from "~/components/Button";
+import { Helmet } from "react-helmet";
+import { Trans } from "react-i18next";
 import Heading from "~/components/Heading";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import ZapierIcon from "~/components/ZapierIcon";
+import useStores from "~/hooks/useStores";
 
 function Zapier() {
-  const { t } = useTranslation();
+  const { ui } = useStores();
+  const { resolvedTheme } = ui;
+
   return (
     <Scene title="Zapier" icon={<ZapierIcon color="currentColor" />}>
       <Heading>Zapier</Heading>
+      <Helmet>
+        <script
+          type="module"
+          src="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.esm.js"
+          key="zapier-js"
+        ></script>
+        <link
+          rel="stylesheet"
+          href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"
+          key="zapier-styles"
+        />
+      </Helmet>
       <Text type="secondary">
         <Trans>
           Zapier is a platform that allows Outline to easily integrate with
-          thousands of other business tools. Head over to Zapier to setup a
-          "Zap" and start programmatically interacting with Outline.'
+          thousands of other business tools. Automate your workflows, sync data,
+          and more.
         </Trans>
       </Text>
-      <p>
-        <Button
-          onClick={() =>
-            (window.location.href = "https://zapier.com/apps/outline")
-          }
-        >
-          {t("Open Zapier")} →
-        </Button>
-      </p>
+      <br />
+      <zapier-app-directory
+        app="outline"
+        link-target="new-tab"
+        theme={resolvedTheme}
+        hide="notion,confluence-cloud,confluence,google-docs,slack"
+        applimit={6}
+        introcopy="hide"
+        create-without-template="show"
+        use-this-zap="show"
+      />
     </Scene>
   );
 }

app/typings/index.d.ts

@@ -10,3 +10,9 @@ declare module "*.png" {
   const value: any;
   export = value;
 }
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    "zapier-app-directory": any;
+  }
+}

server/services/web.ts

@@ -23,6 +23,7 @@ const scriptSrc = [
   "'unsafe-inline'",
   "'unsafe-eval'",
   "gist.github.com",
+  "cdn.zapier.com",
 ];
 
 if (env.GOOGLE_ANALYTICS_ID) {
@@ -107,7 +108,12 @@ export default function init(app: Koa = new Koa()): Koa {
       directives: {
         defaultSrc,
         scriptSrc,
-        styleSrc: ["'self'", "'unsafe-inline'", "github.githubassets.com"],
+        styleSrc: [
+          "'self'",
+          "'unsafe-inline'",
+          "github.githubassets.com",
+          "cdn.zapier.com",
+        ],
         imgSrc: ["*", "data:", "blob:"],
         frameSrc: ["*", "data:"],
         connectSrc: ["*"], // Do not use connect-src: because self + websockets does not work in

shared/i18n/locales/en_US/translation.json

@@ -779,8 +779,7 @@
   "New webhook": "New webhook",
   "Webhooks can be used to notify your application when events happen in Outline. Events are sent as a https request with a JSON payload in near real-time.": "Webhooks can be used to notify your application when events happen in Outline. Events are sent as a https request with a JSON payload in near real-time.",
   "Create a webhook": "Create a webhook",
-  "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Head over to Zapier to setup a \"Zap\" and start programmatically interacting with Outline.'": "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Head over to Zapier to setup a \"Zap\" and start programmatically interacting with Outline.'",
-  "Open Zapier": "Open Zapier",
+  "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.": "Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.",
   "Your are creating a new workspace using your current account — <em>{{email}}</em>": "Your are creating a new workspace using your current account — <em>{{email}}</em>",
   "Workspace name": "Workspace name",
   "When your new workspace is created, you will be the admin, meaning you will have the highest level of permissions and the ability to invite others.": "When your new workspace is created, you will be the admin, meaning you will have the highest level of permissions and the ability to invite others.",