diff --git a/src/features/index.ts b/src/features/index.ts index 58f8eae482..4b1376392a 100644 --- a/src/features/index.ts +++ b/src/features/index.ts @@ -17,7 +17,7 @@ export { default as AppUpdater } from './app_updater'; /* -------------------------- Color scheme selector ------------------------- */ export { default as ColorSchemeSelector } from './color_scheme_selector'; -/* -------------------------------- Contact ------------------------------- */ +/* --------------------------------- Contact -------------------------------- */ export { default as Contact } from './contact'; /* -------------------------------- Dashboard ------------------------------- */ @@ -25,7 +25,7 @@ export { default as DashboardCard } from './dashboard/card'; export { default as DashboardMenu } from './dashboard/menu'; export { default as DashboardSkeletonLoader } from './dashboard/skeleton_loader'; -/* -------------------------------- Demo ------------------------------- */ +/* ---------------------------------- Demo ---------------------------------- */ export { default as DemoBanner } from './demo/banner'; export { default as DemoNotice } from './demo/notice'; export { default as DemoStartup } from './demo/start'; @@ -63,6 +63,7 @@ export { default as PersonsList } from './persons/list'; export { default as PersonsSearch } from './persons/search'; export { default as PersonTimeAway } from './persons/time_away'; export { default as PersonAssignmentsHistory } from './persons/assignments_history'; +export { default as PersonAppUserProfile } from './persons/app_user_profile'; /* -------------------------------- Ministry -------------------------------- */ export { default as MinistryTimer } from './ministry/report/ministry_timer'; diff --git a/src/features/persons/app_user_profile/index.tsx b/src/features/persons/app_user_profile/index.tsx new file mode 100644 index 0000000000..b5fbfc598d --- /dev/null +++ b/src/features/persons/app_user_profile/index.tsx @@ -0,0 +1,60 @@ +import { Box } from '@mui/material'; +import usePersonAppPersonProfile from './useAppUserProfile'; +import Typography from '@components/typography'; +import { useAppTranslation } from '@hooks/index'; +import Button from '@components/button'; +import { IconAddPerson, IconArrowLink } from '@components/icons'; + +const PersonAppUserProfile = () => { + const { t } = useAppTranslation(); + const { + userIsRegistered, + getTextForAppPersonProfileDesc, + navigateToManageAccess, + } = usePersonAppPersonProfile(); + + return ( + + + + {t('tr_appUserProfile')} + + + + + + ); +}; + +export default PersonAppUserProfile; diff --git a/src/features/persons/app_user_profile/useAppUserProfile.tsx b/src/features/persons/app_user_profile/useAppUserProfile.tsx new file mode 100644 index 0000000000..86d2bb0d99 --- /dev/null +++ b/src/features/persons/app_user_profile/useAppUserProfile.tsx @@ -0,0 +1,62 @@ +import { CongregationUserType } from '@definition/api'; +import { useAppTranslation } from '@hooks/index'; +import { formatDate } from '@services/dateformat'; +import { congregationsPersonsState } from '@states/app'; +import { personCurrentDetailsState } from '@states/persons'; +import { shortDateFormatState } from '@states/settings'; +import { useNavigate } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; + +const usePersonAppPersonProfile = () => { + const { t } = useAppTranslation(); + const congregationsPersons = useRecoilValue(congregationsPersonsState); + const currentPersonDetails = useRecoilValue(personCurrentDetailsState); + const shortDateFormat = useRecoilValue(shortDateFormatState); + const navigate = useNavigate(); + + const userIsRegistered: boolean = congregationsPersons.some( + (person) => + person.profile.user_local_uid === currentPersonDetails.person_uid + ); + + const currentPersonInCongragation: CongregationUserType = + congregationsPersons.find( + (person) => + person.profile.user_local_uid === currentPersonDetails.person_uid + ); + + const getTextForAppPersonProfileDesc = () => { + if (userIsRegistered) { + const lastTimeOnline = currentPersonInCongragation.sessions[0]?.last_seen; + + const formattedLastTimeOnline = lastTimeOnline + ? formatDate(new Date(lastTimeOnline), shortDateFormat) + : t('tr_notYet'); + + return t('tr_appUserProfileRegisteredDesc', { + lastTimeOnline: formattedLastTimeOnline, + }); + } + + return t('tr_appUserProfileNotRegisteredDesc'); + }; + + const navigateToManageAccess = () => { + if (userIsRegistered) { + navigate(`/manage-access/${currentPersonInCongragation.id}`); + return; + } + + navigate(`/manage-access/`); + return; + }; + + return { + userIsRegistered, + currentPersonInCongragation, + getTextForAppPersonProfileDesc, + navigateToManageAccess, + }; +}; + +export default usePersonAppPersonProfile; diff --git a/src/locales/en/general.json b/src/locales/en/general.json index 1c9b62e54e..b437b0182d 100644 --- a/src/locales/en/general.json +++ b/src/locales/en/general.json @@ -130,6 +130,12 @@ "tr_circuit": "Circuit: {{ circuitNumber }}", "tr_ageInYearsAndMonths": "{{ years }} years, {{months}} months", "tr_personHasNoAssignmentHistory": "This person has no assignment history yet", + "tr_appUserProfile": "App user profile", + "tr_appUserProfileNotRegisteredDesc": "This person isn't using the Organized app yet. You can create a user profile for this person on the Manage Access page.", + "tr_appUserProfileRegisteredDesc": "This person is already using the Organized app. Last time online: {{ lastTimeOnline }}. Edit other user profile settings on the Manage Access page.", + "tr_notYet": "Not yet", + "tr_manageUserProfileSettings": "Manage user profile settings", + "tr_createUserProfile": "Create user profile", "tr_download": "Download", "tr_import": "Import" } diff --git a/src/pages/persons/person_details/index.tsx b/src/pages/persons/person_details/index.tsx index 6934b1e736..f1d086083f 100644 --- a/src/pages/persons/person_details/index.tsx +++ b/src/pages/persons/person_details/index.tsx @@ -6,6 +6,7 @@ import { useCurrentUser, } from '@hooks/index'; import { + PersonAppUserProfile, PersonAssignment, PersonAssignmentsHistory, PersonBasicInfo, @@ -53,6 +54,7 @@ const PersonDetails = () => { }} > + {!isNewPerson && } {isBaptized && (