Feature/zapier frontend (#739)

frontend/src/assets/scss/typography.scss

@@ -2,14 +2,14 @@ html body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
 
 @supports (font-variation-settings: normal) {
   html {
-    font-family: 'Inter var', sans-serif;
+    font-family: "Inter var", sans-serif;
   }
 }
 

frontend/src/integrations/zapier/components/zapier-connect-drawer.vue

@@ -0,0 +1,115 @@
+<template>
+  <app-drawer
+    v-model="isVisible"
+    custom-class="integration-reddit-drawer"
+    title="Zapier"
+    size="600px"
+    pre-title="Integration"
+    :pre-title-img-src="logoUrl"
+    pre-title-img-alt="Zapier logo"
+    @close="isVisible = false"
+  >
+    <template #content>
+      <div class="flex flex-row items-center justify-between w-full">
+        <p class="font-bold text-base">Set up crowd.dev in Zapier</p>
+        <a
+          href="https://docs.crowd.dev/docs/zapier-integration"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn btn--bordered btn--md"
+          ><i class="ri-external-link-line mr-2" />Read our docs</a
+        >
+      </div>
+      <div class="container mx-auto px-4 py-10">
+        <ul class="list-none space-y-4">
+          <li class="flex items-start">
+            <span
+              class="flex-none w-8 h-8 flex justify-center items-center rounded-full bg-gray-300 text-white font-bold"
+              >1</span
+            >
+            <p class="ml-4 text-gray-900">
+              Navigate to Settings >
+              <a
+                href="/settings?activeTab=api-keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline underline-offset-4"
+                >API Keys</a
+              >
+              and get your workspace <b>Tenant ID</b> and <b>Auth token</b>
+            </p>
+          </li>
+          <li class="flex items-start">
+            <span
+              class="flex-none w-8 h-8 flex justify-center items-center rounded-full bg-gray-300 text-white font-bold"
+              >2</span
+            >
+            <p class="ml-4 text-gray-900">
+              Go to
+              <a
+                href="https://zapier.com/developer/public-invite/180721/f94ad64f963359cd888fa22610c31875/"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline underline-offset-4"
+                >Zapier</a
+              >
+              and connect your crowd.dev account using your workspace API Keys
+            </p>
+          </li>
+          <li class="flex items-center">
+            <span
+              class="flex-none w-8 h-8 flex justify-center items-center rounded-full bg-gray-300 text-white font-bold"
+              >3</span
+            >
+            <p class="ml-4 text-gray-900">
+              Configure your Zaps using our
+              <a
+                href="https://docs.crowd.dev/docs/zapier-integration#supported-triggers"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline underline-offset-4"
+                >supported triggers and actions</a
+              >
+            </p>
+          </li>
+        </ul>
+        <!-- <a
+          class="btn btn--md btn--primary mt-4 ml-12"
+          href=""
+          >Explore our Zap templates</a
+        > -->
+      </div>
+    </template>
+  </app-drawer>
+</template>
+
+<script setup>
+import { computed, defineEmits, defineProps } from "vue";
+import { CrowdIntegrations } from "@/integrations/integrations-config";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const logoUrl = CrowdIntegrations.getConfig("zapier").image;
+
+const isVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    return emit("update:modelValue", value);
+  },
+});
+</script>
+
+<script>
+export default {
+  name: "AppZapierConnectDrawer",
+};
+</script>

frontend/src/integrations/zapier/components/zapier-connect.vue

@@ -0,0 +1,20 @@
+<template>
+  <slot :connect="connect" />
+  <app-zapier-connect-drawer v-model="drawerVisible" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import AppZapierConnectDrawer from "@/integrations/zapier/components/zapier-connect-drawer.vue";
+
+const drawerVisible = ref(false);
+const connect = () => {
+  drawerVisible.value = true;
+};
+</script>
+
+<script>
+export default {
+  name: "AppZapierConnect",
+};
+</script>

frontend/src/integrations/zapier/config.js

@@ -1,10 +1,13 @@
+import ZapierConnect from "./components/zapier-connect.vue";
+
 export default {
-  enabled: false,
-  name: 'Zapier',
-  backgroundColor: '#FFFFFF',
-  borderColor: '#FFFFFF',
+  enabled: true,
+  name: "Zapier",
+  backgroundColor: "#FFFFFF",
+  borderColor: "#FFFFFF",
   description:
-    "We're currently working on this integration.",
+    "Enable the communication between crowd.dev and Zapier to automate workflows and tasks.",
   image:
-    'https://www.seekpng.com/png/full/67-672759_zapiers-new-cli-tool-for-creating-apps-zapier.png',
+    "https://www.seekpng.com/png/full/67-672759_zapiers-new-cli-tool-for-creating-apps-zapier.png",
+  connectComponent: ZapierConnect,
 };

frontend/src/modules/integration/components/integration-list-item.vue

@@ -1,28 +1,13 @@
 <template>
   <div class="s panel" :class="computedClass">
     <div class="flex items-center justify-between">
-      <img
-        :alt="integration.name"
-        :src="integration.image"
-        class="h-6 mb-4"
-      />
-      <span
-        v-if="isDone"
-        class="badge badge--green"
-      >Connected</span>
-      <div
-        v-else-if="isError"
-        class="text-red-500 flex items-center text-sm"
-      >
-        <i class="ri-error-warning-line mr-1" /> Failed to
-        connect
+      <img :alt="integration.name" :src="integration.image" class="h-6 mb-4" />
+      <span v-if="isDone" class="badge badge--green">Connected</span>
+      <div v-else-if="isError" class="text-red-500 flex items-center text-sm">
+        <i class="ri-error-warning-line mr-1" /> Failed to connect
       </div>
-      <div
-        v-else-if="isNoData"
-        class="text-red-500 flex items-center text-sm"
-      >
-        <i class="ri-error-warning-line mr-1" /> Not
-        receiving activities
+      <div v-else-if="isNoData" class="text-red-500 flex items-center text-sm">
+        <i class="ri-error-warning-line mr-1" /> Not receiving activities
       </div>
       <div
         v-else-if="isWaitingForAction"
@@ -34,13 +19,9 @@
         v-else-if="isWaitingApproval"
         class="text-gray-500 flex items-center text-sm"
       >
-        <i class="ri-time-line mr-1" /> Waiting for
-        approval
+        <i class="ri-time-line mr-1" /> Waiting for approval
       </div>
-      <div
-        v-else-if="isConnected"
-        class="flex items-center"
-      >
+      <div v-else-if="isConnected" class="flex items-center">
         <div
           v-loading="true"
           class="app-page-spinner !relative h-4 !w-4 mr-2 !min-h-fit"
@@ -57,13 +38,10 @@
     </div>
     <div>
       <div class="flex mb-2">
-        <span class="block font-semibold">{{
-          integration.name
+        <span class="block font-semibold">{{ integration.name }}</span>
+        <span v-if="integration.premium" class="text-2xs text-brand-500 ml-1">{{
+          FeatureFlag.premiumFeatureCopy()
         }}</span>
-        <span
-          v-if="integration.premium"
-          class="text-2xs text-brand-500 ml-1"
-        >{{ FeatureFlag.premiumFeatureCopy() }}</span>
       </div>
       <span class="block mb-6 text-xs text-gray-500">{{
         integration.description
@@ -85,10 +63,11 @@
               @click="connect"
             >
               {{
-                integration.premium === true
-                  && !hasIntegration
-                  ? 'Upgrade Plan'
-                  : 'Connect'
+                integration.premium === true && !hasIntegration
+                  ? "Upgrade Plan"
+                  : integration.platform === "zapier"
+                  ? "Learn how to connect"
+                  : "Connect"
               }}
             </el-button>
             <el-button
@@ -114,10 +93,10 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex';
-import { defineProps, computed, ref } from 'vue';
-import { FeatureFlag } from '@/featureFlag';
-import AppIntegrationConnect from '@/modules/integration/components/integration-connect.vue';
+import { useStore } from "vuex";
+import { defineProps, computed, ref } from "vue";
+import { FeatureFlag } from "@/featureFlag";
+import AppIntegrationConnect from "@/modules/integration/components/integration-connect.vue";
 
 const store = useStore();
 const props = defineProps({
@@ -128,37 +107,37 @@ const props = defineProps({
 });
 
 const computedClass = computed(() => ({
-  'integration-custom':
-      props.integration.platform === 'custom',
+  "integration-custom": props.integration.platform === "custom",
 }));
 
 const isConnected = computed(() => props.integration.status !== undefined);
 
-const isDone = computed(() => props.integration.status === 'done');
+const isDone = computed(() => props.integration.status === "done");
 
-const isError = computed(() => props.integration.status === 'error');
+const isError = computed(() => props.integration.status === "error");
 
-const isNoData = computed(() => props.integration.status === 'no-data');
+const isNoData = computed(() => props.integration.status === "no-data");
 
-const isWaitingForAction = computed(() => props.integration.status === 'pending-action');
+const isWaitingForAction = computed(
+  () => props.integration.status === "pending-action"
+);
 
-const isWaitingApproval = computed(() => props.integration.status === 'waiting-approval');
+const isWaitingApproval = computed(
+  () => props.integration.status === "waiting-approval"
+);
 
 const loadingDisconnect = ref(false);
 
 const handleDisconnect = async () => {
   loadingDisconnect.value = true;
-  await store.dispatch(
-    'integration/doDestroy',
-    props.integration.id,
-  );
+  await store.dispatch("integration/doDestroy", props.integration.id);
   loadingDisconnect.value = false;
 };
 </script>
 
 <script>
 export default {
-  name: 'AppIntegrationListItem',
+  name: "AppIntegrationListItem",
 };
 </script>