diff --git a/SwiftParcel.Web/frontend/src/pages/register.tsx b/SwiftParcel.Web/frontend/src/pages/register.tsx index 09ad666..66e1788 100644 --- a/SwiftParcel.Web/frontend/src/pages/register.tsx +++ b/SwiftParcel.Web/frontend/src/pages/register.tsx @@ -11,7 +11,7 @@ import { HiInformationCircle, HiCheckCircle } from "react-icons/hi"; import { Footer } from "../components/footer"; import { Header } from "../components/header"; import { Loader } from "../components/loader"; -import { register } from "../utils/api"; +import { register, completeCustomerRegistration } from "../utils/api"; export default function Register() { const [loading, setLoading] = React.useState(true); @@ -21,14 +21,29 @@ export default function Register() { const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState(""); + const [customerId, setCustomerId] = React.useState(null); + const [firstName, setFirstName] = React.useState(""); + const [lastName, setLastName] = React.useState(""); + + const [street, setStreet] = React.useState(""); + const [buildingNumber, setBuildingNumber] = React.useState(""); + const [apartmentNumber, setApartmentNumber] = React.useState(""); + const [city, setCity] = React.useState(""); + const [zipCode, setZipCode] = React.useState(""); + const [country, setCountry] = React.useState(""); + const termsCheckboxRef = React.useRef(null); const [error, setError] = React.useState(""); const [success, setSuccess] = React.useState(""); - const [registerLoading, setRegisterLoading] = React.useState(false); + const [registerFinished, setRegisterFinished] = React.useState(false); - const onSubmit = (e: any) => { + const [completionError, setCompletionError] = React.useState(""); + const [completionSuccess, setCompletionSuccess] = React.useState(""); + const [completionLoading, setCompletionLoading] = React.useState(false); + + const onRegister = async (e: any) => { e.preventDefault(); if (registerLoading) return; setError(""); @@ -49,20 +64,61 @@ export default function Register() { register(email, password, "user") .then((res) => { + setCustomerId(res); setSuccess( - res?.data?.message || "Registration successful! Please login." + res?.data?.message || "Registration successful! Please complete data referring to you below." + ); + }) + .catch((err) => { + setError(err?.response?.data?.message || "Something went wrong during registration!"); + }) + .finally(() => { + setRegisterLoading(false); + setRegisterFinished(true); + }); + }; + + const onComplete = async (e: any) => { + e.preventDefault(); + if (completionLoading) return; + setCompletionError(""); + setCompletionSuccess(""); + setCompletionLoading(true); + + completeCustomerRegistration( + customerId, + firstName, + lastName, + `${street}|${buildingNumber}|${apartmentNumber}|${city}|${zipCode}|${country}`, + "Empty") + .then((res) => { + setCompletionSuccess( + res?.data?.message || "Completion of registration successful! Please login." ); + + setEmail(""); setUsername(""); setPassword(""); setConfirmPassword(""); - setEmail(""); + + setCustomerId(null); + setFirstName(""); + setLastName(""); + + setStreet(""); + setBuildingNumber(""); + setApartmentNumber(""); + setCity(""); + setZipCode(""); + setCountry(""); + termsCheckboxRef.current!.checked = false; }) .catch((err) => { - setError(err?.response?.data?.message || "Something went wrong!"); + setCompletionError(err?.response?.data?.message || "Something went wrong during completion of registration!"); }) .finally(() => { - setRegisterLoading(false); + setCompletionLoading(false); }); }; @@ -78,21 +134,7 @@ export default function Register() { Please register below. If you already have an account, please login using the button in the top right corner.

- {error ? ( - - - Error! {error} - - - ) : null} - {success ? ( - - - Success! {success} - - - ) : null} -
+
+
+
+
+
+ {registerLoading ? ( )} + + {error ? ( + + + Error! {error} + + + ) : null} + {success ? ( + + + Success! {success} + + + ) : null} + + {(registerFinished && error === "") ? ( +
+
+
+
+
+ setFirstName(e.target.value)} + /> +
+ +
+
+
+ setLastName(e.target.value)} + /> +
+ +
+
+
+
+ setStreet(e.target.value)} + /> +
+ +
+
+
+ setBuildingNumber(e.target.value)} + /> +
+ +
+
+
+ setApartmentNumber(e.target.value)} + /> +
+ +
+
+
+ setCity(e.target.value)} + /> +
+ +
+
+
+ setZipCode(e.target.value)} + /> +
+ +
+
+
+ setCountry(e.target.value)} + /> +
+
+
+ + {(completionLoading) ? ( + + ) : ( + + )} +
+ ) : null} + + {completionError ? ( + + + Error! {completionError} + + + ) : null} + {completionSuccess ? ( + + + Success! {completionSuccess} + + + ) : null}
diff --git a/SwiftParcel.Web/frontend/src/utils/api.tsx b/SwiftParcel.Web/frontend/src/utils/api.tsx index fb28eab..aa116a7 100644 --- a/SwiftParcel.Web/frontend/src/utils/api.tsx +++ b/SwiftParcel.Web/frontend/src/utils/api.tsx @@ -90,6 +90,9 @@ export const register = async ( 'Content-Type': 'application/json' } }) + + console.log("response:", response); + return response.data; } catch (registerError) { @@ -104,6 +107,47 @@ export const register = async ( } }; +export const completeCustomerRegistration = async ( + customerId: string, + firstName: string, + lastName: string, + address: string, + sourceAddress: string +) => { + try { + + const payload = { + CustomerId: customerId, + FirstName: firstName, + LastName: lastName, + Address: address, + SourceAddress: sourceAddress + }; + + console.log("Request payload (customer completion):", payload); + + console.log("JSON being sent (customer completion):", JSON.parse(JSON.stringify(payload))); + + const response = await api.post(`/customers`, JSON.parse(JSON.stringify(payload)), { + headers: { + //'Authorization': `${userInfo.accessToken}`, + 'Content-Type': 'application/json' + } + }) + return response.data; + + } catch (error) { + if (axios.isAxiosError(error) && error.response) { + console.error('Error status:', error.response.status); + console.error('Error data:', error.response.data); + console.error('Error during registration:', error.message); + } else { + console.error('Error during registration:', error); + } + throw error; + } +}; + export const logout = async () => { try { const headers = getAuthHeader();