= {
+ invitation: 'Team',
+ request: 'Request',
+ billing: 'Billing',
+ newsletter: 'Newsletter',
+ success: 'Success',
+ listing: 'Listing',
+ appointment: 'Appointment',
+ security: 'Security',
+}
+
+export function BaseEmailShell({
+ title,
+ eyebrow,
+ category,
+ children,
+}: BaseEmailShellProps) {
+ return (
+
+
+
+
+ {eyebrow && {eyebrow}
}
+ {title}
+ {children}
+
+
+
+
Hi {recipientName},
+
+ You have been invited to join the {teamName} workspace
+ on Yaltopia Home as {role}.
+
+
+
+ If the button does not work, paste this link into your browser:{' '}
+ {inviteUrl}
+
+
+ )
+}
+
+export interface PropertyFoundEmailProps extends CommonEmailProps {
+ propertyTitle: string
+ address: string
+ price: string
+ link: string
+}
+
+export function PropertyFoundRequestEmail(props: PropertyFoundEmailProps) {
+ const { recipientName, propertyTitle, address, price, link } = props
+ return (
+
+ Hi {recipientName},
+
+ Good news — a new property matches your saved search on Yaltopia Home.
+
+
+
Property match
+
+ Title
+ {propertyTitle}
+
+
+ Address
+ {address}
+
+
+ Guide price
+ {price}
+
+
Hi {recipientName},
+
+ Thanks for sharing what you are looking for. Our team will start
+ searching and notify you as soon as we have a match.
+
+
+
Request summary
+
+ Budget
+ {budget}
+
+
+ Locations
+ {locations}
+
+
+ Bedrooms
+ {bedrooms}
+
+
+ Reference
+ {ref}
+
+
+ You can update your request at any time from your dashboard.
+
+
+ )
+}
+
+export interface BillReminderEmailProps extends CommonEmailProps {
+ period: string
+ rent?: string
+ water?: string
+ security?: string
+ electric?: string
+ total: string
+ dueDate: string
+ paymentUrl?: string
+ bankDetails?: {
+ bank: string
+ accountName: string
+ accountNumber: string
+ reference: string
+ }
+}
+
+export function BillPaymentReminderEmail(props: BillReminderEmailProps) {
+ const {
+ recipientName,
+ period,
+ rent,
+ water,
+ security,
+ electric,
+ total,
+ dueDate,
+ paymentUrl,
+ bankDetails,
+ } = props
+ return (
+
+ Hi {recipientName},
+
+ This is a reminder that your housing charges for {period}{' '}
+ are due on {dueDate}.
+
+
+
Charges
+ {rent && (
+
+ Rent
+ {rent}
+
+ )}
+ {water && (
+
+ Water
+ {water}
+
+ )}
+ {security && (
+
+ Security
+ {security}
+
+ )}
+ {electric && (
+
+ Electric
+ {electric}
+
+ )}
+
+ Total due
+ {total}
+
+
+ {paymentUrl ? (
+
+ Pay online
+
+ ) : (
+
+ Pay using the bank details below and include your reference.
+
+ )}
+
+
Bank: {bankDetails.bank}
+
Account name: {bankDetails.accountName}
+
Account number: {bankDetails.accountNumber}
+
Reference: {bankDetails.reference}
+
+ If you have already paid, you can ignore this reminder.
+
+
+ )
+}
+
+export interface NewsletterEmailProps extends CommonEmailProps {
+ title: string
+ intro: string
+ articles: { title: string; description: string }[]
+}
+
+export function NewsletterEmail(props: NewsletterEmailProps) {
+ const { recipientName, title, intro, articles } = props
+ return (
+
+ Hi {recipientName},
+ {intro}
+ {articles.map((article) => (
+
+
{article.title}
+
{article.description}
+
+ You are receiving this email because you are subscribed to the Yaltopia
+ Home newsletter. You can manage your email preferences from your
+ account.
+
+
+ )
+}
+
+export interface OwnerSuccessEmailProps extends CommonEmailProps {
+ propertyTitle: string
+ address: string
+ outcome: 'sold' | 'rented'
+ price: string
+}
+
+export function OwnerSuccessEmail(props: OwnerSuccessEmailProps) {
+ const { recipientName, propertyTitle, address, outcome, price } = props
+ return (
+
+ Dear {recipientName},
+
+ We’re excited to share that your property on Yaltopia Home has{' '}
+ {outcome}.
+
+
+
Property
+
+ Title
+ {propertyTitle}
+
+
+ Address
+ {address}
+
+
+
+ {outcome === 'sold' ? 'Sale price' : 'Rental amount'}
+
+ {price}
+
+
+ Our team will follow up shortly with settlement details and next
+ steps.
+
+
+ )
+}
+
+export interface ListingApprovedEmailProps extends CommonEmailProps {
+ propertyTitle: string
+ address: string
+ publicUrl: string
+}
+
+export function ListingApprovedEmail(props: ListingApprovedEmailProps) {
+ const { recipientName, propertyTitle, address, publicUrl } = props
+ return (
+
+ Hi {recipientName},
+
+ Your property listing has been reviewed and approved. It is now visible
+ to the public on Yaltopia Home.
+
+
+
Listing details
+
+ Title
+ {propertyTitle}
+
+
+ Address
+ {address}
+
+
Hi {recipientName},
+
+ Your appointment has been scheduled. Here are the details:
+
+
+
Appointment
+
+ Date
+ {date}
+
+
+ Time
+
+ {time} ({timezone})
+
+
+
+ Location
+ {location}
+
+
+ Agent
+ {agentName}
+
+
+ Please arrive a few minutes early. You can reschedule or cancel from
+ your dashboard.
+
+
+ )
+}
+
+export interface PasswordResetEmailProps extends CommonEmailProps {
+ resetUrl: string
+ expiresInMinutes: number
+}
+
+export function PasswordResetEmail(props: PasswordResetEmailProps) {
+ const { recipientName, resetUrl, expiresInMinutes } = props
+ return (
+
+ Hi {recipientName},
+
+ We received a request to reset the password for your Yaltopia Home
+ account. Click the button below to choose a new password.
+
+
+
+ This link will expire in {expiresInMinutes} minutes. If you did not
+ request a password reset, you can safely ignore this email.
+
+
+ )
+}
+
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..e99efc5
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,39 @@
+:root {
+ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
+ -system-ui, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+ color: #050505;
+ background-color: #0b0b0b;
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
+ background: radial-gradient(circle at top, #1f2937 0, #020617 55%);
+ color: inherit;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+button {
+ font-family: inherit;
+}
+
+#root {
+ min-height: 100vh;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..a9b5a59
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})