add methods and store for case reference

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 (
         <div className="govuk-form-group">
             <label className="govuk-label " htmlFor={props.name}>
                 {props.label}
             </label>
-            <Field
+            <input
+                type="text"
                 name={props.name}
                 id={props.name}
-                component="input"
-                type="text"
+                component={RenderCaseID}
+                value={value}
                 className="govuk-input  govuk-input--width-20"
                 disabled
             />

components/newappeal/buildfield.js

@@ -30,6 +30,7 @@ export default function BuildField(props) {
                     <ReadOnlyfield
                         name={props.datafieldname}
                         label={props.label}
+                        value={props.props.props.appealType.caseReference}
                     />
                 );
                 break;

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}
                         />
                     );
                 })}

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 (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
@@ -64,6 +74,7 @@ let BuildSection = (props) => {
                         whichSection={props.whichSection}
                         sectionCount={props.sectionCount}
                         onSubmit={onSubmit}
+                        props={props}
                     />
                     {}
                     <div className="govuk-button-group">
@@ -126,7 +137,9 @@ let BuildSection = (props) => {
                                                 <b>{titleList[key].value}</b>
                                             </li>
                                         ) : (
-                                            <li>{titleList[key].value}</li>
+                                            <li key={key}>
+                                                {titleList[key].value}
+                                            </li>
                                         )
                                     )}
                                 </ol>

components/newappeal/complete.js

@@ -60,7 +60,7 @@ let CompleteAppeal = (props) => {
                     <div className="govuk-panel__body">
                         Your reference number
                         <br />
-                        <strong>CAS-00010-J9W6L5</strong>
+                        <strong>{props.appealType.caseReference}</strong>
                     </div>
                 </div>
 

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);
     };