Merge pull request #9 from hreinberger/feature/analytics

add product analytics with posthog
hreinberger · Jan 21, 2025 · e4ad29a · e4ad29a
2 parents 0771413 + 74a6f50
commit e4ad29a
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
         "next": "^15.1.5",
         "next-themes": "^0.4.4",
         "postcss-import": "^16.1.0",
+        "posthog-js": "^1.207.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "zod": "^3.24.1"

diff --git a/src/app/components/form/methods/hostedpaymentmethods.tsx b/src/app/components/form/methods/hostedpaymentmethods.tsx
@@ -5,6 +5,7 @@ import {
     Separator,
     Text,
     Callout,
+    Switch,
 } from '@radix-ui/themes';
 
 import React from 'react';
@@ -18,45 +19,81 @@ export default async function HostedPaymentMethods() {
     const methods = await mollieGetMethods();
 
     return (
-        <RadioGroup.Root
-            defaultValue={methods[0]?.id}
-            name="payment_method"
-        >
-            <Card m="1">
-                <Flex direction="column">
-                    {methods.map((method) => (
-                        <React.Fragment key={method.id}>
-                            <Flex
-                                align="center"
-                                justify="between"
-                                gap="4"
+        <>
+            <RadioGroup.Root
+                defaultValue={methods[0]?.id}
+                name="payment_method"
+            >
+                <Card m="1">
+                    <Flex direction="column">
+                        {methods.map((method) => (
+                            <React.Fragment key={method.id}>
+                                <Flex
+                                    align="center"
+                                    justify="between"
+                                    gap="4"
+                                >
+                                    <Text as="label">
+                                        <Flex
+                                            gap="2"
+                                            align="center"
+                                        >
+                                            <RadioGroup.Item
+                                                value={method.id}
+                                            />
+                                            {method.description}
+                                        </Flex>
+                                    </Text>
+                                    <PaymentLogo method={method.id} />
+                                </Flex>
+                                <Separator
+                                    my="3"
+                                    size="4"
+                                />
+                            </React.Fragment>
+                        ))}
+
+                        <Callout.Root>
+                            <Callout.Icon>
+                                <InfoCircledIcon />
+                            </Callout.Icon>
+                            <Callout.Text>Test Mode only!</Callout.Text>
+                        </Callout.Root>
+                        <Separator
+                            my="3"
+                            size="4"
+                        />
+                        <Flex>
+                            <Text
+                                as="label"
+                                size="2"
                             >
-                                <Text as="label">
-                                    <Flex
-                                        gap="2"
-                                        align="center"
-                                    >
-                                        <RadioGroup.Item value={method.id} />
-                                        {method.description}
+                                <Flex
+                                    gap="2"
+                                    direction="column"
+                                >
+                                    <Flex gap="2">
+                                        <Switch
+                                            radius="full"
+                                            name="captureMode"
+                                            value={'manual'}
+                                        />
+                                        Authorize payment (Cards and Klarna
+                                        only)
                                     </Flex>
-                                </Text>
-                                <PaymentLogo method={method.id} />
-                            </Flex>
-                            <Separator
-                                my="3"
-                                size="4"
-                            />
-                        </React.Fragment>
-                    ))}
-
-                    <Callout.Root>
-                        <Callout.Icon>
-                            <InfoCircledIcon />
-                        </Callout.Icon>
-                        <Callout.Text>Test Mode only!</Callout.Text>
-                    </Callout.Root>
-                </Flex>
-            </Card>
-        </RadioGroup.Root>
+                                    <Text
+                                        size="1"
+                                        color="gray"
+                                    >
+                                        Authorized payments need to be captured
+                                        later
+                                    </Text>
+                                </Flex>
+                            </Text>
+                        </Flex>
+                    </Flex>
+                </Card>
+            </RadioGroup.Root>
+        </>
     );
 }
diff --git a/src/app/components/ui/providers.jsx b/src/app/components/ui/providers.jsx
@@ -1,7 +1,20 @@
 'use client';
 
 import { ThemeProvider } from 'next-themes';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+if (typeof window !== 'undefined') {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        person_profiles: 'always', // or 'always' to create profiles for anonymous users as well
+    });
+}
 
 export function Providers({ children }) {
-    return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+    return (
+        <PostHogProvider client={posthog}>
+            <ThemeProvider attribute="class">{children}</ThemeProvider>
+        </PostHogProvider>
+    );
 }