feat: added email sender server action

2025-12-23 22:50:35 -06:00 · 2023-09-30 11:32:15 +05:30
parent 0441f0bbbd
commit 1815d86f16
5 changed files with 54 additions and 21 deletions
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts
@@ -0,0 +1,21 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
+import { sendEmbedSurveyPreviewEmail } from "@formbricks/lib/emails/emails";
+import { AuthenticationError } from "@formbricks/types/v1/errors";
+
+type TSendEmailActionArgs = {
+  to: string;
+  subject: string;
+  html: string;
+};
+
+export const sendEmailAction = async ({ html, subject, to }: TSendEmailActionArgs) => {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    throw new AuthenticationError("Not authenticated");
+  }
+  return await sendEmbedSurveyPreviewEmail(to, subject, html);
+};
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
@@ -63,7 +63,9 @@ export default function ShareEmbedSurvey({
            </div>
          </div>
          <div className="flex w-full grow flex-col gap-6 bg-gray-50 px-4 py-6 lg:p-6">
-            <div className="flex h-full overflow-y-scroll lg:h-[590px]">{componentMap[activeId]}</div>
+            <div className="flex h-full overflow-y-scroll lg:h-[590px] lg:overflow-y-visible">
+              {componentMap[activeId]}
+            </div>
            <div className="mx-auto flex max-w-max rounded-md bg-slate-100 p-1 lg:hidden">
              {tabs.slice(0, 2).map((tab) => (
                <Button
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx
@@ -14,11 +14,12 @@ import {
  Row,
  Column,
 } from "@react-email/components";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { QuestionType } from "@formbricks/types/questions";
 import { TProfile } from "@formbricks/types/v1/profile";
 import { TProduct } from "@formbricks/types/v1/product";
+import { sendEmailAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions";

 interface EmailTabProps {
  survey: TSurvey;
@@ -31,8 +32,12 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
  const [email, setEmail] = useState(profile.email);
  const [showEmbed, setShowEmbed] = useState(false);
  const brandColor = product.brandColor;
+  const subject = "Formbricks Email Survey Preview";
+
+  const emailTemplate = useMemo(() => {
+    return getEmailTemplate(survey, surveyUrl);
+  }, [survey, surveyUrl]);

-  console.log(survey);
  const Email = (
    <Tailwind
      config={{
@@ -44,25 +49,19 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
          },
        },
      }}>
-      {getEmailTemplate(survey, surveyUrl)}
+      {emailTemplate}
    </Tailwind>
  );

-  const confirmEmail = render(Email, { pretty: true });
-
-  const confirmEmailWithoutDoctype = confirmEmail.replace(
+  const emailHTML = render(Email, { pretty: true });
+  const emailHTMLWithoutDoctype = emailHTML.replace(
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
    ""
  );

  const sendPreviewEmail = async () => {
-    // const res = await sendEmail({
-    //   to: email,
-    //   subject: "Formbricks Email Survey Preview",
-    //   html: confirmEmail,
-    // });
-    // const res = await sendPreviewMail(email, confirmEmail);
-    // console.log(res);
+    await sendEmailAction({ html: emailHTMLWithoutDoctype, subject, to: email });
+    toast.success("Email sent!");
  };
  return (
    <div className="flex h-full grow flex-col gap-5">
@@ -83,7 +82,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
            aria-label="Embed survey in your website"
            onClick={() => {
              toast.success("Embed code copied to clipboard!");
-              navigator.clipboard.writeText(confirmEmailWithoutDoctype);
+              navigator.clipboard.writeText(emailHTMLWithoutDoctype);
            }}
            className="shrink-0"
            EndIcon={DocumentDuplicateIcon}>
@@ -116,7 +115,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
            customCodeClass="!whitespace-normal sm:!whitespace-pre-wrap !break-all sm:!break-normal"
            language="html"
            showCopyToClipboard={false}>
-            {confirmEmailWithoutDoctype}
+            {emailHTMLWithoutDoctype}
          </CodeBlock>
        ) : (
          <div className="">
@@ -129,9 +128,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
              <div className="mb-2 border-b border-slate-200 pb-2 text-sm">
                To : {email || "user@mail.com"}
              </div>
-              <div className="border-b border-slate-200 pb-2 text-sm">
-                Subject : Formbricks Email Survey Preview
-              </div>
+              <div className="border-b border-slate-200 pb-2 text-sm">Subject : {subject}</div>
              <div className="p-4">{Email}</div>
            </div>
          </div>
@@ -346,6 +343,7 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => {
              .filter((c) => c.id !== "other")
              .map((choice) => (
                <Link
+                  key={choice.id}
                  className="mt-4 block rounded-lg border border-solid border-gray-200 bg-slate-50 p-4 text-slate-800"
                  href={`${surveyUrl}?${firstQuestion.id}=${choice.label}`}>
                  {choice.label}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx
@@ -32,7 +32,7 @@ export default function LinkTab({ surveyUrl, survey, product }: EmailTabProps) {

  return (
    <div className="flex h-full grow flex-col gap-5">
-      <div className="flex justify-between gap-2">
+      <div className="flex flex-wrap justify-between gap-2">
        <div
          ref={linkTextRef}
          className="relative grow overflow-auto rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-800"
@@ -64,7 +64,7 @@ export default function LinkTab({ surveyUrl, survey, product }: EmailTabProps) {
        <Button
          variant="minimal"
          className={cn(
-            "absolute bottom-6 left-1/2 -translate-x-1/2 transform rounded-lg border border-slate-200 bg-white"
+            "absolute bottom-8 left-1/2 -translate-x-1/2 transform rounded-lg border border-slate-200 bg-white"
          )}
          EndIcon={ArrowUpRightIcon}
          title="Open survey in new tab"
--- a/packages/lib/emails/emails.ts
+++ b/packages/lib/emails/emails.ts
@@ -170,3 +170,15 @@ export const sendResponseFinishedEmail = async (
    `),
  });
 };
+
+export const sendEmbedSurveyPreviewEmail = async (to: string, subject: string, html: string) => {
+  await sendEmail({
+    to: to,
+    subject: subject,
+    html: withEmailTemplate(`
+    <h1>Preview Email</h1>
+    <p>This is a preview email for your survey. Please do not reply to this email.</p>
+    <hr/>
+    ${html}`),
+  });
+};