Connect Services Modal

Service integration modal for connecting third-party services. Perfect for OAuth connections, API integrations, and external service linking.

Features

Service selection with radio buttons
Service cards with names and descriptions
Optional notification preference checkbox
Loading states during connection
Skip option for optional connections
Form validation and error handling

Example

Connect Third-Party Services

Click the button below to open the connect services modal. You can select a service to connect and choose notification preferences.

Usage

import { ConnectServicesModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  
  const handleSubmit = (data: {
    selectedServices: string[]
    notifyBeforeApiInteraction: boolean
  }) => {
    console.log('Connecting services:', data)
    setIsLoading(true)
    // Perform API call
    setTimeout(() => {
      setIsLoading(false)
      setIsOpen(false)
    }, 2000)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Connect Services
      </Button>
      
      <ConnectServicesModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
        isLoading={isLoading}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(data) => void	-	Callback with selected services and notification preference
isLoading	boolean	false	Shows loading state on connect button
size	'sm' \| 'md' \| 'lg' \| 'full'	'md'	Modal size variant