strapi-plugin-magic-mail 2.3.10 → 2.4.0

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 (17) hide show
  1. package/dist/_chunks/{App-BMaJu77a.js → App-58t1-H0G.js} +895 -534
  2. package/dist/_chunks/{App-DxiMl-Zd.mjs → App-ClJVoU2s.mjs} +896 -535
  3. package/dist/_chunks/PluginSettings-D2BUUHY1.js +376 -0
  4. package/dist/_chunks/PluginSettings-ywPWZVt0.mjs +374 -0
  5. package/dist/_chunks/{Settings-BSFLpt0H.js → Settings-CPPrGxLm.js} +38 -82
  6. package/dist/_chunks/{Settings-Ca5UE3c1.mjs → Settings-Cc-hhoLA.mjs} +39 -83
  7. package/dist/_chunks/StyledButtons-M7vUd2N4.js +435 -0
  8. package/dist/_chunks/StyledButtons-nt2C730e.mjs +434 -0
  9. package/dist/_chunks/{de-YhjDItIL.js → de-CF2ItE3Z.js} +1 -1
  10. package/dist/_chunks/{de-CpIQf94q.mjs → de-CwbYw2jT.mjs} +1 -1
  11. package/dist/_chunks/{en-BcdTnA2-.js → en-CK6UpShS.js} +1 -1
  12. package/dist/_chunks/{en-BHmOVzsP.mjs → en-ZRmfU4qX.mjs} +1 -1
  13. package/dist/admin/index.js +16 -7
  14. package/dist/admin/index.mjs +16 -7
  15. package/dist/server/index.js +298 -54
  16. package/dist/server/index.mjs +298 -54
  17. package/package.json +8 -8
package/dist/_chunks/{App-BMaJu77a.js → App-58t1-H0G.js} RENAMED
@@ -8,6 +8,7 @@ const outline = require("@heroicons/react/24/outline");
8
8
  const admin = require("@strapi/strapi/admin");
9
9
  const styled = require("styled-components");
10
10
  const icons = require("@strapi/icons");
11
+ const StyledButtons = require("./StyledButtons-M7vUd2N4.js");
11
12
  const ReactEmailEditor = require("react-email-editor");
12
13
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
13
14
  function _interopNamespace(e) {
@@ -64,18 +65,23 @@ const theme$3 = {
64
65
  primary: {
65
66
  50: "#F0F9FF",
66
67
  100: "#E0F2FE",
68
+ 200: "#BAE6FD",
67
69
  500: "#0EA5E9",
68
- 600: "#0284C7"
70
+ 600: "#0284C7",
71
+ 700: "#0369A1"
69
72
  },
70
73
  secondary: {
71
74
  50: "#FAF5FF",
72
75
  100: "#F3E8FF",
76
+ 500: "#A855F7",
73
77
  600: "#9333EA"
74
78
  },
75
79
  success: {
80
+ 50: "#F0FDF4",
76
81
  100: "#DCFCE7",
77
82
  500: "#22C55E",
78
- 600: "#16A34A"
83
+ 600: "#16A34A",
84
+ 700: "#15803D"
79
85
  },
80
86
  warning: {
81
87
  100: "#FEF3C7",
@@ -1826,18 +1832,17 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1826
1832
  ] }) }),
1827
1833
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
1828
1834
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: currentStep > 1 && /* @__PURE__ */ jsxRuntime.jsx(
1829
- designSystem.Button,
1835
+ StyledButtons.TertiaryButton,
1830
1836
  {
1831
- variant: "tertiary",
1832
1837
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
1833
1838
  onClick: () => setCurrentStep(currentStep - 1),
1834
1839
  children: "Back"
1835
1840
  }
1836
1841
  ) }),
1837
1842
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
1838
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
1843
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
1839
1844
  currentStep < 4 ? /* @__PURE__ */ jsxRuntime.jsx(
1840
- designSystem.Button,
1845
+ StyledButtons.GradientButton,
1841
1846
  {
1842
1847
  endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}),
1843
1848
  onClick: () => setCurrentStep(currentStep + 1),
@@ -1845,7 +1850,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1845
1850
  children: "Continue"
1846
1851
  }
1847
1852
  ) : /* @__PURE__ */ jsxRuntime.jsx(
1848
- designSystem.Button,
1853
+ StyledButtons.GradientButton,
1849
1854
  {
1850
1855
  onClick: handleSubmit,
1851
1856
  loading,
@@ -2210,6 +2215,137 @@ const StyledSearchInput$2 = styled__default.default.input`
2210
2215
  color: ${(props) => props.theme.colors.neutral500};
2211
2216
  }
2212
2217
  `;
2218
+ const StyledModalContent$1 = styled__default.default(designSystem.Modal.Content)`
2219
+ && {
2220
+ border-radius: 16px;
2221
+ overflow: hidden;
2222
+ max-width: 560px;
2223
+ width: 90vw;
2224
+ }
2225
+ `;
2226
+ const StyledModalHeader$1 = styled__default.default(designSystem.Modal.Header)`
2227
+ && {
2228
+ background: linear-gradient(135deg, ${theme$3.colors.primary[500]} 0%, ${theme$3.colors.secondary[500]} 100%);
2229
+ padding: 24px 28px;
2230
+ border-bottom: none;
2231
+
2232
+ h2 {
2233
+ color: white;
2234
+ font-size: 1.25rem;
2235
+ font-weight: 700;
2236
+ }
2237
+
2238
+ button {
2239
+ color: white !important;
2240
+ opacity: 0.9;
2241
+ background: rgba(255, 255, 255, 0.15) !important;
2242
+ border-radius: 8px;
2243
+
2244
+ &:hover {
2245
+ opacity: 1;
2246
+ background: rgba(255, 255, 255, 0.25) !important;
2247
+ }
2248
+
2249
+ svg {
2250
+ fill: white !important;
2251
+ color: white !important;
2252
+ path { fill: white !important; }
2253
+ }
2254
+ }
2255
+ }
2256
+ `;
2257
+ const StyledModalBody$1 = styled__default.default(designSystem.Modal.Body)`
2258
+ && {
2259
+ padding: 24px 28px;
2260
+ background: ${(props) => props.theme.colors.neutral0};
2261
+ width: 100%;
2262
+ box-sizing: border-box;
2263
+ }
2264
+ `;
2265
+ const StyledModalFooter$1 = styled__default.default(designSystem.Modal.Footer)`
2266
+ && {
2267
+ padding: 20px 28px;
2268
+ border-top: 1px solid ${(props) => props.theme.colors.neutral200};
2269
+ background: ${(props) => props.theme.colors.neutral100};
2270
+ }
2271
+ `;
2272
+ const AccountInfoCard = styled__default.default(designSystem.Box)`
2273
+ background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
2274
+ border: 1px solid ${theme$3.colors.primary[200]};
2275
+ border-radius: 12px;
2276
+ padding: 16px 20px;
2277
+ text-align: center;
2278
+ width: 100%;
2279
+ box-sizing: border-box;
2280
+ display: flex;
2281
+ flex-direction: column;
2282
+ align-items: center;
2283
+ gap: 2px;
2284
+ `;
2285
+ const TestOptionCard = styled__default.default(designSystem.Box)`
2286
+ padding: 16px 20px;
2287
+ border: 2px solid ${(props) => props.$selected ? theme$3.colors.primary[500] : props.theme.colors.neutral200};
2288
+ border-radius: 12px;
2289
+ cursor: pointer;
2290
+ transition: all ${theme$3.transitions.fast};
2291
+ background: ${(props) => props.$selected ? theme$3.colors.primary[50] : props.theme.colors.neutral0};
2292
+
2293
+ &:hover {
2294
+ border-color: ${theme$3.colors.primary[400]};
2295
+ background: ${theme$3.colors.primary[50]};
2296
+ }
2297
+ `;
2298
+ const ModalFieldLabel = styled__default.default(designSystem.Typography)`
2299
+ font-size: 13px;
2300
+ font-weight: 600;
2301
+ color: ${(props) => props.theme.colors.neutral700};
2302
+ margin-bottom: 8px;
2303
+ display: block;
2304
+ `;
2305
+ const ModalHint$1 = styled__default.default(designSystem.Typography)`
2306
+ font-size: 12px;
2307
+ color: ${(props) => props.theme.colors.neutral500};
2308
+ margin-top: 6px;
2309
+ `;
2310
+ const StyledModalSelect = styled__default.default.select`
2311
+ width: 100%;
2312
+ padding: 12px 14px;
2313
+ border: 1px solid ${(props) => props.theme.colors.neutral200};
2314
+ border-radius: 8px;
2315
+ font-size: 14px;
2316
+ background: ${(props) => props.theme.colors.neutral0};
2317
+ color: ${(props) => props.theme.colors.neutral800};
2318
+ cursor: pointer;
2319
+ transition: all ${theme$3.transitions.fast};
2320
+ box-sizing: border-box;
2321
+
2322
+ &:focus {
2323
+ outline: none;
2324
+ border-color: ${theme$3.colors.primary[500]};
2325
+ box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
2326
+ }
2327
+ `;
2328
+ const StyledModalInput = styled__default.default.input`
2329
+ width: 100%;
2330
+ padding: 12px 14px;
2331
+ border: 1px solid ${(props) => props.theme.colors.neutral200};
2332
+ border-radius: 8px;
2333
+ font-size: 14px;
2334
+ background: ${(props) => props.theme.colors.neutral0};
2335
+ color: ${(props) => props.theme.colors.neutral800};
2336
+ transition: all ${theme$3.transitions.fast};
2337
+ box-sizing: border-box;
2338
+
2339
+ &:focus {
2340
+ outline: none;
2341
+ border-color: ${theme$3.colors.primary[500]};
2342
+ box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
2343
+ }
2344
+
2345
+ &::placeholder {
2346
+ color: ${(props) => props.theme.colors.neutral400};
2347
+ }
2348
+ `;
2213
2349
  const HomePage = () => {
2214
2350
  useAuthRefresh();
2215
2351
  const { get, post, del } = admin.useFetchClient();
@@ -2367,11 +2503,10 @@ const HomePage = () => {
2367
2503
  }
2368
2504
  ),
2369
2505
  /* @__PURE__ */ jsxRuntime.jsx(
2370
- designSystem.Button,
2506
+ StyledButtons.CTAButton,
2371
2507
  {
2372
2508
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
2373
2509
  onClick: () => setShowAddModal(true),
2374
- size: "L",
2375
2510
  children: "Add First Account"
2376
2511
  }
2377
2512
  )
@@ -2379,7 +2514,7 @@ const HomePage = () => {
2379
2514
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(AccountsContainer, { children: [
2380
2515
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme$3.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
2381
2516
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "📧 Email Accounts" }),
2382
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowAddModal(true), children: "Add Account" })
2517
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.GradientButton, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowAddModal(true), children: "Add Account" })
2383
2518
  ] }) }),
2384
2519
  /* @__PURE__ */ jsxRuntime.jsxs(FilterBar$3, { children: [
2385
2520
  /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper$2, { children: [
@@ -2500,42 +2635,36 @@ const HomePage = () => {
2500
2635
  }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Never" }) }),
2501
2636
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
2502
2637
  /* @__PURE__ */ jsxRuntime.jsx(
2503
- designSystem.Button,
2638
+ StyledButtons.IconButton,
2504
2639
  {
2505
- variant: "secondary",
2506
2640
  onClick: (e) => {
2507
2641
  e.stopPropagation();
2508
2642
  setEditingAccount(account);
2509
2643
  },
2510
- size: "S",
2511
2644
  "aria-label": "Edit Account",
2512
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
2645
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
2513
2646
  }
2514
2647
  ),
2515
2648
  /* @__PURE__ */ jsxRuntime.jsx(
2516
- designSystem.Button,
2649
+ StyledButtons.IconButtonPrimary,
2517
2650
  {
2518
- variant: "secondary",
2519
2651
  onClick: (e) => {
2520
2652
  e.stopPropagation();
2521
2653
  setTestingAccount(account);
2522
2654
  },
2523
- size: "S",
2524
2655
  "aria-label": "Test Account",
2525
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } })
2656
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, {})
2526
2657
  }
2527
2658
  ),
2528
2659
  /* @__PURE__ */ jsxRuntime.jsx(
2529
- designSystem.Button,
2660
+ StyledButtons.IconButtonDanger,
2530
2661
  {
2531
- variant: "danger-light",
2532
2662
  onClick: (e) => {
2533
2663
  e.stopPropagation();
2534
2664
  deleteAccount(account.id, account.name);
2535
2665
  },
2536
- size: "S",
2537
2666
  "aria-label": "Delete Account",
2538
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
2667
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
2539
2668
  }
2540
2669
  )
2541
2670
  ] }) })
@@ -2620,179 +2749,127 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2620
2749
  const handleKeyDown = (e) => {
2621
2750
  e.stopPropagation();
2622
2751
  };
2623
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { size: "L", children: [
2624
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", children: [
2625
- /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { marginRight: 8, width: 20, height: 20 } }),
2626
- "Test Email Account"
2627
- ] }) }),
2628
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 6, style: { width: "100%" }, children: [
2629
- /* @__PURE__ */ jsxRuntime.jsx(
2630
- designSystem.Box,
2631
- {
2632
- padding: 4,
2633
- background: "neutral100",
2634
- hasRadius: true,
2635
- style: {
2636
- borderRadius: "8px",
2637
- width: "100%"
2638
- },
2639
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, style: { width: "100%" }, children: [
2640
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: "#4B5563" }, children: "Testing Account" }),
2641
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { fontSize: "18px", fontWeight: 600 }, children: account.name }),
2642
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "14px" }, children: account.fromEmail })
2643
- ] })
2644
- }
2645
- ),
2646
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { required: true, style: { width: "100%" }, children: [
2647
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Recipient Email Address" }),
2752
+ const [testMode, setTestMode] = React.useState("strapi");
2753
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledModalContent$1, { children: [
2754
+ /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader$1, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Test Email Account" }) }),
2755
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledModalBody$1, { children: [
2756
+ /* @__PURE__ */ jsxRuntime.jsxs(AccountInfoCard, { children: [
2757
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { color: theme$3.colors.primary[600], fontWeight: 500 }, children: "Testing Account" }),
2758
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "1.125rem", fontWeight: 700, marginTop: "4px" }, children: account.name }),
2759
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "2px" }, children: account.fromEmail })
2760
+ ] }),
2761
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px" }, children: [
2762
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Recipient Email *" }),
2648
2763
  /* @__PURE__ */ jsxRuntime.jsx(
2649
- designSystem.TextInput,
2764
+ StyledModalInput,
2650
2765
  {
2651
- placeholder: "recipient@example.com",
2766
+ placeholder: "test@example.com",
2652
2767
  value: testEmail,
2653
2768
  onChange: handleInputChange,
2654
2769
  onKeyDown: handleKeyDown,
2655
2770
  onClick: (e) => e.stopPropagation(),
2656
- onFocus: (e) => e.stopPropagation(),
2657
- onBlur: (e) => e.stopPropagation(),
2658
2771
  type: "email",
2659
- autoFocus: true,
2660
- autoComplete: "off",
2661
- name: "test-email-recipient",
2662
- style: { width: "100%", fontSize: "14px" }
2772
+ autoFocus: true
2663
2773
  }
2664
- ),
2665
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Enter the email address where you want to receive the test email" })
2666
- ] }),
2667
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { width: "100%" }, children: [
2668
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 3, style: { fontSize: "14px", color: "#4B5563" }, children: "Email Configuration" }),
2669
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, children: [
2670
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
2671
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Priority" }),
2672
- /* @__PURE__ */ jsxRuntime.jsxs(
2673
- designSystem.SingleSelect,
2674
- {
2675
- value: priority,
2676
- onChange: setPriority,
2677
- style: { width: "100%" },
2678
- children: [
2679
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "normal", children: "Normal Priority" }),
2680
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "high", children: "High Priority" })
2681
- ]
2682
- }
2683
- ),
2684
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "High priority adds X-Priority and Importance headers" })
2685
- ] }),
2686
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
2687
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Email Type" }),
2688
- /* @__PURE__ */ jsxRuntime.jsxs(
2689
- designSystem.SingleSelect,
2690
- {
2691
- value: emailType,
2692
- onChange: setEmailType,
2693
- style: { width: "100%" },
2694
- children: [
2695
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "transactional", children: "Transactional" }),
2696
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "marketing", children: "Marketing" }),
2697
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "notification", children: "Notification" })
2698
- ]
2699
- }
2700
- ),
2701
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Marketing emails automatically include List-Unsubscribe headers" })
2702
- ] }),
2703
- emailType === "marketing" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
2704
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Unsubscribe URL (Required for Marketing)" }),
2705
- /* @__PURE__ */ jsxRuntime.jsx(
2706
- designSystem.TextInput,
2707
- {
2708
- placeholder: "https://yoursite.com/unsubscribe",
2709
- value: unsubscribeUrl,
2710
- onChange: (e) => {
2711
- e.stopPropagation();
2712
- setUnsubscribeUrl(e.target.value);
2713
- },
2714
- style: { width: "100%", fontSize: "14px" }
2715
- }
2716
- ),
2717
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Required for GDPR/CAN-SPAM compliance. Adds List-Unsubscribe header." })
2718
- ] })
2719
- ] })
2774
+ )
2720
2775
  ] }),
2721
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { width: "100%" }, children: [
2722
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 3, style: { fontSize: "14px", color: "#4B5563" }, children: "Test Options" }),
2723
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, children: [
2724
- /* @__PURE__ */ jsxRuntime.jsx(
2725
- designSystem.Box,
2726
- {
2727
- padding: 4,
2728
- background: "neutral0",
2729
- hasRadius: true,
2730
- style: {
2731
- border: "2px solid #E5E7EB",
2732
- borderRadius: "8px",
2733
- width: "100%"
2734
- },
2735
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
2736
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
2737
- /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 18, height: 18, color: "#0EA5E9", flexShrink: 0 } }),
2738
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Direct Test" })
2739
- ] }),
2740
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: "Send test email directly through this specific account" })
2741
- ] })
2742
- }
2743
- ),
2744
- /* @__PURE__ */ jsxRuntime.jsx(
2745
- designSystem.Box,
2746
- {
2747
- padding: 4,
2748
- background: "primary50",
2749
- hasRadius: true,
2750
- style: {
2751
- border: "2px solid #0EA5E9",
2752
- borderRadius: "8px",
2753
- width: "100%"
2754
- },
2755
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
2756
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
2757
- /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 18, height: 18, color: "#0369A1", flexShrink: 0 } }),
2758
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: "#0369A1" }, children: "Strapi Email Service Test" })
2759
- ] }),
2760
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: [
2761
- "Test if MagicMail intercepts Strapi's native email service via THIS account (",
2762
- account.name,
2763
- ")"
2764
- ] }),
2765
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#0369A1" }, children: "Use this to verify Email Designer compatibility" }) })
2766
- ] })
2767
- }
2768
- )
2769
- ] })
2770
- ] })
2771
- ] }) }),
2772
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 2, style: { width: "100%" }, children: [
2773
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
2774
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
2776
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px" }, children: [
2777
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Test Mode" }),
2775
2778
  /* @__PURE__ */ jsxRuntime.jsx(
2776
- designSystem.Button,
2779
+ TestOptionCard,
2777
2780
  {
2778
- onClick: () => onTest(testEmail, { priority, type: emailType, unsubscribeUrl }),
2779
- disabled: !testEmail || !testEmail.includes("@") || emailType === "marketing" && !unsubscribeUrl,
2780
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } }),
2781
- variant: "secondary",
2782
- children: "Test Direct"
2781
+ $selected: testMode === "direct",
2782
+ onClick: () => setTestMode("direct"),
2783
+ style: { marginBottom: "10px" },
2784
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
2785
+ /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
2786
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
2787
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? theme$3.colors.primary[700] : "#374151" }, children: "Direct Test" }),
2788
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
2789
+ ] })
2790
+ ] })
2783
2791
  }
2784
2792
  ),
2785
2793
  /* @__PURE__ */ jsxRuntime.jsx(
2786
- designSystem.Button,
2794
+ TestOptionCard,
2787
2795
  {
2788
- onClick: testStrapiService,
2789
- disabled: !testEmail || !testEmail.includes("@"),
2790
- loading: testingStrapiService,
2791
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 16, height: 16 } }),
2792
- children: "Test Strapi Service"
2796
+ $selected: testMode === "strapi",
2797
+ onClick: () => setTestMode("strapi"),
2798
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
2799
+ /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
2800
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
2801
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? theme$3.colors.primary[700] : "#374151" }, children: "Strapi Service Test" }),
2802
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2803
+ ] })
2804
+ ] })
2793
2805
  }
2794
2806
  )
2807
+ ] }),
2808
+ testMode === "direct" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px", padding: "16px", background: "#F9FAFB", borderRadius: "12px" }, children: [
2809
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { style: { marginBottom: "16px", fontSize: "14px" }, children: "Advanced Options" }),
2810
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "12px" }, children: [
2811
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Priority" }),
2812
+ /* @__PURE__ */ jsxRuntime.jsxs(
2813
+ StyledModalSelect,
2814
+ {
2815
+ value: priority,
2816
+ onChange: (e) => setPriority(e.target.value),
2817
+ children: [
2818
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "normal", children: "Normal" }),
2819
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "high", children: "High Priority" })
2820
+ ]
2821
+ }
2822
+ )
2823
+ ] }),
2824
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: emailType === "marketing" ? "12px" : "0" }, children: [
2825
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Email Type" }),
2826
+ /* @__PURE__ */ jsxRuntime.jsxs(
2827
+ StyledModalSelect,
2828
+ {
2829
+ value: emailType,
2830
+ onChange: (e) => setEmailType(e.target.value),
2831
+ children: [
2832
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "transactional", children: "Transactional" }),
2833
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "marketing", children: "Marketing" }),
2834
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "notification", children: "Notification" })
2835
+ ]
2836
+ }
2837
+ )
2838
+ ] }),
2839
+ emailType === "marketing" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
2840
+ /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Unsubscribe URL *" }),
2841
+ /* @__PURE__ */ jsxRuntime.jsx(
2842
+ StyledModalInput,
2843
+ {
2844
+ placeholder: "https://yoursite.com/unsubscribe",
2845
+ value: unsubscribeUrl,
2846
+ onChange: (e) => setUnsubscribeUrl(e.target.value)
2847
+ }
2848
+ ),
2849
+ /* @__PURE__ */ jsxRuntime.jsx(ModalHint$1, { children: "Required for GDPR/CAN-SPAM compliance" })
2850
+ ] })
2795
2851
  ] })
2852
+ ] }),
2853
+ /* @__PURE__ */ jsxRuntime.jsx(StyledModalFooter$1, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
2854
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
2855
+ testMode === "direct" ? /* @__PURE__ */ jsxRuntime.jsx(
2856
+ StyledButtons.GradientButton,
2857
+ {
2858
+ onClick: () => onTest(testEmail, { priority, type: emailType, unsubscribeUrl }),
2859
+ disabled: !testEmail || !testEmail.includes("@") || emailType === "marketing" && !unsubscribeUrl,
2860
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } }),
2861
+ children: "Send Test Email"
2862
+ }
2863
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
2864
+ StyledButtons.GradientButton,
2865
+ {
2866
+ onClick: testStrapiService,
2867
+ disabled: !testEmail || !testEmail.includes("@"),
2868
+ loading: testingStrapiService,
2869
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 16, height: 16 } }),
2870
+ children: "Test Strapi Service"
2871
+ }
2872
+ )
2796
2873
  ] }) })
2797
2874
  ] }) });
2798
2875
  };
@@ -3334,11 +3411,10 @@ const RoutingRulesPage = () => {
3334
3411
  }
3335
3412
  ),
3336
3413
  /* @__PURE__ */ jsxRuntime.jsx(
3337
- designSystem.Button,
3414
+ StyledButtons.CTAButton,
3338
3415
  {
3339
3416
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
3340
3417
  onClick: () => setShowModal(true),
3341
- size: "L",
3342
3418
  children: "Create First Rule"
3343
3419
  }
3344
3420
  )
@@ -3346,7 +3422,7 @@ const RoutingRulesPage = () => {
3346
3422
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(RulesContainer, { children: [
3347
3423
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme$2.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
3348
3424
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "🎯 Routing Rules" }),
3349
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowModal(true), children: "Create Rule" })
3425
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.GradientButton, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowModal(true), children: "Create Rule" })
3350
3426
  ] }) }),
3351
3427
  /* @__PURE__ */ jsxRuntime.jsxs(FilterBar$2, { children: [
3352
3428
  /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper$1, { children: [
@@ -3439,23 +3515,19 @@ const RoutingRulesPage = () => {
3439
3515
  ) }),
3440
3516
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
3441
3517
  /* @__PURE__ */ jsxRuntime.jsx(
3442
- designSystem.Button,
3518
+ StyledButtons.IconButton,
3443
3519
  {
3444
- variant: "secondary",
3445
3520
  onClick: () => setEditingRule(rule),
3446
- size: "S",
3447
3521
  "aria-label": "Edit Rule",
3448
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
3522
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
3449
3523
  }
3450
3524
  ),
3451
3525
  /* @__PURE__ */ jsxRuntime.jsx(
3452
- designSystem.Button,
3526
+ StyledButtons.IconButtonDanger,
3453
3527
  {
3454
- variant: "danger-light",
3455
3528
  onClick: () => deleteRule(rule.id, rule.name),
3456
- size: "S",
3457
3529
  "aria-label": "Delete Rule",
3458
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
3530
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
3459
3531
  }
3460
3532
  )
3461
3533
  ] }) })
@@ -3729,9 +3801,9 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3729
3801
  )
3730
3802
  ] }) }) }),
3731
3803
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", gap: 2, style: { width: "100%" }, children: [
3732
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
3804
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
3733
3805
  /* @__PURE__ */ jsxRuntime.jsx(
3734
- designSystem.Button,
3806
+ StyledButtons.GradientButton,
3735
3807
  {
3736
3808
  onClick: handleSubmit,
3737
3809
  loading,
@@ -3864,7 +3936,7 @@ const useLicense = () => {
3864
3936
  const theme$1 = {
3865
3937
  colors: {
3866
3938
  primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1" },
3867
- secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
3939
+ secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 500: "#A855F7", 600: "#9333EA" },
3868
3940
  success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
3869
3941
  warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" }
3870
3942
  },
@@ -3901,7 +3973,8 @@ styled__default.default.div`
3901
3973
  const ScrollableDialogBody = styled__default.default(designSystem.Box)`
3902
3974
  overflow-y: auto;
3903
3975
  max-height: calc(85vh - 160px);
3904
- padding: 0 24px 24px 24px;
3976
+ padding: 24px 28px 28px 28px;
3977
+ background: ${(props) => props.theme.colors.neutral0};
3905
3978
 
3906
3979
  /* Custom Scrollbar */
3907
3980
  &::-webkit-scrollbar {
@@ -3921,19 +3994,19 @@ const ScrollableDialogBody = styled__default.default(designSystem.Box)`
3921
3994
  background: ${(props) => props.theme.colors.neutral300};
3922
3995
  }
3923
3996
  `;
3924
- const CodeSection = styled__default.default(designSystem.Box)`
3997
+ styled__default.default(designSystem.Box)`
3925
3998
  margin-bottom: 32px;
3926
3999
 
3927
4000
  &:last-child {
3928
4001
  margin-bottom: 0;
3929
4002
  }
3930
4003
  `;
3931
- const CodeHeader = styled__default.default(designSystem.Flex)`
4004
+ styled__default.default(designSystem.Flex)`
3932
4005
  align-items: center;
3933
4006
  gap: 12px;
3934
4007
  margin-bottom: 16px;
3935
4008
  `;
3936
- const CodeLabel = styled__default.default(designSystem.Typography)`
4009
+ styled__default.default(designSystem.Typography)`
3937
4010
  font-size: 15px;
3938
4011
  font-weight: 600;
3939
4012
  color: ${(props) => props.theme.colors.neutral800};
@@ -4316,8 +4389,34 @@ const StyledSearchInput = styled__default.default(designSystem.TextInput)`
4316
4389
  width: 100%;
4317
4390
  padding-left: 36px;
4318
4391
  `;
4392
+ const TableWrapper = styled__default.default(designSystem.Box)`
4393
+ overflow-x: auto;
4394
+ border-radius: ${theme$1.borderRadius.lg};
4395
+ border: 1px solid ${(props) => props.theme.colors.neutral200};
4396
+ background: ${(props) => props.theme.colors.neutral0};
4397
+
4398
+ &::-webkit-scrollbar {
4399
+ height: 8px;
4400
+ }
4401
+
4402
+ &::-webkit-scrollbar-track {
4403
+ background: ${(props) => props.theme.colors.neutral100};
4404
+ border-radius: 4px;
4405
+ }
4406
+
4407
+ &::-webkit-scrollbar-thumb {
4408
+ background: ${(props) => props.theme.colors.neutral300};
4409
+ border-radius: 4px;
4410
+
4411
+ &:hover {
4412
+ background: ${(props) => props.theme.colors.neutral400};
4413
+ }
4414
+ }
4415
+ `;
4319
4416
  const StyledTable$1 = styled__default.default(designSystem.Table)`
4320
4417
  width: 100%;
4418
+ min-width: 900px;
4419
+
4321
4420
  thead {
4322
4421
  background: ${(props) => props.theme.colors.neutral100};
4323
4422
  border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
@@ -4325,10 +4424,11 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
4325
4424
  th {
4326
4425
  font-weight: 600;
4327
4426
  color: ${(props) => props.theme.colors.neutral800};
4328
- font-size: 0.875rem;
4427
+ font-size: 0.75rem;
4329
4428
  text-transform: uppercase;
4330
4429
  letter-spacing: 0.025em;
4331
- padding: ${theme$1.spacing.lg} ${theme$1.spacing.lg};
4430
+ padding: 12px 16px;
4431
+ white-space: nowrap;
4332
4432
  }
4333
4433
  }
4334
4434
 
@@ -4345,12 +4445,42 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
4345
4445
  }
4346
4446
 
4347
4447
  td {
4348
- padding: ${theme$1.spacing.lg} ${theme$1.spacing.lg};
4448
+ padding: 10px 12px;
4349
4449
  color: ${(props) => props.theme.colors.neutral800};
4350
4450
  vertical-align: middle;
4451
+ font-size: 13px;
4351
4452
  }
4352
4453
  }
4353
4454
  `;
4455
+ const PaginationWrapper = styled__default.default(designSystem.Flex)`
4456
+ padding: 16px 20px;
4457
+ background: ${(props) => props.theme.colors.neutral100};
4458
+ border-top: 1px solid ${(props) => props.theme.colors.neutral200};
4459
+ border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
4460
+ `;
4461
+ const PaginationButton = styled__default.default.button`
4462
+ background: ${(props) => props.active ? "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)" : "white"};
4463
+ color: ${(props) => props.active ? "white" : props.theme.colors.neutral700};
4464
+ border: 1px solid ${(props) => props.active ? "transparent" : props.theme.colors.neutral300};
4465
+ padding: 6px 12px;
4466
+ min-width: 36px;
4467
+ height: 36px;
4468
+ border-radius: 8px;
4469
+ font-weight: 500;
4470
+ font-size: 13px;
4471
+ cursor: pointer;
4472
+ transition: all 0.2s ease;
4473
+
4474
+ &:hover:not(:disabled) {
4475
+ background: ${(props) => props.active ? "linear-gradient(135deg, #0284C7 0%, #9333EA 100%)" : props.theme.colors.neutral100};
4476
+ border-color: ${(props) => props.active ? "transparent" : props.theme.colors.neutral400};
4477
+ }
4478
+
4479
+ &:disabled {
4480
+ opacity: 0.5;
4481
+ cursor: not-allowed;
4482
+ }
4483
+ `;
4354
4484
  const EmptyState$1 = styled__default.default(designSystem.Box)`
4355
4485
  background: ${(props) => props.theme.colors.neutral0};
4356
4486
  border-radius: ${theme$1.borderRadius.xl};
@@ -4445,6 +4575,120 @@ const EmptyButtonGroup = styled__default.default.div`
4445
4575
  const HiddenFileInput = styled__default.default.input`
4446
4576
  display: none;
4447
4577
  `;
4578
+ const StyledModalContent = styled__default.default(designSystem.Modal.Content)`
4579
+ && {
4580
+ border-radius: 16px;
4581
+ overflow: hidden;
4582
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4583
+ max-width: 480px;
4584
+ }
4585
+ `;
4586
+ const StyledModalHeader = styled__default.default(designSystem.Modal.Header)`
4587
+ && {
4588
+ background: linear-gradient(135deg, ${theme$1.colors.primary[500]} 0%, ${theme$1.colors.secondary[500]} 100%);
4589
+ padding: 24px 28px;
4590
+ border-bottom: none;
4591
+
4592
+ h2 {
4593
+ color: white;
4594
+ font-size: 1.25rem;
4595
+ font-weight: 700;
4596
+ }
4597
+
4598
+ /* Close button styling */
4599
+ button {
4600
+ color: white !important;
4601
+ opacity: 0.9;
4602
+ background: rgba(255, 255, 255, 0.15) !important;
4603
+ border-radius: 8px;
4604
+
4605
+ &:hover {
4606
+ opacity: 1;
4607
+ background: rgba(255, 255, 255, 0.25) !important;
4608
+ }
4609
+
4610
+ svg {
4611
+ fill: white !important;
4612
+ color: white !important;
4613
+
4614
+ path {
4615
+ fill: white !important;
4616
+ }
4617
+ }
4618
+ }
4619
+ }
4620
+ `;
4621
+ const StyledModalBody = styled__default.default(designSystem.Modal.Body)`
4622
+ && {
4623
+ padding: 28px;
4624
+ background: ${(props) => props.theme.colors.neutral0};
4625
+ }
4626
+ `;
4627
+ const ModalField = styled__default.default(designSystem.Box)`
4628
+ margin-bottom: 20px;
4629
+
4630
+ &:last-child {
4631
+ margin-bottom: 0;
4632
+ }
4633
+ `;
4634
+ const ModalLabel = styled__default.default(designSystem.Typography)`
4635
+ && {
4636
+ font-weight: 600;
4637
+ font-size: 13px;
4638
+ color: ${(props) => props.theme.colors.neutral700};
4639
+ margin-bottom: 8px;
4640
+ display: block;
4641
+ }
4642
+ `;
4643
+ const ModalHint = styled__default.default(designSystem.Typography)`
4644
+ && {
4645
+ font-size: 12px;
4646
+ color: ${(props) => props.theme.colors.neutral600};
4647
+ margin-top: 6px;
4648
+ display: block;
4649
+ }
4650
+ `;
4651
+ const ModalTemplateInfo = styled__default.default(designSystem.Box)`
4652
+ background: linear-gradient(135deg, ${theme$1.colors.primary[50]} 0%, ${theme$1.colors.secondary[50]} 100%);
4653
+ border: 1px solid ${theme$1.colors.primary[100]};
4654
+ border-radius: 10px;
4655
+ padding: 14px 16px;
4656
+
4657
+ p {
4658
+ margin: 0;
4659
+ font-weight: 500;
4660
+ color: ${(props) => props.theme.colors.neutral800};
4661
+ }
4662
+ `;
4663
+ const StyledSelect = styled__default.default.select`
4664
+ width: 100%;
4665
+ padding: 10px 14px;
4666
+ border-radius: 8px;
4667
+ border: 1px solid ${(props) => props.theme.colors.neutral200};
4668
+ font-size: 14px;
4669
+ background: ${(props) => props.theme.colors.neutral0};
4670
+ cursor: pointer;
4671
+ transition: all ${theme$1.transitions.fast};
4672
+ color: ${(props) => props.theme.colors.neutral700};
4673
+
4674
+ &:hover {
4675
+ border-color: ${theme$1.colors.primary[500]};
4676
+ }
4677
+
4678
+ &:focus {
4679
+ outline: none;
4680
+ border-color: ${theme$1.colors.primary[500]};
4681
+ box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
4682
+ }
4683
+ `;
4684
+ const StyledModalFooter = styled__default.default(designSystem.Modal.Footer)`
4685
+ && {
4686
+ padding: 20px 28px;
4687
+ background: ${(props) => props.theme.colors.neutral100};
4688
+ border-top: 1px solid ${(props) => props.theme.colors.neutral200};
4689
+ gap: 12px;
4690
+ }
4691
+ `;
4448
4692
  const TemplateList = () => {
4449
4693
  const { get, del, post } = admin.useFetchClient();
4450
4694
  const { toggleNotification } = admin.useNotification();
@@ -4462,6 +4706,8 @@ const TemplateList = () => {
4462
4706
  const [limits, setLimits] = React.useState(null);
4463
4707
  const [showTestSendModal, setShowTestSendModal] = React.useState(false);
4464
4708
  const [testEmail, setTestEmail] = React.useState("");
4709
+ const [currentPage, setCurrentPage] = React.useState(1);
4710
+ const [itemsPerPage, setItemsPerPage] = React.useState(10);
4465
4711
  const [testAccount, setTestAccount] = React.useState("");
4466
4712
  const [accounts, setAccounts] = React.useState([]);
4467
4713
  const fileInputRef = React.useRef(null);
@@ -4746,6 +4992,12 @@ const TemplateList = () => {
4746
4992
  const filteredTemplates = templates.filter(
4747
4993
  (t) => t.name.toLowerCase().includes(searchTerm.toLowerCase()) || t.subject.toLowerCase().includes(searchTerm.toLowerCase()) || t.templateReferenceId.toString().includes(searchTerm)
4748
4994
  );
4995
+ const totalPages = Math.ceil(filteredTemplates.length / itemsPerPage);
4996
+ const startIndex = (currentPage - 1) * itemsPerPage;
4997
+ const paginatedTemplates = filteredTemplates.slice(startIndex, startIndex + itemsPerPage);
4998
+ React.useEffect(() => {
4999
+ setCurrentPage(1);
5000
+ }, [searchTerm]);
4749
5001
  const showSkeleton = loading && templates.length === 0;
4750
5002
  return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, { children: [
4751
5003
  /* @__PURE__ */ jsxRuntime.jsx(Header$2, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderContent$1, { justifyContent: "flex-start", alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4879,20 +5131,18 @@ const TemplateList = () => {
4879
5131
  ] }),
4880
5132
  /* @__PURE__ */ jsxRuntime.jsxs(EmptyButtonGroup, { children: [
4881
5133
  /* @__PURE__ */ jsxRuntime.jsx(
4882
- designSystem.Button,
5134
+ StyledButtons.CTAButton,
4883
5135
  {
4884
5136
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
4885
5137
  onClick: handleCreateTemplate,
4886
- size: "L",
4887
5138
  children: "Create Your First Template"
4888
5139
  }
4889
5140
  ),
4890
5141
  /* @__PURE__ */ jsxRuntime.jsx(
4891
- designSystem.Button,
5142
+ StyledButtons.SecondaryButton,
4892
5143
  {
4893
5144
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 20, height: 20 } }),
4894
5145
  onClick: () => fileInputRef.current?.click(),
4895
- size: "L",
4896
5146
  children: "Import Template"
4897
5147
  }
4898
5148
  )
@@ -4901,11 +5151,10 @@ const TemplateList = () => {
4901
5151
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
4902
5152
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Email Templates" }),
4903
5153
  /* @__PURE__ */ jsxRuntime.jsx(
4904
- designSystem.Button,
5154
+ StyledButtons.GradientButton,
4905
5155
  {
4906
5156
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
4907
5157
  onClick: handleCreateTemplate,
4908
- size: "L",
4909
5158
  children: "Create Template"
4910
5159
  }
4911
5160
  )
@@ -4924,125 +5173,182 @@ const TemplateList = () => {
4924
5173
  )
4925
5174
  ] }),
4926
5175
  /* @__PURE__ */ jsxRuntime.jsx(
4927
- designSystem.Button,
5176
+ StyledButtons.SecondaryButton,
4928
5177
  {
4929
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 20, height: 20 } }),
5178
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 16, height: 16 } }),
4930
5179
  onClick: () => fileInputRef.current?.click(),
4931
- size: "L",
4932
5180
  children: "Import"
4933
5181
  }
4934
5182
  ),
4935
5183
  /* @__PURE__ */ jsxRuntime.jsx(
4936
- designSystem.Button,
5184
+ StyledButtons.TertiaryButton,
4937
5185
  {
4938
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, { style: { width: 20, height: 20 } }),
5186
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, { style: { width: 16, height: 16 } }),
4939
5187
  onClick: handleExport,
4940
5188
  disabled: templates.length === 0,
4941
- size: "L",
4942
5189
  children: "Export"
4943
5190
  }
4944
5191
  )
4945
5192
  ] }),
4946
- filteredTemplates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable$1, { colCount: 6, rowCount: filteredTemplates.length, children: [
4947
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
4948
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "ID" }) }),
4949
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Name" }) }),
4950
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Subject" }) }),
4951
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Category" }) }),
4952
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Status" }) }),
4953
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) }) })
4954
- ] }) }),
4955
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: filteredTemplates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
4956
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: [
4957
- "#",
4958
- template.templateReferenceId
5193
+ filteredTemplates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableWrapper, { children: [
5194
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledTable$1, { colCount: 5, rowCount: paginatedTemplates.length, children: [
5195
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
5196
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "ID" }) }),
5197
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Name" }) }),
5198
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Category" }) }),
5199
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Status" }) }),
5200
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "260px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) }) })
4959
5201
  ] }) }),
4960
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: template.name }) }),
4961
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: template.subject }) }),
4962
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCategoryBadge(template.category) }),
4963
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: template.isActive ? "success" : "neutral", children: template.isActive ? "ACTIVE" : "INACTIVE" }) }),
4964
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: [
4965
- /* @__PURE__ */ jsxRuntime.jsx(
4966
- designSystem.Button,
4967
- {
4968
- variant: "secondary",
4969
- onClick: () => navigate(`/plugins/magic-mail/designer/${template.id}`),
4970
- size: "S",
4971
- "aria-label": "Edit Template",
4972
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
4973
- }
4974
- ),
4975
- /* @__PURE__ */ jsxRuntime.jsx(
4976
- designSystem.Button,
4977
- {
4978
- variant: "secondary",
4979
- onClick: () => handleDownload(template.id, "html"),
4980
- size: "S",
4981
- "aria-label": "Download HTML",
4982
- title: "Download as HTML",
4983
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16 } })
4984
- }
4985
- ),
5202
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: paginatedTemplates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
5203
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { fontSize: "13px" }, children: [
5204
+ "#",
5205
+ template.templateReferenceId
5206
+ ] }) }),
5207
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "13px" }, children: template.name }) }),
5208
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCategoryBadge(template.category) }),
5209
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: template.isActive ? "success" : "neutral", children: template.isActive ? "ACTIVE" : "INACTIVE" }) }),
5210
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: [
5211
+ /* @__PURE__ */ jsxRuntime.jsx(
5212
+ StyledButtons.IconButtonPrimary,
5213
+ {
5214
+ onClick: () => navigate(`/plugins/magic-mail/designer/${template.id}`),
5215
+ "aria-label": "Edit Template",
5216
+ title: "Edit Template",
5217
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
5218
+ }
5219
+ ),
5220
+ /* @__PURE__ */ jsxRuntime.jsx(
5221
+ StyledButtons.IconButton,
5222
+ {
5223
+ onClick: () => handleDownload(template.id, "html"),
5224
+ "aria-label": "Download HTML",
5225
+ title: "Download as HTML",
5226
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, {})
5227
+ }
5228
+ ),
5229
+ /* @__PURE__ */ jsxRuntime.jsx(
5230
+ StyledButtons.IconButton,
5231
+ {
5232
+ onClick: () => handleDownload(template.id, "json"),
5233
+ "aria-label": "Download JSON",
5234
+ title: "Download as JSON",
5235
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, {})
5236
+ }
5237
+ ),
5238
+ /* @__PURE__ */ jsxRuntime.jsx(
5239
+ StyledButtons.IconButton,
5240
+ {
5241
+ onClick: () => handleDuplicate(template.id, template.name),
5242
+ "aria-label": "Duplicate Template",
5243
+ title: "Duplicate Template",
5244
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, {})
5245
+ }
5246
+ ),
5247
+ /* @__PURE__ */ jsxRuntime.jsx(
5248
+ StyledButtons.IconButtonPurple,
5249
+ {
5250
+ onClick: () => {
5251
+ setSelectedTemplate(template);
5252
+ setShowCodeExample(true);
5253
+ },
5254
+ "aria-label": "Code Example",
5255
+ title: "View Code Example",
5256
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, {})
5257
+ }
5258
+ ),
5259
+ /* @__PURE__ */ jsxRuntime.jsx(
5260
+ StyledButtons.IconButtonSuccess,
5261
+ {
5262
+ onClick: () => handleTestSend(template),
5263
+ "aria-label": "Send Test Email",
5264
+ title: "Send Test Email",
5265
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, {})
5266
+ }
5267
+ ),
5268
+ /* @__PURE__ */ jsxRuntime.jsx(
5269
+ StyledButtons.IconButtonDanger,
5270
+ {
5271
+ onClick: () => handleDelete(template.id, template.name),
5272
+ "aria-label": "Delete Template",
5273
+ title: "Delete Template",
5274
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
5275
+ }
5276
+ )
5277
+ ] }) })
5278
+ ] }, template.id)) })
5279
+ ] }),
5280
+ totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, { justifyContent: "space-between", alignItems: "center", children: [
5281
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
5282
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
5283
+ "Showing ",
5284
+ startIndex + 1,
5285
+ "-",
5286
+ Math.min(startIndex + itemsPerPage, filteredTemplates.length),
5287
+ " of ",
5288
+ filteredTemplates.length
5289
+ ] }),
5290
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
5291
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "per page:" }),
5292
+ /* @__PURE__ */ jsxRuntime.jsxs(
5293
+ StyledSelect,
5294
+ {
5295
+ value: itemsPerPage,
5296
+ onChange: (e) => {
5297
+ setItemsPerPage(Number(e.target.value));
5298
+ setCurrentPage(1);
5299
+ },
5300
+ style: { width: "70px", padding: "4px 8px", fontSize: "12px" },
5301
+ children: [
5302
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: 5, children: "5" }),
5303
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: 10, children: "10" }),
5304
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: 25, children: "25" }),
5305
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: 50, children: "50" })
5306
+ ]
5307
+ }
5308
+ )
5309
+ ] })
5310
+ ] }),
5311
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
4986
5312
  /* @__PURE__ */ jsxRuntime.jsx(
4987
- designSystem.Button,
5313
+ PaginationButton,
4988
5314
  {
4989
- variant: "secondary",
4990
- onClick: () => handleDownload(template.id, "json"),
4991
- size: "S",
4992
- "aria-label": "Download JSON",
4993
- title: "Download as JSON",
4994
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16 } })
5315
+ onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
5316
+ disabled: currentPage === 1,
5317
+ children: "Previous"
4995
5318
  }
4996
5319
  ),
4997
- /* @__PURE__ */ jsxRuntime.jsx(
4998
- designSystem.Button,
4999
- {
5000
- variant: "secondary",
5001
- onClick: () => handleDuplicate(template.id, template.name),
5002
- size: "S",
5003
- "aria-label": "Duplicate Template",
5004
- title: "Duplicate Template",
5005
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, { style: { width: 16, height: 16 } })
5320
+ Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
5321
+ let pageNum;
5322
+ if (totalPages <= 5) {
5323
+ pageNum = i + 1;
5324
+ } else if (currentPage <= 3) {
5325
+ pageNum = i + 1;
5326
+ } else if (currentPage >= totalPages - 2) {
5327
+ pageNum = totalPages - 4 + i;
5328
+ } else {
5329
+ pageNum = currentPage - 2 + i;
5006
5330
  }
5007
- ),
5008
- /* @__PURE__ */ jsxRuntime.jsx(
5009
- designSystem.Button,
5010
- {
5011
- variant: "secondary",
5012
- onClick: () => {
5013
- setSelectedTemplate(template);
5014
- setShowCodeExample(true);
5331
+ return /* @__PURE__ */ jsxRuntime.jsx(
5332
+ PaginationButton,
5333
+ {
5334
+ active: currentPage === pageNum,
5335
+ onClick: () => setCurrentPage(pageNum),
5336
+ children: pageNum
5015
5337
  },
5016
- size: "S",
5017
- "aria-label": "Code Example",
5018
- title: "View Code Example",
5019
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, { style: { width: 16, height: 16 } })
5020
- }
5021
- ),
5338
+ pageNum
5339
+ );
5340
+ }),
5022
5341
  /* @__PURE__ */ jsxRuntime.jsx(
5023
- designSystem.Button,
5024
- {
5025
- variant: "success-light",
5026
- onClick: () => handleTestSend(template),
5027
- size: "S",
5028
- "aria-label": "Send Test Email",
5029
- title: "Send Test Email",
5030
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16 } })
5031
- }
5032
- ),
5033
- /* @__PURE__ */ jsxRuntime.jsx(
5034
- designSystem.Button,
5342
+ PaginationButton,
5035
5343
  {
5036
- variant: "danger-light",
5037
- onClick: () => handleDelete(template.id, template.name),
5038
- size: "S",
5039
- "aria-label": "Delete Template",
5040
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
5344
+ onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
5345
+ disabled: currentPage === totalPages,
5346
+ children: "Next"
5041
5347
  }
5042
5348
  )
5043
- ] }) })
5044
- ] }, template.id)) })
5045
- ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
5349
+ ] })
5350
+ ] })
5351
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
5046
5352
  designSystem.Box,
5047
5353
  {
5048
5354
  background: "neutral100",
@@ -5088,13 +5394,12 @@ const TemplateList = () => {
5088
5394
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: coreEmail.description })
5089
5395
  ] }) }),
5090
5396
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
5091
- designSystem.Button,
5397
+ StyledButtons.IconButtonPrimary,
5092
5398
  {
5093
- variant: "secondary",
5094
5399
  onClick: () => navigate(`/plugins/magic-mail/designer/core/${coreEmail.type}`),
5095
- size: "S",
5096
5400
  "aria-label": "Edit Core Email",
5097
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
5401
+ title: "Edit Template",
5402
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
5098
5403
  }
5099
5404
  ) }) })
5100
5405
  ] }, coreEmail.type)) })
@@ -5106,81 +5411,93 @@ const TemplateList = () => {
5106
5411
  width: "90vw",
5107
5412
  maxHeight: "85vh",
5108
5413
  display: "flex",
5109
- flexDirection: "column"
5414
+ flexDirection: "column",
5415
+ borderRadius: "16px",
5416
+ overflow: "hidden"
5110
5417
  }, children: [
5111
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { style: { borderBottom: "1px solid #E5E7EB", paddingBottom: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
5112
- /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, { style: { width: 24, height: 24, color: theme$1.colors.primary[600] } }),
5113
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", textColor: "neutral800", children: [
5114
- "Send Template: ",
5115
- selectedTemplate.name
5116
- ] })
5418
+ /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Title, { children: [
5419
+ "Code Snippets: ",
5420
+ selectedTemplate.name
5117
5421
  ] }) }),
5118
5422
  /* @__PURE__ */ jsxRuntime.jsxs(ScrollableDialogBody, { children: [
5119
- /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
5120
- /* @__PURE__ */ jsxRuntime.jsxs(CodeHeader, { children: [
5121
- /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
5122
- /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 20, height: 20, color: theme$1.colors.success[600] } }),
5123
- "Native Strapi Email Service"
5124
- ] }),
5125
- /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Empfohlen" })
5423
+ /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
5424
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5425
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
5426
+ " #",
5427
+ selectedTemplate.templateReferenceId
5126
5428
  ] }),
5127
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Nutze die standard Strapi Email-Funktion. MagicMail fängt sie automatisch ab und wendet alle Features an." }),
5128
- /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5129
- /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5130
- __html: `<span class="comment">// Überall in deinem Strapi Backend:</span>
5429
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5430
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Status:" }),
5431
+ " ",
5432
+ selectedTemplate.isActive ? "Active" : "Inactive"
5433
+ ] })
5434
+ ] }) }),
5435
+ !selectedTemplate.isActive && /* @__PURE__ */ jsxRuntime.jsxs(WarningBox, { style: { marginTop: 0, marginBottom: "20px" }, children: [
5436
+ /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
5437
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
5438
+ "This template is currently ",
5439
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "INACTIVE" }),
5440
+ " and will not be sent."
5441
+ ] })
5442
+ ] }),
5443
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Root, { defaultValue: "native", collapsible: true, children: [
5444
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "native", children: [
5445
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: theme$1.colors.success[600] } }), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
5446
+ "Native Strapi Email Service",
5447
+ /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Recommended" })
5448
+ ] }) }) }),
5449
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
5450
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Use the standard Strapi Email function. MagicMail intercepts it automatically and applies all features." }),
5451
+ /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5452
+ /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5453
+ __html: `<span class="comment">// Anywhere in your Strapi backend:</span>
5131
5454
  <span class="keyword">await</span> strapi.plugins.email.services.email.<span class="function">send</span>({
5132
5455
  <span class="keyword">to</span>: <span class="string">'user@example.com'</span>,
5133
- <span class="keyword">subject</span>: <span class="string">'Dein Betreff'</span>, <span class="comment">// Optional (wird von Template überschrieben)</span>
5134
- <span class="keyword">templateId</span>: <span class="number">${selectedTemplate.templateReferenceId}</span>, <span class="comment">// ← Template ID</span>
5456
+ <span class="keyword">subject</span>: <span class="string">'Your Subject'</span>, <span class="comment">// Optional (overridden by template)</span>
5457
+ <span class="keyword">templateId</span>: <span class="number">${selectedTemplate.templateReferenceId}</span>, <span class="comment">// Template ID</span>
5135
5458
  <span class="keyword">data</span>: {
5136
5459
  <span class="keyword">name</span>: <span class="string">'John Doe'</span>,
5137
5460
  <span class="keyword">code</span>: <span class="string">'123456'</span>,
5138
- <span class="comment">// ... deine dynamischen Variablen</span>
5461
+ <span class="comment">// ... your dynamic variables</span>
5139
5462
  }
5140
- });
5141
-
5142
- <span class="comment">// MagicMail fängt das automatisch ab und:</span>
5143
- <span class="comment">// 1. Rendert das Template mit deinen Daten</span>
5144
- <span class="comment">// 2. Routet über die richtige Email-Account</span>
5145
- <span class="comment">// 3. Tracked Opens & Clicks (wenn aktiviert)</span>`
5146
- } }),
5147
- /* @__PURE__ */ jsxRuntime.jsx(
5148
- CopyButton,
5149
- {
5150
- size: "S",
5151
- variant: "ghost",
5152
- onClick: () => handleCopyCode(
5153
- `await strapi.plugins.email.services.email.send({
5463
+ });`
5464
+ } }),
5465
+ /* @__PURE__ */ jsxRuntime.jsx(
5466
+ CopyButton,
5467
+ {
5468
+ size: "S",
5469
+ variant: "ghost",
5470
+ onClick: () => handleCopyCode(
5471
+ `await strapi.plugins.email.services.email.send({
5154
5472
  to: 'user@example.com',
5155
- subject: 'Dein Betreff',
5473
+ subject: 'Your Subject',
5156
5474
  templateId: ${selectedTemplate.templateReferenceId},
5157
5475
  data: {
5158
5476
  name: 'John Doe',
5159
5477
  code: '123456'
5160
5478
  }
5161
5479
  });`,
5162
- "native"
5163
- ),
5164
- children: copiedCode === "native" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5165
- /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5166
- " Kopiert!"
5167
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5168
- /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5169
- " Kopieren"
5170
- ] })
5171
- }
5172
- )
5173
- ] })
5174
- ] }),
5175
- /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
5176
- /* @__PURE__ */ jsxRuntime.jsx(CodeHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
5177
- /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 20, height: 20, color: theme$1.colors.primary[600] } }),
5178
- "MagicMail Plugin Service"
5179
- ] }) }),
5180
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Direkter Zugriff auf den MagicMail Service für erweiterte Optionen." }),
5181
- /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5182
- /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5183
- __html: `<span class="comment">// Inside Strapi backend</span>
5480
+ "native"
5481
+ ),
5482
+ children: copiedCode === "native" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5483
+ /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5484
+ " Copied!"
5485
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5486
+ /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5487
+ " Copy"
5488
+ ] })
5489
+ }
5490
+ )
5491
+ ] })
5492
+ ] }) })
5493
+ ] }),
5494
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "plugin", children: [
5495
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16, color: theme$1.colors.primary[600] } }), children: "MagicMail Plugin Service" }) }),
5496
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
5497
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Direct access to the MagicMail service for advanced options." }),
5498
+ /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5499
+ /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5500
+ __html: `<span class="comment">// Inside Strapi backend</span>
5184
5501
  <span class="keyword">await</span> strapi.<span class="function">plugin</span>(<span class="string">'magic-mail'</span>)
5185
5502
  .<span class="function">service</span>(<span class="string">'email-router'</span>)
5186
5503
  .<span class="function">send</span>({
@@ -5191,14 +5508,14 @@ const TemplateList = () => {
5191
5508
  <span class="keyword">code</span>: <span class="string">'123456'</span>
5192
5509
  }
5193
5510
  });`
5194
- } }),
5195
- /* @__PURE__ */ jsxRuntime.jsx(
5196
- CopyButton,
5197
- {
5198
- size: "S",
5199
- variant: "ghost",
5200
- onClick: () => handleCopyCode(
5201
- `await strapi.plugin('magic-mail')
5511
+ } }),
5512
+ /* @__PURE__ */ jsxRuntime.jsx(
5513
+ CopyButton,
5514
+ {
5515
+ size: "S",
5516
+ variant: "ghost",
5517
+ onClick: () => handleCopyCode(
5518
+ `await strapi.plugin('magic-mail')
5202
5519
  .service('email-router')
5203
5520
  .send({
5204
5521
  to: 'user@example.com',
@@ -5208,28 +5525,27 @@ const TemplateList = () => {
5208
5525
  code: '123456'
5209
5526
  }
5210
5527
  });`,
5211
- "plugin"
5212
- ),
5213
- children: copiedCode === "plugin" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5214
- /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5215
- " Kopiert!"
5216
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5217
- /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5218
- " Kopieren"
5219
- ] })
5220
- }
5221
- )
5222
- ] })
5223
- ] }),
5224
- /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
5225
- /* @__PURE__ */ jsxRuntime.jsx(CodeHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
5226
- /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 20, height: 20, color: theme$1.colors.secondary[600] } }),
5227
- "REST API"
5228
- ] }) }),
5229
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Für externe Anwendungen, Frontend-Calls oder Postman Tests." }),
5230
- /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5231
- /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5232
- __html: `curl -X POST http://localhost:1337/api/magic-mail/send \\
5528
+ "plugin"
5529
+ ),
5530
+ children: copiedCode === "plugin" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5531
+ /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5532
+ " Copied!"
5533
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5534
+ /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5535
+ " Copy"
5536
+ ] })
5537
+ }
5538
+ )
5539
+ ] })
5540
+ ] }) })
5541
+ ] }),
5542
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "rest", children: [
5543
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16, color: theme$1.colors.secondary[600] } }), children: "REST API (cURL)" }) }),
5544
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
5545
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "For external applications, frontend calls, or Postman tests." }),
5546
+ /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
5547
+ /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
5548
+ __html: `curl -X POST http://localhost:1337/api/magic-mail/send \\
5233
5549
  -H <span class="string">"Content-Type: application/json"</span> \\
5234
5550
  -H <span class="string">"Authorization: Bearer YOUR_API_TOKEN"</span> \\
5235
5551
  -d <span class="string">'{
@@ -5240,14 +5556,14 @@ const TemplateList = () => {
5240
5556
  "code": "123456"
5241
5557
  }
5242
5558
  }'</span>`
5243
- } }),
5244
- /* @__PURE__ */ jsxRuntime.jsx(
5245
- CopyButton,
5246
- {
5247
- size: "S",
5248
- variant: "ghost",
5249
- onClick: () => handleCopyCode(
5250
- `curl -X POST http://localhost:1337/api/magic-mail/send \\
5559
+ } }),
5560
+ /* @__PURE__ */ jsxRuntime.jsx(
5561
+ CopyButton,
5562
+ {
5563
+ size: "S",
5564
+ variant: "ghost",
5565
+ onClick: () => handleCopyCode(
5566
+ `curl -X POST http://localhost:1337/api/magic-mail/send \\
5251
5567
  -H "Content-Type: application/json" \\
5252
5568
  -H "Authorization: Bearer YOUR_API_TOKEN" \\
5253
5569
  -d '{
@@ -5258,51 +5574,33 @@ const TemplateList = () => {
5258
5574
  "code": "123456"
5259
5575
  }
5260
5576
  }'`,
5261
- "curl"
5262
- ),
5263
- children: copiedCode === "curl" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5264
- /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5265
- " Kopiert!"
5266
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5267
- /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5268
- " Kopieren"
5269
- ] })
5270
- }
5271
- )
5272
- ] })
5273
- ] }),
5274
- /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
5275
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5276
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
5277
- " #",
5278
- selectedTemplate.templateReferenceId
5279
- ] }),
5280
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5281
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Name:" }),
5282
- " ",
5283
- selectedTemplate.name
5284
- ] })
5285
- ] }) }),
5286
- !selectedTemplate.isActive && /* @__PURE__ */ jsxRuntime.jsxs(WarningBox, { children: [
5287
- /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
5288
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
5289
- "Dieses Template ist derzeit ",
5290
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "INAKTIV" }),
5291
- " und wird nicht versendet."
5577
+ "curl"
5578
+ ),
5579
+ children: copiedCode === "curl" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5580
+ /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
5581
+ " Copied!"
5582
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5583
+ /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
5584
+ " Copy"
5585
+ ] })
5586
+ }
5587
+ )
5588
+ ] })
5589
+ ] }) })
5292
5590
  ] })
5293
5591
  ] })
5294
5592
  ] }),
5295
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => setShowCodeExample(false), variant: "secondary", children: "Schließen" }) })
5593
+ /* @__PURE__ */ jsxRuntime.jsx(StyledModalFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: () => setShowCodeExample(false), children: "Close" }) })
5296
5594
  ] }) }),
5297
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: showTestSendModal, onOpenChange: setShowTestSendModal, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
5298
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Send Test Email" }) }),
5299
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
5300
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
5301
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Template" }),
5302
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: selectedTemplate?.name })
5595
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: showTestSendModal, onOpenChange: setShowTestSendModal, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledModalContent, { children: [
5596
+ /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Send Test Email" }) }),
5597
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledModalBody, { children: [
5598
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
5599
+ /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Template" }),
5600
+ /* @__PURE__ */ jsxRuntime.jsx(ModalTemplateInfo, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: selectedTemplate?.name }) })
5303
5601
  ] }),
5304
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
5305
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Recipient Email *" }),
5602
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
5603
+ /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Recipient Email *" }),
5306
5604
  /* @__PURE__ */ jsxRuntime.jsx(
5307
5605
  designSystem.TextInput,
5308
5606
  {
@@ -5313,20 +5611,11 @@ const TemplateList = () => {
5313
5611
  }
5314
5612
  )
5315
5613
  ] }),
5316
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
5317
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Send from Account (optional)" }),
5614
+ /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
5615
+ /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Send from Account (optional)" }),
5318
5616
  /* @__PURE__ */ jsxRuntime.jsxs(
5319
- "select",
5617
+ StyledSelect,
5320
5618
  {
5321
- style: {
5322
- width: "100%",
5323
- padding: "8px 12px",
5324
- borderRadius: "4px",
5325
- border: "1px solid #dcdce4",
5326
- fontSize: "14px",
5327
- backgroundColor: "white",
5328
- cursor: "pointer"
5329
- },
5330
5619
  value: testAccount,
5331
5620
  onChange: (e) => setTestAccount(e.target.value),
5332
5621
  children: [
@@ -5340,15 +5629,19 @@ const TemplateList = () => {
5340
5629
  ]
5341
5630
  }
5342
5631
  ),
5343
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "8px", display: "block" }, children: "Leave empty to use smart routing" })
5344
- ] })
5345
- ] }) }),
5346
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
5347
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => setShowTestSendModal(false), variant: "tertiary", children: "Cancel" }),
5348
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Button, { onClick: sendTestEmail, variant: "default", children: [
5349
- /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16, marginRight: "6px" } }),
5350
- "Send Test Email"
5632
+ /* @__PURE__ */ jsxRuntime.jsx(ModalHint, { children: "Leave empty to use smart routing" })
5351
5633
  ] })
5634
+ ] }),
5635
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledModalFooter, { children: [
5636
+ /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: () => setShowTestSendModal(false), children: "Cancel" }),
5637
+ /* @__PURE__ */ jsxRuntime.jsx(
5638
+ StyledButtons.GradientButton,
5639
+ {
5640
+ onClick: sendTestEmail,
5641
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16 } }),
5642
+ children: "Send Test Email"
5643
+ }
5644
+ )
5352
5645
  ] })
5353
5646
  ] }) }),
5354
5647
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -6977,18 +7270,9 @@ const Analytics = () => {
6977
7270
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Analytics Available in Premium" }),
6978
7271
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { marginBottom: "32px", lineHeight: "1.6", display: "block" }, children: "Upgrade to Premium to unlock email analytics, tracking, open rates, click rates, and detailed reports about your email campaigns." }),
6979
7272
  /* @__PURE__ */ jsxRuntime.jsx(
6980
- designSystem.Button,
7273
+ StyledButtons.GradientButton,
6981
7274
  {
6982
7275
  onClick: () => window.location.href = "/admin/settings/magic-mail/upgrade",
6983
- variant: "default",
6984
- style: {
6985
- background: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
6986
- color: "white",
6987
- border: "none",
6988
- padding: "12px 24px",
6989
- fontSize: "15px",
6990
- fontWeight: "600"
6991
- },
6992
7276
  children: "View Upgrade Plans"
6993
7277
  }
6994
7278
  )
@@ -7046,10 +7330,9 @@ const Analytics = () => {
7046
7330
  }
7047
7331
  ),
7048
7332
  emailLogs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
7049
- designSystem.Button,
7333
+ StyledButtons.DangerButton,
7050
7334
  {
7051
- variant: "danger-light",
7052
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}),
7335
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } }),
7053
7336
  onClick: () => setShowClearDialog(true),
7054
7337
  disabled: isDeleting,
7055
7338
  children: "Clear All"
@@ -7114,21 +7397,19 @@ const Analytics = () => {
7114
7397
  ] }) }),
7115
7398
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", gap: 2, children: [
7116
7399
  /* @__PURE__ */ jsxRuntime.jsx(
7117
- designSystem.Button,
7400
+ StyledButtons.TertiaryButton,
7118
7401
  {
7119
- variant: "tertiary",
7120
7402
  onClick: () => setShowClearDialog(false),
7121
7403
  disabled: isDeleting,
7122
7404
  children: "Cancel"
7123
7405
  }
7124
7406
  ),
7125
7407
  /* @__PURE__ */ jsxRuntime.jsx(
7126
- designSystem.Button,
7408
+ StyledButtons.DangerButton,
7127
7409
  {
7128
- variant: "danger",
7129
7410
  onClick: handleClearAll,
7130
7411
  loading: isDeleting,
7131
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}),
7412
+ startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } }),
7132
7413
  children: "Delete All"
7133
7414
  }
7134
7415
  )
@@ -7344,20 +7625,20 @@ const ConnectedCard = styled__default.default(designSystem.Box)`
7344
7625
  text-align: center;
7345
7626
  `;
7346
7627
  const InfoBox = styled__default.default(designSystem.Box)`
7347
- background: ${colors.primaryLight};
7348
- border: 1px solid ${colors.primary}33;
7628
+ background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${colors.whatsappLight} 100%);
7629
+ border: 1px solid ${theme$3.colors.primary[200]};
7349
7630
  border-radius: 12px;
7350
- padding: 20px;
7351
- margin: 16px 0;
7631
+ padding: 24px;
7632
+ margin: 20px 0;
7352
7633
  `;
7353
7634
  const TestSection = styled__default.default(designSystem.Box)`
7354
- background: ${colors.neutralLight};
7635
+ background: ${(props) => props.theme.colors.neutral100};
7355
7636
  border-radius: 12px;
7356
7637
  padding: 24px;
7357
7638
  margin-top: 24px;
7358
7639
  `;
7359
7640
  const UseCaseCard = styled__default.default(designSystem.Box)`
7360
- background: linear-gradient(135deg, ${colors.primaryLight}, ${colors.whatsappLight});
7641
+ background: linear-gradient(135deg, ${colors.whatsappLight}, ${theme$3.colors.primary[50]});
7361
7642
  border: 2px solid ${colors.whatsapp};
7362
7643
  border-radius: 16px;
7363
7644
  padding: 24px;
@@ -7366,7 +7647,59 @@ const UseCaseCard = styled__default.default(designSystem.Box)`
7366
7647
  const ButtonRow = styled__default.default(designSystem.Flex)`
7367
7648
  margin-top: 32px;
7368
7649
  padding-top: 24px;
7369
- border-top: 1px solid ${colors.border};
7650
+ border-top: 1px solid ${(props) => props.theme.colors.neutral200};
7651
+ `;
7652
+ const AlertBox = styled__default.default(designSystem.Box)`
7653
+ background: ${theme$3.colors.primary[50]};
7654
+ border: 1px solid ${theme$3.colors.primary[200]};
7655
+ border-radius: 12px;
7656
+ padding: 16px 20px;
7657
+ margin-top: 20px;
7658
+ display: flex;
7659
+ align-items: flex-start;
7660
+ gap: 12px;
7661
+ `;
7662
+ const AlertIcon = styled__default.default.div`
7663
+ width: 24px;
7664
+ height: 24px;
7665
+ border-radius: 50%;
7666
+ background: ${theme$3.colors.primary[500]};
7667
+ color: white;
7668
+ display: flex;
7669
+ align-items: center;
7670
+ justify-content: center;
7671
+ font-size: 14px;
7672
+ font-weight: bold;
7673
+ flex-shrink: 0;
7674
+ `;
7675
+ const SuccessBox = styled__default.default(designSystem.Box)`
7676
+ background: ${theme$3.colors.success[50]};
7677
+ border: 1px solid ${theme$3.colors.success[200]};
7678
+ border-radius: 12px;
7679
+ padding: 16px 20px;
7680
+ display: flex;
7681
+ align-items: flex-start;
7682
+ gap: 12px;
7683
+ `;
7684
+ const SuccessIcon = styled__default.default.div`
7685
+ width: 24px;
7686
+ height: 24px;
7687
+ border-radius: 50%;
7688
+ background: ${theme$3.colors.success[500]};
7689
+ color: white;
7690
+ display: flex;
7691
+ align-items: center;
7692
+ justify-content: center;
7693
+ flex-shrink: 0;
7694
+ `;
7695
+ const WhatsAppButton = styled__default.default(StyledButtons.GradientButton)`
7696
+ && {
7697
+ background: linear-gradient(135deg, ${colors.whatsapp} 0%, ${colors.whatsappDark} 100%) !important;
7698
+
7699
+ &:hover:not(:disabled) {
7700
+ background: linear-gradient(135deg, ${colors.whatsappDark} 0%, ${colors.whatsapp} 100%) !important;
7701
+ }
7702
+ }
7370
7703
  `;
7371
7704
  const NotInstalledCard = styled__default.default(designSystem.Box)`
7372
7705
  background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
@@ -7600,7 +7933,13 @@ const WhatsAppPage = () => {
7600
7933
  currentStep === 1 && /* @__PURE__ */ jsxRuntime.jsxs(ContentCard, { children: [
7601
7934
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Check Installation" }),
7602
7935
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "First, we need to verify that the required dependencies are installed." }),
7603
- isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "success", title: "[SUCCESS] Dependencies Installed", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { display: "block" }, children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." }) }) : /* @__PURE__ */ jsxRuntime.jsxs(NotInstalledCard, { children: [
7936
+ isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox, { children: [
7937
+ /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) }),
7938
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
7939
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: theme$3.colors.success[700] }, children: "Dependencies Installed" }),
7940
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." })
7941
+ ] })
7942
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(NotInstalledCard, { children: [
7604
7943
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "12px", color: colors.danger }, children: "[WARNING] Dependencies Not Installed" }),
7605
7944
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "16px" }, children: "The WhatsApp integration requires additional dependencies. Please install them:" }),
7606
7945
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -7615,26 +7954,24 @@ const WhatsAppPage = () => {
7615
7954
  border: `1px solid ${colors.border}`,
7616
7955
  marginBottom: "16px"
7617
7956
  },
7618
- children: "npm install @whiskeysockets/baileys pino qrcode"
7957
+ children: "npm install baileys pino qrcode"
7619
7958
  }
7620
7959
  ),
7621
7960
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "After installing, restart your Strapi server and refresh this page." })
7622
7961
  ] }),
7623
- /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "flex-end", children: [
7962
+ /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "flex-end", gap: 3, children: [
7624
7963
  /* @__PURE__ */ jsxRuntime.jsx(
7625
- designSystem.Button,
7964
+ StyledButtons.SecondaryButton,
7626
7965
  {
7627
7966
  onClick: () => {
7628
7967
  checkAvailability();
7629
7968
  },
7630
- variant: "secondary",
7631
7969
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
7632
- style: { marginRight: "12px" },
7633
7970
  children: "Refresh"
7634
7971
  }
7635
7972
  ),
7636
7973
  /* @__PURE__ */ jsxRuntime.jsx(
7637
- designSystem.Button,
7974
+ StyledButtons.GradientButton,
7638
7975
  {
7639
7976
  onClick: () => setCurrentStep(2),
7640
7977
  disabled: !isAvailable,
@@ -7648,31 +7985,35 @@ const WhatsAppPage = () => {
7648
7985
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
7649
7986
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Click the button below to start the connection process. A QR code will be generated for you to scan." }),
7650
7987
  /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
7651
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "12px" }, children: "How it works" }),
7652
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
7653
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
7654
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "2. Open WhatsApp on your phone" }),
7655
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "3. Go to Settings - Linked Devices - Link a Device" }),
7656
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "4. Scan the QR code with your phone" })
7988
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "How it works" }),
7989
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
7990
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
7991
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Open WhatsApp on your phone" }),
7992
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "3. Go to Settings - Linked Devices - Link a Device" }),
7993
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "4. Scan the QR code with your phone" })
7994
+ ] })
7995
+ ] }),
7996
+ /* @__PURE__ */ jsxRuntime.jsxs(AlertBox, { children: [
7997
+ /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { children: "i" }),
7998
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
7999
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px" }, children: "Session Persistence" }),
8000
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Your WhatsApp session will be saved. You won't need to scan the QR code again unless you manually disconnect or your session expires." })
7657
8001
  ] })
7658
8002
  ] }),
7659
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "default", title: "Session Persistence", style: { marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Your WhatsApp session will be saved. You won't need to scan the QR code again unless you manually disconnect or your session expires." }) }),
7660
8003
  /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
7661
8004
  /* @__PURE__ */ jsxRuntime.jsx(
7662
- designSystem.Button,
8005
+ StyledButtons.TertiaryButton,
7663
8006
  {
7664
8007
  onClick: () => setCurrentStep(1),
7665
- variant: "tertiary",
7666
8008
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
7667
8009
  children: "Back"
7668
8010
  }
7669
8011
  ),
7670
8012
  /* @__PURE__ */ jsxRuntime.jsx(
7671
- designSystem.Button,
8013
+ WhatsAppButton,
7672
8014
  {
7673
8015
  onClick: handleConnect,
7674
8016
  loading: connecting,
7675
- style: { background: colors.whatsapp },
7676
8017
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
7677
8018
  children: "Connect WhatsApp"
7678
8019
  }
@@ -7689,28 +8030,29 @@ const WhatsAppPage = () => {
7689
8030
  /* @__PURE__ */ jsxRuntime.jsx(SpinningLoader, { style: { width: "40px", height: "40px" } }),
7690
8031
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "Generating QR code..." })
7691
8032
  ] }) }),
7692
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Alert, { variant: "default", title: "Instructions", children: [
7693
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "1. Open WhatsApp on your phone" }),
7694
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "2. Tap Menu or Settings" }),
7695
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: '3. Select "Linked Devices"' }),
7696
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: '4. Tap "Link a Device"' }),
7697
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "5. Point your phone camera at this QR code" })
8033
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
8034
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "Instructions" }),
8035
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
8036
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
8037
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Tap Menu or Settings" }),
8038
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '3. Select "Linked Devices"' }),
8039
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '4. Tap "Link a Device"' }),
8040
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "5. Point your phone camera at this QR code" })
8041
+ ] })
7698
8042
  ] }),
7699
8043
  /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
7700
8044
  /* @__PURE__ */ jsxRuntime.jsx(
7701
- designSystem.Button,
8045
+ StyledButtons.TertiaryButton,
7702
8046
  {
7703
8047
  onClick: () => setCurrentStep(2),
7704
- variant: "tertiary",
7705
8048
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
7706
8049
  children: "Back"
7707
8050
  }
7708
8051
  ),
7709
8052
  /* @__PURE__ */ jsxRuntime.jsx(
7710
- designSystem.Button,
8053
+ StyledButtons.SecondaryButton,
7711
8054
  {
7712
8055
  onClick: handleConnect,
7713
- variant: "secondary",
7714
8056
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
7715
8057
  children: "Refresh QR"
7716
8058
  }
@@ -7756,11 +8098,10 @@ const WhatsAppPage = () => {
7756
8098
  )
7757
8099
  ] }),
7758
8100
  /* @__PURE__ */ jsxRuntime.jsx(
7759
- designSystem.Button,
8101
+ WhatsAppButton,
7760
8102
  {
7761
8103
  onClick: handleSendTest,
7762
8104
  loading: sendingTest,
7763
- style: { background: colors.whatsapp },
7764
8105
  children: "Send Test Message"
7765
8106
  }
7766
8107
  )
@@ -7793,17 +8134,16 @@ await whatsapp.sendTemplateMessage('49123456789', 'welcome', {
7793
8134
  });` })
7794
8135
  }
7795
8136
  ),
7796
- /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
8137
+ /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", alignItems: "center", children: [
7797
8138
  /* @__PURE__ */ jsxRuntime.jsx(
7798
- designSystem.Button,
8139
+ StyledButtons.DangerButton,
7799
8140
  {
7800
8141
  onClick: handleDisconnect,
7801
- variant: "danger",
7802
8142
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}),
7803
8143
  children: "Disconnect WhatsApp"
7804
8144
  }
7805
8145
  ),
7806
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", children: "FREE - No API costs!" })
8146
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", style: { padding: "8px 16px", fontSize: "13px" }, children: "FREE - No API costs!" })
7807
8147
  ] })
7808
8148
  ] })
7809
8149
  ] })
@@ -7912,6 +8252,41 @@ const CloseButton = styled__default.default.button`
7912
8252
  transform: scale(0.95);
7913
8253
  }
7914
8254
  `;
8255
+ const GradientButton = styled__default.default(designSystem.Button)`
8256
+ && {
8257
+ background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
8258
+ color: white;
8259
+ font-weight: 600;
8260
+ border: none;
8261
+ box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
8262
+ padding: 12px 24px;
8263
+ min-height: 44px;
8264
+
8265
+ &:hover:not(:disabled) {
8266
+ background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
8267
+ box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5);
8268
+ }
8269
+
8270
+ &:disabled {
8271
+ opacity: 0.6;
8272
+ cursor: not-allowed;
8273
+ }
8274
+ }
8275
+ `;
8276
+ styled__default.default(designSystem.Button)`
8277
+ && {
8278
+ background: #f0f9ff;
8279
+ color: #0EA5E9;
8280
+ font-weight: 600;
8281
+ border: 2px solid #0EA5E9;
8282
+ padding: 12px 24px;
8283
+ min-height: 44px;
8284
+
8285
+ &:hover:not(:disabled) {
8286
+ background: #e0f2fe;
8287
+ }
8288
+ }
8289
+ `;
7915
8290
  const ToggleButton = styled__default.default.button`
7916
8291
  background: none;
7917
8292
  border: none;
@@ -8182,37 +8557,23 @@ const LicenseGuard = ({ children }) => {
8182
8557
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", marginTop: 2, children: "Loading admin user data..." })
8183
8558
  ] }),
8184
8559
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? /* @__PURE__ */ jsxRuntime.jsx(
8185
- designSystem.Button,
8560
+ GradientButton,
8186
8561
  {
8187
8562
  type: "submit",
8188
8563
  size: "L",
8189
8564
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { style: { width: 20, height: 20 } }),
8190
8565
  loading: isCreating,
8191
8566
  disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
8192
- style: {
8193
- background: "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)",
8194
- color: "white",
8195
- fontWeight: "600",
8196
- border: "none",
8197
- boxShadow: "0 4px 12px rgba(14, 165, 233, 0.4)"
8198
- },
8199
8567
  children: "Validate License"
8200
8568
  }
8201
8569
  ) : /* @__PURE__ */ jsxRuntime.jsx(
8202
- designSystem.Button,
8570
+ GradientButton,
8203
8571
  {
8204
8572
  type: "submit",
8205
8573
  size: "L",
8206
8574
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { style: { width: 20, height: 20 } }),
8207
8575
  loading: isCreating,
8208
8576
  disabled: isCreating || !adminUser,
8209
- style: {
8210
- background: "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)",
8211
- color: "white",
8212
- fontWeight: "600",
8213
- border: "none",
8214
- boxShadow: "0 4px 12px rgba(14, 165, 233, 0.4)"
8215
- },
8216
8577
  children: "Activate License"
8217
8578
  }
8218
8579
  ) })