From f901544cc29f2d48b8b9c298a283ec4b6012913e Mon Sep 17 00:00:00 2001
From: Mythily Mudunuru <102122005+mythilytm@users.noreply.github.com>
Date: Fri, 8 Dec 2023 13:31:39 -0500
Subject: [PATCH] CHI-2453 fix edit sections (duplicate PR) (#1929)

* fix: corrections to bug causing labels; chore:add cl prfileForm Sections

* fix: edit page use of form details

* translation: add profile translations

* fix: corrections to bug causing labels; chore:add cl prfileForm Sections

* cleanup: update nz form defintions

* fix: clean up translations file

* update cl profile section definition

---------

Co-authored-by: Robert Bo Davis <bo@interrobang.consulting>
---
 .../as/v1/profileForms/Sections.json          | 19 +++++++++++--------
 .../cl/v1/profileForms/Sections.json          | 11 +++++++++++
 .../nz/v1/profileForms/Sections.json          | 19 +++++++++++--------
 .../src/formDefinition/loadDefinition.ts      |  4 ++--
 .../src/formDefinition/types.ts               |  5 +++--
 .../src/components/profile/ProfileDetails.tsx | 17 +++++++++--------
 .../profile/section/ProfileSectionEdit.tsx    |  3 +--
 .../profile/section/ProfileSectionView.tsx    |  6 +++---
 .../hooks/useProfileSectionTypes.ts           |  4 ++--
 .../src/translations/en-NZ/flexUI.json        |  1 +
 .../src/translations/en-US/flexUI.json        | 14 +++++++-------
 .../src/translations/es-CL/flexUI.json        |  4 +++-
 12 files changed, 64 insertions(+), 43 deletions(-)
 create mode 100644 hrm-form-definitions/form-definitions/cl/v1/profileForms/Sections.json

diff --git a/hrm-form-definitions/form-definitions/as/v1/profileForms/Sections.json b/hrm-form-definitions/form-definitions/as/v1/profileForms/Sections.json
index c12177c085..ed3f60b20b 100644
--- a/hrm-form-definitions/form-definitions/as/v1/profileForms/Sections.json
+++ b/hrm-form-definitions/form-definitions/as/v1/profileForms/Sections.json
@@ -1,26 +1,29 @@
 [
   {
     "name": "summary",
-    "label": "Summary ",
+    "label": "Summary",
+    "editLabel": "Edit Summary",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
-    "placeholder": "Enter a summary of the case"
+    "width": 500,
+    "placeholder": "Enter a summary of the client"
   },
   {
-    "name": "recommended approach",
+    "name": "recommendedApproach",
     "label": "Recommended Approach",
+    "editLabel": "Edit Recommended Approach",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
-    "placeholder": "Enter recommended approach "
+    "width": 500,
+    "placeholder": "Enter recommended approach"
   },
   {
     "name": "details",
     "label": "Details",
+    "editLabel": "Edit Details",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
+    "width": 500,
     "placeholder": "Enter Details"
   }
-]
\ No newline at end of file
+]
diff --git a/hrm-form-definitions/form-definitions/cl/v1/profileForms/Sections.json b/hrm-form-definitions/form-definitions/cl/v1/profileForms/Sections.json
new file mode 100644
index 0000000000..27d3135126
--- /dev/null
+++ b/hrm-form-definitions/form-definitions/cl/v1/profileForms/Sections.json
@@ -0,0 +1,11 @@
+[
+  {
+    "name": "summary",
+    "label": "Summary",
+    "editLabel": "Edit Summary",
+    "type": "textarea",
+    "rows": 20,
+    "width": 500,
+    "placeholder": "Ingrese un resumen del cliente"
+  }
+]
diff --git a/hrm-form-definitions/form-definitions/nz/v1/profileForms/Sections.json b/hrm-form-definitions/form-definitions/nz/v1/profileForms/Sections.json
index c12177c085..ed3f60b20b 100644
--- a/hrm-form-definitions/form-definitions/nz/v1/profileForms/Sections.json
+++ b/hrm-form-definitions/form-definitions/nz/v1/profileForms/Sections.json
@@ -1,26 +1,29 @@
 [
   {
     "name": "summary",
-    "label": "Summary ",
+    "label": "Summary",
+    "editLabel": "Edit Summary",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
-    "placeholder": "Enter a summary of the case"
+    "width": 500,
+    "placeholder": "Enter a summary of the client"
   },
   {
-    "name": "recommended approach",
+    "name": "recommendedApproach",
     "label": "Recommended Approach",
+    "editLabel": "Edit Recommended Approach",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
-    "placeholder": "Enter recommended approach "
+    "width": 500,
+    "placeholder": "Enter recommended approach"
   },
   {
     "name": "details",
     "label": "Details",
+    "editLabel": "Edit Details",
     "type": "textarea",
     "rows": 20,
-    "width": 300,
+    "width": 500,
     "placeholder": "Enter Details"
   }
-]
\ No newline at end of file
+]
diff --git a/hrm-form-definitions/src/formDefinition/loadDefinition.ts b/hrm-form-definitions/src/formDefinition/loadDefinition.ts
index 8d670b6d3d..fc71b750a4 100644
--- a/hrm-form-definitions/src/formDefinition/loadDefinition.ts
+++ b/hrm-form-definitions/src/formDefinition/loadDefinition.ts
@@ -30,7 +30,7 @@ import {
   isSelectDefinitionWithReferenceOptions,
   LayoutVersion,
   CategoriesDefinition,
-  ProfileSection,
+  ProfileSectionDefinition,
 } from './types';
 import { OneToManyConfigSpecs, OneToOneConfigSpec } from './insightsConfig';
 
@@ -197,7 +197,7 @@ export async function loadDefinition(baseUrl: string): Promise<DefinitionVersion
     ),
     fetchDefinition<Record<string, any>>('ReferenceData.json', {}),
     fetchDefinition<string[]>('BlockedEmojis.json', []),
-    fetchDefinition<ProfileSection[]>('profileForms/Sections.json', []),
+    fetchDefinition<ProfileSectionDefinition[]>('profileForms/Sections.json', []),
   ]);
 
   const { helplines } = helplineInformation;
diff --git a/hrm-form-definitions/src/formDefinition/types.ts b/hrm-form-definitions/src/formDefinition/types.ts
index 02c96cb087..7ecefe0fa1 100644
--- a/hrm-form-definitions/src/formDefinition/types.ts
+++ b/hrm-form-definitions/src/formDefinition/types.ts
@@ -188,9 +188,10 @@ type CustomContactComponentDefinition = ItemBase &
     props?: Record<string, boolean | number | string>;
   };
 
-export declare type ProfileSection = {
+export declare type ProfileSectionDefinition = {
   name: string;
   label: string;
+  editLabel: string;
   type: string;
   rows: number;
   placeholder: string;
@@ -338,5 +339,5 @@ export type DefinitionVersion = {
   };
   referenceData?: Record<string, any>;
   blockedEmojis: string[];
-  profileForms?: { Sections: ProfileSection[] };
+  profileForms?: { Sections: ProfileSectionDefinition[] };
 };
diff --git a/plugin-hrm-form/src/components/profile/ProfileDetails.tsx b/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
index 4264c374f1..d6e6f221c5 100644
--- a/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
+++ b/plugin-hrm-form/src/components/profile/ProfileDetails.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Icon, Template } from '@twilio/flex-ui';
-import { ProfileSection } from 'hrm-form-definitions';
+import { ProfileSectionDefinition } from 'hrm-form-definitions';
 
 import { Box, HiddenText, Row, HorizontalLine } from '../../styles/HrmStyles';
 import { newOpenModalAction } from '../../states/routing/actions';
@@ -37,8 +37,7 @@ import ProfileSectionView from './section/ProfileSectionView';
 type OwnProps = ProfileCommonProps;
 
 type Section = {
-  titleCode?: string;
-  title?: string;
+  titleCode: string;
   renderComponent: () => React.ReactNode;
   handleEdit?: () => void;
   inInlineEditMode?: boolean;
@@ -66,12 +65,12 @@ const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal
     },
   ];
 
-  const sectionTypesForms: ProfileSection[] = useProfileSectionTypes();
+  const sectionTypesForms = useProfileSectionTypes();
 
   const sectionSections: Section[] = sectionTypesForms.map(sectionType => ({
-    title: `${sectionType.name}`,
+    titleCode: sectionType.label,
     renderComponent: () => <ProfileSectionView profileId={profileId} task={task} sectionType={sectionType} />,
-    handleEdit: () => openSectionEditModal(sectionType.label),
+    handleEdit: () => openSectionEditModal(sectionType.name),
   }));
 
   const renderEditButton = section => {
@@ -86,7 +85,9 @@ const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal
       <ProfileSectionEditButton onClick={section.handleEdit}>
         {icon && <Icon icon={icon} />}
         {!icon && <Template code="Profile-EditButton" />}
-        <HiddenText>{section.title}</HiddenText>
+        <HiddenText>
+          <Template code={section.titleCode} />{' '}
+        </HiddenText>
       </ProfileSectionEditButton>
     );
   };
@@ -95,7 +96,7 @@ const ProfileDetails: React.FC<Props> = ({ profileId, task, openSectionEditModal
     if (!section) return null;
 
     return (
-      <div key={section.title}>
+      <div key={section.titleCode}>
         <ProfileSectionWrapper>
           <Box marginBottom="5px">
             <Row>
diff --git a/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx b/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
index 15970dd774..6cda07909a 100644
--- a/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
+++ b/plugin-hrm-form/src/components/profile/section/ProfileSectionEdit.tsx
@@ -16,7 +16,6 @@
 
 import React, { useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import startCase from 'lodash/startCase';
 
 import { ProfileSection } from '../../../types/types';
 import NavigableContainer from '../../NavigableContainer';
@@ -59,7 +58,7 @@ const ProfileSectionEdit = ({ task, profileId, sectionType, closeModal }: Props)
   };
 
   return (
-    <NavigableContainer titleCode={`Edit ${startCase(sectionType)}`} task={task}>
+    <NavigableContainer titleCode={sectionTypesForm.editLabel} task={task}>
       <Container>
         <Box>
           <ColumnarBlock>
diff --git a/plugin-hrm-form/src/components/profile/section/ProfileSectionView.tsx b/plugin-hrm-form/src/components/profile/section/ProfileSectionView.tsx
index 780e3a493c..8c6f6c9002 100644
--- a/plugin-hrm-form/src/components/profile/section/ProfileSectionView.tsx
+++ b/plugin-hrm-form/src/components/profile/section/ProfileSectionView.tsx
@@ -15,14 +15,14 @@
  */
 
 import React from 'react';
-import { ProfileSection } from 'hrm-form-definitions';
+import { ProfileSectionDefinition } from 'hrm-form-definitions';
 
 import { ProfileCommonProps } from '../types';
 import { useProfileSectionByType } from '../../../states/profile/hooks/useProfileSection';
 import { ProfileSectionTextContent, SectionText } from '../styles';
 
 type OwnProps = ProfileCommonProps & {
-  sectionType: ProfileSection;
+  sectionType: ProfileSectionDefinition;
 };
 
 const ProfileSectionView = ({ profileId, sectionType }: OwnProps) => {
@@ -34,7 +34,7 @@ const ProfileSectionView = ({ profileId, sectionType }: OwnProps) => {
 
   return (
     <ProfileSectionTextContent hasContent={Boolean(section?.content)}>
-      {section?.content?.length > 0 ? section?.content : `No ${sectionType.name}`}
+      {section?.content?.length > 0 ? section?.content : `No ${sectionType.label}`}
     </ProfileSectionTextContent>
   );
 };
diff --git a/plugin-hrm-form/src/states/configuration/hooks/useProfileSectionTypes.ts b/plugin-hrm-form/src/states/configuration/hooks/useProfileSectionTypes.ts
index 7a42abebb8..30f72b56df 100644
--- a/plugin-hrm-form/src/states/configuration/hooks/useProfileSectionTypes.ts
+++ b/plugin-hrm-form/src/states/configuration/hooks/useProfileSectionTypes.ts
@@ -19,11 +19,11 @@ import { useSelector } from 'react-redux';
 import * as ConfigurationSelectors from '../selectors';
 
 import { RootState } from '../..';
-import { ProfileSection } from 'hrm-form-definitions';
+import { ProfileSectionDefinition } from 'hrm-form-definitions';
 
 const useProfileSectionTypes = () =>
   useSelector(
-    (state: RootState): ProfileSection[] =>
+    (state: RootState): ProfileSectionDefinition[] =>
       ConfigurationSelectors.selectDefinitionVersionProperty(state, 'profileForms')?.Sections,
   );
 
diff --git a/plugin-hrm-form/src/translations/en-NZ/flexUI.json b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
index 8264957ea6..28932d910d 100644
--- a/plugin-hrm-form/src/translations/en-NZ/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-NZ/flexUI.json
@@ -320,6 +320,7 @@
   "PreviousContacts-TwitterUser": "Twitter user",
   "PreviousContacts-ViewRecords": "View Records",
   "PreviousContacts-WhatsappNumber": "WhatsApp number",
+
   "QueueCard-LessThanMinute": "less than a minute",
   "QueueCard-Minutes": "&nbsp;minutes",
   "QueueCard-Name": "Queue name:",
diff --git a/plugin-hrm-form/src/translations/en-US/flexUI.json b/plugin-hrm-form/src/translations/en-US/flexUI.json
index eb1a7fa66a..dd087a5814 100644
--- a/plugin-hrm-form/src/translations/en-US/flexUI.json
+++ b/plugin-hrm-form/src/translations/en-US/flexUI.json
@@ -26,7 +26,6 @@
   "CallTypeButtons-Or": "Or was this contact…",
   "ConnectDialog-Child": "Copy child information from this record to new contact?",
   "ConnectDialog-Caller": "Copy caller information from this record to new contact?",
-  "Profile-Title": "Client Profile",
   "QueueCard-WaitLabel": "Longest wait time:",
   "QueueCard-None": "none",
   "QueueCard-LessThanMinute": "less than a minute",
@@ -60,11 +59,11 @@
   "SearchResultsIndex-ViewContacts": "View Contacts",
   "SearchResultsIndex-ViewCases": "View Cases",
   "Contact-ViewButton": "View",
-  "SearchResultsIndex-SelectCase":"Select Case",
-  "SearchResultsIndex-NoCasesFound":"No {{type}} Found",
-  "SearchResultsIndex-SearchAgainForCase":"Search again for a {{type}}",
-  "SearchResultsIndex-SaveToNewCase":"save this contact to a new case",
-  "SearchResultsIndex-Or":"or",
+  "SearchResultsIndex-SelectCase": "Select Case",
+  "SearchResultsIndex-NoCasesFound": "No {{type}}s Found",
+  "SearchResultsIndex-SearchAgainForCase": "Search again for a {{type}}",
+  "SearchResultsIndex-SaveToNewCase": "save this contact to a new case",
+  "SearchResultsIndex-Or": "or",
 
   "StandaloneSearch-SideNav": "Search",
   "CaseHeader-Opened": "Opened",
@@ -386,6 +385,7 @@
   "PreviousContacts-ViewRecords": "View Records",
   "PreviousContacts-OnlyShowRecordsFrom": "Only show records from",
 
+  "Profile-Title": "Client Profile",
   "Profile-DetailsHeader-Overview": "Overview",
   "Profile-DetailsHeader-Notes": "Notes",
   "Profile-IdentifiersHeader": "Identifiers",
@@ -398,7 +398,7 @@
   "Profile-FlagEditHeader": "Edit Status and Blocking",
   "Profile-NoContactsFound": "No Contacts Found",
   "Profile-NoCasesFound": "No Cases Found",
-  
+
   "UploadFile-ButtonText": "Upload File",
   "DownloadFile-ButtonText": "Download File",
   "CSAMReportForm-Header": "File a Report: Child Sexual Abuse Material",
diff --git a/plugin-hrm-form/src/translations/es-CL/flexUI.json b/plugin-hrm-form/src/translations/es-CL/flexUI.json
index 2e39c315c0..21df146694 100644
--- a/plugin-hrm-form/src/translations/es-CL/flexUI.json
+++ b/plugin-hrm-form/src/translations/es-CL/flexUI.json
@@ -512,5 +512,7 @@
   "CaseMerging-RemoveFromCase": "Quitar del caso",
   "CaseMerging-ContactRemovedFromCase": "Contacto eliminado del caso",
   "CaseMerging-CaseCreatedAndContactAdded": "Caso #{{caseId}} creado y contacto agregado",
-  "CaseMerging-CancelCase": "Cancelar Caso"
+  "CaseMerging-CancelCase": "Cancelar Caso",
+
+  "Something Else": "Enfoque Recomendado"
 }