strapi-plugin-magic-mail 2.2.6 → 2.3.1

package/dist/_chunks/{App-BZaHrE0R.mjs → App-DxiMl-Zd.mjs}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState } from "react";
+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, Toggle, Badge, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, Tabs } from "@strapi/design-system";
-import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, BoltIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, KeyIcon } from "@heroicons/react/24/outline";
+import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, BoltIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, KeyIcon, ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
-import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight } from "@strapi/icons";
+import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight, ArrowClockwise, Play, Cross } from "@strapi/icons";
 import * as ReactEmailEditor from "react-email-editor";
 const useAuthRefresh = () => {
   const { get } = useFetchClient();
@@ -85,7 +85,7 @@ const theme$3 = {
     xl: "16px"
   }
 };
-const fadeIn$5 = keyframes`
+const fadeIn$6 = keyframes`
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -95,7 +95,7 @@ const fadeIn$5 = keyframes`
     transform: translateY(0);
   }
 `;
-const pulse$2 = keyframes`
+const pulse$3 = keyframes`
   0%, 100% {
     transform: scale(1);
   }
@@ -113,7 +113,7 @@ const slideIn = keyframes`
     opacity: 1;
   }
 `;
-const colors = {
+const colors$1 = {
   primary: "#4945ff",
   // Strapi Primary Blue
   primaryLight: "#f0f0ff",
@@ -133,7 +133,7 @@ const StepHeader = styled(Box)`
   padding-bottom: 24px;
   margin-bottom: 32px;
   position: relative;
-  animation: ${fadeIn$5} 0.4s ease;
+  animation: ${fadeIn$6} 0.4s ease;
   
   &::after {
     content: '';
@@ -142,11 +142,11 @@ const StepHeader = styled(Box)`
     left: -24px;
     right: -24px;
     height: 1px;
-    background: linear-gradient(90deg, transparent, ${colors.border}, transparent);
+    background: linear-gradient(90deg, transparent, ${colors$1.border}, transparent);
   }
 `;
 const StepTitle = styled(Typography)`
-  color: ${colors.text};
+  color: ${colors$1.text};
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 8px;
@@ -155,11 +155,11 @@ const StepTitle = styled(Typography)`
   gap: 12px;
 `;
 const StepSubtitle = styled(Typography)`
-  color: ${colors.textLight};
+  color: ${colors$1.textLight};
   font-size: 14px;
   line-height: 1.5;
 `;
-const StepperContainer = styled(Box)`
+const StepperContainer$1 = styled(Box)`
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -169,7 +169,7 @@ const StepperContainer = styled(Box)`
   position: relative;
   padding: 0 40px;
 `;
-const StepWrapper = styled.div`
+const StepWrapper$1 = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -183,18 +183,18 @@ const StepWrapper = styled.div`
     left: 50%;
     width: 100%;
     height: 3px;
-    background: ${(props) => props.$completed ? colors.success : colors.neutralLight};
+    background: ${(props) => props.$completed ? colors$1.success : colors$1.neutralLight};
     transition: all 0.4s ease;
     z-index: 0;
   }
 `;
-const StepDot = styled.div`
+const StepDot$1 = styled.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : colors.white};
-  color: ${(props) => props.$active || props.$completed ? colors.white : colors.textLight};
-  border: 4px solid ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : colors.border};
+  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.white};
+  color: ${(props) => props.$active || props.$completed ? colors$1.white : colors$1.textLight};
+  border: 4px solid ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.border};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -204,20 +204,20 @@ const StepDot = styled.div`
   position: relative;
   z-index: 1;
   cursor: ${(props) => props.$completed ? "pointer" : "default"};
-  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)"};
+  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)"};
   
   ${(props) => props.$active && css`
-    animation: ${pulse$2} 2s infinite;
+    animation: ${pulse$3} 2s infinite;
   `}
   
   &:hover {
     transform: ${(props) => props.$completed ? "scale(1.1)" : props.$active ? "scale(1.05)" : "scale(1)"};
   }
 `;
-const StepLabel = styled(Typography)`
+const StepLabel$1 = styled(Typography)`
   margin-top: 12px;
   font-size: 13px;
-  color: ${(props) => props.$active ? colors.primary : props.$completed ? colors.success : colors.textLight};
+  color: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.textLight};
   white-space: nowrap;
   font-weight: ${(props) => props.$active ? 600 : 500};
   text-align: center;
@@ -234,8 +234,8 @@ const ProvidersGrid = styled(Box)`
   margin-right: auto;
 `;
 const ProviderCard = styled(Box)`
-  background: ${(props) => props.$selected ? colors.successLight : colors.white};
-  border: 2px solid ${(props) => props.$selected ? colors.success : colors.border};
+  background: ${(props) => props.$selected ? colors$1.successLight : colors$1.white};
+  border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
   border-radius: 12px;
   padding: 24px;
   cursor: pointer;
@@ -266,7 +266,7 @@ const ProviderCard = styled(Box)`
   &:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(73, 69, 255, 0.12);
-    border-color: ${(props) => props.$selected ? colors.success : colors.primary};
+    border-color: ${(props) => props.$selected ? colors$1.success : colors$1.primary};
     
     &::before {
       opacity: 1;
@@ -281,7 +281,7 @@ const ProviderCard = styled(Box)`
       right: 8px;
       width: 24px;
       height: 24px;
-      background: ${colors.success};
+      background: ${colors$1.success};
       color: white;
       border-radius: 50%;
       display: flex;
@@ -296,33 +296,33 @@ const ProviderIcon = styled.div`
   width: 56px;
   height: 56px;
   border-radius: ${(props) => props.$round ? "50%" : "12px"};
-  background: ${(props) => props.$bgColor || colors.primaryLight};
+  background: ${(props) => props.$bgColor || colors$1.primaryLight};
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: ${(props) => props.$fontSize || "24px"};
   font-weight: bold;
-  color: ${(props) => props.$color || colors.primary};
+  color: ${(props) => props.$color || colors$1.primary};
   box-shadow: 0 4px 12px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.15)"};
 `;
 const ProviderName = styled(Typography)`
   font-weight: 600;
   font-size: 15px;
-  color: ${colors.text};
+  color: ${colors$1.text};
   margin: 0;
 `;
 styled(Typography)`
   font-size: 12px;
-  color: ${colors.textLight};
+  color: ${colors$1.textLight};
   margin: 0;
 `;
 const InfoAlert = styled(Alert)`
-  background: ${colors.primaryLight};
-  border: 1px solid ${colors.primary}33;
-  animation: ${fadeIn$5} 0.4s ease;
+  background: ${colors$1.primaryLight};
+  border: 1px solid ${colors$1.primary}33;
+  animation: ${fadeIn$6} 0.4s ease;
   
   svg {
-    color: ${colors.primary};
+    color: ${colors$1.primary};
   }
 `;
 const FormSection = styled(Box)`
@@ -342,7 +342,7 @@ const FullWidthField = styled(Box)`
   }
 `;
 const SectionTitle = styled(Typography)`
-  color: ${colors.text};
+  color: ${colors$1.text};
   font-weight: 600;
   font-size: 16px;
   margin-bottom: 16px;
@@ -351,14 +351,14 @@ const SectionTitle = styled(Typography)`
   gap: 8px;
 `;
 styled(Box)`
-  background: linear-gradient(135deg, ${colors.primaryLight}, ${colors.successLight});
-  border: 2px solid ${colors.primary}33;
+  background: linear-gradient(135deg, ${colors$1.primaryLight}, ${colors$1.successLight});
+  border: 2px solid ${colors$1.primary}33;
   border-radius: 12px;
   padding: 20px;
   transition: all 0.3s;
   
   &:hover {
-    border-color: ${colors.primary}66;
+    border-color: ${colors$1.primary}66;
     box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
   }
 `;
@@ -858,13 +858,13 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
           currentStep === 4 && "Set rate limits and priority for this account"
         ] })
       ] }),
-      /* @__PURE__ */ jsx(StepperContainer, { children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsxs(
-        StepWrapper,
+      /* @__PURE__ */ jsx(StepperContainer$1, { children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsxs(
+        StepWrapper$1,
         {
           $completed: currentStep > step,
           children: [
             /* @__PURE__ */ jsx(
-              StepDot,
+              StepDot$1,
               {
                 $active: currentStep === step,
                 $completed: currentStep > step,
@@ -873,7 +873,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
               }
             ),
             /* @__PURE__ */ jsx(
-              StepLabel,
+              StepLabel$1,
               {
                 $active: currentStep === step,
                 $completed: currentStep > step,
@@ -1205,7 +1205,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors.border}`,
+                  border: `1px solid ${colors$1.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1222,7 +1222,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.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$1.primary, textDecoration: "underline" }, children: "console.cloud.google.com" })
                     ] }),
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1248,7 +1248,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            border: `1px solid ${colors.border}`
+                            border: `1px solid ${colors$1.border}`
                           },
                           children: [
                             window.location.origin,
@@ -1349,7 +1349,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors.border}`,
+                  border: `1px solid ${colors$1.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1366,7 +1366,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.primary, textDecoration: "underline" }, children: "portal.azure.com" })
+                      /* @__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__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1400,8 +1400,8 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            color: colors.textSecondary,
-                            border: `1px solid ${colors.border}`
+                            color: colors$1.textSecondary,
+                            border: `1px solid ${colors$1.border}`
                           },
                           children: `${window.location.origin}/magic-mail/oauth/microsoft/callback`
                         }
@@ -1526,7 +1526,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                 background: "neutral100",
                 hasRadius: true,
                 style: {
-                  border: `1px solid ${colors.border}`,
+                  border: `1px solid ${colors$1.border}`,
                   borderRadius: "8px"
                 },
                 children: [
@@ -1543,7 +1543,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.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$1.primary, textDecoration: "underline" }, children: "developer.yahoo.com/apps" })
                     ] }),
                     /* @__PURE__ */ jsxs(Box, { children: [
                       /* @__PURE__ */ jsx("strong", { children: "2." }),
@@ -1569,8 +1569,8 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
                             fontFamily: "monospace",
                             fontSize: "13px",
                             wordBreak: "break-all",
-                            color: colors.textSecondary,
-                            border: `1px solid ${colors.border}`
+                            color: colors$1.textSecondary,
+                            border: `1px solid ${colors$1.border}`
                           },
                           children: `${window.location.origin}/magic-mail/oauth/yahoo/callback`
                         }
@@ -1777,7 +1777,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
             background: formData.isPrimary ? "#FEF3C7" : "neutral100",
             hasRadius: true,
             style: {
-              border: formData.isPrimary ? `2px solid #F59E0B` : `1px solid ${colors.border}`,
+              border: formData.isPrimary ? `2px solid #F59E0B` : `1px solid ${colors$1.border}`,
               borderRadius: "8px",
               transition: "all 0.2s ease"
             },
@@ -1835,7 +1835,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
     ] }) })
   ] }) });
 };
-const fadeIn$4 = keyframes`
+const fadeIn$5 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -1847,7 +1847,7 @@ const float$3 = keyframes`
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-5px); }
 `;
-const pulse$1 = keyframes`
+const pulse$2 = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 `;
@@ -1863,7 +1863,7 @@ const breakpoints$3 = {
   mobile: "768px"
 };
 const Container$4 = styled(Box)`
-  ${css`animation: ${fadeIn$4} ${theme$3.transitions.slow};`}
+  ${css`animation: ${fadeIn$5} ${theme$3.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -1981,7 +1981,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$5} ${theme$3.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$3.shadows.sm};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
@@ -2107,7 +2107,7 @@ const OnlineBadge$1 = styled.div`
   background: ${(props) => props.$active ? theme$3.colors.success[500] : props.theme.colors.neutral400};
   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$2 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$3 = styled(Table)`
   thead {
@@ -2798,6 +2798,10 @@ const theme$2 = {
     danger: {
       100: "#FEE2E2",
       600: "#DC2626"
+    },
+    neutral: {
+      100: "#F3F4F6",
+      200: "#E5E7EB"
     }
   },
   shadows: {
@@ -2823,7 +2827,7 @@ const theme$2 = {
     xl: "16px"
   }
 };
-const fadeIn$3 = keyframes`
+const fadeIn$4 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -2835,7 +2839,7 @@ const float$2 = keyframes`
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-5px); }
 `;
-const pulse = keyframes`
+const pulse$1 = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 `;
@@ -2851,7 +2855,7 @@ const breakpoints$2 = {
   mobile: "768px"
 };
 const Container$3 = styled(Box)`
-  ${css`animation: ${fadeIn$3} ${theme$2.transitions.slow};`}
+  ${css`animation: ${fadeIn$4} ${theme$2.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -2969,7 +2973,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$4} ${theme$2.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$2.shadows.sm};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
@@ -3095,7 +3099,7 @@ const OnlineBadge = styled.div`
   background: ${(props) => props.$active ? theme$2.colors.success[500] : props.theme.colors.neutral400};
   display: inline-block;
   margin-right: 8px;
-  ${css`animation: ${(props) => props.$active ? pulse : "none"} 2s ease-in-out infinite;`}
+  ${css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$2 = styled(Table)`
   thead {
@@ -3394,7 +3398,8 @@ 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,
@@ -3461,7 +3466,8 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
     matchType: rule?.matchType || "emailType",
     matchValue: rule?.matchValue || "",
     accountName: rule?.accountName || "",
-    fallbackAccountName: rule?.fallbackAccountName || ""
+    fallbackAccountName: rule?.fallbackAccountName || "",
+    whatsappFallback: rule?.whatsappFallback || false
   });
   const handleChange = (field, value) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
@@ -3616,6 +3622,36 @@ 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: formData.whatsappFallback ? theme$2.colors.success[100] : theme$2.colors.neutral[100],
+          hasRadius: true,
+          style: {
+            width: "100%",
+            border: formData.whatsappFallback ? `2px solid ${theme$2.colors.success[600]}` : `1px solid ${theme$2.colors.neutral[200]}`,
+            borderRadius: theme$2.borderRadius.md,
+            transition: "all 0.2s ease"
+          },
+          children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              Toggle,
+              {
+                checked: formData.whatsappFallback,
+                onChange: () => handleChange("whatsappFallback", !formData.whatsappFallback)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
+                formData.whatsappFallback && /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" })
+              ] }),
+              /* @__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__ */ jsxs(Field.Root, { style: { width: "100%" }, children: [
         /* @__PURE__ */ jsx(Field.Label, { children: "Rule Priority" }),
         /* @__PURE__ */ jsx(
@@ -3819,7 +3855,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$3 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -3972,7 +4008,7 @@ const CopyButton = styled(Button)`
     height: 14px;
   }
 `;
-const InfoBox = styled(Box)`
+const InfoBox$1 = styled(Box)`
   background: linear-gradient(135deg, ${theme$1.colors.primary[50]}, ${theme$1.colors.primary[100]});
   border-left: 4px solid ${theme$1.colors.primary[500]};
   border-radius: 8px;
@@ -4019,7 +4055,7 @@ const breakpoints$1 = {
   tablet: "1024px"
 };
 const Container$2 = styled(Box)`
-  ${css`animation: ${fadeIn$2} ${theme$1.transitions.slow};`}
+  ${css`animation: ${fadeIn$3} ${theme$1.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -4132,7 +4168,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$3} ${theme$1.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$1.shadows.sm};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
@@ -5212,7 +5248,7 @@ const TemplateList = () => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx(InfoBox, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(InfoBox$1, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
             /* @__PURE__ */ jsx("strong", { children: "Template ID:" }),
             " #",
@@ -6512,7 +6548,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$2 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 `;
@@ -6528,7 +6564,7 @@ const breakpoints = {
   mobile: "768px"
 };
 const Container = styled(Box)`
-  ${css`animation: ${fadeIn$1} ${theme.transitions.slow};`}
+  ${css`animation: ${fadeIn$2} ${theme.transitions.slow};`}
   min-height: 100vh;
   max-width: 1440px;
   margin: 0 auto;
@@ -6641,7 +6677,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$2} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
@@ -7077,6 +7113,679 @@ const Analytics = () => {
     ] }) })
   ] });
 };
+const fadeIn$1 = 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: "#DCF8C6",
+  primary: "#4945ff",
+  primaryLight: "#f0f0ff",
+  success: "#5cb176",
+  successLight: "#eafaf1",
+  danger: "#d02b20",
+  neutral: "#8e8ea9",
+  neutralLight: "#f6f6f9",
+  white: "#ffffff",
+  border: "#dcdce4",
+  textLight: "#666687"
+};
+const PageContainer = styled(Box)`
+  padding: 40px;
+  max-width: 900px;
+  margin: 0 auto;
+  animation: ${fadeIn$1} 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 : colors.white};
+  color: ${(props) => props.$active || props.$completed ? colors.white : 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: ${colors.white};
+  border: 1px solid ${colors.border};
+  border-radius: 16px;
+  padding: 32px;
+  margin-bottom: 24px;
+  animation: ${fadeIn$1} 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: ${colors.primaryLight};
+  border: 1px solid ${colors.primary}33;
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+`;
+const TestSection = styled(Box)`
+  background: ${colors.neutralLight};
+  border-radius: 12px;
+  padding: 24px;
+  margin-top: 24px;
+`;
+const UseCaseCard = styled(Box)`
+  background: linear-gradient(135deg, ${colors.primaryLight}, ${colors.whatsappLight});
+  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 ${colors.border};
+`;
+const NotInstalledCard = styled(Box)`
+  background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
+  border: 2px solid #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__ */ jsx(Alert, { variant: "success", title: "[SUCCESS] Dependencies Installed", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { display: "block" }, 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 @whiskeysockets/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", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => {
+              checkAvailability();
+            },
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
+            style: { marginRight: "12px" },
+            children: "Refresh"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            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: "12px" }, children: "How it works" }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "2. Open WhatsApp on your phone" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "3. Go to Settings - Linked Devices - Link a Device" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "4. Scan the QR code with your phone" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Alert, { variant: "default", title: "Session Persistence", style: { marginTop: "16px" }, children: /* @__PURE__ */ jsx(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." }) }),
+      /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setCurrentStep(1),
+            variant: "tertiary",
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleConnect,
+            loading: connecting,
+            style: { background: colors.whatsapp },
+            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(Alert, { variant: "default", title: "Instructions", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "1. Open WhatsApp on your phone" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "2. Tap Menu or Settings" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: '3. Select "Linked Devices"' }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: '4. Tap "Link a Device"' }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "5. Point your phone camera at this QR code" })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonRow, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setCurrentStep(2),
+            variant: "tertiary",
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleConnect,
+            variant: "secondary",
+            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__ */ jsx(TestSection, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Phone Number" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: "49123456789 (with country code, no +)",
+                value: testPhone,
+                onChange: (e) => setTestPhone(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Hint, { children: "Enter phone number with country code (e.g., 49 for Germany)" })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Message (optional)" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: "Leave empty for default test message",
+                value: testMessage,
+                onChange: (e) => setTestMessage(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSendTest,
+              loading: sendingTest,
+              style: { background: colors.whatsapp },
+              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", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleDisconnect,
+              variant: "danger",
+              startIcon: /* @__PURE__ */ jsx(Cross, {}),
+              children: "Disconnect WhatsApp"
+            }
+          ),
+          /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", children: "FREE - No API costs!" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
 const fadeIn = keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -7500,6 +8209,7 @@ 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());
@@ -7509,6 +8219,7 @@ const App = () => {
     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(LicenseGuard, { children: /* @__PURE__ */ jsx(EditorPage, {}) });
@@ -7530,12 +8241,17 @@ const App = () => {
       hasAnalytics && /* @__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, {}) }),
     hasEmailDesigner && /* @__PURE__ */ jsx(Tabs.Content, { value: "templates", children: /* @__PURE__ */ jsx(TemplateList, {}) }),
-    hasAnalytics && /* @__PURE__ */ jsx(Tabs.Content, { value: "analytics", children: /* @__PURE__ */ jsx(Analytics, {}) })
+    hasAnalytics && /* @__PURE__ */ jsx(Tabs.Content, { value: "analytics", children: /* @__PURE__ */ jsx(Analytics, {}) }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "whatsapp", children: /* @__PURE__ */ jsx(WhatsAppPage, {}) })
   ] }) }) });
 };
 export {