Merge branch 'main' of github.com:formbricks/formbricks

apps/demo/pages/app/index.tsx

@@ -72,6 +72,20 @@ export default function AppPage({}) {
               }}>
               Feedback
             </button>
+            <button
+              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
+              onClick={() => {
+                formbricks.setEmail("test@web.com");
+              }}>
+              Set Email
+            </button>
+            <button
+              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
+              onClick={() => {
+                formbricks.setUserId("ASDASDAAAAAASSSSSSSASDASD");
+              }}>
+              Set Long UserID
+            </button>
             <button
               type="button"
               className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">

apps/formbricks-com/components/dummyUI/templates.ts

@@ -538,7 +538,7 @@ export const templates: Template[] = [
         {
           id: createId(),
           type: "multipleChoiceSingle",
-          headline: "Were you able to 'accomplish what you came here to do today'?",
+          headline: "Were you able to accomplish what you came here to do today?",
           required: true,
           choices: [
             {

apps/formbricks-com/components/home/GitHubSponsorship.tsx

@@ -12,14 +12,14 @@ export default function GitHubSponsorship() {
           alt="GitHub Sponsors Formbricks badge"
           width={100}
           height={100}
-          className="mr-12 block dark:hidden md:mr-4 lg:animate-pulse"
+          className="mr-12 block dark:hidden md:mr-4 "
         />
         <Image
           src={GitHubMarkWhite}
           alt="GitHub Sponsors Formbricks badge"
           width={100}
           height={100}
-          className="mr-12 hidden dark:block md:mr-4 lg:animate-pulse "
+          className="mr-12 hidden dark:block md:mr-4  "
         />
       </div>
       <h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 lg:text-2xl">

apps/web/app/environments/[environmentId]/people/PeopleList.tsx

@@ -6,6 +6,7 @@ import { PersonAvatar } from "@formbricks/ui";
 import { ErrorComponent } from "@formbricks/ui";
 import { usePeople } from "@/lib/people/people";
 import Link from "next/link";
+import { truncateMiddle } from "@/lib/utils";
 
 export default function PeopleList({ environmentId }: { environmentId: string }) {
   const { people, isLoadingPeople, isErrorPeople } = usePeople(environmentId);
@@ -17,6 +18,8 @@ export default function PeopleList({ environmentId }: { environmentId: string })
     return <ErrorComponent />;
   }
 
+  console.log(JSON.stringify(people, null, 2));
+
   const getAttributeValue = (person, attributeName) => {
     return person.attributes.find((a) => a.attributeClass.name === attributeName)?.value;
   };
@@ -28,8 +31,8 @@ export default function PeopleList({ environmentId }: { environmentId: string })
       ) : (
         <div className="rounded-lg border border-slate-200">
           <div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-            <div className="col-span-4 pl-6 ">User</div>
-            <div className="text-center">User ID</div>
+            <div className="col-span-3 pl-6 ">User</div>
+            <div className="col-span-2 text-center">User ID</div>
             <div className="text-center">Email</div>
             <div className="text-center">Sessions</div>
           </div>
@@ -40,18 +43,26 @@ export default function PeopleList({ environmentId }: { environmentId: string })
                 key={person.id}
                 className="w-full">
                 <div className="m-2 grid h-16  grid-cols-7 content-center rounded-lg hover:bg-slate-100">
-                  <div className="col-span-4 flex items-center pl-6 text-sm">
+                  <div className="col-span-3 flex items-center pl-6 text-sm">
                     <div className="flex items-center">
                       <div className="h-10 w-10 flex-shrink-0">
                         <PersonAvatar personId={person.id} />
                       </div>
                       <div className="ml-4">
-                        <div className="font-medium text-slate-900">{person.id}</div>
+                        <div className="font-medium text-slate-900">
+                          {getAttributeValue(person, "email") ? (
+                            <span>{getAttributeValue(person, "email")}</span>
+                          ) : (
+                            <span>{person.id}</span>
+                          )}
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
-                    <div className="text-slate-900">{getAttributeValue(person, "userId")}</div>
+                  <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
+                    <div className="text-slate-900">
+                      {truncateMiddle(getAttributeValue(person, "userId"), 24)}
+                    </div>
                   </div>
                   <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
                     <div className="text-slate-900">{getAttributeValue(person, "email")}</div>

apps/web/app/environments/[environmentId]/settings/product/editProduct.tsx

@@ -38,7 +38,7 @@ export function EditProductName({ environmentId }) {
             toast.error(`Error: ${error.message}`);
           });
       })}>
-      <Label htmlFor="fullname">Full Name</Label>
+      <Label htmlFor="fullname">What&apos;s your product called?</Label>
       <Input type="text" id="fullname" defaultValue={product.name} {...register("name")} />
 
       <Button type="submit" className="mt-4" loading={isMutatingProduct}>

apps/web/app/environments/[environmentId]/surveys/templates/templates.ts

@@ -465,7 +465,7 @@ export const templates: Template[] = [
         {
           id: createId(),
           type: "multipleChoiceSingle",
-          headline: "Were you able to 'accomplish what you came here to do today'?",
+          headline: "Were you able to accomplish what you came here to do today?",
           required: true,
           choices: [
             {

apps/web/lib/utils.ts

@@ -22,6 +22,17 @@ export const truncate = (str: string, length: number) => {
   return str;
 };
 
+// write a function that takes a string and truncates the middle of it so that the beginning and ending are always visible
+export const truncateMiddle = (str: string, length: number) => {
+  if (!str) return "";
+  if (str.length > length) {
+    const start = str.substring(0, length / 2);
+    const end = str.substring(str.length - length / 2, str.length);
+    return start + " ... " + end;
+  }
+  return str;
+};
+
 export const scrollToTop = () => {
   window.scrollTo({
     top: 0,