strapi-plugin-magic-mail 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +18 -17
  3. package/dist/admin/{App-D0NeObv5.js → App-D3TchJYB.js} +104 -153
  4. package/dist/admin/{App-UREZXX2k.mjs → App-DkyWmEgv.mjs} +105 -154
  5. package/dist/admin/{PluginSettings-Css2nHrB.js → PluginSettings-B6TdA1qd.js} +19 -13
  6. package/dist/admin/{PluginSettings-Duc_Y571.mjs → PluginSettings-DTqdZ-nW.mjs} +20 -14
  7. package/dist/admin/index.js +2 -2
  8. package/dist/admin/index.mjs +2 -2
  9. package/dist/server/index.js +3 -1
  10. package/dist/server/index.mjs +3 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,22 @@
1
+ ## [3.0.4](https://github.com/Schero94/Magic-Mail/compare/v3.0.3...v3.0.4) (2026-07-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **admin:** correct dark-mode navigation and free template docs ([557534f](https://github.com/Schero94/Magic-Mail/commit/557534f520cf0b562e031dc27a5c2e93485f3de9))
7
+ * **email:** preserve Bcc delivery for Gmail and Microsoft ([ea681ea](https://github.com/Schero94/Magic-Mail/commit/ea681ea87c04c65e69013b048646764f69c0729f))
8
+
9
+ ## [3.0.3](https://github.com/Schero94/Magic-Mail/compare/v3.0.2...v3.0.3) (2026-07-11)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * **admin:** use compact switch in template editor ([710db87](https://github.com/Schero94/Magic-Mail/commit/710db87e3b1db2c4ed3c7a1f75f30cc528574823))
15
+ * **admin:** use compact switches in account setup ([0b7abbb](https://github.com/Schero94/Magic-Mail/commit/0b7abbb24668de4199dc2b4cd1ff08f7551b0dc4))
16
+ * **admin:** use compact switches in plugin settings ([81b17cf](https://github.com/Schero94/Magic-Mail/commit/81b17cf60b9ae192307380e1177c03eec84868a6))
17
+ * **admin:** use compact switches in routing rules ([25e540e](https://github.com/Schero94/Magic-Mail/commit/25e540e0627e7e1b570696bdd5622ee32291faff))
18
+ * **admin:** use theme-aware switch card borders ([c04600d](https://github.com/Schero94/Magic-Mail/commit/c04600d4c0f8fe1168c15d5e84824da5511f3cd9))
19
+
1
20
  ## [3.0.2](https://github.com/Schero94/Magic-Mail/compare/v3.0.1...v3.0.2) (2026-07-11)
2
21
 
3
22
 
package/README.md CHANGED
@@ -397,15 +397,16 @@ await strapi.plugin('magic-mail').service('email-router').send({
397
397
 
398
398
  ### ✨ Features
399
399
 
400
- | Feature | FREE | PREMIUM | ADVANCED |
401
- |---------|------|---------|----------|
402
- | **Visual Designer** | ✅ Basic builder | ✅ + template library | ✅ Pro components |
403
- | **Templates Included** | 25 | 100 | 500 |
404
- | **Drag & Drop + Mustache** | ✅ | ✅ | ✅ |
405
- | **Import / Export** | ✅ | ✅ | ✅ |
406
- | **Template Versioning** | ❌ | ✅ | ✅ |
407
- | **Analytics** | ❌ | Basic insights | Advanced dashboard |
408
- | **A/B Testing** | ❌ | ❌ | ✅ |
400
+ Every Email Designer feature is included for free:
401
+
402
+ | Feature | Included |
403
+ |---------|----------|
404
+ | **Visual Designer** | ✅ |
405
+ | **Unlimited Templates** | ✅ |
406
+ | **Drag & Drop + Mustache** | ✅ |
407
+ | **Import / Export** | ✅ |
408
+ | **Template Versioning** | ✅ |
409
+ | **Email Analytics** | ✅ |
409
410
 
410
411
  ### 📧 Creating Email Templates
411
412
 
@@ -625,11 +626,11 @@ Target Account: SendGrid Marketing
625
626
  Priority: 10
626
627
  ```
627
628
 
628
- **2. Route VIP Customers via Premium SMTP:**
629
+ **2. Route VIP Customers via Priority SMTP:**
629
630
  ```
630
631
  Match Type: Recipient
631
632
  Match Value: @vip-customers.com
632
- Target Account: Premium SMTP
633
+ Target Account: Priority SMTP
633
634
  Fallback Account: Gmail OAuth
634
635
  Priority: 9
635
636
  ```
@@ -1343,11 +1344,11 @@ await strapi.plugin('email').service('email').send({
1343
1344
  ### VIP Customer Emails
1344
1345
 
1345
1346
  ```javascript
1346
- // Route VIP customers via premium account
1347
+ // Route VIP customers via a priority account
1347
1348
  // Routing Rule:
1348
1349
  // Match Type: Recipient
1349
1350
  // Match Value: @vip-domain.com
1350
- // Target Account: Premium SMTP
1351
+ // Target Account: Priority SMTP
1351
1352
  // Fallback Account: Gmail OAuth
1352
1353
 
1353
1354
  await strapi.plugin('email').service('email').send({
@@ -1356,9 +1357,9 @@ await strapi.plugin('email').service('email').send({
1356
1357
  html: content,
1357
1358
  priority: 'high',
1358
1359
  });
1359
- // ✅ Routes via Premium SMTP
1360
+ // ✅ Routes via Priority SMTP
1360
1361
  // ✅ High priority headers added
1361
- // ✅ Automatic fallback if premium account unavailable
1362
+ // ✅ Automatic fallback if the priority account is unavailable
1362
1363
  ```
1363
1364
 
1364
1365
  ---
@@ -1444,12 +1445,12 @@ https://yourdomain.com/magic-mail/oauth/yahoo/callback
1444
1445
  Create complex routing rules:
1445
1446
 
1446
1447
  ```javascript
1447
- // Rule 1: VIP customers via premium account
1448
+ // Rule 1: VIP customers via a priority account
1448
1449
  {
1449
1450
  name: "VIP Customer Emails",
1450
1451
  matchType: "recipient",
1451
1452
  matchValue: "@vip-customers.com",
1452
- accountName: "Premium SMTP",
1453
+ accountName: "Priority SMTP",
1453
1454
  fallbackAccountName: "Gmail OAuth",
1454
1455
  priority: 10,
1455
1456
  isActive: true
package/dist/admin/{App-D0NeObv5.js → App-D3TchJYB.js} RENAMED
@@ -398,18 +398,6 @@ const SectionTitle = styled__default.default(designSystem.Typography)`
398
398
  align-items: center;
399
399
  gap: 8px;
400
400
  `;
401
- styled__default.default(designSystem.Box)`
402
- background: linear-gradient(135deg, ${colors$1.primaryLight}, ${colors$1.successLight});
403
- border: 2px solid ${colors$1.primary}33;
404
- border-radius: 12px;
405
- padding: 20px;
406
- transition: all 0.3s;
407
-
408
- &:hover {
409
- border-color: ${colors$1.primary}66;
410
- box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
411
- }
412
- `;
413
401
  const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }) => {
414
402
  const { post, get, put } = admin.useFetchClient();
415
403
  const { toggleNotification } = admin.useNotification();
@@ -1219,41 +1207,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1219
1207
  designSystem.Box,
1220
1208
  {
1221
1209
  padding: 4,
1222
- background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
1210
+ background: "neutral100",
1223
1211
  hasRadius: true,
1212
+ borderColor: "neutral200",
1213
+ borderStyle: "solid",
1214
+ borderWidth: "1px",
1224
1215
  style: {
1225
- border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
1226
- borderRadius: "8px",
1227
- transition: "all 0.2s ease"
1216
+ borderRadius: "8px"
1228
1217
  },
1229
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
1230
- /* @__PURE__ */ jsxRuntime.jsx(
1231
- designSystem.Toggle,
1218
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1219
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, children: [
1220
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Use SSL/TLS Encryption" }),
1221
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "Use this for implicit SSL/TLS connections, typically on port 465." : "Port 587 will use STARTTLS instead. Confirm the server supports STARTTLS before sending." })
1222
+ ] }),
1223
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1224
+ designSystem.Switch,
1232
1225
  {
1233
1226
  checked: formData.secure,
1234
- onChange: () => handleChange("secure", !formData.secure),
1227
+ onCheckedChange: (checked) => handleChange("secure", checked),
1228
+ "aria-label": "Use SSL/TLS encryption",
1235
1229
  onLabel: "Enabled",
1236
- offLabel: "Disabled"
1230
+ offLabel: "Disabled",
1231
+ visibleLabels: false
1237
1232
  }
1238
- ),
1239
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [
1240
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
1241
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: [
1242
- formData.secure ? "🔒" : "⚠️",
1243
- " Use SSL/TLS Encryption"
1244
- ] }),
1245
- /* @__PURE__ */ jsxRuntime.jsx(
1246
- designSystem.Badge,
1247
- {
1248
- backgroundColor: formData.secure ? "success600" : "warning600",
1249
- textColor: "neutral0",
1250
- size: "S",
1251
- children: formData.secure ? "ENABLED" : "DISABLED"
1252
- }
1253
- )
1254
- ] }),
1255
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "SSL/TLS enabled - Use this for port 465" : "SSL/TLS disabled - Port 587 will use STARTTLS instead" })
1256
- ] })
1233
+ ) })
1257
1234
  ] })
1258
1235
  }
1259
1236
  )
@@ -1855,33 +1832,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1855
1832
  designSystem.Box,
1856
1833
  {
1857
1834
  padding: 4,
1858
- background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
1835
+ background: "neutral100",
1859
1836
  hasRadius: true,
1837
+ borderColor: "neutral200",
1838
+ borderStyle: "solid",
1839
+ borderWidth: "1px",
1860
1840
  style: {
1861
- border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
1862
- borderRadius: "8px",
1863
- transition: "all 0.2s ease"
1841
+ borderRadius: "8px"
1864
1842
  },
1865
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
1866
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1867
- designSystem.Toggle,
1843
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1844
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
1845
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Account Active" }),
1846
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account can send emails. Turn it off to pause sending without deleting the account." : "This account will not send emails until it is turned on again." })
1847
+ ] }),
1848
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1849
+ designSystem.Switch,
1868
1850
  {
1869
1851
  checked: formData.isActive,
1870
- onChange: () => handleChange("isActive", !formData.isActive),
1852
+ onCheckedChange: (checked) => handleChange("isActive", checked),
1853
+ "aria-label": "Account active",
1871
1854
  onLabel: "Active",
1872
- offLabel: "Inactive"
1855
+ offLabel: "Inactive",
1856
+ visibleLabels: false
1873
1857
  }
1874
- ) }),
1875
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
1876
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1877
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: [
1878
- formData.isActive ? "✅" : "❌",
1879
- " Account Active"
1880
- ] }),
1881
- formData.isActive ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "danger600", textColor: "neutral0", size: "S", children: "DISABLED" })
1882
- ] }),
1883
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account is enabled and can send emails. Disable it to prevent sending without deleting the account." : "This account is disabled and will not send any emails. Enable it to start sending again." })
1884
- ] })
1858
+ ) })
1885
1859
  ] })
1886
1860
  }
1887
1861
  ),
@@ -1889,30 +1863,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1889
1863
  designSystem.Box,
1890
1864
  {
1891
1865
  padding: 4,
1892
- background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
1866
+ background: "neutral100",
1893
1867
  hasRadius: true,
1868
+ borderColor: "neutral200",
1869
+ borderStyle: "solid",
1870
+ borderWidth: "1px",
1894
1871
  style: {
1895
- border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
1896
- borderRadius: "8px",
1897
- transition: "all 0.2s ease"
1872
+ borderRadius: "8px"
1898
1873
  },
1899
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
1900
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1901
- designSystem.Toggle,
1874
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1875
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
1876
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Set as Primary Account" }),
1877
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1878
+ ] }),
1879
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1880
+ designSystem.Switch,
1902
1881
  {
1903
1882
  checked: formData.isPrimary,
1904
- onChange: () => handleChange("isPrimary", !formData.isPrimary),
1883
+ onCheckedChange: (checked) => handleChange("isPrimary", checked),
1884
+ "aria-label": "Primary account",
1905
1885
  onLabel: "Primary",
1906
- offLabel: "Off"
1886
+ offLabel: "Not primary",
1887
+ visibleLabels: false
1907
1888
  }
1908
- ) }),
1909
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
1910
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1911
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: "⭐ Set as Primary Account" }),
1912
- formData.isPrimary && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "warning600", textColor: "neutral0", size: "S", children: "PRIMARY" })
1913
- ] }),
1914
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1915
- ] })
1889
+ ) })
1916
1890
  ] })
1917
1891
  }
1918
1892
  )
@@ -3779,31 +3753,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3779
3753
  designSystem.Box,
3780
3754
  {
3781
3755
  padding: 4,
3782
- background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
3756
+ background: "neutral100",
3783
3757
  hasRadius: true,
3758
+ borderColor: "neutral200",
3759
+ borderStyle: "solid",
3760
+ borderWidth: "1px",
3784
3761
  style: {
3785
3762
  width: "100%",
3786
- border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
3787
- borderRadius: theme$2.borderRadius.md,
3788
- transition: "all 0.2s ease"
3763
+ borderRadius: theme$2.borderRadius.md
3789
3764
  },
3790
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
3791
- /* @__PURE__ */ jsxRuntime.jsx(
3792
- designSystem.Toggle,
3765
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3766
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
3767
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3768
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3769
+ ] }),
3770
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3771
+ designSystem.Switch,
3793
3772
  {
3794
3773
  checked: formData.whatsappFallback,
3795
- onChange: () => handleChange("whatsappFallback", !formData.whatsappFallback),
3774
+ onCheckedChange: (checked) => handleChange("whatsappFallback", checked),
3775
+ "aria-label": "WhatsApp fallback",
3796
3776
  onLabel: "Enabled",
3797
- offLabel: "Disabled"
3777
+ offLabel: "Disabled",
3778
+ visibleLabels: false
3798
3779
  }
3799
- ),
3800
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
3801
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
3802
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3803
- formData.whatsappFallback && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" })
3804
- ] }),
3805
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3806
- ] })
3780
+ ) })
3807
3781
  ] })
3808
3782
  }
3809
3783
  ),
@@ -3825,39 +3799,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3825
3799
  designSystem.Box,
3826
3800
  {
3827
3801
  padding: 4,
3828
- background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
3802
+ background: "neutral100",
3829
3803
  hasRadius: true,
3804
+ borderColor: "neutral200",
3805
+ borderStyle: "solid",
3806
+ borderWidth: "1px",
3830
3807
  style: {
3831
3808
  width: "100%",
3832
- border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
3833
- borderRadius: theme$2.borderRadius.md,
3834
- transition: "all 0.2s ease"
3809
+ borderRadius: theme$2.borderRadius.md
3835
3810
  },
3836
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
3837
- /* @__PURE__ */ jsxRuntime.jsx(
3838
- designSystem.Toggle,
3811
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3812
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
3813
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "Rule Active" }),
3814
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3815
+ ] }),
3816
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3817
+ designSystem.Switch,
3839
3818
  {
3840
3819
  checked: formData.isActive,
3841
- onChange: () => handleChange("isActive", !formData.isActive),
3820
+ onCheckedChange: (checked) => handleChange("isActive", checked),
3821
+ "aria-label": "Routing rule active",
3842
3822
  onLabel: "Active",
3843
- offLabel: "Inactive"
3823
+ offLabel: "Inactive",
3824
+ visibleLabels: false
3844
3825
  }
3845
- ),
3846
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
3847
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
3848
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: formData.isActive ? "✅ Rule Active" : "❌ Rule Inactive" }),
3849
- /* @__PURE__ */ jsxRuntime.jsx(
3850
- designSystem.Badge,
3851
- {
3852
- backgroundColor: formData.isActive ? "success600" : "danger600",
3853
- textColor: "neutral0",
3854
- size: "S",
3855
- children: formData.isActive ? "ENABLED" : "DISABLED"
3856
- }
3857
- )
3858
- ] }),
3859
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3860
- ] })
3826
+ ) })
3861
3827
  ] })
3862
3828
  }
3863
3829
  )
@@ -5573,37 +5539,11 @@ const FieldWrapper = styled__default.default.div`
5573
5539
  flex: ${(props) => props.flex || "initial"};
5574
5540
  width: ${(props) => props.width || "auto"};
5575
5541
  `;
5576
- const ToggleWrapper = styled__default.default.div`
5542
+ const SwitchWrapper = styled__default.default.div`
5577
5543
  padding-top: 28px;
5578
5544
  display: flex;
5579
5545
  gap: 12px;
5580
5546
  align-items: center;
5581
-
5582
- /* Custom green styling for active toggle */
5583
- button[aria-checked="true"] {
5584
- background-color: var(--colors-success600, #22C55E) !important;
5585
- border-color: var(--colors-success600, #22C55E) !important;
5586
-
5587
- span {
5588
- background-color: white !important;
5589
- }
5590
- }
5591
-
5592
- button[aria-checked="false"] {
5593
- background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
5594
- border-color: rgba(128, 128, 128, 0.2) !important;
5595
-
5596
- span {
5597
- background-color: white !important;
5598
- }
5599
- }
5600
-
5601
- /* Label styling based on state */
5602
- p {
5603
- color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
5604
- font-weight: 600;
5605
- transition: color 0.2s;
5606
- }
5607
5547
  `;
5608
5548
  const TabsWrapper = styled__default.default.div`
5609
5549
  flex: 1;
@@ -5733,6 +5673,7 @@ const ImportLabel = styled__default.default.label`
5733
5673
  const BackButton = styled__default.default.button`
5734
5674
  background: ${(p) => p.theme.colors.neutral0};
5735
5675
  border: 1px solid rgba(128, 128, 128, 0.2);
5676
+ color: ${(p) => p.theme.colors.neutral800};
5736
5677
  border-radius: 4px;
5737
5678
  padding: 8px 10px;
5738
5679
  height: 36px;
@@ -6279,7 +6220,15 @@ const EditorPage = () => {
6279
6220
  /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { children: [
6280
6221
  /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
6281
6222
  /* @__PURE__ */ jsxRuntime.jsxs(HeaderLeft, { children: [
6282
- /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => navigate("/plugins/magic-mail/designer"), children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, {}) }),
6223
+ /* @__PURE__ */ jsxRuntime.jsx(
6224
+ BackButton,
6225
+ {
6226
+ type: "button",
6227
+ "aria-label": "Back to email templates",
6228
+ onClick: () => navigate("/plugins/magic-mail/designer"),
6229
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, {})
6230
+ }
6231
+ ),
6283
6232
  /* @__PURE__ */ jsxRuntime.jsxs(TitleContainer, { children: [
6284
6233
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: isCoreEmail ? `${coreEmailType === "reset-password" ? "Reset Password" : "Email Confirmation"}` : isNewTemplate ? "New Template" : `${templateData.name}` }),
6285
6234
  !isNewTemplate && !isCoreEmail && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Versioning enabled" }),
@@ -6365,17 +6314,19 @@ const EditorPage = () => {
6365
6314
  }
6366
6315
  )
6367
6316
  ] }) }),
6368
- !isCoreEmail && /* @__PURE__ */ jsxRuntime.jsxs(ToggleWrapper, { $isActive: templateData.isActive, children: [
6317
+ !isCoreEmail && /* @__PURE__ */ jsxRuntime.jsxs(SwitchWrapper, { children: [
6318
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: "Template active" }),
6369
6319
  /* @__PURE__ */ jsxRuntime.jsx(
6370
- designSystem.Toggle,
6320
+ designSystem.Switch,
6371
6321
  {
6372
6322
  checked: templateData.isActive,
6373
- onChange: () => setTemplateData({ ...templateData, isActive: !templateData.isActive }),
6323
+ onCheckedChange: (checked) => setTemplateData({ ...templateData, isActive: checked }),
6324
+ "aria-label": "Template active",
6374
6325
  onLabel: "Active",
6375
- offLabel: "Inactive"
6326
+ offLabel: "Inactive",
6327
+ visibleLabels: false
6376
6328
  }
6377
- ),
6378
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: templateData.isActive ? "Active" : "Inactive" })
6329
+ )
6379
6330
  ] })
6380
6331
  ] })
6381
6332
  ] }),
package/dist/admin/{App-UREZXX2k.mjs → App-DkyWmEgv.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React, { useRef, useEffect, useState, useCallback } from "react";
3
3
  import { useNavigate, useLocation } from "react-router-dom";
4
- import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Toggle, Badge, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, Tabs, Accordion } from "@strapi/design-system";
4
+ import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Switch, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Badge, Table, Tabs, Accordion } from "@strapi/design-system";
5
5
  import { useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
6
6
  import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, BoltIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
7
7
  import styled, { css, keyframes } from "styled-components";
@@ -375,18 +375,6 @@ const SectionTitle = styled(Typography)`
375
375
  align-items: center;
376
376
  gap: 8px;
377
377
  `;
378
- styled(Box)`
379
- background: linear-gradient(135deg, ${colors$1.primaryLight}, ${colors$1.successLight});
380
- border: 2px solid ${colors$1.primary}33;
381
- border-radius: 12px;
382
- padding: 20px;
383
- transition: all 0.3s;
384
-
385
- &:hover {
386
- border-color: ${colors$1.primary}66;
387
- box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
388
- }
389
- `;
390
378
  const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }) => {
391
379
  const { post, get, put } = useFetchClient();
392
380
  const { toggleNotification } = useNotification();
@@ -1196,41 +1184,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1196
1184
  Box,
1197
1185
  {
1198
1186
  padding: 4,
1199
- background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
1187
+ background: "neutral100",
1200
1188
  hasRadius: true,
1189
+ borderColor: "neutral200",
1190
+ borderStyle: "solid",
1191
+ borderWidth: "1px",
1201
1192
  style: {
1202
- border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
1203
- borderRadius: "8px",
1204
- transition: "all 0.2s ease"
1193
+ borderRadius: "8px"
1205
1194
  },
1206
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
1207
- /* @__PURE__ */ jsx(
1208
- Toggle,
1195
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1196
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, children: [
1197
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Use SSL/TLS Encryption" }),
1198
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "Use this for implicit SSL/TLS connections, typically on port 465." : "Port 587 will use STARTTLS instead. Confirm the server supports STARTTLS before sending." })
1199
+ ] }),
1200
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1201
+ Switch,
1209
1202
  {
1210
1203
  checked: formData.secure,
1211
- onChange: () => handleChange("secure", !formData.secure),
1204
+ onCheckedChange: (checked) => handleChange("secure", checked),
1205
+ "aria-label": "Use SSL/TLS encryption",
1212
1206
  onLabel: "Enabled",
1213
- offLabel: "Disabled"
1207
+ offLabel: "Disabled",
1208
+ visibleLabels: false
1214
1209
  }
1215
- ),
1216
- /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [
1217
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
1218
- /* @__PURE__ */ jsxs(Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: [
1219
- formData.secure ? "🔒" : "⚠️",
1220
- " Use SSL/TLS Encryption"
1221
- ] }),
1222
- /* @__PURE__ */ jsx(
1223
- Badge,
1224
- {
1225
- backgroundColor: formData.secure ? "success600" : "warning600",
1226
- textColor: "neutral0",
1227
- size: "S",
1228
- children: formData.secure ? "ENABLED" : "DISABLED"
1229
- }
1230
- )
1231
- ] }),
1232
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "SSL/TLS enabled - Use this for port 465" : "SSL/TLS disabled - Port 587 will use STARTTLS instead" })
1233
- ] })
1210
+ ) })
1234
1211
  ] })
1235
1212
  }
1236
1213
  )
@@ -1832,33 +1809,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1832
1809
  Box,
1833
1810
  {
1834
1811
  padding: 4,
1835
- background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
1812
+ background: "neutral100",
1836
1813
  hasRadius: true,
1814
+ borderColor: "neutral200",
1815
+ borderStyle: "solid",
1816
+ borderWidth: "1px",
1837
1817
  style: {
1838
- border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
1839
- borderRadius: "8px",
1840
- transition: "all 0.2s ease"
1818
+ borderRadius: "8px"
1841
1819
  },
1842
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
1843
- /* @__PURE__ */ jsx(Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsx(
1844
- Toggle,
1820
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1821
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
1822
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Account Active" }),
1823
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account can send emails. Turn it off to pause sending without deleting the account." : "This account will not send emails until it is turned on again." })
1824
+ ] }),
1825
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1826
+ Switch,
1845
1827
  {
1846
1828
  checked: formData.isActive,
1847
- onChange: () => handleChange("isActive", !formData.isActive),
1829
+ onCheckedChange: (checked) => handleChange("isActive", checked),
1830
+ "aria-label": "Account active",
1848
1831
  onLabel: "Active",
1849
- offLabel: "Inactive"
1832
+ offLabel: "Inactive",
1833
+ visibleLabels: false
1850
1834
  }
1851
- ) }),
1852
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
1853
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1854
- /* @__PURE__ */ jsxs(Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: [
1855
- formData.isActive ? "✅" : "❌",
1856
- " Account Active"
1857
- ] }),
1858
- formData.isActive ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "danger600", textColor: "neutral0", size: "S", children: "DISABLED" })
1859
- ] }),
1860
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account is enabled and can send emails. Disable it to prevent sending without deleting the account." : "This account is disabled and will not send any emails. Enable it to start sending again." })
1861
- ] })
1835
+ ) })
1862
1836
  ] })
1863
1837
  }
1864
1838
  ),
@@ -1866,30 +1840,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1866
1840
  Box,
1867
1841
  {
1868
1842
  padding: 4,
1869
- background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
1843
+ background: "neutral100",
1870
1844
  hasRadius: true,
1845
+ borderColor: "neutral200",
1846
+ borderStyle: "solid",
1847
+ borderWidth: "1px",
1871
1848
  style: {
1872
- border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
1873
- borderRadius: "8px",
1874
- transition: "all 0.2s ease"
1849
+ borderRadius: "8px"
1875
1850
  },
1876
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
1877
- /* @__PURE__ */ jsx(Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsx(
1878
- Toggle,
1851
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1852
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
1853
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Set as Primary Account" }),
1854
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1855
+ ] }),
1856
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1857
+ Switch,
1879
1858
  {
1880
1859
  checked: formData.isPrimary,
1881
- onChange: () => handleChange("isPrimary", !formData.isPrimary),
1860
+ onCheckedChange: (checked) => handleChange("isPrimary", checked),
1861
+ "aria-label": "Primary account",
1882
1862
  onLabel: "Primary",
1883
- offLabel: "Off"
1863
+ offLabel: "Not primary",
1864
+ visibleLabels: false
1884
1865
  }
1885
- ) }),
1886
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
1887
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1888
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: "⭐ Set as Primary Account" }),
1889
- formData.isPrimary && /* @__PURE__ */ jsx(Badge, { backgroundColor: "warning600", textColor: "neutral0", size: "S", children: "PRIMARY" })
1890
- ] }),
1891
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1892
- ] })
1866
+ ) })
1893
1867
  ] })
1894
1868
  }
1895
1869
  )
@@ -3756,31 +3730,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3756
3730
  Box,
3757
3731
  {
3758
3732
  padding: 4,
3759
- background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
3733
+ background: "neutral100",
3760
3734
  hasRadius: true,
3735
+ borderColor: "neutral200",
3736
+ borderStyle: "solid",
3737
+ borderWidth: "1px",
3761
3738
  style: {
3762
3739
  width: "100%",
3763
- border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
3764
- borderRadius: theme$2.borderRadius.md,
3765
- transition: "all 0.2s ease"
3740
+ borderRadius: theme$2.borderRadius.md
3766
3741
  },
3767
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
3768
- /* @__PURE__ */ jsx(
3769
- Toggle,
3742
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3743
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
3744
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3745
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3746
+ ] }),
3747
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
3748
+ Switch,
3770
3749
  {
3771
3750
  checked: formData.whatsappFallback,
3772
- onChange: () => handleChange("whatsappFallback", !formData.whatsappFallback),
3751
+ onCheckedChange: (checked) => handleChange("whatsappFallback", checked),
3752
+ "aria-label": "WhatsApp fallback",
3773
3753
  onLabel: "Enabled",
3774
- offLabel: "Disabled"
3754
+ offLabel: "Disabled",
3755
+ visibleLabels: false
3775
3756
  }
3776
- ),
3777
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
3778
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
3779
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3780
- formData.whatsappFallback && /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" })
3781
- ] }),
3782
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3783
- ] })
3757
+ ) })
3784
3758
  ] })
3785
3759
  }
3786
3760
  ),
@@ -3802,39 +3776,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3802
3776
  Box,
3803
3777
  {
3804
3778
  padding: 4,
3805
- background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
3779
+ background: "neutral100",
3806
3780
  hasRadius: true,
3781
+ borderColor: "neutral200",
3782
+ borderStyle: "solid",
3783
+ borderWidth: "1px",
3807
3784
  style: {
3808
3785
  width: "100%",
3809
- border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
3810
- borderRadius: theme$2.borderRadius.md,
3811
- transition: "all 0.2s ease"
3786
+ borderRadius: theme$2.borderRadius.md
3812
3787
  },
3813
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
3814
- /* @__PURE__ */ jsx(
3815
- Toggle,
3788
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3789
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
3790
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "Rule Active" }),
3791
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3792
+ ] }),
3793
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
3794
+ Switch,
3816
3795
  {
3817
3796
  checked: formData.isActive,
3818
- onChange: () => handleChange("isActive", !formData.isActive),
3797
+ onCheckedChange: (checked) => handleChange("isActive", checked),
3798
+ "aria-label": "Routing rule active",
3819
3799
  onLabel: "Active",
3820
- offLabel: "Inactive"
3800
+ offLabel: "Inactive",
3801
+ visibleLabels: false
3821
3802
  }
3822
- ),
3823
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
3824
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
3825
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: formData.isActive ? "✅ Rule Active" : "❌ Rule Inactive" }),
3826
- /* @__PURE__ */ jsx(
3827
- Badge,
3828
- {
3829
- backgroundColor: formData.isActive ? "success600" : "danger600",
3830
- textColor: "neutral0",
3831
- size: "S",
3832
- children: formData.isActive ? "ENABLED" : "DISABLED"
3833
- }
3834
- )
3835
- ] }),
3836
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3837
- ] })
3803
+ ) })
3838
3804
  ] })
3839
3805
  }
3840
3806
  )
@@ -5550,37 +5516,11 @@ const FieldWrapper = styled.div`
5550
5516
  flex: ${(props) => props.flex || "initial"};
5551
5517
  width: ${(props) => props.width || "auto"};
5552
5518
  `;
5553
- const ToggleWrapper = styled.div`
5519
+ const SwitchWrapper = styled.div`
5554
5520
  padding-top: 28px;
5555
5521
  display: flex;
5556
5522
  gap: 12px;
5557
5523
  align-items: center;
5558
-
5559
- /* Custom green styling for active toggle */
5560
- button[aria-checked="true"] {
5561
- background-color: var(--colors-success600, #22C55E) !important;
5562
- border-color: var(--colors-success600, #22C55E) !important;
5563
-
5564
- span {
5565
- background-color: white !important;
5566
- }
5567
- }
5568
-
5569
- button[aria-checked="false"] {
5570
- background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
5571
- border-color: rgba(128, 128, 128, 0.2) !important;
5572
-
5573
- span {
5574
- background-color: white !important;
5575
- }
5576
- }
5577
-
5578
- /* Label styling based on state */
5579
- p {
5580
- color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
5581
- font-weight: 600;
5582
- transition: color 0.2s;
5583
- }
5584
5524
  `;
5585
5525
  const TabsWrapper = styled.div`
5586
5526
  flex: 1;
@@ -5710,6 +5650,7 @@ const ImportLabel = styled.label`
5710
5650
  const BackButton = styled.button`
5711
5651
  background: ${(p) => p.theme.colors.neutral0};
5712
5652
  border: 1px solid rgba(128, 128, 128, 0.2);
5653
+ color: ${(p) => p.theme.colors.neutral800};
5713
5654
  border-radius: 4px;
5714
5655
  padding: 8px 10px;
5715
5656
  height: 36px;
@@ -6256,7 +6197,15 @@ const EditorPage = () => {
6256
6197
  /* @__PURE__ */ jsxs(Header$1, { children: [
6257
6198
  /* @__PURE__ */ jsxs(HeaderRow, { children: [
6258
6199
  /* @__PURE__ */ jsxs(HeaderLeft, { children: [
6259
- /* @__PURE__ */ jsx(BackButton, { onClick: () => navigate("/plugins/magic-mail/designer"), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
6200
+ /* @__PURE__ */ jsx(
6201
+ BackButton,
6202
+ {
6203
+ type: "button",
6204
+ "aria-label": "Back to email templates",
6205
+ onClick: () => navigate("/plugins/magic-mail/designer"),
6206
+ children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
6207
+ }
6208
+ ),
6260
6209
  /* @__PURE__ */ jsxs(TitleContainer, { children: [
6261
6210
  /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: isCoreEmail ? `${coreEmailType === "reset-password" ? "Reset Password" : "Email Confirmation"}` : isNewTemplate ? "New Template" : `${templateData.name}` }),
6262
6211
  !isNewTemplate && !isCoreEmail && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Versioning enabled" }),
@@ -6342,17 +6291,19 @@ const EditorPage = () => {
6342
6291
  }
6343
6292
  )
6344
6293
  ] }) }),
6345
- !isCoreEmail && /* @__PURE__ */ jsxs(ToggleWrapper, { $isActive: templateData.isActive, children: [
6294
+ !isCoreEmail && /* @__PURE__ */ jsxs(SwitchWrapper, { children: [
6295
+ /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: "Template active" }),
6346
6296
  /* @__PURE__ */ jsx(
6347
- Toggle,
6297
+ Switch,
6348
6298
  {
6349
6299
  checked: templateData.isActive,
6350
- onChange: () => setTemplateData({ ...templateData, isActive: !templateData.isActive }),
6300
+ onCheckedChange: (checked) => setTemplateData({ ...templateData, isActive: checked }),
6301
+ "aria-label": "Template active",
6351
6302
  onLabel: "Active",
6352
- offLabel: "Inactive"
6303
+ offLabel: "Inactive",
6304
+ visibleLabels: false
6353
6305
  }
6354
- ),
6355
- /* @__PURE__ */ jsx(Typography, { variant: "omega", children: templateData.isActive ? "Active" : "Inactive" })
6306
+ )
6356
6307
  ] })
6357
6308
  ] })
6358
6309
  ] }),
package/dist/admin/{PluginSettings-Css2nHrB.js → PluginSettings-B6TdA1qd.js} RENAMED
@@ -103,7 +103,7 @@ const SettingDescription = styled__default.default(designSystem.Typography)`
103
103
  line-height: 1.5;
104
104
  display: block;
105
105
  `;
106
- const ToggleWrapper = styled__default.default(designSystem.Box)`
106
+ const SwitchWrapper = styled__default.default(designSystem.Box)`
107
107
  flex-shrink: 0;
108
108
  display: flex;
109
109
  align-items: center;
@@ -241,13 +241,15 @@ const PluginSettingsPage = () => {
241
241
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable Link Tracking" }),
242
242
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: "Rewrite all links in outgoing emails to track click-through rates. This helps measure email engagement and campaign effectiveness." })
243
243
  ] }),
244
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
245
- designSystem.Toggle,
244
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
245
+ designSystem.Switch,
246
246
  {
247
247
  checked: settings.enableLinkTracking,
248
- onChange: (e) => handleChange("enableLinkTracking", e.target.checked),
248
+ onCheckedChange: (checked) => handleChange("enableLinkTracking", checked),
249
+ "aria-label": "Enable Link Tracking",
249
250
  onLabel: "Enabled",
250
- offLabel: "Disabled"
251
+ offLabel: "Disabled",
252
+ visibleLabels: false
251
253
  }
252
254
  ) })
253
255
  ] }),
@@ -290,13 +292,15 @@ const PluginSettingsPage = () => {
290
292
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable Open Tracking" }),
291
293
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: "Inject an invisible tracking pixel into emails to detect when they are opened. Note: Some email clients block tracking pixels." })
292
294
  ] }),
293
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
294
- designSystem.Toggle,
295
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
296
+ designSystem.Switch,
295
297
  {
296
298
  checked: settings.enableOpenTracking,
297
- onChange: (e) => handleChange("enableOpenTracking", e.target.checked),
299
+ onCheckedChange: (checked) => handleChange("enableOpenTracking", checked),
300
+ "aria-label": "Enable Open Tracking",
298
301
  onLabel: "Enabled",
299
- offLabel: "Disabled"
302
+ offLabel: "Disabled",
303
+ visibleLabels: false
300
304
  }
301
305
  ) })
302
306
  ] }) })
@@ -315,13 +319,15 @@ const PluginSettingsPage = () => {
315
319
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable List-Unsubscribe Header" }),
316
320
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: 'Add RFC 8058 compliant unsubscribe headers. This enables the "Unsubscribe" button in email clients like Gmail and Outlook.' })
317
321
  ] }),
318
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
319
- designSystem.Toggle,
322
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
323
+ designSystem.Switch,
320
324
  {
321
325
  checked: settings.enableUnsubscribeHeader,
322
- onChange: (e) => handleChange("enableUnsubscribeHeader", e.target.checked),
326
+ onCheckedChange: (checked) => handleChange("enableUnsubscribeHeader", checked),
327
+ "aria-label": "Enable List-Unsubscribe Header",
323
328
  onLabel: "Enabled",
324
- offLabel: "Disabled"
329
+ offLabel: "Disabled",
330
+ visibleLabels: false
325
331
  }
326
332
  ) })
327
333
  ] }),
package/dist/admin/{PluginSettings-Duc_Y571.mjs → PluginSettings-DTqdZ-nW.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { useState, useEffect } from "react";
3
- import { Loader, Typography, Flex, Toggle, Box, Field, TextInput } from "@strapi/design-system";
3
+ import { Loader, Typography, Flex, Switch, Box, Field, TextInput } from "@strapi/design-system";
4
4
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
5
5
  import { ArrowPathIcon, LinkIcon, EyeIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/24/outline";
6
6
  import styled, { css, keyframes } from "styled-components";
@@ -99,7 +99,7 @@ const SettingDescription = styled(Typography)`
99
99
  line-height: 1.5;
100
100
  display: block;
101
101
  `;
102
- const ToggleWrapper = styled(Box)`
102
+ const SwitchWrapper = styled(Box)`
103
103
  flex-shrink: 0;
104
104
  display: flex;
105
105
  align-items: center;
@@ -237,13 +237,15 @@ const PluginSettingsPage = () => {
237
237
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable Link Tracking" }),
238
238
  /* @__PURE__ */ jsx(SettingDescription, { children: "Rewrite all links in outgoing emails to track click-through rates. This helps measure email engagement and campaign effectiveness." })
239
239
  ] }),
240
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
241
- Toggle,
240
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
241
+ Switch,
242
242
  {
243
243
  checked: settings.enableLinkTracking,
244
- onChange: (e) => handleChange("enableLinkTracking", e.target.checked),
244
+ onCheckedChange: (checked) => handleChange("enableLinkTracking", checked),
245
+ "aria-label": "Enable Link Tracking",
245
246
  onLabel: "Enabled",
246
- offLabel: "Disabled"
247
+ offLabel: "Disabled",
248
+ visibleLabels: false
247
249
  }
248
250
  ) })
249
251
  ] }),
@@ -286,13 +288,15 @@ const PluginSettingsPage = () => {
286
288
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable Open Tracking" }),
287
289
  /* @__PURE__ */ jsx(SettingDescription, { children: "Inject an invisible tracking pixel into emails to detect when they are opened. Note: Some email clients block tracking pixels." })
288
290
  ] }),
289
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
290
- Toggle,
291
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
292
+ Switch,
291
293
  {
292
294
  checked: settings.enableOpenTracking,
293
- onChange: (e) => handleChange("enableOpenTracking", e.target.checked),
295
+ onCheckedChange: (checked) => handleChange("enableOpenTracking", checked),
296
+ "aria-label": "Enable Open Tracking",
294
297
  onLabel: "Enabled",
295
- offLabel: "Disabled"
298
+ offLabel: "Disabled",
299
+ visibleLabels: false
296
300
  }
297
301
  ) })
298
302
  ] }) })
@@ -311,13 +315,15 @@ const PluginSettingsPage = () => {
311
315
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable List-Unsubscribe Header" }),
312
316
  /* @__PURE__ */ jsx(SettingDescription, { children: 'Add RFC 8058 compliant unsubscribe headers. This enables the "Unsubscribe" button in email clients like Gmail and Outlook.' })
313
317
  ] }),
314
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
315
- Toggle,
318
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
319
+ Switch,
316
320
  {
317
321
  checked: settings.enableUnsubscribeHeader,
318
- onChange: (e) => handleChange("enableUnsubscribeHeader", e.target.checked),
322
+ onCheckedChange: (checked) => handleChange("enableUnsubscribeHeader", checked),
323
+ "aria-label": "Enable List-Unsubscribe Header",
319
324
  onLabel: "Enabled",
320
- offLabel: "Disabled"
325
+ offLabel: "Disabled",
326
+ visibleLabels: false
321
327
  }
322
328
  ) })
323
329
  ] }),
package/dist/admin/index.js CHANGED
@@ -50,7 +50,7 @@ const index = {
50
50
  id: `${pluginId}.plugin.name`,
51
51
  defaultMessage: "MagicMail"
52
52
  },
53
- Component: () => Promise.resolve().then(() => require("./App-D0NeObv5.js")),
53
+ Component: () => Promise.resolve().then(() => require("./App-D3TchJYB.js")),
54
54
  permissions: pluginPermissions
55
55
  });
56
56
  app.createSettingSection(
@@ -67,7 +67,7 @@ const index = {
67
67
  },
68
68
  id: "plugin-settings",
69
69
  to: `${pluginId}/plugin-settings`,
70
- Component: () => Promise.resolve().then(() => require("./PluginSettings-Css2nHrB.js")),
70
+ Component: () => Promise.resolve().then(() => require("./PluginSettings-B6TdA1qd.js")),
71
71
  permissions: pluginPermissions
72
72
  }
73
73
  ]
package/dist/admin/index.mjs CHANGED
@@ -48,7 +48,7 @@ const index = {
48
48
  id: `${pluginId}.plugin.name`,
49
49
  defaultMessage: "MagicMail"
50
50
  },
51
- Component: () => import("./App-UREZXX2k.mjs"),
51
+ Component: () => import("./App-DkyWmEgv.mjs"),
52
52
  permissions: pluginPermissions
53
53
  });
54
54
  app.createSettingSection(
@@ -65,7 +65,7 @@ const index = {
65
65
  },
66
66
  id: "plugin-settings",
67
67
  to: `${pluginId}/plugin-settings`,
68
- Component: () => import("./PluginSettings-Duc_Y571.mjs"),
68
+ Component: () => import("./PluginSettings-DTqdZ-nW.mjs"),
69
69
  permissions: pluginPermissions
70
70
  }
71
71
  ]
package/dist/server/index.js CHANGED
@@ -4361,7 +4361,9 @@ var require_email_router = __commonJS({
4361
4361
  date: /* @__PURE__ */ new Date()
4362
4362
  };
4363
4363
  return new Promise((resolve, reject) => {
4364
- new MailComposer(mailOptions).compile().build((err, message) => {
4364
+ const compiledMessage = new MailComposer(mailOptions).compile();
4365
+ compiledMessage.keepBcc = true;
4366
+ compiledMessage.build((err, message) => {
4365
4367
  if (err) reject(err);
4366
4368
  else resolve(message);
4367
4369
  });
package/dist/server/index.mjs CHANGED
@@ -4367,7 +4367,9 @@ var require_email_router = __commonJS({
4367
4367
  date: /* @__PURE__ */ new Date()
4368
4368
  };
4369
4369
  return new Promise((resolve, reject) => {
4370
- new MailComposer(mailOptions).compile().build((err, message) => {
4370
+ const compiledMessage = new MailComposer(mailOptions).compile();
4371
+ compiledMessage.keepBcc = true;
4372
+ compiledMessage.build((err, message) => {
4371
4373
  if (err) reject(err);
4372
4374
  else resolve(message);
4373
4375
  });
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.2",
2
+ "version": "3.0.4",
3
3
  "keywords": [
4
4
  "strapi",
5
5
  "plugin",