+
+ {touched && error && (
+
+ Error:{" "}
+ {error}
+
+ )}
+
+
+
+ );
+};
+
+const RenderMultiline = ({
+ id,
+ className,
+ rows,
+ cols,
+ datafieldname,
+ name,
+ label,
+ input,
+ errorMsg,
+ meta: { touched, error },
+ ...custom
+}) => {
+ return (
+ <>
+
+
+ {touched && error && (
+
+ Error:{" "}
+ {errorMsg || error}
+
+ )}
+
+
+
+ );
+};
+
+const RenderTextfield = ({
+ id,
+ className,
+ rows,
+ datafieldname,
+ name,
+ label,
+ input,
+ errorMsg,
+ meta: { touched, error },
+ ...custom
+}) => {
+ return (
+ <>
+
+
+ {touched && error && (
+
+ Error:{" "}
+ {errorMsg || error}
+
+ )}
+
+
+
+ );
+};
+
+const contactPurpose = (contactValue) => {
+ let contactPurposeBody;
+
+ switch (contactValue) {
+ case "plq":
+ contactPurposeBody = (
+ + Questions about Planning legislation or policy +
+ ); + break; + case "ipq": + contactPurposeBody = ( ++ Questions or comments about applications for major + infrastructure projects +
+ ); + break; + case "pcpq": + contactPurposeBody = ( ++ Questions or comments about planning and environmental + appeals +
+ ); + break; + case "pi": + contactPurposeBody = ( ++ Query about using the Casework Portal +
+ ); + break; + case "appadvice": + contactPurposeBody = ( +Advice How to submit an appeal
+ ); + break; + case "repadvice": + contactPurposeBody = ( ++ Advice How to comment on an appeal or application +
+ ); + break; + case "ceq": + contactPurposeBody = ( ++ Queries about forthcoming Hearing or Inquiry event +
+ ); + break; + case "other": + contactPurposeBody = ( +Other enquiry for PEDW
+ ); + break; + case "postdec": + contactPurposeBody = ( ++ Issues or questions about a case after the decision is + issued +
+ ); + break; + case "comp": + contactPurposeBody = ( +General Complaints of Compliments
+ ); + break; + default: + // code block + } + + return contactPurposeBody; +}; + +let t; + +let ContactUs = (props) => { + const { footerLinks, pages } = props; + let { t } = useTranslation(); + + const [formSubmitted, setFormSubmitted] = useState(false); + + const router = useRouter(); + const { locale } = router; + + const required = (value) => + value ? undefined : t("newappeal:is-required-label"); + + const emailRegex = + /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|(?:\[(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:.+)])$/; + + const email = (value) => + value && !emailRegex.test(value) + ? t("account:invalid-email-address-errormsg") + : undefined; + + const onSubmit = async (formValues) => { + // Only called if validation passes + sendContactEmail(formValues); + createCRMTask(formValues); + formValues.typeOfContact == "plq" && + sendPETEmail(formValues, props.petEmail); + console.log("Form submitted:", formValues); + }; + + const sendContactEmail = async (formValues) => { + Object.assign(formValues, { + "contactSubject": contactPurpose(formValues.typeOfContact).props + .children, + }); + + const reference = "PEDW-CONTACT-US"; + const templateId = "69228c5f-8500-40ff-a6c5-95a9434c3ec8"; + const templateIdCY = "b8f1f76d-4ab9-4a2f-b294-e3623c6095a3"; + + try { + const res = await sendEmail( + router.locale !== "en" ? templateIdCY : templateId, + formValues.contactEmail, + formValues, + reference + ); + + console.log("Email sent successfully."); + setFormSubmitted(true); + } catch (error) { + console.error("Email sending failed:", error); + alert("Something went wrong. Please try again later."); + // Required: inform redux-form this is a submit error + throw new SubmissionError({ + _error: "Failed to send email. Please try again later.", + }); + } + }; + + const sendPETEmail = async (formValues, petEmail) => { + const reference = "PEDW-CONTACT-US-PET"; + const templateId = "56bbdcf9-d63d-48e9-a794-3e253dd7498b"; + const templateIdCY = "00b794d3-29aa-434d-b696-0ef0b0337d79"; + + console.log(petEmail); + + try { + const res = await sendEmail( + templateId, + petEmail, + formValues, + reference + ); + + console.log("Email sent successfully."); + setFormSubmitted(true); + } catch (error) { + console.error("Email sending failed:", error); + alert("Something went wrong. Please try again later."); + // Required: inform redux-form this is a submit error + throw new SubmissionError({ + _error: "Failed to send email. Please try again later.", + }); + } + }; + + return ( +
+
+ {t("common:service-name")}
+
+
+ );
+};
+
+const selector = formValueSelector("contactUsForm"); // <-- same as form name
+
+// ContactUs = connect((state) => {
+// const typeOfContactValue = selector(state, "typeOfContact");
+
+// return {
+// typeOfContactValue,
+// initialValues: {
+// contactEmail:
+// state.accountDetails.accountDetails?.emailaddress1 || "",
+// },
+// };
+// })(ContactUs);
+
+const mapDispatchToProps = (dispatch) => ({});
+
+const mapStateToProps = (state) => {
+ const typeOfContactValue = selector(state, "typeOfContact");
+ const email = state.accountDetails.accountDetails?.emailaddress1;
+
+ return {
+ accountDetails: state.accountDetails,
+ typeOfContactValue,
+ initialValues: email ? { contactEmail: email } : {},
+ petEmail: process.env.NEXT_PUBLIC_PETEMAIL,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(
+ reduxForm({
+ form: "contactUsForm",
+ enableReinitialize: true,
+ destroyOnUnmount: false,
+ touchOnBlur: true,
+ touchOnChange: true,
+ onSubmitFail: (errors, dispatch, subnittError, props) => {
+ if (errors) {
+ // Touch all fields with errors so validation messages appear
+ const errorFields = Object.keys(errors);
+ dispatch(touch("contactUsForm", ...errorFields));
+
+ // Scroll to first error
+ const firstErrorField = errorFields[0];
+ const errorElement = document.querySelector(
+ `[name="${firstErrorField}"]`
+ );
+ if (
+ errorElement &&
+ typeof errorElement.scrollIntoView === "function"
+ ) {
+ errorElement.scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ });
+ errorElement.focus({ preventScroll: true });
+ } else {
+ console.warn(
+ "Could not find element for error field:",
+ firstErrorField
+ );
+ }
+ }
+
+ console.log("Redux Form onSubmitFail:", submitError);
+ },
+ })(ContactUs)
+);
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 02b49b02..646a3e89 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -2469,6 +2469,8 @@ ul#sharePageLinks.active {
display: block;
}
+
+
.eye {
/* margin: 90px; */
width: 13px;
@@ -2494,9 +2496,79 @@ ul#sharePageLinks.active {
top: 3px;
background-color: #aa1111;
}
+
+ &.mailLink {
+ width: 24px;
+ display: block;
+ margin-top: 5px;
+
+ }
+
+ .icon {
+ margin: 1px;
+ background-color: #fff;
+ border: 1px solid #aa1111;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+ margin-top: 0px;
+ margin-left: -3px;
+ }
+
+ .icon:after,
+ .icon:before {
+ background: #fff;
+ border: 1px solid #aa1111;
+ content: "";
+ position: absolute;
+ }
+
+ .icon:hover,
+ .icon:hover:after,
+ .icon:hover:before {
+ background-color: #fff;
+ }
+
+
+ .mailicon {
+ height: 11px;
+ top: 0px;
+ width: 17px;
+ margin-top: 2px;
+ }
+
+ .mailicon:after,
+ .mailicon:before {
+ border-top: none;
+ top: 4px;
+ width: 8px;
+ }
+
+ .mailicon:after {
+ left: -1px;
+ -webkit-transform: rotate(25deg);
+ -moz-transform: rotate(25deg);
+ -ms-transform: rotate(25deg);
+ -o-transform: rotate(25deg);
+ transform: rotate(25deg);
+ }
+
+ .mailicon:before {
+ right: -1px;
+ -webkit-transform: rotate(-25deg);
+ -moz-transform: rotate(-25deg);
+ -ms-transform: rotate(-25deg);
+ -o-transform: rotate(-25deg);
+ transform: rotate(-25deg);
+ }
+
+
+
}
+
+
// modal timeout
.modal {
@@ -2748,7 +2820,8 @@ fade {
}
-.govuk-link.watchCase {
+.govuk-link.watchCase,
+.govuk-link.mailNotification {
background-color: transparent;
border: none;
cursor: pointer;
@@ -2763,6 +2836,8 @@ fade {
}
}
+
+
.fieldArrayLink {
border: none;
background: no-repeat;
+
+
+
+
+
+
+
+
+
+
+
+ + Contact us{" "} +
+ +
+ {formSubmitted ? (
+
+
+
+ ) : (
+ <>
+ + Thank you for your enquiry +
+
+ We’ll get back to you as soon as
+ we can.
+
+ + Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Nulla congue leo ac quam + pulvinar, id vulputate libero + volutpat. Maecenas ut odio id + nisl laoreet dictum. Nam + faucibus, leo vitae egestas + lacinia, enim tortor bibendum + lorem, ut tincidunt lacus sapien + quis lorem. Aenean interdum + dolor augue, ac cursus lectus + suscipit vitae.{" "} +
+ + + )} +