ENCOA-260, ENCOA-259

src/components/ExamEditor/SettingsEditor/index.tsx

@@ -34,7 +34,9 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
     canPreview,
     canSubmit
 }) => {
+    const { dispatch } = useExamEditorStore()
     const examLabel = useExamEditorStore((state) => state.modules[module].examLabel) || '';
+    const type = useExamEditorStore((s) => s.modules[module].type);
     const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<SectionSettings>(
         module,
         sectionId
@@ -50,6 +52,18 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
         updateLocalAndScheduleGlobal({ category: text });
     }, [updateLocalAndScheduleGlobal]);
 
+    const typeOptions = [
+        { value: 'general', label: 'General' },
+        { value: 'academic', label: 'Academic' }
+    ];
+
+    const onTypeChange = useCallback((option: { value: string | null, label: string }) => {
+        dispatch({
+            type: 'UPDATE_MODULE',
+            payload: { module, updates: { type: option.value as "academic" | "general" | undefined } }
+        });
+    }, [dispatch, module]);
+
     const onIntroOptionChange = useCallback((option: { value: string | null, label: string }) => {
         let updates: Partial<SectionSettings> = { introOption: option };
 
@@ -79,7 +93,7 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
             currentIntro: text
         });
     }, [updateLocalAndScheduleGlobal]);
-    
+
     return (
         <div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit`}>
             <div className={`w-full flex justify-center text-ielts-${module} font-bold text-xl`}>{sectionLabel} Settings</div>
@@ -100,6 +114,18 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
                         value={localSettings.category || ''}
                     />
                 </Dropdown>
+                {["reading", "writing"].includes(module) && <Dropdown
+                    title="Type"
+                    module={module}
+                    open={localSettings.isTypeDropdownOpen}
+                    setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isTypeDropdownOpen: isOpen }, false)}
+                >
+                    <Select
+                        options={typeOptions}
+                        onChange={(o) => onTypeChange({ value: o!.value, label: o!.label })}
+                        value={typeOptions.find(o => o.value === type)}
+                    />
+                </Dropdown>}
                 <Dropdown
                     title="Divider"
                     module={module}