## Yaltopia Home – Email Template Studio This project is a small React app used to **preview transactional email templates** that will be sent through Resend for Yaltopia Home. All templates share a **white + black theme** with a strong card layout and a \"Powered by Yaltopia Home\" footer, similar to the design references you provided. ### Tech stack - React + TypeScript (Vite) - Plain CSS for layout and email styling (no CSS framework) ### Running locally ```bash npm install npm run dev ``` Then open the printed URL (usually `http://localhost:5173`) in your browser. The left sidebar lets you switch between templates, and the preview panel shows how each email looks on **desktop** and **mobile** widths. ### Email templates All templates live in `src/email/templates.tsx` and are wired with sample data in `src/email/sampleData.ts`. - **InvitationTeamMemberEmail** – invitation for new team members to join a Yaltopia Home workspace. - **PropertyRequestReceivedEmail** – confirms a property search request has been received. - **PropertyFoundRequestEmail** – notifies when a matching property has been found. - **BillPaymentReminderEmail** – reminder for rent, water, security, and electric charges with either a payment link or bank details. - **NewsletterEmail** – simple newsletter layout with multiple article cards. - **OwnerSuccessEmail** – sent to owners after a successful sale or rental. - **ListingApprovedEmail** – confirms that a listing is approved and visible to the public. - **AppointmentBookedEmail** – confirms a viewing appointment and provides an \"Add to calendar\" link. - **PasswordResetEmail** – password reset flow with short-lived link copy. All templates are wrapped with `BaseEmailShell`, which lives in `src/email/BaseEmailShell.tsx` and provides the shared header, frame, and footer. ### Using with Resend These templates are written as plain React components so they can be adapted to Resend in several ways: 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. When integrating, replace the sample props in `sampleData.ts` with real data and ensure links (payment, calendar, reset, etc.) are generated by your backend. #### Example: sending via Resend with React templates ```ts import { Resend } from 'resend' import { InvitationTeamMemberEmail } from './src/email/templates' const resend = new Resend(process.env.RESEND_API_KEY) await resend.emails.send({ from: 'Yaltopia Home ', to: 'user@example.com', subject: 'You have been invited to Yaltopia Home', react: ( ), }) ``` # React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ## React Compiler The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Remove tseslint.configs.recommended and replace with this tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules tseslint.configs.stylisticTypeChecked, // Other configs... ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ```