chore(review): app crashes when joining congregation

Author: rhahao

src/components/congregation_selector/index.tsx

@@ -11,7 +11,6 @@ import useCongregation from './useCongregation';
 /**
  * Component for selecting a congregation.
  * @param {Object} props - Props for the CongregationSelector component.
- * @param {CountryType} props.country - The selected country.
  * @param {(value: CongregationResponseType) => void} props.setCongregation - Function to set the selected congregation.
  * @returns {JSX.Element} CongregationSelector component.
  */

src/components/country_selector/index.tsx

@@ -10,7 +10,6 @@ import { CountryResponseType } from '@definition/api';
 /**
  * Component for selecting a country.
  * @param {CountrySelectorProps} props - Props for the CountrySelector component.
- * @param {(value: CountryType) => void} props.handleCountryChange - Function to handle country change.
  * @returns {JSX.Element} CountrySelector component.
  */
 

src/components/country_selector/useCountry.tsx

@@ -11,7 +11,6 @@ import { countriesState } from '@states/app';
 /**
  * Hook for managing country data and selection.
  * @param {Object} props - Props for the useCountry hook.
- * @param {(value: CountryType) => void} props.handleCountryChange - Function to handle country change.
  * @returns {Object} Object containing country data and selection state.
  */
 const useCountry = ({

src/features/app_start/vip/request_access/index.tsx

@@ -1,11 +1,11 @@
 import { Box, Stack } from '@mui/material';
 import { IconAccount } from '@components/icons';
-import IconLoading from '@components/icon_loading';
 import { useAppTranslation } from '@hooks/index';
 import useRequestAccess from './useRequestAccess';
 import Button from '@components/button';
 import CongregationSelector from '@components/congregation_selector';
 import CountrySelector from '@components/country_selector';
+import IconLoading from '@components/icon_loading';
 import TextField from '@components/textfield';
 
 const RequestAccess = () => {
@@ -47,11 +47,11 @@ const RequestAccess = () => {
         />
       </Box>
 
-      <CountrySelector handleCountryChange={setCountry} />
+      <CountrySelector value={country} handleCountryChange={setCountry} />
 
       {country !== null && (
         <CongregationSelector
-          country_guid={country.guid}
+          country_guid={country.countryGuid}
           setCongregation={setCongregation}
         />
       )}

src/features/app_start/vip/request_access/useRequestAccess.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useAtomValue } from 'jotai';
 import { useAppTranslation } from '@hooks/index';
-import { CongregationResponseType } from '@definition/api';
-import { CountryType } from '@components/country_selector/index.types';
+import { CongregationResponseType, CountryResponseType } from '@definition/api';
 import { firstnameState, lastnameState } from '@states/settings';
 import { displaySnackNotification } from '@services/states/app';
 import { getMessageByCode } from '@services/i18n/translation';
@@ -18,7 +17,7 @@ const useRequestAccess = () => {
   const [requestSent, setRequestSent] = useState(false);
   const [firstname, setFirstname] = useState(firstnameInitial);
   const [lastname, setLastname] = useState(lastnameInitial);
-  const [country, setCountry] = useState<CountryType>(null);
+  const [country, setCountry] = useState<CountryResponseType>(null);
   const [congregation, setCongregation] =
     useState<CongregationResponseType>(null);
 
@@ -30,7 +29,7 @@ const useRequestAccess = () => {
 
       await apiUserJoinCongregation({
         cong_name: congregation.congName,
-        country_code: country.code,
+        country_code: country.countryCode,
         firstname,
         lastname,
       });