diff --git a/apps/studio/components/interfaces/Support/SupportDiscordCallout.tsx b/apps/studio/components/interfaces/Support/SupportDiscordCallout.tsx new file mode 100644 index 00000000000..106ce3c701d --- /dev/null +++ b/apps/studio/components/interfaces/Support/SupportDiscordCallout.tsx @@ -0,0 +1,79 @@ +import { useEffect, useState } from 'react' +import Link from 'next/link' +import { MoveUpRight } from 'lucide-react' +import { IconDiscord } from 'ui' +import { motion, AnimatePresence } from 'framer-motion' + +interface DynamicStatusProps { + interval?: number +} +const statuses = [ + 'Try asking on Discord! The median reply time is ~12 min', + '75% of questions get a reply within ~54 min', + 'Get help fast on Discord — median reply time is ~12 min', + '90% of questions get a reply within 4h 11m', + 'Discord support: 95% replied within 8h', +] + +export function SupportFormDiscordCallout({ interval = 2500 }: DynamicStatusProps) { + const [currentIndex, setCurrentIndex] = useState(0) + + useEffect(() => { + if (statuses.length <= 1) return + + const timer = setInterval(() => { + setCurrentIndex((prev) => (prev + 1) % statuses.length) + }, interval) + + return () => clearInterval(timer) + }, [interval]) + + return ( +
+
+ + + {statuses[currentIndex]} + + +
+
+ + + + + + + +
+
+ ) +} diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx index 3d3871bf3d1..d4160d0f358 100644 --- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx +++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx @@ -74,6 +74,7 @@ import { SEVERITY_OPTIONS, } from './Support.constants' import { formatMessage, uploadAttachments } from './SupportForm.utils' +import { SupportFormDiscordCallout } from './SupportDiscordCallout' const MAX_ATTACHMENTS = 5 const INCLUDE_DISCUSSIONS = ['Problem', 'Database_unresponsive'] @@ -515,7 +516,6 @@ export const SupportFormV2 = ({ )} /> - {projectRef !== 'no-project' && ( )} + {subscriptionPlanId == 'free' && } +