strapi-plugin-magic-mail 3.0.3 → 3.1.0

package/dist/admin/{App-bZGJVVWn.mjs → App-Bmav09Ol.mjs}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState, useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Switch, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Badge, Table, Tabs, Accordion } from "@strapi/design-system";
 import { useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
-import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, BoltIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
+import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, BoltIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import React, { useRef, useEffect, useState } from "react";
 import styled, { css, keyframes } from "styled-components";
-import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight, ArrowClockwise, Play, Cross } from "@strapi/icons";
+import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight } from "@strapi/icons";
 import { T as TertiaryButton, G as GradientButton, C as CTAButton, I as IconButton, a as IconButtonPrimary, b as IconButtonDanger, S as SecondaryButton, c as IconButtonPurple, d as IconButtonSuccess, D as DangerButton } from "./StyledButtons-aq1EWrQ-.mjs";
 import * as ReactEmailEditor from "react-email-editor";
 const useAuthRefresh = () => {
@@ -61,7 +61,7 @@ const theme$3 = {
     xl: "16px"
   }
 };
-const fadeIn$5 = keyframes`
+const fadeIn$4 = keyframes`
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -71,7 +71,7 @@ const fadeIn$5 = keyframes`
     transform: translateY(0);
   }
 `;
-const pulse$3 = keyframes`
+const pulse$2 = keyframes`
   0%, 100% {
     transform: scale(1);
   }
@@ -89,7 +89,7 @@ const slideIn = keyframes`
     opacity: 1;
   }
 `;
-const colors$1 = {
+const colors = {
   primary: "#4945ff",
   // Strapi Primary Blue
   primaryLight: "rgba(73, 69, 255, 0.06)",
@@ -107,7 +107,7 @@ const StepHeader = styled(Box)`
   padding-bottom: 24px;
   margin-bottom: 32px;
   position: relative;
-  animation: ${fadeIn$5} 0.4s ease;
+  animation: ${fadeIn$4} 0.4s ease;
   
   &::after {
     content: '';
@@ -116,11 +116,11 @@ const StepHeader = styled(Box)`
     left: -24px;
     right: -24px;
     height: 1px;
-    background: linear-gradient(90deg, transparent, ${colors$1.border}, transparent);
+    background: linear-gradient(90deg, transparent, ${colors.border}, transparent);
   }
 `;
 const StepTitle = styled(Typography)`
-  color: ${colors$1.text};
+  color: ${colors.text};
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 8px;
@@ -129,11 +129,11 @@ const StepTitle = styled(Typography)`
   gap: 12px;
 `;
 const StepSubtitle = styled(Typography)`
-  color: ${colors$1.textLight};
+  color: ${colors.textLight};
   font-size: 14px;
   line-height: 1.5;
 `;
-const StepperContainer$1 = styled(Box)`
+const StepperContainer = styled(Box)`
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -143,7 +143,7 @@ const StepperContainer$1 = styled(Box)`
   position: relative;
   padding: 0 40px;
 `;
-const StepWrapper$1 = styled.div`
+const StepWrapper = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -157,18 +157,18 @@ const StepWrapper$1 = styled.div`
     left: 50%;
     width: 100%;
     height: 3px;
-    background: ${(props) => props.$completed ? colors$1.success : colors$1.neutralLight};
+    background: ${(props) => props.$completed ? colors.success : colors.neutralLight};
     transition: all 0.4s ease;
     z-index: 0;
   }
 `;
-const StepDot$1 = styled.div`
+const StepDot = styled.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : props.theme.colors.neutral0};
-  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors$1.textLight};
-  border: 4px solid ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.border};
+  background: ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : props.theme.colors.neutral0};
+  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors.textLight};
+  border: 4px solid ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : colors.border};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -178,20 +178,20 @@ const StepDot$1 = styled.div`
   position: relative;
   z-index: 1;
   cursor: ${(props) => props.$completed ? "pointer" : "default"};
-  box-shadow: ${(props) => props.$active ? `0 4px 16px ${colors$1.primary}40, 0 0 0 8px ${colors$1.primaryLight}` : props.$completed ? `0 4px 12px ${colors$1.success}30` : "0 2px 8px rgba(0,0,0,0.08)"};
+  box-shadow: ${(props) => props.$active ? `0 4px 16px ${colors.primary}40, 0 0 0 8px ${colors.primaryLight}` : props.$completed ? `0 4px 12px ${colors.success}30` : "0 2px 8px rgba(0,0,0,0.08)"};
   
   ${(props) => props.$active && css`
-    animation: ${pulse$3} 2s infinite;
+    animation: ${pulse$2} 2s infinite;
   `}
   
   &:hover {
     transform: ${(props) => props.$completed ? "scale(1.1)" : props.$active ? "scale(1.05)" : "scale(1)"};
   }
 `;
-const StepLabel$1 = styled(Typography)`
+const StepLabel = styled(Typography)`
   margin-top: 12px;
   font-size: 13px;
-  color: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.textLight};
+  color: ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : colors.textLight};
   white-space: nowrap;
   font-weight: ${(props) => props.$active ? 600 : 500};
   text-align: center;
@@ -202,13 +202,13 @@ const ProviderCategoryHeader = styled(Box)`
   align-items: center;
   gap: 12px;
   margin: 0 0 16px;
-  animation: ${fadeIn$5} 0.4s ease;
+  animation: ${fadeIn$4} 0.4s ease;
 
   &::after {
     content: '';
     flex: 1;
     height: 1px;
-    background: linear-gradient(90deg, ${colors$1.border}, transparent);
+    background: linear-gradient(90deg, ${colors.border}, transparent);
   }
 `;
 const ProviderCategoryLabel = styled(Typography)`
@@ -216,15 +216,15 @@ const ProviderCategoryLabel = styled(Typography)`
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: ${colors$1.textLight};
+  color: ${colors.textLight};
 `;
 const ProviderCategoryHint = styled.span`
   font-size: 11px;
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 999px;
-  background: ${colors$1.primaryLight};
-  color: ${colors$1.primary};
+  background: ${colors.primaryLight};
+  color: ${colors.primary};
   letter-spacing: 0.02em;
   text-transform: none;
 `;
@@ -244,8 +244,8 @@ const ProvidersGrid = styled(Box)`
   }
 `;
 const ProviderCard = styled(Box)`
-  background: ${(props) => props.$selected ? `linear-gradient(180deg, ${colors$1.successLight}, rgba(92, 177, 118, 0.04))` : "var(--colors-neutral100, rgba(255,255,255,0.02))"};
-  border: 1.5px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
+  background: ${(props) => props.$selected ? `linear-gradient(180deg, ${colors.successLight}, rgba(92, 177, 118, 0.04))` : "var(--colors-neutral100, rgba(255,255,255,0.02))"};
+  border: 1.5px solid ${(props) => props.$selected ? colors.success : colors.border};
   border-radius: 14px;
   padding: 22px 20px 20px;
   cursor: pointer;
@@ -271,7 +271,7 @@ const ProviderCard = styled(Box)`
   &:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 28px rgba(73, 69, 255, 0.18);
-    border-color: ${(props) => props.$selected ? colors$1.success : colors$1.primary};
+    border-color: ${(props) => props.$selected ? colors.success : colors.primary};
 
     &::before {
       opacity: 1;
@@ -279,12 +279,12 @@ const ProviderCard = styled(Box)`
   }
 
   &:focus-visible {
-    outline: 2px solid ${colors$1.primary};
+    outline: 2px solid ${colors.primary};
     outline-offset: 2px;
   }
 
   ${(props) => props.$selected && css`
-    box-shadow: 0 0 0 1px ${colors$1.success}, 0 10px 28px rgba(92, 177, 118, 0.18);
+    box-shadow: 0 0 0 1px ${colors.success}, 0 10px 28px rgba(92, 177, 118, 0.18);
 
     &::after {
       content: '✓';
@@ -293,7 +293,7 @@ const ProviderCard = styled(Box)`
       right: 12px;
       width: 24px;
       height: 24px;
-      background: ${colors$1.success};
+      background: ${colors.success};
       color: #fff;
       border-radius: 50%;
       display: flex;
@@ -318,7 +318,7 @@ const ProviderIcon = styled.div`
   justify-content: center;
   font-size: ${(props) => props.$fontSize || "22px"};
   font-weight: 700;
-  color: ${(props) => props.$color || colors$1.primary};
+  color: ${(props) => props.$color || colors.primary};
   box-shadow: 0 4px 14px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.25)"};
   flex-shrink: 0;
 `;
@@ -332,22 +332,22 @@ const ProviderName = styled(Typography)`
   font-weight: 600;
   font-size: 16px;
   line-height: 1.25;
-  color: ${colors$1.text};
+  color: ${colors.text};
   margin: 0;
 `;
 const ProviderTagline = styled(Typography)`
   font-size: 12.5px;
   line-height: 1.4;
-  color: ${colors$1.textLight};
+  color: ${colors.textLight};
   margin: 0;
 `;
 const InfoAlert = styled(Alert)`
-  background: ${colors$1.primaryLight};
-  border: 1px solid ${colors$1.primary}33;
-  animation: ${fadeIn$5} 0.4s ease;
+  background: ${colors.primaryLight};
+  border: 1px solid ${colors.primary}33;
+  animation: ${fadeIn$4} 0.4s ease;
   
   svg {
-    color: ${colors$1.primary};
+    color: ${colors.primary};
   }
 `;
 const FormSection = styled(Box)`
@@ -367,7 +367,7 @@ const FullWidthField = styled(Box)`
   }
 `;
 const SectionTitle = styled(Typography)`
-  color: ${colors$1.text};
+  color: ${colors.text};
   font-weight: 600;
   font-size: 16px;
   margin-bottom: 16px;
@@ -865,13 +865,13 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
           currentStep === 4 && "Set rate limits and priority for this account"
         ] })
       ] }),
-      /* @__PURE__ */ jsx(StepperContainer$1, { children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsxs(
-        StepWrapper$1,
+      /* @__PURE__ */ jsx(StepperContainer, { children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsxs(
+        StepWrapper,
         {
           $completed: currentStep > step,
           children: [
             /* @__PURE__ */ jsx(
-              StepDot$1,
+              StepDot,
               {
                 $active: currentStep === step,
                 $completed: currentStep > step,
@@ -880,7 +880,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
               }
             ),
             /* @__PURE__ */ jsx(
-              StepLabel$1,
+              StepLabel,
               {
                 $active: currentStep === step,
                 $completed: currentStep > step,
@@ -1272,7 +1272,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors$1.border}`,
+                  border: `1px solid ${colors.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1289,7 +1289,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "1." }),
                       " Go to ",
-                      /* @__PURE__ */ jsx("a", { href: "https://console.cloud.google.com", target: "_blank", rel: "noopener noreferrer", style: { color: colors$1.primary, textDecoration: "underline" }, children: "console.cloud.google.com" })
+                      /* @__PURE__ */ jsx("a", { href: "https://console.cloud.google.com", target: "_blank", rel: "noopener noreferrer", style: { color: colors.primary, textDecoration: "underline" }, children: "console.cloud.google.com" })
                     ] }),
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1315,7 +1315,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            border: `1px solid ${colors$1.border}`
+                            border: `1px solid ${colors.border}`
                           },
                           children: [
                             window.location.origin,
@@ -1416,7 +1416,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors$1.border}`,
+                  border: `1px solid ${colors.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1433,7 +1433,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "1." }),
                       " Go to ",
-                      /* @__PURE__ */ jsx("a", { href: "https://portal.azure.com", target: "_blank", rel: "noopener noreferrer", style: { color: colors$1.primary, textDecoration: "underline" }, children: "portal.azure.com" })
+                      /* @__PURE__ */ jsx("a", { href: "https://portal.azure.com", target: "_blank", rel: "noopener noreferrer", style: { color: colors.primary, textDecoration: "underline" }, children: "portal.azure.com" })
                     ] }),
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1467,8 +1467,8 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            color: colors$1.textSecondary,
-                            border: `1px solid ${colors$1.border}`
+                            color: colors.textSecondary,
+                            border: `1px solid ${colors.border}`
                           },
                           children: `${window.location.origin}/magic-mail/oauth/microsoft/callback`
                         }
@@ -1593,7 +1593,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors$1.border}`,
+                  border: `1px solid ${colors.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1610,7 +1610,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "1." }),
                       " Go to ",
-                      /* @__PURE__ */ jsx("a", { href: "https://developer.yahoo.com/apps/", target: "_blank", rel: "noopener noreferrer", style: { color: colors$1.primary, textDecoration: "underline" }, children: "developer.yahoo.com/apps" })
+                      /* @__PURE__ */ jsx("a", { href: "https://developer.yahoo.com/apps/", target: "_blank", rel: "noopener noreferrer", style: { color: colors.primary, textDecoration: "underline" }, children: "developer.yahoo.com/apps" })
                     ] }),
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1636,8 +1636,8 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            color: colors$1.textSecondary,
-                            border: `1px solid ${colors$1.border}`
+                            color: colors.textSecondary,
+                            border: `1px solid ${colors.border}`
                           },
                           children: `${window.location.origin}/magic-mail/oauth/yahoo/callback`
                         }
@@ -1902,7 +1902,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
     ] }) })
   ] }) });
 };
-const fadeIn$4 = keyframes`
+const fadeIn$3 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -1914,7 +1914,7 @@ const float$3 = keyframes`
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-5px); }
 `;
-const pulse$2 = keyframes`
+const pulse$1 = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 `;
@@ -1930,7 +1930,7 @@ const breakpoints$3 = {
   mobile: "768px"
 };
 const Container$4 = styled(Box)`
-  ${css`animation: ${fadeIn$4} ${theme$3.transitions.slow};`}
+  ${css`animation: ${fadeIn$3} ${theme$3.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -2048,7 +2048,7 @@ const StatCard$3 = styled(Box)`
   position: relative;
   overflow: hidden;
   transition: all ${theme$3.transitions.normal};
-  ${css`animation: ${fadeIn$4} ${theme$3.transitions.slow} backwards;`}
+  ${css`animation: ${fadeIn$3} ${theme$3.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$3.shadows.sm};
   border: 1px solid rgba(128, 128, 128, 0.2);
@@ -2174,7 +2174,7 @@ const OnlineBadge$1 = styled.div`
   background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
   display: inline-block;
   margin-right: 8px;
-  ${css`animation: ${(props) => props.$active ? pulse$2 : "none"} 2s ease-in-out infinite;`}
+  ${css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$3 = styled(Table)`
   thead {
@@ -2936,7 +2936,7 @@ const theme$2 = {
     xl: "16px"
   }
 };
-const fadeIn$3 = keyframes`
+const fadeIn$2 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -2948,7 +2948,7 @@ const float$2 = keyframes`
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-5px); }
 `;
-const pulse$1 = keyframes`
+const pulse = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 `;
@@ -2964,7 +2964,7 @@ const breakpoints$2 = {
   mobile: "768px"
 };
 const Container$3 = styled(Box)`
-  ${css`animation: ${fadeIn$3} ${theme$2.transitions.slow};`}
+  ${css`animation: ${fadeIn$2} ${theme$2.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -3082,7 +3082,7 @@ const StatCard$2 = styled(Box)`
   position: relative;
   overflow: hidden;
   transition: all ${theme$2.transitions.normal};
-  ${css`animation: ${fadeIn$3} ${theme$2.transitions.slow} backwards;`}
+  ${css`animation: ${fadeIn$2} ${theme$2.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$2.shadows.sm};
   border: 1px solid rgba(128, 128, 128, 0.2);
@@ -3208,7 +3208,7 @@ const OnlineBadge = styled.div`
   background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
   display: inline-block;
   margin-right: 8px;
-  ${css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
+  ${css`animation: ${(props) => props.$active ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$2 = styled(Table)`
   thead {
@@ -3506,8 +3506,7 @@ const RoutingRulesPage = () => {
             rule.fallbackAccountName && /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
               "Fallback: ",
               rule.fallbackAccountName
-            ] }),
-            rule.whatsappFallback && /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", size: "S", children: "+ WhatsApp" })
+            ] })
           ] }) }),
           /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
             Badge,
@@ -3570,8 +3569,7 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
     matchType: rule?.matchType || "emailType",
     matchValue: rule?.matchValue || "",
     accountName: rule?.accountName || "",
-    fallbackAccountName: rule?.fallbackAccountName || "",
-    whatsappFallback: rule?.whatsappFallback || false
+    fallbackAccountName: rule?.fallbackAccountName || ""
   });
   const handleChange = (field, value) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
@@ -3726,38 +3724,6 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
         ),
         /* @__PURE__ */ jsx(Field.Hint, { children: "Use this account if the target account is unavailable or rate-limited" })
       ] }),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          padding: 4,
-          background: "neutral100",
-          hasRadius: true,
-          borderColor: "neutral200",
-          borderStyle: "solid",
-          borderWidth: "1px",
-          style: {
-            width: "100%",
-            borderRadius: theme$2.borderRadius.md
-          },
-          children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
-              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
-            ] }),
-            /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-              Switch,
-              {
-                checked: formData.whatsappFallback,
-                onCheckedChange: (checked) => handleChange("whatsappFallback", checked),
-                "aria-label": "WhatsApp fallback",
-                onLabel: "Enabled",
-                offLabel: "Disabled",
-                visibleLabels: false
-              }
-            ) })
-          ] })
-        }
-      ),
       /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, children: [
         /* @__PURE__ */ jsx(Field.Label, { children: "Rule Priority" }),
         /* @__PURE__ */ jsx(
@@ -3831,7 +3797,7 @@ const theme$1 = {
   spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px", "2xl": "48px" },
   borderRadius: { md: "8px", lg: "12px", xl: "16px" }
 };
-const fadeIn$2 = keyframes`
+const fadeIn$1 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -3985,7 +3951,7 @@ const CopyButton = styled(Button)`
     height: 14px;
   }
 `;
-const InfoBox$1 = styled(Box)`
+const InfoBox = styled(Box)`
   background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"}, ${"rgba(2, 132, 199, 0.12)"});
   border-left: 4px solid ${"var(--colors-primary600, #0EA5E9)"};
   border-radius: 8px;
@@ -4007,7 +3973,7 @@ const breakpoints$1 = {
   tablet: "1024px"
 };
 const Container$2 = styled(Box)`
-  ${css`animation: ${fadeIn$2} ${theme$1.transitions.slow};`}
+  ${css`animation: ${fadeIn$1} ${theme$1.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -4120,7 +4086,7 @@ const StatCard$1 = styled(Box)`
   position: relative;
   overflow: hidden;
   transition: all ${theme$1.transitions.normal};
-  ${css`animation: ${fadeIn$2} ${theme$1.transitions.slow} backwards;`}
+  ${css`animation: ${fadeIn$1} ${theme$1.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$1.shadows.sm};
   border: 1px solid rgba(128, 128, 128, 0.2);
@@ -5159,7 +5125,7 @@ const TemplateList = () => {
         selectedTemplate.name
       ] }) }),
       /* @__PURE__ */ jsxs(ScrollableDialogBody, { children: [
-        /* @__PURE__ */ jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(InfoBox, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
             /* @__PURE__ */ jsx("strong", { children: "Template ID:" }),
             " #",
@@ -5650,6 +5616,7 @@ const ImportLabel = styled.label`
 const BackButton = styled.button`
   background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.2);
+  color: ${(p) => p.theme.colors.neutral800};
   border-radius: 4px;
   padding: 8px 10px;
   height: 36px;
@@ -6196,7 +6163,15 @@ const EditorPage = () => {
     /* @__PURE__ */ jsxs(Header$1, { children: [
       /* @__PURE__ */ jsxs(HeaderRow, { children: [
         /* @__PURE__ */ jsxs(HeaderLeft, { children: [
-          /* @__PURE__ */ jsx(BackButton, { onClick: () => navigate("/plugins/magic-mail/designer"), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+          /* @__PURE__ */ jsx(
+            BackButton,
+            {
+              type: "button",
+              "aria-label": "Back to email templates",
+              onClick: () => navigate("/plugins/magic-mail/designer"),
+              children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+            }
+          ),
           /* @__PURE__ */ jsxs(TitleContainer, { children: [
             /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: isCoreEmail ? `${coreEmailType === "reset-password" ? "Reset Password" : "Email Confirmation"}` : isNewTemplate ? "New Template" : `${templateData.name}` }),
             !isNewTemplate && !isCoreEmail && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Versioning enabled" }),
@@ -6589,7 +6564,7 @@ const theme = {
   spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px", "2xl": "48px" },
   borderRadius: { lg: "12px", xl: "16px" }
 };
-const fadeIn$1 = keyframes`
+const fadeIn = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -6605,7 +6580,7 @@ const breakpoints = {
   mobile: "768px"
 };
 const Container = styled(Box)`
-  ${css`animation: ${fadeIn$1} ${theme.transitions.slow};`}
+  ${css`animation: ${fadeIn} ${theme.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -6718,7 +6693,7 @@ const StatCard = styled(Box)`
   position: relative;
   overflow: hidden;
   transition: all ${theme.transitions.normal};
-  ${css`animation: ${fadeIn$1} ${theme.transitions.slow} backwards;`}
+  ${css`animation: ${fadeIn} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
   border: 1px solid rgba(128, 128, 128, 0.2);
@@ -7127,814 +7102,6 @@ const Analytics = () => {
     ] }) })
   ] });
 };
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const pulse = keyframes`
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-`;
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-const colors = {
-  whatsapp: "#25D366",
-  whatsappDark: "#128C7E",
-  whatsappLight: "rgba(37, 211, 102, 0.2)",
-  primary: "#4945ff",
-  primaryLight: "rgba(73, 69, 255, 0.06)",
-  success: "#5cb176",
-  successLight: "rgba(92, 177, 118, 0.12)",
-  danger: "#d02b20",
-  neutral: "#8e8ea9",
-  neutralLight: "rgba(142, 142, 169, 0.08)",
-  border: "rgba(128, 128, 128, 0.2)",
-  textLight: "var(--colors-neutral600, #666687)"
-};
-const PageContainer = styled(Box)`
-  padding: 40px;
-  max-width: 900px;
-  margin: 0 auto;
-  animation: ${fadeIn} 0.4s ease;
-`;
-const HeaderSection = styled(Box)`
-  text-align: center;
-  margin-bottom: 48px;
-`;
-const WhatsAppLogo = styled.div`
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, ${colors.whatsapp}, ${colors.whatsappDark});
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 24px;
-  box-shadow: 0 8px 32px ${colors.whatsapp}40;
-`;
-const PhoneIcon = styled.div`
-  width: 40px;
-  height: 40px;
-  color: white;
-  font-size: 32px;
-`;
-const StepperContainer = styled(Box)`
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 0;
-  margin-bottom: 48px;
-  position: relative;
-  padding: 0 40px;
-`;
-const StepWrapper = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  
-  &:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    top: 28px;
-    left: 50%;
-    width: 100%;
-    height: 3px;
-    background: ${(props) => props.$completed ? colors.success : colors.neutralLight};
-    transition: all 0.4s ease;
-    z-index: 0;
-  }
-`;
-const StepDot = styled.div`
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : props.theme.colors.neutral0};
-  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors.textLight};
-  border: 4px solid ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.border};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 18px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  z-index: 1;
-  cursor: ${(props) => props.$completed ? "pointer" : "default"};
-  box-shadow: ${(props) => props.$active ? `0 4px 16px ${colors.whatsapp}40, 0 0 0 8px ${colors.whatsappLight}` : props.$completed ? `0 4px 12px ${colors.success}30` : "0 2px 8px rgba(0,0,0,0.08)"};
-  
-  ${(props) => props.$active && css`
-    animation: ${pulse} 2s infinite;
-  `}
-  
-  &:hover {
-    transform: ${(props) => props.$completed ? "scale(1.1)" : props.$active ? "scale(1.05)" : "scale(1)"};
-  }
-`;
-const StepLabel = styled(Typography)`
-  margin-top: 12px;
-  font-size: 13px;
-  color: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.textLight};
-  white-space: nowrap;
-  font-weight: ${(props) => props.$active ? 600 : 500};
-  text-align: center;
-  transition: all 0.3s ease;
-`;
-const ContentCard = styled(Box)`
-  background: ${(p) => p.theme.colors.neutral0};
-  border: 1px solid ${colors.border};
-  border-radius: 16px;
-  padding: 32px;
-  margin-bottom: 24px;
-  animation: ${fadeIn} 0.4s ease;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
-`;
-const QRCodeContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32px;
-  background: ${colors.neutralLight};
-  border-radius: 16px;
-  margin: 24px 0;
-`;
-const QRImage = styled.img`
-  width: 280px;
-  height: 280px;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
-`;
-const StatusBadge = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 20px;
-  font-weight: 600;
-  font-size: 14px;
-  background: ${(props) => {
-  switch (props.$status) {
-    case "connected":
-      return colors.successLight;
-    case "connecting":
-      return colors.primaryLight;
-    case "qr_pending":
-      return colors.whatsappLight;
-    case "disconnected":
-      return colors.neutralLight;
-    default:
-      return colors.neutralLight;
-  }
-}};
-  color: ${(props) => {
-  switch (props.$status) {
-    case "connected":
-      return colors.success;
-    case "connecting":
-      return colors.primary;
-    case "qr_pending":
-      return colors.whatsappDark;
-    case "disconnected":
-      return colors.neutral;
-    default:
-      return colors.neutral;
-  }
-}};
-`;
-const SpinningLoader = styled.div`
-  width: 20px;
-  height: 20px;
-  border: 2px solid ${colors.primary}40;
-  border-top-color: ${colors.primary};
-  border-radius: 50%;
-  animation: ${spin} 1s linear infinite;
-`;
-const ConnectedCard = styled(Box)`
-  background: linear-gradient(135deg, ${colors.successLight}, ${colors.whatsappLight});
-  border: 2px solid ${colors.success};
-  border-radius: 16px;
-  padding: 32px;
-  text-align: center;
-`;
-const InfoBox = styled(Box)`
-  background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, ${colors.whatsappLight} 100%);
-  border: 1px solid rgba(2, 132, 199, 0.2);
-  border-radius: 12px;
-  padding: 24px;
-  margin: 20px 0;
-`;
-const TestSection = styled(Box)`
-  background: linear-gradient(135deg, ${colors.whatsappLight} 0%, rgba(34, 197, 94, 0.1) 100%);
-  border: 1px solid ${colors.whatsapp}40;
-  border-radius: 16px;
-  padding: 24px;
-  margin-top: 24px;
-`;
-const WhatsAppInput = styled.input`
-  width: 100%;
-  padding: 14px 16px;
-  border: 2px solid rgba(128, 128, 128, 0.2);
-  border-radius: 12px;
-  font-size: 15px;
-  background: ${(p) => p.theme.colors.neutral0};
-  color: var(--colors-neutral800);
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-  
-  &:focus {
-    outline: none;
-    border-color: ${colors.whatsapp};
-    box-shadow: 0 0 0 3px ${colors.whatsapp}20;
-  }
-  
-  &::placeholder {
-    color: rgba(128, 128, 128, 0.4);
-  }
-`;
-const WhatsAppTextarea = styled.textarea`
-  width: 100%;
-  padding: 14px 16px;
-  border: 2px solid rgba(128, 128, 128, 0.2);
-  border-radius: 12px;
-  font-size: 15px;
-  background: ${(p) => p.theme.colors.neutral0};
-  color: var(--colors-neutral800);
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-  resize: vertical;
-  min-height: 80px;
-  font-family: inherit;
-  
-  &:focus {
-    outline: none;
-    border-color: ${colors.whatsapp};
-    box-shadow: 0 0 0 3px ${colors.whatsapp}20;
-  }
-  
-  &::placeholder {
-    color: rgba(128, 128, 128, 0.4);
-  }
-`;
-const InputLabel = styled.label`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: ${colors.whatsappDark};
-  margin-bottom: 8px;
-`;
-const InputHint = styled.span`
-  font-size: 12px;
-  color: var(--colors-neutral500);
-  margin-top: 6px;
-  display: block;
-`;
-const PhoneSymbol = styled.span`
-  font-size: 16px;
-  font-weight: 700;
-`;
-const MessageSymbol = styled.span`
-  font-size: 16px;
-`;
-const UseCaseCard = styled(Box)`
-  background: linear-gradient(135deg, ${colors.whatsappLight}, rgba(2, 132, 199, 0.06));
-  border: 2px solid ${colors.whatsapp};
-  border-radius: 16px;
-  padding: 24px;
-  margin-bottom: 32px;
-`;
-const ButtonRow = styled(Flex)`
-  margin-top: 32px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(128, 128, 128, 0.2);
-`;
-const AlertBox = styled(Box)`
-  background: rgba(2, 132, 199, 0.06);
-  border: 1px solid rgba(2, 132, 199, 0.2);
-  border-radius: 12px;
-  padding: 16px 20px;
-  margin-top: 20px;
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-`;
-const AlertIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--colors-primary600, #0EA5E9);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-  flex-shrink: 0;
-`;
-const SuccessBox = styled(Box)`
-  background: rgba(22, 163, 74, 0.06);
-  border: 1px solid rgba(22, 163, 74, 0.2);
-  border-radius: 12px;
-  padding: 16px 20px;
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-`;
-const SuccessIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--colors-success600, #22C55E);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-const WhatsAppButton = styled(GradientButton)`
-  && {
-    background: linear-gradient(135deg, ${colors.whatsapp} 0%, ${colors.whatsappDark} 100%) !important;
-    
-    &:hover:not(:disabled) {
-      background: linear-gradient(135deg, ${colors.whatsappDark} 0%, ${colors.whatsapp} 100%) !important;
-    }
-  }
-`;
-const NotInstalledCard = styled(Box)`
-  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(220, 38, 38, 0.12));
-  border: 2px solid var(--colors-warning600, #F59E0B);
-  border-radius: 16px;
-  padding: 32px;
-  text-align: center;
-`;
-const WhatsAppPage = () => {
-  const { get, post } = useFetchClient();
-  const { toggleNotification } = useNotification();
-  const [currentStep, setCurrentStep] = useState(1);
-  const [loading, setLoading] = useState(true);
-  const [connecting, setConnecting] = useState(false);
-  const [isAvailable, setIsAvailable] = useState(false);
-  const [status, setStatus] = useState({
-    status: "disconnected",
-    qrCode: null,
-    isConnected: false,
-    session: null
-  });
-  const [testPhone, setTestPhone] = useState("");
-  const [testMessage, setTestMessage] = useState("");
-  const [sendingTest, setSendingTest] = useState(false);
-  const stepTitles = ["Check Installation", "Connect WhatsApp", "Scan QR Code", "Ready to Use"];
-  const checkAvailability = useCallback(async () => {
-    try {
-      const { data } = await get("/magic-mail/whatsapp/available");
-      setIsAvailable(data.data.available);
-      return data.data.available;
-    } catch (error) {
-      console.error("[MagicMail WhatsApp] Error checking availability:", error);
-      setIsAvailable(false);
-      return false;
-    }
-  }, [get]);
-  const fetchStatus = useCallback(async () => {
-    try {
-      const { data } = await get("/magic-mail/whatsapp/status");
-      setStatus(data.data);
-      if (data.data.isConnected) {
-        setCurrentStep(4);
-      } else if (data.data.qrCode) {
-        setCurrentStep(3);
-      } else if (isAvailable) {
-        setCurrentStep(2);
-      }
-      return data.data;
-    } catch (error) {
-      console.error("[MagicMail WhatsApp] Error fetching status:", error);
-      return null;
-    }
-  }, [get, isAvailable]);
-  useEffect(() => {
-    const init = async () => {
-      setLoading(true);
-      const available = await checkAvailability();
-      if (available) {
-        await fetchStatus();
-      }
-      setLoading(false);
-    };
-    init();
-  }, [checkAvailability, fetchStatus]);
-  useEffect(() => {
-    let pollInterval;
-    if (connecting || status.status === "connecting" || status.status === "qr_pending") {
-      pollInterval = setInterval(async () => {
-        const newStatus = await fetchStatus();
-        if (newStatus?.isConnected) {
-          setConnecting(false);
-          setCurrentStep(4);
-          toggleNotification({
-            type: "success",
-            message: "[SUCCESS] WhatsApp connected successfully!"
-          });
-        }
-      }, 2e3);
-    }
-    return () => {
-      if (pollInterval) clearInterval(pollInterval);
-    };
-  }, [connecting, status.status, fetchStatus, toggleNotification]);
-  const handleConnect = async () => {
-    setConnecting(true);
-    try {
-      const { data } = await post("/magic-mail/whatsapp/connect", {});
-      if (data.data.qrCode) {
-        setStatus((prev) => ({ ...prev, qrCode: data.data.qrCode, status: "qr_pending" }));
-        setCurrentStep(3);
-      } else if (data.data.status === "connected") {
-        setStatus((prev) => ({ ...prev, isConnected: true, status: "connected" }));
-        setCurrentStep(4);
-        toggleNotification({
-          type: "success",
-          message: "[SUCCESS] WhatsApp already connected!"
-        });
-      }
-    } catch (error) {
-      toggleNotification({
-        type: "danger",
-        message: "[ERROR] Failed to connect: " + (error.response?.data?.error?.message || error.message)
-      });
-      setConnecting(false);
-    }
-  };
-  const handleDisconnect = async () => {
-    try {
-      await post("/magic-mail/whatsapp/disconnect", {});
-      setStatus({
-        status: "disconnected",
-        qrCode: null,
-        isConnected: false,
-        session: null
-      });
-      setCurrentStep(2);
-      toggleNotification({
-        type: "success",
-        message: "[SUCCESS] WhatsApp disconnected"
-      });
-    } catch (error) {
-      toggleNotification({
-        type: "danger",
-        message: "[ERROR] Failed to disconnect"
-      });
-    }
-  };
-  const handleSendTest = async () => {
-    if (!testPhone) {
-      toggleNotification({
-        type: "warning",
-        message: "Please enter a phone number"
-      });
-      return;
-    }
-    setSendingTest(true);
-    try {
-      const { data } = await post("/magic-mail/whatsapp/send-test", {
-        phoneNumber: testPhone,
-        message: testMessage || void 0
-      });
-      if (data.success) {
-        toggleNotification({
-          type: "success",
-          message: "[SUCCESS] Test message sent!"
-        });
-        setTestPhone("");
-        setTestMessage("");
-      } else {
-        toggleNotification({
-          type: "danger",
-          message: "[ERROR] " + (data.data.error || "Failed to send message")
-        });
-      }
-    } catch (error) {
-      toggleNotification({
-        type: "danger",
-        message: "[ERROR] " + (error.response?.data?.error?.message || error.message)
-      });
-    } finally {
-      setSendingTest(false);
-    }
-  };
-  const renderStatusBadge = () => {
-    const statusText = {
-      connected: "Connected",
-      connecting: "Connecting...",
-      qr_pending: "Waiting for QR Scan",
-      disconnected: "Disconnected"
-    };
-    return /* @__PURE__ */ jsxs(StatusBadge, { $status: status.status, children: [
-      status.status === "connecting" && /* @__PURE__ */ jsx(SpinningLoader, {}),
-      status.status === "connected" && /* @__PURE__ */ jsx(Check, {}),
-      statusText[status.status] || "Unknown"
-    ] });
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsx(PageContainer, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
-  }
-  return /* @__PURE__ */ jsxs(PageContainer, { children: [
-    /* @__PURE__ */ jsxs(HeaderSection, { children: [
-      /* @__PURE__ */ jsx(WhatsAppLogo, { children: /* @__PURE__ */ jsx(PhoneIcon, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "40", height: "40", children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }) }),
-      /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "WhatsApp Integration" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", style: { display: "block" }, children: "Send messages via WhatsApp - completely free!" }),
-      /* @__PURE__ */ jsx(Box, { marginTop: 3, children: renderStatusBadge() })
-    ] }),
-    /* @__PURE__ */ jsx(StepperContainer, { children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsxs(
-      StepWrapper,
-      {
-        $completed: currentStep > step,
-        children: [
-          /* @__PURE__ */ jsx(
-            StepDot,
-            {
-              $active: currentStep === step,
-              $completed: currentStep > step,
-              onClick: () => currentStep > step && setCurrentStep(step),
-              children: currentStep > step ? /* @__PURE__ */ jsx(Check, {}) : step
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            StepLabel,
-            {
-              $active: currentStep === step,
-              $completed: currentStep > step,
-              children: stepTitles[step - 1]
-            }
-          )
-        ]
-      },
-      step
-    )) }),
-    /* @__PURE__ */ jsxs(UseCaseCard, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "12px" }, children: "What can you do with WhatsApp?" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", style: { display: "block", marginBottom: "16px" }, children: "WhatsApp integration provides free messaging as an alternative or backup to email delivery." }),
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
-        /* @__PURE__ */ jsxs(Box, { padding: 3, background: "neutral0", hasRadius: true, style: { border: `1px solid ${colors.border}` }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "4px" }, children: "1. FALLBACK-KANAL" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { display: "block" }, children: "Wenn alle Email-Accounts fehlschlagen, wird die Nachricht automatisch via WhatsApp zugestellt." })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { padding: 3, background: "neutral0", hasRadius: true, style: { border: `1px solid ${colors.border}` }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "4px" }, children: "2. ADMIN-BENACHRICHTIGUNGEN" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { display: "block" }, children: "Bei Email-Bounces, Quota-Limits oder Account-Fehlern wird der Admin via WhatsApp benachrichtigt." })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { padding: 3, background: "neutral0", hasRadius: true, style: { border: `1px solid ${colors.border}` }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "4px" }, children: "3. ROUTING-INTEGRATION" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { display: "block" }, children: "In Routing-Regeln kann WhatsApp als Fallback-Kanal definiert werden (Routing Rules Tab)." })
-        ] })
-      ] })
-    ] }),
-    currentStep === 1 && /* @__PURE__ */ jsxs(ContentCard, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Check Installation" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "First, we need to verify that the required dependencies are installed." }),
-      isAvailable ? /* @__PURE__ */ jsxs(SuccessBox, { children: [
-        /* @__PURE__ */ jsx(SuccessIcon, { children: /* @__PURE__ */ jsx(Check, { style: { width: 14, height: 14 } }) }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: "var(--colors-success600, #15803D)" }, children: "Dependencies Installed" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." })
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(NotInstalledCard, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "12px", color: colors.danger }, children: "[WARNING] Dependencies Not Installed" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "16px" }, children: "The WhatsApp integration requires additional dependencies. Please install them:" }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            padding: 4,
-            background: "neutral0",
-            hasRadius: true,
-            style: {
-              fontFamily: "monospace",
-              fontSize: "14px",
-              border: `1px solid ${colors.border}`,
-              marginBottom: "16px"
-            },
-            children: "npm install baileys pino qrcode"
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "After installing, restart your Strapi server and refresh this page." })
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "flex-end", gap: 3, children: [
-        /* @__PURE__ */ jsx(
-          SecondaryButton,
-          {
-            onClick: () => {
-              checkAvailability();
-            },
-            startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
-            children: "Refresh"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          GradientButton,
-          {
-            onClick: () => setCurrentStep(2),
-            disabled: !isAvailable,
-            endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
-            children: "Continue"
-          }
-        )
-      ] })
-    ] }),
-    currentStep === 2 && /* @__PURE__ */ jsxs(ContentCard, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
-      /* @__PURE__ */ jsx(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." }),
-      /* @__PURE__ */ jsxs(InfoBox, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "How it works" }),
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "2. Open WhatsApp on your phone" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "3. Go to Settings - Linked Devices - Link a Device" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "4. Scan the QR code with your phone" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(AlertBox, { children: [
-        /* @__PURE__ */ jsx(AlertIcon, { children: "i" }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px" }, children: "Session Persistence" }),
-          /* @__PURE__ */ jsx(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." })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(
-          TertiaryButton,
-          {
-            onClick: () => setCurrentStep(1),
-            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
-            children: "Back"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          WhatsAppButton,
-          {
-            onClick: handleConnect,
-            loading: connecting,
-            startIcon: /* @__PURE__ */ jsx(Play, {}),
-            children: "Connect WhatsApp"
-          }
-        )
-      ] })
-    ] }),
-    currentStep === 3 && /* @__PURE__ */ jsxs(ContentCard, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Scan QR Code" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Open WhatsApp on your phone and scan this QR code to connect." }),
-      /* @__PURE__ */ jsx(QRCodeContainer, { children: status.qrCode ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(QRImage, { src: status.qrCode, alt: "WhatsApp QR Code" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "16px" }, children: 'QR code expires in 60 seconds. If it expires, click "Refresh QR".' })
-      ] }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, children: [
-        /* @__PURE__ */ jsx(SpinningLoader, { style: { width: "40px", height: "40px" } }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "Generating QR code..." })
-      ] }) }),
-      /* @__PURE__ */ jsxs(InfoBox, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "Instructions" }),
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "2. Tap Menu or Settings" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: '3. Select "Linked Devices"' }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: '4. Tap "Link a Device"' }),
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "5. Point your phone camera at this QR code" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(
-          TertiaryButton,
-          {
-            onClick: () => setCurrentStep(2),
-            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
-            children: "Back"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SecondaryButton,
-          {
-            onClick: handleConnect,
-            startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
-            children: "Refresh QR"
-          }
-        )
-      ] })
-    ] }),
-    currentStep === 4 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(ConnectedCard, { children: [
-        /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsx(Check, { style: { width: "48px", height: "48px", color: colors.success } }) }),
-        /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "WhatsApp Connected" }),
-        status.session && /* @__PURE__ */ jsxs(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block" }, children: [
-          "Connected as: ",
-          status.session.phoneNumber,
-          " ",
-          status.session.name && `(${status.session.name})`
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(ContentCard, { style: { marginTop: "24px" }, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Send Test Message" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Test your WhatsApp connection by sending a message." }),
-        /* @__PURE__ */ jsxs(TestSection, { children: [
-          /* @__PURE__ */ jsxs(Box, { style: { marginBottom: "20px" }, children: [
-            /* @__PURE__ */ jsxs(InputLabel, { children: [
-              /* @__PURE__ */ jsx(PhoneSymbol, { children: "+" }),
-              "Phone Number"
-            ] }),
-            /* @__PURE__ */ jsx(
-              WhatsAppInput,
-              {
-                placeholder: "49123456789",
-                value: testPhone,
-                onChange: (e) => setTestPhone(e.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx(InputHint, { children: "Enter with country code, without + (e.g., 49 for Germany, 1 for USA)" })
-          ] }),
-          /* @__PURE__ */ jsxs(Box, { style: { marginBottom: "24px" }, children: [
-            /* @__PURE__ */ jsxs(InputLabel, { children: [
-              /* @__PURE__ */ jsx(MessageSymbol, { children: "@" }),
-              "Message (optional)"
-            ] }),
-            /* @__PURE__ */ jsx(
-              WhatsAppTextarea,
-              {
-                placeholder: "Type your message here... or leave empty for default test message",
-                value: testMessage,
-                onChange: (e) => setTestMessage(e.target.value),
-                rows: 3
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            WhatsAppButton,
-            {
-              onClick: handleSendTest,
-              loading: sendingTest,
-              disabled: !testPhone,
-              style: { width: "100%" },
-              children: "Send Test Message"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(Divider, { style: { margin: "24px 0" } }),
-        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Using WhatsApp in Your Code" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "16px" }, children: "Use the WhatsApp service programmatically in your Strapi code." }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            padding: 4,
-            background: "neutral100",
-            hasRadius: true,
-            style: {
-              fontFamily: "monospace",
-              fontSize: "13px",
-              lineHeight: "1.6",
-              overflow: "auto"
-            },
-            children: /* @__PURE__ */ jsx("pre", { style: { margin: 0 }, children: `// Send a message via WhatsApp
-const whatsapp = strapi.plugin('magic-mail').service('whatsapp');
-
-// Send simple message
-await whatsapp.sendMessage('49123456789', 'Hello from MagicMail!');
-
-// Send template message
-await whatsapp.sendTemplateMessage('49123456789', 'welcome', {
-  name: 'John',
-  company: 'ACME Corp',
-});` })
-          }
-        ),
-        /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            DangerButton,
-            {
-              onClick: handleDisconnect,
-              startIcon: /* @__PURE__ */ jsx(Cross, {}),
-              children: "Disconnect WhatsApp"
-            }
-          ),
-          /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", style: { padding: "8px 16px", fontSize: "13px" }, children: "FREE - No API costs!" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
 const pluginId = "magic-mail";
 const pluginPermissions = {
   access: [{ action: `plugin::${pluginId}.access`, subject: null }]
@@ -7948,22 +7115,18 @@ const App = () => {
     if (location.pathname.includes("/analytics")) return "analytics";
     if (location.pathname.includes("/routing")) return "routing";
     if (location.pathname.includes("/designer") && !isEditorRoute) return "templates";
-    if (location.pathname.includes("/whatsapp")) return "whatsapp";
     return "accounts";
   };
-  const [activeTab, setActiveTab] = useState(getActiveTab());
   const handleTabChange = (tab) => {
-    setActiveTab(tab);
     if (tab === "accounts") navigate("/plugins/magic-mail");
     if (tab === "routing") navigate("/plugins/magic-mail/routing");
     if (tab === "templates") navigate("/plugins/magic-mail/designer");
     if (tab === "analytics") navigate("/plugins/magic-mail/analytics");
-    if (tab === "whatsapp") navigate("/plugins/magic-mail/whatsapp");
   };
   if (isEditorRoute) {
     return /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.access, children: /* @__PURE__ */ jsx(EditorPage, {}) });
   }
-  return /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.access, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Tabs.Root, { value: activeTab, onValueChange: handleTabChange, children: [
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.access, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Tabs.Root, { value: getActiveTab(), onValueChange: handleTabChange, children: [
     /* @__PURE__ */ jsxs(Tabs.List, { children: [
       /* @__PURE__ */ jsx(Tabs.Trigger, { value: "accounts", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
         /* @__PURE__ */ jsx(EnvelopeIcon, { style: { width: 16, height: 16 } }),
@@ -7980,17 +7143,12 @@ const App = () => {
       /* @__PURE__ */ jsx(Tabs.Trigger, { value: "analytics", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
         /* @__PURE__ */ jsx(ChartBarIcon, { style: { width: 16, height: 16 } }),
         "Analytics"
-      ] }) }),
-      /* @__PURE__ */ jsx(Tabs.Trigger, { value: "whatsapp", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-        /* @__PURE__ */ jsx(ChatBubbleLeftIcon, { style: { width: 16, height: 16 } }),
-        "WhatsApp"
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "accounts", children: /* @__PURE__ */ jsx(HomePage, {}) }),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "routing", children: /* @__PURE__ */ jsx(RoutingRulesPage, {}) }),
     /* @__PURE__ */ jsx(Tabs.Content, { value: "templates", children: /* @__PURE__ */ jsx(TemplateList, {}) }),
-    /* @__PURE__ */ jsx(Tabs.Content, { value: "analytics", children: /* @__PURE__ */ jsx(Analytics, {}) }),
-    /* @__PURE__ */ jsx(Tabs.Content, { value: "whatsapp", children: /* @__PURE__ */ jsx(WhatsAppPage, {}) })
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "analytics", children: /* @__PURE__ */ jsx(Analytics, {}) })
   ] }) }) });
 };
 export {