updated validation on advanced search

.env.local

@@ -17,11 +17,11 @@ NEXT_PUBLIC_HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459
 
 
 //Test Oauth
-CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
+//CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
-CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
+//CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
-RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
-RELAYPATH = "test-pedw-hc"
+//RELAYPATH = "test-pedw-hc"
 
 
 //Preprod Oauth
@@ -34,11 +34,11 @@ RELAYPATH = "test-pedw-hc"
 
 
 //Prod Oauth
-//CLIENT_ID = 01904c07-9035-4cf9-a535-3945f6e470d2
+CLIENT_ID = 01904c07-9035-4cf9-a535-3945f6e470d2
-//CLIENT_SECRET = PRo7Q~GQoKSdARRqF-NOXQDx2Ka8UCINyvagk
+CLIENT_SECRET = PRo7Q~GQoKSdARRqF-NOXQDx2Ka8UCINyvagk
-//RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
+RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
-//RELAYURI = "prod-pedw-ns.servicebus.windows.net"
+RELAYURI = "prod-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "prod-pedw-hc"
+RELAYPATH = "prod-pedw-hc"
 
 
 GOOGLE_TAG_MANAGER = GTM-T78CBC3

actions/govgateway.js

@@ -27,7 +27,7 @@ export const getGGToken = (tokenURL, authCode, redirectUri) => {
         redirectUri;
 
     const basicAuthBase64 = (ggClientID + ":" + ggClientSecret).toString();
-    console.log("base64 " + Base64.encode(basicAuthBase64));
+    //console.log("base64 " + Base64.encode(basicAuthBase64));
 
     const tokenConfig = {
         headers: {

components/search/advancedsearch.js

@@ -9,6 +9,14 @@ import data from "../../data/collections.json";
 import LoadingOverlay from "react-loading-overlay";
 import transLookup from "../../data/lookuptranslations.json";
 
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
 let AdvancedSearch = (props) => {
     let { t } = useTranslation();
 
@@ -37,6 +45,53 @@ let AdvancedSearch = (props) => {
         ? [{}]
         : props.LPAData.LPAData.value;
 
+    const RenderTextfield = ({
+        id,
+        className,
+        rows,
+        datafieldname,
+        name,
+        label,
+        input,
+        hint1,
+        hint2,
+        hint3,
+        meta: { touched, error },
+        ...custom
+    }) => {
+        return (
+            <>
+                <div className="govuk-form-group">
+                    <div id="basicSearch-hint" className="govuk-hint ">
+                        <label className="govuk-label" htmlFor="caseRef">
+                            {t("search:casereference-label")}
+                        </label>
+                    </div>
+
+                    <div>
+                        <input
+                            {...input}
+                            className={className}
+                            name={name}
+                            id={id}
+                        />
+                        {touched && error && (
+                            <span
+                                id={id + "-error"}
+                                className="govuk-error-message govuk-form-group--error"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                {error}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
     const RenderLPAList = ({
         name,
         id,
@@ -216,8 +271,6 @@ let AdvancedSearch = (props) => {
         );
     };
 
-    const required = (value) => (value ? undefined : "Required");
-
     // const [showSpinnerState, setShowSpinnerState] = useState(false);
 
     // let spinnerState = () => {
@@ -275,27 +328,31 @@ let AdvancedSearch = (props) => {
                                                 {t("search:search-title-label")}
                                             </h1>
                                         </legend>
-                                        <div className="govuk-form-group">
-                                            <label
-                                                className="govuk-label"
-                                                htmlFor="caseRef"
-                                            >
-                                                {t(
-                                                    "search:casereference-label"
-                                                )}
-                                            </label>
 
-                                            <Field
+                                        <Field
-                                                name="caseRef"
+                                            validate={[
-                                                id="caseRef"
+                                                minLength(
-                                                component="input"
+                                                    t(
-                                                className="govuk-input govuk-!-width-two-thirds"
+                                                        "myportal:searchcases-validation-minlength"
-                                                label={t(
+                                                    )
-                                                    "search:casereference-label"
+                                                ),
-                                                )}
+                                            ]}
-                                                errormsg="Appeal type is required"
+                                            className="govuk-input govuk-!-width-two-thirds"
-                                            />
+                                            component={RenderTextfield}
-                                        </div>
+                                            id="caseRef"
+                                            name="caseRef"
+                                            type="text"
+                                            aria-describedby="caseRef-hint"
+                                            hint1={t(
+                                                "myportal:searchcases-card-search-hint"
+                                            )}
+                                            hint2={t(
+                                                "myportal:searchcases-card-search-example-label-1"
+                                            )}
+                                            hint3={t(
+                                                "myportal:searchcases-card-search-example-label-2"
+                                            )}
+                                        />
 
                                         <Field
                                             name="appealTypes"

i18n.js

@@ -9,14 +9,14 @@ module.exports = {
         },
     ],
     "pages": {
-        "*": ["common", "newappeal"],
+        "*": ["common", "newappeal", "search"],
         "/": ["common", "home"],
         "/myportal": ["myportal"],
         "/myportal/viewall": ["search"],
         "/myportal/advancedsearch": ["search"],
         "/myportal/searchresults": ["search"],
         "/myportal/case": ["case"],
-        "/advancedsearch": ["search"],
+        "/advancedsearch": ["search", "myportal"],
         "/advancedsearchresults": ["search"],
         "/searchresults": ["search"],
         "/viewall": ["search"],

pages/index.js

@@ -127,10 +127,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
         console.log(query.code);
 
         const showLoginCheck = process.env.SHOWLOGIN || false;
+
         const hasLoginCode = typeof query.code != "undefined";
-
-        console.log("Show login module: ", showLoginCheck);
-
         let providerConfig = await getProviderConfig();
 
         console.log(providerConfig.token_endpoint);
@@ -156,6 +154,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
                       ggUserInfo.data.email,
                       relayToken
                   )),
+                  console.log(portalUserObj, ggUserInfo),
                   store.dispatch(setAccountDetails(portalUserObj)))
                 : console.log(
                       ggToken.status + " " + ggToken.data.error_description