finalize scenario preview

Author: shreeyash07

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import GeoJsonPreview from '#components/GeoJsonPreview';
+import { CustomOptionPreviewType } from '#views/NewTutorial/utils';
 import { IconKey, iconMap } from '#utils/common';
 
 import styles from './styles.css';
@@ -15,13 +16,15 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
+    customOptionsPreview?: CustomOptionPreviewType[] | undefined;
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
         url,
         previewPopUp,
+        customOptionsPreview,
     } = props;
 
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
@@ -49,7 +52,18 @@ export default function FootprintGeoJsonPreview(props: Props) {
                 geoJson={geoJson}
             />
             <div className={styles.footerOption}>
-                Footer Option
+                {customOptionsPreview?.map((option) => {
+                    const Icon = iconMap[option.icon];
+                    return (
+                        <div
+                            key={option.id}
+                            className={styles.previewIcon}
+                            style={{ backgroundColor: option.iconColor }}
+                        >
+                            <Icon />
+                        </div>
+                    );
+                })}
             </div>
         </div>
     );

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css

@@ -47,5 +47,15 @@
 
     .footer-option {
         display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large);
+        
+        .preview-icon {
+            display: flex;
+            align-items: center;
+            border-radius: 50%;
+            padding: 3px;
+            font-size: 30px;
+        }
     }
 }

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx

@@ -23,6 +23,7 @@ import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
 import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
 import SegmentInput from '#components/SegmentInput';
+import { CustomOptionPreviewType } from '../utils';
 import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
 import ChangeDetectionGeoJsonPreview from './ChangeDetectionGeoJsonPreview';
 
@@ -72,6 +73,7 @@ interface Props {
     projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
+    customOptionsPreview?: CustomOptionPreviewType[] | undefined;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -84,6 +86,7 @@ export default function ScenarioPageInput(props: Props) {
         url,
         projectType,
         urlB,
+        customOptionsPreview,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
@@ -223,6 +226,7 @@ export default function ScenarioPageInput(props: Props) {
                     <FootprintGeoJsonPreview
                         geoJson={geoJson}
                         url={url}
+                        customOptionsPreview={customOptionsPreview}
                     />
                 )}
                 <SegmentInput

manager-dashboard/app/views/NewTutorial/index.tsx

@@ -5,6 +5,7 @@ import {
     unique,
     getElementAround,
     isNotDefined,
+    randomString,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -81,6 +82,8 @@ import {
     infoPageTemplateoptions,
     infoPageBlocksMap,
     tileServerUrls,
+    ColorKey,
+    CustomOptionPreviewType,
 } from './utils';
 import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
@@ -482,6 +485,21 @@ function NewTutorial(props: Props) {
         return tileServerUrls[tileServerName];
     }, [value.tileServerB?.name, value.tileServerB?.url]);
 
+    const customOptionsPreview: CustomOptionPreviewType[] | undefined = React.useMemo(() => {
+        const customOptions = value?.customOptions;
+        if (isNotDefined(customOptions)) {
+            return undefined;
+        }
+        const finalValue = customOptions.map((custom) => (
+            {
+                id: randomString(),
+                icon: custom.icon ?? 'removeOutline',
+                iconColor: custom.iconColor as ColorKey ?? 'gray',
+            }
+        ));
+        return finalValue;
+    }, [value.customOptions]);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -598,13 +616,13 @@ function NewTutorial(props: Props) {
                             <SelectInput
                                 name=""
                                 label="Page Template"
+                                className={styles.instructionPopup}
                                 nonClearable
                                 value={selectedInfoPageTemplate}
                                 onChange={setSelectedInfoPageTemplate}
                                 options={infoPageTemplateoptions}
                                 keySelector={(infoPageTemplate) => infoPageTemplate.key}
                                 labelSelector={(infoPageTemplate) => infoPageTemplate.label}
-                                className={styles.instructionPopup}
                             />
                             <Button
                                 name={selectedInfoPageTemplate}
@@ -752,6 +770,7 @@ function NewTutorial(props: Props) {
                                                 projectType={value.projectType}
                                                 onChange={onScenarioFormChange}
                                                 error={scenarioError?.[task.scenarioId]}
+                                                customOptionsPreview={customOptionsPreview}
                                                 geoJson={previewGeoJson}
                                                 url={tileServerAUrl}
                                                 urlB={tileServerBUrl}

manager-dashboard/app/views/NewTutorial/utils.ts

@@ -62,6 +62,12 @@ export const colorKeyToColorMap: Record<ColorKey, string> = {
     gray: '#757575',
 };
 
+export interface CustomOptionPreviewType {
+    id: string;
+    icon: IconKey,
+    iconColor: ColorKey,
+}
+
 export interface ColorOptions {
     key: ColorKey;
     label: string;