Merge pull request #241 from RBND-studio/dev

Merge dev

.github/workflows/deploy-prod.yml

@@ -40,10 +40,10 @@ jobs:
           echo BACKEND_APP_URL=${{ secrets.BACKEND_APP_URL }} >> .env
           echo BACKEND_CAPTCHA_SECRET=${{ secrets.BACKEND_CAPTCHA_SECRET }} >> .env
           echo BACKEND_SLACK_WEBHOOK_URL=${{ secrets.BACKEND_SLACK_WEBHOOK_URL }} >> .env
-          echo BACKEND_SLACK_ISSUES_WEBHOOK_URL=${{ secrets.BACKEND_SLACK_ISSUES_WEBHOOK_URL }} >> .env
           echo BACKEND_LEMONSQUEEZY_WEBHOOK_SECRET=${{ secrets.BACKEND_LEMONSQUEEZY_WEBHOOK_SECRET }} >> .env
           echo BACKEND_LEMONSQUEEZY_API_KEY=${{ secrets.BACKEND_LEMONSQUEEZY_API_KEY }} >> .env
           echo BACKEND_LEMONSQUEEZY_STORE_ID=${{ secrets.BACKEND_LEMONSQUEEZY_STORE_ID }} >> .env
+          echo BACKEND_LOGTAIL_TOKEN=${{ secrets.BACKEND_LOGTAIL_TOKEN }} >> .env
         working-directory: "./prod-deploy/apps/backend"
       - run: docker build -t docker.flows.sh/app-frontend-prod:${{github.sha}} -f infrastructure/docker/next.Dockerfile --build-arg APP=app .
         working-directory: "./prod-deploy"
@@ -73,13 +73,13 @@ jobs:
       - run: docker pull docker.flows.sh/backend-prod:${{github.sha}}
       - run: docker stop flows-app-frontend-prod
       - run: docker rm flows-app-frontend-prod
-      - run: docker run -d --restart always -p 6001:3000 --network flows_supabase_bridge --name flows-app-frontend-prod docker.flows.sh/app-frontend-prod:${{github.sha}}
+      - run: docker run -d --restart always -p 6001:3000 --network flows_supabase_bridge -m 512m --name flows-app-frontend-prod docker.flows.sh/app-frontend-prod:${{github.sha}}
       - run: docker stop flows-web-frontend-prod
       - run: docker rm flows-web-frontend-prod
-      - run: docker run -d --restart always -p 6002:3000 --name flows-web-frontend-prod docker.flows.sh/web-frontend-prod:${{github.sha}}
+      - run: docker run -d --restart always -p 6002:3000 -m 512m --name flows-web-frontend-prod docker.flows.sh/web-frontend-prod:${{github.sha}}
       - run: docker stop flows-docs-frontend-prod
       - run: docker rm flows-docs-frontend-prod
-      - run: docker run -d --restart always -p 6003:3000 --name flows-docs-frontend-prod docker.flows.sh/docs-frontend-prod:${{github.sha}}
+      - run: docker run -d --restart always -p 6003:3000 -m 512m --name flows-docs-frontend-prod docker.flows.sh/docs-frontend-prod:${{github.sha}}
       - run: docker stop flows-backend-prod
       - run: docker rm flows-backend-prod
-      - run: docker run -d --restart always -p 6005:3005 --network flows_supabase_bridge --name flows-backend-prod docker.flows.sh/backend-prod:${{github.sha}}
+      - run: docker run -d --restart always -p 6005:3005 --network flows_supabase_bridge -m 512m --name flows-backend-prod docker.flows.sh/backend-prod:${{github.sha}}

.github/workflows/deploy-stage.yml

@@ -41,10 +41,10 @@ jobs:
           echo BACKEND_APP_URL=${{ secrets.BACKEND_APP_URL }} >> .env
           echo BACKEND_CAPTCHA_SECRET=${{ secrets.BACKEND_CAPTCHA_SECRET }} >> .env
           echo BACKEND_SLACK_WEBHOOK_URL=${{ secrets.BACKEND_SLACK_WEBHOOK_URL }} >> .env
-          echo BACKEND_SLACK_ISSUES_WEBHOOK_URL=${{ secrets.BACKEND_SLACK_ISSUES_WEBHOOK_URL }} >> .env
           echo BACKEND_LEMONSQUEEZY_WEBHOOK_SECRET=${{ secrets.BACKEND_LEMONSQUEEZY_WEBHOOK_SECRET }} >> .env
           echo BACKEND_LEMONSQUEEZY_API_KEY=${{ secrets.BACKEND_LEMONSQUEEZY_API_KEY }} >> .env
           echo BACKEND_LEMONSQUEEZY_STORE_ID=${{ secrets.BACKEND_LEMONSQUEEZY_STORE_ID }} >> .env
+          echo BACKEND_LOGTAIL_TOKEN=${{ secrets.BACKEND_LOGTAIL_TOKEN }} >> .env
         working-directory: "./stage-deploy/apps/backend"
       - run: docker build -t docker.flows.sh/app-frontend-stage:${{github.sha}} -f infrastructure/docker/next.Dockerfile --build-arg APP=app .
         working-directory: "./stage-deploy"

README.md

@@ -7,15 +7,22 @@
   <img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/RBND-studio/flows-cloud"/>
 </p>
 
-# Flows Cloud: the next generation tool for onboarding flows and product tours.
+## Flows Cloud: The new standard for building user onboarding
 
-Flows are in the early stages of development. We are currently working on the first version of the product. The expected launch date is somewhere in **Q1 2024**. If you are interested in using Flows, please [sign up for the waitlist](https://flows.sh/).
+Flows lets you build any onboarding you want. Guide users, increase feature adoption, and improve revenue.
 
 - Create flows with a WYSIWYG editor or define them in your codebase
 - With Flows Cloud you can create and update flows on the fly without having to redeploy your app
 - Automatically track the performance of your flows
 - Use advanced step types like wait, conditional, call a function, and AI decision
 - Customize anything with CSS and JS
+- Connect to external analytics tools to get the full picture of your user's journey
+
+With its flexible approach, Flows unlocks the potential of your product by providing the tools to build seamless onboarding experiences for your users. It is the tool of choice for modern SaaS companies.
+
+## Get started for free
+
+The fastest and most reliable way to get started with Flows is signing up for free to [Flows Cloud](https://app.flows.sh/signup). Your first 1,000 flows started are free every month, after which you pay based on usage. See our [pricing](https://flows.sh/pricing) for more details.
 
 ## Contributing
 

apps/app/package.json

@@ -15,7 +15,7 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
-    "@flows/js": "0.0.47",
+    "@flows/js": "0.0.48",
     "@hookform/resolvers": "^3.3.4",
     "@marsidev/react-turnstile": "^0.5.3",
     "@monaco-editor/react": "^4.6.0",
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.1.4",
-    "@pandacss/dev": "0.34.3",
+    "@pandacss/dev": "0.37.2",
     "@types/node": "^20.11.29",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",

apps/backend/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@fastify/static": "^7.0.3",
     "@lemonsqueezy/lemonsqueezy.js": "^2.2.0",
+    "@logtail/node": "^0.4.21",
     "@nestjs/common": "^10.3.7",
     "@nestjs/config": "^3.2.1",
     "@nestjs/core": "^10.3.7",

apps/backend/src/index.d.ts

@@ -7,10 +7,10 @@ declare global {
       BACKEND_APP_URL: string;
       BACKEND_CAPTCHA_SECRET: string;
       BACKEND_SLACK_WEBHOOK_URL: string;
-      BACKEND_SLACK_ISSUES_WEBHOOK_URL: string;
       BACKEND_LEMONSQUEEZY_WEBHOOK_SECRET: string;
       BACKEND_LEMONSQUEEZY_API_KEY: string;
       BACKEND_LEMONSQUEEZY_STORE_ID: string;
+      BACKEND_LOGTAIL_TOKEN: string;
     }
   }
 }

apps/backend/src/lib/logtail.ts

@@ -0,0 +1,3 @@
+import { Logtail } from "@logtail/node";
+
+export const logtail = new Logtail(process.env.BACKEND_LOGTAIL_TOKEN);

apps/backend/src/middleware/logger-middleware.ts

@@ -1,6 +1,7 @@
 import { Injectable, Logger, type NestMiddleware } from "@nestjs/common";
 import { type FastifyReply, type FastifyRequest } from "fastify";
 
+import { logtail } from "../lib/logtail";
 import { NewsfeedService } from "../newsfeed/newsfeed.service";
 
 @Injectable()
@@ -20,9 +21,24 @@ export class LoggerMiddleware implements NestMiddleware {
       const logMessage = `${statusCode} ${method} ${url} ${contentLength} - ${userAgent} ${ip}`;
 
       if (statusCode >= 500) {
-        void this.newsfeedService.postIssue({ message: logMessage });
+        void logtail.error(logMessage, {
+          status: statusCode,
+          method,
+          url,
+          contentLength,
+          userAgent,
+          ip,
+        });
         return this.logger.error(logMessage);
       }
+      void logtail.info(logMessage, {
+        status: statusCode,
+        method,
+        url,
+        contentLength,
+        userAgent,
+        ip,
+      });
       return this.logger.log(logMessage);
     });
 

apps/backend/src/newsfeed/newsfeed.service.ts

@@ -15,8 +15,4 @@ export class NewsfeedService {
   async postMessage({ message }: { message: string }): Promise<Response> {
     return this.fetchSlackWebhook({ message, url: process.env.BACKEND_SLACK_WEBHOOK_URL });
   }
-
-  async postIssue({ message }: { message: string }): Promise<Response> {
-    return this.fetchSlackWebhook({ message, url: process.env.BACKEND_SLACK_ISSUES_WEBHOOK_URL });
-  }
 }

apps/backend/test/app.e2e-spec.ts

@@ -13,6 +13,8 @@ jest.mock("@nestjs/throttler", (): unknown => ({
   ThrottlerGuard: jest.fn(() => ({ canActivate: () => true })),
 }));
 
+jest.mock("../src/lib/logtail", () => ({ logtail: { info: jest.fn(), error: jest.fn() } }));
+
 describe("AppController (e2e)", () => {
   let app: NestFastifyApplication;
 

apps/docs/package.json

@@ -13,10 +13,10 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
-    "@flows/js": "0.0.47",
+    "@flows/js": "0.0.48",
     "next": "14.1.4",
     "next-sitemap": "^4.2.3",
-    "nextra": "^2.13.2",
+    "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.1.4",
-    "@pandacss/dev": "0.34.3",
+    "@pandacss/dev": "0.37.2",
     "@types/node": "^20.11.29",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",

apps/docs/src/pages/_meta.json

@@ -3,16 +3,21 @@
   "getting-started": "Getting started",
   "creating-flows": "Create flows",
   "step-types": "Step types",
-  "-": {
+  "-0": {
+    "title": "",
+    "type": "separator"
+  },
+  "billing": "Billing",
+  "-1": {
     "title": "",
     "type": "separator"
   },
   "sdk": "SDK",
-  "--": {
+  "-2": {
     "title": "",
     "type": "separator"
   },
-  "---": {
+  "-3": {
     "title": "Links",
     "type": "separator"
   },

apps/docs/src/pages/billing/_meta.json

@@ -0,0 +1,4 @@
+{
+  "limits": "Limits",
+  "estimating-usage-costs": "Estimating Usage Costs"
+}

apps/docs/src/pages/billing/estimating-usage-costs.mdx

@@ -0,0 +1,22 @@
+---
+title: Estimating usage and costs
+description: Learn how to estimate usage and costs for your Flows organization.
+---
+
+# Estimating usage and costs
+
+It can be hard to predict how many flows you'll launch with Flows, but there are simple ways to get a ballpark estimate. This guide explains why we price based on usage, and how you can estimate your usage and costs.
+
+## Why we price based on usage?
+
+Its simple: charging a fixed fee or by Monthly Active Users (MAUs) results in unfair pricing for everyone. You may have a lot of users, but only a few of them need onboarding, or you may have a few users, but they need to be onboarded frequently.
+
+From value perspective, you shouldn't pay the same amount in both of these cases. It makes more sense to pay only for the value you receive, which is directly tied to the number of flows you launch.
+
+## How do I estimate my usage?
+
+If you are already using another onboarding tool and want to switch to Flows (welcome!), your existing tool should give you a good idea of how many flows you launch per month.
+
+Alternatively, you can calculate you usage by multiplying the number of your Monthly Active Users (MAUs) by the number of flows you expect to launch per user. If you are not sure how many flows you'll launch, a good starting point is to assume that you'll launch between 2-4 flows per user per month.
+
+But remember, you can always start with a small [usage limit](/billing/limits) and increase it as you go.

apps/docs/src/pages/billing/limits.mdx

@@ -0,0 +1,24 @@
+---
+title: Billing limits
+description: Learn how to set a usage limit on your organization account to avoid surprise bills.
+---
+
+# Billing limits
+
+To help you avoid surprise bills, Flows allows you to set a usage limit on your organization account. Setting a usage limit means we'll stop sending flows to your users once the limit is reached. In other words, if you exceed the usage limit you set, no one will be able to see onboarding flows until the next billing cycle.
+
+## Setting a usage limit
+
+To set a usage limit:
+
+1. Go to your organization's settings
+2. Scroll to the `Usage limit` section
+3. Set the number of flows you want to allow per month and click `Save`
+
+![Usage limit section](/billing/usage-limit.png)
+
+## Precision
+
+Because of the way Flows Cloud and Flows SDK work, we can't guarantee that we'll stop sending flows exactly when the limit is reached. If you have a lot of users that you show flows to, it's possible that we'll send a few more flows than the limit you set.
+
+This happens because Flows SDK loads all flows the user can see at once, and launches them when conditions are met. Which means that if a user is initialized before the limit is reached, they'll still be able to see the flows even if the limit already reached when starting the flow. If you feel like you overshot the limit by too much, please contact us and we'll help you out.

apps/docs/src/pages/creating-flows/_meta.json

@@ -3,5 +3,5 @@
   "frequency": "Frequency",
   "targeting": "Targeting",
   "preview": "Preview flow",
-  "publish-flow": "Publish flow"
+  "make-flow-live": "Make flow live"
 }

apps/docs/src/pages/creating-flows/make-flow-live.mdx

@@ -0,0 +1,16 @@
+---
+title: Make your flow live
+description: Make your flow live and start guiding your users.
+---
+
+# Make your flow live
+
+When you have everything set up and are ready to start guiding your users, you can make your flow live. Making your flow live will make the last published version of your flow available to your users.
+
+![Flow publishing options](/creating-flows/publish.png)
+
+To make a flow live toggle the `Live` switch so that it is green. When the switch is green, your flow is live and available to your users.
+
+## Publishing changes
+
+Any changes you make to the flow will not be visible to your users until you publish the changes. This allows you to make changes to your flow and test them (by using `Preview`) before they are visible to your users. When you are ready to make your changes live, click `Publish changes`.

apps/docs/src/pages/creating-flows/steps-editor.mdx

@@ -7,35 +7,45 @@ description: Flows Cloud comes with a no-code steps editor that allows you to cr
 
 Flows Cloud comes with a no-code steps editor that allows you to create and manage your steps in a visual way.
 
+![Steps editor](/creating-flows/steps-editor.png)
+
 ## Create a new step
 
-To create a new step, click on the `Add step` button below the last step in the flow. This will create a new `Modal` step, to start editing it, click on the step to expand it.
+To create a new step, click on the `Add step` button below the last step in the flow or hover between two steps and click on the the `+` button that shows up. After you pick a step type, you can start configuring it by clicking on the step card and editing the form that appears on the right side of the screen.
+
+![Steps editor](/creating-flows/add-step.png)
 
 ### Pick a step type
 
 The first thing you need to do is to pick a step type. This will define the behavior and the configuration of the step. The available step types are:
 
-- [Tooltip](/step-types/tooltip)
-- [Modal](/step-types/modal)
-- [Wait](/step-types/wait)
-- [Fork](/step-types/fork)
+- [Tooltip](/step-types/tooltip) - simple step that shows a tooltip on the screen pointing to an element
+- [Modal](/step-types/modal) - step that shows a modal with an overlay
+- [Wait](/step-types/wait) - step that waits for a user action to continue
+- [Fork](/step-types/fork) - step that splits the flow into multiple branches
 
 ### Configure the step
 
 Once you have selected the step type, you can start configuring the step. The configuration options will depend on the step type you have selected. For guides on how to configure each step type, check the **Step types** section in the sidebar or the links above.
 
+![Steps editor](/creating-flows/step-form.png)
+
 ### Configure branches (optional)
 
 By default, after a step is completed, the flow will continue to the next step. When a following step is a fork you need to create ways for the flow to continue to all possible branches. When editing a tooltip or modal step, you can point to different branches when setting up the Footer buttons. When editing a wait step, you need to specify the target branch for each wait option.
 
 ## Create a fork
 
-To create a fork, click on the `Add fork` button below the last step. This will create a new fork, to start editing it, click on the fork to expand it.
+To create a fork, click on the `Add step` or `+` buttons in the step editor and select the `Fork` option.
+
+By default a fork is created with two branches, you can add more branches by hovering to the right side of the fork boundary (the dashed line) and clicking on the fork icon that appears.
+
+![Steps editor](/creating-flows/add-branch.png)
 
-To make a fork work, you need to add branches to it. Do that by clicking on the `Add branch` button below the last branch in the fork step. This will create a new branch, to start editing it, click on the branch to expand it. Now you can start adding steps to the branch.
+## Step preview
 
-## Steps preview
+When you have a step selected in the steps editor, you can see a preview of the step in the right side of the screen under the step configuration form. This will help you to visualize how the step will look like when the flow is executed. The preview is not interactive, but it will show you the content of the step and how it will be displayed on the screen.
 
-Bellow the steps editor, you can see a preview of the flow. This will help you to visualize the flow and understand how the steps are connected. You can either navigate through the flow as a user would do, or click on the step cards above the viewbox to jump to a specific step.
+![Steps editor](/creating-flows/step-preview.png)
 
 {/* TODO: Add link to guide on defining flows in code */}