feat: use custom translation for attachement of pay subsidy for peopl…

…e 55+ (HL-944) (#2349)

* fix: get rid of isReadOnly flag

the data already exists in prop so no need to make router checks

* chore: add more form filling tests

* feat: use env to skip console.log on tests

* docs: add missing env for running tests

* refactor: rename types

* feat: add a new prop to have other than attachment type as translation key

* feat: use custom translation key on pay subsidy decision attachements

frontend/benefit/applicant/public/locales/en/common.json

@@ -362,6 +362,9 @@
             "title": "Pay subsidy decision",
             "message": "Attach both issued pay subsidy decisions"
           },
+          "paySubsidyDecisionAged": {
+            "title": "Decision for employment aid for people aged 55 and above"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus",
             "message": ""

frontend/benefit/applicant/public/locales/fi/common.json

@@ -362,6 +362,9 @@
             "title": "Palkkatukipäätös",
             "message": "Liitä molemmat myönnetyt palkkatukipäätökset"
           },
+          "paySubsidyDecisionAged": {
+            "title": "55 vuotta täyttäneiden työllistämistukipäätös"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus",
             "message": ""

frontend/benefit/applicant/public/locales/sv/common.json

@@ -362,6 +362,9 @@
             "title": "Beslut om lönesubvention",
             "message": "Bifoga båda besluten om beviljad lönesubvention"
           },
+          "paySubsidyDecisionAged": {
+            "title": "Beslut om finansiella stöd för personer som är 55 år och äldre"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus",
             "message": ""

frontend/benefit/applicant/src/components/applications/forms/application/step3/ApplicationFormStep3.tsx

@@ -13,6 +13,18 @@ import StepperActions from '../stepperActions/StepperActions';
 import AttachmentsList from './attachmentsList/AttachmentsList';
 import { useApplicationFormStep3 } from './useApplicationFormStep3';
 
+const translationKeyForPaySubsidyAttachement = (
+  paySubsidyGranted: PAY_SUBSIDY_GRANTED
+): 'paySubsidyDecision' | 'paySubsidyDecisionAged' => {
+  if (paySubsidyGranted === PAY_SUBSIDY_GRANTED.GRANTED) {
+    return 'paySubsidyDecision';
+  }
+  if (paySubsidyGranted === PAY_SUBSIDY_GRANTED.GRANTED_AGED) {
+    return 'paySubsidyDecisionAged';
+  }
+  return 'paySubsidyDecision';
+};
+
 const ApplicationFormStep3: React.FC<DynamicFormStepComponentProps> = ({
   data,
 }) => {
@@ -60,6 +72,9 @@ const ApplicationFormStep3: React.FC<DynamicFormStepComponentProps> = ({
                 as="li"
                 attachments={attachments}
                 attachmentType={ATTACHMENT_TYPES.PAY_SUBSIDY_CONTRACT}
+                attachmentTypeTranslationKey={translationKeyForPaySubsidyAttachement(
+                  paySubsidyGranted
+                )}
                 showMessage={showSubsidyMessage}
                 required
               />

frontend/benefit/applicant/src/components/applications/forms/application/step3/attachmentsList/AttachmentsList.tsx

@@ -1,5 +1,6 @@
 import { ATTACHMENT_TYPES } from 'benefit-shared/constants';
 import camelCase from 'lodash/camelCase';
+import { TFunction } from 'next-i18next';
 import * as React from 'react';
 import AttachmentsListBase from 'shared/components/attachments/AttachmentsList';
 import { BenefitAttachment } from 'shared/types/attachment';
@@ -8,14 +9,28 @@ import { useAttachmentsList } from './useAttachmentsList';
 
 export type AttachmentsListProps = {
   attachmentType: ATTACHMENT_TYPES;
+  attachmentTypeTranslationKey?: string;
   showMessage?: boolean;
   attachments?: BenefitAttachment[];
   required?: boolean;
   as?: 'div' | 'li';
 };
 
+const getTitleTranslation = (
+  t: TFunction,
+  translationsBase: string,
+  attachmentType: ATTACHMENT_TYPES,
+  attachmentTypeTranslationKey: string
+): string => {
+  const key = attachmentTypeTranslationKey
+    ? String(attachmentTypeTranslationKey)
+    : attachmentType;
+  return t(`${translationsBase}.types.${camelCase(key)}.title`);
+};
+
 const AttachmentsList: React.FC<AttachmentsListProps> = ({
   attachmentType,
+  attachmentTypeTranslationKey,
   showMessage = true,
   attachments,
   required,
@@ -38,7 +53,12 @@ const AttachmentsList: React.FC<AttachmentsListProps> = ({
   return (
     <AttachmentsListBase
       as={as}
-      title={t(`${translationsBase}.types.${camelCase(attachmentType)}.title`)}
+      title={getTitleTranslation(
+        t,
+        translationsBase,
+        attachmentType,
+        attachmentTypeTranslationKey
+      )}
       attachmentType={attachmentType}
       name={attachmentType}
       message={showMessage && message}