# 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