feat: Implement agent-user connection request system with a new service and dynamic profile card buttons.

2026-02-02 09:59:08 +05:30
parent edfbf4a51c
commit b5106945dc
10 changed files with 1018 additions and 151 deletions
--- a/src/components/modals/ConnectRequestModal.tsx
+++ b/src/components/modals/ConnectRequestModal.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import { useState } from 'react';
+import { connectionRequestsService, ConnectionStatus } from '@/services/connection-requests.service';
+
+interface ConnectRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  agentProfileId: string;
+  agentName: string;
+  existingStatus?: ConnectionStatus | null;
+  onSuccess?: () => void;
+}
+
+export function ConnectRequestModal({
+  isOpen,
+  onClose,
+  agentProfileId,
+  agentName,
+  existingStatus,
+  onSuccess,
+}: ConnectRequestModalProps) {
+  const [message, setMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await connectionRequestsService.createRequest({
+        agentProfileId,
+        message: message.trim() || undefined,
+      });
+      setSuccess(true);
+      setMessage('');
+      onSuccess?.();
+      // Auto close after 2 seconds
+      setTimeout(() => {
+        onClose();
+        setSuccess(false);
+      }, 2000);
+    } catch (err: unknown) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+            'Failed to send connection request';
+      setError(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    setMessage('');
+    setError(null);
+    setSuccess(false);
+    onClose();
+  };
+
+  // If already connected or pending, show status
+  if (existingStatus === 'PENDING') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+        <div className="relative bg-white rounded-[20px] p-6 w-full max-w-md mx-4 shadow-xl">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg className="w-8 h-8 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-bold text-[#00293D] mb-2">Request Pending</h3>
+            <p className="text-sm text-[#00293D]/70 mb-4">
+              Your connection request to {agentName} is pending. Please wait for their response.
+            </p>
+            <button
+              onClick={handleClose}
+              className="px-6 py-2 bg-[#00293D] rounded-full text-sm font-semibold text-white hover:bg-[#00293D]/90 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (existingStatus === 'ACCEPTED') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+        <div className="relative bg-white rounded-[20px] p-6 w-full max-w-md mx-4 shadow-xl">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg className="w-8 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-bold text-[#00293D] mb-2">Already Connected</h3>
+            <p className="text-sm text-[#00293D]/70 mb-4">
+              You are already connected with {agentName}.
+            </p>
+            <button
+              onClick={handleClose}
+              className="px-6 py-2 bg-[#00293D] rounded-full text-sm font-semibold text-white hover:bg-[#00293D]/90 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Success state
+  if (success) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+        <div className="relative bg-white rounded-[20px] p-6 w-full max-w-md mx-4 shadow-xl">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg className="w-8 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-bold text-[#00293D] mb-2">Request Sent!</h3>
+            <p className="text-sm text-[#00293D]/70">
+              Your connection request has been sent to {agentName}.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-[20px] p-6 w-full max-w-md mx-4 shadow-xl">
+        {/* Close button */}
+        <button
+          onClick={handleClose}
+          className="absolute top-4 right-4 text-[#00293D]/50 hover:text-[#00293D] transition-colors"
+        >
+          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        {/* Header */}
+        <div className="mb-6">
+          <h2 className="text-xl font-bold text-[#00293D]">Connect with {agentName}</h2>
+          <p className="text-sm text-[#00293D]/70 mt-1">
+            Send a connection request to start communicating with this agent.
+          </p>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-[#00293D] mb-2">
+              Message (Optional)
+            </label>
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Introduce yourself and explain what you're looking for..."
+              rows={4}
+              maxLength={1000}
+              className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-sm text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] resize-none"
+            />
+            <div className="text-xs text-[#00293D]/50 mt-1 text-right">
+              {message.length}/1000
+            </div>
+          </div>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-[10px] text-sm text-red-600">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <button
+              type="button"
+              onClick={handleClose}
+              className="flex-1 px-4 py-3 border border-[#00293D]/20 rounded-full text-sm font-semibold text-[#00293D] hover:bg-[#00293D]/5 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="flex-1 px-4 py-3 bg-[#E58625] rounded-full text-sm font-semibold text-white hover:bg-[#E58625]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? 'Sending...' : 'Send Request'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/src/components/modals/index.ts
+++ b/src/components/modals/index.ts
@@ -0,0 +1 @@
+export * from './ConnectRequestModal';
--- a/src/components/profile/ProfileCard.tsx
+++ b/src/components/profile/ProfileCard.tsx
@@ -1,11 +1,14 @@
 'use client';

+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSession } from 'next-auth/react';
 import { useRouter, usePathname } from 'next/navigation';
 import { Tag } from './Tag';

+type ConnectionStatus = 'PENDING' | 'ACCEPTED' | 'REJECTED' | null;
+
 interface ProfileCardProps {
  firstName: string;
  lastName: string;
@@ -19,6 +22,9 @@ interface ProfileCardProps {
  editHref?: string;
  messageHref?: string;
  requestsHref?: string;
+  connectionStatus?: ConnectionStatus;
+  onConnectClick?: () => void; // Callback when Connect button is clicked (for opening modal)
+  onUnlinkClick?: () => void; // Callback when Unlink button is clicked
 }

 export function ProfileCard({
@@ -34,10 +40,25 @@ export function ProfileCard({
  editHref = '/agent/edit',
  messageHref,
  requestsHref,
+  connectionStatus,
+  onConnectClick,
+  onUnlinkClick,
 }: ProfileCardProps) {
  const { data: session } = useSession();
  const router = useRouter();
  const pathname = usePathname();
+  const [isUnlinking, setIsUnlinking] = useState(false);
+
+  // Handle unlink click
+  const handleUnlinkClick = async () => {
+    if (isUnlinking) return;
+    setIsUnlinking(true);
+    try {
+      await onUnlinkClick?.();
+    } finally {
+      setIsUnlinking(false);
+    }
+  };

  // Handle action click - require login if not authenticated
  const handleActionClick = (e: React.MouseEvent, targetHref?: string) => {
@@ -146,7 +167,8 @@ export function ProfileCard({
              Message
            </button>
          )}
-          {requestsHref ? (
+          {showEditButton && requestsHref ? (
+            // Agent's own profile - show Requests link
            <Link
              href={requestsHref}
              onClick={(e) => handleActionClick(e, requestsHref)}
@@ -154,25 +176,63 @@ export function ProfileCard({
            >
              <Image
                src="/assets/icons/requests-dark-icon.svg"
-                alt="Connect"
+                alt="Requests"
                width={14}
                height={13}
              />
-              {showEditButton ? 'Requests' : 'Connect'}
+              Requests
            </Link>
          ) : (
-            <button
-              onClick={(e) => handleActionClick(e)}
-              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
-            >
-              <Image
-                src="/assets/icons/requests-dark-icon.svg"
-                alt="Connect"
-                width={14}
-                height={13}
-              />
-              {showEditButton ? 'Requests' : 'Connect'}
-            </button>
+            // Public view - show Connect/Pending/Unlink button based on connection status
+            connectionStatus === 'PENDING' ? (
+              <button
+                disabled
+                className="flex items-center gap-2 px-4 py-1.5 bg-[#fef3c7] text-[#92600f] text-sm font-normal rounded-[15px] border border-[#00293d]/10 cursor-not-allowed font-serif"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Pending"
+                  width={14}
+                  height={13}
+                />
+                Pending
+              </button>
+            ) : connectionStatus === 'ACCEPTED' ? (
+              <button
+                onClick={handleUnlinkClick}
+                disabled={isUnlinking}
+                className="flex items-center gap-2 px-4 py-1.5 bg-red-500 text-white text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-red-600 transition-colors font-serif cursor-pointer disabled:opacity-50"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Unlink"
+                  width={14}
+                  height={13}
+                />
+                {isUnlinking ? 'Unlinking...' : 'Unlink'}
+              </button>
+            ) : (
+              <button
+                onClick={(e) => {
+                  if (!session) {
+                    e.preventDefault();
+                    const returnUrl = encodeURIComponent(pathname);
+                    router.push(`/login?callbackUrl=${returnUrl}`);
+                    return;
+                  }
+                  onConnectClick?.();
+                }}
+                className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
+              >
+                <Image
+                  src="/assets/icons/requests-dark-icon.svg"
+                  alt="Connect"
+                  width={14}
+                  height={13}
+                />
+                Connect
+              </button>
+            )
          )}
        </div>
      </div>
--- a/src/components/profile/StatusButtons.tsx
+++ b/src/components/profile/StatusButtons.tsx
@@ -1,22 +1,32 @@
 'use client';

+import { useState } from 'react';
 import { useSession } from 'next-auth/react';
 import { useRouter, usePathname } from 'next/navigation';

+type ConnectionStatus = 'PENDING' | 'ACCEPTED' | 'REJECTED' | null;
+
 interface StatusButtonsProps {
  isAvailable?: boolean;
+  connectionStatus?: ConnectionStatus;
  onToggleAvailability?: () => void;
+  onConnectClick?: () => void; // Callback when Connect button is clicked (for opening modal)
+  onUnlinkClick?: () => void; // Callback when Unlink button is clicked
  showToggle?: boolean; // If true, show as toggle (for agent's own dashboard)
 }

 export function StatusButtons({
  isAvailable = true,
+  connectionStatus = null,
  onToggleAvailability,
+  onConnectClick,
+  onUnlinkClick,
  showToggle = false
 }: StatusButtonsProps) {
  const { data: session } = useSession();
  const router = useRouter();
  const pathname = usePathname();
+  const [isUnlinking, setIsUnlinking] = useState(false);

  // Handle connect click - require login if not authenticated
  const handleConnectClick = () => {
@@ -28,7 +38,63 @@ export function StatusButtons({
      router.push(`/login?callbackUrl=${returnUrl}`);
      return;
    }
-    // TODO: Handle connect action when logged in
+
+    // Call the onConnectClick callback if provided
+    onConnectClick?.();
+  };
+
+  // Handle unlink click
+  const handleUnlinkClick = async () => {
+    if (isUnlinking) return;
+    setIsUnlinking(true);
+    try {
+      await onUnlinkClick?.();
+    } finally {
+      setIsUnlinking(false);
+    }
+  };
+
+  // Render the appropriate button based on connection status
+  const renderConnectionButton = () => {
+    // If PENDING - show yellow Pending button (disabled)
+    if (connectionStatus === 'PENDING') {
+      return (
+        <button
+          disabled
+          className="px-5 py-1.5 text-[#92600f] text-sm rounded-[15px] bg-[#fef3c7] cursor-not-allowed font-fractul"
+        >
+          Pending
+        </button>
+      );
+    }
+
+    // If ACCEPTED - show Unlink button
+    if (connectionStatus === 'ACCEPTED') {
+      return (
+        <button
+          onClick={handleUnlinkClick}
+          disabled={isUnlinking}
+          className="px-5 py-1.5 text-white text-sm rounded-[15px] bg-red-500 hover:bg-red-600 transition-colors font-fractul disabled:opacity-50"
+        >
+          {isUnlinking ? 'Unlinking...' : 'Unlink'}
+        </button>
+      );
+    }
+
+    // Default: No request or REJECTED - show Connect button
+    return (
+      <button
+        onClick={handleConnectClick}
+        disabled={!isAvailable}
+        className={`px-5 py-1.5 text-white text-sm rounded-[15px] transition-colors font-fractul ${
+          isAvailable
+            ? 'bg-[#e58625] hover:bg-[#d47720] cursor-pointer'
+            : 'bg-[#00293d] cursor-not-allowed opacity-70'
+        }`}
+      >
+        Connect
+      </button>
+    );
  };

  // If showToggle is true, render both options as a toggle selector (for agent dashboard)
@@ -78,7 +144,7 @@ export function StatusButtons({
    );
  }

-  // Public view - show single status with Connect button
+  // Public view - show single status with Connect/Pending/Unlink button
  return (
    <div className="w-full max-w-[354px] lg:max-w-none">
      <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
@@ -90,17 +156,7 @@ export function StatusButtons({
            {isAvailable ? 'Available.' : 'Unavailable.'}
          </span>
        </div>
-        <button
-          onClick={handleConnectClick}
-          disabled={!isAvailable}
-          className={`px-5 py-1.5 text-white text-sm rounded-[15px] transition-colors font-fractul ${
-            isAvailable
-              ? 'bg-[#e58625] hover:bg-[#d47720] cursor-pointer'
-              : 'bg-[#00293d] cursor-not-allowed opacity-70'
-          }`}
-        >
-          Connect
-        </button>
+        {renderConnectionButton()}
      </div>
    </div>
  );