fix(console): designer email preview (#2760)

proofzero · Nov 9, 2023 · 289b8a4 · 289b8a4
1 parent 5ec405f
commit 289b8a4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/apps/console/app/routes/apps/$clientId/designer.tsx b/apps/console/app/routes/apps/$clientId/designer.tsx
@@ -930,6 +930,7 @@ const EmailPanel = ({
   emailTheme,
   setLoading,
   errors,
+  passportURL,
 }: {
   clientId: string
   accountURN?: AccountURN
@@ -940,6 +941,7 @@ const EmailPanel = ({
   errors?: {
     [key: string]: string
   }
+  passportURL: string
 }) => {
   const [logoURL, setLogoURL] = useState<string | undefined>(
     emailTheme?.logoURL
@@ -1257,16 +1259,24 @@ const EmailPanel = ({
             ref={iFrameRef}
             className="w-full border rounded-lg"
             srcDoc={
-              EmailTemplateOTP('XXXXXX', {
-                appName: 'Designer',
-                logoURL:
-                  logoURL ??
-                  'https://imagedelivery.net/VqQy1abBMHYDZwVsTbsSMw/70676dfd-2899-4556-81ef-e5f48f5eb900/public',
-                privacyURL: '#',
-                termsURL: '#',
-                contactURL: contact,
-                address: address,
-              }).body
+              EmailTemplateOTP(
+                'XXXXXX',
+                clientId,
+                appContactEmail ?? '[email protected]',
+                'none',
+                passportURL,
+                {
+                  appName: 'Designer',
+                  logoURL:
+                    logoURL ??
+                    'https://imagedelivery.net/VqQy1abBMHYDZwVsTbsSMw/70676dfd-2899-4556-81ef-e5f48f5eb900/public',
+                  privacyURL: '#',
+                  termsURL: '#',
+                  contactURL: contact,
+                  address: address,
+                },
+                true
+              ).body
             }
             onLoad={(ev) => {
               const iFrame = ev.target as HTMLIFrameElement
@@ -1502,6 +1512,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
       appTheme,
       emailTheme,
       ogTheme,
+      passportURL: context.env.PASSPORT_URL,
     })
   }
 )
@@ -1700,14 +1711,11 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
 )
 
 export default () => {
-  const { appTheme, emailTheme, ogTheme } = useLoaderData<{
+  const { appTheme, emailTheme, ogTheme, passportURL } = useLoaderData<{
     appTheme: GetAppThemeResult
     emailTheme: GetEmailOTPThemeResult
     ogTheme: GetOgThemeResult
-    toasts: {
-      message: string
-      type: ToastType
-    }[]
+    passportURL: string
   }>()
 
   const {
@@ -1856,6 +1864,7 @@ export default () => {
               emailTheme={emailTheme}
               setLoading={setLoading}
               errors={errors}
+              passportURL={passportURL}
             />
           </Tab.Panels>
         </Tab.Group>

diff --git a/platform/email/emailTemplate.ts b/platform/email/emailTemplate.ts
@@ -69,7 +69,7 @@ const EmailTemplateBase = (
   content: string,
   subject: string
 ) => {
-  const { logoURL, address, contactURL, termsURL, privacyURL, appName } = params
+  const { logoURL, address, contactURL, termsURL, privacyURL } = params
   return {
     contentType: 'text/html' as EmailContentType,
     subject,
@@ -264,14 +264,17 @@ export const EmailTemplateOTP = (
   email: string,
   state: string,
   passportURL: string,
-  params: EmailTemplateParams
+  params: EmailTemplateParams,
+  preview: boolean = false
 ): EmailContent => {
   const content = `
     <div class="heading" style="font-size: 36px; font-weight: bold; line-height: 44px; margin-bottom: 16px;">Confirm Your Email Address</div>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please copy the code below into the email verification screen.</p>
     <div style="width: 100%; text-align: center; font-size: 46px; font-weight: bold; border-radius: 8px; margin-top: 20px; margin-bottom: 20px; padding: 15px 0; background-color: #f3f4f6;" id="passcode">${passcode}</div>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Or submit the code by clicking button below</p>
-    <a class="primary-button" style="margin-top: 20px; margin-bottom: 20px; padding: 13px 25px; justify-content: center; align-items: center; align-self: stretch; border-radius: 6px; background: #6366f1; color: #ffffff; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-decoration: none; display: block; text-align: center;" href="${passportURL}/authenticate/${clientId}/email/verify?email=${email}&state=${state}&code=${passcode}">Verify Email Address</a>
+    <a class="primary-button" style="margin-top: 20px; margin-bottom: 20px; padding: 13px 25px; justify-content: center; align-items: center; align-self: stretch; border-radius: 6px; background: #6366f1; color: #ffffff; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-decoration: none; display: block; text-align: center; ${
+      preview ? 'pointer-events: none;' : ''
+    }" href="${passportURL}/authenticate/${clientId}/email/verify?email=${email}&state=${state}&code=${passcode}">Verify Email Address</a>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">Please note: the code will be valid for the next 10 minutes.</p>
     <p style="font-size: 16px; font-weight: normal; line-height: 24px; margin-bottom: 16px;">
       If you didn&apos;t request this email, there&apos;s nothing to worry about - you can safely ignore it.