initilize custom option banner

Author: shreeyash07

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;

manager-dashboard/app/components/CustomOptionsBanner/styles.css

@@ -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

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

@@ -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,