From ea5529d24b544af4d0b3ddbde2e8bfe8e011d0f7 Mon Sep 17 00:00:00 2001 From: Jason Chuang Date: Fri, 13 Mar 2026 04:16:12 +0800 Subject: [PATCH] remove toastify and change to dialog box --- src/App.js | 24 ++- src/components/GlobalNotificationModal.js | 71 +++++++++ .../auth-forms/CustomFormWizard.js | 41 +++-- src/translations/en.json | 1 + src/translations/zh-CN.json | 1 + src/translations/zh-HK.json | 1 + src/utils/CommonFunction.js | 150 ++++-------------- 7 files changed, 149 insertions(+), 140 deletions(-) create mode 100644 src/components/GlobalNotificationModal.js diff --git a/src/App.js b/src/App.js index 51361a5..e96e524 100644 --- a/src/App.js +++ b/src/App.js @@ -2,24 +2,22 @@ import Routes from 'routes'; import ThemeCustomization from 'themes'; import ScrollTop from 'components/ScrollTop'; -import {ToastContainer} from "react-toastify"; -import 'react-toastify/dist/ReactToastify.css'; -import {PNSPS_THEME} from "./themes/themeConst"; -import {ThemeProvider} from "@emotion/react"; +import { PNSPS_THEME } from './themes/themeConst'; +import { ThemeProvider } from '@emotion/react'; +import GlobalNotificationModal from 'components/GlobalNotificationModal'; //import {isUserLoggedIn} from 'utils/Utils'; //import {DefaultRoute} from 'routes/index' // ==============================|| APP - THEME, ROUTER, LOCAL ||============================== // const App = () => ( - - - - - - - - - + + + + + + + + ); export default App; diff --git a/src/components/GlobalNotificationModal.js b/src/components/GlobalNotificationModal.js new file mode 100644 index 0000000..30ea928 --- /dev/null +++ b/src/components/GlobalNotificationModal.js @@ -0,0 +1,71 @@ +import React, { useEffect, useState } from 'react'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogActions from '@mui/material/DialogActions'; +import { Button } from '@mui/material'; +import { useIntl } from 'react-intl'; + +const EVENT_NAME = 'pnsps-notification'; + +const typeToTitleId = { + success: 'success', + error: 'error', + warning: 'warning' +}; + +export default function GlobalNotificationModal() { + const intl = useIntl(); + const [open, setOpen] = useState(false); + const [message, setMessage] = useState(''); + const [type, setType] = useState('success'); + + useEffect(() => { + const handler = (event) => { + const { type: incomingType, message: incomingMessage } = event.detail || {}; + if (!incomingMessage) return; + setType(incomingType || 'success'); + setMessage(incomingMessage); + setOpen(true); + }; + + window.addEventListener(EVENT_NAME, handler); + return () => { + window.removeEventListener(EVENT_NAME, handler); + }; + }, []); + + const handleClose = () => { + setOpen(false); + }; + + return ( + + + {intl.formatMessage({ id: typeToTitleId[type] || typeToTitleId.success })} + + + + {message} + + + + + + + ); +} + diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 4be5615..5085655 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { Box, @@ -101,6 +101,7 @@ const CustomFormWizard = (props) => { const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); const [checkCountry, setCheckCountry] = useState(false); + const fileInputRef = useRef(null); const username = document.getElementById("username-login") const [checkUsername, setCheckUsername] = useState(false); @@ -1817,18 +1818,36 @@ const CustomFormWizard = (props) => { - + {/*如: 香港身份證; 護照; 中國內地身份證等*/} diff --git a/src/translations/en.json b/src/translations/en.json index f1dd804..b1549a3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -371,6 +371,7 @@ "to": "To", "all": "All", "success": "Success", + "error": "Error", "reject": "Reject", "cancelledStatus": "Cancelled", "inProgress": "In Progress", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index cda0e66..8ab2085 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -403,6 +403,7 @@ "to": "到", "all": "全部", "success": "成功", + "error": "错误", "reject": "拒绝", "cancelledStatus": "取消", "inProgress": "进行中", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index dc7c75d..e835e98 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -404,6 +404,7 @@ "to": "到", "all": "全部", "success": "成功", + "error": "錯誤", "reject": "拒絕", "cancelledStatus": "取消", "inProgress": "進行中", diff --git a/src/utils/CommonFunction.js b/src/utils/CommonFunction.js index 258d002..420d4a9 100644 --- a/src/utils/CommonFunction.js +++ b/src/utils/CommonFunction.js @@ -6,7 +6,6 @@ import DialogActions from "@mui/material/DialogActions"; import { Button } from "@mui/material"; import Dialog from "@mui/material/Dialog"; import * as React from "react"; -import { toast } from "react-toastify"; export const clickableLink=(link, label)=> { return {label}; @@ -83,152 +82,71 @@ export function getDateString(queryDateArray) { ) } +const NOTIFICATION_EVENT_NAME = "pnsps-notification"; + +const dispatchNotification = (type, message) => { + window.dispatchEvent( + new CustomEvent(NOTIFICATION_EVENT_NAME, { + detail: { + type, + message + } + }) + ); +}; + export const notifySaveSuccess = () => { - const userType = JSON.parse(localStorage.getItem("userData")).type - toast.success(userType === "GLD" ? 'Save success!' : "儲存成功!", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + const userType = JSON.parse(localStorage.getItem("userData")).type; + const msg = userType === "GLD" ? "Save success!" : "儲存成功!"; + dispatchNotification("success", msg); }; export const notifyCreateSuccess = () => { - const userType = JSON.parse(localStorage.getItem("userData")).type - toast.success(userType === "GLD" ? 'Create success!' : "創建成功!", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + const userType = JSON.parse(localStorage.getItem("userData")).type; + const msg = userType === "GLD" ? "Create success!" : "創建成功!"; + dispatchNotification("success", msg); }; export const notifyVerifySuccess = () => { - const userType = JSON.parse(localStorage.getItem("userData")).type - toast.success(userType === "GLD" ? 'Verify success!' : "驗證成功!", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + const userType = JSON.parse(localStorage.getItem("userData")).type; + const msg = userType === "GLD" ? "Verify success!" : "驗證成功!"; + dispatchNotification("success", msg); }; export const notifyDeleteSuccess = () => { - const userType = JSON.parse(localStorage.getItem("userData")).type - toast.success(userType === "GLD" ? 'Delete success!' : "刪除成功!", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + const userType = JSON.parse(localStorage.getItem("userData")).type; + const msg = userType === "GLD" ? "Delete success!" : "刪除成功!"; + dispatchNotification("success", msg); }; export const notifyLockSuccess = () => { - toast.success('Lock success!', { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("success", "Lock success!"); }; export const notifyUnlockSuccess = () => { - toast.success('Unlock success!', { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("success", "Unlock success!"); }; export const notifyActiveSuccess = () => { - toast.success('Active success!', { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("success", "Active success!"); }; export const notifyDownloadSuccess = () => { - const userType = JSON.parse(localStorage.getItem("userData")).type - toast.success(userType === "GLD" ? 'Download success!' : "下載成功!", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + const userType = JSON.parse(localStorage.getItem("userData")).type; + const msg = userType === "GLD" ? "Download success!" : "下載成功!"; + dispatchNotification("success", msg); }; export const notifyActionSuccess = (actionMsg) => { - toast.success(actionMsg??"Success", { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("success", actionMsg ?? "Success"); }; export const notifyActionError = (actionMsg) => { - toast.error(`${actionMsg}`, { - position: "bottom-right", - autoClose: 20000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("error", `${actionMsg}`); }; export const notifyActionWarning = (actionMsg) => { - toast.warn(`${actionMsg}`, { - position: "bottom-right", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - theme: "light", - }) + dispatchNotification("warning", `${actionMsg}`); } export function prettyJson(json) {