feat(app): update UI and fix bugs for credit hours and assignment res…

…trictions

src/features/persons/assignment_group/index.tsx

@@ -2,6 +2,7 @@ import AssignmentsCheckList from '@components/assignments_checklist';
 import Checkbox from '@components/checkbox';
 import { AssignmentGroupType } from './index.types';
 import useAssignmentGroup from './useAssignmentGroup';
+import Tooltip from '@components/tooltip';
 
 const AssignmentGroup = ({
   header,
@@ -15,42 +16,57 @@ const AssignmentGroup = ({
   disqualified = false,
   readOnly,
 }: AssignmentGroupType) => {
-  const { checkAssignmentDisabled, checkGroupDisabled } =
-    useAssignmentGroup(male);
+  const {
+    checkAssignmentDisabled,
+    checkGroupDisabled,
+    isMinistryDisabled,
+    isDisabledByGender,
+    getTooltipsForAssignmentTitles,
+  } = useAssignmentGroup(male);
 
   return (
-    <AssignmentsCheckList
-      header={header}
-      color={color}
-      disabled={disqualified || checkGroupDisabled(id)}
-      onChange={(checked) => onHeaderChange(checked, id)}
-      readOnly={readOnly}
+    <Tooltip
+      followCursor
+      title={getTooltipsForAssignmentTitles(id, items)}
+      show={isMinistryDisabled(id, items) || isDisabledByGender(id)}
     >
-      {items.map((assignment) => (
-        <Checkbox
-          key={assignment.code}
-          readOnly={readOnly}
-          label={assignment.name}
-          checked={
-            checkAssignmentDisabled(assignment.code)
-              ? false
-              : checkedItems.includes(assignment.code)
-          }
-          onChange={(_, checked) => onItemChange(checked, assignment.code)}
-          className="body-small-regular"
-          disabled={disqualified || checkAssignmentDisabled(assignment.code)}
-          sx={
-            assignment.borderTop
-              ? {
-                  borderTop: '1px solid var(--accent-200)',
-                  marginTop: '4px',
-                  paddingTop: '8px',
-                }
-              : {}
-          }
-        />
-      ))}
-    </AssignmentsCheckList>
+      <AssignmentsCheckList
+        header={header}
+        color={color}
+        disabled={
+          disqualified ||
+          checkGroupDisabled(id) ||
+          isMinistryDisabled(id, items)
+        }
+        onChange={(checked) => onHeaderChange(checked, id)}
+        readOnly={readOnly}
+      >
+        {items.map((assignment) => (
+          <Checkbox
+            key={assignment.code}
+            readOnly={readOnly}
+            label={assignment.name}
+            checked={
+              checkAssignmentDisabled(assignment.code)
+                ? false
+                : checkedItems.includes(assignment.code)
+            }
+            onChange={(_, checked) => onItemChange(checked, assignment.code)}
+            className="body-small-regular"
+            disabled={disqualified || checkAssignmentDisabled(assignment.code)}
+            sx={
+              assignment.borderTop
+                ? {
+                    borderTop: '1px solid var(--accent-200)',
+                    marginTop: '4px',
+                    paddingTop: '8px',
+                  }
+                : {}
+            }
+          />
+        ))}
+      </AssignmentsCheckList>
+    </Tooltip>
   );
 };
 

src/features/persons/assignment_group/useAssignmentGroup.tsx

@@ -1,10 +1,12 @@
 import { AssignmentCode } from '@definition/assignment';
+import { useAppTranslation } from '@hooks/index';
 import { personIsFR, personIsPublisher } from '@services/app/persons';
 import { personCurrentDetailsState } from '@states/persons';
 import { useRecoilValue } from 'recoil';
 
 const useAssignmentGroup = (male: boolean) => {
   const person = useRecoilValue(personCurrentDetailsState);
+  const { t } = useAppTranslation();
 
   const checkGroupDisabled = (id: string) => {
     let isDisabled = true;
@@ -44,7 +46,38 @@ const useAssignmentGroup = (male: boolean) => {
     return isDisabled;
   };
 
-  return { checkAssignmentDisabled, checkGroupDisabled };
+  const isMinistryDisabled = (
+    id: string,
+    items: { code: AssignmentCode }[]
+  ) => {
+    if (!items.length) return false;
+    return id === 'ministry' && checkAssignmentDisabled(items[0].code);
+  };
+
+  const isDisabledByGender = (id: string) => {
+    return !male && id !== 'applyFieldMinistryPart';
+  };
+
+  const getTooltipsForAssignmentTitles = (
+    id: string,
+    items: { code: AssignmentCode }[]
+  ) => {
+    if (isMinistryDisabled(id, items)) {
+      return t('tr_onlyAvailableForPioneers');
+    }
+    if (isDisabledByGender(id)) {
+      return t('tr_appliesOnlyToBrothers');
+    }
+    return '';
+  };
+
+  return {
+    checkAssignmentDisabled,
+    checkGroupDisabled,
+    isMinistryDisabled,
+    isDisabledByGender,
+    getTooltipsForAssignmentTitles,
+  };
 };
 
 export default useAssignmentGroup;

src/locales/en/general.json

@@ -132,5 +132,6 @@
   "tr_noNotifications": "No notifications yet",
   "tr_noNotificationsDesc": "Important notifications will be displayed here.",
   "tr_userRoleChanged": "Access changed",
-  "tr_userRoleChangedDesc": "Your access in Organized has been changed recently. Log in to your account again for the changes to take effect."
+  "tr_userRoleChangedDesc": "Your access in Organized has been changed recently. Log in to your account again for the changes to take effect.",
+  "tr_appliesOnlyToBrothers": "Applies only to brothers"
 }

src/locales/en/ministry.json

@@ -123,5 +123,6 @@
   "tr_reminderPublisherReport": "Submit your monthly field service report",
   "tr_reminderPublisherReportDesc": "It should be submitted to the secretary no later than the 6th day of the month.",
   "tr_reminderBranchReport": "The Congregation Field Service and Meeting Attendance (S-1) report hasn’t been submitted yet",
-  "tr_reminderBranchReportDesc": "It should be submitted to the branch office no later than the 20th day of the month."
+  "tr_reminderBranchReportDesc": "It should be submitted to the branch office no later than the 20th day of the month.",
+  "tr_onlyAvailableForPioneers": "Only available for pioneers"
 }