@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/layout/mainLayout/header/LogoutModal.jsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { Box, Button, CircularProgress, Modal, Typography } from '@mui/material';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import WavingHandRoundedIcon from '@mui/icons-material/WavingHandRounded';
+import { motion, AnimatePresence } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+/**
+ * LogoutModal
+ *
+ * A two-step logout experience: a confirmation step, then an animated "see you soon" goodbye
+ * while the session is being cleared. The actual sign-out side effects + navigation are performed
+ * by the parent via {@code onConfirm}; this component only drives the UI/animation.
+ *
+ * @module LogoutModal
+ * @param {Object} props
+ * @param {boolean} props.open - Whether the modal is open.
+ * @param {string} props.userName - Name shown for context.
+ * @param {function} props.onCancel - Called when the user dismisses the confirmation.
+ * @param {function} props.onConfirm - Called when the user confirms; should perform the sign-out and navigate.
+ * @returns {JSX.Element}
+ */
+const LogoutModal = ({ open, userName, onCancel, onConfirm }) => {
+  const [phase, setPhase] = useState('confirm');
+
+  // Always start from the confirmation step whenever the modal is (re)opened.
+  useEffect(() => {
+    if (open) setPhase('confirm');
+  }, [open]);
+
+  const handleConfirm = () => {
+    setPhase('goodbye');
+    // The parent clears the session and navigates away (which unmounts this modal) after a short
+    // delay, so the goodbye animation stays on screen until then.
+    onConfirm?.();
+  };
+
+  return (
+    <Modal open={open} onClose={phase === 'confirm' ? onCancel : undefined} data-testid="logout-modal">
+      <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, y: 24, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', stiffness: 220, damping: 22 }}
+          className="w-full max-w-sm"
+        >
+          <Box className="w-full rounded-2xl bg-white shadow-2xl overflow-hidden">
+            <AnimatePresence mode="wait">
+              {phase === 'confirm' ? (
+                <motion.div
+                  key="confirm"
+                  initial={{ opacity: 0, scale: 0.98 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex flex-col items-center text-center px-8 py-9"
+                >
+                  <motion.div
+                    initial={{ scale: 0.6, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ type: 'spring', stiffness: 260, damping: 16 }}
+                    className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 mb-4"
+                  >
+                    <LogoutRoundedIcon sx={{ fontSize: 34 }} />
+                  </motion.div>
+                  <Typography className="text-lg font-bold text-gray-800">Log out?</Typography>
+                  <Typography className="text-sm text-gray-500 mt-2 max-w-xs">
+                    You&apos;ll need to sign in again{userName ? ` as ${userName}` : ''} to access your account.
+                  </Typography>
+                  <div className="w-full flex items-center justify-center gap-3 mt-6">
+                    <Button
+                      variant="outlined"
+                      color="inherit"
+                      onClick={onCancel}
+                      className="rounded-full px-6 normal-case font-medium text-gray-600"
+                      data-testid="logout-cancel-button"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="contained"
+                      color="error"
+                      onClick={handleConfirm}
+                      className="rounded-full px-6 normal-case font-medium"
+                      data-testid="logout-confirm-button"
+                    >
+                      Log out
+                    </Button>
+                  </div>
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="goodbye"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="flex flex-col items-center text-center px-8 py-12"
+                >
+                  <motion.div
+                    initial={{ scale: 0, rotate: -20 }}
+                    animate={{ scale: 1, rotate: [0, -15, 12, -8, 0] }}
+                    transition={{ scale: { type: 'spring', stiffness: 260, damping: 14 }, rotate: { delay: 0.25, duration: 0.8 } }}
+                    className="flex items-center justify-center w-20 h-20 rounded-full bg-blue-50 text-[#007ACC] mb-5"
+                  >
+                    <WavingHandRoundedIcon sx={{ fontSize: 46 }} />
+                  </motion.div>
+                  <Typography className="text-xl font-bold text-gray-800">See you soon!</Typography>
+                  <Typography className="text-sm text-gray-500 mt-2 max-w-xs">
+                    You&apos;ve been signed out securely.
+                  </Typography>
+                  <div className="flex items-center gap-2 mt-6 text-gray-400">
+                    <CircularProgress size={14} color="inherit" />
+                    <Typography className="text-xs">Signing you out…</Typography>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </Box>
+        </motion.div>
+      </div>
+    </Modal>
+  );
+};
+
+LogoutModal.propTypes = {
+  open: PropTypes.bool,
+  userName: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+};
+
+export default LogoutModal;