FM / components

/opt/canhelp/apps/web/src/components

Name	Size	Mode	Actions
AdminRolePreview.tsx	4928	0644	edit dl rm
BecomeSpecialistButton.tsx	702	0644	edit dl rm
CategoryIcon.tsx	1576	0644	edit dl rm
FaqAccordion.tsx	1500	0644	edit dl rm
FavoriteSpecialistButton.tsx	1464	0644	edit dl rm
Footer.tsx	3019	0644	edit dl rm
Header.tsx	30479	0644	edit dl rm
HeroFloatingIcons.tsx	4378	0644	edit dl rm
HeroSearch.tsx	1611	0644	edit dl rm
HomeCategoryGrid.tsx	4625	0644	edit dl rm
HomeCityCloud.tsx	1790	0644	edit dl rm
HomeCityPicker.tsx	5490	0644	edit dl rm
HomeSectionArt.tsx	5912	0644	edit dl rm
LanguageSwitcher.tsx	2438	0644	edit dl rm
PlanBadge.tsx	3100	0644	edit dl rm
PromoCountdown.tsx	3483	0644	edit dl rm
ScrollToTopButton.tsx	818	0644	edit dl rm
Section.tsx	252	0644	edit dl rm
ShareButton.tsx	1041	0644	edit dl rm
SocialIcons.tsx	6871	0644	edit dl rm
SpecialistsFiltersClient.tsx	6461	0644	edit dl rm
SpecialistTaskCard.tsx	2837	0644	edit dl rm
SupportModal.tsx	6195	0644	edit dl rm
TaskCategoryPicker.tsx	11117	0644	edit dl rm
TaskLocationPicker.tsx	11038	0644	edit dl rm
Turnstile.tsx	651	0644	edit dl rm
UpgradePrompt.tsx	3427	0644	edit dl rm
UsageMeter.tsx	1602	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/components/SupportModal.tsx (6195B)

'use client'

import { useState } from 'react'
import { useLocale } from '@/context/locale'
import { createSupportTicket } from '@/lib/api'

type TicketType = 'bug' | 'suggestion' | 'other'

interface Props {
  onClose: () => void
}

export default function SupportModal({ onClose }: Props) {
  const { t } = useLocale()
  const [type, setType] = useState<TicketType>('bug')
  const [subject, setSubject] = useState('')
  const [body, setBody] = useState('')
  const [loading, setLoading] = useState(false)
  const [sent, setSent] = useState(false)
  const [error, setError] = useState('')

const TYPES: { value: TicketType; label: string; icon: string; color: string }[] = [
    { value: 'bug', label: t('support.type.bug'), icon: '🐛', color: 'border-red-300 bg-red-50 text-red-700' },
    { value: 'suggestion', label: t('support.type.suggestion'), icon: '💡', color: 'border-green-300 bg-green-50 text-green-700' },
    { value: 'other', label: t('support.type.other'), icon: '💬', color: 'border-gray-300 bg-gray-50 text-gray-700' },
  ]

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')
    setLoading(true)
    try {
      await createSupportTicket({ type, subject, body })
      setSent(true)
    } catch {
      setError(t('support.error'))
    } finally {
      setLoading(false)
    }
  }

return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      onClick={(e) => e.target === e.currentTarget && onClose()}
    >
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            <h2 className="text-lg font-semibold text-gray-900">{t('support.title')}</h2>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

{sent ? (
          /* Success state */
          <div className="px-6 py-10 text-center">
            <div className="text-5xl mb-4">✅</div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">{t('support.sent.title')}</h3>
            <p className="text-sm text-gray-500 mb-6">{t('support.sent.body')}</p>
            <button
              onClick={onClose}
              className="bg-green-600 text-white px-6 py-2.5 rounded-xl font-medium hover:bg-green-700"
            >
              {t('support.sent.close')}
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
            {/* Type selector */}
            <div>
              <p className="text-sm font-medium text-gray-700 mb-2">{t('support.type.label')}</p>
              <div className="grid grid-cols-3 gap-2">
                {TYPES.map(({ value, label, icon, color }) => (
                  <button
                    key={value}
                    type="button"
                    onClick={() => setType(value)}
                    className={`flex flex-col items-center gap-1 py-3 px-2 rounded-xl border-2 text-xs font-medium transition ${
                      type === value ? color + ' border-opacity-100' : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300'
                    }`}
                  >
                    <span className="text-xl">{icon}</span>
                    {label}
                  </button>
                ))}
              </div>
            </div>

{/* Subject */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">{t('support.subject')}</label>
              <input
                type="text"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                required
                minLength={3}
                maxLength={200}
                placeholder={t('support.subject.placeholder')}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
              />
            </div>

{/* Body */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">{t('support.body')}</label>
              <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                required
                minLength={10}
                maxLength={5000}
                rows={5}
                placeholder={t('support.body.placeholder')}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
              />
            </div>

{error && <p className="text-sm text-red-600">{error}</p>}

<div className="flex gap-3 pt-1">
              <button
                type="button"
                onClick={onClose}
                className="flex-1 border border-gray-300 text-gray-700 py-2.5 rounded-xl font-medium hover:bg-gray-50"
              >
                {t('support.cancel')}
              </button>
              <button
                type="submit"
                disabled={loading}
                className="flex-1 bg-green-600 text-white py-2.5 rounded-xl font-semibold hover:bg-green-700 disabled:opacity-50"
              >
                {loading ? '...' : t('support.submit')}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}

'use client' import { useState } from 'react' import { useLocale } from '@/context/locale' import { createSupportTicket } from '@/lib/api' type TicketType = 'bug' | 'suggestion' | 'other' interface Props { onClose: () => void } export default function SupportModal({ onClose }: Props) { const { t } = useLocale() const [type, setType] = useState('bug') const [subject, setSubject] = useState('') const [body, setBody] = useState('') const [loading, setLoading] = useState(false) const [sent, setSent] = useState(false) const [error, setError] = useState('') const TYPES: { value: TicketType; label: string; icon: string; color: string }[] = [ { value: 'bug', label: t('support.type.bug'), icon: '🐛', color: 'border-red-300 bg-red-50 text-red-700' }, { value: 'suggestion', label: t('support.type.suggestion'), icon: '💡', color: 'border-green-300 bg-green-50 text-green-700' }, { value: 'other', label: t('support.type.other'), icon: '💬', color: 'border-gray-300 bg-gray-50 text-gray-700' }, ] async function handleSubmit(e: React.FormEvent) { e.preventDefault() setError('') setLoading(true) try { await createSupportTicket({ type, subject, body }) setSent(true) } catch { setError(t('support.error')) } finally { setLoading(false) } } return (

e.target === e.currentTarget && onClose()} >

{/* Header */}

{t('support.title')}

{sent ? ( /* Success state */

✅

{t('support.sent.title')}

{t('support.sent.body')}

) : (

{/* Type selector */}

{t('support.type.label')}

{TYPES.map(({ value, label, icon, color }) => ( ))}

{/* Subject */}

{t('support.subject')} setSubject(e.target.value)} required minLength={3} maxLength={200} placeholder={t('support.subject.placeholder')} className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400" />

{/* Body */}

{t('support.body')}

setBody(e.target.value)}
                required
                minLength={10}
                maxLength={5000}
                rows={5}
                placeholder={t('support.body.placeholder')}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
              />
            </div>

{error && <p className="text-sm text-red-600">{error}</p>}