first commit
Made-with: Cursor
This commit is contained in:
“kirukib”
commit
d22fc69589
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
60
README.md
Normal file
60
README.md
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
# Hotel Email Templates (Resend-ready)
|
||||||
|
|
||||||
|
A simple React app that helps you preview and export branded transactional emails for your hotel booking system.
|
||||||
|
|
||||||
|
It generates:
|
||||||
|
- `html` (Resend-ready, inline/table-based)
|
||||||
|
- `text` (plain-text version)
|
||||||
|
- `subject` (based on the selected template + your variables)
|
||||||
|
|
||||||
|
## Run locally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open the shown local URL.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
1. **Brand identity (left panel)**
|
||||||
|
- Replace `Logo URL`
|
||||||
|
- Set `Primary color` (CTA/button)
|
||||||
|
- Set `Secondary color` (borders/headings)
|
||||||
|
- Set footer contact details (address/email/phones)
|
||||||
|
|
||||||
|
2. **Pick a template**
|
||||||
|
- `Booked Room`
|
||||||
|
- `Point Reward`
|
||||||
|
- `Raffle Entered`
|
||||||
|
- `Prize Won`
|
||||||
|
- `Laundry Service`
|
||||||
|
- `Order Rating Request`
|
||||||
|
- `Stay Rating Request`
|
||||||
|
- Plus: `Booking Cancelled`, `Check-in Reminder`
|
||||||
|
|
||||||
|
3. **Fill template variables**
|
||||||
|
- Each template has its own variable fields (guest name, booking ID, dates, etc.)
|
||||||
|
|
||||||
|
4. **Preview + export**
|
||||||
|
- The app renders the email in the preview pane.
|
||||||
|
- Use **Export** to copy/download the **HTML** and **Plain text** plus the **Subject**.
|
||||||
|
|
||||||
|
## Resend payload example
|
||||||
|
|
||||||
|
When sending via Resend, include at least one of `html` or `text` (recommended: both).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
await resend.emails.send({
|
||||||
|
to: 'guest@example.com',
|
||||||
|
subject,
|
||||||
|
html,
|
||||||
|
text,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- The app uses `@react-email/render` to generate email-safe HTML.
|
||||||
|
- Branding is applied via the theme fields you edit in the UI.
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>yaltopia-hotel-email</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3542
package-lock.json
generated
Normal file
3542
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "yaltopia-hotel-email",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@react-email/components": "^1.0.11",
|
||||||
|
"@react-email/render": "^2.0.5",
|
||||||
|
"react": "^19.2.4",
|
||||||
|
"react-dom": "^19.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.4",
|
||||||
|
"@types/node": "^24.12.0",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"eslint": "^9.39.4",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.4.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.57.0",
|
||||||
|
"vite": "^8.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
184
src/App.css
Normal file
184
src/App.css
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
154
src/App.tsx
Normal file
154
src/App.tsx
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
|
import { brandDefaults } from './brand/brandDefaults'
|
||||||
|
import type { Brand } from './email/types'
|
||||||
|
import { interpolate } from './email/interpolate'
|
||||||
|
import { renderEmailTemplate } from './email/render'
|
||||||
|
import { BrandEditor } from './components/BrandEditor'
|
||||||
|
import { TemplatePicker } from './components/TemplatePicker'
|
||||||
|
import { VariablesForm } from './components/VariablesForm'
|
||||||
|
import { EmailPreview } from './components/EmailPreview'
|
||||||
|
import { ExportPanel } from './components/ExportPanel'
|
||||||
|
import { templateRegistry } from './templates/templates'
|
||||||
|
|
||||||
|
function initDataForTemplate(templateVars: { key: string; defaultValue?: string }[]) {
|
||||||
|
// Keep defaults stable when brand changes; this function only depends on template.
|
||||||
|
const next: Record<string, string> = {}
|
||||||
|
for (const v of templateVars) next[v.key] = v.defaultValue ?? ''
|
||||||
|
return next
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const templates = templateRegistry
|
||||||
|
const [brand, setBrand] = useState<Brand>(brandDefaults)
|
||||||
|
const [templateId, setTemplateId] = useState<string>(templates[0]?.id ?? '')
|
||||||
|
const template = useMemo(() => templates.find((t) => t.id === templateId) ?? templates[0], [templateId, templates])
|
||||||
|
|
||||||
|
const [data, setData] = useState<Record<string, string>>(() => {
|
||||||
|
return initDataForTemplate(template?.variables ?? [])
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!template) return
|
||||||
|
setData(initDataForTemplate(template.variables))
|
||||||
|
}, [templateId])
|
||||||
|
|
||||||
|
const subject = useMemo(() => {
|
||||||
|
if (!template) return ''
|
||||||
|
return interpolate(template.subjectTemplate, { ...data, hotelName: brand.hotelName })
|
||||||
|
}, [template, data, brand.hotelName])
|
||||||
|
|
||||||
|
const [html, setHtml] = useState<string>('')
|
||||||
|
const [text, setText] = useState<string>('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!template) return
|
||||||
|
|
||||||
|
let cancelled = false
|
||||||
|
const handle = setTimeout(async () => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
try {
|
||||||
|
const res = await renderEmailTemplate({ brand, template, data })
|
||||||
|
if (cancelled) return
|
||||||
|
setHtml(res.html)
|
||||||
|
setText(res.text)
|
||||||
|
} catch (e) {
|
||||||
|
if (cancelled) return
|
||||||
|
setError(e instanceof Error ? e.message : 'Failed to render template')
|
||||||
|
setHtml('')
|
||||||
|
setText('')
|
||||||
|
} finally {
|
||||||
|
if (cancelled) return
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, 350)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true
|
||||||
|
clearTimeout(handle)
|
||||||
|
}
|
||||||
|
}, [brand, templateId, data])
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
page: {
|
||||||
|
minHeight: '100vh',
|
||||||
|
padding: 18,
|
||||||
|
background: '#0b1220',
|
||||||
|
color: '#e5e7eb',
|
||||||
|
fontFamily:
|
||||||
|
'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '420px 1fr',
|
||||||
|
gap: 16,
|
||||||
|
alignItems: 'start',
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
background: '#0f172a',
|
||||||
|
border: '1px solid rgba(148, 163, 184, 0.25)',
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 14,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
margin: 0,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#f1f5f9',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles.page}>
|
||||||
|
<div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gap: 16 }}>
|
||||||
|
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 18, fontWeight: 800 }}>Resend-ready Email Templates</div>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.75, marginTop: 4 }}>
|
||||||
|
Edit branding + variables, preview the branded email, then export HTML + plain text.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.75 }}>
|
||||||
|
Template: <strong style={{ color: '#fff' }}>{template?.name ?? '-'}</strong>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={styles.grid}>
|
||||||
|
<aside style={styles.card}>
|
||||||
|
<div style={{ display: 'grid', gap: 14 }}>
|
||||||
|
<BrandEditor brand={brand} onChange={setBrand} />
|
||||||
|
<TemplatePicker templates={templates} value={templateId} onChange={setTemplateId} />
|
||||||
|
{template ? <VariablesForm template={template} data={data} onChange={setData} /> : null}
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gap: 8 }}>
|
||||||
|
<div style={{ ...styles.sectionTitle, fontSize: 14 }}>Status</div>
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ fontSize: 13, opacity: 0.9 }}>Rendering email...</div>
|
||||||
|
) : error ? (
|
||||||
|
<div style={{ fontSize: 13, color: '#fca5a5', whiteSpace: 'pre-wrap' }}>{error}</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ fontSize: 13, opacity: 0.85 }}>Preview generated.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main style={styles.card}>
|
||||||
|
{template ? (
|
||||||
|
<div style={{ display: 'grid', gap: 16 }}>
|
||||||
|
<EmailPreview html={html} loading={loading} />
|
||||||
|
|
||||||
|
<ExportPanel subject={subject} html={html} text={text} loading={loading} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>No template selected.</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
18
src/brand/brandDefaults.ts
Normal file
18
src/brand/brandDefaults.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import type { Brand } from '../email/types'
|
||||||
|
|
||||||
|
export const brandDefaults: Brand = {
|
||||||
|
hotelName: 'Shitaye Suite Hotel',
|
||||||
|
logoUrl: '',
|
||||||
|
|
||||||
|
primaryColor: '#1d4ed8',
|
||||||
|
secondaryColor: '#0f172a',
|
||||||
|
textColor: '#111827',
|
||||||
|
backgroundColor: '#f8fafc',
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
address: 'Ethio China Street, Kirkos, Addis Ababa, Ethiopia',
|
||||||
|
email: 'reservation@shitayesuitehotel.com',
|
||||||
|
phone1: '+251 96 688 4400',
|
||||||
|
phone2: '+251 11 46 21000',
|
||||||
|
},
|
||||||
|
}
|
||||||
124
src/components/BrandEditor.tsx
Normal file
124
src/components/BrandEditor.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
import type { Brand } from '../email/types'
|
||||||
|
|
||||||
|
type BrandEditorProps = {
|
||||||
|
brand: Brand
|
||||||
|
onChange: (next: Brand) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
function ColorField({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
onChange: (v: string) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>{label}</span>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
style={{ width: 44, height: 34, padding: 0, border: '1px solid #e5e7eb' }}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BrandEditor({ brand, onChange }: BrandEditorProps) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'grid', gap: 14 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<h2 style={{ margin: 0, fontSize: 14 }}>Brand identity</h2>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.7 }}>Used inside every email template</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Hotel name</span>
|
||||||
|
<input
|
||||||
|
value={brand.hotelName}
|
||||||
|
onChange={(e) => onChange({ ...brand, hotelName: e.target.value })}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Logo URL</span>
|
||||||
|
<input
|
||||||
|
value={brand.logoUrl}
|
||||||
|
onChange={(e) => onChange({ ...brand, logoUrl: e.target.value })}
|
||||||
|
placeholder="https://..."
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 14 }}>
|
||||||
|
<ColorField
|
||||||
|
label="Primary color (CTA button)"
|
||||||
|
value={brand.primaryColor}
|
||||||
|
onChange={(v) => onChange({ ...brand, primaryColor: v })}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label="Secondary color (borders/headings)"
|
||||||
|
value={brand.secondaryColor}
|
||||||
|
onChange={(v) => onChange({ ...brand, secondaryColor: v })}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label="Text color"
|
||||||
|
value={brand.textColor}
|
||||||
|
onChange={(v) => onChange({ ...brand, textColor: v })}
|
||||||
|
/>
|
||||||
|
<ColorField
|
||||||
|
label="Email background"
|
||||||
|
value={brand.backgroundColor}
|
||||||
|
onChange={(v) => onChange({ ...brand, backgroundColor: v })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gap: 10, padding: '12px 12px', borderRadius: 12, border: '1px solid #e5e7eb' }}>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.8 }}>Footer</div>
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Address</span>
|
||||||
|
<input
|
||||||
|
value={brand.footer.address || ''}
|
||||||
|
onChange={(e) => onChange({ ...brand, footer: { ...brand.footer, address: e.target.value } })}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Email</span>
|
||||||
|
<input
|
||||||
|
value={brand.footer.email || ''}
|
||||||
|
onChange={(e) => onChange({ ...brand, footer: { ...brand.footer, email: e.target.value } })}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Phone 1</span>
|
||||||
|
<input
|
||||||
|
value={brand.footer.phone1 || ''}
|
||||||
|
onChange={(e) => onChange({ ...brand, footer: { ...brand.footer, phone1: e.target.value } })}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Phone 2</span>
|
||||||
|
<input
|
||||||
|
value={brand.footer.phone2 || ''}
|
||||||
|
onChange={(e) => onChange({ ...brand, footer: { ...brand.footer, phone2: e.target.value } })}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
src/components/EmailPreview.tsx
Normal file
22
src/components/EmailPreview.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
export function EmailPreview({ html, loading }: { html: string; loading: boolean }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'grid', gap: 10 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<h2 style={{ margin: 0, fontSize: 14 }}>Preview</h2>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.7 }}>{loading ? 'Rendering...' : 'Resend-ready HTML'}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ border: '1px solid #e5e7eb', borderRadius: 12, overflow: 'hidden' }}>
|
||||||
|
{html ? (
|
||||||
|
<iframe
|
||||||
|
title="Email preview"
|
||||||
|
srcDoc={html}
|
||||||
|
style={{ width: '100%', height: 720, border: '0' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: 18, opacity: 0.7 }}>Generate a preview to see the email here.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
101
src/components/ExportPanel.tsx
Normal file
101
src/components/ExportPanel.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
export function ExportPanel({
|
||||||
|
subject,
|
||||||
|
html,
|
||||||
|
text,
|
||||||
|
loading,
|
||||||
|
}: {
|
||||||
|
subject: string
|
||||||
|
html: string
|
||||||
|
text: string
|
||||||
|
loading: boolean
|
||||||
|
}) {
|
||||||
|
const copy = async (value: string) => {
|
||||||
|
await navigator.clipboard.writeText(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const download = (filename: string, contents: string, mime: string) => {
|
||||||
|
const blob = new Blob([contents], { type: mime })
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
const a = document.createElement('a')
|
||||||
|
a.href = url
|
||||||
|
a.download = filename
|
||||||
|
document.body.appendChild(a)
|
||||||
|
a.click()
|
||||||
|
a.remove()
|
||||||
|
URL.revokeObjectURL(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'grid', gap: 14 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<h2 style={{ margin: 0, fontSize: 14 }}>Export (Resend payload)</h2>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.7 }}>{loading ? 'Rendering...' : 'Copy or download'}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Subject</span>
|
||||||
|
<textarea
|
||||||
|
value={subject}
|
||||||
|
readOnly
|
||||||
|
style={{ width: '100%', minHeight: 44, padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 10 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
|
||||||
|
<div style={{ display: 'grid', gap: 8 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.8 }}>HTML</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => copy(html)}
|
||||||
|
style={{ padding: '8px 10px', borderRadius: 10, border: '1px solid #e5e7eb', background: '#fff', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => download('email.html', html, 'text/html;charset=utf-8')}
|
||||||
|
style={{ padding: '8px 10px', borderRadius: 10, border: '1px solid #e5e7eb', background: '#fff', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
value={html}
|
||||||
|
readOnly
|
||||||
|
style={{ width: '100%', minHeight: 200, padding: '10px 10px', border: '1px solid #e5e7eb', borderRadius: 10, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace', fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gap: 8 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.8 }}>Plain text</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => copy(text)}
|
||||||
|
style={{ padding: '8px 10px', borderRadius: 10, border: '1px solid #e5e7eb', background: '#fff', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => download('email.txt', text, 'text/plain;charset=utf-8')}
|
||||||
|
style={{ padding: '8px 10px', borderRadius: 10, border: '1px solid #e5e7eb', background: '#fff', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
value={text}
|
||||||
|
readOnly
|
||||||
|
style={{ width: '100%', minHeight: 140, padding: '10px 10px', border: '1px solid #e5e7eb', borderRadius: 10, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace', fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
src/components/TemplatePicker.tsx
Normal file
28
src/components/TemplatePicker.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import type { EmailTemplateDefinition } from '../email/types'
|
||||||
|
|
||||||
|
export function TemplatePicker({
|
||||||
|
templates,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
templates: EmailTemplateDefinition[]
|
||||||
|
value: string
|
||||||
|
onChange: (id: string) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>Email template</span>
|
||||||
|
<select
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
style={{ padding: '10px 10px', border: '1px solid #e5e7eb', borderRadius: 10 }}
|
||||||
|
>
|
||||||
|
{templates.map((t) => (
|
||||||
|
<option key={t.id} value={t.id}>
|
||||||
|
{t.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
}
|
||||||
56
src/components/VariablesForm.tsx
Normal file
56
src/components/VariablesForm.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
import type { EmailTemplateDefinition, VariableField } from '../email/types'
|
||||||
|
|
||||||
|
function FieldInput({
|
||||||
|
field,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
field: VariableField
|
||||||
|
value: string
|
||||||
|
onChange: (v: string) => void
|
||||||
|
}) {
|
||||||
|
const type = field.inputType ?? 'text'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.8 }}>{field.label}</span>
|
||||||
|
<input
|
||||||
|
type={type === 'number' ? 'number' : type === 'date' ? 'date' : 'text'}
|
||||||
|
value={value}
|
||||||
|
placeholder={field.placeholder || ''}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
style={{ padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8 }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VariablesForm({
|
||||||
|
template,
|
||||||
|
data,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
template: EmailTemplateDefinition
|
||||||
|
data: Record<string, string>
|
||||||
|
onChange: (next: Record<string, string>) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'grid', gap: 12 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<h2 style={{ margin: 0, fontSize: 14 }}>Template variables</h2>
|
||||||
|
<div style={{ fontSize: 12, opacity: 0.7 }}>{template.variables.length} fields</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
|
||||||
|
{template.variables.map((f) => (
|
||||||
|
<FieldInput
|
||||||
|
key={f.key}
|
||||||
|
field={f}
|
||||||
|
value={data[f.key] ?? ''}
|
||||||
|
onChange={(v) => onChange({ ...data, [f.key]: v })}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
77
src/email/EmailShell.tsx
Normal file
77
src/email/EmailShell.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import type { ReactNode } from 'react'
|
||||||
|
import {
|
||||||
|
Html,
|
||||||
|
Head,
|
||||||
|
Body,
|
||||||
|
Container,
|
||||||
|
Section,
|
||||||
|
Text,
|
||||||
|
Heading,
|
||||||
|
Hr,
|
||||||
|
Img,
|
||||||
|
Preview,
|
||||||
|
} from '@react-email/components'
|
||||||
|
import type { Brand } from './types'
|
||||||
|
|
||||||
|
type EmailShellProps = {
|
||||||
|
brand: Brand
|
||||||
|
title: string
|
||||||
|
previewText: string
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_LOGO_PLACEHOLDER =
|
||||||
|
'https://dummyimage.com/120x40/0f172a/ffffff&text=Shitaye'
|
||||||
|
|
||||||
|
export function EmailShell({ brand, title, previewText, children }: EmailShellProps) {
|
||||||
|
const logoUrl = brand.logoUrl?.trim() ? brand.logoUrl.trim() : DEFAULT_LOGO_PLACEHOLDER
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Html>
|
||||||
|
<Head />
|
||||||
|
<Preview>{previewText}</Preview>
|
||||||
|
<Body style={{ margin: '0', padding: '0', backgroundColor: brand.backgroundColor || '#f8fafc' }}>
|
||||||
|
<Container
|
||||||
|
style={{
|
||||||
|
maxWidth: 560,
|
||||||
|
width: '100%',
|
||||||
|
margin: '0 auto',
|
||||||
|
padding: '0 16px',
|
||||||
|
fontFamily:
|
||||||
|
'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Section style={{ padding: '24px 0 18px', borderBottom: `1px solid ${brand.secondaryColor}` }}>
|
||||||
|
<Img
|
||||||
|
src={logoUrl}
|
||||||
|
width={120}
|
||||||
|
height={40}
|
||||||
|
alt={brand.hotelName}
|
||||||
|
style={{ objectFit: 'contain', display: 'block', margin: '0 0 10px' }}
|
||||||
|
/>
|
||||||
|
<Heading style={{ fontSize: 20, margin: '0', color: brand.textColor }}>{brand.hotelName}</Heading>
|
||||||
|
<Text style={{ margin: '6px 0 0', color: brand.textColor, opacity: 0.9 }}>{title}</Text>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section style={{ padding: '22px 0' }}>{children}</Section>
|
||||||
|
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.2 }} />
|
||||||
|
<Section style={{ padding: '18px 0 28px' }}>
|
||||||
|
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
|
||||||
|
{brand.footer.address ? `${brand.footer.address} ` : ''}
|
||||||
|
{brand.footer.email ? `Email: ${brand.footer.email}` : ''}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ margin: '10px 0 0', color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
|
||||||
|
{brand.footer.phone1 ? `Tel: ${brand.footer.phone1}` : ''}
|
||||||
|
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
|
||||||
|
{brand.footer.phone2 ? `${brand.footer.phone2}` : ''}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ margin: '10px 0 0', color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
|
||||||
|
© {new Date().getFullYear()} {brand.hotelName}. All rights reserved.
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
</Container>
|
||||||
|
</Body>
|
||||||
|
</Html>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
src/email/interpolate.ts
Normal file
9
src/email/interpolate.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export function interpolate(
|
||||||
|
template: string,
|
||||||
|
vars: Record<string, string | undefined>
|
||||||
|
): string {
|
||||||
|
return template.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_m, key) => {
|
||||||
|
const v = vars[String(key)]
|
||||||
|
return v == null ? '' : String(v)
|
||||||
|
})
|
||||||
|
}
|
||||||
19
src/email/render.tsx
Normal file
19
src/email/render.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { render, toPlainText } from '@react-email/render'
|
||||||
|
import type { Brand, EmailTemplateDefinition } from './types'
|
||||||
|
|
||||||
|
export async function renderEmailTemplate(params: {
|
||||||
|
brand: Brand
|
||||||
|
template: EmailTemplateDefinition
|
||||||
|
data: Record<string, string>
|
||||||
|
}): Promise<{ html: string; text: string }> {
|
||||||
|
const { brand, template, data } = params
|
||||||
|
|
||||||
|
const ReactEmail = (
|
||||||
|
<template.Component brand={brand} data={data} />
|
||||||
|
)
|
||||||
|
|
||||||
|
const html = await render(ReactEmail)
|
||||||
|
const text = toPlainText(html)
|
||||||
|
|
||||||
|
return { html, text }
|
||||||
|
}
|
||||||
45
src/email/types.ts
Normal file
45
src/email/types.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import type { ReactElement } from 'react'
|
||||||
|
|
||||||
|
export type BrandFooter = {
|
||||||
|
address?: string
|
||||||
|
email?: string
|
||||||
|
phone1?: string
|
||||||
|
phone2?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Brand = {
|
||||||
|
hotelName: string
|
||||||
|
logoUrl: string
|
||||||
|
|
||||||
|
primaryColor: string
|
||||||
|
secondaryColor: string
|
||||||
|
textColor: string
|
||||||
|
backgroundColor: string
|
||||||
|
|
||||||
|
footer: BrandFooter
|
||||||
|
}
|
||||||
|
|
||||||
|
export type VariableFieldType = 'text' | 'number' | 'date'
|
||||||
|
|
||||||
|
export type VariableField = {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
inputType?: VariableFieldType
|
||||||
|
placeholder?: string
|
||||||
|
defaultValue?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type EmailTemplateComponent = (props: {
|
||||||
|
brand: Brand
|
||||||
|
data: Record<string, string>
|
||||||
|
}) => ReactElement
|
||||||
|
|
||||||
|
export type EmailTemplateDefinition = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
subjectTemplate: string
|
||||||
|
ctaLabel: string
|
||||||
|
ctaHrefTemplate: string
|
||||||
|
variables: VariableField[]
|
||||||
|
Component: EmailTemplateComponent
|
||||||
|
}
|
||||||
27
src/index.css
Normal file
27
src/index.css
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
:root {
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: #0b1220;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -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(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
589
src/templates/templates.tsx
Normal file
589
src/templates/templates.tsx
Normal file
|
|
@ -0,0 +1,589 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { Button } from '@react-email/button'
|
||||||
|
import {
|
||||||
|
Heading,
|
||||||
|
Text,
|
||||||
|
Section,
|
||||||
|
Hr,
|
||||||
|
Link,
|
||||||
|
} from '@react-email/components'
|
||||||
|
|
||||||
|
import type { Brand, EmailTemplateDefinition } from '../email/types'
|
||||||
|
import { EmailShell } from '../email/EmailShell'
|
||||||
|
import { interpolate } from '../email/interpolate'
|
||||||
|
|
||||||
|
const blockStyle = (brand: Brand): React.CSSProperties => ({
|
||||||
|
border: `1px solid ${brand.secondaryColor}`,
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: '14px 14px',
|
||||||
|
backgroundColor: 'rgba(255,255,255,0.8)',
|
||||||
|
})
|
||||||
|
|
||||||
|
const labelStyle = (brand: Brand): React.CSSProperties => ({
|
||||||
|
color: brand.textColor,
|
||||||
|
opacity: 0.7,
|
||||||
|
fontSize: 12,
|
||||||
|
margin: '0 0 2px',
|
||||||
|
})
|
||||||
|
|
||||||
|
const valueStyle = (brand: Brand): React.CSSProperties => ({
|
||||||
|
color: brand.textColor,
|
||||||
|
fontSize: 14,
|
||||||
|
margin: 0,
|
||||||
|
lineHeight: '20px',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
})
|
||||||
|
|
||||||
|
function Field({ brand, label, value }: { brand: Brand; label: string; value: string }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text style={labelStyle(brand)}>{label}</Text>
|
||||||
|
<Text style={valueStyle(brand)}>{value}</Text>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function PrimaryCTA({ brand, href, label }: { brand: Brand; href: string; label: string }) {
|
||||||
|
return (
|
||||||
|
<Section style={{ padding: '18px 0 0' }}>
|
||||||
|
<Button
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
backgroundColor: brand.primaryColor,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontWeight: 600,
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: '12px 18px',
|
||||||
|
fontSize: 14,
|
||||||
|
textDecoration: 'none',
|
||||||
|
display: 'inline-block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
</Section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const templates: EmailTemplateDefinition[] = [
|
||||||
|
{
|
||||||
|
id: 'booked_room',
|
||||||
|
name: 'Booked Room',
|
||||||
|
subjectTemplate: 'Your Shitaye booking is confirmed, {{guestName}}',
|
||||||
|
ctaLabel: 'Manage your booking',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/?bookingId={{bookingId}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Sarah M.' },
|
||||||
|
{ key: 'bookingId', label: 'Booking ID', defaultValue: 'SH-8421' },
|
||||||
|
{ key: 'roomType', label: 'Room type', defaultValue: 'Junior Studio' },
|
||||||
|
{ key: 'checkInDate', label: 'Check-in date', inputType: 'date', defaultValue: '2026-04-15' },
|
||||||
|
{ key: 'checkOutDate', label: 'Check-out date', inputType: 'date', defaultValue: '2026-04-18' },
|
||||||
|
],
|
||||||
|
Component: function BookedRoomEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const roomType = data.roomType || 'Room'
|
||||||
|
const checkInDate = data.checkInDate || '—'
|
||||||
|
const checkOutDate = data.checkOutDate || '—'
|
||||||
|
const bookingId = data.bookingId || ''
|
||||||
|
const href = interpolate('https://shitaye-hotel.kirubeljkl679.workers.dev/?bookingId={{bookingId}}', {
|
||||||
|
bookingId,
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Booking confirmed"
|
||||||
|
previewText={`Thanks ${guestName} — we’ve confirmed your stay at ${brand.hotelName}.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
Booking confirmed
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 10px', color: brand.textColor }}>
|
||||||
|
Hi {guestName},
|
||||||
|
</Text>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
We’ve confirmed your room booking at <strong>{brand.hotelName}</strong>. Below are your stay details.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Booking ID" value={bookingId} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Room type" value={roomType} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Field brand={brand} label="Dates" value={`${checkInDate} → ${checkOutDate}`} />
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="Manage your booking" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
Need help? Reply to this email or contact our reception team.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'point_reward',
|
||||||
|
name: 'Point Reward',
|
||||||
|
subjectTemplate: 'You earned {{pointsEarned}} points at {{hotelName}}, {{guestName}}',
|
||||||
|
ctaLabel: 'View your rewards',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/loyalty?points={{pointsEarned}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Hanna T.' },
|
||||||
|
{ key: 'pointsEarned', label: 'Points earned', inputType: 'number', defaultValue: '120' },
|
||||||
|
{ key: 'newBalance', label: 'New points balance', inputType: 'number', defaultValue: '840' },
|
||||||
|
{ key: 'rewardDescription', label: 'Reward note', defaultValue: 'Thanks for staying with us. Keep booking to unlock premium perks!' },
|
||||||
|
{ key: 'expiryDate', label: 'Expiry date', inputType: 'date', defaultValue: '2027-04-30' },
|
||||||
|
],
|
||||||
|
Component: function PointRewardEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const pointsEarned = data.pointsEarned || '0'
|
||||||
|
const newBalance = data.newBalance || '0'
|
||||||
|
const rewardDescription = data.rewardDescription || ''
|
||||||
|
const expiryDate = data.expiryDate || '—'
|
||||||
|
const href = interpolate(
|
||||||
|
'https://shitaye-hotel.kirubeljkl679.workers.dev/loyalty?points={{pointsEarned}}',
|
||||||
|
{ pointsEarned },
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Rewards update"
|
||||||
|
previewText={`Great news ${guestName} — you earned ${pointsEarned} points.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
You earned {pointsEarned} points
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, you’ve added <strong>{pointsEarned}</strong> loyalty points. Your updated balance is <strong>{newBalance}</strong>.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Points expiry" value={expiryDate} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>
|
||||||
|
{rewardDescription}
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="View your rewards" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
Rewards are our way of saying thank you for choosing {brand.hotelName}.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'raffle_entered',
|
||||||
|
name: 'Raffle Entered',
|
||||||
|
subjectTemplate: 'Raffle entry confirmed: {{raffleName}}',
|
||||||
|
ctaLabel: 'View raffle details',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/raffles/{{raffleName}}?entry={{entryCode}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Daniel K.' },
|
||||||
|
{ key: 'raffleName', label: 'Raffle name', defaultValue: 'FeastVille Lucky Draw' },
|
||||||
|
{ key: 'entryCode', label: 'Entry code', defaultValue: 'FD-3918' },
|
||||||
|
{ key: 'drawDate', label: 'Draw date', inputType: 'date', defaultValue: '2026-05-10' },
|
||||||
|
],
|
||||||
|
Component: function RaffleEnteredEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const raffleName = data.raffleName || 'Raffle'
|
||||||
|
const entryCode = data.entryCode || ''
|
||||||
|
const drawDate = data.drawDate || '—'
|
||||||
|
const href = interpolate(
|
||||||
|
'https://shitaye-hotel.kirubeljkl679.workers.dev/raffles/{{raffleName}}?entry={{entryCode}}',
|
||||||
|
{ raffleName, entryCode },
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="You’re entered"
|
||||||
|
previewText={`Hi ${guestName} — your raffle entry for ${raffleName} is confirmed.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
Entry confirmed
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, your entry for <strong>{raffleName}</strong> is confirmed.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Entry code" value={entryCode} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Field brand={brand} label="Draw date" value={drawDate} />
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="View raffle details" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
Good luck. We’ll contact you if you’re selected.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'prize_won',
|
||||||
|
name: 'Prize Won',
|
||||||
|
subjectTemplate: 'Congratulations {{guestName}}! You won {{prizeName}}',
|
||||||
|
ctaLabel: 'Claim your prize',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/prizes/claim?raffle={{raffleName}}&prize={{prizeName}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Sarah M.' },
|
||||||
|
{ key: 'raffleName', label: 'Raffle name', defaultValue: 'FeastVille Lucky Draw' },
|
||||||
|
{ key: 'prizeName', label: 'Prize name', defaultValue: 'Spa Session for Two' },
|
||||||
|
{ key: 'claimByDate', label: 'Claim by', inputType: 'date', defaultValue: '2026-05-17' },
|
||||||
|
{ key: 'claimSteps', label: 'Claim instructions', defaultValue: '1) Reply to this email; 2) Provide your entry code; 3) Our team will confirm your appointment' },
|
||||||
|
],
|
||||||
|
Component: function PrizeWonEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const raffleName = data.raffleName || 'Raffle'
|
||||||
|
const prizeName = data.prizeName || 'Prize'
|
||||||
|
const claimByDate = data.claimByDate || '—'
|
||||||
|
const claimSteps = data.claimSteps || ''
|
||||||
|
const href = interpolate(
|
||||||
|
'https://shitaye-hotel.kirubeljkl679.workers.dev/prizes/claim?raffle={{raffleName}}&prize={{prizeName}}',
|
||||||
|
{ raffleName, prizeName },
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Prize winner"
|
||||||
|
previewText={`Hi ${guestName} — congratulations! You won ${prizeName}.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
Congratulations, {guestName}!
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
You’ve won <strong>{prizeName}</strong> from <strong>{raffleName}</strong>.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Claim by" value={claimByDate} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>
|
||||||
|
{claimSteps.split(';').map((line, idx) => (
|
||||||
|
<React.Fragment key={idx}>
|
||||||
|
{line.trim()}
|
||||||
|
<br />
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="Claim your prize" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
If you have any questions, contact us using the details in the footer.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'laundry_service',
|
||||||
|
name: 'Laundry Service',
|
||||||
|
subjectTemplate: 'Laundry service update for order {{orderId}}',
|
||||||
|
ctaLabel: 'View laundry status',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/laundry/status?order={{orderId}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Hanna T.' },
|
||||||
|
{ key: 'orderId', label: 'Order ID', defaultValue: 'LA-55902' },
|
||||||
|
{ key: 'serviceType', label: 'Service type', defaultValue: 'Wash & Fold' },
|
||||||
|
{ key: 'pickupWindow', label: 'Pickup window', defaultValue: 'Today 6:00 PM - 7:30 PM' },
|
||||||
|
{ key: 'deliveryWindow', label: 'Delivery window', defaultValue: 'Tomorrow 2:00 PM - 4:00 PM' },
|
||||||
|
{ key: 'status', label: 'Current status', defaultValue: 'Pickup scheduled' },
|
||||||
|
],
|
||||||
|
Component: function LaundryServiceEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const orderId = data.orderId || ''
|
||||||
|
const serviceType = data.serviceType || ''
|
||||||
|
const pickupWindow = data.pickupWindow || ''
|
||||||
|
const deliveryWindow = data.deliveryWindow || ''
|
||||||
|
const status = data.status || ''
|
||||||
|
const href = interpolate(
|
||||||
|
'https://shitaye-hotel.kirubeljkl679.workers.dev/laundry/status?order={{orderId}}',
|
||||||
|
{ orderId },
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Laundry service"
|
||||||
|
previewText={`Hi ${guestName} — your laundry order ${orderId} is: ${status}.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
Laundry order {orderId}
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, here’s your laundry service update.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Status" value={status} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Service" value={serviceType} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Pickup" value={pickupWindow} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Field brand={brand} label="Delivery" value={deliveryWindow} />
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="View laundry status" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
We’ll keep you updated until your order is delivered.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'order_rating_email',
|
||||||
|
name: 'Order Rating Request',
|
||||||
|
subjectTemplate: 'How was your experience? Rate order {{orderId}}, {{guestName}}',
|
||||||
|
ctaLabel: 'Leave a rating',
|
||||||
|
ctaHrefTemplate: '{{ratingLink}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Daniel K.' },
|
||||||
|
{ key: 'orderId', label: 'Order ID', defaultValue: 'ST-10392' },
|
||||||
|
{ key: 'ratingLink', label: 'Rating link', defaultValue: 'https://shitaye-hotel.kirubeljkl679.workers.dev/ratings/order/ST-10392' },
|
||||||
|
],
|
||||||
|
Component: function OrderRatingEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const orderId = data.orderId || ''
|
||||||
|
const ratingLink = data.ratingLink || '#'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Rate your experience"
|
||||||
|
previewText={`Hi ${guestName} — we’d love your feedback on order ${orderId}.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
How was your experience?
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, your feedback helps us improve our services. Please take 30 seconds to rate your order: <strong>{orderId}</strong>.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>
|
||||||
|
What to expect:
|
||||||
|
<br />
|
||||||
|
• Quick rating (1–5)
|
||||||
|
<br />
|
||||||
|
• Optional comments
|
||||||
|
<br />
|
||||||
|
• Instant thank-you
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={ratingLink} label="Leave a rating" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
Prefer not to use the link? Copy & paste it here:
|
||||||
|
<br />
|
||||||
|
<Link href={ratingLink} style={{ color: brand.primaryColor }}>{ratingLink}</Link>
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'stay_rating_email',
|
||||||
|
name: 'Stay Rating Request',
|
||||||
|
subjectTemplate: 'How was your stay at {{hotelName}}, {{guestName}}?',
|
||||||
|
ctaLabel: 'Leave a stay rating',
|
||||||
|
ctaHrefTemplate: '{{ratingLink}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Sarah M.' },
|
||||||
|
{ key: 'stayId', label: 'Stay ID', defaultValue: 'STAY-22014' },
|
||||||
|
{ key: 'checkOutDate', label: 'Check-out date', inputType: 'date', defaultValue: '2026-04-18' },
|
||||||
|
{ key: 'ratingLink', label: 'Rating link', defaultValue: 'https://shitaye-hotel.kirubeljkl679.workers.dev/ratings/stay/STAY-22014' },
|
||||||
|
],
|
||||||
|
Component: function StayRatingEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const stayId = data.stayId || ''
|
||||||
|
const checkOutDate = data.checkOutDate || ''
|
||||||
|
const ratingLink = data.ratingLink || '#'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Rate your stay"
|
||||||
|
previewText={`Hi ${guestName} — thanks for staying. Please rate your experience.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
How was your stay?
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, thank you for staying with us at <strong>{brand.hotelName}</strong>. We’d love a quick rating for your stay (ID: <strong>{stayId}</strong>).
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>
|
||||||
|
Stay details:
|
||||||
|
<br />
|
||||||
|
• Check-out: {checkOutDate}
|
||||||
|
<br />
|
||||||
|
• Rating takes ~30 seconds
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={ratingLink} label="Leave a stay rating" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
Questions? Contact us and we’ll be glad to help.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Extra templates
|
||||||
|
{
|
||||||
|
id: 'booking_cancelled',
|
||||||
|
name: 'Booking Cancelled',
|
||||||
|
subjectTemplate: 'Your booking has been cancelled, {{guestName}}',
|
||||||
|
ctaLabel: 'Book again',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Hanna T.' },
|
||||||
|
{ key: 'bookingId', label: 'Booking ID', defaultValue: 'SH-8421' },
|
||||||
|
{ key: 'cancellationDate', label: 'Cancellation date', inputType: 'date', defaultValue: '2026-04-10' },
|
||||||
|
{ key: 'cancellationReason', label: 'Cancellation reason', defaultValue: 'Schedule change' },
|
||||||
|
],
|
||||||
|
Component: function BookingCancelledEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const bookingId = data.bookingId || ''
|
||||||
|
const cancellationDate = data.cancellationDate || '—'
|
||||||
|
const cancellationReason = data.cancellationReason || ''
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Booking cancelled"
|
||||||
|
previewText={`Hi ${guestName} — your booking ${bookingId} has been cancelled.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
Booking cancelled
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, we’re letting you know that booking <strong>{bookingId}</strong> has been cancelled.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Cancelled on" value={cancellationDate} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>{cancellationReason}</Text>
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={'https://shitaye-hotel.kirubeljkl679.workers.dev/'} label="Book again" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
If you need assistance, reply to this email or contact reception.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'check_in_reminder',
|
||||||
|
name: 'Check-in Reminder',
|
||||||
|
subjectTemplate: 'Reminder: check-in at {{hotelName}} on {{checkInDate}}',
|
||||||
|
ctaLabel: 'View your stay details',
|
||||||
|
ctaHrefTemplate: 'https://shitaye-hotel.kirubeljkl679.workers.dev/?bookingId={{bookingId}}',
|
||||||
|
variables: [
|
||||||
|
{ key: 'guestName', label: 'Guest name', defaultValue: 'Daniel K.' },
|
||||||
|
{ key: 'bookingId', label: 'Booking ID', defaultValue: 'SH-8421' },
|
||||||
|
{ key: 'checkInDate', label: 'Check-in date', inputType: 'date', defaultValue: '2026-04-15' },
|
||||||
|
{ key: 'checkInTime', label: 'Suggested arrival time', defaultValue: 'from 2:00 PM' },
|
||||||
|
],
|
||||||
|
Component: function CheckInReminderEmail({ brand, data }) {
|
||||||
|
const guestName = data.guestName || 'Guest'
|
||||||
|
const bookingId = data.bookingId || ''
|
||||||
|
const checkInDate = data.checkInDate || '—'
|
||||||
|
const checkInTime = data.checkInTime || '—'
|
||||||
|
const href = interpolate('https://shitaye-hotel.kirubeljkl679.workers.dev/?bookingId={{bookingId}}', { bookingId })
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailShell
|
||||||
|
brand={brand}
|
||||||
|
title="Check-in reminder"
|
||||||
|
previewText={`Hi ${guestName} — check-in starts on ${checkInDate}.`}
|
||||||
|
>
|
||||||
|
<Heading style={{ fontSize: 22, margin: '0 0 8px', color: brand.textColor }}>
|
||||||
|
We’re ready for you
|
||||||
|
</Heading>
|
||||||
|
<Text style={{ margin: '0 0 14px', color: brand.textColor, lineHeight: '24px' }}>
|
||||||
|
Hi {guestName}, this is a reminder that your check-in at <strong>{brand.hotelName}</strong> is scheduled for <strong>{checkInDate}</strong>.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section style={blockStyle(brand)}>
|
||||||
|
<Section style={{ margin: '0 0 10px' }}>
|
||||||
|
<Field brand={brand} label="Booking ID" value={bookingId} />
|
||||||
|
</Section>
|
||||||
|
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.15, margin: '10px 0' }} />
|
||||||
|
<Section>
|
||||||
|
<Text style={{ ...valueStyle(brand), fontSize: 13 }}>
|
||||||
|
Suggested arrival: {checkInTime}
|
||||||
|
</Text>
|
||||||
|
</Section>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<PrimaryCTA brand={brand} href={href} label="View your stay details" />
|
||||||
|
|
||||||
|
<Text style={{ margin: '16px 0 0', color: brand.textColor, lineHeight: '22px' }}>
|
||||||
|
See you soon.
|
||||||
|
</Text>
|
||||||
|
</EmailShell>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export { templates as templateRegistry }
|
||||||
28
tsconfig.app.json
Normal file
28
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2023", "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"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
26
tsconfig.node.json
Normal file
26
tsconfig.node.json
Normal file
|
|
@ -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"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user