Mutualise et répare le fournisseur de tracking dans l'auth. et le panier

packages/auth/providers/posthog.tsx

@@ -1,38 +1,15 @@
 'use client';
 
-import posthog from 'posthog-js';
-import {PostHogProvider} from 'posthog-js/react';
+import {
+  TrackingProvider,
+  createTrackingClient,
+  getNextTrackingEnv,
+} from '@tet/ui';
 
-if (typeof window !== 'undefined') {
-  const is_dev = process.env.NODE_ENV === 'development';
-  const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-  const host = process.env.NEXT_PUBLIC_POSTHOG_HOST;
-
-  if (/*is_dev &&*/ !key || !host) {
-    console.warn(
-      `Le tracking PostHog n'est pas configuré, les variables d'env sont absentes.`,
-    );
-  } else {
-    if (!key) throw `La variable NEXT_PUBLIC_POSTHOG_KEY n'est pas définie`;
-    if (!host) throw `La variable NEXT_PUBLIC_POSTHOG_HOST n'est pas définie`;
-
-    // en mode dev, on envoie les données à PostHog, sinon on passe par le `rewrites` de `next.config.mjs`
-    const apiHost = is_dev ? host : `${window.location.origin}/ingest`;
-
-    posthog.init(key, {
-      api_host: apiHost,
-      ui_host: host,
-      capture_pageview: false, // on utilise PostHogPageView pour capturer les `page views`
-
-      loaded: posthog => {
-        if (process.env.NODE_ENV === 'development') posthog.debug();
-      },
-    });
-  }
-}
+const client = createTrackingClient(getNextTrackingEnv());
 
 const PHProvider = ({children}: {children: React.ReactNode}) => {
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  return <TrackingProvider client={client}>{children}</TrackingProvider>;
 };
 
 export default PHProvider;

packages/panier/providers/posthog.tsx

@@ -1,36 +1,13 @@
 'use client';
 
-import posthog from 'posthog-js';
-import {PostHogProvider} from 'posthog-js/react';
+import {
+  TrackingProvider,
+  createTrackingClient,
+  getNextTrackingEnv,
+} from '@tet/ui';
 
-if (typeof window !== 'undefined') {
-  const is_dev = process.env.NODE_ENV === 'development';
-  const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-  const host = process.env.NEXT_PUBLIC_POSTHOG_HOST;
-
-  if (is_dev && (!key || !host)) {
-    console.warn(
-      `Le tracking PostHog n'est pas configuré, les variables d'env sont absentes.`,
-    );
-  } else {
-    if (!key) throw `La variable NEXT_PUBLIC_POSTHOG_KEY n'est pas définie`;
-    if (!host) throw `La variable NEXT_PUBLIC_POSTHOG_HOST n'est pas définie`;
-
-    // en mode dev, on envoie les données à PostHog, sinon on passe par le `rewrites` de `next.config.mjs`
-    const apiHost = is_dev ? host : `${window.location.origin}/ingest`;
-
-    posthog.init(key, {
-      api_host: apiHost,
-      ui_host: host,
-      capture_pageview: false, // on utilise PostHogPageView pour capturer les `page views`
-
-      loaded: posthog => {
-        if (process.env.NODE_ENV === 'development') posthog.debug();
-      },
-    });
-  }
-}
+const client = createTrackingClient(getNextTrackingEnv());
 
 export const PHProvider = ({children}: {children: React.ReactNode}) => {
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  return <TrackingProvider client={client}>{children}</TrackingProvider>;
 };

packages/ui/src/components/tracking/TrackingProvider.tsx

@@ -0,0 +1,67 @@
+import posthog, {PostHog} from 'posthog-js';
+import {PostHogProvider} from 'posthog-js/react';
+
+/**
+ * Renvoi les vars d'env. pour le tracking depuis un module next js
+ */
+export const getNextTrackingEnv = () => {
+  const host = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+  const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  const env = process.env.NODE_ENV;
+
+  return {host, key, env};
+};
+
+/**
+ * Crée le client de tracking
+ */
+export const createTrackingClient = ({
+  host,
+  key,
+  env,
+}: {
+  host?: string;
+  key?: string;
+  env?: string;
+}) => {
+  const is_dev = env === 'development';
+
+  if (!key || !host) {
+    console.warn(
+      `Le tracking PostHog n'est pas configuré, les variables d'env sont absentes.`
+    );
+    return;
+  }
+
+  // en mode dev, on envoie les données à PostHog, sinon on passe par le `rewrites` de `next.config.mjs`
+  const apiHost = is_dev ? host : `${window.location.origin}/ingest`;
+
+  posthog.init(key, {
+    api_host: apiHost,
+    ui_host: host,
+    capture_pageview: false, // on utilise PostHogPageView pour capturer les `page views`
+
+    loaded: posthog => {
+      if (process.env.NODE_ENV === 'development') posthog.debug();
+    },
+  });
+
+  return posthog;
+};
+
+/**
+ * Encapsule le client de tracking dans un provider react
+ */
+export const TrackingProvider = ({
+  children,
+  client,
+}: {
+  children: React.ReactNode;
+  client: PostHog;
+}) => {
+  return typeof window !== 'undefined' ? (
+    <PostHogProvider client={client}>{children}</PostHogProvider>
+  ) : (
+    children
+  );
+};

packages/ui/src/components/tracking/index.ts

@@ -2,3 +2,4 @@ export * from './trackingPlan';
 export * from './useEventTracker';
 export * from './useOngletTracker';
 export * from './TrackPageView';
+export * from './TrackingProvider';