diff --git a/apps/frontend/src/components/billing/first.billing.component.tsx b/apps/frontend/src/components/billing/first.billing.component.tsx index cc8c07e9..d945b5da 100644 --- a/apps/frontend/src/components/billing/first.billing.component.tsx +++ b/apps/frontend/src/components/billing/first.billing.component.tsx @@ -5,7 +5,6 @@ import useSWR from 'swr'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { useVariables } from '@gitroom/react/helpers/variable.context'; import { loadStripe, Stripe } from '@stripe/stripe-js'; -import { useSearchParams } from 'next/navigation'; import { OrganizationSelector } from '@gitroom/frontend/components/layout/organization.selector'; import { LanguageComponent } from '@gitroom/frontend/components/layout/language.component'; import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/sentry.feedback.component'; @@ -24,6 +23,8 @@ import { import { useT } from '@gitroom/react/translation/get.transation.service.client'; import { useUser } from '@gitroom/frontend/components/layout/user.context'; import { useDubClickId } from '@gitroom/frontend/components/layout/dubAnalytics'; +import Image from 'next/image'; +import { useModals } from '@gitroom/frontend/components/layout/new-modal'; const ModeComponent = dynamic( () => import('@gitroom/frontend/components/layout/mode.component'), @@ -50,6 +51,7 @@ export const FirstBillingComponent = () => { const [tier, setTier] = useState('STANDARD'); const [period, setPeriod] = useState('MONTHLY'); const fetch = useFetch(); + const modals = useModals(); const t = useT(); useEffect(() => { @@ -69,6 +71,21 @@ export const FirstBillingComponent = () => { ).json(); }, [tier, period]); + const showYouTube = () => { + modals.openModal({ + title: 'Grow Fast With Postiz (Play the video)', + children: ( + + ), + }); + }; + const { data, isLoading } = useSWR( `/billing-${tier}-${period}`, loadCheckout, @@ -101,6 +118,21 @@ export const FirstBillingComponent = () => { )} +