Add modal to acknowledge user about status change on marking progress to 100%

src/components/Modal/CompletionModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Modal from '@/components/Modal/index';
+import { IoMdClose } from 'react-icons/io';
+import { FaCircleCheck } from 'react-icons/fa6';
+import styles from '@/components/Modal/modal.module.scss';
+
+interface CompletionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const CompletionModal: React.FC<CompletionModalProps> = ({
+    isOpen,
+    onClose,
+}) => {
+    return (
+        <Modal isOpen={isOpen} toggle={onClose}>
+            <div className={styles.modalContent}>
+                <button
+                    className={styles.closeIcon}
+                    onClick={() => {
+                        onClose();
+                    }}
+                    aria-label="Close"
+                >
+                    <IoMdClose size={25} />
+                </button>
+
+                <FaCircleCheck className={styles.checkIcon} />
+                <h3 className={styles.title}>Congratulations !</h3>
+                <div className={styles.text}>
+                    <div>You have achieved 100% completion!</div>
+                    <div>Would you like to update your status?</div>
+                </div>
+
+                <div className={styles.buttonContainer}>
+                    <button
+                        className={styles.changeStatusButton}
+                        onClick={() => {
+                            onClose();
+                        }}
+                    >
+                        Change status
+                    </button>
+                    <button
+                        className={styles.closeButton}
+                        onClick={() => {
+                            onClose();
+                        }}
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    );
+};

src/components/Modal/modal.module.scss

@@ -28,7 +28,103 @@
     background: $white;
     width: max-content;
     height: max-content;
-    padding: 1rem;
     border-radius: 1rem;
     animation: fadeIn ease-in-out 250ms;
 }
+.progressContainer {
+    position: relative;
+    width: 100%;
+}
+
+.modalContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    height: 21rem;
+    width: 22.5rem;
+}
+
+.closeIcon {
+    position: absolute;
+    top: 1rem;
+    right: 0.75rem;
+    width: 2.9rem;
+    height: 1.6rem;
+    cursor: pointer;
+    color: $black;
+    border: none;
+    background-color: transparent;
+
+    &:hover {
+        color: $gray;
+    }
+}
+
+.checkIcon {
+    margin-top: 1.375rem;
+    width: 2.75rem;
+    height: 2.75rem;
+    color: $light-green;
+    margin-bottom: 0.5rem;
+}
+
+.title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    text-align: center;
+}
+
+.text {
+    color: rgba($black, 0.7);
+    text-align: center;
+    font-size: 0.938rem;
+    font-weight: 500;
+    line-height: 1.563rem;
+    margin-top: 0.063rem;
+}
+
+.buttonContainer {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 2.9rem;
+    @media (max-width: 480px) {
+        flex-direction: row;
+    }
+}
+
+.changeStatusButton,
+.closeButton {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: 2px;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    width: 8.75rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 0.875rem;
+}
+
+.changeStatusButton {
+    background-color: $indigo-blue;
+    color: $white;
+
+    &:hover {
+        background-color: $dark-indigo-blue;
+    }
+}
+
+.closeButton {
+    background-color: $white;
+    color: $baltic-sea;
+    border: 2px solid rgba($gray, 0.2);
+
+    &:hover {
+        background-color: rgba($gray, 0.1);
+    }
+}

src/components/tasks/card/progressContainer/index.tsx

@@ -9,6 +9,7 @@ import useUserData from '@/hooks/useUserData';
 import { useGetUserQuery } from '@/app/services/userApi';
 import ProgressText from './ProgressText';
 import Progressbar from './ProgressBar';
+import { CompletionModal } from '@/components/Modal/CompletionModal';
 import { ERROR_MESSAGE, PROGRESS_SUCCESSFUL } from '@/constants/constants';
 import styles from '@/components/tasks/card/card.module.scss';
 import { ProgressContainerProps } from '@/interfaces/task.type';
@@ -25,6 +26,7 @@ const ProgressContainer: FC<ProgressContainerProps> = ({
     const [progressValue, setProgressValue] = useState<number>(
         content.percentCompleted
     );
+    const [showCompletionModal, setShowCompletionModal] = useState(false);
 
     const { isUserAuthorized } = useUserData();
     const { data: userData } = useGetUserQuery();
@@ -38,26 +40,26 @@ const ProgressContainer: FC<ProgressContainerProps> = ({
 
     const { SUCCESS, ERROR } = ToastTypes;
 
-    const handleSliderChangeComplete = (
+    const handleSliderChangeComplete = async (
         id: string,
         percentCompleted: number
     ) => {
         const taskData = {
             percentCompleted: percentCompleted,
         };
-        if (isUserAuthorized) {
-            updateTask({
-                task: taskData,
-                id: id,
-            })
-                .unwrap()
-                .then(() => toast(SUCCESS, PROGRESS_SUCCESSFUL))
-                .catch(() => toast(ERROR, ERROR_MESSAGE));
-        } else {
-            updateSelfTask({ task: taskData, id: id })
-                .unwrap()
-                .then(() => toast(SUCCESS, PROGRESS_SUCCESSFUL))
-                .catch(() => toast(ERROR, ERROR_MESSAGE));
+
+        try {
+            const updateResponse = await (isUserAuthorized
+                ? updateTask({ task: taskData, id: id })
+                : updateSelfTask({ task: taskData, id: id })
+            ).unwrap();
+
+            toast(SUCCESS, PROGRESS_SUCCESSFUL);
+            if (percentCompleted === 100 && isDev) {
+                setShowCompletionModal(true);
+            }
+        } catch (error) {
+            toast(ERROR, ERROR_MESSAGE);
         }
     };
 
@@ -92,8 +94,11 @@ const ProgressContainer: FC<ProgressContainerProps> = ({
         }
     };
 
+    const closeCompletionModal = () => {
+        setShowCompletionModal(false);
+    };
+
     const showUpdateButton = () => {
-        // Only show update button in modal (not readOnly) and in dev mode
         if (
             !readOnly &&
             (content.assignee === userData?.username ||
@@ -125,6 +130,13 @@ const ProgressContainer: FC<ProgressContainerProps> = ({
                 />
                 {showUpdateButton()}
             </div>
+
+            {isDev && (
+                <CompletionModal
+                    isOpen={showCompletionModal}
+                    onClose={closeCompletionModal}
+                />
+            )}
         </>
     );
 };

src/styles/variables.scss

@@ -4,6 +4,8 @@ $theme-primary-alt: #041187;
 $cello-blue: #1c325e;
 $bright-blue: #2563eb;
 $royal-blue: #4169e1;
+$indigo-blue: #5b56d9;
+$dark-indigo-blue: #5145cd;
 $dark-blue-transparent: rgb(29 18 255 / 10%);
 
 $red: #ff0000;
@@ -27,6 +29,7 @@ $white: white;
 $green: #008000;
 $jungle-green: #29ab87;
 $active-green: #87d870;
+$light-green: #1cb31c;
 $yellow: #ecef08;
 $orange: #ffa500;
 $light-red-1: #ffb0b0;

yarn.lock

@@ -1223,7 +1223,7 @@
 
 "@floating-ui/react-dom@^2.1.2":
   version "2.1.2"
-  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
   integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
   dependencies:
     "@floating-ui/dom" "^1.0.0"