feat(persons): include shortcut for creating new User for specific person

src/features/index.ts

@@ -17,15 +17,15 @@ 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 ------------------------------- */
 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';

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 (
+    <Box
+      sx={{
+        padding: '16px',
+        gap: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 'var(--radius-xl)',
+        backgroundColor: userIsRegistered
+          ? 'var(--white)'
+          : 'var(--accent-150)',
+        border: `1px ${userIsRegistered ? 'solid' : 'dashed'} var(--accent-300)`,
+      }}
+    >
+      <Box
+        sx={{
+          gap: '12px',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography className="h2" color="var(--black)">
+          {t('tr_appUserProfile')}
+        </Typography>
+        <Typography
+          className="body-regular"
+          color="var(--black)"
+          dangerouslySetInnerHTML={{ __html: getTextForAppPersonProfileDesc() }}
+        ></Typography>
+      </Box>
+      <Button
+        startIcon={userIsRegistered ? <IconArrowLink /> : <IconAddPerson />}
+        variant="small"
+        sx={{ width: 'fit-content' }}
+        onClick={() => navigateToManageAccess()}
+      >
+        {userIsRegistered
+          ? t('tr_manageUserProfileSettings')
+          : t('tr_createUserProfile')}
+      </Button>
+    </Box>
+  );
+};
+
+export default PersonAppUserProfile;

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;

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: <span class='h4'>{{ lastTimeOnline }}</span>. 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"
 }

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 = () => {
           }}
         >
           <PersonBasicInfo />
+          {!isNewPerson && <PersonAppUserProfile />}
           <PersonSpiritualStatus />
 
           {isBaptized && (