[Customer portal] [web] Add user profile editing modal with phone number and time zone support

apps/customer-portal/webapp/src/api/usePatchUserMe.ts

@@ -0,0 +1,82 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import {
+  useMutation,
+  useQueryClient,
+  type UseMutationResult,
+} from "@tanstack/react-query";
+import { useAsgardeo } from "@asgardeo/react";
+import { useAuthApiClient } from "@api/useAuthApiClient";
+import { useLogger } from "@hooks/useLogger";
+import type { PatchUserMeRequest } from "@models/requests";
+
+/**
+ * Hook to update current user profile (PATCH /users/me).
+ * Only pass changed fields in the request body.
+ *
+ * @returns {UseMutationResult<void, Error, PatchUserMeRequest>} Mutation result.
+ */
+export function usePatchUserMe(): UseMutationResult<
+  void,
+  Error,
+  PatchUserMeRequest
+> {
+  const logger = useLogger();
+  const queryClient = useQueryClient();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const authFetch = useAuthApiClient();
+
+  return useMutation<void, Error, PatchUserMeRequest>({
+    mutationFn: async (payload: PatchUserMeRequest): Promise<void> => {
+      logger.debug("[usePatchUserMe] Request payload:", payload);
+
+      if (!isSignedIn || isAuthLoading) {
+        throw new Error("User must be signed in to update profile");
+      }
+
+      const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
+      if (!baseUrl) {
+        throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
+      }
+
+      const requestUrl = `${baseUrl}/users/me`;
+      const response = await authFetch(requestUrl, {
+        method: "PATCH",
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const text = await response.text();
+        let errorMessage = `Error updating profile: ${response.status} ${response.statusText}`;
+        try {
+          const json = JSON.parse(text) as { message?: string };
+          if (typeof json.message === "string") {
+            errorMessage = json.message;
+          } else if (text) {
+            errorMessage += ` - ${text}`;
+          }
+        } catch {
+          if (text) errorMessage += ` - ${text}`;
+        }
+        throw new Error(errorMessage);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userDetails"] });
+    },
+  });
+}

apps/customer-portal/webapp/src/components/common/header/UserProfile.tsx

@@ -16,11 +16,13 @@
 
 import { Skeleton, UserMenu } from "@wso2/oxygen-ui";
 import type { JSX } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router";
 import { useAsgardeo } from "@asgardeo/react";
-import { LogOut } from "@wso2/oxygen-ui-icons-react";
+import { LogOut, User } from "@wso2/oxygen-ui-icons-react";
 import useGetUserDetails from "@api/useGetUserDetails";
 import { useLogger } from "@/hooks/useLogger";
+import UserProfileModal from "@components/common/header/UserProfileModal";
 
 /**
  * User profile component.
@@ -29,6 +31,7 @@ import { useLogger } from "@/hooks/useLogger";
  */
 export default function UserProfile(): JSX.Element {
   const navigate = useNavigate();
+  const [profileModalOpen, setProfileModalOpen] = useState(false);
   const { signOut, isLoading: isAuthLoading, isSignedIn } = useAsgardeo();
   const { data: userDetails, isLoading, isError } = useGetUserDetails();
   const logger = useLogger();
@@ -60,16 +63,27 @@ export default function UserProfile(): JSX.Element {
   const email = isError ? "--" : userDetails?.email || "--";
 
   return (
-    <UserMenu>
-      <UserMenu.Trigger name={name} />
-      <UserMenu.Header name={name} email={email} />
+    <>
+      <UserMenu>
+        <UserMenu.Trigger name={name} />
+        <UserMenu.Header name={name} email={email} />
 
-      <UserMenu.Divider />
-      <UserMenu.Logout
-        icon={<LogOut size={18} />}
-        label="Log out"
-        onClick={handleLogout}
+        <UserMenu.Divider />
+        <UserMenu.Item
+          icon={<User size={18} />}
+          label="Profile"
+          onClick={() => setProfileModalOpen(true)}
+        />
+        <UserMenu.Logout
+          icon={<LogOut size={18} />}
+          label="Log out"
+          onClick={handleLogout}
+        />
+      </UserMenu>
+      <UserProfileModal
+        open={profileModalOpen}
+        onClose={() => setProfileModalOpen(false)}
       />
-    </UserMenu>
+    </>
   );
 }

apps/customer-portal/webapp/src/components/common/header/UserProfileModal.tsx

@@ -0,0 +1,216 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import {
+  type JSX,
+  useState,
+  useEffect,
+  useCallback,
+  type ChangeEvent,
+} from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from "@wso2/oxygen-ui";
+import useGetUserDetails from "@api/useGetUserDetails";
+import { usePatchUserMe } from "@api/usePatchUserMe";
+import { useErrorBanner } from "@context/error-banner/ErrorBannerContext";
+import { useSuccessBanner } from "@context/success-banner/SuccessBannerContext";
+import { TIME_ZONE_OPTIONS } from "@constants/timeZoneConstants";
+
+export interface UserProfileModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * Modal displaying user profile from useGetUserDetails (avatar, name, email)
+ * with editable phone number and time zone. PATCH /users/me with only changed fields.
+ *
+ * @param {UserProfileModalProps} props - open, onClose.
+ * @returns {JSX.Element} The profile modal.
+ */
+export default function UserProfileModal({
+  open,
+  onClose,
+}: UserProfileModalProps): JSX.Element {
+  const { showError } = useErrorBanner();
+  const { showSuccess } = useSuccessBanner();
+  const { data: userDetails, isLoading } = useGetUserDetails();
+  const patchUserMe = usePatchUserMe();
+
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [timeZone, setTimeZone] = useState("");
+
+  useEffect(() => {
+    if (open && userDetails) {
+      setPhoneNumber(userDetails.phoneNumber ?? "");
+      setTimeZone(userDetails.timeZone ?? "");
+    }
+  }, [open, userDetails]);
+
+  const handlePhoneChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value),
+    [],
+  );
+  const handleTimeZoneChange = useCallback(
+    (e: { target: { value: unknown } }) =>
+      setTimeZone(String(e.target.value ?? "")),
+    [],
+  );
+
+  const handleSave = useCallback(() => {
+    if (!userDetails) return;
+
+    const payload: { phoneNumber?: string; timeZone?: string } = {};
+    if (String(userDetails.phoneNumber ?? "") !== phoneNumber) {
+      payload.phoneNumber = phoneNumber;
+    }
+    if (String(userDetails.timeZone ?? "") !== timeZone) {
+      payload.timeZone = timeZone;
+    }
+
+    if (Object.keys(payload).length === 0) {
+      onClose();
+      return;
+    }
+
+    patchUserMe.mutate(payload, {
+      onSuccess: () => {
+        showSuccess("Profile updated successfully");
+        onClose();
+      },
+      onError: (err) => {
+        showError(err?.message ?? "Failed to update profile");
+      },
+    });
+  }, [userDetails, phoneNumber, timeZone, patchUserMe, showSuccess, showError, onClose]);
+
+  const handleClose = useCallback(() => {
+    if (!patchUserMe.isPending) {
+      onClose();
+    }
+  }, [onClose, patchUserMe.isPending]);
+
+  const name =
+    userDetails?.firstName || userDetails?.lastName
+      ? `${userDetails.firstName ?? ""} ${userDetails.lastName ?? ""}`.trim()
+      : "--";
+  const email = userDetails?.email ?? "--";
+
+  const initials = (() => {
+    const first = userDetails?.firstName?.charAt(0) ?? "";
+    const last = userDetails?.lastName?.charAt(0) ?? "";
+    return (first + last).toUpperCase() || "?";
+  })();
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        <Typography variant="h6">Profile</Typography>
+      </DialogTitle>
+      <DialogContent>
+        {isLoading || !userDetails ? (
+          <Box sx={{ py: 4, textAlign: "center" }}>
+            <CircularProgress size={32} />
+          </Box>
+        ) : (
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 1,
+              }}
+            >
+              <Avatar
+                src={userDetails.avatar ?? undefined}
+                sx={{
+                  width: 80,
+                  height: 80,
+                  fontSize: "1.5rem",
+                  borderRadius: "50%",
+                }}
+              >
+                {!userDetails.avatar ? initials : null}
+              </Avatar>
+              <Typography variant="h6">{name}</Typography>
+              <Typography variant="body2" color="text.secondary">
+                {email}
+              </Typography>
+            </Box>
+
+            <TextField
+              label="Phone Number"
+              value={phoneNumber}
+              onChange={handlePhoneChange}
+              fullWidth
+              size="small"
+            />
+
+            <FormControl fullWidth size="small">
+              <InputLabel id="profile-timezone-label">Time Zone</InputLabel>
+              <Select
+                labelId="profile-timezone-label"
+                label="Time Zone"
+                value={timeZone}
+                onChange={handleTimeZoneChange}
+              >
+                {TIME_ZONE_OPTIONS.map((tz) => (
+                  <MenuItem key={tz} value={tz}>
+                    {tz}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={patchUserMe.isPending}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={
+            patchUserMe.isPending || isLoading || !userDetails
+          }
+          startIcon={
+            patchUserMe.isPending ? (
+              <CircularProgress size={18} sx={{ color: "inherit" }} />
+            ) : null
+          }
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}