CCM-10548: fixed commit hook

Author: mark-r-bjss

frontend/src/__tests__/components/forms/LetterTemplateForm.test.tsx/__snapshots__/LetterTemplateForm.test.tsx.snap

@@ -156,7 +156,7 @@ exports[`Client-side validation triggers 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 Enter a template name
               </span>
@@ -411,7 +411,7 @@ exports[`Client-side validation triggers 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 Select a letter template PDF
               </span>
@@ -1074,7 +1074,7 @@ exports[`renders page one error 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 Template name error
               </span>
@@ -1576,7 +1576,7 @@ exports[`renders page with multiple errors 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 Template name error
               </span>
@@ -1832,7 +1832,7 @@ exports[`renders page with multiple errors 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 PDF error
               </span>
@@ -1879,7 +1879,7 @@ exports[`renders page with multiple errors 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Error:
+                  Error: 
                 </span>
                 CSV error
               </span>
@@ -2259,13 +2259,13 @@ exports[`renders page with preloaded field values 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Important:
+                  Important: 
                 </span>
-                Right-to-left languages
+                Right-to-left language scripts
               </span>
             </h3>
             <p>
-              We are currently unable to check personalisation fields within right-to-left language letters so please ensure that they meet
+              We are currently unable to check personalisation fields within right-to-left language script letters so please ensure that they meet 
               <a
                 href="/using-nhs-notify/personalisation"
                 rel="noopener noreferrer"
@@ -2716,13 +2716,13 @@ exports[`shows right-to-left language warning when language changes 1`] = `
                 <span
                   class="nhsuk-u-visually-hidden"
                 >
-                  Important:
+                  Important: 
                 </span>
-                Right-to-left languages
+                Right-to-left language scripts
               </span>
             </h3>
             <p>
-              We are currently unable to check personalisation fields within right-to-left language letters so please ensure that they meet
+              We are currently unable to check personalisation fields within right-to-left language script letters so please ensure that they meet 
               <a
                 href="/using-nhs-notify/personalisation"
                 rel="noopener noreferrer"

frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx

@@ -54,13 +54,13 @@ export const EmailTemplateForm: FC<
   const formValidate = validate($EmailTemplateFormSchema, setValidationError);
 
   const [emailTemplateName, emailTemplateNameHandler] =
-    useTextInput<HTMLInputElement, string>(state.name);
+    useTextInput<HTMLInputElement>(state.name);
 
   const [emailTemplateSubjectLine, emailTemplateSubjectLineHandler] =
-    useTextInput<HTMLInputElement, string>(state.subject);
+    useTextInput<HTMLInputElement>(state.subject);
 
   const [emailTemplateMessage, emailTemplateMessageHandler] =
-    useTextInput<HTMLTextAreaElement, string>(state.message);
+    useTextInput<HTMLTextAreaElement>(state.message);
 
   const templateNameError =
     validationError?.fieldErrors.emailTemplateName?.join(', ');

frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx

@@ -54,22 +54,19 @@ export const LetterTemplateForm: FC<
     templateCsvGuidanceLink,
     templatePdfGuidanceLinkText,
     buttonText,
+    rtlWarning,
   } = content.components.templateFormLetter;
 
   const [state, action] = useActionState(processFormActions, initialState);
   const [validationError, setValidationError] = useState<
     FormErrorState | undefined
   >(state.validationError);
 
-  const [letterTemplateName, letterTemplateNameHandler] = useTextInput<
-    HTMLInputElement,
-    string
-  >(state.name);
+  const [letterTemplateName, letterTemplateNameHandler] =
+    useTextInput<HTMLInputElement>(state.name);
 
-  const [letterTemplateLetterType, letterTypeHandler] = useTextInput<
-    HTMLSelectElement,
-    string
-  >(state.letterType);
+  const [letterTemplateLetterType, letterTypeHandler] =
+    useTextInput<HTMLSelectElement>(state.letterType);
 
   const [letterTemplateLanguage, letterLanguageHandler] = useTextInput<
     HTMLSelectElement,
@@ -186,20 +183,18 @@ export const LetterTemplateForm: FC<
                 isRightToLeft(letterTemplateLanguage) && (
                   <WarningCallout data-testid='rtl-language-warning'>
                     <WarningCallout.Label>
-                      Right-to-left languages
+                      {rtlWarning.heading}
                     </WarningCallout.Label>
                     <p>
-                      We are currently unable to check personalisation fields
-                      within right-to-left language letters so please ensure
-                      that they meet{' '}
+                      {rtlWarning.bodyPrefix}
                       <a
-                        href='/using-nhs-notify/personalisation'
+                        href={rtlWarning.bodyLinkHref}
                         target='_blank'
                         rel='noopener noreferrer'
                       >
-                        the guidance
-                      </a>{' '}
-                      prior to submitting the letter for proofing.
+                        {rtlWarning.bodyLinkDisplay}
+                      </a>
+                      {rtlWarning.bodySuffix}
                     </p>
                   </WarningCallout>
                 )}

frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx

@@ -58,10 +58,10 @@ export const NhsAppTemplateForm: FC<
   );
 
   const [nhsAppTemplateMessage, nhsAppMessageHandler] =
-    useTextInput<HTMLTextAreaElement, string>(state.message);
+    useTextInput<HTMLTextAreaElement>(state.message);
 
   const [nhsAppTemplateName, nhsAppTemplateNameHandler] =
-    useTextInput<HTMLInputElement, string>(state.name);
+    useTextInput<HTMLInputElement>(state.name);
 
   const templateNameError =
     validationError?.fieldErrors.nhsAppTemplateName?.join(', ');

frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx

@@ -43,10 +43,10 @@ export const SmsTemplateForm: FC<
   const formValidate = validate($CreateSmsTemplateSchema, setValidationError);
 
   const [smsTemplateName, smsTemplateNameHandler] =
-    useTextInput<HTMLInputElement, string>(state.name);
+    useTextInput<HTMLInputElement>(state.name);
 
   const [smsTemplateMessage, smsTemplateMessageHandler] =
-    useTextInput<HTMLTextAreaElement, string>(state.message);
+    useTextInput<HTMLTextAreaElement>(state.message);
 
   const templateNameError =
     validationError?.fieldErrors.smsTemplateName?.join(', ');

frontend/src/content/content.ts

@@ -603,6 +603,14 @@ const templateFormLetter = {
       },
     },
   },
+  rtlWarning: {
+    heading: 'Right-to-left language scripts',
+    bodyPrefix:
+      'We are currently unable to check personalisation fields within right-to-left language script letters so please ensure that they meet ',
+    bodyLinkDisplay: 'the guidance',
+    bodyLinkHref: '/using-nhs-notify/personalisation',
+    bodySuffix: ' prior to submitting the letter for proofing.',
+  },
 };
 
 const templateFormEmail = {

frontend/src/hooks/use-text-input.hook.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 type InputValue = HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement;
 
-export const useTextInput = <T extends InputValue, S>(
+export const useTextInput = <T extends InputValue, S = string>(
   initialState: string
 ): [S, React.ChangeEventHandler<T>] => {
   const [value, setValue] = useState<S>(initialState as S);

scripts/config/pre-commit.yaml

@@ -3,6 +3,7 @@ repos:
     rev: v4.6.0 # Use the ref you want to point at
     hooks:
       - id: trailing-whitespace
+        exclude: .+\.snap
       - id: detect-aws-credentials
         args: [--allow-missing-credentials]
       - id: check-added-large-files