feat(congregation): update binding baptized user account

sws2apps · Jan 13, 2025 · a99a3c7 · a99a3c7
1 parent a51b6f4
commit a99a3c7
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 37 deletions.
diff --git a/src/features/congregation/app_access/user_add/person_select/index.tsx b/src/features/congregation/app_access/user_add/person_select/index.tsx
@@ -7,7 +7,7 @@ import Button from '@components/button';
 import Radio from '@components/radio';
 import TextField from '@components/textfield';
 import Typography from '@components/typography';
-import { IconCheckCircle, IconError, IconLoading } from '@components/icons';
+import { IconError, IconLoading } from '@components/icons';
 
 const PersonSelect = (props: PersonSelectType) => {
   const { t } = useAppTranslation();
@@ -21,7 +21,9 @@ const PersonSelect = (props: PersonSelectType) => {
     handleSelectPerson,
     selectedPerson,
     handleRunAction,
+    handleSecondaryAction,
     isProcessing,
+    isEmailEmpty,
     searchStatus,
   } = usePersonSelect(props);
 
@@ -37,32 +39,35 @@ const PersonSelect = (props: PersonSelectType) => {
         <Typography className="h2">
           {t('tr_addNewOrganizedUserTitle')}
         </Typography>
-
-        <Typography color={'var(--grey-400)'}>
-          {userType === 'baptized'
-            ? t('tr_addNewOrganizedUserDesc')
-            : t('tr_addNewPublisherDesc')}
-        </Typography>
       </Box>
+      {(userType !== 'baptized' || !searchStatus) && (
+        <RadioGroup
+          sx={{ gap: '8px', marginLeft: '10px' }}
+          value={userType}
+          onChange={(e) => handleChangeUserType(e.target.value as UserType)}
+        >
+          <FormControlLabel
+            value="baptized"
+            control={<Radio />}
+            label={<Typography>{t('tr_accountBaptizedBrother')}</Typography>}
+          />
+          <FormControlLabel
+            value="publisher"
+            control={<Radio />}
+            label={<Typography>{t('tr_publisherOrMidweekStudent')}</Typography>}
+          />
+        </RadioGroup>
+      )}
 
-      <RadioGroup
-        sx={{ gap: '8px', marginLeft: '10px' }}
-        value={userType}
-        onChange={(e) => handleChangeUserType(e.target.value as UserType)}
-      >
-        <FormControlLabel
-          value="baptized"
-          control={<Radio />}
-          label={<Typography>{t('tr_accountBaptizedBrother')}</Typography>}
-        />
-        <FormControlLabel
-          value="publisher"
-          control={<Radio />}
-          label={<Typography>{t('tr_accountPublisherStudent')}</Typography>}
-        />
-      </RadioGroup>
+      <Typography color={'var(--grey-400)'}>
+        {userType === 'baptized'
+          ? searchStatus
+            ? t('tr_userFoundSuccess')
+            : t('tr_addNewOrganizedUserDesc')
+          : t('tr_addNewPublisherDesc')}
+      </Typography>
 
-      {userType === 'baptized' && (
+      {userType === 'baptized' && !searchStatus && (
         <TextField
           label={t('tr_userEmailAddress')}
           type="email"
@@ -71,17 +76,15 @@ const PersonSelect = (props: PersonSelectType) => {
           error={searchStatus === false}
           success={searchStatus}
           helperText={
-            searchStatus === false
-              ? t('error_app_security_user-not-found')
-              : searchStatus
-                ? t('tr_userFoundSuccess')
+            isEmailEmpty
+              ? t('tr_enterUserEmail')
+              : searchStatus === false
+                ? t('error_app_security_user-not-found')
                 : ''
           }
           endIcon={
             searchStatus === false ? (
               <IconError color="var(--red-main)" />
-            ) : searchStatus ? (
-              <IconCheckCircle color="var(--green-main)" />
             ) : null
           }
         />
@@ -90,6 +93,7 @@ const PersonSelect = (props: PersonSelectType) => {
       <Autocomplete
         disabled={userType === 'baptized' && !searchStatus}
         label={t('tr_selectPerson')}
+        hidden={userType === 'baptized' && !searchStatus}
         options={persons}
         getOptionLabel={(option: UsersOption) => option.person_name}
         isOptionEqualToValue={(option, value) =>
@@ -125,10 +129,12 @@ const PersonSelect = (props: PersonSelectType) => {
         >
           {userType === 'baptized' && !searchStatus
             ? t('tr_searchUser')
-            : t('tr_createUser')}
+            : t('tr_bindUser')}
         </Button>
-        <Button variant="secondary" onClick={props.onClose}>
-          {t('tr_cancel')}
+        <Button variant="secondary" onClick={handleSecondaryAction}>
+          {userType !== 'baptized' || !searchStatus
+            ? t('tr_cancel')
+            : t('tr_back')}
         </Button>
       </Box>
     </>

diff --git a/src/features/congregation/app_access/user_add/person_select/usePersonSelect.tsx b/src/features/congregation/app_access/user_add/person_select/usePersonSelect.tsx
@@ -57,6 +57,7 @@ const usePersonSelect = ({
   const [isProcessing, setIsProcessing] = useState(false);
   const [userId, setUserId] = useState('');
   const [searchStatus, setSearchStatus] = useState<boolean>(null);
+  const [isEmailEmpty, setIsEmailEmpty] = useState<boolean>(null);
 
   const persons: UsersOption[] = useMemo(() => {
     return personsActive.map((person) => {
@@ -194,10 +195,15 @@ const usePersonSelect = ({
   };
 
   const handleSearchUser = async () => {
-    if (email.length === 0) return;
-
     setSearchStatus(null);
 
+    if (email.length === 0) {
+      setIsEmailEmpty(true);
+      setSearchStatus(false);
+      return;
+    }
+    setIsEmailEmpty(false);
+
     try {
       setIsProcessing(true);
 
@@ -249,6 +255,15 @@ const usePersonSelect = ({
     }
   };
 
+  const handleSecondaryAction = () => {
+    if (userType === 'baptized' && userId.length > 0) {
+      setSearchStatus(null);
+      setUserId('');
+      return;
+    }
+    onClose();
+  };
+
   return {
     userType,
     handleChangeUserType,
@@ -258,7 +273,9 @@ const usePersonSelect = ({
     selectedPerson,
     handleSelectPerson,
     handleRunAction,
+    handleSecondaryAction,
     isProcessing,
+    isEmailEmpty,
     searchStatus,
   };
 };

diff --git a/src/locales/en/congregation.json b/src/locales/en/congregation.json
@@ -120,10 +120,13 @@
   "tr_congregationActivitiesScheduling": "Congregation activities scheduling",
   "tr_hallCleaningScheduling": "Hall cleaning scheduling",
   "tr_addNewOrganizedUserTitle": "Add a new Organized user",
-  "tr_addNewOrganizedUserDesc": "Ask a baptized brother for the email address he used to register in Organized. Use this email to add him to your congregation and bind the user with his person record.",
+  "tr_addNewOrganizedUserDesc": "First, a baptized brother should register in Organized. Then, use his email address to find his account and add him to your congregation.",
+  "tr_publisherOrMidweekStudent": "Publisher or midweek meeting student",
   "tr_userEmailAddress": "User’s email address",
   "tr_searchUser": "Search user",
-  "tr_userFoundSuccess": "User found! Set up his user account and rights",
+  "tr_userFoundSuccess": "User found! Now connect this user account to his existing person record.",
+  "tr_enterUserEmail": "Enter the email to check if it’s already registered",
+  "tr_bindUser": "Bind user",
   "tr_addNewPublisherDesc": "Select a member from your congregation’s Persons list to generate and share their unique invitation code.",
   "tr_inviteUserDesc": "Provide this personal invitation code to grant the user access to your congregation on Organized. It’s also available on their user page.",
   "tr_invitePersonTitle": "Invite: {{ PersonName }}",