Refactor phone input handling across onboarding and settings forms

- Replaced PhoneInput component with ControlledPhoneField for better integration with react-hook-form.
- Updated validation for phone numbers using isValidPhone function to ensure proper formatting.
- Removed country code handling from forms, simplifying phone number management.
- Introduced new phone field component with consistent styling and behavior.
- Added phone number validation on the backend using class-validator.
- Removed unused phone utility functions and cleaned up related code.

apps/edr-freight-web/portal/src/components/PhoneField.tsx

@@ -0,0 +1,119 @@
+import { Input } from "@mantine/core";
+import { forwardRef } from "react";
+import {
+  Controller,
+  type Control,
+  type FieldValues,
+  type Path,
+} from "react-hook-form";
+import RPNInput, { isValidPhoneNumber } from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import "./phone-field.css";
+
+/** Re-exported for zod `.refine()` checks on phone fields. */
+export const isValidPhone = (value?: string | null): boolean =>
+  !!value && isValidPhoneNumber(value);
+
+/**
+ * The text input rendered inside react-phone-number-input, styled to match the
+ * portal's Mantine fields (44px height, 10px radius, edr border). Must forward
+ * the ref and accept native input props for the library to drive it.
+ */
+const StyledInput = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  function StyledInput(props, ref) {
+    return <input {...props} ref={ref} className="edr-phone-input" />;
+  },
+);
+
+export interface PhoneFieldProps {
+  label?: string;
+  value?: string;
+  onChange: (value: string | undefined) => void;
+  onBlur?: () => void;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+/**
+ * Professional phone input: searchable country selector (all countries, default
+ * Ethiopia), live formatting, emits a single E.164 value (e.g. +251912345678).
+ * Visually aligned with the portal's Mantine form fields.
+ */
+export function PhoneField({
+  label,
+  value,
+  onChange,
+  onBlur,
+  error,
+  required,
+  disabled,
+  placeholder = "912 345 678",
+}: PhoneFieldProps) {
+  return (
+    <Input.Wrapper
+      label={label}
+      required={required}
+      error={error}
+      styles={{
+        label: { fontWeight: 600, fontSize: 13, color: "#10202F", marginBottom: 6 },
+      }}
+    >
+      <div className={`edr-phone-wrapper${error ? " edr-phone-wrapper--error" : ""}`}>
+        <RPNInput
+          international
+          defaultCountry="ET"
+          countryCallingCodeEditable={false}
+          addInternationalOption
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          placeholder={placeholder}
+          inputComponent={StyledInput}
+        />
+      </div>
+    </Input.Wrapper>
+  );
+}
+
+interface ControlledPhoneFieldProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+/** RHF Controller wrapper so forms drop in one line. */
+export function ControlledPhoneField<T extends FieldValues>({
+  control,
+  name,
+  label,
+  required,
+  disabled,
+  placeholder,
+}: ControlledPhoneFieldProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <PhoneField
+          label={label}
+          required={required}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={(field.value as string) ?? ""}
+          onChange={(v) => field.onChange(v ?? "")}
+          onBlur={field.onBlur}
+          error={fieldState.error?.message}
+        />
+      )}
+    />
+  );
+}
+
+export default PhoneField;

apps/edr-freight-web/portal/src/components/auth/PhoneInput.tsx

@@ -1,47 +0,0 @@
-import { Group, Stack, Text, TextInput, type TextInputProps } from "@mantine/core";
-
-type InputPassthrough = Partial<TextInputProps>;
-
-interface PhoneInputProps {
-  disabled?: boolean;
-  countryCode?: InputPassthrough;
-  phone?: InputPassthrough;
-  countryCodeError?: { message?: string };
-  phoneError?: { message?: string };
-  label?: string;
-}
-
-export default function PhoneInput({
-  disabled,
-  countryCode: countryCodeProps,
-  phone: phoneProps,
-  countryCodeError,
-  phoneError,
-  label = "Phone Number",
-}: PhoneInputProps) {
-  const errorMsg = countryCodeError?.message ?? phoneError?.message;
-  return (
-    <Stack gap={6}>
-      <Text size="sm" fw={500} c="edr-text">{label}</Text>
-      <Group gap={8} wrap="nowrap" align="flex-start">
-        <TextInput
-          w={80}
-          disabled={disabled}
-          error={Boolean(countryCodeError)}
-          styles={{ input: { textAlign: "center" } }}
-          {...countryCodeProps}
-        />
-        <TextInput
-          style={{ flex: 1 }}
-          placeholder="912345678"
-          disabled={disabled}
-          error={Boolean(phoneError)}
-          {...phoneProps}
-        />
-      </Group>
-      {errorMsg && (
-        <Text size="xs" c="red.6">{errorMsg}</Text>
-      )}
-    </Stack>
-  );
-}

apps/edr-freight-web/portal/src/components/phone-field.css

@@ -0,0 +1,82 @@
+/* Align react-phone-number-input with the portal's Mantine field styling:
+   44px height, 10px radius, edr border, brand-green focus ring. */
+
+.edr-phone-wrapper .PhoneInput {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+/* Country selector — a compact pill matching the input height/radius. */
+.edr-phone-wrapper .PhoneInputCountry {
+  margin: 0;
+  padding: 0 10px;
+  height: 44px;
+  border: 1px solid #e6ecf2;
+  border-radius: 10px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.edr-phone-wrapper .PhoneInputCountryIcon {
+  width: 22px;
+  height: 16px;
+  box-shadow: none;
+}
+
+.edr-phone-wrapper .PhoneInputCountrySelectArrow {
+  color: #6b7c8e;
+  opacity: 0.8;
+}
+
+/* The number input itself. */
+.edr-phone-input {
+  flex: 1;
+  min-width: 0;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid #e6ecf2;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #10202f;
+  background: #fff;
+  outline: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.edr-phone-input::placeholder {
+  color: #9aa8b5;
+}
+
+.edr-phone-input:focus {
+  border-color: #0ea371;
+  box-shadow: 0 0 0 3px rgba(14, 163, 113, 0.15);
+}
+
+.edr-phone-wrapper .PhoneInputCountry:focus-within {
+  border-color: #0ea371;
+  box-shadow: 0 0 0 3px rgba(14, 163, 113, 0.15);
+}
+
+.edr-phone-input:disabled,
+.edr-phone-wrapper .PhoneInputCountrySelect:disabled + .PhoneInputCountryIcon {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Error state mirrors Mantine's invalid styling. */
+.edr-phone-wrapper--error .edr-phone-input,
+.edr-phone-wrapper--error .PhoneInputCountry {
+  border-color: #e03131;
+}
+
+.edr-phone-wrapper--error .edr-phone-input:focus {
+  box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.12);
+}