Merge pull request #307 from RBND-studio/dev

Merge dev

apps/app/src/app/(dashboard)/org/[organizationId]/(detail)/settings/organization-limit.tsx

@@ -24,7 +24,7 @@ export const OrganizationLimit: FC<Props> = ({ org }) => {
           <Text variant="titleL">Usage limit</Text>
           <Text color="muted">
             Limit resets on {monthDayYear(renewal)} ({dayjs(renewal).fromNow()}). Limit how many
-            flows can launch in a billing period to prevent unexpected charges. Note that sometimes
+            flows can start in a billing period to prevent unexpected charges. Note that sometimes
             the limit can be exceed if there is a high volume of flows running at the same time.
           </Text>
         </Flex>

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/(detail)/setup-section.tsx

@@ -5,7 +5,7 @@ import type { FC } from "react";
 import { Text } from "ui";
 
 import { Frequency } from "./frequency";
-import { Launch } from "./launch";
+import { Start } from "./start";
 import { Targeting } from "./targeting";
 
 type Props = {
@@ -34,9 +34,9 @@ export const SetupSection: FC<Props> = ({ flow }) => {
         ) : null}
         {!flowIsLocal && (
           <>
-            <Frequency flow={flow} />
+            <Start flow={flow} />
             <Targeting flow={flow} />
-            <Launch flow={flow} />
+            <Frequency flow={flow} />
           </>
         )}
       </Flex>

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/(detail)/launch.tsx → apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/(detail)/start.tsx

@@ -9,7 +9,7 @@ type Props = {
   flow: FlowDetail;
 };
 
-export const Launch: FC<Props> = ({ flow }) => {
+export const Start: FC<Props> = ({ flow }) => {
   const start = (flow.publishedVersion?.start ?? []) as WaitStepOptions[];
 
   const noOptions =
@@ -18,7 +18,7 @@ export const Launch: FC<Props> = ({ flow }) => {
 
   return (
     <Flex direction="column" gap="space8">
-      <Text variant="titleS">Launch</Text>
+      <Text variant="titleS">Start</Text>
       <Wrap gap="space8" direction="column" alignItems="center">
         {!noOptions &&
           start.map((startOption, i) => {

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/edit/edit-constants.ts

@@ -27,5 +27,5 @@ export type SelectedItem =
   | number
   | `${number}.${number}.${number}`
   | "targeting"
-  | "launch"
+  | "start"
   | "frequency";

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/edit/flow-edit-form.tsx

@@ -20,7 +20,7 @@ import { FlowPublishChangesDialog } from "../(detail)/flow-publish-changes-dialo
 import { createDefaultValues, type IFlowEditForm, type SelectedItem } from "./edit-constants";
 import { EditFormEmpty } from "./edit-form-empty";
 import { FrequencyForm } from "./frequency-form";
-import { LaunchForm } from "./launch-form";
+import { StartForm } from "./start-form";
 import { StepForm } from "./step-form";
 import { StepPreview } from "./step-preview";
 import { StepsFlow } from "./steps-flow";
@@ -137,8 +137,8 @@ export const FlowEditForm: FC<Props> = ({ flow, organizationId }) => {
                   <FlowTargetingForm />
                 ) : selectedItem === "frequency" ? (
                   <FrequencyForm />
-                ) : selectedItem === "launch" ? (
-                  <LaunchForm />
+                ) : selectedItem === "start" ? (
+                  <StartForm />
                 ) : (
                   <>
                     <Box bg="bg" p="space16">

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/edit/launch-form.tsx → apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/edit/start-form.tsx

@@ -10,7 +10,7 @@ import { Button, Text } from "ui";
 import { useFlowEditForm } from "./edit-constants";
 import { StepWaitOption } from "./step-form/step-wait-option";
 
-export const LaunchForm: FC = () => {
+export const StartForm: FC = () => {
   const { control } = useFlowEditForm();
   const fieldName = "start";
   const { append, remove, fields } = useFieldArray({
@@ -21,8 +21,8 @@ export const LaunchForm: FC = () => {
   return (
     <Box p="space16">
       <Flex flexDirection="column" mb="space12">
-        <Text variant="titleL">{t.launch.launch}</Text>
-        <Text color="muted">{t.launch.description}</Text>
+        <Text variant="titleL">{t.start.start}</Text>
+        <Text color="muted">{t.start.description}</Text>
       </Flex>
 
       {fields.map((field, i) => (
@@ -41,7 +41,7 @@ export const LaunchForm: FC = () => {
         startIcon={<Plus16 />}
         variant="secondary"
       >
-        Add start option
+        {t.start.addOption}
       </Button>
     </Box>
   );

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/flow/[flowId]/edit/steps-flow/start-conditions.tsx

@@ -25,7 +25,7 @@ export const StartConditions: FC<Props> = ({ onSelectItem, selectedItem }) => {
     return `${count} ${plural(count, "target group", "target groups")}`;
   })();
 
-  const launchText = (() => {
+  const startText = (() => {
     const startOptions = watch("start");
     if (startOptions.length === 1) {
       const firstOption = startOptions[0];
@@ -46,9 +46,9 @@ export const StartConditions: FC<Props> = ({ onSelectItem, selectedItem }) => {
     <Flex gap="space8" bor="1px" p="space12" borderRadius="radius8">
       {(
         [
-          { value: "frequency", label: t.frequency.frequency, text: frequencyText },
+          { value: "start", label: t.start.start, text: startText },
           { value: "targeting", label: t.targeting.targeting, text: targetingText },
-          { value: "launch", label: t.launch.launch, text: launchText },
+          { value: "frequency", label: t.frequency.frequency, text: frequencyText },
         ] as const
       ).map((item) => {
         const selected = selectedItem === item.value;

apps/app/src/translations/translations.ts

@@ -28,9 +28,6 @@ export const t = {
     createFlowSuccess: "Flow created",
     updateFlowSuccess: "Flow updated",
     deleteFlowSuccess: "Flow deleted",
-    saveTargetingSuccess: "Targeting updated",
-    saveFrequencySuccess: "Frequency updated",
-    saveLaunchSuccess: "Launch settings updated",
     inviteSent: "Invite sent",
     usersInvited: "Users were invited",
     memberRemoved: "Member removed",
@@ -49,9 +46,6 @@ export const t = {
     deleteInviteFailed: "Failed to delete invite",
     deleteInviteSuccess: "Invite deleted",
     saveFlowFailed: "Failed to update flow",
-    saveTargetingFailed: "Failed to update targeting",
-    saveFrequencyFailed: "Failed to update frequency",
-    saveLaunchFailed: "Failed to update launch settings",
     deleteFlowFailed: "Failed to delete flow",
     publishFlowFailed: "Failed to publish flow",
     enableFlowFailed: "Failed to enable flow",
@@ -153,13 +147,11 @@ export const t = {
     once: "One time",
     "every-time": "Every time",
   },
-  launch: {
-    launch: "Launch",
+  start: {
+    start: "Start",
     description:
-      "When and where should the flow be shown to your users. Leave empty when launching manually in your codebase.",
-    localState: "Local flow launch settings need to be changed in your codebase",
-    element: "After clicking on a specified element.",
-    location: "After visiting a specified url. Supports regex.",
+      "When and where should the flow be shown to your users. Leave empty when starting manually in your codebase.",
+    addOption: "Add start option",
   },
   analytics: {
     starts: "Starts",
@@ -182,7 +174,6 @@ export const t = {
     domains: {
       domains: "Project domains",
       description: "Add the domains from where you want to use this project.",
-      localState: "Local project domains need to be changed in your codebase",
       addDomain: "Add domain",
       domainPlaceholder: "example.com",
       invalidDomain: "Invalid domain. Please use https://example.com format.",

apps/docs/src/pages/_meta.json

@@ -3,6 +3,10 @@
   "getting-started": "Getting started",
   "creating-flows": "Create flows",
   "step-types": "Step types",
+  "customization-and-styling": "Customization & Styling",
+  "project-setup": "Project setup",
+  "organization-setup": "Organization setup",
+  "analytics": "Analytics",
   "-0": {
     "title": "",
     "type": "separator"

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

@@ -0,0 +1,3 @@
+{
+  "flow-insights": "Flow insights"
+}

apps/docs/src/pages/analytics/flow-insights.mdx

@@ -0,0 +1,36 @@
+---
+title: Flow insights
+description: Realtime analytics of your flows. View insights on how your users are interacting with your flows.
+---
+
+# Flow insights
+
+Realtime analytics of your flows. View insights on how your users are interacting with your flows.
+
+![Flow insights](/analytics/insights.png)
+
+## Overview
+
+Flows automatically track how users interact with your flows to help you better understand how your users are engaging with your product. Use these insights to answer questions like:
+
+- Are the flows useful to users?
+- Are users getting stuck in the flows?
+- Is something broken?
+
+In the current state, you can see the last 30 days of data. Stay tuned for unlimited date ranges and more advanced analytics.
+
+## Metrics
+
+Flow analytics are in the early stages of development. The following metrics are currently available:
+
+- **Starts**: How many times the flow was started.
+- **Finishes**: How many times the flow was completed.
+- **Exits**: How many times the flow was exited without completion.
+- **Unique users**: How many unique users have started the flow.
+- **Finish rate**: The ratio between finishes and starts.
+
+In the future, you can expect:
+
+- **Time spent**: How long users spend in the flow.
+- **Error tracking**: See where and why users are getting stuck. We are currently testing this feature.
+- **Funnel view**: See the performance of each step in the flow.

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

@@ -5,18 +5,18 @@ 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.
+It can be hard to predict how many flows you'll start 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.
+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 start.
 
 ## 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.
+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 start 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.
+Alternatively, you can calculate you usage by multiplying the number of your Monthly Active Users (MAUs) by the number of flows you expect to start per user. If you are not sure how many flows you'll start, a good starting point is to assume that you'll start 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

@@ -21,4 +21,4 @@ To set a usage limit:
 
 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.
+This happens because Flows SDK loads all flows the user can see at once, and starts 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

@@ -1,5 +1,6 @@
 {
   "steps-editor": "Steps editor",
+  "start-flow": "Start a flow",
   "frequency": "Frequency",
   "targeting": "Targeting",
   "preview": "Preview flow",

apps/docs/src/pages/creating-flows/start-flow.mdx

@@ -0,0 +1,25 @@
+---
+title: Start a flow
+description: Select when and where to show a flow.
+---
+
+# Start a flow
+
+Select when and where to show a flow.
+
+![Start form](/creating-flows/start-flow.png)
+
+You can set the following options for when a flow should start:
+
+- **When visiting a page**: The flow will be shown when the user visits a specific page.
+- **On click**: The flow will be shown when the user clicks on a specific element.
+- **On input change**: The flow will be shown when the user changes the value of a specific input.
+- **On form submit**: The flow will be shown when the user submits a specific form.
+
+<SectionLink href="/step-types/shared-properties/wait-properties">
+  Learn more about the setting up start options →
+</SectionLink>
+
+## Multiple start options
+
+You can set multiple start options for a flow. The flow will be shown when the user meets any of the conditions. To add another start options, click the **Add start option** button at the bottom of the form.

apps/docs/src/pages/creating-flows/targeting.mdx

@@ -9,7 +9,7 @@ Filter the users that should see a specific flow.
 
 ![Targeting form](/creating-flows/targeting.png)
 
-When launching flows, you can show them to specific users based on their attributes. This is useful when you want to show a flow to a specific segment of your users, for example, only to users that have a specific role or that have been using your app for a certain amount of time.
+When starting flows, you can show them to specific users based on their attributes. This is useful when you want to show a flow to a specific segment of your users, for example, only to users that have a specific role or that have been using your app for a certain amount of time.
 
 ## Create targeting filter
 

apps/docs/src/pages/customization-and-styling/_meta.json

@@ -0,0 +1,3 @@
+{
+  "custom-styles": "Custom styles"
+}

apps/docs/src/pages/customization-and-styling/custom-styles.mdx

@@ -0,0 +1,50 @@
+---
+title: Custom styles
+description: Create a custom theme to change the look and feel of your onboarding flows.
+---
+
+# Custom styles
+
+Create a custom theme to change the look and feel of your onboarding flows. We strive to provide good defaults, but we expect that you will want to customize how the elements look to match your brand and application.
+
+![Custom styles](/customization-and-styling/custom-styles.png)
+
+## CSS variables (recommended)
+
+CSS variables are the easier way to customize your theme. With variables, you can change the basics like colors, fonts, and spacing across all the elements in the onboarding flows. Using variables is less likely to break when we introduce new features or changes (but we strive to avoid breaking changes whenever possible).
+
+If you ever need to go back to the start and get the default CSS template, click the **Apply defaults** button.
+
+### Dark mode
+
+Out of the box, Flows supports dark mode when you apply class `.dark` on either `html` or `body`. You can change the selector to match your theming implementation.
+
+```css
+:root {
+  /* This is your default (light) theme */
+  --flows-bg-default: #ffffff;
+  --flows-bg-primary: #ec6441;
+}
+
+.dark {
+  /* This is your dark theme */
+  --flows-bg-default: #181818;
+  --flows-bg-primary: #e46a49;
+}
+```
+
+## Full CSS template
+
+For more advanced styling, you can use the full CSS template. This template allows you to customize every element used in the onboarding flows. Please note that this template is more likely to receive breaking changes as we introduce more step types and features.
+
+Customizing the full CSS template requires a good understanding of CSS and the structure of the onboarding flows. We recommend using the CSS variables template whenever possible. Make sure to preview and test your changes in the onboarding flows to ensure they look good on all devices and screen sizes. We transpile the CSS with [lightningcss.dev](https://lightningcss.dev) so you don't have to worry about browser compatibility.
+
+### Customizing the full CSS template
+
+To customize the full CSS template, you need to switch on the **Customize full CSS template** toggle on the **Style template** page. This will display the full CSS template that you can customize.
+
+If you ever need to go back to the start and get the default CSS template, click the **Apply defaults** button.
+
+### Restoring to default
+
+When you customize the full CSS template, the SDK will always load your custom CSS even if there are breaking changes. If you want to go back to the default CSS, just switch off the **Customize full CSS template** toggle on the **Style template** page. This will make sure that your SDK will always load the correct CSS for the version you are using.

apps/docs/src/pages/getting-started/concepts.mdx

@@ -19,7 +19,7 @@ An organization can have multiple projects. Projects typically represent a singl
 
 ### Flows
 
-The most basic concept in Flows is the flow. A flow is a sequence of steps that a user can take to complete a task. Flows are created using the Flows Cloud editor and can be launched on a project's domain. Alternatively, you can define flows inside your codebase using the Flows SDK.
+The most basic concept in Flows is the flow. A flow is a sequence of steps that a user can take to complete a task. Flows are created using the Flows Cloud editor and can be started on a project's domain. Alternatively, you can define flows inside your codebase using the Flows SDK.
 
 ### Flow Step
 

apps/docs/src/pages/getting-started/install-flows.mdx

@@ -55,7 +55,7 @@ export const Flows = () => {
 };
 ```
 
-Lastly don't forget to render the Flows component in the root of your application (`layout.tsx` or `App.tsx`). When that's done, you can start creating onboarding flows and launching them in your product.
+Lastly don't forget to render the Flows component in the root of your application (`layout.tsx` or `App.tsx`). When that's done, you can start creating onboarding flows and starting them in your product.
 
 </Tabs.Tab>
 <Tabs.Tab>
@@ -76,7 +76,7 @@ When you're done, you can start using Flows by calling `flows.init()` anywhere i
 </script>
 ```
 
-Once the snippet is installed, you can start creating onboarding flows and launching them in your product.
+Once the snippet is installed, you can start creating onboarding flows and starting them in your product.
 
 </Tabs.Tab>
 <Tabs.Tab>
@@ -98,7 +98,7 @@ init({
 });
 ```
 
-Once the library is installed, you can start creating onboarding flows and launching them in your product.
+Once the library is installed, you can start creating onboarding flows and starting them in your product.
 
 </Tabs.Tab>
 </Tabs>

apps/docs/src/pages/organization-setup/_meta.json

@@ -0,0 +1,4 @@
+{
+  "organizations": "Organizations",
+  "manage-members": "Manage Members"
+}