feat: Add integration guides for Zapier apps

nepflow · Feb 25, 2024 · 0f8b862 · 0f8b862
1 parent cd99418
commit 0f8b862
Show file tree

Hide file tree

Showing 70 changed files with 1,100 additions and 383 deletions.
diff --git a/web/.env b/web/.env
@@ -1,2 +1,2 @@
 # API Base URL
-VITE_REACT_APP_API_BASE_URL=https://api.nepflow.dev
+VITE_REACT_APP_API_BASE_URL=https://api.nepflow.dev/v1
diff --git a/web/.env.development b/web/.env.development
@@ -1,2 +1,2 @@
 # API Base URL
-VITE_REACT_APP_API_BASE_URL=http://localhost:5690
+VITE_REACT_APP_API_BASE_URL=http://localhost:5690/v1
diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
@@ -5,7 +5,8 @@ module.exports = {
     },
     "extends": [
         "standard-with-typescript",
-        "plugin:react/recommended"
+        "plugin:react/recommended",
+        "plugin:css-modules/recommended"
     ],
     "overrides": [
         {
@@ -25,7 +26,8 @@ module.exports = {
         "sourceType": "module"
     },
     "plugins": [
-        "react"
+        "react",
+        "css-modules"
     ],
     "rules": {
         "react/react-in-jsx-scope": "off",

diff --git a/web/index.html b/web/index.html
@@ -4,13 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nepflow Integration Widget</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
@@ -30,6 +30,7 @@
     "babel-preset-es2015": "^6.24.1",
     "eslint": "^8.0.1",
     "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
     "eslint-plugin-promise": "^6.0.0",

diff --git a/web/public/icons/chevronRight.svg b/web/public/icons/chevronRight.svg
diff --git a/web/public/zapierAccountClick.png b/web/public/zapierAccountClick.png
diff --git a/web/public/zapierActionDetails.png b/web/public/zapierActionDetails.png
diff --git a/web/public/zapierTriggerDetails.png b/web/public/zapierTriggerDetails.png
diff --git a/web/public/zapierTriggerTest.png b/web/public/zapierTriggerTest.png
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,16 +1,28 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import Root from './routes/root'
 import Catalog from './routes/catalog'
-import Guide from './routes/guide'
+import Service from './routes/service'
+import Methods from './routes/service/methods'
+import AutoGeneratedGuide from './routes/service/autoGeneratedGuide'
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <Root />,
     children: [
       {
-        path: '/:rootServiceId/guide/:serviceId',
-        element: <Guide />
+        path: '/:rootServiceId/service/:serviceId',
+        element: <Service />,
+        children: [
+          {
+            path: '/:rootServiceId/service/:serviceId/guide/auto',
+            element: <AutoGeneratedGuide />
+          },
+          {
+            path: '/:rootServiceId/service/:serviceId/',
+            element: <Methods />
+          }
+        ]
       },
       {
         path: '/:rootServiceId',

diff --git a/web/src/clients/api/queries/getGuide.ts b/web/src/clients/api/queries/getGuide.ts
@@ -2,10 +2,11 @@ import apiClient from '..'
 import { appHost } from '../../../globals'
 import { type IntegrationGuide } from '../../../models/integrationGuide'
 
-async function getGuide (serviceId: string, secondServiceId: string, triggerId: string, actionId: string): Promise<IntegrationGuide> {
+async function getGuide (serviceId: string, secondServiceId: string, triggerId: string, actionId: string, guidedRecipeId?: string): Promise<IntegrationGuide> {
   const res = await apiClient.get(`/services/${serviceId}/guide/${secondServiceId}/triggers/${triggerId}/actions/${actionId}`, {
     params: {
-      appHost
+      appHost,
+      guidedRecipeId
     }
   })
   const result = await res.data

diff --git a/web/src/clients/api/queries/getRecommendations.ts b/web/src/clients/api/queries/getRecommendations.ts
@@ -0,0 +1,16 @@
+import apiClient from '..'
+import { type Recommendation } from '../../../models/recommendation'
+
+async function getRecommendations (serviceKey: string, secondServiceKey: string): Promise<Recommendation[]> {
+  const res = await apiClient.get('/services/recommendations', {
+    params: {
+      serviceKey,
+      secondServiceKey
+    }
+  })
+  const result = await res.data
+
+  return result.recommendations
+}
+
+export default getRecommendations
diff --git a/web/src/clients/api/queries/getService.ts b/web/src/clients/api/queries/getService.ts
@@ -2,10 +2,11 @@ import apiClient from '..'
 import { appHost } from '../../../globals'
 import { type Service } from '../../../models/service'
 
-async function getService (key: string): Promise<Service> {
+async function getService (key: string, secondServiceKey?: string): Promise<Service> {
   const res = await apiClient.get(`/services/${key}`, {
     params: {
-      appHost
+      appHost,
+      secondServiceKey
     }
   })
   const result = await res.data

diff --git a/web/src/clients/api/queries/getServices.ts b/web/src/clients/api/queries/getServices.ts
@@ -2,9 +2,10 @@ import apiClient from '..'
 import { appHost } from '../../../globals'
 import { type Service } from '../../../models/service'
 
-async function getServices (search: string = '', skip: number = 0, take: number = 60): Promise<Service[]> {
+async function getServices (fromServiceKey?: string, search: string = '', skip: number = 0, take: number = 60): Promise<Service[]> {
   const res = await apiClient.get('/services', {
     params: {
+      fromServiceKey,
       appHost,
       skip,
       search,

diff --git a/web/src/components/BackButton/BackButton.tsx b/web/src/components/BackButton/BackButton.tsx
@@ -0,0 +1,19 @@
+import Icon from '../Icon/Icon'
+import styles from './backButton.module.css'
+
+interface Props {
+  onClick: () => void
+}
+
+function BackButton ({ onClick }: Props) {
+  return (
+    <div
+      className={styles.backButton}
+      onClick={onClick}
+    >
+      <Icon icon='arrowLeft' className={styles.backButtonIcon} size={18} />
+    </div>
+  )
+}
+
+export default BackButton
diff --git a/web/src/components/BackButton/backButton.module.css b/web/src/components/BackButton/backButton.module.css
@@ -0,0 +1,20 @@
+.backButton {
+  float: left;
+
+  text-align: center;
+  margin-right: 22px;
+
+  width: 36px;
+  height: 36px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+
+  cursor: pointer;
+}
+.backButtonIcon {
+  opacity: 0.4;
+  margin: 9px auto 0;
+}
+.backButton:hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}
diff --git a/web/src/components/BackButton/index.ts b/web/src/components/BackButton/index.ts
@@ -0,0 +1,3 @@
+import BackButton from './BackButton'
+
+export default BackButton
diff --git a/web/src/components/Breadcrumbs/Breadcrumbs.tsx b/web/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,41 @@
+import Icon from '../Icon/Icon'
+import styles from './breadcrumbs.module.css'
+import { Link } from 'react-router-dom'
+
+interface Item { title: string, path?: string }
+
+interface Props {
+  items: Array<Item | undefined>
+}
+
+function Breadcrumbs ({ items }: Props) {
+  const filteredItems = items.filter(i => !!i) as Item[]
+
+  return (
+    <div
+      className={styles.breadcrumbs}
+    >
+      {filteredItems.map((item, i) => (
+        <div key={i.toString()} className={styles.breadcrumbsItem}>
+          {item.path
+            ? (
+            <Link to={item.path}>
+              {item.title}
+            </Link>
+              )
+            : (
+            <span>
+              {item.title}
+            </span>
+              )}
+
+          {i < filteredItems.length - 1 && (
+            <Icon icon='chevronRight' className={styles.breadcrumbsItemSeparator} size={16} />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Breadcrumbs
diff --git a/web/src/components/Breadcrumbs/breadcrumbs.module.css b/web/src/components/Breadcrumbs/breadcrumbs.module.css
@@ -0,0 +1,26 @@
+.breadcrumbs {
+  font-size: 14px;
+  line-height: 14px;
+  color: #777;
+  cursor: default;
+}
+
+.breadcrumbsItem {
+  display: inline-block;
+  margin-right: 8px;
+  line-height: 14px;
+}
+.breadcrumbsItem a {
+  color: #555;
+}
+.breadcrumbsItem a:hover {
+  color: #333;
+}
+
+.breadcrumbsItemSeparator {
+  display: inline-block;
+  margin-left: 8px;
+  line-height: 14px;
+  opacity: 0.5;
+  margin-top: 0;
+}
diff --git a/web/src/components/Breadcrumbs/index.ts b/web/src/components/Breadcrumbs/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumbs from './Breadcrumbs'
+
+export default Breadcrumbs
diff --git a/web/src/components/Button/index.ts b/web/src/components/Button/index.ts
@@ -0,0 +1,3 @@
+import Button from './Button'
+
+export default Button
diff --git a/web/src/components/Card/Card.tsx b/web/src/components/Card/Card.tsx
@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react'
+import styles from './card.module.css'
+
+interface Props {
+  className: string | string[]
+  children?: ReactNode
+  onClick?: () => void
+}
+
+function Card ({ className, children, onClick }: Props) {
+  let finalClassName = [styles.card]
+  if (Array.isArray(className)) {
+    finalClassName = [
+      ...finalClassName,
+      ...className
+    ]
+  } else {
+    finalClassName.push(className)
+  }
+
+  return (
+    <div onClick={onClick} className={finalClassName.join(' ')}>{children}</div>
+  )
+}
+
+export default Card
diff --git a/web/src/components/Card/card.module.css b/web/src/components/Card/card.module.css
@@ -0,0 +1,7 @@
+.card {
+  width: 100%;
+  background-color: var(--card-color);
+  border: solid 1px var(--card-border-color);
+  border-radius: 12px;
+  color: #000;
+}
diff --git a/web/src/components/Card/index.ts b/web/src/components/Card/index.ts
@@ -0,0 +1,3 @@
+import Card from './Card'
+
+export default Card
diff --git a/...s/FullScreanLoading/FullScreenLoading.tsx → ...s/FullScreenLoading/FullScreenLoading.tsx b/...s/FullScreanLoading/FullScreenLoading.tsx → ...s/FullScreenLoading/FullScreenLoading.tsx
diff --git a/...creanLoading/fullScreenLoading.module.css → ...creenLoading/fullScreenLoading.module.css b/...creanLoading/fullScreenLoading.module.css → ...creenLoading/fullScreenLoading.module.css
diff --git a/web/src/components/FullScreenLoading/index.ts b/web/src/components/FullScreenLoading/index.ts
@@ -0,0 +1,3 @@
+import FullScreenLoading from './FullScreenLoading'
+
+export default FullScreenLoading
diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
@@ -0,0 +1,19 @@
+import styles from './header.module.css'
+import BackButton from '../BackButton'
+
+interface Props {
+  title?: string
+  onBackClick: () => void
+}
+
+function Header ({ title, onBackClick }: Props) {
+  return (
+    <div className={styles.header}>
+      <BackButton onClick={onBackClick} />
+
+      <div className={styles.headerTitle}>{title}</div>
+    </div>
+  )
+}
+
+export default Header
diff --git a/web/src/components/Header/header.module.css b/web/src/components/Header/header.module.css
@@ -0,0 +1,9 @@
+.header {
+  margin: 20px 0 30px;
+}
+
+.headerTitle {
+  font-size: 24px;
+  line-height: 38px;
+  font-weight: 600;
+}
diff --git a/web/src/components/Header/index.ts b/web/src/components/Header/index.ts
@@ -0,0 +1,3 @@
+import Header from './Header'
+
+export default Header
diff --git a/web/src/components/Icon/Icon.tsx b/web/src/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import styles from './icon.module.css'
 
-export type IconKey = 'loading' | 'search' | 'arrowLeft' | 'arrowRightCircle'
+export type IconKey = 'loading' | 'search' | 'arrowLeft' | 'arrowRightCircle' | 'chevronRight'
 
 interface Props {
   icon: IconKey

diff --git a/web/src/components/Icon/index.ts b/web/src/components/Icon/index.ts
@@ -0,0 +1,3 @@
+import Icon from './Icon'
+
+export default Icon