{"_id":"@codee_team/medusa-notification-templates","_rev":"2-98207e7d44e598f76236c48e0990226f","name":"@codee_team/medusa-notification-templates","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@codee_team/medusa-notification-templates","version":"1.0.0","keywords":["email","templates","mjml","notifications","email-templates"],"author":"","license":"MIT","_id":"@codee_team/medusa-notification-templates@1.0.0","maintainers":[{"name":"codee_team","email":"chris@iamcodee.co"}],"dist":{"shasum":"7f02026c6cd066467aeae9cca39aa1e38b90b81c","tarball":"https://registry.npmjs.org/@codee_team/medusa-notification-templates/-/medusa-notification-templates-1.0.0.tgz","fileCount":91,"integrity":"sha512-4rMRfqPlfhUNP11DmdP5KhiJcFQuQARaQMGDWR6pyduNh6ogJ9M2M/KjF97UZx0aM74trCjtmUg1nu/g2gjbnw==","signatures":[{"sig":"MEQCIFp908HlVnB5bhovk+wYcB/k+FYMnV6pVi6kvAbNJf/OAiA3I+s4hJKL2ATo+GC8jKVP4QOeCHWBkgIYZndDJhXswg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72721},"main":"dist/index.js","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"6b16873fba5e0434018f6bd1b09c7a8771a01293","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc","publish":"dotenv -- npm publish --access public","public-local":"npm run build && yalc push","prepublishOnly":"npm run build","public-local:force":"npm run build && yalc push --force"},"_npmUser":{"name":"codee_team","email":"chris@iamcodee.co"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.0","description":"A collection of ready-to-use email templates using MJML and a reusable component system","directories":{},"_nodeVersion":"22.10.0","dependencies":{"mjml":"^4.15.3"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/mjml":"^4.7.4","@types/node":"^20.0.0"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/medusa-notification-templates_1.0.0_1763052116219_0.03851511509530714","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@codee_team/medusa-notification-templates","version":"1.0.1","description":"A collection of ready-to-use email templates using MJML and a reusable component system","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"build":"tsc","build:watch":"tsc --watch","prepublishOnly":"npm run build","test":"echo \"Error: no test specified\" && exit 1","publish-local":"npm run build && yalc publish --push --no-scripts","publish-local:force":"npm run build && yalc publish --push --no-scripts","watch":"concurrently \"npm run build:watch\" \"node scripts/watch.js\"","dev":"npm run watch","publish":"dotenv -- npm publish --access public"},"keywords":["email","templates","mjml","notifications","email-templates"],"author":"","license":"MIT","dependencies":{"mjml":"^4.15.3"},"devDependencies":{"@types/mjml":"^4.7.4","@types/node":"^20.0.0","chokidar":"^3.5.3","concurrently":"^8.2.2","typescript":"^5.0.0","yalc":"^1.0.0-pre.50"},"peerDependencies":{},"repository":{"type":"git","url":""},"engines":{"node":">=18.0.0"},"_id":"@codee_team/medusa-notification-templates@1.0.1","gitHead":"9630d331c7dcba855defa1ed6fb13432dd91351e","_nodeVersion":"22.10.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-48KfauhmZS5ELJFCRcFW0H3eEq7WKpM4m8ThdLXLt5QQsdgalZjkF3xe8UmMuTINP1o7msUcqUNsp7/ULw7KFw==","shasum":"67373646a1e8d3201bd9f42a81526fde3851f7af","tarball":"https://registry.npmjs.org/@codee_team/medusa-notification-templates/-/medusa-notification-templates-1.0.1.tgz","fileCount":91,"unpackedSize":72991,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCncVcSi6awoKRbdJc1bad2FLMMGZhHX/LJ1mbB/JtDtwIgV/6/J5cZyWGMh1lvzzpLeCzspyHwWWfRN2jUKXddn8M="}]},"_npmUser":{"name":"codee_team","email":"chris@iamcodee.co"},"directories":{},"maintainers":[{"name":"codee_team","email":"chris@iamcodee.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/medusa-notification-templates_1.0.1_1763111049071_0.2991708121160115"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-13T16:41:56.092Z","modified":"2025-11-14T09:04:09.445Z","1.0.0":"2025-11-13T16:41:56.413Z","1.0.1":"2025-11-14T09:04:09.284Z"},"license":"MIT","keywords":["email","templates","mjml","notifications","email-templates"],"repository":{"type":"git","url":""},"description":"A collection of ready-to-use email templates using MJML and a reusable component system","maintainers":[{"name":"codee_team","email":"chris@iamcodee.co"}],"readme":"# Notification Templates \n\nA collection of ready-to-use email templates  using MJML and a reusable component system.\n\n## Table of Contents\n\n- [Features](#features)\n- [Structure](#structure)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Available Components](#available-components)\n- [Internationalization](#internationalization)\n- [Customizing Theme](#customizing-theme)\n- [Creating a New Template](#creating-a-new-template)\n- [Examples](#examples)\n- [Utility Functions](#utility-functions)\n\n## Features\n\n- **Theme System** - Centralized configuration for colors, fonts, and styles\n- **Reusable Components** - Ready-to-use sections for building emails\n- **Responsive Design** - All templates are responsive thanks to MJML\n- **TypeScript Support** - Full TypeScript support with type definitions\n- **Internationalization** - Built-in support for multiple languages with per-template translations\n- **Easy Extension** - Simple way to add new templates\n- **Unified API** - Single `renderTemplate` function for all templates\n\n## Installation\n\n### Install from NPM\n\n```bash\nnpm install @codee_team/medusa-notification-templates\n```\n\n### Requirements\n\nThe package includes `mjml` as a dependency, so you don't need to install it separately.\n\n### Usage in Medusa.js Project\n\nAfter installation, import templates where you send notifications:\n\n```typescript\nimport { renderTemplate } from \"@codee_team/medusa-notification-templates\";\n```\n\n### Legacy Installation (Copy Method)\n\nIf you prefer to copy the templates folder directly:\n\n1. Copy the `templates` folder to your notification module\n2. Install dependencies:\n   ```bash\n   npm install mjml\n   npm install --save-dev @types/mjml\n   ```\n3. Import templates:\n   ```typescript\n   import { renderTemplate } from \"./templates/emails\";\n   ```\n\n## Quick Start\n\n### Basic Usage with Unified API\n\n```typescript\nimport { renderTemplate, ContactFormTemplateData } from \"@codee_team/medusa-notification-templates\";\n\nconst templateName = \"contact-form\";\n\nconst data: ContactFormTemplateData = {\n  subject: \"New contact form message\",\n  name: \"John Doe\",\n  email: \"john@example.com\",\n  phone: \"+1 234 567 890\",\n  message: \"Hello, I would like to...\"\n};\n\nconst { html, text } = renderTemplate(templateName, data, { locale: \"pl\" });\n\n// Use with Medusa notification service\nawait notificationService.createNotifications({\n  to: \"admin@example.com\",\n  channel: \"email\",\n  template: templateName,\n  data: {\n    html,\n    text,\n    subject: data.subject,\n  },\n});\n```\n\n## Available Components\n\nAll components are available from `shared/components`:\n\n```typescript\nimport {\n  headerSection,\n  footerSection,\n  textSection,\n  dividerSection,\n  buttonSection,\n  richTextSection,\n  Theme,\n} from \"@codee_team/medusa-notification-templates\";\n```\n\n### headerSection(text, options?)\n\nHeader section with colored background.\n\n```typescript\nheaderSection(\"Email Title\", { theme })\n```\n\n### footerSection(message, options?)\n\nFooter section with message.\n\n```typescript\nfooterSection(\"Footer message\", { theme })\n```\n\n### textSection(label, value, options?)\n\nSection with label and value (e.g., \"Email: john@example.com\").\n\n```typescript\ntextSection(\"Email\", \"john@example.com\", { theme })\n```\n\n### dividerSection(options?)\n\nHorizontal separator.\n\n```typescript\ndividerSection({ theme })\n```\n\n### buttonSection(text, url, options?)\n\nCall-to-action button.\n\n```typescript\nbuttonSection(\"View Order\", \"https://example.com/order/123\", { \n  theme,\n  align: \"center\" // \"left\" | \"center\" | \"right\"\n})\n```\n\n### richTextSection(content, options?)\n\nSection with formatted HTML text.\n\n```typescript\nrichTextSection(\"This is <strong>important</strong> message\", { \n  theme,\n  align: \"center\"\n})\n```\n\n## Internationalization\n\nTemplates support multiple languages through the i18n system. Each template has its own translations in the `locales/` folder. The default language is Polish (`pl`), but you can use English (`en`) or add more languages.\n\n### Using Different Languages\n\n```typescript\nimport { renderTemplate } from \"@codee_team/medusa-notification-templates\";\n\n// Polish (default)\nconst { html: htmlPL } = renderTemplate(\"contact-form\", data);\n\n// English\nconst { html: htmlEN } = renderTemplate(\"contact-form\", data, { locale: \"en\" });\n```\n\n### Adding a New Language to a Template\n\n1. Create a new locale file in the template's `locales/` folder (e.g., `de.ts` for German)\n2. Add translations following the structure in `locales/types.ts`\n3. Export it in `locales/index.ts`:\n\n```typescript\n// locales/de.ts\nimport { ContactFormTranslations } from \"./types\";\n\nexport const de: ContactFormTranslations = {\n  labels: {\n    name: \"Name\",\n    email: \"E-Mail\",\n    phone: \"Telefon\",\n    message: \"Nachricht\",\n  },\n  footer: \"Diese Nachricht wurde automatisch vom Kontaktformular gesendet\",\n};\n```\n\n```typescript\n// locales/index.ts\nimport { ContactFormTranslations } from \"./types\";\nimport { Locale } from \"../../../shared/i18n\";\nimport { pl } from \"./pl\";\nimport { en } from \"./en\";\nimport { de } from \"./de\";\n\nexport const translations: Record<Locale, ContactFormTranslations> = {\n  pl,\n  en,\n  de, // Add new language\n};\n```\n\n4. Update `Locale` type in `shared/i18n/types.ts`:\n\n```typescript\nexport type Locale = \"pl\" | \"en\" | \"de\";\n```\n\n5. Use it: `renderTemplate(\"contact-form\", data, { locale: \"de\" })`\n\n## Customizing Theme\n\nYou can customize colors, fonts, and other styles by modifying `shared/theme/presets/default/index.ts` or by passing a custom theme to template functions:\n\n```typescript\nimport { Theme } from \"@codee_team/medusa-notification-templates\";\n\nconst customTheme: Theme = {\n  colors: {\n    primary: \"#FF5733\",\n    primaryText: \"#ffffff\",\n    background: \"#ffffff\",\n    surface: \"#f5f5f5\",\n    text: {\n      primary: \"#000000\",\n      secondary: \"#333333\",\n      muted: \"#999999\",\n    },\n    border: \"#e0e8f0\",\n  },\n  fonts: {\n    primary: \"Roboto\",\n    fallback: \"sans-serif\",\n  },\n  spacing: {\n    section: \"20px 20px 20px 20px\",\n    text: \"0\",\n    divider: \"0 30px\",\n  },\n  typography: {\n    header: {\n      fontSize: \"20px\",\n      fontWeight: \"600\",\n      lineHeight: \"24px\",\n    },\n    label: {\n      fontSize: \"11px\",\n      fontWeight: \"600\",\n      textTransform: \"uppercase\",\n      letterSpacing: \"1px\",\n    },\n    body: {\n      fontSize: \"16px\",\n      lineHeight: \"24px\",\n    },\n    footer: {\n      fontSize: \"12px\",\n    },\n  },\n};\n\nconst { html } = renderTemplate(\"contact-form\", data, { theme: customTheme });\n```\n\n## Creating a New Template\n\n### Step 1: Create Template Folder\n\n```bash\nmkdir templates/emails/my-new-template\nmkdir templates/emails/my-new-template/locales\n```\n\n### Step 2: Define Data Types (`types.ts`)\n\n```typescript\nexport type MyNewTemplateData = {\n  subject: string;\n  userName: string;\n  userEmail: string;\n  customField?: string;\n};\n```\n\n### Step 3: Create Translations (`locales/`)\n\nCreate translation files for each language:\n\n```typescript\n// locales/types.ts\nexport interface MyNewTemplateTranslations {\n  greeting: string;\n  labels: {\n    userName: string;\n    userEmail: string;\n  };\n  footer: string;\n}\n```\n\n```typescript\n// locales/pl.ts\nimport { MyNewTemplateTranslations } from \"./types\";\n\nexport const pl: MyNewTemplateTranslations = {\n  greeting: \"Witaj\",\n  labels: {\n    userName: \"Nazwa użytkownika\",\n    userEmail: \"Email\",\n  },\n  footer: \"Wiadomość automatyczna\",\n};\n```\n\n```typescript\n// locales/en.ts\nimport { MyNewTemplateTranslations } from \"./types\";\n\nexport const en: MyNewTemplateTranslations = {\n  greeting: \"Hello\",\n  labels: {\n    userName: \"User Name\",\n    userEmail: \"Email\",\n  },\n  footer: \"Automated message\",\n};\n```\n\n```typescript\n// locales/index.ts\nimport { MyNewTemplateTranslations } from \"./types\";\nimport { Locale } from \"../../../shared/i18n\";\nimport { pl } from \"./pl\";\nimport { en } from \"./en\";\n\nexport const translations: Record<Locale, MyNewTemplateTranslations> = {\n  pl,\n  en,\n};\n\nexport { type MyNewTemplateTranslations } from \"./types\";\nexport { type Locale } from \"../../../shared/i18n\";\nexport { pl, en };\n```\n\n### Step 4: Create Main Logic (`main.ts`)\n\n```typescript\nimport {\n  headerSection,\n  footerSection,\n  textSection,\n  dividerSection,\n  escapeHtml,\n  Theme,\n} from \"../../shared/components\";\nimport { getTranslations } from \"../../shared/i18n\";\nimport { translations, Locale } from \"./locales\";\nimport { MyNewTemplateData } from \"./types\";\n\ninterface MyNewTemplateMainOptions {\n  theme?: Theme;\n  locale?: Locale;\n}\n\nexport function getMyNewTemplateMain(\n  data: MyNewTemplateData,\n  options: MyNewTemplateMainOptions = {}\n): string {\n  const theme = options.theme;\n  const locale = options.locale || \"pl\";\n  const t = getTranslations(translations, locale);\n\n  return `\n    ${headerSection(data.subject, { theme })}\n    ${textSection(t.labels.userName, escapeHtml(data.userName), { theme })}\n    ${dividerSection({ theme })}\n    ${textSection(t.labels.userEmail, escapeHtml(data.userEmail), { theme })}\n    ${footerSection(t.footer, { theme })}\n  `.trim();\n}\n```\n\n### Step 5: Create Export (`index.ts`)\n\n```typescript\nimport mjml2html from \"mjml\";\nimport { escapeHtml, Theme } from \"../../shared/components\";\nimport { getTranslations } from \"../../shared/i18n\";\nimport { translations, Locale } from \"./locales\";\nimport { getMyNewTemplateMain } from \"./main\";\nimport { MyNewTemplateData } from \"./types\";\n\ninterface MyNewTemplateOptions {\n  theme?: Theme;\n  locale?: Locale;\n}\n\nexport function getMyNewTemplateHtml(\n  data: MyNewTemplateData,\n  options: MyNewTemplateOptions = {}\n): string {\n  return mjml2html(\n    `\n    <mjml>\n      <mj-head>\n        <mj-title>${escapeHtml(data.subject)}</mj-title>\n      </mj-head>\n      <mj-body>\n        ${getMyNewTemplateMain(data, options)}\n      </mj-body>\n    </mjml>\n  `,\n    {\n      keepComments: false,\n    }\n  ).html;\n}\n\nexport function getMyNewTemplateText(\n  data: MyNewTemplateData,\n  options: MyNewTemplateOptions = {}\n): string {\n  const locale = options.locale || \"pl\";\n  const t = getTranslations(translations, locale);\n\n  return `\n${data.subject}\n\n${t.labels.userName}: ${data.userName}\n${t.labels.userEmail}: ${data.userEmail}\n\n---\n${t.footer}\n  `.trim();\n}\n```\n\n### Step 6: Register Template in `emails/index.ts`\n\nAdd your template to the registry:\n\n```typescript\nimport { getMyNewTemplateHtml, getMyNewTemplateText } from \"./my-new-template\";\nimport { MyNewTemplateData } from \"./my-new-template/types\";\n\nexport type TemplateName = \"contact-form\" | \"order-created\" | \"my-new-template\";\n\nexport type TemplateData = ContactFormTemplateData | OrderCreatedTemplateData | MyNewTemplateData;\n\nconst templateRegistry: Record<TemplateName, TemplateRenderer> = {\n  \"contact-form\": {\n    getHtml: getContactFormHtml,\n    getText: getContactFormText,\n  },\n  \"order-created\": {\n    getHtml: getOrderCreatedHtml,\n    getText: getOrderCreatedText,\n  },\n  \"my-new-template\": {\n    getHtml: getMyNewTemplateHtml,\n    getText: getMyNewTemplateText,\n  },\n};\n\n// Add type-safe overload\nexport function renderTemplate(\n  templateName: \"my-new-template\",\n  data: MyNewTemplateData,\n  options?: TemplateOptions\n): { html: string; text: string };\n```\n\n### Step 7: Use in Your Code\n\n```typescript\nimport { renderTemplate } from \"@codee_team/medusa-notification-templates\";\n\nconst { html, text } = renderTemplate(\"my-new-template\", data, { locale: \"pl\" });\n```\n\n## Examples\n\n### Example 1: Contact Form\n\nSee implementation in `emails/contact-form/` - a simple form with text fields.\n\n### Example 2: Order Created\n\nSee implementation in `emails/order-created/` - a more complex template with product list, CTA button, and shipping address.\n\n## Utility Functions\n\n### escapeHtml(text)\n\nEscapes HTML in text to prevent XSS attacks. Available from `shared/utils`:\n\n```typescript\nimport { escapeHtml } from \"@codee_team/medusa-notification-templates\";\n\nconst safeText = escapeHtml(\"<script>alert('xss')</script>\");\n// Returns: \"&lt;script&gt;alert(&#039;xss&#039;)&lt;/script&gt;\"\n```\n\n## Support\n\nIf you have questions or suggestions, please create an issue in the GitHub repository.\n","readmeFilename":"README.md"}