diff --git a/client/src/components/ControlledInputs/CtlTextInput.tsx b/client/src/components/ControlledInputs/CtlTextInput.tsx index 7c48aac9..2e357271 100644 --- a/client/src/components/ControlledInputs/CtlTextInput.tsx +++ b/client/src/components/ControlledInputs/CtlTextInput.tsx @@ -55,7 +55,7 @@ export default function CtlTextInput< ? true : false } // Display error message if showErrorMsg is true, otherwise just display error state - className="mt-1" + className={`mt-1 ${rest.disabled ? 'bg-gray-200 border-slate-600 border rounded-md' : ''}`} {...rest} /> diff --git a/client/src/components/support/CreateTicketFlow.tsx b/client/src/components/support/CreateTicketFlow.tsx index 30922179..c60cf4d7 100644 --- a/client/src/components/support/CreateTicketFlow.tsx +++ b/client/src/components/support/CreateTicketFlow.tsx @@ -23,6 +23,8 @@ import { useTypedSelector } from "../../state/hooks"; import { Link, useLocation } from "react-router-dom"; import FileUploader from "../FileUploader"; import TurnstileWidget from "../util/TurnstileWidget"; +import { useParams } from "react-router-dom-v5-compat"; +import { SupportTicketPriority } from "../../types/support"; interface CreateTicketFlowProps { isLoggedIn: boolean; @@ -59,14 +61,10 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { const [challengePassed, setChallengePassed] = useState(true); const [confirmEmail, setConfirmEmail] = useState(""); const [startedConfirming, setStartedConfirming] = useState(false); + const [didReceiveADAPTParams, setDidReceiveADAPTParams] = useState(false); // disable certain fields if params are received for adapt access code request useEffect(() => { - const searchParams = new URLSearchParams(location.search); - if (searchParams.has("fromURL")) { - const captured = new URL(searchParams.get("fromURL") || ""); - setValue("capturedURL", captured.toString()); - setAutoCapturedURL(true); - } + processSearchParams(); }, []); // useEffect(() => { @@ -111,6 +109,40 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { } }, []); + function processSearchParams() { + const searchParams = new URLSearchParams(location.search); + if (searchParams.has("fromURL")) { + const captured = new URL(searchParams.get("fromURL") || ""); + setValue("capturedURL", captured.toString()); + setAutoCapturedURL(true); + } + + let categoryParam; + let priorityParam; + + if (searchParams.has('category')) { + const found = SupportTicketCategoryOptions.find((opt) => opt.value === searchParams.get('category')); + if (found) { + categoryParam = found.value; + } + } + + if (searchParams.has('priority')) { + const found = SupportTicketPriorityOptions.find((opt) => opt.value === searchParams.get('priority')); + if (found) { + priorityParam = found.value; + } + } + + if (categoryParam && priorityParam && categoryParam === 'adaptcode') { + setValue('title', 'ADAPT Access Code Request'); + setValue('category', categoryParam); + setValue('priority', priorityParam as SupportTicketPriority); + setValue("description", "I am requesting an access code for ADAPT."); + setDidReceiveADAPTParams(true); + } + } + const submitDisabled = useMemo(() => { if (loading) return true; if ((!user || !user.uuid) && !challengePassed) { @@ -234,6 +266,8 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { return charsRemain; }; + const disabledInputClasses = '!bg-gray-200 !border-slate-600 !border !rounded-md' + return (
= ({ isLoggedIn }) => { rules={required} required maxLength={200} - className="" + disabled={didReceiveADAPTParams} />
@@ -359,6 +393,8 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { selection search placeholder="Select the category of your ticket" + disabled={didReceiveADAPTParams} + className={didReceiveADAPTParams ? disabledInputClasses : ''} /> )} /> @@ -418,6 +454,8 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { fluid selection placeholder="Select the priority of your ticket" + disabled={didReceiveADAPTParams} + className={didReceiveADAPTParams ? disabledInputClasses : ''} /> )} /> @@ -451,6 +489,8 @@ const CreateTicketFlow: React.FC = ({ isLoggedIn }) => { value={watch("description")} onInput={(e) => setValue("description", e.currentTarget.value)} maxLength={1000} + disabled={watch("category") === 'adaptcode' && didReceiveADAPTParams} + className={didReceiveADAPTParams ? disabledInputClasses : ''} />

Chars Remaining: {getRemainingChars(watch("description"))}.