diff --git a/package.json b/package.json index 7fb041e..f821887 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "notistack": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-pdf": "^9.1.0", "react-refresh": "^0.11.0", "react-router-dom": "^6.22.3", "resolve": "^1.20.0", diff --git a/public/TermsAndConditions.pdf b/public/TermsAndConditions.pdf new file mode 100644 index 0000000..bbee17a Binary files /dev/null and b/public/TermsAndConditions.pdf differ diff --git a/src/components/TermsAndConditionsCard.tsx b/src/components/SelectRoleCard.tsx similarity index 88% rename from src/components/TermsAndConditionsCard.tsx rename to src/components/SelectRoleCard.tsx index 148bf8b..061a9e9 100644 --- a/src/components/TermsAndConditionsCard.tsx +++ b/src/components/SelectRoleCard.tsx @@ -9,7 +9,7 @@ export enum Role { Participant = 'participant' } -const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => { +const SelectRoleCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => { const [selectedRole, setSelectedRole] = useState(Role.Participant); const [checked, setChecked] = useState(false); const [isHidden, setIsHidden] = useState(false); @@ -75,9 +75,9 @@ const TermsAndConditionsCard = ({ handleAccept, handleRoleChange }: { handleAcce Continue - setisDialogOpen(false)}/> + setisDialogOpen(false)}/> ); }; -export default TermsAndConditionsCard; +export default SelectRoleCard; diff --git a/src/components/TermsAndConditionsBox.tsx b/src/components/TermsAndConditionsBox.tsx new file mode 100644 index 0000000..27256af --- /dev/null +++ b/src/components/TermsAndConditionsBox.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import { Document, Page, pdfjs } from 'react-pdf'; + +import { Typography } from '@mui/material'; + +// https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#import-worker-recommended +pdfjs.GlobalWorkerOptions.workerSrc = new URL( + 'pdfjs-dist/build/pdf.worker.min.mjs', + import.meta.url, +).toString(); + +const TermsAndConditionsBox = ({height}: {height: string}) => { + const [numPages, setNumPages] = useState(); + + function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { + setNumPages(numPages); + } + + return ( + <> + + Terms and Conditions + +
+ + {Array.apply(null, Array(numPages)) + .map((x, i) => i + 1) + .map((page) => { + return ( + + ); + })} + +
+ + ); +}; + +export default TermsAndConditionsBox; diff --git a/src/components/TermsAndConditionsDialog.tsx b/src/components/TermsAndConditionsDialog.tsx index 4ad3c6f..9e7a294 100644 --- a/src/components/TermsAndConditionsDialog.tsx +++ b/src/components/TermsAndConditionsDialog.tsx @@ -1,26 +1,19 @@ import React from 'react'; -import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button, Typography } from '@mui/material'; +import { Button, Dialog, DialogActions, DialogContent } from '@mui/material'; -import { TNC_PARTICIPANT_CONTENT, TNC_VALIDATOR_CONTENT } from '../constants'; +import TermsAndConditionsBox from './TermsAndConditionsBox'; interface TermsDialogProps { - isValidator: boolean; open: boolean; onClose: () => void; } -const TermsAndConditionsDialog: React.FC = ({ isValidator, open, onClose }) => { +const TermsAndConditionsDialog: React.FC = ({ open, onClose }) => { return ( - - Terms and Conditions + - - Onboard as a {isValidator ? "validator" : "participant"} - - -
- +