From 251beb4d515b610cf0397c6610f8a3f7f3520c3e Mon Sep 17 00:00:00 2001 From: Johannes Date: Tue, 3 Oct 2023 21:36:16 +0545 Subject: [PATCH] ui tweaks --- .../components/shareEmbedTabs/EmailTab.tsx | 94 +++++++++---------- packages/lib/emails/emails.ts | 13 ++- 2 files changed, 51 insertions(+), 56 deletions(-) diff --git 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 index 8d934b2fab..77ecf74791 100644 --- 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 @@ -1,25 +1,25 @@ -import toast from "react-hot-toast"; +import { sendEmailAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions"; import CodeBlock from "@/components/shared/CodeBlock"; -import { TSurvey } from "@formbricks/types/v1/surveys"; -import { Input, Button } from "@formbricks/ui"; -import { DocumentDuplicateIcon, EnvelopeIcon, CodeBracketIcon } from "@heroicons/react/24/solid"; -import { - Section, - Tailwind, - render, - Button as EmailButton, - Text, - Link, - Container, - Row, - Column, -} from "@react-email/components"; -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"; +import { TProfile } from "@formbricks/types/v1/profile"; +import { TSurvey } from "@formbricks/types/v1/surveys"; +import { Button, Input } from "@formbricks/ui"; +import { CodeBracketIcon, DocumentDuplicateIcon, EnvelopeIcon } from "@heroicons/react/24/solid"; +import { + Column, + Container, + Button as EmailButton, + Link, + Row, + Section, + Tailwind, + Text, + render, +} from "@react-email/components"; +import { useMemo, useState } from "react"; +import toast from "react-hot-toast"; interface EmailTabProps { survey: TSurvey; @@ -149,10 +149,10 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { case QuestionType.OpenText: return ( - + {firstQuestion.headline} - + {firstQuestion.subheader}
@@ -162,10 +162,10 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { case QuestionType.Consent: return ( - + {firstQuestion.headline} - + @@ -193,24 +193,24 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { return (
- + {firstQuestion.headline} - + {firstQuestion.subheader} -
+
{Array.from({ length: 11 }, (_, i) => ( + className="m-0 inline-flex h-10 w-10 items-center justify-center border-gray-200 p-0 text-slate-800"> {i} ))}
-
+
{firstQuestion.lowerLabel} @@ -236,10 +236,10 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { case QuestionType.CTA: return ( - + {firstQuestion.headline} - + @@ -253,7 +253,7 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { )} + className="bg-brand-color inline-flex cursor-pointer appearance-none rounded-md px-6 py-3 text-sm font-medium text-white"> {firstQuestion.buttonLabel} @@ -264,10 +264,10 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { return (
- + {firstQuestion.headline} - + {firstQuestion.subheader} @@ -280,14 +280,14 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { key={i} href={`${surveyUrl}?${firstQuestion.id}=${i + 1}`} className={cn( - "m-0 inline-flex h-10 w-10 items-center justify-center p-0 text-slate-800", + "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" && "😃"} + {firstQuestion.scale === "smiley" && 😃} {firstQuestion.scale === "number" && i + 1} - {firstQuestion.scale === "star" && "⭐"} + {firstQuestion.scale === "star" && ⭐} ))}
@@ -316,16 +316,16 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { case QuestionType.MultipleChoiceMulti: return ( - + {firstQuestion.headline} - + {firstQuestion.subheader} {firstQuestion.choices.map((choice) => (
{choice.label}
@@ -337,10 +337,10 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { case QuestionType.MultipleChoiceSingle: return ( - + {firstQuestion.headline} - + {firstQuestion.subheader} @@ -349,7 +349,7 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => { .map((choice) => ( {choice.label} @@ -366,7 +366,7 @@ const EmailTemplateWrapper = ({ children, surveyUrl }) => { + className="mx-0 my-2 block rounded-lg border border-solid border-slate-300 bg-white p-8 font-sans text-inherit "> {children} ); @@ -374,13 +374,9 @@ const EmailTemplateWrapper = ({ children, surveyUrl }) => { const EmailFooter = () => { return ( - - Powered by - - Formbricks + + + Powered by Formbricks ); diff --git a/packages/lib/emails/emails.ts b/packages/lib/emails/emails.ts index 2a16653da3..30ea314177 100644 --- a/packages/lib/emails/emails.ts +++ b/packages/lib/emails/emails.ts @@ -1,9 +1,9 @@ -import { getQuestionResponseMapping } from "../responses"; -import { WEBAPP_URL } from "../constants"; -import { withEmailTemplate } from "./email-template"; -import { createInviteToken, createToken } from "../jwt"; import { Question } from "@formbricks/types/questions"; import { TResponse } from "@formbricks/types/v1/responses"; +import { WEBAPP_URL } from "../constants"; +import { createInviteToken, createToken } from "../jwt"; +import { getQuestionResponseMapping } from "../responses"; +import { withEmailTemplate } from "./email-template"; const nodemailer = require("nodemailer"); @@ -176,9 +176,8 @@ export const sendEmbedSurveyPreviewEmail = async (to: string, subject: string, h to: to, subject: subject, html: withEmailTemplate(` -

Preview Email

-

This is a preview email for your survey. Please do not reply to this email.

-
+

Preview Email Embed

+

This is how the code snippet looks embedded into an email:

${html}`), }); };