fine-tune UI functionalities

component/accountPages/accountSettingPageComponent.tsx

@@ -7,7 +7,7 @@ import { AuthContext } from '../../context/AuthProvider';
 
 const AccountSettingPageComponent = () => {
     const { user } = useContext(AuthContext);
-    console.log(user)
+    console.log(user);
     const genderText =
         user?.gender === 'woman'
             ? '女'
@@ -54,7 +54,9 @@ const AccountSettingPageComponent = () => {
                         <View className="h-0.5  bg-[#f4f4f4] " />
                     </View>
                     <View className="flex-col ">
-                        <Pressable onPress={() => router.push('changePasswordPage')}>
+                        <Pressable
+                            onPress={() => router.push('changePasswordPage')}
+                        >
                             <View className="flex-row items-center justify-between">
                                 <View className="flex-col py-4">
                                     <Text className="text-lg pb-1">
@@ -70,7 +72,9 @@ const AccountSettingPageComponent = () => {
                         <View className="h-0.5  bg-[#f4f4f4] " />
                     </View>
                     <View className="flex-col ">
-                        <Pressable onPress={() => router.push('changeNamePage')}>
+                        <Pressable
+                            onPress={() => router.push('changeNamePage')}
+                        >
                             <View className="flex-row items-center justify-between">
                                 <View className="flex-col py-4">
                                     <Text className="text-lg pb-1">暱稱</Text>
@@ -84,7 +88,9 @@ const AccountSettingPageComponent = () => {
                         <View className="h-0.5  bg-[#f4f4f4]" />
                     </View>
                     <View className="flex-col ">
-                        <Pressable onPress={() => router.push('changeGenderPage')}>
+                        <Pressable
+                            onPress={() => router.push('changeGenderPage')}
+                        >
                             <View className="flex-row items-center justify-between">
                                 <View className="flex-col py-4">
                                     <Text className="text-lg pb-1">性別</Text>
@@ -98,14 +104,18 @@ const AccountSettingPageComponent = () => {
                         <View className="h-0.5  bg-[#f4f4f4]" />
                     </View>
                     <View className="flex-col ">
-                        <Pressable onPress={() => router.push('changePhonePage')}>
+                        <Pressable
+                            onPress={() => router.push('changePhonePage')}
+                        >
                             <View className="flex-row items-center justify-between">
                                 <View className="flex-co py-4">
                                     <Text className="text-lg pb-1">
                                         電話號碼
                                     </Text>
                                     <Text style={{ color: '#555555' }}>
-                                        {user?.phone ? user.phone : 'No phone number provided'}
+                                        {user?.phone
+                                            ? `+852 ${user.phone}`
+                                            : 'No phone number provided'}
                                     </Text>
                                 </View>
                                 <RightArrowIconSvg />

component/accountPages/changeGenderPageComponent.tsx

@@ -99,7 +99,7 @@ const ChangeGenderPageComponent = () => {
                     <NormalButton
                         title={
                             <Text className="text-white text-lg">
-                                {isLoading ? '更新中...' : '確認'}
+                                {isLoading ? '更改中...' : '確認'}
                             </Text>
                         }
                         onPress={handleChangeGender}

component/accountPages/changeNamePageComponent.tsx

@@ -86,7 +86,7 @@ const ChangeNamePageComponent = () => {
                     <NormalButton
                         title={
                             <Text className="text-white">
-                                {isLoading ? '更新中...' : '確認'}
+                                {isLoading ? '更改中...' : '確認'}
                             </Text>
                         }
                         disabled={isLoading}

component/accountPages/changePasswordPageComponent.tsx

@@ -175,7 +175,7 @@ const changePasswordPageComponent = () => {
                         <NormalButton
                             title={
                                 <Text style={{ color: '#fff' }}>
-                                    {isLoading2 ? '驗證中...' : '確認'}
+                                    {isLoading2 ? '更改中...' : '確認'}
                                 </Text>
                             }
                             onPress={handlePasswordChange}

component/accountPages/changePhonePageComponent.tsx

@@ -92,7 +92,7 @@ const ChangePhonePageComponent = () => {
                     <NormalButton
                         title={
                             <Text className="text-white">
-                                {isLoading ? '更新中...' : '確認'}
+                                {isLoading ? '更改中...' : '確認'}
                             </Text>
                         }
                         onPress={handleChangePhone}

component/forgetPasswordMultiStepForm/formComponent/formPages/forgetPasswordPage.tsx

@@ -27,22 +27,34 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
     const [canSendOtp, setCanSendOtp] = useState(true);
     const [lockEmailInput, setLockEmailInput] = useState(false);
     const [data, setData] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading2, setIsLoading2] = useState(false);
 
-    const handleVerification = () => {
+    const handleVerification = async () => {
+        setIsLoading(true);
         if (!forgetPasswordFormData.otp && !forgetPasswordFormData.email) {
             setAuthError('請確保所有資料都已填寫');
         } else if (!forgetPasswordFormData.otp) {
             setAuthError('請輸入OTP驗證碼');
         } else {
             setAuthError('');
-
-            authenticationService.verifyingOtpForgetPassword(
-                forgetPasswordFormData.email.toLowerCase(),
-                forgetPasswordFormData.otp,
-                setForgetPasswordFormData,
-                setData
-            );
+            try {
+                const result =
+                    await authenticationService.verifyingOtpForgetPassword(
+                        forgetPasswordFormData.email.toLowerCase(),
+                        forgetPasswordFormData.otp,
+                        setForgetPasswordFormData,
+                        setData
+                    );
+                if (result === false) {
+                    setAuthError('驗證OTP時發生錯誤，請稍後再試');
+                }
+            } catch (error) {
+                console.error('Error verifying OTP:', error);
+                setAuthError('驗證OTP時發生錯誤，請稍後再試');
+            }
         }
+        setIsLoading(false);
     };
 
     const handleFormDataChange: HandleForgetPasswordFormDataChange = (
@@ -85,12 +97,12 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
             setError('請確保新密碼和確認密碼相同');
         } else {
             setError('');
+            setIsLoading2(true);
             try {
-                const success =
-                    await authenticationService.changePassword(
-                        forgetPasswordFormData.confirmedNewPassword,
-                        data
-                    );
+                const success = await authenticationService.changePassword(
+                    forgetPasswordFormData.confirmedNewPassword,
+                    data
+                );
                 if (success) {
                     setScreen(1);
                 } else {
@@ -99,6 +111,8 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
             } catch (error) {
                 console.error('Error changing password:', error);
                 setError('發生錯誤，請稍後再試');
+            } finally {
+                setIsLoading2(false);
             }
         }
     };
@@ -143,7 +157,7 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
                         <NormalButton
                             title={
                                 <Text style={{ color: '#fff' }}>
-                                    {lockEmailInput ? '已發送' : '驗證'}
+                                    {lockEmailInput ? '已發送' : '發送'}
                                 </Text>
                             }
                             onPress={handleSubmitOtp}
@@ -153,7 +167,10 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
                     <NormalButton
                         title={
                             <Text style={{ color: '#fff' }}>
-                                {forgetPasswordFormData.otpAuthCompleted == true
+                                {isLoading
+                                    ? '驗證中...'
+                                    : forgetPasswordFormData.otpAuthCompleted ==
+                                      true
                                     ? '已驗證'
                                     : '驗證'}
                             </Text>
@@ -217,7 +234,9 @@ const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
                             />
                             <NormalButton
                                 title={
-                                    <Text style={{ color: '#fff' }}>重置</Text>
+                                    <Text style={{ color: '#fff' }}>
+                                        {isLoading ? '重置中...' : '重置'}
+                                    </Text>
                                 }
                                 onPress={handleFinishResetPassword}
                                 extendedStyle={{}}

component/registrationMultiStepForm/formComponent/formPages/createWallet.tsx

@@ -31,7 +31,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
     const handleNext = () => {
         if (
             signUpFormData.paymentMethod === '' ||
-            signUpFormData.email === '' ||
+            signUpFormData.phone === '' ||
             signUpFormData.address === ''
         ) {
             setError('請確保所有資料都已填寫。');
@@ -89,7 +89,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
             customerCarInfo: {
                 type_id: signUpFormData.selectedCarModel,
                 brand_id: signUpFormData.selectedCarBrand,
-                licensePlate: signUpFormData.licensePlate
+                licensePlate: 'placeholder'
             }
         };
     }

service/authService.tsx

@@ -1,4 +1,3 @@
-
 import axios from 'axios';
 import { Alert } from 'react-native';
 import * as SecureStore from 'expo-secure-store';
@@ -38,7 +37,7 @@ class AuthenticationService {
                 return true;
             } else {
                 console.error('Login failed:', response.status);
-                Alert.alert('Error', 'Invalid username or password');
+
                 return false;
             }
         } catch (error) {
@@ -50,10 +49,7 @@ class AuthenticationService {
             } else {
                 console.error('An unexpected error occurred:', error);
             }
-            Alert.alert(
-                'Error',
-                'Something went wrong. Please try again later.'
-            );
+
             return false;
         }
     }
@@ -249,15 +245,14 @@ class AuthenticationService {
                 ...prevFormData,
                 otpAuthCompleted: true
             }));
+            return true;
         } catch (error) {
             console.error('Error', error);
+            return false;
         }
     }
 
-    async changePassword(
-        confirmedNewPassword: string,
-        data: string
-    ) {
+    async changePassword(confirmedNewPassword: string, data: string) {
         try {
             const res = await axios.put(
                 `${this.apiUrl}/clients/customer/pw/forget`,