From 467b8c85f5d023788a33c89386346ac243b9e0d3 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 23 May 2023 17:48:27 +0545
Subject: [PATCH 01/72] Add card component and maintain css

---
 .../app/components/Card/index.tsx             |  43 +++++++
 .../app/components/Card/styles.css            |  25 ++++
 .../app/components/InputSection/styles.css    |   1 -
 .../app/views/NewTutorial/index.tsx           | 111 ++++++++++++------
 .../app/views/NewTutorial/styles.css          |  12 +-
 5 files changed, 151 insertions(+), 41 deletions(-)
 create mode 100644 manager-dashboard/app/components/Card/index.tsx
 create mode 100644 manager-dashboard/app/components/Card/styles.css

diff --git a/manager-dashboard/app/components/Card/index.tsx b/manager-dashboard/app/components/Card/index.tsx
new file mode 100644
index 000000000..3c13e3041
--- /dev/null
+++ b/manager-dashboard/app/components/Card/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    children?: React.ReactNode;
+    contentClassName?: string;
+    title?: React.ReactNode;
+    multiColumn?: boolean;
+}
+
+function Card(props: Props) {
+    const {
+        className,
+        children,
+        title,
+        multiColumn,
+        contentClassName,
+    } = props;
+
+    return (
+        <div
+            className={_cs(
+                styles.card,
+                multiColumn && styles.multiColumn,
+                className,
+            )}
+        >
+            {title && (
+                <div className={styles.title}>
+                    {title}
+                </div>
+            )}
+            <div className={_cs(styles.content, contentClassName)}>
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default Card;
diff --git a/manager-dashboard/app/components/Card/styles.css b/manager-dashboard/app/components/Card/styles.css
new file mode 100644
index 000000000..56aaac368
--- /dev/null
+++ b/manager-dashboard/app/components/Card/styles.css
@@ -0,0 +1,25 @@
+.card {
+    border: 0.5px;
+    background-color: var(--color-foreground);
+    padding: var(--spacing);
+
+    .title {
+        padding: var(--spacing-medium);
+        font-weight: var(--font-weight-bold);
+    }
+
+    .content {
+        padding: var(--spacing-medium);
+    }
+
+    &.multi-column {
+        .content {
+            display: flex;
+
+            >* {
+                flex-basis: 0;
+                flex-grow: 1;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/InputSection/styles.css b/manager-dashboard/app/components/InputSection/styles.css
index ee278d18f..fde96fe6f 100644
--- a/manager-dashboard/app/components/InputSection/styles.css
+++ b/manager-dashboard/app/components/InputSection/styles.css
@@ -11,7 +11,6 @@
         display: flex;
         flex-direction: column;
         border-radius: var(--radius-card);
-        background-color: var(--color-foreground);
         padding: var(--spacing-large);
         gap: var(--spacing-extra-large);
     }
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 945de082a..8606baf23 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
     _cs,
     isDefined,
@@ -30,12 +30,19 @@ import { Link } from 'react-router-dom';
 
 import UserContext from '#base/context/UserContext';
 import useMountedRef from '#hooks/useMountedRef';
+import Card from '#components/Card';
 import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SegmentInput from '#components/SegmentInput';
 import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
+import {
+    Tabs,
+    Tab,
+    TabList,
+    TabPanel,
+} from '#components/Tabs';
 import JsonFileInput from '#components/JsonFileInput';
 import TileServerInput, {
     TILE_SERVER_BING,
@@ -99,6 +106,7 @@ function NewTutorial(props: Props) {
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
+    const [activeTab, setActiveTab] = React.useState();
     const error = React.useMemo(
         () => getErrorObject(formError),
         [formError],
@@ -210,46 +218,59 @@ function NewTutorial(props: Props) {
     const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
         || value?.projectType === PROJECT_TYPE_COMPLETENESS;
 
+    // const handleGeoJsonFile = useCallback((
+    //     geoProps: PartialTutorialFormType['tutorialTasks'],
+    // ) => (
+    // ), []);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
                 <InputSection
-                    heading="Basic Tutorial Information"
+                    heading="Create New Tutorial"
                 >
-                    <SegmentInput
-                        name={'projectType' as const}
-                        onChange={setFieldValue}
-                        value={value?.projectType}
-                        label="Project Type"
-                        hint="Select the type of your project."
-                        options={projectTypeOptions}
-                        keySelector={valueSelector}
-                        labelSelector={labelSelector}
-                        error={error?.projectType}
-                        disabled={submissionPending}
-                    />
-                    <div className={styles.inputGroup}>
-                        <TextInput
-                            name={'lookFor' as const}
-                            value={value?.lookFor}
-                            onChange={setFieldValue}
-                            label="Look For"
-                            hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
-                            error={error?.lookFor}
-                            disabled={submissionPending}
-                            autoFocus
-                        />
-                        <TextInput
-                            name={'name' as const}
-                            value={value?.name}
+                    <Card
+                        title="Basic Information"
+                        contentClassName={styles.card}
+                    >
+                        <SegmentInput
+                            name={'projectType' as const}
                             onChange={setFieldValue}
-                            label="Name"
-                            hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
-                            error={error?.name}
+                            value={value?.projectType}
+                            label="Project Type"
+                            hint="Select the type of your project."
+                            options={projectTypeOptions}
+                            keySelector={valueSelector}
+                            labelSelector={labelSelector}
+                            error={error?.projectType}
                             disabled={submissionPending}
                         />
-                    </div>
-                    <div className={styles.inputGroup}>
+                        <div className={styles.inputGroup}>
+                            <TextInput
+                                name={'name' as const}
+                                value={value?.name}
+                                onChange={setFieldValue}
+                                label="Name of the Tutorial"
+                                hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
+                                error={error?.name}
+                                disabled={submissionPending}
+                            />
+                            <TextInput
+                                name={'lookFor' as const}
+                                value={value?.lookFor}
+                                onChange={setFieldValue}
+                                label="Look For"
+                                hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
+                                error={error?.lookFor}
+                                disabled={submissionPending}
+                                autoFocus
+                            />
+                        </div>
+                    </Card>
+                    <Card
+                        title="Upload GeoJSON file"
+                        contentClassName={styles.inputGroup}
+                    >
                         <JsonFileInput
                             name={'screens' as const}
                             value={value?.screens}
@@ -263,13 +284,12 @@ function NewTutorial(props: Props) {
                             name={'tutorialTasks' as const}
                             value={value?.tutorialTasks}
                             onChange={setFieldValue}
-                            label="Upload Tutorial Tasks as GeoJSON"
                             hint="It should end with .geojson or .geo.json"
                             error={error?.tutorialTasks}
                             disabled={submissionPending}
                         />
-                    </div>
-                    <div className={styles.inputGroup}>
+                    </Card>
+                    <Card contentClassName={styles.inputGroup}>
                         <FileInput
                             name={'exampleImage1' as const}
                             value={value?.exampleImage1}
@@ -292,7 +312,24 @@ function NewTutorial(props: Props) {
                             error={error?.exampleImage2}
                             disabled={submissionPending}
                         />
-                    </div>
+                    </Card>
+                    <Card
+                        title="Describe Scenarios"
+                    >
+                        <Tabs
+                            value={activeTab}
+                            onChange={setActiveTab}
+                        >
+                            <TabList>
+                                <Tab name="scenario 2">
+                                    scenario 2
+                                </Tab>
+                            </TabList>
+                            <TabPanel name="scenario 2">
+                                scenarios 2
+                            </TabPanel>
+                        </Tabs>
+                    </Card>
                 </InputSection>
                 {(value?.projectType === PROJECT_TYPE_BUILD_AREA
                     || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 6ac3932c9..11bfabd00 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -13,15 +13,21 @@
         max-width: 70rem;
         gap: var(--spacing-large);
 
+        .card {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-extra-large);
+        }
+
         .input-group {
             display: flex;
+            flex-direction: column;
             flex-wrap: wrap;
-            gap: var(--spacing-extra-large);
+            gap: var(--spacing-small);
 
             >* {
                 flex-basis: 0;
-                flex-grow: 1;
-                min-width: 20rem;
+                width: 60%
             }
         }
     }

From 3f771bcbd8731392e8efaa2997555a49ad097ec7 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 23 May 2023 17:48:27 +0545
Subject: [PATCH 02/72] Add card component and maintain css

---
 manager-dashboard/app/views/NewTutorial/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8606baf23..7792bda9a 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
     _cs,
     isDefined,
@@ -99,7 +99,10 @@ function NewTutorial(props: Props) {
         error: formError,
         validate,
         setError,
-    } = useForm(tutorialFormSchema, defaultTutorialFormValue);
+    } = useForm(
+        tutorialFormSchema,
+        { value: defaultTutorialFormValue },
+    );
 
     const [
         tutorialSubmissionStatus,
@@ -218,7 +221,7 @@ function NewTutorial(props: Props) {
     const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
         || value?.projectType === PROJECT_TYPE_COMPLETENESS;
 
-    // const handleGeoJsonFile = useCallback((
+    // const handleGeoJsonFile = React.useCallback((
     //     geoProps: PartialTutorialFormType['tutorialTasks'],
     // ) => (
     // ), []);

From 14ddbc6d765094e3b46d2d447f8ffbfcc6d029af Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 24 May 2023 18:14:44 +0545
Subject: [PATCH 03/72] Add describe scenario file

---
 .../app/views/NewTutorial/index.tsx           | 126 ++++++++++++++++--
 .../app/views/NewTutorial/styles.css          |   6 +
 .../app/views/NewTutorial/utils.ts            |  11 +-
 3 files changed, 128 insertions(+), 15 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 7792bda9a..13c03b1e0 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
     _cs,
     isDefined,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -29,6 +30,7 @@ import {
 import { Link } from 'react-router-dom';
 
 import UserContext from '#base/context/UserContext';
+import projectTypeOptions from '#base/configs/projectTypes';
 import useMountedRef from '#hooks/useMountedRef';
 import Card from '#components/Card';
 import Modal from '#components/Modal';
@@ -65,8 +67,6 @@ import {
 } from './utils';
 import styles from './styles.css';
 
-import projectTypeOptions from '#base/configs/projectTypes';
-
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
     zoomLevel: 18,
@@ -80,6 +80,24 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
     },
 };
 
+interface TutorialTask {
+    scenario: number;
+    hint: {
+        description: string;
+        icon: string;
+        title: string;
+    },
+    intructions: {
+        description: string;
+        icon: string;
+        title: string;
+    },
+    success: {
+        description: string;
+        icon: string;
+        title: string;
+    }
+}
 interface Props {
     className?: string;
 }
@@ -109,6 +127,7 @@ function NewTutorial(props: Props) {
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
+    const [tutorialTask, setTutorialTask] = React.useState<TutorialTask[]>();
     const [activeTab, setActiveTab] = React.useState();
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -221,10 +240,41 @@ function NewTutorial(props: Props) {
     const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
         || value?.projectType === PROJECT_TYPE_COMPLETENESS;
 
-    // const handleGeoJsonFile = React.useCallback((
-    //     geoProps: PartialTutorialFormType['tutorialTasks'],
-    // ) => (
-    // ), []);
+    const handleGeoJsonFile = React.useCallback((
+        geoProps: PartialTutorialFormType['tutorialTasks'],
+    ) => {
+        setFieldValue('tutorialTasks', geoProps);
+        const tutorialTaskArray = geoProps?.features.map((geo) => (
+            {
+                scenario: geo.properties.screen,
+                hint: {
+                    description: undefined,
+                    icon: undefined,
+                    title: undefined,
+                },
+                intructions: {
+                    description: undefined,
+                    icon: undefined,
+                    title: undefined,
+                },
+                success: {
+                    description: undefined,
+                    icon: undefined,
+                    title: undefined,
+                },
+            }
+        ));
+
+        const reduced = tutorialTaskArray?.reduce((acc, currItem) => {
+            const findValue = acc.find((item) => item.scenario === currItem.scenario);
+            if (isNotDefined(findValue)) {
+                acc.push(currItem);
+            }
+            return acc;
+        }, []).sort((a, b) => a.scenario - b.scenario);
+
+        setTutorialTask(reduced);
+    }, [setFieldValue]);
 
     return (
         <div className={_cs(styles.newTutorial, className)}>
@@ -286,7 +336,7 @@ function NewTutorial(props: Props) {
                         <GeoJsonFileInput
                             name={'tutorialTasks' as const}
                             value={value?.tutorialTasks}
-                            onChange={setFieldValue}
+                            onChange={handleGeoJsonFile}
                             hint="It should end with .geojson or .geo.json"
                             error={error?.tutorialTasks}
                             disabled={submissionPending}
@@ -324,13 +374,63 @@ function NewTutorial(props: Props) {
                             onChange={setActiveTab}
                         >
                             <TabList>
-                                <Tab name="scenario 2">
-                                    scenario 2
-                                </Tab>
+                                {tutorialTask?.map((task) => (
+                                    <Tab
+                                        key={task.scenario}
+                                        name={`Scenario ${task.scenario}`}
+                                    >
+                                        {`Scenario ${task.scenario}`}
+                                    </Tab>
+                                ))}
                             </TabList>
-                            <TabPanel name="scenario 2">
-                                scenarios 2
-                            </TabPanel>
+                            {tutorialTask?.map((task) => (
+                                <TabPanel
+                                    key={task.scenario}
+                                    name={`Scenario ${task.scenario}`}
+                                >
+                                    <div className={styles.scenario}>
+                                        <div>
+                                            Instructions
+                                            <TextInput
+                                                name={`${task.scenario} instruction-title`}
+                                                value=""
+                                                label="Title"
+                                            />
+                                            <TextInput
+                                                name={`${task.scenario} instruction-description`}
+                                                value=""
+                                                label="Description"
+                                            />
+                                        </div>
+                                        <div>
+                                            Hint
+                                            <TextInput
+                                                name={`${task.scenario} hint-title`}
+                                                value=""
+                                                label="Title"
+                                            />
+                                            <TextInput
+                                                name={`${task.scenario} hint-description`}
+                                                value=""
+                                                label="Description"
+                                            />
+                                        </div>
+                                        <div>
+                                            Success
+                                            <TextInput
+                                                name={`${task.scenario} success-title`}
+                                                value=""
+                                                label="Title"
+                                            />
+                                            <TextInput
+                                                name={`${task.scenario} success-description`}
+                                                value=""
+                                                label="Description"
+                                            />
+                                        </div>
+                                    </div>
+                                </TabPanel>
+                            ))}
                         </Tabs>
                     </Card>
                 </InputSection>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 11bfabd00..9e203fd58 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -19,6 +19,12 @@
             gap: var(--spacing-extra-large);
         }
 
+        .scenario {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-large);
+        }
+
         .input-group {
             display: flex;
             flex-direction: column;
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 4c94b89d2..dd9dd48c0 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -27,11 +27,18 @@ export interface TutorialFormType {
     name: string;
     tileServer: TileServer,
     screens?: GeoJSON.GeoJSON ; // FIXME: this is not FeatureCollection
-    tutorialTasks?: GeoJSON.GeoJSON;
+    tutorialTasks?: GeoJSON.FeatureCollection<GeoJSON.Geometry, {
+        groupId: string;
+        reference: number;
+        screen: number;
+        taskId: string;
+        tile_x: number;
+        tile_y: number;
+        tile_z: number;
+    }>;
     exampleImage1: File;
     exampleImage2: File;
     projectType: ProjectType;
-
     tileServerB?: TileServer,
     zoomLevel?: number;
 }

From d96894da17d19c547b50b1e163b2c7e4cb682cb6 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 25 May 2023 17:34:44 +0545
Subject: [PATCH 04/72] Add icons

---
 manager-dashboard/app/Base/styles.css         |   8 +
 .../app/components/GeoJsonFileInput/index.tsx |   5 +-
 .../app/components/Heading/index.tsx          |  35 ++
 .../app/components/Heading/styles.module.css  |  33 ++
 .../app/components/Tabs/index.tsx             |  24 +-
 .../app/views/NewTutorial/index.tsx           | 297 +++++++---
 .../app/views/NewTutorial/styles.css          |  11 +
 .../app/views/NewTutorial/utils.ts            |  84 ++-
 manager-dashboard/package.json                |   2 +-
 manager-dashboard/yarn.lock                   | 509 ++----------------
 node_modules/.yarn-integrity                  |  10 +
 yarn.lock                                     |   4 +
 12 files changed, 430 insertions(+), 592 deletions(-)
 create mode 100644 manager-dashboard/app/components/Heading/index.tsx
 create mode 100644 manager-dashboard/app/components/Heading/styles.module.css
 create mode 100644 node_modules/.yarn-integrity
 create mode 100644 yarn.lock

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index c599ea183..3ffb25fea 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -83,6 +83,7 @@ p {
     --font-size-ultra-large: 4rem;
 
     --font-weight-medium: 400;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
 
     --opacity-disabled-element: 0.5;
@@ -101,6 +102,13 @@ p {
     --radius-card-border: 0.25rem;
     --radius-badge-border: 1rem;
 
+    --line-height-none: 1;
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
 
     --shadow-card: 0 2px 4px -2px var(--color-shadow);
 
diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index acc981f40..60f8939fd 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -51,7 +51,10 @@ const DEFAULT_MAX_FILE_SIZE = ONE_MB;
 
 interface Props<N> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accept'> {
     maxFileSize?: number;
-    value: GeoJSON.GeoJSON | undefined | null;
+    value: GeoJSON.FeatureCollection<
+        GeoJSON.Geometry, Record<string,
+        string | number>
+    > | undefined | null;
     onChange: (newValue: GeoJSON.GeoJSON | undefined, name: N) => void;
 }
 
diff --git a/manager-dashboard/app/components/Heading/index.tsx b/manager-dashboard/app/components/Heading/index.tsx
new file mode 100644
index 000000000..2ed4b2c4e
--- /dev/null
+++ b/manager-dashboard/app/components/Heading/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export interface Props {
+    className?: string;
+    level?: 1 | 2 | 3 | 4 | 5;
+    children: React.ReactNode;
+}
+
+function Heading(props: Props) {
+    const {
+        className,
+        level = 3,
+        children,
+    } = props;
+
+    const levelStyle = styles[`level${level}`];
+    const HeadingTag = `h${level}` as React.ElementType;
+
+    return (
+        <HeadingTag
+            className={_cs(
+                styles.heading,
+                levelStyle,
+                className,
+            )}
+        >
+            {children}
+        </HeadingTag>
+    );
+}
+
+export default Heading;
diff --git a/manager-dashboard/app/components/Heading/styles.module.css b/manager-dashboard/app/components/Heading/styles.module.css
new file mode 100644
index 000000000..81a4bf68b
--- /dev/null
+++ b/manager-dashboard/app/components/Heading/styles.module.css
@@ -0,0 +1,33 @@
+.heading {
+    --font-size: var(--font-size-extra-large);
+    --line-height: var(--line-height-snug);
+    display: flex;
+    margin: 0;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-semibold);
+
+    &.level1 {
+        --font-size: var(--font-size-super-large);
+        --line-height: var(--line-height-none);
+    }
+
+    &.level2 {
+        --font-size: var(--font-size-extra-large);
+        --line-height: var(--line-height-tight);
+    }
+
+    &.level3 {
+        --font-size: var(--font-size-large);
+        --line-height: var(--line-height-snug);
+    }
+
+    &.level4 {
+        --font-size: var(--font-size-medium);
+        --line-height: var(--line-height-normal);
+    }
+
+    &.level5 {
+        --font-size: var(--font-size-small);
+        --line-height: var(--line-height-normal);
+    }
+}
diff --git a/manager-dashboard/app/components/Tabs/index.tsx b/manager-dashboard/app/components/Tabs/index.tsx
index 7d31b31e1..e7bcadf4f 100644
--- a/manager-dashboard/app/components/Tabs/index.tsx
+++ b/manager-dashboard/app/components/Tabs/index.tsx
@@ -6,13 +6,13 @@ import styles from './styles.css';
 
 type TabKey = string;
 
-export interface TabContextProps<T> {
-    activeTab: T;
-    setActiveTab: (key: T) => void;
+export interface TabContextProps {
+    activeTab: TabKey | undefined;
+    setActiveTab: (key: TabKey | undefined) => void;
 }
 
-const TabContext = React.createContext<TabContextProps<unknown>>({
-    activeTab: undefined,
+const TabContext = React.createContext<TabContextProps>({
+    activeTab: '',
     setActiveTab: () => {
         // eslint-disable-next-line no-console
         console.warn('setActiveTab called before it was initialized');
@@ -23,7 +23,7 @@ export interface TabProps<T> extends Omit<RawButtonProps<T>, 'onClick'>{
     name: T;
 }
 
-export function Tab<T>(props: TabProps<T>) {
+export function Tab<T extends TabKey>(props: TabProps<T>) {
     const {
         activeTab,
         setActiveTab,
@@ -102,13 +102,13 @@ export function TabPanel(props: TabPanelProps) {
     );
 }
 
-export interface Props<T> {
+export interface Props {
     children: React.ReactNode;
-    value: T;
-    onChange: (key: T) => void;
+    value: TabKey;
+    onChange: (key: TabKey) => void;
 }
 
-export function Tabs<T>(props: Props<T>) {
+export function Tabs(props: Props) {
     const {
         children,
         value,
@@ -118,8 +118,8 @@ export function Tabs<T>(props: Props<T>) {
     const contextValue = React.useMemo(() => ({
         // Note: following cast is required since we do not have any other method
         // to provide template in the context type
-        activeTab: value as unknown as T,
-        setActiveTab: onChange as unknown as (key: T) => void,
+        activeTab: value,
+        setActiveTab: onChange as (key: TabKey | undefined) => void,
     }), [value, onChange]);
 
     return (
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 13c03b1e0..146d9770c 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 import {
     _cs,
     isDefined,
-    isNotDefined,
+    unique,
 } from '@togglecorp/fujs';
 import {
     useForm,
     getErrorObject,
     createSubmitHandler,
     analyzeErrors,
+    useFormArray,
+    useFormObject,
+    PartialForm,
+    SetValueArg,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -39,6 +43,7 @@ import NumberInput from '#components/NumberInput';
 import SegmentInput from '#components/SegmentInput';
 import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
+import Heading from '#components/Heading';
 import {
     Tabs,
     Tab,
@@ -66,6 +71,7 @@ import {
     PartialTutorialFormType,
 } from './utils';
 import styles from './styles.css';
+import SelectInput from '#components/SelectInput';
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
@@ -83,25 +89,184 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
 interface TutorialTask {
     scenario: number;
     hint: {
-        description: string;
-        icon: string;
-        title: string;
+        description?: string;
+        icon?: string;
+        title?: string;
     },
     intructions: {
-        description: string;
-        icon: string;
-        title: string;
+        description?: string;
+        icon?: string;
+        title?: string;
     },
     success: {
-        description: string;
-        icon: string;
-        title: string;
+        description?: string;
+        icon?: string;
+        title?: string;
     }
 }
+
+interface IconOptions {
+    key: string;
+    label: string;
+}
 interface Props {
     className?: string;
 }
 
+type ScenarioType = NonNullable<PartialTutorialFormType['screens']>
+
+const iconOptions: IconOptions[] = [
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+    },
+    {
+        key: 'tap-1',
+        label: 'Tap 1',
+    },
+    {
+        key: 'tap-2',
+        label: 'Tap 2',
+    },
+    {
+        key: 'tap-3',
+        label: 'Tap 3',
+    },
+    {
+        key: 'check',
+        label: 'Check',
+    },
+];
+
+const defaultScenarioTabsValue: PartialForm<ScenarioType> = {
+    scenario: '',
+    hint: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+    instruction: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+    success: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+
+};
+interface ScenarioTabsProps {
+    value: PartialForm<ScenarioType>[number],
+    onChange: (value: SetValueArg<PartialForm<ScenarioType>>, index: number) => void;
+    index: number,
+ }
+
+function ScenarioTabs(scenarioProps: ScenarioTabsProps) {
+    const {
+        value,
+        onChange,
+        index,
+    } = scenarioProps;
+
+    const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
+
+    return (
+        <TabPanel
+            key={value.scenario}
+            name={`Scenario ${value.scenario}`}
+        >
+            <div className={styles.scenario}>
+                <Heading level={4}>
+                    Instructions
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.instruction?.title}
+                            label="Title"
+                            onChange={onFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.instruction?.description}
+                            label="Description"
+                            onChange={onFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.instruction?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onFieldChange}
+                    />
+                </div>
+                <Heading level={4}>
+                    Hint
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.hint?.title}
+                            label="Title"
+                            onChange={onFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.hint?.description}
+                            label="Description"
+                            onChange={onFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.hint?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onFieldChange}
+                    />
+                </div>
+                <Heading level={4}>
+                    Success
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.success?.title}
+                            label="Title"
+                            onChange={onFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.success?.description}
+                            label="Description"
+                            onChange={onFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.success?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onFieldChange}
+                    />
+                </div>
+            </div>
+        </TabPanel>
+    );
+}
+
 function NewTutorial(props: Props) {
     const {
         className,
@@ -117,18 +282,16 @@ function NewTutorial(props: Props) {
         error: formError,
         validate,
         setError,
-    } = useForm(
-        tutorialFormSchema,
-        { value: defaultTutorialFormValue },
-    );
+    } = useForm(tutorialFormSchema, {
+        value: defaultTutorialFormValue,
+    });
 
     const [
         tutorialSubmissionStatus,
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
-    const [tutorialTask, setTutorialTask] = React.useState<TutorialTask[]>();
-    const [activeTab, setActiveTab] = React.useState();
+    const [activeTab, setActiveTab] = React.useState('');
     const error = React.useMemo(
         () => getErrorObject(formError),
         [formError],
@@ -226,6 +389,10 @@ function NewTutorial(props: Props) {
         [validate, setError, handleFormSubmission],
     );
 
+    const {
+        setValue: onScenarioFormChange,
+    } = useFormArray('screens', setFieldValue);
+
     const hasErrors = React.useMemo(
         () => analyzeErrors(error),
         [error],
@@ -244,7 +411,9 @@ function NewTutorial(props: Props) {
         geoProps: PartialTutorialFormType['tutorialTasks'],
     ) => {
         setFieldValue('tutorialTasks', geoProps);
-        const tutorialTaskArray = geoProps?.features.map((geo) => (
+        const uniqueArray = unique(geoProps.features, ((geo) => geo?.properties.screen));
+        const sorted = uniqueArray.sort((a, b) => a.properties?.screen - b.properties.screen);
+        const tutorialTaskArray = sorted.map((geo) => (
             {
                 scenario: geo.properties.screen,
                 hint: {
@@ -264,18 +433,11 @@ function NewTutorial(props: Props) {
                 },
             }
         ));
-
-        const reduced = tutorialTaskArray?.reduce((acc, currItem) => {
-            const findValue = acc.find((item) => item.scenario === currItem.scenario);
-            if (isNotDefined(findValue)) {
-                acc.push(currItem);
-            }
-            return acc;
-        }, []).sort((a, b) => a.scenario - b.scenario);
-
-        setTutorialTask(reduced);
+        setFieldValue('screens', tutorialTaskArray);
     }, [setFieldValue]);
 
+    console.log(value.tutorialTasks);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -373,64 +535,29 @@ function NewTutorial(props: Props) {
                             value={activeTab}
                             onChange={setActiveTab}
                         >
-                            <TabList>
-                                {tutorialTask?.map((task) => (
-                                    <Tab
-                                        key={task.scenario}
-                                        name={`Scenario ${task.scenario}`}
-                                    >
-                                        {`Scenario ${task.scenario}`}
-                                    </Tab>
-                                ))}
-                            </TabList>
-                            {tutorialTask?.map((task) => (
-                                <TabPanel
-                                    key={task.scenario}
-                                    name={`Scenario ${task.scenario}`}
-                                >
-                                    <div className={styles.scenario}>
-                                        <div>
-                                            Instructions
-                                            <TextInput
-                                                name={`${task.scenario} instruction-title`}
-                                                value=""
-                                                label="Title"
-                                            />
-                                            <TextInput
-                                                name={`${task.scenario} instruction-description`}
-                                                value=""
-                                                label="Description"
-                                            />
-                                        </div>
-                                        <div>
-                                            Hint
-                                            <TextInput
-                                                name={`${task.scenario} hint-title`}
-                                                value=""
-                                                label="Title"
-                                            />
-                                            <TextInput
-                                                name={`${task.scenario} hint-description`}
-                                                value=""
-                                                label="Description"
-                                            />
-                                        </div>
-                                        <div>
-                                            Success
-                                            <TextInput
-                                                name={`${task.scenario} success-title`}
-                                                value=""
-                                                label="Title"
-                                            />
-                                            <TextInput
-                                                name={`${task.scenario} success-description`}
-                                                value=""
-                                                label="Description"
-                                            />
-                                        </div>
-                                    </div>
-                                </TabPanel>
-                            ))}
+                            {value.screens?.length ? (
+                                <>
+                                    <TabList>
+                                        {value.screens?.map((task) => (
+                                            <Tab
+                                                key={task.scenario}
+                                                name={`Scenario ${task.scenario}`}
+                                            >
+                                                {`Scenario ${task.scenario}`}
+                                            </Tab>
+                                        ))}
+                                    </TabList>
+                                    {value.screens?.map((task, index) => (
+                                        <ScenarioTabs
+                                            index={index}
+                                            value={task}
+                                            onChange={onScenarioFormChange}
+                                        />
+                                    ))}
+                                </>
+                            ) : (
+                                <div>No Scenarios</div>
+                            )}
                         </Tabs>
                     </Card>
                 </InputSection>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 9e203fd58..367c3c177 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -23,6 +23,17 @@
             display: flex;
             flex-direction: column;
             gap: var(--spacing-large);
+
+            .scenario-form {
+                display: flex;
+                gap: var(--spacing-medium);
+
+                .scenario-form-content {
+                    display: flex;
+                    flex-basis: 80%;
+                    flex-direction: column;
+                }
+            }
         }
 
         .input-group {
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index dd9dd48c0..ff64c629f 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -1,12 +1,11 @@
 import {
     ObjectSchema,
     PartialForm,
-    requiredCondition,
     requiredStringCondition,
-    forceNullType,
     greaterThanOrEqualToCondition,
     lessThanOrEqualToCondition,
     integerCondition,
+    nullValue,
 } from '@togglecorp/toggle-form';
 import {
     TileServer,
@@ -25,15 +24,35 @@ import {
 export interface TutorialFormType {
     lookFor: string;
     name: string;
-    tileServer: TileServer,
-    screens?: GeoJSON.GeoJSON ; // FIXME: this is not FeatureCollection
+    tileServer: TileServer;
+    screens?: {
+        scenario: string;
+        hint: {
+            description: string;
+            icon: string;
+            title: string;
+        };
+        instruction: {
+            description: string;
+            icon: string;
+            title: string;
+        };
+        success: {
+            description: string;
+            icon: string;
+            title: string;
+        };
+    }[];
     tutorialTasks?: GeoJSON.FeatureCollection<GeoJSON.Geometry, {
         groupId: string;
         reference: number;
         screen: number;
         taskId: string;
+        // eslint-disable-next-line
         tile_x: number;
+        // eslint-disable-next-line
         tile_y: number;
+        // eslint-disable-next-line
         tile_z: number;
     }>;
     exampleImage1: File;
@@ -58,31 +77,44 @@ type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
         const baseSchema: TutorialFormSchemaFields = {
-            projectType: [requiredCondition],
-            lookFor: [requiredStringCondition, getNoMoreThanNCharacterCondition(25)],
-            name: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
+            projectType: {
+                required: true,
+            },
+            lookFor: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(25)],
+            },
+            name: {
+
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(1000)],
+            },
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            screens: [requiredCondition],
+            screens: { required: true },
             // FIXME: add validation for tutorialTasks (geojson)
-            tutorialTasks: [requiredCondition],
-            exampleImage1: [requiredCondition],
-            exampleImage2: [requiredCondition],
+            tutorialTasks: { required: true },
+            exampleImage1: { required: true },
+            exampleImage2: { required: true },
 
-            tileServerB: [forceNullType],
-            zoomLevel: [forceNullType],
+            tileServerB: { forceValue: nullValue },
+            zoomLevel: { forceValue: nullValue },
         };
 
         if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
             return {
                 ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
+                zoomLevel: {
+                    required: true,
+                    validations: [
+                        greaterThanOrEqualToCondition(14),
+                        lessThanOrEqualToCondition(22),
+                        integerCondition,
+                    ],
+                },
             };
         }
 
@@ -90,12 +122,14 @@ export const tutorialFormSchema: TutorialFormSchema = {
             || value?.projectType === PROJECT_TYPE_COMPLETENESS) {
             return {
                 ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
+                zoomLevel: {
+                    required: true,
+                    validations: [
+                        greaterThanOrEqualToCondition(14),
+                        lessThanOrEqualToCondition(22),
+                        integerCondition,
+                    ],
+                },
                 tileServerB: {
                     fields: tileServerFieldsSchema,
                 },
diff --git a/manager-dashboard/package.json b/manager-dashboard/package.json
index dd433e347..f4f758cfc 100644
--- a/manager-dashboard/package.json
+++ b/manager-dashboard/package.json
@@ -39,7 +39,7 @@
         "@sentry/react": "^6.9.0",
         "@sentry/tracing": "^6.9.0",
         "@togglecorp/fujs": "^1.9.2",
-        "@togglecorp/toggle-form": "^1.2.1",
+        "@togglecorp/toggle-form": "^2.0.2",
         "@turf/area": "^6.5.0",
         "@turf/invariant": "^6.5.0",
         "apollo-link": "^1.2.14",
diff --git a/manager-dashboard/yarn.lock b/manager-dashboard/yarn.lock
index f55aae387..11617e234 100644
--- a/manager-dashboard/yarn.lock
+++ b/manager-dashboard/yarn.lock
@@ -292,7 +292,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
@@ -1224,7 +1224,7 @@
     "@babel/helper-validator-option" "^7.14.5"
     "@babel/plugin-transform-typescript" "^7.16.1"
 
-"@babel/runtime-corejs3@^7.10.2", "@babel/runtime-corejs3@^7.11.2":
+"@babel/runtime-corejs3@^7.10.2":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.16.5.tgz#9057d879720c136193f0440bc400088212a74894"
   integrity sha512-F1pMwvTiUNSAM8mc45kccMQxj31x3y3P+tA/X8hKNWp3/hUsxdGxZ3D3H8JIkxtfA8qGkaBTKvcmvStaYseAFw==
@@ -1232,13 +1232,20 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
   integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.19.0":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
+  integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1344,108 +1351,6 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f"
   integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==
 
-"@emotion/cache@^10.0.27":
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
-  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
-  dependencies:
-    "@emotion/sheet" "0.9.4"
-    "@emotion/stylis" "0.8.5"
-    "@emotion/utils" "0.11.3"
-    "@emotion/weak-memoize" "0.2.5"
-
-"@emotion/core@^10.1.1":
-  version "10.3.1"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.3.1.tgz#4021b6d8b33b3304d48b0bb478485e7d7421c69d"
-  integrity sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/css@^10.0.27":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
-  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
-  dependencies:
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
-  version "0.11.16"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
-  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
-  dependencies:
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/unitless" "0.7.5"
-    "@emotion/utils" "0.11.3"
-    csstype "^2.5.7"
-
-"@emotion/sheet@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
-  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
-
-"@emotion/styled-base@^10.3.0":
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.3.0.tgz#9aa2c946100f78b47316e4bc6048321afa6d4e36"
-  integrity sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/is-prop-valid" "0.8.8"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/styled@^10.0.27":
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.3.0.tgz#8ee959bf75730789abb5f67f7c3ded0c30aec876"
-  integrity sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==
-  dependencies:
-    "@emotion/styled-base" "^10.3.0"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/stylis@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
-  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
-
-"@emotion/weak-memoize@0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
@@ -3006,180 +2911,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storybook/addons@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.4.9.tgz#43b5dabf6781d863fcec0a0b293c236b4d5d4433"
-  integrity sha512-y+oiN2zd+pbRWwkf6aQj4tPDFn+rQkrv7fiVoMxsYub+kKyZ3CNOuTSJH+A1A+eBL6DmzocChUyO6jvZFuh6Dg==
-  dependencies:
-    "@storybook/api" "6.4.9"
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/router" "6.4.9"
-    "@storybook/theming" "6.4.9"
-    "@types/webpack-env" "^1.16.0"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    regenerator-runtime "^0.13.7"
-
-"@storybook/api@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.4.9.tgz#6187d08658629580f0a583f2069d55b34964b34a"
-  integrity sha512-U+YKcDQg8xal9sE5eSMXB9vcqk8fD1pSyewyAjjbsW5hV0B3L3i4u7z/EAD9Ujbnor+Cvxq+XGvp+Qnc5Gd40A==
-  dependencies:
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/router" "6.4.9"
-    "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.4.9"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    regenerator-runtime "^0.13.7"
-    store2 "^2.12.0"
-    telejson "^5.3.2"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/channel-postmessage@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.4.9.tgz#b20b7d66f0f2a8ba39fe9002f3a3dc16d9e1f681"
-  integrity sha512-0Oif4e6/oORv4oc2tHhIRts9faE/ID9BETn4uqIUWSl2CX1wYpKYDm04rEg3M6WvSzsi+6fzoSFvkr9xC5Ns2w==
-  dependencies:
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    qs "^6.10.0"
-    telejson "^5.3.2"
-
-"@storybook/channels@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.4.9.tgz#132c574d3fb2e6aaa9c52312c592794699b9d8ec"
-  integrity sha512-DNW1qDg+1WFS2aMdGh658WJXh8xBXliO5KAn0786DKcWCsKjfsPPQg/QCHczHK0+s5SZyzQT5aOBb4kTRHELQA==
-  dependencies:
-    core-js "^3.8.2"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/client-api@^6.0.21":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.4.9.tgz#e3d90c66356d6f53f8ceb4f31753f670f704fde0"
-  integrity sha512-1IljlTr+ea2pIr6oiPhygORtccOdEb7SqaVzWDfLCHOhUnJ2Ka5UY9ADqDa35jvSSdRdynfk9Yl5/msY0yY1yg==
-  dependencies:
-    "@storybook/addons" "6.4.9"
-    "@storybook/channel-postmessage" "6.4.9"
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/store" "6.4.9"
-    "@types/qs" "^6.9.5"
-    "@types/webpack-env" "^1.16.0"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-    regenerator-runtime "^0.13.7"
-    store2 "^2.12.0"
-    synchronous-promise "^2.0.15"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/client-logger@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.4.9.tgz#ef6af30fac861fea69c8917120ed06b4c2f0b54e"
-  integrity sha512-BVagmmHcuKDZ/XROADfN3tiolaDW2qG0iLmDhyV1gONnbGE6X5Qm19Jt2VYu3LvjKF1zMPSWm4mz7HtgdwKbuQ==
-  dependencies:
-    core-js "^3.8.2"
-    global "^4.4.0"
-
-"@storybook/core-events@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.9.tgz#7febedb8d263fbd6e4a69badbfcdce0101e6f782"
-  integrity sha512-YhU2zJr6wzvh5naYYuy/0UKNJ/SaXu73sIr0Tx60ur3bL08XkRg7eZ9vBhNBTlAa35oZqI0iiGCh0ljiX7yEVQ==
-  dependencies:
-    core-js "^3.8.2"
-
-"@storybook/csf@0.0.2--canary.87bc651.0":
-  version "0.0.2--canary.87bc651.0"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz#c7b99b3a344117ef67b10137b6477a3d2750cf44"
-  integrity sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==
-  dependencies:
-    lodash "^4.17.15"
-
-"@storybook/router@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.4.9.tgz#7cc3f85494f4e14d38925e2802145df69a071201"
-  integrity sha512-GT2KtVHo/mBjxDBFB5ZtVJVf8vC+3p5kRlQC4jao68caVp7H24ikPOkcY54VnQwwe4A1aXpGbJXUyTisEPFlhQ==
-  dependencies:
-    "@storybook/client-logger" "6.4.9"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    history "5.0.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-    react-router "^6.0.0"
-    react-router-dom "^6.0.0"
-    ts-dedent "^2.0.0"
-
-"@storybook/semver@^7.3.2":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
-  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
-  dependencies:
-    core-js "^3.6.5"
-    find-up "^4.1.0"
-
-"@storybook/store@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.4.9.tgz#613c6f13271276837c6a603a16199d2abf90153e"
-  integrity sha512-H30KfiM2XyGMJcLaOepCEUsU7S3C/f7t46s6Nhw0lc5w/6HTQc2jGV3GgG3lUAUAzEQoxmmu61w3N2a6eyRzmg==
-  dependencies:
-    "@storybook/addons" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    regenerator-runtime "^0.13.7"
-    slash "^3.0.0"
-    stable "^0.1.8"
-    synchronous-promise "^2.0.15"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/theming@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.9.tgz#8ece44007500b9a592e71eca693fbeac90803b0d"
-  integrity sha512-Do6GH6nKjxfnBg6djcIYAjss5FW9SRKASKxLYxX2RyWJBpz0m/8GfcGcRyORy0yFTk6jByA3Hs+WFH3GnEbWkw==
-  dependencies:
-    "@emotion/core" "^10.1.1"
-    "@emotion/is-prop-valid" "^0.8.6"
-    "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.4.9"
-    core-js "^3.8.2"
-    deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.27"
-    global "^4.4.0"
-    memoizerific "^1.11.3"
-    polished "^4.0.5"
-    resolve-from "^5.0.0"
-    ts-dedent "^2.0.0"
-
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.2"
   resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz#7e5a84ad181f4234a2480803422a47b8749af3d2"
@@ -3212,21 +2943,27 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@togglecorp/fujs@^1.9.2", "@togglecorp/fujs@^1.9.2-beta.0":
+"@togglecorp/fujs@^1.9.2":
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/@togglecorp/fujs/-/fujs-1.9.2.tgz#72fad13bd21eb04ecd078b50baaa68e2badbb248"
   integrity sha512-dH0mmqtty32bmQ18MEFHf+f2NwYsIDjn6A4N0NO5q9LyYnNnpnc+7tgeDan/fGXUXD7pXIBc400baGffaVUBaw==
   dependencies:
     "@babel/runtime" "^7.7.7"
 
-"@togglecorp/toggle-form@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-1.2.1.tgz#43145c3e61bf910916edb73fd735eb2dd5cdbef6"
-  integrity sha512-YzjbiC2+E6aZOb2T57bkhcTG7Iq03dn53Yw/Ve2k/rBY6BNLLrFJaePbfAXe5on7rO+57/RVkqpO46FTFAjfRw==
+"@togglecorp/fujs@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@togglecorp/fujs/-/fujs-2.0.0.tgz#b1834326a173e568a226d956271b1b532b5f1f30"
+  integrity sha512-Fx5SF9kusbf35uT2WYlI6gdqqSL/e3JN4urAyB2O+jPz1VkG2I85VRqFxGjrg4m/ZZH+HRyGgLhSDn2V8LNdjA==
   dependencies:
-    "@babel/runtime-corejs3" "^7.11.2"
-    "@storybook/client-api" "^6.0.21"
-    "@togglecorp/fujs" "^1.9.2-beta.0"
+    "@babel/runtime" "^7.19.0"
+
+"@togglecorp/toggle-form@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-2.0.2.tgz#c347b0e756479bcf0b478a4dea763b0c35644a48"
+  integrity sha512-Q14PsF0KL0i0NBrPPCJ38zWFtBih2FQvMmSJqVDbkYCdwIIE/cmNKwGh/bayTsEHPlCbIGkoEvx1Ak9hXEL2Cg==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@togglecorp/fujs" "^2.0.0"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -3383,11 +3120,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/is-function@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022"
-  integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -3501,11 +3233,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/qs@^6.9.5":
-  version "6.9.7"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
-  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
-
 "@types/react-dom@^17.0.9":
   version "17.0.11"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
@@ -3574,11 +3301,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/webpack-env@^1.16.0":
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.3.tgz#b776327a73e561b71e7881d0cd6d34a1424db86a"
-  integrity sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==
-
 "@types/websocket@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.2.tgz#d2855c6a312b7da73ed16ba6781815bf30c6187a"
@@ -4376,22 +4098,6 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.27:
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
-  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/serialize" "^0.11.16"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-
 babel-plugin-graphql-tag@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-graphql-tag/-/babel-plugin-graphql-tag-3.3.0.tgz#77d8ce04fb8f2ca56bce9af0ca7d5ad2b91f53bc"
@@ -4423,15 +4129,6 @@ babel-plugin-jest-hoist@^27.5.1:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.0.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
-
 babel-plugin-module-resolver@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
@@ -4482,11 +4179,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   version "7.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@@ -5270,7 +4962,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -5305,7 +4997,7 @@ core-js-pure@^3.19.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.1.tgz#f7a2c62f98de83e4da8fca7b78846d3a2f542145"
   integrity sha512-yeNNr3L9cEBwNy6vhhIJ0nko7fE7uFO6PgawcacGt2VWep4WqQx0RiqlkgSP7kqUMC1IKdfO9qPeWXcUheHLVQ==
 
-core-js@3, core-js@^3.6.5, core-js@^3.8.2:
+core-js@3:
   version "3.20.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.1.tgz#eb1598047b7813572f1dc24b7c6a95528c99eef3"
   integrity sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==
@@ -5338,17 +5030,6 @@ cosmiconfig@7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
 cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
@@ -5568,11 +5249,6 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.7:
-  version "2.6.19"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
-  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@@ -5700,11 +5376,6 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deep-object-diff@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
-  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6021,15 +5692,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion-theming@^10.0.27:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.3.0.tgz#7f84d7099581d7ffe808aab5cd870e30843db72a"
-  integrity sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/weak-memoize" "0.2.5"
-    hoist-non-react-statics "^3.3.0"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6807,11 +6469,6 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -7104,7 +6761,7 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.4.0, global@~4.4.0:
+global@~4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -7345,13 +7002,6 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-history@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
-  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -7364,14 +7014,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-history@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
-  integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7604,7 +7247,7 @@ import-cwd@^3.0.0:
   dependencies:
     import-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -7928,7 +7571,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-function@^1.0.1, is-function@^1.0.2:
+is-function@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
   integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
@@ -8068,7 +7711,7 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.4:
+is-regex@^1.0.4, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -8190,11 +7833,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isobject@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
-  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
-
 isomorphic-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
@@ -9218,7 +8856,7 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
+lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9341,11 +8979,6 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-map-or-similar@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
-  integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
-
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -9396,13 +9029,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoizerific@^1.11.3:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
-  integrity sha1-fIekZGREwy11Q4VwkF8tvRsagFo=
-  dependencies:
-    map-or-similar "^1.5.0"
-
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -10388,13 +10014,6 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-polished@^4.0.5:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
-  integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==
-  dependencies:
-    "@babel/runtime" "^7.14.0"
-
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -11112,13 +10731,6 @@ qs@6.9.6:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
   integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
 
-qs@^6.10.0:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.2.tgz#c1431bea37fc5b24c5bdbafa20f16bdf2a4b9ffe"
-  integrity sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw==
-  dependencies:
-    side-channel "^1.0.4"
-
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
@@ -11218,14 +10830,6 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-dom@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
-  integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
-  dependencies:
-    history "^5.2.0"
-    react-router "6.2.1"
-
 react-router@5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
@@ -11242,13 +10846,6 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@6.2.1, react-router@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
-  integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
-  dependencies:
-    history "^5.2.0"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -11341,7 +10938,12 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
@@ -11582,7 +11184,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -12104,7 +11706,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -12234,11 +11836,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-store2@^2.12.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022"
-  integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==
-
 string-env-interpolation@1.0.1, string-env-interpolation@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz#ad4397ae4ac53fe6c91d1402ad6f6a52862c7152"
@@ -12623,11 +12220,6 @@ sync-fetch@0.3.0:
     buffer "^5.7.0"
     node-fetch "^2.6.1"
 
-synchronous-promise@^2.0.15:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
-  integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
-
 table@^6.0.9, table@^6.6.0:
   version "6.7.5"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.5.tgz#f04478c351ef3d8c7904f0e8be90a1b62417d238"
@@ -12644,20 +12236,6 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-telejson@^5.3.2:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/telejson/-/telejson-5.3.3.tgz#fa8ca84543e336576d8734123876a9f02bf41d2e"
-  integrity sha512-PjqkJZpzEggA9TBpVtJi1LVptP7tYtXB6rEubwlHap76AMjzvOdKX41CxyaW7ahhzDU1aftXnMCx5kAPDZTQBA==
-  dependencies:
-    "@types/is-function" "^1.0.0"
-    global "^4.4.0"
-    is-function "^1.0.2"
-    is-regex "^1.1.2"
-    is-symbol "^1.0.3"
-    isobject "^4.0.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@@ -12871,11 +12449,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-dedent@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
-  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
-
 ts-invariant@^0.3.2:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.3.3.tgz#b5742b1885ecf9e29c31a750307480f045ec0b16"
@@ -13941,7 +13514,7 @@ yaml-ast-parser@^0.0.43:
   resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
   integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 000000000..60ee24b8d
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,10 @@
+{
+  "systemParams": "linux-x64-111",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..fb57ccd13
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

From f93fe771117328e874abfb46a830a1483c94aec9 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 29 May 2023 17:40:10 +0545
Subject: [PATCH 05/72] Separate files

---
 .../views/NewTutorial/ScenarioInput/index.tsx | 179 ++++++++++++++
 .../NewTutorial/ScenarioInput/styles.css      |  16 ++
 .../app/views/NewTutorial/index.tsx           | 227 ++----------------
 .../app/views/NewTutorial/styles.css          |  17 --
 .../app/views/NewTutorial/utils.ts            | 109 +++++++--
 5 files changed, 306 insertions(+), 242 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css

diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
new file mode 100644
index 000000000..dfdebb3a6
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+    useFormObject,
+    PartialForm,
+    SetValueArg,
+} from '@togglecorp/toggle-form';
+import TextInput from '#components/TextInput';
+import Heading from '#components/Heading';
+import SelectInput from '#components/SelectInput';
+import {
+    TabPanel,
+} from '#components/Tabs';
+import {
+    PartialTutorialFormType,
+} from '../utils';
+
+import styles from './styles.css';
+
+type ScenarioType = NonNullable<PartialTutorialFormType['screens']>[number];
+
+interface IconOptions {
+    key: string;
+    label: string;
+}
+
+const iconOptions: IconOptions[] = [
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+    },
+    {
+        key: 'tap-1',
+        label: 'Tap 1',
+    },
+    {
+        key: 'tap-2',
+        label: 'Tap 2',
+    },
+    {
+        key: 'tap-3',
+        label: 'Tap 3',
+    },
+    {
+        key: 'check',
+        label: 'Check',
+    },
+];
+
+const defaultScenarioTabsValue: ScenarioType = {
+    scenario: '',
+    hint: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+    instructions: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+    success: {
+        description: '',
+        icon: '',
+        title: '',
+    },
+};
+
+interface ScenarioTabsProps {
+    value: PartialForm<ScenarioType>,
+    onChange: (value: SetValueArg<PartialForm<ScenarioType>>, index: number) => void;
+    index: number,
+}
+
+export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
+    const {
+        value,
+        onChange,
+        index,
+    } = scenarioProps;
+
+    const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
+    const onInstructionFieldChange = useFormObject('instructions', onFieldChange, defaultScenarioTabsValue.instructions);
+    const onHintFieldChange = useFormObject('hint', onFieldChange, defaultScenarioTabsValue.hint);
+    const onSuccessFieldChange = useFormObject('success', onFieldChange, defaultScenarioTabsValue.success);
+
+    return (
+        <TabPanel
+            key={value.scenario}
+            name={`Scenario ${value.scenario}`}
+        >
+            <div className={styles.scenario}>
+                <Heading level={4}>
+                    Instructions
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.instructions?.title}
+                            label="Title"
+                            onChange={onInstructionFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.instructions?.description}
+                            label="Description"
+                            onChange={onInstructionFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.instructions?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onInstructionFieldChange}
+                    />
+                </div>
+                <Heading level={4}>
+                    Hint
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.hint?.title}
+                            label="Title"
+                            onChange={onHintFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.hint?.description}
+                            label="Description"
+                            onChange={onHintFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.hint?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onHintFieldChange}
+                    />
+                </div>
+                <Heading level={4}>
+                    Success
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name="title"
+                            value={value.success?.title}
+                            label="Title"
+                            onChange={onSuccessFieldChange}
+                        />
+                        <TextInput
+                            name="description"
+                            value={value.success?.description}
+                            label="Description"
+                            onChange={onSuccessFieldChange}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.success?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onSuccessFieldChange}
+                    />
+                </div>
+            </div>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css
new file mode 100644
index 000000000..505605b80
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css
@@ -0,0 +1,16 @@
+.scenario {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+
+    .scenario-form {
+        display: flex;
+        gap: var(--spacing-medium);
+
+        .scenario-form-content {
+            display: flex;
+            flex-basis: 80%;
+            flex-direction: column;
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 146d9770c..8d47fc4fa 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -10,9 +10,6 @@ import {
     createSubmitHandler,
     analyzeErrors,
     useFormArray,
-    useFormObject,
-    PartialForm,
-    SetValueArg,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -43,12 +40,10 @@ import NumberInput from '#components/NumberInput';
 import SegmentInput from '#components/SegmentInput';
 import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
-import Heading from '#components/Heading';
 import {
     Tabs,
     Tab,
     TabList,
-    TabPanel,
 } from '#components/Tabs';
 import JsonFileInput from '#components/JsonFileInput';
 import TileServerInput, {
@@ -70,8 +65,8 @@ import {
     TutorialFormType,
     PartialTutorialFormType,
 } from './utils';
+import ScenarioInput from './ScenarioInput';
 import styles from './styles.css';
-import SelectInput from '#components/SelectInput';
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
@@ -86,187 +81,10 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
     },
 };
 
-interface TutorialTask {
-    scenario: number;
-    hint: {
-        description?: string;
-        icon?: string;
-        title?: string;
-    },
-    intructions: {
-        description?: string;
-        icon?: string;
-        title?: string;
-    },
-    success: {
-        description?: string;
-        icon?: string;
-        title?: string;
-    }
-}
-
-interface IconOptions {
-    key: string;
-    label: string;
-}
 interface Props {
     className?: string;
 }
 
-type ScenarioType = NonNullable<PartialTutorialFormType['screens']>
-
-const iconOptions: IconOptions[] = [
-    {
-        key: 'swipe-left',
-        label: 'Swipe Left',
-    },
-    {
-        key: 'tap-1',
-        label: 'Tap 1',
-    },
-    {
-        key: 'tap-2',
-        label: 'Tap 2',
-    },
-    {
-        key: 'tap-3',
-        label: 'Tap 3',
-    },
-    {
-        key: 'check',
-        label: 'Check',
-    },
-];
-
-const defaultScenarioTabsValue: PartialForm<ScenarioType> = {
-    scenario: '',
-    hint: {
-        description: '',
-        icon: '',
-        title: '',
-    },
-    instruction: {
-        description: '',
-        icon: '',
-        title: '',
-    },
-    success: {
-        description: '',
-        icon: '',
-        title: '',
-    },
-
-};
-interface ScenarioTabsProps {
-    value: PartialForm<ScenarioType>[number],
-    onChange: (value: SetValueArg<PartialForm<ScenarioType>>, index: number) => void;
-    index: number,
- }
-
-function ScenarioTabs(scenarioProps: ScenarioTabsProps) {
-    const {
-        value,
-        onChange,
-        index,
-    } = scenarioProps;
-
-    const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
-
-    return (
-        <TabPanel
-            key={value.scenario}
-            name={`Scenario ${value.scenario}`}
-        >
-            <div className={styles.scenario}>
-                <Heading level={4}>
-                    Instructions
-                </Heading>
-                <div className={styles.scenarioForm}>
-                    <div className={styles.scenarioFormContent}>
-                        <TextInput
-                            name="title"
-                            value={value.instruction?.title}
-                            label="Title"
-                            onChange={onFieldChange}
-                        />
-                        <TextInput
-                            name="description"
-                            value={value.instruction?.description}
-                            label="Description"
-                            onChange={onFieldChange}
-                        />
-                    </div>
-                    <SelectInput
-                        name="icon"
-                        label="Icon"
-                        value={value.instruction?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
-                        onChange={onFieldChange}
-                    />
-                </div>
-                <Heading level={4}>
-                    Hint
-                </Heading>
-                <div className={styles.scenarioForm}>
-                    <div className={styles.scenarioFormContent}>
-                        <TextInput
-                            name="title"
-                            value={value.hint?.title}
-                            label="Title"
-                            onChange={onFieldChange}
-                        />
-                        <TextInput
-                            name="description"
-                            value={value.hint?.description}
-                            label="Description"
-                            onChange={onFieldChange}
-                        />
-                    </div>
-                    <SelectInput
-                        name="icon"
-                        label="Icon"
-                        value={value.hint?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
-                        onChange={onFieldChange}
-                    />
-                </div>
-                <Heading level={4}>
-                    Success
-                </Heading>
-                <div className={styles.scenarioForm}>
-                    <div className={styles.scenarioFormContent}>
-                        <TextInput
-                            name="title"
-                            value={value.success?.title}
-                            label="Title"
-                            onChange={onFieldChange}
-                        />
-                        <TextInput
-                            name="description"
-                            value={value.success?.description}
-                            label="Description"
-                            onChange={onFieldChange}
-                        />
-                    </div>
-                    <SelectInput
-                        name="icon"
-                        label="Icon"
-                        value={value.success?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
-                        onChange={onFieldChange}
-                    />
-                </div>
-            </div>
-        </TabPanel>
-    );
-}
-
 function NewTutorial(props: Props) {
     const {
         className,
@@ -408,36 +226,38 @@ function NewTutorial(props: Props) {
         || value?.projectType === PROJECT_TYPE_COMPLETENESS;
 
     const handleGeoJsonFile = React.useCallback((
-        geoProps: PartialTutorialFormType['tutorialTasks'],
+        geoProps: GeoJSON.GeoJSON | undefined,
     ) => {
-        setFieldValue('tutorialTasks', geoProps);
-        const uniqueArray = unique(geoProps.features, ((geo) => geo?.properties.screen));
-        const sorted = uniqueArray.sort((a, b) => a.properties?.screen - b.properties.screen);
-        const tutorialTaskArray = sorted.map((geo) => (
+        const tutorialTasks = geoProps as PartialTutorialFormType['tutorialTasks'];
+
+        setFieldValue(tutorialTasks, 'tutorialTasks');
+        const uniqueArray = tutorialTasks && unique(
+            tutorialTasks.features, ((geo) => geo?.properties.screen),
+        );
+        const sorted = uniqueArray?.sort((a, b) => a.properties?.screen - b.properties.screen);
+        const tutorialTaskArray = sorted?.map((geo) => (
             {
-                scenario: geo.properties.screen,
+                scenario: String(geo.properties.screen) ?? '',
                 hint: {
-                    description: undefined,
-                    icon: undefined,
-                    title: undefined,
+                    title: '',
+                    description: '',
+                    icon: '',
                 },
-                intructions: {
-                    description: undefined,
-                    icon: undefined,
-                    title: undefined,
+                instructions: {
+                    title: '',
+                    description: '',
+                    icon: '',
                 },
                 success: {
-                    description: undefined,
-                    icon: undefined,
-                    title: undefined,
+                    title: '',
+                    description: '',
+                    icon: '',
                 },
             }
         ));
-        setFieldValue('screens', tutorialTaskArray);
+        setFieldValue(tutorialTaskArray, 'screens');
     }, [setFieldValue]);
 
-    console.log(value.tutorialTasks);
-
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -548,7 +368,8 @@ function NewTutorial(props: Props) {
                                         ))}
                                     </TabList>
                                     {value.screens?.map((task, index) => (
-                                        <ScenarioTabs
+                                        <ScenarioInput
+                                            key={task.scenario}
                                             index={index}
                                             value={task}
                                             onChange={onScenarioFormChange}
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 367c3c177..11bfabd00 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -19,23 +19,6 @@
             gap: var(--spacing-extra-large);
         }
 
-        .scenario {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-large);
-
-            .scenario-form {
-                display: flex;
-                gap: var(--spacing-medium);
-
-                .scenario-form-content {
-                    display: flex;
-                    flex-basis: 80%;
-                    flex-direction: column;
-                }
-            }
-        }
-
         .input-group {
             display: flex;
             flex-direction: column;
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index ff64c629f..5cece5a21 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -6,6 +6,7 @@ import {
     lessThanOrEqualToCondition,
     integerCondition,
     nullValue,
+    ArraySchema,
 } from '@togglecorp/toggle-form';
 import {
     TileServer,
@@ -21,6 +22,20 @@ import {
 } from '#utils/common';
 
 // FIXME: include here
+
+export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
+    groupId: string;
+    reference: number;
+    screen: number;
+    taskId: string;
+    // eslint-disable-next-line
+    tile_x: number;
+    // eslint-disable-next-line
+    tile_y: number;
+    // eslint-disable-next-line
+    tile_z: number;
+}>;
+
 export interface TutorialFormType {
     lookFor: string;
     name: string;
@@ -28,33 +43,22 @@ export interface TutorialFormType {
     screens?: {
         scenario: string;
         hint: {
-            description: string;
-            icon: string;
-            title: string;
+            description?: string;
+            icon?: string;
+            title?: string;
         };
-        instruction: {
-            description: string;
-            icon: string;
+        instructions: {
+            description?: string;
+            icon?: string;
             title: string;
         };
         success: {
-            description: string;
-            icon: string;
-            title: string;
+            description?: string;
+            icon?: string;
+            title?: string;
         };
     }[];
-    tutorialTasks?: GeoJSON.FeatureCollection<GeoJSON.Geometry, {
-        groupId: string;
-        reference: number;
-        screen: number;
-        taskId: string;
-        // eslint-disable-next-line
-        tile_x: number;
-        // eslint-disable-next-line
-        tile_y: number;
-        // eslint-disable-next-line
-        tile_z: number;
-    }>;
+    tutorialTasks?: TutorialTasks,
     exampleImage1: File;
     exampleImage2: File;
     projectType: ProjectType;
@@ -74,6 +78,13 @@ export type PartialTutorialFormType = PartialForm<
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
 type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 
+type ScreenType = NonNullable<PartialTutorialFormType['screens']>[number];
+type ScreenSchema = ObjectSchema<PartialForm<ScreenType>, PartialTutorialFormType>;
+type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
+
+type ScreenFormSchema = ArraySchema<PartialForm<ScreenType>, PartialTutorialFormType>;
+type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
+
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
         const baseSchema: TutorialFormSchemaFields = {
@@ -94,7 +105,61 @@ export const tutorialFormSchema: TutorialFormSchema = {
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            screens: { required: true },
+            screens: {
+                keySelector: (key) => key.scenario,
+                member: () => ({
+                    fields: () => ({
+                        scenario: {
+                            required: true,
+                        },
+                        hint: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                description: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                icon: { required: true },
+                            }),
+                        },
+                        instructions: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                description: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                icon: { required: true },
+                            }),
+                        },
+                        success: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                hintDescription: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                },
+                                hintIcon: { required: true },
+                            }),
+                        },
+                    }),
+                }),
+            },
             // FIXME: add validation for tutorialTasks (geojson)
             tutorialTasks: { required: true },
             exampleImage1: { required: true },

From 4aa5a6dd58e687496fb691758143ad8aa8ab53fa Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 30 May 2023 17:28:41 +0545
Subject: [PATCH 06/72] fix type issue scenario form

---
 .../app/components/Tabs/styles.css            | 14 +++-
 .../app/components/TileServerInput/index.tsx  | 32 +++++--
 .../NewTutorial/DescribeOptions/index.tsx     | 83 +++++++++++++++++++
 .../NewTutorial/DescribeOptions/styles.css    | 11 +++
 .../views/NewTutorial/ScenarioInput/index.tsx | 54 ++++++------
 .../app/views/NewTutorial/index.tsx           | 38 +++------
 .../app/views/NewTutorial/styles.css          |  6 ++
 .../app/views/NewTutorial/utils.ts            | 28 +++----
 8 files changed, 185 insertions(+), 81 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css

diff --git a/manager-dashboard/app/components/Tabs/styles.css b/manager-dashboard/app/components/Tabs/styles.css
index 947908cdd..28e354241 100644
--- a/manager-dashboard/app/components/Tabs/styles.css
+++ b/manager-dashboard/app/components/Tabs/styles.css
@@ -1,13 +1,19 @@
 .tab {
+    border: 1px solid rgba(0,0,0,.1);
+    border-bottom: none;
+    border-radius: 5px 5px 0 0;
+    background-color: #FFFFFF;
+    padding: var(--spacing-small);
     text-align: left;
-
+    
     &.active {
-        color: var(--color-accent);
+        bottom: -1px;
+        background-color: #FBFBFF;
     }
 }
 
 .tab-list {
     display: flex;
-    gap: var(--spacing-large);
-    padding: var(--spacing-medium);
+    gap: var(--spacing-small);
+    border-bottom: 1px solid rgba(0,0,0,.1);
 }
diff --git a/manager-dashboard/app/components/TileServerInput/index.tsx b/manager-dashboard/app/components/TileServerInput/index.tsx
index 5038a3c8f..c74b78f9e 100644
--- a/manager-dashboard/app/components/TileServerInput/index.tsx
+++ b/manager-dashboard/app/components/TileServerInput/index.tsx
@@ -7,7 +7,6 @@ import {
     SetValueArg,
     ObjectSchema,
     requiredStringCondition,
-    requiredCondition,
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
@@ -82,19 +81,34 @@ type TileServerSchema = ObjectSchema<PartialForm<TileServerInputType>, unknown>;
 type TileServerFields = ReturnType<TileServerSchema['fields']>;
 export function tileServerFieldsSchema(value: TileServerInputType | undefined): TileServerFields {
     const basicFields: TileServerFields = {
-        name: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
-        credits: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(1000)],
+        },
+        credits: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(1000)],
+        },
     };
 
     if (value?.name === TILE_SERVER_CUSTOM) {
         return {
             ...basicFields,
-            url: [
-                requiredStringCondition,
-                imageryUrlCondition,
-                getNoMoreThanNCharacterCondition(1000),
-            ],
-            wmtsLayerName: [requiredCondition, getNoMoreThanNCharacterCondition(1000)],
+            url: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [
+                    getNoMoreThanNCharacterCondition(1000),
+                    imageryUrlCondition,
+                ],
+            },
+            wmtsLayerName: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(1000)],
+            },
         };
     }
     return basicFields;
diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
new file mode 100644
index 000000000..909fb2401
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+import Button from '#components/Button';
+import Card from '#components/Card';
+import Heading from '#components/Heading';
+import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+
+import styles from './styles.css';
+
+export default function DescribeOptions() {
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
+
+    return (
+        <Card
+            title="Define Options"
+            contentClassName={styles.optionsContainer}
+        >
+            <Heading level={4}>
+                Option Instructions
+            </Heading>
+            <Button
+                name="add_instruction"
+                icons={<MdAdd />}
+            >
+                Add instruction
+            </Button>
+            <Tabs
+                value={activeOptionsTab}
+                onChange={setActiveOptionsTab}
+            >
+                <TabList>
+                    <Tab
+                        name="option1"
+                    >
+                        Option 1
+                    </Tab>
+                    <Tab
+                        name="option2"
+                    >
+                        Option 2
+                    </Tab>
+                </TabList>
+                <TabPanel
+                    name="option1"
+                >
+                    <div className={styles.optionForm}>
+                        <TextInput
+                            label="Title"
+                            value=""
+                            name="title"
+                        />
+                        <TextInput
+                            label="Description"
+                            value=""
+                            name="description"
+                        />
+                        <Heading level={4}>
+                            Reasons
+                        </Heading>
+                        <Button
+                            name="add_instrcution"
+                            icons={<MdAdd />}
+                        >
+                            Add Reasons
+                        </Button>
+                        <TextInput
+                            label="Title"
+                            value=""
+                            name="title"
+                        />
+                        <TextInput
+                            label="Description"
+                            value=""
+                            name="description"
+                        />
+                    </div>
+                </TabPanel>
+            </Tabs>
+
+        </Card>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css b/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css
new file mode 100644
index 000000000..8a7cfd02c
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css
@@ -0,0 +1,11 @@
+.options-container{
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+
+    .option-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
index dfdebb3a6..8c5cd738d 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -10,13 +10,27 @@ import SelectInput from '#components/SelectInput';
 import {
     TabPanel,
 } from '#components/Tabs';
-import {
-    PartialTutorialFormType,
-} from '../utils';
 
 import styles from './styles.css';
 
-type ScenarioType = NonNullable<PartialTutorialFormType['screens']>[number];
+type ScenarioType = {
+    scenario: string;
+    hint: {
+        description: string;
+        icon: string;
+        title: string;
+    };
+    instructions: {
+        description: string;
+        icon: string;
+        title: string;
+    };
+    success: {
+        description: string;
+        icon: string;
+        title: string;
+    };
+};
 
 interface IconOptions {
     key: string;
@@ -46,28 +60,14 @@ const iconOptions: IconOptions[] = [
     },
 ];
 
-const defaultScenarioTabsValue: ScenarioType = {
-    scenario: '',
-    hint: {
-        description: '',
-        icon: '',
-        title: '',
-    },
-    instructions: {
-        description: '',
-        icon: '',
-        title: '',
-    },
-    success: {
-        description: '',
-        icon: '',
-        title: '',
-    },
+type PartialScenarioType = PartialForm<ScenarioType, 'scenario'>;
+const defaultScenarioTabsValue: PartialScenarioType = {
+    scenario: 'xxx',
 };
 
 interface ScenarioTabsProps {
-    value: PartialForm<ScenarioType>,
-    onChange: (value: SetValueArg<PartialForm<ScenarioType>>, index: number) => void;
+    value: PartialScenarioType,
+    onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
 }
 
@@ -79,13 +79,13 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
     } = scenarioProps;
 
     const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
-    const onInstructionFieldChange = useFormObject('instructions', onFieldChange, defaultScenarioTabsValue.instructions);
-    const onHintFieldChange = useFormObject('hint', onFieldChange, defaultScenarioTabsValue.hint);
-    const onSuccessFieldChange = useFormObject('success', onFieldChange, defaultScenarioTabsValue.success);
+
+    const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>('instructions', onFieldChange, {});
+    const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>('hint', onFieldChange, {});
+    const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>('success', onFieldChange, {});
 
     return (
         <TabPanel
-            key={value.scenario}
             name={`Scenario ${value.scenario}`}
         >
             <div className={styles.scenario}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8d47fc4fa..8f0857812 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -45,7 +45,6 @@ import {
     Tab,
     TabList,
 } from '#components/Tabs';
-import JsonFileInput from '#components/JsonFileInput';
 import TileServerInput, {
     TILE_SERVER_BING,
     tileServerDefaultCredits,
@@ -66,6 +65,7 @@ import {
     PartialTutorialFormType,
 } from './utils';
 import ScenarioInput from './ScenarioInput';
+import DescribeOptions from './DescribeOptions';
 import styles from './styles.css';
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -109,7 +109,7 @@ function NewTutorial(props: Props) {
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
-    const [activeTab, setActiveTab] = React.useState('');
+    const [activeTab, setActiveTab] = React.useState('Scenario 1');
     const error = React.useMemo(
         () => getErrorObject(formError),
         [formError],
@@ -237,24 +237,13 @@ function NewTutorial(props: Props) {
         const sorted = uniqueArray?.sort((a, b) => a.properties?.screen - b.properties.screen);
         const tutorialTaskArray = sorted?.map((geo) => (
             {
-                scenario: String(geo.properties.screen) ?? '',
-                hint: {
-                    title: '',
-                    description: '',
-                    icon: '',
-                },
-                instructions: {
-                    title: '',
-                    description: '',
-                    icon: '',
-                },
-                success: {
-                    title: '',
-                    description: '',
-                    icon: '',
-                },
+                scenario: String(geo.properties.screen),
+                hint: {},
+                instructions: {},
+                success: {},
             }
         ));
+
         setFieldValue(tutorialTaskArray, 'screens');
     }, [setFieldValue]);
 
@@ -306,15 +295,6 @@ function NewTutorial(props: Props) {
                         title="Upload GeoJSON file"
                         contentClassName={styles.inputGroup}
                     >
-                        <JsonFileInput
-                            name={'screens' as const}
-                            value={value?.screens}
-                            onChange={setFieldValue}
-                            label="Upload Tutorial Text as JSON"
-                            hint="It should end with .json"
-                            error={error?.screens}
-                            disabled={submissionPending}
-                        />
                         <GeoJsonFileInput
                             name={'tutorialTasks' as const}
                             value={value?.tutorialTasks}
@@ -348,8 +328,12 @@ function NewTutorial(props: Props) {
                             disabled={submissionPending}
                         />
                     </Card>
+                    {value.projectType === 2 && (
+                        <DescribeOptions />
+                    )}
                     <Card
                         title="Describe Scenarios"
+                        contentClassName={styles.cardScenarios}
                     >
                         <Tabs
                             value={activeTab}
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 11bfabd00..6fe87ab92 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -30,6 +30,12 @@
                 width: 60%
             }
         }
+
+        .card-scenarios {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-large);
+        }
     }
 
     .error-message {
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 5cece5a21..0781370c5 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -40,22 +40,22 @@ export interface TutorialFormType {
     lookFor: string;
     name: string;
     tileServer: TileServer;
-    screens?: {
+    screens: {
         scenario: string;
         hint: {
-            description?: string;
-            icon?: string;
-            title?: string;
+            description: string;
+            icon: string;
+            title: string;
         };
         instructions: {
-            description?: string;
-            icon?: string;
+            description: string;
+            icon: string;
             title: string;
         };
         success: {
-            description?: string;
-            icon?: string;
-            title?: string;
+            description: string;
+            icon: string;
+            title: string;
         };
     }[];
     tutorialTasks?: TutorialTasks,
@@ -72,17 +72,17 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'screens' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2'
+    'scenario' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
 type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 
 type ScreenType = NonNullable<PartialTutorialFormType['screens']>[number];
-type ScreenSchema = ObjectSchema<PartialForm<ScreenType>, PartialTutorialFormType>;
+type ScreenSchema = ObjectSchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
 
-type ScreenFormSchema = ArraySchema<PartialForm<ScreenType>, PartialTutorialFormType>;
+type ScreenFormSchema = ArraySchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
 
 export const tutorialFormSchema: TutorialFormSchema = {
@@ -107,8 +107,8 @@ export const tutorialFormSchema: TutorialFormSchema = {
             },
             screens: {
                 keySelector: (key) => key.scenario,
-                member: () => ({
-                    fields: () => ({
+                member: (): ScreenFormSchemaMember => ({
+                    fields: (): ScreenFormSchemaFields => ({
                         scenario: {
                             required: true,
                         },

From 1b71a73d02098876edd5ea4c41bc153cab4ee226 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 31 May 2023 17:25:03 +0545
Subject: [PATCH 07/72] Add schema for define options form

---
 .../app/components/GeoJsonFileInput/index.tsx |   5 +-
 .../OrganisationFormModal/index.tsx           |  16 +-
 .../SelectInput/SearchSelectInput.tsx         |   2 -
 .../app/components/SelectInput/index.tsx      |   2 -
 .../components/SelectInputContainer/index.tsx |   2 +-
 manager-dashboard/app/views/Login/index.tsx   |  21 +-
 .../app/views/NewProject/index.tsx            |  12 +-
 .../app/views/NewProject/utils.ts             | 309 ++++++++++++------
 .../NewTutorial/DescribeOptions/index.tsx     |  83 -----
 .../NewTutorial/DescribeOptions/styles.css    |  11 -
 .../views/NewTutorial/ScenarioInput/index.tsx |  18 +
 .../app/views/NewTutorial/index.tsx           |   9 +-
 .../app/views/NewTutorial/utils.ts            |  69 ++--
 .../UserGroups/UserGroupFormModal/index.tsx   |  16 +-
 manager-dashboard/package.json                |  15 +-
 manager-dashboard/yarn.lock                   | 201 +++++++++---
 16 files changed, 481 insertions(+), 310 deletions(-)
 delete mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
 delete mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css

diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index 60f8939fd..acc981f40 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -51,10 +51,7 @@ const DEFAULT_MAX_FILE_SIZE = ONE_MB;
 
 interface Props<N> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accept'> {
     maxFileSize?: number;
-    value: GeoJSON.FeatureCollection<
-        GeoJSON.Geometry, Record<string,
-        string | number>
-    > | undefined | null;
+    value: GeoJSON.GeoJSON | undefined | null;
     onChange: (newValue: GeoJSON.GeoJSON | undefined, name: N) => void;
 }
 
diff --git a/manager-dashboard/app/components/OrganisationFormModal/index.tsx b/manager-dashboard/app/components/OrganisationFormModal/index.tsx
index b79bdbe03..5c0b0e7f8 100644
--- a/manager-dashboard/app/components/OrganisationFormModal/index.tsx
+++ b/manager-dashboard/app/components/OrganisationFormModal/index.tsx
@@ -18,8 +18,8 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    requiredCondition,
     analyzeErrors,
+    requiredStringCondition,
 } from '@togglecorp/toggle-form';
 import {
     MdOutlinePublishedWithChanges,
@@ -51,8 +51,16 @@ const MAX_CHARS_DESCRIPTION = 100;
 
 const organisationFormSchema: OrganisationFormSchema = {
     fields: (): OrganisationFormSchemaFields => ({
-        name: [requiredCondition, getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
-        description: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
+        },
+        description: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        },
     }),
 };
 
@@ -74,7 +82,7 @@ function OrganisationFormModal(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(organisationFormSchema, defaultOrganisationFormValue);
+    } = useForm(organisationFormSchema, { value: defaultOrganisationFormValue });
 
     const mountedRef = useMountedRef();
     const { user } = React.useContext(UserContext);
diff --git a/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx b/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
index 70347658f..edb93e1f5 100644
--- a/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
+++ b/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
@@ -37,7 +37,6 @@ type OptionKey = string | number;
 export type SearchSelectInputProps<
     T extends OptionKey,
     K,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
     OMISSION extends string,
@@ -87,7 +86,6 @@ const emptyList: unknown[] = [];
 function SearchSelectInput<
     T extends OptionKey,
     K extends string,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
 >(
diff --git a/manager-dashboard/app/components/SelectInput/index.tsx b/manager-dashboard/app/components/SelectInput/index.tsx
index 0290ec96d..d5998c228 100644
--- a/manager-dashboard/app/components/SelectInput/index.tsx
+++ b/manager-dashboard/app/components/SelectInput/index.tsx
@@ -11,12 +11,10 @@ type Def = { containerClassName?: string };
 export type SelectInputProps<
     T extends OptionKey,
     K extends string,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
 > = SearchSelectInputProps<T, K, O, P, 'onSearchValueChange' | 'searchOptions' | 'onShowDropdownChange' | 'totalOptionsCount'>;
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 function SelectInput<T extends OptionKey, K extends string, O extends object, P extends Def>(
     props: SelectInputProps<T, K, O, P>,
 ) {
diff --git a/manager-dashboard/app/components/SelectInputContainer/index.tsx b/manager-dashboard/app/components/SelectInputContainer/index.tsx
index 9dd565627..794aab80b 100644
--- a/manager-dashboard/app/components/SelectInputContainer/index.tsx
+++ b/manager-dashboard/app/components/SelectInputContainer/index.tsx
@@ -92,7 +92,7 @@ export type SelectInputContainerProps<
 
 const emptyList: unknown[] = [];
 
-// eslint-disable-next-line @typescript-eslint/ban-types, max-len
+// eslint-disable-next-line max-len
 function SelectInputContainer<OK extends OptionKey, N extends string, O extends object, P extends ContentBaseProps>(
     props: SelectInputContainerProps<OK, N, O, P, never>,
 ) {
diff --git a/manager-dashboard/app/views/Login/index.tsx b/manager-dashboard/app/views/Login/index.tsx
index 8dc6c5c13..f0d45f6b1 100644
--- a/manager-dashboard/app/views/Login/index.tsx
+++ b/manager-dashboard/app/views/Login/index.tsx
@@ -12,7 +12,7 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    internal,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
@@ -33,8 +33,14 @@ type LoginFormSchema = ObjectSchema<LoginFormFields>;
 type LoginFormSchemaFields = ReturnType<LoginFormSchema['fields']>
 const loginFormSchema: LoginFormSchema = {
     fields: (): LoginFormSchemaFields => ({
-        email: [requiredStringCondition],
-        password: [requiredStringCondition],
+        email: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        password: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
     }),
 };
 
@@ -57,7 +63,7 @@ function Login(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(loginFormSchema, defaultLoginFormValue);
+    } = useForm(loginFormSchema, { value: defaultLoginFormValue });
     const error = getErrorObject(formError);
 
     const [pending, setPending] = React.useState(false);
@@ -83,7 +89,6 @@ function Login(props: Props) {
                 if (!mountedRef.current) {
                     return;
                 }
-                setErrorMessage(undefined);
                 setPending(false);
             } catch (submissionError) {
                 // eslint-disable-next-line no-console
@@ -118,7 +123,7 @@ function Login(props: Props) {
 
                 setError((prevError) => ({
                     ...getErrorObject(prevError),
-                    [internal]: 'Failed to authenticate',
+                    [nonFieldError]: 'Failed to authenticate',
                 }));
 
                 setPending(false);
@@ -168,9 +173,9 @@ function Login(props: Props) {
                         type="password"
                         disabled={pending}
                     />
-                    {error?.[internal] && (
+                    {error?.[nonFieldError] && (
                         <div className={styles.errorMessage}>
-                            {error?.[internal]}
+                            {error?.[nonFieldError]}
                         </div>
                     )}
                     <div className={styles.actions}>
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index a8a808da5..6d1c35ae7 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -8,7 +8,7 @@ import {
     getErrorObject,
     createSubmitHandler,
     analyzeErrors,
-    internal,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -115,7 +115,9 @@ function NewProject(props: Props) {
         validate,
         setError,
         setValue,
-    } = useForm(projectFormSchema, defaultProjectFormValue);
+    } = useForm(projectFormSchema, {
+        value: defaultProjectFormValue,
+    });
 
     const [testPending, setTestPending] = React.useState(false);
     const [geometryDescription, setGeometryDescription] = React.useState<string>();
@@ -245,7 +247,7 @@ function NewProject(props: Props) {
         if (!userId) {
             setError((err) => ({
                 ...getErrorObject(err),
-                [internal]: 'Cannot submit form because user is not defined',
+                [nonFieldError]: 'Cannot submit form because user is not defined',
             }));
             setProjectSubmissionStatus('failed');
             return;
@@ -351,7 +353,7 @@ function NewProject(props: Props) {
                 console.error(submissionError);
                 setError((err) => ({
                     ...getErrorObject(err),
-                    [internal]: 'Some error occurred',
+                    [nonFieldError]: 'Some error occurred',
                 }));
                 setProjectSubmissionStatus('failed');
             }
@@ -468,7 +470,7 @@ function NewProject(props: Props) {
                         {value?.inputType === PROJECT_INPUT_TYPE_UPLOAD && (
                             <GeoJsonFileInput
                                 name={'geometry' as const}
-                                value={value?.geometry as GeoJSON.GeoJSON | undefined}
+                                value={value?.geometry as GeoJSON.GeoJSON}
                                 onChange={setFieldValueAndClearTestMessage}
                                 label="GeoJSON File"
                                 hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a maximum of 10 polygon geometries."
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index b33162d7e..8c07e5a0d 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -8,13 +8,13 @@ import {
 import {
     ObjectSchema,
     PartialForm,
-    requiredCondition,
     requiredStringCondition,
     integerCondition,
     greaterThanCondition,
     greaterThanOrEqualToCondition,
     lessThanOrEqualToCondition,
-    forceNullType,
+    addCondition,
+    nullValue,
 } from '@togglecorp/toggle-form';
 import { getType as getFeatureType } from '@turf/invariant';
 import getFeatureArea from '@turf/area';
@@ -158,114 +158,219 @@ function validGeometryCondition(
 
 export const projectFormSchema: ProjectFormSchema = {
     fields: (value): ProjectFormSchemaFields => {
-        const baseSchema: ProjectFormSchemaFields = {
-            projectTopic: [requiredStringCondition, getNoMoreThanNCharacterCondition(50)],
-            projectType: [requiredCondition],
-            projectRegion: [requiredStringCondition, getNoMoreThanNCharacterCondition(50)],
-            projectNumber: [requiredCondition, integerCondition, greaterThanCondition(0)],
-            requestingOrganisation: [requiredStringCondition],
-            name: [requiredStringCondition],
-            visibility: [requiredCondition],
-            lookFor: [getNoMoreThanNCharacterCondition(25)],
-            projectDetails: [requiredStringCondition, getNoMoreThanNCharacterCondition(10000)],
-            tutorialId: [requiredCondition],
-            projectImage: [requiredCondition],
-            verificationNumber: [
-                requiredCondition,
-                greaterThanOrEqualToCondition(3),
-                lessThanOrEqualToCondition(10000),
-                integerCondition,
-            ],
-            groupSize: [
-                requiredCondition,
-                greaterThanOrEqualToCondition(10),
-                lessThanOrEqualToCondition(250),
-                integerCondition,
-            ],
+        let baseSchema: ProjectFormSchemaFields = {
+            projectTopic: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(50)],
+            },
+            projectType: {
+                required: true,
+            },
+            projectRegion: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(50)],
+            },
+            projectNumber: {
+                required: true,
+                requiredValidation: integerCondition,
+                validations: [greaterThanCondition(0)],
+            },
+            requestingOrganisation: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            visibility: {
+                required: true,
+            },
+            lookFor: {
+                validations: [getNoMoreThanNCharacterCondition(25)],
+            },
+            projectDetails: {
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(10000)],
+            },
+            tutorialId: {
+                required: true,
+            },
+            projectImage: {
+                required: true,
+            },
+            verificationNumber: {
+                required: true,
+                requiredValidation: integerCondition,
+                validations: [
+                    greaterThanOrEqualToCondition(3),
+                    lessThanOrEqualToCondition(10000),
+                ],
+            },
+            groupSize: {
+                required: true,
+                requiredValidation: integerCondition,
+                validations: [
+                    greaterThanOrEqualToCondition(10),
+                    lessThanOrEqualToCondition(250),
+                ],
+            },
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            maxTasksPerUser: [
-                greaterThanCondition(0),
-                integerCondition,
-            ],
-
-            zoomLevel: [forceNullType],
-            geometry: [forceNullType],
-            filter: [forceNullType],
-            filterText: [forceNullType],
-            TMId: [forceNullType],
-            tileServerB: [forceNullType],
+            maxTasksPerUser: {
+                requiredValidation: integerCondition,
+                validations: [greaterThanCondition(0)],
+            },
         };
 
-        if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
-                geometry: [
-                    requiredCondition,
-                    validGeometryCondition,
-                ],
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_FOOTPRINT) {
-            return {
-                ...baseSchema,
-                inputType: [requiredCondition],
-                filter: (value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD)
-                    ? [requiredCondition]
-                    : [forceNullType],
-                filterText: (
-                    value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD
-                ) && value?.filter === FILTER_OTHERS
-                    ? [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)]
-                    : [forceNullType],
-                // FIXME: geometry type is either string or object
-                // update validation
-                geometry: (value?.inputType === PROJECT_INPUT_TYPE_LINK
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD)
-                    ? [requiredCondition, validGeometryCondition]
-                    : [forceNullType],
-                // FIXME: number string condition
-                TMId: value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    ? [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)]
-                    : [forceNullType],
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-            || value?.projectType === PROJECT_TYPE_COMPLETENESS) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
-                geometry: [
-                    requiredCondition,
-                    validGeometryCondition,
-                ],
-                tileServerB: {
-                    fields: tileServerFieldsSchema,
-                },
-            };
-        }
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['zoomLevel', 'geometry'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (
+                    projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                ) {
+                    return {
+                        zoomLevel: {
+                            required: true,
+                            validations: [
+                                greaterThanOrEqualToCondition(14),
+                                lessThanOrEqualToCondition(22),
+                                integerCondition,
+                            ],
+                        },
+                        geometry: {
+                            required: true,
+                            validations: [validGeometryCondition],
+                        },
+                    };
+                }
+                return {
+                    zoomLevel: { forceValue: nullValue },
+                    geometry: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['tileServerB'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (
+                    projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                ) {
+                    return {
+                        tileServerB: {
+                            fields: tileServerFieldsSchema,
+                        },
+                    };
+                }
+                return {
+                    tileServerB: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['inputType'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        inputType: { required: true },
+                    };
+                }
+                return {
+                    inputType: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType'],
+            ['filter', 'geometry', 'TMId'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                return {
+                    filter: (
+                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    ) && projectType === PROJECT_TYPE_FOOTPRINT
+                        ? { required: true }
+                        : { forceValue: nullValue },
+                    // FIXME: geometry type is either string or object update validation
+                    geometry: (
+                        inputType === PROJECT_INPUT_TYPE_LINK
+                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    ) && projectType === PROJECT_TYPE_FOOTPRINT
+                        ? { required: true, validations: [validGeometryCondition] }
+                        : { forceValue: nullValue },
+                    // FIXME: number string condition
+                    TMId: (
+                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                    ) && projectType === PROJECT_TYPE_FOOTPRINT
+                        ? {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                        }
+                        : { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType', 'filter'],
+            ['filterText'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                const filter = v?.filter;
+
+                if (
+                    filter === FILTER_OTHERS
+                    && projectType === PROJECT_TYPE_FOOTPRINT
+                    && (
+                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    )
+                ) {
+                    return {
+                        filterText: {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                        },
+                    };
+                }
+                return {
+                    filterText: { forceValue: nullValue },
+                };
+            },
+        );
 
         return baseSchema;
     },
-    fieldDependencies: () => ({
-        geometry: ['zoomLevel'],
-    }),
 };
 
 export function generateProjectName(
diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
deleted file mode 100644
index 909fb2401..000000000
--- a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { MdAdd } from 'react-icons/md';
-import Button from '#components/Button';
-import Card from '#components/Card';
-import Heading from '#components/Heading';
-import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
-import TextInput from '#components/TextInput';
-
-import styles from './styles.css';
-
-export default function DescribeOptions() {
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
-
-    return (
-        <Card
-            title="Define Options"
-            contentClassName={styles.optionsContainer}
-        >
-            <Heading level={4}>
-                Option Instructions
-            </Heading>
-            <Button
-                name="add_instruction"
-                icons={<MdAdd />}
-            >
-                Add instruction
-            </Button>
-            <Tabs
-                value={activeOptionsTab}
-                onChange={setActiveOptionsTab}
-            >
-                <TabList>
-                    <Tab
-                        name="option1"
-                    >
-                        Option 1
-                    </Tab>
-                    <Tab
-                        name="option2"
-                    >
-                        Option 2
-                    </Tab>
-                </TabList>
-                <TabPanel
-                    name="option1"
-                >
-                    <div className={styles.optionForm}>
-                        <TextInput
-                            label="Title"
-                            value=""
-                            name="title"
-                        />
-                        <TextInput
-                            label="Description"
-                            value=""
-                            name="description"
-                        />
-                        <Heading level={4}>
-                            Reasons
-                        </Heading>
-                        <Button
-                            name="add_instrcution"
-                            icons={<MdAdd />}
-                        >
-                            Add Reasons
-                        </Button>
-                        <TextInput
-                            label="Title"
-                            value=""
-                            name="title"
-                        />
-                        <TextInput
-                            label="Description"
-                            value=""
-                            name="description"
-                        />
-                    </div>
-                </TabPanel>
-            </Tabs>
-
-        </Card>
-    );
-}
diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css b/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css
deleted file mode 100644
index 8a7cfd02c..000000000
--- a/manager-dashboard/app/views/NewTutorial/DescribeOptions/styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.options-container{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-large);
-
-    .option-form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium);
-    }
-}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
index 8c5cd738d..c96197242 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -3,6 +3,8 @@ import {
     useFormObject,
     PartialForm,
     SetValueArg,
+    Error,
+    getErrorObject,
 } from '@togglecorp/toggle-form';
 import TextInput from '#components/TextInput';
 import Heading from '#components/Heading';
@@ -69,6 +71,7 @@ interface ScenarioTabsProps {
     value: PartialScenarioType,
     onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
+    error: Error<PartialScenarioType> | undefined;
 }
 
 export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
@@ -76,6 +79,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
         value,
         onChange,
         index,
+        error: riskyError,
     } = scenarioProps;
 
     const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
@@ -83,6 +87,11 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
     const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>('instructions', onFieldChange, {});
     const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>('hint', onFieldChange, {});
     const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>('success', onFieldChange, {});
+    const error = getErrorObject(riskyError);
+
+    const instructionsError = getErrorObject(error?.instructions);
+    const hintError = getErrorObject(error?.hint);
+    const successError = getErrorObject(error?.success);
 
     return (
         <TabPanel
@@ -99,12 +108,14 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                             value={value.instructions?.title}
                             label="Title"
                             onChange={onInstructionFieldChange}
+                            error={instructionsError?.title}
                         />
                         <TextInput
                             name="description"
                             value={value.instructions?.description}
                             label="Description"
                             onChange={onInstructionFieldChange}
+                            error={instructionsError?.description}
                         />
                     </div>
                     <SelectInput
@@ -115,6 +126,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                         keySelector={(d: IconOptions) => d.key}
                         labelSelector={(d: IconOptions) => d.label}
                         onChange={onInstructionFieldChange}
+                        error={instructionsError?.icon}
                     />
                 </div>
                 <Heading level={4}>
@@ -127,12 +139,14 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                             value={value.hint?.title}
                             label="Title"
                             onChange={onHintFieldChange}
+                            error={hintError?.title}
                         />
                         <TextInput
                             name="description"
                             value={value.hint?.description}
                             label="Description"
                             onChange={onHintFieldChange}
+                            error={hintError?.description}
                         />
                     </div>
                     <SelectInput
@@ -143,6 +157,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                         keySelector={(d: IconOptions) => d.key}
                         labelSelector={(d: IconOptions) => d.label}
                         onChange={onHintFieldChange}
+                        error={hintError?.icon}
                     />
                 </div>
                 <Heading level={4}>
@@ -155,12 +170,14 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                             value={value.success?.title}
                             label="Title"
                             onChange={onSuccessFieldChange}
+                            error={successError?.title}
                         />
                         <TextInput
                             name="description"
                             value={value.success?.description}
                             label="Description"
                             onChange={onSuccessFieldChange}
+                            error={successError?.description}
                         />
                     </div>
                     <SelectInput
@@ -171,6 +188,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
                         keySelector={(d: IconOptions) => d.key}
                         labelSelector={(d: IconOptions) => d.label}
                         onChange={onSuccessFieldChange}
+                        error={successError?.icon}
                     />
                 </div>
             </div>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8f0857812..a30ddaf75 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -65,7 +65,6 @@ import {
     PartialTutorialFormType,
 } from './utils';
 import ScenarioInput from './ScenarioInput';
-import DescribeOptions from './DescribeOptions';
 import styles from './styles.css';
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -114,6 +113,10 @@ function NewTutorial(props: Props) {
         () => getErrorObject(formError),
         [formError],
     );
+    const scenarioError = React.useMemo(
+        () => getErrorObject(error?.screens),
+        [error?.screens],
+    );
 
     const handleFormSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
@@ -328,9 +331,6 @@ function NewTutorial(props: Props) {
                             disabled={submissionPending}
                         />
                     </Card>
-                    {value.projectType === 2 && (
-                        <DescribeOptions />
-                    )}
                     <Card
                         title="Describe Scenarios"
                         contentClassName={styles.cardScenarios}
@@ -357,6 +357,7 @@ function NewTutorial(props: Props) {
                                             index={index}
                                             value={task}
                                             onChange={onScenarioFormChange}
+                                            error={scenarioError?.[task.scenario]}
                                         />
                                     ))}
                                 </>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 0781370c5..00de09073 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -7,6 +7,7 @@ import {
     integerCondition,
     nullValue,
     ArraySchema,
+    addCondition,
 } from '@togglecorp/toggle-form';
 import {
     TileServer,
@@ -87,7 +88,7 @@ type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
 
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
-        const baseSchema: TutorialFormSchemaFields = {
+        let baseSchema: TutorialFormSchemaFields = {
             projectType: {
                 required: true,
             },
@@ -149,12 +150,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                     requiredValidation: requiredStringCondition,
                                     validations: [getNoMoreThanNCharacterCondition(500)],
                                 },
-                                hintDescription: {
+                                description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
                                     validations: [getNoMoreThanNCharacterCondition(500)],
                                 },
-                                hintIcon: { required: true },
+                                icon: { required: true },
                             }),
                         },
                     }),
@@ -164,29 +165,13 @@ export const tutorialFormSchema: TutorialFormSchema = {
             tutorialTasks: { required: true },
             exampleImage1: { required: true },
             exampleImage2: { required: true },
-
-            tileServerB: { forceValue: nullValue },
-            zoomLevel: { forceValue: nullValue },
         };
-
-        if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
-            return {
-                ...baseSchema,
-                zoomLevel: {
-                    required: true,
-                    validations: [
-                        greaterThanOrEqualToCondition(14),
-                        lessThanOrEqualToCondition(22),
-                        integerCondition,
-                    ],
-                },
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-            || value?.projectType === PROJECT_TYPE_COMPLETENESS) {
-            return {
-                ...baseSchema,
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['zoomLevel'],
+            (v) => (v?.projectType === PROJECT_TYPE_BUILD_AREA ? {
                 zoomLevel: {
                     required: true,
                     validations: [
@@ -195,12 +180,34 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         integerCondition,
                     ],
                 },
-                tileServerB: {
-                    fields: tileServerFieldsSchema,
-                },
-            };
-        }
-
+            } : {
+                zoomLevel: { forceValue: nullValue },
+            }),
+        );
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['zoomLevel', 'tileServerB'],
+            (v) => (v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                || v?.projectType === PROJECT_TYPE_COMPLETENESS
+                ? {
+                    zoomLevel: {
+                        required: true,
+                        validations: [
+                            greaterThanOrEqualToCondition(14),
+                            lessThanOrEqualToCondition(22),
+                            integerCondition,
+                        ],
+                    },
+                    tileServerB: {
+                        fields: tileServerFieldsSchema,
+                    },
+                } : {
+                    zoomLevel: { forceValue: nullValue },
+                    tileServerB: { forceValue: nullValue },
+                }),
+        );
         return baseSchema;
     },
 };
diff --git a/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx b/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
index c71ee44af..016da91bf 100644
--- a/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
+++ b/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
@@ -18,8 +18,8 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    requiredCondition,
     analyzeErrors,
+    requiredStringCondition,
 } from '@togglecorp/toggle-form';
 import {
     MdOutlinePublishedWithChanges,
@@ -51,8 +51,16 @@ const MAX_CHARS_DESCRIPTION = 100;
 
 const userGroupFormSchema: UserGroupFormSchema = {
     fields: (): UserGroupFormSchemaFields => ({
-        name: [requiredCondition, getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
-        description: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
+        },
+        description: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        },
     }),
 };
 
@@ -75,7 +83,7 @@ function UserGroupFormModal(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(userGroupFormSchema, defaultUserGroupFormValue);
+    } = useForm(userGroupFormSchema, { value: defaultUserGroupFormValue });
 
     const mountedRef = useMountedRef();
     const { user } = React.useContext(UserContext);
diff --git a/manager-dashboard/package.json b/manager-dashboard/package.json
index f4f758cfc..41efd07b4 100644
--- a/manager-dashboard/package.json
+++ b/manager-dashboard/package.json
@@ -14,12 +14,7 @@
         "build:prod": "webpack --mode=production --node-env=production",
         "watch": "webpack --watch",
         "start": "webpack serve --mode=development",
-        "initialize": "mkdir -p generated && yes n | cp -i type.template.tsx generated/types.tsx 2>/dev/null",
-        "check-unused": "unimported",
-        "prelint": "yarn initialize",
-        "pretypecheck": "yarn initialize",
-        "prebuild": "yarn initialize",
-        "prestart": "yarn initialize"
+        "check-unused": "unimported"
     },
     "repository": {
         "type": "git",
@@ -39,7 +34,7 @@
         "@sentry/react": "^6.9.0",
         "@sentry/tracing": "^6.9.0",
         "@togglecorp/fujs": "^1.9.2",
-        "@togglecorp/toggle-form": "^2.0.2",
+        "@togglecorp/toggle-form": "^2.0.3",
         "@turf/area": "^6.5.0",
         "@turf/invariant": "^6.5.0",
         "apollo-link": "^1.2.14",
@@ -77,8 +72,8 @@
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",
         "@types/react-router-dom": "^5.1.8",
-        "@typescript-eslint/eslint-plugin": "^4.28.3",
-        "@typescript-eslint/parser": "^4.28.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.8",
+        "@typescript-eslint/parser": "^5.59.8",
         "babel-jest": "^27.4.6",
         "babel-loader": "^8.2.2",
         "babel-plugin-graphql-tag": "^3.3.0",
@@ -120,7 +115,7 @@
         "stylelint-config-recommended": "^5.0.0",
         "stylelint-webpack-plugin": "^2.2.2",
         "terser-webpack-plugin": "^5.1.4",
-        "typescript": "^4.3.5",
+        "typescript": "^5.0.4",
         "unimported": "^1.19.1",
         "webpack": "^5.27.0",
         "webpack-cli": "^4.5.0",
diff --git a/manager-dashboard/yarn.lock b/manager-dashboard/yarn.lock
index 11617e234..d3d6cf3e4 100644
--- a/manager-dashboard/yarn.lock
+++ b/manager-dashboard/yarn.lock
@@ -1361,6 +1361,18 @@
     ts-node "^9"
     tslib "^2"
 
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
+  integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -2957,10 +2969,10 @@
   dependencies:
     "@babel/runtime" "^7.19.0"
 
-"@togglecorp/toggle-form@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-2.0.2.tgz#c347b0e756479bcf0b478a4dea763b0c35644a48"
-  integrity sha512-Q14PsF0KL0i0NBrPPCJ38zWFtBih2FQvMmSJqVDbkYCdwIIE/cmNKwGh/bayTsEHPlCbIGkoEvx1Ak9hXEL2Cg==
+"@togglecorp/toggle-form@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-2.0.3.tgz#4867900b11aef8a9a53833535530fa911264b762"
+  integrity sha512-43JytRKdqWu9LrRDAbVxyaDjmFWsjEwWfG3UdFl8lbdE/M/BCU/yZIYTq8B8Xavf6ryUhcFIjWbSEAEBdc0K2A==
   dependencies:
     "@babel/runtime" "^7.19.0"
     "@togglecorp/fujs" "^2.0.0"
@@ -3152,7 +3164,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138"
   integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -3278,6 +3290,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.3.12":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
+  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -3325,33 +3342,23 @@
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
   integrity sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==
 
-"@typescript-eslint/eslint-plugin@^4.28.3":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
-  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "4.33.0"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    debug "^4.3.1"
-    functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
-    regexpp "^3.1.0"
-    semver "^7.3.5"
+"@typescript-eslint/eslint-plugin@^5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz#1e7a3e5318ece22251dfbc5c9c6feeb4793cc509"
+  integrity sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/type-utils" "5.59.8"
+    "@typescript-eslint/utils" "5.59.8"
+    debug "^4.3.4"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
-  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
-  dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
-"@typescript-eslint/parser@^4.28.1", "@typescript-eslint/parser@^4.28.3":
+"@typescript-eslint/parser@^4.28.1":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
   integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
@@ -3361,6 +3368,16 @@
     "@typescript-eslint/typescript-estree" "4.33.0"
     debug "^4.3.1"
 
+"@typescript-eslint/parser@^5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.8.tgz#60cbb00671d86cf746044ab797900b1448188567"
+  integrity sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
@@ -3369,11 +3386,34 @@
     "@typescript-eslint/types" "4.33.0"
     "@typescript-eslint/visitor-keys" "4.33.0"
 
+"@typescript-eslint/scope-manager@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz#ff4ad4fec6433647b817c4a7d4b4165d18ea2fa8"
+  integrity sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/visitor-keys" "5.59.8"
+
+"@typescript-eslint/type-utils@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz#aa6c029a9d7706d26bbd25eb4666398781df6ea2"
+  integrity sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    "@typescript-eslint/utils" "5.59.8"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
   integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
 
+"@typescript-eslint/types@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.8.tgz#212e54414733618f5d0fd50b2da2717f630aebf8"
+  integrity sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==
+
 "@typescript-eslint/typescript-estree@4.33.0", "@typescript-eslint/typescript-estree@^4.28.1":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
@@ -3387,6 +3427,33 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz#801a7b1766481629481b3b0878148bd7a1f345d7"
+  integrity sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/visitor-keys" "5.59.8"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.8.tgz#34d129f35a2134c67fdaf024941e8f96050dca2b"
+  integrity sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
 "@typescript-eslint/visitor-keys@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
@@ -3395,6 +3462,14 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz#aa6a7ef862add919401470c09e1609392ef3cc40"
+  integrity sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    eslint-visitor-keys "^3.3.0"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -5312,7 +5387,7 @@ debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2:
+debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -5986,13 +6061,6 @@ eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
@@ -6003,6 +6071,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.3.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
+
 eslint-webpack-plugin@^2.5.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.6.0.tgz#3bd4ada4e539cb1f6687d2f619073dbb509361cd"
@@ -6314,6 +6387,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.5:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6805,6 +6889,18 @@ globby@11.x.x, globby@^11.0.3, globby@^11.0.4:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -6855,6 +6951,11 @@ graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 graphql-anywhere@^4.2.7:
   version "4.2.7"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.2.7.tgz#c06fb40b1d62b39470c80e3731478dbbef060067"
@@ -7225,6 +7326,11 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 image-q@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
@@ -9065,7 +9171,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -9297,6 +9403,11 @@ native-url@^0.2.6:
   dependencies:
     querystring "^0.2.0"
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -11435,6 +11546,13 @@ semver@^7.3.2:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.7:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
@@ -12598,6 +12716,11 @@ typescript@^4.3.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
   integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
 
+typescript@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
+
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"

From c6d57da5d2cc060b89de087a2c473a17930b1083 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 31 May 2023 17:25:03 +0545
Subject: [PATCH 08/72] Add schema for define options form

---
 .../NewTutorial/DescribeOptions/index.tsx     | 84 ++++++++++++++++++
 .../app/views/NewTutorial/utils.ts            | 85 ++++++++++++++++++-
 2 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx

diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
new file mode 100644
index 000000000..050097519
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+
+import Button from '#components/Button';
+import Card from '#components/Card';
+import Heading from '#components/Heading';
+import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+
+import styles from './styles.css';
+
+export default function DescribeOptions() {
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
+
+    return (
+        <Card
+            title="Define Options"
+            contentClassName={styles.optionsContainer}
+        >
+            <Heading level={4}>
+                Option Instructions
+            </Heading>
+            <Button
+                name="add_instruction"
+                icons={<MdAdd />}
+            >
+                Add instruction
+            </Button>
+            <Tabs
+                value={activeOptionsTab}
+                onChange={setActiveOptionsTab}
+            >
+                <TabList>
+                    <Tab
+                        name="option1"
+                    >
+                        Option 1
+                    </Tab>
+                    <Tab
+                        name="option2"
+                    >
+                        Option 2
+                    </Tab>
+                </TabList>
+                <TabPanel
+                    name="option1"
+                >
+                    <div className={styles.optionForm}>
+                        <TextInput
+                            label="Title"
+                            value=""
+                            name="title"
+                        />
+                        <TextInput
+                            label="Description"
+                            value=""
+                            name="description"
+                        />
+                        <Heading level={4}>
+                            Reasons
+                        </Heading>
+                        <Button
+                            name="add_instrcution"
+                            icons={<MdAdd />}
+                        >
+                            Add Reasons
+                        </Button>
+                        <TextInput
+                            label="Title"
+                            value=""
+                            name="title"
+                        />
+                        <TextInput
+                            label="Description"
+                            value=""
+                            name="description"
+                        />
+                    </div>
+                </TabPanel>
+            </Tabs>
+
+        </Card>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 00de09073..7d2687af1 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -20,6 +20,7 @@ import {
     PROJECT_TYPE_BUILD_AREA,
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_COMPLETENESS,
+    PROJECT_TYPE_FOOTPRINT,
 } from '#utils/common';
 
 // FIXME: include here
@@ -37,6 +38,19 @@ export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
     tile_z: number;
 }>;
 
+export type DefineOptions = {
+    option: number;
+    title: string;
+    description: string;
+    icon: string;
+    iconColor: string;
+    reasons: {
+        reason: number;
+        description: string;
+        icon: string;
+    }[];
+}[];
+
 export interface TutorialFormType {
     lookFor: string;
     name: string;
@@ -65,6 +79,7 @@ export interface TutorialFormType {
     projectType: ProjectType;
     tileServerB?: TileServer,
     zoomLevel?: number;
+    defineOptions?: DefineOptions;
 }
 
 export type PartialTutorialFormType = PartialForm<
@@ -73,7 +88,7 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'scenario' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2'
+    'scenario' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'option' | 'reason'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
@@ -86,6 +101,13 @@ type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
 type ScreenFormSchema = ArraySchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
 
+type DefineOptionsType = NonNullable<PartialTutorialFormType['defineOptions']>[number];
+type DefineOptionsSchema = ObjectSchema<DefineOptionsType, PartialTutorialFormType>;
+type DefineOptionsSchemaFields = ReturnType<DefineOptionsSchema['fields']>
+
+type DefineOptionsFormSchema = ArraySchema<DefineOptionsType, PartialTutorialFormType>;
+type DefineOptionsFormSchemaMember = ReturnType<DefineOptionsFormSchema['member']>;
+
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
         let baseSchema: TutorialFormSchemaFields = {
@@ -166,6 +188,67 @@ export const tutorialFormSchema: TutorialFormSchema = {
             exampleImage1: { required: true },
             exampleImage2: { required: true },
         };
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['defineOptions'],
+            (v) => {
+                const defineOptionsField: DefineOptionsFormSchema = {
+                    keySelector: (key) => key.option,
+                    member: (): DefineOptionsFormSchemaMember => ({
+                        fields: (): DefineOptionsSchemaFields => ({
+                            option: {
+                                required: true,
+                            },
+                            title: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(500)],
+                            },
+                            description: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(500)],
+                            },
+                            icon: {
+                                required: true,
+                            },
+                            iconColor: {
+                                required: true,
+                            },
+                            reasons: {
+                                keySelector: (key) => key.reason,
+                                member: () => ({
+                                    fields: () => ({
+                                        reason: {
+                                            required: true,
+                                        },
+                                        description: {
+                                            required: true,
+                                            requiredValidation: requiredStringCondition,
+                                            validations: [getNoMoreThanNCharacterCondition(500)],
+                                        },
+                                        icon: {
+                                            required: true,
+                                        },
+                                    }),
+                                }),
+                            },
+                        }),
+                    }),
+                };
+
+                if (v?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        defineOptions: defineOptionsField,
+                    };
+                }
+                return {
+                    defineOptions: { forceValue: nullValue },
+                };
+            },
+        );
         baseSchema = addCondition(
             baseSchema,
             value,

From 1093f37e75f933b237697c36d64c5dfeefd80964 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 2 Jun 2023 18:09:23 +0545
Subject: [PATCH 09/72] Add define option form

---
 .../views/NewTutorial/DefineOptions/index.tsx |  75 ++++++++++++
 .../NewTutorial/DefineOptions/styles.css      |  11 ++
 .../NewTutorial/DescribeOptions/index.tsx     |  84 -------------
 .../views/NewTutorial/ScenarioInput/index.tsx |   1 +
 .../app/views/NewTutorial/index.tsx           | 111 ++++++++++++++++++
 5 files changed, 198 insertions(+), 84 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css
 delete mode 100644 manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx

diff --git a/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
new file mode 100644
index 000000000..b728524cf
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+
+import { SetValueArg, Error, useFormObject, getErrorObject } from '@togglecorp/toggle-form';
+import Button from '#components/Button';
+import Heading from '#components/Heading';
+import { TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+
+import styles from './styles.css';
+import { PartialTutorialFormType } from '../utils';
+
+type PartialDefineOptionType = NonNullable<PartialTutorialFormType['defineOptions']>[number]
+const defaultDefineOptionValue: PartialDefineOptionType = {
+    option: 1,
+};
+interface Props {
+    value: PartialDefineOptionType,
+    onChange: (value: SetValueArg<PartialDefineOptionType>, index: number) => void;
+    index: number;
+    error: Error<PartialDefineOptionType> | undefined
+}
+
+export default function DefineOptions(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+    } = props;
+
+    const onOptionChange = useFormObject(index, onChange, defaultDefineOptionValue);
+    const error = getErrorObject(riskyError);
+    return (
+        <TabPanel
+            name={`${value.option}`}
+        >
+            <div className={styles.optionForm}>
+                <TextInput
+                    label="Title"
+                    value={value?.title}
+                    name={'title' as const}
+                    onChange={onOptionChange}
+                    error={error?.title}
+                />
+                <TextInput
+                    label="Description"
+                    value={value.description}
+                    name={'description' as const}
+                    onChange={onOptionChange}
+                    error={error?.description}
+                />
+                <Heading level={4}>
+                    Reasons
+                </Heading>
+                <Button
+                    name="add_instrcution"
+                    icons={<MdAdd />}
+                >
+                    Add Reasons
+                </Button>
+                <TextInput
+                    label="Title"
+                    value=""
+                    name="title"
+                />
+                <TextInput
+                    label="Description"
+                    value=""
+                    name="description"
+                />
+            </div>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css b/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css
new file mode 100644
index 000000000..8a7cfd02c
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css
@@ -0,0 +1,11 @@
+.options-container{
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+
+    .option-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
deleted file mode 100644
index 050097519..000000000
--- a/manager-dashboard/app/views/NewTutorial/DescribeOptions/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import { MdAdd } from 'react-icons/md';
-
-import Button from '#components/Button';
-import Card from '#components/Card';
-import Heading from '#components/Heading';
-import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
-import TextInput from '#components/TextInput';
-
-import styles from './styles.css';
-
-export default function DescribeOptions() {
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
-
-    return (
-        <Card
-            title="Define Options"
-            contentClassName={styles.optionsContainer}
-        >
-            <Heading level={4}>
-                Option Instructions
-            </Heading>
-            <Button
-                name="add_instruction"
-                icons={<MdAdd />}
-            >
-                Add instruction
-            </Button>
-            <Tabs
-                value={activeOptionsTab}
-                onChange={setActiveOptionsTab}
-            >
-                <TabList>
-                    <Tab
-                        name="option1"
-                    >
-                        Option 1
-                    </Tab>
-                    <Tab
-                        name="option2"
-                    >
-                        Option 2
-                    </Tab>
-                </TabList>
-                <TabPanel
-                    name="option1"
-                >
-                    <div className={styles.optionForm}>
-                        <TextInput
-                            label="Title"
-                            value=""
-                            name="title"
-                        />
-                        <TextInput
-                            label="Description"
-                            value=""
-                            name="description"
-                        />
-                        <Heading level={4}>
-                            Reasons
-                        </Heading>
-                        <Button
-                            name="add_instrcution"
-                            icons={<MdAdd />}
-                        >
-                            Add Reasons
-                        </Button>
-                        <TextInput
-                            label="Title"
-                            value=""
-                            name="title"
-                        />
-                        <TextInput
-                            label="Description"
-                            value=""
-                            name="description"
-                        />
-                    </div>
-                </TabPanel>
-            </Tabs>
-
-        </Card>
-    );
-}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
index c96197242..ffb86928f 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -87,6 +87,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
     const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>('instructions', onFieldChange, {});
     const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>('hint', onFieldChange, {});
     const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>('success', onFieldChange, {});
+
     const error = getErrorObject(riskyError);
 
     const instructionsError = getErrorObject(error?.instructions);
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index a30ddaf75..16ee11036 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -27,6 +27,7 @@ import {
     MdSwipe,
     MdOutlinePublishedWithChanges,
     MdOutlineUnpublished,
+    MdAdd,
 } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 
@@ -57,6 +58,7 @@ import {
     PROJECT_TYPE_BUILD_AREA,
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_CHANGE_DETECTION,
+    PROJECT_TYPE_FOOTPRINT,
 } from '#utils/common';
 
 import {
@@ -64,9 +66,55 @@ import {
     TutorialFormType,
     PartialTutorialFormType,
 } from './utils';
+import DefineOptions from './DefineOptions';
 import ScenarioInput from './ScenarioInput';
 import styles from './styles.css';
+import Heading from '#components/Heading';
 
+const defaultDefineOptions: PartialTutorialFormType['defineOptions'] = [
+    {
+        option: 1,
+        title: 'Yes',
+        description: '',
+        icon: '',
+        iconColor: '',
+        reasons: [
+            {
+                reason: 1,
+                description: '',
+                icon: '',
+            },
+        ],
+    },
+    {
+        option: 2,
+        title: 'No',
+        description: '',
+        icon: '',
+        iconColor: '',
+        reasons: [
+            {
+                reason: 1,
+                description: '',
+                icon: '',
+            },
+        ],
+    },
+    {
+        option: 3,
+        title: 'Not sure',
+        description: '',
+        icon: '',
+        iconColor: '',
+        reasons: [
+            {
+                reason: 1,
+                description: '',
+                icon: '',
+            },
+        ],
+    },
+];
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
     zoomLevel: 18,
@@ -78,6 +126,7 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
+    defineOptions: defaultDefineOptions,
 };
 
 interface Props {
@@ -109,6 +158,8 @@ function NewTutorial(props: Props) {
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
     const [activeTab, setActiveTab] = React.useState('Scenario 1');
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
+
     const error = React.useMemo(
         () => getErrorObject(formError),
         [formError],
@@ -118,6 +169,11 @@ function NewTutorial(props: Props) {
         [error?.screens],
     );
 
+    const optionsError = React.useMemo(
+        () => getErrorObject(error?.defineOptions),
+        [error?.defineOptions],
+    );
+
     const handleFormSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
     ) => {
@@ -219,6 +275,17 @@ function NewTutorial(props: Props) {
         [error],
     );
 
+    const {
+        setValue: onOptionsAdd,
+    } = useFormArray('defineOptions', setFieldValue);
+
+    // const handleAddDefineOptions = useCallback(
+    //     () => {
+    //         setFieldValue(defaultDefineOptions, 'defineOptions');
+    //     },
+    //     [setFieldValue],
+    // );
+
     const submissionPending = (
         tutorialSubmissionStatus === 'started'
         || tutorialSubmissionStatus === 'imageUpload'
@@ -331,6 +398,50 @@ function NewTutorial(props: Props) {
                             disabled={submissionPending}
                         />
                     </Card>
+                    {value.projectType === PROJECT_TYPE_FOOTPRINT && (
+                        <Card
+                            title="Define Options"
+                        >
+                            <Heading level={4}>
+                                Option Instrucitons
+                            </Heading>
+                            <Button
+                                name="add_instruction"
+                                icons={<MdAdd />}
+                                // onClick={handleAddDefineOptions}
+                            >
+                                Add instruction
+                            </Button>
+                            {value.defineOptions?.length ? (
+                                <Tabs
+                                    value={activeOptionsTab}
+                                    onChange={setActiveOptionsTab}
+                                >
+                                    <TabList>
+                                        {value.defineOptions.map((opt) => (
+                                            <Tab
+                                                key={opt.option}
+                                                name={`${opt.option}`}
+                                            >
+                                                {`Option ${opt.option}`}
+                                            </Tab>
+                                        ))}
+                                    </TabList>
+                                    {value.defineOptions.map((options, index) => (
+                                        <DefineOptions
+                                            key={options.option}
+                                            value={options}
+                                            index={index}
+                                            onChange={onOptionsAdd}
+                                            error={optionsError?.[options.option]}
+                                        />
+                                    ))}
+                                </Tabs>
+                            ) : (
+                                <div>Add options</div>
+                            )}
+                        </Card>
+                    )}
                     <Card
                         title="Describe Scenarios"
                         contentClassName={styles.cardScenarios}

From 9af65c6c48abc8ba1dd361e61cb32ecbd074f3a9 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 5 Jun 2023 17:39:19 +0545
Subject: [PATCH 10/72] Add reasons form

---
 .../app/components/Tabs/index.tsx             |   3 +
 .../NewTutorial/DefineOption/Reason/index.tsx |  58 ++++++
 .../DefineOption/Reason/styles.css            |  12 ++
 .../views/NewTutorial/DefineOption/index.tsx  | 182 ++++++++++++++++++
 .../views/NewTutorial/DefineOption/styles.css |  27 +++
 .../views/NewTutorial/DefineOptions/index.tsx |  75 --------
 .../NewTutorial/DefineOptions/styles.css      |  11 --
 .../views/NewTutorial/ScenarioInput/index.tsx |  40 +---
 .../app/views/NewTutorial/index.tsx           | 128 ++++++------
 .../app/views/NewTutorial/styles.css          |   6 +-
 .../app/views/NewTutorial/utils.ts            |  99 +++++++---
 11 files changed, 425 insertions(+), 216 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/DefineOption/styles.css
 delete mode 100644 manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
 delete mode 100644 manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css

diff --git a/manager-dashboard/app/components/Tabs/index.tsx b/manager-dashboard/app/components/Tabs/index.tsx
index e7bcadf4f..98bc6552a 100644
--- a/manager-dashboard/app/components/Tabs/index.tsx
+++ b/manager-dashboard/app/components/Tabs/index.tsx
@@ -78,6 +78,7 @@ export function TabList(props: TabListProps) {
 export interface TabPanelProps extends React.HTMLProps<HTMLDivElement> {
     name: TabKey;
     elementRef?: React.Ref<HTMLDivElement>;
+    className?: string;
 }
 
 export function TabPanel(props: TabPanelProps) {
@@ -86,6 +87,7 @@ export function TabPanel(props: TabPanelProps) {
     const {
         name,
         elementRef,
+        className,
         ...otherProps
     } = props;
 
@@ -98,6 +100,7 @@ export function TabPanel(props: TabPanelProps) {
             {...otherProps}
             role="tabpanel"
             ref={elementRef}
+            className={className}
         />
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx b/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx
new file mode 100644
index 000000000..d3cf1e9f0
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+    Error,
+    SetValueArg,
+    getErrorObject,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+import { TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+import Button from '#components/Button';
+
+import { PartialDefineOptionType } from '..';
+import styles from './styles.css';
+
+type PartialReasonType = NonNullable<PartialDefineOptionType['reason']>[number]
+
+interface Props {
+    value: PartialReasonType;
+    onChange: (value: SetValueArg<PartialReasonType>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    error: Error<PartialReasonType> | undefined;
+}
+export default function Reason(props: Props) {
+    const {
+        value,
+        onChange,
+        onRemove,
+        index,
+        error: riskyError,
+    } = props;
+
+    const onReasonChange = useFormObject(index, onChange, { reasonId: 1 });
+
+    const error = getErrorObject(riskyError);
+    return (
+        <TabPanel
+            name={`${value.reasonId}`}
+            className={styles.reasonContent}
+        >
+            <TextInput
+                className={styles.reasonInput}
+                label="Description"
+                value={value.description}
+                name={'description' as const}
+                error={error?.description}
+                onChange={onReasonChange}
+            />
+            <Button
+                name={index}
+                onClick={onRemove}
+                className={styles.removeButton}
+            >
+                Delete this Reason
+            </Button>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css b/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css
new file mode 100644
index 000000000..bdd535e6e
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css
@@ -0,0 +1,12 @@
+.reason-content {
+    display: flex;
+    gap: var(--spacing-medium);
+
+    .reason-input {
+        flex-grow: 1;
+    }
+    .remove-button {
+        width: fit-content;
+        height: fit-content;
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx b/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
new file mode 100644
index 000000000..d2b9f7501
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+import Button from '#components/Button';
+import Heading from '#components/Heading';
+import Tabs, { TabList, TabPanel, Tab } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+import SelectInput from '#components/SelectInput';
+
+import Reason from './Reason';
+import {
+    IconOptions,
+    PartialTutorialFormType,
+    iconColorOptions,
+    iconOptions,
+} from '../utils';
+
+import styles from './styles.css';
+
+export type PartialDefineOptionType = NonNullable<PartialTutorialFormType['defineOption']>[number]
+const defaultDefineOptionValue: PartialDefineOptionType = {
+    optionId: 1,
+};
+
+type ReasonType = NonNullable<PartialDefineOptionType['reason']>[number];
+
+interface Props {
+    value: PartialDefineOptionType;
+    onChange: (value: SetValueArg<PartialDefineOptionType>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    error: Error<PartialDefineOptionType> | undefined;
+}
+
+export default function DefineOption(props: Props) {
+    const {
+        value,
+        onChange,
+        onRemove,
+        index,
+        error: riskyError,
+    } = props;
+
+    const [activeReason, setActiveReason] = React.useState('1');
+    const [reasonId, setReasonId] = React.useState(0);
+
+    const onOptionChange = useFormObject(index, onChange, defaultDefineOptionValue);
+
+    const {
+        setValue: onReasonAdd,
+        removeValue: onReasonRemove,
+    } = useFormArray('reason', onOptionChange);
+
+    const error = getErrorObject(riskyError);
+
+    const reasonError = React.useMemo(
+        () => getErrorObject(error?.reason),
+        [error?.reason],
+    );
+
+    const handleReasonAdd = React.useCallback(
+        () => {
+            const newReasonId = reasonId + 1;
+            setReasonId(newReasonId);
+            const newReason : ReasonType = {
+                reasonId: newReasonId,
+            };
+            onOptionChange(
+                (oldValue: PartialDefineOptionType['reason']) => (
+                    [...(oldValue ?? []), newReason]
+                ),
+                'reason',
+            );
+        },
+        [onOptionChange, reasonId],
+    );
+
+    return (
+        <TabPanel
+            name={`${value.optionId}`}
+        >
+            <div className={styles.optionForm}>
+                <div className={styles.optionContent}>
+                    <TextInput
+                        className={styles.optionInput}
+                        label="Title"
+                        value={value?.title}
+                        name={'title' as const}
+                        onChange={onOptionChange}
+                        error={error?.title}
+                    />
+                    <SelectInput
+                        className={styles.optionIcon}
+                        name="icon"
+                        label="Icon"
+                        value={value?.icon}
+                        options={iconOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onOptionChange}
+                        error={error?.icon}
+                    />
+                </div>
+                <div className={styles.optionContent}>
+                    <TextInput
+                        className={styles.optionInput}
+                        label="Description"
+                        value={value.description}
+                        name={'description' as const}
+                        onChange={onOptionChange}
+                        error={error?.description}
+                    />
+                    <SelectInput
+                        className={styles.optionIcon}
+                        name="iconColor"
+                        label="Icon Color"
+                        value={value?.iconColor}
+                        options={iconColorOptions}
+                        keySelector={(d: IconOptions) => d.key}
+                        labelSelector={(d: IconOptions) => d.label}
+                        onChange={onOptionChange}
+                        error={error?.iconColor}
+                    />
+                </div>
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    className={styles.removeButton}
+                >
+                    Delete this option
+                </Button>
+                <Heading level={4}>
+                    Reason
+                </Heading>
+                <Button
+                    name="add_reason"
+                    className={styles.addButton}
+                    icons={<MdAdd />}
+                    onClick={handleReasonAdd}
+                >
+                    Add Reason
+                </Button>
+                {value.reason?.length ? (
+                    <Tabs
+                        value={activeReason}
+                        onChange={setActiveReason}
+                    >
+                        <TabList>
+                            {value.reason?.map((rea) => (
+                                <Tab
+                                    name={`${rea.reasonId}`}
+                                    key={rea.reasonId}
+                                >
+                                    {`Reason ${rea.reasonId}`}
+                                </Tab>
+                            ))}
+                        </TabList>
+                        {value.reason.map((rea, i) => (
+                            <Reason
+                                key={rea.reasonId}
+                                value={rea}
+                                index={i}
+                                onChange={onReasonAdd}
+                                onRemove={onReasonRemove}
+                                error={reasonError?.[rea.reasonId]}
+                            />
+                        ))}
+                    </Tabs>
+                ) : (
+                    <div>Add reason</div>
+                )}
+            </div>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/styles.css b/manager-dashboard/app/views/NewTutorial/DefineOption/styles.css
new file mode 100644
index 000000000..0a2844aa9
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/DefineOption/styles.css
@@ -0,0 +1,27 @@
+.option-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+
+    .option-content {
+        display: flex;
+        gap: var(--spacing-medium);
+
+        .option-input {
+            flex-grow: 1;
+        }
+
+        .option-icon {
+            flex-basis: 15%;
+        }
+    }
+
+    .remove-button {
+        align-self: end;
+        width: fit-content;
+    }
+
+    .add-button {
+        width: fit-content;
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx b/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
deleted file mode 100644
index b728524cf..000000000
--- a/manager-dashboard/app/views/NewTutorial/DefineOptions/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import { MdAdd } from 'react-icons/md';
-
-import { SetValueArg, Error, useFormObject, getErrorObject } from '@togglecorp/toggle-form';
-import Button from '#components/Button';
-import Heading from '#components/Heading';
-import { TabPanel } from '#components/Tabs';
-import TextInput from '#components/TextInput';
-
-import styles from './styles.css';
-import { PartialTutorialFormType } from '../utils';
-
-type PartialDefineOptionType = NonNullable<PartialTutorialFormType['defineOptions']>[number]
-const defaultDefineOptionValue: PartialDefineOptionType = {
-    option: 1,
-};
-interface Props {
-    value: PartialDefineOptionType,
-    onChange: (value: SetValueArg<PartialDefineOptionType>, index: number) => void;
-    index: number;
-    error: Error<PartialDefineOptionType> | undefined
-}
-
-export default function DefineOptions(props: Props) {
-    const {
-        value,
-        onChange,
-        index,
-        error: riskyError,
-    } = props;
-
-    const onOptionChange = useFormObject(index, onChange, defaultDefineOptionValue);
-    const error = getErrorObject(riskyError);
-    return (
-        <TabPanel
-            name={`${value.option}`}
-        >
-            <div className={styles.optionForm}>
-                <TextInput
-                    label="Title"
-                    value={value?.title}
-                    name={'title' as const}
-                    onChange={onOptionChange}
-                    error={error?.title}
-                />
-                <TextInput
-                    label="Description"
-                    value={value.description}
-                    name={'description' as const}
-                    onChange={onOptionChange}
-                    error={error?.description}
-                />
-                <Heading level={4}>
-                    Reasons
-                </Heading>
-                <Button
-                    name="add_instrcution"
-                    icons={<MdAdd />}
-                >
-                    Add Reasons
-                </Button>
-                <TextInput
-                    label="Title"
-                    value=""
-                    name="title"
-                />
-                <TextInput
-                    label="Description"
-                    value=""
-                    name="description"
-                />
-            </div>
-        </TabPanel>
-    );
-}
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css b/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css
deleted file mode 100644
index 8a7cfd02c..000000000
--- a/manager-dashboard/app/views/NewTutorial/DefineOptions/styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.options-container{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-large);
-
-    .option-form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium);
-    }
-}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
index ffb86928f..ea77c4908 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -14,9 +14,13 @@ import {
 } from '#components/Tabs';
 
 import styles from './styles.css';
+import {
+    IconOptions,
+    iconOptions,
+} from '../utils';
 
 type ScenarioType = {
-    scenario: string;
+    scenarioId: string;
     hint: {
         description: string;
         icon: string;
@@ -34,37 +38,9 @@ type ScenarioType = {
     };
 };
 
-interface IconOptions {
-    key: string;
-    label: string;
-}
-
-const iconOptions: IconOptions[] = [
-    {
-        key: 'swipe-left',
-        label: 'Swipe Left',
-    },
-    {
-        key: 'tap-1',
-        label: 'Tap 1',
-    },
-    {
-        key: 'tap-2',
-        label: 'Tap 2',
-    },
-    {
-        key: 'tap-3',
-        label: 'Tap 3',
-    },
-    {
-        key: 'check',
-        label: 'Check',
-    },
-];
-
-type PartialScenarioType = PartialForm<ScenarioType, 'scenario'>;
+type PartialScenarioType = PartialForm<ScenarioType, 'scenarioId'>;
 const defaultScenarioTabsValue: PartialScenarioType = {
-    scenario: 'xxx',
+    scenarioId: 'xxx',
 };
 
 interface ScenarioTabsProps {
@@ -96,7 +72,7 @@ export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
 
     return (
         <TabPanel
-            name={`Scenario ${value.scenario}`}
+            name={`Scenario ${value.scenarioId}`}
         >
             <div className={styles.scenario}>
                 <Heading level={4}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 16ee11036..022366e23 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -65,54 +65,26 @@ import {
     tutorialFormSchema,
     TutorialFormType,
     PartialTutorialFormType,
+    ScreenType,
+    DefineOptionType,
 } from './utils';
-import DefineOptions from './DefineOptions';
+import DefineOption from './DefineOption';
 import ScenarioInput from './ScenarioInput';
 import styles from './styles.css';
 import Heading from '#components/Heading';
 
-const defaultDefineOptions: PartialTutorialFormType['defineOptions'] = [
+const defaultDefineOption: PartialTutorialFormType['defineOption'] = [
     {
-        option: 1,
+        optionId: 1,
         title: 'Yes',
-        description: '',
-        icon: '',
-        iconColor: '',
-        reasons: [
-            {
-                reason: 1,
-                description: '',
-                icon: '',
-            },
-        ],
     },
     {
-        option: 2,
+        optionId: 2,
         title: 'No',
-        description: '',
-        icon: '',
-        iconColor: '',
-        reasons: [
-            {
-                reason: 1,
-                description: '',
-                icon: '',
-            },
-        ],
     },
     {
-        option: 3,
+        optionId: 3,
         title: 'Not sure',
-        description: '',
-        icon: '',
-        iconColor: '',
-        reasons: [
-            {
-                reason: 1,
-                description: '',
-                icon: '',
-            },
-        ],
     },
 ];
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -126,7 +98,7 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
-    defineOptions: defaultDefineOptions,
+    defineOption: defaultDefineOption,
 };
 
 interface Props {
@@ -158,7 +130,9 @@ function NewTutorial(props: Props) {
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
     const [activeTab, setActiveTab] = React.useState('Scenario 1');
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState('option1');
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
+
+    const [optionId, setOptionId] = React.useState(defaultDefineOption?.length ?? 3);
 
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -170,8 +144,8 @@ function NewTutorial(props: Props) {
     );
 
     const optionsError = React.useMemo(
-        () => getErrorObject(error?.defineOptions),
-        [error?.defineOptions],
+        () => getErrorObject(error?.defineOption),
+        [error?.defineOption],
     );
 
     const handleFormSubmission = React.useCallback((
@@ -268,7 +242,10 @@ function NewTutorial(props: Props) {
 
     const {
         setValue: onScenarioFormChange,
-    } = useFormArray('screens', setFieldValue);
+    } = useFormArray<
+        'screens',
+        ScreenType
+    >('screens', setFieldValue);
 
     const hasErrors = React.useMemo(
         () => analyzeErrors(error),
@@ -276,15 +253,29 @@ function NewTutorial(props: Props) {
     );
 
     const {
-        setValue: onOptionsAdd,
-    } = useFormArray('defineOptions', setFieldValue);
-
-    // const handleAddDefineOptions = useCallback(
-    //     () => {
-    //         setFieldValue(defaultDefineOptions, 'defineOptions');
-    //     },
-    //     [setFieldValue],
-    // );
+        setValue: onOptionAdd,
+        removeValue: onOptionRemove,
+    } = useFormArray<
+        'defineOption',
+        DefineOptionType
+    >('defineOption', setFieldValue);
+
+    const handleAddDefineOptions = React.useCallback(
+        () => {
+            const newOptionId = optionId + 1;
+            setOptionId(newOptionId);
+            const newDefineOption: DefineOptionType = {
+                optionId: newOptionId,
+            };
+            setFieldValue(
+                (oldValue: PartialTutorialFormType['defineOption']) => (
+                    [...(oldValue ?? []), newDefineOption]
+                ),
+                'defineOption',
+            );
+        },
+        [setFieldValue, optionId],
+    );
 
     const submissionPending = (
         tutorialSubmissionStatus === 'started'
@@ -307,7 +298,7 @@ function NewTutorial(props: Props) {
         const sorted = uniqueArray?.sort((a, b) => a.properties?.screen - b.properties.screen);
         const tutorialTaskArray = sorted?.map((geo) => (
             {
-                scenario: String(geo.properties.screen),
+                scenarioId: String(geo.properties.screen),
                 hint: {},
                 instructions: {},
                 success: {},
@@ -401,39 +392,42 @@ function NewTutorial(props: Props) {
                     {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                         <Card
                             title="Define Options"
+                            contentClassName={styles.card}
                         >
                             <Heading level={4}>
-                                Option Instrucitons
+                                Option Instructions
                             </Heading>
                             <Button
                                 name="add_instruction"
+                                className={styles.addButton}
                                 icons={<MdAdd />}
-                                // onClick={handleAddDefineOptions}
+                                onClick={handleAddDefineOptions}
                             >
                                 Add instruction
                             </Button>
-                            {value.defineOptions?.length ? (
+                            {value.defineOption?.length ? (
                                 <Tabs
                                     value={activeOptionsTab}
                                     onChange={setActiveOptionsTab}
                                 >
                                     <TabList>
-                                        {value.defineOptions.map((opt) => (
+                                        {value.defineOption.map((opt) => (
                                             <Tab
-                                                key={opt.option}
-                                                name={`${opt.option}`}
+                                                key={opt.optionId}
+                                                name={`${opt.optionId}`}
                                             >
-                                                {`Option ${opt.option}`}
+                                                {`Option ${opt.optionId}`}
                                             </Tab>
                                         ))}
                                     </TabList>
-                                    {value.defineOptions.map((options, index) => (
-                                        <DefineOptions
-                                            key={options.option}
+                                    {value.defineOption.map((options, index) => (
+                                        <DefineOption
+                                            key={options.optionId}
                                             value={options}
                                             index={index}
-                                            onChange={onOptionsAdd}
-                                            error={optionsError?.[options.option]}
+                                            onChange={onOptionAdd}
+                                            onRemove={onOptionRemove}
+                                            error={optionsError?.[options.optionId]}
                                         />
                                     ))}
                                 </Tabs>
@@ -455,20 +449,20 @@ function NewTutorial(props: Props) {
                                     <TabList>
                                         {value.screens?.map((task) => (
                                             <Tab
-                                                key={task.scenario}
-                                                name={`Scenario ${task.scenario}`}
+                                                key={task.scenarioId}
+                                                name={`Scenario ${task.scenarioId}`}
                                             >
-                                                {`Scenario ${task.scenario}`}
+                                                {`Scenario ${task.scenarioId}`}
                                             </Tab>
                                         ))}
                                     </TabList>
                                     {value.screens?.map((task, index) => (
                                         <ScenarioInput
-                                            key={task.scenario}
+                                            key={task.scenarioId}
                                             index={index}
                                             value={task}
                                             onChange={onScenarioFormChange}
-                                            error={scenarioError?.[task.scenario]}
+                                            error={scenarioError?.[task.scenarioId]}
                                         />
                                     ))}
                                 </>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 6fe87ab92..c06bdcc9b 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -16,7 +16,11 @@
         .card {
             display: flex;
             flex-direction: column;
-            gap: var(--spacing-extra-large);
+            gap: var(--spacing-large);
+
+            .add-button {
+                width: fit-content;
+            }
         }
 
         .input-group {
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 7d2687af1..c66f01d3f 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -23,6 +23,49 @@ import {
     PROJECT_TYPE_FOOTPRINT,
 } from '#utils/common';
 
+export interface IconOptions {
+    key: string;
+    label: string;
+}
+
+export const iconOptions: IconOptions[] = [
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+    },
+    {
+        key: 'tap-1',
+        label: 'Tap 1',
+    },
+    {
+        key: 'tap-2',
+        label: 'Tap 2',
+    },
+    {
+        key: 'tap-3',
+        label: 'Tap 3',
+    },
+    {
+        key: 'check',
+        label: 'Check',
+    },
+];
+
+export const iconColorOptions: IconOptions[] = [
+    {
+        key: 'green',
+        label: 'Green',
+    },
+    {
+        key: 'red',
+        label: 'Red',
+    },
+    {
+        key: 'yellow',
+        label: 'Yellow',
+    },
+];
+
 // FIXME: include here
 
 export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
@@ -38,16 +81,15 @@ export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
     tile_z: number;
 }>;
 
-export type DefineOptions = {
-    option: number;
+export type DefineOption = {
+    optionId: number;
     title: string;
     description: string;
     icon: string;
     iconColor: string;
-    reasons: {
-        reason: number;
+    reason: {
+        reasonId: number;
         description: string;
-        icon: string;
     }[];
 }[];
 
@@ -56,7 +98,7 @@ export interface TutorialFormType {
     name: string;
     tileServer: TileServer;
     screens: {
-        scenario: string;
+        scenarioId: string;
         hint: {
             description: string;
             icon: string;
@@ -79,7 +121,7 @@ export interface TutorialFormType {
     projectType: ProjectType;
     tileServerB?: TileServer,
     zoomLevel?: number;
-    defineOptions?: DefineOptions;
+    defineOption?: DefineOption;
 }
 
 export type PartialTutorialFormType = PartialForm<
@@ -88,25 +130,25 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'scenario' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'option' | 'reason'
+    'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
 type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 
-type ScreenType = NonNullable<PartialTutorialFormType['screens']>[number];
+export type ScreenType = NonNullable<PartialTutorialFormType['screens']>[number];
 type ScreenSchema = ObjectSchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
 
 type ScreenFormSchema = ArraySchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
 
-type DefineOptionsType = NonNullable<PartialTutorialFormType['defineOptions']>[number];
-type DefineOptionsSchema = ObjectSchema<DefineOptionsType, PartialTutorialFormType>;
-type DefineOptionsSchemaFields = ReturnType<DefineOptionsSchema['fields']>
+export type DefineOptionType = NonNullable<PartialTutorialFormType['defineOption']>[number];
+type DefineOptionSchema = ObjectSchema<DefineOptionType, PartialTutorialFormType>;
+type DefineOptionSchemaFields = ReturnType<DefineOptionSchema['fields']>
 
-type DefineOptionsFormSchema = ArraySchema<DefineOptionsType, PartialTutorialFormType>;
-type DefineOptionsFormSchemaMember = ReturnType<DefineOptionsFormSchema['member']>;
+type DefineOptionFormSchema = ArraySchema<DefineOptionType, PartialTutorialFormType>;
+type DefineOptionFormSchemaMember = ReturnType<DefineOptionFormSchema['member']>;
 
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
@@ -129,10 +171,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 fields: tileServerFieldsSchema,
             },
             screens: {
-                keySelector: (key) => key.scenario,
+                keySelector: (key) => key.scenarioId,
                 member: (): ScreenFormSchemaMember => ({
                     fields: (): ScreenFormSchemaFields => ({
-                        scenario: {
+                        scenarioId: {
                             required: true,
                         },
                         hint: {
@@ -192,13 +234,13 @@ export const tutorialFormSchema: TutorialFormSchema = {
             baseSchema,
             value,
             ['projectType'],
-            ['defineOptions'],
+            ['defineOption'],
             (v) => {
-                const defineOptionsField: DefineOptionsFormSchema = {
-                    keySelector: (key) => key.option,
-                    member: (): DefineOptionsFormSchemaMember => ({
-                        fields: (): DefineOptionsSchemaFields => ({
-                            option: {
+                const defineOptionField: DefineOptionFormSchema = {
+                    keySelector: (key) => key.optionId,
+                    member: (): DefineOptionFormSchemaMember => ({
+                        fields: (): DefineOptionSchemaFields => ({
+                            optionId: {
                                 required: true,
                             },
                             title: {
@@ -217,11 +259,11 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             iconColor: {
                                 required: true,
                             },
-                            reasons: {
-                                keySelector: (key) => key.reason,
+                            reason: {
+                                keySelector: (key) => key.reasonId,
                                 member: () => ({
                                     fields: () => ({
-                                        reason: {
+                                        reasonId: {
                                             required: true,
                                         },
                                         description: {
@@ -229,9 +271,6 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                             requiredValidation: requiredStringCondition,
                                             validations: [getNoMoreThanNCharacterCondition(500)],
                                         },
-                                        icon: {
-                                            required: true,
-                                        },
                                     }),
                                 }),
                             },
@@ -241,11 +280,11 @@ export const tutorialFormSchema: TutorialFormSchema = {
 
                 if (v?.projectType === PROJECT_TYPE_FOOTPRINT) {
                     return {
-                        defineOptions: defineOptionsField,
+                        defineOption: defineOptionField,
                     };
                 }
                 return {
-                    defineOptions: { forceValue: nullValue },
+                    defineOption: { forceValue: nullValue },
                 };
             },
         );

From d2d21787ef918fbf40f08d6a86ca9f4244be8b97 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 7 Jun 2023 17:06:48 +0545
Subject: [PATCH 11/72] Add page information form and schema

---
 .../views/NewTutorial/DefineOption/index.tsx  |  24 +--
 .../InformationPage/Block/index.tsx           |  54 ++++++
 .../InformationPage/Block/styles.css          |   0
 .../NewTutorial/InformationPage/index.tsx     |  74 ++++++++
 .../NewTutorial/InformationPage/styles.css    |   3 +
 .../views/NewTutorial/ScenarioInput/index.tsx |   6 +-
 .../app/views/NewTutorial/index.tsx           | 168 ++++++++++++++++--
 .../app/views/NewTutorial/utils.ts            |  78 +++++++-
 8 files changed, 376 insertions(+), 31 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPage/styles.css

diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx b/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
index d2b9f7501..fce0bfa2d 100644
--- a/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
@@ -49,7 +49,6 @@ export default function DefineOption(props: Props) {
     } = props;
 
     const [activeReason, setActiveReason] = React.useState('1');
-    const [reasonId, setReasonId] = React.useState(0);
 
     const onOptionChange = useFormObject(index, onChange, defaultDefineOptionValue);
 
@@ -67,19 +66,24 @@ export default function DefineOption(props: Props) {
 
     const handleReasonAdd = React.useCallback(
         () => {
-            const newReasonId = reasonId + 1;
-            setReasonId(newReasonId);
-            const newReason : ReasonType = {
-                reasonId: newReasonId,
-            };
             onOptionChange(
-                (oldValue: PartialDefineOptionType['reason']) => (
-                    [...(oldValue ?? []), newReason]
-                ),
+                (oldValue: PartialDefineOptionType['reason']) => {
+                    const safeOldValue = oldValue ?? [];
+
+                    const newReasonId = safeOldValue.length > 0
+                        ? Math.max(...safeOldValue.map((reason) => reason.reasonId)) + 1
+                        : 1;
+
+                    const newReason: ReasonType = {
+                        reasonId: newReasonId,
+                    };
+
+                    return [...safeOldValue, newReason];
+                },
                 'reason',
             );
         },
-        [onOptionChange, reasonId],
+        [onOptionChange],
     );
 
     return (
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
new file mode 100644
index 000000000..daca26f5e
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import { PartialBlocksType } from '#views/NewTutorial/utils';
+import FileInput from '#components/FileInput';
+import TextInput from '#components/TextInput';
+
+type PartialBlockType = NonNullable<PartialBlocksType>[number];
+interface Props {
+    value: PartialBlockType;
+    onChange: (value: SetValueArg<PartialBlockType>, index: number) => void;
+    index: number;
+    error: Error<PartialBlockType> | undefined;
+}
+
+export default function Block(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+    } = props;
+
+    const onBlockChange = useFormObject(index, onChange, { block: 1 });
+
+    const error = getErrorObject(riskyError);
+    return (
+        <div>
+            <FileInput
+                name={'image' as const}
+                value={value?.image}
+                onChange={onBlockChange}
+                label="Upload Example Image 1"
+                hint="Make sure you have the rights to
+                use this image. It should end with  .jpg or .png."
+                showPreview
+                accept="image/png, image/jpeg"
+                error={error?.image}
+            />
+            <TextInput
+                name={'description' as const}
+                value={value.description}
+                onChange={onBlockChange}
+                label="Description for the image"
+                error={error?.description}
+            />
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
new file mode 100644
index 000000000..7a0781cd4
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import { TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+import Button from '#components/Button';
+
+import { InformationPageType } from '../utils';
+import Block from './Block';
+
+interface Props {
+    value: InformationPageType,
+    onChange: (value: SetValueArg<InformationPageType>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number,
+    error: Error<InformationPageType> | undefined;
+}
+
+export default function InformationPage(props: Props) {
+    const {
+        value,
+        onChange,
+        onRemove,
+        index,
+        error: riskyError,
+    } = props;
+
+    const onInformationPageChange = useFormObject(index, onChange, { page: 1 });
+
+    const {
+        setValue: onChangeBlock,
+    } = useFormArray('blocks', onInformationPageChange);
+
+    const error = getErrorObject(riskyError);
+
+    const blockError = React.useMemo(
+        () => getErrorObject(error?.blocks),
+        [error?.blocks],
+    );
+
+    return (
+        <TabPanel
+            name={String(value.page)}
+        >
+            <TextInput
+                name={'title' as const}
+                value={value?.title}
+                label="Title for the Page"
+                onChange={onInformationPageChange}
+                error={error?.title}
+            />
+            {value.blocks?.map((block, i) => (
+                <Block
+                    value={block}
+                    onChange={onChangeBlock}
+                    index={i}
+                    error={blockError?.[block.block]}
+                />
+            ))}
+            <Button
+                name={index}
+                onClick={onRemove}
+            >
+                Delete Page
+            </Button>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPage/styles.css
new file mode 100644
index 000000000..aad82becd
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/styles.css
@@ -0,0 +1,3 @@
+.information {
+    display: flex;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
index ea77c4908..8d27831b9 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
@@ -43,20 +43,20 @@ const defaultScenarioTabsValue: PartialScenarioType = {
     scenarioId: 'xxx',
 };
 
-interface ScenarioTabsProps {
+interface Props {
     value: PartialScenarioType,
     onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
     error: Error<PartialScenarioType> | undefined;
 }
 
-export default function ScenarioInput(scenarioProps: ScenarioTabsProps) {
+export default function ScenarioInput(props: Props) {
     const {
         value,
         onChange,
         index,
         error: riskyError,
-    } = scenarioProps;
+    } = props;
 
     const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
 
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 022366e23..55db465f3 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -39,7 +39,7 @@ import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SegmentInput from '#components/SegmentInput';
-import FileInput from '#components/FileInput';
+// import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
 import {
     Tabs,
@@ -52,6 +52,7 @@ import TileServerInput, {
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
+import Heading from '#components/Heading';
 import {
     valueSelector,
     labelSelector,
@@ -67,11 +68,24 @@ import {
     PartialTutorialFormType,
     ScreenType,
     DefineOptionType,
+    pageOptions,
+    PageTemplateType,
+    InformationPageType,
+    PartialInformationPageType,
+    PartialBlocksType,
 } from './utils';
 import DefineOption from './DefineOption';
 import ScenarioInput from './ScenarioInput';
+import InformationPage from './InformationPage';
 import styles from './styles.css';
-import Heading from '#components/Heading';
+import SelectInput from '#components/SelectInput';
+
+function pageKeySelector(d: PageTemplateType) {
+    return d.key;
+}
+function pageLabelSelector(d: PageTemplateType) {
+    return d.label;
+}
 
 const defaultDefineOption: PartialTutorialFormType['defineOption'] = [
     {
@@ -84,7 +98,7 @@ const defaultDefineOption: PartialTutorialFormType['defineOption'] = [
     },
     {
         optionId: 3,
-        title: 'Not sure',
+        title: 'Not Sure',
     },
 ];
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -129,10 +143,12 @@ function NewTutorial(props: Props) {
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
+    // NOTE: scenario
     const [activeTab, setActiveTab] = React.useState('Scenario 1');
+    // NOTE: options
     const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
-
-    const [optionId, setOptionId] = React.useState(defaultDefineOption?.length ?? 3);
+    // NOTE: Information Page
+    const [activeInformationPage, setActiveInformationPage] = React.useState('1');
 
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -148,6 +164,11 @@ function NewTutorial(props: Props) {
         [error?.defineOption],
     );
 
+    const informationPageError = React.useMemo(
+        () => getErrorObject(error?.informationPage),
+        [error?.informationPage],
+    );
+
     const handleFormSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
     ) => {
@@ -260,21 +281,35 @@ function NewTutorial(props: Props) {
         DefineOptionType
     >('defineOption', setFieldValue);
 
+    const {
+        setValue: onInformationPageAdd,
+        removeValue: onInformationPageRemove,
+    } = useFormArray<
+        'informationPage',
+        InformationPageType
+    >('informationPage', setFieldValue);
+
     const handleAddDefineOptions = React.useCallback(
         () => {
-            const newOptionId = optionId + 1;
-            setOptionId(newOptionId);
-            const newDefineOption: DefineOptionType = {
-                optionId: newOptionId,
-            };
             setFieldValue(
-                (oldValue: PartialTutorialFormType['defineOption']) => (
-                    [...(oldValue ?? []), newDefineOption]
-                ),
+                (oldValue: PartialTutorialFormType['defineOption']) => {
+                    const safeOldValues = oldValue ?? [];
+
+                    const newOptionId = safeOldValues.length > 0
+                        ? Math.max(...safeOldValues.map((option) => option.optionId)) + 1
+                        : 1;
+
+                    const newDefineOption: DefineOptionType = {
+                        optionId: newOptionId,
+                    };
+
+                    return [...safeOldValues, newDefineOption];
+                },
                 'defineOption',
             );
+            // TODO: Set the new option as selected
         },
-        [setFieldValue, optionId],
+        [setFieldValue],
     );
 
     const submissionPending = (
@@ -308,6 +343,62 @@ function NewTutorial(props: Props) {
         setFieldValue(tutorialTaskArray, 'screens');
     }, [setFieldValue]);
 
+    const handleAddInformationPage = React.useCallback(
+        (template: PageTemplateType['key']) => {
+            setFieldValue(
+                (oldValue: PartialInformationPageType) => {
+                    const newOldValue = oldValue ?? [];
+                    let blocks: PartialBlocksType = [];
+
+                    const newPage = newOldValue.length > 0
+                        ? Math.max(...newOldValue.map((info) => info.page)) + 1
+                        : 1;
+
+                    if (template === '2-picture') {
+                        blocks = [
+                            {
+                                block: 1,
+                            },
+                            {
+                                block: 2,
+                            },
+                        ];
+                    }
+                    if (template === '3-picture') {
+                        blocks = [
+                            {
+                                block: 1,
+                            },
+                            {
+                                block: 2,
+                            },
+                            {
+                                block: 3,
+                            },
+                        ];
+                    }
+                    if (template === '1-picture') {
+                        blocks = [
+                            {
+                                block: 1,
+                            },
+                        ];
+                    }
+
+                    const newPageInformation: InformationPageType = {
+                        page: newPage,
+                        blocks,
+                    };
+                    return [...newOldValue, newPageInformation];
+                },
+                'informationPage',
+            );
+        },
+        [setFieldValue],
+    );
+
+    console.log('value', value.informationPage);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -365,13 +456,14 @@ function NewTutorial(props: Props) {
                             disabled={submissionPending}
                         />
                     </Card>
-                    <Card contentClassName={styles.inputGroup}>
+                    {/* <Card contentClassName={styles.inputGroup}>
                         <FileInput
                             name={'exampleImage1' as const}
                             value={value?.exampleImage1}
                             onChange={setFieldValue}
                             label="Upload Example Image 1"
-                            hint="Make sure you have the rights to use this image. It should end with  .jpg or .png."
+                            hint="Make sure you have the rights to
+                            use this image. It should end with  .jpg or .png."
                             showPreview
                             accept="image/png, image/jpeg"
                             error={error?.exampleImage1}
@@ -382,12 +474,54 @@ function NewTutorial(props: Props) {
                             value={value?.exampleImage2}
                             onChange={setFieldValue}
                             label="Upload Example Image 2"
-                            hint="Make sure you have the rights to use this image. It should end with  .jpg or .png."
+                            hint="Make sure you have the rights to
+                            use this image. It should end with  .jpg or .png."
                             showPreview
                             accept="image/png, image/jpeg"
                             error={error?.exampleImage2}
                             disabled={submissionPending}
                         />
+                    </Card> */}
+                    <Card
+                        title="Describe information pages"
+                    >
+                        <SelectInput
+                            name="templateType"
+                            label="Select page"
+                            options={pageOptions}
+                            value={undefined}
+                            keySelector={pageKeySelector}
+                            labelSelector={pageLabelSelector}
+                            onChange={handleAddInformationPage}
+                            nonClearable
+                        />
+                        {value.informationPage?.length ? (
+                            <Tabs
+                                value={activeInformationPage}
+                                onChange={setActiveInformationPage}
+                            >
+                                <TabList>
+                                    {value.informationPage.map((info) => (
+                                        <Tab
+                                            name={`${info.page}`}
+                                        >
+                                            {`Intro ${info.page}`}
+                                        </Tab>
+                                    ))}
+                                </TabList>
+                                {value.informationPage?.map((page, i) => (
+                                    <InformationPage
+                                        value={page}
+                                        onChange={onInformationPageAdd}
+                                        onRemove={onInformationPageRemove}
+                                        index={i}
+                                        error={informationPageError?.[page.page]}
+                                    />
+                                ))}
+                            </Tabs>
+                        ) : (
+                            <div>Add Page</div>
+                        )}
                     </Card>
                     {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                         <Card
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index c66f01d3f..91ea8041f 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -66,6 +66,26 @@ export const iconColorOptions: IconOptions[] = [
     },
 ];
 
+export interface PageTemplateType {
+    key: '1-picture' | '2-picture' | '3-picture';
+    label: string;
+}
+
+export const pageOptions: PageTemplateType[] = [
+    {
+        key: '1-picture',
+        label: '1 picture templete',
+    },
+    {
+        key: '2-picture',
+        label: '2 picture templete',
+    },
+    {
+        key: '3-picture',
+        label: '3 picture templete',
+    },
+];
+
 // FIXME: include here
 
 export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
@@ -93,6 +113,19 @@ export type DefineOption = {
     }[];
 }[];
 
+export type InformationPage = {
+    // FIXME: remove this
+    templeteType: string;
+
+    page: number;
+    title: string;
+    blocks: {
+        block: number;
+        image?: File,
+        description?: string;
+    }[];
+}[];
+
 export interface TutorialFormType {
     lookFor: string;
     name: string;
@@ -122,6 +155,7 @@ export interface TutorialFormType {
     tileServerB?: TileServer,
     zoomLevel?: number;
     defineOption?: DefineOption;
+    informationPage: InformationPage;
 }
 
 export type PartialTutorialFormType = PartialForm<
@@ -130,7 +164,7 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId'
+    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'page' | 'block'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
@@ -150,6 +184,16 @@ type DefineOptionSchemaFields = ReturnType<DefineOptionSchema['fields']>
 type DefineOptionFormSchema = ArraySchema<DefineOptionType, PartialTutorialFormType>;
 type DefineOptionFormSchemaMember = ReturnType<DefineOptionFormSchema['member']>;
 
+export type InformationPageType = NonNullable<PartialTutorialFormType['informationPage']>[number];
+type InformationPageSchema = ObjectSchema<InformationPageType, PartialTutorialFormType>;
+type InformationPageSchemaFields = ReturnType<InformationPageSchema['fields']>
+
+type InformationPageFormSchema = ArraySchema<InformationPageType, PartialTutorialFormType>;
+type InformationPageFormSchemaMember = ReturnType<InformationPageFormSchema['member']>;
+
+export type PartialInformationPageType = PartialTutorialFormType['informationPage'];
+export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPageType>[number]>['blocks'];
+
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
         let baseSchema: TutorialFormSchemaFields = {
@@ -225,6 +269,38 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     }),
                 }),
             },
+            informationPage: {
+                keySelector: (key) => key.page,
+                member: (): InformationPageFormSchemaMember => ({
+                    fields: (): InformationPageSchemaFields => ({
+                        templeteType: { required: true },
+                        page: { required: true },
+                        title: {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(500)],
+                        },
+                        blocks: {
+                            keySelector: (key) => key.block,
+                            member: () => ({
+                                fields: () => ({
+                                    block: {
+                                        required: true,
+                                    },
+                                    image: {
+                                        required: true,
+                                    },
+                                    description: {
+                                        required: true,
+                                        requiredValidation: requiredStringCondition,
+                                        validations: [getNoMoreThanNCharacterCondition(1000)],
+                                    },
+                                }),
+                            }),
+                        },
+                    }),
+                }),
+            },
             // FIXME: add validation for tutorialTasks (geojson)
             tutorialTasks: { required: true },
             exampleImage1: { required: true },

From 6eb04947c76a951bf9ef0d9294bea775921540c0 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 9 Jun 2023 10:07:12 +0545
Subject: [PATCH 12/72] Add block in information form

---
 .../InformationPage/Block/index.tsx           | 42 ++++++-----
 .../InformationPage/Block/styles.css          |  3 +
 .../app/views/NewTutorial/index.tsx           | 32 ++++++++-
 .../app/views/NewTutorial/utils.ts            | 69 ++++++++++++-------
 4 files changed, 101 insertions(+), 45 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
index daca26f5e..3b45d42b4 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
@@ -10,6 +10,8 @@ import { PartialBlocksType } from '#views/NewTutorial/utils';
 import FileInput from '#components/FileInput';
 import TextInput from '#components/TextInput';
 
+import styles from './styles.css';
+
 type PartialBlockType = NonNullable<PartialBlocksType>[number];
 interface Props {
     value: PartialBlockType;
@@ -26,29 +28,31 @@ export default function Block(props: Props) {
         error: riskyError,
     } = props;
 
-    const onBlockChange = useFormObject(index, onChange, { block: 1 });
+    const onBlockChange = useFormObject(index, onChange, { block: 1, blockType: 'text' });
 
     const error = getErrorObject(riskyError);
     return (
         <div>
-            <FileInput
-                name={'image' as const}
-                value={value?.image}
-                onChange={onBlockChange}
-                label="Upload Example Image 1"
-                hint="Make sure you have the rights to
-                use this image. It should end with  .jpg or .png."
-                showPreview
-                accept="image/png, image/jpeg"
-                error={error?.image}
-            />
-            <TextInput
-                name={'description' as const}
-                value={value.description}
-                onChange={onBlockChange}
-                label="Description for the image"
-                error={error?.description}
-            />
+            {value.blockType === 'image' ? (
+                <FileInput
+                    name={'imageFile' as const}
+                    value={value?.imageFile}
+                    onChange={onBlockChange}
+                    label="Upload Image"
+                    hint="Make sure you have the rights to
+                    use this image. It should end with  .jpg or .png."
+                    accept="image/png, image/jpeg"
+                    error={error?.imageFile}
+                />
+            ) : (
+                <TextInput
+                    name={'textDescription' as const}
+                    value={value.textDescription}
+                    onChange={onBlockChange}
+                    label="Description"
+                    error={error?.textDescription}
+                />
+            )}
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
index e69de29bb..2add2c32c 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
@@ -0,0 +1,3 @@
+.block {
+    display: flex;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 55db465f3..4cb876490 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -358,9 +358,19 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 block: 1,
+                                blockType: 'image',
                             },
                             {
                                 block: 2,
+                                blockType: 'text',
+                            },
+                            {
+                                block: 3,
+                                blockType: 'image',
+                            },
+                            {
+                                block: 4,
+                                blockType: 'text',
                             },
                         ];
                     }
@@ -368,12 +378,27 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 block: 1,
+                                blockType: 'image',
                             },
                             {
                                 block: 2,
+                                blockType: 'text',
                             },
                             {
                                 block: 3,
+                                blockType: 'image',
+                            },
+                            {
+                                block: 4,
+                                blockType: 'text',
+                            },
+                            {
+                                block: 5,
+                                blockType: 'image',
+                            },
+                            {
+                                block: 6,
+                                blockType: 'text',
                             },
                         ];
                     }
@@ -381,6 +406,11 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 block: 1,
+                                blockType: 'image',
+                            },
+                            {
+                                block: 2,
+                                blockType: 'text',
                             },
                         ];
                     }
@@ -487,7 +517,7 @@ function NewTutorial(props: Props) {
                     >
                         <SelectInput
                             name="templateType"
-                            label="Select page"
+                            placeholder="Add page"
                             options={pageOptions}
                             value={undefined}
                             keySelector={pageKeySelector}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 91ea8041f..7546e0e27 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -114,15 +114,13 @@ export type DefineOption = {
 }[];
 
 export type InformationPage = {
-    // FIXME: remove this
-    templeteType: string;
-
     page: number;
     title: string;
     blocks: {
         block: number;
-        image?: File,
-        description?: string;
+        blockType: 'image' | 'text';
+        imageFile?: File;
+        textDescription?: string;
     }[];
 }[];
 
@@ -164,7 +162,8 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'page' | 'block'
+    // FIXME: rename page to pageNumber, block to blockNumber
+    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'page' | 'block' | 'blockType' | 'imageFile'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
@@ -184,7 +183,7 @@ type DefineOptionSchemaFields = ReturnType<DefineOptionSchema['fields']>
 type DefineOptionFormSchema = ArraySchema<DefineOptionType, PartialTutorialFormType>;
 type DefineOptionFormSchemaMember = ReturnType<DefineOptionFormSchema['member']>;
 
-export type InformationPageType = NonNullable<PartialTutorialFormType['informationPage']>[number];
+export type InformationPageType = NonNullable<PartialTutorialFormType['informationPage']>[number]
 type InformationPageSchema = ObjectSchema<InformationPageType, PartialTutorialFormType>;
 type InformationPageSchemaFields = ReturnType<InformationPageSchema['fields']>
 
@@ -273,7 +272,6 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 keySelector: (key) => key.page,
                 member: (): InformationPageFormSchemaMember => ({
                     fields: (): InformationPageSchemaFields => ({
-                        templeteType: { required: true },
                         page: { required: true },
                         title: {
                             required: true,
@@ -283,29 +281,50 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         blocks: {
                             keySelector: (key) => key.block,
                             member: () => ({
-                                fields: () => ({
-                                    block: {
-                                        required: true,
-                                    },
-                                    image: {
-                                        required: true,
-                                    },
-                                    description: {
-                                        required: true,
-                                        requiredValidation: requiredStringCondition,
-                                        validations: [getNoMoreThanNCharacterCondition(1000)],
-                                    },
-                                }),
+                                fields: (blockValue) => {
+                                    let fields = {
+                                        block: { required: true },
+                                        blockType: { required: true },
+                                    };
+
+                                    fields = addCondition(
+                                        fields,
+                                        blockValue,
+                                        ['blockType'],
+                                        ['imageFile', 'textDescription'],
+                                        (v) => {
+                                            if (v?.blockType === 'text') {
+                                                return {
+                                                    textDescription: {
+                                                        required: true,
+                                                        // eslint-disable-next-line max-len
+                                                        requiredValidations: requiredStringCondition,
+                                                        // eslint-disable-next-line max-len
+                                                        validations: [getNoMoreThanNCharacterCondition(2000)],
+                                                    },
+                                                    imageFile: { forceValue: nullValue },
+                                                };
+                                            }
+                                            return {
+                                                imageFile: { required: true },
+                                                textDescription: { forceValue: nullValue },
+
+                                            };
+                                        },
+                                    );
+                                    return fields;
+                                },
                             }),
                         },
                     }),
                 }),
             },
-            // FIXME: add validation for tutorialTasks (geojson)
-            tutorialTasks: { required: true },
-            exampleImage1: { required: true },
-            exampleImage2: { required: true },
+            // FIXME: we do not send this anymore
+            tutorialTasks: {},
+            exampleImage1: {},
+            exampleImage2: {},
         };
+
         baseSchema = addCondition(
             baseSchema,
             value,

From 7b71ef377ff40b90822cc6d24cfdd92edd1b6d65 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 9 Jun 2023 11:05:16 +0545
Subject: [PATCH 13/72] Rename define option to custom options

---
 .../Reason/index.tsx                          |   0
 .../Reason/styles.css                         |   0
 .../index.tsx                                 |  11 +-
 .../styles.css                                |   0
 .../InformationPage/Block/index.tsx           |   4 +-
 .../NewTutorial/InformationPage/index.tsx     |   7 +-
 .../app/views/NewTutorial/index.tsx           | 200 +++++++++---------
 .../app/views/NewTutorial/utils.ts            |  40 ++--
 8 files changed, 142 insertions(+), 120 deletions(-)
 rename manager-dashboard/app/views/NewTutorial/{DefineOption => CustomOptionInput}/Reason/index.tsx (100%)
 rename manager-dashboard/app/views/NewTutorial/{DefineOption => CustomOptionInput}/Reason/styles.css (100%)
 rename manager-dashboard/app/views/NewTutorial/{DefineOption => CustomOptionInput}/index.tsx (93%)
 rename manager-dashboard/app/views/NewTutorial/{DefineOption => CustomOptionInput}/styles.css (100%)

diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/index.tsx
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/DefineOption/Reason/index.tsx
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/index.tsx
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/DefineOption/Reason/styles.css
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
similarity index 93%
rename from manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index fce0bfa2d..1e67201c5 100644
--- a/manager-dashboard/app/views/NewTutorial/DefineOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -12,6 +12,7 @@ import Button from '#components/Button';
 import Heading from '#components/Heading';
 import Tabs, { TabList, TabPanel, Tab } from '#components/Tabs';
 import TextInput from '#components/TextInput';
+import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 
 import Reason from './Reason';
@@ -88,7 +89,7 @@ export default function DefineOption(props: Props) {
 
     return (
         <TabPanel
-            name={`${value.optionId}`}
+            name={String(value.optionId)}
         >
             <div className={styles.optionForm}>
                 <div className={styles.optionContent}>
@@ -100,6 +101,14 @@ export default function DefineOption(props: Props) {
                         onChange={onOptionChange}
                         error={error?.title}
                     />
+                    <NumberInput
+                        className={styles.optionInput}
+                        label="Value"
+                        value={value?.value}
+                        name={'value' as const}
+                        onChange={onOptionChange}
+                        error={error?.value}
+                    />
                     <SelectInput
                         className={styles.optionIcon}
                         name="icon"
diff --git a/manager-dashboard/app/views/NewTutorial/DefineOption/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/DefineOption/styles.css
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
index 3b45d42b4..c016dc8b8 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
@@ -10,7 +10,7 @@ import { PartialBlocksType } from '#views/NewTutorial/utils';
 import FileInput from '#components/FileInput';
 import TextInput from '#components/TextInput';
 
-import styles from './styles.css';
+// import styles from './styles.css';
 
 type PartialBlockType = NonNullable<PartialBlocksType>[number];
 interface Props {
@@ -28,7 +28,7 @@ export default function Block(props: Props) {
         error: riskyError,
     } = props;
 
-    const onBlockChange = useFormObject(index, onChange, { block: 1, blockType: 'text' });
+    const onBlockChange = useFormObject(index, onChange, { blockNumber: 1, blockType: 'text' });
 
     const error = getErrorObject(riskyError);
     return (
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
index 7a0781cd4..52ab2c2df 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
@@ -31,7 +31,7 @@ export default function InformationPage(props: Props) {
         error: riskyError,
     } = props;
 
-    const onInformationPageChange = useFormObject(index, onChange, { page: 1 });
+    const onInformationPageChange = useFormObject(index, onChange, { page_number: 1 });
 
     const {
         setValue: onChangeBlock,
@@ -46,7 +46,7 @@ export default function InformationPage(props: Props) {
 
     return (
         <TabPanel
-            name={String(value.page)}
+            name={String(value.page_number)}
         >
             <TextInput
                 name={'title' as const}
@@ -57,10 +57,11 @@ export default function InformationPage(props: Props) {
             />
             {value.blocks?.map((block, i) => (
                 <Block
+                    key={block.blockNumber}
                     value={block}
                     onChange={onChangeBlock}
                     index={i}
-                    error={blockError?.[block.block]}
+                    error={blockError?.[block.blockNumber]}
                 />
             ))}
             <Button
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 4cb876490..ffef3e094 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -67,14 +67,14 @@ import {
     TutorialFormType,
     PartialTutorialFormType,
     ScreenType,
-    DefineOptionType,
+    CustomOptionType,
     pageOptions,
     PageTemplateType,
     InformationPageType,
     PartialInformationPageType,
     PartialBlocksType,
 } from './utils';
-import DefineOption from './DefineOption';
+import CustomOptionInput from './CustomOptionInput';
 import ScenarioInput from './ScenarioInput';
 import InformationPage from './InformationPage';
 import styles from './styles.css';
@@ -87,18 +87,27 @@ function pageLabelSelector(d: PageTemplateType) {
     return d.label;
 }
 
-const defaultDefineOption: PartialTutorialFormType['defineOption'] = [
+const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
+        value: 1,
         title: 'Yes',
+        icon: 'tap-1',
+        iconColor: 'green',
     },
     {
+        value: 0,
         optionId: 2,
         title: 'No',
+        icon: 'tap-2',
+        iconColor: 'red',
     },
     {
+        value: 2,
         optionId: 3,
         title: 'Not Sure',
+        icon: 'tap-3',
+        iconColor: 'yellow',
     },
 ];
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -112,7 +121,7 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
-    defineOption: defaultDefineOption,
+    customOptions: defaultCustomOptions,
 };
 
 interface Props {
@@ -160,8 +169,8 @@ function NewTutorial(props: Props) {
     );
 
     const optionsError = React.useMemo(
-        () => getErrorObject(error?.defineOption),
-        [error?.defineOption],
+        () => getErrorObject(error?.customOptions),
+        [error?.customOptions],
     );
 
     const informationPageError = React.useMemo(
@@ -175,6 +184,28 @@ function NewTutorial(props: Props) {
         const userId = user?.id;
         const finalValues = finalValuesFromProps as TutorialFormType;
 
+        type Screens = typeof finalValues.screens;
+        type Screen = Screens[number];
+        type CustomScreen = Omit<Screen, 'scenarioId'>;
+
+        const newScreens = finalValues.screens.reduce(
+            (acc, currentValue) => {
+                const { scenarioId, ...other } = currentValue;
+                acc[scenarioId] = {
+                    ...other,
+                };
+
+                return acc;
+            },
+            {} as Record<string, CustomScreen>,
+        );
+
+        console.info(newScreens, finalValues);
+
+        if (finalValues) {
+            return;
+        }
+
         if (!userId) {
             // eslint-disable-next-line no-console
             console.error('Cannot submit form because user is not defined');
@@ -277,9 +308,9 @@ function NewTutorial(props: Props) {
         setValue: onOptionAdd,
         removeValue: onOptionRemove,
     } = useFormArray<
-        'defineOption',
-        DefineOptionType
-    >('defineOption', setFieldValue);
+        'customOptions',
+        CustomOptionType
+    >('customOptions', setFieldValue);
 
     const {
         setValue: onInformationPageAdd,
@@ -292,20 +323,25 @@ function NewTutorial(props: Props) {
     const handleAddDefineOptions = React.useCallback(
         () => {
             setFieldValue(
-                (oldValue: PartialTutorialFormType['defineOption']) => {
+                (oldValue: PartialTutorialFormType['customOptions']) => {
                     const safeOldValues = oldValue ?? [];
 
                     const newOptionId = safeOldValues.length > 0
                         ? Math.max(...safeOldValues.map((option) => option.optionId)) + 1
                         : 1;
 
-                    const newDefineOption: DefineOptionType = {
+                    const newValue = safeOldValues.length > 0
+                        ? Math.max(...safeOldValues.map((option) => option.value ?? 0)) + 1
+                        : 1;
+
+                    const newDefineOption: CustomOptionType = {
                         optionId: newOptionId,
+                        value: newValue,
                     };
 
                     return [...safeOldValues, newDefineOption];
                 },
-                'defineOption',
+                'customOptions',
             );
             // TODO: Set the new option as selected
         },
@@ -351,25 +387,25 @@ function NewTutorial(props: Props) {
                     let blocks: PartialBlocksType = [];
 
                     const newPage = newOldValue.length > 0
-                        ? Math.max(...newOldValue.map((info) => info.page)) + 1
+                        ? Math.max(...newOldValue.map((info) => info.pageNumber)) + 1
                         : 1;
 
                     if (template === '2-picture') {
                         blocks = [
                             {
-                                block: 1,
+                                blockNumber: 1,
                                 blockType: 'image',
                             },
                             {
-                                block: 2,
+                                blockNumber: 2,
                                 blockType: 'text',
                             },
                             {
-                                block: 3,
+                                blockNumber: 3,
                                 blockType: 'image',
                             },
                             {
-                                block: 4,
+                                blockNumber: 4,
                                 blockType: 'text',
                             },
                         ];
@@ -377,27 +413,27 @@ function NewTutorial(props: Props) {
                     if (template === '3-picture') {
                         blocks = [
                             {
-                                block: 1,
+                                blockNumber: 1,
                                 blockType: 'image',
                             },
                             {
-                                block: 2,
+                                blockNumber: 2,
                                 blockType: 'text',
                             },
                             {
-                                block: 3,
+                                blockNumber: 3,
                                 blockType: 'image',
                             },
                             {
-                                block: 4,
+                                blockNumber: 4,
                                 blockType: 'text',
                             },
                             {
-                                block: 5,
+                                blockNumber: 5,
                                 blockType: 'image',
                             },
                             {
-                                block: 6,
+                                blockNumber: 6,
                                 blockType: 'text',
                             },
                         ];
@@ -405,18 +441,18 @@ function NewTutorial(props: Props) {
                     if (template === '1-picture') {
                         blocks = [
                             {
-                                block: 1,
+                                blockNumber: 1,
                                 blockType: 'image',
                             },
                             {
-                                block: 2,
+                                blockNumber: 2,
                                 blockType: 'text',
                             },
                         ];
                     }
 
                     const newPageInformation: InformationPageType = {
-                        page: newPage,
+                        pageNumber: newPage,
                         blocks,
                     };
                     return [...newOldValue, newPageInformation];
@@ -427,8 +463,6 @@ function NewTutorial(props: Props) {
         [setFieldValue],
     );
 
-    console.log('value', value.informationPage);
-
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -486,32 +520,41 @@ function NewTutorial(props: Props) {
                             disabled={submissionPending}
                         />
                     </Card>
-                    {/* <Card contentClassName={styles.inputGroup}>
-                        <FileInput
-                            name={'exampleImage1' as const}
-                            value={value?.exampleImage1}
-                            onChange={setFieldValue}
-                            label="Upload Example Image 1"
-                            hint="Make sure you have the rights to
-                            use this image. It should end with  .jpg or .png."
-                            showPreview
-                            accept="image/png, image/jpeg"
-                            error={error?.exampleImage1}
-                            disabled={submissionPending}
-                        />
-                        <FileInput
-                            name={'exampleImage2' as const}
-                            value={value?.exampleImage2}
-                            onChange={setFieldValue}
-                            label="Upload Example Image 2"
-                            hint="Make sure you have the rights to
-                            use this image. It should end with  .jpg or .png."
-                            showPreview
-                            accept="image/png, image/jpeg"
-                            error={error?.exampleImage2}
-                            disabled={submissionPending}
-                        />
-                    </Card> */}
+                    <Card
+                        title="Describe Scenarios"
+                        contentClassName={styles.cardScenarios}
+                    >
+                        <Tabs
+                            value={activeTab}
+                            onChange={setActiveTab}
+                        >
+                            {value.screens?.length ? (
+                                <>
+                                    <TabList>
+                                        {value.screens?.map((task) => (
+                                            <Tab
+                                                key={task.scenarioId}
+                                                name={`Scenario ${task.scenarioId}`}
+                                            >
+                                                {`Scenario ${task.scenarioId}`}
+                                            </Tab>
+                                        ))}
+                                    </TabList>
+                                    {value.screens?.map((task, index) => (
+                                        <ScenarioInput
+                                            key={task.scenarioId}
+                                            index={index}
+                                            value={task}
+                                            onChange={onScenarioFormChange}
+                                            error={scenarioError?.[task.scenarioId]}
+                                        />
+                                    ))}
+                                </>
+                            ) : (
+                                <div>No Scenarios</div>
+                            )}
+                        </Tabs>
+                    </Card>
                     <Card
                         title="Describe information pages"
                     >
@@ -533,9 +576,9 @@ function NewTutorial(props: Props) {
                                 <TabList>
                                     {value.informationPage.map((info) => (
                                         <Tab
-                                            name={`${info.page}`}
+                                            name={String(info.pageNumber)}
                                         >
-                                            {`Intro ${info.page}`}
+                                            {`Intro ${info.pageNumber}`}
                                         </Tab>
                                     ))}
                                 </TabList>
@@ -545,7 +588,7 @@ function NewTutorial(props: Props) {
                                         onChange={onInformationPageAdd}
                                         onRemove={onInformationPageRemove}
                                         index={i}
-                                        error={informationPageError?.[page.page]}
+                                        error={informationPageError?.[page.pageNumber]}
                                     />
                                 ))}
                             </Tabs>
@@ -569,13 +612,13 @@ function NewTutorial(props: Props) {
                             >
                                 Add instruction
                             </Button>
-                            {value.defineOption?.length ? (
+                            {value.customOptions?.length ? (
                                 <Tabs
                                     value={activeOptionsTab}
                                     onChange={setActiveOptionsTab}
                                 >
                                     <TabList>
-                                        {value.defineOption.map((opt) => (
+                                        {value.customOptions.map((opt) => (
                                             <Tab
                                                 key={opt.optionId}
                                                 name={`${opt.optionId}`}
@@ -584,8 +627,8 @@ function NewTutorial(props: Props) {
                                             </Tab>
                                         ))}
                                     </TabList>
-                                    {value.defineOption.map((options, index) => (
-                                        <DefineOption
+                                    {value.customOptions.map((options, index) => (
+                                        <CustomOptionInput
                                             key={options.optionId}
                                             value={options}
                                             index={index}
@@ -600,41 +643,6 @@ function NewTutorial(props: Props) {
                             )}
                         </Card>
                     )}
-                    <Card
-                        title="Describe Scenarios"
-                        contentClassName={styles.cardScenarios}
-                    >
-                        <Tabs
-                            value={activeTab}
-                            onChange={setActiveTab}
-                        >
-                            {value.screens?.length ? (
-                                <>
-                                    <TabList>
-                                        {value.screens?.map((task) => (
-                                            <Tab
-                                                key={task.scenarioId}
-                                                name={`Scenario ${task.scenarioId}`}
-                                            >
-                                                {`Scenario ${task.scenarioId}`}
-                                            </Tab>
-                                        ))}
-                                    </TabList>
-                                    {value.screens?.map((task, index) => (
-                                        <ScenarioInput
-                                            key={task.scenarioId}
-                                            index={index}
-                                            value={task}
-                                            onChange={onScenarioFormChange}
-                                            error={scenarioError?.[task.scenarioId]}
-                                        />
-                                    ))}
-                                </>
-                            ) : (
-                                <div>No Scenarios</div>
-                            )}
-                        </Tabs>
-                    </Card>
                 </InputSection>
                 {(value?.projectType === PROJECT_TYPE_BUILD_AREA
                     || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 7546e0e27..5920017c5 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -101,9 +101,10 @@ export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
     tile_z: number;
 }>;
 
-export type DefineOption = {
+export type CustomOptions = {
     optionId: number;
     title: string;
+    value: number;
     description: string;
     icon: string;
     iconColor: string;
@@ -114,10 +115,10 @@ export type DefineOption = {
 }[];
 
 export type InformationPage = {
-    page: number;
+    pageNumber: number;
     title: string;
     blocks: {
-        block: number;
+        blockNumber: number;
         blockType: 'image' | 'text';
         imageFile?: File;
         textDescription?: string;
@@ -152,7 +153,7 @@ export interface TutorialFormType {
     projectType: ProjectType;
     tileServerB?: TileServer,
     zoomLevel?: number;
-    defineOption?: DefineOption;
+    customOptions?: CustomOptions;
     informationPage: InformationPage;
 }
 
@@ -163,7 +164,7 @@ export type PartialTutorialFormType = PartialForm<
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
     // FIXME: rename page to pageNumber, block to blockNumber
-    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'page' | 'block' | 'blockType' | 'imageFile'
+    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
@@ -176,11 +177,11 @@ type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
 type ScreenFormSchema = ArraySchema<ScreenType, PartialTutorialFormType>;
 type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
 
-export type DefineOptionType = NonNullable<PartialTutorialFormType['defineOption']>[number];
-type DefineOptionSchema = ObjectSchema<DefineOptionType, PartialTutorialFormType>;
+export type CustomOptionType = NonNullable<PartialTutorialFormType['customOptions']>[number];
+type DefineOptionSchema = ObjectSchema<CustomOptionType, PartialTutorialFormType>;
 type DefineOptionSchemaFields = ReturnType<DefineOptionSchema['fields']>
 
-type DefineOptionFormSchema = ArraySchema<DefineOptionType, PartialTutorialFormType>;
+type DefineOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
 type DefineOptionFormSchemaMember = ReturnType<DefineOptionFormSchema['member']>;
 
 export type InformationPageType = NonNullable<PartialTutorialFormType['informationPage']>[number]
@@ -269,21 +270,21 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 }),
             },
             informationPage: {
-                keySelector: (key) => key.page,
+                keySelector: (key) => key.pageNumber,
                 member: (): InformationPageFormSchemaMember => ({
                     fields: (): InformationPageSchemaFields => ({
-                        page: { required: true },
+                        pageNumber: { required: true },
                         title: {
                             required: true,
                             requiredValidation: requiredStringCondition,
                             validations: [getNoMoreThanNCharacterCondition(500)],
                         },
                         blocks: {
-                            keySelector: (key) => key.block,
+                            keySelector: (key) => key.blockNumber,
                             member: () => ({
                                 fields: (blockValue) => {
                                     let fields = {
-                                        block: { required: true },
+                                        blockNumber: { required: true },
                                         blockType: { required: true },
                                     };
 
@@ -329,9 +330,9 @@ export const tutorialFormSchema: TutorialFormSchema = {
             baseSchema,
             value,
             ['projectType'],
-            ['defineOption'],
-            (v) => {
-                const defineOptionField: DefineOptionFormSchema = {
+            ['customOptions'],
+            (formValues) => {
+                const customOptionField: DefineOptionFormSchema = {
                     keySelector: (key) => key.optionId,
                     member: (): DefineOptionFormSchemaMember => ({
                         fields: (): DefineOptionSchemaFields => ({
@@ -343,6 +344,9 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 requiredValidation: requiredStringCondition,
                                 validations: [getNoMoreThanNCharacterCondition(500)],
                             },
+                            value: {
+                                required: true,
+                            },
                             description: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
@@ -373,13 +377,13 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     }),
                 };
 
-                if (v?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                if (formValues?.projectType === PROJECT_TYPE_FOOTPRINT) {
                     return {
-                        defineOption: defineOptionField,
+                        customOptions: customOptionField,
                     };
                 }
                 return {
-                    defineOption: { forceValue: nullValue },
+                    customOptions: { forceValue: nullValue },
                 };
             },
         );

From bb3b238adbc65730a5c70f6fc289fe2952fc5214 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 9 Jun 2023 11:50:01 +0545
Subject: [PATCH 14/72] Rename reason to sub option

---
 .../{Reason => SubOption}/index.tsx           | 16 ++--
 .../{Reason => SubOption}/styles.css          |  0
 .../NewTutorial/CustomOptionInput/index.tsx   | 84 +++++++++----------
 .../NewTutorial/InformationPage/index.tsx     | 12 +--
 .../app/views/NewTutorial/index.tsx           | 76 +++++++++--------
 .../app/views/NewTutorial/utils.ts            | 68 +++++++--------
 6 files changed, 129 insertions(+), 127 deletions(-)
 rename manager-dashboard/app/views/NewTutorial/CustomOptionInput/{Reason => SubOption}/index.tsx (70%)
 rename manager-dashboard/app/views/NewTutorial/CustomOptionInput/{Reason => SubOption}/styles.css (100%)

diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
similarity index 70%
rename from manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/index.tsx
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
index d3cf1e9f0..54f2227f2 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
@@ -9,19 +9,19 @@ import { TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
 
-import { PartialDefineOptionType } from '..';
+import { PartialCustomOptionsType } from '..';
 import styles from './styles.css';
 
-type PartialReasonType = NonNullable<PartialDefineOptionType['reason']>[number]
+type PartialSubOptionType = NonNullable<PartialCustomOptionsType['subOptions']>[number]
 
 interface Props {
-    value: PartialReasonType;
-    onChange: (value: SetValueArg<PartialReasonType>, index: number) => void;
+    value: PartialSubOptionType;
+    onChange: (value: SetValueArg<PartialSubOptionType>, index: number) => void;
     onRemove: (index: number) => void;
     index: number;
-    error: Error<PartialReasonType> | undefined;
+    error: Error<PartialSubOptionType> | undefined;
 }
-export default function Reason(props: Props) {
+export default function SubOption(props: Props) {
     const {
         value,
         onChange,
@@ -30,12 +30,12 @@ export default function Reason(props: Props) {
         error: riskyError,
     } = props;
 
-    const onReasonChange = useFormObject(index, onChange, { reasonId: 1 });
+    const onReasonChange = useFormObject(index, onChange, { subOptionsId: 1 });
 
     const error = getErrorObject(riskyError);
     return (
         <TabPanel
-            name={`${value.reasonId}`}
+            name={String(value.subOptionsId)}
             className={styles.reasonContent}
         >
             <TextInput
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/CustomOptionInput/Reason/styles.css
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 1e67201c5..75c1f3f7e 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -15,7 +15,7 @@ import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 
-import Reason from './Reason';
+import SubOption from './SubOption';
 import {
     IconOptions,
     PartialTutorialFormType,
@@ -25,22 +25,22 @@ import {
 
 import styles from './styles.css';
 
-export type PartialDefineOptionType = NonNullable<PartialTutorialFormType['defineOption']>[number]
-const defaultDefineOptionValue: PartialDefineOptionType = {
+export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
+const defaultcustomOptionsValue: PartialCustomOptionsType = {
     optionId: 1,
 };
 
-type ReasonType = NonNullable<PartialDefineOptionType['reason']>[number];
+type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number];
 
 interface Props {
-    value: PartialDefineOptionType;
-    onChange: (value: SetValueArg<PartialDefineOptionType>, index: number) => void;
+    value: PartialCustomOptionsType;
+    onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void;
     onRemove: (index: number) => void;
     index: number;
-    error: Error<PartialDefineOptionType> | undefined;
+    error: Error<PartialCustomOptionsType> | undefined;
 }
 
-export default function DefineOption(props: Props) {
+export default function CustomOptions(props: Props) {
     const {
         value,
         onChange,
@@ -49,39 +49,39 @@ export default function DefineOption(props: Props) {
         error: riskyError,
     } = props;
 
-    const [activeReason, setActiveReason] = React.useState('1');
+    const [activesubOptions, setActiveSubOptions] = React.useState('1');
 
-    const onOptionChange = useFormObject(index, onChange, defaultDefineOptionValue);
+    const onOptionChange = useFormObject(index, onChange, defaultcustomOptionsValue);
 
     const {
-        setValue: onReasonAdd,
-        removeValue: onReasonRemove,
-    } = useFormArray('reason', onOptionChange);
+        setValue: onsubOptionsAdd,
+        removeValue: onsubOptionsRemove,
+    } = useFormArray('subOptions', onOptionChange);
 
     const error = getErrorObject(riskyError);
 
-    const reasonError = React.useMemo(
-        () => getErrorObject(error?.reason),
-        [error?.reason],
+    const subOptionsError = React.useMemo(
+        () => getErrorObject(error?.subOptions),
+        [error?.subOptions],
     );
 
-    const handleReasonAdd = React.useCallback(
+    const handlesubOptionsAdd = React.useCallback(
         () => {
             onOptionChange(
-                (oldValue: PartialDefineOptionType['reason']) => {
+                (oldValue: PartialCustomOptionsType['subOptions']) => {
                     const safeOldValue = oldValue ?? [];
 
-                    const newReasonId = safeOldValue.length > 0
-                        ? Math.max(...safeOldValue.map((reason) => reason.reasonId)) + 1
+                    const newsubOptionsId = safeOldValue.length > 0
+                        ? Math.max(...safeOldValue.map((subOptions) => subOptions.subOptionsId)) + 1
                         : 1;
 
-                    const newReason: ReasonType = {
-                        reasonId: newReasonId,
+                    const newsubOptions: subOptionsType = {
+                        subOptionsId: newsubOptionsId,
                     };
 
-                    return [...safeOldValue, newReason];
+                    return [...safeOldValue, newsubOptions];
                 },
-                'reason',
+                'subOptions',
             );
         },
         [onOptionChange],
@@ -150,44 +150,44 @@ export default function DefineOption(props: Props) {
                     Delete this option
                 </Button>
                 <Heading level={4}>
-                    Reason
+                    Sub Options
                 </Heading>
                 <Button
-                    name="add_reason"
+                    name="add_sub_options"
                     className={styles.addButton}
                     icons={<MdAdd />}
-                    onClick={handleReasonAdd}
+                    onClick={handlesubOptionsAdd}
                 >
-                    Add Reason
+                    Add Sub Options
                 </Button>
-                {value.reason?.length ? (
+                {value.subOptions?.length ? (
                     <Tabs
-                        value={activeReason}
-                        onChange={setActiveReason}
+                        value={activesubOptions}
+                        onChange={setActiveSubOptions}
                     >
                         <TabList>
-                            {value.reason?.map((rea) => (
+                            {value.subOptions?.map((rea) => (
                                 <Tab
-                                    name={`${rea.reasonId}`}
-                                    key={rea.reasonId}
+                                    name={`${rea.subOptionsId}`}
+                                    key={rea.subOptionsId}
                                 >
-                                    {`Reason ${rea.reasonId}`}
+                                    {`Sub Options ${rea.subOptionsId}`}
                                 </Tab>
                             ))}
                         </TabList>
-                        {value.reason.map((rea, i) => (
-                            <Reason
-                                key={rea.reasonId}
+                        {value.subOptions.map((rea, i) => (
+                            <SubOption
+                                key={rea.subOptionsId}
                                 value={rea}
                                 index={i}
-                                onChange={onReasonAdd}
-                                onRemove={onReasonRemove}
-                                error={reasonError?.[rea.reasonId]}
+                                onChange={onsubOptionsAdd}
+                                onRemove={onsubOptionsRemove}
+                                error={subOptionsError?.[rea.subOptionsId]}
                             />
                         ))}
                     </Tabs>
                 ) : (
-                    <div>Add reason</div>
+                    <div>Add Sub Options</div>
                 )}
             </div>
         </TabPanel>
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
index 52ab2c2df..7a87491fb 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
@@ -11,15 +11,15 @@ import { TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
 
-import { InformationPageType } from '../utils';
+import { InformationPagesType } from '../utils';
 import Block from './Block';
 
 interface Props {
-    value: InformationPageType,
-    onChange: (value: SetValueArg<InformationPageType>, index: number) => void;
+    value: InformationPagesType,
+    onChange: (value: SetValueArg<InformationPagesType>, index: number) => void;
     onRemove: (index: number) => void;
     index: number,
-    error: Error<InformationPageType> | undefined;
+    error: Error<InformationPagesType> | undefined;
 }
 
 export default function InformationPage(props: Props) {
@@ -31,7 +31,7 @@ export default function InformationPage(props: Props) {
         error: riskyError,
     } = props;
 
-    const onInformationPageChange = useFormObject(index, onChange, { page_number: 1 });
+    const onInformationPageChange = useFormObject(index, onChange, { pageNumber: 1 });
 
     const {
         setValue: onChangeBlock,
@@ -46,7 +46,7 @@ export default function InformationPage(props: Props) {
 
     return (
         <TabPanel
-            name={String(value.page_number)}
+            name={String(value.pageNumber)}
         >
             <TextInput
                 name={'title' as const}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index ffef3e094..0c2ff0611 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -66,12 +66,12 @@ import {
     tutorialFormSchema,
     TutorialFormType,
     PartialTutorialFormType,
-    ScreenType,
+    ScenarioPagesType,
     CustomOptionType,
     pageOptions,
     PageTemplateType,
-    InformationPageType,
-    PartialInformationPageType,
+    InformationPagesType,
+    PartialInformationPagesType,
     PartialBlocksType,
 } from './utils';
 import CustomOptionInput from './CustomOptionInput';
@@ -157,15 +157,15 @@ function NewTutorial(props: Props) {
     // NOTE: options
     const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
     // NOTE: Information Page
-    const [activeInformationPage, setActiveInformationPage] = React.useState('1');
+    const [activeInformationPages, setActiveInformationPages] = React.useState('1');
 
     const error = React.useMemo(
         () => getErrorObject(formError),
         [formError],
     );
     const scenarioError = React.useMemo(
-        () => getErrorObject(error?.screens),
-        [error?.screens],
+        () => getErrorObject(error?.scenarioPages),
+        [error?.scenarioPages],
     );
 
     const optionsError = React.useMemo(
@@ -173,9 +173,9 @@ function NewTutorial(props: Props) {
         [error?.customOptions],
     );
 
-    const informationPageError = React.useMemo(
-        () => getErrorObject(error?.informationPage),
-        [error?.informationPage],
+    const informationPagesError = React.useMemo(
+        () => getErrorObject(error?.informationPages),
+        [error?.informationPages],
     );
 
     const handleFormSubmission = React.useCallback((
@@ -184,11 +184,11 @@ function NewTutorial(props: Props) {
         const userId = user?.id;
         const finalValues = finalValuesFromProps as TutorialFormType;
 
-        type Screens = typeof finalValues.screens;
+        type Screens = typeof finalValues.scenarioPages;
         type Screen = Screens[number];
         type CustomScreen = Omit<Screen, 'scenarioId'>;
 
-        const newScreens = finalValues.screens.reduce(
+        const screens = finalValues.scenarioPages.reduce(
             (acc, currentValue) => {
                 const { scenarioId, ...other } = currentValue;
                 acc[scenarioId] = {
@@ -200,7 +200,7 @@ function NewTutorial(props: Props) {
             {} as Record<string, CustomScreen>,
         );
 
-        console.info(newScreens, finalValues);
+        console.info(screens, finalValues);
 
         if (finalValues) {
             return;
@@ -295,9 +295,9 @@ function NewTutorial(props: Props) {
     const {
         setValue: onScenarioFormChange,
     } = useFormArray<
-        'screens',
-        ScreenType
-    >('screens', setFieldValue);
+        'scenarioPages',
+        ScenarioPagesType
+    >('scenarioPages', setFieldValue);
 
     const hasErrors = React.useMemo(
         () => analyzeErrors(error),
@@ -313,12 +313,12 @@ function NewTutorial(props: Props) {
     >('customOptions', setFieldValue);
 
     const {
-        setValue: onInformationPageAdd,
-        removeValue: onInformationPageRemove,
+        setValue: onInformationPagesAdd,
+        removeValue: onInformationPagesRemove,
     } = useFormArray<
-        'informationPage',
-        InformationPageType
-    >('informationPage', setFieldValue);
+        'informationPages',
+        InformationPagesType
+    >('informationPages', setFieldValue);
 
     const handleAddDefineOptions = React.useCallback(
         () => {
@@ -376,13 +376,13 @@ function NewTutorial(props: Props) {
             }
         ));
 
-        setFieldValue(tutorialTaskArray, 'screens');
+        setFieldValue(tutorialTaskArray, 'scenarioPages');
     }, [setFieldValue]);
 
-    const handleAddInformationPage = React.useCallback(
+    const handleAddInformationPages = React.useCallback(
         (template: PageTemplateType['key']) => {
             setFieldValue(
-                (oldValue: PartialInformationPageType) => {
+                (oldValue: PartialInformationPagesType) => {
                     const newOldValue = oldValue ?? [];
                     let blocks: PartialBlocksType = [];
 
@@ -451,13 +451,13 @@ function NewTutorial(props: Props) {
                         ];
                     }
 
-                    const newPageInformation: InformationPageType = {
+                    const newPageInformation: InformationPagesType = {
                         pageNumber: newPage,
                         blocks,
                     };
                     return [...newOldValue, newPageInformation];
                 },
-                'informationPage',
+                'informationPages',
             );
         },
         [setFieldValue],
@@ -528,10 +528,10 @@ function NewTutorial(props: Props) {
                             value={activeTab}
                             onChange={setActiveTab}
                         >
-                            {value.screens?.length ? (
+                            {value.scenarioPages?.length ? (
                                 <>
                                     <TabList>
-                                        {value.screens?.map((task) => (
+                                        {value.scenarioPages?.map((task) => (
                                             <Tab
                                                 key={task.scenarioId}
                                                 name={`Scenario ${task.scenarioId}`}
@@ -540,7 +540,7 @@ function NewTutorial(props: Props) {
                                             </Tab>
                                         ))}
                                     </TabList>
-                                    {value.screens?.map((task, index) => (
+                                    {value.scenarioPages?.map((task, index) => (
                                         <ScenarioInput
                                             key={task.scenarioId}
                                             index={index}
@@ -565,30 +565,32 @@ function NewTutorial(props: Props) {
                             value={undefined}
                             keySelector={pageKeySelector}
                             labelSelector={pageLabelSelector}
-                            onChange={handleAddInformationPage}
+                            onChange={handleAddInformationPages}
                             nonClearable
                         />
-                        {value.informationPage?.length ? (
+                        {value.informationPages?.length ? (
                             <Tabs
-                                value={activeInformationPage}
-                                onChange={setActiveInformationPage}
+                                value={activeInformationPages}
+                                onChange={setActiveInformationPages}
                             >
                                 <TabList>
-                                    {value.informationPage.map((info) => (
+                                    {value.informationPages.map((info) => (
                                         <Tab
+                                            key={info.pageNumber}
                                             name={String(info.pageNumber)}
                                         >
                                             {`Intro ${info.pageNumber}`}
                                         </Tab>
                                     ))}
                                 </TabList>
-                                {value.informationPage?.map((page, i) => (
+                                {value.informationPages?.map((page, i) => (
                                     <InformationPage
+                                        key={page.pageNumber}
                                         value={page}
-                                        onChange={onInformationPageAdd}
-                                        onRemove={onInformationPageRemove}
+                                        onChange={onInformationPagesAdd}
+                                        onRemove={onInformationPagesRemove}
                                         index={i}
-                                        error={informationPageError?.[page.pageNumber]}
+                                        error={informationPagesError?.[page.pageNumber]}
                                     />
                                 ))}
                             </Tabs>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 5920017c5..d4d2667eb 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -108,13 +108,13 @@ export type CustomOptions = {
     description: string;
     icon: string;
     iconColor: string;
-    reason: {
-        reasonId: number;
+    subOptions: {
+        subOptionsId: number;
         description: string;
     }[];
 }[];
 
-export type InformationPage = {
+export type InformationPages = {
     pageNumber: number;
     title: string;
     blocks: {
@@ -129,7 +129,7 @@ export interface TutorialFormType {
     lookFor: string;
     name: string;
     tileServer: TileServer;
-    screens: {
+    scenarioPages: {
         scenarioId: string;
         hint: {
             description: string;
@@ -154,7 +154,7 @@ export interface TutorialFormType {
     tileServerB?: TileServer,
     zoomLevel?: number;
     customOptions?: CustomOptions;
-    informationPage: InformationPage;
+    informationPages: InformationPages;
 }
 
 export type PartialTutorialFormType = PartialForm<
@@ -164,35 +164,35 @@ export type PartialTutorialFormType = PartialForm<
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
     // FIXME: rename page to pageNumber, block to blockNumber
-    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'reasonId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
+    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'subOptionsId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
 type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 
-export type ScreenType = NonNullable<PartialTutorialFormType['screens']>[number];
-type ScreenSchema = ObjectSchema<ScreenType, PartialTutorialFormType>;
-type ScreenFormSchemaFields = ReturnType<ScreenSchema['fields']>;
+export type ScenarioPagesType = NonNullable<PartialTutorialFormType['scenarioPages']>[number];
+type ScenarioPagesSchema = ObjectSchema<ScenarioPagesType, PartialTutorialFormType>;
+type ScenarioPagesFormSchemaFields = ReturnType<ScenarioPagesSchema['fields']>;
 
-type ScreenFormSchema = ArraySchema<ScreenType, PartialTutorialFormType>;
-type ScreenFormSchemaMember = ReturnType<ScreenFormSchema['member']>;
+type ScenarioPagesFormSchema = ArraySchema<ScenarioPagesType, PartialTutorialFormType>;
+type ScenarioPagesFormSchemaMember = ReturnType<ScenarioPagesFormSchema['member']>;
 
 export type CustomOptionType = NonNullable<PartialTutorialFormType['customOptions']>[number];
-type DefineOptionSchema = ObjectSchema<CustomOptionType, PartialTutorialFormType>;
-type DefineOptionSchemaFields = ReturnType<DefineOptionSchema['fields']>
+type CustomOptionSchema = ObjectSchema<CustomOptionType, PartialTutorialFormType>;
+type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
 
-type DefineOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
-type DefineOptionFormSchemaMember = ReturnType<DefineOptionFormSchema['member']>;
+type CustomOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
+type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
 
-export type InformationPageType = NonNullable<PartialTutorialFormType['informationPage']>[number]
-type InformationPageSchema = ObjectSchema<InformationPageType, PartialTutorialFormType>;
-type InformationPageSchemaFields = ReturnType<InformationPageSchema['fields']>
+export type InformationPagesType = NonNullable<PartialTutorialFormType['informationPages']>[number]
+type InformationPagesSchema = ObjectSchema<InformationPagesType, PartialTutorialFormType>;
+type InformationPagesSchemaFields = ReturnType<InformationPagesSchema['fields']>
 
-type InformationPageFormSchema = ArraySchema<InformationPageType, PartialTutorialFormType>;
-type InformationPageFormSchemaMember = ReturnType<InformationPageFormSchema['member']>;
+type InformationPagesFormSchema = ArraySchema<InformationPagesType, PartialTutorialFormType>;
+type InformationPagesFormSchemaMember = ReturnType<InformationPagesFormSchema['member']>;
 
-export type PartialInformationPageType = PartialTutorialFormType['informationPage'];
-export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPageType>[number]>['blocks'];
+export type PartialInformationPagesType = PartialTutorialFormType['informationPages'];
+export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPagesType>[number]>['blocks'];
 
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
@@ -214,10 +214,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            screens: {
+            scenarioPages: {
                 keySelector: (key) => key.scenarioId,
-                member: (): ScreenFormSchemaMember => ({
-                    fields: (): ScreenFormSchemaFields => ({
+                member: (): ScenarioPagesFormSchemaMember => ({
+                    fields: (): ScenarioPagesFormSchemaFields => ({
                         scenarioId: {
                             required: true,
                         },
@@ -269,10 +269,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     }),
                 }),
             },
-            informationPage: {
+            informationPages: {
                 keySelector: (key) => key.pageNumber,
-                member: (): InformationPageFormSchemaMember => ({
-                    fields: (): InformationPageSchemaFields => ({
+                member: (): InformationPagesFormSchemaMember => ({
+                    fields: (): InformationPagesSchemaFields => ({
                         pageNumber: { required: true },
                         title: {
                             required: true,
@@ -332,10 +332,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
             ['projectType'],
             ['customOptions'],
             (formValues) => {
-                const customOptionField: DefineOptionFormSchema = {
+                const customOptionField: CustomOptionFormSchema = {
                     keySelector: (key) => key.optionId,
-                    member: (): DefineOptionFormSchemaMember => ({
-                        fields: (): DefineOptionSchemaFields => ({
+                    member: (): CustomOptionFormSchemaMember => ({
+                        fields: (): CustomOptionSchemaFields => ({
                             optionId: {
                                 required: true,
                             },
@@ -358,11 +358,11 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             iconColor: {
                                 required: true,
                             },
-                            reason: {
-                                keySelector: (key) => key.reasonId,
+                            subOptions: {
+                                keySelector: (key) => key.subOptionsId,
                                 member: () => ({
                                     fields: () => ({
-                                        reasonId: {
+                                        subOptionsId: {
                                             required: true,
                                         },
                                         description: {

From a1b9cedfd0b52215d858a9f5ade86fe9efbbf019 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Mon, 12 Jun 2023 11:41:29 +0545
Subject: [PATCH 15/72] Improve new tutorial page

---
 .../app/components/TutorialList/index.tsx     |  2 +
 .../NewTutorial/CustomOptionInput/index.tsx   |  2 +-
 .../Block/index.tsx                           |  0
 .../Block/styles.css                          |  0
 .../index.tsx                                 |  2 +-
 .../styles.css                                |  0
 .../index.tsx                                 |  2 +-
 .../styles.css                                |  0
 .../app/views/NewTutorial/index.tsx           | 74 +++++++++++--------
 .../app/views/NewTutorial/utils.ts            |  6 +-
 10 files changed, 50 insertions(+), 38 deletions(-)
 rename manager-dashboard/app/views/NewTutorial/{InformationPage => InformationPageInput}/Block/index.tsx (100%)
 rename manager-dashboard/app/views/NewTutorial/{InformationPage => InformationPageInput}/Block/styles.css (100%)
 rename manager-dashboard/app/views/NewTutorial/{InformationPage => InformationPageInput}/index.tsx (96%)
 rename manager-dashboard/app/views/NewTutorial/{InformationPage => InformationPageInput}/styles.css (100%)
 rename manager-dashboard/app/views/NewTutorial/{ScenarioInput => ScenarioPageInput}/index.tsx (99%)
 rename manager-dashboard/app/views/NewTutorial/{ScenarioInput => ScenarioPageInput}/styles.css (100%)

diff --git a/manager-dashboard/app/components/TutorialList/index.tsx b/manager-dashboard/app/components/TutorialList/index.tsx
index 9ab818f41..9065f87a8 100644
--- a/manager-dashboard/app/components/TutorialList/index.tsx
+++ b/manager-dashboard/app/components/TutorialList/index.tsx
@@ -53,6 +53,8 @@ function TutorialList(props: Props) {
         query: tutorialsQuery,
     });
 
+    console.info(tutorials);
+
     const tutorialList = React.useMemo(
         () => (tutorials ? Object.entries(tutorials).reverse() : []),
         [tutorials],
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 75c1f3f7e..25fab0186 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -40,7 +40,7 @@ interface Props {
     error: Error<PartialCustomOptionsType> | undefined;
 }
 
-export default function CustomOptions(props: Props) {
+export default function CustomOptionInput(props: Props) {
     const {
         value,
         onChange,
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/InformationPage/Block/index.tsx
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/InformationPage/Block/styles.css
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
similarity index 96%
rename from manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 7a87491fb..958a5ece1 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPage/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -22,7 +22,7 @@ interface Props {
     error: Error<InformationPagesType> | undefined;
 }
 
-export default function InformationPage(props: Props) {
+export default function InformationPageInput(props: Props) {
     const {
         value,
         onChange,
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPage/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/InformationPage/styles.css
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
similarity index 99%
rename from manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 8d27831b9..867e28981 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -50,7 +50,7 @@ interface Props {
     error: Error<PartialScenarioType> | undefined;
 }
 
-export default function ScenarioInput(props: Props) {
+export default function ScenarioPageInput(props: Props) {
     const {
         value,
         onChange,
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/ScenarioInput/styles.css
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 0c2ff0611..8ffdb1cb3 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -11,12 +11,14 @@ import {
     analyzeErrors,
     useFormArray,
 } from '@togglecorp/toggle-form';
+/*
 import {
     getStorage,
     ref as storageRef,
     uploadBytes,
     getDownloadURL,
 } from 'firebase/storage';
+*/
 import {
     getDatabase,
     ref as databaseRef,
@@ -75,8 +77,8 @@ import {
     PartialBlocksType,
 } from './utils';
 import CustomOptionInput from './CustomOptionInput';
-import ScenarioInput from './ScenarioInput';
-import InformationPage from './InformationPage';
+import ScenarioPageInput from './ScenarioPageInput';
+import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 import SelectInput from '#components/SelectInput';
 
@@ -184,28 +186,6 @@ function NewTutorial(props: Props) {
         const userId = user?.id;
         const finalValues = finalValuesFromProps as TutorialFormType;
 
-        type Screens = typeof finalValues.scenarioPages;
-        type Screen = Screens[number];
-        type CustomScreen = Omit<Screen, 'scenarioId'>;
-
-        const screens = finalValues.scenarioPages.reduce(
-            (acc, currentValue) => {
-                const { scenarioId, ...other } = currentValue;
-                acc[scenarioId] = {
-                    ...other,
-                };
-
-                return acc;
-            },
-            {} as Record<string, CustomScreen>,
-        );
-
-        console.info(screens, finalValues);
-
-        if (finalValues) {
-            return;
-        }
-
         if (!userId) {
             // eslint-disable-next-line no-console
             console.error('Cannot submit form because user is not defined');
@@ -221,16 +201,39 @@ function NewTutorial(props: Props) {
             const {
                 exampleImage1,
                 exampleImage2,
+                scenarioPages,
                 ...valuesToCopy
             } = finalValues;
+            type Screens = typeof finalValues.scenarioPages;
+            type Screen = Screens[number];
+            type CustomScreen = Omit<Screen, 'scenarioId'>;
+
+            const screens = scenarioPages.reduce(
+                (acc, currentValue) => {
+                    const { scenarioId, ...other } = currentValue;
+                    acc[scenarioId] = {
+                        ...other,
+                    };
+
+                    return acc;
+                },
+                {} as Record<string, CustomScreen>,
+            );
 
-            const storage = getStorage();
-            const timestamp = (new Date()).getTime();
-            const uploadedImage1Ref = storageRef(storage, `projectImages/${timestamp}-tutorial-image-1-${exampleImage1.name}`);
-            const uploadedImage2Ref = storageRef(storage, `projectImages/${timestamp}-tutorial-image-2-${exampleImage2.name}`);
+            // const storage = getStorage();
+            // const timestamp = (new Date()).getTime();
+            // const uploadedImage1Ref = storageRef(
+            //     storage,
+            //     `projectImages/${timestamp}-tutorial-image-1-${exampleImage1.name}`,
+            // );
+            // const uploadedImage2Ref = storageRef(
+            //     storage,
+            //     `projectImages/${timestamp}-tutorial-image-2-${exampleImage2.name}`,
+            // );
 
             setTutorialSubmissionStatus('imageUpload');
             try {
+                /*
                 const uploadTask1 = await uploadBytes(uploadedImage1Ref, exampleImage1);
                 if (!mountedRef.current) {
                     return;
@@ -247,14 +250,21 @@ function NewTutorial(props: Props) {
                 if (!mountedRef.current) {
                     return;
                 }
+                        */
 
                 const uploadData = {
                     ...valuesToCopy,
-                    exampleImage1: downloadUrl1,
-                    exampleImage2: downloadUrl2,
+                    screens,
+                    // exampleImage1: downloadUrl1,
+                    // exampleImage2: downloadUrl2,
                     createdBy: userId,
                 };
 
+                if (uploadData) {
+                    console.info(uploadData);
+                    return;
+                }
+
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -541,7 +551,7 @@ function NewTutorial(props: Props) {
                                         ))}
                                     </TabList>
                                     {value.scenarioPages?.map((task, index) => (
-                                        <ScenarioInput
+                                        <ScenarioPageInput
                                             key={task.scenarioId}
                                             index={index}
                                             value={task}
@@ -584,7 +594,7 @@ function NewTutorial(props: Props) {
                                     ))}
                                 </TabList>
                                 {value.informationPages?.map((page, i) => (
-                                    <InformationPage
+                                    <InformationPageInput
                                         key={page.pageNumber}
                                         value={page}
                                         onChange={onInformationPagesAdd}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index d4d2667eb..f68b1c326 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -74,15 +74,15 @@ export interface PageTemplateType {
 export const pageOptions: PageTemplateType[] = [
     {
         key: '1-picture',
-        label: '1 picture templete',
+        label: '1 picture template',
     },
     {
         key: '2-picture',
-        label: '2 picture templete',
+        label: '2 picture template',
     },
     {
         key: '3-picture',
-        label: '3 picture templete',
+        label: '3 picture template',
     },
 ];
 

From b177327c75d7319b5bc6ea648634036fcda6a418 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 12 Jun 2023 13:44:19 +0545
Subject: [PATCH 16/72] Get image url

---
 .../InformationPageInput/index.tsx            | 46 +++++++------
 .../InformationPageInput/styles.css           |  9 ++-
 .../app/views/NewTutorial/index.tsx           | 67 +++++++++----------
 3 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 958a5ece1..9f1628b71 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -13,6 +13,7 @@ import Button from '#components/Button';
 
 import { InformationPagesType } from '../utils';
 import Block from './Block';
+import styles from './styles.css';
 
 interface Props {
     value: InformationPagesType,
@@ -48,28 +49,31 @@ export default function InformationPageInput(props: Props) {
         <TabPanel
             name={String(value.pageNumber)}
         >
-            <TextInput
-                name={'title' as const}
-                value={value?.title}
-                label="Title for the Page"
-                onChange={onInformationPageChange}
-                error={error?.title}
-            />
-            {value.blocks?.map((block, i) => (
-                <Block
-                    key={block.blockNumber}
-                    value={block}
-                    onChange={onChangeBlock}
-                    index={i}
-                    error={blockError?.[block.blockNumber]}
+            <div className={styles.informationForm}>
+                <TextInput
+                    name={'title' as const}
+                    value={value?.title}
+                    label="Title for the Page"
+                    onChange={onInformationPageChange}
+                    error={error?.title}
                 />
-            ))}
-            <Button
-                name={index}
-                onClick={onRemove}
-            >
-                Delete Page
-            </Button>
+                {value.blocks?.map((block, i) => (
+                    <Block
+                        key={block.blockNumber}
+                        value={block}
+                        onChange={onChangeBlock}
+                        index={i}
+                        error={blockError?.[block.blockNumber]}
+                    />
+                ))}
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    className={styles.removeButton}
+                >
+                    Delete Page
+                </Button>
+            </div>
         </TabPanel>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
index aad82becd..5ce2c3ee8 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
@@ -1,3 +1,10 @@
-.information {
+.informationForm {
     display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+
+    .remove-button {
+        align-self: end;
+        width: fit-content;
+    }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8ffdb1cb3..52dea7d7e 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -11,14 +11,12 @@ import {
     analyzeErrors,
     useFormArray,
 } from '@togglecorp/toggle-form';
-/*
 import {
     getStorage,
     ref as storageRef,
     uploadBytes,
     getDownloadURL,
 } from 'firebase/storage';
-*/
 import {
     getDatabase,
     ref as databaseRef,
@@ -202,6 +200,7 @@ function NewTutorial(props: Props) {
                 exampleImage1,
                 exampleImage2,
                 scenarioPages,
+                informationPages,
                 ...valuesToCopy
             } = finalValues;
             type Screens = typeof finalValues.scenarioPages;
@@ -220,51 +219,44 @@ function NewTutorial(props: Props) {
                 {} as Record<string, CustomScreen>,
             );
 
-            // const storage = getStorage();
-            // const timestamp = (new Date()).getTime();
-            // const uploadedImage1Ref = storageRef(
-            //     storage,
-            //     `projectImages/${timestamp}-tutorial-image-1-${exampleImage1.name}`,
-            // );
-            // const uploadedImage2Ref = storageRef(
-            //     storage,
-            //     `projectImages/${timestamp}-tutorial-image-2-${exampleImage2.name}`,
-            // );
+            const storage = getStorage();
+            const timestamp = (new Date()).getTime();
 
             setTutorialSubmissionStatus('imageUpload');
             try {
-                /*
-                const uploadTask1 = await uploadBytes(uploadedImage1Ref, exampleImage1);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const downloadUrl1 = await getDownloadURL(uploadTask1.ref);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const uploadTask2 = await uploadBytes(uploadedImage2Ref, exampleImage2);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const downloadUrl2 = await getDownloadURL(uploadTask2.ref);
-                if (!mountedRef.current) {
-                    return;
-                }
-                        */
+                const finalInformationPages = informationPages.map(async (info) => (
+                    info.blocks.map(async (block) => {
+                        if (!block.imageFile) {
+                            return block;
+                        }
+                        const {
+                            imageFile,
+                            ...otherBlocks
+                        } = block;
+
+                        const uploadImagesRef = storageRef(
+                            storage,
+                            `projectImage/${timestamp}-tutorial-image-${block.blockNumber}-${imageFile?.name}`,
+                        );
+                        const uploadTask = await uploadBytes(uploadImagesRef, block.imageFile);
+                        const downloadUrl = await getDownloadURL(uploadTask.ref);
+                        return {
+
+                            ...otherBlocks,
+                            image: downloadUrl,
+                        };
+                    })
+                ));
+
+                console.log('finalInformation', finalInformationPages);
 
                 const uploadData = {
                     ...valuesToCopy,
                     screens,
-                    // exampleImage1: downloadUrl1,
-                    // exampleImage2: downloadUrl2,
+                    informationPages: finalInformationPages,
                     createdBy: userId,
                 };
 
-                if (uploadData) {
-                    console.info(uploadData);
-                    return;
-                }
-
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -567,6 +559,7 @@ function NewTutorial(props: Props) {
                     </Card>
                     <Card
                         title="Describe information pages"
+                        contentClassName={styles.card}
                     >
                         <SelectInput
                             name="templateType"

From b19e54297122f1347da5bbd1a5828a7969b17401 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 12 Jun 2023 17:32:35 +0545
Subject: [PATCH 17/72] Add custom option on new project page

---
 .../CustomOptionReadOnly/index.tsx            | 105 ++++++++++++++++++
 .../CustomOptionReadOnly/styles.css           |   0
 .../NewProject/BasicProjectInfoForm/index.tsx |  65 ++++++++++-
 .../app/views/NewProject/useProjectOptions.ts |   3 +
 .../app/views/NewProject/utils.ts             |  69 +++++++++++-
 .../app/views/NewTutorial/utils.ts            |   7 +-
 6 files changed, 241 insertions(+), 8 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
 create mode 100644 manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css

diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
new file mode 100644
index 000000000..0e86f8183
--- /dev/null
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { PartialProjectFormType } from '#views/NewProject/utils';
+import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
+import TextInput from '#components/TextInput';
+import NumberInput from '#components/NumberInput';
+import Heading from '#components/Heading';
+
+import styles from './styles.css';
+
+interface Props {
+    value: NonNullable<PartialProjectFormType['customOptions']>[number];
+}
+
+export default function CustomOptionReadOnly(props: Props) {
+    const {
+        value,
+    } = props;
+
+    const [activesubOptions, setActiveSubOptions] = React.useState('1');
+
+    return (
+        <TabPanel
+            name={String(value.optionId)}
+        >
+            <div className={styles.optionForm}>
+                <div className={styles.optionContent}>
+                    <TextInput
+                        className={styles.optionInput}
+                        label="Title"
+                        value={value?.title}
+                        name={'title' as const}
+                        disabled
+                    />
+                    <NumberInput
+                        className={styles.optionInput}
+                        label="Value"
+                        value={value?.value}
+                        name={'value' as const}
+                        disabled
+                    />
+                    <TextInput
+                        className={styles.optionIcon}
+                        name="icon"
+                        label="Icon"
+                        value={value?.icon}
+                        disabled
+                    />
+                </div>
+                <div className={styles.optionContent}>
+                    <TextInput
+                        className={styles.optionInput}
+                        label="Description"
+                        value={value.description}
+                        name={'description' as const}
+                        disabled
+                    />
+                    <TextInput
+                        className={styles.optionIcon}
+                        name="iconColor"
+                        label="Icon Color"
+                        value={value?.iconColor}
+                        disabled
+                    />
+                </div>
+                <Heading level={4}>
+                    Sub Options
+                </Heading>
+                {value.subOptions?.length ? (
+                    <Tabs
+                        value={activesubOptions}
+                        onChange={setActiveSubOptions}
+                    >
+                        <TabList>
+                            {value.subOptions?.map((rea) => (
+                                <Tab
+                                    name={`${rea.subOptionsId}`}
+                                    key={rea.subOptionsId}
+                                >
+                                    {`Sub Options ${rea.subOptionsId}`}
+                                </Tab>
+                            ))}
+                        </TabList>
+                        {value.subOptions.map((rea) => (
+                            <TabPanel
+                                name={String(rea.subOptionsId)}
+                                className={styles.reasonContent}
+                            >
+                                <TextInput
+                                    className={styles.reasonInput}
+                                    label="Description"
+                                    value={rea.description}
+                                    name={'description' as const}
+                                    disabled
+                                />
+                            </TabPanel>
+                        ))}
+                    </Tabs>
+                ) : (
+                    <div>No Sub Options</div>
+                )}
+            </div>
+        </TabPanel>
+    );
+}
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 648f5d3ef..840d048c2 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -1,14 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EntriesAsList, ObjectError, SetBaseValueArg } from '@togglecorp/toggle-form';
 import TextInput from '#components/TextInput';
 import { generateProjectName, PartialProjectFormType } from '#views/NewProject/utils';
-import { labelSelector, valueSelector } from '#utils/common';
+import { PROJECT_TYPE_FOOTPRINT, labelSelector, valueSelector } from '#utils/common';
 import NumberInput from '#components/NumberInput';
 import TextArea from '#components/TextArea';
 import ImageInput from '#components/ImageInput';
 import SelectInput from '#components/SelectInput';
 import useProjectOptions from '#views/NewProject/useProjectOptions';
 import styles from '#views/NewProject/styles.css';
+import Card from '#components/Card';
+import Heading from '#components/Heading';
+import Tabs,
+{
+    Tab,
+    TabList,
+} from '#components/Tabs';
+
+import CustomOptionReadOnly from './CustomOptionReadOnly';
 
 export interface Props<T extends PartialProjectFormType> {
     className?: string;
@@ -37,6 +46,8 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
         organisationsPending,
     } = useProjectOptions(value?.projectType);
 
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
+
     React.useEffect(() => {
         setFieldValue(tutorialOptions?.[0]?.value, 'tutorialId');
     }, [setFieldValue, value?.projectType, tutorialOptions]);
@@ -61,6 +72,21 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
         },
         [setFieldValue, setValue],
     );
+
+    const handleTutorialOptions = useCallback(
+        (tutorialId: string) => {
+            setFieldValue(tutorialId, 'tutorialId');
+
+            const newTutorial = tutorialOptions.find((tutorial) => tutorial.value === tutorialId);
+
+            setFieldValue(newTutorial?.customOptions, 'customOptions');
+        },
+        [
+            tutorialOptions,
+            setFieldValue,
+        ],
+    );
+
     return (
 
         <>
@@ -168,12 +194,13 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         hint="Choose which tutorial should be used for this project. Make sure that this aligns with what you are looking for."
                         name={'tutorialId' as const}
                         value={value?.tutorialId}
-                        onChange={setFieldValue}
+                        onChange={handleTutorialOptions}
                         options={tutorialOptions}
                         error={error?.tutorialId}
                         keySelector={valueSelector}
                         labelSelector={labelSelector}
                         disabled={submissionPending || tutorialsPending}
+                        nonClearable
                     />
                     <NumberInput
                         name={'verificationNumber' as const}
@@ -195,6 +222,38 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     />
                 </div>
             </div>
+            {(value.projectType === PROJECT_TYPE_FOOTPRINT && value?.customOptions) && (
+                <Card
+                    title="Define Options"
+                    contentClassName={styles.card}
+                >
+                    <Heading level={4}>
+                        Option Instructions
+                    </Heading>
+                    <Tabs
+                        value={activeOptionsTab}
+                        onChange={setActiveOptionsTab}
+                    >
+                        <TabList>
+                            {value.customOptions.map((custom) => (
+
+                                <Tab
+                                    key={custom.optionId}
+                                    name={`${custom.optionId}`}
+                                >
+                                    {`Option ${custom.optionId}`}
+                                </Tab>
+                            ))}
+                        </TabList>
+                        {value.customOptions.map((options) => (
+                            <CustomOptionReadOnly
+                                key={options.optionId}
+                                value={options}
+                            />
+                        ))}
+                    </Tabs>
+                </Card>
+            )}
         </>
     );
 }
diff --git a/manager-dashboard/app/views/NewProject/useProjectOptions.ts b/manager-dashboard/app/views/NewProject/useProjectOptions.ts
index a18f17d04..057d64ae5 100644
--- a/manager-dashboard/app/views/NewProject/useProjectOptions.ts
+++ b/manager-dashboard/app/views/NewProject/useProjectOptions.ts
@@ -8,6 +8,7 @@ import {
 } from 'firebase/database';
 
 import useFirebaseDatabase from '#hooks/useFirebaseDatabase';
+import { CustomOptions } from '#views/NewTutorial/utils';
 
 // FIXME: these typings are reusable
 interface Organisation {
@@ -56,6 +57,7 @@ interface Tutorial {
     tileServerB?: TileServerDetails; // For Change detection and Completeness
     tutorialDraftId: string;
     zoomLevel: number;
+    customOptions: CustomOptions;
 }
 
 function useProjectOptions(selectedProjectType: number | undefined) {
@@ -129,6 +131,7 @@ function useProjectOptions(selectedProjectType: number | undefined) {
             .map((tutorial) => ({
                 value: tutorial.projectId,
                 label: tutorial.name,
+                customOptions: tutorial.customOptions,
             })),
         [tutorials, selectedProjectType],
     );
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index 8c07e5a0d..ee9ecead9 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -22,6 +22,12 @@ import {
     TileServer,
     tileServerFieldsSchema,
 } from '#components/TileServerInput';
+import {
+    CustomOptions,
+    CustomOptionFormSchema,
+    CustomOptionFormSchemaMember,
+    CustomOptionSchemaFields,
+} from '#views/NewTutorial/utils';
 
 import {
     getNoMoreThanNCharacterCondition,
@@ -56,6 +62,7 @@ export interface ProjectFormType {
     maxTasksPerUser: number;
     tileServer: TileServer;
     tileServerB?: TileServer;
+    customOptions?: CustomOptions;
 }
 
 export const PROJECT_INPUT_TYPE_UPLOAD = 'aoi_file';
@@ -84,7 +91,7 @@ export const filterOptions = [
 export type PartialProjectFormType = PartialForm<
     Omit<ProjectFormType, 'projectImage'> & { projectImage?: File },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'geometry' | 'projectImage'
+    'geometry' | 'projectImage' | 'optionId' | 'subOptionsId'
 >;
 
 type ProjectFormSchema = ObjectSchema<PartialProjectFormType>;
@@ -225,7 +232,67 @@ export const projectFormSchema: ProjectFormSchema = {
                 validations: [greaterThanCondition(0)],
             },
         };
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['customOptions'],
+            (formValues) => {
+                const customOptionField: CustomOptionFormSchema = {
+                    keySelector: (key) => key.optionId,
+                    member: (): CustomOptionFormSchemaMember => ({
+                        fields: (): CustomOptionSchemaFields => ({
+                            optionId: {
+                                required: true,
+                            },
+                            title: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(500)],
+                            },
+                            value: {
+                                required: true,
+                            },
+                            description: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(500)],
+                            },
+                            icon: {
+                                required: true,
+                            },
+                            iconColor: {
+                                required: true,
+                            },
+                            subOptions: {
+                                keySelector: (key) => key.subOptionsId,
+                                member: () => ({
+                                    fields: () => ({
+                                        subOptionsId: {
+                                            required: true,
+                                        },
+                                        description: {
+                                            required: true,
+                                            requiredValidation: requiredStringCondition,
+                                            validations: [getNoMoreThanNCharacterCondition(500)],
+                                        },
+                                    }),
+                                }),
+                            },
+                        }),
+                    }),
+                };
 
+                if (formValues?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        customOptions: customOptionField,
+                    };
+                }
+                return {
+                    customOptions: { forceValue: nullValue },
+                };
+            },
+        );
         baseSchema = addCondition(
             baseSchema,
             value,
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index f68b1c326..b7e3887e9 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -163,7 +163,6 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    // FIXME: rename page to pageNumber, block to blockNumber
     'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'subOptionsId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
 >;
 
@@ -179,10 +178,10 @@ type ScenarioPagesFormSchemaMember = ReturnType<ScenarioPagesFormSchema['member'
 
 export type CustomOptionType = NonNullable<PartialTutorialFormType['customOptions']>[number];
 type CustomOptionSchema = ObjectSchema<CustomOptionType, PartialTutorialFormType>;
-type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
+export type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
 
-type CustomOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
-type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
+export type CustomOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
+export type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
 
 export type InformationPagesType = NonNullable<PartialTutorialFormType['informationPages']>[number]
 type InformationPagesSchema = ObjectSchema<InformationPagesType, PartialTutorialFormType>;

From b034304d94147fdb548f65be85c7b4976528a0ee Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 14 Jun 2023 17:53:19 +0545
Subject: [PATCH 18/72] Add preview screen for scenario

---
 .../ScenarioGeoJsonPreview/index.tsx          | 127 ++++++++++++++++++
 .../ScenarioGeoJsonPreview/styles.css         |  13 ++
 .../CustomOptionReadOnly/styles.css           |   3 +
 .../app/views/NewProject/utils.ts             |  51 +++++--
 .../CustomOptionInput/SubOption/index.tsx     |   9 ++
 .../NewTutorial/ScenarioPageInput/index.tsx   |   2 +-
 .../app/views/NewTutorial/index.tsx           |  68 ++++++----
 .../app/views/NewTutorial/styles.css          |  11 ++
 .../app/views/NewTutorial/utils.ts            |   6 +
 9 files changed, 248 insertions(+), 42 deletions(-)
 create mode 100644 manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
 create mode 100644 manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css

diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..eb3ff7ebb
--- /dev/null
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -0,0 +1,127 @@
+import React, { useCallback } from 'react';
+import {
+    map as createMap,
+    Map,
+    tileLayer,
+    geoJSON,
+} from 'leaflet';
+import { _cs } from '@togglecorp/fujs';
+import SegmentInput from '#components/SegmentInput';
+import { valueSelector, labelSelector } from '#utils/common';
+
+import styles from './styles.css';
+import Heading from '#components/Heading';
+
+interface Props {
+    className?: string;
+    geoJson: GeoJSON.GeoJSON | undefined;
+}
+
+const previewOptions: {
+    value: string;
+    label: string;
+}[] = [
+    { value: 'instruction', label: 'Instruction' },
+    { value: 'hint', label: 'Hint' },
+    { value: 'success', label: 'Success' },
+];
+
+function ScenarioGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+    } = props;
+
+    const mapRef = React.useRef<Map>();
+    const mapContainerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(
+        () => {
+            if (mapContainerRef.current && !mapRef.current) {
+                mapRef.current = createMap(mapContainerRef.current);
+            }
+
+            if (mapRef.current) {
+                // NOTE: show whole world by default
+                mapRef.current.setView(
+                    [0.0, 0.0],
+                    1,
+                );
+
+                const layer = tileLayer(
+                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    {
+                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        subdomains: ['a', 'b', 'c'],
+                    },
+                );
+
+                layer.addTo(mapRef.current);
+                mapRef.current.invalidateSize();
+            }
+
+            return () => {
+                if (mapRef.current) {
+                    mapRef.current.remove();
+                    mapRef.current = undefined;
+                }
+            };
+        },
+        [],
+    );
+
+    React.useEffect(
+        () => {
+            if (!geoJson) {
+                return undefined;
+            }
+
+            const map = mapRef.current;
+            if (!map) {
+                return undefined;
+            }
+
+            const newGeoJson = geoJSON();
+            newGeoJson.addTo(map);
+
+            newGeoJson.addData(geoJson);
+            const bounds = newGeoJson.getBounds();
+
+            if (bounds.isValid()) {
+                map.fitBounds(bounds);
+            }
+
+            return () => {
+                newGeoJson.removeFrom(map);
+                newGeoJson.remove();
+            };
+        },
+        [geoJson],
+    );
+
+    const handleSenarioType = useCallback((handleProps) => (
+        console.log(handleProps)
+    ), []);
+
+    return (
+        <div className={_cs(styles.geoJsonPreview, className)}>
+            <Heading level={3}>
+                Preview
+            </Heading>
+            <div
+                ref={mapContainerRef}
+                className={styles.mapContainer}
+            />
+            <SegmentInput
+                name={undefined}
+                value={undefined}
+                options={previewOptions}
+                keySelector={valueSelector}
+                labelSelector={labelSelector}
+                onChange={handleSenarioType}
+            />
+        </div>
+    );
+}
+
+export default ScenarioGeoJsonPreview;
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
new file mode 100644
index 000000000..19973949d
--- /dev/null
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
@@ -0,0 +1,13 @@
+.geo-json-preview {
+    position: relative;
+    flex-shrink: 0;
+    z-index: 0;
+    width: 100%;
+    max-width: 20rem;
+    height: 30rem;
+
+    .map-container {
+        width: 100%;
+        height: 100%;
+    }
+}
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
index e69de29bb..70f67625f 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
@@ -0,0 +1,3 @@
+.custom-option {
+    display: flex;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index ee9ecead9..350b82c89 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -293,11 +293,46 @@ export const projectFormSchema: ProjectFormSchema = {
                 };
             },
         );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType'],
+            ['geometry'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                if (projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_COMPLETENESS) {
+                    return {
+                        geometry: {
+                            required: true,
+                            validations: [validGeometryCondition],
+                        },
+                    };
+                }
+                if ((
+                    inputType === PROJECT_INPUT_TYPE_LINK
+                    || inputType === PROJECT_INPUT_TYPE_UPLOAD
+                ) && projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        geometry: {
+                            required: true,
+                            validations: [validGeometryCondition],
+                        },
+                    };
+                }
+                return {
+                    geometry: { forceValue: nullValue },
+                };
+            },
+        );
         baseSchema = addCondition(
             baseSchema,
             value,
             ['projectType'],
-            ['zoomLevel', 'geometry'],
+            ['zoomLevel'],
             (v) => {
                 const projectType = v?.projectType;
                 if (
@@ -314,15 +349,10 @@ export const projectFormSchema: ProjectFormSchema = {
                                 integerCondition,
                             ],
                         },
-                        geometry: {
-                            required: true,
-                            validations: [validGeometryCondition],
-                        },
                     };
                 }
                 return {
                     zoomLevel: { forceValue: nullValue },
-                    geometry: { forceValue: nullValue },
                 };
             },
         );
@@ -372,7 +402,7 @@ export const projectFormSchema: ProjectFormSchema = {
             baseSchema,
             value,
             ['projectType', 'inputType'],
-            ['filter', 'geometry', 'TMId'],
+            ['filter', 'TMId'],
             (v) => {
                 const projectType = v?.projectType;
                 const inputType = v?.inputType;
@@ -383,13 +413,6 @@ export const projectFormSchema: ProjectFormSchema = {
                     ) && projectType === PROJECT_TYPE_FOOTPRINT
                         ? { required: true }
                         : { forceValue: nullValue },
-                    // FIXME: geometry type is either string or object update validation
-                    geometry: (
-                        inputType === PROJECT_INPUT_TYPE_LINK
-                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
-                    ) && projectType === PROJECT_TYPE_FOOTPRINT
-                        ? { required: true, validations: [validGeometryCondition] }
-                        : { forceValue: nullValue },
                     // FIXME: number string condition
                     TMId: (
                         inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
index 54f2227f2..888e25158 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
@@ -8,6 +8,7 @@ import {
 import { TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
+import NumberInput from '#components/NumberInput';
 
 import { PartialCustomOptionsType } from '..';
 import styles from './styles.css';
@@ -46,6 +47,14 @@ export default function SubOption(props: Props) {
                 error={error?.description}
                 onChange={onReasonChange}
             />
+            <NumberInput
+                className={styles.reasonInput}
+                label="Value"
+                value={value.value}
+                name={'value' as const}
+                error={error?.description}
+                onChange={onReasonChange}
+            />
             <Button
                 name={index}
                 onClick={onRemove}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 867e28981..70aa79ce5 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -72,7 +72,7 @@ export default function ScenarioPageInput(props: Props) {
 
     return (
         <TabPanel
-            name={`Scenario ${value.scenarioId}`}
+            name={value.scenarioId}
         >
             <div className={styles.scenario}>
                 <Heading level={4}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 52dea7d7e..135c0eb0a 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -39,7 +39,6 @@ import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SegmentInput from '#components/SegmentInput';
-// import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
 import {
     Tabs,
@@ -53,6 +52,8 @@ import TileServerInput, {
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
+import SelectInput from '#components/SelectInput';
+import ScenarioGeoJsonPreview from '#components/ScenarioGeoJsonPreview';
 import {
     valueSelector,
     labelSelector,
@@ -78,7 +79,6 @@ import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
-import SelectInput from '#components/SelectInput';
 
 function pageKeySelector(d: PageTemplateType) {
     return d.key;
@@ -153,11 +153,13 @@ function NewTutorial(props: Props) {
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
     // NOTE: scenario
-    const [activeTab, setActiveTab] = React.useState('Scenario 1');
+    const [activeTab, setActiveTab] = React.useState('1');
     // NOTE: options
     const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
     // NOTE: Information Page
     const [activeInformationPages, setActiveInformationPages] = React.useState('1');
+    // NOTE: Preview GeoJson
+    const [activePreviewGeoJson, setActivePreviewGeoJson] = React.useState<PartialTutorialFormType['tutorialTasks'] | undefined>();
 
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -178,6 +180,17 @@ function NewTutorial(props: Props) {
         [error?.informationPages],
     );
 
+    const handleScenarioChange = React.useCallback((tab) => {
+        setActiveTab(tab);
+        const previewGeoJson = value.tutorialTasks?.features.filter(
+            (screen) => screen.properties.screen === Number(activeTab),
+        );
+        setActivePreviewGeoJson(previewGeoJson);
+    }, [
+        value.tutorialTasks,
+        activeTab,
+    ]);
+
     const handleFormSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
     ) => {
@@ -197,8 +210,6 @@ function NewTutorial(props: Props) {
                 return;
             }
             const {
-                exampleImage1,
-                exampleImage2,
                 scenarioPages,
                 informationPages,
                 ...valuesToCopy
@@ -248,8 +259,6 @@ function NewTutorial(props: Props) {
                     })
                 ));
 
-                console.log('finalInformation', finalInformationPages);
-
                 const uploadData = {
                     ...valuesToCopy,
                     screens,
@@ -528,30 +537,35 @@ function NewTutorial(props: Props) {
                     >
                         <Tabs
                             value={activeTab}
-                            onChange={setActiveTab}
+                            onChange={handleScenarioChange}
                         >
                             {value.scenarioPages?.length ? (
-                                <>
-                                    <TabList>
-                                        {value.scenarioPages?.map((task) => (
-                                            <Tab
+                                <div className={styles.tabContent}>
+                                    <div className={styles.tabList}>
+                                        <TabList>
+                                            {value.scenarioPages?.map((task) => (
+                                                <Tab
+                                                    key={task.scenarioId}
+                                                    name={task.scenarioId}
+                                                >
+                                                    {`Scenario ${task.scenarioId}`}
+                                                </Tab>
+                                            ))}
+                                        </TabList>
+                                        {value.scenarioPages?.map((task, index) => (
+                                            <ScenarioPageInput
                                                 key={task.scenarioId}
-                                                name={`Scenario ${task.scenarioId}`}
-                                            >
-                                                {`Scenario ${task.scenarioId}`}
-                                            </Tab>
+                                                index={index}
+                                                value={task}
+                                                onChange={onScenarioFormChange}
+                                                error={scenarioError?.[task.scenarioId]}
+                                            />
                                         ))}
-                                    </TabList>
-                                    {value.scenarioPages?.map((task, index) => (
-                                        <ScenarioPageInput
-                                            key={task.scenarioId}
-                                            index={index}
-                                            value={task}
-                                            onChange={onScenarioFormChange}
-                                            error={scenarioError?.[task.scenarioId]}
-                                        />
-                                    ))}
-                                </>
+                                    </div>
+                                    <ScenarioGeoJsonPreview
+                                        geoJson={activePreviewGeoJson}
+                                    />
+                                </div>
                             ) : (
                                 <div>No Scenarios</div>
                             )}
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index c06bdcc9b..a2ea122ee 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -39,6 +39,17 @@
             display: flex;
             flex-direction: column;
             gap: var(--spacing-large);
+
+            .tab-content {
+                display: flex;
+                gap: var(--spacing-extra-large);
+
+                .tab-list {
+                    display: flex;
+                    flex-basis: 60%;
+                    flex-direction: column;
+                }
+            }
         }
     }
 
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index b7e3887e9..725183d1e 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -111,6 +111,7 @@ export type CustomOptions = {
     subOptions: {
         subOptionsId: number;
         description: string;
+        value: number;
     }[];
 }[];
 
@@ -345,6 +346,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             },
                             value: {
                                 required: true,
+                                validations: [integerCondition],
                             },
                             description: {
                                 required: true,
@@ -369,6 +371,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                             requiredValidation: requiredStringCondition,
                                             validations: [getNoMoreThanNCharacterCondition(500)],
                                         },
+                                        value: {
+                                            required: true,
+                                            validations: [integerCondition],
+                                        },
                                     }),
                                 }),
                             },

From 3c4dfbb639ec92e8d01266e47b23d4841dc9f6fa Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Mon, 12 Jun 2023 14:09:12 +0545
Subject: [PATCH 19/72] Fix async file upload in tutorial

---
 .../app/views/NewTutorial/index.tsx           | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 135c0eb0a..e33197cd2 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -211,7 +211,7 @@ function NewTutorial(props: Props) {
             }
             const {
                 scenarioPages,
-                informationPages,
+                informationPages: informationPagesFromForm,
                 ...valuesToCopy
             } = finalValues;
             type Screens = typeof finalValues.scenarioPages;
@@ -235,8 +235,8 @@ function NewTutorial(props: Props) {
 
             setTutorialSubmissionStatus('imageUpload');
             try {
-                const finalInformationPages = informationPages.map(async (info) => (
-                    info.blocks.map(async (block) => {
+                const informationPagesPromises = informationPagesFromForm.map(async (info) => {
+                    const blockPromises = info.blocks.map(async (block) => {
                         if (!block.imageFile) {
                             return block;
                         }
@@ -247,31 +247,44 @@ function NewTutorial(props: Props) {
 
                         const uploadImagesRef = storageRef(
                             storage,
-                            `projectImage/${timestamp}-tutorial-image-${block.blockNumber}-${imageFile?.name}`,
+                            `tutorialImages/${timestamp}-block-image-${block.blockNumber}-${imageFile?.name}`,
                         );
                         const uploadTask = await uploadBytes(uploadImagesRef, block.imageFile);
                         const downloadUrl = await getDownloadURL(uploadTask.ref);
-                        return {
 
+                        return {
                             ...otherBlocks,
                             image: downloadUrl,
                         };
-                    })
-                ));
+                    });
+
+                    return Promise.all(blockPromises);
+                });
+
+                const informationPages = await Promise.all(informationPagesPromises);
 
                 const uploadData = {
                     ...valuesToCopy,
                     screens,
-                    informationPages: finalInformationPages,
+                    informationPages,
                     createdBy: userId,
                 };
 
+                /*
+                if (uploadData) {
+                    console.info(uploadData);
+                    setTutorialSubmissionStatus('failed');
+                    return;
+                }
+                */
+
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
                 if (!mountedRef.current) {
                     return;
                 }
+
                 const newKey = newTutorialDraftsRef.key;
 
                 if (newKey) {

From 7d3ee5360f50119203f3629fede92ccc99c2dc34 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 15 Jun 2023 14:19:12 +0545
Subject: [PATCH 20/72] Add validations for instruction and sub option

---
 .../NewTutorial/CustomOptionInput/index.tsx   |  3 +
 .../app/views/NewTutorial/index.tsx           | 71 +++++++++++--------
 .../app/views/NewTutorial/utils.ts            | 44 +++++++++---
 3 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 25fab0186..3935d0f1d 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -7,6 +7,7 @@ import {
     useFormObject,
     getErrorObject,
     useFormArray,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
@@ -157,9 +158,11 @@ export default function CustomOptionInput(props: Props) {
                     className={styles.addButton}
                     icons={<MdAdd />}
                     onClick={handlesubOptionsAdd}
+                    disabled={value.subOptions && value.subOptions.length >= 6}
                 >
                     Add Sub Options
                 </Button>
+                {subOptionsError && subOptionsError?.[nonFieldError]}
                 {value.subOptions?.length ? (
                     <Tabs
                         value={activesubOptions}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index e33197cd2..dfee13ac9 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -10,6 +10,7 @@ import {
     createSubmitHandler,
     analyzeErrors,
     useFormArray,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -92,21 +93,21 @@ const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
         optionId: 1,
         value: 1,
         title: 'Yes',
-        icon: 'tap-1',
+        icon: 'addOutline',
         iconColor: 'green',
     },
     {
         value: 0,
         optionId: 2,
         title: 'No',
-        icon: 'tap-2',
+        icon: 'alertOutline',
         iconColor: 'red',
     },
     {
         value: 2,
         optionId: 3,
         title: 'Not Sure',
-        icon: 'tap-3',
+        icon: 'banOutline',
         iconColor: 'yellow',
     },
 ];
@@ -270,13 +271,11 @@ function NewTutorial(props: Props) {
                     createdBy: userId,
                 };
 
-                /*
-                if (uploadData) {
-                    console.info(uploadData);
-                    setTutorialSubmissionStatus('failed');
-                    return;
-                }
-                */
+                // if (uploadData) {
+                //     console.info('upload', uploadData);
+                //     setTutorialSubmissionStatus('failed');
+                //     return;
+                // }
 
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
@@ -353,7 +352,6 @@ function NewTutorial(props: Props) {
                     const newOptionId = safeOldValues.length > 0
                         ? Math.max(...safeOldValues.map((option) => option.optionId)) + 1
                         : 1;
-
                     const newValue = safeOldValues.length > 0
                         ? Math.max(...safeOldValues.map((option) => option.value ?? 0)) + 1
                         : 1;
@@ -369,7 +367,9 @@ function NewTutorial(props: Props) {
             );
             // TODO: Set the new option as selected
         },
-        [setFieldValue],
+        [
+            setFieldValue,
+        ],
     );
 
     const submissionPending = (
@@ -596,8 +596,13 @@ function NewTutorial(props: Props) {
                             keySelector={pageKeySelector}
                             labelSelector={pageLabelSelector}
                             onChange={handleAddInformationPages}
+                            disabled={
+                                value.informationPages
+                                && value.informationPages.length >= 10
+                            }
                             nonClearable
                         />
+                        {informationPagesError && <p>{informationPagesError?.[nonFieldError]}</p>}
                         {value.informationPages?.length ? (
                             <Tabs
                                 value={activeInformationPages}
@@ -641,9 +646,14 @@ function NewTutorial(props: Props) {
                                 className={styles.addButton}
                                 icons={<MdAdd />}
                                 onClick={handleAddDefineOptions}
+                                disabled={
+                                    value.customOptions
+                                    && value.customOptions?.length >= 6
+                                }
                             >
                                 Add instruction
                             </Button>
+                            {optionsError && <p>{optionsError?.[nonFieldError]}</p>}
                             {value.customOptions?.length ? (
                                 <Tabs
                                     value={activeOptionsTab}
@@ -676,23 +686,26 @@ function NewTutorial(props: Props) {
                         </Card>
                     )}
                 </InputSection>
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
-                    <InputSection
-                        heading="Zoom Level"
-                    >
-                        <NumberInput
-                            name={'zoomLevel' as const}
-                            value={value?.zoomLevel}
-                            onChange={setFieldValue}
-                            label="Zoom Level"
-                            hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
-                            error={error?.zoomLevel}
-                            disabled={submissionPending}
-                        />
-                    </InputSection>
-                )}
+                {
+                    (value?.projectType === PROJECT_TYPE_BUILD_AREA
+                        || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                        || value?.projectType === PROJECT_TYPE_COMPLETENESS)
+                    && (
+                        <InputSection
+                            heading="Zoom Level"
+                        >
+                            <NumberInput
+                                name={'zoomLevel' as const}
+                                value={value?.zoomLevel}
+                                onChange={setFieldValue}
+                                label="Zoom Level"
+                                hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
+                                error={error?.zoomLevel}
+                                disabled={submissionPending}
+                            />
+                        </InputSection>
+                    )
+                }
                 <InputSection
                     heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
                 >
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 725183d1e..c33b6c55b 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -30,24 +30,24 @@ export interface IconOptions {
 
 export const iconOptions: IconOptions[] = [
     {
-        key: 'swipe-left',
-        label: 'Swipe Left',
+        key: 'addOutline',
+        label: 'Add Outline',
     },
     {
-        key: 'tap-1',
-        label: 'Tap 1',
+        key: 'alertOutline',
+        label: 'Alert Outline',
     },
     {
-        key: 'tap-2',
-        label: 'Tap 2',
+        key: 'banOutline',
+        label: 'Ban Outline',
     },
     {
-        key: 'tap-3',
-        label: 'Tap 3',
+        key: 'checkmarkOutline',
+        label: 'Checkmark Outline',
     },
     {
-        key: 'check',
-        label: 'Check',
+        key: 'closeOutline',
+        label: 'Close Outline',
     },
 ];
 
@@ -270,6 +270,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 }),
             },
             informationPages: {
+                validation: (info) => {
+                    if (info && info.length >= 10) {
+                        return 'Information page cannot be more than 10';
+                    }
+                    return undefined;
+                },
                 keySelector: (key) => key.pageNumber,
                 member: (): InformationPagesFormSchemaMember => ({
                     fields: (): InformationPagesSchemaFields => ({
@@ -333,6 +339,15 @@ export const tutorialFormSchema: TutorialFormSchema = {
             ['customOptions'],
             (formValues) => {
                 const customOptionField: CustomOptionFormSchema = {
+                    validation: (option) => {
+                        if (option && option.length >= 6) {
+                            return 'Options cannot be more than 6';
+                        }
+                        if (option && option.length <= 2) {
+                            return 'Options cannot be less than 2';
+                        }
+                        return undefined;
+                    },
                     keySelector: (key) => key.optionId,
                     member: (): CustomOptionFormSchemaMember => ({
                         fields: (): CustomOptionSchemaFields => ({
@@ -361,6 +376,15 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             },
                             subOptions: {
                                 keySelector: (key) => key.subOptionsId,
+                                validation: (sub) => {
+                                    if (sub && sub?.length >= 6) {
+                                        return 'Sub options cannot be more than 6';
+                                    }
+                                    if (sub && sub.length <= 2) {
+                                        return 'Sub options cannot be less than 2';
+                                    }
+                                    return undefined;
+                                },
                                 member: () => ({
                                     fields: () => ({
                                         subOptionsId: {

From 380fed012f4f0980396ae7104b9a6970414f4e63 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 16 Jun 2023 10:11:57 +0545
Subject: [PATCH 21/72] Add preview screen for scenario form

---
 .../ScenarioGeoJsonPreview/index.tsx          |  52 +++---
 .../ScenarioGeoJsonPreview/styles.css         |  34 ++++
 .../app/components/TutorialList/index.tsx     |   2 -
 manager-dashboard/app/utils/common.ts         | 176 +++++++++++++++++-
 .../app/views/NewProject/utils.ts             |   2 +
 .../NewTutorial/CustomOptionInput/index.tsx   |  57 +++---
 .../NewTutorial/CustomOptionInput/styles.css  |  47 +++--
 .../NewTutorial/ScenarioPageInput/index.tsx   |  88 ++++++---
 .../NewTutorial/ScenarioPageInput/styles.css  |  23 ++-
 .../app/views/NewTutorial/index.tsx           |  79 ++++----
 .../app/views/NewTutorial/styles.css          |   9 +-
 .../app/views/NewTutorial/utils.ts            |  31 +--
 12 files changed, 430 insertions(+), 170 deletions(-)

diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
index eb3ff7ebb..ebde4f4d5 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
     map as createMap,
     Map,
@@ -6,30 +6,26 @@ import {
     geoJSON,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
-import SegmentInput from '#components/SegmentInput';
-import { valueSelector, labelSelector } from '#utils/common';
+import Heading from '#components/Heading';
 
 import styles from './styles.css';
-import Heading from '#components/Heading';
+import { iconMap } from '#utils/common';
 
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: string;
+    }
 }
 
-const previewOptions: {
-    value: string;
-    label: string;
-}[] = [
-    { value: 'instruction', label: 'Instruction' },
-    { value: 'hint', label: 'Hint' },
-    { value: 'success', label: 'Success' },
-];
-
 function ScenarioGeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
+        previewPopUp,
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -99,27 +95,35 @@ function ScenarioGeoJsonPreview(props: Props) {
         [geoJson],
     );
 
-    const handleSenarioType = useCallback((handleProps) => (
-        console.log(handleProps)
-    ), []);
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
         <div className={_cs(styles.geoJsonPreview, className)}>
             <Heading level={3}>
                 Preview
             </Heading>
+            <div className={styles.mapContent}>
+                <div className={styles.popUpContent}>
+                    <div className={styles.popUpTitle}>
+                        {previewPopUp?.title ?? 'Title'}
+                    </div>
+                    <div>
+                        {previewPopUp?.description ?? 'Description'}
+                    </div>
+                </div>
+                {
+                    Comp
+                    && (
+                        <div className={styles.popUpIcon}>
+                            <Comp />
+                        </div>
+                    )
+                }
+            </div>
             <div
                 ref={mapContainerRef}
                 className={styles.mapContainer}
             />
-            <SegmentInput
-                name={undefined}
-                value={undefined}
-                options={previewOptions}
-                keySelector={valueSelector}
-                labelSelector={labelSelector}
-                onChange={handleSenarioType}
-            />
         </div>
     );
 }
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
index 19973949d..a4fc7f495 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
@@ -1,13 +1,47 @@
 .geo-json-preview {
+    display: flex;
     position: relative;
+    align-items: center;
+    flex-direction: column;
     flex-shrink: 0;
+    gap: var(--spacing-medium);
     z-index: 0;
     width: 100%;
     max-width: 20rem;
     height: 30rem;
 
     .map-container {
+        z-index: -1;
         width: 100%;
         height: 100%;
     }
+
+    .map-content {
+        display: flex;
+        position: absolute;
+        top: 60px;
+        opacity: 0.95;
+        border-radius: 10px;
+        background-color: #ffffff;
+        padding: var(--spacing-medium);
+        gap: var(--spacing-large);
+        width: 90%;
+
+        .pop-up-content {
+            display: flex;
+            flex-basis: 80%;
+            flex-direction: column;
+
+            .pop-up-title {
+                font-weight: var(--font-weight-bold);
+            }
+
+        }
+
+        .pop-up-icon {
+            display: flex;
+            align-items: center;
+            font-size: var(--font-size-super-large);
+        }
+    }
 }
diff --git a/manager-dashboard/app/components/TutorialList/index.tsx b/manager-dashboard/app/components/TutorialList/index.tsx
index 9065f87a8..9ab818f41 100644
--- a/manager-dashboard/app/components/TutorialList/index.tsx
+++ b/manager-dashboard/app/components/TutorialList/index.tsx
@@ -53,8 +53,6 @@ function TutorialList(props: Props) {
         query: tutorialsQuery,
     });
 
-    console.info(tutorials);
-
     const tutorialList = React.useMemo(
         () => (tutorials ? Object.entries(tutorials).reverse() : []),
         [tutorials],
diff --git a/manager-dashboard/app/utils/common.ts b/manager-dashboard/app/utils/common.ts
index 90ad219b7..4e6c76388 100644
--- a/manager-dashboard/app/utils/common.ts
+++ b/manager-dashboard/app/utils/common.ts
@@ -1,4 +1,33 @@
-import { isDefined } from '@togglecorp/fujs';
+import {
+    IoAddOutline,
+    IoAlertOutline,
+    IoBanOutline,
+    IoCheckmarkOutline,
+    IoCloseOutline,
+    IoEggOutline,
+    IoEllipseOutline,
+    IoFlagOutline,
+    IoHandLeftOutline,
+    IoHandRightOutline,
+    IoHappyOutline,
+    IoHeartOutline,
+    IoHelpOutline,
+    IoInformationOutline,
+    IoPrismOutline,
+    IoRefreshOutline,
+    IoRemoveOutline,
+    IoSadOutline,
+    IoSearchOutline,
+    IoShapesOutline,
+    IoSquareOutline,
+    IoStarOutline,
+    IoThumbsDownOutline,
+    IoThumbsUpOutline,
+    IoTriangleOutline,
+    IoWarningOutline,
+} from 'react-icons/io5';
+import { isDefined, listToMap } from '@togglecorp/fujs';
+import { IconType } from 'react-icons';
 
 export function valueSelector<T>(item: { value: T }) {
     return item.value;
@@ -35,3 +64,148 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_CHANGE_DETECTION]: 'Change Detection',
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
 };
+
+export interface IconList {
+    key: string;
+    label: string;
+    component: IconType
+}
+
+export const iconList: IconList[] = [
+    {
+        key: 'addOutline',
+        label: 'Add',
+        component: IoAddOutline,
+    },
+    {
+        key: 'alertOutline',
+        label: 'Alert',
+        component: IoAlertOutline,
+    },
+    {
+        key: 'banOutline',
+        label: 'Ban',
+        component: IoBanOutline,
+    },
+    {
+        key: 'checkmarkOutline',
+        label: 'Checkmark',
+        component: IoCheckmarkOutline,
+    },
+    {
+        key: 'closeOutline',
+        label: 'Close',
+        component: IoCloseOutline,
+    },
+    {
+        key: 'eggOutline',
+        label: 'Egg',
+        component: IoEggOutline,
+    },
+    {
+        key: 'ellipseOutline',
+        label: 'Ellipse',
+        component: IoEllipseOutline,
+    },
+    {
+        key: 'flagOutline',
+        label: 'Flag',
+        component: IoFlagOutline,
+    },
+    {
+        key: 'handLeftOutline',
+        label: 'Hand Left',
+        component: IoHandLeftOutline,
+    },
+    {
+        key: 'handRightOutline',
+        label: 'Hand Right',
+        component: IoHandRightOutline,
+    },
+    {
+        key: 'happyOutline',
+        label: 'Happy',
+        component: IoHappyOutline,
+    },
+    {
+        key: 'heartOutline',
+        label: 'Heart',
+        component: IoHeartOutline,
+    },
+    {
+        key: 'helpOutline',
+        label: 'Help',
+        component: IoHelpOutline,
+    },
+    {
+        key: 'informationOutline',
+        label: 'Information',
+        component: IoInformationOutline,
+    },
+    {
+        key: 'prismOutline',
+        label: 'Prism',
+        component: IoPrismOutline,
+    },
+    {
+        key: 'refreshOutline',
+        label: 'Refresh',
+        component: IoRefreshOutline,
+    },
+    {
+        key: 'removeOutline',
+        label: 'Remove',
+        component: IoRemoveOutline,
+    },
+    {
+        key: 'sadOutline',
+        label: 'Sad',
+        component: IoSadOutline,
+    },
+    {
+        key: 'searchOutline',
+        label: 'Search',
+        component: IoSearchOutline,
+    },
+    {
+        key: 'shapesOutline',
+        label: 'Shapes',
+        component: IoShapesOutline,
+    },
+    {
+        key: 'squareOutline',
+        label: 'Square',
+        component: IoSquareOutline,
+    },
+    {
+        key: 'starOutline',
+        label: 'Star',
+        component: IoStarOutline,
+    },
+    {
+        key: 'thumbsDownOutline',
+        label: 'Thumbs Down',
+        component: IoThumbsDownOutline,
+    },
+    {
+        key: 'thumbsUpOutline',
+        label: 'Thumbs Up',
+        component: IoThumbsUpOutline,
+    },
+    {
+        key: 'triangleOutline',
+        label: 'Triangle',
+        component: IoTriangleOutline,
+    },
+    {
+        key: 'warningOutline',
+        label: 'Warning',
+        component: IoWarningOutline,
+    },
+];
+
+export const iconMap = listToMap(
+    iconList,
+    (icon) => icon.key,
+    (icon) => icon.component,
+);
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index 350b82c89..b78b76164 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -196,6 +196,8 @@ export const projectFormSchema: ProjectFormSchema = {
                 required: true,
             },
             lookFor: {
+                required: true,
+                requiredValidation: requiredStringCondition,
                 validations: [getNoMoreThanNCharacterCondition(25)],
             },
             projectDetails: {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 3935d0f1d..9d8615e96 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -11,20 +11,20 @@ import {
 } from '@togglecorp/toggle-form';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
-import Tabs, { TabList, TabPanel, Tab } from '#components/Tabs';
+import Tabs, { TabList, Tab } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 
 import SubOption from './SubOption';
 import {
-    IconOptions,
+    ColorOptions,
     PartialTutorialFormType,
     iconColorOptions,
-    iconOptions,
 } from '../utils';
 
 import styles from './styles.css';
+import { IconList, iconList } from '#utils/common';
 
 export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
 const defaultcustomOptionsValue: PartialCustomOptionsType = {
@@ -89,9 +89,7 @@ export default function CustomOptionInput(props: Props) {
     );
 
     return (
-        <TabPanel
-            name={String(value.optionId)}
-        >
+        <div className={styles.optionContainer}>
             <div className={styles.optionForm}>
                 <div className={styles.optionContent}>
                     <TextInput
@@ -102,34 +100,26 @@ export default function CustomOptionInput(props: Props) {
                         onChange={onOptionChange}
                         error={error?.title}
                     />
-                    <NumberInput
-                        className={styles.optionInput}
-                        label="Value"
-                        value={value?.value}
-                        name={'value' as const}
-                        onChange={onOptionChange}
-                        error={error?.value}
-                    />
                     <SelectInput
                         className={styles.optionIcon}
                         name="icon"
                         label="Icon"
                         value={value?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
+                        options={iconList}
+                        keySelector={(d: IconList) => d.key}
+                        labelSelector={(d: IconList) => d.label}
                         onChange={onOptionChange}
                         error={error?.icon}
                     />
                 </div>
                 <div className={styles.optionContent}>
-                    <TextInput
+                    <NumberInput
                         className={styles.optionInput}
-                        label="Description"
-                        value={value.description}
-                        name={'description' as const}
+                        label="Value"
+                        value={value?.value}
+                        name={'value' as const}
                         onChange={onOptionChange}
-                        error={error?.description}
+                        error={error?.value}
                     />
                     <SelectInput
                         className={styles.optionIcon}
@@ -137,12 +127,20 @@ export default function CustomOptionInput(props: Props) {
                         label="Icon Color"
                         value={value?.iconColor}
                         options={iconColorOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
+                        keySelector={(d: ColorOptions) => d.key}
+                        labelSelector={(d: ColorOptions) => d.label}
                         onChange={onOptionChange}
                         error={error?.iconColor}
                     />
                 </div>
+                <TextInput
+                    className={styles.optionInput}
+                    label="Description"
+                    value={value.description}
+                    name={'description' as const}
+                    onChange={onOptionChange}
+                    error={error?.description}
+                />
                 <Button
                     name={index}
                     onClick={onRemove}
@@ -193,6 +191,15 @@ export default function CustomOptionInput(props: Props) {
                     <div>Add Sub Options</div>
                 )}
             </div>
-        </TabPanel>
+            <div className={styles.optionPreview}>
+                <Heading level={3}>
+                    Preview
+                </Heading>
+                <div className={styles.previewScreen}>
+                    {value.title}
+                    {value.description}
+                </div>
+            </div>
+        </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
index 0a2844aa9..84e6403b9 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -1,27 +1,46 @@
-.option-form {
+.option-container {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacing-medium);
+    gap: var(--spacing-extra-large);
 
-    .option-content {
+    .option-form {
         display: flex;
+        flex-basis: 60%;
+        flex-direction: column;
         gap: var(--spacing-medium);
 
-        .option-input {
-            flex-grow: 1;
+        .option-content {
+            display: flex;
+            gap: var(--spacing-medium);
+
+            .option-input {
+                flex-grow: 1;
+            }
+
+            .option-icon {
+                flex-basis: 15%;
+            }
         }
 
-        .option-icon {
-            flex-basis: 15%;
+        .remove-button {
+            align-self: end;
+            width: fit-content;
         }
-    }
 
-    .remove-button {
-        align-self: end;
-        width: fit-content;
+        .add-button {
+            width: fit-content;
+        }
     }
 
-    .add-button {
-        width: fit-content;
+    .option-preview {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        flex-grow: 1;
+
+        .preview-screen {
+            background-color: var(--color-primary);
+            width: 20rem;
+            height: 30rem;
+        }
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 70aa79ce5..659d769d9 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -6,18 +6,19 @@ import {
     Error,
     getErrorObject,
 } from '@togglecorp/toggle-form';
+import {
+    IconList,
+    iconList,
+    valueSelector,
+    labelSelector,
+} from '#utils/common';
 import TextInput from '#components/TextInput';
 import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
-import {
-    TabPanel,
-} from '#components/Tabs';
+import ScenarioGeoJsonPreview from '#components/ScenarioGeoJsonPreview';
+import SegmentInput from '#components/SegmentInput';
 
 import styles from './styles.css';
-import {
-    IconOptions,
-    iconOptions,
-} from '../utils';
 
 type ScenarioType = {
     scenarioId: string;
@@ -26,7 +27,7 @@ type ScenarioType = {
         icon: string;
         title: string;
     };
-    instructions: {
+    instruction: {
         description: string;
         icon: string;
         title: string;
@@ -38,6 +39,17 @@ type ScenarioType = {
     };
 };
 
+interface ScenarioSegmentType {
+    value: 'instruction' | 'hint' | 'success';
+    label: string;
+}
+
+const previewOptions: ScenarioSegmentType[] = [
+    { value: 'instruction', label: 'Instruction' },
+    { value: 'hint', label: 'Hint' },
+    { value: 'success', label: 'Success' },
+];
+
 type PartialScenarioType = PartialForm<ScenarioType, 'scenarioId'>;
 const defaultScenarioTabsValue: PartialScenarioType = {
     scenarioId: 'xxx',
@@ -48,6 +60,7 @@ interface Props {
     onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
     error: Error<PartialScenarioType> | undefined;
+    geoJson: GeoJSON.GeoJSON | undefined;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -56,25 +69,32 @@ export default function ScenarioPageInput(props: Props) {
         onChange,
         index,
         error: riskyError,
+        geoJson,
     } = props;
 
+    const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
+
     const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
 
-    const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>('instructions', onFieldChange, {});
+    const onInstructionFieldChange = useFormObject<'instruction', PartialScenarioType['instruction']>('instruction', onFieldChange, {});
     const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>('hint', onFieldChange, {});
     const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>('success', onFieldChange, {});
 
     const error = getErrorObject(riskyError);
 
-    const instructionsError = getErrorObject(error?.instructions);
+    const instructionsError = getErrorObject(error?.instruction);
     const hintError = getErrorObject(error?.hint);
     const successError = getErrorObject(error?.success);
 
+    const handleScenarioType = React.useCallback((scenarioSegment: ScenarioSegmentType['value']) => {
+        setActiveInput(scenarioSegment);
+    }, []);
+
+    const previewPopUpData = value[activeSegmentInput];
+
     return (
-        <TabPanel
-            name={value.scenarioId}
-        >
-            <div className={styles.scenario}>
+        <div className={styles.scenario}>
+            <div className={styles.scenarioContent}>
                 <Heading level={4}>
                     Instructions
                 </Heading>
@@ -82,14 +102,14 @@ export default function ScenarioPageInput(props: Props) {
                     <div className={styles.scenarioFormContent}>
                         <TextInput
                             name="title"
-                            value={value.instructions?.title}
+                            value={value.instruction?.title}
                             label="Title"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.title}
                         />
                         <TextInput
                             name="description"
-                            value={value.instructions?.description}
+                            value={value.instruction?.description}
                             label="Description"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.description}
@@ -98,10 +118,10 @@ export default function ScenarioPageInput(props: Props) {
                     <SelectInput
                         name="icon"
                         label="Icon"
-                        value={value.instructions?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
+                        value={value.instruction?.icon}
+                        options={iconList}
+                        keySelector={(d: IconList) => d.key}
+                        labelSelector={(d: IconList) => d.label}
                         onChange={onInstructionFieldChange}
                         error={instructionsError?.icon}
                     />
@@ -130,9 +150,9 @@ export default function ScenarioPageInput(props: Props) {
                         name="icon"
                         label="Icon"
                         value={value.hint?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
+                        options={iconList}
+                        keySelector={(d: IconList) => d.key}
+                        labelSelector={(d: IconList) => d.label}
                         onChange={onHintFieldChange}
                         error={hintError?.icon}
                     />
@@ -161,14 +181,28 @@ export default function ScenarioPageInput(props: Props) {
                         name="icon"
                         label="Icon"
                         value={value.success?.icon}
-                        options={iconOptions}
-                        keySelector={(d: IconOptions) => d.key}
-                        labelSelector={(d: IconOptions) => d.label}
+                        options={iconList}
+                        keySelector={(d: IconList) => d.key}
+                        labelSelector={(d: IconList) => d.label}
                         onChange={onSuccessFieldChange}
                         error={successError?.icon}
                     />
                 </div>
             </div>
-        </TabPanel>
+            <div>
+                <ScenarioGeoJsonPreview
+                    geoJson={geoJson}
+                    previewPopUp={previewPopUpData}
+                />
+                <SegmentInput
+                    name={undefined}
+                    value={activeSegmentInput}
+                    options={previewOptions}
+                    keySelector={valueSelector}
+                    labelSelector={labelSelector}
+                    onChange={handleScenarioType}
+                />
+            </div>
+        </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
index 505605b80..154503c03 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
@@ -1,16 +1,23 @@
 .scenario {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacing-large);
+    gap: var(--spacing-extra-large);
 
-    .scenario-form {
+    .scenario-content {
         display: flex;
-        gap: var(--spacing-medium);
-
-        .scenario-form-content {
+        flex-basis: 65%;
+        flex-direction: column;
+        gap: var(--spacing-large);
+        
+        .scenario-form {
             display: flex;
-            flex-basis: 80%;
-            flex-direction: column;
+            gap: var(--spacing-medium);
+            
+            .scenario-form-content {
+                display: flex;
+                flex-basis: 80%;
+                flex-direction: column;
+                gap: var(--spacing-medium);
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index dfee13ac9..8a5a07b1b 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -45,6 +45,7 @@ import {
     Tabs,
     Tab,
     TabList,
+    TabPanel,
 } from '#components/Tabs';
 import TileServerInput, {
     TILE_SERVER_BING,
@@ -54,7 +55,6 @@ import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
-import ScenarioGeoJsonPreview from '#components/ScenarioGeoJsonPreview';
 import {
     valueSelector,
     labelSelector,
@@ -159,8 +159,6 @@ function NewTutorial(props: Props) {
     const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
     // NOTE: Information Page
     const [activeInformationPages, setActiveInformationPages] = React.useState('1');
-    // NOTE: Preview GeoJson
-    const [activePreviewGeoJson, setActivePreviewGeoJson] = React.useState<PartialTutorialFormType['tutorialTasks'] | undefined>();
 
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -181,12 +179,17 @@ function NewTutorial(props: Props) {
         [error?.informationPages],
     );
 
-    const handleScenarioChange = React.useCallback((tab) => {
-        setActiveTab(tab);
-        const previewGeoJson = value.tutorialTasks?.features.filter(
-            (screen) => screen.properties.screen === Number(activeTab),
-        );
-        setActivePreviewGeoJson(previewGeoJson);
+    const previewGeoJson = React.useMemo((): GeoJSON.GeoJSON | undefined => {
+        const geojson = value.tutorialTasks;
+        if (!geojson) {
+            return undefined;
+        }
+        return {
+            ...geojson,
+            features: geojson.features.filter(
+                (screen) => screen.properties.screen === Number(activeTab),
+            ),
+        };
     }, [
         value.tutorialTasks,
         activeTab,
@@ -387,6 +390,7 @@ function NewTutorial(props: Props) {
         const tutorialTasks = geoProps as PartialTutorialFormType['tutorialTasks'];
 
         setFieldValue(tutorialTasks, 'tutorialTasks');
+
         const uniqueArray = tutorialTasks && unique(
             tutorialTasks.features, ((geo) => geo?.properties.screen),
         );
@@ -399,7 +403,6 @@ function NewTutorial(props: Props) {
                 success: {},
             }
         ));
-
         setFieldValue(tutorialTaskArray, 'scenarioPages');
     }, [setFieldValue]);
 
@@ -550,34 +553,35 @@ function NewTutorial(props: Props) {
                     >
                         <Tabs
                             value={activeTab}
-                            onChange={handleScenarioChange}
+                            onChange={setActiveTab}
                         >
                             {value.scenarioPages?.length ? (
                                 <div className={styles.tabContent}>
-                                    <div className={styles.tabList}>
-                                        <TabList>
-                                            {value.scenarioPages?.map((task) => (
-                                                <Tab
-                                                    key={task.scenarioId}
-                                                    name={task.scenarioId}
-                                                >
-                                                    {`Scenario ${task.scenarioId}`}
-                                                </Tab>
-                                            ))}
-                                        </TabList>
-                                        {value.scenarioPages?.map((task, index) => (
+                                    <TabList>
+                                        {value.scenarioPages?.map((task) => (
+                                            <Tab
+                                                key={task.scenarioId}
+                                                name={task.scenarioId}
+                                            >
+                                                {`Scenario ${task.scenarioId}`}
+                                            </Tab>
+                                        ))}
+                                    </TabList>
+                                    {value.scenarioPages?.map((task, index) => (
+                                        <TabPanel
+                                            key={task.scenarioId}
+                                            name={task.scenarioId}
+                                        >
                                             <ScenarioPageInput
                                                 key={task.scenarioId}
                                                 index={index}
                                                 value={task}
                                                 onChange={onScenarioFormChange}
                                                 error={scenarioError?.[task.scenarioId]}
+                                                geoJson={previewGeoJson}
                                             />
-                                        ))}
-                                    </div>
-                                    <ScenarioGeoJsonPreview
-                                        geoJson={activePreviewGeoJson}
-                                    />
+                                        </TabPanel>
+                                    ))}
                                 </div>
                             ) : (
                                 <div>No Scenarios</div>
@@ -670,14 +674,19 @@ function NewTutorial(props: Props) {
                                         ))}
                                     </TabList>
                                     {value.customOptions.map((options, index) => (
-                                        <CustomOptionInput
+                                        <TabPanel
                                             key={options.optionId}
-                                            value={options}
-                                            index={index}
-                                            onChange={onOptionAdd}
-                                            onRemove={onOptionRemove}
-                                            error={optionsError?.[options.optionId]}
-                                        />
+                                            name={String(options.optionId)}
+                                        >
+                                            <CustomOptionInput
+                                                key={options.optionId}
+                                                value={options}
+                                                index={index}
+                                                onChange={onOptionAdd}
+                                                onRemove={onOptionRemove}
+                                                error={optionsError?.[options.optionId]}
+                                            />
+                                        </TabPanel>
                                     ))}
                                 </Tabs>
                             ) : (
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index a2ea122ee..b1533cad5 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -42,13 +42,8 @@
 
             .tab-content {
                 display: flex;
-                gap: var(--spacing-extra-large);
-
-                .tab-list {
-                    display: flex;
-                    flex-basis: 60%;
-                    flex-direction: column;
-                }
+                flex-direction: column;
+                gap: var(--spacing-medium);
             }
         }
     }
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index c33b6c55b..9fa787373 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -23,35 +23,12 @@ import {
     PROJECT_TYPE_FOOTPRINT,
 } from '#utils/common';
 
-export interface IconOptions {
+export interface ColorOptions {
     key: string;
     label: string;
 }
 
-export const iconOptions: IconOptions[] = [
-    {
-        key: 'addOutline',
-        label: 'Add Outline',
-    },
-    {
-        key: 'alertOutline',
-        label: 'Alert Outline',
-    },
-    {
-        key: 'banOutline',
-        label: 'Ban Outline',
-    },
-    {
-        key: 'checkmarkOutline',
-        label: 'Checkmark Outline',
-    },
-    {
-        key: 'closeOutline',
-        label: 'Close Outline',
-    },
-];
-
-export const iconColorOptions: IconOptions[] = [
+export const iconColorOptions: ColorOptions[] = [
     {
         key: 'green',
         label: 'Green',
@@ -137,7 +114,7 @@ export interface TutorialFormType {
             icon: string;
             title: string;
         };
-        instructions: {
+        instruction: {
             description: string;
             icon: string;
             title: string;
@@ -236,7 +213,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 icon: { required: true },
                             }),
                         },
-                        instructions: {
+                        instruction: {
                             fields: () => ({
                                 title: {
                                     required: true,

From 152e25fef492b8a729a2c0596db7ef51a9855a96 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 16 Jun 2023 17:48:21 +0545
Subject: [PATCH 22/72] Add information and option preview screen

---
 .../components/CustomOptionPreview/index.tsx  |  48 +++++
 .../components/CustomOptionPreview/styles.css |  22 ++
 .../app/components/FileInput/index.tsx        |  52 +----
 .../app/components/FileInput/styles.css       |   9 -
 .../app/components/Preview/index.tsx          |  57 +++++
 .../app/components/Preview/styles.css         |   8 +
 .../CustomOptionReadOnly/index.tsx            |  24 +--
 .../CustomOptionReadOnly/styles.css           |  23 +-
 .../NewProject/BasicProjectInfoForm/index.tsx |  12 +-
 .../CustomOptionInput/SubOption/index.tsx     |  12 +-
 .../CustomOptionInput/SubOption/styles.css    |   4 +-
 .../NewTutorial/CustomOptionInput/index.tsx   | 198 +++++++++---------
 .../NewTutorial/CustomOptionInput/styles.css  |  47 ++---
 .../InformationPageInput/Block/index.tsx      |  19 +-
 .../InformationPagePreview/index.tsx          |  43 ++++
 .../InformationPagePreview/styles.css         |  21 ++
 .../InformationPageInput/index.tsx            |  13 +-
 .../InformationPageInput/styles.css           |  18 +-
 .../app/views/NewTutorial/index.tsx           |  54 +++--
 .../app/views/NewTutorial/styles.css          |  12 +-
 .../app/views/NewTutorial/utils.ts            |   2 +-
 21 files changed, 433 insertions(+), 265 deletions(-)
 create mode 100644 manager-dashboard/app/components/CustomOptionPreview/index.tsx
 create mode 100644 manager-dashboard/app/components/CustomOptionPreview/styles.css
 create mode 100644 manager-dashboard/app/components/Preview/index.tsx
 create mode 100644 manager-dashboard/app/components/Preview/styles.css
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css

diff --git a/manager-dashboard/app/components/CustomOptionPreview/index.tsx b/manager-dashboard/app/components/CustomOptionPreview/index.tsx
new file mode 100644
index 000000000..1fbfa2abb
--- /dev/null
+++ b/manager-dashboard/app/components/CustomOptionPreview/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Heading from '#components/Heading';
+import { PartialTutorialFormType } from '#views/NewTutorial/utils';
+import { iconMap } from '#utils/common';
+
+import styles from './styles.css';
+
+interface Props {
+    value: PartialTutorialFormType['customOptions']
+}
+
+export default function CustomOptionPreview(props: Props) {
+    const {
+        value,
+    } = props;
+
+    function Content() {
+        const innerContent = value?.map((preview) => {
+            const Icon = preview.icon ? iconMap[preview.icon] : undefined;
+            return (
+                <div
+                    className={styles.previewContent}
+                    key={preview.optionId}
+                >
+                    {Icon && <Icon />}
+                    <div>
+                        {preview.title}
+                    </div>
+                    <div>
+                        {preview.description}
+                    </div>
+                </div>
+            );
+        });
+        return <>{innerContent}</>;
+    }
+
+    return (
+        <div className={styles.optionPreview}>
+            <Heading level={3}>
+                Preview
+            </Heading>
+            <div className={styles.previewScreen}>
+                <Content />
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/components/CustomOptionPreview/styles.css b/manager-dashboard/app/components/CustomOptionPreview/styles.css
new file mode 100644
index 000000000..44ccaa5f9
--- /dev/null
+++ b/manager-dashboard/app/components/CustomOptionPreview/styles.css
@@ -0,0 +1,22 @@
+.option-preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .preview-screen {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-color: var(--color-primary);
+        width: 20rem;
+        height: 30rem;
+
+        .preview-content {
+            display: flex;
+            gap: var(--spacing-extra-small);
+            padding: var(--spacing-medium);
+            color: #ffffff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/FileInput/index.tsx b/manager-dashboard/app/components/FileInput/index.tsx
index ca4b975bd..461acfbd1 100644
--- a/manager-dashboard/app/components/FileInput/index.tsx
+++ b/manager-dashboard/app/components/FileInput/index.tsx
@@ -8,60 +8,10 @@ import { MdAttachFile } from 'react-icons/md';
 import { useButtonFeatures } from '#components/Button';
 import RawInput from '#components/RawInput';
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
+import Preview from '#components/Preview';
 
 import styles from './styles.css';
 
-interface PreviewProps {
-    file: File | null | undefined;
-    className?: string;
-}
-
-function Preview(props: PreviewProps) {
-    const {
-        file,
-        className,
-    } = props;
-
-    const isPreviewable = file?.name?.match(/.(jpg|jpeg|png|gif)$/i) ?? false;
-    const [imageUrl, setImageUrl] = React.useState<string>();
-
-    React.useEffect(() => {
-        if (!file) {
-            return undefined;
-        }
-
-        // FIXME: use async methods
-        const fileReader = new FileReader();
-
-        const handleFileLoad = () => {
-            setImageUrl(String(fileReader.result) ?? undefined);
-        };
-
-        fileReader.addEventListener('load', handleFileLoad);
-        fileReader.readAsDataURL(file);
-
-        return () => {
-            fileReader.removeEventListener('load', handleFileLoad);
-        };
-    }, [file]);
-
-    if (!isPreviewable) {
-        return (
-            <div className={_cs(styles.noPreview, className)}>
-                Preview not available
-            </div>
-        );
-    }
-
-    return (
-        <img
-            className={_cs(styles.preview, className)}
-            alt={file?.name}
-            src={imageUrl}
-        />
-    );
-}
-
 export interface Props<Name> extends Omit<InputContainerProps, 'input'> {
     value: File | undefined | null;
     name: Name;
diff --git a/manager-dashboard/app/components/FileInput/styles.css b/manager-dashboard/app/components/FileInput/styles.css
index f9102b3b0..56317210e 100644
--- a/manager-dashboard/app/components/FileInput/styles.css
+++ b/manager-dashboard/app/components/FileInput/styles.css
@@ -42,12 +42,3 @@
     color: var(--color-text-watermark);
     font-size: var(--font-size-large);
 }
-
-.preview {
-    background-color: var(--color-input-background);
-    width: 100%;
-    max-width: 30rem;
-    height: 20rem;
-    object-fit: contain;
-    object-position: center center;
-}
diff --git a/manager-dashboard/app/components/Preview/index.tsx b/manager-dashboard/app/components/Preview/index.tsx
new file mode 100644
index 000000000..897104a0a
--- /dev/null
+++ b/manager-dashboard/app/components/Preview/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+interface PreviewProps {
+    file: File | null | undefined;
+    className?: string;
+}
+
+function Preview(props: PreviewProps) {
+    const {
+        file,
+        className,
+    } = props;
+
+    const isPreviewable = file?.name?.match(/.(jpg|jpeg|png|gif)$/i) ?? false;
+    const [imageUrl, setImageUrl] = React.useState<string>();
+
+    React.useEffect(() => {
+        if (!file) {
+            return undefined;
+        }
+
+        // FIXME: use async methods
+        const fileReader = new FileReader();
+
+        const handleFileLoad = () => {
+            setImageUrl(String(fileReader.result) ?? undefined);
+        };
+
+        fileReader.addEventListener('load', handleFileLoad);
+        fileReader.readAsDataURL(file);
+
+        return () => {
+            fileReader.removeEventListener('load', handleFileLoad);
+        };
+    }, [file]);
+
+    if (!isPreviewable) {
+        return (
+            <div className={_cs(styles.noPreview, className)}>
+                Preview not available
+            </div>
+        );
+    }
+
+    return (
+        <img
+            className={_cs(styles.preview, className)}
+            alt={file?.name}
+            src={imageUrl}
+        />
+    );
+}
+
+export default Preview;
diff --git a/manager-dashboard/app/components/Preview/styles.css b/manager-dashboard/app/components/Preview/styles.css
new file mode 100644
index 000000000..23e80d351
--- /dev/null
+++ b/manager-dashboard/app/components/Preview/styles.css
@@ -0,0 +1,8 @@
+.preview {
+    background-color: var(--color-input-background);
+    width: 100%;
+    max-width: 30rem;
+    height: 20rem;
+    object-fit: contain;
+    object-position: center center;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
index 0e86f8183..0ddc97b34 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
@@ -20,9 +20,7 @@ export default function CustomOptionReadOnly(props: Props) {
     const [activesubOptions, setActiveSubOptions] = React.useState('1');
 
     return (
-        <TabPanel
-            name={String(value.optionId)}
-        >
+        <div className={styles.optionContainer}>
             <div className={styles.optionForm}>
                 <div className={styles.optionContent}>
                     <TextInput
@@ -72,24 +70,23 @@ export default function CustomOptionReadOnly(props: Props) {
                         onChange={setActiveSubOptions}
                     >
                         <TabList>
-                            {value.subOptions?.map((rea) => (
+                            {value.subOptions?.map((sub) => (
                                 <Tab
-                                    name={`${rea.subOptionsId}`}
-                                    key={rea.subOptionsId}
+                                    key={sub.subOptionsId}
+                                    name={String(sub.subOptionsId)}
                                 >
-                                    {`Sub Options ${rea.subOptionsId}`}
+                                    {`Sub Options ${sub.subOptionsId}`}
                                 </Tab>
                             ))}
                         </TabList>
-                        {value.subOptions.map((rea) => (
+                        {value.subOptions.map((sub) => (
                             <TabPanel
-                                name={String(rea.subOptionsId)}
-                                className={styles.reasonContent}
+                                key={sub.subOptionsId}
+                                name={String(sub.subOptionsId)}
                             >
                                 <TextInput
-                                    className={styles.reasonInput}
                                     label="Description"
-                                    value={rea.description}
+                                    value={sub.description}
                                     name={'description' as const}
                                     disabled
                                 />
@@ -100,6 +97,7 @@ export default function CustomOptionReadOnly(props: Props) {
                     <div>No Sub Options</div>
                 )}
             </div>
-        </TabPanel>
+        </div>
+
     );
 }
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
index 70f67625f..7ead978b6 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
@@ -1,3 +1,24 @@
-.custom-option {
+.option-container {
     display: flex;
+    gap: var(--spacing-extra-large);
+
+    .option-form {
+        display: flex;
+        flex-basis: 60%;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+
+        .option-content {
+            display: flex;
+            gap: var(--spacing-medium);
+
+            .option-input {
+                flex-grow: 1;
+            }
+
+            .option-icon {
+                flex-basis: 15%;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 840d048c2..4d8ec2977 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -15,6 +15,7 @@ import Tabs,
 {
     Tab,
     TabList,
+    TabPanel,
 } from '#components/Tabs';
 
 import CustomOptionReadOnly from './CustomOptionReadOnly';
@@ -246,10 +247,15 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                             ))}
                         </TabList>
                         {value.customOptions.map((options) => (
-                            <CustomOptionReadOnly
+                            <TabPanel
                                 key={options.optionId}
-                                value={options}
-                            />
+                                name={String(options.optionId)}
+                            >
+                                <CustomOptionReadOnly
+                                    key={options.optionId}
+                                    value={options}
+                                />
+                            </TabPanel>
                         ))}
                     </Tabs>
                 </Card>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
index 888e25158..dd88859e9 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
@@ -5,7 +5,6 @@ import {
     getErrorObject,
     useFormObject,
 } from '@togglecorp/toggle-form';
-import { TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
 import NumberInput from '#components/NumberInput';
@@ -35,12 +34,9 @@ export default function SubOption(props: Props) {
 
     const error = getErrorObject(riskyError);
     return (
-        <TabPanel
-            name={String(value.subOptionsId)}
-            className={styles.reasonContent}
-        >
+        <div className={styles.subOptionContent}>
             <TextInput
-                className={styles.reasonInput}
+                className={styles.subOptionInput}
                 label="Description"
                 value={value.description}
                 name={'description' as const}
@@ -48,7 +44,7 @@ export default function SubOption(props: Props) {
                 onChange={onReasonChange}
             />
             <NumberInput
-                className={styles.reasonInput}
+                className={styles.subOptionInput}
                 label="Value"
                 value={value.value}
                 name={'value' as const}
@@ -62,6 +58,6 @@ export default function SubOption(props: Props) {
             >
                 Delete this Reason
             </Button>
-        </TabPanel>
+        </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
index bdd535e6e..db7513432 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
@@ -1,8 +1,8 @@
-.reason-content {
+.sub-option-content {
     display: flex;
     gap: var(--spacing-medium);
 
-    .reason-input {
+    .sub-option-input {
         flex-grow: 1;
     }
     .remove-button {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 9d8615e96..4465d2c10 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@togglecorp/toggle-form';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
-import Tabs, { TabList, Tab } from '#components/Tabs';
+import Tabs, { TabList, Tab, TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
@@ -89,117 +89,111 @@ export default function CustomOptionInput(props: Props) {
     );
 
     return (
-        <div className={styles.optionContainer}>
-            <div className={styles.optionForm}>
-                <div className={styles.optionContent}>
-                    <TextInput
-                        className={styles.optionInput}
-                        label="Title"
-                        value={value?.title}
-                        name={'title' as const}
-                        onChange={onOptionChange}
-                        error={error?.title}
-                    />
-                    <SelectInput
-                        className={styles.optionIcon}
-                        name="icon"
-                        label="Icon"
-                        value={value?.icon}
-                        options={iconList}
-                        keySelector={(d: IconList) => d.key}
-                        labelSelector={(d: IconList) => d.label}
-                        onChange={onOptionChange}
-                        error={error?.icon}
-                    />
-                </div>
-                <div className={styles.optionContent}>
-                    <NumberInput
-                        className={styles.optionInput}
-                        label="Value"
-                        value={value?.value}
-                        name={'value' as const}
-                        onChange={onOptionChange}
-                        error={error?.value}
-                    />
-                    <SelectInput
-                        className={styles.optionIcon}
-                        name="iconColor"
-                        label="Icon Color"
-                        value={value?.iconColor}
-                        options={iconColorOptions}
-                        keySelector={(d: ColorOptions) => d.key}
-                        labelSelector={(d: ColorOptions) => d.label}
-                        onChange={onOptionChange}
-                        error={error?.iconColor}
-                    />
-                </div>
+        <div className={styles.optionForm}>
+            <div className={styles.optionContent}>
                 <TextInput
                     className={styles.optionInput}
-                    label="Description"
-                    value={value.description}
-                    name={'description' as const}
+                    label="Title"
+                    value={value?.title}
+                    name={'title' as const}
                     onChange={onOptionChange}
-                    error={error?.description}
+                    error={error?.title}
                 />
-                <Button
-                    name={index}
-                    onClick={onRemove}
-                    className={styles.removeButton}
-                >
-                    Delete this option
-                </Button>
-                <Heading level={4}>
-                    Sub Options
-                </Heading>
-                <Button
-                    name="add_sub_options"
-                    className={styles.addButton}
-                    icons={<MdAdd />}
-                    onClick={handlesubOptionsAdd}
-                    disabled={value.subOptions && value.subOptions.length >= 6}
+                <SelectInput
+                    className={styles.optionIcon}
+                    name="icon"
+                    label="Icon"
+                    value={value?.icon}
+                    options={iconList}
+                    keySelector={(d: IconList) => d.key}
+                    labelSelector={(d: IconList) => d.label}
+                    onChange={onOptionChange}
+                    error={error?.icon}
+                />
+            </div>
+            <div className={styles.optionContent}>
+                <NumberInput
+                    className={styles.optionInput}
+                    label="Value"
+                    value={value?.value}
+                    name={'value' as const}
+                    onChange={onOptionChange}
+                    error={error?.value}
+                />
+                <SelectInput
+                    className={styles.optionIcon}
+                    name="iconColor"
+                    label="Icon Color"
+                    value={value?.iconColor}
+                    options={iconColorOptions}
+                    keySelector={(d: ColorOptions) => d.key}
+                    labelSelector={(d: ColorOptions) => d.label}
+                    onChange={onOptionChange}
+                    error={error?.iconColor}
+                />
+            </div>
+            <TextInput
+                className={styles.optionInput}
+                label="Description"
+                value={value.description}
+                name={'description' as const}
+                onChange={onOptionChange}
+                error={error?.description}
+            />
+            <Button
+                name={index}
+                onClick={onRemove}
+                className={styles.removeButton}
+            >
+                Delete this option
+            </Button>
+            <Heading level={4}>
+                Sub Options
+            </Heading>
+            <Button
+                name="add_sub_options"
+                className={styles.addButton}
+                icons={<MdAdd />}
+                onClick={handlesubOptionsAdd}
+                disabled={value.subOptions && value.subOptions.length >= 6}
+            >
+                Add Sub Options
+            </Button>
+            {subOptionsError && subOptionsError?.[nonFieldError]}
+            {value.subOptions?.length ? (
+                <Tabs
+                    value={activesubOptions}
+                    onChange={setActiveSubOptions}
                 >
-                    Add Sub Options
-                </Button>
-                {subOptionsError && subOptionsError?.[nonFieldError]}
-                {value.subOptions?.length ? (
-                    <Tabs
-                        value={activesubOptions}
-                        onChange={setActiveSubOptions}
-                    >
-                        <TabList>
-                            {value.subOptions?.map((rea) => (
-                                <Tab
-                                    name={`${rea.subOptionsId}`}
-                                    key={rea.subOptionsId}
-                                >
-                                    {`Sub Options ${rea.subOptionsId}`}
-                                </Tab>
-                            ))}
-                        </TabList>
-                        {value.subOptions.map((rea, i) => (
+                    <TabList>
+                        {value.subOptions?.map((sub) => (
+                            <Tab
+                                key={sub.subOptionsId}
+                                name={`${sub.subOptionsId}`}
+                            >
+                                {`Sub Options ${sub.subOptionsId}`}
+                            </Tab>
+                        ))}
+                    </TabList>
+                    {value.subOptions.map((sub, i) => (
+                        <TabPanel
+                            key={sub.subOptionsId}
+                            name={String(sub.subOptionsId)}
+                        >
                             <SubOption
-                                key={rea.subOptionsId}
-                                value={rea}
+                                key={sub.subOptionsId}
+                                value={sub}
                                 index={i}
                                 onChange={onsubOptionsAdd}
                                 onRemove={onsubOptionsRemove}
-                                error={subOptionsError?.[rea.subOptionsId]}
+                                error={subOptionsError?.[sub.subOptionsId]}
                             />
-                        ))}
-                    </Tabs>
-                ) : (
-                    <div>Add Sub Options</div>
-                )}
-            </div>
-            <div className={styles.optionPreview}>
-                <Heading level={3}>
-                    Preview
-                </Heading>
-                <div className={styles.previewScreen}>
-                    {value.title}
-                    {value.description}
-                </div>
-            </div>
+                        </TabPanel>
+                    ))}
+                </Tabs>
+            ) : (
+                <div>Add Sub Options</div>
+            )}
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
index 84e6403b9..0a2844aa9 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -1,46 +1,27 @@
-.option-container {
+.option-form {
     display: flex;
-    gap: var(--spacing-extra-large);
+    flex-direction: column;
+    gap: var(--spacing-medium);
 
-    .option-form {
+    .option-content {
         display: flex;
-        flex-basis: 60%;
-        flex-direction: column;
         gap: var(--spacing-medium);
 
-        .option-content {
-            display: flex;
-            gap: var(--spacing-medium);
-
-            .option-input {
-                flex-grow: 1;
-            }
-
-            .option-icon {
-                flex-basis: 15%;
-            }
-        }
-
-        .remove-button {
-            align-self: end;
-            width: fit-content;
+        .option-input {
+            flex-grow: 1;
         }
 
-        .add-button {
-            width: fit-content;
+        .option-icon {
+            flex-basis: 15%;
         }
     }
 
-    .option-preview {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        flex-grow: 1;
+    .remove-button {
+        align-self: end;
+        width: fit-content;
+    }
 
-        .preview-screen {
-            background-color: var(--color-primary);
-            width: 20rem;
-            height: 30rem;
-        }
+    .add-button {
+        width: fit-content;
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
index c016dc8b8..c275a0c4c 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
@@ -33,7 +33,16 @@ export default function Block(props: Props) {
     const error = getErrorObject(riskyError);
     return (
         <div>
-            {value.blockType === 'image' ? (
+            {value.blockType === 'text' && (
+                <TextInput
+                    name={'textDescription' as const}
+                    value={value.textDescription}
+                    onChange={onBlockChange}
+                    label="Description"
+                    error={error?.textDescription}
+                />
+            )}
+            {value.blockType === 'image' && (
                 <FileInput
                     name={'imageFile' as const}
                     value={value?.imageFile}
@@ -44,14 +53,6 @@ export default function Block(props: Props) {
                     accept="image/png, image/jpeg"
                     error={error?.imageFile}
                 />
-            ) : (
-                <TextInput
-                    name={'textDescription' as const}
-                    value={value.textDescription}
-                    onChange={onBlockChange}
-                    label="Description"
-                    error={error?.textDescription}
-                />
             )}
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
new file mode 100644
index 000000000..4abf7fd17
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { PartialTutorialFormType } from '#views/NewTutorial/utils';
+import Heading from '#components/Heading';
+import Preview from '#components/Preview';
+
+import styles from './styles.css';
+
+interface Props {
+    value: NonNullable<PartialTutorialFormType['informationPages']>[number]
+}
+
+export default function InformationPagePreview(props: Props) {
+    const {
+        value,
+    } = props;
+
+    function Content() {
+        const innerContent = value?.blocks?.map((preview) => {
+            if (preview.blockType === 'text') {
+                return <div key={preview.blockNumber}>{preview.textDescription}</div>;
+            }
+            return (
+                <Preview
+                    key={preview.blockNumber}
+                    file={preview.imageFile}
+                />
+            );
+        });
+        return <>{innerContent}</>;
+    }
+    return (
+        <div className={styles.informationPreview}>
+            <Heading level={3}>
+                Preview
+            </Heading>
+            <div className={styles.previewScreen}>
+                <div className={styles.previewContent}>{value?.title}</div>
+                <Content />
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
new file mode 100644
index 000000000..4cf883449
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -0,0 +1,21 @@
+.information-preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .preview-screen {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--color-primary);
+        width: 20rem;
+        height: 30rem;
+
+        .preview-content {
+            display: flex;
+            gap: var(--spacing-extra-small);
+            padding: var(--spacing-medium);
+            color: #ffffff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 9f1628b71..83cb9fcd2 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -7,12 +7,13 @@ import {
     useFormArray,
 } from '@togglecorp/toggle-form';
 
-import { TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
+import InformationPagePreview from './InformationPagePreview';
 
 import { InformationPagesType } from '../utils';
 import Block from './Block';
+
 import styles from './styles.css';
 
 interface Props {
@@ -45,10 +46,9 @@ export default function InformationPageInput(props: Props) {
         [error?.blocks],
     );
 
+    console.log('information', value);
     return (
-        <TabPanel
-            name={String(value.pageNumber)}
-        >
+        <div className={styles.informationContainer}>
             <div className={styles.informationForm}>
                 <TextInput
                     name={'title' as const}
@@ -74,6 +74,9 @@ export default function InformationPageInput(props: Props) {
                     Delete Page
                 </Button>
             </div>
-        </TabPanel>
+            <InformationPagePreview
+                value={value}
+            />
+        </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
index 5ce2c3ee8..88f72a095 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
@@ -1,10 +1,16 @@
-.informationForm {
+.information-container {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacing-medium);
+    gap: var(--spacing-extra-large);
 
-    .remove-button {
-        align-self: end;
-        width: fit-content;
+    .informationForm {
+        display: flex;
+        flex-basis: 60%;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+        
+        .remove-button {
+            align-self: end;
+            width: fit-content;
+        }
     }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8a5a07b1b..a4f863b26 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -55,6 +55,7 @@ import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
+import CustomOptionPreview from '#components/CustomOptionPreview';
 import {
     valueSelector,
     labelSelector,
@@ -623,14 +624,19 @@ function NewTutorial(props: Props) {
                                     ))}
                                 </TabList>
                                 {value.informationPages?.map((page, i) => (
-                                    <InformationPageInput
+                                    <TabPanel
                                         key={page.pageNumber}
-                                        value={page}
-                                        onChange={onInformationPagesAdd}
-                                        onRemove={onInformationPagesRemove}
-                                        index={i}
-                                        error={informationPagesError?.[page.pageNumber]}
-                                    />
+                                        name={String(page.pageNumber)}
+                                    >
+                                        <InformationPageInput
+                                            key={page.pageNumber}
+                                            value={page}
+                                            onChange={onInformationPagesAdd}
+                                            onRemove={onInformationPagesRemove}
+                                            index={i}
+                                            error={informationPagesError?.[page.pageNumber]}
+                                        />
+                                    </TabPanel>
                                 ))}
                             </Tabs>
                         ) : (
@@ -673,21 +679,27 @@ function NewTutorial(props: Props) {
                                             </Tab>
                                         ))}
                                     </TabList>
-                                    {value.customOptions.map((options, index) => (
-                                        <TabPanel
-                                            key={options.optionId}
-                                            name={String(options.optionId)}
-                                        >
-                                            <CustomOptionInput
+                                    <div className={styles.optionContent}>
+                                        {value.customOptions.map((options, index) => (
+                                            <TabPanel
                                                 key={options.optionId}
-                                                value={options}
-                                                index={index}
-                                                onChange={onOptionAdd}
-                                                onRemove={onOptionRemove}
-                                                error={optionsError?.[options.optionId]}
-                                            />
-                                        </TabPanel>
-                                    ))}
+                                                name={String(options.optionId)}
+                                                className={styles.optionTabPanel}
+                                            >
+                                                <CustomOptionInput
+                                                    key={options.optionId}
+                                                    value={options}
+                                                    index={index}
+                                                    onChange={onOptionAdd}
+                                                    onRemove={onOptionRemove}
+                                                    error={optionsError?.[options.optionId]}
+                                                />
+                                            </TabPanel>
+                                        ))}
+                                        <CustomOptionPreview
+                                            value={value.customOptions}
+                                        />
+                                    </div>
                                 </Tabs>
                             ) : (
                                 <div>Add options</div>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index b1533cad5..97e027ed7 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -21,6 +21,14 @@
             .add-button {
                 width: fit-content;
             }
+
+            .option-content {
+                display: flex;
+
+                .option-tab-panel {
+                    flex-basis: 60%;
+                }
+            }
         }
 
         .input-group {
@@ -115,10 +123,12 @@
     0% {
         transform: rotate(0deg) translateX(0);
     }
+
     25% {
         transform: rotateY(30deg) rotate(-10deg) translateX(-50px);
     }
+
     100% {
         transform: rotate(0deg) translateX(0);
     }
-}
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 9fa787373..65ab7b6dc 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -98,8 +98,8 @@ export type InformationPages = {
     blocks: {
         blockNumber: number;
         blockType: 'image' | 'text';
-        imageFile?: File;
         textDescription?: string;
+        imageFile?: File;
     }[];
 }[];
 

From 1fbb4324ac2a94998c35456cfa599f173d3f6551 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 19 Jun 2023 14:35:04 +0545
Subject: [PATCH 23/72] Add popup button

---
 .../app/components/Button/index.tsx           |   6 +-
 .../components/CustomOptionPreview/styles.css |  22 ----
 .../app/components/FileInput/index.tsx        |   1 -
 .../app/components/FileInput/styles.css       |  11 --
 .../app/components/GeoJsonFileInput/index.tsx |   8 +-
 .../app/components/Heading/index.tsx          |  16 ++-
 .../Heading/{styles.module.css => styles.css} |   0
 .../app/components/PopupButton/index.tsx      | 105 ++++++++++++++++++
 .../app/components/PopupButton/styles.css     |  10 ++
 .../app/components/Preview/styles.css         |  13 +++
 .../CustomOptionPreview/index.tsx             |  18 ++-
 .../CustomOptionPreview/styles.css            |  38 +++++++
 .../InformationPagePreview/index.tsx          |  14 ++-
 .../InformationPagePreview/styles.css         |   6 +-
 .../InformationPageInput/index.tsx            |   1 -
 .../app/views/NewTutorial/index.tsx           |  94 +++++++++-------
 .../app/views/NewTutorial/styles.css          |   7 +-
 .../app/views/NewTutorial/utils.ts            |  35 ++++--
 18 files changed, 299 insertions(+), 106 deletions(-)
 delete mode 100644 manager-dashboard/app/components/CustomOptionPreview/styles.css
 rename manager-dashboard/app/components/Heading/{styles.module.css => styles.css} (100%)
 create mode 100644 manager-dashboard/app/components/PopupButton/index.tsx
 create mode 100644 manager-dashboard/app/components/PopupButton/styles.css
 rename manager-dashboard/app/{components => views/NewTutorial/CustomOptionInput}/CustomOptionPreview/index.tsx (66%)
 create mode 100644 manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css

diff --git a/manager-dashboard/app/components/Button/index.tsx b/manager-dashboard/app/components/Button/index.tsx
index dad831ead..416c24e90 100644
--- a/manager-dashboard/app/components/Button/index.tsx
+++ b/manager-dashboard/app/components/Button/index.tsx
@@ -13,7 +13,7 @@ export type ButtonVariant = (
     | 'transparent'
 );
 
-export interface Props<N> extends RawButtonProps<N> {
+export interface ButtonProps<N> extends RawButtonProps<N> {
     /**
     * Variant of the button
     */
@@ -57,7 +57,7 @@ export interface Props<N> extends RawButtonProps<N> {
 type ButtonFeatureKeys = 'variant' | 'className' | 'actionsClassName' | 'iconsClassName' | 'childrenClassName' | 'children' | 'icons' | 'actions' | 'disabled';
 
 export function useButtonFeatures(
-    props: Pick<Props<string>, ButtonFeatureKeys>,
+    props: Pick<ButtonProps<string>, ButtonFeatureKeys>,
 ) {
     const {
         variant = 'default',
@@ -111,7 +111,7 @@ export function useButtonFeatures(
 /**
  * Basic button component
  */
-function Button<N>(props: Props<N>) {
+function Button<N>(props: ButtonProps<N>) {
     const {
         variant,
         className,
diff --git a/manager-dashboard/app/components/CustomOptionPreview/styles.css b/manager-dashboard/app/components/CustomOptionPreview/styles.css
deleted file mode 100644
index 44ccaa5f9..000000000
--- a/manager-dashboard/app/components/CustomOptionPreview/styles.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.option-preview {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    flex-grow: 1;
-
-    .preview-screen {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        background-color: var(--color-primary);
-        width: 20rem;
-        height: 30rem;
-
-        .preview-content {
-            display: flex;
-            gap: var(--spacing-extra-small);
-            padding: var(--spacing-medium);
-            color: #ffffff;
-        }
-    }
-}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/FileInput/index.tsx b/manager-dashboard/app/components/FileInput/index.tsx
index 461acfbd1..6b2413e45 100644
--- a/manager-dashboard/app/components/FileInput/index.tsx
+++ b/manager-dashboard/app/components/FileInput/index.tsx
@@ -120,7 +120,6 @@ function FileInput<Name>(props: Props<Name>) {
                     {description}
                     {showPreview && (
                         <Preview
-                            className={styles.preview}
                             file={value}
                         />
                     )}
diff --git a/manager-dashboard/app/components/FileInput/styles.css b/manager-dashboard/app/components/FileInput/styles.css
index 56317210e..f590c0854 100644
--- a/manager-dashboard/app/components/FileInput/styles.css
+++ b/manager-dashboard/app/components/FileInput/styles.css
@@ -31,14 +31,3 @@
     }
 }
 
-.no-preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-medium);
-    width: 100%;
-    max-width: 30rem;
-    height: 20rem;
-    color: var(--color-text-watermark);
-    font-size: var(--font-size-large);
-}
diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index acc981f40..365c9a882 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -93,14 +93,18 @@ function GeoJsonFileInput<N>(props: Props<N>) {
 
             const file = newValue;
 
+            console.log('file', file);
+
             async function handleValidationAndChange() {
+                const text = await readUploadedFileAsText(file);
                 let fileAsJson;
                 try {
-                    const text = await readUploadedFileAsText(file);
                     if (!mountedRef.current) {
                         return;
                     }
 
+                    console.log('text', text);
+
                     if (!text || typeof text !== 'string') {
                         setInternalErrorMessage('Failed to read the GeoJson file');
                         setTempValue(newValue);
@@ -109,6 +113,8 @@ function GeoJsonFileInput<N>(props: Props<N>) {
                     }
 
                     const parsedGeoJSON = parseGeoJSON(text);
+                    console.log('Parsed', parsedGeoJSON);k
+
                     if (!parsedGeoJSON.errored) {
                         fileAsJson = parsedGeoJSON.value;
                     } else {
diff --git a/manager-dashboard/app/components/Heading/index.tsx b/manager-dashboard/app/components/Heading/index.tsx
index 2ed4b2c4e..4387ed17e 100644
--- a/manager-dashboard/app/components/Heading/index.tsx
+++ b/manager-dashboard/app/components/Heading/index.tsx
@@ -1,11 +1,21 @@
 import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
-import styles from './styles.module.css';
+import styles from './styles.css';
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5;
+
+const headingLevelToClassName: Record<HeadingLevel, string> = {
+    1: styles.level1,
+    2: styles.level2,
+    3: styles.level3,
+    4: styles.level4,
+    5: styles.level5,
+};
 
 export interface Props {
     className?: string;
-    level?: 1 | 2 | 3 | 4 | 5;
+    level?: HeadingLevel;
     children: React.ReactNode;
 }
 
@@ -16,7 +26,7 @@ function Heading(props: Props) {
         children,
     } = props;
 
-    const levelStyle = styles[`level${level}`];
+    const levelStyle = headingLevelToClassName[level];
     const HeadingTag = `h${level}` as React.ElementType;
 
     return (
diff --git a/manager-dashboard/app/components/Heading/styles.module.css b/manager-dashboard/app/components/Heading/styles.css
similarity index 100%
rename from manager-dashboard/app/components/Heading/styles.module.css
rename to manager-dashboard/app/components/Heading/styles.css
diff --git a/manager-dashboard/app/components/PopupButton/index.tsx b/manager-dashboard/app/components/PopupButton/index.tsx
new file mode 100644
index 000000000..e4c2e9a12
--- /dev/null
+++ b/manager-dashboard/app/components/PopupButton/index.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+
+import { _cs } from '@togglecorp/fujs';
+
+import Button, { ButtonProps } from '#components/Button';
+
+import useBlurEffect from '../../hooks/useBlurEffect';
+
+import Popup from '../Popup';
+
+import styles from './styles.css';
+
+export interface PopupButtonProps<N extends number | string | undefined> extends Omit<ButtonProps<N>, 'label'> {
+    popupClassName?: string;
+    popupContentClassName?: string;
+    label: React.ReactNode;
+    componentRef?: React.MutableRefObject<{
+        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+    } | null>;
+    persistent: boolean;
+    arrowHidden?: boolean;
+    defaultShown?: boolean;
+}
+
+function PopupButton<N extends number | string | undefined>(props: PopupButtonProps<N>) {
+    const {
+        popupClassName,
+        popupContentClassName,
+        children,
+        label,
+        name,
+        actions,
+        componentRef,
+        arrowHidden,
+        persistent,
+        defaultShown,
+        ...otherProps
+    } = props;
+
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    const popupRef = React.useRef<HTMLDivElement>(null);
+
+    const [popupShown, setPopupShown] = React.useState(defaultShown ?? false);
+
+    React.useEffect(
+        () => {
+            if (componentRef) {
+                componentRef.current = {
+                    setPopupVisibility: setPopupShown,
+                };
+            }
+        },
+        [componentRef],
+    );
+
+    useBlurEffect(
+        popupShown && !persistent,
+        setPopupShown,
+        popupRef,
+        buttonRef,
+    );
+
+    const handleShowPopup = React.useCallback(
+        () => {
+            setPopupShown((prevState) => !prevState);
+        },
+        [],
+    );
+
+    return (
+        <>
+            <Button
+                {...otherProps}
+                name={name}
+                elementRef={buttonRef}
+                onClick={handleShowPopup}
+                actions={(
+                    <>
+                        {actions}
+                        {!arrowHidden && (
+                            <>
+                                {popupShown ? <IoIosArrowUp /> : <IoIosArrowDown />}
+                            </>
+                        )}
+                    </>
+                )}
+            >
+                {label}
+            </Button>
+            {popupShown && (
+                <Popup
+                    elementRef={popupRef}
+                    parentRef={buttonRef}
+                    className={_cs(styles.popup, popupClassName)}
+                    contentClassName={_cs(styles.popupContent, popupContentClassName)}
+                >
+                    {children}
+                </Popup>
+            )}
+        </>
+    );
+}
+
+export default PopupButton;
diff --git a/manager-dashboard/app/components/PopupButton/styles.css b/manager-dashboard/app/components/PopupButton/styles.css
new file mode 100644
index 000000000..235f00864
--- /dev/null
+++ b/manager-dashboard/app/components/PopupButton/styles.css
@@ -0,0 +1,10 @@
+.popup {
+    padding-top: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
+    padding-bottom: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
+
+    .popup-content {
+        display: flex;
+        flex-direction: column;
+        max-width: max(50vw, 300px);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/Preview/styles.css b/manager-dashboard/app/components/Preview/styles.css
index 23e80d351..08ae788b6 100644
--- a/manager-dashboard/app/components/Preview/styles.css
+++ b/manager-dashboard/app/components/Preview/styles.css
@@ -5,4 +5,17 @@
     height: 20rem;
     object-fit: contain;
     object-position: center center;
+}
+
+.no-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-background);
+    padding: var(--spacing-medium);
+    width: 100%;
+    max-width: 30rem;
+    height: 10rem;
+    color: var(--color-text-watermark);
+    font-size: var(--font-size-large);
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/components/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
similarity index 66%
rename from manager-dashboard/app/components/CustomOptionPreview/index.tsx
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 1fbfa2abb..d9cf7b138 100644
--- a/manager-dashboard/app/components/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -22,11 +22,19 @@ export default function CustomOptionPreview(props: Props) {
                     className={styles.previewContent}
                     key={preview.optionId}
                 >
-                    {Icon && <Icon />}
-                    <div>
+                    {Icon
+                        && (
+                            <div
+                                className={styles.previewIcon}
+                                style={{ backgroundColor: preview.iconColor }}
+                            >
+                                <Icon />
+                            </div>
+                        )}
+                    <div className={styles.previewText}>
                         {preview.title}
                     </div>
-                    <div>
+                    <div className={styles.previewText}>
                         {preview.description}
                     </div>
                 </div>
@@ -41,7 +49,9 @@ export default function CustomOptionPreview(props: Props) {
                 Preview
             </Heading>
             <div className={styles.previewScreen}>
-                <Content />
+                <div className={styles.previewContainer}>
+                    <Content />
+                </div>
             </div>
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
new file mode 100644
index 000000000..aeea11f9e
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -0,0 +1,38 @@
+.option-preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .preview-screen {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--color-primary);
+        width: 20rem;
+        height: 30rem;
+
+        .preview-container {
+            padding-top: var(--spacing-super-large);
+            
+            .preview-content {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-extra-small);
+                padding: var(--spacing-medium);
+                color: #ffffff;
+                
+                .preview-icon {
+                    display: flex;
+                    align-items: center;
+                    border-radius: 50%;
+                    padding: 3px;
+                    font-size: 30px;
+                }
+                
+                .preview-text {
+                    padding: var(--spacing-small);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 4abf7fd17..1de8b6903 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -18,7 +18,11 @@ export default function InformationPagePreview(props: Props) {
     function Content() {
         const innerContent = value?.blocks?.map((preview) => {
             if (preview.blockType === 'text') {
-                return <div key={preview.blockNumber}>{preview.textDescription}</div>;
+                return (
+                    <div key={preview.blockNumber}>
+                        {preview.textDescription ?? 'Description of the image'}
+                    </div>
+                );
             }
             return (
                 <Preview
@@ -35,8 +39,12 @@ export default function InformationPagePreview(props: Props) {
                 Preview
             </Heading>
             <div className={styles.previewScreen}>
-                <div className={styles.previewContent}>{value?.title}</div>
-                <Content />
+                <div className={styles.previewContent}>
+                    <div>
+                        {value?.title ?? 'Title'}
+                    </div>
+                    <Content />
+                </div>
             </div>
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
index 4cf883449..c4fb9c552 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -10,11 +10,13 @@
         background-color: var(--color-primary);
         width: 20rem;
         height: 30rem;
+        overflow: auto;
 
         .preview-content {
             display: flex;
-            gap: var(--spacing-extra-small);
-            padding: var(--spacing-medium);
+            flex-direction: column;
+            gap: var(--spacing-medium);
+            padding: var(--spacing-large);
             color: #ffffff;
         }
     }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 83cb9fcd2..0f0337cdb 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -46,7 +46,6 @@ export default function InformationPageInput(props: Props) {
         [error?.blocks],
     );
 
-    console.log('information', value);
     return (
         <div className={styles.informationContainer}>
             <div className={styles.informationForm}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index a4f863b26..efb29c2b7 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -54,8 +54,8 @@ import TileServerInput, {
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
-import SelectInput from '#components/SelectInput';
-import CustomOptionPreview from '#components/CustomOptionPreview';
+import PopupButton from '#components/PopupButton';
+import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
 import {
     valueSelector,
     labelSelector,
@@ -71,7 +71,6 @@ import {
     PartialTutorialFormType,
     ScenarioPagesType,
     CustomOptionType,
-    pageOptions,
     PageTemplateType,
     InformationPagesType,
     PartialInformationPagesType,
@@ -82,13 +81,6 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
-function pageKeySelector(d: PageTemplateType) {
-    return d.key;
-}
-function pageLabelSelector(d: PageTemplateType) {
-    return d.label;
-}
-
 const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
@@ -275,12 +267,6 @@ function NewTutorial(props: Props) {
                     createdBy: userId,
                 };
 
-                // if (uploadData) {
-                //     console.info('upload', uploadData);
-                //     setTutorialSubmissionStatus('failed');
-                //     return;
-                // }
-
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -407,6 +393,10 @@ function NewTutorial(props: Props) {
         setFieldValue(tutorialTaskArray, 'scenarioPages');
     }, [setFieldValue]);
 
+    const popupElementRef = React.useRef<{
+        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+    }>(null);
+
     const handleAddInformationPages = React.useCallback(
         (template: PageTemplateType['key']) => {
             setFieldValue(
@@ -422,19 +412,19 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 blockNumber: 1,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 2,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                             {
                                 blockNumber: 3,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 4,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                         ];
                     }
@@ -442,27 +432,27 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 blockNumber: 1,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 2,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                             {
                                 blockNumber: 3,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 4,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                             {
                                 blockNumber: 5,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 6,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                         ];
                     }
@@ -470,11 +460,11 @@ function NewTutorial(props: Props) {
                         blocks = [
                             {
                                 blockNumber: 1,
-                                blockType: 'image',
+                                blockType: 'text',
                             },
                             {
                                 blockNumber: 2,
-                                blockType: 'text',
+                                blockType: 'image',
                             },
                         ];
                     }
@@ -487,10 +477,14 @@ function NewTutorial(props: Props) {
                 },
                 'informationPages',
             );
+            popupElementRef.current?.setPopupVisibility(false);
         },
         [setFieldValue],
     );
 
+    console.log('error', error?.tutorialTasks);
+    console.log('value', value?.tutorialTasks);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -593,20 +587,36 @@ function NewTutorial(props: Props) {
                         title="Describe information pages"
                         contentClassName={styles.card}
                     >
-                        <SelectInput
-                            name="templateType"
-                            placeholder="Add page"
-                            options={pageOptions}
-                            value={undefined}
-                            keySelector={pageKeySelector}
-                            labelSelector={pageLabelSelector}
-                            onChange={handleAddInformationPages}
-                            disabled={
-                                value.informationPages
-                                && value.informationPages.length >= 10
-                            }
-                            nonClearable
-                        />
+                        <PopupButton
+                            persistent={false}
+                            name={undefined}
+                            componentRef={popupElementRef}
+                            label="Add Instruction"
+                            className={styles.addButton}
+                            popupContentClassName={styles.instructionPopup}
+                        >
+                            <Button
+                                variant="transparent"
+                                name="1-picture"
+                                onClick={handleAddInformationPages}
+                            >
+                                1 Picture
+                            </Button>
+                            <Button
+                                variant="transparent"
+                                name="2-picture"
+                                onClick={handleAddInformationPages}
+                            >
+                                2 Picture
+                            </Button>
+                            <Button
+                                variant="transparent"
+                                name="3-picture"
+                                onClick={handleAddInformationPages}
+                            >
+                                3 Picture
+                            </Button>
+                        </PopupButton>
                         {informationPagesError && <p>{informationPagesError?.[nonFieldError]}</p>}
                         {value.informationPages?.length ? (
                             <Tabs
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 97e027ed7..3cd69990c 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -21,7 +21,7 @@
             .add-button {
                 width: fit-content;
             }
-
+            
             .option-content {
                 display: flex;
 
@@ -118,6 +118,11 @@
         justify-content: flex-end;
     }
 }
+        
+.instruction-popup {
+    padding: var(--spacing-small);
+    gap: var(--spacing-medium);
+}
 
 @keyframes wiggle {
     0% {
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 65ab7b6dc..4921dbf5b 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -9,6 +9,7 @@ import {
     ArraySchema,
     addCondition,
 } from '@togglecorp/toggle-form';
+import { isDefined, isNotDefined } from '@togglecorp/fujs';
 import {
     TileServer,
     tileServerFieldsSchema,
@@ -183,10 +184,9 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 validations: [getNoMoreThanNCharacterCondition(25)],
             },
             name: {
-
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(1000)],
+                validations: [getNoMoreThanNCharacterCondition(100)],
             },
             tileServer: {
                 fields: tileServerFieldsSchema,
@@ -203,12 +203,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(20)],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(100)],
                                 },
                                 icon: { required: true },
                             }),
@@ -218,12 +218,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(20)],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(100)],
                                 },
                                 icon: { required: true },
                             }),
@@ -233,12 +233,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(20)],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(500)],
+                                    validations: [getNoMoreThanNCharacterCondition(100)],
                                 },
                                 icon: { required: true },
                             }),
@@ -304,7 +304,18 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 }),
             },
             // FIXME: we do not send this anymore
-            tutorialTasks: {},
+            tutorialTasks: {
+                required: true,
+                validation: (tutorial) => {
+                    const isScreen = tutorial?.features.find(
+                        (screen) => isNotDefined(screen.properties.screen),
+                    );
+                    if (isDefined(isScreen?.properties.screen)) {
+                        return 'There are no screen in this Geojson';
+                    }
+                    return undefined;
+                },
+            },
             exampleImage1: {},
             exampleImage2: {},
         };
@@ -334,7 +345,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             title: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(500)],
+                                validations: [getNoMoreThanNCharacterCondition(25)],
                             },
                             value: {
                                 required: true,
@@ -343,7 +354,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             description: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(500)],
+                                validations: [getNoMoreThanNCharacterCondition(100)],
                             },
                             icon: {
                                 required: true,
@@ -370,7 +381,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                         description: {
                                             required: true,
                                             requiredValidation: requiredStringCondition,
-                                            validations: [getNoMoreThanNCharacterCondition(500)],
+                                            validations: [getNoMoreThanNCharacterCondition(100)],
                                         },
                                         value: {
                                             required: true,

From e1ffafb538bd1b244a01fff4587c111d7b707da0 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 20 Jun 2023 10:20:19 +0545
Subject: [PATCH 24/72] rebase with dev

---
 .../app/components/GeoJsonFileInput/index.tsx      |  5 -----
 manager-dashboard/app/views/NewTutorial/index.tsx  |  3 ---
 manager-dashboard/app/views/NewTutorial/utils.ts   | 14 +-------------
 3 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index 365c9a882..1c8d8a50d 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -93,8 +93,6 @@ function GeoJsonFileInput<N>(props: Props<N>) {
 
             const file = newValue;
 
-            console.log('file', file);
-
             async function handleValidationAndChange() {
                 const text = await readUploadedFileAsText(file);
                 let fileAsJson;
@@ -103,8 +101,6 @@ function GeoJsonFileInput<N>(props: Props<N>) {
                         return;
                     }
 
-                    console.log('text', text);
-
                     if (!text || typeof text !== 'string') {
                         setInternalErrorMessage('Failed to read the GeoJson file');
                         setTempValue(newValue);
@@ -113,7 +109,6 @@ function GeoJsonFileInput<N>(props: Props<N>) {
                     }
 
                     const parsedGeoJSON = parseGeoJSON(text);
-                    console.log('Parsed', parsedGeoJSON);k
 
                     if (!parsedGeoJSON.errored) {
                         fileAsJson = parsedGeoJSON.value;
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index efb29c2b7..edc5bdbd3 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -482,9 +482,6 @@ function NewTutorial(props: Props) {
         [setFieldValue],
     );
 
-    console.log('error', error?.tutorialTasks);
-    console.log('value', value?.tutorialTasks);
-
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 4921dbf5b..e541bc9a1 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -9,7 +9,6 @@ import {
     ArraySchema,
     addCondition,
 } from '@togglecorp/toggle-form';
-import { isDefined, isNotDefined } from '@togglecorp/fujs';
 import {
     TileServer,
     tileServerFieldsSchema,
@@ -304,18 +303,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 }),
             },
             // FIXME: we do not send this anymore
-            tutorialTasks: {
-                required: true,
-                validation: (tutorial) => {
-                    const isScreen = tutorial?.features.find(
-                        (screen) => isNotDefined(screen.properties.screen),
-                    );
-                    if (isDefined(isScreen?.properties.screen)) {
-                        return 'There are no screen in this Geojson';
-                    }
-                    return undefined;
-                },
-            },
+            tutorialTasks: {},
             exampleImage1: {},
             exampleImage2: {},
         };

From d125f7ec511b7baa953fc2e1e6c275c301d8fb01 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 20 Jun 2023 16:46:14 +0545
Subject: [PATCH 25/72] Improve UI

---
 .../app/Base/components/Navbar/styles.css     |   6 +-
 manager-dashboard/app/Base/styles.css         |   7 +-
 .../app/components/Button/styles.css          |   1 +
 .../app/components/Card/styles.css            |   5 +-
 .../app/components/InputSection/index.tsx     |   4 +-
 .../app/components/InputSection/styles.css    |   1 -
 .../app/components/NonFieldError/index.tsx    |  39 ++
 .../app/components/NonFieldError/styles.css   |   3 +
 .../ScenarioGeoJsonPreview/index.tsx          | 101 +----
 .../ScenarioGeoJsonPreview/styles.css         |  11 +-
 .../app/components/Tabs/index.tsx             |  16 +-
 .../app/components/Tabs/styles.css            |  15 +-
 manager-dashboard/app/utils/common.ts         |  35 +-
 manager-dashboard/app/views/Login/styles.css  |   2 +-
 .../CustomOptionPreview/index.tsx             |  52 +--
 .../CustomOptionPreview/styles.css            |  50 +--
 .../CustomOptionInput/SubOption/index.tsx     |   2 +-
 .../CustomOptionInput/SubOption/styles.css    |   5 +-
 .../NewTutorial/CustomOptionInput/index.tsx   |  92 ++--
 .../NewTutorial/CustomOptionInput/styles.css  |  14 +-
 .../InformationPagePreview/index.tsx          |  54 ++-
 .../InformationPagePreview/styles.css         |  28 +-
 .../InformationPageInput/index.tsx            |   1 -
 .../InformationPageInput/styles.css           |  11 +-
 .../NewTutorial/ScenarioPageInput/index.tsx   |  29 +-
 .../app/views/NewTutorial/index.tsx           | 424 ++++++++----------
 .../app/views/NewTutorial/styles.css          |  23 +-
 .../app/views/NewTutorial/utils.ts            | 211 ++++++++-
 28 files changed, 666 insertions(+), 576 deletions(-)
 create mode 100644 manager-dashboard/app/components/NonFieldError/index.tsx
 create mode 100644 manager-dashboard/app/components/NonFieldError/styles.css

diff --git a/manager-dashboard/app/Base/components/Navbar/styles.css b/manager-dashboard/app/Base/components/Navbar/styles.css
index 30110593c..869c7b47b 100644
--- a/manager-dashboard/app/Base/components/Navbar/styles.css
+++ b/manager-dashboard/app/Base/components/Navbar/styles.css
@@ -5,7 +5,7 @@
     box-shadow: 0 3px 5px -2px var(--color-shadow);
     background-color: var(--color-primary);
     padding: var(--spacing-medium) var(--spacing-large);
-    color: var(--color-text-on-light);
+    color: var(--color-text-on-dark);
 
     .container {
         display: flex;
@@ -42,7 +42,7 @@
 
                 .link {
                     opacity: 0.7;
-                    color: var(--color-text-on-light);
+                    color: var(--color-text-on-dark);
 
                     &.active {
                         opacity: 1;
@@ -58,7 +58,7 @@
             gap: var(--spacing-medium);
 
             .logout-button {
-                color: var(--color-text-on-light);
+                color: var(--color-text-on-dark);
             }
         }
     }
diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index 3ffb25fea..f7782f259 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -60,7 +60,7 @@ p {
 
     --color-primary: #0d1949;
     --color-primary-light: #2d5989;
-    --color-text-on-light: #ffffff;
+    --color-text-on-dark: #ffffff;
     --color-text-watermark: rgba(0, 0, 0, .4);
     --color-text: rgba(0, 0, 0, 0.8);
     --color-text-dark: rgba(0, 0, 0, 1);
@@ -88,11 +88,14 @@ p {
 
     --opacity-disabled-element: 0.5;
 
-    --width-separator-thin: 1px;
+    --width-separator-thin: 1pt;
     --width-scrollbar: 0.75rem;
     --width-page-content-max: 70rem;
     --width-navbar-content-max: 76rem;
 
+    --width-mobile-preview: 24rem;
+    --height-mobile-preview: 40rem;
+
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;
     --radius-blur-shadow: 5px;
diff --git a/manager-dashboard/app/components/Button/styles.css b/manager-dashboard/app/components/Button/styles.css
index 5bd4987a7..2670bc56d 100644
--- a/manager-dashboard/app/components/Button/styles.css
+++ b/manager-dashboard/app/components/Button/styles.css
@@ -4,6 +4,7 @@
     border: var(--width-separator-thin) solid rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-button-border);
     padding: var(--spacing-small) var(--spacing-medium);
+    width: fit-content;
     color: rgba(0, 0, 0, 0.8);
     gap: var(--spacing-small);
 
diff --git a/manager-dashboard/app/components/Card/styles.css b/manager-dashboard/app/components/Card/styles.css
index 56aaac368..75fc13db7 100644
--- a/manager-dashboard/app/components/Card/styles.css
+++ b/manager-dashboard/app/components/Card/styles.css
@@ -1,7 +1,6 @@
 .card {
-    border: 0.5px;
     background-color: var(--color-foreground);
-    padding: var(--spacing);
+    padding: var(--spacing-medium);
 
     .title {
         padding: var(--spacing-medium);
@@ -22,4 +21,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/components/InputSection/index.tsx b/manager-dashboard/app/components/InputSection/index.tsx
index dd63e0fd4..3cab44e6e 100644
--- a/manager-dashboard/app/components/InputSection/index.tsx
+++ b/manager-dashboard/app/components/InputSection/index.tsx
@@ -7,6 +7,7 @@ interface Props {
     className?: string;
     heading?: React.ReactNode;
     children?: React.ReactNode;
+    contentClassName?: string;
 }
 
 function InputSection(props: Props) {
@@ -14,6 +15,7 @@ function InputSection(props: Props) {
         className,
         heading,
         children,
+        contentClassName,
     } = props;
 
     return (
@@ -23,7 +25,7 @@ function InputSection(props: Props) {
                     {heading}
                 </h2>
             </div>
-            <div className={styles.content}>
+            <div className={_cs(styles.content, contentClassName)}>
                 {children}
             </div>
         </div>
diff --git a/manager-dashboard/app/components/InputSection/styles.css b/manager-dashboard/app/components/InputSection/styles.css
index fde96fe6f..ca1ec233f 100644
--- a/manager-dashboard/app/components/InputSection/styles.css
+++ b/manager-dashboard/app/components/InputSection/styles.css
@@ -11,7 +11,6 @@
         display: flex;
         flex-direction: column;
         border-radius: var(--radius-card);
-        padding: var(--spacing-large);
         gap: var(--spacing-extra-large);
     }
 }
diff --git a/manager-dashboard/app/components/NonFieldError/index.tsx b/manager-dashboard/app/components/NonFieldError/index.tsx
new file mode 100644
index 000000000..aa91856d3
--- /dev/null
+++ b/manager-dashboard/app/components/NonFieldError/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { _cs, isNotDefined } from '@togglecorp/fujs';
+import {
+    Error,
+    nonFieldError,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import styles from './styles.css';
+
+interface Props<T> {
+    className?: string;
+    error: Error<T>;
+}
+
+function NonFieldError<T>(props: Props<T>) {
+    const {
+        className,
+        error,
+    } = props;
+
+    if (!error) {
+        return null;
+    }
+
+    const errorMessage = getErrorObject(error)?.[nonFieldError];
+
+    if (isNotDefined(errorMessage)) {
+        return null;
+    }
+
+    return (
+        <div className={_cs(styles.nonFieldError, className)}>
+            {errorMessage}
+        </div>
+    );
+}
+
+export default NonFieldError;
diff --git a/manager-dashboard/app/components/NonFieldError/styles.css b/manager-dashboard/app/components/NonFieldError/styles.css
new file mode 100644
index 000000000..cc6d8bdd4
--- /dev/null
+++ b/manager-dashboard/app/components/NonFieldError/styles.css
@@ -0,0 +1,3 @@
+.non-field-error {
+    color: var(--color-danger);
+}
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
index ebde4f4d5..3f0f6ec49 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
-import {
-    map as createMap,
-    Map,
-    tileLayer,
-    geoJSON,
-} from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
-import Heading from '#components/Heading';
 
+import GeoJsonPreview from '#components/GeoJsonPreview';
 import styles from './styles.css';
-import { iconMap } from '#utils/common';
+
+import { iconMap, IconKey } from '#utils/common';
 
 interface Props {
     className?: string;
@@ -17,7 +12,7 @@ interface Props {
     previewPopUp?: {
         title?: string;
         description?: string;
-        icon?: string;
+        icon?: IconKey;
     }
 }
 
@@ -28,80 +23,11 @@ function ScenarioGeoJsonPreview(props: Props) {
         previewPopUp,
     } = props;
 
-    const mapRef = React.useRef<Map>();
-    const mapContainerRef = React.useRef<HTMLDivElement>(null);
-
-    React.useEffect(
-        () => {
-            if (mapContainerRef.current && !mapRef.current) {
-                mapRef.current = createMap(mapContainerRef.current);
-            }
-
-            if (mapRef.current) {
-                // NOTE: show whole world by default
-                mapRef.current.setView(
-                    [0.0, 0.0],
-                    1,
-                );
-
-                const layer = tileLayer(
-                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    {
-                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-                        subdomains: ['a', 'b', 'c'],
-                    },
-                );
-
-                layer.addTo(mapRef.current);
-                mapRef.current.invalidateSize();
-            }
-
-            return () => {
-                if (mapRef.current) {
-                    mapRef.current.remove();
-                    mapRef.current = undefined;
-                }
-            };
-        },
-        [],
-    );
-
-    React.useEffect(
-        () => {
-            if (!geoJson) {
-                return undefined;
-            }
-
-            const map = mapRef.current;
-            if (!map) {
-                return undefined;
-            }
-
-            const newGeoJson = geoJSON();
-            newGeoJson.addTo(map);
-
-            newGeoJson.addData(geoJson);
-            const bounds = newGeoJson.getBounds();
-
-            if (bounds.isValid()) {
-                map.fitBounds(bounds);
-            }
-
-            return () => {
-                newGeoJson.removeFrom(map);
-                newGeoJson.remove();
-            };
-        },
-        [geoJson],
-    );
-
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+    console.info(geoJson);
 
     return (
         <div className={_cs(styles.geoJsonPreview, className)}>
-            <Heading level={3}>
-                Preview
-            </Heading>
             <div className={styles.mapContent}>
                 <div className={styles.popUpContent}>
                     <div className={styles.popUpTitle}>
@@ -111,18 +37,15 @@ function ScenarioGeoJsonPreview(props: Props) {
                         {previewPopUp?.description ?? 'Description'}
                     </div>
                 </div>
-                {
-                    Comp
-                    && (
-                        <div className={styles.popUpIcon}>
-                            <Comp />
-                        </div>
-                    )
-                }
+                { Comp && (
+                    <div className={styles.popUpIcon}>
+                        <Comp />
+                    </div>
+                )}
             </div>
-            <div
-                ref={mapContainerRef}
+            <GeoJsonPreview
                 className={styles.mapContainer}
+                geoJson={geoJson}
             />
         </div>
     );
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
index a4fc7f495..a7574b8ca 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
@@ -6,23 +6,20 @@
     flex-shrink: 0;
     gap: var(--spacing-medium);
     z-index: 0;
-    width: 100%;
-    max-width: 20rem;
-    height: 30rem;
 
     .map-container {
         z-index: -1;
-        width: 100%;
-        height: 100%;
+        width: var(--width-mobile-preview);
+        height: var(--height-mobile-preview);
     }
 
     .map-content {
         display: flex;
         position: absolute;
-        top: 60px;
+        top: 3rem;
         opacity: 0.95;
         border-radius: 10px;
-        background-color: #ffffff;
+        background-color: var(--color-foreground);
         padding: var(--spacing-medium);
         gap: var(--spacing-large);
         width: 90%;
diff --git a/manager-dashboard/app/components/Tabs/index.tsx b/manager-dashboard/app/components/Tabs/index.tsx
index 98bc6552a..0404419f1 100644
--- a/manager-dashboard/app/components/Tabs/index.tsx
+++ b/manager-dashboard/app/components/Tabs/index.tsx
@@ -4,7 +4,7 @@ import RawButton, { Props as RawButtonProps } from '../RawButton';
 
 import styles from './styles.css';
 
-type TabKey = string;
+type TabKey = string | number;
 
 export interface TabContextProps {
     activeTab: TabKey | undefined;
@@ -12,7 +12,7 @@ export interface TabContextProps {
 }
 
 const TabContext = React.createContext<TabContextProps>({
-    activeTab: '',
+    activeTab: undefined,
     setActiveTab: () => {
         // eslint-disable-next-line no-console
         console.warn('setActiveTab called before it was initialized');
@@ -75,7 +75,7 @@ export function TabList(props: TabListProps) {
     );
 }
 
-export interface TabPanelProps extends React.HTMLProps<HTMLDivElement> {
+export interface TabPanelProps extends Omit<React.HTMLProps<HTMLDivElement>, 'name'> {
     name: TabKey;
     elementRef?: React.Ref<HTMLDivElement>;
     className?: string;
@@ -105,13 +105,13 @@ export function TabPanel(props: TabPanelProps) {
     );
 }
 
-export interface Props {
+export interface Props<VALUE> {
     children: React.ReactNode;
-    value: TabKey;
-    onChange: (key: TabKey) => void;
+    value: VALUE;
+    onChange: (key: VALUE) => void;
 }
 
-export function Tabs(props: Props) {
+export function Tabs<VALUE>(props: Props<VALUE>) {
     const {
         children,
         value,
@@ -121,7 +121,7 @@ export function Tabs(props: Props) {
     const contextValue = React.useMemo(() => ({
         // Note: following cast is required since we do not have any other method
         // to provide template in the context type
-        activeTab: value,
+        activeTab: value as TabKey,
         setActiveTab: onChange as (key: TabKey | undefined) => void,
     }), [value, onChange]);
 
diff --git a/manager-dashboard/app/components/Tabs/styles.css b/manager-dashboard/app/components/Tabs/styles.css
index 28e354241..c6a4bab5a 100644
--- a/manager-dashboard/app/components/Tabs/styles.css
+++ b/manager-dashboard/app/components/Tabs/styles.css
@@ -1,19 +1,18 @@
 .tab {
-    border: 1px solid rgba(0,0,0,.1);
-    border-bottom: none;
-    border-radius: 5px 5px 0 0;
-    background-color: #FFFFFF;
+    border: var(--width-separator-thin) solid var(--color-separator);
+    border-radius: 0.25rem 0.25rem 0 0;
+    border-bottom-color: transparent;
+    background-color: var(--color-foreground);
     padding: var(--spacing-small);
     text-align: left;
-    
+
     &.active {
-        bottom: -1px;
-        background-color: #FBFBFF;
+        background-color: var(--color-background-accent-hint);
     }
 }
 
 .tab-list {
     display: flex;
     gap: var(--spacing-small);
-    border-bottom: 1px solid rgba(0,0,0,.1);
+    border-bottom: var(--width-separator-thin) solid var(--color-separator);
 }
diff --git a/manager-dashboard/app/utils/common.ts b/manager-dashboard/app/utils/common.ts
index 4e6c76388..d141c0cd7 100644
--- a/manager-dashboard/app/utils/common.ts
+++ b/manager-dashboard/app/utils/common.ts
@@ -65,13 +65,40 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
 };
 
-export interface IconList {
-    key: string;
+export type IconKey = 'addOutline'
+    | 'alertOutline'
+    | 'banOutline'
+    | 'checkmarkOutline'
+    | 'closeOutline'
+    | 'eggOutline'
+    | 'ellipseOutline'
+    | 'flagOutline'
+    | 'handLeftOutline'
+    | 'handRightOutline'
+    | 'happyOutline'
+    | 'heartOutline'
+    | 'helpOutline'
+    | 'informationOutline'
+    | 'prismOutline'
+    | 'refreshOutline'
+    | 'removeOutline'
+    | 'sadOutline'
+    | 'searchOutline'
+    | 'shapesOutline'
+    | 'squareOutline'
+    | 'starOutline'
+    | 'thumbsDownOutline'
+    | 'thumbsUpOutline'
+    | 'triangleOutline'
+    | 'warningOutline';
+
+export interface IconItem {
+    key: IconKey;
     label: string;
-    component: IconType
+    component: IconType;
 }
 
-export const iconList: IconList[] = [
+export const iconList: IconItem[] = [
     {
         key: 'addOutline',
         label: 'Add',
diff --git a/manager-dashboard/app/views/Login/styles.css b/manager-dashboard/app/views/Login/styles.css
index 82d1d718a..a9726a911 100644
--- a/manager-dashboard/app/views/Login/styles.css
+++ b/manager-dashboard/app/views/Login/styles.css
@@ -25,7 +25,7 @@
             }
 
             .text {
-                color: var(--color-text-on-light);
+                color: var(--color-text-on-dark);
             }
         }
 
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index d9cf7b138..50c0589b1 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Heading from '#components/Heading';
 import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import { iconMap } from '#utils/common';
 
@@ -14,16 +13,21 @@ export default function CustomOptionPreview(props: Props) {
         value,
     } = props;
 
-    function Content() {
-        const innerContent = value?.map((preview) => {
-            const Icon = preview.icon ? iconMap[preview.icon] : undefined;
-            return (
-                <div
-                    className={styles.previewContent}
-                    key={preview.optionId}
-                >
-                    {Icon
-                        && (
+    return (
+        <div className={styles.optionPreview}>
+            {value?.map((preview) => {
+                const Icon = preview.icon ? iconMap[preview.icon] : undefined;
+                const previewText = [
+                    preview.title,
+                    preview.description,
+                ].filter(Boolean).join(' - ');
+
+                return (
+                    <div
+                        className={styles.previewContent}
+                        key={preview.optionId}
+                    >
+                        {Icon && (
                             <div
                                 className={styles.previewIcon}
                                 style={{ backgroundColor: preview.iconColor }}
@@ -31,28 +35,12 @@ export default function CustomOptionPreview(props: Props) {
                                 <Icon />
                             </div>
                         )}
-                    <div className={styles.previewText}>
-                        {preview.title}
-                    </div>
-                    <div className={styles.previewText}>
-                        {preview.description}
+                        <div className={styles.previewText}>
+                            {previewText}
+                        </div>
                     </div>
-                </div>
-            );
-        });
-        return <>{innerContent}</>;
-    }
-
-    return (
-        <div className={styles.optionPreview}>
-            <Heading level={3}>
-                Preview
-            </Heading>
-            <div className={styles.previewScreen}>
-                <div className={styles.previewContainer}>
-                    <Content />
-                </div>
-            </div>
+                );
+            })}
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index aeea11f9e..321b2617c 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -1,38 +1,28 @@
 .option-preview {
     display: flex;
-    align-items: center;
     flex-direction: column;
-    flex-grow: 1;
+    background-color: var(--color-primary);
+    padding: var(--spacing-large);
+    gap: var(--spacing-large);
+    width: var(--width-mobile-preview);
+    height: var(--height-mobile-preview);
 
-    .preview-screen {
+    .preview-content {
         display: flex;
-        flex-direction: column;
-        background-color: var(--color-primary);
-        width: 20rem;
-        height: 30rem;
+        align-items: center;
+        gap: var(--spacing-medium);
+        color: var(--color-text-on-dark);
 
-        .preview-container {
-            padding-top: var(--spacing-super-large);
-            
-            .preview-content {
-                display: flex;
-                align-items: center;
-                gap: var(--spacing-extra-small);
-                padding: var(--spacing-medium);
-                color: #ffffff;
-                
-                .preview-icon {
-                    display: flex;
-                    align-items: center;
-                    border-radius: 50%;
-                    padding: 3px;
-                    font-size: 30px;
-                }
-                
-                .preview-text {
-                    padding: var(--spacing-small);
-                }
-            }
+        .preview-icon {
+            display: flex;
+            align-items: center;
+            border-radius: 50%;
+            padding: 3px;
+            font-size: 30px;
+        }
+
+        .preview-text {
+            font-size: var(--font-size-small);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
index dd88859e9..3492ffe49 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
@@ -56,7 +56,7 @@ export default function SubOption(props: Props) {
                 onClick={onRemove}
                 className={styles.removeButton}
             >
-                Delete this Reason
+                Remove
             </Button>
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
index db7513432..4577244ee 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
@@ -1,12 +1,13 @@
 .sub-option-content {
     display: flex;
+    align-items: flex-end;
     gap: var(--spacing-medium);
 
     .sub-option-input {
         flex-grow: 1;
     }
+
     .remove-button {
         width: fit-content;
-        height: fit-content;
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 4465d2c10..0877abf2f 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -7,14 +7,13 @@ import {
     useFormObject,
     getErrorObject,
     useFormArray,
-    nonFieldError,
 } from '@togglecorp/toggle-form';
 import Button from '#components/Button';
 import Heading from '#components/Heading';
-import Tabs, { TabList, Tab, TabPanel } from '#components/Tabs';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
+import NonFieldError from '#components/NonFieldError';
 
 import SubOption from './SubOption';
 import {
@@ -24,7 +23,7 @@ import {
 } from '../utils';
 
 import styles from './styles.css';
-import { IconList, iconList } from '#utils/common';
+import { IconItem, iconList } from '#utils/common';
 
 export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
 const defaultcustomOptionsValue: PartialCustomOptionsType = {
@@ -50,8 +49,6 @@ export default function CustomOptionInput(props: Props) {
         error: riskyError,
     } = props;
 
-    const [activesubOptions, setActiveSubOptions] = React.useState('1');
-
     const onOptionChange = useFormObject(index, onChange, defaultcustomOptionsValue);
 
     const {
@@ -89,7 +86,7 @@ export default function CustomOptionInput(props: Props) {
     );
 
     return (
-        <div className={styles.optionForm}>
+        <div className={styles.customOption}>
             <div className={styles.optionContent}>
                 <TextInput
                     className={styles.optionInput}
@@ -105,8 +102,8 @@ export default function CustomOptionInput(props: Props) {
                     label="Icon"
                     value={value?.icon}
                     options={iconList}
-                    keySelector={(d: IconList) => d.key}
-                    labelSelector={(d: IconList) => d.label}
+                    keySelector={(d: IconItem) => d.key}
+                    labelSelector={(d: IconItem) => d.label}
                     onChange={onOptionChange}
                     error={error?.icon}
                 />
@@ -126,7 +123,7 @@ export default function CustomOptionInput(props: Props) {
                     label="Icon Color"
                     value={value?.iconColor}
                     options={iconColorOptions}
-                    keySelector={(d: ColorOptions) => d.key}
+                    keySelector={(d: ColorOptions) => d.color}
                     labelSelector={(d: ColorOptions) => d.label}
                     onChange={onOptionChange}
                     error={error?.iconColor}
@@ -145,55 +142,38 @@ export default function CustomOptionInput(props: Props) {
                 onClick={onRemove}
                 className={styles.removeButton}
             >
-                Delete this option
-            </Button>
-            <Heading level={4}>
-                Sub Options
-            </Heading>
-            <Button
-                name="add_sub_options"
-                className={styles.addButton}
-                icons={<MdAdd />}
-                onClick={handlesubOptionsAdd}
-                disabled={value.subOptions && value.subOptions.length >= 6}
-            >
-                Add Sub Options
+                Remove Option
             </Button>
-            {subOptionsError && subOptionsError?.[nonFieldError]}
-            {value.subOptions?.length ? (
-                <Tabs
-                    value={activesubOptions}
-                    onChange={setActiveSubOptions}
+            <div className={styles.subOptions}>
+                <Heading level={3}>
+                    Sub Options
+                </Heading>
+                <NonFieldError
+                    error={subOptionsError}
+                />
+                {value.subOptions?.map((sub, i) => (
+                    <SubOption
+                        key={sub.subOptionsId}
+                        value={sub}
+                        index={i}
+                        onChange={onsubOptionsAdd}
+                        onRemove={onsubOptionsRemove}
+                        error={subOptionsError?.[sub.subOptionsId]}
+                    />
+                ))}
+                {!value.subOptions?.length && (
+                    <div>No sub options at the moment</div>
+                )}
+                <Button
+                    name="addSubOption"
+                    className={styles.addButton}
+                    icons={<MdAdd />}
+                    onClick={handlesubOptionsAdd}
+                    disabled={value.subOptions && value.subOptions.length >= 6}
                 >
-                    <TabList>
-                        {value.subOptions?.map((sub) => (
-                            <Tab
-                                key={sub.subOptionsId}
-                                name={`${sub.subOptionsId}`}
-                            >
-                                {`Sub Options ${sub.subOptionsId}`}
-                            </Tab>
-                        ))}
-                    </TabList>
-                    {value.subOptions.map((sub, i) => (
-                        <TabPanel
-                            key={sub.subOptionsId}
-                            name={String(sub.subOptionsId)}
-                        >
-                            <SubOption
-                                key={sub.subOptionsId}
-                                value={sub}
-                                index={i}
-                                onChange={onsubOptionsAdd}
-                                onRemove={onsubOptionsRemove}
-                                error={subOptionsError?.[sub.subOptionsId]}
-                            />
-                        </TabPanel>
-                    ))}
-                </Tabs>
-            ) : (
-                <div>Add Sub Options</div>
-            )}
+                    Add Sub Options
+                </Button>
+            </div>
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
index 0a2844aa9..a7159de73 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -1,7 +1,7 @@
-.option-form {
+.custom-option {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-medium);
+    gap: var(--spacing-large);
 
     .option-content {
         display: flex;
@@ -12,7 +12,7 @@
         }
 
         .option-icon {
-            flex-basis: 15%;
+            flex-basis: 10rem;
         }
     }
 
@@ -24,4 +24,12 @@
     .add-button {
         width: fit-content;
     }
+
+    .sub-options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large);
+        background-color: var(--color-background);
+        padding: var(--spacing-large);
+    }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 1de8b6903..7f485ae27 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { PartialTutorialFormType } from '#views/NewTutorial/utils';
-import Heading from '#components/Heading';
 import Preview from '#components/Preview';
 
 import styles from './styles.css';
@@ -15,37 +14,34 @@ export default function InformationPagePreview(props: Props) {
         value,
     } = props;
 
-    function Content() {
-        const innerContent = value?.blocks?.map((preview) => {
-            if (preview.blockType === 'text') {
-                return (
-                    <div key={preview.blockNumber}>
-                        {preview.textDescription ?? 'Description of the image'}
-                    </div>
-                );
-            }
-            return (
-                <Preview
-                    key={preview.blockNumber}
-                    file={preview.imageFile}
-                />
-            );
-        });
-        return <>{innerContent}</>;
-    }
     return (
         <div className={styles.informationPreview}>
-            <Heading level={3}>
-                Preview
-            </Heading>
-            <div className={styles.previewScreen}>
-                <div className={styles.previewContent}>
-                    <div>
-                        {value?.title ?? 'Title'}
-                    </div>
-                    <Content />
+            {value?.title && (
+                <div>
+                    {value?.title}
                 </div>
-            </div>
+            )}
+            {value?.blocks?.map((preview) => {
+                if (preview.blockType === 'text' && preview.textDescription) {
+                    return (
+                        <div key={preview.blockNumber}>
+                            {preview.textDescription}
+                        </div>
+                    );
+                }
+
+                if (preview.blockType === 'image') {
+                    return (
+                        <Preview
+                            className={styles.imagePreview}
+                            key={preview.blockNumber}
+                            file={preview.imageFile}
+                        />
+                    );
+                }
+
+                return null;
+            })}
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
index c4fb9c552..a18a8b9d7 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -1,23 +1,15 @@
 .information-preview {
     display: flex;
-    align-items: center;
     flex-direction: column;
-    flex-grow: 1;
+    gap: var(--spacing-large);
+    background-color: var(--color-primary);
+    padding: var(--spacing-large);
+    width: var(--width-mobile-preview);
+    height: var(--height-mobile-preview);
+    overflow: auto;
+    color: var(--color-text-on-dark);
 
-    .preview-screen {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--color-primary);
-        width: 20rem;
-        height: 30rem;
-        overflow: auto;
-
-        .preview-content {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-medium);
-            padding: var(--spacing-large);
-            color: #ffffff;
-        }
+    .image-preview {
+        height: 10rem;
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 0f0337cdb..194ea201c 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -68,7 +68,6 @@ export default function InformationPageInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    className={styles.removeButton}
                 >
                     Delete Page
                 </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
index 88f72a095..6e4a55005 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
@@ -4,13 +4,8 @@
 
     .informationForm {
         display: flex;
-        flex-basis: 60%;
         flex-direction: column;
-        gap: var(--spacing-medium);
-        
-        .remove-button {
-            align-self: end;
-            width: fit-content;
-        }
+        flex-grow: 1;
+        gap: var(--spacing-large);
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 659d769d9..f025ab709 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -7,10 +7,11 @@ import {
     getErrorObject,
 } from '@togglecorp/toggle-form';
 import {
-    IconList,
+    IconItem,
     iconList,
     valueSelector,
     labelSelector,
+    IconKey,
 } from '#utils/common';
 import TextInput from '#components/TextInput';
 import Heading from '#components/Heading';
@@ -21,20 +22,20 @@ import SegmentInput from '#components/SegmentInput';
 import styles from './styles.css';
 
 type ScenarioType = {
-    scenarioId: string;
+    scenarioId: number;
     hint: {
         description: string;
-        icon: string;
+        icon: IconKey;
         title: string;
     };
     instruction: {
         description: string;
-        icon: string;
+        icon: IconKey;
         title: string;
     };
     success: {
         description: string;
-        icon: string;
+        icon: IconKey;
         title: string;
     };
 };
@@ -52,7 +53,7 @@ const previewOptions: ScenarioSegmentType[] = [
 
 type PartialScenarioType = PartialForm<ScenarioType, 'scenarioId'>;
 const defaultScenarioTabsValue: PartialScenarioType = {
-    scenarioId: 'xxx',
+    scenarioId: 0,
 };
 
 interface Props {
@@ -120,8 +121,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.instruction?.icon}
                         options={iconList}
-                        keySelector={(d: IconList) => d.key}
-                        labelSelector={(d: IconList) => d.label}
+                        keySelector={(d: IconItem) => d.key}
+                        labelSelector={(d: IconItem) => d.label}
                         onChange={onInstructionFieldChange}
                         error={instructionsError?.icon}
                     />
@@ -151,8 +152,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.hint?.icon}
                         options={iconList}
-                        keySelector={(d: IconList) => d.key}
-                        labelSelector={(d: IconList) => d.label}
+                        keySelector={(d: IconItem) => d.key}
+                        labelSelector={(d: IconItem) => d.label}
                         onChange={onHintFieldChange}
                         error={hintError?.icon}
                     />
@@ -163,14 +164,14 @@ export default function ScenarioPageInput(props: Props) {
                 <div className={styles.scenarioForm}>
                     <div className={styles.scenarioFormContent}>
                         <TextInput
-                            name="title"
+                            name={'title' as const}
                             value={value.success?.title}
                             label="Title"
                             onChange={onSuccessFieldChange}
                             error={successError?.title}
                         />
                         <TextInput
-                            name="description"
+                            name={'description' as const}
                             value={value.success?.description}
                             label="Description"
                             onChange={onSuccessFieldChange}
@@ -182,8 +183,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.success?.icon}
                         options={iconList}
-                        keySelector={(d: IconList) => d.key}
-                        labelSelector={(d: IconList) => d.label}
+                        keySelector={(d: IconItem) => d.key}
+                        labelSelector={(d: IconItem) => d.label}
                         onChange={onSuccessFieldChange}
                         error={successError?.icon}
                     />
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index edc5bdbd3..448a289c6 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -3,6 +3,7 @@ import {
     _cs,
     isDefined,
     unique,
+    getElementAround,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -10,7 +11,6 @@ import {
     createSubmitHandler,
     analyzeErrors,
     useFormArray,
-    nonFieldError,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -35,6 +35,7 @@ import { Link } from 'react-router-dom';
 import UserContext from '#base/context/UserContext';
 import projectTypeOptions from '#base/configs/projectTypes';
 import useMountedRef from '#hooks/useMountedRef';
+import useInputState from '#hooks/useInputState';
 import Card from '#components/Card';
 import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
@@ -53,8 +54,6 @@ import TileServerInput, {
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
-import Heading from '#components/Heading';
-import PopupButton from '#components/PopupButton';
 import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
 import {
     valueSelector,
@@ -71,37 +70,44 @@ import {
     PartialTutorialFormType,
     ScenarioPagesType,
     CustomOptionType,
-    PageTemplateType,
     InformationPagesType,
     PartialInformationPagesType,
-    PartialBlocksType,
+    colorKeyToColorMap,
+    InformationPageTemplateKey,
+    infoPageTemplateoptions,
+    infoPageBlocksMap,
 } from './utils';
 import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
+import NonFieldError from '#components/NonFieldError';
+import SelectInput from '#components/SelectInput';
 
 const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
         value: 1,
         title: 'Yes',
-        icon: 'addOutline',
-        iconColor: 'green',
+        icon: 'checkmarkOutline',
+        iconColor: colorKeyToColorMap.green,
+        description: 'the shape does outline a building in the image',
     },
     {
-        value: 0,
         optionId: 2,
+        value: 0,
         title: 'No',
-        icon: 'alertOutline',
-        iconColor: 'red',
+        icon: 'closeOutline',
+        iconColor: colorKeyToColorMap.red,
+        description: 'the shape doesn\'t match a building in the image',
     },
     {
-        value: 2,
         optionId: 3,
+        value: 2,
         title: 'Not Sure',
-        icon: 'banOutline',
-        iconColor: 'yellow',
+        icon: 'removeOutline',
+        iconColor: colorKeyToColorMap.orange,
+        description: 'if you\'re not sure or there is cloud cover / bad imagery',
     },
 ];
 const defaultTutorialFormValue: PartialTutorialFormType = {
@@ -146,12 +152,10 @@ function NewTutorial(props: Props) {
         setTutorialSubmissionStatus,
     ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
 
-    // NOTE: scenario
-    const [activeTab, setActiveTab] = React.useState('1');
-    // NOTE: options
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
-    // NOTE: Information Page
-    const [activeInformationPages, setActiveInformationPages] = React.useState('1');
+    const [activeScenarioTab, setActiveScenarioTab] = React.useState(1);
+    const [activeOptionsTab, setActiveOptionsTab] = React.useState(1);
+    const [activeInformationPage, setActiveInformationPage] = React.useState(1);
+    const [selectedInfoPageTemplate, setSelectedInfoPageTemplate] = useInputState<InformationPageTemplateKey>('1-picture');
 
     const error = React.useMemo(
         () => getErrorObject(formError),
@@ -174,18 +178,22 @@ function NewTutorial(props: Props) {
 
     const previewGeoJson = React.useMemo((): GeoJSON.GeoJSON | undefined => {
         const geojson = value.tutorialTasks;
+
         if (!geojson) {
             return undefined;
         }
+
+        console.info(activeScenarioTab, typeof activeScenarioTab, geojson);
+
         return {
             ...geojson,
             features: geojson.features.filter(
-                (screen) => screen.properties.screen === Number(activeTab),
+                (screen) => screen.properties.screen === activeScenarioTab,
             ),
         };
     }, [
         value.tutorialTasks,
-        activeTab,
+        activeScenarioTab,
     ]);
 
     const handleFormSubmission = React.useCallback((
@@ -318,21 +326,45 @@ function NewTutorial(props: Props) {
     );
 
     const {
-        setValue: onOptionAdd,
+        setValue: setOptionValue,
         removeValue: onOptionRemove,
     } = useFormArray<
         'customOptions',
         CustomOptionType
     >('customOptions', setFieldValue);
 
+    const handleOptionRemove = React.useCallback(
+        (index: number) => {
+            const nextOption = getElementAround(value?.customOptions ?? [], index);
+            onOptionRemove(index);
+
+            if (nextOption) {
+                setActiveOptionsTab(nextOption.optionId);
+            }
+        },
+        [onOptionRemove, value?.customOptions],
+    );
+
     const {
-        setValue: onInformationPagesAdd,
-        removeValue: onInformationPagesRemove,
+        setValue: setInformationPageValue,
+        removeValue: onInformationPageRemove,
     } = useFormArray<
         'informationPages',
         InformationPagesType
     >('informationPages', setFieldValue);
 
+    const handleInformationPageRemove = React.useCallback(
+        (index: number) => {
+            const nextInfoPage = getElementAround(value?.informationPages ?? [], index);
+            onInformationPageRemove(index);
+
+            if (nextInfoPage) {
+                setActiveInformationPage(nextInfoPage.pageNumber);
+            }
+        },
+        [onInformationPageRemove, value?.informationPages],
+    );
+
     const handleAddDefineOptions = React.useCallback(
         () => {
             setFieldValue(
@@ -349,6 +381,9 @@ function NewTutorial(props: Props) {
                     const newDefineOption: CustomOptionType = {
                         optionId: newOptionId,
                         value: newValue,
+                        icon: 'starOutline',
+                        title: 'Untitled',
+                        iconColor: colorKeyToColorMap.gray,
                     };
 
                     return [...safeOldValues, newDefineOption];
@@ -384,7 +419,7 @@ function NewTutorial(props: Props) {
         const sorted = uniqueArray?.sort((a, b) => a.properties?.screen - b.properties.screen);
         const tutorialTaskArray = sorted?.map((geo) => (
             {
-                scenarioId: String(geo.properties.screen),
+                scenarioId: geo.properties.screen,
                 hint: {},
                 instructions: {},
                 success: {},
@@ -397,80 +432,22 @@ function NewTutorial(props: Props) {
         setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
     }>(null);
 
-    const handleAddInformationPages = React.useCallback(
-        (template: PageTemplateType['key']) => {
+    const handleAddInformationPage = React.useCallback(
+        (template: InformationPageTemplateKey) => {
             setFieldValue(
                 (oldValue: PartialInformationPagesType) => {
                     const newOldValue = oldValue ?? [];
-                    let blocks: PartialBlocksType = [];
 
                     const newPage = newOldValue.length > 0
                         ? Math.max(...newOldValue.map((info) => info.pageNumber)) + 1
                         : 1;
 
-                    if (template === '2-picture') {
-                        blocks = [
-                            {
-                                blockNumber: 1,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 2,
-                                blockType: 'image',
-                            },
-                            {
-                                blockNumber: 3,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 4,
-                                blockType: 'image',
-                            },
-                        ];
-                    }
-                    if (template === '3-picture') {
-                        blocks = [
-                            {
-                                blockNumber: 1,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 2,
-                                blockType: 'image',
-                            },
-                            {
-                                blockNumber: 3,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 4,
-                                blockType: 'image',
-                            },
-                            {
-                                blockNumber: 5,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 6,
-                                blockType: 'image',
-                            },
-                        ];
-                    }
-                    if (template === '1-picture') {
-                        blocks = [
-                            {
-                                blockNumber: 1,
-                                blockType: 'text',
-                            },
-                            {
-                                blockNumber: 2,
-                                blockType: 'image',
-                            },
-                        ];
-                    }
+                    setActiveInformationPage(newPage);
 
+                    const blocks = infoPageBlocksMap[template];
                     const newPageInformation: InformationPagesType = {
                         pageNumber: newPage,
+                        title: `Untitled page ${newPage}`,
                         blocks,
                     };
                     return [...newOldValue, newPageInformation];
@@ -526,140 +503,16 @@ function NewTutorial(props: Props) {
                             />
                         </div>
                     </Card>
-                    <Card
-                        title="Upload GeoJSON file"
-                        contentClassName={styles.inputGroup}
-                    >
-                        <GeoJsonFileInput
-                            name={'tutorialTasks' as const}
-                            value={value?.tutorialTasks}
-                            onChange={handleGeoJsonFile}
-                            hint="It should end with .geojson or .geo.json"
-                            error={error?.tutorialTasks}
-                            disabled={submissionPending}
-                        />
-                    </Card>
-                    <Card
-                        title="Describe Scenarios"
-                        contentClassName={styles.cardScenarios}
-                    >
-                        <Tabs
-                            value={activeTab}
-                            onChange={setActiveTab}
-                        >
-                            {value.scenarioPages?.length ? (
-                                <div className={styles.tabContent}>
-                                    <TabList>
-                                        {value.scenarioPages?.map((task) => (
-                                            <Tab
-                                                key={task.scenarioId}
-                                                name={task.scenarioId}
-                                            >
-                                                {`Scenario ${task.scenarioId}`}
-                                            </Tab>
-                                        ))}
-                                    </TabList>
-                                    {value.scenarioPages?.map((task, index) => (
-                                        <TabPanel
-                                            key={task.scenarioId}
-                                            name={task.scenarioId}
-                                        >
-                                            <ScenarioPageInput
-                                                key={task.scenarioId}
-                                                index={index}
-                                                value={task}
-                                                onChange={onScenarioFormChange}
-                                                error={scenarioError?.[task.scenarioId]}
-                                                geoJson={previewGeoJson}
-                                            />
-                                        </TabPanel>
-                                    ))}
-                                </div>
-                            ) : (
-                                <div>No Scenarios</div>
-                            )}
-                        </Tabs>
-                    </Card>
-                    <Card
-                        title="Describe information pages"
-                        contentClassName={styles.card}
+                </InputSection>
+                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
+                    <InputSection
+                        heading="Define Options"
                     >
-                        <PopupButton
-                            persistent={false}
-                            name={undefined}
-                            componentRef={popupElementRef}
-                            label="Add Instruction"
-                            className={styles.addButton}
-                            popupContentClassName={styles.instructionPopup}
-                        >
-                            <Button
-                                variant="transparent"
-                                name="1-picture"
-                                onClick={handleAddInformationPages}
-                            >
-                                1 Picture
-                            </Button>
-                            <Button
-                                variant="transparent"
-                                name="2-picture"
-                                onClick={handleAddInformationPages}
-                            >
-                                2 Picture
-                            </Button>
-                            <Button
-                                variant="transparent"
-                                name="3-picture"
-                                onClick={handleAddInformationPages}
-                            >
-                                3 Picture
-                            </Button>
-                        </PopupButton>
-                        {informationPagesError && <p>{informationPagesError?.[nonFieldError]}</p>}
-                        {value.informationPages?.length ? (
-                            <Tabs
-                                value={activeInformationPages}
-                                onChange={setActiveInformationPages}
-                            >
-                                <TabList>
-                                    {value.informationPages.map((info) => (
-                                        <Tab
-                                            key={info.pageNumber}
-                                            name={String(info.pageNumber)}
-                                        >
-                                            {`Intro ${info.pageNumber}`}
-                                        </Tab>
-                                    ))}
-                                </TabList>
-                                {value.informationPages?.map((page, i) => (
-                                    <TabPanel
-                                        key={page.pageNumber}
-                                        name={String(page.pageNumber)}
-                                    >
-                                        <InformationPageInput
-                                            key={page.pageNumber}
-                                            value={page}
-                                            onChange={onInformationPagesAdd}
-                                            onRemove={onInformationPagesRemove}
-                                            index={i}
-                                            error={informationPagesError?.[page.pageNumber]}
-                                        />
-                                    </TabPanel>
-                                ))}
-                            </Tabs>
-                        ) : (
-                            <div>Add Page</div>
-                        )}
-                    </Card>
-                    {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                         <Card
-                            title="Define Options"
                             contentClassName={styles.card}
                         >
-                            <Heading level={4}>
-                                Option Instructions
-                            </Heading>
                             <Button
-                                name="add_instruction"
+                                name="addInstruction"
                                 className={styles.addButton}
                                 icons={<MdAdd />}
                                 onClick={handleAddDefineOptions}
@@ -668,9 +521,11 @@ function NewTutorial(props: Props) {
                                     && value.customOptions?.length >= 6
                                 }
                             >
-                                Add instruction
+                                Add Option
                             </Button>
-                            {optionsError && <p>{optionsError?.[nonFieldError]}</p>}
+                            <NonFieldError
+                                error={optionsError}
+                            />
                             {value.customOptions?.length ? (
                                 <Tabs
                                     value={activeOptionsTab}
@@ -680,7 +535,7 @@ function NewTutorial(props: Props) {
                                         {value.customOptions.map((opt) => (
                                             <Tab
                                                 key={opt.optionId}
-                                                name={`${opt.optionId}`}
+                                                name={opt.optionId}
                                             >
                                                 {`Option ${opt.optionId}`}
                                             </Tab>
@@ -690,15 +545,15 @@ function NewTutorial(props: Props) {
                                         {value.customOptions.map((options, index) => (
                                             <TabPanel
                                                 key={options.optionId}
-                                                name={String(options.optionId)}
+                                                name={options.optionId}
                                                 className={styles.optionTabPanel}
                                             >
                                                 <CustomOptionInput
                                                     key={options.optionId}
                                                     value={options}
                                                     index={index}
-                                                    onChange={onOptionAdd}
-                                                    onRemove={onOptionRemove}
+                                                    onChange={setOptionValue}
+                                                    onRemove={handleOptionRemove}
                                                     error={optionsError?.[options.optionId]}
                                                 />
                                             </TabPanel>
@@ -709,10 +564,129 @@ function NewTutorial(props: Props) {
                                     </div>
                                 </Tabs>
                             ) : (
-                                <div>Add options</div>
+                                <div>No sub-options at the moment</div>
                             )}
                         </Card>
-                    )}
+                    </InputSection>
+                )}
+                <InputSection heading="Information Pages">
+                    <Card contentClassName={styles.infoPageCardContent}>
+                        <div className={styles.addNewSection}>
+                            <SelectInput
+                                name=""
+                                label="Page Template"
+                                nonClearable
+                                value={selectedInfoPageTemplate}
+                                onChange={setSelectedInfoPageTemplate}
+                                options={infoPageTemplateoptions}
+                                keySelector={(infoPageTemplate) => infoPageTemplate.key}
+                                labelSelector={(infoPageTemplate) => infoPageTemplate.label}
+                                className={styles.instructionPopup}
+                            />
+                            <Button
+                                name={selectedInfoPageTemplate}
+                                onClick={handleAddInformationPage}
+                            >
+                                Add new Information Page
+                            </Button>
+                        </div>
+                        <NonFieldError
+                            error={informationPagesError}
+                        />
+                        {value.informationPages && value.informationPages.length > 0 && (
+                            <Tabs
+                                value={activeInformationPage}
+                                onChange={setActiveInformationPage}
+                            >
+                                <TabList>
+                                    {value.informationPages.map((info) => (
+                                        <Tab
+                                            key={info.pageNumber}
+                                            name={info.pageNumber}
+                                        >
+                                            {`Intro ${info.pageNumber}`}
+                                        </Tab>
+                                    ))}
+                                </TabList>
+                                {value.informationPages?.map((page, i) => (
+                                    <TabPanel
+                                        key={page.pageNumber}
+                                        name={page.pageNumber}
+                                    >
+                                        <InformationPageInput
+                                            key={page.pageNumber}
+                                            value={page}
+                                            onChange={setInformationPageValue}
+                                            onRemove={handleInformationPageRemove}
+                                            index={i}
+                                            error={informationPagesError?.[page.pageNumber]}
+                                        />
+                                    </TabPanel>
+                                ))}
+                            </Tabs>
+                        )}
+                        {!(value.informationPages?.length) && (
+                            <div>
+                                No information pages at the moment
+                            </div>
+                        )}
+                    </Card>
+                </InputSection>
+                <InputSection
+                    heading="Scenarios"
+                    contentClassName={styles.scenarioContent}
+                >
+                    <Card
+                        title="Upload GeoJSON file"
+                        contentClassName={styles.inputGroup}
+                    >
+                        <GeoJsonFileInput
+                            name={'tutorialTasks' as const}
+                            value={value?.tutorialTasks}
+                            onChange={handleGeoJsonFile}
+                            hint="It should end with .geojson or .geo.json"
+                            error={error?.tutorialTasks}
+                            disabled={submissionPending}
+                        />
+                    </Card>
+                    <Card title="Describe Scenarios">
+                        <Tabs
+                            value={activeScenarioTab}
+                            onChange={setActiveScenarioTab}
+                        >
+                            {value.scenarioPages?.length ? (
+                                <div className={styles.tabContent}>
+                                    <TabList>
+                                        {value.scenarioPages?.map((task) => (
+                                            <Tab
+                                                key={task.scenarioId}
+                                                name={task.scenarioId}
+                                            >
+                                                {`Scenario ${task.scenarioId}`}
+                                            </Tab>
+                                        ))}
+                                    </TabList>
+                                    {value.scenarioPages?.map((task, index) => (
+                                        <TabPanel
+                                            key={task.scenarioId}
+                                            name={task.scenarioId}
+                                        >
+                                            <ScenarioPageInput
+                                                key={task.scenarioId}
+                                                index={index}
+                                                value={task}
+                                                onChange={onScenarioFormChange}
+                                                error={scenarioError?.[task.scenarioId]}
+                                                geoJson={previewGeoJson}
+                                            />
+                                        </TabPanel>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div>No Scenarios at the moment</div>
+                            )}
+                        </Tabs>
+                    </Card>
                 </InputSection>
                 {
                     (value?.projectType === PROJECT_TYPE_BUILD_AREA
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 3cd69990c..ef08fdc77 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -11,7 +11,11 @@
         flex-direction: column;
         width: 100%;
         max-width: 70rem;
-        gap: var(--spacing-large);
+        gap: var(--spacing-extra-large);
+
+        .instruction-card {
+            display: flex;
+        }
 
         .card {
             display: flex;
@@ -21,12 +25,13 @@
             .add-button {
                 width: fit-content;
             }
-            
+
             .option-content {
                 display: flex;
+                gap: var(--spacing-extra-large);
 
                 .option-tab-panel {
-                    flex-basis: 60%;
+                    flex-grow: 1;
                 }
             }
         }
@@ -43,17 +48,21 @@
             }
         }
 
-        .card-scenarios {
+        .info-page-card-content {
             display: flex;
             flex-direction: column;
             gap: var(--spacing-large);
 
-            .tab-content {
+            .add-new-section {
                 display: flex;
-                flex-direction: column;
                 gap: var(--spacing-medium);
+                align-items: flex-end;
             }
         }
+
+        .scenario-content {
+            gap: var(--spacing-small);
+        }
     }
 
     .error-message {
@@ -136,4 +145,4 @@
     100% {
         transform: rotate(0deg) translateX(0);
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index e541bc9a1..442471886 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -21,49 +21,202 @@ import {
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_FOOTPRINT,
+    IconKey,
 } from '#utils/common';
 
+export type ColorKey = 'red'
+| 'pink'
+| 'purple'
+| 'deepPurple'
+| 'indigo'
+| 'blue'
+| 'cyan'
+| 'teal'
+| 'green'
+| 'lime'
+| 'yellow'
+| 'orange'
+| 'brown'
+| 'gray';
+
+export const colorKeyToColorMap: Record<ColorKey, string> = {
+    red: '#D32F2F',
+    pink: '#D81B60',
+    purple: '#9C27B0',
+    deepPurple: '#673AB7',
+    indigo: '#3F51B5',
+    blue: '#1976D2',
+    cyan: '#0097A7',
+    teal: '#00695C',
+    green: '#2E7D32',
+    lime: '#9E9D24',
+    yellow: '#FFD600',
+    orange: '#FF9100',
+    brown: '#795548',
+    gray: '#757575',
+};
+
 export interface ColorOptions {
-    key: string;
+    key: ColorKey;
     label: string;
+    color: string;
 }
 
 export const iconColorOptions: ColorOptions[] = [
+    {
+        key: 'red',
+        label: 'Red',
+        color: colorKeyToColorMap.red,
+    },
+    {
+        key: 'pink',
+        label: 'Pink',
+        color: colorKeyToColorMap.pink,
+    },
+    {
+        key: 'purple',
+        label: 'Purple',
+        color: colorKeyToColorMap.purple,
+    },
+    {
+        key: 'deepPurple',
+        label: 'Deep Purple',
+        color: colorKeyToColorMap.deepPurple,
+    },
+    {
+        key: 'indigo',
+        label: 'Indigo',
+        color: colorKeyToColorMap.indigo,
+    },
+    {
+        key: 'blue',
+        label: 'Blue',
+        color: colorKeyToColorMap.blue,
+    },
+    {
+        key: 'cyan',
+        label: 'Cyan',
+        color: colorKeyToColorMap.cyan,
+    },
+    {
+        key: 'teal',
+        label: 'Teal',
+        color: colorKeyToColorMap.teal,
+    },
     {
         key: 'green',
         label: 'Green',
+        color: colorKeyToColorMap.green,
     },
     {
-        key: 'red',
-        label: 'Red',
+        key: 'lime',
+        label: 'Lime',
+        color: colorKeyToColorMap.lime,
     },
     {
         key: 'yellow',
         label: 'Yellow',
+        color: colorKeyToColorMap.yellow,
+    },
+    {
+        key: 'orange',
+        label: 'Orange',
+        color: colorKeyToColorMap.orange,
+    },
+    {
+        key: 'brown',
+        label: 'Brown',
+        color: colorKeyToColorMap.brown,
+    },
+    {
+        key: 'gray',
+        label: 'Gray',
+        color: colorKeyToColorMap.gray,
     },
 ];
 
-export interface PageTemplateType {
-    key: '1-picture' | '2-picture' | '3-picture';
+export type InformationPageTemplateKey = '1-picture' | '2-picture' | '3-picture';
+export interface InformationPageOption {
+    key: InformationPageTemplateKey;
     label: string;
 }
 
-export const pageOptions: PageTemplateType[] = [
+export const infoPageTemplateoptions: InformationPageOption[] = [
     {
         key: '1-picture',
-        label: '1 picture template',
+        label: 'With 1 picture',
     },
     {
         key: '2-picture',
-        label: '2 picture template',
+        label: 'With 2 picture',
     },
     {
         key: '3-picture',
-        label: '3 picture template',
+        label: 'With 3 picture',
     },
 ];
 
-// FIXME: include here
+interface Block {
+    blockNumber: number,
+    blockType: 'text' | 'image',
+}
+
+export const infoPageBlocksMap: Record<InformationPageTemplateKey, Block[]> = {
+    '1-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+    ],
+    '2-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 3,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 4,
+            blockType: 'image',
+        },
+    ],
+    '3-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 3,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 4,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 5,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 6,
+            blockType: 'image',
+        },
+    ],
+};
 
 export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
     groupId: string;
@@ -83,7 +236,7 @@ export type CustomOptions = {
     title: string;
     value: number;
     description: string;
-    icon: string;
+    icon: IconKey;
     iconColor: string;
     subOptions: {
         subOptionsId: number;
@@ -108,20 +261,20 @@ export interface TutorialFormType {
     name: string;
     tileServer: TileServer;
     scenarioPages: {
-        scenarioId: string;
+        scenarioId: number;
         hint: {
             description: string;
-            icon: string;
+            icon: IconKey;
             title: string;
         };
         instruction: {
             description: string;
-            icon: string;
+            icon: IconKey;
             title: string;
         };
         success: {
             description: string;
-            icon: string;
+            icon: IconKey;
             title: string;
         };
     }[];
@@ -316,12 +469,18 @@ export const tutorialFormSchema: TutorialFormSchema = {
             (formValues) => {
                 const customOptionField: CustomOptionFormSchema = {
                     validation: (option) => {
-                        if (option && option.length >= 6) {
-                            return 'Options cannot be more than 6';
+                        if (!option) {
+                            return undefined;
                         }
-                        if (option && option.length <= 2) {
-                            return 'Options cannot be less than 2';
+
+                        if (option.length < 2) {
+                            return 'There should be at least 2 options';
+                        }
+
+                        if (option.length > 6) {
+                            return 'There shouldn\'t be more than 6 options';
                         }
+
                         return undefined;
                     },
                     keySelector: (key) => key.optionId,
@@ -353,12 +512,18 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             subOptions: {
                                 keySelector: (key) => key.subOptionsId,
                                 validation: (sub) => {
-                                    if (sub && sub?.length >= 6) {
-                                        return 'Sub options cannot be more than 6';
+                                    if (!sub || sub.length === 0) {
+                                        return undefined;
                                     }
-                                    if (sub && sub.length <= 2) {
-                                        return 'Sub options cannot be less than 2';
+
+                                    if (sub.length < 2) {
+                                        return 'There should be at least 2 sub options';
                                     }
+
+                                    if (sub.length > 6) {
+                                        return 'There shouldn\'t be more than 6 sub options';
+                                    }
+
                                     return undefined;
                                 },
                                 member: () => ({

From 244d9c15cf9ea8f37251628dc0f0d63994bfdc78 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 20 Jun 2023 17:39:25 +0545
Subject: [PATCH 26/72] fix css

---
 .../app/components/ScenarioGeoJsonPreview/index.tsx    |  1 -
 manager-dashboard/app/views/NewTutorial/index.tsx      |  2 --
 manager-dashboard/app/views/NewTutorial/styles.css     | 10 ++++++----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
index 3f0f6ec49..ef0c0f6ee 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -24,7 +24,6 @@ function ScenarioGeoJsonPreview(props: Props) {
     } = props;
 
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
-    console.info(geoJson);
 
     return (
         <div className={_cs(styles.geoJsonPreview, className)}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 448a289c6..a0f57edac 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -183,8 +183,6 @@ function NewTutorial(props: Props) {
             return undefined;
         }
 
-        console.info(activeScenarioTab, typeof activeScenarioTab, geojson);
-
         return {
             ...geojson,
             features: geojson.features.filter(
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index ef08fdc77..8dce17926 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -13,10 +13,6 @@
         max-width: 70rem;
         gap: var(--spacing-extra-large);
 
-        .instruction-card {
-            display: flex;
-        }
-
         .card {
             display: flex;
             flex-direction: column;
@@ -62,6 +58,12 @@
 
         .scenario-content {
             gap: var(--spacing-small);
+
+            .tab-content {
+                display: flex;
+                flex-direction: column;
+                gap: var(--spacing-large);
+            }
         }
     }
 

From 4d5013a9cf8b27b4b54e26114e1ba4e4abab3e24 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 21 Jun 2023 21:58:19 +0545
Subject: [PATCH 27/72] Add titleserver

---
 docker-compose.yaml                           |  6 ++
 .../app/components/GeoJsonPreview/index.tsx   |  8 ++-
 .../ScenarioGeoJsonPreview/index.tsx          |  3 +
 .../NewTutorial/ScenarioPageInput/index.tsx   | 11 +--
 .../app/views/NewTutorial/index.tsx           | 68 ++++++++++++-------
 .../app/views/NewTutorial/utils.ts            | 23 +++++++
 6 files changed, 88 insertions(+), 31 deletions(-)

diff --git a/docker-compose.yaml b/docker-compose.yaml
index fa6fd06c7..f3f4fa211 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -138,6 +138,12 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
+            REACT_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
+            REACT_IMAGE_ESRI_API_KEY: '${IMAGE_ESRI_API_KEY}'
+            REACT_IMAGE_ESRI_BETA_API_KEY: '${IMAGE_ESRI_BETA_API_KEY}'
+            REACT_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
+            REACT_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
+            REACT_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 59d7a3599..e3014e588 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -12,12 +12,14 @@ import styles from './styles.css';
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
+    url: string | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
+        url,
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -37,10 +39,10 @@ function GeoJsonPreview(props: Props) {
                 );
 
                 const layer = tileLayer(
-                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                     {
                         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-                        subdomains: ['a', 'b', 'c'],
+                        // subdomains: ['a', 'b', 'c'],
                     },
                 );
 
@@ -55,7 +57,7 @@ function GeoJsonPreview(props: Props) {
                 }
             };
         },
-        [],
+        [url],
     );
 
     React.useEffect(
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
index ef0c0f6ee..63e0864a5 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -14,6 +14,7 @@ interface Props {
         description?: string;
         icon?: IconKey;
     }
+    url: string | undefined;
 }
 
 function ScenarioGeoJsonPreview(props: Props) {
@@ -21,6 +22,7 @@ function ScenarioGeoJsonPreview(props: Props) {
         className,
         geoJson,
         previewPopUp,
+        url,
     } = props;
 
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
@@ -45,6 +47,7 @@ function ScenarioGeoJsonPreview(props: Props) {
             <GeoJsonPreview
                 className={styles.mapContainer}
                 geoJson={geoJson}
+                url={url}
             />
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index f025ab709..e145ba5ee 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -62,6 +62,7 @@ interface Props {
     index: number,
     error: Error<PartialScenarioType> | undefined;
     geoJson: GeoJSON.GeoJSON | undefined;
+    url: string | undefined;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -71,6 +72,7 @@ export default function ScenarioPageInput(props: Props) {
         index,
         error: riskyError,
         geoJson,
+        url,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
@@ -102,14 +104,14 @@ export default function ScenarioPageInput(props: Props) {
                 <div className={styles.scenarioForm}>
                     <div className={styles.scenarioFormContent}>
                         <TextInput
-                            name="title"
+                            name={'title' as const}
                             value={value.instruction?.title}
                             label="Title"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.title}
                         />
                         <TextInput
-                            name="description"
+                            name={'description' as const}
                             value={value.instruction?.description}
                             label="Description"
                             onChange={onInstructionFieldChange}
@@ -133,14 +135,14 @@ export default function ScenarioPageInput(props: Props) {
                 <div className={styles.scenarioForm}>
                     <div className={styles.scenarioFormContent}>
                         <TextInput
-                            name="title"
+                            name={'title' as const}
                             value={value.hint?.title}
                             label="Title"
                             onChange={onHintFieldChange}
                             error={hintError?.title}
                         />
                         <TextInput
-                            name="description"
+                            name={'description' as const}
                             value={value.hint?.description}
                             label="Description"
                             onChange={onHintFieldChange}
@@ -194,6 +196,7 @@ export default function ScenarioPageInput(props: Props) {
                 <ScenarioGeoJsonPreview
                     geoJson={geoJson}
                     previewPopUp={previewPopUpData}
+                    url={url}
                 />
                 <SegmentInput
                     name={undefined}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index a0f57edac..025df0969 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -4,6 +4,7 @@ import {
     isDefined,
     unique,
     getElementAround,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -76,6 +77,7 @@ import {
     InformationPageTemplateKey,
     infoPageTemplateoptions,
     infoPageBlocksMap,
+    tileServerUrls,
 } from './utils';
 import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
@@ -273,6 +275,12 @@ function NewTutorial(props: Props) {
                     createdBy: userId,
                 };
 
+                if (uploadData) {
+                    console.log('upload', uploadData);
+                    setTutorialSubmissionStatus('failed');
+                    return;
+                }
+
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -457,6 +465,17 @@ function NewTutorial(props: Props) {
         [setFieldValue],
     );
 
+    const tileServerAUrl = React.useMemo(() => {
+        const tileServerName = value.tileServer?.name;
+        if (isNotDefined(tileServerName)) {
+            return undefined;
+        }
+        if (tileServerName === 'custom') {
+            return value.tileServer?.url;
+        }
+        return tileServerUrls[tileServerName];
+    }, [value.tileServer?.name, value.tileServer?.url]);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -502,6 +521,30 @@ function NewTutorial(props: Props) {
                         </div>
                     </Card>
                 </InputSection>
+                <InputSection
+                    heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
+                >
+                    <TileServerInput
+                        name={'tileServer' as const}
+                        value={value?.tileServer}
+                        error={error?.tileServer}
+                        onChange={setFieldValue}
+                        disabled={submissionPending}
+                    />
+                </InputSection>
+                {tileServerBVisible && (
+                    <InputSection
+                        heading="Tile Server B"
+                    >
+                        <TileServerInput
+                            name={'tileServerB' as const}
+                            value={value?.tileServerB}
+                            error={error?.tileServerB}
+                            onChange={setFieldValue}
+                            disabled={submissionPending}
+                        />
+                    </InputSection>
+                )}
                 {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
                         heading="Define Options"
@@ -676,6 +719,7 @@ function NewTutorial(props: Props) {
                                                 onChange={onScenarioFormChange}
                                                 error={scenarioError?.[task.scenarioId]}
                                                 geoJson={previewGeoJson}
+                                                url={tileServerAUrl}
                                             />
                                         </TabPanel>
                                     ))}
@@ -706,30 +750,6 @@ function NewTutorial(props: Props) {
                         </InputSection>
                     )
                 }
-                <InputSection
-                    heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
-                >
-                    <TileServerInput
-                        name={'tileServer' as const}
-                        value={value?.tileServer}
-                        error={error?.tileServer}
-                        onChange={setFieldValue}
-                        disabled={submissionPending}
-                    />
-                </InputSection>
-                {tileServerBVisible && (
-                    <InputSection
-                        heading="Tile Server B"
-                    >
-                        <TileServerInput
-                            name={'tileServerB' as const}
-                            value={value?.tileServerB}
-                            error={error?.tileServerB}
-                            onChange={setFieldValue}
-                            disabled={submissionPending}
-                        />
-                    </InputSection>
-                )}
                 {hasErrors && (
                     <div className={styles.errorMessage}>
                         Please correct all the errors above before submission!
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 442471886..61d6dffd8 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -11,6 +11,7 @@ import {
 } from '@togglecorp/toggle-form';
 import {
     TileServer,
+    TileServerType,
     tileServerFieldsSchema,
 } from '#components/TileServerInput';
 
@@ -24,6 +25,11 @@ import {
     IconKey,
 } from '#utils/common';
 
+const BING_KEY = process.env.REACT_IMAGE_BING_API_KEY;
+const MAPBOX_KEY = process.env.REACT_IMAGE_MAPBOX_API_KEY;
+const MAXAR_PREMIUM = process.env.REACT_IMAGE_MAXAR_PREMIUM_API_KEY;
+const MAXAR_STANDARD = process.env.REACT_IMAGE_MAXAR_STANDARD_API_KEY;
+
 export type ColorKey = 'red'
 | 'pink'
 | 'purple'
@@ -135,6 +141,23 @@ export const iconColorOptions: ColorOptions[] = [
     },
 ];
 
+export const tileServerUrls: {
+    [key in Exclude<TileServerType, 'custom'>]: string;
+} = {
+    bing:
+        `https://ecn.t0.tiles.virtualearth.net/tiles/a{quad_key}.jpeg?g=1&token=${BING_KEY}`,
+    mapbox:
+        `https://d.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=${MAPBOX_KEY}`,
+    maxar_premium:
+        `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_PREMIUM}`,
+    maxar_standard:
+        `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_STANDARD}`,
+    esri:
+        'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    esri_beta:
+        'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+};
+
 export type InformationPageTemplateKey = '1-picture' | '2-picture' | '3-picture';
 export interface InformationPageOption {
     key: InformationPageTemplateKey;

From 2638bc38d06647a18c11396c188158a943d75a01 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 22 Jun 2023 09:51:29 +0545
Subject: [PATCH 28/72] fix css

---
 manager-dashboard/app/Base/styles.css         |   1 +
 .../app/components/EmptyMessage/index.tsx     |  28 ++++
 .../app/components/EmptyMessage/styles.css    |  19 +++
 .../app/components/GeoJsonFileInput/index.tsx |  10 +-
 .../app/components/GeoJsonPreview/index.tsx   |   4 +-
 .../ScenarioGeoJsonPreview/index.tsx          |   3 +
 .../NewTutorial/ScenarioPageInput/index.tsx   |   5 +-
 .../NewTutorial/ScenarioPageInput/styles.css  |   6 +
 .../app/views/NewTutorial/index.tsx           | 129 ++++++++++--------
 .../app/views/NewTutorial/styles.css          |   1 -
 10 files changed, 144 insertions(+), 62 deletions(-)
 create mode 100644 manager-dashboard/app/components/EmptyMessage/index.tsx
 create mode 100644 manager-dashboard/app/components/EmptyMessage/styles.css

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index f7782f259..0aa35fe8c 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -65,6 +65,7 @@ p {
     --color-text: rgba(0, 0, 0, 0.8);
     --color-text-dark: rgba(0, 0, 0, 1);
     --color-text-light: rgba(0, 0, 0, 0.6);
+    --color-text-gray: #666666;
     --color-accent: #4746f6;
     --color-danger: #e04656;
     --color-success: #53b391;
diff --git a/manager-dashboard/app/components/EmptyMessage/index.tsx b/manager-dashboard/app/components/EmptyMessage/index.tsx
new file mode 100644
index 000000000..2c45d633b
--- /dev/null
+++ b/manager-dashboard/app/components/EmptyMessage/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+interface Props {
+    title: string;
+    description: string;
+}
+
+function EmptyMessage(props: Props) {
+    const {
+        title,
+        description,
+    } = props;
+
+    return (
+        <div className={styles.emptyMessage}>
+            <div className={styles.emptyMessageTitle}>
+                {title}
+            </div>
+            <div className={styles.emptyMessageDescription}>
+                {description}
+            </div>
+        </div>
+    );
+}
+
+export default EmptyMessage;
diff --git a/manager-dashboard/app/components/EmptyMessage/styles.css b/manager-dashboard/app/components/EmptyMessage/styles.css
new file mode 100644
index 000000000..0b0e979e0
--- /dev/null
+++ b/manager-dashboard/app/components/EmptyMessage/styles.css
@@ -0,0 +1,19 @@
+.empty-message {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-small);
+    padding: var(--spacing-extra-large);
+    color: var(--color-text-gray);
+
+    .empty-message-title {
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-bold);
+    }
+
+    .empty-message-description {
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-medium);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index 1c8d8a50d..c5408a984 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -53,6 +53,7 @@ interface Props<N> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accep
     maxFileSize?: number;
     value: GeoJSON.GeoJSON | undefined | null;
     onChange: (newValue: GeoJSON.GeoJSON | undefined, name: N) => void;
+    preview?: boolean;
 }
 
 function GeoJsonFileInput<N>(props: Props<N>) {
@@ -63,6 +64,7 @@ function GeoJsonFileInput<N>(props: Props<N>) {
         maxFileSize = DEFAULT_MAX_FILE_SIZE,
         onChange,
         name,
+        preview = false,
         ...otherProps
     } = props;
 
@@ -144,9 +146,11 @@ function GeoJsonFileInput<N>(props: Props<N>) {
             description={(
                 <>
                     {description}
-                    <GeoJsonPreview
-                        geoJson={value ?? undefined}
-                    />
+                    {preview && (
+                        <GeoJsonPreview
+                            geoJson={value ?? undefined}
+                        />
+                    )}
                 </>
             )}
             onChange={handleChange}
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index e3014e588..393d550e5 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -12,7 +12,8 @@ import styles from './styles.css';
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
-    url: string | undefined;
+    url?: string | undefined;
+    urlB?: string | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
@@ -20,6 +21,7 @@ function GeoJsonPreview(props: Props) {
         className,
         geoJson,
         url,
+        urlB,
     } = props;
 
     const mapRef = React.useRef<Map>();
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
index 63e0864a5..b46278237 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
@@ -15,6 +15,7 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
+    urlB: string | undefined;
 }
 
 function ScenarioGeoJsonPreview(props: Props) {
@@ -23,6 +24,7 @@ function ScenarioGeoJsonPreview(props: Props) {
         geoJson,
         previewPopUp,
         url,
+        urlB,
     } = props;
 
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
@@ -48,6 +50,7 @@ function ScenarioGeoJsonPreview(props: Props) {
                 className={styles.mapContainer}
                 geoJson={geoJson}
                 url={url}
+                urlB={urlB}
             />
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index e145ba5ee..1f3bab426 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -63,6 +63,7 @@ interface Props {
     error: Error<PartialScenarioType> | undefined;
     geoJson: GeoJSON.GeoJSON | undefined;
     url: string | undefined;
+    urlB: string | undefined;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -73,6 +74,7 @@ export default function ScenarioPageInput(props: Props) {
         error: riskyError,
         geoJson,
         url,
+        urlB,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
@@ -192,11 +194,12 @@ export default function ScenarioPageInput(props: Props) {
                     />
                 </div>
             </div>
-            <div>
+            <div className={styles.scenarioPreview}>
                 <ScenarioGeoJsonPreview
                     geoJson={geoJson}
                     previewPopUp={previewPopUpData}
                     url={url}
+                    urlB={urlB}
                 />
                 <SegmentInput
                     name={undefined}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
index 154503c03..2f90f8f82 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
@@ -20,4 +20,10 @@
             }
         }
     }
+
+    .scenario-preview {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 025df0969..2e7cff5b0 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -55,6 +55,9 @@ import TileServerInput, {
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
+import NonFieldError from '#components/NonFieldError';
+import SelectInput from '#components/SelectInput';
+import EmptyMessage from '#components/EmptyMessage';
 import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
 import {
     valueSelector,
@@ -83,8 +86,6 @@ import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
-import NonFieldError from '#components/NonFieldError';
-import SelectInput from '#components/SelectInput';
 
 const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
@@ -275,12 +276,6 @@ function NewTutorial(props: Props) {
                     createdBy: userId,
                 };
 
-                if (uploadData) {
-                    console.log('upload', uploadData);
-                    setTutorialSubmissionStatus('failed');
-                    return;
-                }
-
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -476,6 +471,17 @@ function NewTutorial(props: Props) {
         return tileServerUrls[tileServerName];
     }, [value.tileServer?.name, value.tileServer?.url]);
 
+    const tileServerBUrl = React.useMemo(() => {
+        const tileServerName = value.tileServerB?.name;
+        if (isNotDefined(tileServerName)) {
+            return undefined;
+        }
+        if (tileServerName === 'custom') {
+            return value.tileServerB?.url;
+        }
+        return tileServerUrls[tileServerName];
+    }, [value.tileServerB?.name, value.tileServerB?.url]);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <div className={styles.container}>
@@ -521,30 +527,6 @@ function NewTutorial(props: Props) {
                         </div>
                     </Card>
                 </InputSection>
-                <InputSection
-                    heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
-                >
-                    <TileServerInput
-                        name={'tileServer' as const}
-                        value={value?.tileServer}
-                        error={error?.tileServer}
-                        onChange={setFieldValue}
-                        disabled={submissionPending}
-                    />
-                </InputSection>
-                {tileServerBVisible && (
-                    <InputSection
-                        heading="Tile Server B"
-                    >
-                        <TileServerInput
-                            name={'tileServerB' as const}
-                            value={value?.tileServerB}
-                            error={error?.tileServerB}
-                            onChange={setFieldValue}
-                            disabled={submissionPending}
-                        />
-                    </InputSection>
-                )}
                 {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
                         heading="Define Options"
@@ -667,12 +649,63 @@ function NewTutorial(props: Props) {
                             </Tabs>
                         )}
                         {!(value.informationPages?.length) && (
-                            <div>
-                                No information pages at the moment
-                            </div>
+                            <EmptyMessage
+                                title="Start adding Information pages"
+                                description="Add pages selecting templates from “Add page” dropdown"
+                            />
                         )}
                     </Card>
                 </InputSection>
+                <InputSection
+                    heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
+                >
+                    <Card contentClassName={styles.infoPageCardContent}>
+                        <TileServerInput
+                            name={'tileServer' as const}
+                            value={value?.tileServer}
+                            error={error?.tileServer}
+                            onChange={setFieldValue}
+                            disabled={submissionPending}
+                        />
+                    </Card>
+                </InputSection>
+                {tileServerBVisible && (
+                    <InputSection
+                        heading="Tile Server B"
+                    >
+                        <Card contentClassName={styles.infoPageCardContent}>
+                            <TileServerInput
+                                name={'tileServerB' as const}
+                                value={value?.tileServerB}
+                                error={error?.tileServerB}
+                                onChange={setFieldValue}
+                                disabled={submissionPending}
+                            />
+                        </Card>
+                    </InputSection>
+                )}
+                {
+                    (value?.projectType === PROJECT_TYPE_BUILD_AREA
+                        || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                        || value?.projectType === PROJECT_TYPE_COMPLETENESS)
+                    && (
+                        <InputSection
+                            heading="Zoom Level"
+                        >
+                            <Card>
+                                <NumberInput
+                                    name={'zoomLevel' as const}
+                                    value={value?.zoomLevel}
+                                    onChange={setFieldValue}
+                                    label="Zoom Level"
+                                    hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
+                                    error={error?.zoomLevel}
+                                    disabled={submissionPending}
+                                />
+                            </Card>
+                        </InputSection>
+                    )
+                }
                 <InputSection
                     heading="Scenarios"
                     contentClassName={styles.scenarioContent}
@@ -720,36 +753,20 @@ function NewTutorial(props: Props) {
                                                 error={scenarioError?.[task.scenarioId]}
                                                 geoJson={previewGeoJson}
                                                 url={tileServerAUrl}
+                                                urlB={tileServerBUrl}
                                             />
                                         </TabPanel>
                                     ))}
                                 </div>
                             ) : (
-                                <div>No Scenarios at the moment</div>
+                                <EmptyMessage
+                                    title="Upload geojson file first"
+                                    description="This section will automatically show scenarios after uploading geojson file"
+                                />
                             )}
                         </Tabs>
                     </Card>
                 </InputSection>
-                {
-                    (value?.projectType === PROJECT_TYPE_BUILD_AREA
-                        || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                        || value?.projectType === PROJECT_TYPE_COMPLETENESS)
-                    && (
-                        <InputSection
-                            heading="Zoom Level"
-                        >
-                            <NumberInput
-                                name={'zoomLevel' as const}
-                                value={value?.zoomLevel}
-                                onChange={setFieldValue}
-                                label="Zoom Level"
-                                hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
-                                error={error?.zoomLevel}
-                                disabled={submissionPending}
-                            />
-                        </InputSection>
-                    )
-                }
                 {hasErrors && (
                     <div className={styles.errorMessage}>
                         Please correct all the errors above before submission!
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 8dce17926..3907a38a4 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -131,7 +131,6 @@
 }
         
 .instruction-popup {
-    padding: var(--spacing-small);
     gap: var(--spacing-medium);
 }
 

From f0af826637971557cf91bfe496ff9d494ab83245 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 22 Jun 2023 16:50:55 +0545
Subject: [PATCH 29/72] Add footprint preview page

---
 .../app/components/GeoJsonPreview/index.tsx   |  4 +-
 .../app/components/TileServerInput/index.tsx  |  4 +-
 .../ChangeDetectionGeoJsonPreview/index.tsx   | 61 +++++++++++++++++++
 .../ChangeDetectionGeoJsonPreview/styles.css  | 42 +++++++++++++
 .../FootprintGeoJsonPreview/index.tsx         | 56 +++++++++++++++++
 .../FootprintGeoJsonPreview/styles.css        | 51 ++++++++++++++++
 .../ScenarioGeoJsonPreview/index.tsx          |  7 +--
 .../ScenarioGeoJsonPreview/styles.css         |  0
 .../NewTutorial/ScenarioPageInput/index.tsx   | 38 +++++++++---
 .../app/views/NewTutorial/index.tsx           | 11 ++--
 10 files changed, 253 insertions(+), 21 deletions(-)
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
 create mode 100644 manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
 rename manager-dashboard/app/{components => views/NewTutorial/ScenarioPageInput}/ScenarioGeoJsonPreview/index.tsx (95%)
 rename manager-dashboard/app/{components => views/NewTutorial/ScenarioPageInput}/ScenarioGeoJsonPreview/styles.css (100%)

diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 393d550e5..c42c4eec5 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -13,7 +13,6 @@ interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
     url?: string | undefined;
-    urlB?: string | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
@@ -21,7 +20,6 @@ function GeoJsonPreview(props: Props) {
         className,
         geoJson,
         url,
-        urlB,
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -49,12 +47,14 @@ function GeoJsonPreview(props: Props) {
                 );
 
                 layer.addTo(mapRef.current);
+                mapRef.current.zoomControl.remove();
                 mapRef.current.invalidateSize();
             }
 
             return () => {
                 if (mapRef.current) {
                     mapRef.current.remove();
+                    mapRef.current.zoomControl.remove();
                     mapRef.current = undefined;
                 }
             };
diff --git a/manager-dashboard/app/components/TileServerInput/index.tsx b/manager-dashboard/app/components/TileServerInput/index.tsx
index c74b78f9e..89ab50277 100644
--- a/manager-dashboard/app/components/TileServerInput/index.tsx
+++ b/manager-dashboard/app/components/TileServerInput/index.tsx
@@ -29,7 +29,7 @@ export const TILE_SERVER_BING = 'bing';
 const TILE_SERVER_MAPBOX = 'mapbox';
 const TILE_SERVER_MAXAR_STANDARD = 'maxar_standard';
 const TILE_SERVER_MAXAR_PREMIUM = 'maxar_premium';
-const TILE_SERVER_ESRI = 'esri';
+export const TILE_SERVER_ESRI = 'esri';
 const TILE_SERVER_ESRI_BETA = 'esri_beta';
 const TILE_SERVER_CUSTOM = 'custom';
 
@@ -116,7 +116,7 @@ export function tileServerFieldsSchema(value: TileServerInputType | undefined):
 
 type TileServerInputValue = TileServerInputType | undefined;
 const defaultValue: NonNullable<TileServerInputValue> = {
-    name: TILE_SERVER_BING,
+    name: TILE_SERVER_ESRI,
 };
 
 interface Props<Name extends string | number> {
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..96e5547a2
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import GeoJsonPreview from '#components/GeoJsonPreview';
+import { iconMap, IconKey } from '#utils/common';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    geoJson: GeoJSON.GeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: IconKey;
+    }
+    url: string | undefined;
+    urlB: string | undefined;
+}
+
+export default function ChangeDetectionGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+        previewPopUp,
+        url,
+        urlB,
+    } = props;
+
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+
+    return (
+        <div className={_cs(styles.previewScreen, className)}>
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                geoJson={geoJson}
+                url={url}
+            />
+            <div className={styles.mapContent}>
+                <div className={styles.popUpContent}>
+                    <div className={styles.popUpTitle}>
+                        {previewPopUp?.title ?? 'Title'}
+                    </div>
+                    <div>
+                        {previewPopUp?.description ?? 'Description'}
+                    </div>
+                </div>
+                { Comp && (
+                    <div className={styles.popUpIcon}>
+                        <Comp />
+                    </div>
+                )}
+            </div>
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                geoJson={geoJson}
+                url={urlB}
+            />
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
new file mode 100644
index 000000000..f07a45450
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
@@ -0,0 +1,42 @@
+.preview-screen {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+    flex-shrink: 0;
+    background-color: var(--color-primary);
+    width: 100%;
+
+    .map-preview {
+        padding: var(--spacing-small);
+        width: 15rem;
+        height: 15rem;
+    }
+
+    .map-content {
+        display: flex;
+        opacity: 0.95;
+        border-radius: 10px;
+        background-color: var(--color-foreground);
+        padding: var(--spacing-medium);
+        gap: var(--spacing-large);
+        width: 90%;
+
+        .pop-up-content {
+            display: flex;
+            flex-basis: 80%;
+            flex-direction: column;
+
+            .pop-up-title {
+                font-weight: var(--font-weight-bold);
+            }
+
+        }
+
+        .pop-up-icon {
+            display: flex;
+            align-items: center;
+            font-size: var(--font-size-super-large);
+        }
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..e309bdafb
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import GeoJsonPreview from '#components/GeoJsonPreview';
+import { IconKey, iconMap } from '#utils/common';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    geoJson: GeoJSON.GeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: IconKey;
+    }
+    url: string | undefined;
+}
+export default function FootprintGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+        url,
+        previewPopUp,
+    } = props;
+
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+
+    return (
+        <div className={_cs(className, styles.previewScreen)}>
+            <div className={styles.mapContent}>
+                <div className={styles.popUpContent}>
+                    <div className={styles.popUpTitle}>
+                        {previewPopUp?.title ?? 'Title'}
+                    </div>
+                    <div>
+                        {previewPopUp?.description ?? 'Description'}
+                    </div>
+                </div>
+                { Comp && (
+                    <div className={styles.popUpIcon}>
+                        <Comp />
+                    </div>
+                )}
+            </div>
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                url={url}
+                geoJson={geoJson}
+            />
+            <div className={styles.footerOption}>
+                Footer Option
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
new file mode 100644
index 000000000..2c8c5e3dd
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
@@ -0,0 +1,51 @@
+.preview-screen {
+    display: flex;
+    position: relative;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+    flex-shrink: 0;
+    z-index: 0;
+    background-color: var(--color-primary);
+    width: var(--width-mobile-preview);
+    height: var(--height-mobile-preview);
+
+    .map-preview {
+        z-index: -1;
+        padding: var(--spacing-medium);
+        height: 80%;
+    }
+
+    .map-content {
+        display: flex;
+        position: absolute;
+        top: 3rem;
+        opacity: 0.95;
+        border-radius: 10px;
+        background-color: var(--color-foreground);
+        padding: var(--spacing-medium);
+        gap: var(--spacing-large);
+        width: 90%;
+
+        .pop-up-content {
+            display: flex;
+            flex-basis: 80%;
+            flex-direction: column;
+
+            .pop-up-title {
+                font-weight: var(--font-weight-bold);
+            }
+
+        }
+
+        .pop-up-icon {
+            display: flex;
+            align-items: center;
+            font-size: var(--font-size-super-large);
+        }
+    }
+
+    .footer-option {
+        display: flex;
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
similarity index 95%
rename from manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
index b46278237..857f4254b 100644
--- a/manager-dashboard/app/components/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import GeoJsonPreview from '#components/GeoJsonPreview';
-import styles from './styles.css';
-
 import { iconMap, IconKey } from '#utils/common';
 
+import styles from './styles.css';
+
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
@@ -15,7 +15,6 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
-    urlB: string | undefined;
 }
 
 function ScenarioGeoJsonPreview(props: Props) {
@@ -24,7 +23,6 @@ function ScenarioGeoJsonPreview(props: Props) {
         geoJson,
         previewPopUp,
         url,
-        urlB,
     } = props;
 
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
@@ -50,7 +48,6 @@ function ScenarioGeoJsonPreview(props: Props) {
                 className={styles.mapContainer}
                 geoJson={geoJson}
                 url={url}
-                urlB={urlB}
             />
         </div>
     );
diff --git a/manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
similarity index 100%
rename from manager-dashboard/app/components/ScenarioGeoJsonPreview/styles.css
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 1f3bab426..c34fe46a7 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -12,12 +12,19 @@ import {
     valueSelector,
     labelSelector,
     IconKey,
+    ProjectType,
+    PROJECT_TYPE_BUILD_AREA,
+    PROJECT_TYPE_FOOTPRINT,
+    PROJECT_TYPE_CHANGE_DETECTION,
+    PROJECT_TYPE_COMPLETENESS,
 } from '#utils/common';
 import TextInput from '#components/TextInput';
 import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
-import ScenarioGeoJsonPreview from '#components/ScenarioGeoJsonPreview';
+import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
 import SegmentInput from '#components/SegmentInput';
+import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
+import ChangeDetectionGeoJsonPreview from './ChangeDetectionGeoJsonPreview';
 
 import styles from './styles.css';
 
@@ -62,6 +69,7 @@ interface Props {
     index: number,
     error: Error<PartialScenarioType> | undefined;
     geoJson: GeoJSON.GeoJSON | undefined;
+    projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
 }
@@ -74,6 +82,7 @@ export default function ScenarioPageInput(props: Props) {
         error: riskyError,
         geoJson,
         url,
+        projectType,
         urlB,
     } = props;
 
@@ -195,12 +204,27 @@ export default function ScenarioPageInput(props: Props) {
                 </div>
             </div>
             <div className={styles.scenarioPreview}>
-                <ScenarioGeoJsonPreview
-                    geoJson={geoJson}
-                    previewPopUp={previewPopUpData}
-                    url={url}
-                    urlB={urlB}
-                />
+                {projectType === PROJECT_TYPE_CHANGE_DETECTION && (
+                    <ChangeDetectionGeoJsonPreview
+                        geoJson={geoJson}
+                        previewPopUp={previewPopUpData}
+                        url={url}
+                        urlB={urlB}
+                    />
+                )}
+                {projectType === (PROJECT_TYPE_BUILD_AREA || PROJECT_TYPE_COMPLETENESS) && (
+                    <ScenarioGeoJsonPreview
+                        geoJson={geoJson}
+                        previewPopUp={previewPopUpData}
+                        url={url}
+                    />
+                )}
+                {projectType === PROJECT_TYPE_FOOTPRINT && (
+                    <FootprintGeoJsonPreview
+                        geoJson={geoJson}
+                        url={url}
+                    />
+                )}
                 <SegmentInput
                     name={undefined}
                     value={activeSegmentInput}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 2e7cff5b0..6e27973dc 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -50,7 +50,7 @@ import {
     TabPanel,
 } from '#components/Tabs';
 import TileServerInput, {
-    TILE_SERVER_BING,
+    TILE_SERVER_ESRI,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
@@ -117,12 +117,12 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
     zoomLevel: 18,
     tileServer: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
     tileServerB: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
     customOptions: defaultCustomOptions,
 };
@@ -749,6 +749,7 @@ function NewTutorial(props: Props) {
                                                 key={task.scenarioId}
                                                 index={index}
                                                 value={task}
+                                                projectType={value.projectType}
                                                 onChange={onScenarioFormChange}
                                                 error={scenarioError?.[task.scenarioId]}
                                                 geoJson={previewGeoJson}

From 553aded71ddb8283aa10ded2d3e9e1cb28d796a7 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Thu, 22 Jun 2023 17:53:22 +0545
Subject: [PATCH 30/72] Support quad_key on Leaflet

- Fix env names
- Add env names on .env.example
- Remove unused env names on docker-compose
---
 docker-compose.yaml                           | 10 ++--
 manager-dashboard/.env.example                |  7 +++
 .../app/components/GeoJsonPreview/index.tsx   | 50 +++++++++++++++++--
 .../app/views/NewTutorial/utils.ts            |  8 +--
 4 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/docker-compose.yaml b/docker-compose.yaml
index f3f4fa211..77e574093 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -138,12 +138,10 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
-            REACT_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
-            REACT_IMAGE_ESRI_API_KEY: '${IMAGE_ESRI_API_KEY}'
-            REACT_IMAGE_ESRI_BETA_API_KEY: '${IMAGE_ESRI_BETA_API_KEY}'
-            REACT_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
-            REACT_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
-            REACT_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
+            REACT_APP_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
+            REACT_APP_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
+            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
+            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'
diff --git a/manager-dashboard/.env.example b/manager-dashboard/.env.example
index 453a97527..1bb43b081 100644
--- a/manager-dashboard/.env.example
+++ b/manager-dashboard/.env.example
@@ -10,3 +10,10 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_COMMUNITY_DASHBOARD_URL=
+
+REACT_APP_IMAGE_BING_API_KEY=
+REACT_APP_IMAGE_MAPBOX_API_KEY=
+REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
+REACT_APP_IMAGE_SINERGISE_API_KEY=
+# -- NOTE: not used and seems to be discontinued
+REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index c42c4eec5..6c2dfdd7f 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -2,13 +2,51 @@ import React from 'react';
 import {
     map as createMap,
     Map,
-    tileLayer,
     geoJSON,
+
+    TileLayer,
+    Coords,
+    Util,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.css';
 
+const toQuadKey = (x: number, y: number, z: number) => {
+    let index = '';
+    for (let i = z; i > 0; i -= 1) {
+        let b = 0;
+        // eslint-disable-next-line no-bitwise
+        const mask = 1 << (i - 1);
+        // eslint-disable-next-line no-bitwise
+        if ((x & mask) !== 0) {
+            b += 1;
+        }
+        // eslint-disable-next-line no-bitwise
+        if ((y & mask) !== 0) {
+            b += 2;
+        }
+        index += b.toString();
+    }
+    return index;
+};
+
+const BingTileLayer = TileLayer.extend({
+    getTileUrl(coords: Coords) {
+        const quadkey = toQuadKey(coords.x, coords.y, coords.z);
+        const subdomains = this.options.subdomains;
+
+        // eslint-disable-next-line no-underscore-dangle
+        const url = this._url
+            .replace('{subdomain}', subdomains[(coords.x + coords.y) % subdomains.length])
+            .replace('{quad_key}', quadkey);
+
+        console.log(url);
+        return url;
+    },
+    toQuadKey,
+});
+
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
@@ -38,8 +76,14 @@ function GeoJsonPreview(props: Props) {
                     1,
                 );
 
-                const layer = tileLayer(
-                    url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                const finalUrl = url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+                const quadKeyUrl = finalUrl.indexOf('{quad_key}') !== -1;
+                const Layer = quadKeyUrl
+                    ? BingTileLayer
+                    : TileLayer;
+
+                const layer = new Layer(
+                    finalUrl,
                     {
                         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                         // subdomains: ['a', 'b', 'c'],
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 61d6dffd8..ff1564209 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -25,10 +25,10 @@ import {
     IconKey,
 } from '#utils/common';
 
-const BING_KEY = process.env.REACT_IMAGE_BING_API_KEY;
-const MAPBOX_KEY = process.env.REACT_IMAGE_MAPBOX_API_KEY;
-const MAXAR_PREMIUM = process.env.REACT_IMAGE_MAXAR_PREMIUM_API_KEY;
-const MAXAR_STANDARD = process.env.REACT_IMAGE_MAXAR_STANDARD_API_KEY;
+const BING_KEY = process.env.REACT_APP_IMAGE_BING_API_KEY;
+const MAPBOX_KEY = process.env.REACT_APP_IMAGE_MAPBOX_API_KEY;
+const MAXAR_PREMIUM = process.env.REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY;
+const MAXAR_STANDARD = process.env.REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY;
 
 export type ColorKey = 'red'
 | 'pink'

From d0cf9f1f007d619cf85318c6794f293edba24e36 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 22 Jun 2023 18:19:52 +0545
Subject: [PATCH 31/72] Add png icons

---
 .../app/resources/icons/1_Tap_Black.png       | Bin 0 -> 2124 bytes
 .../app/resources/icons/2_Tap_Black.png       | Bin 0 -> 2308 bytes
 .../app/resources/icons/3_Tap_Black.png       | Bin 0 -> 2322 bytes
 .../app/resources/icons/tap_icon.png          | Bin 0 -> 1436 bytes
 .../app/resources/icons/tap_icon_angular.png  | Bin 0 -> 1813 bytes
 .../app/utils/{common.ts => common.tsx}       |  55 +++++++++++++++++-
 6 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 manager-dashboard/app/resources/icons/1_Tap_Black.png
 create mode 100644 manager-dashboard/app/resources/icons/2_Tap_Black.png
 create mode 100644 manager-dashboard/app/resources/icons/3_Tap_Black.png
 create mode 100644 manager-dashboard/app/resources/icons/tap_icon.png
 create mode 100644 manager-dashboard/app/resources/icons/tap_icon_angular.png
 rename manager-dashboard/app/utils/{common.ts => common.tsx} (80%)

diff --git a/manager-dashboard/app/resources/icons/1_Tap_Black.png b/manager-dashboard/app/resources/icons/1_Tap_Black.png
new file mode 100644
index 0000000000000000000000000000000000000000..471cc49c61bbe4e7fb8fe51d37abf7d56b25148a
GIT binary patch
literal 2124
zcmV-S2($NzP)<h;3K|Lk000e1NJLTq00372003zS1^@s6Pq@Fa00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2jNLXK~#7F?VLS~
z8$}ey|LeP>2t=5IBB98nNdSRz2Sh?N*%NJwOL+*CJu12!6tp*2QlMNqIy+TFfpXAM
zozo#f5+fl*cbf(znjBI-MDFZio_Ckn<K6Y_$Jn#J{YfLQy|dogzu&%jGxOFCjxq1w
zdYwHJ3u_AvT<D|WIzST;&0w!{07v+8!|(URoxaoC?XLgfXZd~y$B=h!z3DZa##OoL
zW;sr()$RBDH}0+f-qx#rjCk+XTdw0cEdjw$00)lW6TR(8B2P<PSC%bVd|9@`*Qv4G
zV$H=9C$}KPCd$MSJ4a8Jw!0hMgV^0L3;D0>vUo$E`3MAVV+t%wzq-^|ye$NlVF0q?
zLvgqo=Z{T_OO{HO(oERz%W_4QE(|dc)>+ys>INo}Bya=e<I1ux3rDiB1e4{yEUj?6
zRLB)fLs){&u_*73<<|1Z^_D3vlVvX~EN1^M;(e`$K;$iy2>IAN!k%0@iBl&|4+?E-
zBi+v8iNld=D8nt#uXPQ{E`V<P&t>U^?|E21uC9*~{Bam+wUC1^R=&jgxlab$cmMtw
zpY45$ObD$0vi@6#Hj7%Wi@@qQ#>Ju@ltf*@b72wIrO$50d>=#LCJMQV1!p1GT|k!V
zzV;!CK%ri=omX6jbQf?#mb0?#BpmM}a0e?$b`|8eGmAu4o5vlz`|3q}v)aO`7f+)I
zbZ%+`Z7(7lkqh7n`#T73>kjlFmq9;*hd@ZC?C0S=ZC4@P!8K^Ie(qyjW@|Y0Qbzwe
zxeYY>YiG4w@~b@N^T-9PLSNWn+TpQjuHp<PK%p1CK$COL^Emg)`BH@qaX<L(jWcCL
z3zJ-cE<OS)J&T+pxJ5Y$lcoNnqeuAb@t-55ES?=Uu4Hu!Dl`b#)vQY{<v^pJk3itt
zvSboVEI5}Op<n;&dtVJo1o_(^F8_!!kYU(`qL!;87D4`WKP<Yp?LWwf6qdmn8m@^E
z+AuCgM{5iQM`eb-GZ(@UO;h4Bq=#xA42;T<KHQ!z0;P*f7e|7TaIQvOj=-`#%ppZP
zG!?ScIG;+snW73N%T;9`eHM*s+9(E{#}4ataA3l6RiaRhBYjlHP!K`uUbZ0Mo9@tP
zU_b+p;fsz&Wj9bZqJIb0ARd?&x0AB3^ht6ViW!@D&q2quxKrgwE`P%kjzn*FuEY(O
zSvr_KU24l*iA(fF|0ZUPY{Q^GnLBYQmq5;``j`=P?kJz3>^Rp79N}!pICC%KVS`z*
zi{HMDA_yV2qwTq~T!PlHgo#jZ0-}$RRHwNVm*_oR<iPYoGja#Le;@JT&$5c!24)gV
z(yjI&%K?;PbR>?hOvC>UgcZHj?uI`yLd+_zk6`$^f$8LXb?|)XoEZv-=%S4Z?1=6_
z*qC&tyl$b5U}$U7ig|br9|af){B&u>gbyYkd-UY-YEs^Ak!Zn(S$vd4n1#40m%O`<
z<7_!_7z#jl0!1WuKMImRl9<a-EQzouZ-*H<v;?0u^RYvN6y4<KV<m1xBr+|<H{^<O
zLoRGeb7azWFejWg6@!^PN6yLiJH0-BeL>D!{FE_mzijq{cKu({@RYh7bH?1pxi(OX
zYY<z-brGcdGgKJc#EqVzph=g_@YO@jfFd0lEyq7pJ{#W0QogH+id(r3Ma0!9WYxnf
z%u$|%z#Qj4M3gCRk`+fHuEm^BM`RcAxxm&_hPcDoIvmL&Pb#X&kw4e{5v-$#xFllS
z6OIhQM3F##k*_2DPGG12Ma1P9zgx9Hj{H9Wl@=@)d79!r#Q0N040=|cX2qMZlxd2~
zQtB=vSv)ta!;vh0DO7p*>!<8Hh<Q&-MZ?d;aRjRz#_}BErW~oao|J}3v-&%*7q$J=
zULI4=M{oySf&qW4it9md0(lF`&+^)U6*;=9TiAjgO_ZN<KX(j^OJXtT<00#R#7qx+
zo{c~ts@h|EG4<L?ojqlLmT18yjJCUlbkQOh#$&{_X*JRy#@fv=ZnZ3>KF4_M*fiZp
z!x(G#eT)wS(;y*L>*X-qNW&OuH+5)gz|AHc69weMB>nTpv4>&Y5?zhs_LO62=Bc*a
z7&ylL=p<ZBo)D=DM#W9@qiLwttCp%@{EpkixD`(FqYSmUxleLk<Cq=P;%ea{Tg*$u
zxs+Pm1oogeS{sI=7FUb7S$tRHxP8>(YN7hk`x?i%sKwPH&X4LW+^H_5Doj;ef+Krq
z=Asr?i)PG8b*#6IT3jvGl#{kJjv00-RbeLLHj#bKf#9gc&2?g(sl~{pRE3#|+eY@7
zm+(*x7z~AwIvF=z<-P8MacxusS9$+EN+OTA7cgI3Ro=HTMe=rPRe-^QYs=HARRMLF
z-@*)NBVVUxJF3yRC=uNh(!8CT&A1qytM)OY|0HuUKF?5ffyo7A9oicqZkDX-0;|`<
zFhg972isK@*hBW!7UOuB4}nR{;cM_<2_C8~FvEEJtqLtYj5lx})p%IWg9WkeBs^48
zU^T1Lg{63?mcZ)Dw)I1Kj_L?ZF2H)1pu$lNfvHWyZLCa`!(q3;E=Jp?lZ#;$9QF#V
zx&#jugu_08)j8>z4|j{eF@7<-m>nKwFx)lu)H=ubLn$v~b};3AY3pQZnEXos4tqJk
z6sZ4h&>*$A2C2n0NG+~GYH<xxi))ZtT!Yl&8stA8k2<`cx6udy0000<MNUMnLSTZe
CF8LDx

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/resources/icons/2_Tap_Black.png b/manager-dashboard/app/resources/icons/2_Tap_Black.png
new file mode 100644
index 0000000000000000000000000000000000000000..689c6fcb09eb233297db8792781dde3bf9bcc3e8
GIT binary patch
literal 2308
zcmV+f3H$bmP)<h;3K|Lk000e1NJLTq00372003zS1^@s6Pq@Fa00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2$@MlK~#7F?VQhV
z+(Z<|zxJk;iiElcF6Gcpg@k%RO<V4D?jU7B95~gz&|`!61LFJvsO^<Ywih@clpx@o
zt;B&tn*?z|NGL7`dO>O`P(e-B!@RZKddI)UKW5k7_#=%HugCWIyU%aln;EZx6U@I`
z%dF>_t3A`W3~-CX=!=j0!R|u?aJeX+#~+MMZ~M$(-$elooIsAhxoX2SZis)aBF71_
z_PNLJEq%B<RIGn;IQn|oGM9Rr!WtQ>;lkq^c_PnBTuYR7P@{m2;P1@fTg!b9=DK+7
z*H9w{jJqa|H;lplVe)>xkpH?PiXHjPg)i_BGl2Z+X)JAV@MY-1J;Hb;$sg+!mn@Ym
zrJu6j6=fjGJ~ZJA+uNzZ4djt1unuu8Q8uA|LqlkA6}~Iz?ae^g3Dnt{Lg1*2Fi{^&
zl%1fkg#Ft{7SI-D55A?>hVNsG32VG|4#wHH{c`H{B8Ng;YuUrn)IHQ;x%AlIM!E~2
z$Np1MM!~id)K9AGq6U8)gj$=b^^HrPz<ldtKoXSy^$7fr??w4e^;F=;#>%OW9*!pG
zMKvs>y8wDTNT|CB`>4Jn$_*qlL<Ltd-nw?6YPG$UF9BhxS$MyG0WOLn?$Y4VMf#_#
zTVTj`0ry0q3*1dP-i7ZDt{~l29H4}&AgfgsmMk_;Si%(b46<xB*yPDUadGKUrW>Xk
zw-WY`L|K9FA`TVKM=pcDgquhf*$J*?LlMI?ZmZTc&%gg_<LGaAKi<N4``t;AEtLd@
zsvq{Vzrx~@XimcCBqaG&5_W{*41;6uC+uVJUC#yNK%p0PEKtCB;~F43un_)aH1V+^
z6IT$~CSeT)D-W>v4_7YK5iR7o099Q07J3mSeQgiss&eIsump8nGE?GCj(HQR9Q|hu
zmQW2!0=5<Fl1ou>6)t>%w?t7F3-lNo*Oe<D{WBc}2)7VJb^}RuQlOExs^Y4MMTFTJ
z)mP2Ro}nNj^dYyP#KaAVl7)HBn*QMVpD2J;XA+Tk0r(w~1K)BP{Dh%M2B%D&+1MnK
zh`NsFPr#r3rhL3;OJA3`4B4TY4Gmct(#J8Bq0G#<y6#5@5xiXo1*u)!FjOPqEQPub
z3Wi!bp=iJqNySu%Cg8t(9`D=~sOocN$WoI+A@a2pRWQV}GWsk`RfnhsU8j`wQj!ph
zWhwUE-N^OLX>F-n+@u>LQ60SM{3v9jNPtQ87%F0b9|rSa#g2RDGk<I$0$J+B6$oEj
zt}SqNcW6o3T9}pHL(Pmie}IA{3M<?IWou=HB|MJDy2Tx3?5lr}+%O8A(>VX$w6H=<
z64m?tD^!JZKC0U-%#|^`Z4<pas`brFx2CqeU_4=x8Ydy*T&`%%G!?&4;?gwB@z%8w
z6sFAOu?51snjINZ=LUtbU7D4kw&->XbAaDhs+MM*b+iC{(w{7xxJ!fGp@<sXyn04~
zL6~B2m)bCC3l<PDe|A#{ypvgn!mQ$1mkJx<KMUv<L>@4BIO4qiP%jU<W@xp<LW)Z)
z8Dq!LxF#Zwa0lX=(NBtsJH$*I{1ST99v3-))(^bEc%b5ctHa$Rcq{U<rlR7y@Fx}1
z=Dg}=1V5W|Pyz~vUeHZz6que45;kc$Q(3n#grC~#v|=Z?hKmaL@uqi0hYzN6nknnV
zh$_*73%$6giQsWvJKnmwFD#8#J2F&)yIe#hr#|o(f26Un9a<99llKO@!p-oTB|Ezj
z9V^arks^}3$_p9i<`INT!^yIJF=I><oBsS8XLvbe$!XcXuy|uM2LE}C)7xhTKe?DA
zG^@ZPB@0`s>tMk+QEp+@bmD5Hsp4Ajm-{ocn5KyvzC%HSE^EPG8yyp>bZ9gk|5W-c
zx{qa?tB;mjxe8UpRVifE(b?T_odidN)<5W?PI1$$I23U;;d&|}TkyXShL%x>xY5-*
z4$?)=E3(L;KUe({8b=jzNyMZ#92xw9B98JR-$C}1z|aD!i0c$Qw`_q9%6|b=HqmgA
zXDRMeyjq$X!k}j5SysG;hB8ZWSw`Juq>E<-bsVINUkhzcf8C6IhY8y>RYbEWqu?_K
z{w#;uI)@S@4LMS8owrhuM)j+{V4@Sb{ozVW85jN&bR8P}tt_q$wO5VSk^U}k6R5nx
zybffyunsl)sDH`*!Vwjh#9~m#M#0~RnIVm^+z^I%k7*~=8%lL{r2R#rg(ji3-J8f3
zErcN+Bd*S>ks8s~ZicwkvW)r;;<002cOx~Ut=)Twr-50Jkh1kU(A-GPXlXZfXmY^K
za*hcD@+fJ){Bh!8h+CqiaNLe`42?W>mYaZsxF5~KLjHhAThJ<QmLJVRwqCik1?^AV
z8sb)%=SLYjaZ6uB<(;m(=)_gRLa~^aNOCEixGC&FEnAD?pc7Y#q)~iJ;kW~I;wmBg
z(LIG@EOg>3k>p2JChlaH(iUbaF5#efXl9`kSBZYYMOCbKh)!H3R;7z>DjXAaDQ#gc
z;`UK|%z<#wiCgNzDnpB*OKA&p6L*N>F)v}G9WZDLAyrn~>`U7!>l%n5+JPl)e~X$Z
zBkpA^7B{5rA!bO~POS|vG~nLKbZTutPV+Z02ZkuusWlzhXe`u->Jrkjom!KzFg;f7
zqTKJTSH?nooT2RklM5)C+G`<cl&tLn%lE@DM=ZpH?Y0VRqxfu#c5Ez$z$9k$9&9uO
z8|@aDA>RH*g_btr4Lm?QUY4`bfY>$<8|@TWUe#%#q1b4b!1By?<5PJD?Gcz<K;vD4
zjDvOvOl^v`u{BYSgJuhCVY+Q9YcU#ygXRh>y9668#6j}}mdB*$p6*t`LHuU6F+Xg~
zA>GyW*1CiEODShDKbW*#+dNqoI)4(tL32684CsDtP$QkV8tKH<NGGmFI&n49iK~%L
eT#a<%YUF<`h;u&Ql<aZ<0000<MNUMnLSTZ_s!*E%

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/resources/icons/3_Tap_Black.png b/manager-dashboard/app/resources/icons/3_Tap_Black.png
new file mode 100644
index 0000000000000000000000000000000000000000..19b33d3ab9cffce9ae3e817ac622d7f795e97dfb
GIT binary patch
literal 2322
zcmV+t3GMcYP)<h;3K|Lk000e1NJLTq00372003zS1^@s6Pq@Fa00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2&YLzK~#7F?VL}H
z)KnbDzXc)}(K$*m;SnIw6Mqg09;6(M2}ZMEq8AdndNLYVPnvk3B#>}pQ4>$P<={aN
zupacH$qsrDPrF{kxDZMr!5gc1G1=Yve$#fDdHplL*Y?e}v;8D5Go8LpU%&I~@BM!7
zy^e(qOmIjD1Y0Js+1iI-)dsAN{J0bCUV;T5fh?=I4r_VVy5alKz`_P3IJDP+6`Yc9
zZJpz!S_@bWE?YNld%Wr!h~Us3TZ%d(FI%7#0a^69VIq%8Tw9j2viP!`i(W@YV2cj^
z+d}7`LbXg|>+(6P>o2A4G%YUquS>ExeV_RV1@<rkdVY1&mTS_|_QMEd#VbeC{IN-K
zV@v5|?Du6kF3SQ8(G%9%JXhWg3_Vk-z$V1CWs!ajf?3~#0ap>ag3a^hg^i%j?y=>g
z{Vrk?szb;!7Zs7Re-`NiI<iO+dX`=tJs)ccokOtwY2d)~z}{zpZQHaC?YW)Mudh*s
z<<f0`2H7rvZu|FT=|<abR6nh*j|%*86l%?|DwBwBII>J81)cvzc3J0v#oxgufOHSH
zy7acJxHhs~0NoxW)O5-|s_)8j3h8(#;VOc|yYH~9mc;z@%g|Eu`21s8J^}OWzV-9%
zUG%P~TM)>10heW=6HI3u?;~^v2axS5q(J(vqGz?R1gr8}r<20o{}XulaPYIYPlxV;
zg(ZSRyB&I`D=yv2bis7tcFO*)EJqQ#h$Y7Nk;|YTLEe+8BD>MK9B{FMGpu@#KLNby
zJlbBo3A}s|c>QSj`t8-h`mdY-8_Vk5k-FlNXl}~qBqaG&61EF{yy(~~Df<LM*RvBt
z=!ITj#<Qv=PG1<b*vl6N_YZR&gV@0fyLMI)Eevx3TzrHUx(h|aG8%;8vVF(k_Tq1Y
z+yDNPzdf`qn~!fnIVcI3W!5E^!f_QoLV>Tz!WWC!gd^;_UwdK6LKXl1J!oNB`^s7_
zM=T=t(^R-==-<#spbQk}QaN@aj3Q#lT~NfJLjb$1<qpHfV5mmcO9_JqGXppRW%%eK
za8U8Z<PP3Dsc*RmI#p(9{RrfTY7R_fW!d8x#i6KzEctQGj7_$sYH{OGjfArqbzSI&
zS|<7Nhp<ps)(?ej6zghIwYX%dE|L}$XKQ((mV@$e`+#()gZuCunK!-$ynAvmG$Vn@
zA8WM5gypKlp_+^QtW2ORK~PTIerR0br|$<pJMbJd@J)AUX-P$#l~G*G%cl5T2lq$1
z_?b)$o(bRobuYA36-tGRbJtXd7SqkySN$M)VDZ0`qJTK`qHHa#!&2SAL#;%jYg*jV
zBB#IEb^lO0Ew#g<boZDto^b0X*aXY7rrp9wp=p-j@SZL>Q|8}Y4F!$IaH+$3@ukq$
zKD8qm?^0*Sk98NQE#qamL||QE)g!m?g_3nq%1hR&3QMBuWN1M^ojAr$T<gZ7*PAfp
z@Rh83{)2prB#U)kO^)$qA_vQ(^$cU>7S;%?Njb+d$Er*2feLkMWVuvGNV04S#n__8
z=kCSxJ;qX8n!}P)J@VGH_@N&8+If^@aH-Sy`P`VTD=rMKiAW+{QFzWZbj9^B(gv?V
zx7uBu1A6NRg5~3E|67V^QHZjvNmpDSVfvai=T$XbJW8Fl>8*f~7j0BvS`3o0oT;c=
z@DQf9Cau_w&f%j3y^G$ua)A6HDo1`Nt+L5jw_Bz|^I;Yr6%pO8Q*zpU0oJPiN}L4b
z2CPZhd3Ez@jc<pR0>!|+1sfEq6}#)YGC`Q6?}%5`<T0Lc?hwL61K!%Q{cvJaMCH-4
zeaIn9Yf~31!LLP@?N<%WDg=Ec4@ar%V$9f3Zei54;u@r`;@Sw8`wKLfx``V<LqUTs
zQ_-t~mL6p~G#WN}pnTT9Pvm@82MxD!4rRpU6te368RmGMM1VT2e=tOq;$~TKEaF7U
z`8Xom2!9ZPhEavM{i}6cWQ#nks3OPyocklxjxyqsh-pta3WNhi0g8)!3Hf(|Km#Zv
zuB-Xoss*|z{sT~%LCr-TrMM4}T$d)mv+_JEo<dC-rMM!e?tWy8XGe8hWQ$)3O-_IP
zoPA3v+cZ@~vnbu@GZ*132XCE20n&yXska`sh?qw8%RXRY61Dx*UN@zlkMIsU0t5b5
z71sgpnT4~+ewMcmRKLQ!0IFL!3mzR*zvO=G=ogp765!)N_djArM=dNjMj+W^Iw|!$
zrOuqPUng3q6Gq!TgM86q1d=i0#Hbo+5M%8YNLsDPsqZ2gJ9bPr(lEx_J&$A>m<I`|
zTCWSkjWmprc2kF@2HaxEF>yfNPu4$wY<L8cmS{7Mn^TUVk*C&jQ*e>=qr<Q<d_bfr
z7!^0qkLICTuUeXd@jGq`Nh=)YM+I7O3!mf?<Ctl*;<B)z7xNNnE~OPWgE{cBwSHW*
z;<88^#kU#9-9alZ3)PQu9wM^QipwI+k8&pNRF~2eMk+4hLO(RK(TdBWlX6my^?GQ<
zWig?gbcS(Eze{Nf>mqIk`eP1+i&or1C*}+-#xA8PtedzV^kZJaK{F6A6hd-V+$<>D
zoOKO^hh|_a+uxufiio=p<Hadu+rtPc+Nm`Gff`&}kxs1%sA>KT)&UR2I<>l^8jXz#
z;VvO9+NsqU8-rujK8pR{dTDGV#~GR~Fu4HT)ZPebqhw7NSiK&Bb;L$8*lw!84)kYR
zjN@QD1ST>2ufai0aL{al1(NNrRcPrT*}yw!#=~+BY7pBF!$C6zR#$b}s3{JbC9pcP
zUHeqtMRNou7f^ebpyHw#0#lp%+t`>W$3?vbwlUbY(tqeWYFyM;VAUl!Xdo`?C$Ksu
zz3%C58C)bUW)|y*gLO!EO+B^lBKc6tlUP55vR&CcSso_;62L`$S;7ct|8CGAt+)nh
s#WhGPu0dLH4bqBhkXBrSwBj1%f4nGPdCwb|0000007*qoM6N<$f+zG~SpWb4

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/resources/icons/tap_icon.png b/manager-dashboard/app/resources/icons/tap_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d332bc489e6f00e5fb6a0bd64e41408fec639bef
GIT binary patch
literal 1436
zcmV;N1!MY&P)<h;3K|Lk000e1NJLTq000^Q001Tk1^@s6+VYDS00001b5ch_0Itp)
z=>Px)R!KxbR7ef2R&Q)mRTMwx^>yt!LN&u=CMFXYjIKi>0VO69A>bbnS-UN$5H)Iy
zXb?a6L1T<FCVr4;P~!*r0?{a#t?eKIbS7-!gMQ&}#_JlUkO+zV+l0;8ZGG<^&w1OE
z*Y<U^=t<gh@43HwfA`+==RSZkC6+w%d~3JyV43hDm{w%*Ftq>lTbKxUD+@mM7%t0H
z77^rB6)+R87%Xd550LJ*#S`f_m8LFt$C~%L?K8Ev9U2T=$mZVFH9XQ4i}aPk=ADQ@
zy#p3}*V2{VUTT8d-fkFG7qgQIAoZT5)N}5!!gd}Jg8noh{0*RX#uLW2La@6pB)JTA
z5z%@8Oalhqc8?df^N5nIi+cGAo<hK^BKn*o?RA+DeWGCq5sw1FLFsq&l5S?8llvPG
zVW8Syy*d?dxFTbvL>ycst%>v+COSY!<c~*ZcOqJDP%N2VOG@=HNhYX=9@)Eb-evc=
zSKE_FfUWzD`yq$*iMFQh_Jc;9If0LA3P!XD9jdt!(nf}}n|;;(1D)#@T=iPG&{mSj
z0ZNi86MiJ1@RSWt`D@|f&Q;OB985V{Z%G+jP>Dlt3IUG$2tVS}3`&v;3HxX_BO>hl
z73Pq(mD@XFNn;}@+ytoH8=eI8f0~Lnp1!#vfDRUICxB&cBe0j1M#tDT$RvvaaWolk
zdMTdDtOT<9*msL<Ji)7se4OD0VxD6|K9N6My@tjnqi&?KXgm>%oRn=Mp+shmPeifg
zz@*^VZb$2^S+#B1?4L`-=7_SioG-rcgwuDl-nn-E4etEx7#!`s3&&Qdzj>@~jBQ18
z3vtrV%Ofwq|7E)^A`XZ~t{fd)8`pObm9<7*QLSM2%Q&GqfCx?{(|h8H%-4iwgYLuL
z&W+Juz1AsfH-!_qL=9_*Z*XNe$Ir(Lip(RVV3(N#g99dBh?jmvL_SRdjs>YF*&6+V
z8~f}o*E>#uPx!_1bNGK|V+#H%BC^y}#&AL_n}FX3dp*P*-L28LxHR??!96Vr<9sY(
zoMj)r=I~WS<V<q30?kfUK1oh&glKDS*7HDvBK0Mc#boS15y=8x;v=n{{kKWRh}0I*
zGe%uYYH&VT6FNKJekMXe-5ATN<GefjT|$CUIg(U$S<DfoL0=d{)^!-;yT*B9_atiH
zZ#0-De9t6HrzcN{{&w90S@7Sw7z+8n%4R3e&#7-ZJdKlgX)JtaP$~w%5Qhs=K$=BY
z$H|CHl48vy*w10++`HiOM2I>1x^^v_^35GuXtNKi?%T6!?zjtRM{3cD+7f3QxnehS
z5k0Xa-n9I5B0cPyG-Gp5Z0>ai$PaQ^vr07Y+umr=iBLE1vH<`mJCI*0fJ^cdTP2ds
z=4u4bL190TMJG}g&XLl>KfYlGYJrt{kh7yg;gGMLT4w5mMMV6l*=fmFXFKs$UpJ-r
zIm7Cvzi9ptOwrW^w1E9+k)q|L7AeQhS8%V5)8L}$BBFgQ4HvkgUFO_bD&KE5_%{Cd
zW+F0;bw+d%kr>%Czi{LQ`-cXeoa*1kKY{&S;YZ&Yne9!a!7dq8NFU0lue2)>xe3n0
zhdAU$qv1sZGS`!+I~G06S=PhgW-9|bD<Ki=nH!l0Sk>?vM>|%bDK<|c83^dXm)TF3
z_$A%SW&eG#l`EF1rVA?k;LIsWBtbzwjeUe8oZcP$vG{>AX(s*3G4gW`J<FS%tPbe*
z!zlQYL^9YNiyQ}^wwmwy8YkZ~V!M@G{XH|AtNLtyg_C<XG+uM?GZG0%$U=cx3-uaU
q;Y^xIr{a+z@>MnIcZXke<Ng86tOz4p9PWYu0000<MNUMnLSTZh{;P=q

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/resources/icons/tap_icon_angular.png b/manager-dashboard/app/resources/icons/tap_icon_angular.png
new file mode 100644
index 0000000000000000000000000000000000000000..a925155c616d3efa66dc526e2a8c96657e476546
GIT binary patch
literal 1813
zcmZ`)X*3&%8cl4KkXnKUY3&n{5;|2%v=Q1SG(jjGTc};VO2rbjjtcFR(N-Tyswg_u
ziqb`6mrzQGVGQ#aWUMK%loDHwci!JO=Y03O=iWc}$35r!?mCk$LBJYd0000X;O)tW
z?0twkvNDG|9Gm5TNFXZy2O0oy((%6lR@mgdI5dGY@+BOA)ejdQ3aJoVqAdVWn<Ka9
zFAV_5R1xfL-RM9Ob1Y{3jAF*YbU7eKQEVLPVwGxy9|ZdRC<3dov=_l0ZrT-TK}OEL
z>u;B^LaaclcUsk48|aHwWUj#BUXIHmy;#c+$(hju#Q4yj9OCwK<N@xglr(B*wu)Iq
z#uog$s1jcIC2ORv@h{c%PoY;Iql;%x=q9UFArazx%fD|rDK>?2yL#mr9oJ<^U@=3X
zYTIaPF9BZ=&&Z&Nr@~)_I|$djjgBnA!CI{WS5<-#b5SjF!;cVRpSKd$GkQBiP4As2
zs;8WQpzmu2R^_yuU@6>Zl(aQ^&Kcggw%vlGOZ69!7Of&0oV>Q5CC|-rsy=t^@qgUg
z(7ez<`=?Z^%36$!^|5my;?)c7$AeFwN`w0PVZcLExU7q~COeI{?A>j0@`cKBZDv&5
z!|@Cq>7wV8dR*o$qCn$}KD(|!ViO0yuXJ5DlA9T+7I5E%bli(>kti<nv%4IckB#b3
zPL>;cr4=r<pPjrA+#ocCI$GXs5S=CIZ9FadLUWz4m{r&ac<n;&Cbw`L&iQ_0`A>h%
z>^*pMjVLgW$gZUK_t_%-(H+MEI|?}{`L2jE`-|m+gX0ig%&C7GSB7hsYj$)ge|{)Q
zG5ZBa%ip?$yy#a|7<DABYc!mvL|%|n7k>>v6US;ubtwJrt%4kl_gV>kgh%>T!r2VR
z@zW!FoKH2PM<)&bPsmx&$Y@(SAD)gHB^005wAcnc^-`O-QGm_0ukpAXk<6Kg!&YBr
zBso)SxJ+7g@S`9TFP5NZotdzKru_Q)*c?!uxMxw&nvsLd>|ZQ4-Osnxujh^X#S8Rn
zHY{@j2Os8#@M-so`LWHBBkG_(UqSMqB#K*H|M`Fx3d6A}wux_}tQcw9x>~yL4nB$a
zHgj{LYL}+YLwm=c8wt6s*+5q~F`v!G*3>;U4ne+~KWq04tGa|0M;4@byO+M{j^igG
z&6i*c$6I_bJM{~gIqtv(V`^BI=n5U=RfOtV`y93R{f^GB6q9+fdZA>%rqLdnzkVX&
z=PR#EyW4)ML8ol7T4==F66=)7h8~lR3_>5Z5Y&lr=Q>ow`G;+(1R*n*ZS$#~W&cwA
zm=O4Z^{|w)s;^g-Y5)^><6U6&gCiDwW9H0N$&aOidh3on=Yq#^JWUlCfArov%?7i*
z_M5(anAqF(ec_OVc88hvvgTB2@!X3acezxX8+`h%E##wxsQxF3>2<4es-Pspi(a%5
zr}M|l*zxkqC}tpPPCQ`0t0z_w>IFtdswuPDCJnEPJFj^d=W7~Dg5rjk6;_`~P<rKN
z^1mZxq|=Dvfy#!(zwpK@SPuI{ZR|^HO8BU1fY0eu6G1dEVij4snF0za#P7FV!h4S9
z9k65I7#(@ZEyX<9R%H_0tT_)FBF^3t`O+zPSzEhwC|J^%*mJqXsyKAYiD7@NqEdD^
z%0!>Kua^{xhj_q#5!g3IH#mm&)^c`w+blXkiPdi3(1Ioe9uh*0@nqnm{)9>$F_;UJ
zf1+c~B+9W7R2@OODfkW*El9tKK}M$vq?DEoFoCdY1&Go_!cc_J5o#A6FC8W?-OflK
z@MNv-jOdy-9T_q8#8cuR1ZeYorpJ^Wt~=c+?UsJ-<ac2NTqWw@6J`_2p%SY{Avzqk
zS^t0r3I1UIw_tQ7__^gbNshYb5BDV_a7wyOPi7})j|$vYDU8=wyx-`g8LpifK8u^O
zydAd0V66!_4hz{d1!s{vZ@N7|N+VGcPluR)ZYb`DwL`>5ADdb9GyS=si=5`Gz*2_i
zq<4i|G?iyXG--t8=FIn?c>&QYFU^!c8!)X5AE3aAA`??!w$LV%O)fz&vpQp@6Vvd|
zDYr&?^@39yZ!Y^Za3lofv$@lqTW~%kxTo1}!Y`_y?H}CN>;t<Kjk_IJQVWpLebO>t
zCMdtx-cmsmbolwpZz7x9B-r(6RuIbVXgBo6ZZlMueC_<8sv57^&ahTNDD5tf@Nt+y
zKN<VFegZ|-r3k@$Tb@a?F?TT)uEd`U6Edl|<Uzs>vS3Ezv+dH@EdBbRxp?KlZ`~fG
z!Q7*W5qW}wPfwi;>xz!Fa)r|lNH}C|biPBQ5jC`DRhaW(SpDtz9d~KI%l5nXZze=#
lf7q<tZw3F;5&NHi0Q4)NFUBmWD;<6@0O113o`v&E`x~?UNZtSd

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/utils/common.ts b/manager-dashboard/app/utils/common.tsx
similarity index 80%
rename from manager-dashboard/app/utils/common.ts
rename to manager-dashboard/app/utils/common.tsx
index d141c0cd7..72606ac04 100644
--- a/manager-dashboard/app/utils/common.ts
+++ b/manager-dashboard/app/utils/common.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
     IoAddOutline,
     IoAlertOutline,
@@ -29,6 +30,12 @@ import {
 import { isDefined, listToMap } from '@togglecorp/fujs';
 import { IconType } from 'react-icons';
 
+import oneTapIcon from '#resources/icons/1_Tap_Black.png';
+import twoTapIcon from '#resources/icons/2_Tap_Black.png';
+import threeTapIcon from '#resources/icons/3_Tap_Black.png';
+import tapIcon from '#resources/icons/tap_icon.png';
+import angularTapIcon from '#resources/icons/tap_icon_angular.png';
+
 export function valueSelector<T>(item: { value: T }) {
     return item.value;
 }
@@ -90,7 +97,12 @@ export type IconKey = 'addOutline'
     | 'thumbsDownOutline'
     | 'thumbsUpOutline'
     | 'triangleOutline'
-    | 'warningOutline';
+    | 'warningOutline'
+    | 'generalTap'
+    | 'tap'
+    | 'oneTap'
+    | 'twoTap'
+    | 'threeTap';
 
 export interface IconItem {
     key: IconKey;
@@ -98,6 +110,22 @@ export interface IconItem {
     component: IconType;
 }
 
+function getPngIcon(src: string, alt: string) {
+    const element = () => (
+        <img
+            src={src}
+            alt={alt}
+            style={{
+                height: '1em',
+                width: '1em',
+                objectFit: 'contain',
+            }}
+        />
+    );
+
+    return element;
+}
+
 export const iconList: IconItem[] = [
     {
         key: 'addOutline',
@@ -229,6 +257,31 @@ export const iconList: IconItem[] = [
         label: 'Warning',
         component: IoWarningOutline,
     },
+    {
+        key: 'generalTap',
+        label: 'General Tap',
+        component: getPngIcon(tapIcon, 'general tap'),
+    },
+    {
+        key: 'tap',
+        label: 'Tap',
+        component: getPngIcon(angularTapIcon, 'tap'),
+    },
+    {
+        key: 'oneTap',
+        label: '1-Tap',
+        component: getPngIcon(oneTapIcon, 'one tap'),
+    },
+    {
+        key: 'twoTap',
+        label: '2-Tap',
+        component: getPngIcon(twoTapIcon, 'two tap'),
+    },
+    {
+        key: 'threeTap',
+        label: '3-Tap',
+        component: getPngIcon(threeTapIcon, 'three tap'),
+    },
 ];
 
 export const iconMap = listToMap(

From 1e57685578af3505343ccac4f3f3bb6d5a9e4d3b Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 22 Jun 2023 18:22:28 +0545
Subject: [PATCH 32/72] finalize scenario preview

---
 .../FootprintGeoJsonPreview/index.tsx         | 16 +++++++++++++-
 .../FootprintGeoJsonPreview/styles.css        | 10 +++++++++
 .../NewTutorial/ScenarioPageInput/index.tsx   |  4 ++++
 .../app/views/NewTutorial/index.tsx           | 21 ++++++++++++++++++-
 .../app/views/NewTutorial/utils.ts            |  6 ++++++
 5 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index e309bdafb..441f426df 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/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,6 +16,7 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
+    customOptionsPreview?: CustomOptionPreviewType[] | undefined;
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
@@ -22,6 +24,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
         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>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
index 2c8c5e3dd..628b192aa 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
+++ b/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;
+        }
     }
 }
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index c34fe46a7..65f722e4f 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/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
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 6e27973dc..19420a5b7 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/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}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index ff1564209..eab5bbbd9 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/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;

From 6f4648cdcd8a73af027fbd896eb980b38cce6ca0 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Thu, 22 Jun 2023 18:43:58 +0545
Subject: [PATCH 33/72] Copy tutorial json when submitting tutorial

---
 .../app/Base/components/SmartLink/index.tsx   |  2 +-
 .../app/components/GeoJsonPreview/index.tsx   |  4 +-
 .../app/views/NewTutorial/index.tsx           | 51 +++++++++++--------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/manager-dashboard/app/Base/components/SmartLink/index.tsx b/manager-dashboard/app/Base/components/SmartLink/index.tsx
index 205e757e7..d0d5bbe31 100644
--- a/manager-dashboard/app/Base/components/SmartLink/index.tsx
+++ b/manager-dashboard/app/Base/components/SmartLink/index.tsx
@@ -3,7 +3,7 @@ import { Link, LinkProps } from 'react-router-dom';
 
 import {
     useButtonFeatures,
-    Props as ButtonProps,
+    ButtonProps,
 } from '#components/Button';
 
 import useRouteMatching, {
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 6c2dfdd7f..752dd8b4a 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -6,7 +6,6 @@ import {
 
     TileLayer,
     Coords,
-    Util,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -34,14 +33,13 @@ const toQuadKey = (x: number, y: number, z: number) => {
 const BingTileLayer = TileLayer.extend({
     getTileUrl(coords: Coords) {
         const quadkey = toQuadKey(coords.x, coords.y, coords.z);
-        const subdomains = this.options.subdomains;
+        const { subdomains } = this.options;
 
         // eslint-disable-next-line no-underscore-dangle
         const url = this._url
             .replace('{subdomain}', subdomains[(coords.x + coords.y) % subdomains.length])
             .replace('{quad_key}', quadkey);
 
-        console.log(url);
         return url;
     },
     toQuadKey,
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 19420a5b7..7905e30aa 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -51,7 +51,7 @@ import {
     TabPanel,
 } from '#components/Tabs';
 import TileServerInput, {
-    TILE_SERVER_ESRI,
+    TILE_SERVER_BING,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
@@ -73,10 +73,10 @@ import {
     tutorialFormSchema,
     TutorialFormType,
     PartialTutorialFormType,
+    PartialInformationPagesType,
     ScenarioPagesType,
     CustomOptionType,
     InformationPagesType,
-    PartialInformationPagesType,
     colorKeyToColorMap,
     InformationPageTemplateKey,
     infoPageTemplateoptions,
@@ -90,6 +90,22 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
+type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
+function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
+    const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
+        (acc, currentValue) => {
+            const { scenarioId, ...other } = currentValue;
+            acc[scenarioId] = {
+                ...other,
+            };
+
+            return acc;
+        },
+        {},
+    );
+    return screens;
+}
+
 const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
@@ -116,16 +132,17 @@ const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
         description: 'if you\'re not sure or there is cloud cover / bad imagery',
     },
 ];
+
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
     zoomLevel: 18,
     tileServer: {
-        name: TILE_SERVER_ESRI,
-        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
+        name: TILE_SERVER_BING,
+        credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_ESRI,
-        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
+        name: TILE_SERVER_BING,
+        credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     customOptions: defaultCustomOptions,
 };
@@ -223,21 +240,15 @@ function NewTutorial(props: Props) {
                 informationPages: informationPagesFromForm,
                 ...valuesToCopy
             } = finalValues;
-            type Screens = typeof finalValues.scenarioPages;
-            type Screen = Screens[number];
-            type CustomScreen = Omit<Screen, 'scenarioId'>;
-
-            const screens = scenarioPages.reduce(
-                (acc, currentValue) => {
-                    const { scenarioId, ...other } = currentValue;
-                    acc[scenarioId] = {
-                        ...other,
-                    };
 
-                    return acc;
-                },
-                {} as Record<string, CustomScreen>,
-            );
+            const screens = sanitizeScreens(scenarioPages);
+
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(screens, null, 2));
+                alert('Tutorial JSON copied to clipboard.');
+            } catch (err) {
+                alert(`Tutorial JSON could not be copied ${err}`);
+            }
 
             const storage = getStorage();
             const timestamp = (new Date()).getTime();

From 156c278687a0b82866be6a5157959aecc7cf5228 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 22 Jun 2023 21:05:38 +0545
Subject: [PATCH 34/72] Add markdown editor

---
 manager-dashboard/app/Base/index.tsx          |   1 +
 .../app/components/MarkdownEditor/index.tsx   | 100 ++++++++++++++++++
 .../app/components/MarkdownEditor/styles.css  |  12 +++
 .../app/components/MarkdownPreview/index.tsx  |  27 +++++
 .../InformationPageInput/Block/index.tsx      |   8 +-
 .../InformationPagePreview/index.tsx          |   7 +-
 .../InformationPageInput/index.tsx            |   1 +
 manager-dashboard/package.json                |   4 +-
 manager-dashboard/yarn.lock                   |  48 ++++++++-
 9 files changed, 199 insertions(+), 9 deletions(-)
 create mode 100644 manager-dashboard/app/components/MarkdownEditor/index.tsx
 create mode 100644 manager-dashboard/app/components/MarkdownEditor/styles.css
 create mode 100644 manager-dashboard/app/components/MarkdownPreview/index.tsx

diff --git a/manager-dashboard/app/Base/index.tsx b/manager-dashboard/app/Base/index.tsx
index a41d73148..f2bd6e24c 100644
--- a/manager-dashboard/app/Base/index.tsx
+++ b/manager-dashboard/app/Base/index.tsx
@@ -12,6 +12,7 @@ import {
     ApolloProvider,
 } from '@apollo/client';
 import { initializeApp } from 'firebase/app';
+import 'react-mde/lib/styles/css/react-mde-all.css';
 
 import Init from '#base/components/Init';
 import PreloadMessage from '#base/components/PreloadMessage';
diff --git a/manager-dashboard/app/components/MarkdownEditor/index.tsx b/manager-dashboard/app/components/MarkdownEditor/index.tsx
new file mode 100644
index 000000000..6ebb9771e
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownEditor/index.tsx
@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import Markdown from 'react-mde';
+
+import InputContainer, { Props as InputContainerProps } from '../InputContainer';
+import MarkdownPreview from '../MarkdownPreview';
+
+import styles from './styles.css';
+
+interface MarkdownEditorProps<K extends string> {
+    name: K;
+    className?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    value: string | null | undefined;
+    onChange?:(newVal: string | undefined, name: K) => void;
+}
+
+export type Props<K extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<K>;
+
+function MarkdownEditor<K extends string>(props: Props<K>) {
+    const {
+        name,
+        value,
+        onChange,
+        actions,
+        actionsContainerClassName,
+        className,
+        disabled,
+        error,
+        errorContainerClassName,
+        hint,
+        hintContainerClassName,
+        icons,
+        iconsContainerClassName,
+        inputSectionClassName,
+        label,
+        labelContainerClassName,
+        readOnly,
+    } = props;
+
+    const [selectedTab, setSelectedTab] = React.useState<'write' | 'preview'>('write');
+    const handleValueChange = useCallback(
+        (newVal) => {
+            if (!disabled && !readOnly && onChange) {
+                onChange(newVal, name);
+            }
+        },
+        [name, onChange, disabled, readOnly],
+    );
+
+    const generateMarkdownPreview = useCallback((markdown: string | undefined) => (
+        Promise.resolve(
+            <MarkdownPreview
+                markdown={markdown ?? ''}
+            />,
+        )
+    ), []);
+
+    return (
+        <InputContainer
+            actionsContainerClassName={actionsContainerClassName}
+            className={className}
+            disabled={disabled}
+            error={error}
+            errorContainerClassName={errorContainerClassName}
+            hint={hint}
+            hintContainerClassName={hintContainerClassName}
+            icons={icons}
+            iconsContainerClassName={iconsContainerClassName}
+            inputSectionClassName={inputSectionClassName}
+            // inputContainerClassName={styles.input}
+            label={label}
+            labelContainerClassName={labelContainerClassName}
+            readOnly={readOnly}
+            actions={actions}
+            input={!readOnly ? (
+                <Markdown
+                    value={value ?? ''}
+                    selectedTab={selectedTab}
+                    onTabChange={setSelectedTab}
+                    onChange={handleValueChange}
+                    generateMarkdownPreview={generateMarkdownPreview}
+                    readOnly={disabled}
+                    disablePreview
+                    classes={{
+                        reactMde: styles.reactMde,
+                        textArea: styles.textArea,
+                        toolbar: styles.toolbar,
+                    }}
+                />
+            ) : (
+                <MarkdownPreview
+                    markdown={value || '-'}
+                />
+            )}
+        />
+    );
+}
+
+export default MarkdownEditor;
diff --git a/manager-dashboard/app/components/MarkdownEditor/styles.css b/manager-dashboard/app/components/MarkdownEditor/styles.css
new file mode 100644
index 000000000..c597832ed
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownEditor/styles.css
@@ -0,0 +1,12 @@
+.react-mde {
+    border: 0;
+    border-radius: 0;
+}
+
+.text-area {
+    height: 70px !important;
+}
+
+.toolbar {
+    border-bottom: 0;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/MarkdownPreview/index.tsx b/manager-dashboard/app/components/MarkdownPreview/index.tsx
new file mode 100644
index 000000000..efb2bf9dd
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownPreview/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import MarkdownView, { MarkdownViewProps } from 'react-showdown';
+
+export const markdownOptions: MarkdownViewProps['options'] = {
+    simpleLineBreaks: true,
+    headerLevelStart: 3,
+    simplifiedAutoLink: true,
+    openLinksInNewWindow: true,
+    backslashEscapesHTMLTags: true,
+    literalMidWordUnderscores: true,
+    strikethrough: true,
+    tables: true,
+    tasklists: true,
+};
+
+export default function MarkdownPreview(props: MarkdownViewProps) {
+    const {
+        options: markdownOptionsFromProps,
+        ...otherProps
+    } = props;
+    return (
+        <MarkdownView
+            {...otherProps}
+            options={markdownOptionsFromProps ?? markdownOptions}
+        />
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
index c275a0c4c..50202d354 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
@@ -8,7 +8,7 @@ import {
 
 import { PartialBlocksType } from '#views/NewTutorial/utils';
 import FileInput from '#components/FileInput';
-import TextInput from '#components/TextInput';
+import MarkdownEditor from '#components/MarkdownEditor';
 
 // import styles from './styles.css';
 
@@ -34,11 +34,11 @@ export default function Block(props: Props) {
     return (
         <div>
             {value.blockType === 'text' && (
-                <TextInput
+                <MarkdownEditor
                     name={'textDescription' as const}
-                    value={value.textDescription}
-                    onChange={onBlockChange}
+                    value={value?.textDescription}
                     label="Description"
+                    onChange={onBlockChange}
                     error={error?.textDescription}
                 />
             )}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 7f485ae27..4fb80d3ca 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -4,6 +4,7 @@ import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import Preview from '#components/Preview';
 
 import styles from './styles.css';
+import MarkdownPreview from '#components/MarkdownPreview';
 
 interface Props {
     value: NonNullable<PartialTutorialFormType['informationPages']>[number]
@@ -17,9 +18,9 @@ export default function InformationPagePreview(props: Props) {
     return (
         <div className={styles.informationPreview}>
             {value?.title && (
-                <div>
-                    {value?.title}
-                </div>
+                <MarkdownPreview
+                    markdown={value.title}
+                />
             )}
             {value?.blocks?.map((preview) => {
                 if (preview.blockType === 'text' && preview.textDescription) {
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 194ea201c..1c62774cf 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -9,6 +9,7 @@ import {
 
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
+import MarkdownEditor from '#components/MarkdownEditor';
 import InformationPagePreview from './InformationPagePreview';
 
 import { InformationPagesType } from '../utils';
diff --git a/manager-dashboard/package.json b/manager-dashboard/package.json
index 41efd07b4..de3c020bd 100644
--- a/manager-dashboard/package.json
+++ b/manager-dashboard/package.json
@@ -49,7 +49,9 @@
         "leaflet": "^1.8.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-icons": "^4.3.1"
+        "react-icons": "^4.3.1",
+        "react-mde": "^11.5.0",
+        "react-showdown": "^2.3.1"
     },
     "devDependencies": {
         "@babel/core": "^7.13.10",
diff --git a/manager-dashboard/yarn.lock b/manager-dashboard/yarn.lock
index d3d6cf3e4..a3597eea5 100644
--- a/manager-dashboard/yarn.lock
+++ b/manager-dashboard/yarn.lock
@@ -7202,7 +7202,7 @@ htmlparser2@^3.10.0:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.1, htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -10923,6 +10923,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-mde@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/react-mde/-/react-mde-11.5.0.tgz#3e81a505071aa80287fb23a1c0ce5e8b34c82055"
+  integrity sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag==
+
 react-refresh@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
@@ -10957,6 +10962,15 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-showdown@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-showdown/-/react-showdown-2.3.1.tgz#c1d4644e3c351ae131da49d8ba081db812c7ca80"
+  integrity sha512-3O9Gz6HF1MQbGK17gYOO6EJP27h9Sp+g/L7KeOhMJERuutYP3802MPaL8JybjeI97X9HTeeN4A89WjOpEHl3NQ==
+  dependencies:
+    domhandler "^4.0.0"
+    htmlparser2 "^6.0.1"
+    showdown "^1.9.1"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -11679,6 +11693,13 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+showdown@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
+  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
+  dependencies:
+    yargs "^14.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -13650,6 +13671,14 @@ yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^15.0.1:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
+  integrity sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -13684,6 +13713,23 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yargs@^14.2:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
+  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.1"
+
 yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"

From 13445baae94f126bf88f3a842a1e0c6b17f66a4f Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 22 Jun 2023 21:08:13 +0545
Subject: [PATCH 35/72] Add expandable container

---
 manager-dashboard/app/Base/styles.css         |   6 +-
 .../components/ExpandableContainer/index.tsx  |  69 +++
 .../components/ExpandableContainer/styles.css |  38 ++
 .../app/components/GeoJsonPreview/index.tsx   |   7 +-
 .../app/components/InputSection/index.tsx     |   9 +-
 .../app/components/InputSection/styles.css    |  20 +-
 .../app/components/MobilePreview/index.tsx    |  44 ++
 .../app/components/MobilePreview/styles.css   |   3 +
 .../app/components/PopupButton/index.tsx      |   4 +-
 .../CustomOptionInput/SubOption/index.tsx     |   1 -
 .../CustomOptionInput/SubOption/styles.css    |   4 -
 .../NewTutorial/CustomOptionInput/index.tsx   |   2 +-
 .../NewTutorial/CustomOptionInput/styles.css  |   5 +-
 .../app/views/NewTutorial/index.tsx           | 408 ++++++++----------
 .../app/views/NewTutorial/styles.css          |  56 ++-
 15 files changed, 391 insertions(+), 285 deletions(-)
 create mode 100644 manager-dashboard/app/components/ExpandableContainer/index.tsx
 create mode 100644 manager-dashboard/app/components/ExpandableContainer/styles.css
 create mode 100644 manager-dashboard/app/components/MobilePreview/index.tsx
 create mode 100644 manager-dashboard/app/components/MobilePreview/styles.css

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index 0aa35fe8c..a77d83fd1 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -94,8 +94,8 @@ p {
     --width-page-content-max: 70rem;
     --width-navbar-content-max: 76rem;
 
-    --width-mobile-preview: 24rem;
-    --height-mobile-preview: 40rem;
+    --width-mobile-preview: 20rem;
+    --height-mobile-preview: 30rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;
@@ -103,7 +103,7 @@ p {
     --radius-modal: 0.25rem;
     --radius-button-border: 0.25rem;
     --radius-input-border: 0.25rem;
-    --radius-card-border: 0.25rem;
+    --radius-card-border: 0.5rem;
     --radius-badge-border: 1rem;
 
     --line-height-none: 1;
diff --git a/manager-dashboard/app/components/ExpandableContainer/index.tsx b/manager-dashboard/app/components/ExpandableContainer/index.tsx
new file mode 100644
index 000000000..1058311e8
--- /dev/null
+++ b/manager-dashboard/app/components/ExpandableContainer/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+import { _cs } from '@togglecorp/fujs';
+
+import Button from '#components/Button';
+
+import styles from './styles.css';
+
+interface Props {
+    icons?: React.ReactNode;
+    header?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}
+
+function ExpandableContainer(props: Props) {
+    const {
+        children,
+        className,
+        icons,
+        header,
+        actions,
+    } = props;
+
+    const [isExpanded, setIsExpanded] = React.useState(false);
+
+    return (
+        <div
+            className={_cs(
+                styles.expandableContainer,
+                isExpanded && styles.expanded,
+                className,
+            )}
+        >
+            <div className={styles.headerContainer}>
+                {icons && (
+                    <div className={styles.icons}>
+                        {icons}
+                    </div>
+                )}
+                <div className={styles.header}>
+                    {header}
+                </div>
+                <div className={styles.actions}>
+                    {actions}
+                    <Button
+                        name={!isExpanded}
+                        onClick={setIsExpanded}
+                        variant="action"
+                    >
+                        {isExpanded ? (
+                            <IoIosArrowUp className={styles.icon} />
+                        ) : (
+                            <IoIosArrowDown className={styles.icon} />
+                        )}
+                    </Button>
+                </div>
+            </div>
+            {isExpanded && (
+                <div className={styles.children}>
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ExpandableContainer;
diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
new file mode 100644
index 000000000..96483f361
--- /dev/null
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -0,0 +1,38 @@
+.expandable-container {
+    border-radius: var(--radius-card-border);
+    color: inherit;
+
+    .header-container {
+        display: flex;
+        border: var(--width-separator-thin) solid var(--color-separator);
+        border-top-left-radius: var(--radius-card-border);
+        border-top-right-radius: var(--radius-card-border);
+        padding: var(--spacing-medium);
+
+        .header {
+            flex-grow: 1;
+        }
+
+        .actions {
+            flex-shrink: 0;
+
+            .icon {
+                font-size: 1.2rem;
+            }
+        }
+    }
+
+    .children {
+        border: var(--width-separator-thin) solid var(--color-separator);
+        border-bottom-left-radius: var(--radius-card-border);
+        border-bottom-right-radius: var(--radius-card-border);
+        padding: var(--spacing-medium);
+    }
+
+    &:not(.expanded) {
+        .header-container {
+            border-bottom-left-radius: var(--radius-card-border);
+            border-bottom-right-radius: var(--radius-card-border);
+        }
+    }
+}
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 752dd8b4a..e9d09b920 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -3,7 +3,6 @@ import {
     map as createMap,
     Map,
     geoJSON,
-
     TileLayer,
     Coords,
 } from 'leaflet';
@@ -64,7 +63,9 @@ function GeoJsonPreview(props: Props) {
     React.useEffect(
         () => {
             if (mapContainerRef.current && !mapRef.current) {
-                mapRef.current = createMap(mapContainerRef.current);
+                mapRef.current = createMap(mapContainerRef.current, {
+                    zoomSnap: 0,
+                });
             }
 
             if (mapRef.current) {
@@ -122,7 +123,7 @@ function GeoJsonPreview(props: Props) {
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds);
+                map.fitBounds(bounds, { padding: [0, 0] });
             }
 
             return () => {
diff --git a/manager-dashboard/app/components/InputSection/index.tsx b/manager-dashboard/app/components/InputSection/index.tsx
index 3cab44e6e..56f874ed8 100644
--- a/manager-dashboard/app/components/InputSection/index.tsx
+++ b/manager-dashboard/app/components/InputSection/index.tsx
@@ -4,6 +4,7 @@ import { _cs } from '@togglecorp/fujs';
 import styles from './styles.css';
 
 interface Props {
+    actions?: React.ReactNode;
     className?: string;
     heading?: React.ReactNode;
     children?: React.ReactNode;
@@ -16,14 +17,20 @@ function InputSection(props: Props) {
         heading,
         children,
         contentClassName,
+        actions,
     } = props;
 
     return (
         <div className={_cs(styles.inputSection, className)}>
             <div className={styles.header}>
-                <h2>
+                <h2 className={styles.heading}>
                     {heading}
                 </h2>
+                {actions && (
+                    <div className={styles.actions}>
+                        {actions}
+                    </div>
+                )}
             </div>
             <div className={_cs(styles.content, contentClassName)}>
                 {children}
diff --git a/manager-dashboard/app/components/InputSection/styles.css b/manager-dashboard/app/components/InputSection/styles.css
index ca1ec233f..0c0012c77 100644
--- a/manager-dashboard/app/components/InputSection/styles.css
+++ b/manager-dashboard/app/components/InputSection/styles.css
@@ -1,16 +1,32 @@
 .input-section {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-medium);
+    gap: var(--spacing-small);
 
     .header {
+        display: flex;
+        gap: var(--spacing-medium);
+        align-items: flex-end;
         padding: 0;
+
+        .heading {
+            flex-grow: 1;
+        }
+
+        .actions {
+            display: flex;
+            gap: var(--spacing-small);
+            align-items: flex-end;
+        }
     }
 
     .content {
         display: flex;
         flex-direction: column;
-        border-radius: var(--radius-card);
+        border-radius: var(--radius-card-border);
         gap: var(--spacing-extra-large);
+        background-color: var(--color-foreground);
+        padding: var(--spacing-large);
+        min-height: 14rem;
     }
 }
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
new file mode 100644
index 000000000..dc98308cd
--- /dev/null
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react;
+import { IoArrowBack } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+
+import Heading from '#components/Heading';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    heading?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}
+
+function MobilePreview(props: Props) {
+    const {
+        className,
+        heading,
+        actions,
+        children,
+    } = props;
+
+    return (
+        <div className={_cs(styles.mobilePreview, className)}>
+            <div className={styles.header}>
+                <div className={styles.icons}>
+                    <IoArrowBack />
+                </div>
+                <Heading>
+                    {heading}
+                </Heading>
+                {actions && (
+                    <div className={styles.actions}>
+                        {actions}
+                    </div>
+                )}
+            </div>
+            <div className={styles.content}>
+                {children}
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
new file mode 100644
index 000000000..b0dfd6e6d
--- /dev/null
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -0,0 +1,3 @@
+.mobile-preview {
+    color: inherit;
+}
diff --git a/manager-dashboard/app/components/PopupButton/index.tsx b/manager-dashboard/app/components/PopupButton/index.tsx
index e4c2e9a12..2ed1c13e8 100644
--- a/manager-dashboard/app/components/PopupButton/index.tsx
+++ b/manager-dashboard/app/components/PopupButton/index.tsx
@@ -18,7 +18,7 @@ export interface PopupButtonProps<N extends number | string | undefined> extends
     componentRef?: React.MutableRefObject<{
         setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
     } | null>;
-    persistent: boolean;
+    persistent?: boolean;
     arrowHidden?: boolean;
     defaultShown?: boolean;
 }
@@ -33,7 +33,7 @@ function PopupButton<N extends number | string | undefined>(props: PopupButtonPr
         actions,
         componentRef,
         arrowHidden,
-        persistent,
+        persistent = false,
         defaultShown,
         ...otherProps
     } = props;
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
index 3492ffe49..44c41d833 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
@@ -54,7 +54,6 @@ export default function SubOption(props: Props) {
             <Button
                 name={index}
                 onClick={onRemove}
-                className={styles.removeButton}
             >
                 Remove
             </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
index 4577244ee..2602d2e38 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
@@ -6,8 +6,4 @@
     .sub-option-input {
         flex-grow: 1;
     }
-
-    .remove-button {
-        width: fit-content;
-    }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 0877abf2f..42fba473b 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -145,7 +145,7 @@ export default function CustomOptionInput(props: Props) {
                 Remove Option
             </Button>
             <div className={styles.subOptions}>
-                <Heading level={3}>
+                <Heading level={5}>
                     Sub Options
                 </Heading>
                 <NonFieldError
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
index a7159de73..d4c305ebb 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -28,8 +28,9 @@
     .sub-options {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-large);
+        border-radius: var(--radius-card-border);
+        gap: var(--spacing-medium);
         background-color: var(--color-background);
-        padding: var(--spacing-large);
+        padding: var(--spacing-medium);
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 7905e30aa..7787d4a75 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -38,18 +38,15 @@ import UserContext from '#base/context/UserContext';
 import projectTypeOptions from '#base/configs/projectTypes';
 import useMountedRef from '#hooks/useMountedRef';
 import useInputState from '#hooks/useInputState';
-import Card from '#components/Card';
 import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
+import Heading from '#components/Heading';
 import SegmentInput from '#components/SegmentInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
-import {
-    Tabs,
-    Tab,
-    TabList,
-    TabPanel,
-} from '#components/Tabs';
+import ExpandableContainer from '#components/ExpandableContainer';
+import PopupButton from '#components/PopupButton';
+
 import TileServerInput, {
     TILE_SERVER_BING,
     tileServerDefaultCredits,
@@ -513,59 +510,103 @@ function NewTutorial(props: Props) {
 
     return (
         <div className={_cs(styles.newTutorial, className)}>
+            <Heading level={1}>
+                Create New Tutorial
+            </Heading>
             <div className={styles.container}>
                 <InputSection
-                    heading="Create New Tutorial"
+                    heading="Basic Information"
                 >
-                    <Card
-                        title="Basic Information"
-                        contentClassName={styles.card}
-                    >
-                        <SegmentInput
-                            name={'projectType' as const}
+                    <SegmentInput
+                        name={'projectType' as const}
+                        onChange={setFieldValue}
+                        value={value?.projectType}
+                        label="Project Type"
+                        hint="Select the type of your project."
+                        options={projectTypeOptions}
+                        keySelector={valueSelector}
+                        labelSelector={labelSelector}
+                        error={error?.projectType}
+                        disabled={submissionPending}
+                    />
+                    <div className={styles.inputGroup}>
+                        <TextInput
+                            name={'name' as const}
+                            value={value?.name}
                             onChange={setFieldValue}
-                            value={value?.projectType}
-                            label="Project Type"
-                            hint="Select the type of your project."
-                            options={projectTypeOptions}
-                            keySelector={valueSelector}
-                            labelSelector={labelSelector}
-                            error={error?.projectType}
+                            label="Name of the Tutorial"
+                            hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
+                            error={error?.name}
                             disabled={submissionPending}
                         />
-                        <div className={styles.inputGroup}>
-                            <TextInput
-                                name={'name' as const}
-                                value={value?.name}
-                                onChange={setFieldValue}
-                                label="Name of the Tutorial"
-                                hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
-                                error={error?.name}
-                                disabled={submissionPending}
-                            />
-                            <TextInput
-                                name={'lookFor' as const}
-                                value={value?.lookFor}
-                                onChange={setFieldValue}
-                                label="Look For"
-                                hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
-                                error={error?.lookFor}
-                                disabled={submissionPending}
-                                autoFocus
+                        <TextInput
+                            name={'lookFor' as const}
+                            value={value?.lookFor}
+                            onChange={setFieldValue}
+                            label="Look For"
+                            hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
+                            error={error?.lookFor}
+                            disabled={submissionPending}
+                            autoFocus
+                        />
+                    </div>
+                </InputSection>
+                <InputSection
+                    heading="Information Pages"
+                    actions={(
+                        <PopupButton
+                            name={undefined}
+                            className={styles.newInfoPageButton}
+                            icons={<MdAdd />}
+                            label="New Information Page"
+                            popupContentClassName={styles.newInfoButtonPopup}
+                        >
+                            {infoPageTemplateoptions.map((infoPageTemplate) => (
+                                <Button
+                                    className={styles.popupItem}
+                                    name={infoPageTemplate.key}
+                                    key={infoPageTemplate.key}
+                                    onClick={handleAddInformationPage}
+                                    variant="transparent"
+                                >
+                                    {infoPageTemplate.label}
+                                </Button>
+                            ))}
+                        </PopupButton>
+                    )}
+                >
+                    <NonFieldError
+                        error={informationPagesError}
+                    />
+                    <div className={styles.informationPageList}>
+                        {value.informationPages?.map((page, i) => (
+                            <ExpandableContainer
+                                key={page.pageNumber}
+                                header={`Intro ${page.pageNumber}`}
+                            >
+                                <InformationPageInput
+                                    value={page}
+                                    onChange={setInformationPageValue}
+                                    onRemove={handleInformationPageRemove}
+                                    index={i}
+                                    error={informationPagesError?.[page.pageNumber]}
+                                />
+                            </ExpandableContainer>
+                        ))}
+                        {!(value.informationPages?.length) && (
+                            <EmptyMessage
+                                title="Start adding Information pages"
+                                description="Add pages selecting templates from “Add page” dropdown"
                             />
-                        </div>
-                    </Card>
+                        )}
+                    </div>
                 </InputSection>
                 {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
                         heading="Define Options"
-                    >
-                        <Card
-                            contentClassName={styles.card}
-                        >
+                        actions={(
                             <Button
                                 name="addInstruction"
-                                className={styles.addButton}
                                 icons={<MdAdd />}
                                 onClick={handleAddDefineOptions}
                                 disabled={
@@ -575,142 +616,61 @@ function NewTutorial(props: Props) {
                             >
                                 Add Option
                             </Button>
-                            <NonFieldError
-                                error={optionsError}
-                            />
-                            {value.customOptions?.length ? (
-                                <Tabs
-                                    value={activeOptionsTab}
-                                    onChange={setActiveOptionsTab}
-                                >
-                                    <TabList>
-                                        {value.customOptions.map((opt) => (
-                                            <Tab
-                                                key={opt.optionId}
-                                                name={opt.optionId}
-                                            >
-                                                {`Option ${opt.optionId}`}
-                                            </Tab>
-                                        ))}
-                                    </TabList>
-                                    <div className={styles.optionContent}>
-                                        {value.customOptions.map((options, index) => (
-                                            <TabPanel
-                                                key={options.optionId}
-                                                name={options.optionId}
-                                                className={styles.optionTabPanel}
-                                            >
-                                                <CustomOptionInput
-                                                    key={options.optionId}
-                                                    value={options}
-                                                    index={index}
-                                                    onChange={setOptionValue}
-                                                    onRemove={handleOptionRemove}
-                                                    error={optionsError?.[options.optionId]}
-                                                />
-                                            </TabPanel>
-                                        ))}
-                                        <CustomOptionPreview
-                                            value={value.customOptions}
-                                        />
-                                    </div>
-                                </Tabs>
-                            ) : (
-                                <div>No sub-options at the moment</div>
-                            )}
-                        </Card>
-                    </InputSection>
-                )}
-                <InputSection heading="Information Pages">
-                    <Card contentClassName={styles.infoPageCardContent}>
-                        <div className={styles.addNewSection}>
-                            <SelectInput
-                                name=""
-                                label="Page Template"
-                                className={styles.instructionPopup}
-                                nonClearable
-                                value={selectedInfoPageTemplate}
-                                onChange={setSelectedInfoPageTemplate}
-                                options={infoPageTemplateoptions}
-                                keySelector={(infoPageTemplate) => infoPageTemplate.key}
-                                labelSelector={(infoPageTemplate) => infoPageTemplate.label}
-                            />
-                            <Button
-                                name={selectedInfoPageTemplate}
-                                onClick={handleAddInformationPage}
-                            >
-                                Add new Information Page
-                            </Button>
-                        </div>
+                        )}
+                    >
                         <NonFieldError
-                            error={informationPagesError}
+                            error={optionsError}
                         />
-                        {value.informationPages && value.informationPages.length > 0 && (
-                            <Tabs
-                                value={activeInformationPage}
-                                onChange={setActiveInformationPage}
-                            >
-                                <TabList>
-                                    {value.informationPages.map((info) => (
-                                        <Tab
-                                            key={info.pageNumber}
-                                            name={info.pageNumber}
+                        {value.customOptions?.length ? (
+                            <div className={styles.customOptionContainer}>
+                                <div className={styles.customOptionList}>
+                                    {value.customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.optionId}
+                                            header={`Option ${option.optionId}`}
                                         >
-                                            {`Intro ${info.pageNumber}`}
-                                        </Tab>
+                                            <CustomOptionInput
+                                                key={option.optionId}
+                                                value={option}
+                                                index={index}
+                                                onChange={setOptionValue}
+                                                onRemove={handleOptionRemove}
+                                                error={optionsError?.[option.optionId]}
+                                            />
+                                        </ExpandableContainer>
                                     ))}
-                                </TabList>
-                                {value.informationPages?.map((page, i) => (
-                                    <TabPanel
-                                        key={page.pageNumber}
-                                        name={page.pageNumber}
-                                    >
-                                        <InformationPageInput
-                                            key={page.pageNumber}
-                                            value={page}
-                                            onChange={setInformationPageValue}
-                                            onRemove={handleInformationPageRemove}
-                                            index={i}
-                                            error={informationPagesError?.[page.pageNumber]}
-                                        />
-                                    </TabPanel>
-                                ))}
-                            </Tabs>
-                        )}
-                        {!(value.informationPages?.length) && (
-                            <EmptyMessage
-                                title="Start adding Information pages"
-                                description="Add pages selecting templates from “Add page” dropdown"
-                            />
+                                </div>
+                                <CustomOptionPreview
+                                    value={value.customOptions}
+                                />
+                            </div>
+                        ) : (
+                            <div>No sub-options at the moment</div>
                         )}
-                    </Card>
-                </InputSection>
+                    </InputSection>
+                )}
                 <InputSection
                     heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
                 >
-                    <Card contentClassName={styles.infoPageCardContent}>
-                        <TileServerInput
-                            name={'tileServer' as const}
-                            value={value?.tileServer}
-                            error={error?.tileServer}
-                            onChange={setFieldValue}
-                            disabled={submissionPending}
-                        />
-                    </Card>
+                    <TileServerInput
+                        name={'tileServer' as const}
+                        value={value?.tileServer}
+                        error={error?.tileServer}
+                        onChange={setFieldValue}
+                        disabled={submissionPending}
+                    />
                 </InputSection>
                 {tileServerBVisible && (
                     <InputSection
                         heading="Tile Server B"
                     >
-                        <Card contentClassName={styles.infoPageCardContent}>
-                            <TileServerInput
-                                name={'tileServerB' as const}
-                                value={value?.tileServerB}
-                                error={error?.tileServerB}
-                                onChange={setFieldValue}
-                                disabled={submissionPending}
-                            />
-                        </Card>
+                        <TileServerInput
+                            name={'tileServerB' as const}
+                            value={value?.tileServerB}
+                            error={error?.tileServerB}
+                            onChange={setFieldValue}
+                            disabled={submissionPending}
+                        />
                     </InputSection>
                 )}
                 {
@@ -721,17 +681,15 @@ function NewTutorial(props: Props) {
                         <InputSection
                             heading="Zoom Level"
                         >
-                            <Card>
-                                <NumberInput
-                                    name={'zoomLevel' as const}
-                                    value={value?.zoomLevel}
-                                    onChange={setFieldValue}
-                                    label="Zoom Level"
-                                    hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
-                                    error={error?.zoomLevel}
-                                    disabled={submissionPending}
-                                />
-                            </Card>
+                            <NumberInput
+                                name={'zoomLevel' as const}
+                                value={value?.zoomLevel}
+                                onChange={setFieldValue}
+                                label="Zoom Level"
+                                hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
+                                error={error?.zoomLevel}
+                                disabled={submissionPending}
+                            />
                         </InputSection>
                     )
                 }
@@ -739,64 +697,46 @@ function NewTutorial(props: Props) {
                     heading="Scenarios"
                     contentClassName={styles.scenarioContent}
                 >
-                    <Card
-                        title="Upload GeoJSON file"
-                        contentClassName={styles.inputGroup}
-                    >
-                        <GeoJsonFileInput
-                            name={'tutorialTasks' as const}
-                            value={value?.tutorialTasks}
-                            onChange={handleGeoJsonFile}
-                            hint="It should end with .geojson or .geo.json"
-                            error={error?.tutorialTasks}
-                            disabled={submissionPending}
-                        />
-                    </Card>
-                    <Card title="Describe Scenarios">
-                        <Tabs
-                            value={activeScenarioTab}
-                            onChange={setActiveScenarioTab}
-                        >
-                            {value.scenarioPages?.length ? (
-                                <div className={styles.tabContent}>
-                                    <TabList>
-                                        {value.scenarioPages?.map((task) => (
-                                            <Tab
-                                                key={task.scenarioId}
-                                                name={task.scenarioId}
-                                            >
-                                                {`Scenario ${task.scenarioId}`}
-                                            </Tab>
-                                        ))}
-                                    </TabList>
-                                    {value.scenarioPages?.map((task, index) => (
-                                        <TabPanel
-                                            key={task.scenarioId}
-                                            name={task.scenarioId}
-                                        >
-                                            <ScenarioPageInput
-                                                key={task.scenarioId}
-                                                index={index}
-                                                value={task}
-                                                projectType={value.projectType}
-                                                onChange={onScenarioFormChange}
-                                                error={scenarioError?.[task.scenarioId]}
-                                                customOptionsPreview={customOptionsPreview}
-                                                geoJson={previewGeoJson}
-                                                url={tileServerAUrl}
-                                                urlB={tileServerBUrl}
-                                            />
-                                        </TabPanel>
-                                    ))}
-                                </div>
-                            ) : (
+                    <GeoJsonFileInput
+                        name={'tutorialTasks' as const}
+                        value={value?.tutorialTasks}
+                        onChange={handleGeoJsonFile}
+                        hint="It should end with .geojson or .geo.json"
+                        error={error?.tutorialTasks}
+                        disabled={submissionPending}
+                    />
+                    <div title="Describe Scenarios">
+                        <Heading>
+                            Describe Scenarios
+                        </Heading>
+                        <div className={styles.scenarioList}>
+                            {value.scenarioPages?.map((task, index) => (
+                                <ExpandableContainer
+                                    key={task.scenarioId}
+                                    header={`Scenario ${task.scenarioId}`}
+                                >
+                                    <ScenarioPageInput
+                                        key={task.scenarioId}
+                                        index={index}
+                                        value={task}
+                                        projectType={value.projectType}
+                                        onChange={onScenarioFormChange}
+                                        error={scenarioError?.[task.scenarioId]}
+                                        customOptionsPreview={customOptionsPreview}
+                                        geoJson={previewGeoJson}
+                                        url={tileServerAUrl}
+                                        urlB={tileServerBUrl}
+                                    />
+                                </ExpandableContainer>
+                            ))}
+                            {(value.scenarioPages?.length ?? 0) === 0 && (
                                 <EmptyMessage
                                     title="Upload geojson file first"
                                     description="This section will automatically show scenarios after uploading geojson file"
                                 />
                             )}
-                        </Tabs>
-                    </Card>
+                        </div>
+                    </div>
                 </InputSection>
                 {hasErrors && (
                     <div className={styles.errorMessage}>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 3907a38a4..fdae0d25c 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     background-color: var(--color-background);
     padding: var(--spacing-large);
+    gap: var(--spacing-extra-large);
     overflow: auto;
 
     .container {
@@ -13,25 +14,6 @@
         max-width: 70rem;
         gap: var(--spacing-extra-large);
 
-        .card {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-large);
-
-            .add-button {
-                width: fit-content;
-            }
-
-            .option-content {
-                display: flex;
-                gap: var(--spacing-extra-large);
-
-                .option-tab-panel {
-                    flex-grow: 1;
-                }
-            }
-        }
-
         .input-group {
             display: flex;
             flex-direction: column;
@@ -44,25 +26,21 @@
             }
         }
 
-        .info-page-card-content {
+        .information-page-list {
             display: flex;
             flex-direction: column;
-            gap: var(--spacing-large);
-
-            .add-new-section {
-                display: flex;
-                gap: var(--spacing-medium);
-                align-items: flex-end;
-            }
+            gap: var(--spacing-medium);
         }
 
-        .scenario-content {
-            gap: var(--spacing-small);
+        .custom-option-container {
+            display: flex;
+            gap: var(--spacing-large);
 
-            .tab-content {
+            .custom-option-list {
                 display: flex;
                 flex-direction: column;
-                gap: var(--spacing-large);
+                flex-grow: 1;
+                gap: var(--spacing-medium);
             }
         }
     }
@@ -129,11 +107,25 @@
         justify-content: flex-end;
     }
 }
-        
+
 .instruction-popup {
     gap: var(--spacing-medium);
 }
 
+.new-info-button-popup {
+    padding: var(--spacing-small) 0;
+
+    .popup-item {
+        border-radius: unset;
+        padding: var(--spacing-small) var(--spacing-large);
+        width: 100%;
+
+        &:hover {
+            background-color: var(--color-separator);
+        }
+    }
+}
+
 @keyframes wiggle {
     0% {
         transform: rotate(0deg) translateX(0);

From 8d74ec6e3b53597099a413702661caef1c21d691 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Thu, 22 Jun 2023 21:44:31 +0545
Subject: [PATCH 36/72] Do not select project type by default

---
 .../NewProject/BasicProjectInfoForm/index.tsx | 28 +++---
 .../app/views/NewProject/index.tsx            | 93 ++++++++++---------
 .../app/views/NewTutorial/index.tsx           | 55 ++++++-----
 3 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 4d8ec2977..69fd62e0a 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -22,7 +22,7 @@ import CustomOptionReadOnly from './CustomOptionReadOnly';
 
 export interface Props<T extends PartialProjectFormType> {
     className?: string;
-    submissionPending: boolean;
+    disabled: boolean;
     value: T;
     setValue: (value: SetBaseValueArg<T>, doNotReset?: boolean) => void;
     setFieldValue: (...entries: EntriesAsList<T>) => void;
@@ -31,7 +31,7 @@ export interface Props<T extends PartialProjectFormType> {
 
 function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
     const {
-        submissionPending,
+        disabled,
         value,
         setValue,
         setFieldValue,
@@ -99,7 +99,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.projectTopic}
                     label="Project Topic"
                     hint="Enter the topic of your project (50 char max)."
-                    disabled={submissionPending}
+                    disabled={disabled}
                     autoFocus
                 />
                 <TextInput
@@ -109,7 +109,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Project Region"
                     hint="Enter name of your project Region (50 chars max)"
                     error={error?.projectRegion}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
             </div>
             <div className={styles.inputGroup}>
@@ -120,7 +120,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Project Number"
                     hint="Is this project part of a bigger campaign with multiple projects?"
                     error={error?.projectNumber}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
                 <SelectInput
                     name={'requestingOrganisation' as const}
@@ -130,7 +130,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.requestingOrganisation}
                     label="Requesting Organisation"
                     hint="Which group, institution or community is requesting this project?"
-                    disabled={submissionPending || organisationsPending}
+                    disabled={disabled || organisationsPending}
                     keySelector={valueSelector}
                     labelSelector={labelSelector}
                 />
@@ -143,7 +143,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                 readOnly
                 placeholder="[Project Topic] - [Project Region] ([Task Number]) [Requesting Organisation]"
                 // error={error?.name}
-                disabled={submissionPending}
+                disabled={disabled}
             />
             <div className={styles.inputGroup}>
                 <SelectInput
@@ -156,7 +156,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Visibility"
                     hint="Choose either 'public' or select the team for which this project should be displayed"
                     error={error?.visibility}
-                    disabled={submissionPending || teamsPending}
+                    disabled={disabled || teamsPending}
                 />
                 <TextInput
                     name={'lookFor' as const}
@@ -165,7 +165,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.lookFor}
                     label="Look For"
                     hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
             </div>
             <TextArea
@@ -175,7 +175,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                 error={error?.projectDetails}
                 label="Project Details"
                 hint="Enter the description for your project. (markdown syntax is supported)."
-                disabled={submissionPending}
+                disabled={disabled}
                 rows={4}
             />
             <div className={styles.inputGroup}>
@@ -187,7 +187,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     hint="Make sure you have the rights to use the image. It should end with .jpg or .png."
                     showPreview
                     error={error?.projectImage}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
                 <div className={styles.verticalInputGroup}>
                     <SelectInput
@@ -200,7 +200,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         error={error?.tutorialId}
                         keySelector={valueSelector}
                         labelSelector={labelSelector}
-                        disabled={submissionPending || tutorialsPending}
+                        disabled={disabled || tutorialsPending}
                         nonClearable
                     />
                     <NumberInput
@@ -210,7 +210,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         label="Verification Number"
                         hint="How many people do you want to see every tile before you consider it finished? (default is 3 - more is recommended for harder tasks, but this will also make project take longer)"
                         error={error?.verificationNumber}
-                        disabled={submissionPending}
+                        disabled={disabled}
                     />
                     <NumberInput
                         name={'groupSize' as const}
@@ -219,7 +219,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         label="Group Size"
                         hint="How big should a mapping session be? Group size refers to the number of tasks per mapping session."
                         error={error?.groupSize}
-                        disabled={submissionPending}
+                        disabled={disabled}
                     />
                 </div>
             </div>
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index 6d1c35ae7..8257eef12 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
     _cs,
     isDefined,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -76,12 +77,12 @@ import styles from './styles.css';
 import projectTypeOptions from '#base/configs/projectTypes';
 
 const defaultProjectFormValue: PartialProjectFormType = {
-    projectType: PROJECT_TYPE_BUILD_AREA,
+    // projectType: PROJECT_TYPE_BUILD_AREA,
     projectNumber: 1,
     visibility: 'public',
     verificationNumber: 3,
     zoomLevel: 18,
-    groupSize: getGroupSize(PROJECT_TYPE_BUILD_AREA),
+    // groupSize: getGroupSize(PROJECT_TYPE_BUILD_AREA),
     tileServer: {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
@@ -378,8 +379,10 @@ function NewProject(props: Props) {
         || projectSubmissionStatus === 'projectSubmit'
     );
 
-    const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-        || value?.projectType === PROJECT_TYPE_COMPLETENESS;
+    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || value.projectType === PROJECT_TYPE_COMPLETENESS;
+
+    const projectTypeEmpty = isNotDefined(value.projectType);
 
     return (
         <div className={_cs(styles.newProject, className)}>
@@ -390,7 +393,7 @@ function NewProject(props: Props) {
                     <SegmentInput
                         name={'projectType' as const}
                         onChange={handleProjectTypeChange}
-                        value={value?.projectType}
+                        value={value.projectType}
                         label="Project Type"
                         hint="Select the type of your project."
                         options={projectTypeOptions}
@@ -404,44 +407,44 @@ function NewProject(props: Props) {
                         setValue={setValue}
                         setFieldValue={setFieldValue}
                         error={error}
-                        submissionPending={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
+                {(value.projectType === PROJECT_TYPE_BUILD_AREA
+                    || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || value.projectType === PROJECT_TYPE_COMPLETENESS) && (
                     <InputSection
                         heading="Zoom Level"
                     >
                         <NumberInput
                             name={'zoomLevel' as const}
-                            value={value?.zoomLevel}
+                            value={value.zoomLevel}
                             onChange={setFieldValue}
                             label="Zoom Level"
                             hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
                             error={error?.zoomLevel}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
+                {(value.projectType === PROJECT_TYPE_BUILD_AREA
+                    || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || value.projectType === PROJECT_TYPE_COMPLETENESS) && (
                     <InputSection
                         heading="Project AOI Geometry"
                     >
                         <GeoJsonFileInput
                             name={'geometry' as const}
-                            value={value?.geometry as GeoJSON.GeoJSON | undefined}
+                            value={value.geometry as GeoJSON.GeoJSON | undefined}
                             onChange={setFieldValueAndClearTestMessage}
                             label="Project AOI Geometry"
                             hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a single polygon geometry."
                             error={error?.geometry}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
-                {value?.projectType === PROJECT_TYPE_FOOTPRINT && (
+                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
                         heading="Project Tasks Geometry"
                     >
@@ -449,57 +452,57 @@ function NewProject(props: Props) {
                             label="Select an option for Project Task Geometry"
                             name={'inputType' as const}
                             onChange={handleInputTypeChange}
-                            value={value?.inputType}
+                            value={value.inputType}
                             options={projectInputTypeOptions}
                             keySelector={valueSelector}
                             labelSelector={labelSelector}
                             error={error?.inputType}
-                            disabled={submissionPending || testPending}
+                            disabled={submissionPending || projectTypeEmpty || testPending}
                         />
-                        {value?.inputType === PROJECT_INPUT_TYPE_LINK && (
+                        {value.inputType === PROJECT_INPUT_TYPE_LINK && (
                             <TextInput
                                 name={'geometry' as const}
-                                value={value?.geometry as string | undefined}
+                                value={value.geometry as string | undefined}
                                 label="Input Geometries File (Direct Link)"
                                 hint="Provide a direct link to a GeoJSON file containing your building footprint geometries."
                                 error={error?.geometry}
                                 onChange={setFieldValue}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {value?.inputType === PROJECT_INPUT_TYPE_UPLOAD && (
+                        {value.inputType === PROJECT_INPUT_TYPE_UPLOAD && (
                             <GeoJsonFileInput
                                 name={'geometry' as const}
-                                value={value?.geometry as GeoJSON.GeoJSON}
+                                value={value.geometry as GeoJSON.GeoJSON}
                                 onChange={setFieldValueAndClearTestMessage}
                                 label="GeoJSON File"
                                 hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a maximum of 10 polygon geometries."
                                 error={error?.geometry}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID && (
+                        {value.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID && (
                             <TextInput
                                 name={'TMId' as const}
                                 // NOTE: This is actually a string but
                                 // should only support numeric characters
                                 type="number"
                                 min="1"
-                                value={value?.TMId}
+                                value={value.TMId}
                                 onChange={setFieldValueAndClearTestMessage}
                                 label="HOT Tasking Manager ProjectID"
                                 hint="Provide the ID of a HOT Tasking Manager Project (only numbers, e.g. 6526)."
                                 error={error?.TMId}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {(value?.inputType === PROJECT_INPUT_TYPE_UPLOAD
-                            || value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                        {(value.inputType === PROJECT_INPUT_TYPE_UPLOAD
+                            || value.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
                         ) && (
                             <>
                                 <SegmentInput
                                     name={'filter' as const}
-                                    value={value?.filter}
+                                    value={value.filter}
                                     onChange={setFieldValueAndClearTestMessage}
                                     label="Ohsome Filter"
                                     hint="Please specify which objects should be included in your project."
@@ -507,16 +510,18 @@ function NewProject(props: Props) {
                                     error={error?.filter}
                                     keySelector={valueSelector}
                                     labelSelector={labelSelector}
-                                    disabled={submissionPending || testPending}
+                                    disabled={submissionPending || projectTypeEmpty || testPending}
                                 />
-                                {value?.filter === FILTER_OTHERS && (
+                                {value.filter === FILTER_OTHERS && (
                                     <TextInput
                                         name={'filterText' as const}
-                                        value={value?.filterText}
+                                        value={value.filterText}
                                         onChange={setFieldValueAndClearTestMessage}
                                         error={error?.filterText}
                                         label="Custom Filter"
-                                        disabled={submissionPending || testPending}
+                                        disabled={(
+                                            submissionPending || projectTypeEmpty || testPending
+                                        )}
                                         placeholder="amenities=* and geometry:polygon"
                                     />
                                 )}
@@ -533,7 +538,9 @@ function NewProject(props: Props) {
                                         className={styles.testButton}
                                         name={undefined}
                                         onClick={handleTestAoi}
-                                        disabled={submissionPending || testPending}
+                                        disabled={(
+                                            submissionPending || projectTypeEmpty || testPending
+                                        )}
                                     >
                                         {testPending ? 'Testing...' : 'Test'}
                                     </Button>
@@ -548,12 +555,12 @@ function NewProject(props: Props) {
                 >
                     <NumberInput
                         name={'maxTasksPerUser' as const}
-                        value={value?.maxTasksPerUser}
+                        value={value.maxTasksPerUser}
                         onChange={setFieldValue}
                         label="Max Tasks Per User"
                         hint="How many tasks each user is allowed to work on for this project. Empty indicates that no limit is set."
                         error={error?.maxTasksPerUser}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
 
@@ -562,10 +569,10 @@ function NewProject(props: Props) {
                 >
                     <TileServerInput
                         name={'tileServer' as const}
-                        value={value?.tileServer}
+                        value={value.tileServer}
                         error={error?.tileServer}
                         onChange={setFieldValue}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
 
@@ -575,10 +582,10 @@ function NewProject(props: Props) {
                     >
                         <TileServerInput
                             name={'tileServerB' as const}
-                            value={value?.tileServerB}
+                            value={value.tileServerB}
                             error={error?.tileServerB}
                             onChange={setFieldValue}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
@@ -591,7 +598,7 @@ function NewProject(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 7787d4a75..f2b99bb1b 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -131,7 +131,8 @@ const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
 ];
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
-    projectType: PROJECT_TYPE_BUILD_AREA,
+    // projectType: PROJECT_TYPE_BUILD_AREA,
+    projectType: undefined,
     zoomLevel: 18,
     tileServer: {
         name: TILE_SERVER_BING,
@@ -347,14 +348,14 @@ function NewTutorial(props: Props) {
 
     const handleOptionRemove = React.useCallback(
         (index: number) => {
-            const nextOption = getElementAround(value?.customOptions ?? [], index);
+            const nextOption = getElementAround(value.customOptions ?? [], index);
             onOptionRemove(index);
 
             if (nextOption) {
                 setActiveOptionsTab(nextOption.optionId);
             }
         },
-        [onOptionRemove, value?.customOptions],
+        [onOptionRemove, value.customOptions],
     );
 
     const {
@@ -367,14 +368,14 @@ function NewTutorial(props: Props) {
 
     const handleInformationPageRemove = React.useCallback(
         (index: number) => {
-            const nextInfoPage = getElementAround(value?.informationPages ?? [], index);
+            const nextInfoPage = getElementAround(value.informationPages ?? [], index);
             onInformationPageRemove(index);
 
             if (nextInfoPage) {
                 setActiveInformationPage(nextInfoPage.pageNumber);
             }
         },
-        [onInformationPageRemove, value?.informationPages],
+        [onInformationPageRemove, value.informationPages],
     );
 
     const handleAddDefineOptions = React.useCallback(
@@ -415,8 +416,8 @@ function NewTutorial(props: Props) {
         || tutorialSubmissionStatus === 'tutorialSubmit'
     );
 
-    const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-        || value?.projectType === PROJECT_TYPE_COMPLETENESS;
+    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || value.projectType === PROJECT_TYPE_COMPLETENESS;
 
     const handleGeoJsonFile = React.useCallback((
         geoProps: GeoJSON.GeoJSON | undefined,
@@ -494,7 +495,7 @@ function NewTutorial(props: Props) {
     }, [value.tileServerB?.name, value.tileServerB?.url]);
 
     const customOptionsPreview: CustomOptionPreviewType[] | undefined = React.useMemo(() => {
-        const customOptions = value?.customOptions;
+        const customOptions = value.customOptions;
         if (isNotDefined(customOptions)) {
             return undefined;
         }
@@ -508,6 +509,8 @@ function NewTutorial(props: Props) {
         return finalValue;
     }, [value.customOptions]);
 
+    const projectTypeEmpty = isNotDefined(value.projectType);
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <Heading level={1}>
@@ -520,7 +523,7 @@ function NewTutorial(props: Props) {
                     <SegmentInput
                         name={'projectType' as const}
                         onChange={setFieldValue}
-                        value={value?.projectType}
+                        value={value.projectType}
                         label="Project Type"
                         hint="Select the type of your project."
                         options={projectTypeOptions}
@@ -532,21 +535,21 @@ function NewTutorial(props: Props) {
                     <div className={styles.inputGroup}>
                         <TextInput
                             name={'name' as const}
-                            value={value?.name}
+                            value={value.name}
                             onChange={setFieldValue}
                             label="Name of the Tutorial"
                             hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
                             error={error?.name}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                         <TextInput
                             name={'lookFor' as const}
-                            value={value?.lookFor}
+                            value={value.lookFor}
                             onChange={setFieldValue}
                             label="Look For"
                             hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
                             error={error?.lookFor}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                             autoFocus
                         />
                     </div>
@@ -560,6 +563,7 @@ function NewTutorial(props: Props) {
                             icons={<MdAdd />}
                             label="New Information Page"
                             popupContentClassName={styles.newInfoButtonPopup}
+                            disabled={submissionPending || projectTypeEmpty}
                         >
                             {infoPageTemplateoptions.map((infoPageTemplate) => (
                                 <Button
@@ -568,6 +572,7 @@ function NewTutorial(props: Props) {
                                     key={infoPageTemplate.key}
                                     onClick={handleAddInformationPage}
                                     variant="transparent"
+                                    disabled={submissionPending || projectTypeEmpty}
                                 >
                                     {infoPageTemplate.label}
                                 </Button>
@@ -654,10 +659,10 @@ function NewTutorial(props: Props) {
                 >
                     <TileServerInput
                         name={'tileServer' as const}
-                        value={value?.tileServer}
+                        value={value.tileServer}
                         error={error?.tileServer}
                         onChange={setFieldValue}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
                 {tileServerBVisible && (
@@ -666,29 +671,29 @@ function NewTutorial(props: Props) {
                     >
                         <TileServerInput
                             name={'tileServerB' as const}
-                            value={value?.tileServerB}
+                            value={value.tileServerB}
                             error={error?.tileServerB}
                             onChange={setFieldValue}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
                 {
-                    (value?.projectType === PROJECT_TYPE_BUILD_AREA
-                        || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                        || value?.projectType === PROJECT_TYPE_COMPLETENESS)
+                    (value.projectType === PROJECT_TYPE_BUILD_AREA
+                        || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                        || value.projectType === PROJECT_TYPE_COMPLETENESS)
                     && (
                         <InputSection
                             heading="Zoom Level"
                         >
                             <NumberInput
                                 name={'zoomLevel' as const}
-                                value={value?.zoomLevel}
+                                value={value.zoomLevel}
                                 onChange={setFieldValue}
                                 label="Zoom Level"
                                 hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
                                 error={error?.zoomLevel}
-                                disabled={submissionPending}
+                                disabled={submissionPending || projectTypeEmpty}
                             />
                         </InputSection>
                     )
@@ -699,11 +704,11 @@ function NewTutorial(props: Props) {
                 >
                     <GeoJsonFileInput
                         name={'tutorialTasks' as const}
-                        value={value?.tutorialTasks}
+                        value={value.tutorialTasks}
                         onChange={handleGeoJsonFile}
                         hint="It should end with .geojson or .geo.json"
                         error={error?.tutorialTasks}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                     <div title="Describe Scenarios">
                         <Heading>
@@ -747,7 +752,7 @@ function NewTutorial(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>

From 85be907d88a3fa4188e5d9ca2966b71a2b273571 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 22 Jun 2023 21:51:34 +0545
Subject: [PATCH 37/72] Improve styling of mobile preview

---
 manager-dashboard/app/Base/styles.css         |  6 +-
 .../app/components/FileInput/index.tsx        |  2 +-
 .../app/components/MobilePreview/index.tsx    | 30 ++++++++-
 .../app/components/MobilePreview/styles.css   | 42 ++++++++++++-
 .../FootprintGeoJsonPreview/index.tsx         | 34 ++++-------
 .../FootprintGeoJsonPreview/styles.css        | 61 ++++---------------
 .../app/views/NewTutorial/index.tsx           | 53 ++++++++--------
 .../app/views/NewTutorial/styles.css          |  6 ++
 8 files changed, 128 insertions(+), 106 deletions(-)

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index a77d83fd1..14d77e411 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -53,6 +53,8 @@ p {
     --color-background-primary-hint: #0d194920;
     --color-background-accent-hint: #4746f610;
 
+    --color-black: #000000;
+
     --color-scrollbar-foreground: rgba(0, 0, 0, .2);
     --color-scrollbar-background: rgba(0, 0, 0, .01);
     --color-hover-background: rgba(0, 0, 0, 0.03);
@@ -90,11 +92,13 @@ p {
     --opacity-disabled-element: 0.5;
 
     --width-separator-thin: 1pt;
+    --width-separator-thick: 5pt;
+    --width-separator-mobile-preview: 8pt;
     --width-scrollbar: 0.75rem;
     --width-page-content-max: 70rem;
     --width-navbar-content-max: 76rem;
 
-    --width-mobile-preview: 20rem;
+    --width-mobile-preview: 22rem;
     --height-mobile-preview: 30rem;
 
     --radius-popup-border: 0.25rem;
diff --git a/manager-dashboard/app/components/FileInput/index.tsx b/manager-dashboard/app/components/FileInput/index.tsx
index 6b2413e45..2c0f611e7 100644
--- a/manager-dashboard/app/components/FileInput/index.tsx
+++ b/manager-dashboard/app/components/FileInput/index.tsx
@@ -54,7 +54,7 @@ function FileInput<Name>(props: Props<Name>) {
                 Select file
             </>
         ),
-        variant: 'action',
+        variant: 'secondary',
         className: styles.label,
         childrenClassName: styles.content,
     });
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index dc98308cd..2e019eeac 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react;
+import React from 'react';
 import { IoArrowBack } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
@@ -11,6 +11,9 @@ interface Props {
     heading?: React.ReactNode;
     actions?: React.ReactNode;
     children?: React.ReactNode;
+    popupTitle?: React.ReactNode;
+    popupDescription?: React.ReactNode;
+    popupIcons?: React.ReactNode;
 }
 
 function MobilePreview(props: Props) {
@@ -19,15 +22,21 @@ function MobilePreview(props: Props) {
         heading,
         actions,
         children,
+        popupTitle,
+        popupDescription,
+        popupIcons,
     } = props;
 
     return (
         <div className={_cs(styles.mobilePreview, className)}>
             <div className={styles.header}>
                 <div className={styles.icons}>
-                    <IoArrowBack />
+                    <IoArrowBack className={styles.backIcon} />
                 </div>
-                <Heading>
+                <Heading
+                    className={styles.heading}
+                    level={4}
+                >
                     {heading}
                 </Heading>
                 {actions && (
@@ -37,8 +46,23 @@ function MobilePreview(props: Props) {
                 )}
             </div>
             <div className={styles.content}>
+                <div className={styles.popup}>
+                    <div>
+                        <div className={styles.title}>
+                            {popupTitle}
+                        </div>
+                        <div className={styles.description}>
+                            {popupDescription}
+                        </div>
+                    </div>
+                    <div className={styles.icons}>
+                        {popupIcons}
+                    </div>
+                </div>
                 {children}
             </div>
         </div>
     );
 }
+
+export default MobilePreview;
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index b0dfd6e6d..fb4b22d45 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -1,3 +1,43 @@
 .mobile-preview {
-    color: inherit;
+    display: flex;
+    flex-direction: column;
+    border: var(--width-separator-mobile-preview) solid var(--color-black);
+    border-radius: var(--radius-card-border);
+    background-color: var(--color-black);
+    padding: var(--spacing-small) 0;
+    width: var(--width-mobile-preview);
+    color: var(--color-text-on-dark);
+
+    .header {
+        display: flex;
+        background-color: var(--color-primary);
+        padding: var(--spacing-medium);
+        gap: var(--spacing-medium);
+
+        .icons {
+            .back-icon {
+                font-size: 1.2rem;
+            }
+
+            .heading {
+                flex-grow: 1;
+            }
+
+            .actions {
+                flex-shrink: 0;
+            }
+        }
+    }
+
+    .content {
+        position: relative;
+        background-color: var(--color-primary);
+
+        .popup {
+            position: absolute;
+            top: var(--spacing-medium);
+            background-color: var(--color-foreground);
+            width: 100%;
+        }
+    }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 441f426df..44e12184f 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
+import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { CustomOptionPreviewType } from '#views/NewTutorial/utils';
 import { IconKey, iconMap } from '#utils/common';
@@ -8,7 +9,7 @@ import { IconKey, iconMap } from '#utils/common';
 import styles from './styles.css';
 
 interface Props {
-    className?: string;
+    // className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
     previewPopUp?: {
         title?: string;
@@ -20,7 +21,7 @@ interface Props {
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
-        className,
+        // className,
         geoJson,
         url,
         previewPopUp,
@@ -30,34 +31,25 @@ export default function FootprintGeoJsonPreview(props: Props) {
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
-        <div className={_cs(className, styles.previewScreen)}>
-            <div className={styles.mapContent}>
-                <div className={styles.popUpContent}>
-                    <div className={styles.popUpTitle}>
-                        {previewPopUp?.title ?? 'Title'}
-                    </div>
-                    <div>
-                        {previewPopUp?.description ?? 'Description'}
-                    </div>
-                </div>
-                { Comp && (
-                    <div className={styles.popUpIcon}>
-                        <Comp />
-                    </div>
-                )}
-            </div>
+        <MobilePreview
+            className={styles.footprintGeoJsonPreview}
+            heading="You are looking for: mobile homes"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title ?? 'Title'}
+            popupDescription={previewPopUp?.description ?? 'Description'}
+        >
             <GeoJsonPreview
                 className={styles.mapPreview}
                 url={url}
                 geoJson={geoJson}
             />
-            <div className={styles.footerOption}>
+            <div className={styles.options}>
                 {customOptionsPreview?.map((option) => {
                     const Icon = iconMap[option.icon];
                     return (
                         <div
                             key={option.id}
-                            className={styles.previewIcon}
+                            className={styles.option}
                             style={{ backgroundColor: option.iconColor }}
                         >
                             <Icon />
@@ -65,6 +57,6 @@ export default function FootprintGeoJsonPreview(props: Props) {
                     );
                 })}
             </div>
-        </div>
+        </MobilePreview>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
index 628b192aa..4f4297fc4 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
@@ -1,61 +1,22 @@
-.preview-screen {
-    display: flex;
-    position: relative;
-    align-items: center;
-    flex-direction: column;
-    gap: var(--spacing-medium);
-    flex-shrink: 0;
-    z-index: 0;
-    background-color: var(--color-primary);
-    width: var(--width-mobile-preview);
-    height: var(--height-mobile-preview);
-
+.footprint-geo-json-preview {
     .map-preview {
-        z-index: -1;
-        padding: var(--spacing-medium);
-        height: 80%;
+        position: relative;
+        z-index: 0;
+        height: var(--height-mobile-preview);
     }
 
-    .map-content {
+    .options {
         display: flex;
-        position: absolute;
-        top: 3rem;
-        opacity: 0.95;
-        border-radius: 10px;
-        background-color: var(--color-foreground);
-        padding: var(--spacing-medium);
+        justify-content: center;
+        padding: var(--spacing-large);
         gap: var(--spacing-large);
-        width: 90%;
-
-        .pop-up-content {
-            display: flex;
-            flex-basis: 80%;
-            flex-direction: column;
-
-            .pop-up-title {
-                font-weight: var(--font-weight-bold);
-            }
 
-        }
-
-        .pop-up-icon {
-            display: flex;
-            align-items: center;
-            font-size: var(--font-size-super-large);
-        }
-    }
-
-    .footer-option {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-large);
-        
-        .preview-icon {
+        .option {
             display: flex;
             align-items: center;
             border-radius: 50%;
-            padding: 3px;
-            font-size: 30px;
+            padding: var(--spacing-small);
+            font-size: var(--font-size-extra-large);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index f2b99bb1b..9d5ee5a79 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -710,37 +710,32 @@ function NewTutorial(props: Props) {
                         error={error?.tutorialTasks}
                         disabled={submissionPending || projectTypeEmpty}
                     />
-                    <div title="Describe Scenarios">
-                        <Heading>
-                            Describe Scenarios
-                        </Heading>
-                        <div className={styles.scenarioList}>
-                            {value.scenarioPages?.map((task, index) => (
-                                <ExpandableContainer
+                    <div className={styles.scenarioList}>
+                        {value.scenarioPages?.map((task, index) => (
+                            <ExpandableContainer
+                                key={task.scenarioId}
+                                header={`Scenario ${task.scenarioId}`}
+                            >
+                                <ScenarioPageInput
                                     key={task.scenarioId}
-                                    header={`Scenario ${task.scenarioId}`}
-                                >
-                                    <ScenarioPageInput
-                                        key={task.scenarioId}
-                                        index={index}
-                                        value={task}
-                                        projectType={value.projectType}
-                                        onChange={onScenarioFormChange}
-                                        error={scenarioError?.[task.scenarioId]}
-                                        customOptionsPreview={customOptionsPreview}
-                                        geoJson={previewGeoJson}
-                                        url={tileServerAUrl}
-                                        urlB={tileServerBUrl}
-                                    />
-                                </ExpandableContainer>
-                            ))}
-                            {(value.scenarioPages?.length ?? 0) === 0 && (
-                                <EmptyMessage
-                                    title="Upload geojson file first"
-                                    description="This section will automatically show scenarios after uploading geojson file"
+                                    index={index}
+                                    value={task}
+                                    projectType={value.projectType}
+                                    onChange={onScenarioFormChange}
+                                    error={scenarioError?.[task.scenarioId]}
+                                    customOptionsPreview={customOptionsPreview}
+                                    geoJson={previewGeoJson}
+                                    url={tileServerAUrl}
+                                    urlB={tileServerBUrl}
                                 />
-                            )}
-                        </div>
+                            </ExpandableContainer>
+                        ))}
+                        {(value.scenarioPages?.length ?? 0) === 0 && (
+                            <EmptyMessage
+                                title="Upload geojson file first"
+                                description="This section will automatically show scenarios after uploading geojson file"
+                            />
+                        )}
                     </div>
                 </InputSection>
                 {hasErrors && (
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index fdae0d25c..20dafe7ba 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -43,6 +43,12 @@
                 gap: var(--spacing-medium);
             }
         }
+
+        .scenario-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-medium);
+        }
     }
 
     .error-message {

From 770ada66bb8b144e51c8c6aefea04a0ffc5110be Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 22 Jun 2023 22:00:55 +0545
Subject: [PATCH 38/72] fix information validations

---
 .../views/NewTutorial/InformationPageInput/index.tsx  |  1 -
 manager-dashboard/app/views/NewTutorial/index.tsx     | 11 ++++++++---
 manager-dashboard/app/views/NewTutorial/utils.ts      |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 1c62774cf..194ea201c 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -9,7 +9,6 @@ import {
 
 import TextInput from '#components/TextInput';
 import Button from '#components/Button';
-import MarkdownEditor from '#components/MarkdownEditor';
 import InformationPagePreview from './InformationPagePreview';
 
 import { InformationPagesType } from '../utils';
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 9d5ee5a79..41a1b1d8b 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -76,7 +76,7 @@ import {
     InformationPagesType,
     colorKeyToColorMap,
     InformationPageTemplateKey,
-    infoPageTemplateoptions,
+    infoPageTemplateOptions,
     infoPageBlocksMap,
     tileServerUrls,
     ColorKey,
@@ -565,14 +565,19 @@ function NewTutorial(props: Props) {
                             popupContentClassName={styles.newInfoButtonPopup}
                             disabled={submissionPending || projectTypeEmpty}
                         >
-                            {infoPageTemplateoptions.map((infoPageTemplate) => (
+                            {infoPageTemplateOptions.map((infoPageTemplate) => (
                                 <Button
                                     className={styles.popupItem}
                                     name={infoPageTemplate.key}
                                     key={infoPageTemplate.key}
                                     onClick={handleAddInformationPage}
                                     variant="transparent"
-                                    disabled={submissionPending || projectTypeEmpty}
+                                    disabled={(
+                                        submissionPending
+                                        || projectTypeEmpty
+                                        || (value.informationPages
+                                            && value.informationPages.length >= 10)
+                                    )}
                                 >
                                     {infoPageTemplate.label}
                                 </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index eab5bbbd9..63ec1787c 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -170,7 +170,7 @@ export interface InformationPageOption {
     label: string;
 }
 
-export const infoPageTemplateoptions: InformationPageOption[] = [
+export const infoPageTemplateOptions: InformationPageOption[] = [
     {
         key: '1-picture',
         label: 'With 1 picture',
@@ -429,7 +429,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
             },
             informationPages: {
                 validation: (info) => {
-                    if (info && info.length >= 10) {
+                    if (info && info.length > 10) {
                         return 'Information page cannot be more than 10';
                     }
                     return undefined;

From d1f66efa7b141495ba4ec6eafbd7981a45b2cbb8 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 22 Jun 2023 22:08:29 +0545
Subject: [PATCH 39/72] Use MobilePreview in all previews

---
 .../app/components/MobilePreview/index.tsx    |  6 ++-
 .../app/components/MobilePreview/styles.css   | 18 +++++++-
 .../ChangeDetectionGeoJsonPreview/index.tsx   | 27 ++++-------
 .../ChangeDetectionGeoJsonPreview/styles.css  | 44 +++---------------
 .../FootprintGeoJsonPreview/index.tsx         |  6 +--
 .../ScenarioGeoJsonPreview/index.tsx          | 27 ++++-------
 .../ScenarioGeoJsonPreview/styles.css         | 46 +++----------------
 7 files changed, 57 insertions(+), 117 deletions(-)

diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index 2e019eeac..0cefac121 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -14,6 +14,7 @@ interface Props {
     popupTitle?: React.ReactNode;
     popupDescription?: React.ReactNode;
     popupIcons?: React.ReactNode;
+    contentClassName?: string;
 }
 
 function MobilePreview(props: Props) {
@@ -25,6 +26,7 @@ function MobilePreview(props: Props) {
         popupTitle,
         popupDescription,
         popupIcons,
+        contentClassName,
     } = props;
 
     return (
@@ -45,9 +47,9 @@ function MobilePreview(props: Props) {
                     </div>
                 )}
             </div>
-            <div className={styles.content}>
+            <div className={_cs(styles.content, contentClassName)}>
                 <div className={styles.popup}>
-                    <div>
+                    <div className={styles.details}>
                         <div className={styles.title}>
                             {popupTitle}
                         </div>
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index fb4b22d45..624852290 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -31,13 +31,29 @@
 
     .content {
         position: relative;
+        z-index: 0;
         background-color: var(--color-primary);
 
         .popup {
+            display: flex;
             position: absolute;
             top: var(--spacing-medium);
+            left: var(--spacing-small);
+            z-index: 1;
+            border-radius: var(--radius-card-border);
             background-color: var(--color-foreground);
-            width: 100%;
+            padding: var(--spacing-small) var(--spacing-medium);
+            width: calc(100% - 2 * var(--spacing-small));
+            color: var(--color-text);
+
+            .details {
+                flex-grow: 1;
+            }
+
+            .icons {
+                flex-shrink: 0;
+                font-size: 2rem;
+            }
         }
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 96e5547a2..8d27e93e4 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
+import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { iconMap, IconKey } from '#utils/common';
 
@@ -30,32 +31,24 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
-        <div className={_cs(styles.previewScreen, className)}>
+        <MobilePreview
+            className={_cs(styles.changeDetectionGeoJsonPreview, className)}
+            heading="You are looking for: mobile homes"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title ?? 'Title'}
+            popupDescription={previewPopUp?.description ?? 'Description'}
+            contentClassName={styles.content}
+        >
             <GeoJsonPreview
                 className={styles.mapPreview}
                 geoJson={geoJson}
                 url={url}
             />
-            <div className={styles.mapContent}>
-                <div className={styles.popUpContent}>
-                    <div className={styles.popUpTitle}>
-                        {previewPopUp?.title ?? 'Title'}
-                    </div>
-                    <div>
-                        {previewPopUp?.description ?? 'Description'}
-                    </div>
-                </div>
-                { Comp && (
-                    <div className={styles.popUpIcon}>
-                        <Comp />
-                    </div>
-                )}
-            </div>
             <GeoJsonPreview
                 className={styles.mapPreview}
                 geoJson={geoJson}
                 url={urlB}
             />
-        </div>
+        </MobilePreview>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
index f07a45450..87b18c721 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
@@ -1,42 +1,12 @@
-.preview-screen {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: var(--spacing-medium);
-    flex-shrink: 0;
-    background-color: var(--color-primary);
-    width: 100%;
-
-    .map-preview {
-        padding: var(--spacing-small);
-        width: 15rem;
-        height: 15rem;
-    }
-
-    .map-content {
+.change-detection-geo-json-preview {
+    .content {
         display: flex;
-        opacity: 0.95;
-        border-radius: 10px;
-        background-color: var(--color-foreground);
+        flex-direction: column;
         padding: var(--spacing-medium);
-        gap: var(--spacing-large);
-        width: 90%;
-
-        .pop-up-content {
-            display: flex;
-            flex-basis: 80%;
-            flex-direction: column;
-
-            .pop-up-title {
-                font-weight: var(--font-weight-bold);
-            }
-
-        }
+        gap: var(--spacing-extra-large);
 
-        .pop-up-icon {
-            display: flex;
-            align-items: center;
-            font-size: var(--font-size-super-large);
+        .map-preview {
+            height: 16rem;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 44e12184f..ccab1a262 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -9,7 +9,7 @@ import { IconKey, iconMap } from '#utils/common';
 import styles from './styles.css';
 
 interface Props {
-    // className?: string;
+    className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
     previewPopUp?: {
         title?: string;
@@ -21,7 +21,7 @@ interface Props {
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
-        // className,
+        className,
         geoJson,
         url,
         previewPopUp,
@@ -32,7 +32,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
 
     return (
         <MobilePreview
-            className={styles.footprintGeoJsonPreview}
+            className={_cs(styles.footprintGeoJsonPreview, className)}
             heading="You are looking for: mobile homes"
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
index 857f4254b..398f0422b 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
+import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { iconMap, IconKey } from '#utils/common';
 
@@ -28,28 +29,20 @@ function ScenarioGeoJsonPreview(props: Props) {
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
-        <div className={_cs(styles.geoJsonPreview, className)}>
-            <div className={styles.mapContent}>
-                <div className={styles.popUpContent}>
-                    <div className={styles.popUpTitle}>
-                        {previewPopUp?.title ?? 'Title'}
-                    </div>
-                    <div>
-                        {previewPopUp?.description ?? 'Description'}
-                    </div>
-                </div>
-                { Comp && (
-                    <div className={styles.popUpIcon}>
-                        <Comp />
-                    </div>
-                )}
-            </div>
+        <MobilePreview
+            className={_cs(styles.scenarioGeoJsonPreview, className)}
+            heading="You are looking for: mobile homes"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title ?? 'Title'}
+            popupDescription={previewPopUp?.description ?? 'Description'}
+            contentClassName={styles.content}
+        >
             <GeoJsonPreview
                 className={styles.mapContainer}
                 geoJson={geoJson}
                 url={url}
             />
-        </div>
+        </MobilePreview>
     );
 }
 
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
index a7574b8ca..b81e22c64 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
@@ -1,44 +1,10 @@
-.geo-json-preview {
-    display: flex;
-    position: relative;
-    align-items: center;
-    flex-direction: column;
-    flex-shrink: 0;
-    gap: var(--spacing-medium);
-    z-index: 0;
+.scenario-geo-json-preview {
+    .content {
+        padding: var(--spacing-extra-large) var(--spacing-medium);
 
-    .map-container {
-        z-index: -1;
-        width: var(--width-mobile-preview);
-        height: var(--height-mobile-preview);
-    }
-
-    .map-content {
-        display: flex;
-        position: absolute;
-        top: 3rem;
-        opacity: 0.95;
-        border-radius: 10px;
-        background-color: var(--color-foreground);
-        padding: var(--spacing-medium);
-        gap: var(--spacing-large);
-        width: 90%;
-
-        .pop-up-content {
-            display: flex;
-            flex-basis: 80%;
-            flex-direction: column;
-
-            .pop-up-title {
-                font-weight: var(--font-weight-bold);
-            }
-
-        }
-
-        .pop-up-icon {
-            display: flex;
-            align-items: center;
-            font-size: var(--font-size-super-large);
+        .map-container {
+            z-index: 0;
+            height: var(--height-mobile-preview);
         }
     }
 }

From a53cef3b41439938ef2a89b0a7f075d783067d07 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 08:02:51 +0545
Subject: [PATCH 40/72] Use mobile preview on information pages

- Refactor
- Fix issue with zoom on url change
- Remove SINERGISE key from environment
---
 manager-dashboard/.env.example                |   1 -
 .../components/ExpandableContainer/index.tsx  |   5 +-
 .../components/ExpandableContainer/styles.css |  14 +-
 .../app/components/GeoJsonPreview/index.tsx   |   5 +-
 .../app/components/MarkdownEditor/styles.css  |   6 +-
 .../app/components/MobilePreview/index.tsx    |  22 +-
 .../app/components/MobilePreview/styles.css   |   1 +
 .../InformationPageInput/Block/index.tsx      |   8 +-
 .../InformationPagePreview/index.tsx          |  33 +--
 .../InformationPagePreview/styles.css         |  10 +-
 .../InformationPageInput/index.tsx            |  20 +-
 .../FootprintGeoJsonPreview/index.tsx         |   2 +-
 .../ScenarioGeoJsonPreview/index.tsx          |   1 +
 .../NewTutorial/ScenarioPageInput/index.tsx   |  15 +-
 .../app/views/NewTutorial/index.tsx           | 230 ++++++++----------
 .../app/views/NewTutorial/styles.css          |   4 -
 .../app/views/NewTutorial/utils.ts            |  72 +++---
 17 files changed, 228 insertions(+), 221 deletions(-)

diff --git a/manager-dashboard/.env.example b/manager-dashboard/.env.example
index 1bb43b081..6df3985d3 100644
--- a/manager-dashboard/.env.example
+++ b/manager-dashboard/.env.example
@@ -14,6 +14,5 @@ REACT_APP_COMMUNITY_DASHBOARD_URL=
 REACT_APP_IMAGE_BING_API_KEY=
 REACT_APP_IMAGE_MAPBOX_API_KEY=
 REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
-REACT_APP_IMAGE_SINERGISE_API_KEY=
 # -- NOTE: not used and seems to be discontinued
 REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=
diff --git a/manager-dashboard/app/components/ExpandableContainer/index.tsx b/manager-dashboard/app/components/ExpandableContainer/index.tsx
index 1058311e8..bedb48581 100644
--- a/manager-dashboard/app/components/ExpandableContainer/index.tsx
+++ b/manager-dashboard/app/components/ExpandableContainer/index.tsx
@@ -48,11 +48,12 @@ function ExpandableContainer(props: Props) {
                         name={!isExpanded}
                         onClick={setIsExpanded}
                         variant="action"
+                        title={isExpanded ? 'Collapse' : 'Expand'}
                     >
                         {isExpanded ? (
-                            <IoIosArrowUp className={styles.icon} />
+                            <IoIosArrowUp />
                         ) : (
-                            <IoIosArrowDown className={styles.icon} />
+                            <IoIosArrowDown />
                         )}
                     </Button>
                 </div>
diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
index 96483f361..94a88e25e 100644
--- a/manager-dashboard/app/components/ExpandableContainer/styles.css
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -13,10 +13,22 @@
             flex-grow: 1;
         }
 
+        .icons {
+            display: flex;
+            gap: var(--spacing-medium);
+            flex-shrink: 0;
+
+            >* {
+                font-size: 1.2rem;
+            }
+        }
+
         .actions {
+            display: flex;
+            gap: var(--spacing-medium);
             flex-shrink: 0;
 
-            .icon {
+            >* {
                 font-size: 1.2rem;
             }
         }
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index e9d09b920..337d13246 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -84,7 +84,7 @@ function GeoJsonPreview(props: Props) {
                 const layer = new Layer(
                     finalUrl,
                     {
-                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        // attribution: '',
                         // subdomains: ['a', 'b', 'c'],
                     },
                 );
@@ -131,7 +131,8 @@ function GeoJsonPreview(props: Props) {
                 newGeoJson.remove();
             };
         },
-        [geoJson],
+        // NOTE: adding url as dependency as url will re-create the map
+        [geoJson, url],
     );
 
     return (
diff --git a/manager-dashboard/app/components/MarkdownEditor/styles.css b/manager-dashboard/app/components/MarkdownEditor/styles.css
index c597832ed..617a4965f 100644
--- a/manager-dashboard/app/components/MarkdownEditor/styles.css
+++ b/manager-dashboard/app/components/MarkdownEditor/styles.css
@@ -4,9 +4,9 @@
 }
 
 .text-area {
-    height: 70px !important;
+    background-color: transparent;
 }
 
 .toolbar {
-    border-bottom: 0;
-}
\ No newline at end of file
+    background-color: transparent;
+}
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index 0cefac121..aecf29509 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -48,19 +48,21 @@ function MobilePreview(props: Props) {
                 )}
             </div>
             <div className={_cs(styles.content, contentClassName)}>
-                <div className={styles.popup}>
-                    <div className={styles.details}>
-                        <div className={styles.title}>
-                            {popupTitle}
+                {(popupTitle || popupDescription || popupIcons) && (
+                    <div className={styles.popup}>
+                        <div className={styles.details}>
+                            <div>
+                                {popupTitle}
+                            </div>
+                            <div>
+                                {popupDescription}
+                            </div>
                         </div>
-                        <div className={styles.description}>
-                            {popupDescription}
+                        <div className={styles.icons}>
+                            {popupIcons}
                         </div>
                     </div>
-                    <div className={styles.icons}>
-                        {popupIcons}
-                    </div>
-                </div>
+                )}
                 {children}
             </div>
         </div>
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index 624852290..f9c132dd6 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -31,6 +31,7 @@
 
     .content {
         position: relative;
+        flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
 
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
index 50202d354..dd3811144 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
@@ -18,6 +18,7 @@ interface Props {
     onChange: (value: SetValueArg<PartialBlockType>, index: number) => void;
     index: number;
     error: Error<PartialBlockType> | undefined;
+    disabled: boolean;
 }
 
 export default function Block(props: Props) {
@@ -26,6 +27,7 @@ export default function Block(props: Props) {
         onChange,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
     const onBlockChange = useFormObject(index, onChange, { blockNumber: 1, blockType: 'text' });
@@ -37,9 +39,10 @@ export default function Block(props: Props) {
                 <MarkdownEditor
                     name={'textDescription' as const}
                     value={value?.textDescription}
-                    label="Description"
+                    label={`Block ${index + 1}`}
                     onChange={onBlockChange}
                     error={error?.textDescription}
+                    disabled={disabled}
                 />
             )}
             {value.blockType === 'image' && (
@@ -47,11 +50,12 @@ export default function Block(props: Props) {
                     name={'imageFile' as const}
                     value={value?.imageFile}
                     onChange={onBlockChange}
-                    label="Upload Image"
+                    label={`Block ${index + 1}`}
                     hint="Make sure you have the rights to
                     use this image. It should end with  .jpg or .png."
                     accept="image/png, image/jpeg"
                     error={error?.imageFile}
+                    disabled={disabled}
                 />
             )}
         </div>
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 4fb80d3ca..714017df8 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -1,48 +1,51 @@
 import React from 'react';
 
 import { PartialTutorialFormType } from '#views/NewTutorial/utils';
+import MobilePreview from '#components/MobilePreview';
 import Preview from '#components/Preview';
 
 import styles from './styles.css';
 import MarkdownPreview from '#components/MarkdownPreview';
 
 interface Props {
-    value: NonNullable<PartialTutorialFormType['informationPages']>[number]
+    value: NonNullable<PartialTutorialFormType['informationPages']>[number];
+    index: number;
 }
 
 export default function InformationPagePreview(props: Props) {
     const {
         value,
+        index,
     } = props;
 
     return (
-        <div className={styles.informationPreview}>
-            {value?.title && (
-                <MarkdownPreview
-                    markdown={value.title}
-                />
-            )}
+        <MobilePreview
+            className={styles.informationPreview}
+            // FIXME: get this from 'look for'
+            heading="You are looking for: mobile homes"
+            contentClassName={styles.content}
+        >
+            {value?.title || `Intro ${index + 1}`}
             {value?.blocks?.map((preview) => {
-                if (preview.blockType === 'text' && preview.textDescription) {
+                if (preview.blockType === 'text' && !!preview.textDescription) {
                     return (
-                        <div key={preview.blockNumber}>
-                            {preview.textDescription}
-                        </div>
+                        <MarkdownPreview
+                            key={preview.blockNumber}
+                            markdown={preview.textDescription}
+                        />
                     );
                 }
-
                 if (preview.blockType === 'image') {
                     return (
                         <Preview
-                            className={styles.imagePreview}
                             key={preview.blockNumber}
+                            className={styles.imagePreview}
                             file={preview.imageFile}
                         />
                     );
                 }
-
                 return null;
             })}
-        </div>
+        </MobilePreview>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
index a18a8b9d7..2fa4c1f40 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -1,9 +1,11 @@
 .information-preview {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-large);
+    .content {
+        display: flex;
+        gap: var(--spacing-large);
+        flex-direction: column;
+        padding: var(--spacing-large);
+    }
     background-color: var(--color-primary);
-    padding: var(--spacing-large);
     width: var(--width-mobile-preview);
     height: var(--height-mobile-preview);
     overflow: auto;
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 194ea201c..83fd61f05 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -8,7 +8,6 @@ import {
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
-import Button from '#components/Button';
 import InformationPagePreview from './InformationPagePreview';
 
 import { InformationPagesType } from '../utils';
@@ -19,18 +18,20 @@ import styles from './styles.css';
 interface Props {
     value: InformationPagesType,
     onChange: (value: SetValueArg<InformationPagesType>, index: number) => void;
-    onRemove: (index: number) => void;
-    index: number,
+    // onRemove: (index: number) => void;
+    index: number;
     error: Error<InformationPagesType> | undefined;
+    disabled: boolean;
 }
 
 export default function InformationPageInput(props: Props) {
     const {
         value,
         onChange,
-        onRemove,
+        // onRemove,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
     const onInformationPageChange = useFormObject(index, onChange, { pageNumber: 1 });
@@ -52,9 +53,10 @@ export default function InformationPageInput(props: Props) {
                 <TextInput
                     name={'title' as const}
                     value={value?.title}
-                    label="Title for the Page"
+                    label="Page Title"
                     onChange={onInformationPageChange}
                     error={error?.title}
+                    disabled={disabled}
                 />
                 {value.blocks?.map((block, i) => (
                     <Block
@@ -63,17 +65,13 @@ export default function InformationPageInput(props: Props) {
                         onChange={onChangeBlock}
                         index={i}
                         error={blockError?.[block.blockNumber]}
+                        disabled={disabled}
                     />
                 ))}
-                <Button
-                    name={index}
-                    onClick={onRemove}
-                >
-                    Delete Page
-                </Button>
             </div>
             <InformationPagePreview
                 value={value}
+                index={index}
             />
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index ccab1a262..66b33e111 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -17,7 +17,7 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
-    customOptionsPreview?: CustomOptionPreviewType[] | undefined;
+    customOptionsPreview: CustomOptionPreviewType[] | undefined;
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
index 398f0422b..f0bd0f66c 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
@@ -31,6 +31,7 @@ function ScenarioGeoJsonPreview(props: Props) {
     return (
         <MobilePreview
             className={_cs(styles.scenarioGeoJsonPreview, className)}
+            // FIXME: get this from 'look for'
             heading="You are looking for: mobile homes"
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 65f722e4f..91789d0f0 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -21,12 +21,15 @@ import {
 import TextInput from '#components/TextInput';
 import Heading from '#components/Heading';
 import SelectInput from '#components/SelectInput';
-import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
 import SegmentInput from '#components/SegmentInput';
-import { CustomOptionPreviewType } from '../utils';
+
+import {
+    TutorialTasks,
+    CustomOptionPreviewType,
+} from '../utils';
+import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
 import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
 import ChangeDetectionGeoJsonPreview from './ChangeDetectionGeoJsonPreview';
-
 import styles from './styles.css';
 
 type ScenarioType = {
@@ -69,11 +72,11 @@ interface Props {
     onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
     error: Error<PartialScenarioType> | undefined;
-    geoJson: GeoJSON.GeoJSON | undefined;
+    geoJson: TutorialTasks | undefined;
     projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
-    customOptionsPreview?: CustomOptionPreviewType[] | undefined;
+    customOptionsPreview?: CustomOptionPreviewType[];
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -109,6 +112,8 @@ export default function ScenarioPageInput(props: Props) {
 
     const previewPopUpData = value[activeSegmentInput];
 
+    // FIXME: need to filterout geojson
+
     return (
         <div className={styles.scenario}>
             <div className={styles.scenarioContent}>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 41a1b1d8b..57b3cc5dc 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -3,9 +3,7 @@ import {
     _cs,
     isDefined,
     unique,
-    getElementAround,
     isNotDefined,
-    randomString,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -32,12 +30,14 @@ import {
     MdOutlineUnpublished,
     MdAdd,
 } from 'react-icons/md';
+import {
+    IoIosTrash,
+} from 'react-icons/io';
 import { Link } from 'react-router-dom';
 
 import UserContext from '#base/context/UserContext';
 import projectTypeOptions from '#base/configs/projectTypes';
 import useMountedRef from '#hooks/useMountedRef';
-import useInputState from '#hooks/useInputState';
 import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
@@ -46,7 +46,6 @@ import SegmentInput from '#components/SegmentInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
 import ExpandableContainer from '#components/ExpandableContainer';
 import PopupButton from '#components/PopupButton';
-
 import TileServerInput, {
     TILE_SERVER_BING,
     tileServerDefaultCredits,
@@ -54,9 +53,7 @@ import TileServerInput, {
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import NonFieldError from '#components/NonFieldError';
-import SelectInput from '#components/SelectInput';
 import EmptyMessage from '#components/EmptyMessage';
-import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
 import {
     valueSelector,
     labelSelector,
@@ -67,21 +64,22 @@ import {
 } from '#utils/common';
 
 import {
+    tileServerUrls,
     tutorialFormSchema,
+    colorKeyToColorMap,
     TutorialFormType,
     PartialTutorialFormType,
     PartialInformationPagesType,
     ScenarioPagesType,
     CustomOptionType,
     InformationPagesType,
-    colorKeyToColorMap,
     InformationPageTemplateKey,
     infoPageTemplateOptions,
     infoPageBlocksMap,
-    tileServerUrls,
     ColorKey,
     CustomOptionPreviewType,
 } from './utils';
+import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
 import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
@@ -145,6 +143,8 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
     customOptions: defaultCustomOptions,
 };
 
+type SubmissionStatus = 'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed';
+
 interface Props {
     className?: string;
 }
@@ -158,6 +158,15 @@ function NewTutorial(props: Props) {
 
     const mountedRef = useMountedRef();
 
+    const popupElementRef = React.useRef<{
+        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+    }>(null);
+
+    const [
+        tutorialSubmissionStatus,
+        setTutorialSubmissionStatus,
+    ] = React.useState<SubmissionStatus | undefined>();
+
     const {
         setFieldValue,
         value,
@@ -168,54 +177,30 @@ function NewTutorial(props: Props) {
         value: defaultTutorialFormValue,
     });
 
-    const [
-        tutorialSubmissionStatus,
-        setTutorialSubmissionStatus,
-    ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
-
-    const [activeScenarioTab, setActiveScenarioTab] = React.useState(1);
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState(1);
-    const [activeInformationPage, setActiveInformationPage] = React.useState(1);
-    const [selectedInfoPageTemplate, setSelectedInfoPageTemplate] = useInputState<InformationPageTemplateKey>('1-picture');
-
-    const error = React.useMemo(
-        () => getErrorObject(formError),
-        [formError],
-    );
-    const scenarioError = React.useMemo(
-        () => getErrorObject(error?.scenarioPages),
-        [error?.scenarioPages],
-    );
-
-    const optionsError = React.useMemo(
-        () => getErrorObject(error?.customOptions),
-        [error?.customOptions],
-    );
-
-    const informationPagesError = React.useMemo(
-        () => getErrorObject(error?.informationPages),
-        [error?.informationPages],
-    );
+    const {
+        setValue: onScenarioFormChange,
+    } = useFormArray<
+        'scenarioPages',
+        ScenarioPagesType
+    >('scenarioPages', setFieldValue);
 
-    const previewGeoJson = React.useMemo((): GeoJSON.GeoJSON | undefined => {
-        const geojson = value.tutorialTasks;
+    const {
+        setValue: setOptionValue,
+        removeValue: onOptionRemove,
+    } = useFormArray<
+        'customOptions',
+        CustomOptionType
+    >('customOptions', setFieldValue);
 
-        if (!geojson) {
-            return undefined;
-        }
+    const {
+        setValue: setInformationPageValue,
+        removeValue: onInformationPageRemove,
+    } = useFormArray<
+        'informationPages',
+        InformationPagesType
+    >('informationPages', setFieldValue);
 
-        return {
-            ...geojson,
-            features: geojson.features.filter(
-                (screen) => screen.properties.screen === activeScenarioTab,
-            ),
-        };
-    }, [
-        value.tutorialTasks,
-        activeScenarioTab,
-    ]);
-
-    const handleFormSubmission = React.useCallback((
+    const handleSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
     ) => {
         const userId = user?.id;
@@ -243,8 +228,12 @@ function NewTutorial(props: Props) {
 
             try {
                 await navigator.clipboard.writeText(JSON.stringify(screens, null, 2));
+                // FIXME: remove this in production
+                // eslint-disable-next-line no-alert
                 alert('Tutorial JSON copied to clipboard.');
             } catch (err) {
+                // FIXME: remove this in production
+                // eslint-disable-next-line no-alert
                 alert(`Tutorial JSON could not be copied ${err}`);
             }
 
@@ -321,61 +310,23 @@ function NewTutorial(props: Props) {
         submitToFirebase();
     }, [user, mountedRef]);
 
-    const handleSubmitButtonClick = React.useMemo(
-        () => createSubmitHandler(validate, setError, handleFormSubmission),
-        [validate, setError, handleFormSubmission],
-    );
-
-    const {
-        setValue: onScenarioFormChange,
-    } = useFormArray<
-        'scenarioPages',
-        ScenarioPagesType
-    >('scenarioPages', setFieldValue);
-
-    const hasErrors = React.useMemo(
-        () => analyzeErrors(error),
-        [error],
+    const handleSubmitButtonClick = React.useCallback(
+        () => createSubmitHandler(validate, setError, handleSubmission),
+        [validate, setError, handleSubmission],
     );
 
-    const {
-        setValue: setOptionValue,
-        removeValue: onOptionRemove,
-    } = useFormArray<
-        'customOptions',
-        CustomOptionType
-    >('customOptions', setFieldValue);
-
     const handleOptionRemove = React.useCallback(
         (index: number) => {
-            const nextOption = getElementAround(value.customOptions ?? [], index);
             onOptionRemove(index);
-
-            if (nextOption) {
-                setActiveOptionsTab(nextOption.optionId);
-            }
         },
-        [onOptionRemove, value.customOptions],
+        [onOptionRemove],
     );
 
-    const {
-        setValue: setInformationPageValue,
-        removeValue: onInformationPageRemove,
-    } = useFormArray<
-        'informationPages',
-        InformationPagesType
-    >('informationPages', setFieldValue);
-
     const handleInformationPageRemove = React.useCallback(
         (index: number) => {
-            const nextInfoPage = getElementAround(value.informationPages ?? [], index);
             onInformationPageRemove(index);
-
-            if (nextInfoPage) {
-                setActiveInformationPage(nextInfoPage.pageNumber);
-            }
         },
-        [onInformationPageRemove, value.informationPages],
+        [onInformationPageRemove],
     );
 
     const handleAddDefineOptions = React.useCallback(
@@ -395,7 +346,7 @@ function NewTutorial(props: Props) {
                         optionId: newOptionId,
                         value: newValue,
                         icon: 'starOutline',
-                        title: 'Untitled',
+                        title: undefined,
                         iconColor: colorKeyToColorMap.gray,
                     };
 
@@ -410,15 +361,6 @@ function NewTutorial(props: Props) {
         ],
     );
 
-    const submissionPending = (
-        tutorialSubmissionStatus === 'started'
-        || tutorialSubmissionStatus === 'imageUpload'
-        || tutorialSubmissionStatus === 'tutorialSubmit'
-    );
-
-    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
-        || value.projectType === PROJECT_TYPE_COMPLETENESS;
-
     const handleGeoJsonFile = React.useCallback((
         geoProps: GeoJSON.GeoJSON | undefined,
     ) => {
@@ -441,10 +383,6 @@ function NewTutorial(props: Props) {
         setFieldValue(tutorialTaskArray, 'scenarioPages');
     }, [setFieldValue]);
 
-    const popupElementRef = React.useRef<{
-        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
-    }>(null);
-
     const handleAddInformationPage = React.useCallback(
         (template: InformationPageTemplateKey) => {
             setFieldValue(
@@ -455,12 +393,10 @@ function NewTutorial(props: Props) {
                         ? Math.max(...newOldValue.map((info) => info.pageNumber)) + 1
                         : 1;
 
-                    setActiveInformationPage(newPage);
-
                     const blocks = infoPageBlocksMap[template];
                     const newPageInformation: InformationPagesType = {
                         pageNumber: newPage,
-                        title: `Untitled page ${newPage}`,
+                        title: undefined,
                         blocks,
                     };
                     return [...newOldValue, newPageInformation];
@@ -472,6 +408,40 @@ function NewTutorial(props: Props) {
         [setFieldValue],
     );
 
+    const submissionPending = (
+        tutorialSubmissionStatus === 'started'
+        || tutorialSubmissionStatus === 'imageUpload'
+        || tutorialSubmissionStatus === 'tutorialSubmit'
+    );
+
+    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || value.projectType === PROJECT_TYPE_COMPLETENESS;
+
+    const error = React.useMemo(
+        () => getErrorObject(formError),
+        [formError],
+    );
+    const scenarioError = React.useMemo(
+        () => getErrorObject(error?.scenarioPages),
+        [error?.scenarioPages],
+    );
+
+    const optionsError = React.useMemo(
+        () => getErrorObject(error?.customOptions),
+        [error?.customOptions],
+    );
+
+    const informationPagesError = React.useMemo(
+        () => getErrorObject(error?.informationPages),
+        [error?.informationPages],
+    );
+
+    const hasErrors = React.useMemo(
+        () => analyzeErrors(error),
+        [error],
+    );
+
+    // FIXME: create helper function
     const tileServerAUrl = React.useMemo(() => {
         const tileServerName = value.tileServer?.name;
         if (isNotDefined(tileServerName)) {
@@ -483,6 +453,7 @@ function NewTutorial(props: Props) {
         return tileServerUrls[tileServerName];
     }, [value.tileServer?.name, value.tileServer?.url]);
 
+    // FIXME: create helper function
     const tileServerBUrl = React.useMemo(() => {
         const tileServerName = value.tileServerB?.name;
         if (isNotDefined(tileServerName)) {
@@ -494,14 +465,15 @@ 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;
+    // FIXME: we might not need this
+    const customOptionsPreview: CustomOptionPreviewType[] = React.useMemo(() => {
+        const customOptionsFromForm = value.customOptions;
+        if (isNotDefined(customOptionsFromForm)) {
+            return [];
         }
-        const finalValue = customOptions.map((custom) => (
+        const finalValue = customOptionsFromForm.map((custom) => (
             {
-                id: randomString(),
+                id: custom.optionId,
                 icon: custom.icon ?? 'removeOutline',
                 iconColor: custom.iconColor as ColorKey ?? 'gray',
             }
@@ -558,8 +530,8 @@ function NewTutorial(props: Props) {
                     heading="Information Pages"
                     actions={(
                         <PopupButton
+                            componentRef={popupElementRef}
                             name={undefined}
-                            className={styles.newInfoPageButton}
                             icons={<MdAdd />}
                             label="New Information Page"
                             popupContentClassName={styles.newInfoButtonPopup}
@@ -592,14 +564,25 @@ function NewTutorial(props: Props) {
                         {value.informationPages?.map((page, i) => (
                             <ExpandableContainer
                                 key={page.pageNumber}
-                                header={`Intro ${page.pageNumber}`}
+                                header={page.title || `Intro ${page.pageNumber}`}
+                                actions={(
+                                    <Button
+                                        name={i}
+                                        onClick={handleInformationPageRemove}
+                                        variant="action"
+                                        title="Delete page"
+                                    >
+                                        <IoIosTrash />
+                                    </Button>
+                                )}
                             >
                                 <InformationPageInput
                                     value={page}
                                     onChange={setInformationPageValue}
-                                    onRemove={handleInformationPageRemove}
+                                    // onRemove={handleInformationPageRemove}
                                     index={i}
                                     error={informationPagesError?.[page.pageNumber]}
+                                    disabled={submissionPending || projectTypeEmpty}
                                 />
                             </ExpandableContainer>
                         ))}
@@ -705,7 +688,6 @@ function NewTutorial(props: Props) {
                 }
                 <InputSection
                     heading="Scenarios"
-                    contentClassName={styles.scenarioContent}
                 >
                     <GeoJsonFileInput
                         name={'tutorialTasks' as const}
@@ -729,7 +711,7 @@ function NewTutorial(props: Props) {
                                     onChange={onScenarioFormChange}
                                     error={scenarioError?.[task.scenarioId]}
                                     customOptionsPreview={customOptionsPreview}
-                                    geoJson={previewGeoJson}
+                                    geoJson={value.tutorialTasks}
                                     url={tileServerAUrl}
                                     urlB={tileServerBUrl}
                                 />
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 20dafe7ba..58e5171e2 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -114,10 +114,6 @@
     }
 }
 
-.instruction-popup {
-    gap: var(--spacing-medium);
-}
-
 .new-info-button-popup {
     padding: var(--spacing-small) 0;
 
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 63ec1787c..868a3b534 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -9,12 +9,12 @@ import {
     ArraySchema,
     addCondition,
 } from '@togglecorp/toggle-form';
+
 import {
     TileServer,
     TileServerType,
     tileServerFieldsSchema,
 } from '#components/TileServerInput';
-
 import {
     getNoMoreThanNCharacterCondition,
     ProjectType,
@@ -30,20 +30,22 @@ const MAPBOX_KEY = process.env.REACT_APP_IMAGE_MAPBOX_API_KEY;
 const MAXAR_PREMIUM = process.env.REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY;
 const MAXAR_STANDARD = process.env.REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY;
 
-export type ColorKey = 'red'
-| 'pink'
-| 'purple'
-| 'deepPurple'
-| 'indigo'
-| 'blue'
-| 'cyan'
-| 'teal'
-| 'green'
-| 'lime'
-| 'yellow'
-| 'orange'
-| 'brown'
-| 'gray';
+export type ColorKey = (
+    'red'
+    | 'pink'
+    | 'purple'
+    | 'deepPurple'
+    | 'indigo'
+    | 'blue'
+    | 'cyan'
+    | 'teal'
+    | 'green'
+    | 'lime'
+    | 'yellow'
+    | 'orange'
+    | 'brown'
+    | 'gray'
+);
 
 export const colorKeyToColorMap: Record<ColorKey, string> = {
     red: '#D32F2F',
@@ -62,8 +64,9 @@ export const colorKeyToColorMap: Record<ColorKey, string> = {
     gray: '#757575',
 };
 
+// FIXME: we may not need this
 export interface CustomOptionPreviewType {
-    id: string;
+    id: number;
     icon: IconKey,
     iconColor: ColorKey,
 }
@@ -150,22 +153,17 @@ export const iconColorOptions: ColorOptions[] = [
 export const tileServerUrls: {
     [key in Exclude<TileServerType, 'custom'>]: string;
 } = {
-    bing:
-        `https://ecn.t0.tiles.virtualearth.net/tiles/a{quad_key}.jpeg?g=1&token=${BING_KEY}`,
-    mapbox:
-        `https://d.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=${MAPBOX_KEY}`,
-    maxar_premium:
-        `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_PREMIUM}`,
-    maxar_standard:
-        `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_STANDARD}`,
-    esri:
-        'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-    esri_beta:
-        'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    bing: `https://ecn.t0.tiles.virtualearth.net/tiles/a{quad_key}.jpeg?g=1&token=${BING_KEY}`,
+    mapbox: `https://d.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=${MAPBOX_KEY}`,
+    maxar_premium: `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_PREMIUM}`,
+    maxar_standard: `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_STANDARD}`,
+    esri: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    esri_beta: 'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
 };
 
 export type InformationPageTemplateKey = '1-picture' | '2-picture' | '3-picture';
-export interface InformationPageOption {
+
+interface InformationPageOption {
     key: InformationPageTemplateKey;
     label: string;
 }
@@ -177,17 +175,19 @@ export const infoPageTemplateOptions: InformationPageOption[] = [
     },
     {
         key: '2-picture',
-        label: 'With 2 picture',
+        label: 'With 2 pictures',
     },
     {
         key: '3-picture',
-        label: 'With 3 picture',
+        label: 'With 3 pictures',
     },
 ];
 
+type BlockType = 'text' | 'image';
+
 interface Block {
     blockNumber: number,
-    blockType: 'text' | 'image',
+    blockType: BlockType,
 }
 
 export const infoPageBlocksMap: Record<InformationPageTemplateKey, Block[]> = {
@@ -252,11 +252,11 @@ export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
     reference: number;
     screen: number;
     taskId: string;
-    // eslint-disable-next-line
+    // eslint-disable-next-line camelcase
     tile_x: number;
-    // eslint-disable-next-line
+    // eslint-disable-next-line camelcase
     tile_y: number;
-    // eslint-disable-next-line
+    // eslint-disable-next-line camelcase
     tile_z: number;
 }>;
 
@@ -279,7 +279,7 @@ export type InformationPages = {
     title: string;
     blocks: {
         blockNumber: number;
-        blockType: 'image' | 'text';
+        blockType: BlockType;
         textDescription?: string;
         imageFile?: File;
     }[];

From 6367424d33a5d7bba91eee42d19bb7f081fa1fc2 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 08:45:38 +0545
Subject: [PATCH 41/72] Fix UI for options

---
 .../components/ExpandableContainer/styles.css |   1 +
 .../NewProject/BasicProjectInfoForm/index.tsx |   2 +-
 .../CustomOptionPreview/index.tsx             |  19 ++-
 .../CustomOptionPreview/styles.css            |   1 +
 .../{SubOption => SubOptionInput}/index.tsx   |   9 +-
 .../{SubOption => SubOptionInput}/styles.css  |   0
 .../NewTutorial/CustomOptionInput/index.tsx   |  32 ++---
 .../NewTutorial/CustomOptionInput/styles.css  |   5 -
 .../InformationPageInput/Block/index.tsx      |   4 +-
 .../InformationPagePreview/index.tsx          |   4 +-
 .../InformationPageInput/index.tsx            |   2 +-
 .../FootprintGeoJsonPreview/index.tsx         |   2 +-
 .../app/views/NewTutorial/index.tsx           | 112 ++++++++++--------
 13 files changed, 106 insertions(+), 87 deletions(-)
 rename manager-dashboard/app/views/NewTutorial/CustomOptionInput/{SubOption => SubOptionInput}/index.tsx (88%)
 rename manager-dashboard/app/views/NewTutorial/CustomOptionInput/{SubOption => SubOptionInput}/styles.css (100%)

diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
index 94a88e25e..9c85ca3ef 100644
--- a/manager-dashboard/app/components/ExpandableContainer/styles.css
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -11,6 +11,7 @@
 
         .header {
             flex-grow: 1;
+            font-size: 1.2rem;
         }
 
         .icons {
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 69fd62e0a..7e9ebf938 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -225,7 +225,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
             </div>
             {(value.projectType === PROJECT_TYPE_FOOTPRINT && value?.customOptions) && (
                 <Card
-                    title="Define Options"
+                    title="Custom Options"
                     contentClassName={styles.card}
                 >
                     <Heading level={4}>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 50c0589b1..01d14f971 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import { iconMap } from '#utils/common';
-
+import {
+    colorKeyToColorMap,
+    PartialTutorialFormType,
+} from '../../utils';
 import styles from './styles.css';
 
 interface Props {
@@ -15,10 +17,13 @@ export default function CustomOptionPreview(props: Props) {
 
     return (
         <div className={styles.optionPreview}>
-            {value?.map((preview) => {
-                const Icon = preview.icon ? iconMap[preview.icon] : undefined;
+            {value?.map((preview, index) => {
+                const Icon = preview.icon
+                    ? iconMap[preview.icon]
+                    : iconMap.flagOutline;
+
                 const previewText = [
-                    preview.title,
+                    preview.title || `Option ${index + 1}`,
                     preview.description,
                 ].filter(Boolean).join(' - ');
 
@@ -30,7 +35,9 @@ export default function CustomOptionPreview(props: Props) {
                         {Icon && (
                             <div
                                 className={styles.previewIcon}
-                                style={{ backgroundColor: preview.iconColor }}
+                                style={{
+                                    backgroundColor: preview.iconColor || colorKeyToColorMap.gray,
+                                }}
                             >
                                 <Icon />
                             </div>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index 321b2617c..745055c4b 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -17,6 +17,7 @@
             display: flex;
             align-items: center;
             border-radius: 50%;
+            /* FIXME: do not hard code this if possible */
             padding: 3px;
             font-size: 30px;
         }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
similarity index 88%
rename from manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
index 44c41d833..4ed49e24a 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
@@ -20,6 +20,7 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     error: Error<PartialSubOptionType> | undefined;
+    disabled: boolean;
 }
 export default function SubOption(props: Props) {
     const {
@@ -28,6 +29,7 @@ export default function SubOption(props: Props) {
         onRemove,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
     const onReasonChange = useFormObject(index, onChange, { subOptionsId: 1 });
@@ -37,23 +39,26 @@ export default function SubOption(props: Props) {
         <div className={styles.subOptionContent}>
             <TextInput
                 className={styles.subOptionInput}
-                label="Description"
+                label="Title"
                 value={value.description}
                 name={'description' as const}
                 error={error?.description}
                 onChange={onReasonChange}
+                disabled={disabled}
             />
             <NumberInput
                 className={styles.subOptionInput}
                 label="Value"
                 value={value.value}
                 name={'value' as const}
-                error={error?.description}
+                error={error?.value}
                 onChange={onReasonChange}
+                disabled={disabled}
             />
             <Button
                 name={index}
                 onClick={onRemove}
+                disabled={disabled}
             >
                 Remove
             </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css
rename to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 42fba473b..c8fd43178 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -15,7 +15,7 @@ import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 import NonFieldError from '#components/NonFieldError';
 
-import SubOption from './SubOption';
+import SubOptionInput from './SubOptionInput';
 import {
     ColorOptions,
     PartialTutorialFormType,
@@ -26,7 +26,7 @@ import styles from './styles.css';
 import { IconItem, iconList } from '#utils/common';
 
 export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
-const defaultcustomOptionsValue: PartialCustomOptionsType = {
+const defaultCustomOptionsValue: PartialCustomOptionsType = {
     optionId: 1,
 };
 
@@ -35,21 +35,21 @@ type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number
 interface Props {
     value: PartialCustomOptionsType;
     onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void;
-    onRemove: (index: number) => void;
     index: number;
     error: Error<PartialCustomOptionsType> | undefined;
+    disabled: boolean;
 }
 
 export default function CustomOptionInput(props: Props) {
     const {
         value,
         onChange,
-        onRemove,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
-    const onOptionChange = useFormObject(index, onChange, defaultcustomOptionsValue);
+    const onOptionChange = useFormObject(index, onChange, defaultCustomOptionsValue);
 
     const {
         setValue: onsubOptionsAdd,
@@ -63,7 +63,7 @@ export default function CustomOptionInput(props: Props) {
         [error?.subOptions],
     );
 
-    const handlesubOptionsAdd = React.useCallback(
+    const handleSubOptionsAdd = React.useCallback(
         () => {
             onOptionChange(
                 (oldValue: PartialCustomOptionsType['subOptions']) => {
@@ -95,6 +95,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'title' as const}
                     onChange={onOptionChange}
                     error={error?.title}
+                    disabled={disabled}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -106,6 +107,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: IconItem) => d.label}
                     onChange={onOptionChange}
                     error={error?.icon}
+                    disabled={disabled}
                 />
             </div>
             <div className={styles.optionContent}>
@@ -116,6 +118,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'value' as const}
                     onChange={onOptionChange}
                     error={error?.value}
+                    disabled={disabled}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -127,6 +130,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: ColorOptions) => d.label}
                     onChange={onOptionChange}
                     error={error?.iconColor}
+                    disabled={disabled}
                 />
             </div>
             <TextInput
@@ -136,14 +140,9 @@ export default function CustomOptionInput(props: Props) {
                 name={'description' as const}
                 onChange={onOptionChange}
                 error={error?.description}
+                disabled={disabled}
             />
-            <Button
-                name={index}
-                onClick={onRemove}
-                className={styles.removeButton}
-            >
-                Remove Option
-            </Button>
+            {/* FIXME: use accordion open by default */}
             <div className={styles.subOptions}>
                 <Heading level={5}>
                     Sub Options
@@ -152,13 +151,14 @@ export default function CustomOptionInput(props: Props) {
                     error={subOptionsError}
                 />
                 {value.subOptions?.map((sub, i) => (
-                    <SubOption
+                    <SubOptionInput
                         key={sub.subOptionsId}
                         value={sub}
                         index={i}
                         onChange={onsubOptionsAdd}
                         onRemove={onsubOptionsRemove}
                         error={subOptionsError?.[sub.subOptionsId]}
+                        disabled={disabled}
                     />
                 ))}
                 {!value.subOptions?.length && (
@@ -168,8 +168,8 @@ export default function CustomOptionInput(props: Props) {
                     name="addSubOption"
                     className={styles.addButton}
                     icons={<MdAdd />}
-                    onClick={handlesubOptionsAdd}
-                    disabled={value.subOptions && value.subOptions.length >= 6}
+                    onClick={handleSubOptionsAdd}
+                    disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
                 >
                     Add Sub Options
                 </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
index d4c305ebb..044a38345 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -16,11 +16,6 @@
         }
     }
 
-    .remove-button {
-        align-self: end;
-        width: fit-content;
-    }
-
     .add-button {
         width: fit-content;
     }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
index dd3811144..335318b87 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
@@ -6,10 +6,10 @@ import {
     getErrorObject,
 } from '@togglecorp/toggle-form';
 
-import { PartialBlocksType } from '#views/NewTutorial/utils';
 import FileInput from '#components/FileInput';
 import MarkdownEditor from '#components/MarkdownEditor';
 
+import { PartialBlocksType } from '../../utils';
 // import styles from './styles.css';
 
 type PartialBlockType = NonNullable<PartialBlocksType>[number];
@@ -50,7 +50,7 @@ export default function Block(props: Props) {
                     name={'imageFile' as const}
                     value={value?.imageFile}
                     onChange={onBlockChange}
-                    label={`Block ${index + 1}`}
+                    label={`Block #${index + 1}`}
                     hint="Make sure you have the rights to
                     use this image. It should end with  .jpg or .png."
                     accept="image/png, image/jpeg"
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 714017df8..763834abc 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import MobilePreview from '#components/MobilePreview';
 import Preview from '#components/Preview';
+import MarkdownPreview from '#components/MarkdownPreview';
 
+import { PartialTutorialFormType } from '../../utils';
 import styles from './styles.css';
-import MarkdownPreview from '#components/MarkdownPreview';
 
 interface Props {
     value: NonNullable<PartialTutorialFormType['informationPages']>[number];
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 83fd61f05..44ebc72a9 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -53,7 +53,7 @@ export default function InformationPageInput(props: Props) {
                 <TextInput
                     name={'title' as const}
                     value={value?.title}
-                    label="Page Title"
+                    label="Title"
                     onChange={onInformationPageChange}
                     error={error?.title}
                     disabled={disabled}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 66b33e111..f771ad72b 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -3,9 +3,9 @@ import { _cs } from '@togglecorp/fujs';
 
 import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
-import { CustomOptionPreviewType } from '#views/NewTutorial/utils';
 import { IconKey, iconMap } from '#utils/common';
 
+import { CustomOptionPreviewType } from '../../utils';
 import styles from './styles.css';
 
 interface Props {
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 57b3cc5dc..ba4f1ec9c 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -345,16 +345,15 @@ function NewTutorial(props: Props) {
                     const newDefineOption: CustomOptionType = {
                         optionId: newOptionId,
                         value: newValue,
-                        icon: 'starOutline',
+                        icon: undefined,
                         title: undefined,
-                        iconColor: colorKeyToColorMap.gray,
+                        iconColor: undefined,
                     };
 
                     return [...safeOldValues, newDefineOption];
                 },
                 'customOptions',
             );
-            // TODO: Set the new option as selected
         },
         [
             setFieldValue,
@@ -526,6 +525,65 @@ function NewTutorial(props: Props) {
                         />
                     </div>
                 </InputSection>
+                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
+                    <InputSection
+                        heading="Custom Options"
+                        actions={(
+                            <Button
+                                name={undefined}
+                                icons={<MdAdd />}
+                                onClick={handleAddDefineOptions}
+                                disabled={
+                                    submissionPending
+                                    || projectTypeEmpty
+                                    || (value.customOptions && value.customOptions?.length >= 6)
+                                }
+                            >
+                                Add Option
+                            </Button>
+                        )}
+                    >
+                        <NonFieldError
+                            error={optionsError}
+                        />
+                        {value.customOptions?.length ? (
+                            <div className={styles.customOptionContainer}>
+                                <div className={styles.customOptionList}>
+                                    {value.customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.optionId}
+                                            header={option.title || `Option ${index + 1}`}
+                                            actions={(
+                                                <Button
+                                                    name={index}
+                                                    onClick={handleOptionRemove}
+                                                    variant="action"
+                                                    title="Delete Option"
+                                                >
+                                                    <IoIosTrash />
+                                                </Button>
+                                            )}
+                                        >
+                                            <CustomOptionInput
+                                                key={option.optionId}
+                                                value={option}
+                                                index={index}
+                                                onChange={setOptionValue}
+                                                error={optionsError?.[option.optionId]}
+                                                disabled={submissionPending}
+                                            />
+                                        </ExpandableContainer>
+                                    ))}
+                                </div>
+                                <CustomOptionPreview
+                                    value={value.customOptions}
+                                />
+                            </div>
+                        ) : (
+                            <div>No sub-options at the moment</div>
+                        )}
+                    </InputSection>
+                )}
                 <InputSection
                     heading="Information Pages"
                     actions={(
@@ -594,54 +652,6 @@ function NewTutorial(props: Props) {
                         )}
                     </div>
                 </InputSection>
-                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
-                    <InputSection
-                        heading="Define Options"
-                        actions={(
-                            <Button
-                                name="addInstruction"
-                                icons={<MdAdd />}
-                                onClick={handleAddDefineOptions}
-                                disabled={
-                                    value.customOptions
-                                    && value.customOptions?.length >= 6
-                                }
-                            >
-                                Add Option
-                            </Button>
-                        )}
-                    >
-                        <NonFieldError
-                            error={optionsError}
-                        />
-                        {value.customOptions?.length ? (
-                            <div className={styles.customOptionContainer}>
-                                <div className={styles.customOptionList}>
-                                    {value.customOptions.map((option, index) => (
-                                        <ExpandableContainer
-                                            key={option.optionId}
-                                            header={`Option ${option.optionId}`}
-                                        >
-                                            <CustomOptionInput
-                                                key={option.optionId}
-                                                value={option}
-                                                index={index}
-                                                onChange={setOptionValue}
-                                                onRemove={handleOptionRemove}
-                                                error={optionsError?.[option.optionId]}
-                                            />
-                                        </ExpandableContainer>
-                                    ))}
-                                </div>
-                                <CustomOptionPreview
-                                    value={value.customOptions}
-                                />
-                            </div>
-                        ) : (
-                            <div>No sub-options at the moment</div>
-                        )}
-                    </InputSection>
-                )}
                 <InputSection
                     heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
                 >

From 11f01865d6fe949a43245d14c490335206852592 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 23 Jun 2023 08:53:57 +0545
Subject: [PATCH 42/72] Improve styling of mobile preview

---
 manager-dashboard/app/Base/styles.css         |  5 ++-
 .../app/components/GeoJsonPreview/index.tsx   |  1 +
 .../app/components/MobilePreview/index.tsx    | 30 ++++++++-----
 .../app/components/MobilePreview/styles.css   | 36 ++++++++++++---
 .../InformationPagePreview/index.tsx          |  2 +-
 .../ChangeDetectionGeoJsonPreview/index.tsx   |  1 +
 .../ChangeDetectionGeoJsonPreview/styles.css  | 11 ++++-
 .../FootprintGeoJsonPreview/index.tsx         | 11 +++--
 .../FootprintGeoJsonPreview/styles.css        | 44 ++++++++++++-------
 .../NewTutorial/ScenarioPageInput/index.tsx   | 10 ++++-
 .../NewTutorial/ScenarioPageInput/styles.css  |  6 +--
 .../app/views/NewTutorial/index.tsx           |  1 +
 12 files changed, 114 insertions(+), 44 deletions(-)

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index 14d77e411..d96a574db 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -99,7 +99,10 @@ p {
     --width-navbar-content-max: 76rem;
 
     --width-mobile-preview: 22rem;
-    --height-mobile-preview: 30rem;
+    --height-mobile-preview: 40rem;
+    --height-mobile-preview-builarea-content: 30rem;
+    --height-mobile-preview-footprint-content: 22rem;
+    --height-mobile-preview-change-detection-content: 14rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 337d13246..748392fb7 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -65,6 +65,7 @@ function GeoJsonPreview(props: Props) {
             if (mapContainerRef.current && !mapRef.current) {
                 mapRef.current = createMap(mapContainerRef.current, {
                     zoomSnap: 0,
+                    scrollWheelZoom: false,
                 });
             }
 
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index aecf29509..cbbce23de 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoArrowBack } from 'react-icons/io5';
+import { IoArrowBack, IoInformationCircleOutline } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
 import Heading from '#components/Heading';
@@ -15,6 +15,7 @@ interface Props {
     popupDescription?: React.ReactNode;
     popupIcons?: React.ReactNode;
     contentClassName?: string;
+    popupClassName?: string;
 }
 
 function MobilePreview(props: Props) {
@@ -27,6 +28,7 @@ function MobilePreview(props: Props) {
         popupDescription,
         popupIcons,
         contentClassName,
+        popupClassName,
     } = props;
 
     return (
@@ -37,19 +39,23 @@ function MobilePreview(props: Props) {
                 </div>
                 <Heading
                     className={styles.heading}
-                    level={4}
+                    level={5}
                 >
-                    {heading}
-                </Heading>
-                {actions && (
-                    <div className={styles.actions}>
-                        {actions}
+                    <div className={styles.label}>
+                        You are looking for:
                     </div>
-                )}
+                    <div>
+                        {heading}
+                    </div>
+                </Heading>
+                <div className={styles.actions}>
+                    {actions}
+                    <IoInformationCircleOutline className={styles.infoIcon} />
+                </div>
             </div>
-            <div className={_cs(styles.content, contentClassName)}>
+            <div className={styles.contentContainer}>
                 {(popupTitle || popupDescription || popupIcons) && (
-                    <div className={styles.popup}>
+                    <div className={_cs(styles.popup, popupClassName)}>
                         <div className={styles.details}>
                             <div>
                                 {popupTitle}
@@ -63,7 +69,9 @@ function MobilePreview(props: Props) {
                         </div>
                     </div>
                 )}
-                {children}
+                <div className={_cs(styles.content, contentClassName)}>
+                    {children}
+                </div>
             </div>
         </div>
     );
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index f9c132dd6..ed1d822e5 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -6,34 +6,56 @@
     background-color: var(--color-black);
     padding: var(--spacing-small) 0;
     width: var(--width-mobile-preview);
+    height: var(--height-mobile-preview);
     color: var(--color-text-on-dark);
 
     .header {
         display: flex;
+        flex-shrink: 0;
         background-color: var(--color-primary);
         padding: var(--spacing-medium);
         gap: var(--spacing-medium);
 
+        .heading {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            text-align: center;
+
+            .label {
+                font-weight: var(--font-weight-medium);
+            }
+        }
+
         .icons {
             .back-icon {
-                font-size: 1.2rem;
+                font-size: 2rem;
             }
+        }
 
-            .heading {
-                flex-grow: 1;
-            }
+        .actions {
+            flex-shrink: 0;
 
-            .actions {
-                flex-shrink: 0;
+            .info-icon {
+                font-size: 1.6rem;
             }
         }
     }
 
-    .content {
+    .content-container {
+        display: flex;
         position: relative;
+        flex-direction: column;
         flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
+        padding: 1rem;
+        overflow: auto;
+
+        .content {
+            flex-grow: 1;
+            overflow: auto;
+        }
 
         .popup {
             display: flex;
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 763834abc..1dfe31a4c 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -22,7 +22,7 @@ export default function InformationPagePreview(props: Props) {
         <MobilePreview
             className={styles.informationPreview}
             // FIXME: get this from 'look for'
-            heading="You are looking for: mobile homes"
+            heading="mobile homes"
             contentClassName={styles.content}
         >
             {value?.title || `Intro ${index + 1}`}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 8d27e93e4..000f7e999 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -38,6 +38,7 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
             contentClassName={styles.content}
+            popupClassName={styles.popup}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
index 87b18c721..a43f4a1b2 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
@@ -2,11 +2,18 @@
     .content {
         display: flex;
         flex-direction: column;
-        padding: var(--spacing-medium);
+        justify-content: space-between;
         gap: var(--spacing-extra-large);
 
         .map-preview {
-            height: 16rem;
+            align-self: center;
+            width: var(--height-mobile-preview-change-detection-content);
+            height: var(--height-mobile-preview-change-detection-content);
         }
     }
+
+    .popup {
+        top: 50%!important;
+        transform: translateY(-50%);
+    }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index f771ad72b..3a88ea9b1 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -37,6 +37,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
+            contentClassName={styles.content}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
@@ -49,10 +50,14 @@ export default function FootprintGeoJsonPreview(props: Props) {
                     return (
                         <div
                             key={option.id}
-                            className={styles.option}
-                            style={{ backgroundColor: option.iconColor }}
+                            className={styles.optionContainer}
                         >
-                            <Icon />
+                            <div
+                                className={styles.option}
+                                style={{ backgroundColor: option.iconColor }}
+                            >
+                                <Icon />
+                            </div>
                         </div>
                     );
                 })}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
index 4f4297fc4..fba8474d7 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
@@ -1,22 +1,36 @@
 .footprint-geo-json-preview {
-    .map-preview {
-        position: relative;
-        z-index: 0;
-        height: var(--height-mobile-preview);
-    }
-
-    .options {
+    .content {
         display: flex;
-        justify-content: center;
-        padding: var(--spacing-large);
+        flex-direction: column;
         gap: var(--spacing-large);
 
-        .option {
-            display: flex;
-            align-items: center;
-            border-radius: 50%;
-            padding: var(--spacing-small);
-            font-size: var(--font-size-extra-large);
+        .map-preview {
+            position: relative;
+            z-index: 0;
+            height: var(--height-mobile-preview-footprint-content);
+        }
+
+        .options {
+            display: grid;
+            flex-grow: 1;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: var(--spacing-large);
+
+            .option-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .option {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    font-size: var(--font-size-extra-large);
+                }
+            }
         }
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 91789d0f0..da7f533dc 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -77,6 +77,7 @@ interface Props {
     url: string | undefined;
     urlB: string | undefined;
     customOptionsPreview?: CustomOptionPreviewType[];
+    scenarioId: number;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -85,11 +86,12 @@ export default function ScenarioPageInput(props: Props) {
         onChange,
         index,
         error: riskyError,
-        geoJson,
+        geoJson: geoJsonFromProps,
         url,
         projectType,
         urlB,
         customOptionsPreview,
+        scenarioId,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
@@ -105,6 +107,12 @@ export default function ScenarioPageInput(props: Props) {
     const instructionsError = getErrorObject(error?.instruction);
     const hintError = getErrorObject(error?.hint);
     const successError = getErrorObject(error?.success);
+    const geoJson = {
+        ...geoJsonFromProps,
+        features: geoJsonFromProps?.features.filter(
+            (feature) => feature.properties.screen === scenarioId,
+        ),
+    };
 
     const handleScenarioType = React.useCallback((scenarioSegment: ScenarioSegmentType['value']) => {
         setActiveInput(scenarioSegment);
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
index 2f90f8f82..20e8b2e57 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
@@ -7,11 +7,11 @@
         flex-basis: 65%;
         flex-direction: column;
         gap: var(--spacing-large);
-        
+
         .scenario-form {
             display: flex;
             gap: var(--spacing-medium);
-            
+
             .scenario-form-content {
                 display: flex;
                 flex-basis: 80%;
@@ -26,4 +26,4 @@
         align-items: center;
         flex-direction: column;
     }
-}
\ No newline at end of file
+}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index ba4f1ec9c..1a2ba986b 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -715,6 +715,7 @@ function NewTutorial(props: Props) {
                             >
                                 <ScenarioPageInput
                                     key={task.scenarioId}
+                                    scenarioId={task.scenarioId}
                                     index={index}
                                     value={task}
                                     projectType={value.projectType}

From 8a7b4d7bbabc2bfcaa86d2444744590d5750c4ea Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 12:25:24 +0545
Subject: [PATCH 43/72] Fix issue with submission of form

- Fix issue with submission of information pages
- Re-calculate page number for information page
- Move components to views
- Open prop to expand exandable container
- Add headingLabel on MobilePreview
- Pass disabled prop on inputs
- Set ESRI as defualt tileserver b
- Update type for geojson type
---
 .../components/ExpandableContainer/index.tsx  |   4 +-
 .../components/ExpandableContainer/styles.css |   1 +
 .../app/components/MobilePreview/index.tsx    |   4 +-
 .../Home}/OrganisationFormModal/index.tsx     |   0
 .../Home}/OrganisationFormModal/styles.css    |   0
 .../Home}/OrganisationList/index.tsx          |   0
 .../Home}/OrganisationList/styles.css         |   0
 .../Home}/TutorialList/index.tsx              |   0
 .../Home}/TutorialList/styles.css             |   0
 manager-dashboard/app/views/Home/index.tsx    |   6 +-
 .../app/views/NewProject/index.tsx            |   5 +-
 .../CustomOptionPreview/index.tsx             |  13 ++-
 .../CustomOptionPreview/styles.css            |  38 +++---
 .../InformationPagePreview/index.tsx          |   1 +
 .../InformationPagePreview/styles.css         |   8 +-
 .../ChangeDetectionGeoJsonPreview/index.tsx   |   7 +-
 .../FootprintGeoJsonPreview/index.tsx         |  10 +-
 .../ScenarioGeoJsonPreview/index.tsx          |   6 +-
 .../NewTutorial/ScenarioPageInput/index.tsx   |  78 +++++++++----
 .../app/views/NewTutorial/index.tsx           | 108 +++++++++++-------
 .../app/views/NewTutorial/styles.css          |  12 --
 .../app/views/NewTutorial/utils.ts            |  65 +++++++++--
 22 files changed, 238 insertions(+), 128 deletions(-)
 rename manager-dashboard/app/{components => views/Home}/OrganisationFormModal/index.tsx (100%)
 rename manager-dashboard/app/{components => views/Home}/OrganisationFormModal/styles.css (100%)
 rename manager-dashboard/app/{components => views/Home}/OrganisationList/index.tsx (100%)
 rename manager-dashboard/app/{components => views/Home}/OrganisationList/styles.css (100%)
 rename manager-dashboard/app/{components => views/Home}/TutorialList/index.tsx (100%)
 rename manager-dashboard/app/{components => views/Home}/TutorialList/styles.css (100%)

diff --git a/manager-dashboard/app/components/ExpandableContainer/index.tsx b/manager-dashboard/app/components/ExpandableContainer/index.tsx
index bedb48581..c94b8784b 100644
--- a/manager-dashboard/app/components/ExpandableContainer/index.tsx
+++ b/manager-dashboard/app/components/ExpandableContainer/index.tsx
@@ -12,6 +12,7 @@ interface Props {
     actions?: React.ReactNode;
     className?: string;
     children?: React.ReactNode;
+    openByDefault?: boolean;
 }
 
 function ExpandableContainer(props: Props) {
@@ -21,9 +22,10 @@ function ExpandableContainer(props: Props) {
         icons,
         header,
         actions,
+        openByDefault = false,
     } = props;
 
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [isExpanded, setIsExpanded] = React.useState(openByDefault);
 
     return (
         <div
diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
index 9c85ca3ef..c7c66c2a5 100644
--- a/manager-dashboard/app/components/ExpandableContainer/styles.css
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -7,6 +7,7 @@
         border: var(--width-separator-thin) solid var(--color-separator);
         border-top-left-radius: var(--radius-card-border);
         border-top-right-radius: var(--radius-card-border);
+        background-color: var(--color-background-accent-hint);
         padding: var(--spacing-medium);
 
         .header {
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index cbbce23de..47962cb63 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -8,6 +8,7 @@ import styles from './styles.css';
 
 interface Props {
     className?: string;
+    headingLabel?: React.ReactNode;
     heading?: React.ReactNode;
     actions?: React.ReactNode;
     children?: React.ReactNode;
@@ -21,6 +22,7 @@ interface Props {
 function MobilePreview(props: Props) {
     const {
         className,
+        headingLabel,
         heading,
         actions,
         children,
@@ -42,7 +44,7 @@ function MobilePreview(props: Props) {
                     level={5}
                 >
                     <div className={styles.label}>
-                        You are looking for:
+                        {headingLabel}
                     </div>
                     <div>
                         {heading}
diff --git a/manager-dashboard/app/components/OrganisationFormModal/index.tsx b/manager-dashboard/app/views/Home/OrganisationFormModal/index.tsx
similarity index 100%
rename from manager-dashboard/app/components/OrganisationFormModal/index.tsx
rename to manager-dashboard/app/views/Home/OrganisationFormModal/index.tsx
diff --git a/manager-dashboard/app/components/OrganisationFormModal/styles.css b/manager-dashboard/app/views/Home/OrganisationFormModal/styles.css
similarity index 100%
rename from manager-dashboard/app/components/OrganisationFormModal/styles.css
rename to manager-dashboard/app/views/Home/OrganisationFormModal/styles.css
diff --git a/manager-dashboard/app/components/OrganisationList/index.tsx b/manager-dashboard/app/views/Home/OrganisationList/index.tsx
similarity index 100%
rename from manager-dashboard/app/components/OrganisationList/index.tsx
rename to manager-dashboard/app/views/Home/OrganisationList/index.tsx
diff --git a/manager-dashboard/app/components/OrganisationList/styles.css b/manager-dashboard/app/views/Home/OrganisationList/styles.css
similarity index 100%
rename from manager-dashboard/app/components/OrganisationList/styles.css
rename to manager-dashboard/app/views/Home/OrganisationList/styles.css
diff --git a/manager-dashboard/app/components/TutorialList/index.tsx b/manager-dashboard/app/views/Home/TutorialList/index.tsx
similarity index 100%
rename from manager-dashboard/app/components/TutorialList/index.tsx
rename to manager-dashboard/app/views/Home/TutorialList/index.tsx
diff --git a/manager-dashboard/app/components/TutorialList/styles.css b/manager-dashboard/app/views/Home/TutorialList/styles.css
similarity index 100%
rename from manager-dashboard/app/components/TutorialList/styles.css
rename to manager-dashboard/app/views/Home/TutorialList/styles.css
diff --git a/manager-dashboard/app/views/Home/index.tsx b/manager-dashboard/app/views/Home/index.tsx
index ef2c69073..ad1c09bd8 100644
--- a/manager-dashboard/app/views/Home/index.tsx
+++ b/manager-dashboard/app/views/Home/index.tsx
@@ -12,12 +12,12 @@ import SmartLink from '#base/components/SmartLink';
 import useBooleanState from '#hooks/useBooleanState';
 
 import Button from '#components/Button';
-import OrganisationFormModal from '#components/OrganisationFormModal';
-import TutorialList from '#components/TutorialList';
-import OrganisationList from '#components/OrganisationList';
 import TextInput from '#components/TextInput';
 import useInputState from '#hooks/useInputState';
 
+import OrganisationFormModal from './OrganisationFormModal';
+import OrganisationList from './OrganisationList';
+import TutorialList from './TutorialList';
 import styles from './styles.css';
 
 interface Props {
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index 8257eef12..1241f6438 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -38,6 +38,7 @@ import SegmentInput from '#components/SegmentInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
 import TileServerInput, {
     TILE_SERVER_BING,
+    TILE_SERVER_ESRI,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
@@ -88,8 +89,8 @@ const defaultProjectFormValue: PartialProjectFormType = {
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
     // maxTasksPerUser: -1,
     inputType: PROJECT_INPUT_TYPE_UPLOAD,
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 01d14f971..5721f7eb9 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
+
 import { iconMap } from '#utils/common';
+import MobilePreview from '#components/MobilePreview';
+
 import {
     colorKeyToColorMap,
     PartialTutorialFormType,
@@ -16,7 +19,13 @@ export default function CustomOptionPreview(props: Props) {
     } = props;
 
     return (
-        <div className={styles.optionPreview}>
+        <MobilePreview
+            className={styles.optionPreview}
+            contentClassName={styles.content}
+            // FIXME: get this from 'look for'
+            heading="mobile homes"
+            headingLabel="You are looking for:"
+        >
             {value?.map((preview, index) => {
                 const Icon = preview.icon
                     ? iconMap[preview.icon]
@@ -48,6 +57,6 @@ export default function CustomOptionPreview(props: Props) {
                     </div>
                 );
             })}
-        </div>
+        </MobilePreview>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index 745055c4b..b249962ab 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -1,29 +1,27 @@
 .option-preview {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-primary);
-    padding: var(--spacing-large);
-    gap: var(--spacing-large);
-    width: var(--width-mobile-preview);
-    height: var(--height-mobile-preview);
-
-    .preview-content {
+    .content {
         display: flex;
-        align-items: center;
-        gap: var(--spacing-medium);
-        color: var(--color-text-on-dark);
+        flex-direction: column;
+        gap: var(--spacing-large);
 
-        .preview-icon {
+        .preview-content {
             display: flex;
             align-items: center;
-            border-radius: 50%;
-            /* FIXME: do not hard code this if possible */
-            padding: 3px;
-            font-size: 30px;
-        }
+            gap: var(--spacing-medium);
+            color: var(--color-text-on-dark);
+
+            .preview-icon {
+                display: flex;
+                align-items: center;
+                border-radius: 50%;
+                /* FIXME: do not hard code this if possible */
+                padding: 3px;
+                font-size: 30px;
+            }
 
-        .preview-text {
-            font-size: var(--font-size-small);
+            .preview-text {
+                font-size: var(--font-size-small);
+            }
         }
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 1dfe31a4c..d287a7b8f 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -23,6 +23,7 @@ export default function InformationPagePreview(props: Props) {
             className={styles.informationPreview}
             // FIXME: get this from 'look for'
             heading="mobile homes"
+            headingLabel="You are looking for:"
             contentClassName={styles.content}
         >
             {value?.title || `Intro ${index + 1}`}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
index 2fa4c1f40..ede3cde41 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -1,15 +1,11 @@
 .information-preview {
+    overflow: auto;
+
     .content {
         display: flex;
         gap: var(--spacing-large);
         flex-direction: column;
-        padding: var(--spacing-large);
     }
-    background-color: var(--color-primary);
-    width: var(--width-mobile-preview);
-    height: var(--height-mobile-preview);
-    overflow: auto;
-    color: var(--color-text-on-dark);
 
     .image-preview {
         height: 10rem;
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 000f7e999..2baa78c58 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -5,11 +5,12 @@ import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { iconMap, IconKey } from '#utils/common';
 
+import { ChangeDetectionGeoJSON } from '../../utils';
 import styles from './styles.css';
 
 interface Props {
     className?: string;
-    geoJson: GeoJSON.GeoJSON | undefined;
+    geoJson: ChangeDetectionGeoJSON | undefined;
     previewPopUp?: {
         title?: string;
         description?: string;
@@ -33,7 +34,9 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
     return (
         <MobilePreview
             className={_cs(styles.changeDetectionGeoJsonPreview, className)}
-            heading="You are looking for: mobile homes"
+            // FIXME: get this from 'look for'
+            heading="mobile homes"
+            headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 3a88ea9b1..9dc99c1bf 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -5,12 +5,12 @@ import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { IconKey, iconMap } from '#utils/common';
 
-import { CustomOptionPreviewType } from '../../utils';
+import { CustomOptionPreviewType, FootprintGeoJSON } from '../../utils';
 import styles from './styles.css';
 
 interface Props {
     className?: string;
-    geoJson: GeoJSON.GeoJSON | undefined;
+    geoJson: FootprintGeoJSON | undefined;
     previewPopUp?: {
         title?: string;
         description?: string;
@@ -33,11 +33,13 @@ export default function FootprintGeoJsonPreview(props: Props) {
     return (
         <MobilePreview
             className={_cs(styles.footprintGeoJsonPreview, className)}
-            heading="You are looking for: mobile homes"
+            contentClassName={styles.content}
+            // FIXME: get this from 'look for'
+            heading="mobile homes"
+            headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
-            contentClassName={styles.content}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
index f0bd0f66c..4c4b6f8ae 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
@@ -5,11 +5,12 @@ import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { iconMap, IconKey } from '#utils/common';
 
+import { BuildAreaGeoJSON } from '../../utils';
 import styles from './styles.css';
 
 interface Props {
     className?: string;
-    geoJson: GeoJSON.GeoJSON | undefined;
+    geoJson: BuildAreaGeoJSON | undefined;
     previewPopUp?: {
         title?: string;
         description?: string;
@@ -32,7 +33,8 @@ function ScenarioGeoJsonPreview(props: Props) {
         <MobilePreview
             className={_cs(styles.scenarioGeoJsonPreview, className)}
             // FIXME: get this from 'look for'
-            heading="You are looking for: mobile homes"
+            heading="mobile homes"
+            headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
             popupTitle={previewPopUp?.title ?? 'Title'}
             popupDescription={previewPopUp?.description ?? 'Description'}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index da7f533dc..73dcd4cd8 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -24,7 +24,10 @@ import SelectInput from '#components/SelectInput';
 import SegmentInput from '#components/SegmentInput';
 
 import {
-    TutorialTasks,
+    TutorialTasksGeoJSON,
+    FootprintGeoJSON,
+    BuildAreaGeoJSON,
+    ChangeDetectionGeoJSON,
     CustomOptionPreviewType,
 } from '../utils';
 import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
@@ -72,12 +75,13 @@ interface Props {
     onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
     index: number,
     error: Error<PartialScenarioType> | undefined;
-    geoJson: TutorialTasks | undefined;
+    geoJson: TutorialTasksGeoJSON | undefined;
     projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
     customOptionsPreview?: CustomOptionPreviewType[];
     scenarioId: number;
+    disabled: boolean;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -92,36 +96,55 @@ export default function ScenarioPageInput(props: Props) {
         urlB,
         customOptionsPreview,
         scenarioId,
+        disabled,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
 
-    const onFieldChange = useFormObject(index, onChange, defaultScenarioTabsValue);
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        defaultScenarioTabsValue,
+    );
 
-    const onInstructionFieldChange = useFormObject<'instruction', PartialScenarioType['instruction']>('instruction', onFieldChange, {});
-    const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>('hint', onFieldChange, {});
-    const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>('success', onFieldChange, {});
+    const onInstructionFieldChange = useFormObject<'instruction', PartialScenarioType['instruction']>(
+        'instruction',
+        onFieldChange,
+        {},
+    );
+    const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>(
+        'hint',
+        onFieldChange,
+        {},
+    );
+    const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>(
+        'success',
+        onFieldChange,
+        {},
+    );
 
     const error = getErrorObject(riskyError);
-
     const instructionsError = getErrorObject(error?.instruction);
     const hintError = getErrorObject(error?.hint);
     const successError = getErrorObject(error?.success);
-    const geoJson = {
-        ...geoJsonFromProps,
-        features: geoJsonFromProps?.features.filter(
-            (feature) => feature.properties.screen === scenarioId,
-        ),
-    };
 
-    const handleScenarioType = React.useCallback((scenarioSegment: ScenarioSegmentType['value']) => {
-        setActiveInput(scenarioSegment);
-    }, []);
+    const geoJson = React.useMemo(
+        () => {
+            if (!geoJsonFromProps) {
+                return undefined;
+            }
+            return {
+                ...geoJsonFromProps,
+                features: geoJsonFromProps.features.filter(
+                    (feature) => feature.properties.screen === scenarioId,
+                ),
+            };
+        },
+        [geoJsonFromProps, scenarioId],
+    );
 
     const previewPopUpData = value[activeSegmentInput];
 
-    // FIXME: need to filterout geojson
-
     return (
         <div className={styles.scenario}>
             <div className={styles.scenarioContent}>
@@ -136,6 +159,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Title"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.title}
+                            disabled={disabled}
                         />
                         <TextInput
                             name={'description' as const}
@@ -143,6 +167,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Description"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.description}
+                            disabled={disabled}
                         />
                     </div>
                     <SelectInput
@@ -154,6 +179,7 @@ export default function ScenarioPageInput(props: Props) {
                         labelSelector={(d: IconItem) => d.label}
                         onChange={onInstructionFieldChange}
                         error={instructionsError?.icon}
+                        disabled={disabled}
                     />
                 </div>
                 <Heading level={4}>
@@ -167,6 +193,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Title"
                             onChange={onHintFieldChange}
                             error={hintError?.title}
+                            disabled={disabled}
                         />
                         <TextInput
                             name={'description' as const}
@@ -174,6 +201,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Description"
                             onChange={onHintFieldChange}
                             error={hintError?.description}
+                            disabled={disabled}
                         />
                     </div>
                     <SelectInput
@@ -185,6 +213,7 @@ export default function ScenarioPageInput(props: Props) {
                         labelSelector={(d: IconItem) => d.label}
                         onChange={onHintFieldChange}
                         error={hintError?.icon}
+                        disabled={disabled}
                     />
                 </div>
                 <Heading level={4}>
@@ -198,6 +227,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Title"
                             onChange={onSuccessFieldChange}
                             error={successError?.title}
+                            disabled={disabled}
                         />
                         <TextInput
                             name={'description' as const}
@@ -205,6 +235,7 @@ export default function ScenarioPageInput(props: Props) {
                             label="Description"
                             onChange={onSuccessFieldChange}
                             error={successError?.description}
+                            disabled={disabled}
                         />
                     </div>
                     <SelectInput
@@ -216,29 +247,32 @@ export default function ScenarioPageInput(props: Props) {
                         labelSelector={(d: IconItem) => d.label}
                         onChange={onSuccessFieldChange}
                         error={successError?.icon}
+                        disabled={disabled}
                     />
                 </div>
             </div>
             <div className={styles.scenarioPreview}>
                 {projectType === PROJECT_TYPE_CHANGE_DETECTION && (
                     <ChangeDetectionGeoJsonPreview
-                        geoJson={geoJson}
+                        geoJson={geoJson as ChangeDetectionGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
                         url={url}
                         urlB={urlB}
                     />
                 )}
                 {projectType === (PROJECT_TYPE_BUILD_AREA || PROJECT_TYPE_COMPLETENESS) && (
+                    // FIXME: Rename this to something more specific
                     <ScenarioGeoJsonPreview
-                        geoJson={geoJson}
+                        geoJson={geoJson as BuildAreaGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
                         url={url}
                     />
                 )}
                 {projectType === PROJECT_TYPE_FOOTPRINT && (
                     <FootprintGeoJsonPreview
-                        geoJson={geoJson}
+                        geoJson={geoJson as FootprintGeoJSON | undefined}
                         url={url}
+                        previewPopUp={previewPopUpData}
                         customOptionsPreview={customOptionsPreview}
                     />
                 )}
@@ -248,7 +282,7 @@ export default function ScenarioPageInput(props: Props) {
                     options={previewOptions}
                     keySelector={valueSelector}
                     labelSelector={labelSelector}
-                    onChange={handleScenarioType}
+                    onChange={setActiveInput}
                 />
             </div>
         </div>
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 1a2ba986b..8c932230c 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'; // we change this array to map before sending to server
 import {
     _cs,
     isDefined,
@@ -48,6 +48,7 @@ import ExpandableContainer from '#components/ExpandableContainer';
 import PopupButton from '#components/PopupButton';
 import TileServerInput, {
     TILE_SERVER_BING,
+    TILE_SERVER_ESRI,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
@@ -101,7 +102,8 @@ function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
     return screens;
 }
 
-const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
+// FIXME: need to confirm if the values are correct
+const defaultFootprintCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
         value: 1,
@@ -137,10 +139,10 @@ const defaultTutorialFormValue: PartialTutorialFormType = {
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
-    customOptions: defaultCustomOptions,
+    customOptions: defaultFootprintCustomOptions,
 };
 
 type SubmissionStatus = 'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed';
@@ -220,14 +222,16 @@ function NewTutorial(props: Props) {
             }
             const {
                 scenarioPages,
-                informationPages: informationPagesFromForm,
+                informationPages,
                 ...valuesToCopy
             } = finalValues;
 
-            const screens = sanitizeScreens(scenarioPages);
+            const sanitizedScenarioPages = sanitizeScreens(scenarioPages);
 
             try {
-                await navigator.clipboard.writeText(JSON.stringify(screens, null, 2));
+                await navigator.clipboard.writeText(
+                    JSON.stringify(sanitizedScenarioPages, null, 2),
+                );
                 // FIXME: remove this in production
                 // eslint-disable-next-line no-alert
                 alert('Tutorial JSON copied to clipboard.');
@@ -242,8 +246,8 @@ function NewTutorial(props: Props) {
 
             setTutorialSubmissionStatus('imageUpload');
             try {
-                const informationPagesPromises = informationPagesFromForm.map(async (info) => {
-                    const blockPromises = info.blocks.map(async (block) => {
+                const informationPagesPromises = informationPages.map(async (info, index) => {
+                    const blocks = info.blocks.map(async (block) => {
                         if (!block.imageFile) {
                             return block;
                         }
@@ -265,15 +269,21 @@ function NewTutorial(props: Props) {
                         };
                     });
 
-                    return Promise.all(blockPromises);
+                    return {
+                        ...info,
+                        // We are making sure that page number starts with 1
+                        // and is sequential
+                        pageNumber: index + 1,
+                        blocks: Promise.all(blocks),
+                    };
                 });
 
-                const informationPages = await Promise.all(informationPagesPromises);
+                const sanitizedInformationPages = await Promise.all(informationPagesPromises);
 
                 const uploadData = {
                     ...valuesToCopy,
-                    screens,
-                    informationPages,
+                    screens: sanitizedScenarioPages,
+                    informationPages: sanitizedInformationPages,
                     createdBy: userId,
                 };
 
@@ -311,7 +321,13 @@ function NewTutorial(props: Props) {
     }, [user, mountedRef]);
 
     const handleSubmitButtonClick = React.useCallback(
-        () => createSubmitHandler(validate, setError, handleSubmission),
+        () => {
+            createSubmitHandler(
+                validate,
+                setError,
+                handleSubmission,
+            )();
+        },
         [validate, setError, handleSubmission],
     );
 
@@ -367,10 +383,12 @@ function NewTutorial(props: Props) {
 
         setFieldValue(tutorialTasks, 'tutorialTasks');
 
+        // FIXME: we need to validate the geojson here
+
         const uniqueArray = tutorialTasks && unique(
             tutorialTasks.features, ((geo) => geo?.properties.screen),
         );
-        const sorted = uniqueArray?.sort((a, b) => a.properties?.screen - b.properties.screen);
+        const sorted = uniqueArray?.sort((a, b) => a.properties.screen - b.properties.screen);
         const tutorialTaskArray = sorted?.map((geo) => (
             {
                 scenarioId: geo.properties.screen,
@@ -503,27 +521,25 @@ function NewTutorial(props: Props) {
                         error={error?.projectType}
                         disabled={submissionPending}
                     />
-                    <div className={styles.inputGroup}>
-                        <TextInput
-                            name={'name' as const}
-                            value={value.name}
-                            onChange={setFieldValue}
-                            label="Name of the Tutorial"
-                            hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
-                            error={error?.name}
-                            disabled={submissionPending || projectTypeEmpty}
-                        />
-                        <TextInput
-                            name={'lookFor' as const}
-                            value={value.lookFor}
-                            onChange={setFieldValue}
-                            label="Look For"
-                            hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
-                            error={error?.lookFor}
-                            disabled={submissionPending || projectTypeEmpty}
-                            autoFocus
-                        />
-                    </div>
+                    <TextInput
+                        name={'name' as const}
+                        value={value.name}
+                        onChange={setFieldValue}
+                        label="Name of the Tutorial"
+                        hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
+                        error={error?.name}
+                        disabled={submissionPending || projectTypeEmpty}
+                    />
+                    <TextInput
+                        name={'lookFor' as const}
+                        value={value.lookFor}
+                        onChange={setFieldValue}
+                        label="Look For"
+                        hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
+                        error={error?.lookFor}
+                        disabled={submissionPending || projectTypeEmpty}
+                        autoFocus
+                    />
                 </InputSection>
                 {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
@@ -553,12 +569,14 @@ function NewTutorial(props: Props) {
                                         <ExpandableContainer
                                             key={option.optionId}
                                             header={option.title || `Option ${index + 1}`}
+                                            openByDefault
                                             actions={(
                                                 <Button
                                                     name={index}
                                                     onClick={handleOptionRemove}
                                                     variant="action"
                                                     title="Delete Option"
+                                                    disabled={submissionPending || projectTypeEmpty}
                                                 >
                                                     <IoIosTrash />
                                                 </Button>
@@ -570,7 +588,7 @@ function NewTutorial(props: Props) {
                                                 index={index}
                                                 onChange={setOptionValue}
                                                 error={optionsError?.[option.optionId]}
-                                                disabled={submissionPending}
+                                                disabled={submissionPending || projectTypeEmpty}
                                             />
                                         </ExpandableContainer>
                                     ))}
@@ -580,7 +598,7 @@ function NewTutorial(props: Props) {
                                 />
                             </div>
                         ) : (
-                            <div>No sub-options at the moment</div>
+                            <div>No options at the moment</div>
                         )}
                     </InputSection>
                 )}
@@ -591,7 +609,7 @@ function NewTutorial(props: Props) {
                             componentRef={popupElementRef}
                             name={undefined}
                             icons={<MdAdd />}
-                            label="New Information Page"
+                            label="Add Page"
                             popupContentClassName={styles.newInfoButtonPopup}
                             disabled={submissionPending || projectTypeEmpty}
                         >
@@ -623,12 +641,14 @@ function NewTutorial(props: Props) {
                             <ExpandableContainer
                                 key={page.pageNumber}
                                 header={page.title || `Intro ${page.pageNumber}`}
+                                openByDefault
                                 actions={(
                                     <Button
                                         name={i}
                                         onClick={handleInformationPageRemove}
                                         variant="action"
                                         title="Delete page"
+                                        disabled={submissionPending || projectTypeEmpty}
                                     >
                                         <IoIosTrash />
                                     </Button>
@@ -697,10 +717,11 @@ function NewTutorial(props: Props) {
                     )
                 }
                 <InputSection
-                    heading="Scenarios"
+                    heading="Scenario Pages"
                 >
                     <GeoJsonFileInput
                         name={'tutorialTasks' as const}
+                        label="Upload Scenarios as GeoJSON"
                         value={value.tutorialTasks}
                         onChange={handleGeoJsonFile}
                         hint="It should end with .geojson or .geo.json"
@@ -711,6 +732,8 @@ function NewTutorial(props: Props) {
                         {value.scenarioPages?.map((task, index) => (
                             <ExpandableContainer
                                 key={task.scenarioId}
+                                // NOTE: only open first scenario by default
+                                openByDefault={index === 0}
                                 header={`Scenario ${task.scenarioId}`}
                             >
                                 <ScenarioPageInput
@@ -725,6 +748,7 @@ function NewTutorial(props: Props) {
                                     geoJson={value.tutorialTasks}
                                     url={tileServerAUrl}
                                     urlB={tileServerBUrl}
+                                    disabled={submissionPending || projectTypeEmpty}
                                 />
                             </ExpandableContainer>
                         ))}
@@ -745,7 +769,7 @@ function NewTutorial(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        disabled={submissionPending || projectTypeEmpty}
+                        // disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 58e5171e2..122a6452e 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -14,18 +14,6 @@
         max-width: 70rem;
         gap: var(--spacing-extra-large);
 
-        .input-group {
-            display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-            gap: var(--spacing-small);
-
-            >* {
-                flex-basis: 0;
-                width: 60%
-            }
-        }
-
         .information-page-list {
             display: flex;
             flex-direction: column;
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 868a3b534..7bcff2299 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -247,35 +247,82 @@ export const infoPageBlocksMap: Record<InformationPageTemplateKey, Block[]> = {
     ],
 };
 
-export type TutorialTasks = GeoJSON.FeatureCollection<GeoJSON.Geometry, {
-    groupId: string;
+interface BuildAreaProperties {
     reference: number;
     screen: number;
-    taskId: string;
+    // eslint-disable-next-line camelcase
+    task_id: string;
     // eslint-disable-next-line camelcase
     tile_x: number;
     // eslint-disable-next-line camelcase
     tile_y: number;
     // eslint-disable-next-line camelcase
     tile_z: number;
-}>;
+
+    // groupId: string;
+    // taskId: string;
+    // category for completeness?
+}
+
+interface FootprintProperties {
+    id: string;
+    reference: number;
+    screen: number;
+}
+
+interface ChangeDetectionProperties {
+    reference: number;
+    screen: number;
+    // eslint-disable-next-line camelcase
+    task_id: string;
+    // eslint-disable-next-line camelcase
+    tile_x: number;
+    // eslint-disable-next-line camelcase
+    tile_y: number;
+    // eslint-disable-next-line camelcase
+    tile_z: number;
+
+    // category: string;
+    // groupId: string;
+    // taskId: string;
+}
+
+export type BuildAreaGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    BuildAreaProperties
+>;
+
+export type FootprintGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    FootprintProperties
+>;
+
+export type ChangeDetectionGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    ChangeDetectionProperties
+>;
+
+export type TutorialTasksGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    BuildAreaProperties | FootprintProperties | ChangeDetectionProperties
+>;
 
 export type CustomOptions = {
-    optionId: number;
+    optionId: number; // we clear this before sending to server
     title: string;
     value: number;
     description: string;
     icon: IconKey;
     iconColor: string;
     subOptions: {
-        subOptionsId: number;
+        subOptionsId: number; // we clear this before sending to server
         description: string;
         value: number;
     }[];
 }[];
 
 export type InformationPages = {
-    pageNumber: number;
+    pageNumber: number; // we need to re-calculate this
     title: string;
     blocks: {
         blockNumber: number;
@@ -289,7 +336,7 @@ export interface TutorialFormType {
     lookFor: string;
     name: string;
     tileServer: TileServer;
-    scenarioPages: {
+    scenarioPages: { // we change this array to map before sending to server
         scenarioId: number;
         hint: {
             description: string;
@@ -307,7 +354,7 @@ export interface TutorialFormType {
             title: string;
         };
     }[];
-    tutorialTasks?: TutorialTasks,
+    tutorialTasks?: TutorialTasksGeoJSON,
     exampleImage1: File;
     exampleImage2: File;
     projectType: ProjectType;

From 2a128964f4f9aef69239dedee8f899dc9f6cca49 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 15:24:17 +0545
Subject: [PATCH 44/72] Remove un-necessary key on request

- Fix issue with image uploads
- Fix FileInput disable
---
 .../components/ExpandableContainer/styles.css |   1 +
 .../app/components/FileInput/index.tsx        |   1 +
 .../InformationPageInput/Block/index.tsx      |   2 +-
 .../FootprintGeoJsonPreview/index.tsx         |  21 +++-
 .../NewTutorial/ScenarioPageInput/index.tsx   |   4 +-
 .../app/views/NewTutorial/index.tsx           | 114 ++++++++----------
 .../app/views/NewTutorial/utils.ts            | 109 ++++++++++++-----
 7 files changed, 151 insertions(+), 101 deletions(-)

diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
index c7c66c2a5..ab519f60f 100644
--- a/manager-dashboard/app/components/ExpandableContainer/styles.css
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -38,6 +38,7 @@
 
     .children {
         border: var(--width-separator-thin) solid var(--color-separator);
+        border-top: 0;
         border-bottom-left-radius: var(--radius-card-border);
         border-bottom-right-radius: var(--radius-card-border);
         padding: var(--spacing-medium);
diff --git a/manager-dashboard/app/components/FileInput/index.tsx b/manager-dashboard/app/components/FileInput/index.tsx
index 2c0f611e7..207c9f31b 100644
--- a/manager-dashboard/app/components/FileInput/index.tsx
+++ b/manager-dashboard/app/components/FileInput/index.tsx
@@ -138,6 +138,7 @@ function FileInput<Name>(props: Props<Name>) {
                         name={name}
                         onChange={handleChange}
                         accept={accept}
+                        disabled={disabled}
                     />
                 </>
             )}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
index 335318b87..85494f6da 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
@@ -39,7 +39,7 @@ export default function Block(props: Props) {
                 <MarkdownEditor
                     name={'textDescription' as const}
                     value={value?.textDescription}
-                    label={`Block ${index + 1}`}
+                    label={`Block #${index + 1}`}
                     onChange={onBlockChange}
                     error={error?.textDescription}
                     disabled={disabled}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 9dc99c1bf..8d7d0c351 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -5,7 +5,11 @@ import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { IconKey, iconMap } from '#utils/common';
 
-import { CustomOptionPreviewType, FootprintGeoJSON } from '../../utils';
+import {
+    PartialCustomOptionsType,
+    FootprintGeoJSON,
+    colorKeyToColorMap,
+} from '../../utils';
 import styles from './styles.css';
 
 interface Props {
@@ -17,7 +21,7 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
-    customOptionsPreview: CustomOptionPreviewType[] | undefined;
+    customOptionsPreview: PartialCustomOptionsType | undefined;
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
@@ -48,15 +52,22 @@ export default function FootprintGeoJsonPreview(props: Props) {
             />
             <div className={styles.options}>
                 {customOptionsPreview?.map((option) => {
-                    const Icon = iconMap[option.icon];
+                    const Icon = option.icon
+                        ? iconMap[option.icon]
+                        : iconMap.flagOutline;
                     return (
                         <div
-                            key={option.id}
+                            key={option.optionId}
                             className={styles.optionContainer}
                         >
                             <div
                                 className={styles.option}
-                                style={{ backgroundColor: option.iconColor }}
+                                style={{
+                                    backgroundColor: (
+                                        option.iconColor
+                                        || colorKeyToColorMap.gray
+                                    ),
+                                }}
                             >
                                 <Icon />
                             </div>
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 73dcd4cd8..4c5b6d834 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -28,7 +28,7 @@ import {
     FootprintGeoJSON,
     BuildAreaGeoJSON,
     ChangeDetectionGeoJSON,
-    CustomOptionPreviewType,
+    PartialCustomOptionsType,
 } from '../utils';
 import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
 import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
@@ -79,7 +79,7 @@ interface Props {
     projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
-    customOptionsPreview?: CustomOptionPreviewType[];
+    customOptionsPreview: PartialCustomOptionsType | undefined;
     scenarioId: number;
     disabled: boolean;
 }
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 8c932230c..b6dbf522e 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -67,7 +67,7 @@ import {
 import {
     tileServerUrls,
     tutorialFormSchema,
-    colorKeyToColorMap,
+    defaultFootprintCustomOptions,
     TutorialFormType,
     PartialTutorialFormType,
     PartialInformationPagesType,
@@ -77,8 +77,8 @@ import {
     InformationPageTemplateKey,
     infoPageTemplateOptions,
     infoPageBlocksMap,
-    ColorKey,
-    CustomOptionPreviewType,
+    MAX_INFO_PAGES,
+    MAX_OPTIONS,
 } from './utils';
 import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
 import CustomOptionInput from './CustomOptionInput';
@@ -86,6 +86,17 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
+function deleteKey<T extends object, K extends keyof T>(
+    value: T,
+    key: K,
+): Omit<T, K> {
+    const copy: Omit<T, K> & { [key in K]: T[K] | undefined } = {
+        ...value,
+    };
+    delete copy[key];
+    return copy;
+}
+
 type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
 function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
     const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
@@ -102,34 +113,6 @@ function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
     return screens;
 }
 
-// FIXME: need to confirm if the values are correct
-const defaultFootprintCustomOptions: PartialTutorialFormType['customOptions'] = [
-    {
-        optionId: 1,
-        value: 1,
-        title: 'Yes',
-        icon: 'checkmarkOutline',
-        iconColor: colorKeyToColorMap.green,
-        description: 'the shape does outline a building in the image',
-    },
-    {
-        optionId: 2,
-        value: 0,
-        title: 'No',
-        icon: 'closeOutline',
-        iconColor: colorKeyToColorMap.red,
-        description: 'the shape doesn\'t match a building in the image',
-    },
-    {
-        optionId: 3,
-        value: 2,
-        title: 'Not Sure',
-        icon: 'removeOutline',
-        iconColor: colorKeyToColorMap.orange,
-        description: 'if you\'re not sure or there is cloud cover / bad imagery',
-    },
-];
-
 const defaultTutorialFormValue: PartialTutorialFormType = {
     // projectType: PROJECT_TYPE_BUILD_AREA,
     projectType: undefined,
@@ -247,7 +230,7 @@ function NewTutorial(props: Props) {
             setTutorialSubmissionStatus('imageUpload');
             try {
                 const informationPagesPromises = informationPages.map(async (info, index) => {
-                    const blocks = info.blocks.map(async (block) => {
+                    const blocksPromise = info.blocks.map(async (block) => {
                         if (!block.imageFile) {
                             return block;
                         }
@@ -269,24 +252,40 @@ function NewTutorial(props: Props) {
                         };
                     });
 
+                    const blocks = await Promise.all(blocksPromise);
+
                     return {
                         ...info,
                         // We are making sure that page number starts with 1
                         // and is sequential
                         pageNumber: index + 1,
-                        blocks: Promise.all(blocks),
+                        blocks,
                     };
                 });
-
                 const sanitizedInformationPages = await Promise.all(informationPagesPromises);
 
                 const uploadData = {
                     ...valuesToCopy,
+                    customOptions: valuesToCopy.customOptions?.map((option) => {
+                        const optionWithoutId = deleteKey(option, 'optionId');
+                        return {
+                            ...optionWithoutId,
+                            subOptions: optionWithoutId.subOptions?.map(
+                                (subOption) => deleteKey(subOption, 'subOptionsId'),
+                            ),
+                        };
+                    }),
                     screens: sanitizedScenarioPages,
                     informationPages: sanitizedInformationPages,
                     createdBy: userId,
                 };
 
+                console.log(uploadData);
+                if (uploadData) {
+                    setTutorialSubmissionStatus('failed');
+                    return;
+                }
+
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -482,24 +481,13 @@ function NewTutorial(props: Props) {
         return tileServerUrls[tileServerName];
     }, [value.tileServerB?.name, value.tileServerB?.url]);
 
-    // FIXME: we might not need this
-    const customOptionsPreview: CustomOptionPreviewType[] = React.useMemo(() => {
-        const customOptionsFromForm = value.customOptions;
-        if (isNotDefined(customOptionsFromForm)) {
-            return [];
-        }
-        const finalValue = customOptionsFromForm.map((custom) => (
-            {
-                id: custom.optionId,
-                icon: custom.icon ?? 'removeOutline',
-                iconColor: custom.iconColor as ColorKey ?? 'gray',
-            }
-        ));
-        return finalValue;
-    }, [value.customOptions]);
-
     const projectTypeEmpty = isNotDefined(value.projectType);
 
+    const {
+        customOptions,
+        informationPages,
+    } = value;
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <Heading level={1}>
@@ -535,7 +523,7 @@ function NewTutorial(props: Props) {
                         value={value.lookFor}
                         onChange={setFieldValue}
                         label="Look For"
-                        hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
+                        hint="What should the users look for (e.g. buildings, cars, trees)?"
                         error={error?.lookFor}
                         disabled={submissionPending || projectTypeEmpty}
                         autoFocus
@@ -552,7 +540,7 @@ function NewTutorial(props: Props) {
                                 disabled={
                                     submissionPending
                                     || projectTypeEmpty
-                                    || (value.customOptions && value.customOptions?.length >= 6)
+                                    || (customOptions && customOptions.length >= MAX_OPTIONS)
                                 }
                             >
                                 Add Option
@@ -562,14 +550,14 @@ function NewTutorial(props: Props) {
                         <NonFieldError
                             error={optionsError}
                         />
-                        {value.customOptions?.length ? (
+                        {(customOptions && customOptions.length > 0) ? (
                             <div className={styles.customOptionContainer}>
                                 <div className={styles.customOptionList}>
-                                    {value.customOptions.map((option, index) => (
+                                    {customOptions.map((option, index) => (
                                         <ExpandableContainer
                                             key={option.optionId}
                                             header={option.title || `Option ${index + 1}`}
-                                            openByDefault
+                                            openByDefault={index === customOptions.length - 1}
                                             actions={(
                                                 <Button
                                                     name={index}
@@ -594,7 +582,7 @@ function NewTutorial(props: Props) {
                                     ))}
                                 </div>
                                 <CustomOptionPreview
-                                    value={value.customOptions}
+                                    value={customOptions}
                                 />
                             </div>
                         ) : (
@@ -623,8 +611,8 @@ function NewTutorial(props: Props) {
                                     disabled={(
                                         submissionPending
                                         || projectTypeEmpty
-                                        || (value.informationPages
-                                            && value.informationPages.length >= 10)
+                                        || (informationPages
+                                            && informationPages.length >= MAX_INFO_PAGES)
                                     )}
                                 >
                                     {infoPageTemplate.label}
@@ -637,11 +625,11 @@ function NewTutorial(props: Props) {
                         error={informationPagesError}
                     />
                     <div className={styles.informationPageList}>
-                        {value.informationPages?.map((page, i) => (
+                        {informationPages?.map((page, i) => (
                             <ExpandableContainer
                                 key={page.pageNumber}
                                 header={page.title || `Intro ${page.pageNumber}`}
-                                openByDefault
+                                openByDefault={i === informationPages.length - 1}
                                 actions={(
                                     <Button
                                         name={i}
@@ -664,7 +652,7 @@ function NewTutorial(props: Props) {
                                 />
                             </ExpandableContainer>
                         ))}
-                        {!(value.informationPages?.length) && (
+                        {!(informationPages?.length) && (
                             <EmptyMessage
                                 title="Start adding Information pages"
                                 description="Add pages selecting templates from “Add page” dropdown"
@@ -744,7 +732,7 @@ function NewTutorial(props: Props) {
                                     projectType={value.projectType}
                                     onChange={onScenarioFormChange}
                                     error={scenarioError?.[task.scenarioId]}
-                                    customOptionsPreview={customOptionsPreview}
+                                    customOptionsPreview={customOptions}
                                     geoJson={value.tutorialTasks}
                                     url={tileServerAUrl}
                                     urlB={tileServerBUrl}
@@ -769,7 +757,7 @@ function NewTutorial(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        // disabled={submissionPending || projectTypeEmpty}
+                        disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 7bcff2299..d1eb9c2a4 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -47,6 +47,7 @@ export type ColorKey = (
     | 'gray'
 );
 
+// FIXME: need to rethink the colors
 export const colorKeyToColorMap: Record<ColorKey, string> = {
     red: '#D32F2F',
     pink: '#D81B60',
@@ -64,13 +65,6 @@ export const colorKeyToColorMap: Record<ColorKey, string> = {
     gray: '#757575',
 };
 
-// FIXME: we may not need this
-export interface CustomOptionPreviewType {
-    id: number;
-    icon: IconKey,
-    iconColor: ColorKey,
-}
-
 export interface ColorOptions {
     key: ColorKey;
     label: string;
@@ -247,6 +241,34 @@ export const infoPageBlocksMap: Record<InformationPageTemplateKey, Block[]> = {
     ],
 };
 
+// FIXME: need to confirm if the values are correct
+export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptions'] = [
+    {
+        optionId: 1,
+        value: 1,
+        title: 'Yes',
+        icon: 'checkmarkOutline',
+        iconColor: colorKeyToColorMap.green,
+        description: 'the shape does outline a building in the image',
+    },
+    {
+        optionId: 2,
+        value: 0,
+        title: 'No',
+        icon: 'closeOutline',
+        iconColor: colorKeyToColorMap.red,
+        description: 'the shape doesn\'t match a building in the image',
+    },
+    {
+        optionId: 3,
+        value: 2,
+        title: 'Not Sure',
+        icon: 'removeOutline',
+        iconColor: colorKeyToColorMap.orange,
+        description: 'if you\'re not sure or there is cloud cover / bad imagery',
+    },
+];
+
 interface BuildAreaProperties {
     reference: number;
     screen: number;
@@ -398,8 +420,20 @@ type InformationPagesFormSchema = ArraySchema<InformationPagesType, PartialTutor
 type InformationPagesFormSchemaMember = ReturnType<InformationPagesFormSchema['member']>;
 
 export type PartialInformationPagesType = PartialTutorialFormType['informationPages'];
+export type PartialCustomOptionsType = PartialTutorialFormType['customOptions'];
 export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPagesType>[number]>['blocks'];
 
+export const MAX_OPTIONS = 6;
+export const MIN_OPTIONS = 2;
+export const MAX_SUB_OPTIONS = 6;
+export const MIN_SUB_OPTIONS = 2;
+
+export const MAX_INFO_PAGES = 10;
+
+const SM_TEXT_MAX_LENGTH = 25;
+const MD_TEXT_MAX_LENGTH = 100;
+const LG_TEXT_MAX_LENGTH = 2000;
+
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
         let baseSchema: TutorialFormSchemaFields = {
@@ -409,12 +443,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
             lookFor: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(25)],
+                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
             },
             name: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(100)],
+                validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
             },
             tileServer: {
                 fields: tileServerFieldsSchema,
@@ -431,12 +465,16 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(20)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(100)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 icon: { required: true },
                             }),
@@ -446,12 +484,16 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(20)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(100)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 icon: { required: true },
                             }),
@@ -461,12 +503,16 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 title: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(20)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 description: {
                                     required: true,
                                     requiredValidation: requiredStringCondition,
-                                    validations: [getNoMoreThanNCharacterCondition(100)],
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
                                 },
                                 icon: { required: true },
                             }),
@@ -476,8 +522,8 @@ export const tutorialFormSchema: TutorialFormSchema = {
             },
             informationPages: {
                 validation: (info) => {
-                    if (info && info.length > 10) {
-                        return 'Information page cannot be more than 10';
+                    if (info && info.length > MAX_INFO_PAGES) {
+                        return `Information page cannot be more than ${MAX_INFO_PAGES}`;
                     }
                     return undefined;
                 },
@@ -488,7 +534,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         title: {
                             required: true,
                             requiredValidation: requiredStringCondition,
-                            validations: [getNoMoreThanNCharacterCondition(500)],
+                            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
                         },
                         blocks: {
                             keySelector: (key) => key.blockNumber,
@@ -512,7 +558,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                                         // eslint-disable-next-line max-len
                                                         requiredValidations: requiredStringCondition,
                                                         // eslint-disable-next-line max-len
-                                                        validations: [getNoMoreThanNCharacterCondition(2000)],
+                                                        validations: [getNoMoreThanNCharacterCondition(LG_TEXT_MAX_LENGTH)],
                                                     },
                                                     imageFile: { forceValue: nullValue },
                                                 };
@@ -549,12 +595,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             return undefined;
                         }
 
-                        if (option.length < 2) {
-                            return 'There should be at least 2 options';
+                        if (option.length < MIN_OPTIONS) {
+                            return `There should be at least ${MIN_OPTIONS} options`;
                         }
 
-                        if (option.length > 6) {
-                            return 'There shouldn\'t be more than 6 options';
+                        if (option.length > MAX_OPTIONS) {
+                            return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
                         }
 
                         return undefined;
@@ -568,7 +614,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             title: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(25)],
+                                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
                             },
                             value: {
                                 required: true,
@@ -577,7 +623,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             description: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(100)],
+                                validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
                             },
                             icon: {
                                 required: true,
@@ -592,12 +638,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                         return undefined;
                                     }
 
-                                    if (sub.length < 2) {
-                                        return 'There should be at least 2 sub options';
+                                    if (sub.length < MIN_SUB_OPTIONS) {
+                                        return `There should be at least ${MIN_SUB_OPTIONS} sub options`;
                                     }
 
-                                    if (sub.length > 6) {
-                                        return 'There shouldn\'t be more than 6 sub options';
+                                    if (sub.length > MAX_SUB_OPTIONS) {
+                                        return `There shouldn\`t be more than ${MAX_SUB_OPTIONS} sub options`;
                                     }
 
                                     return undefined;
@@ -610,7 +656,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                         description: {
                                             required: true,
                                             requiredValidation: requiredStringCondition,
-                                            validations: [getNoMoreThanNCharacterCondition(100)],
+                                            validations: [
+                                                // eslint-disable-next-line max-len
+                                                getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                            ],
                                         },
                                         value: {
                                             required: true,

From 04daec7de52fa4bed325b3362f7599a7cd5e8159 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 16:53:47 +0545
Subject: [PATCH 45/72] Rename "instruction" to "instructions"

---
 .../NewTutorial/ScenarioPageInput/index.tsx   | 20 +++++++++----------
 .../app/views/NewTutorial/utils.ts            |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 4c5b6d834..542037092 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -42,7 +42,7 @@ type ScenarioType = {
         icon: IconKey;
         title: string;
     };
-    instruction: {
+    instructions: {
         description: string;
         icon: IconKey;
         title: string;
@@ -55,12 +55,12 @@ type ScenarioType = {
 };
 
 interface ScenarioSegmentType {
-    value: 'instruction' | 'hint' | 'success';
+    value: 'instructions' | 'hint' | 'success';
     label: string;
 }
 
 const previewOptions: ScenarioSegmentType[] = [
-    { value: 'instruction', label: 'Instruction' },
+    { value: 'instructions', label: 'Instruction' },
     { value: 'hint', label: 'Hint' },
     { value: 'success', label: 'Success' },
 ];
@@ -99,7 +99,7 @@ export default function ScenarioPageInput(props: Props) {
         disabled,
     } = props;
 
-    const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instruction');
+    const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
 
     const onFieldChange = useFormObject(
         index,
@@ -107,8 +107,8 @@ export default function ScenarioPageInput(props: Props) {
         defaultScenarioTabsValue,
     );
 
-    const onInstructionFieldChange = useFormObject<'instruction', PartialScenarioType['instruction']>(
-        'instruction',
+    const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>(
+        'instructions',
         onFieldChange,
         {},
     );
@@ -124,7 +124,7 @@ export default function ScenarioPageInput(props: Props) {
     );
 
     const error = getErrorObject(riskyError);
-    const instructionsError = getErrorObject(error?.instruction);
+    const instructionsError = getErrorObject(error?.instructions);
     const hintError = getErrorObject(error?.hint);
     const successError = getErrorObject(error?.success);
 
@@ -155,7 +155,7 @@ export default function ScenarioPageInput(props: Props) {
                     <div className={styles.scenarioFormContent}>
                         <TextInput
                             name={'title' as const}
-                            value={value.instruction?.title}
+                            value={value.instructions?.title}
                             label="Title"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.title}
@@ -163,7 +163,7 @@ export default function ScenarioPageInput(props: Props) {
                         />
                         <TextInput
                             name={'description' as const}
-                            value={value.instruction?.description}
+                            value={value.instructions?.description}
                             label="Description"
                             onChange={onInstructionFieldChange}
                             error={instructionsError?.description}
@@ -173,7 +173,7 @@ export default function ScenarioPageInput(props: Props) {
                     <SelectInput
                         name="icon"
                         label="Icon"
-                        value={value.instruction?.icon}
+                        value={value.instructions?.icon}
                         options={iconList}
                         keySelector={(d: IconItem) => d.key}
                         labelSelector={(d: IconItem) => d.label}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index d1eb9c2a4..3ed3cef69 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -365,7 +365,7 @@ export interface TutorialFormType {
             icon: IconKey;
             title: string;
         };
-        instruction: {
+        instructions: {
             description: string;
             icon: IconKey;
             title: string;
@@ -479,7 +479,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 icon: { required: true },
                             }),
                         },
-                        instruction: {
+                        instructions: {
                             fields: () => ({
                                 title: {
                                     required: true,

From 3ea5e16445bbbefca64d41eaa54e32fccbada7ed Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 17:41:43 +0545
Subject: [PATCH 46/72] Fix suboption value submission issue

- Use custom options readonly form on project page
---
 .../CustomOptionReadOnly/index.tsx            | 103 ------------------
 .../CustomOptionReadOnly/styles.css           |  24 ----
 .../NewProject/BasicProjectInfoForm/index.tsx |  55 +---------
 .../app/views/NewProject/index.tsx            |  66 ++++++++++-
 .../app/views/NewProject/styles.css           |  12 ++
 .../app/views/NewProject/utils.ts             |  40 ++++---
 .../CustomOptionPreview/index.tsx             |  14 +--
 .../SubOptionInput/index.tsx                  |  24 ++--
 .../NewTutorial/CustomOptionInput/index.tsx   |  39 ++++---
 .../app/views/NewTutorial/index.tsx           |   2 +-
 10 files changed, 147 insertions(+), 232 deletions(-)
 delete mode 100644 manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
 delete mode 100644 manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css

diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
deleted file mode 100644
index 0ddc97b34..000000000
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-
-import { PartialProjectFormType } from '#views/NewProject/utils';
-import Tabs, { Tab, TabList, TabPanel } from '#components/Tabs';
-import TextInput from '#components/TextInput';
-import NumberInput from '#components/NumberInput';
-import Heading from '#components/Heading';
-
-import styles from './styles.css';
-
-interface Props {
-    value: NonNullable<PartialProjectFormType['customOptions']>[number];
-}
-
-export default function CustomOptionReadOnly(props: Props) {
-    const {
-        value,
-    } = props;
-
-    const [activesubOptions, setActiveSubOptions] = React.useState('1');
-
-    return (
-        <div className={styles.optionContainer}>
-            <div className={styles.optionForm}>
-                <div className={styles.optionContent}>
-                    <TextInput
-                        className={styles.optionInput}
-                        label="Title"
-                        value={value?.title}
-                        name={'title' as const}
-                        disabled
-                    />
-                    <NumberInput
-                        className={styles.optionInput}
-                        label="Value"
-                        value={value?.value}
-                        name={'value' as const}
-                        disabled
-                    />
-                    <TextInput
-                        className={styles.optionIcon}
-                        name="icon"
-                        label="Icon"
-                        value={value?.icon}
-                        disabled
-                    />
-                </div>
-                <div className={styles.optionContent}>
-                    <TextInput
-                        className={styles.optionInput}
-                        label="Description"
-                        value={value.description}
-                        name={'description' as const}
-                        disabled
-                    />
-                    <TextInput
-                        className={styles.optionIcon}
-                        name="iconColor"
-                        label="Icon Color"
-                        value={value?.iconColor}
-                        disabled
-                    />
-                </div>
-                <Heading level={4}>
-                    Sub Options
-                </Heading>
-                {value.subOptions?.length ? (
-                    <Tabs
-                        value={activesubOptions}
-                        onChange={setActiveSubOptions}
-                    >
-                        <TabList>
-                            {value.subOptions?.map((sub) => (
-                                <Tab
-                                    key={sub.subOptionsId}
-                                    name={String(sub.subOptionsId)}
-                                >
-                                    {`Sub Options ${sub.subOptionsId}`}
-                                </Tab>
-                            ))}
-                        </TabList>
-                        {value.subOptions.map((sub) => (
-                            <TabPanel
-                                key={sub.subOptionsId}
-                                name={String(sub.subOptionsId)}
-                            >
-                                <TextInput
-                                    label="Description"
-                                    value={sub.description}
-                                    name={'description' as const}
-                                    disabled
-                                />
-                            </TabPanel>
-                        ))}
-                    </Tabs>
-                ) : (
-                    <div>No Sub Options</div>
-                )}
-            </div>
-        </div>
-
-    );
-}
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
deleted file mode 100644
index 7ead978b6..000000000
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/CustomOptionReadOnly/styles.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.option-container {
-    display: flex;
-    gap: var(--spacing-extra-large);
-
-    .option-form {
-        display: flex;
-        flex-basis: 60%;
-        flex-direction: column;
-        gap: var(--spacing-medium);
-
-        .option-content {
-            display: flex;
-            gap: var(--spacing-medium);
-
-            .option-input {
-                flex-grow: 1;
-            }
-
-            .option-icon {
-                flex-basis: 15%;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 7e9ebf938..8daa29984 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -2,23 +2,13 @@ import React, { useCallback } from 'react';
 import { EntriesAsList, ObjectError, SetBaseValueArg } from '@togglecorp/toggle-form';
 import TextInput from '#components/TextInput';
 import { generateProjectName, PartialProjectFormType } from '#views/NewProject/utils';
-import { PROJECT_TYPE_FOOTPRINT, labelSelector, valueSelector } from '#utils/common';
+import { labelSelector, valueSelector } from '#utils/common';
 import NumberInput from '#components/NumberInput';
 import TextArea from '#components/TextArea';
 import ImageInput from '#components/ImageInput';
 import SelectInput from '#components/SelectInput';
 import useProjectOptions from '#views/NewProject/useProjectOptions';
 import styles from '#views/NewProject/styles.css';
-import Card from '#components/Card';
-import Heading from '#components/Heading';
-import Tabs,
-{
-    Tab,
-    TabList,
-    TabPanel,
-} from '#components/Tabs';
-
-import CustomOptionReadOnly from './CustomOptionReadOnly';
 
 export interface Props<T extends PartialProjectFormType> {
     className?: string;
@@ -47,12 +37,6 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
         organisationsPending,
     } = useProjectOptions(value?.projectType);
 
-    const [activeOptionsTab, setActiveOptionsTab] = React.useState('1');
-
-    React.useEffect(() => {
-        setFieldValue(tutorialOptions?.[0]?.value, 'tutorialId');
-    }, [setFieldValue, value?.projectType, tutorialOptions]);
-
     const setFieldValueAndGenerateName = React.useCallback(
         (...entries: EntriesAsList<PartialProjectFormType>) => {
             // NOTE: we need to use setFieldValue to set error on change
@@ -223,43 +207,6 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     />
                 </div>
             </div>
-            {(value.projectType === PROJECT_TYPE_FOOTPRINT && value?.customOptions) && (
-                <Card
-                    title="Custom Options"
-                    contentClassName={styles.card}
-                >
-                    <Heading level={4}>
-                        Option Instructions
-                    </Heading>
-                    <Tabs
-                        value={activeOptionsTab}
-                        onChange={setActiveOptionsTab}
-                    >
-                        <TabList>
-                            {value.customOptions.map((custom) => (
-
-                                <Tab
-                                    key={custom.optionId}
-                                    name={`${custom.optionId}`}
-                                >
-                                    {`Option ${custom.optionId}`}
-                                </Tab>
-                            ))}
-                        </TabList>
-                        {value.customOptions.map((options) => (
-                            <TabPanel
-                                key={options.optionId}
-                                name={String(options.optionId)}
-                            >
-                                <CustomOptionReadOnly
-                                    key={options.optionId}
-                                    value={options}
-                                />
-                            </TabPanel>
-                        ))}
-                    </Tabs>
-                </Card>
-            )}
         </>
     );
 }
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index 1241f6438..8f85b870d 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -43,9 +43,9 @@ import TileServerInput, {
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
+import NonFieldError from '#components/NonFieldError';
 import AnimatedSwipeIcon from '#components/AnimatedSwipeIcon';
-import BasicProjectInfoForm from './BasicProjectInfoForm';
-
+import ExpandableContainer from '#components/ExpandableContainer';
 import {
     valueSelector,
     labelSelector,
@@ -57,6 +57,9 @@ import {
     PROJECT_TYPE_CHANGE_DETECTION,
 } from '#utils/common';
 
+import CustomOptionInput from '#views/NewTutorial/CustomOptionInput';
+import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
+
 import {
     projectFormSchema,
     ProjectFormType,
@@ -72,6 +75,8 @@ import {
     validateAoiOnOhsome,
     validateProjectIdOnHotTaskingManager,
 } from './utils';
+import BasicProjectInfoForm from './BasicProjectInfoForm';
+
 // eslint-disable-next-line postcss-modules/no-unused-class
 import styles from './styles.css';
 
@@ -385,6 +390,22 @@ function NewProject(props: Props) {
 
     const projectTypeEmpty = isNotDefined(value.projectType);
 
+    const { customOptions: customOptionsFromValue } = value;
+
+    const customOptions = customOptionsFromValue?.map((option) => ({
+        ...option,
+        optionId: option.value,
+        subOptions: option.subOptions?.map((subOption) => ({
+            ...subOption,
+            subOptionsId: subOption.value,
+        })),
+    }));
+
+    const optionsError = React.useMemo(
+        () => getErrorObject(error?.customOptions),
+        [error?.customOptions],
+    );
+
     return (
         <div className={_cs(styles.newProject, className)}>
             <div className={styles.container}>
@@ -411,6 +432,47 @@ function NewProject(props: Props) {
                         disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
+                {(
+                    value.projectType === PROJECT_TYPE_FOOTPRINT
+                    && customOptions
+                    && customOptions.length > 0
+                ) && (
+                    <InputSection
+                        heading="Custom Options"
+                    >
+                        <NonFieldError
+                            error={optionsError}
+                        />
+                        {(customOptions && customOptions.length > 0) ? (
+                            <div className={styles.customOptionContainer}>
+                                <div className={styles.customOptionList}>
+                                    {customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.value}
+                                            header={option.title || `Option ${index + 1}`}
+                                        >
+                                            <CustomOptionInput
+                                                key={option.value}
+                                                value={option}
+                                                index={index}
+                                                // eslint-disable-next-line max-len
+                                                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                                                onChange={() => {}}
+                                                error={optionsError?.[option.value]}
+                                                readOnly
+                                            />
+                                        </ExpandableContainer>
+                                    ))}
+                                </div>
+                                <CustomOptionPreview
+                                    value={customOptions}
+                                />
+                            </div>
+                        ) : (
+                            <div>No options</div>
+                        )}
+                    </InputSection>
+                )}
                 {(value.projectType === PROJECT_TYPE_BUILD_AREA
                     || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
                     || value.projectType === PROJECT_TYPE_COMPLETENESS) && (
diff --git a/manager-dashboard/app/views/NewProject/styles.css b/manager-dashboard/app/views/NewProject/styles.css
index ba2f1784f..bcbad1ed6 100644
--- a/manager-dashboard/app/views/NewProject/styles.css
+++ b/manager-dashboard/app/views/NewProject/styles.css
@@ -13,6 +13,18 @@
         max-width: 70rem;
         gap: var(--spacing-large);
 
+        .custom-option-container {
+            display: flex;
+            gap: var(--spacing-large);
+
+            .custom-option-list {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                gap: var(--spacing-medium);
+            }
+        }
+
         .input-group {
             display: flex;
             flex-wrap: wrap;
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index b78b76164..3aec6276a 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -7,6 +7,7 @@ import {
 } from '@togglecorp/fujs';
 import {
     ObjectSchema,
+    ArraySchema,
     PartialForm,
     requiredStringCondition,
     integerCondition,
@@ -18,16 +19,11 @@ import {
 } from '@togglecorp/toggle-form';
 import { getType as getFeatureType } from '@turf/invariant';
 import getFeatureArea from '@turf/area';
+
 import {
     TileServer,
     tileServerFieldsSchema,
 } from '#components/TileServerInput';
-import {
-    CustomOptions,
-    CustomOptionFormSchema,
-    CustomOptionFormSchemaMember,
-    CustomOptionSchemaFields,
-} from '#views/NewTutorial/utils';
 
 import {
     getNoMoreThanNCharacterCondition,
@@ -37,8 +33,21 @@ import {
     PROJECT_TYPE_FOOTPRINT,
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_COMPLETENESS,
+    IconKey,
 } from '#utils/common';
 
+export type CustomOptionsForProject = {
+    title: string;
+    value: number;
+    description: string;
+    icon: IconKey;
+    iconColor: string;
+    subOptions: {
+        description: string;
+        value: number;
+    }[];
+}[];
+
 export interface ProjectFormType {
     projectTopic: string;
     projectType: ProjectType;
@@ -62,7 +71,7 @@ export interface ProjectFormType {
     maxTasksPerUser: number;
     tileServer: TileServer;
     tileServerB?: TileServer;
-    customOptions?: CustomOptions;
+    customOptions?: CustomOptionsForProject;
 }
 
 export const PROJECT_INPUT_TYPE_UPLOAD = 'aoi_file';
@@ -91,12 +100,18 @@ export const filterOptions = [
 export type PartialProjectFormType = PartialForm<
     Omit<ProjectFormType, 'projectImage'> & { projectImage?: File },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'geometry' | 'projectImage' | 'optionId' | 'subOptionsId'
+    'geometry' | 'projectImage' | 'value'
 >;
 
 type ProjectFormSchema = ObjectSchema<PartialProjectFormType>;
 type ProjectFormSchemaFields = ReturnType<ProjectFormSchema['fields']>;
 
+type PartialCustomOptions = NonNullable<PartialProjectFormType['customOptions']>[number];
+type CustomOptionSchema = ObjectSchema<PartialCustomOptions, PartialProjectFormType>;
+type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
+type CustomOptionFormSchema = ArraySchema<PartialCustomOptions, PartialProjectFormType>;
+type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
+
 // FIXME: break this into multiple geometry conditions
 const DEFAULT_MAX_FEATURES = 20;
 // const DEFAULT_MAX_FEATURES = 10;
@@ -241,12 +256,9 @@ export const projectFormSchema: ProjectFormSchema = {
             ['customOptions'],
             (formValues) => {
                 const customOptionField: CustomOptionFormSchema = {
-                    keySelector: (key) => key.optionId,
+                    keySelector: (key) => key.value,
                     member: (): CustomOptionFormSchemaMember => ({
                         fields: (): CustomOptionSchemaFields => ({
-                            optionId: {
-                                required: true,
-                            },
                             title: {
                                 required: true,
                                 requiredValidation: requiredStringCondition,
@@ -267,10 +279,10 @@ export const projectFormSchema: ProjectFormSchema = {
                                 required: true,
                             },
                             subOptions: {
-                                keySelector: (key) => key.subOptionsId,
+                                keySelector: (subOption) => subOption.value,
                                 member: () => ({
                                     fields: () => ({
-                                        subOptionsId: {
+                                        value: {
                                             required: true,
                                         },
                                         description: {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 5721f7eb9..b5955a315 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -26,26 +26,26 @@ export default function CustomOptionPreview(props: Props) {
             heading="mobile homes"
             headingLabel="You are looking for:"
         >
-            {value?.map((preview, index) => {
-                const Icon = preview.icon
-                    ? iconMap[preview.icon]
+            {value?.map((option, index) => {
+                const Icon = option.icon
+                    ? iconMap[option.icon]
                     : iconMap.flagOutline;
 
                 const previewText = [
-                    preview.title || `Option ${index + 1}`,
-                    preview.description,
+                    option.title || `Option ${index + 1}`,
+                    option.description,
                 ].filter(Boolean).join(' - ');
 
                 return (
                     <div
                         className={styles.previewContent}
-                        key={preview.optionId}
+                        key={option.optionId}
                     >
                         {Icon && (
                             <div
                                 className={styles.previewIcon}
                                 style={{
-                                    backgroundColor: preview.iconColor || colorKeyToColorMap.gray,
+                                    backgroundColor: option.iconColor || colorKeyToColorMap.gray,
                                 }}
                             >
                                 <Icon />
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
index 4ed49e24a..614faada2 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
@@ -20,7 +20,8 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     error: Error<PartialSubOptionType> | undefined;
-    disabled: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 export default function SubOption(props: Props) {
     const {
@@ -30,6 +31,7 @@ export default function SubOption(props: Props) {
         index,
         error: riskyError,
         disabled,
+        readOnly,
     } = props;
 
     const onReasonChange = useFormObject(index, onChange, { subOptionsId: 1 });
@@ -44,7 +46,7 @@ export default function SubOption(props: Props) {
                 name={'description' as const}
                 error={error?.description}
                 onChange={onReasonChange}
-                disabled={disabled}
+                disabled={disabled || readOnly}
             />
             <NumberInput
                 className={styles.subOptionInput}
@@ -53,15 +55,17 @@ export default function SubOption(props: Props) {
                 name={'value' as const}
                 error={error?.value}
                 onChange={onReasonChange}
-                disabled={disabled}
+                disabled={disabled || readOnly}
             />
-            <Button
-                name={index}
-                onClick={onRemove}
-                disabled={disabled}
-            >
-                Remove
-            </Button>
+            {!readOnly && (
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    disabled={disabled}
+                >
+                    Remove
+                </Button>
+            )}
         </div>
     );
 }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index c8fd43178..031d38e56 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -34,10 +34,11 @@ type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number
 
 interface Props {
     value: PartialCustomOptionsType;
-    onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void;
+    onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void | undefined;
     index: number;
     error: Error<PartialCustomOptionsType> | undefined;
-    disabled: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 
 export default function CustomOptionInput(props: Props) {
@@ -47,6 +48,7 @@ export default function CustomOptionInput(props: Props) {
         index,
         error: riskyError,
         disabled,
+        readOnly,
     } = props;
 
     const onOptionChange = useFormObject(index, onChange, defaultCustomOptionsValue);
@@ -95,7 +97,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'title' as const}
                     onChange={onOptionChange}
                     error={error?.title}
-                    disabled={disabled}
+                    disabled={disabled || readOnly}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -107,7 +109,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: IconItem) => d.label}
                     onChange={onOptionChange}
                     error={error?.icon}
-                    disabled={disabled}
+                    disabled={disabled || readOnly}
                 />
             </div>
             <div className={styles.optionContent}>
@@ -118,7 +120,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'value' as const}
                     onChange={onOptionChange}
                     error={error?.value}
-                    disabled={disabled}
+                    disabled={disabled || readOnly}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -130,7 +132,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: ColorOptions) => d.label}
                     onChange={onOptionChange}
                     error={error?.iconColor}
-                    disabled={disabled}
+                    disabled={disabled || readOnly}
                 />
             </div>
             <TextInput
@@ -140,7 +142,7 @@ export default function CustomOptionInput(props: Props) {
                 name={'description' as const}
                 onChange={onOptionChange}
                 error={error?.description}
-                disabled={disabled}
+                disabled={disabled || readOnly}
             />
             {/* FIXME: use accordion open by default */}
             <div className={styles.subOptions}>
@@ -159,20 +161,23 @@ export default function CustomOptionInput(props: Props) {
                         onRemove={onsubOptionsRemove}
                         error={subOptionsError?.[sub.subOptionsId]}
                         disabled={disabled}
+                        readOnly={readOnly}
                     />
                 ))}
                 {!value.subOptions?.length && (
-                    <div>No sub options at the moment</div>
+                    <div>No sub options</div>
+                )}
+                {!readOnly && (
+                    <Button
+                        name="addSubOption"
+                        className={styles.addButton}
+                        icons={<MdAdd />}
+                        onClick={handleSubOptionsAdd}
+                        disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
+                    >
+                        Add Sub Options
+                    </Button>
                 )}
-                <Button
-                    name="addSubOption"
-                    className={styles.addButton}
-                    icons={<MdAdd />}
-                    onClick={handleSubOptionsAdd}
-                    disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
-                >
-                    Add Sub Options
-                </Button>
             </div>
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index b6dbf522e..329119c5b 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -586,7 +586,7 @@ function NewTutorial(props: Props) {
                                 />
                             </div>
                         ) : (
-                            <div>No options at the moment</div>
+                            <div>No options</div>
                         )}
                     </InputSection>
                 )}

From 04691bfca31ed4210bf4c7b68980aa9efdab2244 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 23 Jun 2023 17:56:39 +0545
Subject: [PATCH 47/72] Add geoJson css

---
 .../app/Base/utils/errorTransform.ts          |  8 +++---
 .../app/components/GeoJsonPreview/index.tsx   | 24 ++++++++++++-----
 .../ChangeDetectionGeoJsonPreview/index.tsx   | 17 ++++++++++++
 .../FootprintGeoJsonPreview/index.tsx         | 25 +++++++++++++----
 .../ScenarioGeoJsonPreview/index.tsx          | 27 ++++++++++++++++++-
 .../ScenarioGeoJsonPreview/styles.css         |  4 +--
 .../NewTutorial/ScenarioPageInput/index.tsx   | 10 +++----
 .../app/views/NewTutorial/index.tsx           |  8 +-----
 .../app/views/NewTutorial/utils.ts            |  4 +--
 9 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/manager-dashboard/app/Base/utils/errorTransform.ts b/manager-dashboard/app/Base/utils/errorTransform.ts
index 7853b99f1..1ca65effe 100644
--- a/manager-dashboard/app/Base/utils/errorTransform.ts
+++ b/manager-dashboard/app/Base/utils/errorTransform.ts
@@ -1,8 +1,8 @@
-import { internal } from '@togglecorp/toggle-form';
+import { nonFieldError } from '@togglecorp/toggle-form';
 import { listToMap, isDefined, isNotDefined } from '@togglecorp/fujs';
 
 interface Error {
-    [internal]?: string | undefined;
+    [nonFieldError]?: string | undefined;
     [key: string]: string | Error | undefined;
 }
 
@@ -53,7 +53,7 @@ function transformObject(errors: ObjectError[] | undefined): Error | undefined {
     );
 
     return {
-        [internal]: finalNonFieldErrors,
+        [nonFieldError]: finalNonFieldErrors,
         ...finalFieldErrors,
     };
 }
@@ -68,7 +68,7 @@ function transformArray(errors: (ArrayError | null)[] | undefined): Error | unde
     const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
 
     return {
-        [internal]: topLevelError?.messages,
+        [nonFieldError]: topLevelError?.messages,
         ...listToMap(
             memberErrors,
             (error) => error.clientId,
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 748392fb7..4aa45f0bf 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -5,6 +5,8 @@ import {
     geoJSON,
     TileLayer,
     Coords,
+    StyleFunction,
+    PointExpression,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -48,6 +50,8 @@ interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
     url?: string | undefined;
+    previewStyle?: StyleFunction;
+    boundsPadding?: PointExpression | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
@@ -55,6 +59,8 @@ function GeoJsonPreview(props: Props) {
         className,
         geoJson,
         url,
+        previewStyle,
+        boundsPadding = [0, 0],
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -66,6 +72,7 @@ function GeoJsonPreview(props: Props) {
                 mapRef.current = createMap(mapContainerRef.current, {
                     zoomSnap: 0,
                     scrollWheelZoom: false,
+                    zoomControl: false,
                 });
             }
 
@@ -91,14 +98,12 @@ function GeoJsonPreview(props: Props) {
                 );
 
                 layer.addTo(mapRef.current);
-                mapRef.current.zoomControl.remove();
                 mapRef.current.invalidateSize();
             }
 
             return () => {
                 if (mapRef.current) {
                     mapRef.current.remove();
-                    mapRef.current.zoomControl.remove();
                     mapRef.current = undefined;
                 }
             };
@@ -117,14 +122,14 @@ function GeoJsonPreview(props: Props) {
                 return undefined;
             }
 
-            const newGeoJson = geoJSON();
+            const newGeoJson = geoJSON(geoJson, {
+                style: previewStyle,
+            });
             newGeoJson.addTo(map);
-
-            newGeoJson.addData(geoJson);
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds, { padding: [0, 0] });
+                map.fitBounds(bounds, { padding: boundsPadding });
             }
 
             return () => {
@@ -133,7 +138,12 @@ function GeoJsonPreview(props: Props) {
             };
         },
         // NOTE: adding url as dependency as url will re-create the map
-        [geoJson, url],
+        [
+            geoJson,
+            url,
+            previewStyle,
+            boundsPadding,
+        ],
     );
 
     return (
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 2baa78c58..5a83bbf66 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { PointExpression } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import MobilePreview from '#components/MobilePreview';
@@ -29,6 +30,18 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
         urlB,
     } = props;
 
+    const previewStyles = React.useCallback(() => (
+        {
+            stroke: true,
+            weight: 0.5,
+            color: '#ffffff',
+            fillColor: 'transparent',
+            fillOpacity: 0.2,
+        }
+    ), []);
+
+    const boundsPadding: PointExpression = [10, 10];
+
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
@@ -45,13 +58,17 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
+                previewStyle={previewStyles}
                 geoJson={geoJson}
                 url={url}
+                boundsPadding={boundsPadding}
             />
             <GeoJsonPreview
                 className={styles.mapPreview}
+                previewStyle={previewStyles}
                 geoJson={geoJson}
                 url={urlB}
+                boundsPadding={boundsPadding}
             />
         </MobilePreview>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 8d7d0c351..25283deb5 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleFunction } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import MobilePreview from '#components/MobilePreview';
@@ -7,8 +8,9 @@ import { IconKey, iconMap } from '#utils/common';
 
 import {
     PartialCustomOptionsType,
-    FootprintGeoJSON,
     colorKeyToColorMap,
+    FootprintGeoJSON,
+    FootprintProperties,
 } from '../../utils';
 import styles from './styles.css';
 
@@ -21,7 +23,7 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
-    customOptionsPreview: PartialCustomOptionsType | undefined;
+    customOptions: PartialCustomOptionsType | undefined;
 }
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
@@ -29,9 +31,19 @@ export default function FootprintGeoJsonPreview(props: Props) {
         geoJson,
         url,
         previewPopUp,
-        customOptionsPreview,
+        customOptions,
     } = props;
 
+    const previewStyles: StyleFunction<FootprintProperties> = React.useCallback(() => (
+        {
+            color: '#ffffff',
+            dashArray: '3',
+            stroke: true,
+            weight: 1,
+            fillColor: 'transparent',
+        }
+    ), []);
+
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
@@ -47,11 +59,12 @@ export default function FootprintGeoJsonPreview(props: Props) {
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
+                previewStyle={previewStyles}
                 url={url}
                 geoJson={geoJson}
             />
             <div className={styles.options}>
-                {customOptionsPreview?.map((option) => {
+                {customOptions?.map((option) => {
                     const Icon = option.icon
                         ? iconMap[option.icon]
                         : iconMap.flagOutline;
@@ -69,7 +82,9 @@ export default function FootprintGeoJsonPreview(props: Props) {
                                     ),
                                 }}
                             >
-                                <Icon />
+                                {Icon && (
+                                    <Icon />
+                                )}
                             </div>
                         </div>
                     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
index 4c4b6f8ae..b89438ad0 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { PathOptions, StyleFunction } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import MobilePreview from '#components/MobilePreview';
 import GeoJsonPreview from '#components/GeoJsonPreview';
 import { iconMap, IconKey } from '#utils/common';
 
-import { BuildAreaGeoJSON } from '../../utils';
+import { BuildAreaGeoJSON, BuildAreaProperties } from '../../utils';
 import styles from './styles.css';
 
 interface Props {
@@ -27,6 +28,29 @@ function ScenarioGeoJsonPreview(props: Props) {
         url,
     } = props;
 
+    const previewStyles: StyleFunction<BuildAreaProperties> = React.useCallback((feature) => {
+        const buildAreaPreviewStylesobject: PathOptions = {
+            color: '#ffffff',
+            stroke: true,
+            weight: 0.5,
+            fillOpacity: 0.2,
+        };
+        if (!feature) {
+            return buildAreaPreviewStylesobject;
+        }
+        const referenceColorMap: Record<number, string> = {
+            0: 'transparent',
+            1: 'green',
+            2: 'yellow',
+            3: 'red',
+        };
+        const ref = feature.properties.reference;
+        return {
+            ...buildAreaPreviewStylesobject,
+            fillColor: referenceColorMap[ref] || 'transparent',
+        };
+    }, []);
+
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
@@ -44,6 +68,7 @@ function ScenarioGeoJsonPreview(props: Props) {
                 className={styles.mapContainer}
                 geoJson={geoJson}
                 url={url}
+                previewStyle={previewStyles}
             />
         </MobilePreview>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
index b81e22c64..b30921584 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
@@ -1,10 +1,8 @@
 .scenario-geo-json-preview {
     .content {
-        padding: var(--spacing-extra-large) var(--spacing-medium);
-
         .map-container {
             z-index: 0;
-            height: var(--height-mobile-preview);
+            height: var(--height-mobile-preview-builarea-content);
         }
     }
 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 542037092..bfeb4fd33 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -79,7 +79,7 @@ interface Props {
     projectType: ProjectType | undefined;
     url: string | undefined;
     urlB: string | undefined;
-    customOptionsPreview: PartialCustomOptionsType | undefined;
+    customOptions: PartialCustomOptionsType | undefined;
     scenarioId: number;
     disabled: boolean;
 }
@@ -94,7 +94,7 @@ export default function ScenarioPageInput(props: Props) {
         url,
         projectType,
         urlB,
-        customOptionsPreview,
+        customOptions,
         scenarioId,
         disabled,
     } = props;
@@ -260,7 +260,8 @@ export default function ScenarioPageInput(props: Props) {
                         urlB={urlB}
                     />
                 )}
-                {projectType === (PROJECT_TYPE_BUILD_AREA || PROJECT_TYPE_COMPLETENESS) && (
+                {((projectType === PROJECT_TYPE_BUILD_AREA)
+                    || (projectType === PROJECT_TYPE_COMPLETENESS)) && (
                     // FIXME: Rename this to something more specific
                     <ScenarioGeoJsonPreview
                         geoJson={geoJson as BuildAreaGeoJSON | undefined}
@@ -272,8 +273,7 @@ export default function ScenarioPageInput(props: Props) {
                     <FootprintGeoJsonPreview
                         geoJson={geoJson as FootprintGeoJSON | undefined}
                         url={url}
-                        previewPopUp={previewPopUpData}
-                        customOptionsPreview={customOptionsPreview}
+                        customOptions={customOptions}
                     />
                 )}
                 <SegmentInput
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 329119c5b..205fe3f14 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -280,12 +280,6 @@ function NewTutorial(props: Props) {
                     createdBy: userId,
                 };
 
-                console.log(uploadData);
-                if (uploadData) {
-                    setTutorialSubmissionStatus('failed');
-                    return;
-                }
-
                 const database = getDatabase();
                 const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
                 const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -732,7 +726,7 @@ function NewTutorial(props: Props) {
                                     projectType={value.projectType}
                                     onChange={onScenarioFormChange}
                                     error={scenarioError?.[task.scenarioId]}
-                                    customOptionsPreview={customOptions}
+                                    customOptions={customOptions}
                                     geoJson={value.tutorialTasks}
                                     url={tileServerAUrl}
                                     urlB={tileServerBUrl}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 3ed3cef69..63eb41155 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -269,7 +269,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
     },
 ];
 
-interface BuildAreaProperties {
+export interface BuildAreaProperties {
     reference: number;
     screen: number;
     // eslint-disable-next-line camelcase
@@ -286,7 +286,7 @@ interface BuildAreaProperties {
     // category for completeness?
 }
 
-interface FootprintProperties {
+export interface FootprintProperties {
     id: string;
     reference: number;
     screen: number;

From 6030207e6dd58524e80021c9d9efa953c9bf93fc Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Fri, 23 Jun 2023 18:41:36 +0545
Subject: [PATCH 48/72] Pass preview popup information on footprint

---
 .../app/views/NewTutorial/ScenarioPageInput/index.tsx            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index bfeb4fd33..5b16ff1ca 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -272,6 +272,7 @@ export default function ScenarioPageInput(props: Props) {
                 {projectType === PROJECT_TYPE_FOOTPRINT && (
                     <FootprintGeoJsonPreview
                         geoJson={geoJson as FootprintGeoJSON | undefined}
+                        previewPopUp={previewPopUpData}
                         url={url}
                         customOptions={customOptions}
                     />

From eaa1e2084b0728518250453486dea66a735c7e72 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 26 Jun 2023 14:57:41 +0545
Subject: [PATCH 49/72] fix PR comments

---
 docker-compose.yaml                           |   8 +-
 .../app/components/Card/index.tsx             |  43 ------
 .../app/components/Card/styles.css            |  24 ----
 .../components/ExpandableContainer/styles.css |   6 +-
 .../app/components/GeoJsonFileInput/index.tsx |   2 +-
 .../app/components/GeoJsonPreview/index.tsx   |  10 +-
 .../app/components/MarkdownEditor/index.tsx   |  10 +-
 .../app/components/MobilePreview/styles.css   |   8 +-
 .../app/components/PopupButton/index.tsx      |   4 +-
 .../app/components/Tabs/index.tsx             | 135 ------------------
 .../app/components/Tabs/styles.css            |  18 ---
 .../app/components/TileServerInput/index.tsx  |  54 ++++---
 manager-dashboard/app/utils/common.tsx        |   4 +
 .../app/views/NewProject/index.tsx            |  12 +-
 .../app/views/NewProject/utils.ts             |  15 +-
 .../CustomOptionPreview/index.tsx             |   6 +-
 .../CustomOptionPreview/styles.css            |   4 +-
 .../NewTutorial/CustomOptionInput/index.tsx   |  29 ++--
 .../{Block => BlockInput}/index.tsx           |   4 +-
 .../{Block => BlockInput}/styles.css          |   0
 .../InformationPagePreview/index.tsx          |   4 +-
 .../InformationPageInput/index.tsx            |  11 +-
 .../index.tsx                                 |  58 ++++----
 .../styles.css                                |   0
 .../ChangeDetectionGeoJsonPreview/index.tsx   |  39 +++--
 .../FootprintGeoJsonPreview/index.tsx         |  30 ++--
 .../NewTutorial/ScenarioPageInput/index.tsx   |  36 +++--
 .../app/views/NewTutorial/index.tsx           |  61 ++------
 .../app/views/NewTutorial/utils.ts            |  61 ++++----
 yarn.lock                                     |   4 -
 30 files changed, 239 insertions(+), 461 deletions(-)
 delete mode 100644 manager-dashboard/app/components/Card/index.tsx
 delete mode 100644 manager-dashboard/app/components/Card/styles.css
 delete mode 100644 manager-dashboard/app/components/Tabs/index.tsx
 delete mode 100644 manager-dashboard/app/components/Tabs/styles.css
 rename manager-dashboard/app/views/NewTutorial/InformationPageInput/{Block => BlockInput}/index.tsx (95%)
 rename manager-dashboard/app/views/NewTutorial/InformationPageInput/{Block => BlockInput}/styles.css (100%)
 rename manager-dashboard/app/views/NewTutorial/ScenarioPageInput/{ScenarioGeoJsonPreview => BuildAreaGeoJsonPreview}/index.tsx (57%)
 rename manager-dashboard/app/views/NewTutorial/ScenarioPageInput/{ScenarioGeoJsonPreview => BuildAreaGeoJsonPreview}/styles.css (100%)

diff --git a/docker-compose.yaml b/docker-compose.yaml
index 77e574093..ddd85c0d9 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -138,10 +138,10 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
-            REACT_APP_IMAGE_BING_API_KEY: '${IMAGE_BING_API_KEY}'
-            REACT_APP_IMAGE_MAPBOX_API_KEY: '${IMAGE_MAPBOX_API_KEY}'
-            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: '${IMAGE_MAXAR_PREMIUM_API_KEY}'
-            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: '${IMAGE_MAXAR_STANDARD_API_KEY}'
+            REACT_APP_IMAGE_BING_API_KEY: ${IMAGE_BING_API_KEY}
+            REACT_APP_IMAGE_MAPBOX_API_KEY: ${IMAGE_MAPBOX_API_KEY}
+            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: ${IMAGE_MAXAR_PREMIUM_API_KEY}
+            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: ${IMAGE_MAXAR_STANDARD_API_KEY}
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'
diff --git a/manager-dashboard/app/components/Card/index.tsx b/manager-dashboard/app/components/Card/index.tsx
deleted file mode 100644
index 3c13e3041..000000000
--- a/manager-dashboard/app/components/Card/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { _cs } from '@togglecorp/fujs';
-
-import styles from './styles.css';
-
-interface Props {
-    className?: string;
-    children?: React.ReactNode;
-    contentClassName?: string;
-    title?: React.ReactNode;
-    multiColumn?: boolean;
-}
-
-function Card(props: Props) {
-    const {
-        className,
-        children,
-        title,
-        multiColumn,
-        contentClassName,
-    } = props;
-
-    return (
-        <div
-            className={_cs(
-                styles.card,
-                multiColumn && styles.multiColumn,
-                className,
-            )}
-        >
-            {title && (
-                <div className={styles.title}>
-                    {title}
-                </div>
-            )}
-            <div className={_cs(styles.content, contentClassName)}>
-                {children}
-            </div>
-        </div>
-    );
-}
-
-export default Card;
diff --git a/manager-dashboard/app/components/Card/styles.css b/manager-dashboard/app/components/Card/styles.css
deleted file mode 100644
index 75fc13db7..000000000
--- a/manager-dashboard/app/components/Card/styles.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.card {
-    background-color: var(--color-foreground);
-    padding: var(--spacing-medium);
-
-    .title {
-        padding: var(--spacing-medium);
-        font-weight: var(--font-weight-bold);
-    }
-
-    .content {
-        padding: var(--spacing-medium);
-    }
-
-    &.multi-column {
-        .content {
-            display: flex;
-
-            >* {
-                flex-basis: 0;
-                flex-grow: 1;
-            }
-        }
-    }
-}
diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
index ab519f60f..bab691f46 100644
--- a/manager-dashboard/app/components/ExpandableContainer/styles.css
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -12,7 +12,7 @@
 
         .header {
             flex-grow: 1;
-            font-size: 1.2rem;
+            font-size: var(--font-size-large);
         }
 
         .icons {
@@ -21,7 +21,7 @@
             flex-shrink: 0;
 
             >* {
-                font-size: 1.2rem;
+                font-size: var(--font-size-large);
             }
         }
 
@@ -31,7 +31,7 @@
             flex-shrink: 0;
 
             >* {
-                font-size: 1.2rem;
+                font-size: var(--font-size-large);
             }
         }
     }
diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index c5408a984..cbb9bf731 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -96,9 +96,9 @@ function GeoJsonFileInput<N>(props: Props<N>) {
             const file = newValue;
 
             async function handleValidationAndChange() {
-                const text = await readUploadedFileAsText(file);
                 let fileAsJson;
                 try {
+                    const text = await readUploadedFileAsText(file);
                     if (!mountedRef.current) {
                         return;
                     }
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 4aa45f0bf..ec944d54e 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -6,7 +6,6 @@ import {
     TileLayer,
     Coords,
     StyleFunction,
-    PointExpression,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -51,16 +50,14 @@ interface Props {
     geoJson: GeoJSON.GeoJSON | undefined;
     url?: string | undefined;
     previewStyle?: StyleFunction;
-    boundsPadding?: PointExpression | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
-        url,
+        url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
         previewStyle,
-        boundsPadding = [0, 0],
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -83,7 +80,7 @@ function GeoJsonPreview(props: Props) {
                     1,
                 );
 
-                const finalUrl = url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+                const finalUrl = url;
                 const quadKeyUrl = finalUrl.indexOf('{quad_key}') !== -1;
                 const Layer = quadKeyUrl
                     ? BingTileLayer
@@ -129,7 +126,7 @@ function GeoJsonPreview(props: Props) {
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds, { padding: boundsPadding });
+                map.fitBounds(bounds);
             }
 
             return () => {
@@ -142,7 +139,6 @@ function GeoJsonPreview(props: Props) {
             geoJson,
             url,
             previewStyle,
-            boundsPadding,
         ],
     );
 
diff --git a/manager-dashboard/app/components/MarkdownEditor/index.tsx b/manager-dashboard/app/components/MarkdownEditor/index.tsx
index 6ebb9771e..684ef68e8 100644
--- a/manager-dashboard/app/components/MarkdownEditor/index.tsx
+++ b/manager-dashboard/app/components/MarkdownEditor/index.tsx
@@ -6,18 +6,18 @@ import MarkdownPreview from '../MarkdownPreview';
 
 import styles from './styles.css';
 
-interface MarkdownEditorProps<K extends string> {
-    name: K;
+interface MarkdownEditorProps<NAME extends string> {
+    name: NAME;
     className?: string;
     readOnly?: boolean;
     disabled?: boolean;
     value: string | null | undefined;
-    onChange?:(newVal: string | undefined, name: K) => void;
+    onChange?:(newVal: string | undefined, name: NAME) => void;
 }
 
-export type Props<K extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<K>;
+export type Props<NAME extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<NAME>;
 
-function MarkdownEditor<K extends string>(props: Props<K>) {
+function MarkdownEditor<NAME extends string>(props: Props<NAME>) {
     const {
         name,
         value,
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index ed1d822e5..aa6f51ad6 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -29,7 +29,7 @@
 
         .icons {
             .back-icon {
-                font-size: 2rem;
+                font-size: var(--font-size-super-large);
             }
         }
 
@@ -37,7 +37,7 @@
             flex-shrink: 0;
 
             .info-icon {
-                font-size: 1.6rem;
+                font-size: var(--font-size-extra-large);
             }
         }
     }
@@ -49,7 +49,7 @@
         flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
-        padding: 1rem;
+        padding: var(--spacing-medium);
         overflow: auto;
 
         .content {
@@ -75,7 +75,7 @@
 
             .icons {
                 flex-shrink: 0;
-                font-size: 2rem;
+                font-size: var(--font-size-super-large);
             }
         }
     }
diff --git a/manager-dashboard/app/components/PopupButton/index.tsx b/manager-dashboard/app/components/PopupButton/index.tsx
index 2ed1c13e8..4392f3537 100644
--- a/manager-dashboard/app/components/PopupButton/index.tsx
+++ b/manager-dashboard/app/components/PopupButton/index.tsx
@@ -11,7 +11,7 @@ import Popup from '../Popup';
 
 import styles from './styles.css';
 
-export interface PopupButtonProps<N extends number | string | undefined> extends Omit<ButtonProps<N>, 'label'> {
+export interface PopupButtonProps<NAME extends number | string | undefined> extends Omit<ButtonProps<NAME>, 'label'> {
     popupClassName?: string;
     popupContentClassName?: string;
     label: React.ReactNode;
@@ -23,7 +23,7 @@ export interface PopupButtonProps<N extends number | string | undefined> extends
     defaultShown?: boolean;
 }
 
-function PopupButton<N extends number | string | undefined>(props: PopupButtonProps<N>) {
+function PopupButton<NAME extends number | string | undefined>(props: PopupButtonProps<NAME>) {
     const {
         popupClassName,
         popupContentClassName,
diff --git a/manager-dashboard/app/components/Tabs/index.tsx b/manager-dashboard/app/components/Tabs/index.tsx
deleted file mode 100644
index 0404419f1..000000000
--- a/manager-dashboard/app/components/Tabs/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import { _cs } from '@togglecorp/fujs';
-import RawButton, { Props as RawButtonProps } from '../RawButton';
-
-import styles from './styles.css';
-
-type TabKey = string | number;
-
-export interface TabContextProps {
-    activeTab: TabKey | undefined;
-    setActiveTab: (key: TabKey | undefined) => void;
-}
-
-const TabContext = React.createContext<TabContextProps>({
-    activeTab: undefined,
-    setActiveTab: () => {
-        // eslint-disable-next-line no-console
-        console.warn('setActiveTab called before it was initialized');
-    },
-});
-
-export interface TabProps<T> extends Omit<RawButtonProps<T>, 'onClick'>{
-    name: T;
-}
-
-export function Tab<T extends TabKey>(props: TabProps<T>) {
-    const {
-        activeTab,
-        setActiveTab,
-    } = React.useContext(TabContext);
-
-    const {
-        className,
-        name,
-        ...otherProps
-    } = props;
-
-    const isActive = name === activeTab;
-
-    return (
-        <RawButton
-            className={_cs(
-                className,
-                styles.tab,
-                isActive && styles.active,
-            )}
-            onClick={setActiveTab}
-            name={name}
-            role="tab"
-            {...otherProps}
-        />
-    );
-}
-
-export interface TabListProps extends React.HTMLProps<HTMLDivElement> {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export function TabList(props: TabListProps) {
-    const {
-        children,
-        className,
-        ...otherProps
-    } = props;
-
-    return (
-        <div
-            {...otherProps}
-            className={_cs(className, styles.tabList)}
-            role="tablist"
-        >
-            { children }
-        </div>
-    );
-}
-
-export interface TabPanelProps extends Omit<React.HTMLProps<HTMLDivElement>, 'name'> {
-    name: TabKey;
-    elementRef?: React.Ref<HTMLDivElement>;
-    className?: string;
-}
-
-export function TabPanel(props: TabPanelProps) {
-    const { activeTab } = React.useContext(TabContext);
-
-    const {
-        name,
-        elementRef,
-        className,
-        ...otherProps
-    } = props;
-
-    if (name !== activeTab) {
-        return null;
-    }
-
-    return (
-        <div
-            {...otherProps}
-            role="tabpanel"
-            ref={elementRef}
-            className={className}
-        />
-    );
-}
-
-export interface Props<VALUE> {
-    children: React.ReactNode;
-    value: VALUE;
-    onChange: (key: VALUE) => void;
-}
-
-export function Tabs<VALUE>(props: Props<VALUE>) {
-    const {
-        children,
-        value,
-        onChange,
-    } = props;
-
-    const contextValue = React.useMemo(() => ({
-        // Note: following cast is required since we do not have any other method
-        // to provide template in the context type
-        activeTab: value as TabKey,
-        setActiveTab: onChange as (key: TabKey | undefined) => void,
-    }), [value, onChange]);
-
-    return (
-        <TabContext.Provider value={contextValue}>
-            { children }
-        </TabContext.Provider>
-    );
-}
-
-export default Tabs;
diff --git a/manager-dashboard/app/components/Tabs/styles.css b/manager-dashboard/app/components/Tabs/styles.css
deleted file mode 100644
index c6a4bab5a..000000000
--- a/manager-dashboard/app/components/Tabs/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.tab {
-    border: var(--width-separator-thin) solid var(--color-separator);
-    border-radius: 0.25rem 0.25rem 0 0;
-    border-bottom-color: transparent;
-    background-color: var(--color-foreground);
-    padding: var(--spacing-small);
-    text-align: left;
-
-    &.active {
-        background-color: var(--color-background-accent-hint);
-    }
-}
-
-.tab-list {
-    display: flex;
-    gap: var(--spacing-small);
-    border-bottom: var(--width-separator-thin) solid var(--color-separator);
-}
diff --git a/manager-dashboard/app/components/TileServerInput/index.tsx b/manager-dashboard/app/components/TileServerInput/index.tsx
index 89ab50277..951af43b4 100644
--- a/manager-dashboard/app/components/TileServerInput/index.tsx
+++ b/manager-dashboard/app/components/TileServerInput/index.tsx
@@ -7,6 +7,8 @@ import {
     SetValueArg,
     ObjectSchema,
     requiredStringCondition,
+    addCondition,
+    nullValue,
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
@@ -80,7 +82,7 @@ type TileServerInputType = PartialForm<TileServer>;
 type TileServerSchema = ObjectSchema<PartialForm<TileServerInputType>, unknown>;
 type TileServerFields = ReturnType<TileServerSchema['fields']>;
 export function tileServerFieldsSchema(value: TileServerInputType | undefined): TileServerFields {
-    const basicFields: TileServerFields = {
+    let basicFields: TileServerFields = {
         name: {
             required: true,
             requiredValidation: requiredStringCondition,
@@ -92,31 +94,41 @@ export function tileServerFieldsSchema(value: TileServerInputType | undefined):
             validations: [getNoMoreThanNCharacterCondition(1000)],
         },
     };
-
-    if (value?.name === TILE_SERVER_CUSTOM) {
-        return {
-            ...basicFields,
-            url: {
-                required: true,
-                requiredValidation: requiredStringCondition,
-                validations: [
-                    getNoMoreThanNCharacterCondition(1000),
-                    imageryUrlCondition,
-                ],
-            },
-            wmtsLayerName: {
-                required: true,
-                requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(1000)],
-            },
-        };
-    }
+    basicFields = addCondition(
+        basicFields,
+        value,
+        ['name'],
+        ['url', 'wmtsLayerName'],
+        (tileValues) => {
+            if (tileValues?.name === TILE_SERVER_CUSTOM) {
+                return {
+                    url: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                        validations: [
+                            getNoMoreThanNCharacterCondition(1000),
+                            imageryUrlCondition,
+                        ],
+                    },
+                    wmtsLayerName: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                        validations: [getNoMoreThanNCharacterCondition(1000)],
+                    },
+                };
+            }
+            return {
+                url: { forceValue: nullValue },
+                wmtsLayerName: { forceValue: nullValue },
+            };
+        },
+    );
     return basicFields;
 }
 
 type TileServerInputValue = TileServerInputType | undefined;
 const defaultValue: NonNullable<TileServerInputValue> = {
-    name: TILE_SERVER_ESRI,
+    name: TILE_SERVER_BING,
 };
 
 interface Props<Name extends string | number> {
diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
index 72606ac04..0ea3a6910 100644
--- a/manager-dashboard/app/utils/common.tsx
+++ b/manager-dashboard/app/utils/common.tsx
@@ -44,6 +44,10 @@ export function labelSelector<T>(item: { label: T }) {
     return item.label;
 }
 
+export function keySelector<T>(item: { key: T }) {
+    return item.key;
+}
+
 export function getNoMoreThanNCharacterCondition(maxCharacters: number) {
     return (value: string | undefined) => {
         if (!isDefined(value) || value.length <= maxCharacters) {
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index 8f85b870d..d3a0f8455 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -392,20 +392,23 @@ function NewProject(props: Props) {
 
     const { customOptions: customOptionsFromValue } = value;
 
-    const customOptions = customOptionsFromValue?.map((option) => ({
+    const customOptions = React.useMemo(() => (customOptionsFromValue?.map((option) => ({
         ...option,
         optionId: option.value,
         subOptions: option.subOptions?.map((subOption) => ({
             ...subOption,
             subOptionsId: subOption.value,
         })),
-    }));
+    }))), [customOptionsFromValue]);
 
     const optionsError = React.useMemo(
         () => getErrorObject(error?.customOptions),
         [error?.customOptions],
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noOp = () => {};
+
     return (
         <div className={_cs(styles.newProject, className)}>
             <div className={styles.container}>
@@ -455,9 +458,7 @@ function NewProject(props: Props) {
                                                 key={option.value}
                                                 value={option}
                                                 index={index}
-                                                // eslint-disable-next-line max-len
-                                                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                                                onChange={() => {}}
+                                                onChange={noOp}
                                                 error={optionsError?.[option.value]}
                                                 readOnly
                                             />
@@ -466,6 +467,7 @@ function NewProject(props: Props) {
                                 </div>
                                 <CustomOptionPreview
                                     value={customOptions}
+                                    lookFor={value.lookFor}
                                 />
                             </div>
                         ) : (
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index 3aec6276a..06a3bddc5 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -196,8 +196,10 @@ export const projectFormSchema: ProjectFormSchema = {
             },
             projectNumber: {
                 required: true,
-                requiredValidation: integerCondition,
-                validations: [greaterThanCondition(0)],
+                validations: [
+                    integerCondition,
+                    greaterThanCondition(0),
+                ],
             },
             requestingOrganisation: {
                 required: true,
@@ -216,6 +218,7 @@ export const projectFormSchema: ProjectFormSchema = {
                 validations: [getNoMoreThanNCharacterCondition(25)],
             },
             projectDetails: {
+                required: true,
                 requiredValidation: requiredStringCondition,
                 validations: [getNoMoreThanNCharacterCondition(10000)],
             },
@@ -235,8 +238,8 @@ export const projectFormSchema: ProjectFormSchema = {
             },
             groupSize: {
                 required: true,
-                requiredValidation: integerCondition,
                 validations: [
+                    integerCondition,
                     greaterThanOrEqualToCondition(10),
                     lessThanOrEqualToCondition(250),
                 ],
@@ -245,8 +248,10 @@ export const projectFormSchema: ProjectFormSchema = {
                 fields: tileServerFieldsSchema,
             },
             maxTasksPerUser: {
-                requiredValidation: integerCondition,
-                validations: [greaterThanCondition(0)],
+                validations: [
+                    integerCondition,
+                    greaterThanCondition(0),
+                ],
             },
         };
         baseSchema = addCondition(
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index b5955a315..0a93f152c 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -10,12 +10,14 @@ import {
 import styles from './styles.css';
 
 interface Props {
-    value: PartialTutorialFormType['customOptions']
+    value: PartialTutorialFormType['customOptions'];
+    lookFor: string | undefined;
 }
 
 export default function CustomOptionPreview(props: Props) {
     const {
         value,
+        lookFor,
     } = props;
 
     return (
@@ -23,7 +25,7 @@ export default function CustomOptionPreview(props: Props) {
             className={styles.optionPreview}
             contentClassName={styles.content}
             // FIXME: get this from 'look for'
-            heading="mobile homes"
+            heading={lookFor || 'mobile homes'}
             headingLabel="You are looking for:"
         >
             {value?.map((option, index) => {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index b249962ab..c0efe0746 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -15,8 +15,8 @@
                 align-items: center;
                 border-radius: 50%;
                 /* FIXME: do not hard code this if possible */
-                padding: 3px;
-                font-size: 30px;
+                padding: var(--spacing-extra-small);
+                font-size: var(--font-size-extra-large);
             }
 
             .preview-text {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 031d38e56..4619e33e7 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -14,20 +14,19 @@ import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 import NonFieldError from '#components/NonFieldError';
+import { iconList, keySelector, labelSelector } from '#utils/common';
 
 import SubOptionInput from './SubOptionInput';
 import {
-    ColorOptions,
     PartialTutorialFormType,
     iconColorOptions,
 } from '../utils';
 
 import styles from './styles.css';
-import { IconItem, iconList } from '#utils/common';
 
 export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
 const defaultCustomOptionsValue: PartialCustomOptionsType = {
-    optionId: 1,
+    optionId: -1,
 };
 
 type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number];
@@ -54,8 +53,8 @@ export default function CustomOptionInput(props: Props) {
     const onOptionChange = useFormObject(index, onChange, defaultCustomOptionsValue);
 
     const {
-        setValue: onsubOptionsAdd,
-        removeValue: onsubOptionsRemove,
+        setValue: onSubOptionsAdd,
+        removeValue: onSubOptionsRemove,
     } = useFormArray('subOptions', onOptionChange);
 
     const error = getErrorObject(riskyError);
@@ -71,15 +70,15 @@ export default function CustomOptionInput(props: Props) {
                 (oldValue: PartialCustomOptionsType['subOptions']) => {
                     const safeOldValue = oldValue ?? [];
 
-                    const newsubOptionsId = safeOldValue.length > 0
+                    const newSubOptionsId = safeOldValue.length > 0
                         ? Math.max(...safeOldValue.map((subOptions) => subOptions.subOptionsId)) + 1
                         : 1;
 
-                    const newsubOptions: subOptionsType = {
-                        subOptionsId: newsubOptionsId,
+                    const newSubOptions: subOptionsType = {
+                        subOptionsId: newSubOptionsId,
                     };
 
-                    return [...safeOldValue, newsubOptions];
+                    return [...safeOldValue, newSubOptions];
                 },
                 'subOptions',
             );
@@ -105,8 +104,8 @@ export default function CustomOptionInput(props: Props) {
                     label="Icon"
                     value={value?.icon}
                     options={iconList}
-                    keySelector={(d: IconItem) => d.key}
-                    labelSelector={(d: IconItem) => d.label}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
                     onChange={onOptionChange}
                     error={error?.icon}
                     disabled={disabled || readOnly}
@@ -128,8 +127,8 @@ export default function CustomOptionInput(props: Props) {
                     label="Icon Color"
                     value={value?.iconColor}
                     options={iconColorOptions}
-                    keySelector={(d: ColorOptions) => d.color}
-                    labelSelector={(d: ColorOptions) => d.label}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
                     onChange={onOptionChange}
                     error={error?.iconColor}
                     disabled={disabled || readOnly}
@@ -157,8 +156,8 @@ export default function CustomOptionInput(props: Props) {
                         key={sub.subOptionsId}
                         value={sub}
                         index={i}
-                        onChange={onsubOptionsAdd}
-                        onRemove={onsubOptionsRemove}
+                        onChange={onSubOptionsAdd}
+                        onRemove={onSubOptionsRemove}
                         error={subOptionsError?.[sub.subOptionsId]}
                         disabled={disabled}
                         readOnly={readOnly}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx
similarity index 95%
rename from manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx
index 85494f6da..9519f8560 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx
@@ -21,7 +21,7 @@ interface Props {
     disabled: boolean;
 }
 
-export default function Block(props: Props) {
+export default function BlockInput(props: Props) {
     const {
         value,
         onChange,
@@ -30,7 +30,7 @@ export default function Block(props: Props) {
         disabled,
     } = props;
 
-    const onBlockChange = useFormObject(index, onChange, { blockNumber: 1, blockType: 'text' });
+    const onBlockChange = useFormObject(index, onChange, { blockNumber: -1, blockType: 'text' });
 
     const error = getErrorObject(riskyError);
     return (
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/styles.css
rename to manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index d287a7b8f..122fecf79 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -10,19 +10,21 @@ import styles from './styles.css';
 interface Props {
     value: NonNullable<PartialTutorialFormType['informationPages']>[number];
     index: number;
+    lookFor: string | undefined;
 }
 
 export default function InformationPagePreview(props: Props) {
     const {
         value,
         index,
+        lookFor,
     } = props;
 
     return (
         <MobilePreview
             className={styles.informationPreview}
             // FIXME: get this from 'look for'
-            heading="mobile homes"
+            heading={lookFor || 'mobile homes'}
             headingLabel="You are looking for:"
             contentClassName={styles.content}
         >
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
index 44ebc72a9..5faf46697 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -11,30 +11,30 @@ import TextInput from '#components/TextInput';
 import InformationPagePreview from './InformationPagePreview';
 
 import { InformationPagesType } from '../utils';
-import Block from './Block';
+import BlockInput from './BlockInput';
 
 import styles from './styles.css';
 
 interface Props {
     value: InformationPagesType,
     onChange: (value: SetValueArg<InformationPagesType>, index: number) => void;
-    // onRemove: (index: number) => void;
     index: number;
     error: Error<InformationPagesType> | undefined;
     disabled: boolean;
+    lookFor: string | undefined;
 }
 
 export default function InformationPageInput(props: Props) {
     const {
         value,
         onChange,
-        // onRemove,
         index,
         error: riskyError,
         disabled,
+        lookFor,
     } = props;
 
-    const onInformationPageChange = useFormObject(index, onChange, { pageNumber: 1 });
+    const onInformationPageChange = useFormObject(index, onChange, { pageNumber: -1 });
 
     const {
         setValue: onChangeBlock,
@@ -59,7 +59,7 @@ export default function InformationPageInput(props: Props) {
                     disabled={disabled}
                 />
                 {value.blocks?.map((block, i) => (
-                    <Block
+                    <BlockInput
                         key={block.blockNumber}
                         value={block}
                         onChange={onChangeBlock}
@@ -72,6 +72,7 @@ export default function InformationPageInput(props: Props) {
             <InformationPagePreview
                 value={value}
                 index={index}
+                lookFor={lookFor}
             />
         </div>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
similarity index 57%
rename from manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
index b89438ad0..3b33cc288 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
@@ -18,50 +18,52 @@ interface Props {
         icon?: IconKey;
     }
     url: string | undefined;
+    lookFor: string | undefined;
 }
 
-function ScenarioGeoJsonPreview(props: Props) {
+const previewStyles: StyleFunction<BuildAreaProperties> = (feature) => {
+    const buildAreaPreviewStylesobject: PathOptions = {
+        color: '#ffffff',
+        stroke: true,
+        weight: 0.5,
+        fillOpacity: 0.2,
+    };
+    if (!feature) {
+        return buildAreaPreviewStylesobject;
+    }
+    const referenceColorMap: Record<number, string> = {
+        0: 'transparent',
+        1: 'green',
+        2: 'yellow',
+        3: 'red',
+    };
+    const ref = feature.properties.reference;
+    return {
+        ...buildAreaPreviewStylesobject,
+        fillColor: referenceColorMap[ref] || 'transparent',
+    };
+};
+
+function BuildAreaGeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
         previewPopUp,
         url,
+        lookFor,
     } = props;
 
-    const previewStyles: StyleFunction<BuildAreaProperties> = React.useCallback((feature) => {
-        const buildAreaPreviewStylesobject: PathOptions = {
-            color: '#ffffff',
-            stroke: true,
-            weight: 0.5,
-            fillOpacity: 0.2,
-        };
-        if (!feature) {
-            return buildAreaPreviewStylesobject;
-        }
-        const referenceColorMap: Record<number, string> = {
-            0: 'transparent',
-            1: 'green',
-            2: 'yellow',
-            3: 'red',
-        };
-        const ref = feature.properties.reference;
-        return {
-            ...buildAreaPreviewStylesobject,
-            fillColor: referenceColorMap[ref] || 'transparent',
-        };
-    }, []);
-
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
         <MobilePreview
             className={_cs(styles.scenarioGeoJsonPreview, className)}
             // FIXME: get this from 'look for'
-            heading="mobile homes"
+            heading={lookFor || 'mobile homes'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title ?? 'Title'}
-            popupDescription={previewPopUp?.description ?? 'Description'}
+            popupTitle={previewPopUp?.title || 'Title'}
+            popupDescription={previewPopUp?.description || 'Description'}
             contentClassName={styles.content}
         >
             <GeoJsonPreview
@@ -74,4 +76,4 @@ function ScenarioGeoJsonPreview(props: Props) {
     );
 }
 
-export default ScenarioGeoJsonPreview;
+export default BuildAreaGeoJsonPreview;
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/styles.css
similarity index 100%
rename from manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css
rename to manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/styles.css
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 5a83bbf66..703d06ff2 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { PointExpression } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import MobilePreview from '#components/MobilePreview';
@@ -17,42 +16,42 @@ interface Props {
         description?: string;
         icon?: IconKey;
     }
-    url: string | undefined;
+    urlA: string | undefined;
     urlB: string | undefined;
+    lookFor: string | undefined;
 }
 
+const previewStyles = () => (
+    {
+        stroke: true,
+        weight: 0.5,
+        color: '#ffffff',
+        fillColor: 'transparent',
+        fillOpacity: 0.2,
+    }
+);
+
 export default function ChangeDetectionGeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
         previewPopUp,
-        url,
+        urlA,
         urlB,
+        lookFor,
     } = props;
 
-    const previewStyles = React.useCallback(() => (
-        {
-            stroke: true,
-            weight: 0.5,
-            color: '#ffffff',
-            fillColor: 'transparent',
-            fillOpacity: 0.2,
-        }
-    ), []);
-
-    const boundsPadding: PointExpression = [10, 10];
-
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
         <MobilePreview
             className={_cs(styles.changeDetectionGeoJsonPreview, className)}
             // FIXME: get this from 'look for'
-            heading="mobile homes"
+            heading={lookFor || 'mobile homes'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title ?? 'Title'}
-            popupDescription={previewPopUp?.description ?? 'Description'}
+            popupTitle={previewPopUp?.title || 'Title'}
+            popupDescription={previewPopUp?.description || 'Description'}
             contentClassName={styles.content}
             popupClassName={styles.popup}
         >
@@ -60,15 +59,13 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
                 className={styles.mapPreview}
                 previewStyle={previewStyles}
                 geoJson={geoJson}
-                url={url}
-                boundsPadding={boundsPadding}
+                url={urlA}
             />
             <GeoJsonPreview
                 className={styles.mapPreview}
                 previewStyle={previewStyles}
                 geoJson={geoJson}
                 url={urlB}
-                boundsPadding={boundsPadding}
             />
         </MobilePreview>
     );
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index 25283deb5..fb1ef0d39 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -24,7 +24,19 @@ interface Props {
     }
     url: string | undefined;
     customOptions: PartialCustomOptionsType | undefined;
+    lookFor: string | undefined;
 }
+
+const previewStyles: StyleFunction<FootprintProperties> = () => (
+    {
+        color: '#ffffff',
+        dashArray: '3',
+        stroke: true,
+        weight: 1,
+        fillColor: 'transparent',
+    }
+);
+
 export default function FootprintGeoJsonPreview(props: Props) {
     const {
         className,
@@ -32,30 +44,20 @@ export default function FootprintGeoJsonPreview(props: Props) {
         url,
         previewPopUp,
         customOptions,
+        lookFor,
     } = props;
 
-    const previewStyles: StyleFunction<FootprintProperties> = React.useCallback(() => (
-        {
-            color: '#ffffff',
-            dashArray: '3',
-            stroke: true,
-            weight: 1,
-            fillColor: 'transparent',
-        }
-    ), []);
-
     const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
 
     return (
         <MobilePreview
             className={_cs(styles.footprintGeoJsonPreview, className)}
             contentClassName={styles.content}
-            // FIXME: get this from 'look for'
-            heading="mobile homes"
+            heading={lookFor || 'mobile homes'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title ?? 'Title'}
-            popupDescription={previewPopUp?.description ?? 'Description'}
+            popupTitle={previewPopUp?.title || 'Title'}
+            popupDescription={previewPopUp?.description || 'Description'}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 5b16ff1ca..551ef4f37 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -7,10 +7,10 @@ import {
     getErrorObject,
 } from '@togglecorp/toggle-form';
 import {
-    IconItem,
     iconList,
     valueSelector,
     labelSelector,
+    keySelector,
     IconKey,
     ProjectType,
     PROJECT_TYPE_BUILD_AREA,
@@ -30,7 +30,7 @@ import {
     ChangeDetectionGeoJSON,
     PartialCustomOptionsType,
 } from '../utils';
-import ScenarioGeoJsonPreview from './ScenarioGeoJsonPreview';
+import BuildAreaGeoJsonPreview from './BuildAreaGeoJsonPreview';
 import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
 import ChangeDetectionGeoJsonPreview from './ChangeDetectionGeoJsonPreview';
 import styles from './styles.css';
@@ -66,8 +66,9 @@ const previewOptions: ScenarioSegmentType[] = [
 ];
 
 type PartialScenarioType = PartialForm<ScenarioType, 'scenarioId'>;
+
 const defaultScenarioTabsValue: PartialScenarioType = {
-    scenarioId: 0,
+    scenarioId: -1,
 };
 
 interface Props {
@@ -77,11 +78,12 @@ interface Props {
     error: Error<PartialScenarioType> | undefined;
     geoJson: TutorialTasksGeoJSON | undefined;
     projectType: ProjectType | undefined;
-    url: string | undefined;
+    urlA: string | undefined;
     urlB: string | undefined;
     customOptions: PartialCustomOptionsType | undefined;
     scenarioId: number;
     disabled: boolean;
+    lookFor: string | undefined;
 }
 
 export default function ScenarioPageInput(props: Props) {
@@ -91,12 +93,13 @@ export default function ScenarioPageInput(props: Props) {
         index,
         error: riskyError,
         geoJson: geoJsonFromProps,
-        url,
+        urlA,
         projectType,
         urlB,
         customOptions,
         scenarioId,
         disabled,
+        lookFor,
     } = props;
 
     const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
@@ -175,8 +178,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.instructions?.icon}
                         options={iconList}
-                        keySelector={(d: IconItem) => d.key}
-                        labelSelector={(d: IconItem) => d.label}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
                         onChange={onInstructionFieldChange}
                         error={instructionsError?.icon}
                         disabled={disabled}
@@ -209,8 +212,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.hint?.icon}
                         options={iconList}
-                        keySelector={(d: IconItem) => d.key}
-                        labelSelector={(d: IconItem) => d.label}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
                         onChange={onHintFieldChange}
                         error={hintError?.icon}
                         disabled={disabled}
@@ -243,8 +246,8 @@ export default function ScenarioPageInput(props: Props) {
                         label="Icon"
                         value={value.success?.icon}
                         options={iconList}
-                        keySelector={(d: IconItem) => d.key}
-                        labelSelector={(d: IconItem) => d.label}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
                         onChange={onSuccessFieldChange}
                         error={successError?.icon}
                         disabled={disabled}
@@ -256,25 +259,28 @@ export default function ScenarioPageInput(props: Props) {
                     <ChangeDetectionGeoJsonPreview
                         geoJson={geoJson as ChangeDetectionGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
-                        url={url}
+                        urlA={urlA}
                         urlB={urlB}
+                        lookFor={lookFor}
                     />
                 )}
                 {((projectType === PROJECT_TYPE_BUILD_AREA)
                     || (projectType === PROJECT_TYPE_COMPLETENESS)) && (
                     // FIXME: Rename this to something more specific
-                    <ScenarioGeoJsonPreview
+                    <BuildAreaGeoJsonPreview
                         geoJson={geoJson as BuildAreaGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
-                        url={url}
+                        url={urlA}
+                        lookFor={lookFor}
                     />
                 )}
                 {projectType === PROJECT_TYPE_FOOTPRINT && (
                     <FootprintGeoJsonPreview
                         geoJson={geoJson as FootprintGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
-                        url={url}
+                        url={urlA}
                         customOptions={customOptions}
+                        lookFor={lookFor}
                     />
                 )}
                 <SegmentInput
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 205fe3f14..02632a822 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'; // we change this array to map before sending to server
+import React from 'react';
 import {
     _cs,
     isDefined,
@@ -79,6 +79,7 @@ import {
     infoPageBlocksMap,
     MAX_INFO_PAGES,
     MAX_OPTIONS,
+    deleteKey,
 } from './utils';
 import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
 import CustomOptionInput from './CustomOptionInput';
@@ -86,17 +87,6 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
-function deleteKey<T extends object, K extends keyof T>(
-    value: T,
-    key: K,
-): Omit<T, K> {
-    const copy: Omit<T, K> & { [key in K]: T[K] | undefined } = {
-        ...value,
-    };
-    delete copy[key];
-    return copy;
-}
-
 type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
 function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
     const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
@@ -324,20 +314,6 @@ function NewTutorial(props: Props) {
         [validate, setError, handleSubmission],
     );
 
-    const handleOptionRemove = React.useCallback(
-        (index: number) => {
-            onOptionRemove(index);
-        },
-        [onOptionRemove],
-    );
-
-    const handleInformationPageRemove = React.useCallback(
-        (index: number) => {
-            onInformationPageRemove(index);
-        },
-        [onInformationPageRemove],
-    );
-
     const handleAddDefineOptions = React.useCallback(
         () => {
             setFieldValue(
@@ -451,29 +427,16 @@ function NewTutorial(props: Props) {
         [error],
     );
 
-    // FIXME: create helper function
-    const tileServerAUrl = React.useMemo(() => {
-        const tileServerName = value.tileServer?.name;
+    const getTileServerUrl = (val: PartialTutorialFormType['tileServer']) => {
+        const tileServerName = val?.name;
         if (isNotDefined(tileServerName)) {
             return undefined;
         }
         if (tileServerName === 'custom') {
-            return value.tileServer?.url;
+            return val?.url;
         }
         return tileServerUrls[tileServerName];
-    }, [value.tileServer?.name, value.tileServer?.url]);
-
-    // FIXME: create helper function
-    const tileServerBUrl = React.useMemo(() => {
-        const tileServerName = value.tileServerB?.name;
-        if (isNotDefined(tileServerName)) {
-            return undefined;
-        }
-        if (tileServerName === 'custom') {
-            return value.tileServerB?.url;
-        }
-        return tileServerUrls[tileServerName];
-    }, [value.tileServerB?.name, value.tileServerB?.url]);
+    };
 
     const projectTypeEmpty = isNotDefined(value.projectType);
 
@@ -555,7 +518,7 @@ function NewTutorial(props: Props) {
                                             actions={(
                                                 <Button
                                                     name={index}
-                                                    onClick={handleOptionRemove}
+                                                    onClick={onOptionRemove}
                                                     variant="action"
                                                     title="Delete Option"
                                                     disabled={submissionPending || projectTypeEmpty}
@@ -577,6 +540,7 @@ function NewTutorial(props: Props) {
                                 </div>
                                 <CustomOptionPreview
                                     value={customOptions}
+                                    lookFor={value.lookFor}
                                 />
                             </div>
                         ) : (
@@ -627,7 +591,7 @@ function NewTutorial(props: Props) {
                                 actions={(
                                     <Button
                                         name={i}
-                                        onClick={handleInformationPageRemove}
+                                        onClick={onInformationPageRemove}
                                         variant="action"
                                         title="Delete page"
                                         disabled={submissionPending || projectTypeEmpty}
@@ -639,7 +603,7 @@ function NewTutorial(props: Props) {
                                 <InformationPageInput
                                     value={page}
                                     onChange={setInformationPageValue}
-                                    // onRemove={handleInformationPageRemove}
+                                    lookFor={value.lookFor}
                                     index={i}
                                     error={informationPagesError?.[page.pageNumber]}
                                     disabled={submissionPending || projectTypeEmpty}
@@ -728,8 +692,9 @@ function NewTutorial(props: Props) {
                                     error={scenarioError?.[task.scenarioId]}
                                     customOptions={customOptions}
                                     geoJson={value.tutorialTasks}
-                                    url={tileServerAUrl}
-                                    urlB={tileServerBUrl}
+                                    urlA={getTileServerUrl(value.tileServer)}
+                                    urlB={getTileServerUrl(value.tileServerB)}
+                                    lookFor={value.lookFor}
                                     disabled={submissionPending || projectTypeEmpty}
                                 />
                             </ExpandableContainer>
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 63eb41155..97500c647 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -8,6 +8,7 @@ import {
     nullValue,
     ArraySchema,
     addCondition,
+    greaterThanCondition,
 } from '@togglecorp/toggle-form';
 
 import {
@@ -269,6 +270,17 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
     },
 ];
 
+export function deleteKey<T extends object, K extends keyof T>(
+    value: T,
+    key: K,
+): Omit<T, K> {
+    const copy: Omit<T, K> & { [key in K]: T[K] | undefined } = {
+        ...value,
+    };
+    delete copy[key];
+    return copy;
+}
+
 export interface BuildAreaProperties {
     reference: number;
     screen: number;
@@ -577,10 +589,6 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     }),
                 }),
             },
-            // FIXME: we do not send this anymore
-            tutorialTasks: {},
-            exampleImage1: {},
-            exampleImage2: {},
         };
 
         baseSchema = addCondition(
@@ -618,7 +626,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             },
                             value: {
                                 required: true,
-                                validations: [integerCondition],
+                                validations: [
+                                    integerCondition,
+                                    greaterThanCondition(0),
+                                ],
                             },
                             description: {
                                 required: true,
@@ -663,7 +674,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                         },
                                         value: {
                                             required: true,
-                                            validations: [integerCondition],
+                                            validations: [
+                                                integerCondition,
+                                                greaterThanCondition(0),
+                                            ],
                                         },
                                     }),
                                 }),
@@ -687,18 +701,20 @@ export const tutorialFormSchema: TutorialFormSchema = {
             value,
             ['projectType'],
             ['zoomLevel'],
-            (v) => (v?.projectType === PROJECT_TYPE_BUILD_AREA ? {
-                zoomLevel: {
-                    required: true,
-                    validations: [
-                        greaterThanOrEqualToCondition(14),
-                        lessThanOrEqualToCondition(22),
-                        integerCondition,
-                    ],
-                },
-            } : {
-                zoomLevel: { forceValue: nullValue },
-            }),
+            (v) => (v?.projectType === PROJECT_TYPE_BUILD_AREA
+                || v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                || v?.projectType === PROJECT_TYPE_COMPLETENESS ? {
+                    zoomLevel: {
+                        required: true,
+                        validations: [
+                            greaterThanOrEqualToCondition(14),
+                            lessThanOrEqualToCondition(22),
+                            integerCondition,
+                        ],
+                    },
+                } : {
+                    zoomLevel: { forceValue: nullValue },
+                }),
         );
         baseSchema = addCondition(
             baseSchema,
@@ -708,19 +724,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
             (v) => (v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
                 || v?.projectType === PROJECT_TYPE_COMPLETENESS
                 ? {
-                    zoomLevel: {
-                        required: true,
-                        validations: [
-                            greaterThanOrEqualToCondition(14),
-                            lessThanOrEqualToCondition(22),
-                            integerCondition,
-                        ],
-                    },
                     tileServerB: {
                         fields: tileServerFieldsSchema,
                     },
                 } : {
-                    zoomLevel: { forceValue: nullValue },
                     tileServerB: { forceValue: nullValue },
                 }),
         );
diff --git a/yarn.lock b/yarn.lock
index fb57ccd13..e69de29bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-

From fb364702125fad419c8cb6e2ce1c2ae5131e0e97 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 26 Jun 2023 15:43:55 +0545
Subject: [PATCH 50/72] quick fix

---
 manager-dashboard/app/views/NewTutorial/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 97500c647..e42176369 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -720,7 +720,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
             baseSchema,
             value,
             ['projectType'],
-            ['zoomLevel', 'tileServerB'],
+            ['tileServerB'],
             (v) => (v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
                 || v?.projectType === PROJECT_TYPE_COMPLETENESS
                 ? {

From ac3b9b1d59625731d4434e58f8f57193c0f0afe9 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 26 Jun 2023 16:21:00 +0545
Subject: [PATCH 51/72] fix create tutorial issue

---
 .../app/views/NewTutorial/index.tsx           | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 02632a822..e4506fa99 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -254,19 +254,21 @@ function NewTutorial(props: Props) {
                 });
                 const sanitizedInformationPages = await Promise.all(informationPagesPromises);
 
+                const sanitizedCustomOptions = valuesToCopy.customOptions?.map((option) => {
+                    const optionWithoutId = deleteKey(option, 'optionId');
+                    return {
+                        ...optionWithoutId,
+                        subOptions: optionWithoutId.subOptions?.map(
+                            (subOption) => deleteKey(subOption, 'subOptionsId'),
+                        ),
+                    };
+                });
+
                 const uploadData = {
                     ...valuesToCopy,
-                    customOptions: valuesToCopy.customOptions?.map((option) => {
-                        const optionWithoutId = deleteKey(option, 'optionId');
-                        return {
-                            ...optionWithoutId,
-                            subOptions: optionWithoutId.subOptions?.map(
-                                (subOption) => deleteKey(subOption, 'subOptionsId'),
-                            ),
-                        };
-                    }),
-                    screens: sanitizedScenarioPages,
-                    informationPages: sanitizedInformationPages,
+                    customOptions: sanitizedCustomOptions ?? null,
+                    screens: sanitizedScenarioPages ?? null,
+                    informationPages: sanitizedInformationPages ?? null,
                     createdBy: userId,
                 };
 

From b8c00697a9ce4a3896d2b18c345ebf3ebb268c8f Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 26 Jun 2023 17:00:20 +0545
Subject: [PATCH 52/72] fix form schema

---
 manager-dashboard/app/views/NewTutorial/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index e42176369..5862e06ea 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -465,6 +465,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
+            tutorialTasks: {},
             scenarioPages: {
                 keySelector: (key) => key.scenarioId,
                 member: (): ScenarioPagesFormSchemaMember => ({
@@ -567,8 +568,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                                 return {
                                                     textDescription: {
                                                         required: true,
-                                                        // eslint-disable-next-line max-len
-                                                        requiredValidations: requiredStringCondition,
+                                                        requiredValdation: requiredStringCondition,
                                                         // eslint-disable-next-line max-len
                                                         validations: [getNoMoreThanNCharacterCondition(LG_TEXT_MAX_LENGTH)],
                                                     },

From 513811cfdff0c12b9f675d48233849f28f63243b Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 27 Jun 2023 10:16:56 +0545
Subject: [PATCH 53/72] minor fixes

---
 manager-dashboard/app/components/MobilePreview/index.tsx  | 2 +-
 manager-dashboard/app/components/MobilePreview/styles.css | 4 ++++
 manager-dashboard/app/views/NewTutorial/index.tsx         | 4 ++--
 manager-dashboard/app/views/NewTutorial/utils.ts          | 5 ++---
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index 47962cb63..67c6ecd92 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -59,7 +59,7 @@ function MobilePreview(props: Props) {
                 {(popupTitle || popupDescription || popupIcons) && (
                     <div className={_cs(styles.popup, popupClassName)}>
                         <div className={styles.details}>
-                            <div>
+                            <div className={styles.popupTitle}>
                                 {popupTitle}
                             </div>
                             <div>
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index aa6f51ad6..52ff0474a 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -71,6 +71,10 @@
 
             .details {
                 flex-grow: 1;
+
+                .popup-title {
+                    font-weight: var(--font-weight-bold);
+                }
             }
 
             .icons {
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index e4506fa99..b9908731c 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -588,11 +588,11 @@ function NewTutorial(props: Props) {
                         {informationPages?.map((page, i) => (
                             <ExpandableContainer
                                 key={page.pageNumber}
-                                header={page.title || `Intro ${page.pageNumber}`}
+                                header={page.title || `Intro ${i + 1}`}
                                 openByDefault={i === informationPages.length - 1}
                                 actions={(
                                     <Button
-                                        name={i}
+                                        name={i + 1}
                                         onClick={onInformationPageRemove}
                                         variant="action"
                                         title="Delete page"
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 5862e06ea..7fa14ee59 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -8,7 +8,6 @@ import {
     nullValue,
     ArraySchema,
     addCondition,
-    greaterThanCondition,
 } from '@togglecorp/toggle-form';
 
 import {
@@ -628,7 +627,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                 required: true,
                                 validations: [
                                     integerCondition,
-                                    greaterThanCondition(0),
+                                    greaterThanOrEqualToCondition(0),
                                 ],
                             },
                             description: {
@@ -676,7 +675,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                             required: true,
                                             validations: [
                                                 integerCondition,
-                                                greaterThanCondition(0),
+                                                greaterThanOrEqualToCondition(0),
                                             ],
                                         },
                                     }),

From 3a31e319787f6b6608fba150ce45a9275fe75d0e Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 27 Jun 2023 12:06:49 +0545
Subject: [PATCH 54/72] Improve styling of mobile preview

---
 .../app/components/MobilePreview/index.tsx             | 10 +++++++++-
 .../app/components/MobilePreview/styles.css            |  7 ++++++-
 .../ChangeDetectionGeoJsonPreview/index.tsx            |  2 +-
 .../ChangeDetectionGeoJsonPreview/styles.css           |  5 -----
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
index 67c6ecd92..7a2e1da65 100644
--- a/manager-dashboard/app/components/MobilePreview/index.tsx
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -17,6 +17,7 @@ interface Props {
     popupIcons?: React.ReactNode;
     contentClassName?: string;
     popupClassName?: string;
+    popupVerticalPosition?: 'top' | 'center';
 }
 
 function MobilePreview(props: Props) {
@@ -31,6 +32,7 @@ function MobilePreview(props: Props) {
         popupIcons,
         contentClassName,
         popupClassName,
+        popupVerticalPosition,
     } = props;
 
     return (
@@ -57,7 +59,13 @@ function MobilePreview(props: Props) {
             </div>
             <div className={styles.contentContainer}>
                 {(popupTitle || popupDescription || popupIcons) && (
-                    <div className={_cs(styles.popup, popupClassName)}>
+                    <div
+                        className={_cs(
+                            styles.popup,
+                            popupClassName,
+                            popupVerticalPosition === 'center' && styles.verticallyCentered,
+                        )}
+                    >
                         <div className={styles.details}>
                             <div className={styles.popupTitle}>
                                 {popupTitle}
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
index 52ff0474a..dc57ad3b5 100644
--- a/manager-dashboard/app/components/MobilePreview/styles.css
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -5,7 +5,7 @@
     border-radius: var(--radius-card-border);
     background-color: var(--color-black);
     padding: var(--spacing-small) 0;
-    width: var(--width-mobile-preview);
+    width: calc(var(--width-mobile-preview) + var(--width-separator-mobile-preview));
     height: var(--height-mobile-preview);
     color: var(--color-text-on-dark);
 
@@ -69,6 +69,11 @@
             width: calc(100% - 2 * var(--spacing-small));
             color: var(--color-text);
 
+            &.vertically-centered {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
             .details {
                 flex-grow: 1;
 
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 703d06ff2..3ad788ca3 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -53,7 +53,7 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
             popupTitle={previewPopUp?.title || 'Title'}
             popupDescription={previewPopUp?.description || 'Description'}
             contentClassName={styles.content}
-            popupClassName={styles.popup}
+            popupVerticalPosition="center"
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
index a43f4a1b2..5242c622a 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
@@ -11,9 +11,4 @@
             height: var(--height-mobile-preview-change-detection-content);
         }
     }
-
-    .popup {
-        top: 50%!important;
-        transform: translateY(-50%);
-    }
 }

From 73ec78dff1ad2f2e61573a5159aa00b21c89d973 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Tue, 27 Jun 2023 14:30:25 +0545
Subject: [PATCH 55/72] icon-color fix

---
 manager-dashboard/app/views/NewTutorial/utils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 7fa14ee59..076720b68 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -248,7 +248,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         value: 1,
         title: 'Yes',
         icon: 'checkmarkOutline',
-        iconColor: colorKeyToColorMap.green,
+        iconColor: 'green',
         description: 'the shape does outline a building in the image',
     },
     {
@@ -256,7 +256,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         value: 0,
         title: 'No',
         icon: 'closeOutline',
-        iconColor: colorKeyToColorMap.red,
+        iconColor: 'red',
         description: 'the shape doesn\'t match a building in the image',
     },
     {
@@ -264,7 +264,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         value: 2,
         title: 'Not Sure',
         icon: 'removeOutline',
-        iconColor: colorKeyToColorMap.orange,
+        iconColor: 'orange',
         description: 'if you\'re not sure or there is cloud cover / bad imagery',
     },
 ];

From f8d162eb9834308ae88c9af89a5a662323a83e9b Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Tue, 27 Jun 2023 18:39:21 +0545
Subject: [PATCH 56/72] Fix schema for Project and Tutorial form

---
 .../app/components/PopupButton/index.tsx      |   7 +-
 .../app/components/TileServerInput/index.tsx  |  10 +-
 .../app/views/NewProject/utils.ts             | 308 ++++++++++--------
 .../CustomOptionPreview/index.tsx             |   5 +-
 .../CustomOptionPreview/styles.css            |   1 -
 .../NewTutorial/CustomOptionInput/index.tsx   |   3 +-
 .../InformationPagePreview/index.tsx          |   9 +-
 .../BuildAreaGeoJsonPreview/index.tsx         |   7 +-
 .../ChangeDetectionGeoJsonPreview/index.tsx   |   7 +-
 .../FootprintGeoJsonPreview/index.tsx         |   6 +-
 .../NewTutorial/ScenarioPageInput/index.tsx   |   1 -
 .../app/views/NewTutorial/utils.ts            |  11 +-
 12 files changed, 199 insertions(+), 176 deletions(-)

diff --git a/manager-dashboard/app/components/PopupButton/index.tsx b/manager-dashboard/app/components/PopupButton/index.tsx
index 4392f3537..a18359990 100644
--- a/manager-dashboard/app/components/PopupButton/index.tsx
+++ b/manager-dashboard/app/components/PopupButton/index.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
-
 import { _cs } from '@togglecorp/fujs';
 
 import Button, { ButtonProps } from '#components/Button';
-
-import useBlurEffect from '../../hooks/useBlurEffect';
-
-import Popup from '../Popup';
+import useBlurEffect from '#hooks/useBlurEffect';
+import Popup from '#components/Popup';
 
 import styles from './styles.css';
 
diff --git a/manager-dashboard/app/components/TileServerInput/index.tsx b/manager-dashboard/app/components/TileServerInput/index.tsx
index 951af43b4..ef5a7a566 100644
--- a/manager-dashboard/app/components/TileServerInput/index.tsx
+++ b/manager-dashboard/app/components/TileServerInput/index.tsx
@@ -78,6 +78,8 @@ function imageryUrlCondition(value: string | null | undefined) {
     return 'Imagery url must contain {x}, {y} (or {-y}) & {z} placeholders or {quad_key} placeholder.';
 }
 
+const MD_TEXT_MAX_LENGTH = 1000;
+
 type TileServerInputType = PartialForm<TileServer>;
 type TileServerSchema = ObjectSchema<PartialForm<TileServerInputType>, unknown>;
 type TileServerFields = ReturnType<TileServerSchema['fields']>;
@@ -86,12 +88,12 @@ export function tileServerFieldsSchema(value: TileServerInputType | undefined):
         name: {
             required: true,
             requiredValidation: requiredStringCondition,
-            validations: [getNoMoreThanNCharacterCondition(1000)],
+            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
         },
         credits: {
             required: true,
             requiredValidation: requiredStringCondition,
-            validations: [getNoMoreThanNCharacterCondition(1000)],
+            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
         },
     };
     basicFields = addCondition(
@@ -106,14 +108,14 @@ export function tileServerFieldsSchema(value: TileServerInputType | undefined):
                         required: true,
                         requiredValidation: requiredStringCondition,
                         validations: [
-                            getNoMoreThanNCharacterCondition(1000),
+                            getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
                             imageryUrlCondition,
                         ],
                     },
                     wmtsLayerName: {
                         required: true,
                         requiredValidation: requiredStringCondition,
-                        validations: [getNoMoreThanNCharacterCondition(1000)],
+                        validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
                     },
                 };
             }
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index 06a3bddc5..30317e6b8 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -16,6 +16,7 @@ import {
     lessThanOrEqualToCondition,
     addCondition,
     nullValue,
+    urlCondition,
 } from '@togglecorp/toggle-form';
 import { getType as getFeatureType } from '@turf/invariant';
 import getFeatureArea from '@turf/area';
@@ -116,68 +117,74 @@ type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>
 const DEFAULT_MAX_FEATURES = 20;
 // const DEFAULT_MAX_FEATURES = 10;
 const DEFAULT_MAX_AREA = 20;
-function validGeometryCondition(
-    featureCollection: GeoJSON.GeoJSON | string | undefined,
-    allValue: PartialProjectFormType,
-) {
-    if (!featureCollection) {
-        return undefined;
-    }
-    if (typeof featureCollection === 'string') {
-        return undefined;
-    }
-    if (featureCollection.type !== 'FeatureCollection') {
-        return 'Only FeatureCollection is supported';
-    }
-
-    const numberOfFeatures = featureCollection.features.length;
+function validGeometryCondition(zoomLevel: number | undefined | null) {
+    function validGeometryConditionForZoom(
+        featureCollection: GeoJSON.GeoJSON | string | undefined,
+    ) {
+        if (!featureCollection) {
+            return undefined;
+        }
+        if (typeof featureCollection === 'string') {
+            return 'Invalid GeoJSON.';
+        }
+        if (featureCollection.type !== 'FeatureCollection') {
+            return 'GeoJSON type should be FeatureCollection.';
+        }
+
+        const numberOfFeatures = featureCollection.features.length;
+
+        if (!numberOfFeatures) {
+            return 'GeoJSON has no features.';
+        }
+
+        const maxNumberOfFeatures = DEFAULT_MAX_FEATURES;
+        if (numberOfFeatures > maxNumberOfFeatures) {
+            return `GeoJSON has too many (${numberOfFeatures}) features. Only ${maxNumberOfFeatures} features are allowed`;
+        }
+
+        const invalidFeatures = featureCollection.features.filter((feature) => {
+            const featureType = getFeatureType(feature);
+            return featureType !== 'Polygon' && featureType !== 'MultiPolygon';
+        });
 
-    if (!numberOfFeatures) {
-        return 'GeoJson has no features';
-    }
+        if (invalidFeatures.length > 0) {
+            const invalidFeatureMap = listToGroupList(
+                invalidFeatures,
+                (feature) => getFeatureType(feature),
+            );
 
-    const maxNumberOfFeatures = DEFAULT_MAX_FEATURES;
-    if (numberOfFeatures > maxNumberOfFeatures) {
-        return `GeoJson has too many (${numberOfFeatures}) features. Only ${maxNumberOfFeatures} are allowed`;
-    }
+            const unsupportedTypeList = Object.entries(invalidFeatureMap)
+                .map(([featureKey, feature]) => `${feature.length} ${featureKey}`);
+            const unsupportedFeatureTypes = unsupportedTypeList.join(', ');
 
-    const invalidFeatures = featureCollection.features.filter((feature) => {
-        const featureType = getFeatureType(feature);
-        return featureType !== 'Polygon' && featureType !== 'MultiPolygon';
-    });
+            return `GeoJSON contains ${unsupportedFeatureTypes} features. These are currently not supported. Please make sure the it only contains Polygon or MultiPolygons`;
+        }
 
-    if (invalidFeatures.length > 0) {
-        const invalidFeatureMap = listToGroupList(
-            invalidFeatures,
-            (feature) => getFeatureType(feature),
+        const totalArea = sum(
+            featureCollection.features.map(
+                (feature) => getFeatureArea(feature),
+            ).filter((num) => isDefined(num) && !Number.isNaN(num)),
         );
+        const totalAreaInSqKm = totalArea / 1000000;
 
-        const unsupportedTypeList = Object.entries(invalidFeatureMap)
-            .map(([featureKey, feature]) => `${feature.length} ${featureKey}`);
-        const unsupportedFeatureTypes = unsupportedTypeList.join(', ');
-
-        return `GeoJson contains ${unsupportedFeatureTypes} features. These are currently not supported. Please make sure the it only contains Polygon or MultiPolygons`;
-    }
-
-    const totalArea = sum(
-        featureCollection.features.map(
-            (feature) => getFeatureArea(feature),
-        ).filter((num) => isDefined(num) && !Number.isNaN(num)),
-    );
-    const totalAreaInSqKm = totalArea / 1000000;
+        const maxArea = isDefined(zoomLevel)
+            ? (5 * (4 ** (23 - zoomLevel)))
+            : DEFAULT_MAX_AREA;
 
-    const zoomLevel = allValue?.zoomLevel;
-    const maxArea = isDefined(zoomLevel)
-        ? (5 * (4 ** (23 - zoomLevel)))
-        : DEFAULT_MAX_AREA;
+        if (maxArea < totalAreaInSqKm) {
+            return `Area covered by GeoJSON (${totalAreaInSqKm.toFixed(2)} sqkm) is too large, max allowed area for selected zoom level is ${maxArea} sqkm`;
+        }
 
-    if (maxArea < totalAreaInSqKm) {
-        return `Area covered by GeoJson (${totalAreaInSqKm.toFixed(2)} sqkm) is too large, max allowed area for selected zoom level is ${maxArea} sqkm`;
+        return undefined;
     }
-
-    return undefined;
+    return validGeometryConditionForZoom;
 }
 
+export const MAX_OPTIONS = 6;
+export const MIN_OPTIONS = 2;
+export const MAX_SUB_OPTIONS = 6;
+export const MIN_SUB_OPTIONS = 2;
+
 export const projectFormSchema: ProjectFormSchema = {
     fields: (value): ProjectFormSchemaFields => {
         let baseSchema: ProjectFormSchemaFields = {
@@ -254,57 +261,36 @@ export const projectFormSchema: ProjectFormSchema = {
                 ],
             },
         };
+
         baseSchema = addCondition(
             baseSchema,
             value,
             ['projectType'],
             ['customOptions'],
             (formValues) => {
-                const customOptionField: CustomOptionFormSchema = {
-                    keySelector: (key) => key.value,
-                    member: (): CustomOptionFormSchemaMember => ({
-                        fields: (): CustomOptionSchemaFields => ({
-                            title: {
-                                required: true,
-                                requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(500)],
-                            },
-                            value: {
-                                required: true,
-                            },
-                            description: {
-                                required: true,
-                                requiredValidation: requiredStringCondition,
-                                validations: [getNoMoreThanNCharacterCondition(500)],
-                            },
-                            icon: {
-                                required: true,
-                            },
-                            iconColor: {
-                                required: true,
-                            },
-                            subOptions: {
-                                keySelector: (subOption) => subOption.value,
-                                member: () => ({
-                                    fields: () => ({
-                                        value: {
-                                            required: true,
-                                        },
-                                        description: {
-                                            required: true,
-                                            requiredValidation: requiredStringCondition,
-                                            validations: [getNoMoreThanNCharacterCondition(500)],
-                                        },
-                                    }),
-                                }),
-                            },
-                        }),
-                    }),
-                };
-
                 if (formValues?.projectType === PROJECT_TYPE_FOOTPRINT) {
                     return {
-                        customOptions: customOptionField,
+                        customOptions: {
+                            keySelector: (key) => key.value,
+                            member: (): CustomOptionFormSchemaMember => ({
+                                fields: (): CustomOptionSchemaFields => ({
+                                    title: {},
+                                    value: {},
+                                    description: {},
+                                    icon: {},
+                                    iconColor: {},
+                                    subOptions: {
+                                        keySelector: (subOption) => subOption.value,
+                                        member: () => ({
+                                            fields: () => ({
+                                                value: {},
+                                                description: {},
+                                            }),
+                                        }),
+                                    },
+                                }),
+                            }),
+                        },
                     };
                 }
                 return {
@@ -316,37 +302,26 @@ export const projectFormSchema: ProjectFormSchema = {
         baseSchema = addCondition(
             baseSchema,
             value,
-            ['projectType', 'inputType'],
-            ['geometry'],
+            ['projectType'],
+            ['tileServerB'],
             (v) => {
                 const projectType = v?.projectType;
-                const inputType = v?.inputType;
-                if (projectType === PROJECT_TYPE_BUILD_AREA
-                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || projectType === PROJECT_TYPE_COMPLETENESS) {
-                    return {
-                        geometry: {
-                            required: true,
-                            validations: [validGeometryCondition],
-                        },
-                    };
-                }
-                if ((
-                    inputType === PROJECT_INPUT_TYPE_LINK
-                    || inputType === PROJECT_INPUT_TYPE_UPLOAD
-                ) && projectType === PROJECT_TYPE_FOOTPRINT) {
+                if (
+                    projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                ) {
                     return {
-                        geometry: {
-                            required: true,
-                            validations: [validGeometryCondition],
+                        tileServerB: {
+                            fields: tileServerFieldsSchema,
                         },
                     };
                 }
                 return {
-                    geometry: { forceValue: nullValue },
+                    tileServerB: { forceValue: nullValue },
                 };
             },
         );
+
         baseSchema = addCondition(
             baseSchema,
             value,
@@ -356,8 +331,8 @@ export const projectFormSchema: ProjectFormSchema = {
                 const projectType = v?.projectType;
                 if (
                     projectType === PROJECT_TYPE_BUILD_AREA
-                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
                     || projectType === PROJECT_TYPE_COMPLETENESS
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
                 ) {
                     return {
                         zoomLevel: {
@@ -380,21 +355,16 @@ export const projectFormSchema: ProjectFormSchema = {
             baseSchema,
             value,
             ['projectType'],
-            ['tileServerB'],
+            ['inputType'],
             (v) => {
                 const projectType = v?.projectType;
-                if (
-                    projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || projectType === PROJECT_TYPE_COMPLETENESS
-                ) {
+                if (projectType === PROJECT_TYPE_FOOTPRINT) {
                     return {
-                        tileServerB: {
-                            fields: tileServerFieldsSchema,
-                        },
+                        inputType: { required: true },
                     };
                 }
                 return {
-                    tileServerB: { forceValue: nullValue },
+                    inputType: { forceValue: nullValue },
                 };
             },
         );
@@ -402,17 +372,55 @@ export const projectFormSchema: ProjectFormSchema = {
         baseSchema = addCondition(
             baseSchema,
             value,
-            ['projectType'],
-            ['inputType'],
+            ['projectType', 'inputType', 'zoomLevel'],
+            ['geometry'],
             (v) => {
                 const projectType = v?.projectType;
-                if (projectType === PROJECT_TYPE_FOOTPRINT) {
+                const inputType = v?.inputType;
+                const zoomLevel = v?.zoomLevel;
+                if (
+                    projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || (projectType === PROJECT_TYPE_FOOTPRINT && (
+                        inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    ))
+                ) {
                     return {
-                        inputType: { required: true },
+                        geometry: {
+                            required: true,
+                            validations: [validGeometryCondition(zoomLevel)],
+                        },
+                    };
+                }
+                // NOTE: we are using geometry field to hold both geometry url
+                // and uploaded geometry
+                if (
+                    projectType === PROJECT_TYPE_FOOTPRINT
+                    && inputType === PROJECT_INPUT_TYPE_LINK
+                ) {
+                    return {
+                        geometry: {
+                            required: true,
+                            requiredValidation: (val) => {
+                                if (typeof val === 'object') {
+                                    return undefined;
+                                }
+                                return requiredStringCondition(val);
+                            },
+                            validations: [
+                                (val) => {
+                                    if (typeof val === 'object') {
+                                        return 'Invalid URL.';
+                                    }
+                                    return urlCondition(val);
+                                },
+                            ],
+                        },
                     };
                 }
                 return {
-                    inputType: { forceValue: nullValue },
+                    geometry: { forceValue: nullValue },
                 };
             },
         );
@@ -421,26 +429,42 @@ export const projectFormSchema: ProjectFormSchema = {
             baseSchema,
             value,
             ['projectType', 'inputType'],
-            ['filter', 'TMId'],
+            ['TMId'],
             (v) => {
                 const projectType = v?.projectType;
                 const inputType = v?.inputType;
                 return {
-                    filter: (
+                    // TODO: number string condition
+                    TMId: projectType === PROJECT_TYPE_FOOTPRINT && (
                         inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
-                    ) && projectType === PROJECT_TYPE_FOOTPRINT
-                        ? { required: true }
-                        : { forceValue: nullValue },
-                    // FIXME: number string condition
-                    TMId: (
-                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    ) && projectType === PROJECT_TYPE_FOOTPRINT
+                    )
                         ? {
                             required: true,
                             requiredValidation: requiredStringCondition,
                             validations: [getNoMoreThanNCharacterCondition(1000)],
                         }
+                        : {
+                            forceValue: nullValue,
+                        },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType'],
+            ['filter'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                return {
+                    // TODO: we should also allow filter for PROJECT_INPUT_TYPE_LINK
+                    filter: projectType === PROJECT_TYPE_FOOTPRINT && (
+                        inputType === PROJECT_INPUT_TYPE_UPLOAD
+                        || inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                    )
+                        ? { required: true }
                         : { forceValue: nullValue },
                 };
             },
@@ -457,12 +481,12 @@ export const projectFormSchema: ProjectFormSchema = {
                 const filter = v?.filter;
 
                 if (
-                    filter === FILTER_OTHERS
-                    && projectType === PROJECT_TYPE_FOOTPRINT
+                    projectType === PROJECT_TYPE_FOOTPRINT
                     && (
                         inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
                         || inputType === PROJECT_INPUT_TYPE_UPLOAD
                     )
+                    && filter === FILTER_OTHERS
                 ) {
                     return {
                         filterText: {
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 0a93f152c..5f366622d 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -24,8 +24,7 @@ export default function CustomOptionPreview(props: Props) {
         <MobilePreview
             className={styles.optionPreview}
             contentClassName={styles.content}
-            // FIXME: get this from 'look for'
-            heading={lookFor || 'mobile homes'}
+            heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
         >
             {value?.map((option, index) => {
@@ -34,7 +33,7 @@ export default function CustomOptionPreview(props: Props) {
                     : iconMap.flagOutline;
 
                 const previewText = [
-                    option.title || `Option ${index + 1}`,
+                    option.title || `{option ${index + 1}}`,
                     option.description,
                 ].filter(Boolean).join(' - ');
 
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index c0efe0746..adb8d39a1 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -14,7 +14,6 @@
                 display: flex;
                 align-items: center;
                 border-radius: 50%;
-                /* FIXME: do not hard code this if possible */
                 padding: var(--spacing-extra-small);
                 font-size: var(--font-size-extra-large);
             }
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 4619e33e7..407768149 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -172,9 +172,10 @@ export default function CustomOptionInput(props: Props) {
                         className={styles.addButton}
                         icons={<MdAdd />}
                         onClick={handleSubOptionsAdd}
+                        // FIXME: use constant from utils
                         disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
                     >
-                        Add Sub Options
+                        Add Sub Option
                     </Button>
                 )}
             </div>
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
index 122fecf79..87f8d8ef9 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -23,18 +23,17 @@ export default function InformationPagePreview(props: Props) {
     return (
         <MobilePreview
             className={styles.informationPreview}
-            // FIXME: get this from 'look for'
-            heading={lookFor || 'mobile homes'}
+            heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
             contentClassName={styles.content}
         >
-            {value?.title || `Intro ${index + 1}`}
+            {value?.title || `{page title ${index}}`}
             {value?.blocks?.map((preview) => {
-                if (preview.blockType === 'text' && !!preview.textDescription) {
+                if (preview.blockType === 'text') {
                     return (
                         <MarkdownPreview
                             key={preview.blockNumber}
-                            markdown={preview.textDescription}
+                            markdown={preview.textDescription || '{block}'}
                         />
                     );
                 }
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
index 3b33cc288..95b032f16 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
@@ -58,12 +58,11 @@ function BuildAreaGeoJsonPreview(props: Props) {
     return (
         <MobilePreview
             className={_cs(styles.scenarioGeoJsonPreview, className)}
-            // FIXME: get this from 'look for'
-            heading={lookFor || 'mobile homes'}
+            heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title || 'Title'}
-            popupDescription={previewPopUp?.description || 'Description'}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
             contentClassName={styles.content}
         >
             <GeoJsonPreview
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
index 3ad788ca3..e64d1c3cc 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -46,12 +46,11 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
     return (
         <MobilePreview
             className={_cs(styles.changeDetectionGeoJsonPreview, className)}
-            // FIXME: get this from 'look for'
-            heading={lookFor || 'mobile homes'}
+            heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title || 'Title'}
-            popupDescription={previewPopUp?.description || 'Description'}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
             contentClassName={styles.content}
             popupVerticalPosition="center"
         >
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index fb1ef0d39..b81f83239 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -53,11 +53,11 @@ export default function FootprintGeoJsonPreview(props: Props) {
         <MobilePreview
             className={_cs(styles.footprintGeoJsonPreview, className)}
             contentClassName={styles.content}
-            heading={lookFor || 'mobile homes'}
+            heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
             popupIcons={Comp && <Comp />}
-            popupTitle={previewPopUp?.title || 'Title'}
-            popupDescription={previewPopUp?.description || 'Description'}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
         >
             <GeoJsonPreview
                 className={styles.mapPreview}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 551ef4f37..4b1c9406a 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -266,7 +266,6 @@ export default function ScenarioPageInput(props: Props) {
                 )}
                 {((projectType === PROJECT_TYPE_BUILD_AREA)
                     || (projectType === PROJECT_TYPE_COMPLETENESS)) && (
-                    // FIXME: Rename this to something more specific
                     <BuildAreaGeoJsonPreview
                         geoJson={geoJson as BuildAreaGeoJSON | undefined}
                         previewPopUp={previewPopUpData}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 076720b68..0d3c84e8d 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -442,7 +442,7 @@ export const MIN_SUB_OPTIONS = 2;
 export const MAX_INFO_PAGES = 10;
 
 const SM_TEXT_MAX_LENGTH = 25;
-const MD_TEXT_MAX_LENGTH = 100;
+const MD_TEXT_MAX_LENGTH = 1000;
 const LG_TEXT_MAX_LENGTH = 2000;
 
 export const tutorialFormSchema: TutorialFormSchema = {
@@ -464,7 +464,9 @@ export const tutorialFormSchema: TutorialFormSchema = {
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            tutorialTasks: {},
+            tutorialTasks: {
+                required: true,
+            },
             scenarioPages: {
                 keySelector: (key) => key.scenarioId,
                 member: (): ScenarioPagesFormSchemaMember => ({
@@ -546,7 +548,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         title: {
                             required: true,
                             requiredValidation: requiredStringCondition,
-                            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+                            validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
                         },
                         blocks: {
                             keySelector: (key) => key.blockNumber,
@@ -614,6 +616,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     },
                     keySelector: (key) => key.optionId,
                     member: (): CustomOptionFormSchemaMember => ({
+                        // FIXME: get this condition from common
                         fields: (): CustomOptionSchemaFields => ({
                             optionId: {
                                 required: true,
@@ -695,6 +698,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                 };
             },
         );
+
         baseSchema = addCondition(
             baseSchema,
             value,
@@ -715,6 +719,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
                     zoomLevel: { forceValue: nullValue },
                 }),
         );
+
         baseSchema = addCondition(
             baseSchema,
             value,

From 14a5fa0f0e31ba7fea23dd7378f915b858dce83f Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Thu, 15 Jun 2023 14:01:42 +0545
Subject: [PATCH 57/72] Allow additional property for project and tutorial

- informationPages
- customOptions
---
 .../mapswipe_workers/generate_stats/overall_stats.py           | 1 +
 .../mapswipe_workers/project_types/base/project.py             | 3 +++
 .../mapswipe_workers/project_types/base/tutorial.py            | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
index a7eaed23f..7b29c08de 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
@@ -64,6 +64,7 @@ def get_project_static_info(filename: str) -> pd.DataFrame:
                 project_details
                 ,regexp_replace(look_for, E'[\\n\\r]+', ' ', 'g' ) as look_for
                 ,project_type
+                ,image
                 -- add an array of the tile server names
                 ,CASE
                   WHEN project_type_specifics->'tileServer'->'name' IS NOT NULL THEN
diff --git a/mapswipe_workers/mapswipe_workers/project_types/base/project.py b/mapswipe_workers/mapswipe_workers/project_types/base/project.py
index 8feb68bd2..90342229f 100644
--- a/mapswipe_workers/mapswipe_workers/project_types/base/project.py
+++ b/mapswipe_workers/mapswipe_workers/project_types/base/project.py
@@ -89,6 +89,9 @@ def __init__(self, project_draft):
             )
 
         self.tutorialId = project_draft.get("tutorialId", None)
+        # XXX: Additional fields (Used in manager dashboard for now)
+        self.informationPages = project_draft.get("informationPages", None)
+        self.customOptions = project_draft.get("customOptions", None)
 
     # TODO: Implement resultRequiredCounter as property.
     # Does not work because for some reason project['group'] = vars()
diff --git a/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py b/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
index 16bca7de9..85357dcd7 100644
--- a/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
+++ b/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
@@ -24,6 +24,9 @@ def __init__(self, tutorial_draft):
         self.status = "tutorial"
         # need to filter out None values in list due to Firebase
         self.screens = list(filter(None, tutorial_draft["screens"]))
+        # NOTE: Additional fields (Used in manager dashboard for now)
+        self.informationPages = tutorial_draft.get("informationPages", None)
+        self.customOptions = tutorial_draft.get("customOptions", None)
 
     def save_tutorial(self):
         """Save the tutorial in Firebase."""

From 42d7143e6d9bab5027822957cb3580c1d2f4dace Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Fri, 16 Jun 2023 14:45:44 +0545
Subject: [PATCH 58/72] Changes from PR#794

https://github.com/mapswipe/python-mapswipe-workers/pull/794/files
---
 .../generate_stats/overall_stats.py           |  13 ++
 .../generate_stats/project_stats.py           | 138 +++++++++---------
 .../generate_stats/user_stats.py              |  66 ++++++---
 3 files changed, 124 insertions(+), 93 deletions(-)

diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
index 7b29c08de..992cef2c9 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
@@ -65,6 +65,19 @@ def get_project_static_info(filename: str) -> pd.DataFrame:
                 ,regexp_replace(look_for, E'[\\n\\r]+', ' ', 'g' ) as look_for
                 ,project_type
                 ,image
+                -- Custom options values
+                ,CASE
+                  WHEN project_type_specifics->'customOptions' IS NOT NULL
+                  THEN -- thus if we have answer labels use them
+                    ARRAY(
+                      SELECT json_array_elements(
+                          project_type_specifics->'customOptions'
+                      )->>'value'
+                    )
+                  ELSE -- otherwise use below label range as the mapswipe app default
+                    '{0,1,2,3}'
+                END as custom_options_values
+                -- custom_options_values -> parent - child relation
                 -- add an array of the tile server names
                 ,CASE
                   WHEN project_type_specifics->'tileServer'->'name' IS NOT NULL THEN
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
index 46a3c4483..24e962e62 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
@@ -1,3 +1,4 @@
+import ast
 import datetime
 import gzip
 import json
@@ -238,76 +239,45 @@ def get_groups(filename: str, project_id: str) -> pd.DataFrame:
     return df
 
 
-def calc_agreement(total: int, no: int, yes: int, maybe: int, bad: int) -> float:
+def calc_agreement(row: pd.Series) -> float:
     """
-    for each task the "agreement" is computed as defined by Scott's Pi
-    Scott's Pi is a measure for inter-rater reliability
-    https://en.wikipedia.org/wiki/Scott%27s_Pi
+    for each task the "agreement" is computed (i.e. the extent to which
+    raters agree for the i-th subject). This measure is a component of
+    Fleiss' kappa: https://en.wikipedia.org/wiki/Fleiss%27_kappa
     """
 
-    # TODO: currently this is implemented only for the 4 given categories
+    # Calculate total count as the sum of all categories
+    n = row["total_count"]
 
-    if total == 1:
-        agreement = 1.0
+    row = row.drop(labels=["total_count"])
+    # extent to which raters agree for the ith subject
+    # set agreement to None if only one user contributed
+    if n == 1 or n == 0:
+        agreement = None
     else:
-        agreement = (
-            1.0
-            / (total * (total - 1))
-            * (
-                (no * (no - 1))
-                + (yes * (yes - 1))
-                + (maybe * (maybe - 1))
-                + (bad * (bad - 1))
-            )
-        )
+        agreement = (sum([i**2 for i in row]) - n) / (n * (n - 1))
 
     return agreement
 
 
-def calc_share(total: int, no: int, yes: int, maybe: int, bad: int) -> List[float]:
+def calc_share(df: pd.DataFrame) -> pd.DataFrame:
     """Calculate the share of each category on the total count."""
-    no_share = no / total
-    yes_share = yes / total
-    maybe_share = maybe / total
-    bad_share = bad / total
-
-    return [no_share, yes_share, maybe_share, bad_share]
-
-
-def calc_count(row) -> List[int]:
-    """
-    Check if a count exists for each category ("no", "yes", "maybe", "bad").
-    Then calculate total count as the sum of all categories.
-    """
-
-    try:
-        no_count = row[0]
-    except KeyError:
-        no_count = 0
-
-    try:
-        yes_count = row[1]
-    except KeyError:
-        yes_count = 0
-
-    try:
-        maybe_count = row[2]
-    except KeyError:
-        maybe_count = 0
-
-    try:
-        bad_count = row[3]
-    except KeyError:
-        bad_count = 0
+    share_df = df.filter(like="count").div(df.total_count, axis=0)
+    share_df.drop("total_count", inplace=True, axis=1)
+    share_df.columns = share_df.columns.str.replace("_count", "_share")
+    return df.join(share_df)
 
-    total_count = no_count + yes_count + maybe_count + bad_count
-    assert total_count > 0, "Total count for result must be bigger than zero."
 
-    return [total_count, no_count, yes_count, maybe_count, bad_count]
+def calc_count(df: pd.DataFrame) -> pd.DataFrame:
+    df_new = df.filter(like="count")
+    df_new_sum = df_new.sum(axis=1)
+    return df_new_sum
 
 
-def calc_quadkey(row):
+def calc_quadkey(row: pd.DataFrame):
     """Calculate quadkey based on task id."""
+    # TODO: This does not make sense for media type, digtitalization.
+    #  For these projects types we should move to project classes.
     try:
         tile_z, tile_x, tile_y = row["task_id"].split("-")
         quadkey = tile_functions.tile_coords_and_zoom_to_quadKey(
@@ -320,8 +290,26 @@ def calc_quadkey(row):
     return quadkey
 
 
+def add_missing_result_columns(
+    df: pd.DataFrame,
+    custom_options_values: pd.Series
+) -> pd.DataFrame:
+    """
+    Check if all possible answers columns are included in the grouped results
+    data frame and add columns if missing.
+    """
+
+    all_answer_label_values_list = list(
+        ast.literal_eval(custom_options_values.item())
+    )
+    df = df.reindex(columns=all_answer_label_values_list, fill_value=0)
+    return df
+
+
 def get_agg_results_by_task_id(
-    results_df: pd.DataFrame, tasks_df: pd.DataFrame
+    results_df: pd.DataFrame,
+    tasks_df: pd.DataFrame,
+    custom_options_values: pd.Series,
 ) -> pd.DataFrame:
     """
     For each task several users contribute results.
@@ -339,6 +327,7 @@ def get_agg_results_by_task_id(
     ----------
     results_df: pd.DataFrame
     tasks_df: pd.DataFrame
+    custom_options_values: pd.Series
     """
 
     results_by_task_id_df = (
@@ -347,23 +336,27 @@ def get_agg_results_by_task_id(
         .unstack(fill_value=0)
     )
 
-    # calculate total count and check if other counts are defined
-    results_by_task_id_df[["total_count", 0, 1, 2, 3]] = results_by_task_id_df.apply(
-        lambda row: calc_count(row), axis=1, result_type="expand"
+    # add columns for answer options that were not chosen for any task
+    results_by_task_id_df = add_missing_result_columns(
+        results_by_task_id_df,
+        custom_options_values,
     )
 
+    # TODO: Add logic for parent values using sub values
+    # [<parent_value> = <parent_value> + <child_1_value> + .. <child_N_value>]
+
+    # needed for ogr2ogr todo: might be legacy?
+    results_by_task_id_df = results_by_task_id_df.add_suffix("_count")
+
+    # calculate total count of votes per task
+    results_by_task_id_df["total_count"] = calc_count(results_by_task_id_df)
+
     # calculate share based on counts
-    results_by_task_id_df[
-        ["0_share", "1_share", "2_share", "3_share"]
-    ] = results_by_task_id_df.apply(
-        lambda row: calc_share(row["total_count"], row[0], row[1], row[2], row[3]),
-        axis=1,
-        result_type="expand",
-    )
+    results_by_task_id_df = calc_share(results_by_task_id_df)
 
     # calculate agreement
     results_by_task_id_df["agreement"] = results_by_task_id_df.apply(
-        lambda row: calc_agreement(row["total_count"], row[0], row[1], row[2], row[3]),
+        calc_agreement,
         axis=1,
     )
     logger.info("calculated agreement")
@@ -383,11 +376,6 @@ def get_agg_results_by_task_id(
     )
     logger.info("added geometry to aggregated results")
 
-    # rename columns, ogr2ogr will fail otherwise
-    agg_results_df.rename(
-        columns={0: "0_count", 1: "1_count", 2: "2_count", 3: "3_count"}, inplace=True
-    )
-
     return agg_results_df
 
 
@@ -430,7 +418,11 @@ def get_per_project_statistics(project_id: str, project_info: pd.Series) -> dict
             add_metadata = False
 
         # aggregate results by task id
-        agg_results_df = get_agg_results_by_task_id(results_df, tasks_df)
+        agg_results_df = get_agg_results_by_task_id(
+            results_df,
+            tasks_df,
+            project_info["custom_options_values"],
+        )
         agg_results_df.to_csv(agg_results_filename, index_label="idx")
 
         geojson_functions.gzipped_csv_to_gzipped_geojson(
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
index f05731d1b..6133ed44f 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
@@ -1,8 +1,40 @@
 import pandas as pd
 
 
+def get_agreeing_contributions_per_user_and_task(row):
+    """
+    Compare user contibution to classifications of other users by calculating
+    the number of agreeing and disagreeing results.
+    """
+
+    # XXX: We need to figure what which values to check? Parent or child
+    r = row["result"]
+    count_str = f"{r}_count"
+    # ignore -999 values
+    if count_str == "-999_count":
+        return 0
+    else:
+        return row[count_str] - 1
+
+
+def get_disagreeing_contributions_per_user_and_task(row):
+    """
+    Compare user contibution to classifications of other users by calculating
+    the number of agreeing and disagreeing results.
+    """
+
+    total_count = row["total_count"]
+    if total_count == 0:
+        return 0
+    else:
+        agreeing_contributions = row["agreeing_contributions"]
+        disagreeing_contributions = total_count - (agreeing_contributions + 1)
+        return disagreeing_contributions
+
+
 def get_agg_results_by_user_id(
-    results_df: pd.DataFrame, agg_results_df: pd.DataFrame
+    results_df: pd.DataFrame,
+    agg_results_df: pd.DataFrame
 ) -> pd.DataFrame:
     """
     For each users we calcuate the number of total contributions (tasks)
@@ -15,26 +47,20 @@ def get_agg_results_by_user_id(
     Returns a pandas dataframe.
     """
     raw_contributions_df = results_df.merge(
-        agg_results_df, left_on="task_id", right_on="task_id"
+        agg_results_df,
+        left_on="task_id",
+        right_on="task_id",
+    )
+
+    raw_contributions_df["agreeing_contributions"] = raw_contributions_df.apply(
+        get_agreeing_contributions_per_user_and_task,
+        axis=1,
+    )
+
+    raw_contributions_df["disagreeing_contributions"] = raw_contributions_df.apply(
+        get_disagreeing_contributions_per_user_and_task,
+        axis=1,
     )
-    # compare to classifications of other users
-    # Calc number of agreeig and disagreeing results from other users.
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 0, "agreeing_contributions"
-    ] = (raw_contributions_df["0_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 1, "agreeing_contributions"
-    ] = (raw_contributions_df["1_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 2, "agreeing_contributions"
-    ] = (raw_contributions_df["2_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 3, "agreeing_contributions"
-    ] = (raw_contributions_df["3_count"] - 1)
-
-    raw_contributions_df["disagreeing_contributions"] = raw_contributions_df[
-        "total_count"
-    ] - (raw_contributions_df["agreeing_contributions"] + 1)
 
     agg_results_by_user_id_df = raw_contributions_df.groupby(
         ["project_id", "user_id", "username"]

From 82ce2d3340fe5da67c424d58b33b24c79ba3bb9e Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Mon, 19 Jun 2023 18:20:02 +0545
Subject: [PATCH 59/72] Add support for nested options

---
 .../generate_stats/overall_stats.py           |  12 +-
 .../generate_stats/project_stats.py           |  60 ++++--
 .../generate_stats/user_stats.py              |   3 +-
 .../utils/geojson_functions.py                |   2 +-
 .../tests/integration/test_user_stats.py      |   7 +-
 .../tests/unittests/test_project_stats.py     | 193 ++++++++++++++++++
 6 files changed, 251 insertions(+), 26 deletions(-)
 create mode 100644 mapswipe_workers/tests/unittests/test_project_stats.py

diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
index 992cef2c9..8e2791ff9 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
@@ -65,19 +65,15 @@ def get_project_static_info(filename: str) -> pd.DataFrame:
                 ,regexp_replace(look_for, E'[\\n\\r]+', ' ', 'g' ) as look_for
                 ,project_type
                 ,image
+                ,created
                 -- Custom options values
                 ,CASE
                   WHEN project_type_specifics->'customOptions' IS NOT NULL
                   THEN -- thus if we have answer labels use them
-                    ARRAY(
-                      SELECT json_array_elements(
-                          project_type_specifics->'customOptions'
-                      )->>'value'
-                    )
+                    (project_type_specifics->'customOptions')::TEXT
                   ELSE -- otherwise use below label range as the mapswipe app default
-                    '{0,1,2,3}'
-                END as custom_options_values
-                -- custom_options_values -> parent - child relation
+                    '[{"value": 0}, {"value": 1}, {"value": 2}, {"value": 3}]'::TEXT
+                END as custom_options
                 -- add an array of the tile server names
                 ,CASE
                   WHEN project_type_specifics->'tileServer'->'name' IS NOT NULL THEN
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
index 24e962e62..3e26882a3 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
@@ -4,7 +4,7 @@
 import json
 import os
 import tempfile
-from typing import List
+import typing
 
 import pandas as pd
 from pandas.api.types import is_numeric_dtype
@@ -268,6 +268,18 @@ def calc_share(df: pd.DataFrame) -> pd.DataFrame:
     return df.join(share_df)
 
 
+def calc_parent_option_count(
+    df: pd.DataFrame,
+    custom_options: typing.Dict[int, typing.Set[int]],
+) -> pd.DataFrame:
+    df_new = df.copy()
+    # Update option count using sub options count
+    for option, sub_options in custom_options.items():
+        for sub_option in sub_options:
+            df_new[f"{option}_count"] += df_new[f"{sub_option}_count"]
+    return df_new
+
+
 def calc_count(df: pd.DataFrame) -> pd.DataFrame:
     df_new = df.filter(like="count")
     df_new_sum = df_new.sum(axis=1)
@@ -290,26 +302,42 @@ def calc_quadkey(row: pd.DataFrame):
     return quadkey
 
 
+def get_custom_options(custom_options: pd.Series) -> typing.Dict[int, typing.Set[int]]:
+    eval_value = ast.literal_eval(custom_options.item())
+    return {
+        option["value"]: {
+            sub_option["value"] for sub_option in option.get("subOptions", [])
+        }
+        for option in eval_value
+    }
+
+
 def add_missing_result_columns(
-    df: pd.DataFrame,
-    custom_options_values: pd.Series
+    df: typing.Union[pd.DataFrame, pd.Series],
+    custom_options: typing.Dict[int, typing.Set[int]],
 ) -> pd.DataFrame:
     """
     Check if all possible answers columns are included in the grouped results
     data frame and add columns if missing.
     """
 
-    all_answer_label_values_list = list(
-        ast.literal_eval(custom_options_values.item())
+    all_answer_label_values_set = set(
+        [
+            _option
+            for option, sub_options in custom_options.items()
+            for _option in [option, *sub_options]
+        ]
+    )
+    return df.reindex(
+        columns=sorted(all_answer_label_values_set),
+        fill_value=0,
     )
-    df = df.reindex(columns=all_answer_label_values_list, fill_value=0)
-    return df
 
 
 def get_agg_results_by_task_id(
     results_df: pd.DataFrame,
     tasks_df: pd.DataFrame,
-    custom_options_values: pd.Series,
+    custom_options_raw: pd.Series,
 ) -> pd.DataFrame:
     """
     For each task several users contribute results.
@@ -327,7 +355,7 @@ def get_agg_results_by_task_id(
     ----------
     results_df: pd.DataFrame
     tasks_df: pd.DataFrame
-    custom_options_values: pd.Series
+    custom_options_raw: pd.Series
     """
 
     results_by_task_id_df = (
@@ -336,21 +364,25 @@ def get_agg_results_by_task_id(
         .unstack(fill_value=0)
     )
 
+    custom_options = get_custom_options(custom_options_raw)
+
     # add columns for answer options that were not chosen for any task
     results_by_task_id_df = add_missing_result_columns(
         results_by_task_id_df,
-        custom_options_values,
+        custom_options,
     )
 
-    # TODO: Add logic for parent values using sub values
-    # [<parent_value> = <parent_value> + <child_1_value> + .. <child_N_value>]
-
     # needed for ogr2ogr todo: might be legacy?
     results_by_task_id_df = results_by_task_id_df.add_suffix("_count")
 
     # calculate total count of votes per task
     results_by_task_id_df["total_count"] = calc_count(results_by_task_id_df)
 
+    results_by_task_id_df = calc_parent_option_count(
+        results_by_task_id_df,
+        custom_options,
+    )
+
     # calculate share based on counts
     results_by_task_id_df = calc_share(results_by_task_id_df)
 
@@ -421,7 +453,7 @@ def get_per_project_statistics(project_id: str, project_info: pd.Series) -> dict
         agg_results_df = get_agg_results_by_task_id(
             results_df,
             tasks_df,
-            project_info["custom_options_values"],
+            project_info["custom_options"],
         )
         agg_results_df.to_csv(agg_results_filename, index_label="idx")
 
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
index 6133ed44f..111c7df76 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
@@ -33,8 +33,7 @@ def get_disagreeing_contributions_per_user_and_task(row):
 
 
 def get_agg_results_by_user_id(
-    results_df: pd.DataFrame,
-    agg_results_df: pd.DataFrame
+    results_df: pd.DataFrame, agg_results_df: pd.DataFrame
 ) -> pd.DataFrame:
     """
     For each users we calcuate the number of total contributions (tasks)
diff --git a/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py b/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
index 5a4708f05..eb6c401e8 100644
--- a/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
+++ b/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
@@ -124,7 +124,7 @@ def cast_datatypes_for_geojson(filename: str):
                         geojson_data["features"][i]["properties"][property] = float(
                             geojson_data["features"][i]["properties"][property]
                         )
-                    except ValueError:
+                    except (ValueError, TypeError):
                         pass
 
         with open(filename, "w") as f:
diff --git a/mapswipe_workers/tests/integration/test_user_stats.py b/mapswipe_workers/tests/integration/test_user_stats.py
index 03028c8ae..a7c0450fd 100644
--- a/mapswipe_workers/tests/integration/test_user_stats.py
+++ b/mapswipe_workers/tests/integration/test_user_stats.py
@@ -1,6 +1,7 @@
 import os
 import tempfile
 import unittest
+import pandas as pd
 
 import set_up
 import tear_down
@@ -56,7 +57,11 @@ def test_get_agg_results_by_user_id(self):
         tasks_df = get_tasks(self.tasks_filename, self.project_id)
         self.assertEqual(len(tasks_df), 67436)
 
-        agg_results_df = get_agg_results_by_task_id(results_df, tasks_df)
+        agg_results_df = get_agg_results_by_task_id(
+            results_df,
+            tasks_df,
+            pd.Series(data="[{\"value\": 0}, {\"value\": 1}, {\"value\": 2}, {\"value\": 3}]"),
+        )
         self.assertEqual(len(agg_results_df), 67436)
 
         agg_results_by_user_id_df = get_agg_results_by_user_id(
diff --git a/mapswipe_workers/tests/unittests/test_project_stats.py b/mapswipe_workers/tests/unittests/test_project_stats.py
new file mode 100644
index 000000000..ac301a7cf
--- /dev/null
+++ b/mapswipe_workers/tests/unittests/test_project_stats.py
@@ -0,0 +1,193 @@
+import unittest
+
+import pandas as pd
+
+from mapswipe_workers.generate_stats.project_stats import (
+    add_missing_result_columns,
+    calc_agreement,
+    calc_count,
+    calc_parent_option_count,
+    calc_share,
+    get_custom_options,
+)
+from tests.integration.base import BaseTestCase
+
+
+class TestProjectStats(BaseTestCase):
+    def test_calc_agreement(self):
+        ds = pd.Series(
+            data=[40, 15, 5, 17, 3],
+            index=["total_count", "1_count", "2_count", "3_count", "4_count"],
+        )
+        agg2 = calc_agreement(ds)
+        self.assertEqual(agg2, 0.32564102564102565)
+
+    def test_calc_count(self):
+        df = pd.DataFrame(
+            data=[[1, 15, 5, 20], [1, 234, 45, 6]],
+            columns=["taskId", "1_count", "2_count", "3_count"],
+        )
+        result = calc_count(df)
+        self.assertEqual(result[0], 40)
+
+    def test_calc_share(self):
+        df = pd.DataFrame(
+            data=[[1, 40, 15, 5, 20], [1, 285, 234, 45, 6]],
+            columns=["taskId", "total_count", "1_count", "2_count", "3_count"],
+        )
+        share = calc_share(df)
+        self.assertEqual(
+            share.filter(like="share").iloc[0].tolist(), [0.375, 0.125, 0.5]
+        )
+
+    def test_get_custom_options(self):
+        for raw_custom_options, excepted_values in [
+            (
+                [
+                    {"value": 0},
+                    {"value": 1},
+                    {"value": 2},
+                    {"value": 3}
+                ],
+                {0: set(), 1: set(), 2: set(), 3: set()},
+            ),
+            (
+                [
+                    {
+                        "value": 0,
+                        "subOptions": [
+                            {"value": 4}, {"value": 5}
+                        ],
+                    },
+                    {"value": 1},
+                    {"value": 2},
+                    {"value": 3}
+                ],
+                {0: {4, 5}, 1: set(), 2: set(), 3: set()},
+            ),
+            (
+                [
+                    {
+                        "value": 0,
+                        "subOptions": [
+                            {"value": 4}, {"value": 5}
+                        ],
+                    },
+                    {"value": 1},
+                    {"value": 2},
+                    {
+                        "value": 3,
+                        "subOptions": [
+                            {"value": 10},
+                            {"value": 12}
+                        ],
+                    },
+                ],
+                {0: {4, 5}, 1: set(), 2: set(), 3: {10, 12}},
+            ),
+        ]:
+            pd_series = pd.Series(data=[str(raw_custom_options)])
+            parsed_custom_options = get_custom_options(pd_series)
+            assert parsed_custom_options == excepted_values
+
+    def test_add_missing_result_columns(self):
+        df = pd.DataFrame(
+            data=[
+                ["project-1-group-1-task-1", 1],
+                ["project-1-group-1-task-1", 5],
+                ["project-1-group-2-task-1", 1],
+                ["project-1-group-2-task-1", 1],
+                ["project-1-group-2-task-1", 1],
+                ["project-2-group-3-task-1", 2],
+                ["project-2-group-1-task-1", 3],
+            ],
+            columns=[
+                "task_id",
+                "result",
+            ],
+        )
+        df = (
+            df.groupby(["task_id", "result"])
+            .size()
+            .unstack(fill_value=0)
+        )
+        updated_df = add_missing_result_columns(
+            df,
+            {
+                1: {4, 5},
+                2: {6},
+                3: set(),
+            },
+        )
+        # Existing columns
+        assert list(df.columns) == [1, 2, 3, 5]
+        # New columns
+        assert list(updated_df.columns) == [1, 2, 3, 4, 5, 6]
+        # Existing data
+        assert df.to_csv() == (
+            'task_id,1,2,3,5\n'
+            'project-1-group-1-task-1,1,0,0,1\n'
+            'project-1-group-2-task-1,3,0,0,0\n'
+            'project-2-group-1-task-1,0,0,1,0\n'
+            'project-2-group-3-task-1,0,1,0,0\n'
+        )
+        # New data
+        assert updated_df.to_csv() == (
+            'task_id,1,2,3,4,5,6\n'
+            'project-1-group-1-task-1,1,0,0,0,1,0\n'
+            'project-1-group-2-task-1,3,0,0,0,0,0\n'
+            'project-2-group-1-task-1,0,0,1,0,0,0\n'
+            'project-2-group-3-task-1,0,1,0,0,0,0\n'
+        )
+
+    def test_calc_parent_option_count(self):
+        df = pd.DataFrame(
+            data=[
+                [1, 40, 1, 0, 20, 0, 1, 0],
+                [2, 41, 0, 5, 20, 0, 0, 0],
+                [3, 42, 10, 10, 20, 0, 0, 1],
+                [4, 281, 0, 1, 0, 1, 1, 4],
+                [5, 282, 15, 10, 0, 1, 2, 4],
+                [1, 283, 2, 20, 0, 1, 0, 0],
+            ],
+            columns=[
+                "taskId",
+                "total_count",
+                "1_count",
+                "2_count",
+                "3_count",
+                "4_count",  # Child of 1
+                "5_count",  # Child of 1
+                "6_count",  # Child of 2
+            ],
+        )
+        updated_df = calc_parent_option_count(
+            df,
+            {
+                1: {4, 5},
+                2: {6},
+                3: set(),
+            },
+        )
+        # Columns without child shouldn't change
+        for column in [
+            "taskId",
+            "total_count",
+            "3_count",
+            "4_count",
+            "5_count",
+            "6_count",
+        ]:
+            assert df[column].compare(updated_df[column]).size == 0
+        # Columns with child should change
+        for column, updated_index, updated_value in [
+            ("1_count", [0, 3, 4, 5], [2, 2, 18, 3]),
+            ("2_count", [2, 3, 4], [11, 5, 14]),
+        ]:
+            compared = df[column].compare(updated_df[column])
+            assert list(compared['other'].index) == updated_index
+            assert list(compared['other']) == updated_value
+
+
+if __name__ == "__main__":
+    unittest.main()

From b71c044ef9b608c43c551b6f653f11b28755647f Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Fri, 23 Jun 2023 10:14:41 +0545
Subject: [PATCH 60/72] Update HOT load_data logic

- Assume 0->No, 1->Yes, 2->Maybe, 3->Bad
---
 .../tasking_manager_geometries.py             | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py b/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
index 8d1e0f412..bc3b5b5e7 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
@@ -19,10 +19,14 @@ def load_data(project_id: str, gzipped_csv_file: str) -> list:
     project_data = []
     with gzip.open(gzipped_csv_file, mode="rt") as f:
         reader = csv.reader(f, delimiter=",")
+        column_index_map = {}
 
         for i, row in enumerate(reader):
             if i == 0:
                 # skip header
+                column_index_map = {
+                    column_label: index for index, column_label in enumerate(row)
+                }
                 continue
 
             # the last row of the csv might contain a comment about data use
@@ -42,14 +46,15 @@ def load_data(project_id: str, gzipped_csv_file: str) -> list:
                     "task_x": task_x,
                     "task_y": task_y,
                     "task_z": task_z,
-                    "no_count": int(row[2]),
-                    "yes_count": int(row[3]),
-                    "maybe_count": int(row[4]),
-                    "bad_imagery_count": int(row[5]),
-                    "no_share": float(row[7]),
-                    "yes_share": float(row[8]),
-                    "maybe_share": float(row[9]),
-                    "bad_imagery_share": float(row[10]),
+                    # XXX: Assuming 0->No, 1->Yes, 2->Maybe, 3->Bad
+                    "no_count": int(column_index_map.get("0_count", 0)),
+                    "yes_count": int(column_index_map.get("1_count", 0)),
+                    "maybe_count": int(column_index_map.get("2_count", 0)),
+                    "bad_imagery_count": int(column_index_map.get("3_count", 0)),
+                    "no_share": float(column_index_map.get("0_count", 0)),
+                    "yes_share": float(column_index_map.get("1_count", 0)),
+                    "maybe_share": float(column_index_map.get("2_count", 0)),
+                    "bad_imagery_share": float(column_index_map.get("3_count", 0)),
                     "wkt": tile_functions.geometry_from_tile_coords(
                         task_x, task_y, task_z
                     ),

From 957a9ab0a92fd1d01b17f49ed7a0acb15a5ee2fa Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Fri, 23 Jun 2023 18:33:41 +0545
Subject: [PATCH 61/72] Manual exports for community mapswipe website

To allow mapswipe website builder to pull data in bulk
---
 api/nginx.conf                                |  4 ++
 .../generate_stats/generate_stats.py          | 61 +++++++++++++++++++
 .../utils/create_directories.py               |  1 +
 3 files changed, 66 insertions(+)

diff --git a/api/nginx.conf b/api/nginx.conf
index 16f1d0576..9ef1a6f40 100644
--- a/api/nginx.conf
+++ b/api/nginx.conf
@@ -2,6 +2,10 @@ server {
     listen 80;
     server_name api;
 
+    gzip on;
+    gzip_comp_level 2;
+    gzip_types text/plain text/csv text/css application/json text/javascript;
+
     location / {
         alias /usr/share/nginx/html/api/;
         autoindex on;
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
index 22809842e..1a28c111f 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
@@ -1,4 +1,8 @@
+import csv
 import datetime as dt
+import hashlib
+import os
+import shutil
 from typing import List, Optional
 
 from mapswipe_workers import auth
@@ -6,6 +10,62 @@
 from mapswipe_workers.generate_stats import overall_stats, project_stats
 
 
+def generate_data_for_mapswipe_website():
+    """
+    Generate data for website
+    """
+    website_data_dest = f"{DATA_PATH}/api/website-data"
+
+    # TODO: Move to utils
+    def _compute_md5(file_name):
+        hash_md5 = hashlib.md5()
+        with open(file_name, "rb") as f:
+            for chunk in iter(lambda: f.read(4096), b""):
+                hash_md5.update(chunk)
+        return hash_md5.hexdigest()
+
+    def _project_history_zip():
+        project_history_file = f"{website_data_dest}/project-history"
+        zip_file_name = shutil.make_archive(
+            project_history_file,
+            "zip",
+            f"{DATA_PATH}/api/history/",
+        )
+        logger.info("finished generate project-history zip")
+        return zip_file_name
+
+    def _manifest_file():
+        endpoints_dir = f"{DATA_PATH}/api/"
+        manifest_file = f"{website_data_dest}/overall-endpoints.csv"
+        with open(manifest_file, "w") as fp:
+            csv_writer = csv.writer(fp)
+            csv_writer.writerow(["endpoints", "size_bytes"])
+            for path, _, files in os.walk(endpoints_dir):
+                for name in files:
+                    file_path = os.path.join(path, name)
+                    csv_writer.writerow(
+                        [
+                            "/api/" + file_path.split("/api/")[1],
+                            os.path.getsize(file_path),
+                        ]
+                    )
+        logger.info("finished generate endpoints manifest for existing stats")
+        return manifest_file
+
+    def _generate_file_hash(files):
+        for file in files:
+            md5_hash = _compute_md5(file)
+            with open(f"{file}.md5", "w") as fp:
+                fp.write(md5_hash)
+
+    files_to_track_for_checksum = [
+        f"{DATA_PATH}/api/projects/projects_centroid.geojson",
+        f"{DATA_PATH}/api/projects/projects_geom.geojson",
+    ]
+    files_to_track_for_checksum.extend([_project_history_zip(), _manifest_file()])
+    _generate_file_hash(files_to_track_for_checksum)
+
+
 def get_recent_projects(hours: int = 3):
     """Get ids for projects when results have been submitted within the last x hours."""
     pg_db = auth.postgresDB()
@@ -108,6 +168,7 @@ def generate_stats(project_id_list: Optional[List[str]] = None):
         overall_stats.get_overall_stats(projects_df, overall_stats_filename)
 
     logger.info(f"finished generate stats for: {project_id_list}")
+    generate_data_for_mapswipe_website()
 
 
 def generate_stats_all_projects():
diff --git a/mapswipe_workers/mapswipe_workers/utils/create_directories.py b/mapswipe_workers/mapswipe_workers/utils/create_directories.py
index 9e8aac659..ea56d59b0 100644
--- a/mapswipe_workers/mapswipe_workers/utils/create_directories.py
+++ b/mapswipe_workers/mapswipe_workers/utils/create_directories.py
@@ -7,6 +7,7 @@ def create_directories() -> None:
     """Create directories"""
     dirs = (
         "/api",
+        "/api/website-data",
         "/api/agg_results",
         "/api/groups",
         "/api/history",

From 78e4180f4111bf26a1994cc7f69036004ed68293 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 3 Jul 2023 16:44:55 +0545
Subject: [PATCH 62/72] initilize custom option banner

---
 .../components/CustomOptionsBanner/index.tsx   | 18 ++++++++++++++++++
 .../components/CustomOptionsBanner/styles.css  |  0
 .../app/views/NewTutorial/index.tsx            |  2 ++
 .../app/views/NewTutorial/utils.ts             |  1 -
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 manager-dashboard/app/components/CustomOptionsBanner/index.tsx
 create mode 100644 manager-dashboard/app/components/CustomOptionsBanner/styles.css

diff --git a/manager-dashboard/app/components/CustomOptionsBanner/index.tsx b/manager-dashboard/app/components/CustomOptionsBanner/index.tsx
new file mode 100644
index 000000000..4aeafbb63
--- /dev/null
+++ b/manager-dashboard/app/components/CustomOptionsBanner/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {IoAlertCircleOutline} from 'react-icons/io5';
+import styles from './styles.css';
+
+function CustomOptionsBanner() {
+    return (
+        <div className={styles.banner}>
+            <div>
+                <IoAlertCircleOutline />
+            </div>
+            <div>
+                While creating options, please use the values as listed below for HOT Tasking Manager Geometries
+            </div>
+        </div>
+    );
+}
+
+export default CustomOptionsBanner;
\ No newline at end of file
diff --git a/manager-dashboard/app/components/CustomOptionsBanner/styles.css b/manager-dashboard/app/components/CustomOptionsBanner/styles.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index b9908731c..aa6055bea 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -55,6 +55,7 @@ import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import NonFieldError from '#components/NonFieldError';
 import EmptyMessage from '#components/EmptyMessage';
+import CustomOptionsBanner from '#components/CustomOptionsBanner';
 import {
     valueSelector,
     labelSelector,
@@ -511,6 +512,7 @@ function NewTutorial(props: Props) {
                         />
                         {(customOptions && customOptions.length > 0) ? (
                             <div className={styles.customOptionContainer}>
+                                <CustomOptionsBanner />
                                 <div className={styles.customOptionList}>
                                     {customOptions.map((option, index) => (
                                         <ExpandableContainer
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 0d3c84e8d..aae3a4677 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -611,7 +611,6 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         if (option.length > MAX_OPTIONS) {
                             return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
                         }
-
                         return undefined;
                     },
                     keySelector: (key) => key.optionId,

From 6ff2bcac689ee37b3037ae849711112820cee898 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 3 Jul 2023 17:41:44 +0545
Subject: [PATCH 63/72] Finalize alert banner and custom option banner

---
 manager-dashboard/app/Base/styles.css         |  2 +
 .../app/components/AlertBanner/index.tsx      | 28 ++++++
 .../app/components/AlertBanner/styles.css     | 11 +++
 .../components/CustomOptionsBanner/index.tsx  | 18 ----
 .../components/CustomOptionsBanner/styles.css |  0
 .../app/views/NewTutorial/index.tsx           | 93 ++++++++++++-------
 .../app/views/NewTutorial/styles.css          | 32 ++++++-
 7 files changed, 131 insertions(+), 53 deletions(-)
 create mode 100644 manager-dashboard/app/components/AlertBanner/index.tsx
 create mode 100644 manager-dashboard/app/components/AlertBanner/styles.css
 delete mode 100644 manager-dashboard/app/components/CustomOptionsBanner/index.tsx
 delete mode 100644 manager-dashboard/app/components/CustomOptionsBanner/styles.css

diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index d96a574db..306f01caf 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -71,6 +71,8 @@ p {
     --color-accent: #4746f6;
     --color-danger: #e04656;
     --color-success: #53b391;
+    --color-banner-alert: #fdf4dc;
+    --color-banner-text: #5C4813;
     --color-separator: rgba(0, 0, 0, 0.1);
     --color-shadow: rgba(0, 0, 0, 0.2);
 
diff --git a/manager-dashboard/app/components/AlertBanner/index.tsx b/manager-dashboard/app/components/AlertBanner/index.tsx
new file mode 100644
index 000000000..ea495104b
--- /dev/null
+++ b/manager-dashboard/app/components/AlertBanner/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { IoAlertCircleOutline } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+}
+
+function AlertBanner(props: Props) {
+    const {
+        className,
+        children,
+    } = props;
+
+    return (
+        <div className={_cs(styles.banner, className)}>
+            <div className={styles.bannerIcon}>
+                <IoAlertCircleOutline />
+            </div>
+            {children}
+        </div>
+    );
+}
+
+export default AlertBanner;
diff --git a/manager-dashboard/app/components/AlertBanner/styles.css b/manager-dashboard/app/components/AlertBanner/styles.css
new file mode 100644
index 000000000..1175d9b3a
--- /dev/null
+++ b/manager-dashboard/app/components/AlertBanner/styles.css
@@ -0,0 +1,11 @@
+.banner {
+    display: flex;
+    gap: var(--spacing-large);
+    border-radius: var(--radius-card-border);
+    background-color: var(--color-banner-alert);
+    padding: var(--spacing-large);
+
+    .banner-icon {
+        font-size: var(--font-size-super-large);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/CustomOptionsBanner/index.tsx b/manager-dashboard/app/components/CustomOptionsBanner/index.tsx
deleted file mode 100644
index 4aeafbb63..000000000
--- a/manager-dashboard/app/components/CustomOptionsBanner/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {IoAlertCircleOutline} from 'react-icons/io5';
-import styles from './styles.css';
-
-function CustomOptionsBanner() {
-    return (
-        <div className={styles.banner}>
-            <div>
-                <IoAlertCircleOutline />
-            </div>
-            <div>
-                While creating options, please use the values as listed below for HOT Tasking Manager Geometries
-            </div>
-        </div>
-    );
-}
-
-export default CustomOptionsBanner;
\ No newline at end of file
diff --git a/manager-dashboard/app/components/CustomOptionsBanner/styles.css b/manager-dashboard/app/components/CustomOptionsBanner/styles.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index aa6055bea..afb163961 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -55,7 +55,7 @@ import InputSection from '#components/InputSection';
 import Button from '#components/Button';
 import NonFieldError from '#components/NonFieldError';
 import EmptyMessage from '#components/EmptyMessage';
-import CustomOptionsBanner from '#components/CustomOptionsBanner';
+import AlertBanner from '#components/AlertBanner';
 import {
     valueSelector,
     labelSelector,
@@ -512,40 +512,67 @@ function NewTutorial(props: Props) {
                         />
                         {(customOptions && customOptions.length > 0) ? (
                             <div className={styles.customOptionContainer}>
-                                <CustomOptionsBanner />
-                                <div className={styles.customOptionList}>
-                                    {customOptions.map((option, index) => (
-                                        <ExpandableContainer
-                                            key={option.optionId}
-                                            header={option.title || `Option ${index + 1}`}
-                                            openByDefault={index === customOptions.length - 1}
-                                            actions={(
-                                                <Button
-                                                    name={index}
-                                                    onClick={onOptionRemove}
-                                                    variant="action"
-                                                    title="Delete Option"
-                                                    disabled={submissionPending || projectTypeEmpty}
-                                                >
-                                                    <IoIosTrash />
-                                                </Button>
-                                            )}
-                                        >
-                                            <CustomOptionInput
+                                <AlertBanner>
+                                    <div className={styles.bannerContent}>
+                                        <div className={styles.bannerText}>
+                                            While creating options,
+                                            please use the values as listed
+                                            below for HOT Tasking Manager Geometries
+                                        </div>
+                                        <div className={styles.indicatorList}>
+                                            <div className={styles.indicator}>
+                                                0 = No
+                                            </div>
+                                            <div className={styles.indicator}>
+                                                1 = Yes
+                                            </div>
+                                            <div className={styles.indicator}>
+                                                2 = Maybe
+                                            </div>
+                                            <div className={styles.indicator}>
+                                                3 = bad
+                                            </div>
+                                        </div>
+                                    </div>
+                                </AlertBanner>
+                                <div className={styles.customOptionContent}>
+                                    <div className={styles.customOptionList}>
+                                        {customOptions.map((option, index) => (
+                                            <ExpandableContainer
                                                 key={option.optionId}
-                                                value={option}
-                                                index={index}
-                                                onChange={setOptionValue}
-                                                error={optionsError?.[option.optionId]}
-                                                disabled={submissionPending || projectTypeEmpty}
-                                            />
-                                        </ExpandableContainer>
-                                    ))}
+                                                header={option.title || `Option ${index + 1}`}
+                                                openByDefault={index === customOptions.length - 1}
+                                                actions={(
+                                                    <Button
+                                                        name={index}
+                                                        onClick={onOptionRemove}
+                                                        variant="action"
+                                                        title="Delete Option"
+                                                        disabled={
+                                                            submissionPending
+                                                            || projectTypeEmpty
+                                                        }
+                                                    >
+                                                        <IoIosTrash />
+                                                    </Button>
+                                                )}
+                                            >
+                                                <CustomOptionInput
+                                                    key={option.optionId}
+                                                    value={option}
+                                                    index={index}
+                                                    onChange={setOptionValue}
+                                                    error={optionsError?.[option.optionId]}
+                                                    disabled={submissionPending || projectTypeEmpty}
+                                                />
+                                            </ExpandableContainer>
+                                        ))}
+                                    </div>
+                                    <CustomOptionPreview
+                                        value={customOptions}
+                                        lookFor={value.lookFor}
+                                    />
                                 </div>
-                                <CustomOptionPreview
-                                    value={customOptions}
-                                    lookFor={value.lookFor}
-                                />
                             </div>
                         ) : (
                             <div>No options</div>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 122a6452e..8b5acb1c4 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -22,13 +22,41 @@
 
         .custom-option-container {
             display: flex;
+            flex-direction: column;
             gap: var(--spacing-large);
 
-            .custom-option-list {
+            .banner-content {
                 display: flex;
                 flex-direction: column;
-                flex-grow: 1;
                 gap: var(--spacing-medium);
+        
+                .banner-text {
+                    color: var(--color-banner-text);
+                    font-size: var(--spacing-medium);
+                }
+                .indicator-list {
+                    display: flex;
+                    gap: var(--spacing-medium);
+        
+                    .indicator {
+                        border-radius: var(--radius-badge-border);
+                        background-color: var(--color-backdrop-light);
+                        padding: var(--spacing-small) var(--spacing-medium);
+                        font-size: var(--spacing-medium);
+                    }
+                }
+            }
+            
+            .custom-option-content {
+                display: flex;
+                gap: var(--spacing-large);
+
+                .custom-option-list {
+                    display: flex;
+                    flex-direction: column;
+                    flex-grow: 1;
+                    gap: var(--spacing-medium);
+                }
             }
         }
 

From 5d311cb655efbdd9a11a78eb0f2e79810cf67c82 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Mon, 3 Jul 2023 19:08:31 +0545
Subject: [PATCH 64/72] Add sticky position on mobile preview

- Change current tab on scenario on input change
- Fix styling for info screen
---
 .../CustomOptionPreview/index.tsx             |   2 +-
 .../CustomOptionPreview/styles.css            |   5 +-
 .../InformationPagePreview/styles.css         |   2 +
 .../NewTutorial/ScenarioPageInput/index.tsx   |  42 +++++--
 .../app/views/NewTutorial/index.tsx           | 116 +++++++++---------
 .../app/views/NewTutorial/styles.css          |  51 ++++----
 6 files changed, 120 insertions(+), 98 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index 5f366622d..d64000cff 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -22,7 +22,7 @@ export default function CustomOptionPreview(props: Props) {
 
     return (
         <MobilePreview
-            className={styles.optionPreview}
+            className={styles.customOptionPreview}
             contentClassName={styles.content}
             heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
index adb8d39a1..eb2db2f03 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -1,4 +1,7 @@
-.option-preview {
+.custom-option-preview {
+    position: sticky;
+    top: 0;
+
     .content {
         display: flex;
         flex-direction: column;
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
index ede3cde41..0d575060f 100644
--- a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -1,4 +1,6 @@
 .information-preview {
+    position: sticky;
+    top: 0;
     overflow: auto;
 
     .content {
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
index 4b1c9406a..cba2dec68 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -126,6 +126,30 @@ export default function ScenarioPageInput(props: Props) {
         {},
     );
 
+    const handleInstructionFieldChange = React.useCallback<typeof onInstructionFieldChange>(
+        (...args) => {
+            setActiveInput('instructions');
+            onInstructionFieldChange(...args);
+        },
+        [onInstructionFieldChange],
+    );
+
+    const handleHintFieldChange = React.useCallback<typeof onHintFieldChange>(
+        (...args) => {
+            setActiveInput('hint');
+            onHintFieldChange(...args);
+        },
+        [onHintFieldChange],
+    );
+
+    const handleSuccessFieldChange = React.useCallback<typeof onSuccessFieldChange>(
+        (...args) => {
+            setActiveInput('success');
+            onSuccessFieldChange(...args);
+        },
+        [onSuccessFieldChange],
+    );
+
     const error = getErrorObject(riskyError);
     const instructionsError = getErrorObject(error?.instructions);
     const hintError = getErrorObject(error?.hint);
@@ -160,7 +184,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'title' as const}
                             value={value.instructions?.title}
                             label="Title"
-                            onChange={onInstructionFieldChange}
+                            onChange={handleInstructionFieldChange}
                             error={instructionsError?.title}
                             disabled={disabled}
                         />
@@ -168,7 +192,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'description' as const}
                             value={value.instructions?.description}
                             label="Description"
-                            onChange={onInstructionFieldChange}
+                            onChange={handleInstructionFieldChange}
                             error={instructionsError?.description}
                             disabled={disabled}
                         />
@@ -180,7 +204,7 @@ export default function ScenarioPageInput(props: Props) {
                         options={iconList}
                         keySelector={keySelector}
                         labelSelector={labelSelector}
-                        onChange={onInstructionFieldChange}
+                        onChange={handleInstructionFieldChange}
                         error={instructionsError?.icon}
                         disabled={disabled}
                     />
@@ -194,7 +218,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'title' as const}
                             value={value.hint?.title}
                             label="Title"
-                            onChange={onHintFieldChange}
+                            onChange={handleHintFieldChange}
                             error={hintError?.title}
                             disabled={disabled}
                         />
@@ -202,7 +226,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'description' as const}
                             value={value.hint?.description}
                             label="Description"
-                            onChange={onHintFieldChange}
+                            onChange={handleHintFieldChange}
                             error={hintError?.description}
                             disabled={disabled}
                         />
@@ -214,7 +238,7 @@ export default function ScenarioPageInput(props: Props) {
                         options={iconList}
                         keySelector={keySelector}
                         labelSelector={labelSelector}
-                        onChange={onHintFieldChange}
+                        onChange={handleHintFieldChange}
                         error={hintError?.icon}
                         disabled={disabled}
                     />
@@ -228,7 +252,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'title' as const}
                             value={value.success?.title}
                             label="Title"
-                            onChange={onSuccessFieldChange}
+                            onChange={handleSuccessFieldChange}
                             error={successError?.title}
                             disabled={disabled}
                         />
@@ -236,7 +260,7 @@ export default function ScenarioPageInput(props: Props) {
                             name={'description' as const}
                             value={value.success?.description}
                             label="Description"
-                            onChange={onSuccessFieldChange}
+                            onChange={handleSuccessFieldChange}
                             error={successError?.description}
                             disabled={disabled}
                         />
@@ -248,7 +272,7 @@ export default function ScenarioPageInput(props: Props) {
                         options={iconList}
                         keySelector={keySelector}
                         labelSelector={labelSelector}
-                        onChange={onSuccessFieldChange}
+                        onChange={handleSuccessFieldChange}
                         error={successError?.icon}
                         disabled={disabled}
                     />
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index afb163961..07a11f0f3 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -507,72 +507,70 @@ function NewTutorial(props: Props) {
                             </Button>
                         )}
                     >
+                        <AlertBanner>
+                            <div className={styles.bannerContent}>
+                                <div className={styles.bannerText}>
+                                    While creating options,
+                                    please use the values as listed
+                                    below for HOT Tasking Manager Geometries
+                                </div>
+                                <div className={styles.indicatorList}>
+                                    <div className={styles.indicator}>
+                                        0 = No
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        1 = Yes
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        2 = Maybe
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        3 = Bad Imagery
+                                    </div>
+                                </div>
+                            </div>
+                        </AlertBanner>
                         <NonFieldError
                             error={optionsError}
                         />
                         {(customOptions && customOptions.length > 0) ? (
                             <div className={styles.customOptionContainer}>
-                                <AlertBanner>
-                                    <div className={styles.bannerContent}>
-                                        <div className={styles.bannerText}>
-                                            While creating options,
-                                            please use the values as listed
-                                            below for HOT Tasking Manager Geometries
-                                        </div>
-                                        <div className={styles.indicatorList}>
-                                            <div className={styles.indicator}>
-                                                0 = No
-                                            </div>
-                                            <div className={styles.indicator}>
-                                                1 = Yes
-                                            </div>
-                                            <div className={styles.indicator}>
-                                                2 = Maybe
-                                            </div>
-                                            <div className={styles.indicator}>
-                                                3 = bad
-                                            </div>
-                                        </div>
-                                    </div>
-                                </AlertBanner>
-                                <div className={styles.customOptionContent}>
-                                    <div className={styles.customOptionList}>
-                                        {customOptions.map((option, index) => (
-                                            <ExpandableContainer
+                                <div className={styles.customOptionList}>
+                                    {customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.optionId}
+                                            header={option.title || `Option ${index + 1}`}
+                                            openByDefault={index === customOptions.length - 1}
+                                            actions={(
+                                                <Button
+                                                    name={index}
+                                                    onClick={onOptionRemove}
+                                                    variant="action"
+                                                    title="Delete Option"
+                                                    disabled={
+                                                        submissionPending
+                                                        || projectTypeEmpty
+                                                    }
+                                                >
+                                                    <IoIosTrash />
+                                                </Button>
+                                            )}
+                                        >
+                                            <CustomOptionInput
                                                 key={option.optionId}
-                                                header={option.title || `Option ${index + 1}`}
-                                                openByDefault={index === customOptions.length - 1}
-                                                actions={(
-                                                    <Button
-                                                        name={index}
-                                                        onClick={onOptionRemove}
-                                                        variant="action"
-                                                        title="Delete Option"
-                                                        disabled={
-                                                            submissionPending
-                                                            || projectTypeEmpty
-                                                        }
-                                                    >
-                                                        <IoIosTrash />
-                                                    </Button>
-                                                )}
-                                            >
-                                                <CustomOptionInput
-                                                    key={option.optionId}
-                                                    value={option}
-                                                    index={index}
-                                                    onChange={setOptionValue}
-                                                    error={optionsError?.[option.optionId]}
-                                                    disabled={submissionPending || projectTypeEmpty}
-                                                />
-                                            </ExpandableContainer>
-                                        ))}
-                                    </div>
-                                    <CustomOptionPreview
-                                        value={customOptions}
-                                        lookFor={value.lookFor}
-                                    />
+                                                value={option}
+                                                index={index}
+                                                onChange={setOptionValue}
+                                                error={optionsError?.[option.optionId]}
+                                                disabled={submissionPending || projectTypeEmpty}
+                                            />
+                                        </ExpandableContainer>
+                                    ))}
                                 </div>
+                                <CustomOptionPreview
+                                    value={customOptions}
+                                    lookFor={value.lookFor}
+                                />
                             </div>
                         ) : (
                             <div>No options</div>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 8b5acb1c4..a7bd9dd78 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -20,43 +20,38 @@
             gap: var(--spacing-medium);
         }
 
-        .custom-option-container {
+        .banner-content {
             display: flex;
             flex-direction: column;
-            gap: var(--spacing-large);
+            gap: var(--spacing-medium);
+
+            .banner-text {
+                color: var(--color-banner-text);
+                font-size: var(--spacing-medium);
+            }
 
-            .banner-content {
+            .indicator-list {
                 display: flex;
-                flex-direction: column;
                 gap: var(--spacing-medium);
-        
-                .banner-text {
-                    color: var(--color-banner-text);
+
+                .indicator {
+                    border-radius: var(--radius-badge-border);
+                    background-color: var(--color-backdrop-light);
+                    padding: var(--spacing-small) var(--spacing-medium);
                     font-size: var(--spacing-medium);
                 }
-                .indicator-list {
-                    display: flex;
-                    gap: var(--spacing-medium);
-        
-                    .indicator {
-                        border-radius: var(--radius-badge-border);
-                        background-color: var(--color-backdrop-light);
-                        padding: var(--spacing-small) var(--spacing-medium);
-                        font-size: var(--spacing-medium);
-                    }
-                }
             }
-            
-            .custom-option-content {
-                display: flex;
-                gap: var(--spacing-large);
+        }
 
-                .custom-option-list {
-                    display: flex;
-                    flex-direction: column;
-                    flex-grow: 1;
-                    gap: var(--spacing-medium);
-                }
+        .custom-option-container {
+            display: flex;
+            gap: var(--spacing-large);
+
+            .custom-option-list {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                gap: var(--spacing-medium);
             }
         }
 

From d31801218cfd6ba11415af7206758cb0a923b604 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 30 Jun 2023 15:46:22 +0545
Subject: [PATCH 65/72] Add screen and reference validations

---
 .../app/views/NewTutorial/index.tsx           | 38 ++++++++++-
 .../app/views/NewTutorial/utils.ts            | 67 +++++++++++++++++--
 2 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 07a11f0f3..a91513685 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -87,6 +87,9 @@ import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
+import { TutorialTasksGeoJSON } from './utils';
+import { FootprintProperties } from './utils';
+import { BuildAreaProperties, ChangeDetectionProperties } from './utils';
 
 type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
 function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
@@ -351,8 +354,34 @@ function NewTutorial(props: Props) {
     const handleGeoJsonFile = React.useCallback((
         geoProps: GeoJSON.GeoJSON | undefined,
     ) => {
-        const tutorialTasks = geoProps as PartialTutorialFormType['tutorialTasks'];
+        const tutorialTasks = geoProps as TutorialTasksGeoJSON;
+        if (!tutorialTasks) {
+            return;
+        }
+
+        const everyTaskHasScreenAndReferenceProperty = tutorialTasks.features.every(
+            (feature) => isDefined(feature.properties.screen) && isDefined(feature.properties.reference),
+        );
+
+        if (!everyTaskHasScreenAndReferenceProperty) {
+            setError((prevValue) => ({
+                ...getErrorObject(prevValue),
+                tutorialTasks: 'GeoJson does not contain property "screen" or "reference"',
+            }));
+
+            return;
+        }
 
+        if (value?.projectType === PROJECT_TYPE_COMPLETENESS
+            || value?.projectType === PROJECT_TYPE_BUILD_AREA
+            || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION) {
+            
+            tutorialTasks.features.every(
+                (feature: BuildAreaProperties | ChangeDetectionProperties) => isDefined(feature.properties.task_id),
+            );
+        }
+
+    
         setFieldValue(tutorialTasks, 'tutorialTasks');
 
         // FIXME: we need to validate the geojson here
@@ -369,9 +398,13 @@ function NewTutorial(props: Props) {
                 success: {},
             }
         ));
+
         setFieldValue(tutorialTaskArray, 'scenarioPages');
+
     }, [setFieldValue]);
 
+    console.log(formError);
+
     const handleAddInformationPage = React.useCallback(
         (template: InformationPageTemplateKey) => {
             setFieldValue(
@@ -447,7 +480,6 @@ function NewTutorial(props: Props) {
         customOptions,
         informationPages,
     } = value;
-
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <Heading level={1}>
@@ -619,7 +651,7 @@ function NewTutorial(props: Props) {
                                 openByDefault={i === informationPages.length - 1}
                                 actions={(
                                     <Button
-                                        name={i + 1}
+                                        name={i}
                                         onClick={onInformationPageRemove}
                                         variant="action"
                                         title="Delete page"
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index aae3a4677..dc2854703 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -9,6 +9,7 @@ import {
     ArraySchema,
     addCondition,
 } from '@togglecorp/toggle-form';
+import { isDefined, isNotDefined } from '@togglecorp/fujs';
 
 import {
     TileServer,
@@ -303,7 +304,7 @@ export interface FootprintProperties {
     screen: number;
 }
 
-interface ChangeDetectionProperties {
+export interface ChangeDetectionProperties {
     reference: number;
     screen: number;
     // eslint-disable-next-line camelcase
@@ -340,6 +341,7 @@ export type TutorialTasksGeoJSON = GeoJSON.FeatureCollection<
     BuildAreaProperties | FootprintProperties | ChangeDetectionProperties
 >;
 
+
 export type CustomOptions = {
     optionId: number; // we clear this before sending to server
     title: string;
@@ -403,7 +405,7 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'image' |'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'subOptionsId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
+    'image' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'subOptionsId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
@@ -434,6 +436,23 @@ export type PartialInformationPagesType = PartialTutorialFormType['informationPa
 export type PartialCustomOptionsType = PartialTutorialFormType['customOptions'];
 export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPagesType>[number]>['blocks'];
 
+function checkDuplicate(array: Array<string | number>) {
+    const valueCounts: Record<string, number> = {};
+    for (let index = 0; index < array.length; index += 1) {
+        const item = array[index];
+        if (isNotDefined(item)) {
+            // eslint-disable-next-line
+            continue
+        }
+        if (valueCounts[item] !== undefined) {
+            valueCounts[item] += 1;
+            return true;
+        }
+        valueCounts[item] = 1;
+    }
+    return false;
+}
+
 export const MAX_OPTIONS = 6;
 export const MIN_OPTIONS = 2;
 export const MAX_SUB_OPTIONS = 6;
@@ -599,18 +618,44 @@ export const tutorialFormSchema: TutorialFormSchema = {
             ['customOptions'],
             (formValues) => {
                 const customOptionField: CustomOptionFormSchema = {
-                    validation: (option) => {
-                        if (!option) {
+                    validation: (options) => {
+                        if (!options) {
                             return undefined;
                         }
 
-                        if (option.length < MIN_OPTIONS) {
+                        const optionValue = options.flatMap(
+                            (val) => val.value,
+                        ).filter(isDefined);
+
+                        const subOptionValue = options.flatMap((val) => {
+                            const subValue = val.subOptions?.map(
+                                (sub) => sub.value,
+                            );
+                            return subValue;
+                        }).filter(isDefined);
+
+                        const allOptionValue = [...optionValue, ...subOptionValue];
+
+                        const hasDuplicateOptionValue = checkDuplicate(
+                            options.map((val) => val.value).filter(isDefined),
+                        );
+
+                        const hasDuplicateAllOptionValue = checkDuplicate(allOptionValue);
+
+                        if (options.length < MIN_OPTIONS) {
                             return `There should be at least ${MIN_OPTIONS} options`;
                         }
 
-                        if (option.length > MAX_OPTIONS) {
+                        if (options.length > MAX_OPTIONS) {
                             return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
                         }
+
+                        if (hasDuplicateOptionValue) {
+                            return 'Value cannot be same';
+                        }
+                        if (hasDuplicateAllOptionValue) {
+                            return 'Option and suboptions value cannot be same';
+                        }
                         return undefined;
                     },
                     keySelector: (key) => key.optionId,
@@ -650,6 +695,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                         return undefined;
                                     }
 
+                                    const hasDuplicateSubOptionValue = checkDuplicate(
+                                        sub.map((val) => val.value).filter(isDefined),
+                                    );
+
                                     if (sub.length < MIN_SUB_OPTIONS) {
                                         return `There should be at least ${MIN_SUB_OPTIONS} sub options`;
                                     }
@@ -657,6 +706,9 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                     if (sub.length > MAX_SUB_OPTIONS) {
                                         return `There shouldn\`t be more than ${MAX_SUB_OPTIONS} sub options`;
                                     }
+                                    if (hasDuplicateSubOptionValue) {
+                                        return 'Value cannot be same';
+                                    }
 
                                     return undefined;
                                 },
@@ -705,7 +757,8 @@ export const tutorialFormSchema: TutorialFormSchema = {
             ['zoomLevel'],
             (v) => (v?.projectType === PROJECT_TYPE_BUILD_AREA
                 || v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                || v?.projectType === PROJECT_TYPE_COMPLETENESS ? {
+                || v?.projectType === PROJECT_TYPE_COMPLETENESS
+                ? {
                     zoomLevel: {
                         required: true,
                         validations: [

From 043504e3b26926ecbf9045c0e8322d07b388a785 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 30 Jun 2023 17:25:07 +0545
Subject: [PATCH 66/72] Add schema validator for geojson validation

---
 .../app/views/NewTutorial/index.tsx           | 169 ++++++++++++++----
 .../app/views/NewTutorial/utils.ts            |   1 -
 2 files changed, 137 insertions(+), 33 deletions(-)

diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index a91513685..e6fa3e520 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -4,6 +4,7 @@ import {
     isDefined,
     unique,
     isNotDefined,
+    isTruthyString,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -63,6 +64,7 @@ import {
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_FOOTPRINT,
+    ProjectType,
 } from '#utils/common';
 
 import {
@@ -81,15 +83,14 @@ import {
     MAX_INFO_PAGES,
     MAX_OPTIONS,
     deleteKey,
+    TutorialTasksGeoJSON,
 } from './utils';
+
 import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
 import CustomOptionInput from './CustomOptionInput';
 import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
-import { TutorialTasksGeoJSON } from './utils';
-import { FootprintProperties } from './utils';
-import { BuildAreaProperties, ChangeDetectionProperties } from './utils';
 
 type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
 function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
@@ -355,41 +356,138 @@ function NewTutorial(props: Props) {
         geoProps: GeoJSON.GeoJSON | undefined,
     ) => {
         const tutorialTasks = geoProps as TutorialTasksGeoJSON;
-        if (!tutorialTasks) {
-            return;
-        }
+        function getGeoJSONError() {
+            if (isNotDefined(tutorialTasks.features) || !Array.isArray(tutorialTasks.features)) {
+                return 'GeoJson does not contain iterable properties';
+            }
 
-        const everyTaskHasScreenAndReferenceProperty = tutorialTasks.features.every(
-            (feature) => isDefined(feature.properties.screen) && isDefined(feature.properties.reference),
-        );
+            type ValidType ='number' | 'string' | 'boolean';
+            function checkSchema<T extends object>(
+                obj: T,
+                schema: Record<string, ValidType | ValidType[]>,
+            ) {
+                const schemaKeys = Object.keys(schema);
+                const errors = schemaKeys.map(
+                    (key) => {
+                        const expectedType = schema[key];
+
+                        const keySafe = key as keyof T;
+                        const currentValue: unknown = obj[keySafe];
+                        const valueType = typeof currentValue;
+
+                        if (Array.isArray(expectedType)) {
+                            const indexOfType = expectedType.findIndex(
+                                (type) => type === valueType,
+                            );
+                            if (indexOfType === -1) {
+                                return `type of ${key} expected to be one of type ${expectedType.join(', ')}`;
+                            }
+                        } else if (typeof currentValue !== expectedType) {
+                            return `type of ${key} expected to be of ${expectedType}`;
+                        }
 
-        if (!everyTaskHasScreenAndReferenceProperty) {
-            setError((prevValue) => ({
-                ...getErrorObject(prevValue),
-                tutorialTasks: 'GeoJson does not contain property "screen" or "reference"',
-            }));
+                        return undefined;
+                    },
+                ).filter(isDefined);
+
+                return errors;
+            }
+
+            if (value?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                const errors = tutorialTasks.features.map(
+                    (feature) => checkSchema(feature.properties, {
+                        id: ['string', 'number'],
+                        reference: 'number',
+                        screen: 'number',
+                    }).join(', '),
+                ).filter(isTruthyString);
+
+                if (errors.length > 0) {
+                    return `Invalid GeoJson for Footprint: ${errors[0]} (${errors.length} total errors)`;
+                }
+            }
+
+            if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION) {
+                const errors = tutorialTasks.features.map(
+                    (feature) => checkSchema(feature.properties, {
+                        reference: 'number',
+                        screen: 'number',
+                        task_id: 'string',
+                        tile_x: 'number',
+                        tile_y: 'number',
+                        tile_z: 'number',
+                    }).join(', '),
+                ).filter(isTruthyString);
+
+                if (errors.length > 0) {
+                    // NOTE: only showing errors first error
+                    return `Invalid GeoJson for Change Detection: ${errors[0]} (${errors.length} total errors)`;
+                }
+            }
+
+            if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
+                const errors = tutorialTasks.features.map(
+                    (feature) => checkSchema(feature.properties, {
+                        reference: 'number',
+                        screen: 'number',
+                        task_id: 'string',
+                        tile_x: 'number',
+                        tile_y: 'number',
+                        tile_z: 'number',
+                    }).join(', '),
+                ).filter(isTruthyString);
+
+                if (errors.length > 0) {
+                    // NOTE: only showing errors first error
+                    return `Invalid GeoJson for Build Area: ${errors[0]} (${errors.length} total errors)`;
+                }
+            }
 
+            if (value?.projectType === PROJECT_TYPE_COMPLETENESS) {
+                const errors = tutorialTasks.features.map(
+                    (feature) => checkSchema(feature.properties, {
+                        reference: 'number',
+                        screen: 'number',
+                        task_id: 'string',
+                        tile_x: 'number',
+                        tile_y: 'number',
+                        tile_z: 'number',
+                    }).join(', '),
+                ).filter(isTruthyString);
+
+                if (errors.length > 0) {
+                    return `Invalid GeoJson for Completeness: ${errors[0]} (${errors.length} total errors)`;
+                }
+            }
+            // TODO: validate references
+
+            return undefined;
+        }
+
+        if (!tutorialTasks) {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
             return;
         }
 
-        if (value?.projectType === PROJECT_TYPE_COMPLETENESS
-            || value?.projectType === PROJECT_TYPE_BUILD_AREA
-            || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION) {
-            
-            tutorialTasks.features.every(
-                (feature: BuildAreaProperties | ChangeDetectionProperties) => isDefined(feature.properties.task_id),
-            );
+        const errors = getGeoJSONError();
+        if (errors) {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
+            setError((prevError) => ({
+                ...getErrorObject(prevError),
+                tutorialTasks: errors,
+            }));
+            return;
         }
 
-    
         setFieldValue(tutorialTasks, 'tutorialTasks');
 
-        // FIXME: we need to validate the geojson here
-
-        const uniqueArray = tutorialTasks && unique(
-            tutorialTasks.features, ((geo) => geo?.properties.screen),
+        const uniqueArray = unique(
+            tutorialTasks.features,
+            ((geo) => geo?.properties.screen),
         );
-        const sorted = uniqueArray?.sort((a, b) => a.properties.screen - b.properties.screen);
+        const sorted = uniqueArray.sort((a, b) => a.properties.screen - b.properties.screen);
         const tutorialTaskArray = sorted?.map((geo) => (
             {
                 scenarioId: geo.properties.screen,
@@ -400,10 +498,7 @@ function NewTutorial(props: Props) {
         ));
 
         setFieldValue(tutorialTaskArray, 'scenarioPages');
-
-    }, [setFieldValue]);
-
-    console.log(formError);
+    }, [setFieldValue, setError, value?.projectType]);
 
     const handleAddInformationPage = React.useCallback(
         (template: InformationPageTemplateKey) => {
@@ -480,6 +575,16 @@ function NewTutorial(props: Props) {
         customOptions,
         informationPages,
     } = value;
+
+    const handleProjectTypeChange = React.useCallback(
+        (newValue: ProjectType | undefined) => {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
+            setFieldValue(newValue, 'projectType');
+        },
+        [setFieldValue],
+    );
+
     return (
         <div className={_cs(styles.newTutorial, className)}>
             <Heading level={1}>
@@ -491,7 +596,7 @@ function NewTutorial(props: Props) {
                 >
                     <SegmentInput
                         name={'projectType' as const}
-                        onChange={setFieldValue}
+                        onChange={handleProjectTypeChange}
                         value={value.projectType}
                         label="Project Type"
                         hint="Select the type of your project."
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index dc2854703..cf7687a05 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -341,7 +341,6 @@ export type TutorialTasksGeoJSON = GeoJSON.FeatureCollection<
     BuildAreaProperties | FootprintProperties | ChangeDetectionProperties
 >;
 
-
 export type CustomOptions = {
     optionId: number; // we clear this before sending to server
     title: string;

From e38a034c0c3bce99760a763ce514a57df49a6f7b Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 30 Jun 2023 17:44:06 +0545
Subject: [PATCH 67/72] small fix

---
 manager-dashboard/app/utils/common.tsx           | 16 ++++++++--------
 manager-dashboard/app/views/NewTutorial/utils.ts |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
index 0ea3a6910..7ce70cf59 100644
--- a/manager-dashboard/app/utils/common.tsx
+++ b/manager-dashboard/app/utils/common.tsx
@@ -79,7 +79,7 @@ export const projectTypeLabelMap: {
 export type IconKey = 'addOutline'
     | 'alertOutline'
     | 'banOutline'
-    | 'checkmarkOutline'
+    | 'check'
     | 'closeOutline'
     | 'eggOutline'
     | 'ellipseOutline'
@@ -104,9 +104,9 @@ export type IconKey = 'addOutline'
     | 'warningOutline'
     | 'generalTap'
     | 'tap'
-    | 'oneTap'
-    | 'twoTap'
-    | 'threeTap';
+    | 'tap-1'
+    | 'tap-2'
+    | 'tap-3';
 
 export interface IconItem {
     key: IconKey;
@@ -147,7 +147,7 @@ export const iconList: IconItem[] = [
         component: IoBanOutline,
     },
     {
-        key: 'checkmarkOutline',
+        key: 'check',
         label: 'Checkmark',
         component: IoCheckmarkOutline,
     },
@@ -272,17 +272,17 @@ export const iconList: IconItem[] = [
         component: getPngIcon(angularTapIcon, 'tap'),
     },
     {
-        key: 'oneTap',
+        key: 'tap-1',
         label: '1-Tap',
         component: getPngIcon(oneTapIcon, 'one tap'),
     },
     {
-        key: 'twoTap',
+        key: 'tap-2',
         label: '2-Tap',
         component: getPngIcon(twoTapIcon, 'two tap'),
     },
     {
-        key: 'threeTap',
+        key: 'tap-3',
         label: '3-Tap',
         component: getPngIcon(threeTapIcon, 'three tap'),
     },
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index cf7687a05..8244b00c8 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -248,7 +248,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         optionId: 1,
         value: 1,
         title: 'Yes',
-        icon: 'checkmarkOutline',
+        icon: 'check',
         iconColor: 'green',
         description: 'the shape does outline a building in the image',
     },

From 7259506ea7690356669a9c5369c6979851adde90 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 3 Jul 2023 12:06:39 +0545
Subject: [PATCH 68/72] Add swipe icon

---
 .../app/resources/icons/swipeleft_icon_black.png | Bin 0 -> 4296 bytes
 manager-dashboard/app/utils/common.tsx           |   9 ++++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 manager-dashboard/app/resources/icons/swipeleft_icon_black.png

diff --git a/manager-dashboard/app/resources/icons/swipeleft_icon_black.png b/manager-dashboard/app/resources/icons/swipeleft_icon_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6286076ac7ec4291d8280153f822ca76dc52e1c
GIT binary patch
literal 4296
zcmeH~c{tSj9>*soAr&FXGBXreX2#5L7)Dq2iUwmHj;5Kx#4Kih7(>c3mMozV1{KOl
zwyr2k-6Bgep_4s2(smqU3l(ukx98ly`{Vv`pU3ZczWe9<{(hd<^Zw)WOTszY%19|o
zfj}S`dpj#<(P$%TW;?cv`jMPx8X%BZ8W-;YI1|IbOcukB8bkpD;Y<pc!lC+sK%C)<
z%Y?L7;GOZ~p4K_%8H0KW%#4Ou*ux|IXSwA%4um}r<1~Y{puW{bcBy(JFT3QO)0xBj
z9m?J4oTSx&3&BLD0Ki%y7mgP%6sRSaygeMXZ1Gj!&u-Fn4M~W2M#*-yxrT4$p?1d~
zA>f*n#v(lFIE=1r;ZdBaDSvLvm~X!fTkX&9Aw-XNHIfC4VK0sTJX;9$Ma<yk6(;cP
z{rvUBjxv6k0?>|VTKTAeWpx#xFJ3l%98PpfvY&^RTBIs=qr(1V9uL1m@)PRWDo%Ls
zhfQ=eL|lIYbB&Ly23n7T-`#`*OBMc&jv2OU+Z+xlS^oZO1h?^X&RS=WSH5YlptL|N
zQEhcXm3*&;I;~X;itbN+iYzs4{bZFpuBp-yn^%C4*flu6hzQ<~Efb;#^$dwfpnLb^
z<QpT9e|7z%{c?Lcc&%l)P(Q7sDqAC!&HSAnXoo;iYO|THB_PMyu><SIsy;?hiB9Gq
z;vKdzsBBC2Ey!7K4M;*>(r>v6Z0Yj;3-bDIQuEvaB0D%_VM6%FOM+d1$K~0?vR)l`
z`!bjEQf{hOVBlcwBUa0}jB<rfWM^rP&)a$3O77jXPalUXa)em!G;KB=4Ge0x*rs5H
zOOo(;7+Us6lwSc2@-kb`rw(^s*Ue|zK2`WM!ggBY{t=hrd}Vc9=IpGNVd5*_6Fm>y
zf>2ux+{A*%x25+q<-P^Gj!nYw4o|b36xwF{jQAG$N<044tg}8DS~dA#G8?^i;lMe~
z9HWMH3m6Sh?>PHzN&Ie2)o@f|fzAo7GEZC-?n<xm)kot+FUHqCV=bj^%kB-H+o}+r
zykMU#@CAV+L#QHWdN`cGkQg)=k<2(vfpKU|k#j{3KEh!VNr4mqe464<rDLHpjSrz<
zDj5rPH*`QaFfAzoR68z<;=*;rlemE-6EgIOxs(|PBNCud03w(}3!<|z94z#^E=Dxp
z*oH&F-$Q^vEY!mR2exFeC}1=U4MXT#bEu(6sJRr_j79dtI9u8LkPxk~&;S5nV&L$w
zurOE{3dUgh!wpPKOyCG49EsEyMd-7`=>U<VPiJdvNc=~`iozzbs7!#$po2FwiKiJM
z02T@ror8aflUVG(#p&!H3`8{GBqEK%BI>h<Vft(e08r`vY`6go0snqkbPHogWLvTr
zOf1xf7{sPP;Tws=e`GEK0souCMmqodZ}X9#V!VlK6W31>_^IGccWvVODFQzgyy>q0
zFI-apt)(b*Q2`Yus+36GCjFu+OOk2l$p(RTwQjU6S-QIpfI!=P?X4{E9RBohV4^~Z
zQv2LR<tK91*0`QjF3DOl+GmHeo%Pcl5IyaV>oMtESsN+ETzLiYV~dX~;U|g{p|^pq
z+c<*`scyQLP2N!V{FwCsw)yjVf{AIwaL983KljN3uSFn0EtowF7pyX#ulL+Qj(XOe
z*Xc`&<<td1z8N&}YA^-{YU)A6(PJ-?^3v1491Q$z=TOPc=W{5seWvs8HxX&teI^a4
z^?hFvmZ=B(Zs5Q4mc6XK^g_Z?$E4z~p{mwC&S+sf`jpp@*l;ZsMK+Oge^YXYhmS5D
zj4Aja7e6U*R&YHZSlU_k<PDu@TzDyV-L^(*iZ?m)uL+e^MF9%}nL_MW^-z31-5O`{
z*?h~n56#TK9yiC%5{!%Ia=@Y7S6^IeObXY<TDE@(lNUZF^tR7%<WM!x!j-)wiEGWc
zcaqR`S<EPx-a6j9)(81Y&_HL=vE%91Ap?9~MPGewrpiT!m<}0ZB&kT9wzB98Dk}9y
zW|oAKj=dWu@ZiPq;@w^F?8AdviIL6G-`)hQSO-9v(dlLFv)2)~zR6b+(vl}arY7!J
zeWItqtwtW+!xq_g7KK0lB?7ce4l3rEUypw|H>#Xk9=sCl`l|U-wS+D&O1JCg+yk1i
zX~KK$IM<kt>3f=_e3)j%p(cn#+#iv#vo;6Mw(a8Q++V(6e)?A()w^yx9ixKz$wlHB
zMd<2>x89G`)Codmmf99(b|Zu*K8{j_pc&f!7jZ_uFB<n4iuoSji_#?(>6&@hnW#!J
ztcoIdn(mprKFI336q;P9?MmkMWmx}cYsJ<B#p5%~puOf^kKf01s0Z7$EmZ@Z2-Ef}
zmw0In@$KwS`MNpMs#N5vU--!evQiFdlziBEC{0PYZ|nlyEVHHnrnjSB5;fVx`G?)J
zDwD5zarNTY8W)8)EfQHU=a?b5Qq?sSR>@DC5x+LB9W}7`LCT!su70PC5v`FqCo{FA
z9O;y-YV$SKm+xH_PQ?O37AS0=3gb-5-QDd9D&^ER>3{aYA`ewmczZBMr<G4abz8(N
zUe_D@dJqTV7M(I~rv+y(g%Le9yR|>=nAvk<)zHl4)Tq|!ly331fV{7M=o;ZFlnOa>
z#-avZnT)-0RmtHJx;RxPXsVbd?Wn6Ag>>+6OJBdyX;jQ@lkSR!@}6f1n$&f)+s@}+
z4MyGaufu;%i2*bpu8)+?#JG2Ha9$UiOD|51$sdzxmoIrkUVXhj)mEA=f2UrGphgLf
zt(I8yPEzI~-1gvGBn}34_Q&l?k_|6U3{qUmZF_w}rJ_mpw7Y%qisq2ttKwz)TcX3c
z#;gRx#m20e*L>Dnd@{Knc~~+sapb8y{$OE_&`ImSQvPf$E8){qgrzoCGoNk$zDebm
zEUj{kcf5NEp|O)tD|=G%$#hHMN}MlTb1{#cx&W($JGoPo5(Z}T(H0WCTi&)w4LU7|
nYe2Qzpj<A#l5a#CMt7d8hz>P#8R;M1_|3DocC@NIdMf7MAs`Bc

literal 0
HcmV?d00001

diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
index 7ce70cf59..6a9de02c5 100644
--- a/manager-dashboard/app/utils/common.tsx
+++ b/manager-dashboard/app/utils/common.tsx
@@ -35,6 +35,7 @@ import twoTapIcon from '#resources/icons/2_Tap_Black.png';
 import threeTapIcon from '#resources/icons/3_Tap_Black.png';
 import tapIcon from '#resources/icons/tap_icon.png';
 import angularTapIcon from '#resources/icons/tap_icon_angular.png';
+import swipeIcon from '#resources/icons/swipeleft_icon_black.png';
 
 export function valueSelector<T>(item: { value: T }) {
     return item.value;
@@ -106,7 +107,8 @@ export type IconKey = 'addOutline'
     | 'tap'
     | 'tap-1'
     | 'tap-2'
-    | 'tap-3';
+    | 'tap-3'
+    | 'swipe-left';
 
 export interface IconItem {
     key: IconKey;
@@ -286,6 +288,11 @@ export const iconList: IconItem[] = [
         label: '3-Tap',
         component: getPngIcon(threeTapIcon, 'three tap'),
     },
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+        component: getPngIcon(swipeIcon, 'swipe left'),
+    },
 ];
 
 export const iconMap = listToMap(

From b2e7ef00428e8d55533b72fa5374395039253593 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Mon, 3 Jul 2023 14:41:51 +0545
Subject: [PATCH 69/72] fix option value validation change icon name camelcase
 into kebab-case

---
 manager-dashboard/app/utils/common.tsx        | 106 +++++++++---------
 .../CustomOptionPreview/index.tsx             |   2 +-
 .../NewTutorial/CustomOptionInput/index.tsx   |   6 +-
 .../FootprintGeoJsonPreview/index.tsx         |   2 +-
 .../app/views/NewTutorial/utils.ts            |  54 +++------
 5 files changed, 71 insertions(+), 99 deletions(-)

diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
index 6a9de02c5..dfd624ecd 100644
--- a/manager-dashboard/app/utils/common.tsx
+++ b/manager-dashboard/app/utils/common.tsx
@@ -77,33 +77,33 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
 };
 
-export type IconKey = 'addOutline'
-    | 'alertOutline'
-    | 'banOutline'
+export type IconKey = 'add-outline'
+    | 'alert-outline'
+    | 'ban-outline'
     | 'check'
-    | 'closeOutline'
-    | 'eggOutline'
-    | 'ellipseOutline'
-    | 'flagOutline'
-    | 'handLeftOutline'
-    | 'handRightOutline'
-    | 'happyOutline'
-    | 'heartOutline'
-    | 'helpOutline'
-    | 'informationOutline'
-    | 'prismOutline'
-    | 'refreshOutline'
-    | 'removeOutline'
-    | 'sadOutline'
-    | 'searchOutline'
-    | 'shapesOutline'
-    | 'squareOutline'
-    | 'starOutline'
-    | 'thumbsDownOutline'
-    | 'thumbsUpOutline'
-    | 'triangleOutline'
-    | 'warningOutline'
-    | 'generalTap'
+    | 'close-outline'
+    | 'egg-outline'
+    | 'ellipse-outline'
+    | 'flag-outline'
+    | 'hand-left-outline'
+    | 'hand-right-outline'
+    | 'happy-outline'
+    | 'heart-outline'
+    | 'help-outline'
+    | 'information-outline'
+    | 'prism-outline'
+    | 'refresh-outline'
+    | 'remove-outline'
+    | 'sad-outline'
+    | 'search-outline'
+    | 'shapes-outline'
+    | 'square-outline'
+    | 'star-outline'
+    | 'thumbs-down-outline'
+    | 'thumbs-up-outline'
+    | 'triangle-outline'
+    | 'warning-outline'
+    | 'general-tap'
     | 'tap'
     | 'tap-1'
     | 'tap-2'
@@ -134,137 +134,137 @@ function getPngIcon(src: string, alt: string) {
 
 export const iconList: IconItem[] = [
     {
-        key: 'addOutline',
+        key: 'add-outline',
         label: 'Add',
         component: IoAddOutline,
     },
     {
-        key: 'alertOutline',
+        key: 'alert-outline',
         label: 'Alert',
         component: IoAlertOutline,
     },
     {
-        key: 'banOutline',
+        key: 'ban-outline',
         label: 'Ban',
         component: IoBanOutline,
     },
     {
         key: 'check',
-        label: 'Checkmark',
+        label: 'Check',
         component: IoCheckmarkOutline,
     },
     {
-        key: 'closeOutline',
+        key: 'close-outline',
         label: 'Close',
         component: IoCloseOutline,
     },
     {
-        key: 'eggOutline',
+        key: 'egg-outline',
         label: 'Egg',
         component: IoEggOutline,
     },
     {
-        key: 'ellipseOutline',
+        key: 'ellipse-outline',
         label: 'Ellipse',
         component: IoEllipseOutline,
     },
     {
-        key: 'flagOutline',
+        key: 'flag-outline',
         label: 'Flag',
         component: IoFlagOutline,
     },
     {
-        key: 'handLeftOutline',
+        key: 'hand-left-outline',
         label: 'Hand Left',
         component: IoHandLeftOutline,
     },
     {
-        key: 'handRightOutline',
+        key: 'hand-right-outline',
         label: 'Hand Right',
         component: IoHandRightOutline,
     },
     {
-        key: 'happyOutline',
+        key: 'happy-outline',
         label: 'Happy',
         component: IoHappyOutline,
     },
     {
-        key: 'heartOutline',
+        key: 'heart-outline',
         label: 'Heart',
         component: IoHeartOutline,
     },
     {
-        key: 'helpOutline',
+        key: 'help-outline',
         label: 'Help',
         component: IoHelpOutline,
     },
     {
-        key: 'informationOutline',
+        key: 'information-outline',
         label: 'Information',
         component: IoInformationOutline,
     },
     {
-        key: 'prismOutline',
+        key: 'prism-outline',
         label: 'Prism',
         component: IoPrismOutline,
     },
     {
-        key: 'refreshOutline',
+        key: 'refresh-outline',
         label: 'Refresh',
         component: IoRefreshOutline,
     },
     {
-        key: 'removeOutline',
+        key: 'remove-outline',
         label: 'Remove',
         component: IoRemoveOutline,
     },
     {
-        key: 'sadOutline',
+        key: 'sad-outline',
         label: 'Sad',
         component: IoSadOutline,
     },
     {
-        key: 'searchOutline',
+        key: 'search-outline',
         label: 'Search',
         component: IoSearchOutline,
     },
     {
-        key: 'shapesOutline',
+        key: 'shapes-outline',
         label: 'Shapes',
         component: IoShapesOutline,
     },
     {
-        key: 'squareOutline',
+        key: 'square-outline',
         label: 'Square',
         component: IoSquareOutline,
     },
     {
-        key: 'starOutline',
+        key: 'star-outline',
         label: 'Star',
         component: IoStarOutline,
     },
     {
-        key: 'thumbsDownOutline',
+        key: 'thumbs-down-outline',
         label: 'Thumbs Down',
         component: IoThumbsDownOutline,
     },
     {
-        key: 'thumbsUpOutline',
+        key: 'thumbs-up-outline',
         label: 'Thumbs Up',
         component: IoThumbsUpOutline,
     },
     {
-        key: 'triangleOutline',
+        key: 'triangle-outline',
         label: 'Triangle',
         component: IoTriangleOutline,
     },
     {
-        key: 'warningOutline',
+        key: 'warning-outline',
         label: 'Warning',
         component: IoWarningOutline,
     },
     {
-        key: 'generalTap',
+        key: 'general-tap',
         label: 'General Tap',
         component: getPngIcon(tapIcon, 'general tap'),
     },
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
index d64000cff..73e4ee926 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -30,7 +30,7 @@ export default function CustomOptionPreview(props: Props) {
             {value?.map((option, index) => {
                 const Icon = option.icon
                     ? iconMap[option.icon]
-                    : iconMap.flagOutline;
+                    : iconMap['flag-outline'];
 
                 const previewText = [
                     option.title || `{option ${index + 1}}`,
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
index 407768149..cd45bb4f7 100644
--- a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -146,7 +146,7 @@ export default function CustomOptionInput(props: Props) {
             {/* FIXME: use accordion open by default */}
             <div className={styles.subOptions}>
                 <Heading level={5}>
-                    Sub Options
+                    Sub-options
                 </Heading>
                 <NonFieldError
                     error={subOptionsError}
@@ -164,7 +164,7 @@ export default function CustomOptionInput(props: Props) {
                     />
                 ))}
                 {!value.subOptions?.length && (
-                    <div>No sub options</div>
+                    <div>No sub-options</div>
                 )}
                 {!readOnly && (
                     <Button
@@ -175,7 +175,7 @@ export default function CustomOptionInput(props: Props) {
                         // FIXME: use constant from utils
                         disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
                     >
-                        Add Sub Option
+                        Add Sub-option
                     </Button>
                 )}
             </div>
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
index b81f83239..e5971e7dd 100644
--- a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -69,7 +69,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
                 {customOptions?.map((option) => {
                     const Icon = option.icon
                         ? iconMap[option.icon]
-                        : iconMap.flagOutline;
+                        : iconMap['flag-outline'];
                     return (
                         <div
                             key={option.optionId}
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 8244b00c8..bf1b76a02 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -9,7 +9,10 @@ import {
     ArraySchema,
     addCondition,
 } from '@togglecorp/toggle-form';
-import { isDefined, isNotDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    getDuplicates,
+} from '@togglecorp/fujs';
 
 import {
     TileServer,
@@ -256,7 +259,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         optionId: 2,
         value: 0,
         title: 'No',
-        icon: 'closeOutline',
+        icon: 'close-outline',
         iconColor: 'red',
         description: 'the shape doesn\'t match a building in the image',
     },
@@ -264,7 +267,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
         optionId: 3,
         value: 2,
         title: 'Not Sure',
-        icon: 'removeOutline',
+        icon: 'remove-outline',
         iconColor: 'orange',
         description: 'if you\'re not sure or there is cloud cover / bad imagery',
     },
@@ -435,23 +438,6 @@ export type PartialInformationPagesType = PartialTutorialFormType['informationPa
 export type PartialCustomOptionsType = PartialTutorialFormType['customOptions'];
 export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPagesType>[number]>['blocks'];
 
-function checkDuplicate(array: Array<string | number>) {
-    const valueCounts: Record<string, number> = {};
-    for (let index = 0; index < array.length; index += 1) {
-        const item = array[index];
-        if (isNotDefined(item)) {
-            // eslint-disable-next-line
-            continue
-        }
-        if (valueCounts[item] !== undefined) {
-            valueCounts[item] += 1;
-            return true;
-        }
-        valueCounts[item] = 1;
-    }
-    return false;
-}
-
 export const MAX_OPTIONS = 6;
 export const MIN_OPTIONS = 2;
 export const MAX_SUB_OPTIONS = 6;
@@ -635,11 +621,7 @@ export const tutorialFormSchema: TutorialFormSchema = {
 
                         const allOptionValue = [...optionValue, ...subOptionValue];
 
-                        const hasDuplicateOptionValue = checkDuplicate(
-                            options.map((val) => val.value).filter(isDefined),
-                        );
-
-                        const hasDuplicateAllOptionValue = checkDuplicate(allOptionValue);
+                        const hasDuplicateAllOptionValue = getDuplicates(allOptionValue, (k) => k);
 
                         if (options.length < MIN_OPTIONS) {
                             return `There should be at least ${MIN_OPTIONS} options`;
@@ -648,12 +630,10 @@ export const tutorialFormSchema: TutorialFormSchema = {
                         if (options.length > MAX_OPTIONS) {
                             return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
                         }
-
-                        if (hasDuplicateOptionValue) {
-                            return 'Value cannot be same';
-                        }
-                        if (hasDuplicateAllOptionValue) {
-                            return 'Option and suboptions value cannot be same';
+                        if (hasDuplicateAllOptionValue.length > 0) {
+                            return `The value for options/sub-options are duplicated : ${
+                                hasDuplicateAllOptionValue.map((duplicate) => duplicate)
+                            }`;
                         }
                         return undefined;
                     },
@@ -693,20 +673,12 @@ export const tutorialFormSchema: TutorialFormSchema = {
                                     if (!sub || sub.length === 0) {
                                         return undefined;
                                     }
-
-                                    const hasDuplicateSubOptionValue = checkDuplicate(
-                                        sub.map((val) => val.value).filter(isDefined),
-                                    );
-
                                     if (sub.length < MIN_SUB_OPTIONS) {
-                                        return `There should be at least ${MIN_SUB_OPTIONS} sub options`;
+                                        return `There should be at least ${MIN_SUB_OPTIONS} sub-options`;
                                     }
 
                                     if (sub.length > MAX_SUB_OPTIONS) {
-                                        return `There shouldn\`t be more than ${MAX_SUB_OPTIONS} sub options`;
-                                    }
-                                    if (hasDuplicateSubOptionValue) {
-                                        return 'Value cannot be same';
+                                        return `There shouldn\`t be more than ${MAX_SUB_OPTIONS} sub-options`;
                                     }
 
                                     return undefined;

From 4922ad473d79d7264f23df1a590b9d6fa2233c77 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Mon, 3 Jul 2023 18:51:38 +0545
Subject: [PATCH 70/72] Add validation for uploaded geojson

---
 .../app/components/AlertBanner/index.tsx      |  13 +-
 .../app/components/AlertBanner/styles.css     |   8 +-
 .../app/components/GeoJsonPreview/index.tsx   |   2 +
 .../app/views/NewTutorial/index.tsx           | 371 +++++++++++++-----
 .../app/views/NewTutorial/styles.css          |  16 +
 .../app/views/NewTutorial/utils.ts            |  30 +-
 6 files changed, 314 insertions(+), 126 deletions(-)

diff --git a/manager-dashboard/app/components/AlertBanner/index.tsx b/manager-dashboard/app/components/AlertBanner/index.tsx
index ea495104b..08e439be3 100644
--- a/manager-dashboard/app/components/AlertBanner/index.tsx
+++ b/manager-dashboard/app/components/AlertBanner/index.tsx
@@ -2,10 +2,13 @@ import React from 'react';
 import { IoAlertCircleOutline } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
+import Heading from '#components/Heading';
+
 import styles from './styles.css';
 
 interface Props {
     className?: string;
+    title?: React.ReactNode;
     children: React.ReactNode;
 }
 
@@ -13,6 +16,7 @@ function AlertBanner(props: Props) {
     const {
         className,
         children,
+        title,
     } = props;
 
     return (
@@ -20,7 +24,14 @@ function AlertBanner(props: Props) {
             <div className={styles.bannerIcon}>
                 <IoAlertCircleOutline />
             </div>
-            {children}
+            <div className={styles.container}>
+                {title && (
+                    <Heading>
+                        {title}
+                    </Heading>
+                )}
+                {children}
+            </div>
         </div>
     );
 }
diff --git a/manager-dashboard/app/components/AlertBanner/styles.css b/manager-dashboard/app/components/AlertBanner/styles.css
index 1175d9b3a..770bb8e83 100644
--- a/manager-dashboard/app/components/AlertBanner/styles.css
+++ b/manager-dashboard/app/components/AlertBanner/styles.css
@@ -8,4 +8,10 @@
     .banner-icon {
         font-size: var(--font-size-super-large);
     }
-}
\ No newline at end of file
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+    }
+}
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index ec944d54e..b881e96e9 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -89,6 +89,8 @@ function GeoJsonPreview(props: Props) {
                 const layer = new Layer(
                     finalUrl,
                     {
+                        // NOTE: we have a limit of 22
+                        maxZoom: 22,
                         // attribution: '',
                         // subdomains: ['a', 'b', 'c'],
                     },
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index e6fa3e520..433c9dca0 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -5,6 +5,8 @@ import {
     unique,
     isNotDefined,
     isTruthyString,
+    difference,
+    listToMap,
 } from '@togglecorp/fujs';
 import {
     useForm,
@@ -34,6 +36,9 @@ import {
 import {
     IoIosTrash,
 } from 'react-icons/io';
+import {
+    IoInformationCircleOutline,
+} from 'react-icons/io5';
 import { Link } from 'react-router-dom';
 
 import UserContext from '#base/context/UserContext';
@@ -84,6 +89,8 @@ import {
     MAX_OPTIONS,
     deleteKey,
     TutorialTasksGeoJSON,
+    BuildAreaProperties,
+    ChangeDetectionProperties,
 } from './utils';
 
 import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
@@ -92,6 +99,219 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
+export function getDuplicates<T, K extends string | number>(
+    list: T[],
+    keySelector: (item: T) => K,
+    filter: (count: number) => boolean = (count) => count > 1,
+) {
+    const counts = listToMap<T, number, K>(
+        list,
+        keySelector,
+        (_, key, __, acc) => {
+            const value: number | undefined = acc[key];
+            return isDefined(value) ? value + 1 : 1;
+        },
+    );
+    return Object.keys(counts).filter((key) => filter(counts[key as K]));
+}
+
+type ValidType ='number' | 'string' | 'boolean';
+function checkSchema<T extends object>(
+    obj: T,
+    schema: Record<string, ValidType | ValidType[]>,
+) {
+    const schemaKeys = Object.keys(schema);
+    const errors = schemaKeys.map(
+        (key) => {
+            const expectedType = schema[key];
+
+            const keySafe = key as keyof T;
+            const currentValue: unknown = obj[keySafe];
+            const valueType = typeof currentValue;
+
+            if (Array.isArray(expectedType)) {
+                const indexOfType = expectedType.findIndex(
+                    (type) => type === valueType,
+                );
+                if (indexOfType === -1) {
+                    return `type of ${key} expected to be one of type ${expectedType.join(', ')}`;
+                }
+            } else if (typeof currentValue !== expectedType) {
+                return `type of ${key} expected to be of ${expectedType}`;
+            }
+
+            return undefined;
+        },
+    ).filter(isDefined);
+
+    return errors;
+}
+
+function getGeoJSONError(
+    tutorialTasks: TutorialTasksGeoJSON,
+    projectType: ProjectType,
+) {
+    if (isNotDefined(tutorialTasks.features) || !Array.isArray(tutorialTasks.features)) {
+        return 'GeoJSON does not contain iterable features';
+    }
+
+    // Check properties schema
+    const projectSchemas: {
+        [key in ProjectType]: Record<string, ValidType | ValidType[]>;
+    } = {
+        [PROJECT_TYPE_FOOTPRINT]: {
+            id: ['string', 'number'],
+            reference: 'number',
+            screen: 'number',
+        },
+        [PROJECT_TYPE_CHANGE_DETECTION]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+        [PROJECT_TYPE_BUILD_AREA]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+        [PROJECT_TYPE_COMPLETENESS]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+    };
+    const schemaErrors = tutorialTasks.features.map(
+        (feature) => checkSchema(
+            feature.properties,
+            projectSchemas[projectType],
+        ).join(', '),
+    ).filter(isTruthyString);
+    if (schemaErrors.length > 0) {
+        return `Invalid GeoJSON for Footprint: ${schemaErrors[0]} (${schemaErrors.length} total errors)`;
+    }
+
+    return undefined;
+}
+
+function getGeoJSONWarning(
+    tutorialTasks: TutorialTasksGeoJSON | undefined,
+    projectType: ProjectType | undefined,
+    customOptions: number[] | undefined,
+    maxZoom: number | undefined,
+) {
+    const errors = [];
+
+    const screens = tutorialTasks?.features?.map(
+        (feature) => feature.properties.screen,
+    ) ?? [];
+    if (screens.length > 0) {
+        const minScreen = Math.min(...screens);
+        const maxScreen = Math.max(...screens);
+        const totalScreen = maxScreen - minScreen + 1;
+
+        if (minScreen !== 1) {
+            errors.push(`Screen in GeoJSON should start from 1. The first screen is ${minScreen}`);
+        }
+
+        const actualScreens = new Set(screens);
+        const expectedScreens = new Set(Array.from(
+            { length: totalScreen },
+            (_, index) => minScreen + index,
+        ));
+
+        const missingScreens = difference(
+            expectedScreens,
+            actualScreens,
+        );
+
+        if (missingScreens.size === 1) {
+            errors.push(`Screen in GeoJSON should be sequential. The missing screen is ${[...missingScreens].sort().join(', ')}`);
+        } else if (missingScreens.size > 1) {
+            errors.push(`Screen in GeoJSON should be sequential. The missing screens are ${[...missingScreens].sort().join(', ')}`);
+        }
+
+        if (
+            projectType === PROJECT_TYPE_BUILD_AREA
+            || projectType === PROJECT_TYPE_COMPLETENESS
+        ) {
+            const dups = getDuplicates(
+                screens,
+                (item) => item,
+                (count) => count !== 6,
+            );
+            if (dups.length === 1) {
+                errors.push(`There should be exactly 6 squares with same screen in GeoJSON. The invalid screen is ${dups.join(', ')}`);
+            } else if (dups.length > 1) {
+                errors.push(`There should be exactly 6 squares with same screen in GeoJSON. The invalid screens are ${dups.join(', ')}`);
+            }
+        } else if (
+            projectType === PROJECT_TYPE_CHANGE_DETECTION
+            || projectType === PROJECT_TYPE_FOOTPRINT
+        ) {
+            const dups = getDuplicates(
+                screens,
+                (item) => item,
+                (count) => count > 1,
+            );
+            if (dups.length === 1) {
+                errors.push(`Screen in GeoJSON should not be duplicated. The duplicated screen is ${dups.join(', ')}`);
+            } else if (dups.length > 1) {
+                errors.push(`Screen in GeoJSON should not be duplicated. The duplicated screens are ${dups.join(', ')}`);
+            }
+        }
+    }
+
+    if (
+        projectType === PROJECT_TYPE_BUILD_AREA
+        || projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || projectType === PROJECT_TYPE_COMPLETENESS
+    ) {
+        type LocalTutorialTasksGeoJSON = GeoJSON.FeatureCollection<
+            GeoJSON.Geometry,
+            BuildAreaProperties | ChangeDetectionProperties
+        >;
+        const zooms = (tutorialTasks as LocalTutorialTasksGeoJSON)?.features?.map(
+            (feature) => feature.properties.tile_z,
+        ) ?? [];
+        const uniqueZooms = new Set(zooms);
+        if (uniqueZooms.size > 1) {
+            errors.push(`Zoom in GeoJSON should be all be the same. Zoom should be either ${[...uniqueZooms].sort().join(' or ')}`);
+        } else if (isDefined(maxZoom) && uniqueZooms.size === 1) {
+            const zoom = [...uniqueZooms][0];
+            if (zoom !== maxZoom) {
+                errors.push(`Zoom in GeoJSON does not match defined zoom level. ${zoom} != ${maxZoom}`);
+            }
+        }
+    }
+
+    // Check if options are not available
+    const references = tutorialTasks?.features?.map(
+        (feature) => feature.properties.reference,
+    ) ?? [];
+    const selectedOptionsSet = new Set(references);
+    const availableOptionsSet = projectType === PROJECT_TYPE_FOOTPRINT
+        ? customOptions ?? []
+        : [0, 1, 2, 3];
+
+    const invalidOptions = difference(new Set(selectedOptionsSet), new Set(availableOptionsSet));
+    if (invalidOptions.size === 1) {
+        errors.push(`Reference in GeoJSON should be either ${availableOptionsSet.join(', ')}. The invalid reference is ${[...invalidOptions].join(', ')}`);
+    } else if (invalidOptions.size > 1) {
+        errors.push(`Reference in GeoJSON should be either ${availableOptionsSet.join(', ')}. The invalid references are ${[...invalidOptions].sort().join(', ')}`);
+    }
+
+    return errors;
+}
+
 type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
 function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
     const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
@@ -355,122 +575,16 @@ function NewTutorial(props: Props) {
     const handleGeoJsonFile = React.useCallback((
         geoProps: GeoJSON.GeoJSON | undefined,
     ) => {
+        const projectType = value?.projectType;
         const tutorialTasks = geoProps as TutorialTasksGeoJSON;
-        function getGeoJSONError() {
-            if (isNotDefined(tutorialTasks.features) || !Array.isArray(tutorialTasks.features)) {
-                return 'GeoJson does not contain iterable properties';
-            }
-
-            type ValidType ='number' | 'string' | 'boolean';
-            function checkSchema<T extends object>(
-                obj: T,
-                schema: Record<string, ValidType | ValidType[]>,
-            ) {
-                const schemaKeys = Object.keys(schema);
-                const errors = schemaKeys.map(
-                    (key) => {
-                        const expectedType = schema[key];
-
-                        const keySafe = key as keyof T;
-                        const currentValue: unknown = obj[keySafe];
-                        const valueType = typeof currentValue;
-
-                        if (Array.isArray(expectedType)) {
-                            const indexOfType = expectedType.findIndex(
-                                (type) => type === valueType,
-                            );
-                            if (indexOfType === -1) {
-                                return `type of ${key} expected to be one of type ${expectedType.join(', ')}`;
-                            }
-                        } else if (typeof currentValue !== expectedType) {
-                            return `type of ${key} expected to be of ${expectedType}`;
-                        }
-
-                        return undefined;
-                    },
-                ).filter(isDefined);
-
-                return errors;
-            }
-
-            if (value?.projectType === PROJECT_TYPE_FOOTPRINT) {
-                const errors = tutorialTasks.features.map(
-                    (feature) => checkSchema(feature.properties, {
-                        id: ['string', 'number'],
-                        reference: 'number',
-                        screen: 'number',
-                    }).join(', '),
-                ).filter(isTruthyString);
-
-                if (errors.length > 0) {
-                    return `Invalid GeoJson for Footprint: ${errors[0]} (${errors.length} total errors)`;
-                }
-            }
-
-            if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION) {
-                const errors = tutorialTasks.features.map(
-                    (feature) => checkSchema(feature.properties, {
-                        reference: 'number',
-                        screen: 'number',
-                        task_id: 'string',
-                        tile_x: 'number',
-                        tile_y: 'number',
-                        tile_z: 'number',
-                    }).join(', '),
-                ).filter(isTruthyString);
-
-                if (errors.length > 0) {
-                    // NOTE: only showing errors first error
-                    return `Invalid GeoJson for Change Detection: ${errors[0]} (${errors.length} total errors)`;
-                }
-            }
-
-            if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
-                const errors = tutorialTasks.features.map(
-                    (feature) => checkSchema(feature.properties, {
-                        reference: 'number',
-                        screen: 'number',
-                        task_id: 'string',
-                        tile_x: 'number',
-                        tile_y: 'number',
-                        tile_z: 'number',
-                    }).join(', '),
-                ).filter(isTruthyString);
-
-                if (errors.length > 0) {
-                    // NOTE: only showing errors first error
-                    return `Invalid GeoJson for Build Area: ${errors[0]} (${errors.length} total errors)`;
-                }
-            }
 
-            if (value?.projectType === PROJECT_TYPE_COMPLETENESS) {
-                const errors = tutorialTasks.features.map(
-                    (feature) => checkSchema(feature.properties, {
-                        reference: 'number',
-                        screen: 'number',
-                        task_id: 'string',
-                        tile_x: 'number',
-                        tile_y: 'number',
-                        tile_z: 'number',
-                    }).join(', '),
-                ).filter(isTruthyString);
-
-                if (errors.length > 0) {
-                    return `Invalid GeoJson for Completeness: ${errors[0]} (${errors.length} total errors)`;
-                }
-            }
-            // TODO: validate references
-
-            return undefined;
-        }
-
-        if (!tutorialTasks) {
+        if (!tutorialTasks || !projectType) {
             setFieldValue(undefined, 'tutorialTasks');
             setFieldValue(undefined, 'scenarioPages');
             return;
         }
 
-        const errors = getGeoJSONError();
+        const errors = getGeoJSONError(tutorialTasks, projectType);
         if (errors) {
             setFieldValue(undefined, 'tutorialTasks');
             setFieldValue(undefined, 'scenarioPages');
@@ -558,6 +672,26 @@ function NewTutorial(props: Props) {
         [error],
     );
 
+    const warning = React.useMemo(
+        () => {
+            const options = value?.customOptions?.map((option) => option.value) ?? [];
+            const subOptions = value?.customOptions?.flatMap(
+                (option) => option.subOptions?.map((subOption) => subOption.value),
+            ) ?? [];
+            const selectedValues = [
+                ...options,
+                ...subOptions,
+            ].filter(isDefined);
+            return getGeoJSONWarning(
+                value?.tutorialTasks,
+                value?.projectType,
+                selectedValues,
+                value?.zoomLevel,
+            );
+        },
+        [value?.tutorialTasks, value?.projectType, value?.customOptions, value?.zoomLevel],
+    );
+
     const getTileServerUrl = (val: PartialTutorialFormType['tileServer']) => {
         const tileServerName = val?.name;
         if (isNotDefined(tileServerName)) {
@@ -873,6 +1007,25 @@ function NewTutorial(props: Props) {
                         )}
                     </div>
                 </InputSection>
+                {warning.length > 0 && (
+                    <AlertBanner
+                        title="Warnings"
+                    >
+                        <div className={styles.warningContainer}>
+                            {warning.map((item) => (
+                                <div
+                                    key={item}
+                                    className={styles.warningItem}
+                                >
+                                    <div className={styles.iconContainer}>
+                                        <IoInformationCircleOutline />
+                                    </div>
+                                    {item}
+                                </div>
+                            ))}
+                        </div>
+                    </AlertBanner>
+                )}
                 {hasErrors && (
                     <div className={styles.errorMessage}>
                         Please correct all the errors above before submission!
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index a7bd9dd78..ffef8723b 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -62,6 +62,22 @@
         }
     }
 
+    .warning-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-extra-small);
+
+        .warning-item {
+            display: flex;
+            gap: var(--spacing-small);
+            align-items: flex-start;
+
+            .icon-container {
+                font-size: var(--font-size-large);
+            }
+        }
+    }
+
     .error-message {
         text-align: center;
         color: var(--color-danger);
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index bf1b76a02..0a3bc9349 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -608,31 +608,31 @@ export const tutorialFormSchema: TutorialFormSchema = {
                             return undefined;
                         }
 
-                        const optionValue = options.flatMap(
+                        if (options.length < MIN_OPTIONS) {
+                            return `There should be at least ${MIN_OPTIONS} options`;
+                        }
+
+                        if (options.length > MAX_OPTIONS) {
+                            return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
+                        }
+
+                        const optionValues = options.flatMap(
                             (val) => val.value,
                         ).filter(isDefined);
 
-                        const subOptionValue = options.flatMap((val) => {
+                        const subOptionValues = options.flatMap((val) => {
                             const subValue = val.subOptions?.map(
                                 (sub) => sub.value,
                             );
                             return subValue;
                         }).filter(isDefined);
 
-                        const allOptionValue = [...optionValue, ...subOptionValue];
+                        const allOptionValues = [...optionValues, ...subOptionValues];
 
-                        const hasDuplicateAllOptionValue = getDuplicates(allOptionValue, (k) => k);
-
-                        if (options.length < MIN_OPTIONS) {
-                            return `There should be at least ${MIN_OPTIONS} options`;
-                        }
-
-                        if (options.length > MAX_OPTIONS) {
-                            return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
-                        }
-                        if (hasDuplicateAllOptionValue.length > 0) {
-                            return `The value for options/sub-options are duplicated : ${
-                                hasDuplicateAllOptionValue.map((duplicate) => duplicate)
+                        const hasDuplicateValue = getDuplicates(allOptionValues, (k) => k);
+                        if (hasDuplicateValue.length > 0) {
+                            return `The value for options and sub-options are duplicated: ${
+                                hasDuplicateValue.map((duplicate) => duplicate).join(', ')
                             }`;
                         }
                         return undefined;

From 183188f2c576ab6452c37387852cfe9ddcf1ff59 Mon Sep 17 00:00:00 2001
From: thenav56 <ayernavin@gmail.com>
Date: Fri, 30 Jun 2023 17:01:59 +0545
Subject: [PATCH 71/72] Check for `null`::TEXT for fallback custom options
 value

---
 .../mapswipe_workers/generate_stats/overall_stats.py         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
index 8e2791ff9..0e4212e65 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
@@ -68,7 +68,10 @@ def get_project_static_info(filename: str) -> pd.DataFrame:
                 ,created
                 -- Custom options values
                 ,CASE
-                  WHEN project_type_specifics->'customOptions' IS NOT NULL
+                  WHEN (
+                    project_type_specifics->'customOptions' IS NOT NULL AND
+                    (project_type_specifics->'customOptions')::TEXT != 'null'::TEXT
+                  )
                   THEN -- thus if we have answer labels use them
                     (project_type_specifics->'customOptions')::TEXT
                   ELSE -- otherwise use below label range as the mapswipe app default

From fd1656b54b004688883e713764c8f0adb4b0346b Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 7 Jul 2023 11:47:07 +0545
Subject: [PATCH 72/72] Discard results from old app to new footprint type
 projects

---
 firebase/functions/src/index.ts | 163 ++++++++++++++++++--------------
 1 file changed, 91 insertions(+), 72 deletions(-)

diff --git a/firebase/functions/src/index.ts b/firebase/functions/src/index.ts
index d56e3da50..803d81186 100644
--- a/firebase/functions/src/index.ts
+++ b/firebase/functions/src/index.ts
@@ -30,7 +30,7 @@ exports.osmAuth.token = functions.https.onRequest((req, res) => {
 
     This function also writes to the `contributions` section in the user profile.
 */
-exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{groupId}/{userId}/').onCreate((snapshot, context) => {
+exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{groupId}/{userId}/').onCreate(async (snapshot, context) => {
     // these references/values will be updated by this function
     const groupUsersRef = admin.database().ref('/v2/groupsUsers/' + context.params.projectId + '/' + context.params.groupId);
     const userRef = admin.database().ref('/v2/users/' + context.params.userId);
@@ -53,6 +53,30 @@ exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{gro
     }
 
     const result = snapshot.val();
+
+
+    // New versions of app will have the appVersion defined (> 2.2.5)
+    // appVersion: 2.2.5 (14)-dev
+    const appVersionString = result.appVersion as string | undefined | null;
+
+    // Check if the app is of older version
+    // (no need to check for specific version since old app won't sent the version info)
+    if (appVersionString === null || appVersionString === undefined || appVersionString.trim() === '') {
+        const projectRef = admin.database().ref(`/v2/projects/${context.params.projectId}`);
+        const dataSnapshot = await projectRef.once('value');
+
+        if (dataSnapshot.exists()) {
+            const project = dataSnapshot.val();
+            // Check if project type is footprint and also has
+            // custom options (i.e. these are new type of projects)
+            if (project.projectType === 2 && project.customOptions) {
+                // We remove the results submitted from older version of app (< v2.2.6)
+                console.info(`Result submitted for ${context.params.projectId} was discarded: submitted from older version of app`);
+                return thisResultRef.remove();
+            }
+        }
+    }
+
     // if result ref does not contain all required attributes we don't updated counters
     // e.g. due to some error when uploading from client
     if (!Object.prototype.hasOwnProperty.call(result, 'results')) {
@@ -90,77 +114,72 @@ exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{gro
         Update overall taskContributionCount and project taskContributionCount in the user profile
         based on the number of results submitted and the existing count values.
     */
-    return groupUsersRef.child(context.params.userId).once('value')
-        .then((dataSnapshot) => {
-            if (dataSnapshot.exists()) {
-                console.log('group contribution exists already. user: '+context.params.userId+' project: '+context.params.projectId+' group: '+context.params.groupId);
-                return null;
-            }
-            const latestNumberOfTasks = Object.keys(result['results']).length;
-
-            return Promise.all([
-                userContributionRef.child(context.params.groupId).set(true),
-                groupUsersRef.child(context.params.userId).set(true),
-                totalTaskContributionCountRef.transaction((currentCount) => {
-                    return currentCount + latestNumberOfTasks;
-                }),
-                totalGroupContributionCountRef.transaction((currentCount) => {
-                    return currentCount + 1;
-                }),
-                taskContributionCountRef.transaction((currentCount) => {
-                    return currentCount + latestNumberOfTasks;
-                }),
-
-                // Tag userGroups of the user in the result
-                // eslint-disable-next-line promise/no-nesting
-                userRef.child('userGroups').once('value').then((userGroupsOfTheUserSnapshot) => {
-                    if (!userGroupsOfTheUserSnapshot.exists()) {
-                        return null;
-                    }
-
-                    // eslint-disable-next-line promise/no-nesting
-                    return userGroupsRef.once('value').then((allUserGroupsSnapshot) => {
-                        if (!allUserGroupsSnapshot.exists()) {
-                            return null;
-                        }
-
-                        const userGroupsOfTheUserKeyList = Object.keys(userGroupsOfTheUserSnapshot.val());
-                        if (userGroupsOfTheUserKeyList.length <= 0) {
-                            return null;
-                        }
-
-                        const allUserGroups = allUserGroupsSnapshot.val();
-                        const nonArchivedUserGroupKeys = userGroupsOfTheUserKeyList.filter((key) => {
-                            const currentUserGroup = allUserGroups[key];
-
-                            // User might have joined some group that was removed but not cleared from their list
-                            if (!currentUserGroup) {
-                                return false;
-                            }
-
-                            // Skip groups that have been archived
-                            if (currentUserGroup.archivedAt) {
-                                return false;
-                            }
-
-                            return true;
-                        });
-
-                        if (nonArchivedUserGroupKeys.length === 0) {
-                            return null;
-                        }
-
-                        const nonArchivedUserGroupsOfTheUser = nonArchivedUserGroupKeys.reduce((acc, val) => {
-                            acc[val] = true;
-                            return acc;
-                        }, {} as Record<string, boolean>);
-
-                        // Include userGroups of the user in the results
-                        return thisResultRef.child('userGroups').set(nonArchivedUserGroupsOfTheUser);
-                    });
-                }),
-            ]);
-        });
+    const dataSnapshot = await groupUsersRef.child(context.params.userId).once('value');
+    if (dataSnapshot.exists()) {
+        console.log('group contribution exists already. user: '+context.params.userId+' project: '+context.params.projectId+' group: '+context.params.groupId);
+        return null;
+    }
+
+    const latestNumberOfTasks = Object.keys(result['results']).length;
+    await Promise.all([
+        userContributionRef.child(context.params.groupId).set(true),
+        groupUsersRef.child(context.params.userId).set(true),
+        totalTaskContributionCountRef.transaction((currentCount) => {
+            return currentCount + latestNumberOfTasks;
+        }),
+        totalGroupContributionCountRef.transaction((currentCount) => {
+            return currentCount + 1;
+        }),
+        taskContributionCountRef.transaction((currentCount) => {
+            return currentCount + latestNumberOfTasks;
+        }),
+    ]);
+
+
+    // Tag userGroups of the user in the result
+    const userGroupsOfTheUserSnapshot = await userRef.child('userGroups').once('value');
+    if (!userGroupsOfTheUserSnapshot.exists()) {
+        return null;
+    }
+
+    const allUserGroupsSnapshot = await userGroupsRef.once('value');
+    if (!allUserGroupsSnapshot.exists()) {
+        return null;
+    }
+
+    const userGroupsOfTheUserKeyList = Object.keys(userGroupsOfTheUserSnapshot.val());
+    if (userGroupsOfTheUserKeyList.length <= 0) {
+        return null;
+    }
+
+    const allUserGroups = allUserGroupsSnapshot.val();
+    const nonArchivedUserGroupKeys = userGroupsOfTheUserKeyList.filter((key) => {
+        const currentUserGroup = allUserGroups[key];
+
+        // User might have joined some group that was removed but not cleared from their list
+        if (!currentUserGroup) {
+            return false;
+        }
+
+        // Skip groups that have been archived
+        if (currentUserGroup.archivedAt) {
+            return false;
+        }
+
+        return true;
+    });
+
+    if (nonArchivedUserGroupKeys.length === 0) {
+        return null;
+    }
+
+    const nonArchivedUserGroupsOfTheUser = nonArchivedUserGroupKeys.reduce((acc, val) => {
+        acc[val] = true;
+        return acc;
+    }, {} as Record<string, boolean>);
+
+    // Include userGroups of the user in the results
+    return thisResultRef.child('userGroups').set(nonArchivedUserGroupsOfTheUser);
 });