feat: add analytics to experiements (#1131)

Author: mostafakamar2308

apps/web/src/components/Plans/Selector.tsx

@@ -68,7 +68,9 @@ export const Selector: React.FC<{
       <PlansPanel period={period} setPeriod={setPeriod} />
 
       <div className="flex flex-wrap items-stretch md:flex-row justify-items-center justify-center gap-4 lg:gap-6">
-        <TrialSessionCard />
+        <TrialSessionCard
+          onClick={() => track("browse_tutors_from_pricing", "info")}
+        />
         {sortedPlans.map((plan, idx) => {
           const index =
             idx < description.current.length

apps/web/src/lib/analytics/index.ts

@@ -9,7 +9,8 @@ export type Category =
   | "plans"
   | "checkout"
   | "lessons"
-  | "tutors";
+  | "tutors"
+  | "info";
 
 export type Action =
   | "book_lesson"
@@ -47,7 +48,9 @@ export type Action =
   | "play_tutor_video"
   | "complete_student_tour"
   | "skip_student_tour"
-  | "remind_me";
+  | "remind_me"
+  | "browse_tutors_from_pricing"
+  | "view_web_faq";
 
 export type Params = {
   category: Category;

apps/web/src/pages/StudentDashboard.tsx

@@ -16,6 +16,7 @@ import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { useTutors } from "@litespace/headless/tutor";
 import { Tabs } from "@litespace/ui/Tabs";
+import { track } from "@/lib/analytics";
 
 const StudentDashboard: React.FC = () => {
   const mq = useMediaQuery();
@@ -230,28 +231,39 @@ const Benefits = () => {
 const LearningApproachMobile = () => {
   const intl = useFormatMessage();
 
-  const methodologyContent = intl("questions.methodology.mobile-content");
-  const studentTipsContent = intl("questions.benefits.mobile-content");
+  const questions = useMemo(
+    () => [
+      {
+        title: intl("questions.methodology.mobile-title"),
+        content: intl("questions.methodology.mobile-content"),
+      },
+      {
+        title: intl("questions.benefits.mobile-title"),
+        content: intl("questions.benefits.mobile-content"),
+      },
+    ],
+    [intl]
+  );
 
-  const questions = [
-    {
-      title: intl("questions.methodology.mobile-title"),
-      content: methodologyContent,
-    },
-    {
-      title: intl("questions.benefits.mobile-title"),
-      content: studentTipsContent,
-    },
-  ];
+  const items = useMemo(
+    () =>
+      questions.map(({ title, content }, i) => ({
+        id: i.toString(),
+        title,
+        content,
+      })),
+    [questions]
+  );
 
   return (
     <div className="block md:hidden">
       <Accordion
-        items={questions.map(({ title, content }, i) => ({
-          id: i.toString(),
-          title,
-          content,
-        }))}
+        onValueChange={(value) => {
+          const item = items.find((item) => item.id === value);
+          if (!item) return;
+          track("view_web_faq", "student_dashboard", item.title);
+        }}
+        items={items}
       />
     </div>
   );

packages/ui/src/components/Card/TrialSessionCard/TrialSessionCard.tsx

@@ -1,15 +1,15 @@
 import { Button } from "@/components/Button";
 import { Typography } from "@/components/Typography";
 import CheckMark from "@litespace/assets/CheckMark";
-import { ILesson } from "@litespace/types";
+import { ILesson, Void } from "@litespace/types";
 import { useFormatMessage } from "@litespace/ui/hooks/intl";
 import { price, TOTAL_LESSON_HOURLY_RATE } from "@litespace/utils";
 import cn from "classnames";
 import React from "react";
 import { Link } from "react-router-dom";
 import { Web } from "@litespace/utils/routes";
 
-export const TrialSessionCard: React.FC = () => {
+export const TrialSessionCard: React.FC<{ onClick: Void }> = ({ onClick }) => {
   const intl = useFormatMessage();
 
   return (
@@ -68,7 +68,7 @@ export const TrialSessionCard: React.FC = () => {
           </Typography>
         </div>
       </div>
-      <Link to={Web.Tutors} tabIndex={-1} className="w-full">
+      <Link onClick={onClick} to={Web.Tutors} tabIndex={-1} className="w-full">
         <Button
           size="large"
           className="mt-6 w-full justify-center py-2 bg-primary-500 font-cairo hover:bg-brand-700"