diff --git a/apps/builder/assets/styles/submissionsTable.css b/apps/builder/assets/styles/submissionsTable.css new file mode 100644 index 0000000000..1931ba002e --- /dev/null +++ b/apps/builder/assets/styles/submissionsTable.css @@ -0,0 +1,11 @@ +.table-wrapper { + background-image: linear-gradient(to right, white, white), + linear-gradient(to right, white, white), + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)); + background-position: left center, right center, left center, right center; + background-repeat: no-repeat; + background-color: white; + background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%; + background-attachment: local, local, scroll, scroll; +} diff --git a/apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx b/apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx new file mode 100644 index 0000000000..53f3b0c60e --- /dev/null +++ b/apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx @@ -0,0 +1,77 @@ +/* eslint-disable react/jsx-key */ +import { Box, Flex } from '@chakra-ui/react' +import { useTypebot } from 'contexts/TypebotContext' +import React from 'react' +import { useTable } from 'react-table' +import { parseSubmissionsColumns } from 'services/publicTypebot' + +// eslint-disable-next-line @typescript-eslint/ban-types +type SubmissionsTableProps = {} + +export const SubmissionsTable = ({}: SubmissionsTableProps) => { + const { publishedTypebot } = useTypebot() + const columns: any = React.useMemo( + () => parseSubmissionsColumns(publishedTypebot), + [publishedTypebot] + ) + const data = React.useMemo(() => [], []) + const { getTableProps, headerGroups, rows, prepareRow, getTableBodyProps } = + useTable({ columns, data }) + return ( + + + + {headerGroups.map((headerGroup) => { + return ( + + {headerGroup.headers.map((column) => { + return ( + + {column.render('Header')} + + ) + })} + + ) + })} + + + + {rows.map((row) => { + prepareRow(row) + return ( + + {row.cells.map((cell) => { + return ( + + {cell.render('Cell')} + + ) + })} + + ) + })} + + + + ) +} diff --git a/apps/builder/components/results/SubmissionsTable/index.tsx b/apps/builder/components/results/SubmissionsTable/index.tsx new file mode 100644 index 0000000000..9dd1f677db --- /dev/null +++ b/apps/builder/components/results/SubmissionsTable/index.tsx @@ -0,0 +1 @@ +export { SubmissionsTable } from './SubmissionsTable' diff --git a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx index 34f3a85c3a..330b77b23e 100644 --- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx +++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx @@ -69,7 +69,7 @@ export const TypebotHeader = () => { + + + {isAnalytics ? : } + + + ) +} diff --git a/apps/builder/layouts/results/SubmissionContent.tsx b/apps/builder/layouts/results/SubmissionContent.tsx new file mode 100644 index 0000000000..b49a41f2b5 --- /dev/null +++ b/apps/builder/layouts/results/SubmissionContent.tsx @@ -0,0 +1,10 @@ +import { SubmissionsTable } from 'components/results/SubmissionsTable' +import React from 'react' + +export const SubmissionsContent = () => { + return ( + <> + + + ) +} diff --git a/apps/builder/package.json b/apps/builder/package.json index 53b2d2098f..3307f652fd 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -38,6 +38,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-frame-component": "^5.2.1", + "react-table": "^7.7.0", "short-uuid": "^4.2.0", "slate": "^0.72.0", "slate-history": "^0.66.0", @@ -53,6 +54,7 @@ "@types/node": "^16.11.9", "@types/nprogress": "^0.2.0", "@types/react": "^17.0.37", + "@types/react-table": "^7.7.9", "@types/testing-library__cypress": "^5.0.9", "@typescript-eslint/eslint-plugin": "^5.8.0", "cypress": "^9.2.0", diff --git a/apps/builder/pages/_app.tsx b/apps/builder/pages/_app.tsx index f6aedacaaa..12ac50f662 100644 --- a/apps/builder/pages/_app.tsx +++ b/apps/builder/pages/_app.tsx @@ -7,6 +7,7 @@ import { useRouterProgressBar } from 'libs/routerProgressBar' import 'assets/styles/routerProgressBar.css' import 'assets/styles/plate.css' import 'focus-visible/dist/focus-visible' +import 'assets/styles/submissionsTable.css' const App = ({ Component, pageProps }: AppProps) => { useRouterProgressBar() diff --git a/apps/builder/pages/typebots/[id]/results.tsx b/apps/builder/pages/typebots/[id]/results.tsx new file mode 100644 index 0000000000..f2594d8692 --- /dev/null +++ b/apps/builder/pages/typebots/[id]/results.tsx @@ -0,0 +1,23 @@ +import { Flex } from '@chakra-ui/layout' +import withAuth from 'components/HOC/withUser' +import { ResultsContent } from 'layouts/results/ResultsContent' +import { Seo } from 'components/Seo' +import { TypebotHeader } from 'components/shared/TypebotHeader' +import { TypebotContext } from 'contexts/TypebotContext' +import { useRouter } from 'next/router' +import React from 'react' + +const ResultsPage = () => { + const { query } = useRouter() + return ( + + + + + + + + ) +} + +export default withAuth(ResultsPage) diff --git a/apps/builder/pages/typebots/[id]/results/analytics.tsx b/apps/builder/pages/typebots/[id]/results/analytics.tsx new file mode 100644 index 0000000000..77ea466a6b --- /dev/null +++ b/apps/builder/pages/typebots/[id]/results/analytics.tsx @@ -0,0 +1,23 @@ +import { Flex } from '@chakra-ui/layout' +import withAuth from 'components/HOC/withUser' +import { ResultsContent } from 'layouts/results/ResultsContent' +import { Seo } from 'components/Seo' +import { TypebotHeader } from 'components/shared/TypebotHeader' +import { TypebotContext } from 'contexts/TypebotContext' +import { useRouter } from 'next/router' +import React from 'react' + +const AnalyticsPage = () => { + const { query } = useRouter() + return ( + + + + + + + + ) +} + +export default withAuth(AnalyticsPage) diff --git a/apps/builder/services/publicTypebot.ts b/apps/builder/services/publicTypebot.ts index 631d1456a9..d29647c827 100644 --- a/apps/builder/services/publicTypebot.ts +++ b/apps/builder/services/publicTypebot.ts @@ -1,4 +1,11 @@ -import { PublicTypebot, Typebot } from 'bot-engine' +import { + Block, + InputStep, + PublicTypebot, + Step, + StepType, + Typebot, +} from 'bot-engine' import { sendRequest } from './utils' import shortId from 'short-uuid' @@ -33,3 +40,18 @@ export const updatePublishedTypebot = async ( method: 'PUT', body: typebot, }) + +export const parseSubmissionsColumns = ( + typebot?: PublicTypebot +): { + Header: string + accessor: string +}[] => + (typebot?.blocks ?? []) + .filter(blockContainsInput) + .map((block) => ({ Header: block.title, accessor: block.id })) + +const blockContainsInput = (block: Block) => block.steps.some(stepIsInput) + +const stepIsInput = (step: Step): step is InputStep => + step.type === StepType.TEXT_INPUT diff --git a/yarn.lock b/yarn.lock index cc9e177ee0..3071bde701 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1467,6 +1467,13 @@ dependencies: "@types/react" "*" +"@types/react-table@^7.7.9": + version "7.7.9" + resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.9.tgz#ea82875775fc6ee71a28408dcc039396ae067c92" + integrity sha512-ejP/J20Zlj9VmuLh73YgYkW2xOSFTW39G43rPH93M4mYWdMmqv66lCCr+axZpkdtlNLGjvMG2CwzT4S6abaeGQ== + dependencies: + "@types/react" "*" + "@types/react-transition-group@^4.4.4": version "4.4.4" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" @@ -6110,6 +6117,11 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" +react-table@^7.7.0: + version "7.7.0" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912" + integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA== + react-transition-group@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"