@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

package/dist/components/core/common/SolidAccountSettings/SolidNotifications.tsx

@@ -1,127 +1,110 @@
+import { useEffect, useState } from "react";
+import { useFormik } from "formik";
+import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { useBulkUpdateSolidUserSettingsMutation, useGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
+import { SolidButton } from "../../../shad-cn-ui/SolidButton";
+import styles from "./SolidAccountSettings.module.css";
+
+type ToastState = {
+  id: number;
+  severity: "success" | "error" | "info" | "warn";
+  summary: string;
+  detail: string;
+} | null;
 
-import { ERROR_MESSAGES } from '../../../../constants/error-messages';
-import { useBulkUpdateSolidUserSettingsMutation, useGetSolidSettingsQuery } from '../../../../redux/api/solidSettingsApi';
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { InputSwitch } from 'primereact/inputswitch';
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux';
-import { showToast } from '../../../../redux/features/toastSlice';
 export const SolidNotifications = () => {
-    const {
-        data: solidSettingsData,
-        isLoading,
-        error,
-        refetch,
-    } = useGetSolidSettingsQuery(undefined);
-
-    useEffect(() => {
-        refetch();
-    }, []);
-
-    const dispatch = useDispatch();
-    const [bulkUpdateSolidSettings] = useBulkUpdateSolidUserSettingsMutation();
-
-    const initialValues = {
-        enableNotification: solidSettingsData?.data?.enableNotification ?? true
-    }
-
-    const formik = useFormik({
-        initialValues: initialValues,
-        enableReinitialize: true,
-        onSubmit: async (values) => {
-            try {
-                const updatedSettingsArray: Array<{ key: string; value: string; type: string }> = [];
-                const currentSettings = solidSettingsData?.data?.user || {};
-
-                const formData = new FormData();
-
-                // Compare changed fields
-                Object.entries(values).forEach(([key, value]) => {
-                    const currentValue = currentSettings[key];
-
-                    const normalizedCurrent = currentValue ?? "";
-                    const normalizedValue = value ?? "";
-
-                    if (normalizedCurrent !== normalizedValue) {
-                        if (value instanceof File) {
-                            formData.append(key, value);
-                            updatedSettingsArray.push({
-                                key,
-                                value: "",
-                                type: "user",
-                            });
-                        } else {
-                            updatedSettingsArray.push({
-                                key,
-                                value: value,
-                                type: "user",
-                            });
-                        }
-                    }
-                });
-
-                if (updatedSettingsArray.length === 0) {
-                    dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.NO_CHANGE, detail: ERROR_MESSAGES.NO_SETTING_UPDATE }));
-                    return;
-                }
-
-                // Append settings array to formData
-                formData.append("settings", JSON.stringify(updatedSettingsArray));
-
-                // Call API
-                const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
-
-                if (response.statusCode === 200) {
-                    dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.UPDATED, detail: ERROR_MESSAGES.SETTING_UPDATED }));
-                }
-
-            } catch (error) {
-                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
-            }
-        },
-    })
-
-
-    return (
-        <form onSubmit={formik.handleSubmit} className="h-full flex flex-column justify-content-between">
-            <div>
-                <div className="flex align-items-start justify-content-between pb-3">
-                    <div>
-                        <label className="form-field-label mb-2">Enable Notification</label>
-                        <div style={{ color: 'var(--solid-grey-500)' }}>Decide whether you want to be notified of new messages or updates.</div>
-                    </div>
-                    <div>
-                        <InputSwitch
-                            name="enableNotification"
-                            checked={formik.values.enableNotification}
-                            onChange={(e) => {
-                                formik.setFieldValue("enableNotification", e.value);
-                                // formik.submitForm();
-                            }}
-                        />
-                    </div>
-                </div>
-                {/* <div className="flex align-items-start justify-content-between pb-3 mt-3" style={{ borderBottom: '1px dashed var(--primary-light-color)' }}>
-                <div>
-                    <label className="form-field-label mb-2">Enable Notification</label>
-                    <div style={{ color: 'var(--solid-grey-500)' }}>Decide whether you want to be notified of new messages or updates.</div>
-                </div>
-                <div>
-                    <InputSwitch
-                        name="enableNotification"
-                        checked={formik.values.enableNotification}
-                        onChange={(e) => {
-                            formik.setFieldValue("enableNotification", e.value);
-                            formik.submitForm();
-                        }}
-                    />
-                </div>
-            </div> */}
-            </div>
-            <div>
-                <Button type='submit' size='small' label="Save" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-            </div>
-        </form>
-    )
-}
+  const { data: solidSettingsData, refetch } = useGetSolidSettingsQuery(undefined);
+  const [bulkUpdateSolidSettings] = useBulkUpdateSolidUserSettingsMutation();
+  const [toast, setToast] = useState<ToastState>(null);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  const notify = (severity: "success" | "error" | "info" | "warn", summary: string, detail: string) => {
+    setToast({ id: Date.now(), severity, summary, detail });
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      enableNotification: solidSettingsData?.data?.enableNotification ?? true,
+    },
+    enableReinitialize: true,
+    onSubmit: async (values) => {
+      try {
+        const updatedSettingsArray: Array<{ key: string; value: string | boolean; type: string }> = [];
+        const currentSettings = solidSettingsData?.data?.user || {};
+        Object.entries(values).forEach(([key, value]) => {
+          if ((currentSettings[key] ?? "") !== (value ?? "")) {
+            updatedSettingsArray.push({ key, value, type: "user" });
+          }
+        });
+
+        if (!updatedSettingsArray.length) {
+          notify("info", ERROR_MESSAGES.NO_CHANGE, ERROR_MESSAGES.NO_SETTING_UPDATE);
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append("settings", JSON.stringify(updatedSettingsArray));
+        const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
+
+        if (response.statusCode === 200) {
+          notify("success", ERROR_MESSAGES.UPDATED, ERROR_MESSAGES.SETTING_UPDATED);
+        } else {
+          notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
+        }
+      } catch {
+        notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
+      }
+    },
+  });
+
+  const severityClass =
+    toast?.severity === "error"
+      ? styles.toastError
+      : toast?.severity === "success"
+        ? styles.toastSuccess
+        : toast?.severity === "warn"
+          ? styles.toastWarn
+          : styles.toastInfo;
+
+  return (
+    <form onSubmit={formik.handleSubmit} className={styles.accountForm}>
+      {toast ? (
+        <div className={`${styles.toast} ${severityClass}`} role="status" aria-live="polite">
+          <div>
+            <div className={styles.toastTitle}>{toast.summary}</div>
+            <div className={styles.toastBody}>{toast.detail}</div>
+          </div>
+          <button type="button" className={styles.toastClose} onClick={() => setToast(null)} aria-label="Close notification">
+            ×
+          </button>
+        </div>
+      ) : null}
+
+      <div className={styles.accountScroll}>
+        <div className={styles.switchRow}>
+          <div>
+            <label className={styles.sectionTitle}>Enable Notification</label>
+            <div className={styles.versionCaption}>Decide whether you want to be notified of new messages or updates.</div>
+          </div>
+          <label className={styles.switch} aria-label="Enable notification">
+            <input
+              type="checkbox"
+              checked={Boolean(formik.values.enableNotification)}
+              onChange={(event) => formik.setFieldValue("enableNotification", event.target.checked)}
+            />
+            <span className={styles.switchTrack} />
+          </label>
+        </div>
+      </div>
+
+      <div className={styles.footerActions}>
+        <SolidButton type="submit" size="sm" loading={formik.isSubmitting}>
+          Save
+        </SolidButton>
+      </div>
+    </form>
+  );
+};

package/dist/components/core/common/SolidAccountSettings/SolidPersonalInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidPersonalInfo.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,iBAAiB,+CA6R7B,CAAA"}
+{"version":3,"file":"SolidPersonalInfo.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx"],"names":[],"mappings":"AAgFA,eAAO,MAAM,iBAAiB,+CA6Q7B,CAAC"}

package/dist/components/core/common/SolidAccountSettings/SolidPersonalInfo.js

@@ -34,48 +34,74 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { useFormik } from "formik";
 import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
 import { useGetUserQuery, useUpdateUserProfileMutation } from "../../../../redux/api/userApi";
-import { useFormik } from "formik";
-import { AutoComplete } from "primereact/autocomplete";
-import { Avatar } from "primereact/avatar";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { InputText } from "primereact/inputtext";
-import { useRef, useState } from "react";
-import { useDispatch } from 'react-redux';
-import { showToast } from '../../../../redux/features/toastSlice';
-import styles from './SolidAccountSettings.module.css';
+import { useSession } from "../../../../hooks/useSession";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-import { useSession } from '../../../../hooks/useSession';
+import { SolidButton } from "../../../shad-cn-ui/SolidButton";
+import styles from "./SolidAccountSettings.module.css";
+var ToastMessage = function (_a) {
+    var toast = _a.toast, onClose = _a.onClose;
+    if (!toast)
+        return null;
+    var severityClass = toast.severity === "error"
+        ? styles.toastError
+        : toast.severity === "success"
+            ? styles.toastSuccess
+            : toast.severity === "warn"
+                ? styles.toastWarn
+                : styles.toastInfo;
+    return (_jsxs("div", { className: "".concat(styles.toast, " ").concat(severityClass), role: "status", "aria-live": "polite", children: [_jsxs("div", { children: [_jsx("div", { className: styles.toastTitle, children: toast.summary }), _jsx("div", { className: styles.toastBody, children: toast.detail })] }), _jsx("button", { type: "button", className: styles.toastClose, onClick: onClose, "aria-label": "Close notification", children: "\u00D7" })] }));
+};
+var ConfirmDialog = function (_a) {
+    var visible = _a.visible, title = _a.title, text = _a.text, onConfirm = _a.onConfirm, onCancel = _a.onCancel;
+    if (!visible)
+        return null;
+    return (_jsx("div", { className: styles.confirmBackdrop, role: "presentation", onClick: onCancel, children: _jsxs("div", { className: styles.confirmModal, role: "dialog", "aria-modal": "true", "aria-label": title, onClick: function (event) { return event.stopPropagation(); }, children: [_jsx("div", { className: styles.confirmHeader, children: title }), _jsx("div", { className: styles.confirmBody, children: text }), _jsxs("div", { className: styles.confirmActions, children: [_jsx(SolidButton, { size: "sm", variant: "destructive", onClick: onConfirm, children: "Confirm" }), _jsx(SolidButton, { size: "sm", variant: "outline", onClick: onCancel, children: "Cancel" })] })] }) }));
+};
 export var SolidPersonalInfo = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var fileInputRef = useRef(null);
-    var dispatch = useDispatch();
-    var _x = useState(null), previewImage = _x[0], setPreviewImage = _x[1];
-    var _y = useState(false), deleteDialogVisible = _y[0], setDeleteDialogVisible = _y[1];
-    var _z = useState(false), replaceDialogVisible = _z[0], setReplaceDialogVisible = _z[1];
-    var _0 = useState(null), pendingFile = _0[0], setPendingFile = _0[1];
-    var _1 = useSession(), session = _1.data, status = _1.status;
-    var user = session === null || session === void 0 ? void 0 : session.user;
-    var userId = user === null || user === void 0 ? void 0 : user.id;
-    var _2 = useGetUserQuery(userId), userData = _2.data, refetch = _2.refetch;
+    var _k = useState(null), toast = _k[0], setToast = _k[1];
+    var _l = useState(null), previewImage = _l[0], setPreviewImage = _l[1];
+    var _m = useState(false), deleteDialogVisible = _m[0], setDeleteDialogVisible = _m[1];
+    var _o = useState(false), replaceDialogVisible = _o[0], setReplaceDialogVisible = _o[1];
+    var _p = useState(null), pendingFile = _p[0], setPendingFile = _p[1];
+    var session = useSession().data;
+    var userId = (_a = session === null || session === void 0 ? void 0 : session.user) === null || _a === void 0 ? void 0 : _a.id;
+    var _q = useGetUserQuery(userId, { skip: !userId }), userData = _q.data, refetch = _q.refetch;
     var deleteMedia = useDeleteMediaMutation()[0];
     var updateUser = useUpdateUserProfileMutation()[0];
-    var initialValues = {
-        fullName: (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : "",
-        profilePicture: (_f = (_e = (_d = (_c = userData === null || userData === void 0 ? void 0 : userData.data) === null || _c === void 0 ? void 0 : _c._media) === null || _d === void 0 ? void 0 : _d.profilePicture[0]) === null || _e === void 0 ? void 0 : _e._full_url) !== null && _f !== void 0 ? _f : null,
+    var notify = function (severity, summary, detail, opts) {
+        var _a;
+        setToast({
+            id: Date.now(),
+            severity: severity,
+            summary: summary,
+            detail: detail,
+            sticky: opts === null || opts === void 0 ? void 0 : opts.sticky,
+            life: (_a = opts === null || opts === void 0 ? void 0 : opts.life) !== null && _a !== void 0 ? _a : 3000,
+        });
     };
+    var initialValues = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return ({
+            fullName: (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : "",
+            profilePicture: (_g = (_f = (_e = (_d = (_c = userData === null || userData === void 0 ? void 0 : userData.data) === null || _c === void 0 ? void 0 : _c._media) === null || _d === void 0 ? void 0 : _d.profilePicture) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f._full_url) !== null && _g !== void 0 ? _g : null,
+        });
+    }, [userData]);
     var formik = useFormik({
         initialValues: initialValues,
         enableReinitialize: true,
         onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
-            var formData, response, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var formData, response, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        _a.trys.push([0, 2, , 3]);
+                        _b.trys.push([0, 2, , 3]);
                         formData = new FormData();
                         if (values.fullName !== initialValues.fullName) {
                             formData.append("fullName", values.fullName);
@@ -84,103 +110,103 @@ export var SolidPersonalInfo = function () {
                             formData.append("profilePicture", values.profilePicture);
                         }
                         if (!formData.has("fullName") && !formData.has("profilePicture")) {
-                            dispatch(showToast({ severity: "info", summary: ERROR_MESSAGES.NO_CHANGE, detail: ERROR_MESSAGES.NO_UPDATE_MADE }));
+                            notify("info", ERROR_MESSAGES.NO_CHANGE, ERROR_MESSAGES.NO_UPDATE_MADE);
                             return [2 /*return*/];
                         }
                         return [4 /*yield*/, updateUser({ data: formData }).unwrap()];
                     case 1:
-                        response = _a.sent();
+                        response = _b.sent();
                         if ((response === null || response === void 0 ? void 0 : response.statusCode) === 200) {
-                            dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.PROFILE_SAVED, detail: ERROR_MESSAGES.PROFILE_SAVED_SUCCESSFULLY }));
+                            notify("success", ERROR_MESSAGES.PROFILE_SAVED, ERROR_MESSAGES.PROFILE_SAVED_SUCCESSFULLY);
                             refetch();
                             formik.resetForm();
                             setPreviewImage(null);
                         }
                         else {
-                            dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_UPDATED_PROFILE }));
+                            notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_UPDATED_PROFILE);
                         }
                         return [3 /*break*/, 3];
                     case 2:
-                        error_1 = _a.sent();
-                        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
+                        _a = _b.sent();
+                        notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }
             });
         }); },
     });
-    var getInitials = function (value) {
-        var _a;
+    var initials = useMemo(function () {
+        var _a, _b;
+        var value = ((_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a.email) || "";
         if (!value)
-            return "";
-        var email = value.includes('@') ? value.split('@')[0] : value;
-        return ((_a = email[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "";
-    };
-    var getColorFromInitials = function (initials) {
+            return "U";
+        var email = value.includes("@") ? value.split("@")[0] : value;
+        return ((_b = email[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) || "U";
+    }, [userData]);
+    var avatarBg = useMemo(function () {
         var hash = 0;
         for (var i = 0; i < initials.length; i++) {
             hash = initials.charCodeAt(i) + ((hash << 5) - hash);
         }
         var hue = Math.abs(hash) % 360;
         return "hsl(".concat(hue, ", 60%, 60%)");
-    };
-    var value = (_g = userData === null || userData === void 0 ? void 0 : userData.data) === null || _g === void 0 ? void 0 : _g.email;
-    var initials = getInitials(value);
-    var bgColor = getColorFromInitials(initials);
+    }, [initials]);
+    var liveAvatarUrl = previewImage || ((_e = (_d = (_c = (_b = userData === null || userData === void 0 ? void 0 : userData.data) === null || _b === void 0 ? void 0 : _b._media) === null || _c === void 0 ? void 0 : _c.profilePicture) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e._full_url) || null;
+    var roleLabels = ((_g = (_f = userData === null || userData === void 0 ? void 0 : userData.data) === null || _f === void 0 ? void 0 : _f.roles) === null || _g === void 0 ? void 0 : _g.map(function (role) { return role.name; })) || [];
     var handleFileChange = function (file) {
         var _a, _b, _c;
         var existing = (_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a._media) === null || _b === void 0 ? void 0 : _b.profilePicture) === null || _c === void 0 ? void 0 : _c[0];
         if (existing) {
             setPendingFile(file);
             setReplaceDialogVisible(true);
+            return;
         }
-        else {
-            formik.setFieldValue("profilePicture", file);
-            setPreviewImage(URL.createObjectURL(file));
-        }
+        formik.setFieldValue("profilePicture", file);
+        setPreviewImage(URL.createObjectURL(file));
     };
     var handleDeleteAvatar = function () {
         var _a, _b, _c;
         var existing = (_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a._media) === null || _b === void 0 ? void 0 : _b.profilePicture) === null || _c === void 0 ? void 0 : _c[0];
         if (existing) {
             setDeleteDialogVisible(true);
+            return;
         }
-        else {
-            formik.setFieldValue("profilePicture", null);
-            setPreviewImage(null);
-        }
+        formik.setFieldValue("profilePicture", null);
+        setPreviewImage(null);
     };
     var confirmReplace = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var existing, error_2;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var existing, _a;
+        var _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
-                    existing = (_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.data) === null || _a === void 0 ? void 0 : _a._media) === null || _b === void 0 ? void 0 : _b.profilePicture) === null || _c === void 0 ? void 0 : _c[0];
-                    _d.label = 1;
+                    existing = (_d = (_c = (_b = userData === null || userData === void 0 ? void 0 : userData.data) === null || _b === void 0 ? void 0 : _b._media) === null || _c === void 0 ? void 0 : _c.profilePicture) === null || _d === void 0 ? void 0 : _d[0];
+                    _e.label = 1;
                 case 1:
-                    _d.trys.push([1, 4, , 5]);
+                    _e.trys.push([1, 4, 5, 6]);
                     if (!(existing === null || existing === void 0 ? void 0 : existing.id)) return [3 /*break*/, 3];
                     return [4 /*yield*/, deleteMedia(existing.id).unwrap()];
                 case 2:
-                    _d.sent();
-                    _d.label = 3;
+                    _e.sent();
+                    _e.label = 3;
                 case 3:
                     if (pendingFile) {
                         formik.setFieldValue("profilePicture", pendingFile);
+                        setPreviewImage(URL.createObjectURL(pendingFile));
                         setTimeout(function () {
                             formik.submitForm();
                         }, 0);
                     }
-                    return [3 /*break*/, 5];
+                    return [3 /*break*/, 6];
                 case 4:
-                    error_2 = _d.sent();
-                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.FAILED_DELETED_IMAGE }));
-                    return [3 /*break*/, 5];
+                    _a = _e.sent();
+                    notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.FAILED_DELETED_IMAGE);
+                    return [3 /*break*/, 6];
                 case 5:
                     setReplaceDialogVisible(false);
                     setPendingFile(null);
-                    return [2 /*return*/];
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
             }
         });
     }); };
@@ -198,12 +224,12 @@ export var SolidPersonalInfo = function () {
                     return [4 /*yield*/, deleteMedia(existing.id).unwrap()];
                 case 2:
                     _e.sent();
-                    dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.DELETED, detail: ERROR_MESSAGES.PROFILE_PICTURE_REMOVE }));
+                    notify("success", ERROR_MESSAGES.DELETED, ERROR_MESSAGES.PROFILE_PICTURE_REMOVE);
                     refetch();
                     return [3 /*break*/, 4];
                 case 3:
                     _a = _e.sent();
-                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.ERROR, detail: ERROR_MESSAGES.FAILED_DELETED_IMAGE }));
+                    notify("error", ERROR_MESSAGES.ERROR, ERROR_MESSAGES.FAILED_DELETED_IMAGE);
                     return [3 /*break*/, 4];
                 case 4:
                     formik.setFieldValue("profilePicture", null);
@@ -213,22 +239,15 @@ export var SolidPersonalInfo = function () {
             }
         });
     }); };
-    return (_jsxs("form", { onSubmit: formik.handleSubmit, className: "h-full flex flex-column justify-content-between", children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx("label", { className: "form-field-label mb-2 font-bold", children: "Profile Picture" }), _jsxs("div", { className: "flex align-items-center gap-3", children: [previewImage ? (_jsx(Avatar, { image: previewImage, shape: "circle", style: {
-                                            height: '5rem',
-                                            width: '5rem'
-                                        } })) : ((_l = (_k = (_j = (_h = userData === null || userData === void 0 ? void 0 : userData.data) === null || _h === void 0 ? void 0 : _h._media) === null || _j === void 0 ? void 0 : _j.profilePicture) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l._full_url) ? (_jsxs("div", { className: "relative", children: [_jsx(Avatar, { image: (_q = (_p = (_o = (_m = userData === null || userData === void 0 ? void 0 : userData.data) === null || _m === void 0 ? void 0 : _m._media) === null || _o === void 0 ? void 0 : _o.profilePicture) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q._full_url, shape: "circle", style: {
-                                                    height: '5rem',
-                                                    width: '5rem'
-                                                } }), _jsx("div", { className: styles.SolidRemoveProfile, onClick: handleDeleteAvatar, children: _jsx("span", { className: "pi pi-times" }) })] })) : (_jsx(Avatar, { label: initials, size: "xlarge", shape: "circle", style: {
-                                            backgroundColor: bgColor,
-                                            color: '#ffffff',
-                                            height: '5rem',
-                                            width: '5rem'
-                                        } })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", size: "small", severity: "secondary", label: "Upload Avatar", outlined: true, className: "small-button", onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".jpg,.jpeg,.png,.svg", hidden: true, onChange: function (e) {
-                                                    var _a;
-                                                    var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                                    if (file)
-                                                        handleFileChange(file);
-                                                } })] })] })] }), _jsx("div", { className: 'mt-4 mb-2 sm:mb-0', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsxs("div", { className: "mt-4", children: [_jsx("label", { className: "form-field-label mb-2 font-bold", children: "Details" }), _jsxs("div", { className: "grid", children: [_jsxs("div", { className: "col-12 md:col-8 lg:col-5", children: [_jsx("label", { className: "form-field-label mb-2", children: "Name" }), _jsx(InputText, { name: "fullName", value: formik.values.fullName, onChange: formik.handleChange, className: "w-full" })] }), _jsxs("div", { className: "col-12 md:col-8 lg:col-5", children: [_jsx("label", { className: "form-field-label mb-2", children: "Email" }), _jsx(InputText, { disabled: true, placeholder: (_r = userData === null || userData === void 0 ? void 0 : userData.data) === null || _r === void 0 ? void 0 : _r.email, value: (_s = userData === null || userData === void 0 ? void 0 : userData.data) === null || _s === void 0 ? void 0 : _s.email, className: "w-full" })] }), _jsxs("div", { className: "col-12 md:col-8 lg:col-5", children: [_jsx("label", { className: "form-field-label mb-2", children: "Contact Number" }), _jsx(InputText, { disabled: true, placeholder: (_t = userData === null || userData === void 0 ? void 0 : userData.data) === null || _t === void 0 ? void 0 : _t.mobile, value: (_u = userData === null || userData === void 0 ? void 0 : userData.data) === null || _u === void 0 ? void 0 : _u.mobile, className: "w-full" })] }), _jsxs("div", { className: "col-12 md:col-8 lg:col-5", children: [_jsx("label", { className: "form-field-label mb-2", children: "Role" }), _jsx(AutoComplete, { multiple: true, disabled: true, value: ((_w = (_v = userData === null || userData === void 0 ? void 0 : userData.data) === null || _v === void 0 ? void 0 : _v.roles) === null || _w === void 0 ? void 0 : _w.map(function (role) { return role.name; })) || [] })] })] })] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", size: "small", label: "Save" }) }), _jsx(Dialog, { header: _jsx("h5", { className: 'm-0 font-bold', children: "Replace Profile Picture" }), visible: replaceDialogVisible, headerClassName: "px-4 py-3 secondary-border-bottom", contentClassName: "p-0", style: { width: '25vw' }, className: "solid-confirm-dialog ", modal: true, onHide: function () { return setReplaceDialogVisible(false); }, children: _jsxs("div", { className: "p-4", children: ["Do you want to replace the existing profile picture?", _jsxs("div", { className: "flex justify-content-start mt-4 gap-2", children: [_jsx(Button, { size: "small", label: "Confirm", severity: "danger", onClick: confirmReplace }), _jsx(Button, { size: "small", outlined: true, label: "Cancel", onClick: function () { return setReplaceDialogVisible(false); } })] })] }) }), _jsx(Dialog, { header: _jsx("h5", { className: 'm-0 font-bold', children: "Delete Profile Picture" }), visible: deleteDialogVisible, headerClassName: "px-4 py-3 secondary-border-bottom", contentClassName: "p-0", style: { width: '25vw' }, modal: true, className: "solid-confirm-dialog ", onHide: function () { return setDeleteDialogVisible(false); }, children: _jsxs("div", { className: "p-4", children: ["Do you want to delete your profile picture?", _jsxs("div", { className: "flex justify-content-start mt-4 gap-2", children: [_jsx(Button, { size: "small", label: "Confirm", severity: "danger", onClick: confirmDelete }), _jsx(Button, { size: "small", outlined: true, label: "Cancel", onClick: function () { return setDeleteDialogVisible(false); } })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: formik.handleSubmit, className: styles.accountForm, children: [_jsx(ToastMessage, { toast: toast, onClose: function () { return setToast(null); } }), _jsxs("div", { className: styles.accountScroll, children: [_jsx("div", { className: styles.sectionTitle, children: "Profile Picture" }), _jsxs("div", { className: styles.avatarRow, children: [_jsxs("div", { className: styles.avatarShell, children: [liveAvatarUrl ? (_jsx("img", { src: liveAvatarUrl, alt: "Profile", className: styles.avatarImage })) : (_jsx("span", { className: styles.avatarFallback, style: { backgroundColor: avatarBg }, children: initials })), liveAvatarUrl ? (_jsx("button", { type: "button", className: styles.avatarRemove, onClick: handleDeleteAvatar, "aria-label": "Delete profile picture", children: "\u00D7" })) : null] }), _jsx(SolidButton, { type: "button", size: "sm", variant: "outline", className: styles.accountSecondaryBtn, onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Upload Avatar" }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".jpg,.jpeg,.png,.svg", hidden: true, onChange: function (event) {
+                                            var _a;
+                                            var file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                            if (file)
+                                                handleFileChange(file);
+                                            event.currentTarget.value = "";
+                                        } })] }), _jsx("div", { className: styles.dashedDivider }), _jsx("div", { className: styles.sectionTitle, children: "Details" }), _jsxs("div", { className: styles.grid, children: [_jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: "fullName", children: "Name" }), _jsx("input", { id: "fullName", name: "fullName", value: formik.values.fullName, onChange: formik.handleChange, className: styles.input })] }), _jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", disabled: true, value: ((_h = userData === null || userData === void 0 ? void 0 : userData.data) === null || _h === void 0 ? void 0 : _h.email) || "", className: styles.input })] }), _jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: "mobile", children: "Contact Number" }), _jsx("input", { id: "mobile", disabled: true, value: ((_j = userData === null || userData === void 0 ? void 0 : userData.data) === null || _j === void 0 ? void 0 : _j.mobile) || "", className: styles.input })] }), _jsxs("div", { className: styles.field, children: [_jsx("label", { children: "Role" }), _jsx("div", { className: styles.roleBox, children: roleLabels.map(function (name) { return (_jsx("span", { className: styles.roleChip, children: name }, name)); }) })] })] })] }), _jsx("div", { className: styles.footerActions, children: _jsx(SolidButton, { type: "submit", size: "sm", loading: formik.isSubmitting, children: "Save" }) })] }), _jsx(ConfirmDialog, { visible: replaceDialogVisible, title: "Replace Profile Picture", text: "Do you want to replace the existing profile picture?", onConfirm: confirmReplace, onCancel: function () {
+                    setReplaceDialogVisible(false);
+                    setPendingFile(null);
+                } }), _jsx(ConfirmDialog, { visible: deleteDialogVisible, title: "Delete Profile Picture", text: "Do you want to delete your profile picture?", onConfirm: confirmDelete, onCancel: function () { return setDeleteDialogVisible(false); } })] }));
 };
 //# sourceMappingURL=SolidPersonalInfo.js.map