🪥 Consult submissions

apps/builder/layouts/results/ResultsContent.tsx

@@ -1,8 +1,17 @@
-import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
+import {
+  Button,
+  Flex,
+  HStack,
+  Stack,
+  Tag,
+  useToast,
+  Text,
+} from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
+import { useResultsCount } from 'services/results'
 import { AnalyticsContent } from './AnalyticsContent'
 import { SubmissionsContent } from './SubmissionContent'
 
@@ -13,6 +22,15 @@ export const ResultsContent = () => {
     () => router.pathname.endsWith('analytics'),
     [router.pathname]
   )
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const { totalResults } = useResultsCount({
+    typebotId: typebot?.id,
+    onError: (err) => toast({ title: err.name, description: err.message }),
+  })
   return (
     <Flex h="full" w="full" justifyContent="center" align="flex-start">
       <Stack maxW="1200px" w="full" pt="4" spacing={6}>
@@ -24,7 +42,12 @@ export const ResultsContent = () => {
             size="sm"
             href={`/typebots/${typebot?.id}/results`}
           >
-            Submissions
+            <Text>Submissions</Text>
+            {totalResults && (
+              <Tag size="sm" colorScheme="blue" ml="1">
+                {totalResults}
+              </Tag>
+            )}
           </Button>
           <Button
             as={NextChakraLink}
@@ -36,7 +59,15 @@ export const ResultsContent = () => {
             Analytics
           </Button>
         </HStack>
-        {isAnalytics ? <AnalyticsContent /> : <SubmissionsContent />}
+        {typebot &&
+          (isAnalytics ? (
+            <AnalyticsContent />
+          ) : (
+            <SubmissionsContent
+              typebotId={typebot.id}
+              totalResults={totalResults ?? 0}
+            />
+          ))}
       </Stack>
     </Flex>
   )

apps/builder/layouts/results/SubmissionContent.tsx

@@ -1,10 +1,75 @@
+import {
+  Button,
+  HStack,
+  Stack,
+  Tag,
+  useToast,
+  Text,
+  Fade,
+  Flex,
+} from '@chakra-ui/react'
+import { DownloadIcon, TrashIcon } from 'assets/icons'
 import { SubmissionsTable } from 'components/results/SubmissionsTable'
-import React from 'react'
+import React, { useMemo, useState } from 'react'
+import { useResults } from 'services/results'
+
+type Props = { typebotId: string; totalResults: number }
+export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
+  const [lastResultId, setLastResultId] = useState<string>()
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const { results } = useResults({
+    lastResultId,
+    typebotId,
+    onError: (err) => toast({ title: err.name, description: err.message }),
+  })
+
+  const handleNewSelection = (newSelection: string[]) => {
+    if (newSelection.length === selectedIds.length) return
+    setSelectedIds(newSelection)
+  }
+
+  const totalSelected = useMemo(
+    () =>
+      selectedIds.length === results?.length
+        ? totalResults
+        : selectedIds.length,
+    [results?.length, selectedIds.length, totalResults]
+  )
 
-export const SubmissionsContent = () => {
   return (
-    <>
-      <SubmissionsTable />
-    </>
+    <Stack>
+      <Flex w="full" justifyContent="flex-end">
+        <HStack>
+          <HStack as={Button} colorScheme="blue">
+            <DownloadIcon />
+            <Text>Export</Text>
+            <Fade in={totalSelected > 0} unmountOnExit>
+              <Tag colorScheme="blue" variant="subtle" size="sm">
+                {totalSelected}
+              </Tag>
+            </Fade>
+          </HStack>
+          <Fade in={totalSelected > 0} unmountOnExit>
+            <HStack as={Button} colorScheme="red">
+              <TrashIcon />
+              <Text>Delete</Text>
+              {totalSelected > 0 && (
+                <Tag colorScheme="red" variant="subtle" size="sm">
+                  {totalSelected}
+                </Tag>
+              )}
+            </HStack>
+          </Fade>
+        </HStack>
+      </Flex>
+
+      <SubmissionsTable results={results} onNewSelection={handleNewSelection} />
+    </Stack>
   )
 }