hide reps button & add rich text for reps

components/case/representation/representationAppellant.js

@@ -3,17 +3,20 @@ import { connect } from "react-redux";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { Field, reduxForm, reset } from "redux-form";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
 import {
     RenderPickList,
     RenderTextfield,
     RenderRadioList,
     RenderMultiline,
+    RenderFileUpload,
 } from "./representationElements";
 import { useDropzone } from "react-dropzone";
-import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-} from "../../../store/currentView/action";
+// import {
+//     setRepresentationCapacity,
+//     setRepresentationSubmit,
+// } from "../../../store/currentView/action";
 
 const RepAppellant = (props) => {
     let { t } = useTranslation();
@@ -28,11 +31,8 @@ const RepAppellant = (props) => {
         currentView,
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
-    const files = acceptedFiles.map((file) => (
-        <li key={file.path}>
-            {file.path} - {file.size} bytes
-        </li>
-    ));
+
+    // console.log(props);
 
     return (
         <div id="rep-appellant">
@@ -141,7 +141,6 @@ const RepAppellant = (props) => {
                                         className="govuk-checkboxes__input"
                                         id="documentBox"
                                         name="documentBox"
-                                        value="email"
                                         data-aria-controls="documentBox"
                                         type="checkbox"
                                         component={RenderTextfield}
@@ -174,25 +173,28 @@ const RepAppellant = (props) => {
                                     }
                                     id="conditional-documentBox"
                                 >
-                                    <div className="govuk-form-group">
-                                        <section className="container">
-                                            <div
-                                                {...getRootProps({
-                                                    className: "dropzone",
-                                                })}
-                                            >
-                                                <input {...getInputProps()} />
-                                                <p>
-                                                    Drag and drop files here or
-                                                    click to select files
-                                                </p>
-                                            </div>
-                                            <aside>
-                                                <h4>Files</h4>
-                                                <ul>{files}</ul>
-                                            </aside>
-                                        </section>
-                                    </div>
+                                    <h2 className="govuk-heading-s">
+                                        {props.label}{" "}
+                                    </h2>
+                                    <Field
+                                        name="repsFiles"
+                                        id="repsFiles"
+                                        component={RenderFileUpload}
+                                        className="govuk-input govuk-input--width-20"
+                                        //validate={[required]}
+                                        label={props.label}
+                                        errorMsg="Is required"
+                                        ticketnumber={props.caseReference}
+                                        documentTypeCode={
+                                            props.documentTypeCode
+                                        }
+                                        hint={props.hint}
+                                        fileList={props.fileList}
+                                        setFilesForAppeal={
+                                            props.setFilesForAppeal
+                                        }
+                                        containerID={props.containerID}
+                                    />
                                 </div>
                             </div>
                         </fieldset>
@@ -208,13 +210,13 @@ const RepAppellant = (props) => {
                             Continue
                         </button>
                         {/* <a
-                                onClick={() => {
-                                    setRepresentationSubmit(false);
-                                }}
-                                className="govuk-button"
-                            >
-                                Continue
-                            </a> */}
+                            onClick={() => {
+                                setRepresentationSubmit(true);
+                            }}
+                            className="govuk-button"
+                        >
+                            Continue ww
+                        </a> */}
                         <a
                             onClick={() => {
                                 setRepresentationCapacity();