From 426a0a3847704acb8e976aae892964fb5efd4582 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 12 Sep 2024 13:50:58 +0200
Subject: [PATCH] fix: tweak action UI (#3136)

---
 .../edit/components/AddActionModal.tsx        |  1 +
 .../edit/components/CreateNewActionTab.tsx    |  4 ++--
 .../edit/components/TargetingCard.tsx         |  2 +-
 .../components/PageUrlSelector.tsx            | 24 ++++++++-----------
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddActionModal.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddActionModal.tsx
index 5f58034978..372aea7336 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddActionModal.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddActionModal.tsx
@@ -56,6 +56,7 @@ export const AddActionModal = ({
   return (
     <ModalWithTabs
       label="Add action"
+      description="Capture a new action to trigger a survey on."
       open={open}
       setOpen={setOpen}
       tabs={tabs}
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx
index e2c18a51c6..27488eb6ce 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx
@@ -171,14 +171,14 @@ export const CreateNewActionTab = ({
     <div>
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(submitHandler)}>
-          <div className="max-h-[400px] w-full space-y-4 overflow-y-auto">
+          <div className="max-h-[500px] w-full space-y-4 overflow-y-auto pr-4">
             <div className="w-3/5">
               <FormField
                 name={`type`}
                 control={control}
                 render={({ field }) => (
                   <div>
-                    <Label className="font-semibold">Type</Label>
+                    <Label className="font-semibold">Action Type</Label>
                     <TabToggle
                       id="type"
                       options={[
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx
index b8afa2d47f..a720f422f6 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx
@@ -369,7 +369,7 @@ export const TargetingCard = ({
             {isFormbricksCloud ? (
               <UpgradePlanNotice
                 message="For advanced targeting, please"
-                textForUrl="upgrade to the User Identification plan."
+                textForUrl="upgrade to the Scale plan."
                 url={`/environments/${environmentId}/settings/billing`}
               />
             ) : (
diff --git a/packages/ui/organisms/NoCodeActionForm/components/PageUrlSelector.tsx b/packages/ui/organisms/NoCodeActionForm/components/PageUrlSelector.tsx
index fc0d50827c..bce60154a9 100644
--- a/packages/ui/organisms/NoCodeActionForm/components/PageUrlSelector.tsx
+++ b/packages/ui/organisms/NoCodeActionForm/components/PageUrlSelector.tsx
@@ -1,12 +1,16 @@
-import { Globe, PlusIcon, TrashIcon } from "lucide-react";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
-import { Control, FieldArrayWithId, UseFieldArrayRemove, useFieldArray } from "react-hook-form";
-import { UseFormReturn } from "react-hook-form";
+import {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  UseFormReturn,
+  useFieldArray,
+} from "react-hook-form";
 import toast from "react-hot-toast";
 import { cn } from "@formbricks/lib/cn";
 import { testURLmatch } from "@formbricks/lib/utils/url";
 import { TActionClassInput, TActionClassPageUrlRule } from "@formbricks/types/action-classes";
-import { Alert, AlertDescription, AlertTitle } from "../../../Alert";
 import { Button } from "../../../Button";
 import { FormControl, FormField, FormItem } from "../../../Form";
 import { Input } from "../../../Input";
@@ -64,7 +68,7 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
           name="noCodeConfig.urlFilters"
           render={() => (
             <div>
-              <Label className="font-semibold">Filter</Label>
+              <Label className="font-semibold">Page Filter</Label>
               <p className="text-sm font-normal text-slate-500">
                 Limit the pages on which this action gets captured
               </p>
@@ -83,7 +87,7 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
           )}
         />
       </div>
-      {filterType === "specific" ? (
+      {filterType === "specific" && (
         <div className="mb-2 mt-4 w-full space-y-3 pe-2">
           <Label>URL</Label>
           <UrlInput control={form.control} fields={fields} removeUrlRule={removeUrlRule} />
@@ -130,14 +134,6 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
             </div>
           </div>
         </div>
-      ) : (
-        <div className="mr-2">
-          <Alert className="my-2">
-            <Globe className="h-4 w-4" />
-            <AlertTitle>Visible on all pages</AlertTitle>
-            <AlertDescription>This action will be captured on all pages of your website</AlertDescription>
-          </Alert>
-        </div>
       )}
     </>
   );