diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx index a1b0a025..d5aaeca8 100644 --- a/src/pages/(admin)/BatchCodeGenerator.tsx +++ b/src/pages/(admin)/BatchCodeGenerator.tsx @@ -14,6 +14,8 @@ import {toast} from "react-toastify"; import ShortUniqueId from "short-unique-id"; import {useFilePicker} from "use-file-picker"; import readXlsxFile from "read-excel-file"; +import Modal from "@/components/Modal"; +import {BsQuestionCircleFill} from "react-icons/bs"; const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/); @@ -32,6 +34,7 @@ export default function BatchCodeGenerator({user}: {user: User}) { const [expiryDate, setExpiryDate] = useState(null); const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true); const [type, setType] = useState("student"); + const [showHelp, setShowHelp] = useState(false); const {users} = useUsers(); @@ -111,52 +114,85 @@ export default function BatchCodeGenerator({user}: {user: User}) { }; return ( -
- - - {user && (user.type === "developer" || user.type === "admin") && ( - <> -
- - - Enabled - + <> + setShowHelp(false)} title="Excel File Format"> +
+ Please upload an Excel file with the following format: + + + + + + + + + + + +
First NameLast NameCountryPassport/National IDE-mailPhone Number
+ + Notes: +
    +
  • - All incorrect e-mails will be ignored;
  • +
  • - All already registered e-mails will be ignored;
  • +
  • - You may have a header row with the format above, however, it is not necessary;
  • +
  • - All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.
  • +
+
+
+
+
+
+ +
setShowHelp(true)}> +
- {isExpiryDateEnabled && ( - moment(date).isAfter(new Date())} - dateFormat="dd/MM/yyyy" - selected={expiryDate} - onChange={(date) => setExpiryDate(date)} - /> - )} - - )} - - {user && ( - - )} - -
+
+ + {user && (user.type === "developer" || user.type === "admin") && ( + <> +
+ + + Enabled + +
+ {isExpiryDateEnabled && ( + moment(date).isAfter(new Date())} + dateFormat="dd/MM/yyyy" + selected={expiryDate} + onChange={(date) => setExpiryDate(date)} + /> + )} + + )} + + {user && ( + + )} + +
+ ); }