From 6c63b91afd9a753735ed29f65e7d43b2519d29b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckirukib=E2=80=9D?= <“kirubeljkl679@gmail.com”> Date: Thu, 12 Mar 2026 00:53:32 +0300 Subject: [PATCH] feat: footer social links, cancel appointment button, Resend-ready docs Made-with: Cursor --- README.md | 52 ++++++++++++++++++++++++----- src/email/BaseEmailShell.tsx | 64 ++++++++++++++++++++++++++++++++++-- src/email/email.css | 49 ++++++++++++++++++++++++++- src/email/sampleData.ts | 1 + src/email/templates.tsx | 12 +++++-- 5 files changed, 163 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index c47068d..52f2faa 100644 --- a/README.md +++ b/README.md @@ -38,36 +38,70 @@ All templates are wrapped with `BaseEmailShell`, which lives in `src/email/BaseE ### Using with Resend -These templates are written as plain React components so they can be adapted to Resend in several ways: +These templates are **ready to use with Resend**. They are plain React components that render to static HTML with: -1. **Copy JSX directly** into a dedicated Resend email project that uses React rendering (e.g. with `@react-email/components` or your own renderer). -2. **Render to static HTML** in a Node script (using `react-dom/server`) and paste that HTML into Resend's dashboard as a custom template. - The preview app now has an **HTML tab** which shows the full HTML (including ``) for the currently selected template so you can copy it directly. -3. Use this app only for visual QA, while you keep the production copies of these components in your backend or email-service repo. +- **Footer**: Social links (Instagram, X, YouTube, Facebook, LinkedIn), "Powered by Yaltopia Home", and a verification link. Override links via `socialLinks` on `BaseEmailShell`. +- **Logo**: Pass `logoUrl` (absolute URL) when sending so the logo loads in email clients (e.g. `https://yaltopia.home/logo.svg`). +- **Appointment email**: Includes "Add to calendar" and **"Cancel appointment"** buttons; pass `calendarUrl` and `cancelUrl` from your backend. -When integrating, replace the sample props in `sampleData.ts` with real data and ensure links (payment, calendar, reset, etc.) are generated by your backend. +You can use them in two ways: -#### Example: sending via Resend with React templates +1. **React (recommended)** – Use the `react` option in `resend.emails.send()` and pass the template component with props. Resend will render to HTML. +2. **HTML** – Use the **HTML** tab in the preview app to copy the full HTML for a template, then use it as a custom template in Resend (replace placeholders with your variables). + +When integrating, replace sample props with real data and generate all URLs (payment, calendar, cancel, reset) from your backend. + +#### Example: sending via Resend with React ```ts import { Resend } from 'resend' -import { InvitationTeamMemberEmail } from './src/email/templates' +import { InvitationTeamMemberEmail, AppointmentBookedEmail } from './src/email/templates' +import { BaseEmailShell } from './src/email/BaseEmailShell' const resend = new Resend(process.env.RESEND_API_KEY) +// Optional: override footer social links and logo for all emails +const sharedShellProps = { + socialLinks: { + instagram: 'https://instagram.com/youraccount', + twitter: 'https://x.com/youraccount', + facebook: 'https://facebook.com/youraccount', + }, + logoUrl: 'https://yaltopia.home/assets/logo.svg', +} + await resend.emails.send({ from: 'Yaltopia Home ', to: 'user@example.com', subject: 'You have been invited to Yaltopia Home', react: ( ), }) + +// Appointment with calendar + cancel +await resend.emails.send({ + from: 'Yaltopia Home ', + to: 'user@example.com', + subject: 'Your viewing appointment is confirmed', + react: ( + + ), +}) ``` diff --git a/src/email/BaseEmailShell.tsx b/src/email/BaseEmailShell.tsx index 163dda4..99b4aa9 100644 --- a/src/email/BaseEmailShell.tsx +++ b/src/email/BaseEmailShell.tsx @@ -11,11 +11,32 @@ export type EmailCategory = | 'appointment' | 'security' +/** Optional social links for the footer. Omit any you do not use. */ +export interface SocialLinks { + instagram?: string + twitter?: string + youtube?: string + facebook?: string + linkedin?: string +} + +const DEFAULT_SOCIAL_LINKS: SocialLinks = { + instagram: 'https://instagram.com/yaltopiahome', + twitter: 'https://x.com/yaltopiahome', + youtube: 'https://youtube.com/@yaltopiahome', + facebook: 'https://facebook.com/yaltopiahome', + linkedin: 'https://linkedin.com/company/yaltopiahome', +} + interface BaseEmailShellProps { title: string eyebrow?: string category: EmailCategory children: ReactNode + /** Override default social links in the footer. Pass from Resend with your real URLs. */ + socialLinks?: SocialLinks + /** Full URL to the logo image. For Resend, use an absolute URL (e.g. https://yaltopia.home/logo.svg). */ + logoUrl?: string } const categoryLabel: Record = { @@ -34,7 +55,17 @@ export function BaseEmailShell({ eyebrow, category, children, + socialLinks: socialLinksProp, + logoUrl = '/YaltopiaHomesLogo.svg', }: BaseEmailShellProps) { + const links = { ...DEFAULT_SOCIAL_LINKS, ...socialLinksProp } + const hasSocial = + links.instagram || + links.twitter || + links.youtube || + links.facebook || + links.linkedin + return (
@@ -42,7 +73,7 @@ export function BaseEmailShell({
Yaltopia Home @@ -57,11 +88,40 @@ export function BaseEmailShell({ {children}