ece-docs-components 1.0.104 → 1.0.106

package/dist/esm/components/Modal.js

@@ -6,7 +6,7 @@ import { CloseRounded, InfoOutlineRounded, ArticleRounded, ArrowBackIosRounded,
 import { Alert } from './Alert.js';
 import { toast } from 'react-toastify';
 import parse from '../node_modules/html-react-parser/esm/index.js';
-import { VariableState, RequirementType } from '../types/variable.js';
+import { VariableState, VariableScope, RequirementType } from '../types/variable.js';
 import { mapStatusToVariableState, mapRequirementTypeToState } from '../helpers/variableProcessing.js';
 
 const StyledDialog = styled(Dialog)(({ theme }) => ({
@@ -31,25 +31,36 @@ const NavButton = styled(IconButton)(({ theme }) => ({
         borderColor: theme.palette.dark.main, // Keep border dark
     },
 }));
-const Modal = ({ isOpen, onClose, variableId, status, requirementType, description, value, defaultValue, note, onSave, onSubmit, successMessage, errorMessage, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, isLoading, useDefault, canBeBlank, }) => {
-    const variableState = mapStatusToVariableState(status);
-    const variableReqType = mapRequirementTypeToState(requirementType);
-    const [textValue, setTextValue] = useState(value);
+const Modal = ({ isOpen, onClose, onSave, onSubmit, successMessage, errorMessage, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, isLoading, variable, isLeafOrganisation, }) => {
+    const variableState = mapStatusToVariableState(variable.state);
+    const variableReqType = mapRequirementTypeToState(variable.requirementType);
+    const [textValue, setTextValue] = useState(variable.value);
     const [customValue, setCustomValue] = useState("");
-    const [useDefaultValue, setUseDefaultValue] = useState(true);
+    const [useDefaultValue, setUseDefaultValue] = useState(variable.useDefault ?? false);
+    const [isChildEditable, setIsChildEditable] = useState(variable.isChildEditable ?? false);
     const [isSaving, setIsSaving] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const theme = useTheme();
     const toDisplay = (str) => str?.replace(/\\n/g, "\n") ?? "";
     const toStorage = (str) => str?.replace(/\r?\n/g, "\\n") ?? "";
+    const displayValue = toDisplay(variable.value);
+    const displayDefault = toDisplay(variable.defaultValue ?? "");
+    const originalUseDefaultValue = (variable.useDefault ?? false) || displayValue === displayDefault;
+    const originalIsChildEditable = variable.isChildEditable ?? false;
+    const isSettingsDirty = isChildEditable !== originalIsChildEditable;
+    const isDefaultSelectionDirty = useDefaultValue !== originalUseDefaultValue;
+    const isTextDirty = !useDefaultValue && textValue !== displayValue;
     useEffect(() => {
-        const displayValue = toDisplay(value);
-        const displayDefault = toDisplay(defaultValue);
-        const isUsingDefault = useDefault || displayValue === displayDefault;
-        setUseDefaultValue(isUsingDefault);
+        setIsChildEditable(originalIsChildEditable);
+        setUseDefaultValue(originalUseDefaultValue);
         setTextValue(displayValue);
-        setCustomValue(isUsingDefault ? "" : displayValue);
-    }, [variableId, value, defaultValue]);
+        setCustomValue(originalUseDefaultValue ? "" : displayValue);
+    }, [
+        displayValue,
+        originalIsChildEditable,
+        originalUseDefaultValue,
+        variable._id,
+    ]);
     useEffect(() => {
         if (!isOpen) {
             setIsSaving(false);
@@ -76,14 +87,33 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
         const checked = event.target.checked;
         if (checked) {
             setCustomValue(textValue);
-            setTextValue(toDisplay(defaultValue));
+            setTextValue(toDisplay(variable.defaultValue ?? ""));
         }
         else {
             setTextValue(customValue || "");
         }
         setUseDefaultValue(checked);
     };
+    const handleIsChildEditableHandler = (event) => {
+        const checked = event.target.checked;
+        setIsChildEditable(checked);
+    };
     const canSubmitSave = isLoading || variableState === VariableState.Pending;
+    const cannotEdit = canSubmitSave || variableState === VariableState.Declined;
+    const isBlankInvalid = variable.canBeBlank === false && textValue.trim().length <= 0;
+    const submitButtonLabel = useDefaultValue
+        ? variable.useDefault && !isDefaultSelectionDirty
+            ? isSettingsDirty
+                ? "Save changes"
+                : "Default already accepted"
+            : "Accept Default"
+        : isTextDirty
+            ? "Submit for review"
+            : "Save changes";
+    const isSubmitDisabled = canSubmitSave ||
+        isBlankInvalid ||
+        (useDefaultValue && variable.useDefault && !isSettingsDirty) ||
+        (!useDefaultValue && !isTextDirty && !isSettingsDirty);
     const statusConfig = {
         [VariableState.Pending]: { color: "#EBC7FF", label: "Pending" },
         [VariableState.Draft]: { color: "#4D3019", label: "Draft" },
@@ -93,6 +123,7 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
             label: "Action Required",
         },
         [VariableState.Accepted]: { color: "#DBF59A", label: "Accepted" },
+        [VariableState.Rejected]: { color: "#4D3019", label: "Rejected" },
         [VariableState.NotStarted]: { color: "#000000ff", label: "Not Started" },
     };
     const reqTypeConfig = {
@@ -109,21 +140,22 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
             label: "Optional",
         },
     };
-    const statusStyle = variableState
-        ? statusConfig[variableState]
-        : { color: "#ccc", label: "Unknown" };
+    const statusStyle = statusConfig[variable.state] ?? {
+        color: "#ccc",
+        label: "Unknown",
+    };
     const requirementTypeStyle = variableReqType
         ? reqTypeConfig[variableReqType]
         : { color: "#ccc", label: "Unknown" };
     const handleSave = () => {
         setIsSaving(true);
         const payloadValue = toStorage(textValue);
-        onSave?.(payloadValue, useDefaultValue);
+        onSave?.(payloadValue, useDefaultValue, isChildEditable);
     };
     const handleSubmit = () => {
         setIsSubmitting(true);
         const payloadValue = toStorage(textValue);
-        onSubmit?.(payloadValue, useDefaultValue);
+        onSubmit?.(payloadValue, useDefaultValue, isChildEditable);
     };
     return (jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsx(IconButton, { onClick: onClose, disabled: isLoading, sx: {
                     position: "absolute",
@@ -154,16 +186,16 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
                                     py: 1,
                                     borderRadius: 0,
                                     px: 2,
-                                } }))] }), jsx(Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: "pre-line" }, children: parse(description) }), variableState === VariableState.ActionRequired && note && (jsx(Alert, { variant: "error", icon: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }), sx: {
+                                } }))] }), jsx(Typography, { sx: { mb: 3, lineHeight: 1.6, whiteSpace: "pre-line" }, children: parse(variable.customerHelpText) }), variableState === VariableState.ActionRequired &&
+                        variable.feedback && (jsx(Alert, { variant: "error", icon: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }), sx: {
                             mb: 2,
-                        }, children: note })), variableState !== VariableState.ActionRequired && note && (jsx(Alert, { variant: "info", icon: jsx(ArticleRounded, { sx: { fontSize: 20, color: theme.palette.text.primary } }), sx: {
+                        }, children: variable.feedback })), variableState !== VariableState.ActionRequired &&
+                        variable.feedback && (jsx(Alert, { variant: "info", icon: jsx(ArticleRounded, { sx: { fontSize: 20, color: theme.palette.text.primary } }), sx: {
                             mb: 2,
                             backgroundColor: "#00000000",
                             borderColor: "#acacacff",
                             color: theme.palette.text.primary,
-                        }, children: note })), jsx(TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue ||
-                            canSubmitSave ||
-                            variableState === VariableState.Declined, sx: {
+                        }, children: variable.feedback })), jsx(TextField, { multiline: true, rows: 6, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: useDefaultValue || cannotEdit, sx: {
                             mb: 2,
                             "& .MuiOutlinedInput-root": {
                                 backgroundColor: useDefaultValue || canSubmitSave
@@ -171,12 +203,17 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
                                     : "#fff",
                                 borderRadius: 2,
                             },
-                        } }), jsx(FormControlLabel, { control: jsx(Checkbox, { checked: useDefaultValue, disabled: canSubmitSave || variableState === VariableState.Declined, onChange: handleUseDefaultValueChange, sx: {
+                        } }), jsx(FormControlLabel, { control: jsx(Checkbox, { checked: useDefaultValue, disabled: cannotEdit, onChange: handleUseDefaultValueChange, sx: {
+                                color: theme.palette.primary.main,
+                                "&.Mui-checked": {
+                                    color: theme.palette.primary.main,
+                                },
+                            } }), label: "Use Default Wording", sx: { mb: 3 } }), !isLeafOrganisation && variable.scope === VariableScope.Network ? (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: isChildEditable, disabled: cannotEdit, onChange: handleIsChildEditableHandler, sx: {
                                 color: theme.palette.primary.main,
                                 "&.Mui-checked": {
                                     color: theme.palette.primary.main,
                                 },
-                            } }), label: "Use Default Wording", sx: { mb: 3 } }), jsxs(Box, { sx: {
+                            } }), label: "Is Child Editable", sx: { mb: 3 } })) : (jsx(Fragment, {})), jsxs(Box, { sx: {
                             display: "flex",
                             flexDirection: { xs: "column", sm: "row" },
                             alignItems: { xs: "stretch", sm: "center" },
@@ -185,12 +222,12 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
                             pt: 3,
                             borderTop: "1px solid",
                             borderColor: "divider",
-                        }, children: [variableState !== VariableState.Declined ? (jsxs(Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: [useDefaultValue === false ? (jsx(Button, { onClick: handleSave, variant: "outline", size: "md", disabled: canSubmitSave, children: isSaving ? (jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Saving..." })] })) : ("Save") })) : (jsx(Fragment, {})), jsx(Button, { onClick: handleSubmit, variant: "outline", size: "md", disabled: canSubmitSave || (useDefaultValue && useDefault) || (canBeBlank === false && textValue.trim().length <= 0), sx: {
+                        }, children: [variableState !== VariableState.Declined ? (jsxs(Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: [!useDefaultValue && (jsx(Button, { onClick: handleSave, variant: "outline", size: "md", disabled: !isTextDirty || canSubmitSave || isBlankInvalid, children: isSaving ? (jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Saving..." })] })) : ("Save as Draft") })), jsx(Button, { onClick: handleSubmit, variant: "outline", size: "md", disabled: isSubmitDisabled, sx: {
                                             backgroundColor: theme.palette.primary.main + "52",
                                             "&:hover": {
                                                 backgroundColor: theme.palette.primary.main + "80",
                                             },
-                                        }, children: isSubmitting ? (jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Submitting..." })] })) : useDefaultValue && useDefault ? ("Default already Accepted") : useDefaultValue === false ? ("Submit for review") : ("Submit") }), variableReqType === RequirementType.Optional && (jsx(Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
+                                        }, children: isSubmitting ? (jsxs(Fragment, { children: [jsx(CircularProgress, { size: 20 }), jsx(Typography, { sx: { paddingLeft: 2 }, children: "Submitting..." })] })) : (submitButtonLabel) }), variableReqType === RequirementType.Optional && (jsx(Button, { onClick: onDeclineWording, variant: "outline", size: "md", sx: {
                                             backgroundColor: "#ff464652",
                                             "&:hover": {
                                                 backgroundColor: "#ff464680", // Darker purple on hover
@@ -198,11 +235,11 @@ const Modal = ({ isOpen, onClose, variableId, status, requirementType, descripti
                                         }, disabled: canSubmitSave, children: "Decline wording" }))] })) : (jsx(Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" }, children: jsx(Button, { onClick: () => {
                                         setIsSubmitting(true);
                                         // Pass the default value and true directly to onSubmit
-                                        const payloadValue = toStorage(toDisplay(defaultValue));
+                                        const payloadValue = toStorage(toDisplay(variable.defaultValue ?? ""));
                                         setCustomValue(textValue);
-                                        setTextValue(toDisplay(defaultValue));
+                                        setTextValue(toDisplay(variable.defaultValue ?? ""));
                                         setUseDefaultValue(true);
-                                        onSubmit?.(payloadValue, true);
+                                        onSubmit?.(payloadValue, true, isChildEditable);
                                     }, variant: "outline", size: "md", disabled: canSubmitSave, sx: {
                                         backgroundColor: "#ff464652",
                                         "&:hover": {

package/dist/esm/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { use, useEffect, useState } from \"react\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  IconButton,\r\n  Box,\r\n  Typography,\r\n  TextField,\r\n  Checkbox,\r\n  FormControlLabel,\r\n  Alert as MuiAlert,\r\n  Chip,\r\n  styled,\r\n  CircularProgress,\r\n  useTheme,\r\n} from \"@mui/material\";\r\nimport { Button } from \"./Button\";\r\nimport {\r\n  ArrowBackIosRounded,\r\n  ArrowForwardIosRounded,\r\n  ArticleRounded,\r\n  CloseRounded,\r\n  ErrorOutlineRounded,\r\n  InfoOutlineRounded,\r\n  StickyNote2Rounded,\r\n} from \"@mui/icons-material\";\r\nimport { Alert } from \"./Alert\";\r\nimport { toast } from \"react-toastify\";\r\nimport parse from \"html-react-parser\";\r\nimport { VariableState, RequirementType } from \"../types/variable\";\r\nimport {\r\n  mapRequirementTypeToState,\r\n  mapStatusToVariableState,\r\n} from \"../helpers/variableProcessing\";\r\n\r\ninterface ModalProps {\r\n  isOpen: boolean;\r\n  onClose: () => void;\r\n  variableId: string;\r\n  status: string;\r\n  requirementType: string;\r\n  description: string;\r\n  value: string;\r\n  defaultValue: string;\r\n  note?: string;\r\n  onSave?: (fieldValue: string, defaultChecked: boolean) => void;\r\n  onSubmit?: (fieldValue: string, defaultChecked: boolean) => void;\r\n  successMessage?: string;\r\n  errorMessage?: string;\r\n  onDeclineWording?: () => void;\r\n  onPrevious?: () => void;\r\n  onNext?: () => void;\r\n  currentPage?: number;\r\n  totalPages?: number;\r\n  isLoading: boolean;\r\n  useDefault: boolean;\r\n  canBeBlank?: boolean;\r\n}\r\n\r\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\r\n  \"& .MuiDialog-paper\": {\r\n    color: theme.palette.background.default,\r\n    borderRadius: theme.shape.borderRadius,\r\n    maxWidth: \"896px\",\r\n    width: \"100%\",\r\n    maxHeight: \"90vh\",\r\n  },\r\n}));\r\n\r\nconst NavButton = styled(IconButton)(({ theme }) => ({\r\n  width: \"40px\",\r\n  height: \"40px\",\r\n  borderRadius: 999,\r\n  border: `2px solid ${theme.palette.dark.main}`,\r\n  backgroundColor: \"#fff\",\r\n  padding: theme.spacing(1, 2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\r\n    color: theme.palette.dark.main, // Keep text dark instead of light\r\n    borderColor: theme.palette.dark.main, // Keep border dark\r\n  },\r\n}));\r\n\r\nexport const Modal: React.FC<ModalProps> = ({\r\n  isOpen,\r\n  onClose,\r\n  variableId,\r\n  status,\r\n  requirementType,\r\n  description,\r\n  value,\r\n  defaultValue,\r\n  note,\r\n  onSave,\r\n  onSubmit,\r\n  successMessage,\r\n  errorMessage,\r\n  onDeclineWording,\r\n  onPrevious,\r\n  onNext,\r\n  currentPage = 1,\r\n  totalPages = 1,\r\n  isLoading,\r\n  useDefault,\r\n  canBeBlank,\r\n}) => {\r\n  const variableState = mapStatusToVariableState(status);\r\n  const variableReqType = mapRequirementTypeToState(requirementType);\r\n\r\n  const [textValue, setTextValue] = useState(value);\r\n  const [customValue, setCustomValue] = useState(\"\");\r\n\r\n  const [useDefaultValue, setUseDefaultValue] = useState(true);\r\n  const [isSaving, setIsSaving] = useState(false);\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n  const theme = useTheme();\r\n\r\n  const toDisplay = (str: string) => str?.replace(/\\\\n/g, \"\\n\") ?? \"\";\r\n  const toStorage = (str: string) => str?.replace(/\\r?\\n/g, \"\\\\n\") ?? \"\";\r\n\r\n  useEffect(() => {\r\n    const displayValue = toDisplay(value);\r\n    const displayDefault = toDisplay(defaultValue);\r\n\r\n    const isUsingDefault = useDefault || displayValue === displayDefault;\r\n\r\n    setUseDefaultValue(isUsingDefault);\r\n    setTextValue(displayValue);\r\n    setCustomValue(isUsingDefault ? \"\" : displayValue);\r\n  }, [variableId, value, defaultValue]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) {\r\n      setIsSaving(false);\r\n      setIsSubmitting(false);\r\n    }\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    if (successMessage && successMessage !== \"\") {\r\n      toast.success(successMessage);\r\n    }\r\n  }, [successMessage]);\r\n\r\n  useEffect(() => {\r\n    if (errorMessage && errorMessage !== \"\") {\r\n      toast.error(errorMessage);\r\n    }\r\n  }, [errorMessage]);\r\n\r\n  useEffect(() => {\r\n    if (!isLoading) {\r\n      setIsSaving(false);\r\n      setIsSubmitting(false);\r\n    }\r\n  }, [isLoading]);\r\n\r\n  const handleUseDefaultValueChange = (\r\n    event: React.ChangeEvent<HTMLInputElement>,\r\n  ) => {\r\n    const checked = event.target.checked;\r\n\r\n    if (checked) {\r\n      setCustomValue(textValue);\r\n      setTextValue(toDisplay(defaultValue));\r\n    } else {\r\n      setTextValue(customValue || \"\");\r\n    }\r\n\r\n    setUseDefaultValue(checked);\r\n  };\r\n\r\n  const canSubmitSave = isLoading || variableState === VariableState.Pending;\r\n\r\n  const statusConfig = {\r\n    [VariableState.Pending]: { color: \"#EBC7FF\", label: \"Pending\" },\r\n    [VariableState.Draft]: { color: \"#4D3019\", label: \"Draft\" },\r\n    [VariableState.Declined]: { color: \"#4D3019\", label: \"Declined\" },\r\n    [VariableState.ActionRequired]: {\r\n      color: \"#FFBCB3\",\r\n      label: \"Action Required\",\r\n    },\r\n    [VariableState.Accepted]: { color: \"#DBF59A\", label: \"Accepted\" },\r\n    [VariableState.NotStarted]: { color: \"#000000ff\", label: \"Not Started\" },\r\n  };\r\n\r\n  const reqTypeConfig = {\r\n    Default: {\r\n      color: \"#F5A623\",\r\n      highlight: \"#f3bf6bff\",\r\n      highlightSelected: \"#F5A623\",\r\n      label: \"Mandatory\",\r\n    },\r\n    Optional: {\r\n      color: \"#F5D76E\",\r\n      highlight: \"#f3e2a5ff\",\r\n      highlightSelected: \"#F5D76E\",\r\n      label: \"Optional\",\r\n    },\r\n  };\r\n\r\n  const statusStyle = variableState\r\n    ? statusConfig[variableState]\r\n    : { color: \"#ccc\", label: \"Unknown\" };\r\n  const requirementTypeStyle = variableReqType\r\n    ? reqTypeConfig[variableReqType]\r\n    : { color: \"#ccc\", label: \"Unknown\" };\r\n\r\n  const handleSave = () => {\r\n    setIsSaving(true);\r\n    const payloadValue = toStorage(textValue);\r\n    onSave?.(payloadValue, useDefaultValue);\r\n  };\r\n\r\n  const handleSubmit = () => {\r\n    setIsSubmitting(true);\r\n    const payloadValue = toStorage(textValue);\r\n    onSubmit?.(payloadValue, useDefaultValue);\r\n  };\r\n\r\n  return (\r\n    <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\r\n      <IconButton\r\n        onClick={onClose}\r\n        disabled={isLoading}\r\n        sx={{\r\n          position: \"absolute\",\r\n          top: 16,\r\n          right: 16,\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        <CloseRounded sx={{ fontSize: 24 }} />\r\n      </IconButton>\r\n\r\n      <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\r\n        {/* Status Chip */}\r\n        <Box sx={{ mb: 3 }}>\r\n          <Chip\r\n            label={requirementTypeStyle.label.toUpperCase()}\r\n            sx={{\r\n              mr: 3,\r\n              border: \"3px solid\",\r\n              backgroundColor: requirementTypeStyle.color,\r\n              borderColor: requirementTypeStyle.color,\r\n              color: theme.palette.text.primary,\r\n              fontWeight: 600,\r\n              fontSize: \"0.875rem\",\r\n              height: \"auto\",\r\n              py: 1,\r\n              borderRadius: 0,\r\n              px: 2,\r\n            }}\r\n          />\r\n          {variableState !== VariableState.NotStarted && (\r\n            <Chip\r\n              label={statusStyle.label.toUpperCase()}\r\n              sx={{\r\n                mr: 3,\r\n                border: \"3px solid\",\r\n                backgroundColor: theme.palette.background.paper,\r\n                borderColor: statusStyle.color,\r\n                color: theme.palette.text.primary,\r\n                fontWeight: 600,\r\n                fontSize: \"0.875rem\",\r\n                height: \"auto\",\r\n                py: 1,\r\n                borderRadius: 0,\r\n                px: 2,\r\n              }}\r\n            />\r\n          )}\r\n        </Box>\r\n\r\n        {/* Description */}\r\n        <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: \"pre-line\" }}>\r\n          {parse(description)}\r\n        </Typography>\r\n\r\n        {/* Error Alert with Custom Icon */}\r\n        {variableState === VariableState.ActionRequired && note && (\r\n          <Alert\r\n            variant=\"error\"\r\n            icon={<InfoOutlineRounded sx={{ fontSize: 20 }} />}\r\n            sx={{\r\n              mb: 2,\r\n            }}\r\n          >\r\n            {note}\r\n          </Alert>\r\n        )}\r\n\r\n        {/* Info Alert with Custom Background and Icon */}\r\n        {variableState !== VariableState.ActionRequired && note && (\r\n          <Alert\r\n            variant=\"info\"\r\n            icon={\r\n              <ArticleRounded\r\n                sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n              />\r\n            }\r\n            sx={{\r\n              mb: 2,\r\n              backgroundColor: \"#00000000\",\r\n              borderColor: \"#acacacff\",\r\n              color: theme.palette.text.primary,\r\n            }}\r\n          >\r\n            {note}\r\n          </Alert>\r\n        )}\r\n\r\n        {/* Text Field */}\r\n        <TextField\r\n          multiline\r\n          rows={6}\r\n          fullWidth\r\n          value={textValue}\r\n          onChange={(e) => setTextValue(e.target.value)}\r\n          disabled={\r\n            useDefaultValue ||\r\n            canSubmitSave ||\r\n            variableState === VariableState.Declined\r\n          }\r\n          sx={{\r\n            mb: 2,\r\n            \"& .MuiOutlinedInput-root\": {\r\n              backgroundColor:\r\n                useDefaultValue || canSubmitSave\r\n                  ? \"rgba(0, 0, 0, 0.05)\"\r\n                  : \"#fff\",\r\n              borderRadius: 2,\r\n            },\r\n          }}\r\n        />\r\n\r\n        {/* Checkbox */}\r\n        <FormControlLabel\r\n          control={\r\n            <Checkbox\r\n              checked={useDefaultValue}\r\n              disabled={\r\n                canSubmitSave || variableState === VariableState.Declined\r\n              }\r\n              onChange={handleUseDefaultValueChange}\r\n              sx={{\r\n                color: theme.palette.primary.main,\r\n                \"&.Mui-checked\": {\r\n                  color: theme.palette.primary.main,\r\n                },\r\n              }}\r\n            />\r\n          }\r\n          label=\"Use Default Wording\"\r\n          sx={{ mb: 3 }}\r\n        />\r\n\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            flexDirection: { xs: \"column\", sm: \"row\" },\r\n            alignItems: { xs: \"stretch\", sm: \"center\" },\r\n            justifyContent: \"space-between\",\r\n            gap: 2,\r\n            pt: 3,\r\n            borderTop: \"1px solid\",\r\n            borderColor: \"divider\",\r\n          }}\r\n        >\r\n          {variableState !== VariableState.Declined ? (\r\n            <Box sx={{ display: \"flex\", gap: 1.5, flexWrap: \"wrap\" }}>\r\n              {useDefaultValue === false ? (\r\n                <Button\r\n                  onClick={handleSave}\r\n                  variant=\"outline\"\r\n                  size=\"md\"\r\n                  disabled={canSubmitSave}\r\n                >\r\n                  {isSaving ? (\r\n                    <>\r\n                      <CircularProgress size={20} />\r\n                      <Typography sx={{ paddingLeft: 2 }}>Saving...</Typography>\r\n                    </>\r\n                  ) : (\r\n                    \"Save\"\r\n                  )}\r\n                </Button>\r\n              ) : (\r\n                <></>\r\n              )}\r\n              <Button\r\n                onClick={handleSubmit}\r\n                variant=\"outline\"\r\n                size=\"md\"\r\n                disabled={canSubmitSave || (useDefaultValue && useDefault) || (canBeBlank === false && textValue.trim().length <= 0)}\r\n                sx={{\r\n                  backgroundColor: theme.palette.primary.main + \"52\",\r\n                  \"&:hover\": {\r\n                    backgroundColor: theme.palette.primary.main + \"80\",\r\n                  },\r\n                }}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <CircularProgress size={20} />\r\n                    <Typography sx={{ paddingLeft: 2 }}>\r\n                      Submitting...\r\n                    </Typography>\r\n                  </>\r\n                ) : useDefaultValue && useDefault ? (\r\n                  \"Default already Accepted\"\r\n                ) : useDefaultValue === false ? (\r\n                  \"Submit for review\"\r\n                ) : (\r\n                  \"Submit\"\r\n                )}\r\n              </Button>\r\n              {variableReqType === RequirementType.Optional && (\r\n                <Button\r\n                  onClick={onDeclineWording}\r\n                  variant=\"outline\"\r\n                  size=\"md\"\r\n                  sx={{\r\n                    backgroundColor: \"#ff464652\",\r\n                    \"&:hover\": {\r\n                      backgroundColor: \"#ff464680\", // Darker purple on hover\r\n                    },\r\n                  }}\r\n                  disabled={canSubmitSave}\r\n                >\r\n                  Decline wording\r\n                </Button>\r\n              )}\r\n            </Box>\r\n          ) : (\r\n            <Box sx={{ display: \"flex\", gap: 1.5, flexWrap: \"wrap\" }}>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsSubmitting(true);\r\n                  // Pass the default value and true directly to onSubmit\r\n                  const payloadValue = toStorage(toDisplay(defaultValue));\r\n                  setCustomValue(textValue);\r\n                  setTextValue(toDisplay(defaultValue));\r\n                  setUseDefaultValue(true);\r\n                  onSubmit?.(payloadValue, true);\r\n                }}\r\n                variant=\"outline\"\r\n                size=\"md\"\r\n                disabled={canSubmitSave}\r\n                sx={{\r\n                  backgroundColor: \"#ff464652\",\r\n                  \"&:hover\": {\r\n                    backgroundColor: \"#ff464680\",\r\n                  },\r\n                }}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <CircularProgress size={20} />\r\n                    <Typography sx={{ paddingLeft: 2 }}>\r\n                      Restoring...\r\n                    </Typography>\r\n                  </>\r\n                ) : (\r\n                  \"Restore wording\"\r\n                )}\r\n              </Button>\r\n            </Box>\r\n          )}\r\n          {/* Navigation */}\r\n          <Box\r\n            sx={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: 1.5,\r\n              justifyContent: { xs: \"space-between\", sm: \"flex-end\" },\r\n            }}\r\n          >\r\n            {currentPage !== 1 && (\r\n              <NavButton\r\n                onClick={onPrevious}\r\n                aria-label=\"Previous\"\r\n                disabled={isLoading}\r\n              >\r\n                <ArrowBackIosRounded\r\n                  sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n                />\r\n              </NavButton>\r\n            )}\r\n            {currentPage !== totalPages && (\r\n              <NavButton\r\n                onClick={onNext}\r\n                aria-label=\"Next\"\r\n                disabled={isLoading}\r\n              >\r\n                <ArrowForwardIosRounded\r\n                  sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n                />\r\n              </NavButton>\r\n            )}\r\n            <Typography fontWeight={500} fontSize=\"1.125rem\">\r\n              {currentPage}/{totalPages}\r\n            </Typography>\r\n          </Box>\r\n        </Box>\r\n      </DialogContent>\r\n    </StyledDialog>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  IconButton,\r\n  Box,\r\n  Typography,\r\n  TextField,\r\n  Checkbox,\r\n  FormControlLabel,\r\n  Alert as MuiAlert,\r\n  Chip,\r\n  styled,\r\n  CircularProgress,\r\n  useTheme,\r\n} from \"@mui/material\";\r\nimport { Button } from \"./Button\";\r\nimport {\r\n  ArrowBackIosRounded,\r\n  ArrowForwardIosRounded,\r\n  ArticleRounded,\r\n  CloseRounded,\r\n  ErrorOutlineRounded,\r\n  InfoOutlineRounded,\r\n  StickyNote2Rounded,\r\n} from \"@mui/icons-material\";\r\nimport { Alert } from \"./Alert\";\r\nimport { toast } from \"react-toastify\";\r\nimport parse from \"html-react-parser\";\r\nimport {\r\n  VariableState,\r\n  RequirementType,\r\n  Variable,\r\n  VariableScope,\r\n} from \"../types/variable\";\r\nimport {\r\n  mapRequirementTypeToState,\r\n  mapStatusToVariableState,\r\n} from \"../helpers/variableProcessing\";\r\n\r\ninterface ModalProps {\r\n  isOpen: boolean;\r\n  onClose: () => void;\r\n  onSave?: (\r\n    fieldValue: string,\r\n    defaultChecked: boolean,\r\n    isChildEditable: boolean,\r\n  ) => void;\r\n  onSubmit?: (\r\n    fieldValue: string,\r\n    defaultChecked: boolean,\r\n    isChildEditable: boolean,\r\n  ) => void;\r\n  successMessage?: string;\r\n  errorMessage?: string;\r\n  onDeclineWording?: () => void;\r\n  onPrevious?: () => void;\r\n  onNext?: () => void;\r\n  currentPage?: number;\r\n  totalPages?: number;\r\n  isLoading: boolean;\r\n  variable: Variable;\r\n  isLeafOrganisation: boolean;\r\n}\r\n\r\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\r\n  \"& .MuiDialog-paper\": {\r\n    color: theme.palette.background.default,\r\n    borderRadius: theme.shape.borderRadius,\r\n    maxWidth: \"896px\",\r\n    width: \"100%\",\r\n    maxHeight: \"90vh\",\r\n  },\r\n}));\r\n\r\nconst NavButton = styled(IconButton)(({ theme }) => ({\r\n  width: \"40px\",\r\n  height: \"40px\",\r\n  borderRadius: 999,\r\n  border: `2px solid ${theme.palette.dark.main}`,\r\n  backgroundColor: \"#fff\",\r\n  padding: theme.spacing(1, 2),\r\n  \"&:hover\": {\r\n    backgroundColor: theme.palette.grey[100], // Changed from dark.main to grey[100]\r\n    color: theme.palette.dark.main, // Keep text dark instead of light\r\n    borderColor: theme.palette.dark.main, // Keep border dark\r\n  },\r\n}));\r\n\r\nexport const Modal: React.FC<ModalProps> = ({\r\n  isOpen,\r\n  onClose,\r\n  onSave,\r\n  onSubmit,\r\n  successMessage,\r\n  errorMessage,\r\n  onDeclineWording,\r\n  onPrevious,\r\n  onNext,\r\n  currentPage = 1,\r\n  totalPages = 1,\r\n  isLoading,\r\n  variable,\r\n  isLeafOrganisation,\r\n}) => {\r\n  const variableState = mapStatusToVariableState(variable.state);\r\n  const variableReqType = mapRequirementTypeToState(variable.requirementType);\r\n\r\n  const [textValue, setTextValue] = useState(variable.value);\r\n  const [customValue, setCustomValue] = useState(\"\");\r\n\r\n  const [useDefaultValue, setUseDefaultValue] = useState(\r\n    variable.useDefault ?? false,\r\n  );\r\n  const [isChildEditable, setIsChildEditable] = useState(\r\n    variable.isChildEditable ?? false,\r\n  );\r\n\r\n  const [isSaving, setIsSaving] = useState(false);\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n  const theme = useTheme();\r\n\r\n  const toDisplay = (str: string) => str?.replace(/\\\\n/g, \"\\n\") ?? \"\";\r\n  const toStorage = (str: string) => str?.replace(/\\r?\\n/g, \"\\\\n\") ?? \"\";\r\n  const displayValue = toDisplay(variable.value);\r\n  const displayDefault = toDisplay(variable.defaultValue ?? \"\");\r\n  const originalUseDefaultValue =\r\n    (variable.useDefault ?? false) || displayValue === displayDefault;\r\n  const originalIsChildEditable = variable.isChildEditable ?? false;\r\n\r\n  const isSettingsDirty = isChildEditable !== originalIsChildEditable;\r\n  const isDefaultSelectionDirty = useDefaultValue !== originalUseDefaultValue;\r\n  const isTextDirty = !useDefaultValue && textValue !== displayValue;\r\n\r\n  useEffect(() => {\r\n    setIsChildEditable(originalIsChildEditable);\r\n    setUseDefaultValue(originalUseDefaultValue);\r\n    setTextValue(displayValue);\r\n    setCustomValue(originalUseDefaultValue ? \"\" : displayValue);\r\n  }, [\r\n    displayValue,\r\n    originalIsChildEditable,\r\n    originalUseDefaultValue,\r\n    variable._id,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) {\r\n      setIsSaving(false);\r\n      setIsSubmitting(false);\r\n    }\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    if (successMessage && successMessage !== \"\") {\r\n      toast.success(successMessage);\r\n    }\r\n  }, [successMessage]);\r\n\r\n  useEffect(() => {\r\n    if (errorMessage && errorMessage !== \"\") {\r\n      toast.error(errorMessage);\r\n    }\r\n  }, [errorMessage]);\r\n\r\n  useEffect(() => {\r\n    if (!isLoading) {\r\n      setIsSaving(false);\r\n      setIsSubmitting(false);\r\n    }\r\n  }, [isLoading]);\r\n\r\n  const handleUseDefaultValueChange = (\r\n    event: React.ChangeEvent<HTMLInputElement>,\r\n  ) => {\r\n    const checked = event.target.checked;\r\n\r\n    if (checked) {\r\n      setCustomValue(textValue);\r\n      setTextValue(toDisplay(variable.defaultValue ?? \"\"));\r\n    } else {\r\n      setTextValue(customValue || \"\");\r\n    }\r\n\r\n    setUseDefaultValue(checked);\r\n  };\r\n\r\n  const handleIsChildEditableHandler = (\r\n    event: React.ChangeEvent<HTMLInputElement>,\r\n  ) => {\r\n    const checked = event.target.checked;\r\n    setIsChildEditable(checked);\r\n  };\r\n\r\n  const canSubmitSave = isLoading || variableState === VariableState.Pending;\r\n  const cannotEdit = canSubmitSave || variableState === VariableState.Declined;\r\n  const isBlankInvalid =\r\n    variable.canBeBlank === false && textValue.trim().length <= 0;\r\n  const submitButtonLabel = useDefaultValue\r\n    ? variable.useDefault && !isDefaultSelectionDirty\r\n      ? isSettingsDirty\r\n        ? \"Save changes\"\r\n        : \"Default already accepted\"\r\n      : \"Accept Default\"\r\n    : isTextDirty\r\n      ? \"Submit for review\"\r\n      : \"Save changes\";\r\n  const isSubmitDisabled =\r\n    canSubmitSave ||\r\n    isBlankInvalid ||\r\n    (useDefaultValue && variable.useDefault && !isSettingsDirty) ||\r\n    (!useDefaultValue && !isTextDirty && !isSettingsDirty);\r\n\r\n  const statusConfig = {\r\n    [VariableState.Pending]: { color: \"#EBC7FF\", label: \"Pending\" },\r\n    [VariableState.Draft]: { color: \"#4D3019\", label: \"Draft\" },\r\n    [VariableState.Declined]: { color: \"#4D3019\", label: \"Declined\" },\r\n    [VariableState.ActionRequired]: {\r\n      color: \"#FFBCB3\",\r\n      label: \"Action Required\",\r\n    },\r\n    [VariableState.Accepted]: { color: \"#DBF59A\", label: \"Accepted\" },\r\n    [VariableState.Rejected]: { color: \"#4D3019\", label: \"Rejected\" },\r\n    [VariableState.NotStarted]: { color: \"#000000ff\", label: \"Not Started\" },\r\n  };\r\n\r\n  const reqTypeConfig = {\r\n    Default: {\r\n      color: \"#F5A623\",\r\n      highlight: \"#f3bf6bff\",\r\n      highlightSelected: \"#F5A623\",\r\n      label: \"Mandatory\",\r\n    },\r\n    Optional: {\r\n      color: \"#F5D76E\",\r\n      highlight: \"#f3e2a5ff\",\r\n      highlightSelected: \"#F5D76E\",\r\n      label: \"Optional\",\r\n    },\r\n  };\r\n\r\n  const statusStyle = statusConfig[variable.state] ?? {\r\n    color: \"#ccc\",\r\n    label: \"Unknown\",\r\n  };\r\n  const requirementTypeStyle = variableReqType\r\n    ? reqTypeConfig[variableReqType]\r\n    : { color: \"#ccc\", label: \"Unknown\" };\r\n\r\n  const handleSave = () => {\r\n    setIsSaving(true);\r\n    const payloadValue = toStorage(textValue);\r\n    onSave?.(payloadValue, useDefaultValue, isChildEditable);\r\n  };\r\n\r\n  const handleSubmit = () => {\r\n    setIsSubmitting(true);\r\n    const payloadValue = toStorage(textValue);\r\n    onSubmit?.(payloadValue, useDefaultValue, isChildEditable);\r\n  };\r\n\r\n  return (\r\n    <StyledDialog open={isOpen} onClose={onClose} maxWidth=\"md\" fullWidth>\r\n      <IconButton\r\n        onClick={onClose}\r\n        disabled={isLoading}\r\n        sx={{\r\n          position: \"absolute\",\r\n          top: 16,\r\n          right: 16,\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        <CloseRounded sx={{ fontSize: 24 }} />\r\n      </IconButton>\r\n\r\n      <DialogContent sx={{ p: { xs: 3, sm: 4, md: 6 } }}>\r\n        {/* Status Chip */}\r\n        <Box sx={{ mb: 3 }}>\r\n          <Chip\r\n            label={requirementTypeStyle.label.toUpperCase()}\r\n            sx={{\r\n              mr: 3,\r\n              border: \"3px solid\",\r\n              backgroundColor: requirementTypeStyle.color,\r\n              borderColor: requirementTypeStyle.color,\r\n              color: theme.palette.text.primary,\r\n              fontWeight: 600,\r\n              fontSize: \"0.875rem\",\r\n              height: \"auto\",\r\n              py: 1,\r\n              borderRadius: 0,\r\n              px: 2,\r\n            }}\r\n          />\r\n          {variableState !== VariableState.NotStarted && (\r\n            <Chip\r\n              label={statusStyle.label.toUpperCase()}\r\n              sx={{\r\n                mr: 3,\r\n                border: \"3px solid\",\r\n                backgroundColor: theme.palette.background.paper,\r\n                borderColor: statusStyle.color,\r\n                color: theme.palette.text.primary,\r\n                fontWeight: 600,\r\n                fontSize: \"0.875rem\",\r\n                height: \"auto\",\r\n                py: 1,\r\n                borderRadius: 0,\r\n                px: 2,\r\n              }}\r\n            />\r\n          )}\r\n        </Box>\r\n\r\n        {/* Description */}\r\n        <Typography sx={{ mb: 3, lineHeight: 1.6, whiteSpace: \"pre-line\" }}>\r\n          {parse(variable.customerHelpText)}\r\n        </Typography>\r\n\r\n        {/* Error Alert with Custom Icon */}\r\n        {variableState === VariableState.ActionRequired &&\r\n          variable.feedback && (\r\n            <Alert\r\n              variant=\"error\"\r\n              icon={<InfoOutlineRounded sx={{ fontSize: 20 }} />}\r\n              sx={{\r\n                mb: 2,\r\n              }}\r\n            >\r\n              {variable.feedback}\r\n            </Alert>\r\n          )}\r\n\r\n        {/* Info Alert with Custom Background and Icon */}\r\n        {variableState !== VariableState.ActionRequired &&\r\n          variable.feedback && (\r\n            <Alert\r\n              variant=\"info\"\r\n              icon={\r\n                <ArticleRounded\r\n                  sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n                />\r\n              }\r\n              sx={{\r\n                mb: 2,\r\n                backgroundColor: \"#00000000\",\r\n                borderColor: \"#acacacff\",\r\n                color: theme.palette.text.primary,\r\n              }}\r\n            >\r\n              {variable.feedback}\r\n            </Alert>\r\n          )}\r\n\r\n        {/* Text Field */}\r\n        <TextField\r\n          multiline\r\n          rows={6}\r\n          fullWidth\r\n          value={textValue}\r\n          onChange={(e) => setTextValue(e.target.value)}\r\n          disabled={useDefaultValue || cannotEdit}\r\n          sx={{\r\n            mb: 2,\r\n            \"& .MuiOutlinedInput-root\": {\r\n              backgroundColor:\r\n                useDefaultValue || canSubmitSave\r\n                  ? \"rgba(0, 0, 0, 0.05)\"\r\n                  : \"#fff\",\r\n              borderRadius: 2,\r\n            },\r\n          }}\r\n        />\r\n\r\n        {/* Checkbox */}\r\n        <FormControlLabel\r\n          control={\r\n            <Checkbox\r\n              checked={useDefaultValue}\r\n              disabled={cannotEdit}\r\n              onChange={handleUseDefaultValueChange}\r\n              sx={{\r\n                color: theme.palette.primary.main,\r\n                \"&.Mui-checked\": {\r\n                  color: theme.palette.primary.main,\r\n                },\r\n              }}\r\n            />\r\n          }\r\n          label=\"Use Default Wording\"\r\n          sx={{ mb: 3 }}\r\n        />\r\n\r\n        {/* Checkbox */}\r\n        {!isLeafOrganisation && variable.scope === VariableScope.Network ? (\r\n          <FormControlLabel\r\n            control={\r\n              <Checkbox\r\n                checked={isChildEditable}\r\n                disabled={cannotEdit}\r\n                onChange={handleIsChildEditableHandler}\r\n                sx={{\r\n                  color: theme.palette.primary.main,\r\n                  \"&.Mui-checked\": {\r\n                    color: theme.palette.primary.main,\r\n                  },\r\n                }}\r\n              />\r\n            }\r\n            label=\"Is Child Editable\"\r\n            sx={{ mb: 3 }}\r\n          />\r\n        ) : (\r\n          <></>\r\n        )}\r\n\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            flexDirection: { xs: \"column\", sm: \"row\" },\r\n            alignItems: { xs: \"stretch\", sm: \"center\" },\r\n            justifyContent: \"space-between\",\r\n            gap: 2,\r\n            pt: 3,\r\n            borderTop: \"1px solid\",\r\n            borderColor: \"divider\",\r\n          }}\r\n        >\r\n          {variableState !== VariableState.Declined ? (\r\n            <Box sx={{ display: \"flex\", gap: 1.5, flexWrap: \"wrap\" }}>\r\n              {!useDefaultValue && (\r\n                <Button\r\n                  onClick={handleSave}\r\n                  variant=\"outline\"\r\n                  size=\"md\"\r\n                  disabled={!isTextDirty || canSubmitSave || isBlankInvalid}\r\n                >\r\n                  {isSaving ? (\r\n                    <>\r\n                      <CircularProgress size={20} />\r\n                      <Typography sx={{ paddingLeft: 2 }}>Saving...</Typography>\r\n                    </>\r\n                  ) : (\r\n                    \"Save as Draft\"\r\n                  )}\r\n                </Button>\r\n              )}\r\n              <Button\r\n                onClick={handleSubmit}\r\n                variant=\"outline\"\r\n                size=\"md\"\r\n                disabled={isSubmitDisabled}\r\n                sx={{\r\n                  backgroundColor: theme.palette.primary.main + \"52\",\r\n                  \"&:hover\": {\r\n                    backgroundColor: theme.palette.primary.main + \"80\",\r\n                  },\r\n                }}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <CircularProgress size={20} />\r\n                    <Typography sx={{ paddingLeft: 2 }}>\r\n                      Submitting...\r\n                    </Typography>\r\n                  </>\r\n                ) : (\r\n                  submitButtonLabel\r\n                )}\r\n              </Button>\r\n              {variableReqType === RequirementType.Optional && (\r\n                <Button\r\n                  onClick={onDeclineWording}\r\n                  variant=\"outline\"\r\n                  size=\"md\"\r\n                  sx={{\r\n                    backgroundColor: \"#ff464652\",\r\n                    \"&:hover\": {\r\n                      backgroundColor: \"#ff464680\", // Darker purple on hover\r\n                    },\r\n                  }}\r\n                  disabled={canSubmitSave}\r\n                >\r\n                  Decline wording\r\n                </Button>\r\n              )}\r\n            </Box>\r\n          ) : (\r\n            <Box sx={{ display: \"flex\", gap: 1.5, flexWrap: \"wrap\" }}>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsSubmitting(true);\r\n                  // Pass the default value and true directly to onSubmit\r\n                  const payloadValue = toStorage(\r\n                    toDisplay(variable.defaultValue ?? \"\"),\r\n                  );\r\n                  setCustomValue(textValue);\r\n                  setTextValue(toDisplay(variable.defaultValue ?? \"\"));\r\n                  setUseDefaultValue(true);\r\n                  onSubmit?.(payloadValue, true, isChildEditable);\r\n                }}\r\n                variant=\"outline\"\r\n                size=\"md\"\r\n                disabled={canSubmitSave}\r\n                sx={{\r\n                  backgroundColor: \"#ff464652\",\r\n                  \"&:hover\": {\r\n                    backgroundColor: \"#ff464680\",\r\n                  },\r\n                }}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <CircularProgress size={20} />\r\n                    <Typography sx={{ paddingLeft: 2 }}>\r\n                      Restoring...\r\n                    </Typography>\r\n                  </>\r\n                ) : (\r\n                  \"Restore wording\"\r\n                )}\r\n              </Button>\r\n            </Box>\r\n          )}\r\n          {/* Navigation */}\r\n          <Box\r\n            sx={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: 1.5,\r\n              justifyContent: { xs: \"space-between\", sm: \"flex-end\" },\r\n            }}\r\n          >\r\n            {currentPage !== 1 && (\r\n              <NavButton\r\n                onClick={onPrevious}\r\n                aria-label=\"Previous\"\r\n                disabled={isLoading}\r\n              >\r\n                <ArrowBackIosRounded\r\n                  sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n                />\r\n              </NavButton>\r\n            )}\r\n            {currentPage !== totalPages && (\r\n              <NavButton\r\n                onClick={onNext}\r\n                aria-label=\"Next\"\r\n                disabled={isLoading}\r\n              >\r\n                <ArrowForwardIosRounded\r\n                  sx={{ fontSize: 20, color: theme.palette.text.primary }}\r\n                />\r\n              </NavButton>\r\n            )}\r\n            <Typography fontWeight={500} fontSize=\"1.125rem\">\r\n              {currentPage}/{totalPages}\r\n            </Typography>\r\n          </Box>\r\n        </Box>\r\n      </DialogContent>\r\n    </StyledDialog>\r\n  );\r\n};\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/components/NoteBox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface NoteBoxProps {
     status?: string;
     requirementType?: string;

package/dist/esm/components/NoteBox.js

@@ -9,91 +9,97 @@ import { mapStatusToVariableState, mapRequirementTypeToState } from '../helpers/
 // Status based color configs (from Modal)
 const statusConfig = {
     Accepted: {
-        highlight: '#EDF9CD',
-        highlightSelected: '#DBF59A',
-        label: 'Accepted',
+        highlight: "#EDF9CD",
+        highlightSelected: "#DBF59A",
+        label: "Accepted",
     },
     Pending: {
-        highlight: '#F5E2FF',
-        highlightSelected: '#EBC7FF',
-        label: 'Pending',
-        alertVariant: 'info',
+        highlight: "#F5E2FF",
+        highlightSelected: "#EBC7FF",
+        label: "Pending",
+        alertVariant: "info",
     },
-    'Action Required': {
-        highlight: '#FBEEEE',
-        highlightSelected: '#FFBCB3',
-        label: 'ActionRequired',
-        alertVariant: 'error',
+    "Action Required": {
+        highlight: "#FBEEEE",
+        highlightSelected: "#FFBCB3",
+        label: "ActionRequired",
+        alertVariant: "error",
     },
-    'Declined': {
-        highlight: '#FFF6D1',
-        highlightSelected: '#FDE58E',
-        label: 'Declined',
+    Declined: {
+        highlight: "#FFF6D1",
+        highlightSelected: "#FDE58E",
+        label: "Declined",
     },
-    'Not Started': {
-        highlight: '#f8c97cff',
-        highlightSelected: '#F5A623',
-        label: 'Not Started',
+    "Not Started": {
+        highlight: "#f8c97cff",
+        highlightSelected: "#F5A623",
+        label: "Not Started",
+    },
+    Rejected: {
+        highlight: "#FBEEEE",
+        highlightSelected: "#FFBCB3",
+        label: "ActionRequired",
+        alertVariant: "error",
     },
     Draft: {
-        highlight: '#FFEACD',
-        highlightSelected: '#FFC365',
-        label: 'Draft',
+        highlight: "#FFEACD",
+        highlightSelected: "#FFC365",
+        label: "Draft",
     },
 };
 const NoteContainer = styled(Box)({
-    position: 'relative',
-    display: 'inline',
-    maxWidth: '100%',
+    position: "relative",
+    display: "inline",
+    maxWidth: "100%",
 });
 // Uses highlight colors driven by status exclusively
 const HighlightWrapper = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'isHovered' &&
-        prop !== 'highlightColor' &&
-        prop !== 'highlightSelectedColor'
+    shouldForwardProp: (prop) => prop !== "isHovered" &&
+        prop !== "highlightColor" &&
+        prop !== "highlightSelectedColor",
 })(({ isHovered, highlightColor, highlightSelectedColor }) => ({
-    position: 'relative',
-    display: 'inline',
-    maxWidth: '100%',
-    '&:hover .edit-button': {
+    position: "relative",
+    display: "inline",
+    maxWidth: "100%",
+    "&:hover .edit-button": {
         opacity: 1,
     },
-    '& .highlight-span': {
+    "& .highlight-span": {
         background: isHovered ? highlightSelectedColor : highlightColor,
-        padding: '2px 4px',
-        borderBottom: '2px solid rgba(77, 48, 25, 0.3)',
-        boxDecorationBreak: 'clone',
-        WebkitBoxDecorationBreak: 'clone',
-        transition: 'background 0.2s ease',
-        cursor: 'pointer',
-        fontSize: '1rem',
-        wordWrap: 'break-word',
-        overflowWrap: 'break-word',
-        display: 'inline',
-        color: '#4D3019',
+        padding: "2px 4px",
+        borderBottom: "2px solid rgba(77, 48, 25, 0.3)",
+        boxDecorationBreak: "clone",
+        WebkitBoxDecorationBreak: "clone",
+        transition: "background 0.2s ease",
+        cursor: "pointer",
+        fontSize: "1rem",
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        display: "inline",
+        color: "#4D3019",
     },
 }));
 const EditButton = styled(IconButton)(({ theme }) => ({
     top: 0,
     right: 0,
-    transform: 'translate(-50%, -50%)',
-    position: 'relative',
+    transform: "translate(-50%, -50%)",
+    position: "relative",
     width: 20,
     height: 20,
     marginRight: -20,
-    borderRadius: (typeof theme.shape.borderRadius === 'string'
+    borderRadius: (typeof theme.shape.borderRadius === "string"
         ? parseInt(theme.shape.borderRadius, 10)
         : theme.shape.borderRadius || 4) * 2,
-    backgroundColor: '#4D3019',
+    backgroundColor: "#4D3019",
     opacity: 0,
-    transition: 'all 0.2s ease',
-    boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
-    '&:hover': {
-        backgroundColor: '#4D3019',
-        transform: 'translate(-50%, -50%) scale(1.1)',
+    transition: "all 0.2s ease",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.12)",
+    "&:hover": {
+        backgroundColor: "#4D3019",
+        transform: "translate(-50%, -50%) scale(1.1)",
     },
 }));
-const NoteBox = ({ status, requirementType, label, note, children, className = '', onEditClick, }) => {
+const NoteBox = ({ status, requirementType, label, note, children, className = "", onEditClick, }) => {
     const [isHovered, setIsHovered] = useState(false);
     // Map current status
     const variableState = mapStatusToVariableState(status);
@@ -101,39 +107,42 @@ const NoteBox = ({ status, requirementType, label, note, children, className = '
     const style = variableState
         ? statusConfig[variableState]
         : {
-            highlight: '#EEE',
-            highlightSelected: '#DDD'};
+            highlight: "#EEE",
+            highlightSelected: "#DDD"};
     const reqTypeConfig = {
         Default: {
-            color: '#F5A623',
-            highlight: '#f3bf6bff',
-            highlightSelected: '#F5A623',
-            label: 'Mandatory',
+            color: "#F5A623",
+            highlight: "#f3bf6bff",
+            highlightSelected: "#F5A623",
+            label: "Mandatory",
         },
         Optional: {
-            color: '#F5D76E',
-            highlight: '#f3e2a5ff',
-            highlightSelected: '#F5D76E',
-            label: 'Optional',
+            color: "#F5D76E",
+            highlight: "#f3e2a5ff",
+            highlightSelected: "#F5D76E",
+            label: "Optional",
         },
     };
-    const requirementTypeStyle = requirementTypeState ? reqTypeConfig[requirementTypeState] :
-        {
-            highlight: '#EEE',
-            highlightSelected: '#DDD'};
-    return (jsxs(NoteContainer, { className: className, children: [variableState && style.alertVariant && note && (jsx(Alert, { variant: style.alertVariant, sx: { mb: 1 }, children: note })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlight : style.highlight, highlightSelectedColor: variableState === VariableState.NotStarted ? requirementTypeStyle.highlightSelected : style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
+    const requirementTypeStyle = requirementTypeState
+        ? reqTypeConfig[requirementTypeState]
+        : {
+            highlight: "#EEE",
+            highlightSelected: "#DDD"};
+    return (jsxs(NoteContainer, { className: className, children: [variableState && style.alertVariant && note && (jsx(Alert, { variant: style.alertVariant, sx: { mb: 1 }, children: note })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: variableState === VariableState.NotStarted
+                    ? requirementTypeStyle.highlight
+                    : style.highlight, highlightSelectedColor: variableState === VariableState.NotStarted
+                    ? requirementTypeStyle.highlightSelected
+                    : style.highlightSelected, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
                     e.stopPropagation();
                     if (onEditClick) {
                         onEditClick();
                     }
-                }, children: [jsx("span", { className: "highlight-span", style: { display: 'inline' }, children: children }), jsx(EditButton, { className: "edit-button", onClick: (e) => {
+                }, children: [jsx("span", { className: "highlight-span", style: { display: "inline" }, children: children }), jsx(EditButton, { className: "edit-button", onClick: (e) => {
                             e.stopPropagation();
                             if (onEditClick) {
                                 onEditClick();
                             }
-                        }, size: "small", children: variableState === VariableState.Accepted
-                            ? jsx(CheckRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } })
-                            : jsx(EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
+                        }, size: "small", children: variableState === VariableState.Accepted ? (jsx(CheckRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } })) : (jsx(EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } })) })] })] }));
 };
 
 export { NoteBox };