Gishen-Email-Templates/docs/superpowers/plans/2026-08-07-gishen-email-templates.md

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

• Amba-Emails stack
• Brand colors + logo
• en + am
• All template categories + organisation-verified + shop-summary period prop
• Preview + API
• CHANGELOG + README
• Git remote/push