chore: import upstream snapshot with attribution

apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import {
+  Chip,
+  ChipModal,
+  ChipModalBody,
+  ChipModalError,
+  ChipModalField,
+  ChipModalFooter,
+  ChipModalHeader,
+} from '@sim/emcn'
+import { requestJson } from '@/lib/api/client/request'
+import { integrationRequestContract } from '@/lib/api/contracts/common'
+
+type SubmitStatus = 'idle' | 'submitting' | 'success' | 'error'
+
+export function RequestIntegrationModal() {
+  const [open, setOpen] = useState(false)
+  const [status, setStatus] = useState<SubmitStatus>('idle')
+
+  const [integrationName, setIntegrationName] = useState('')
+  const [email, setEmail] = useState('')
+  const [useCase, setUseCase] = useState('')
+
+  const resetForm = useCallback(() => {
+    setIntegrationName('')
+    setEmail('')
+    setUseCase('')
+    setStatus('idle')
+  }, [])
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+      if (!nextOpen) resetForm()
+    },
+    [resetForm]
+  )
+
+  const handleSubmit = useCallback(async () => {
+    if (!integrationName.trim() || !email.trim()) return
+
+    setStatus('submitting')
+
+    try {
+      await requestJson(integrationRequestContract, {
+        body: {
+          integrationName: integrationName.trim(),
+          email: email.trim(),
+          useCase: useCase.trim() || undefined,
+        },
+      })
+
+      setStatus('success')
+      setTimeout(() => setOpen(false), 1500)
+    } catch {
+      setStatus('error')
+    }
+  }, [integrationName, email, useCase])
+
+  const canSubmit = integrationName.trim() && email.trim() && status === 'idle'
+
+  return (
+    <>
+      <Chip className='border border-[var(--border-1)]' onClick={() => setOpen(true)}>
+        Request an integration
+      </Chip>
+
+      <ChipModal open={open} onOpenChange={handleOpenChange} srTitle='Request an Integration'>
+        <ChipModalHeader onClose={() => handleOpenChange(false)}>
+          Request an Integration
+        </ChipModalHeader>
+
+        <ChipModalBody>
+          {status === 'success' ? (
+            <div className='flex flex-col items-center gap-3 py-6 text-center'>
+              <div className='flex size-10 items-center justify-center rounded-full bg-[var(--brand-accent)]/10'>
+                <svg
+                  className='size-5 text-[var(--brand-accent)]'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth={2}
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                >
+                  <polyline points='20 6 9 17 4 12' />
+                </svg>
+              </div>
+              <p className='text-[14px] text-[var(--text-primary)]'>
+                Request submitted. We&apos;ll follow up at <span>{email}</span>.
+              </p>
+            </div>
+          ) : (
+            <>
+              <ChipModalField
+                type='input'
+                title='Integration name'
+                value={integrationName}
+                onChange={(value) => setIntegrationName(value)}
+                placeholder='e.g. Stripe, HubSpot, Snowflake'
+                maxLength={200}
+                autoComplete='off'
+                required
+              />
+              <ChipModalField
+                type='email'
+                title='Your email'
+                value={email}
+                onChange={(value) => setEmail(value)}
+                placeholder='you@company.com'
+                autoComplete='email'
+                required
+              />
+              <ChipModalField
+                type='textarea'
+                title={
+                  <>
+                    Use case <span className='text-[var(--text-subtle)]'>(optional)</span>
+                  </>
+                }
+                value={useCase}
+                onChange={(value) => setUseCase(value)}
+                placeholder='What would you automate with this integration?'
+                rows={3}
+                maxLength={2000}
+              />
+              {status === 'error' && (
+                <ChipModalError>Something went wrong. Please try again.</ChipModalError>
+              )}
+            </>
+          )}
+        </ChipModalBody>
+
+        {status === 'success' ? (
+          <ChipModalFooter
+            onCancel={() => handleOpenChange(false)}
+            primaryAction={{ label: 'Done', onClick: () => handleOpenChange(false) }}
+          />
+        ) : (
+          <ChipModalFooter
+            onCancel={() => setOpen(false)}
+            cancelDisabled={status === 'submitting'}
+            primaryAction={{
+              label: status === 'submitting' ? 'Submitting...' : 'Submit request',
+              onClick: handleSubmit,
+              disabled: !canSubmit && status !== 'error',
+            }}
+          />
+        )}
+      </ChipModal>
+    </>
+  )
+}