-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* first commit * feedback widget --------- Co-authored-by: Jordan <[email protected]>
- Loading branch information
Showing
13 changed files
with
285 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { postFeedbackToGcNotify } from "../../lib/notify/postFeedbackToGcNotify"; | ||
| import handler from "../../pages/api/submit-feedback"; | ||
| import { createMocks } from "node-mocks-http"; | ||
|
|
||
| jest.mock("../../lib/notify/postFeedbackToGcNotify"); | ||
|
|
||
| describe("Feeback widget api tests", () => { | ||
| beforeEach(() => { | ||
| postFeedbackToGcNotify.mockRestore(); | ||
| }); | ||
|
|
||
| it("it should post to GC Notify", async () => { | ||
| postFeedbackToGcNotify.mockReturnValue( | ||
| new Promise((resolve) => resolve({ ok: true })) | ||
| ); | ||
| const { req, res } = createMocks({ | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: { | ||
| page: "/home", | ||
| "what-was-wrong": "input-field-name", | ||
| }, | ||
| }); | ||
| await handler(req, res); | ||
| expect(res._getStatusCode()).toBe(200); | ||
| expect(JSON.parse(res._getData())).toEqual({ | ||
| page: "/home", | ||
| "what-was-wrong": "input-field-name", | ||
| }); | ||
| }); | ||
|
|
||
| it("it should error if required field isn't included", async () => { | ||
| const { req, res } = createMocks({ | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: { | ||
| page: "/home", | ||
| }, | ||
| }); | ||
| await handler(req, res); | ||
| expect(res._getStatusCode()).toBe(400); | ||
| expect(JSON.parse(res._getData())).toEqual({ | ||
| message: "required field missing", | ||
| }); | ||
| }); | ||
|
|
||
| it("it should error if there was a bad post request", async () => { | ||
| postFeedbackToGcNotify.mockReturnValue( | ||
| new Promise((resolve) => resolve({ ok: false })) | ||
| ); | ||
| const { req, res } = createMocks({ | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: { | ||
| page: "/home", | ||
| "what-was-wrong": "input-field-name", | ||
| }, | ||
| }); | ||
| await handler(req, res); | ||
| expect(res._getStatusCode()).toBe(500); | ||
| expect(JSON.parse(res._getData())).toEqual({ | ||
| message: "something went wrong", | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import { useState } from "react"; | ||
| import Image from "next/image"; | ||
| import { useRouter } from "next/router"; | ||
| import { useTranslation } from "next-i18next"; | ||
|
|
||
| function Feedback() { | ||
| const [isSubmitted, setIsSubmitted] = useState(false); | ||
| const [isProvidingFeedback, setIsProvidingFeedback] = useState(false); | ||
|
|
||
| const router = useRouter(); | ||
| const { t } = useTranslation("common"); | ||
|
|
||
| async function handleSubmit(e) { | ||
| e.preventDefault(); | ||
| try { | ||
| await fetch("/api/submit-feedback", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify(Object.fromEntries(new FormData(e.target))), | ||
| }); | ||
| } finally { | ||
| setIsSubmitted(true); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="sm:flex items-center justify-between gap-20 bg-gray-light-200 p-5 max-w-[568px] border rounded"> | ||
| {isSubmitted && ( | ||
| <div className="flex gap-5 items-center"> | ||
| <Image | ||
| src="/success_img.svg" | ||
| alt="" | ||
| width={25} | ||
| height={25} | ||
| style={{ width: 25, height: 25 }} | ||
| priority | ||
| ></Image> | ||
| <p>{t("feedback.thank-you")}</p> | ||
| </div> | ||
| )} | ||
|
|
||
| {isProvidingFeedback && !isSubmitted && ( | ||
| <form onSubmit={handleSubmit} className="space-y-5"> | ||
| <input type="hidden" name="page" value={router.asPath} /> | ||
| <fieldset> | ||
| <legend className="font-bold mb-2"> | ||
| {t("feedback.what-was-wrong")} | ||
| </legend> | ||
| <label className="flex gap-2"> | ||
| <input | ||
| type="radio" | ||
| name="what-was-wrong" | ||
| value="cant-find-info" | ||
| required | ||
| ></input> | ||
| {t("feedback.cant-find-info")} | ||
| </label> | ||
| <label className="flex gap-2"> | ||
| <input | ||
| type="radio" | ||
| name="what-was-wrong" | ||
| value="hard-to-understand" | ||
| ></input> | ||
| {t("feedback.hard-to-understand")} | ||
| </label> | ||
| <label className="flex gap-2"> | ||
| <input | ||
| type="radio" | ||
| name="what-was-wrong" | ||
| value="there-was-an-error" | ||
| ></input> | ||
| {t("feedback.there-was-an-error")} | ||
| </label> | ||
| <label className="flex gap-2"> | ||
| <input | ||
| type="radio" | ||
| name="what-was-wrong" | ||
| value="other-reason" | ||
| ></input> | ||
|
|
||
| {t("feedback.other-reason")} | ||
| </label> | ||
| </fieldset> | ||
| <label className="flex flex-col gap-2"> | ||
| <span className="font-bold"> | ||
| {t("feedback.provide-more-details")} | ||
| </span> | ||
| <span id="extra-info" className="font-[500] text-xs"> | ||
| {t("feedback.no-protected-info")} | ||
| </span> | ||
| <span id="maximum-characters" className="font-[300] text-xs"> | ||
| {t("feedback.maximum-characters")} | ||
| </span> | ||
| <textarea | ||
| name="extra-details" | ||
| aria-describedby="extra-info maximum-characters" | ||
| maxLength={300} | ||
| className="p-1" | ||
| ></textarea> | ||
| </label> | ||
| <button className="bg-multi-blue-blue70 hover:bg-multi-blue-blue60e text-white rounded py-1 px-2"> | ||
| {t("feedback.submit")} | ||
| </button> | ||
| </form> | ||
| )} | ||
|
|
||
| {!isSubmitted && !isProvidingFeedback && ( | ||
| <> | ||
| <p className="font-semibold text-sm">{t("feedback.did-you-find")}</p> | ||
| <div className="flex gap-2"> | ||
| <button | ||
| onClick={() => setIsSubmitted(true)} | ||
| className="bg-multi-blue-blue70 hover:bg-multi-blue-blue60e text-white rounded py-1 px-2" | ||
| > | ||
| {t("feedback.yes")} | ||
| </button> | ||
| <button | ||
| onClick={() => setIsProvidingFeedback(true)} | ||
| className="bg-multi-blue-blue70 hover:bg-multi-blue-blue60e text-white rounded py-1 px-2" | ||
| > | ||
| {t("feedback.no")} | ||
| </button> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Feedback; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export async function postFeedbackToGcNotify(data) { | ||
| return await fetch( | ||
| `${process.env.NOTIFY_BASE_API_URL}/v2/notifications/email`, | ||
| { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Authorization: `ApiKey-v1 ${process.env.NOTIFY_API_KEY}`, | ||
| }, | ||
| body: JSON.stringify({ | ||
| email_address: process.env.THANK_YOU_EMAIL, | ||
| template_id: process.env.NOTIFY_FEEDBACK_TEMPLATE_ID, | ||
| personalisation: { | ||
| ...data, | ||
| }, | ||
| }), | ||
| } | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { postFeedbackToGcNotify } from "../../lib/notify/postFeedbackToGcNotify"; | ||
|
|
||
| export default async function handler(req, res) { | ||
| const data = req.body; | ||
|
|
||
| if (!data["what-was-wrong"]) { | ||
| res.status(400).json({ message: "required field missing" }); | ||
| } else { | ||
| try { | ||
| let r = await postFeedbackToGcNotify(data); | ||
|
|
||
| if (r.ok) { | ||
| res.status(200).json(data); | ||
| } else { | ||
| throw new Exception("bad request"); | ||
| } | ||
| } catch (e) { | ||
| res.status(500).json({ message: "something went wrong" }); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.