From 3ecde23e51a4c6274eabdee44143584830983e3e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 22 Feb 2022 14:52:01 +0100
Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9D=20Add=20API=20overview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/docs/api.mdx          | 130 ++++++++++++++++++++++++++++++++
 apps/docs/src/css/custom.css    |   8 +-
 apps/docs/src/js/api-helpers.js |  53 +++++++++++++
 3 files changed, 187 insertions(+), 4 deletions(-)
 create mode 100644 apps/docs/docs/api.mdx
 create mode 100644 apps/docs/src/js/api-helpers.js

diff --git a/apps/docs/docs/api.mdx b/apps/docs/docs/api.mdx
new file mode 100644
index 00000000000..85bff8e0121
--- /dev/null
+++ b/apps/docs/docs/api.mdx
@@ -0,0 +1,130 @@
+import { Required, Optional, Tag } from '../src/js/api-helpers.js'
+
+# API documentation
+
+Each request must be authenticated with an API key using the Bearer Token method. You can obtain an API key for your account by going to your user settings page https://app.typebot.io/account.
+
+The API is a work in progress. The current version is dedicated to Automation services that wish to implement a native Typebot integration.
+
+## Endpoints
+
+### <Tag color="green">GET</Tag> /api/users/me
+
+Get authenticated user information:
+
+```bash title="Try it yourself"
+curl -i -X GET https://typebot.io/api/users/me \
+  -H 'Authorization: Bearer ${TOKEN}'
+```
+
+```json title="Response 200 OK"
+{ "id": "userid", "email": "user@email.com" }
+```
+
+### <Tag color="green">GET</Tag> /api/typebots
+
+List user's typebots:
+
+```bash title="Try it yourself"
+curl -i -X GET https://typebot.io/api/typebots \
+  -H 'Authorization: Bearer ${TOKEN}'
+```
+
+```json title="Response 200 OK"
+{
+  "typebots": [
+    {
+      "name": "My typebot 1",
+      "id": "typebot1"
+    },
+    {
+      "name": "My typebot 2",
+      "id": "typebot2"
+    }
+  ]
+}
+```
+
+### <Tag color="green">GET</Tag> /api/typebots/<Tag>typebotId</Tag>/webhookSteps
+
+List webhook steps in a typebot. These are the steps you can, later on, register your Webhook URL:
+
+```bash title="Try it yourself"
+curl -i -X GET https://typebot.io/api/typebots/$TYPEBOT_ID/webhookSteps \
+  -H 'Authorization: Bearer ${TOKEN}'
+```
+
+```json title="Response 200 OK"
+{
+  "steps": [
+    {
+      "blockId": "blockId",
+      "id": "stepId",
+      "name": "Block #2 > stepId"
+    }
+  ]
+}
+```
+
+### <Tag color="green">GET</Tag> /api/typebots/<Tag>typebotId</Tag>/blocks/<Tag>blockId</Tag>/steps/<Tag>stepId</Tag>/sampleResult
+
+Get a sample of what the webhook body will look like when triggered
+
+```bash title="Try it yourself"
+curl -i -X GET https://typebot.io/api/typebots/$TYPEBOT_ID/blocks/$BLOCK_ID/steps/$STEP_ID/sampleResult \
+  -H 'Authorization: Bearer ${TOKEN}'
+```
+
+```json title="Response 200 OK"
+{
+  "steps": [
+    {
+      "blockId": "blockId",
+      "id": "stepId",
+      "name": "Block #2 > stepId"
+    }
+  ]
+}
+```
+
+### <Tag color="orange">POST</Tag> /api/typebots/<Tag>typebotId</Tag>/blocks/<Tag>blockId</Tag>/steps/<Tag>stepId</Tag>/subscribeWebhook
+
+Subscribe the step to a specified webhook URL
+
+```bash title="Try it yourself"
+curl -i -X POST https://typebot.io/api/typebots/$TYPEBOT_ID/webhookSteps \
+  -H 'Authorization: Bearer ${TOKEN}'\
+  --header 'Content-Type: application/json' \
+  --data '{"url": "https://domain.com/my-webhook"}'
+```
+
+```json title="Response 200 OK"
+{
+  "message": "success"
+}
+```
+
+#### JSON body data
+
+<hr />
+
+**url** <Required />
+
+The url you want to subscribe to.
+
+<hr />
+
+### <Tag color="orange">POST</Tag> /api/typebots/<Tag>typebotId</Tag>/blocks/<Tag>blockId</Tag>/steps/<Tag>stepId</Tag>/unsubscribeWebhook
+
+Unsubscribe the current webhook on step
+
+```bash title="Try it yourself"
+curl -i -X POST https://typebot.io/api/typebots/$TYPEBOT_ID/webhookSteps \
+  -H 'Authorization: Bearer ${TOKEN}'\
+```
+
+```json title="Response 200 OK"
+{
+  "message": "success"
+}
+```
diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css
index 120d03c44d6..2be233c7c4d 100644
--- a/apps/docs/src/css/custom.css
+++ b/apps/docs/src/css/custom.css
@@ -5,17 +5,17 @@
  * work well for content-centric websites.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap');
 
 body {
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
 }
 
 h1,
 h2,
 h3,
 h4 {
-  font-family: "Epilogue", sans-serif;
+  font-family: 'Outfit', sans-serif;
 }
 
 img {
@@ -40,6 +40,6 @@ img {
   padding: 0 var(--ifm-pre-padding);
 }
 
-html[data-theme="dark"] .docusaurus-highlight-code-line {
+html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
diff --git a/apps/docs/src/js/api-helpers.js b/apps/docs/src/js/api-helpers.js
new file mode 100644
index 00000000000..298ddc3c643
--- /dev/null
+++ b/apps/docs/src/js/api-helpers.js
@@ -0,0 +1,53 @@
+// Taken from https://github.com/plausible/docs/blob/master/src/js/api-helpers.js 💙
+import React from 'react'
+
+export const Required = () => (
+  <span
+    style={{
+      color: '#ff8e20',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    REQUIRED
+  </span>
+)
+
+export const Optional = () => (
+  <span
+    style={{
+      color: '#718096',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    optional
+  </span>
+)
+
+export const Tag = ({ children, color }) => {
+  let backgroundColor = '#CBD5E0'
+  switch (color) {
+    case 'green':
+      backgroundColor = '#68D391'
+      break
+    case 'orange':
+      backgroundColor = '#ffa54c'
+      break
+  }
+  return (
+    <span
+      style={{
+        backgroundColor,
+        borderRadius: '5px',
+        padding: '0px 5px',
+      }}
+    >
+      {children}
+    </span>
+  )
+}