♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -0,0 +1,63 @@
+import { Flex, Spinner, useDisclosure } from '@chakra-ui/react'
+import { useToast } from '@/hooks/useToast'
+import { useTypebot } from '@/features/editor'
+import { Stats } from 'models'
+import React from 'react'
+import { useAnswersCount } from '../hooks/useAnswersCount'
+import {
+  Graph,
+  GraphProvider,
+  GroupsCoordinatesProvider,
+} from '@/features/graph'
+import { ChangePlanModal, LimitReached } from '@/features/billing'
+import { StatsCards } from './StatsCards'
+
+export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { typebot, publishedTypebot } = useTypebot()
+  const { showToast } = useToast()
+  const { answersCounts } = useAnswersCount({
+    typebotId: publishedTypebot && typebot?.id,
+    onError: (err) => showToast({ title: err.name, description: err.message }),
+  })
+  return (
+    <Flex
+      w="full"
+      pos="relative"
+      bgColor="gray.50"
+      h="full"
+      justifyContent="center"
+    >
+      {publishedTypebot && answersCounts && stats ? (
+        <GraphProvider isReadOnly>
+          <GroupsCoordinatesProvider groups={publishedTypebot?.groups}>
+            <Graph
+              flex="1"
+              typebot={publishedTypebot}
+              onUnlockProPlanClick={onOpen}
+              answersCounts={[
+                { ...answersCounts[0], totalAnswers: stats?.totalStarts },
+                ...answersCounts?.slice(1),
+              ]}
+            />
+          </GroupsCoordinatesProvider>
+        </GraphProvider>
+      ) : (
+        <Flex
+          justify="center"
+          align="center"
+          boxSize="full"
+          bgColor="rgba(255, 255, 255, 0.5)"
+        >
+          <Spinner color="gray" />
+        </Flex>
+      )}
+      <ChangePlanModal
+        onClose={onClose}
+        isOpen={isOpen}
+        type={LimitReached.ANALYTICS}
+      />
+      <StatsCards stats={stats} pos="absolute" top={10} />
+    </Flex>
+  )
+}

apps/builder/src/features/analytics/components/StatsCards.tsx

@@ -0,0 +1,46 @@
+import {
+  GridProps,
+  SimpleGrid,
+  Skeleton,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { Stats } from 'models'
+import React from 'react'
+
+export const StatsCards = ({
+  stats,
+  ...props
+}: { stats?: Stats } & GridProps) => {
+  return (
+    <SimpleGrid columns={{ base: 1, md: 3 }} spacing="6" {...props}>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Views</StatLabel>
+        {stats ? (
+          <StatNumber>{stats.totalViews}</StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Starts</StatLabel>
+        {stats ? (
+          <StatNumber>{stats.totalStarts}</StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+      <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
+        <StatLabel>Completion rate</StatLabel>
+        {stats ? (
+          <StatNumber>
+            {Math.round((stats.totalCompleted / stats.totalStarts) * 100)}%
+          </StatNumber>
+        ) : (
+          <Skeleton w="50%" h="10px" mt="2" />
+        )}
+      </Stat>
+    </SimpleGrid>
+  )
+}