From 61b1cc614554b1f69caaef589f781e4f690c4bcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Boris=20P=C3=B6hland?= Date: Sat, 31 Aug 2024 11:40:10 +0200 Subject: [PATCH] event email 2 --- src/email.tsx | 1 + src/email/event-email-2.tsx | 242 ++++++++++++++++++++++++++++++++++++ src/email/utils.tsx | 12 +- 3 files changed, 254 insertions(+), 1 deletion(-) create mode 100644 src/email/event-email-2.tsx diff --git a/src/email.tsx b/src/email.tsx index 1e2c797..ee7f342 100644 --- a/src/email.tsx +++ b/src/email.tsx @@ -1,5 +1,6 @@ export * from './email/email' export * from './email/event-email' +export * from './email/event-email-2' export * from './email/types' export { renderGenericEmail, diff --git a/src/email/event-email-2.tsx b/src/email/event-email-2.tsx new file mode 100644 index 0000000..dbc8b62 --- /dev/null +++ b/src/email/event-email-2.tsx @@ -0,0 +1,242 @@ +import React, { createElement, type ComponentProps } from 'react' + +import { + Body, + Button, + Container, + Heading, + Img, + Link, + Section, + Text, +} from '@react-email/components' +import { createTranslator } from 'use-intl' + +import { getMapsLink, getOnlineLocation } from '../utils' +import type { IEvent } from './types' +import type { IHost, Translations, WithUnsubscribeToken } from './utils' +import { + bodyStyle, + buttonStyle, + Center, + defaultHost, + GeneralEmail, + getHost, + headingStyle, + linkStyle, + MEDIA, + renderGenericEmail, + smallHeadingStyle, +} from './utils' + +const translations = { + namespace: '', + translations: { + en: { + event: { + meta: 'Your {eventName} Ticket is Here – Claim Now!', + title: 'Redeem your {eventName} Ticket:', + description: + "Dear {name},

We're excited to have you join us at the {eventName}! Please click the button below to redeem your ticket and secure your spot:", + action: 'Access your ticket here', + qr: 'If you have trouble accessing the ticket on the website, use the QR Code attached to this email to pass the check-in.', + info: 'For more information and updates, visit our website. If you have any questions, feel free to reach out to us via email.', + maps: 'Open in Google Maps', + footer: '❤️ Thank you for using XOXNO!', + }, + }, + }, +} as const satisfies Translations + +type IProps = { + host?: IHost + name: string + event: IEvent + style?: { + backgroundColor: string + } +} + +const messages = translations.translations.en + +const EventEmail = ({ + host = defaultHost, + event, + name, + style = { backgroundColor: '#121212' }, + unsubscribeToken, +}: IProps & WithUnsubscribeToken) => { + const t = createTranslator({ + locale: 'en', + messages, + namespace: 'event', + }) + + const HOST = getHost(host) + + const href = `${HOST}/event/${event.eventId}?guest=${event.ticketId}` + + const mapsLink = getMapsLink(event.location) + + return ( + + + +
+
+ XOXNO Logo +
+
+
+
+ + {t('title', { eventName: event.name })} + + + {t.rich('description', { + eventName: event.name, + name, + br: () =>
, + })} +
+
+
+ Picture of ticket +
+
+
+
+ + + + + + + + +
+ Info Icon + + + {t.rich('qr', { b: (chunks) => {chunks} })} + +
+
+
+
+ + {event.time} + +
+ + + + + + + +
+ Location pin + + + {event.location.onlineLink + ? getOnlineLocation(event.location.onlineLink) + : event.location.address} + +
+ {event.location.address && event.location.placeId && ( + + {t('maps')} + + )} +
+
+
+ + {t.rich('info', { + xoxnolink: (children) => ( + + {children} + + ), + emaillink: (children) => ( + + {children} + + ), + })} + + + {t('footer')} + +
+
+ +
+ ) +} + +export const renderEventEmail2 = async ( + props: ComponentProps +) => { + const Email = createElement(EventEmail, props, null) + + return renderGenericEmail(Email) +} diff --git a/src/email/utils.tsx b/src/email/utils.tsx index 67930c0..4136a91 100644 --- a/src/email/utils.tsx +++ b/src/email/utils.tsx @@ -150,10 +150,20 @@ export const headingStyle = { textAlign: 'center', fontSize: '28px', fontStyle: 'normal', - fontWeight: 600, + fontWeight: '600', lineHeight: '36px', } satisfies CSSProperties +export const smallHeadingStyle = { + color: 'var(--color-palettes-primary-text-fill, #FFF)', + fontFamily: `Button, ${fallbackFont}`, + textAlign: 'center', + fontSize: '19px', + fontStyle: 'normal', + fontWeight: '500', + lineHeight: '26px', +} satisfies CSSProperties + export const linkStyle = { color: 'var(--color-palettes-lime-fill, #AEFB4F)', fontFamily: `Body, ${fallbackFont}`,