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

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

@@ -1,178 +1,248 @@
+import { ChangeEventHandler, FocusEventHandler, useMemo, useState } from "react";
+import { useFormik } from "formik";
+import * as Yup from "yup";
 import { handleLogout } from "../../../../adapters/auth/handleLogout";
-import { useChangePasswordMutation } from '../../../../redux/api/authApi';
-import { useFormik } from 'formik';
-import { useSession } from "../../../../hooks/useSession";
-import { Button } from 'primereact/button';
-import { Message } from 'primereact/message';
-import { Password } from 'primereact/password';
-import { useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import { showToast } from '../../../../redux/features/toastSlice';
-import * as Yup from 'yup';
-import { SolidPasswordHelperText } from '../SolidPasswordHelperText';
-import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { env } from "../../../../adapters/env";
+import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { useSession } from "../../../../hooks/useSession";
+import { useChangePasswordMutation } from "../../../../redux/api/authApi";
+import { SolidPasswordHelperText } from "../SolidPasswordHelperText";
+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;
+  sticky?: boolean;
+  life?: number;
+} | null;
+
+const ToastMessage = ({ toast, onClose }: { toast: ToastState; onClose: () => void }) => {
+  if (!toast) return null;
+  const severityClass =
+    toast.severity === "error"
+      ? styles.toastError
+      : toast.severity === "success"
+        ? styles.toastSuccess
+        : toast.severity === "warn"
+          ? styles.toastWarn
+          : styles.toastInfo;
+
+  return (
+    <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={onClose} aria-label="Close notification">
+        ×
+      </button>
+    </div>
+  );
+};
+
+const PasswordInput = ({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+}: {
+  id: string;
+  name: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onBlur: FocusEventHandler<HTMLInputElement>;
+  placeholder?: string;
+}) => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className={styles.passwordWrap}>
+      <input
+        id={id}
+        name={name}
+        type={visible ? "text" : "password"}
+        className={styles.input}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder={placeholder}
+      />
+      <button
+        type="button"
+        className={styles.passwordToggle}
+        onClick={() => setVisible((prev) => !prev)}
+        aria-label={visible ? "Hide password" : "Show password"}
+      >
+        {visible ? "Hide" : "Show"}
+      </button>
+    </div>
+  );
+};
 
 export const SolidChangePassword = ({ solidSettingsData }: any) => {
-    const dispatch = useDispatch();
-    const [changePassword] = useChangePasswordMutation();
-
-    const session: any = useSession();
-
-    const envPasswordRegex = env("NEXT_PUBLIC_PASSWORD_REGEX");
-
-    // Try backend regex first, then env, then fallback
-    const effectiveRegex = useMemo(() => {
-        try {
-            const backendRegex = solidSettingsData?.data?.authenticationPasswordRegex;
-            if (backendRegex) {
-                // const unescaped = JSON.parse(`"${backendRegex}"`);
-                return new RegExp(backendRegex);
-            }
-            if (envPasswordRegex) {
-                const unescaped = JSON.parse(`"${envPasswordRegex}"`);
-                return new RegExp(unescaped);
-            }
-        } catch (error) {
-            console.error(ERROR_MESSAGES.INVALID_PASSWORD_REGX, error);
+  const [toast, setToast] = useState<ToastState>(null);
+  const [changePassword] = useChangePasswordMutation();
+  const session: any = useSession();
+
+  const notify = (
+    severity: "success" | "error" | "info" | "warn",
+    summary: string,
+    detail: string,
+    opts?: { sticky?: boolean; life?: number }
+  ) => {
+    setToast({
+      id: Date.now(),
+      severity,
+      summary,
+      detail,
+      sticky: opts?.sticky,
+      life: opts?.life ?? 3000,
+    });
+  };
+
+  const envPasswordRegex = env("NEXT_PUBLIC_PASSWORD_REGEX");
+
+  const effectiveRegex = useMemo(() => {
+    try {
+      const backendRegex = solidSettingsData?.data?.authenticationPasswordRegex;
+      if (backendRegex) return new RegExp(backendRegex);
+      if (envPasswordRegex) {
+        const unescaped = JSON.parse(`"${envPasswordRegex}"`);
+        return new RegExp(unescaped);
+      }
+    } catch (error) {
+      console.error(ERROR_MESSAGES.INVALID_PASSWORD_REGX, error);
+    }
+    return null;
+  }, [solidSettingsData, envPasswordRegex]);
+
+  const validationSchema = useMemo(() => {
+    const newPasswordValidation = effectiveRegex
+      ? Yup.string()
+        .matches(
+          effectiveRegex,
+          solidSettingsData?.data?.authenticationPasswordRegexErrorMessage || ERROR_MESSAGES.PASSWORD_DO_NOT_MEET
+        )
+        .required(ERROR_MESSAGES.FIELD_REUQIRED("New password"))
+      : Yup.string().min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6)).required(ERROR_MESSAGES.FIELD_REUQIRED("New password"));
+
+    return Yup.object({
+      email: Yup.string().email(ERROR_MESSAGES.FIELD_INAVLID_FORMAT("email")).required(ERROR_MESSAGES.FIELD_REUQIRED("Email")),
+      currentPassword: Yup.string().min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6)).required(ERROR_MESSAGES.FIELD_REUQIRED("Current password")),
+      newPassword: newPasswordValidation,
+      confirmPassword: Yup.string().oneOf([Yup.ref("newPassword")], ERROR_MESSAGES.MUST_MATCH).required(ERROR_MESSAGES.FIELD_REUQIRED("Confirm password")),
+      id: Yup.number().required(ERROR_MESSAGES.FIELD_INAVLID_FORMAT("User ID")),
+    });
+  }, [effectiveRegex, solidSettingsData]);
+
+  const formik = useFormik({
+    initialValues: {
+      email: session?.data?.user?.email,
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+      id: session?.data?.user?.id,
+    },
+    validationSchema,
+    onSubmit: async (values, { setErrors, resetForm }) => {
+      try {
+        const payload = {
+          id: values.id,
+          email: session?.data?.user?.email,
+          currentPassword: values.currentPassword,
+          newPassword: values.newPassword,
+        };
+
+        const response = await changePassword(payload).unwrap();
+        if (response?.error) {
+          notify("error", ERROR_MESSAGES.ERROR, response.error);
+          setErrors({
+            currentPassword: ERROR_MESSAGES.INCORRECT_CURRENT,
+            newPassword: ERROR_MESSAGES.MUST_MATCH,
+            confirmPassword: ERROR_MESSAGES.MUST_MATCH,
+          });
+          return;
         }
-        return null;
-    }, [solidSettingsData, envPasswordRegex]);
-
-    const validationSchema = useMemo(() => {
-        const newPasswordValidation = effectiveRegex
-            ? Yup.string()
-                .matches(
-                    effectiveRegex,
-                    solidSettingsData?.data?.authenticationPasswordRegexErrorMessage ||
-                    ERROR_MESSAGES.PASSWORD_DO_NOT_MEET
-                )
-                .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'))
-            : Yup.string()
-                .min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6))
-                .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'));
-
-        return Yup.object({
-            email: Yup.string().email(ERROR_MESSAGES.FIELD_INAVLID_FORMAT('email')).required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
-            currentPassword: Yup.string()
-                .min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6))
-                .required(ERROR_MESSAGES.FIELD_REUQIRED('Current password')),
-            newPassword: newPasswordValidation,
-            confirmPassword: Yup.string()
-                .oneOf([Yup.ref("newPassword")], ERROR_MESSAGES.MUST_MATCH)
-                .required(ERROR_MESSAGES.FIELD_REUQIRED('Confirm password')),
-            id: Yup.number().required(ERROR_MESSAGES.FIELD_INAVLID_FORMAT('User ID')),
+
+        notify("success", ERROR_MESSAGES.PASSWORD_CHANGE, ERROR_MESSAGES.PASSWORD_CHANGE);
+        resetForm();
+        handleLogout({
+          toast: {
+            current: {
+              show: ({ severity, summary, detail, sticky, life }: any) =>
+                notify(severity || "info", summary || "", detail || "", { sticky, life }),
+            },
+          },
         });
-    }, [effectiveRegex, solidSettingsData]);
-
-    const formik = useFormik({
-        initialValues: {
-            email: session?.data?.user?.email,
-            currentPassword: "",
-            newPassword: "",
-            confirmPassword: "",
-            id: session?.data?.user?.id,
-        },
-        validationSchema,
-        onSubmit: async (values, { setErrors, resetForm }) => {
-            try {
-                const payload = {
-                    id: values.id,
-                    email: session?.data?.user?.email,
-                    currentPassword: values.currentPassword,
-                    newPassword: values.newPassword,
-                };
-
-                const response = await changePassword(payload).unwrap();
-                if (response?.error) {
-                    dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.ERROR, detail: response.error }))
-                    setErrors({
-                        currentPassword: ERROR_MESSAGES.INCORRECT_CURRENT,
-                        newPassword: ERROR_MESSAGES.MUST_MATCH,
-                        confirmPassword: ERROR_MESSAGES.MUST_MATCH,
-                    })
-                } else {
-                    dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.PASSWORD_CHANGE, detail: ERROR_MESSAGES.PASSWORD_CHANGE }));
-                    handleLogout(null)
-                    resetForm();
-                }
-            } catch (err: any) {
-                dispatch(showToast({ severity: "error", summary: err?.data?.message, detail: err?.data?.data?.message ? err?.data?.data?.message : err?.data?.message }));
-            }
-        },
-    });
-    const isFormFieldValid = (formik: any, fieldName: string) =>
-        formik.touched[fieldName] && formik.errors[fieldName];
-
-    return (
-        <form onSubmit={formik.handleSubmit} className="h-full flex flex-column justify-content-between">
-            <div>
-                <div className='grid'>
-                    <div className='col-12 md-col-8 lg:col-5'>
-                        <div className="flex flex-column gap-2">
-                            <label htmlFor="currentPassword" className="solid-auth-input-label">Current Password</label>
-                            <Password
-                                id="currentPassword"
-                                name="currentPassword"
-                                value={formik.values.currentPassword}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                toggleMask
-                                invalid={!!formik.errors.currentPassword}
-                                inputClassName="w-full"
-                                feedback={false}
-                            />
-                            {isFormFieldValid(formik, "currentPassword") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.currentPassword?.toString()}
-                            />}
-                        </div>
-                        <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                            <label htmlFor="password" className="solid-auth-input-label">New Password</label>
-                            <Password
-                                id="newPassword"
-                                name="newPassword"
-                                value={formik.values.newPassword}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                toggleMask
-                                invalid={!!formik.errors.newPassword}
-                                inputClassName="w-full"
-                                feedback={false}
-                            />
-                            {isFormFieldValid(formik, "newPassword") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.newPassword?.toString()}
-                            />}
-                        </div>
-                        <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                            <label htmlFor="password" className="solid-auth-input-label">Confirm New Password</label>
-                            <Password
-                                id="confirmPassword"
-                                name="confirmPassword"
-                                value={formik.values.confirmPassword}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                toggleMask
-                                invalid={!!formik.errors.confirmPassword}
-                                inputClassName="w-full"
-                                feedback={false}
-                            />
-                            {isFormFieldValid(formik, "confirmPassword") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.confirmPassword?.toString()}
-                            />}
-                        </div>
-                    </div>
-                </div>
-                <SolidPasswordHelperText text={solidSettingsData?.data?.authenticationPasswordComplexityDescription} />
-            </div>
-            <div>
-                <Button type='submit' size='small' label="Change Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-            </div>
-        </form>
-    )
-}
+      } catch (err: any) {
+        notify("error", err?.data?.message || ERROR_MESSAGES.ERROR, err?.data?.data?.message || err?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG);
+      }
+    },
+  });
+
+  const fieldError = (field: string) => {
+    if (!formik.touched[field as keyof typeof formik.touched]) return null;
+    const error = formik.errors[field as keyof typeof formik.errors];
+    return typeof error === "string" ? error : null;
+  };
+
+  return (
+    <form onSubmit={formik.handleSubmit} className={styles.accountForm}>
+      <ToastMessage toast={toast} onClose={() => setToast(null)} />
+
+      <div className={styles.accountScroll}>
+        <div className={styles.formStack}>
+          <div className={styles.field}>
+            <label htmlFor="currentPassword">Current Password</label>
+            <PasswordInput
+              id="currentPassword"
+              name="currentPassword"
+              value={formik.values.currentPassword}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+            />
+            {fieldError("currentPassword") ? <p className={styles.errorText}>{fieldError("currentPassword")}</p> : null}
+          </div>
+
+          <div className={styles.field}>
+            <label htmlFor="newPassword">New Password</label>
+            <PasswordInput
+              id="newPassword"
+              name="newPassword"
+              value={formik.values.newPassword}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+            />
+            {fieldError("newPassword") ? <p className={styles.errorText}>{fieldError("newPassword")}</p> : null}
+          </div>
+
+          <div className={styles.field}>
+            <label htmlFor="confirmPassword">Confirm New Password</label>
+            <PasswordInput
+              id="confirmPassword"
+              name="confirmPassword"
+              value={formik.values.confirmPassword}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+            />
+            {fieldError("confirmPassword") ? <p className={styles.errorText}>{fieldError("confirmPassword")}</p> : null}
+          </div>
+        </div>
+
+        <div className={styles.passwordHintWrap}>
+          <SolidPasswordHelperText text={solidSettingsData?.data?.authenticationPasswordComplexityDescription} />
+        </div>
+      </div>
+
+      <div className={styles.footerActions}>
+        <SolidButton type="submit" size="sm" loading={formik.isSubmitting}>
+          Change Password
+        </SolidButton>
+      </div>
+    </form>
+  );
+};

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

@@ -1 +1 @@
-{"version":3,"file":"SolidNotifications.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidNotifications.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB,+CAqH9B,CAAA"}
+{"version":3,"file":"SolidNotifications.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidNotifications.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,kBAAkB,+CA+F9B,CAAC"}

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

@@ -35,87 +35,76 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { showToast } from '../../../../redux/features/toastSlice';
+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";
 export var SolidNotifications = function () {
     var _a, _b;
-    var _c = useGetSolidSettingsQuery(undefined), solidSettingsData = _c.data, isLoading = _c.isLoading, error = _c.error, refetch = _c.refetch;
+    var _c = useGetSolidSettingsQuery(undefined), solidSettingsData = _c.data, refetch = _c.refetch;
+    var bulkUpdateSolidSettings = useBulkUpdateSolidUserSettingsMutation()[0];
+    var _d = useState(null), toast = _d[0], setToast = _d[1];
     useEffect(function () {
         refetch();
-    }, []);
-    var dispatch = useDispatch();
-    var bulkUpdateSolidSettings = useBulkUpdateSolidUserSettingsMutation()[0];
-    var initialValues = {
-        enableNotification: (_b = (_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.enableNotification) !== null && _b !== void 0 ? _b : true
+    }, [refetch]);
+    var notify = function (severity, summary, detail) {
+        setToast({ id: Date.now(), severity: severity, summary: summary, detail: detail });
     };
     var formik = useFormik({
-        initialValues: initialValues,
+        initialValues: {
+            enableNotification: (_b = (_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.enableNotification) !== null && _b !== void 0 ? _b : true,
+        },
         enableReinitialize: true,
         onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
-            var updatedSettingsArray_1, currentSettings_1, formData_1, response, error_1;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var updatedSettingsArray_1, currentSettings_1, formData, response, _a;
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        _b.trys.push([0, 2, , 3]);
+                        _c.trys.push([0, 2, , 3]);
                         updatedSettingsArray_1 = [];
-                        currentSettings_1 = ((_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.user) || {};
-                        formData_1 = new FormData();
-                        // Compare changed fields
+                        currentSettings_1 = ((_b = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _b === void 0 ? void 0 : _b.user) || {};
                         Object.entries(values).forEach(function (_a) {
+                            var _b;
                             var key = _a[0], value = _a[1];
-                            var currentValue = currentSettings_1[key];
-                            var normalizedCurrent = currentValue !== null && currentValue !== void 0 ? currentValue : "";
-                            var normalizedValue = value !== null && value !== void 0 ? value : "";
-                            if (normalizedCurrent !== normalizedValue) {
-                                if (value instanceof File) {
-                                    formData_1.append(key, value);
-                                    updatedSettingsArray_1.push({
-                                        key: key,
-                                        value: "",
-                                        type: "user",
-                                    });
-                                }
-                                else {
-                                    updatedSettingsArray_1.push({
-                                        key: key,
-                                        value: value,
-                                        type: "user",
-                                    });
-                                }
+                            if (((_b = currentSettings_1[key]) !== null && _b !== void 0 ? _b : "") !== (value !== null && value !== void 0 ? value : "")) {
+                                updatedSettingsArray_1.push({ key: key, value: value, type: "user" });
                             }
                         });
-                        if (updatedSettingsArray_1.length === 0) {
-                            dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.NO_CHANGE, detail: ERROR_MESSAGES.NO_SETTING_UPDATE }));
+                        if (!updatedSettingsArray_1.length) {
+                            notify("info", ERROR_MESSAGES.NO_CHANGE, ERROR_MESSAGES.NO_SETTING_UPDATE);
                             return [2 /*return*/];
                         }
-                        // Append settings array to formData
-                        formData_1.append("settings", JSON.stringify(updatedSettingsArray_1));
-                        return [4 /*yield*/, bulkUpdateSolidSettings({ data: formData_1 }).unwrap()];
+                        formData = new FormData();
+                        formData.append("settings", JSON.stringify(updatedSettingsArray_1));
+                        return [4 /*yield*/, bulkUpdateSolidSettings({ data: formData }).unwrap()];
                     case 1:
-                        response = _b.sent();
+                        response = _c.sent();
                         if (response.statusCode === 200) {
-                            dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.UPDATED, detail: ERROR_MESSAGES.SETTING_UPDATED }));
+                            notify("success", ERROR_MESSAGES.UPDATED, ERROR_MESSAGES.SETTING_UPDATED);
+                        }
+                        else {
+                            notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
                         }
                         return [3 /*break*/, 3];
                     case 2:
-                        error_1 = _b.sent();
-                        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ERROR_MESSAGES.SOMETHING_WRONG }));
+                        _a = _c.sent();
+                        notify("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }
             });
         }); },
     });
-    return (_jsxs("form", { onSubmit: formik.handleSubmit, className: "h-full flex flex-column justify-content-between", children: [_jsx("div", { children: _jsxs("div", { className: "flex align-items-start justify-content-between pb-3", children: [_jsxs("div", { children: [_jsx("label", { className: "form-field-label mb-2", children: "Enable Notification" }), _jsx("div", { style: { color: 'var(--solid-grey-500)' }, children: "Decide whether you want to be notified of new messages or updates." })] }), _jsx("div", { children: _jsx(InputSwitch, { name: "enableNotification", checked: formik.values.enableNotification, onChange: function (e) {
-                                    formik.setFieldValue("enableNotification", e.value);
-                                    // formik.submitForm();
-                                } }) })] }) }), _jsx("div", { children: _jsx(Button, { type: 'submit', size: 'small', label: "Save", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] }));
+    var severityClass = (toast === null || toast === void 0 ? void 0 : toast.severity) === "error"
+        ? styles.toastError
+        : (toast === null || toast === void 0 ? void 0 : toast.severity) === "success"
+            ? styles.toastSuccess
+            : (toast === null || toast === void 0 ? void 0 : toast.severity) === "warn"
+                ? styles.toastWarn
+                : styles.toastInfo;
+    return (_jsxs("form", { onSubmit: formik.handleSubmit, className: styles.accountForm, children: [toast ? (_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: function () { return setToast(null); }, "aria-label": "Close notification", children: "\u00D7" })] })) : null, _jsx("div", { className: styles.accountScroll, children: _jsxs("div", { className: styles.switchRow, children: [_jsxs("div", { children: [_jsx("label", { className: styles.sectionTitle, children: "Enable Notification" }), _jsx("div", { className: styles.versionCaption, children: "Decide whether you want to be notified of new messages or updates." })] }), _jsxs("label", { className: styles.switch, "aria-label": "Enable notification", children: [_jsx("input", { type: "checkbox", checked: Boolean(formik.values.enableNotification), onChange: function (event) { return formik.setFieldValue("enableNotification", event.target.checked); } }), _jsx("span", { className: styles.switchTrack })] })] }) }), _jsx("div", { className: styles.footerActions, children: _jsx(SolidButton, { type: "submit", size: "sm", loading: formik.isSubmitting, children: "Save" }) })] }));
 };
 //# sourceMappingURL=SolidNotifications.js.map

package/dist/components/core/common/SolidAccountSettings/SolidNotifications.js.map

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