feat: uepr-38: debug modal changes

src/components/debug-modal/debug-modal.css

@@ -0,0 +1,149 @@
+@import "../../css/colors.css";
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: 'transparent';
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 510;
+}
+
+.modal-container {
+    background: white;
+    border-radius: 8px;
+    width: 1000px;
+    max-height: 90%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow-x: visible;
+    box-shadow: 0 4px 4px 0 $ui-black-transparent-10;
+}
+
+.modal-header {
+    display: flex;
+    border-radius: 8px 8px 0 0;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: $ui-green;
+}
+
+.header-title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    color: white; 
+}
+.debug-icon {
+    height: 22px;
+    width: 22px;
+}
+
+.hidden {
+    display: none;
+}
+
+.close-button {
+    display: flex;
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+}
+
+.modal-content {
+    display: flex;
+    width: 100%;
+    flex-grow: 1;
+    overflow-y: scroll;
+}
+
+.previousIcon {
+    position: absolute;
+    cursor: pointer;
+    top: 50%;
+}
+
+.nextIcon {
+    position: absolute;
+    cursor: pointer;
+    right: -30px;
+    top: 50%;
+}
+
+.topic-list {
+    width: 30%;
+    border-right: 1px solid $ui-green;;
+}
+
+.topic-item {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 10px;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: $ui-green;;
+    cursor: pointer;
+}
+
+.topic-item.active {
+    background-color: #D1FAEE;
+    font-weight: bold;
+}
+
+.info-container {
+    flex-direction: column;
+    width: 70%;
+    display: flex;
+    padding: 20px;
+    color: $text-primary;
+}
+
+.text-container {
+    flex: 1;
+    margin-left: 70px;
+}
+
+.title-text {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 700;
+}
+
+.description {
+    font-size: 16px;
+    line-height: 28px;
+}
+
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    margin-top: 10px;
+}
+
+.topicImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Ensures image scales proportionally */
+}
+
+.navigation-buttons {
+    margin-top: 20px;
+}
+
+button {
+    margin: 5px;
+}

src/components/debug-modal/debug-modal.jsx

@@ -0,0 +1,167 @@
+import React, {useState, useCallback, useEffect} from 'react';
+import {defineMessages, FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import ReactModal from 'react-modal';
+import classNames from 'classnames';
+import {sections} from './sections/sections';
+import GA4 from '../../lib/analytics';
+
+import styles from './debug-modal.css';
+import debugIcon from './icons/icon--debug.svg';
+import debugIconInverted from './icons/icon--debug-inverted.svg';
+import closeIcon from './icons/icon--close.svg';
+import prevIcon from './icons/icon--prev.svg';
+import nextIcon from './icons/icon--next.svg';
+
+const messages = defineMessages({
+    title: {
+        id: 'gui.debugModal.title',
+        defaultMessage: 'Debugging | Getting Unstuck',
+        description: 'title for the debugging modal'
+    }
+});
+
+const logTopicChange = topicIndex => {
+    GA4.event({
+        category: 'change_topic_debug_modal',
+        label: sections[topicIndex].id
+    });
+};
+
+const DebugModal = ({isOpen, onClose = () => {}}) => {
+    const [selectedTopicIndex, setSelectedTopicIndex] = useState(0);
+
+    const handleNext = useCallback(() => {
+        if (selectedTopicIndex < sections.length - 1) {
+            setSelectedTopicIndex(selectedTopicIndex + 1);
+            logTopicChange(selectedTopicIndex + 1);
+        }
+    }, [selectedTopicIndex, setSelectedTopicIndex]);
+
+    const handlePrevious = useCallback(() => {
+        if (selectedTopicIndex > 0) {
+            setSelectedTopicIndex(selectedTopicIndex - 1);
+            logTopicChange(selectedTopicIndex - 1);
+        }
+    }, [selectedTopicIndex, setSelectedTopicIndex]);
+
+    const handleTopicSelect = useCallback(index => {
+        setSelectedTopicIndex(index);
+        logTopicChange(index);
+    }, [setSelectedTopicIndex]);
+
+    const handleClose = useCallback(() => {
+        GA4.event({
+            category: 'close_debug_modal'
+        });
+        onClose();
+    }, [onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            GA4.event({
+                category: 'open_debug_modal',
+                label: sections[selectedTopicIndex].id
+            });
+        }
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            onRequestClose={handleClose}
+            className={styles.modalContainer}
+            overlayClassName={styles.modalOverlay}
+        >
+            <div className={styles.modalHeader}>
+                <div className={styles.headerTitle}>
+                    <img
+                        className={styles.debugIcon}
+                        src={debugIcon}
+                    />
+                    <FormattedMessage
+                        {...messages.title}
+                    />
+                </div>
+                <button
+                    className={styles.closeButton}
+                    onClick={handleClose}
+                >
+                    <img
+                        className={styles.closeIcon}
+                        src={closeIcon}
+                    />
+                </button>
+            </div>
+            <div className={styles.modalContent} >
+                <div className={styles.topicList}>
+                    {sections.map((section, index) => (
+                        <div
+                            key={index}
+                            className={classNames(styles.topicItem, {
+                                [styles.active]: selectedTopicIndex === index
+                            })}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onClick={() => handleTopicSelect(index)}
+                        >
+                            <div className={styles.debugIcon}>
+                                <img
+                                    className={classNames({
+                                        [styles.hidden]: selectedTopicIndex !== index
+                                    })}
+                                    src={debugIconInverted}
+                                />
+                            </div>
+                            <FormattedMessage
+                                {...(section.sectionTitle ?? section.title)}
+                            />
+                        </div>
+                    ))}
+                </div>
+                <div className={styles.infoContainer}>
+                    <div className={styles.textContainer}>
+                        <div className={styles.titleText}>
+                            <FormattedMessage
+                                {...sections[selectedTopicIndex].title}
+                            />
+                        </div>
+                        <div className={styles.description}>{sections[selectedTopicIndex].description}</div>
+                    </div>
+                    <div className={styles.imageContainer}>
+                        <img
+                            src={sections[selectedTopicIndex].image}
+                            className={styles.topicImage}
+                        />
+                    </div>
+                    <div className={styles.navigationButtons}>
+                        <img
+                            src={prevIcon}
+                            alt="Previous"
+                            onClick={handlePrevious}
+                            className={classNames(styles.navigationIcon, styles.previousIcon, {
+                                [styles.hidden]: selectedTopicIndex === 0
+                            })}
+                        />
+                        <img
+                            src={nextIcon}
+                            alt="Next"
+                            onClick={handleNext}
+                            className={classNames(styles.navigationIcon, styles.nextIcon, {
+                                [styles.hidden]: selectedTopicIndex === sections.length - 1
+                            })}
+                        />
+                    </div>
+                </div>
+            </div>
+        </ReactModal>
+    );
+};
+
+DebugModal.propTypes = {
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func
+};
+
+export default DebugModal;