add button to easily change person profile mode between child and adu…

…lt. Button is shown if person is 10-17y old and there could be edge cases where the default mode is not correct.
espoon-voltti · Jan 21, 2025 · d188e0f · d188e0f
1 parent b1cec64
commit d188e0f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 31 deletions.
diff --git a/frontend/src/employee-frontend/components/ChildInformation.tsx b/frontend/src/employee-frontend/components/ChildInformation.tsx
@@ -5,17 +5,22 @@
 import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useContext, useEffect, useMemo } from 'react'
-import { Link } from 'react-router'
+import { Link, useNavigate } from 'react-router'
 import styled from 'styled-components'
 
 import { Action } from 'lib-common/generated/action'
 import { ParentshipWithPermittedActions } from 'lib-common/generated/api-types/pis'
 import { ChildId } from 'lib-common/generated/api-types/shared'
 import LocalDate from 'lib-common/local-date'
 import { useIdRouteParam } from 'lib-common/useRouteParams'
+import { getAge } from 'lib-common/utils/local-date'
 import Title from 'lib-components/atoms/Title'
+import { Button } from 'lib-components/atoms/buttons/Button'
 import { Container, ContentArea } from 'lib-components/layout/Container'
-import { FixedSpaceColumn } from 'lib-components/layout/flex-helpers'
+import {
+  FixedSpaceColumn,
+  FixedSpaceRow
+} from 'lib-components/layout/flex-helpers'
 import { fontWeights } from 'lib-components/typography'
 import { Gap } from 'lib-components/white-space'
 import { faUsers } from 'lib-icons'
@@ -286,6 +291,7 @@ const ChildInformation = React.memo(function ChildInformation({
   id: ChildId
 }) {
   const { i18n } = useTranslation()
+  const navigate = useNavigate()
   const { roles } = useContext(UserContext)
   const { person, parentships } = useContext<ChildState>(ChildContext)
 
@@ -330,24 +336,35 @@ const ChildInformation = React.memo(function ChildInformation({
               {person.isSuccess && person.value.restrictedDetailsEnabled && (
                 <WarningLabel text={i18n.childInformation.restrictedDetails} />
               )}
-              {currentHeadOfChildId ? (
-                <HeadOfFamilyLink
-                  to={`/profile/${currentHeadOfChildId}`}
-                  className="person-details-family-link"
-                >
-                  <span className="fa-layers fa-fw link-icon">
-                    <FontAwesomeIcon className="dark-blue" icon={faCircle} />
-                    <FontAwesomeIcon
-                      icon={faUsers}
-                      inverse
-                      transform="shrink-6"
+              <FixedSpaceRow spacing="L">
+                {person.isSuccess &&
+                  getAge(person.value.dateOfBirth) >= 10 &&
+                  getAge(person.value.dateOfBirth) < 18 && (
+                    <Button
+                      appearance="inline"
+                      text={i18n.childInformation.asAdult}
+                      onClick={() => navigate(`/profile/${id}`)}
                     />
-                  </span>
-                  <div className="link-text">
-                    {i18n.childInformation.personDetails.familyLink}
-                  </div>
-                </HeadOfFamilyLink>
-              ) : null}
+                  )}
+                {currentHeadOfChildId && (
+                  <HeadOfFamilyLink
+                    to={`/profile/${currentHeadOfChildId}`}
+                    className="person-details-family-link"
+                  >
+                    <span className="fa-layers fa-fw link-icon">
+                      <FontAwesomeIcon className="dark-blue" icon={faCircle} />
+                      <FontAwesomeIcon
+                        icon={faUsers}
+                        inverse
+                        transform="shrink-6"
+                      />
+                    </span>
+                    <div className="link-text">
+                      {i18n.childInformation.personDetails.familyLink}
+                    </div>
+                  </HeadOfFamilyLink>
+                )}
+              </FixedSpaceRow>
             </div>
           </HeaderRow>
         </ContentArea>

diff --git a/frontend/src/employee-frontend/components/PersonProfile.tsx b/frontend/src/employee-frontend/components/PersonProfile.tsx
@@ -3,16 +3,21 @@
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
 import React, { useContext, useMemo } from 'react'
+import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 
 import { Action } from 'lib-common/generated/action'
 import { PersonId } from 'lib-common/generated/api-types/shared'
 import { useIdRouteParam } from 'lib-common/useRouteParams'
+import { getAge } from 'lib-common/utils/local-date'
 import Title from 'lib-components/atoms/Title'
 import { Button } from 'lib-components/atoms/buttons/Button'
 import { Container, ContentArea } from 'lib-components/layout/Container'
 import { Td } from 'lib-components/layout/Table'
-import { FixedSpaceColumn } from 'lib-components/layout/flex-helpers'
+import {
+  FixedSpaceColumn,
+  FixedSpaceRow
+} from 'lib-components/layout/flex-helpers'
 import { defaultMargins, Gap } from 'lib-components/white-space'
 import { faListTimeline } from 'lib-icons'
 
@@ -214,6 +219,7 @@ const PersonProfile = React.memo(function PersonProfile({
   id: PersonId
 }) {
   const { i18n } = useTranslation()
+  const navigate = useNavigate()
 
   const { roles } = useContext(UserContext)
   const { person, permittedActions } = useContext(PersonContext)
@@ -251,17 +257,28 @@ const PersonProfile = React.memo(function PersonProfile({
                     )}
                   </InfoLabelContainer>
                 )}
-              {permittedActions.has('READ_TIMELINE') && (
-                <a href={`/employee/profile/${id}/timeline`}>
-                  <Button
-                    appearance="inline"
-                    text={i18n.personProfile.timeline}
-                    onClick={() => undefined}
-                    icon={faListTimeline}
-                    data-qa="timeline-button"
-                  />
-                </a>
-              )}
+              <FixedSpaceRow spacing="L">
+                {person.isSuccess &&
+                  getAge(person.value.dateOfBirth) >= 10 &&
+                  getAge(person.value.dateOfBirth) < 18 && (
+                    <Button
+                      appearance="inline"
+                      text={i18n.personProfile.asChild}
+                      onClick={() => navigate(`/child-information/${id}`)}
+                    />
+                  )}
+                {permittedActions.has('READ_TIMELINE') && (
+                  <a href={`/employee/profile/${id}/timeline`}>
+                    <Button
+                      appearance="inline"
+                      text={i18n.personProfile.timeline}
+                      onClick={() => undefined}
+                      icon={faListTimeline}
+                      data-qa="timeline-button"
+                    />
+                  </a>
+                )}
+              </FixedSpaceRow>
             </FixedSpaceColumn>
           </HeaderRow>
         </ContentArea>

diff --git a/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
@@ -614,6 +614,7 @@ export const fi = {
   },
   childInformation: {
     restrictedDetails: 'Turvakielto',
+    asAdult: 'Tarkastele aikuisena',
     personDetails: {
       title: 'Henkilö-, yhteys- ja terveystiedot',
       attendanceReport: 'Läsnä- ja poissaolotiedot',
@@ -1672,6 +1673,7 @@ export const fi = {
   },
   personProfile: {
     restrictedDetails: 'Turvakielto',
+    asChild: 'Tarkastele lapsena',
     timeline: 'Aikajana',
     personDetails: 'Henkilö- ja yhteystiedot',
     addSsn: 'Aseta hetu',