Gishen/Gishen-Email-Template
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
Gishen-Email-Template/docs/superpowers/specs/2026-08-07-gishen-email-templates-design.md
Kirubel-Kibru-Yaltopia 8261920b9e Add design spec for Gishen email templates. 
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-07 22:02:39 +03:00

5.1 KiB
Raw Permalink Blame History

Gishen Email Templates — Design Spec

Date: 2026-08-07
Status: Approved for implementation planning
Repo: Gishen/Gishen-Email-Templates
Remote: https://gitea.yaltopia.com/Gishen/Gishen-Email-Templates.git

Goal

A shared React Email project that demos and exports transactional (and light marketing) emails for all Gishen surfaces: Ecom, Admin, and B2B. Brand, colors, and logo match the existing Gishen apps. Preview UI supports English and Amharic.

Non-goals (v1)

  • Sending mail (SMTP/ESP integration)
  • Live backend wiring inside Ecom/Admin/B2B
  • Dark-mode email variants
  • Pixel-perfect Amharic typography across every client (system + common web-safe fallbacks)

Architecture

Mirror Amba-Emails:

Piece Role
emails/ React Email templates + shared components
emails/theme.ts Gishen brand tokens
emails/i18n/ en / am string tables per template family
emails/components/ EmailLayout, Button, Card, StatusBanner, OrderSummary
app/ Next.js preview: template switcher + locale toggle
app/api/email/[template]/route.ts Render HTML for demos / future consumer apps
public/brand/ Logo assets (from Gishen-B2B)
CHANGELOG.md Keep a Changelog
README.md Templates, props, how to consume

Scripts: npm run preview (Next), npm run email (React Email CLI), npm run build (HTML export).

Consumer contract: apps pass props + locale; they either call the render API in demo setups or copy exported HTML / import templates later. v1 does not mutate sibling repos beyond using them as brand/reference sources.

Brand

From Gishen-B2B/src/data/brand.ts and Admin Tailwind:

Token Value
brand #A8C73A
brandDeep #8FAD2F
forest #141414
accent #E28A1A
cream / background #F6F7F2
surface #FFFFFF
line #E2E5D8
muted #5C5F56
  • Product name: Gishen Pharmacy
  • Logo: Gishen-B2B/public/brand/gishen-logo.png → public/brand/ + optional data URI for clients that block remote images poorly in local demos
  • Footer: info@gishenpharmacy.org · https://gishenpharmacy.org · Addis Ababa, Ethiopia

Locales

  • Every template accepts locale: 'en' | 'am' (default 'en').
  • Preview UI has an en/am toggle.
  • String tables live under emails/i18n/; Amharic copy is production-intent for v1 (not TODO placeholders).

Template inventory

Auth / account

  1. welcome
  2. password-reset
  3. email-verify
  4. user-invite

Orders (Ecom / member)

  1. order-confirmation
  2. order-packing
  3. order-out-for-delivery
  4. order-delivered
  5. order-cancelled

B2B

  1. org-invite
  2. join-code
  3. approval-needed
  4. statement-ready
  5. credit-alert
  6. organisation-verified

Prescriptions

  1. prescription-submitted
  2. prescription-decision (approved | rejected via props)
  3. prescription-ready

Admin ops

  1. low-stock
  2. dispatch-assigned
  3. procurement-alert

Marketing

  1. promotional

Ecom analytics

  1. shop-summary — one template with period: 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly' and summary metrics props (orders, revenue, top SKUs, etc.)

Shared components

  • EmailLayout — logo header, cream body shell, branded footer
  • Button — primary CTA (brand / forest text)
  • Card — section block with line border
  • StatusBanner — success / warning / danger / info using brand + accent
  • OrderSummary — line items + totals for order emails
  • MetricGrid — for shop-summary KPI rows

Preview app behavior

  • List all templates by category
  • Live iframe or server-rendered preview of selected template
  • Locale toggle (en/am)
  • Sample props hardcoded per template for demo realism (Ethiopian pharmacy / B2B context)

Git / repo setup

  1. Create directory, README.md, CHANGELOG.md, scaffold app
  2. git init → branch main
  3. Initial commit(s)
  4. git remote add origin https://gitea.yaltopia.com/Gishen/Gishen-Email-Templates.git
  5. git push -u origin main (requires credentials available in environment)

Reference projects

Repo Use
Amba-Emails Structure, React Email patterns, API route
Gishen-B2B Brand, logo, portal email contexts
Gishen-Admin Ops domains (stock, dispatch, procurement, Rx)
Gishen-Ecom Order + shop summary contexts (clone if auth available)
Yaltopia-Ticket-Email Secondary email reference (clone may need auth)

Note: HTTPS clone of private Gitea repos failed in this environment without credentials. Local Gishen-Admin and Gishen-B2B copies are sufficient for brand; Ecom specifics use documented B2B/Admin order/stock flows where Ecom is unavailable.

Success criteria

  • npm install && npm run preview shows all templates with en/am switching
  • Colors and logo clearly match Gishen apps
  • HTML render API returns each template
  • CHANGELOG.md records 0.1.0
  • Remote main pushed when credentials allow

Out-of-scope follow-ups

  • Wire templates into Nest/API workers
  • ESP (Resend/SendGrid) adapters
  • Automated visual regression of rendered HTML