added check answer summary & complete appeal step

components/elements/index.js

@@ -173,23 +173,23 @@ export function YesNofield(props) {
     );
 }
 
-export function PickList(props) {
-    const { name, label, datafieldname } = props;
-
+const RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+}) => {
     const fetcher = (url) => fetch(url).then((res) => res.json());
 
-    const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
-    if (error)
+    const { data, errorStr } = useSWR("/api/lookups/" + datafieldname, fetcher);
+    if (errorStr)
         return (
             <div className="govuk-form-group">
                 <label className="govuk-label govuk-body-m" htmlFor="sort">
-                    {props.label}
+                    {label}
                 </label>
-                <select
-                    className="govuk-select"
-                    id={props.name}
-                    name={props.name}
-                >
+                <select className="govuk-select" id={name} name={name}>
                     <option value="">empty</option>
                 </select>
             </div>
@@ -197,33 +197,48 @@ export function PickList(props) {
     if (!data)
         return (
             <div>
-                <div className="govuk-form-group">{props.label} loading...</div>
+                <div className="govuk-form-group">{label} loading...</div>
             </div>
         );
     console.log(JSON.stringify(data.GlobalOptionSet.Options));
 
     const dropdownObj = data.GlobalOptionSet.Options;
-
     return (
-        <div className="govuk-form-group">
-            <label className="govuk-label govuk-body-m" htmlFor="sort">
-                {props.label}
-            </label>
-            <select className="govuk-select" id={props.name} name={props.name}>
+        <div>
+            <select {...input} className="govuk-select" id={name} name={name}>
                 {Object.keys(dropdownObj).map((key, index) => {
                     return (
                         <option
                             key={key}
                             value={
-                                dropdownObj[key].Label.LocalizedLabels[0]
-                                    .MetadataId
+                                dropdownObj[key].Label.LocalizedLabels[0].value
                             }
+                            // value={dropdownObj[key].Label.LocalizedLabels[0].MetadataId}
                         >
                             {dropdownObj[key].Label.LocalizedLabels[0].Label}
                         </option>
                     );
                 })}
             </select>
+
+            {touched && error && <span>{error}</span>}
+        </div>
+    );
+};
+
+export function PickList(props) {
+    const { name, label, datafieldname } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-body-m" htmlFor="sort">
+                {props.label}
+            </label>
+            <Field
+                name={props.name}
+                component={RenderPickList}
+                datafieldname={datafieldname}
+            />
         </div>
     );
 }