Skip to content

Commit

Permalink
Fix/contact us form (#2504)
Browse files Browse the repository at this point in the history 
* Updates support forms with new fields

* Updates language strings

* Updates unit test

* Adds basic cypress test

* PR updates

* PR updates 2
  • Loading branch information
@thiessenp-cds
thiessenp-cds authored Aug 11, 2023
1 parent 8c3caa0 commit 0300e33
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 15 deletions.
11 changes: 10 additions & 1 deletion __tests__/api/request/support.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ function runEmailAPITests() {
supportType: "support",
name: "name",
email: "email@email.com",
department: "Department",
branch: "Branch",
jobTitle: "Job Title",
request: "request",
description: "description",
},
Expand All @@ -129,6 +132,9 @@ function runEmailAPITests() {
name: "name",
email: "email@email.com",
request: "request",
department: "Department",
branch: "Branch",
jobTitle: "Job Title",
description: "description",
},
});
Expand All @@ -154,7 +160,7 @@ function runEmailAPITests() {

await support(req, res);

expect(res.statusCode).toEqual(404);
expect(res.statusCode).toEqual(400);
expect(JSON.parse(res._getData())).toMatchObject({ error: "Malformed request" });
});

Expand All @@ -172,6 +178,9 @@ function runEmailAPITests() {
supportType: "support",
name: "name",
email: "email@email.com",
department: "Department",
branch: "Branch",
jobTitle: "Job Title",
request: "request",
description: "description",
},
Expand Down
64 changes: 64 additions & 0 deletions cypress/e2e/support_pages.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
describe("Support Pages", () => {
const supportFormTests = () => {
it("Required fields stops submission", () => {
cy.get("button[type='submit']").click();
cy.get("p[data-testid='errorMessage']").should("be.visible");
});

it("Invalid email stops submission", () => {
cy.get("#email").type("bad@email");
cy.get("button[type='submit']").click();
cy.get("#errorMessageemail").should("be.visible");
});

it("Valid submission succeeds", () => {
cy.get("#name").type("1");
cy.get("#email").type("good@email.com");
cy.get("#department").type("1");
cy.get("#branch").type("1");
cy.get("#jobTitle").type("1");
cy.get("label[for='request-question']").click();
cy.get("#description").type("1");
cy.get("button[type='submit']").click();
cy.get("h1").contains("Thank you for your request");
});
};

describe("Support Page", () => {
beforeEach(() => {
cy.useFlag("supportForms", true);
cy.visit("/en/form-builder/support/");
});

it("English page loads", () => {
cy.get("h1").should("contain", "Get support");
});

it("French page loads", () => {
cy.get("a[lang='fr']").click();
cy.url().should("contain", "/fr");
cy.get("h1").should("contain", "Soutien");
});

supportFormTests();
});

describe("Contact Us Page", () => {
beforeEach(() => {
cy.useFlag("supportForms", true);
cy.visit("/en/form-builder/support/contactus");
});

it("English page loads", () => {
cy.get("h1").should("contain", "Contact us");
});

it("French page loads", () => {
cy.get("a[lang='fr']").click();
cy.url().should("contain", "/fr");
cy.get("h1").should("contain", "Contactez-nous");
});

supportFormTests();
});
});
42 changes: 39 additions & 3 deletions pages/api/request/support.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { logMessage } from "@lib/logger";

// Allows an authenticated or unauthenticated user to send an email requesting help
const requestSupport = async (req: NextApiRequest, res: NextApiResponse) => {
const { supportType, name, email, request, description } = req.body;
const { supportType, name, email, request, description, department, branch, jobTitle } = req.body;

if (!name || !email || !request || !description) {
return res.status(404).json({ error: "Malformed request" });
if (!name || !email || !request || !description || !department || !branch || !jobTitle) {
return res.status(400).json({ error: "Malformed request" });
}

const to =
Expand Down Expand Up @@ -36,6 +36,15 @@ const requestSupport = async (req: NextApiRequest, res: NextApiResponse) => {
emailBody = `
${name} (${email}) has requested we contact them for the form-builder.
Department or agency:
${department}
Branch or sector:
${branch}
Job Title:
${jobTitle}
Contact request:
${requestParsed}
Expand All @@ -45,6 +54,15 @@ ${description}
****
${name} (${email}) a demandé que nous les contactions pour le générateur de formulaires..
Ministère ou organisme:
${department}
Direction ou secteur:
${branch}
Titre de poste:
${jobTitle}
Demande de contact soutien:
${requestParsed}
Expand All @@ -55,6 +73,15 @@ ${description}
emailBody = `
${name} (${email}) has requested support for the form-builder.
Department:
${department}
Branch:
${branch}
Job Title:
${jobTitle}
Support request:
${requestParsed}
Expand All @@ -64,6 +91,15 @@ ${description}
****
${name} (${email}) a demandé de soutien des form-builder.
Ministère ou organisme:
${department}
Direction ou secteur:
${branch}
Titre de poste:
${jobTitle}
Demande de soutien:
${requestParsed}
Expand Down
96 changes: 87 additions & 9 deletions pages/form-builder/support/[[...supportType]].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export default function Contactus() {
const handleRequest = async (
name: string,
email: string,
department: string,
branch: string,
jobTitle: string,
request: [string] | string,
description: string
) => {
Expand All @@ -48,12 +51,12 @@ export default function Contactus() {
"Content-Type": "application/json",
"X-CSRF-Token": token,
},
data: { supportType, name, email, request, description },
data: { supportType, name, email, department, branch, jobTitle, request, description },
// If development mode disable timeout
timeout: process.env.NODE_ENV === "production" ? 60000 : 0,
}).catch((err) => {
logMessage.error(err);
setErrorMessage(t("submissionError"));
setErrorMessage(t("contactus.errors.submissionError"));
});
};

Expand All @@ -62,6 +65,9 @@ export default function Contactus() {
email: Yup.string()
.required(t("input-validation.required", { ns: "common" }))
.email(t("input-validation.email", { ns: "common" })),
department: Yup.string().required(t("input-validation.required", { ns: "common" })),
branch: Yup.string().required(t("input-validation.required", { ns: "common" })),
jobTitle: Yup.string().required(t("input-validation.required", { ns: "common" })),
request:
supportType === "contactus"
? Yup.array()
Expand Down Expand Up @@ -116,6 +122,34 @@ export default function Contactus() {
required
/>
</div>
<div className="focus-group mt-14">
<Label id={"label-department"} htmlFor={"department"} className="required" required>
{t("contactus.department")}
</Label>
<TextInput
type={"text"}
id={"department"}
name={"department"}
className="required w-[34rem]"
/>
</div>
<div className="focus-group mt-14">
<Label id={"label-branch"} htmlFor={"branch"} className="required" required>
{t("contactus.branch")}
</Label>
<TextInput type={"text"} id={"branch"} name={"branch"} className="required w-[34rem]" />
</div>
<div className="focus-group mt-14">
<Label id={"label-jobTitle"} htmlFor={"jobTitle"} className="required" required>
{t("contactus.jobTitle")}
</Label>
<TextInput
type={"text"}
id={"jobTitle"}
name={"jobTitle"}
className="required w-[34rem]"
/>
</div>
<fieldset className="focus-group">
<legend className="gc-label required">
{t("contactus.request.title")}{" "}
Expand Down Expand Up @@ -197,13 +231,13 @@ export default function Contactus() {
</Attention>
<div className="focus-group mt-14">
<Label id={"label-name"} htmlFor={"name"} className="required" required>
{t("contactus.name")}
{t("support.name")}
</Label>
<TextInput type={"text"} id={"name"} name={"name"} className="required w-[34rem]" />
</div>
<div className="focus-group">
<Label id={"label-email"} htmlFor={"email"} className="required" required>
{t("contactus.email")}
{t("support.email")}
</Label>
<TextInput
type={"text"}
Expand All @@ -213,6 +247,34 @@ export default function Contactus() {
required
/>
</div>
<div className="focus-group mt-14">
<Label id={"label-department"} htmlFor={"department"} className="required" required>
{t("support.department")}
</Label>
<TextInput
type={"text"}
id={"department"}
name={"department"}
className="required w-[34rem]"
/>
</div>
<div className="focus-group mt-14">
<Label id={"label-branch"} htmlFor={"branch"} className="required" required>
{t("support.branch")}
</Label>
<TextInput type={"text"} id={"branch"} name={"branch"} className="required w-[34rem]" />
</div>
<div className="focus-group mt-14">
<Label id={"label-jobTitle"} htmlFor={"jobTitle"} className="required" required>
{t("support.jobTitle")}
</Label>
<TextInput
type={"text"}
id={"jobTitle"}
name={"jobTitle"}
className="required w-[34rem]"
/>
</div>
<fieldset className="focus-group">
<legend className="gc-label required">
{t("support.request.title")}{" "}
Expand Down Expand Up @@ -279,21 +341,37 @@ export default function Contactus() {
<div aria-live="polite">
{!isSuccessScreen && (
<Formik
initialValues={{ name: "", email: "", request: "", description: "" }}
onSubmit={async ({ name, email, request, description }) => {
initialValues={{
name: "",
email: "",
department: "",
branch: "",
jobTitle: "",
request: "",
description: "",
}}
onSubmit={async ({ name, email, department, branch, jobTitle, request, description }) => {
setIsSubmitting(true);
try {
const response = await handleRequest(name, email, request, description);
const response = await handleRequest(
name,
email,
department,
branch,
jobTitle,
request,
description
);
setIsSubmitting(false);
if (response?.status !== 200) {
throw new Error(t("submissionError"));
throw new Error(t("contactus.errors.submissionError"));
}
setErrorMessage("");
setIsSuccessScreen(true);
} catch (err) {
logMessage.error(err);
setIsSubmitting(false);
setErrorMessage(t("submissionError"));
setErrorMessage(t("contactus.errors.submissionError"));
}
}}
validateOnChange={false}
Expand Down
13 changes: 12 additions & 1 deletion public/static/locales/en/form-builder.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,9 @@
"title": "Additional information"
},
"email": "Your email",
"department": "Department or agency",
"branch": "Branch or sector",
"jobTitle": "Job Title",
"gcFormsTeamLink": "Canada.ca Contact us",
"gcFormsTeamPart1": "The GC Forms team provides services to people who work in the government. We cannot give general advice to the public about the forms that we host. For other enquiries, go to",
"gcFormsTeamPart2": "to find the department or agency that can help you.",
Expand All @@ -218,7 +221,10 @@
},
"supportFormLink": "Support form",
"title": "Contact us",
"useThisForm": "Use this form to learn more about GC Forms and how it can work in your department."
"useThisForm": "Use this form to learn more about GC Forms and how it can work in your department.",
"errors": {
"submissionError": "Something went wrong. Please try again later."
}
},
"copyButton": "Copy to clipboard",
"copyMessage": "(template copied)",
Expand Down Expand Up @@ -571,6 +577,11 @@
"description": "Provide more context around the problem you are experiencing.",
"title": "Additional information"
},
"name": "Your name",
"email": "Your email",
"department": "Department or agency",
"branch": "Branch or sector",
"jobTitle": "Job Title",
"gcFormsTeamLink": "Canada.ca Contact us",
"gcFormsTeamPart1": "The GC Forms team provides services to people who work in the government. We cannot give general advice to the public about the forms that we host. For other enquiries, go to",
"gcFormsTeamPart2": "to find the department or agency that can help you.",
Expand Down
Loading

0 comments on commit 0300e33

Please sign in to comment.