From 74a6f50b4cfa3eba4cf41f07ec37a90049226185 Mon Sep 17 00:00:00 2001 From: Hannes Reinberger <40197225+hreinberger@users.noreply.github.com> Date: Tue, 21 Jan 2025 15:12:21 +0100 Subject: [PATCH] add product analytics with posthog --- package-lock.json | 46 +++++++ package.json | 1 + .../form/methods/hostedpaymentmethods.tsx | 113 ++++++++++++------ src/app/components/ui/providers.jsx | 15 ++- 4 files changed, 136 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index fdd7c40..8abb782 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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" @@ -3195,6 +3196,17 @@ "dev": true, "license": "MIT" }, + "node_modules/core-js": { + "version": "3.40.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz", + "integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==", + "hasInstallScript": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4165,6 +4177,12 @@ "reusify": "^1.0.4" } }, + "node_modules/fflate": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz", + "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==", + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -6060,6 +6078,28 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "license": "MIT" }, + "node_modules/posthog-js": { + "version": "1.207.1", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.207.1.tgz", + "integrity": "sha512-PMqb7y6+pEi5r3jBUBTg3E5rbxIm2uhcqZV4GjJBzAx/jIc46MHXEpwBymd46y2AZ8QnKYzOKl8UjwrMbvZ4Ww==", + "license": "MIT", + "dependencies": { + "core-js": "^3.38.1", + "fflate": "^0.4.8", + "preact": "^10.19.3", + "web-vitals": "^4.2.0" + } + }, + "node_modules/preact": { + "version": "10.25.4", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz", + "integrity": "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -7375,6 +7415,12 @@ "dev": true, "license": "MIT" }, + "node_modules/web-vitals": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==", + "license": "Apache-2.0" + }, "node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", diff --git a/package.json b/package.json index 3086c63..18556dd 100644 --- 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 index 2870f1e..4a5b771 100644 --- 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 ( - - - - {methods.map((method) => ( - - + + + + {methods.map((method) => ( + + + + + + {method.description} + + + + + + + ))} + + + + + + Test Mode only! + + + + - - - - {method.description} + + + + Authorize payment (Cards and Klarna + only) - - - - - - ))} - - - - - - Test Mode only! - - - - + + Authorized payments need to be captured + later + + + + + + + + ); } diff --git a/src/app/components/ui/providers.jsx b/src/app/components/ui/providers.jsx index 06ec98b..401baec 100644 --- 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 {children}; + return ( + + {children} + + ); }