diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx index df4509cd..f07744e0 100644 --- a/apps/frontend/src/app/layout.tsx +++ b/apps/frontend/src/app/layout.tsx @@ -10,10 +10,15 @@ import { Chakra_Petch } from 'next/font/google'; import PlausibleProvider from 'next-plausible'; import clsx from 'clsx'; import { VariableContextComponent } from '@gitroom/react/helpers/variable.context'; +import { Fragment } from 'react'; const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] }); export default async function AppLayout({ children }: { children: ReactNode }) { + const Plausible = !!process.env.STRIPE_PUBLISHABLE_KEY + ? PlausibleProvider + : Fragment; + return ( @@ -25,7 +30,9 @@ export default async function AppLayout({ children }: { children: ReactNode }) { - {children} - + diff --git a/apps/frontend/src/components/billing/main.billing.component.tsx b/apps/frontend/src/components/billing/main.billing.component.tsx index fc2f88d2..b2107c3a 100644 --- a/apps/frontend/src/components/billing/main.billing.component.tsx +++ b/apps/frontend/src/components/billing/main.billing.component.tsx @@ -24,6 +24,7 @@ import { useModals } from '@mantine/modals'; import { AddProviderComponent } from '@gitroom/frontend/components/launches/add.provider.component'; import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component'; import { Textarea } from '@gitroom/react/form/textarea'; +import { useFireEvents } from '@gitroom/helpers/utils/use.fire.events'; export interface Tiers { month: Array<{ @@ -156,9 +157,11 @@ export const Features: FC<{ const Info: FC<{ proceed: (feedback: string) => void }> = (props) => { const [feedback, setFeedback] = useState(''); const modal = useModals(); + const events = useFireEvents(); const cancel = useCallback(() => { props.proceed(feedback); + events('cancel_subscription'); modal.closeAll(); }, [modal, feedback]); diff --git a/libraries/helpers/src/utils/use.fire.events.ts b/libraries/helpers/src/utils/use.fire.events.ts index 46f880b1..07141295 100644 --- a/libraries/helpers/src/utils/use.fire.events.ts +++ b/libraries/helpers/src/utils/use.fire.events.ts @@ -1,9 +1,14 @@ -import {usePlausible} from 'next-plausible' -import {useCallback} from "react"; +import { usePlausible } from 'next-plausible'; +import { useCallback } from 'react'; +import { useVariables } from '@gitroom/react/helpers/variable.context'; export const useFireEvents = () => { - const plausible = usePlausible(); - return useCallback((name: string, props?: any) => { - plausible(name, {props}); - }, []); -} \ No newline at end of file + const { billingEnabled } = useVariables(); + const plausible = usePlausible(); + return useCallback((name: string, props?: any) => { + if (!billingEnabled) { + return; + } + plausible(name, { props }); + }, []); +};