From 4c31728322d25a543d4942064e95a6d266640cd1 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 20 Jul 2021 11:26:25 +0100 Subject: [PATCH 1/3] add methods and store for case reference --- actions/index.js | 6 ++++++ components/elements/index.js | 14 +++++++++----- components/newappeal/buildfield.js | 1 + components/newappeal/buildrow.js | 1 + components/newappeal/buildsection.js | 17 +++++++++++++++-- components/newappeal/complete.js | 2 +- components/newappeal/createCase.js | 17 ++++++++++++++--- pages/newappeal/[appealtypes].js | 12 ++++++++---- store/appealType/action.js | 8 ++++++++ store/appealType/reducer.js | 7 ++++++- 10 files changed, 69 insertions(+), 16 deletions(-) diff --git a/actions/index.js b/actions/index.js index e7332cbc..a0a2c446 100644 --- a/actions/index.js +++ b/actions/index.js @@ -196,6 +196,12 @@ export const getLPA = () => { }); }; +export const createCase = (lpaType, appealType) => { + console.log(); + + return "CAS-00010-CK1N3S"; +}; + // var req = new XMLHttpRequest(); // req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '000')&$count=true", true); // req.setRequestHeader("OData-MaxVersion", "4.0"); diff --git a/components/elements/index.js b/components/elements/index.js index 01895f95..1b8236e2 100644 --- a/components/elements/index.js +++ b/components/elements/index.js @@ -1,5 +1,6 @@ import useSWR from "swr"; import { Field, reduxForm } from "redux-form"; +import router from "next/router"; export function Textfield(props) { const { name, label } = props; @@ -293,19 +294,22 @@ export function DecimalField(props) { ); } -export function ReadOnlyfield(props) { - const { name, label } = props; +const RenderCaseID = {}; +export function ReadOnlyfield(props) { + const { name, label, value } = props; + console.log(props.value.refno); return (
- diff --git a/components/newappeal/buildfield.js b/components/newappeal/buildfield.js index f201b373..5f62bd98 100644 --- a/components/newappeal/buildfield.js +++ b/components/newappeal/buildfield.js @@ -30,6 +30,7 @@ export default function BuildField(props) { ); break; diff --git a/components/newappeal/buildrow.js b/components/newappeal/buildrow.js index 3e8469ba..5f29f2de 100644 --- a/components/newappeal/buildrow.js +++ b/components/newappeal/buildrow.js @@ -31,6 +31,7 @@ export default function BuildRow(props) { label={rows[0].value} datafieldname={datafieldname[0].value} key={key} + props={props} /> ); })} diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js index 9921672a..e1cda7aa 100644 --- a/components/newappeal/buildsection.js +++ b/components/newappeal/buildsection.js @@ -6,7 +6,11 @@ import xpath from "xpath"; import BuildRow from "./buildrow"; import { reduxForm, formValueSelector } from "redux-form"; import { useDispatch, useSelector, shallowEqual, connect } from "react-redux"; -import { setCurrentSection } from "../../store/appealType/action"; +import { + setCaseReference, + setCurrentSection, +} from "../../store/appealType/action"; +import { query } from "jsonpath"; let BuildSection = (props) => { // useEffect(() => { @@ -25,6 +29,7 @@ let BuildSection = (props) => { handleSubmit, formTitle, setCurrentSection, + refno, } = props; const currentSection = props.appealType.currentSection; @@ -50,8 +55,13 @@ let BuildSection = (props) => { const onHandleSubmit = (values) => { setCurrentSection(currentSection + 1); + setCaseReference(router.query.refno); }; + // const initialValues = { + // email: router.query.refno, + // }; + return (
@@ -64,6 +74,7 @@ let BuildSection = (props) => { whichSection={props.whichSection} sectionCount={props.sectionCount} onSubmit={onSubmit} + props={props} /> {}
@@ -126,7 +137,9 @@ let BuildSection = (props) => { {titleList[key].value} ) : ( -
  • {titleList[key].value}
    • +
  • + {titleList[key].value} +
    • ) )} diff --git a/components/newappeal/complete.js b/components/newappeal/complete.js index 58ff65eb..1d6791ad 100644 --- a/components/newappeal/complete.js +++ b/components/newappeal/complete.js @@ -60,7 +60,7 @@ let CompleteAppeal = (props) => {
    Your reference number
    - CAS-00010-J9W6L5 + {props.appealType.caseReference}
    diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js index 06c4436b..2c004a81 100644 --- a/components/newappeal/createCase.js +++ b/components/newappeal/createCase.js @@ -15,6 +15,8 @@ import { getAppealTypeObj, } from "../../store/appealType/action"; +import { createCase } from "../../actions"; + let CreateCase = (props) => { // useEffect(() => { // window.scrollTo(0, 0); @@ -100,9 +102,18 @@ let CreateCase = (props) => { const onHandleSubmit = (values) => { event.preventDefault(); - router.replace("/newappeal/" + values.appealTypes, null, { - shallow: true, - }); + + console.log(createCase("asasa", "asasa")); + + const caseReference = createCase("123123", "213132"); + + router.replace( + "/newappeal/" + values.appealTypes + "?refno=" + caseReference, + null, + { + shallow: true, + } + ); console.log(values); }; diff --git a/pages/newappeal/[appealtypes].js b/pages/newappeal/[appealtypes].js index 27253c92..ecbc3737 100644 --- a/pages/newappeal/[appealtypes].js +++ b/pages/newappeal/[appealtypes].js @@ -19,6 +19,7 @@ import { setAppealTypeTitle, setAppealTypeID, getAppealTypeObj, + setCaseReference, } from "../../store/appealType/action"; import { setForm, getFormObj } from "../../store/formData/action"; import { getFormData, getAppealsTypes } from "../../actions"; @@ -31,10 +32,6 @@ import BuildCheckSection from "../../components/newappeal/buildchecksection"; import CompleteAppeal from "../../components/newappeal/complete"; let Home = (props) => { - useEffect(() => { - props.setFormTitle(formTitle); - }, []); - const { footerLinks, pages, formData } = props; let { t, lang } = useTranslation(); @@ -42,6 +39,10 @@ let Home = (props) => { const { locale } = router; const { appealtypes } = router.query; + useEffect(() => { + props.setFormTitle(formTitle); + props.setCaseReference(router.query.refno); + }, []); const formXML = props.formData.formData; const parser = new DOMParser(); var doc = parser.parseFromString(formXML, "text/xml"); @@ -171,6 +172,9 @@ const mapDispatchToProps = (dispatch) => { setFormTitle: (title) => { dispatch(setAppealTypeTitle(title)); }, + setCaseReference: (refno) => { + dispatch(setCaseReference(refno)); + }, }; }; diff --git a/store/appealType/action.js b/store/appealType/action.js index 1e33ddb1..1d84825b 100644 --- a/store/appealType/action.js +++ b/store/appealType/action.js @@ -8,6 +8,7 @@ export const appealTypeDataActionTypes = { UPDATEAPPEALTYPEDATA: "UPDATEAPPEALTYPEDATA", SETCURRENTSECTION: "SETCURRENTSECTION", SETAPPEALLPA: "SETAPPEALLPA", + SETCASEREFERENCE: "SETCASEREFERENCE", }; export const getAppealTypeObj = () => (dispatch) => { @@ -48,3 +49,10 @@ export const setAppealLPA = (appealLPA) => (dispatch) => { appealLPA: appealLPA, }); }; + +export const setCaseReference = (caseReference) => (dispatch) => { + return dispatch({ + type: appealTypeDataActionTypes.SETCASEREFERENCE, + caseReference: caseReference, + }); +}; diff --git a/store/appealType/reducer.js b/store/appealType/reducer.js index 1f9ac3dd..2a20d35b 100644 --- a/store/appealType/reducer.js +++ b/store/appealType/reducer.js @@ -6,6 +6,7 @@ const appealTypeDataInitialState = { appealTypeID: {}, currentSection: 1, appealLPA: "", + caseReference: "", }; export default function reducer(state = appealTypeDataInitialState, action) { @@ -35,7 +36,11 @@ export default function reducer(state = appealTypeDataInitialState, action) { ...state, appealLPA: action.appealLPA, }; - + case appealTypeDataActionTypes.SETCASEREFERENCE: + return { + ...state, + caseReference: action.caseReference, + }; default: return state; } From ff9f2d87c9096119d426bdcb7d430361803ad825 Mon Sep 17 00:00:00 2001 From: robert Date: Tue, 20 Jul 2021 12:04:49 +0100 Subject: [PATCH 2/3] added case number example --- actions/index.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/actions/index.js b/actions/index.js index a0a2c446..3b79464e 100644 --- a/actions/index.js +++ b/actions/index.js @@ -234,3 +234,35 @@ export const createCase = (lpaType, appealType) => { // } // }; // req.send(); + + +// //jquery version to get case number from an lpa and an appeal type +// var entity = {}; +// entity.caseorigincode = 3; +// entity["customerid_account@odata.bind"] = "/accounts(c75f6f84-49da-eb11-aabd-00224800d1bd)"; +// entity.pinswg_appealcasetype = 846040004; + +// $.ajax({ +// type: "POST", +// contentType: "application/json; charset=utf-8", +// datatype: "json", +// url: Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents", +// data: JSON.stringify(entity), +// beforeSend: function(XMLHttpRequest) { +// XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0"); +// XMLHttpRequest.setRequestHeader("OData-Version", "4.0"); +// XMLHttpRequest.setRequestHeader("Accept", "application/json"); +// XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\",return=representation"); +// }, +// async: true, +// success: function(data, textStatus, xhr) { +// var uri = xhr.getResponseHeader("OData-EntityId"); +// var regExp = /\(([^)]+)\)/; +// var matches = regExp.exec(uri); +// var newEntityId = matches[1]; +// //Handle returned attributes +// }, +// error: function(xhr, textStatus, errorThrown) { +// Xrm.Utility.alertDialog(textStatus + " " + errorThrown); +// } +// }); \ No newline at end of file From 1e81f1c97ebd74d252ad6cac3b6ba9dac3a1c017 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 20 Jul 2021 16:46:14 +0100 Subject: [PATCH 3/3] passing a ref api through form and update progress --- actions/index.js | 22 +++- components/elements/index.js | 53 +++++++++ components/newappeal/buildCheckfield.js | 64 +++++++++++ components/newappeal/buildcheckrow.js | 69 ++++++++++-- components/newappeal/buildchecksection.js | 11 +- components/newappeal/buildfield.js | 6 +- components/newappeal/buildsection.js | 26 ++++- package-lock.json | 129 ++++++++++++++++++++++ package.json | 4 +- store/appealType/action.js | 8 ++ store/appealType/reducer.js | 6 + styles/sass/welshgov/_application.scss | 23 ++++ yarn.lock | 63 +++++++++-- 13 files changed, 455 insertions(+), 29 deletions(-) create mode 100644 components/newappeal/buildCheckfield.js diff --git a/actions/index.js b/actions/index.js index 3b79464e..23c68336 100644 --- a/actions/index.js +++ b/actions/index.js @@ -196,10 +196,27 @@ export const getLPA = () => { }); }; +function makeid(length) { + var result = ""; + var characters = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + var charactersLength = characters.length; + for (var i = 0; i < length; i++) { + result += characters.charAt( + Math.floor(Math.random() * charactersLength) + ); + } + return result; +} + export const createCase = (lpaType, appealType) => { console.log(); - return "CAS-00010-CK1N3S"; + const lastPart = makeid(6); + + const middlePart = Math.floor(100000 + Math.random() * 900000); + + return "CAS-" + middlePart + "-" + lastPart.toUpperCase(); }; // var req = new XMLHttpRequest(); @@ -235,7 +252,6 @@ export const createCase = (lpaType, appealType) => { // }; // req.send(); - // //jquery version to get case number from an lpa and an appeal type // var entity = {}; // entity.caseorigincode = 3; @@ -265,4 +281,4 @@ export const createCase = (lpaType, appealType) => { // error: function(xhr, textStatus, errorThrown) { // Xrm.Utility.alertDialog(textStatus + " " + errorThrown); // } -// }); \ No newline at end of file +// }); diff --git a/components/elements/index.js b/components/elements/index.js index 1b8236e2..cba0c911 100644 --- a/components/elements/index.js +++ b/components/elements/index.js @@ -1,6 +1,10 @@ import useSWR from "swr"; import { Field, reduxForm } from "redux-form"; import router from "next/router"; +import DatePicker from "react-datepicker"; +import React, { useState } from "react"; +import "react-datepicker/dist/react-datepicker.css"; +import moment from "moment"; export function Textfield(props) { const { name, label } = props; @@ -51,6 +55,55 @@ export function MultiLinefield(props) { ); } +const RenderDatePicker = ({ + datafieldname, + name, + label, + input: { onChange, value }, + meta: { touched, error }, + ...custom +}) => { + return ( + <> + + + {touched && error && {error}} + + ); +}; + +export function DateFieldPicker(props) { + const { name, label } = props; + return ( +
    +
    + + + + +
    +
    + ); +} + export function DateField(props) { const { name, label } = props; diff --git a/components/newappeal/buildCheckfield.js b/components/newappeal/buildCheckfield.js new file mode 100644 index 00000000..a8b8e48d --- /dev/null +++ b/components/newappeal/buildCheckfield.js @@ -0,0 +1,64 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import useTranslation from "next-translate/useTranslation"; +import xpath from "xpath"; +import { + Textfield, + DateField, + DateFieldPicker, + YesNofield, + PickList, + MultiLinefield, + NumericField, + ReadOnlyfield, + DecimalField, +} from "../elements"; +import moment from "moment"; + +export default function BuildField(props) { + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + const { fieldType, label, datafieldname, fieldValue } = props; + + const parser = new DOMParser(); + + const whichFieldType = (classid) => { + switch (classid) { + case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}": + return <>{fieldValue}; + break; + case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": + return <>{fieldValue}; + break; + case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": + return <>{fieldValue}; + break; + case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}": + return <>{fieldValue}; + break; + case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": + return ( + <> + hello + + ); + break; + case "{E0DECE4B-6FC8-4a8f-A065-082708572369}": + return <>{fieldValue}; + break; + case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}": + return <>{fieldValue}; + break; + case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}": + return <>{fieldValue}; + break; + default: + return <>{fieldValue}; + } + }; + + return <>{whichFieldType(props.fieldType)}; +} diff --git a/components/newappeal/buildcheckrow.js b/components/newappeal/buildcheckrow.js index 9644346d..5a27fe94 100644 --- a/components/newappeal/buildcheckrow.js +++ b/components/newappeal/buildcheckrow.js @@ -2,15 +2,27 @@ import Link from "next/link"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; import xpath from "xpath"; -import BuildField from "./buildfield"; +import BuildCheckField from "./buildCheckfield"; +import { useSelector, shallowEqual, connect } from "react-redux"; +import { + setCaseReference, + setCurrentSection, + setFormComplete, +} from "../../store/appealType/action"; -export default function BuildCheckRow(props) { +let BuildCheckRow = (props) => { let { t } = useTranslation(); const router = useRouter(); const { locale } = router; - const { formXML, whichSection, sectionCount, onSubmit } = props; + const { + formXML, + whichSection, + sectionCount, + onSubmit, + updateCurrentSection, + } = props; const parser = new DOMParser(); var doc = parser.parseFromString(props.formXML, "text/xml"); @@ -41,14 +53,36 @@ export default function BuildCheckRow(props) { {rows[0].value}
    - { - props.props.form["appealForm"].values[ - datafieldname[0].value - ] - } + {fieldtype[0].value == + "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}" + ? props.props.form["appealForm"].values[ + datafieldname[0].value + ] != null + ? props.props.form["appealForm"].values[ + datafieldname[0].value + ].getDate() + + "/" + + (props.props.form["appealForm"].values[ + datafieldname[0].value + ].getMonth() + + 1) + + "/" + + props.props.form["appealForm"].values[ + datafieldname[0].value + ].getFullYear() + : "" + : props.props.form["appealForm"].values[ + datafieldname[0].value + ]}
    - + { + updateCurrentSection(whichSection); + }} + > Change {" "} @@ -61,4 +95,19 @@ export default function BuildCheckRow(props) { })} ); -} +}; + +const mapDispatchToProps = (dispatch) => { + return { + updateCurrentSection: (whichSection) => { + dispatch(setCurrentSection(whichSection)); + dispatch(setFormComplete("true")); + }, + }; +}; + +const mapStateToProps = (state) => ({ + count: state.count, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow); diff --git a/components/newappeal/buildchecksection.js b/components/newappeal/buildchecksection.js index b6a16000..4efc1457 100644 --- a/components/newappeal/buildchecksection.js +++ b/components/newappeal/buildchecksection.js @@ -6,12 +6,15 @@ import xpath from "xpath"; import BuildCheckRow from "./buildcheckrow"; import { reduxForm, formValueSelector } from "redux-form"; import { useDispatch, useSelector, shallowEqual, connect } from "react-redux"; -import { setCurrentSection } from "../../store/appealType/action"; +import { + setCurrentSection, + setFormComplete, +} from "../../store/appealType/action"; let BuildCheckSection = (props) => { - // useEffect(() => { - // window.scrollTo(0, 0); - // }); + useEffect(() => { + setFormComplete(); + }, []); let { t } = useTranslation(); diff --git a/components/newappeal/buildfield.js b/components/newappeal/buildfield.js index 5f62bd98..f8f0f860 100644 --- a/components/newappeal/buildfield.js +++ b/components/newappeal/buildfield.js @@ -5,6 +5,7 @@ import xpath from "xpath"; import { Textfield, DateField, + DateFieldPicker, YesNofield, PickList, MultiLinefield, @@ -58,7 +59,10 @@ export default function BuildField(props) { break; case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": return ( - + ); break; case "{E0DECE4B-6FC8-4a8f-A065-082708572369}": diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js index e1cda7aa..5d7f4e12 100644 --- a/components/newappeal/buildsection.js +++ b/components/newappeal/buildsection.js @@ -30,6 +30,7 @@ let BuildSection = (props) => { formTitle, setCurrentSection, refno, + gotoSection, } = props; const currentSection = props.appealType.currentSection; @@ -134,11 +135,29 @@ let BuildSection = (props) => { {Object.keys(titleList).map((key) => parseInt(key) + 1 == currentSection ? (
  • - {titleList[key].value} + {titleList[key].value}
    • ) : (
  • - {titleList[key].value} + {props.appealType + .formComplete == "true" || + parseInt(key) + 1 < + currentSection ? ( + { + gotoSection( + parseInt(key) + + 1 + ); + }} + > + {titleList[key].value} + + ) : ( + titleList[key].value + )}
    • ) )} @@ -167,6 +186,9 @@ const mapDispatchToProps = (dispatch) => { setCurrentSection: (currentSection) => { dispatch(setCurrentSection(currentSection)); }, + gotoSection: (thisSection) => { + dispatch(setCurrentSection(thisSection)); + }, }; }; diff --git a/package-lock.json b/package-lock.json index c18084b2..b6cdeb88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "next-translate": "^1.0.7", "react": "17.0.2", "react-cookie-consent": "^6.2.4", + "react-datepicker": "^4.1.1", "react-dom": "17.0.2", "react-redux": "^7.2.4", "react-xml-parser": "^1.1.8", @@ -497,6 +498,15 @@ "@opentelemetry/api": "^1.0.1" } }, + "node_modules/@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz", @@ -2509,6 +2519,18 @@ "node": ">= 6" } }, + "node_modules/date-fns": { + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz", + "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -7297,6 +7319,23 @@ "react": "^16.13.1 || ^17.0.0" } }, + "node_modules/react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==", + "dependencies": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.10.0", + "react-popper": "^2.2.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17", + "react-dom": "^16.9.0 || ^17" + } + }, "node_modules/react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -7310,6 +7349,11 @@ "react": "17.0.2" } }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "node_modules/react-i18next": { "version": "11.11.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz", @@ -7328,6 +7372,32 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-onclickoutside": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x", + "react-dom": "^15.5.x || ^16.x || ^17.x" + } + }, + "node_modules/react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17" + } + }, "node_modules/react-redux": { "version": "7.2.4", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", @@ -9073,6 +9143,14 @@ "node": ">=0.10.0" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz", @@ -9854,6 +9932,11 @@ "lodash.merge": "^4.6.2" } }, + "@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==" + }, "@rushstack/eslint-patch": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz", @@ -11483,6 +11566,11 @@ "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==" }, + "date-fns": { + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz", + "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==" + }, "debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -15171,6 +15259,19 @@ "prop-types": "^15.7.2" } }, + "react-datepicker": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz", + "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==", + "requires": { + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.10.0", + "react-popper": "^2.2.5" + } + }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -15181,6 +15282,11 @@ "scheduler": "^0.20.2" } }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-i18next": { "version": "11.11.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz", @@ -15195,6 +15301,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-onclickoutside": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==", + "requires": {} + }, + "react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-redux": { "version": "7.2.4", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", @@ -16536,6 +16657,14 @@ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=" }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz", diff --git a/package.json b/package.json index cb8f1eaf..f8a457d2 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,14 @@ "jsonpath": "^1.1.1", "jsonpath-plus": "^5.1.0", "lodash": "^4.17.21", + "moment": "^2.29.1", "next": "^11.0.1", "next-i18next": "^8.5.1", "next-redux-wrapper": "^7.0.2", "next-translate": "^1.0.7", "react": "17.0.2", "react-cookie-consent": "^6.2.4", + "react-datepicker": "^4.1.1", "react-dom": "17.0.2", "react-redux": "^7.2.4", "react-xml-parser": "^1.1.8", @@ -46,4 +48,4 @@ "eslint-config-next": "^11.0.1", "prettier": "2.3.2" } -} \ No newline at end of file +} diff --git a/store/appealType/action.js b/store/appealType/action.js index 1d84825b..9906d262 100644 --- a/store/appealType/action.js +++ b/store/appealType/action.js @@ -9,6 +9,7 @@ export const appealTypeDataActionTypes = { SETCURRENTSECTION: "SETCURRENTSECTION", SETAPPEALLPA: "SETAPPEALLPA", SETCASEREFERENCE: "SETCASEREFERENCE", + SETFORMCOMPLETE: "SETFORMCOMPLETE", }; export const getAppealTypeObj = () => (dispatch) => { @@ -56,3 +57,10 @@ export const setCaseReference = (caseReference) => (dispatch) => { caseReference: caseReference, }); }; + +export const setFormComplete = (formComplete) => (dispatch) => { + return dispatch({ + type: appealTypeDataActionTypes.SETFORMCOMPLETE, + formComplete: formComplete, + }); +}; diff --git a/store/appealType/reducer.js b/store/appealType/reducer.js index 2a20d35b..905aa320 100644 --- a/store/appealType/reducer.js +++ b/store/appealType/reducer.js @@ -7,6 +7,7 @@ const appealTypeDataInitialState = { currentSection: 1, appealLPA: "", caseReference: "", + formComplete: "false", }; export default function reducer(state = appealTypeDataInitialState, action) { @@ -41,6 +42,11 @@ export default function reducer(state = appealTypeDataInitialState, action) { ...state, caseReference: action.caseReference, }; + case appealTypeDataActionTypes.SETFORMCOMPLETE: + return { + ...state, + formComplete: action.formComplete, + }; default: return state; } diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index 8015dee5..b0211858 100644 --- a/styles/sass/welshgov/_application.scss +++ b/styles/sass/welshgov/_application.scss @@ -17,6 +17,7 @@ s .govuk-header-l, .govuk-select, .govuk-breadcrumbs__link, .govuk-fieldset__legend--s, +.govuk-input, h1, h2, h3, @@ -244,3 +245,25 @@ nav { .govuk-summary-list__key { width: 45%; } + +.react-datepicker__input-container input { + font-weight: 400; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 40px; + height: 2.5rem; + margin-top: 0; + padding: 5px; + border: 2px solid #0b0c0c; + border-radius: 0; + -webkit-appearance: none; + appearance: none; + font-size: 19px; + border: 2px solid; + font-size: 1.1875rem; + line-height: 1.3157894737; +} diff --git a/yarn.lock b/yarn.lock index 55777931..ec198775 100644 --- a/yarn.lock +++ b/yarn.lock @@ -253,6 +253,11 @@ "@opentelemetry/semantic-conventions" "0.23.0" lodash.merge "^4.6.2" +"@popperjs/core@^2.9.2": + version "2.9.2" + resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz" + integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q== + "@rushstack/eslint-patch@^1.0.6": version "1.0.6" resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz" @@ -1209,7 +1214,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3: inherits "^2.0.1" safe-buffer "^5.0.1" -classnames@2.2.6: +classnames@2.2.6, classnames@^2.2.6: version "2.2.6" resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -1658,6 +1663,11 @@ data-uri-to-buffer@3.0.1: resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz" integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og== +date-fns@^2.0.1: + version "2.22.1" + resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz" + integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg== + debug@2, debug@^2.6.9: version "2.6.9" resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz" @@ -3184,7 +3194,7 @@ jsonpath-plus@^5.1.0: jsonpath@^1.1.1: version "1.1.1" - resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901" + resolved "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz" integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w== dependencies: esprima "1.2.2" @@ -3384,16 +3394,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.0.0, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.5, lodash@~4.17.10: +lodash@^4.0.0, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.5, lodash@~4.17.10: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -lodash@^4.17.21: - version "4.17.21" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" - integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== - loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" @@ -3561,6 +3566,11 @@ minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5: dependencies: minimist "^1.2.5" +moment@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + ms@2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz" @@ -4711,6 +4721,18 @@ react-cookie-consent@^6.2.4: js-cookie "^2.2.1" prop-types "^15.7.2" +react-datepicker@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.1.1.tgz#5ecef49c672b2250fca26327c988464e6ba52b62" + integrity sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw== + dependencies: + "@popperjs/core" "^2.9.2" + classnames "^2.2.6" + date-fns "^2.0.1" + prop-types "^15.7.2" + react-onclickoutside "^6.10.0" + react-popper "^2.2.5" + react-dom@17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" @@ -4720,6 +4742,11 @@ react-dom@17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-i18next@^11.8.13: version "11.11.1" resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz" @@ -4738,6 +4765,19 @@ react-is@^16.13.1, react-is@^16.4.2, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-onclickoutside@^6.10.0: + version "6.11.2" + resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz" + integrity sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ== + +react-popper@^2.2.5: + version "2.2.5" + resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz" + integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-redux@^7.2.4: version "7.2.4" resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz" @@ -6008,6 +6048,13 @@ void-elements@3.1.0: resolved "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz" integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= +warning@^4.0.2: + version "4.0.3" + resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz"