From c967f2846099ee248ee91a15d07a2b707115f39d Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Mon, 16 Dec 2024 19:37:50 +0530
Subject: [PATCH] feat: add CustomAlert component and integrate warning message
 in SetupYourAgent

---
 frontend/components/Alert/index.tsx                | 11 +++++++++--
 .../SetupPage/SetupYourAgent/SetupYourAgent.tsx    | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Alert/index.tsx b/frontend/components/Alert/index.tsx
index 5a0222108..0c3c90b8c 100644
--- a/frontend/components/Alert/index.tsx
+++ b/frontend/components/Alert/index.tsx
@@ -14,14 +14,21 @@ const icons = {
   error: <ExclamationCircleOutlined />,
 };
 
+type CustomAlertProps = {
+  type: AlertType;
+  fullWidth?: boolean;
+  className?: string;
+} & Omit<AlertProps, 'type'>;
+
 export const CustomAlert = ({
   type,
   fullWidth,
+  className,
   ...rest
-}: { type: AlertType; fullWidth?: boolean } & Omit<AlertProps, 'type'>) => (
+}: CustomAlertProps) => (
   <AlertAntd
     type={type === 'primary' ? undefined : type}
-    className={`custom-alert custom-alert--${type} ${fullWidth ? 'custom-alert--full-width' : ''}`}
+    className={`custom-alert custom-alert--${type} ${fullWidth ? 'custom-alert--full-width' : ''} ${className}`}
     icon={rest.showIcon ? icons[type] : undefined}
     {...rest}
   />
diff --git a/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx b/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx
index dee677926..54121e412 100644
--- a/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx
+++ b/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx
@@ -63,6 +63,20 @@ const XAccountCredentials = () => (
       and enter the login details. This enables your agent to view X and
       interact with other agents.
     </Text>
+    <CustomAlert
+      type="warning"
+      showIcon
+      message={
+        <Flex justify="space-between" gap={4} vertical>
+          <Text>
+            Make sure to set the account as `Automated`. When logged in on X, go
+            to Settings &gt; Your account &gt; Account information &gt;
+            Automation.
+          </Text>
+        </Flex>
+      }
+      className="mb-16"
+    />
   </Flex>
 );