strapi-plugin-magic-mail 2.0.2 → 2.0.4

package/README.md

@@ -1,6 +1,6 @@
 # 📧 MagicMail - Email Business Suite for Strapi v5
 
-> **Enterprise-grade multi-account email management with smart routing, OAuth 2.0 support, and complete security compliance**
+> **Professional-grade multi-account email management with smart routing, OAuth 2.0 support, and complete security compliance**
 
 [![NPM Version](https://img.shields.io/npm/v/strapi-plugin-magic-mail.svg)](https://www.npmjs.com/package/strapi-plugin-magic-mail)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
@@ -10,7 +10,7 @@
 
 ## 🌟 Why MagicMail?
 
-**Stop fighting with .env files and email configuration!** MagicMail brings enterprise email management to Strapi v5 with:
+**Stop fighting with .env files and email configuration!** MagicMail brings professional email management to Strapi v5 with:
 
 - ✅ **6 Email Providers** - Gmail, Microsoft 365, Yahoo, SMTP, SendGrid, Mailgun
 - ✅ **OAuth 2.0 Authentication** - No passwords needed for Gmail, Microsoft, Yahoo
@@ -20,7 +20,7 @@
 - ✅ **Zero Configuration** - No .env files, everything in the database
 - ✅ **Email Designer Compatible** - Works seamlessly with strapi-plugin-email-designer-5
 - ✅ **GDPR/CAN-SPAM Compliant** - Built-in List-Unsubscribe headers
-- ✅ **Enterprise Security** - TLS 1.2+, DKIM, SPF, DMARC validation
+- ✅ **Professional Security** - TLS 1.2+, DKIM, SPF, DMARC validation
 
 ---
 
@@ -228,17 +228,15 @@ await strapi.plugin('magic-mail').service('email-router').send({
 
 ### ✨ Features
 
-| Feature | FREE | PREMIUM | ADVANCED | ENTERPRISE |
-|---------|------|---------|----------|------------|
-| **Visual Designer** | ✅ Basic builder | ✅ + template library | ✅ Pro components | ✅ Enterprise suite |
-| **Templates Included** | 25 | 100 | 500 | Unlimited |
-| **Drag & Drop + Mustache** | ✅ | ✅ | ✅ | ✅ |
-| **Import / Export** | ✅ | ✅ | ✅ | ✅ |
-| **Template Versioning** | ❌ | ✅ | ✅ | ✅ |
-| **Analytics** | ❌ | Basic insights | Advanced dashboard | Enterprise analytics |
-| **Custom Blocks** | ❌ | ❌ | ❌ | ✅ |
-| **Team Library** | ❌ | ❌ | ❌ | ✅ |
-| **A/B Testing** | ❌ | ❌ | ❌ | ✅ |
+| Feature | FREE | PREMIUM | ADVANCED |
+|---------|------|---------|----------|
+| **Visual Designer** | ✅ Basic builder | ✅ + template library | ✅ Pro components |
+| **Templates Included** | 25 | 100 | 500 |
+| **Drag & Drop + Mustache** | ✅ | ✅ | ✅ |
+| **Import / Export** | ✅ | ✅ | ✅ |
+| **Template Versioning** | ❌ | ✅ | ✅ |
+| **Analytics** | ❌ | Basic insights | Advanced dashboard |
+| **A/B Testing** | ❌ | ❌ | ✅ |
 
 ### 📧 Creating Email Templates
 
@@ -1399,7 +1397,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 - [styled-components](https://styled-components.com) - CSS-in-JS
 
 **Inspired by:**
-- Enterprise email requirements
+- Professional email requirements
 - Multi-tenant application needs
 - Developer experience first
 
@@ -1424,6 +1422,6 @@ If MagicMail helps your project, please:
 
 ---
 
-**Made with ❤️ for the Strapi Community**
+**Made for the Strapi Community**
 
-**MagicMail - Because email management should be magical, not painful.** ✨
+**MagicMail - Because email management should be magical, not painful.**

package/admin/src/index.js

@@ -5,6 +5,15 @@ import PluginIcon from './components/PluginIcon';
 
 const name = pluginPkg.strapi.name;
 
+// Prefix translation keys with pluginId (required for Strapi)
+const prefixPluginTranslations = (data, pluginId) => {
+  const prefixed = {};
+  Object.keys(data).forEach((key) => {
+    prefixed[`${pluginId}.${key}`] = data[key];
+  });
+  return prefixed;
+};
+
 export default {
   register(app) {
     app.addMenuLink({
@@ -55,32 +64,24 @@ export default {
   },
 
   async registerTrads({ locales }) {
-    const importedTrads = {
-      en: () => import('./translations/en.json'),
-      de: () => import('./translations/de.json'),
-      es: () => import('./translations/es.json'),
-      fr: () => import('./translations/fr.json'),
-      pt: () => import('./translations/pt.json'),
-    };
-
-    const translatedLanguages = Object.keys(importedTrads).filter((lang) =>
-      locales.includes(lang)
-    );
-
-    const translations = await Promise.all(
-      translatedLanguages.map((language) =>
-        importedTrads[language]()
-          .then(({ default: data }) => ({
-            data: data,
-            locale: language,
-          }))
-          .catch(() => ({
-            data: {},
-            locale: language,
-          }))
-      )
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
     );
 
-    return Promise.resolve(translations);
+    return Promise.resolve(importedTrads);
   },
 };

package/admin/src/pages/Analytics.jsx

@@ -130,7 +130,7 @@ const HeaderContent = styled(Flex)`
 `;
 
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -185,7 +185,7 @@ const StatsGrid = styled.div`
 `;
 
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -194,7 +194,7 @@ const StatCard = styled(Box)`
   ${css`animation: ${fadeIn} ${theme.transitions.slow} backwards;`}
   animation-delay: ${props => props.$delay || '0s'};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -260,7 +260,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(Typography)`
   font-size: 2.25rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${props => props.theme.colors.neutral800};
   transition: all ${theme.transitions.normal};
   line-height: 1;
   margin-bottom: ${theme.spacing.xs};
@@ -272,7 +272,7 @@ const StatValue = styled(Typography)`
 
 const StatLabel = styled(Typography)`
   font-size: 0.875rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${props => props.theme.colors.neutral600};
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -283,22 +283,22 @@ const StatLabel = styled(Typography)`
 `;
 
 const FilterBar = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg} ${theme.spacing.xl};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
 `;
 
 const StyledTable = styled(Table)`
   thead {
-    background: ${theme.colors.neutral[50]};
-    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    background: ${props => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${props => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -308,37 +308,37 @@ const StyledTable = styled(Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid ${props => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${props => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${props => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 
 const TableContainer = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   box-shadow: ${theme.shadows.md};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   overflow: hidden;
   margin-bottom: ${theme.spacing.xl};
 `;
 
 const EmptyState = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${props => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${theme.colors.neutral[200]};
+  border: 2px dashed ${props => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -684,7 +684,7 @@ const Analytics = () => {
                         </Flex>
                       ) : (
                         <Flex alignItems="center" gap={1}>
-                          <XCircleIcon style={{ width: 16, height: 16, color: theme.colors.neutral[400] }} />
+                          <XCircleIcon style={{ width: 16, height: 16, color: '#9CA3AF' }} />
                           <Typography variant="pi" textColor="neutral600">
                             No
                           </Typography>
@@ -701,7 +701,7 @@ const Analytics = () => {
                         </Flex>
                       ) : (
                         <Flex alignItems="center" gap={1}>
-                          <XCircleIcon style={{ width: 16, height: 16, color: theme.colors.neutral[400] }} />
+                          <XCircleIcon style={{ width: 16, height: 16, color: '#9CA3AF' }} />
                           <Typography variant="pi" textColor="neutral600">
                             No
                           </Typography>

package/admin/src/pages/EmailDesigner/EditorPage.jsx

@@ -122,12 +122,12 @@ const Container = styled.div`
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f6f6f9;
+  background: ${props => props.theme.colors.neutral100};
 `;
 
 const Header = styled.div`
   padding: 24px;
-  background: white;
+  background: ${props => props.theme.colors.neutral0};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 `;
 
@@ -207,8 +207,8 @@ const TabsWrapper = styled.div`
 
 const TabListWrapper = styled.div`
   padding: 0 24px;
-  background: white;
-  border-bottom: 1px solid #eaeaef;
+  background: ${props => props.theme.colors.neutral0};
+  border-bottom: 1px solid ${props => props.theme.colors.neutral200};
 `;
 
 const StyledTabsRoot = styled(Tabs.Root)`
@@ -225,7 +225,7 @@ const StyledTabsContent = styled(Tabs.Content)`
 
 const TabContentWrapper = styled.div`
   height: calc(100vh - 240px);
-  background: white;
+  background: ${props => props.theme.colors.neutral0};
   position: relative;
 `;
 
@@ -304,10 +304,10 @@ const ImportExportButton = styled.span`
   gap: 6px;
   padding: 8px 16px;
   height: 36px;
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${props => props.theme.colors.neutral0};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   border-radius: 4px;
-  color: #32324d;
+  color: ${props => props.theme.colors.neutral800};
   font-weight: 500;
   font-size: 13px;
   cursor: pointer;
@@ -315,9 +315,9 @@ const ImportExportButton = styled.span`
   white-space: nowrap;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #0EA5E9;
-    color: #0EA5E9;
+    background: ${props => props.theme.colors.neutral100};
+    border-color: ${props => props.theme.colors.primary600};
+    color: ${props => props.theme.colors.primary600};
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -338,8 +338,8 @@ const ImportLabel = styled.label`
 `;
 
 const BackButton = styled.button`
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${props => props.theme.colors.neutral0};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   border-radius: 4px;
   padding: 8px 10px;
   height: 36px;
@@ -350,8 +350,8 @@ const BackButton = styled.button`
   transition: all 200ms;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #c0c0cf;
+    background: ${props => props.theme.colors.neutral100};
+    border-color: ${props => props.theme.colors.neutral300};
     transform: translateY(-1px);
   }
 
@@ -366,8 +366,8 @@ const BackButton = styled.button`
 `;
 
 const VersionButton = styled.button`
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${props => props.theme.colors.neutral0};
+  border: 1px solid ${props => props.theme.colors.neutral200};
   border-radius: 4px;
   padding: 8px 16px;
   height: 36px;
@@ -379,13 +379,13 @@ const VersionButton = styled.button`
   transition: all 200ms;
   font-size: 13px;
   font-weight: 500;
-  color: #32324d;
+  color: ${props => props.theme.colors.neutral800};
   white-space: nowrap;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #0EA5E9;
-    color: #0EA5E9;
+    background: ${props => props.theme.colors.neutral100};
+    border-color: ${props => props.theme.colors.primary600};
+    color: ${props => props.theme.colors.primary600};
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -407,7 +407,7 @@ const VersionModal = styled.div`
   right: ${props => props.$isOpen ? '0' : '-450px'};
   width: 450px;
   height: 100vh;
-  background: white;
+  background: ${props => props.theme.colors.neutral0};
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   z-index: 9999;
   transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -430,7 +430,7 @@ const VersionModalOverlay = styled.div`
 
 const VersionModalHeader = styled.div`
   padding: 24px;
-  border-bottom: 1px solid #eaeaef;
+  border-bottom: 1px solid ${props => props.theme.colors.neutral200};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -444,13 +444,13 @@ const VersionModalContent = styled.div`
 
 const VersionItem = styled.div`
   padding: 16px;
-  border: 1px solid #eaeaef;
+  border: 1px solid ${props => props.theme.colors.neutral200};
   border-radius: 8px;
   margin-bottom: 12px;
   transition: all 150ms;
   
   &:hover {
-    border-color: #0EA5E9;
+    border-color: ${props => props.theme.colors.primary600};
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
 `;
@@ -464,7 +464,7 @@ const VersionItemHeader = styled.div`
 
 const VersionNumber = styled.div`
   font-weight: 600;
-  color: #32324d;
+  color: ${props => props.theme.colors.neutral800};
   display: flex;
   align-items: center;
   gap: 8px;
@@ -481,12 +481,12 @@ const VersionBadge = styled.span`
 
 const VersionDate = styled.div`
   font-size: 13px;
-  color: #666687;
+  color: ${props => props.theme.colors.neutral600};
 `;
 
 const VersionMeta = styled.div`
   font-size: 13px;
-  color: #666687;
+  color: ${props => props.theme.colors.neutral600};
   margin-bottom: 12px;
 `;
 
@@ -543,12 +543,12 @@ const CloseButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #666687;
+  color: ${props => props.theme.colors.neutral600};
   transition: all 150ms;
   
   &:hover {
-    color: #32324d;
-    background: #f6f6f9;
+    color: ${props => props.theme.colors.neutral800};
+    background: ${props => props.theme.colors.neutral100};
     border-radius: 4px;
   }
   
@@ -561,7 +561,7 @@ const CloseButton = styled.button`
 const EmptyVersions = styled.div`
   text-align: center;
   padding: 60px 20px;
-  color: #666687;
+  color: ${props => props.theme.colors.neutral600};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -571,7 +571,7 @@ const EmptyVersions = styled.div`
     width: 64px;
     height: 64px;
     margin-bottom: 16px;
-    color: #dcdce4;
+    color: ${props => props.theme.colors.neutral300};
   }
 `;