fix: Embed in an Email preview (#1913)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/emailTemplate.tsx

@@ -18,6 +18,7 @@ import { WEBAPP_URL } from "@formbricks/lib/constants";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 import { TSurvey, TSurveyQuestionType } from "@formbricks/types/surveys";
+import { RatingSmiley } from "@formbricks/ui/RatingSmiley";
 
 interface EmailTemplateProps {
   survey: TSurvey;
@@ -167,33 +168,39 @@ const EmailTemplate = ({ survey, surveyUrl, brandColor }: EmailTemplateProps) =>
     case TSurveyQuestionType.Rating:
       return (
         <EmailTemplateWrapper surveyUrl={url} brandColor={brandColor}>
-          <Section>
+          <Section className=" w-full">
             <Text className="m-0  block text-base font-semibold leading-6 text-slate-800">
               {firstQuestion.headline}
             </Text>
             <Text className="m-0 block p-0 text-sm font-normal leading-6 text-slate-500">
               {firstQuestion.subheader}
             </Text>
-            <Container className="mx-0 mt-4 flex">
+            <Container className="mx-0 mt-4 w-full items-center justify-center">
               <Section
-                className={cn("inline-block w-max overflow-hidden rounded-md", {
+                className={cn("w-full overflow-hidden rounded-md", {
                   ["border border-solid border-gray-200"]: firstQuestion.scale === "number",
                 })}>
-                {Array.from({ length: firstQuestion.range }, (_, i) => (
-                  <EmailButton
-                    key={i}
-                    href={`${urlWithPrefilling}${firstQuestion.id}=${i + 1}`}
-                    className={cn(
-                      "m-0 inline-flex h-16 w-16 items-center justify-center p-0 text-slate-800",
-                      {
-                        ["border border-solid border-gray-200"]: firstQuestion.scale === "number",
-                      }
-                    )}>
-                    {firstQuestion.scale === "smiley" && <Text className="text-3xl">😃</Text>}
-                    {firstQuestion.scale === "number" && i + 1}
-                    {firstQuestion.scale === "star" && <Text className="text-3xl">⭐</Text>}
-                  </EmailButton>
-                ))}
+                <Column className="mb-4 flex w-full justify-around">
+                  {Array.from({ length: firstQuestion.range }, (_, i) => (
+                    <EmailButton
+                      key={i}
+                      href={`${urlWithPrefilling}${firstQuestion.id}=${i + 1}`}
+                      className={cn(
+                        " m-0 h-10 w-full p-0 text-center align-middle leading-10 text-slate-800",
+                        {
+                          ["border border-solid border-gray-200"]: firstQuestion.scale === "number",
+                        }
+                      )}>
+                      {firstQuestion.scale === "smiley" && (
+                        <RatingSmiley active={false} idx={i} range={firstQuestion.range} />
+                      )}
+                      {firstQuestion.scale === "number" && (
+                        <Text className="m-0 flex h-10 items-center">{i + 1}</Text>
+                      )}
+                      {firstQuestion.scale === "star" && <Text className="text-3xl">⭐</Text>}
+                    </EmailButton>
+                  ))}
+                </Column>
               </Section>
               <Section className="m-0 px-1.5 text-xs leading-6 text-slate-500">
                 <Row>

packages/ui/RatingSmiley/index.tsx

@@ -0,0 +1,41 @@
+import {
+  ConfusedFace,
+  FrowningFace,
+  GrinningFaceWithSmilingEyes,
+  GrinningSquintingFace,
+  NeutralFace,
+  PerseveringFace,
+  SlightlySmilingFace,
+  SmilingFaceWithSmilingEyes,
+  TiredFace,
+  WearyFace,
+} from "../SingleResponseCard/components/Smileys";
+
+interface RatingSmileyProps {
+  active: boolean;
+  idx: number;
+  range: number;
+}
+
+export function RatingSmiley({ active, idx, range }: RatingSmileyProps): JSX.Element {
+  const activeColor = "fill-rating-fill";
+  const inactiveColor = "fill-none";
+  let icons = [
+    <TiredFace className={active ? activeColor : inactiveColor} />,
+    <WearyFace className={active ? activeColor : inactiveColor} />,
+    <PerseveringFace className={active ? activeColor : inactiveColor} />,
+    <FrowningFace className={active ? activeColor : inactiveColor} />,
+    <ConfusedFace className={active ? activeColor : inactiveColor} />,
+    <NeutralFace className={active ? activeColor : inactiveColor} />,
+    <SlightlySmilingFace className={active ? activeColor : inactiveColor} />,
+    <SmilingFaceWithSmilingEyes className={active ? activeColor : inactiveColor} />,
+    <GrinningFaceWithSmilingEyes className={active ? activeColor : inactiveColor} />,
+    <GrinningSquintingFace className={active ? activeColor : inactiveColor} />,
+  ];
+
+  if (range == 7) icons = [icons[1], icons[3], icons[4], icons[5], icons[6], icons[8], icons[9]];
+  else if (range == 5) icons = [icons[3], icons[4], icons[5], icons[6], icons[7]];
+  else if (range == 4) icons = [icons[4], icons[5], icons[6], icons[7]];
+  else if (range == 3) icons = [icons[4], icons[5], icons[7]];
+  return icons[idx];
+}