Kirubel-Kibru-Yaltopia
f9fa3bc83b
Ship 23 transactional templates, shared brand tokens/logo, preview UI, render API, CHANGELOG, and docs for Ecom/Admin/B2B consumers. Co-authored-by: Cursor <cursoragent@cursor.com>
142 lines
4.8 KiB
Markdown
142 lines
4.8 KiB
Markdown
# Gishen Email Templates Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Ship a React Email + Next.js demo app with 23 Gishen Pharmacy email templates (en/am), brand assets from Gishen-B2B/Admin, HTML render API, CHANGELOG, and Gitea remote setup.
|
|
|
|
**Architecture:** Mirror Amba-Emails: templates under `emails/`, shared theme/layout/components/i18n, Next preview page + `/api/email/[template]?locale=`, static logo in `public/brand/`.
|
|
|
|
**Tech Stack:** Next.js 14, React 18, `@react-email/components`, `@react-email/render`, `react-email`, TypeScript.
|
|
|
|
## Global Constraints
|
|
|
|
- Brand colors exactly: brand `#A8C73A`, brandDeep `#8FAD2F`, forest `#141414`, accent `#E28A1A`, cream `#F6F7F2`, surface `#FFFFFF`, line `#E2E5D8`, muted `#5C5F56`
|
|
- Product name: Gishen Pharmacy; footer email `info@gishenpharmacy.org`; site `https://gishenpharmacy.org`
|
|
- Every template accepts `locale: 'en' | 'am'` (default `en`)
|
|
- `shop-summary` is one template with `period: 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly'`
|
|
- No SMTP/ESP sending in v1
|
|
- CHANGELOG Keep a Changelog; version `0.1.0`
|
|
|
|
---
|
|
|
|
## File map
|
|
|
|
```
|
|
Gishen-Email-Templates/
|
|
package.json
|
|
tsconfig.json
|
|
next.config.js
|
|
next-env.d.ts
|
|
.gitignore
|
|
README.md
|
|
CHANGELOG.md
|
|
public/brand/gishen-logo.png
|
|
emails/
|
|
theme.ts
|
|
registry.ts
|
|
utils/logoDataUri.ts
|
|
i18n/types.ts
|
|
i18n/common.ts
|
|
i18n/templates/*.ts # string tables per template id
|
|
components/{EmailLayout,Button,Card,StatusBanner,OrderSummary,MetricGrid}.tsx
|
|
welcome.tsx … shop-summary.tsx
|
|
app/
|
|
layout.tsx
|
|
page.tsx
|
|
api/email/[template]/route.ts
|
|
```
|
|
|
|
---
|
|
|
|
### Task 1: Scaffold project + brand foundation
|
|
|
|
**Files:**
|
|
- Create: `package.json`, `tsconfig.json`, `next.config.js`, `next-env.d.ts`, `.gitignore`
|
|
- Create: `emails/theme.ts`, `emails/utils/logoDataUri.ts`
|
|
- Create: `emails/components/EmailLayout.tsx`, `Button.tsx`, `Card.tsx`, `StatusBanner.tsx`, `OrderSummary.tsx`, `MetricGrid.tsx`
|
|
- Create: `emails/i18n/types.ts`, `emails/i18n/common.ts`
|
|
- Copy: `public/brand/gishen-logo.png` from Gishen-B2B
|
|
|
|
**Interfaces:**
|
|
- Produces: `theme`, `Locale`, `tCommon(locale)`, `EmailLayout`, `Button`, `Card`, `StatusBanner`, `OrderSummary`, `MetricGrid`, `logoDataUri`
|
|
|
|
- [ ] **Step 1: Create package.json and configs** (same deps as Amba-Emails)
|
|
|
|
- [ ] **Step 2: Copy logo and write theme + logoDataUri (node base64)**
|
|
|
|
- [ ] **Step 3: Implement layout + shared components using Gishen colors**
|
|
|
|
- [ ] **Step 4: `npm install` and confirm no errors**
|
|
|
|
- [ ] **Step 5: Commit** `chore: scaffold Gishen email project and brand tokens`
|
|
|
|
---
|
|
|
|
### Task 2: i18n tables + all 23 templates + registry
|
|
|
|
**Files:**
|
|
- Create: `emails/i18n/templates/*.ts` (one module or grouped modules)
|
|
- Create: 23 template files listed in the design spec
|
|
- Create: `emails/registry.ts` mapping id → component + default demo props
|
|
|
|
**Interfaces:**
|
|
- Consumes: layout/components/theme/`Locale`
|
|
- Produces: `templates` registry `Record<string, { component, category, name, defaultProps }>`
|
|
- Each email: `export function XEmail(props: { locale?: Locale; ... })`
|
|
- `shop-summary` props include `period: 'daily'|'weekly'|'monthly'|'quarterly'|'yearly'`
|
|
|
|
- [ ] **Step 1: Write i18n string tables for en/am for all templates**
|
|
|
|
- [ ] **Step 2: Implement each template using shared components (Ethiopian pharmacy sample data)**
|
|
|
|
- [ ] **Step 3: Export registry of all template ids**
|
|
|
|
- [ ] **Step 4: Commit** `feat: add Gishen email templates with en/am copy`
|
|
|
|
---
|
|
|
|
### Task 3: Next preview app + render API
|
|
|
|
**Files:**
|
|
- Create: `app/layout.tsx`, `app/page.tsx`, `app/api/email/[template]/route.ts`
|
|
|
|
**Interfaces:**
|
|
- `GET /api/email/[template]?locale=en|am` → `text/html`
|
|
- Preview: category sidebar, locale toggle, download HTML
|
|
|
|
- [ ] **Step 1: Implement API route using registry + `@react-email/render`**
|
|
|
|
- [ ] **Step 2: Implement preview page with locale toggle**
|
|
|
|
- [ ] **Step 3: Run `npm run preview`, hit `/` and one API URL, confirm HTML**
|
|
|
|
- [ ] **Step 4: Commit** `feat: add preview UI and HTML render API`
|
|
|
|
---
|
|
|
|
### Task 4: Docs, changelog, remote
|
|
|
|
**Files:**
|
|
- Modify: `README.md`
|
|
- Create: `CHANGELOG.md`
|
|
|
|
- [ ] **Step 1: Document templates, props, scripts, consumer notes**
|
|
|
|
- [ ] **Step 2: CHANGELOG 0.1.0 entry listing template set**
|
|
|
|
- [ ] **Step 3: Commit** `docs: add README and CHANGELOG for 0.1.0`
|
|
|
|
- [ ] **Step 4: `git remote add origin …` and `git push -u origin main` if credentials allow**
|
|
|
|
---
|
|
|
|
## Spec coverage checklist
|
|
|
|
- [x] Amba-Emails stack
|
|
- [x] Brand colors + logo
|
|
- [x] en + am
|
|
- [x] All template categories + organisation-verified + shop-summary period prop
|
|
- [x] Preview + API
|
|
- [x] CHANGELOG + README
|
|
- [x] Git remote/push
|