From dac4ae8e04803fa0bd1eefb60459645aead165e1 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Wed, 3 Jul 2024 20:17:28 +0800
Subject: [PATCH] chore: separate form component and fix issues

---
 .../app/pages/form/contract_form_wrapper.jsx  | 203 ++----------------
 .../app/pages/form/form_component.jsx         | 175 +++++++++++++++
 src/javascript/app/pages/trade/common.js      |   2 +-
 3 files changed, 189 insertions(+), 191 deletions(-)
 create mode 100644 src/javascript/app/pages/form/form_component.jsx

diff --git a/src/javascript/app/pages/form/contract_form_wrapper.jsx b/src/javascript/app/pages/form/contract_form_wrapper.jsx
index b9e432e6fe8..02e03e54bb8 100644
--- a/src/javascript/app/pages/form/contract_form_wrapper.jsx
+++ b/src/javascript/app/pages/form/contract_form_wrapper.jsx
@@ -1,198 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { TextField, InputDropdown, TextFieldAddon, DatePickerDropdown } from '@deriv-com/quill-ui';
 import ReactDOM from 'react-dom';
-import { formConfig } from './form_config';
+// eslint-disable-next-line import/no-unresolved
+import { FormComponent } from './form_component';
 import { getElementById } from '../../../_common/common_functions';
 import { useContractChange, useMarketChange } from '../../hooks/events';
 import Defaults, { PARAM_NAMES } from '../trade/defaults';
 
-const FormComponent = ({ formName, handlers }) => {
-    const [expiryType, setExpiryType] = useState(Defaults.get(PARAM_NAMES.EXPIRY_TYPE));
-
-    const config = formConfig[formName];
-
-    if (!config) {
-        return null;
-    }
-
-    return (
-        <div className='form_container'>
-            {formName === 'risefall' && (
-                <div className='form_rows'>
-                    <div className='row gap-8'>
-                        <div className='form_field'>
-                            <InputDropdown
-                                label={config.startTime.label}
-                                options={config.startTime.options}
-                                status='neutral'
-                                value={config.startTime.defaultValue}
-                                onSelectOption={handlers.handleStartTime}
-                            />
-                        </div>
-                    </div>
-                    <div className='row gap-8'>
-                        <div className='form_field'>
-                            <InputDropdown
-                                options={config.expiryType.options}
-                                status='neutral'
-                                value={expiryType || config.expiryType.defaultValue}
-                                onSelectOption={(value) => {
-                                    handlers.handleExpiryType(value);
-                                    setExpiryType(value);
-                                }}
-                            />
-                        </div>
-                        {expiryType === 'duration' &&
-                            <>
-                                <div className='form_field'>
-                                    <TextField type='number' value='15' message='Minimum: 15' />
-                                </div>
-                                <div className='form_field'>
-                                    <InputDropdown
-                                        options={[
-                                            {
-                                                text : 'minutes',
-                                                value: 'minutes',
-                                            },
-                                            {
-                                                text : 'hours',
-                                                value: 'hours',
-                                            },
-                                            {
-                                                text : 'days',
-                                                value: 'days',
-                                            },
-                                        ]}
-                                        status='neutral'
-                                        value={'minutes'}
-                                        onSelectOption={(e) => handlers.handleSelect(e)}
-                                    />
-                                </div>
-                            </>
-                        }
-                        {expiryType === 'endtime' &&
-                            <>
-                                <div className='form_field'>
-                                    <DatePickerDropdown
-                                        onSelectDate={(e) => handlers.handleDateSelect(e) }
-                                        status='neutral'
-                                    />
-                                </div>
-                                <div className='form_field'>
-                                    <TextField label='Time' />
-                                </div>
-                            </>
-                        }
-                    </div>
-                    <div className='row gap-8'>
-                        {config.payoutType.map(field => (
-                            <div className='form_field' key={field.type}>
-                                {field.component === 'InputDropdown' &&
-                                    <InputDropdown {...field.props} onSelectOption={(e) => handlers.handleSelect(e)} />
-                                }
-                                {field.component === 'TextFieldAddon' &&
-                                    <TextFieldAddon {...field.props} />
-                                }
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            )}
-
-            {formName === 'touchnotouch' && (
-                <div className='form_rows'>
-                    <div className='row gap-8'>
-                        <div className='form_field'>
-                            <InputDropdown
-                                options={config.expiryType.options}
-                                status='neutral'
-                                value={expiryType || config.expiryType.defaultValue}
-                                onSelectOption={(value) => {
-                                    handlers.handleExpiryType(value);
-                                    setExpiryType(value);
-                                }}
-                            />
-                        </div>
-                        {expiryType === 'duration' &&
-                            <>
-                                <div className='form_field'>
-                                    <TextField type='number' value='15' message='Minimum: 15' />
-                                </div>
-                                <div className='form_field'>
-                                    <InputDropdown
-                                        options={[
-                                            {
-                                                text : 'minutes',
-                                                value: 'minutes',
-                                            },
-                                            {
-                                                text : 'hours',
-                                                value: 'hours',
-                                            },
-                                            {
-                                                text : 'days',
-                                                value: 'days',
-                                            },
-                                        ]}
-                                        status='neutral'
-                                        value={'minutes'}
-                                        onSelectOption={(e) => handlers.handleSelect(e)}
-                                    />
-                                </div>
-                            </>
-                        }
-                        {expiryType === 'endtime' &&
-                            <>
-                                <div className='form_field'>
-                                    <DatePickerDropdown
-                                        onSelectDate={(e) => handlers.handleDateSelect(e) }
-                                        status='neutral'
-                                    />
-                                </div>
-                                <div className='form_field'>
-                                    <TextField label='Time' />
-                                </div>
-                            </>
-                        }
-                    </div>
-                    <div className='row'>
-                        <div className='form_field'>
-                            <TextField {...config.barrier.props} />
-                        </div>
-                    </div>
-                    <div className='row gap-8'>
-                        {config.payoutType.map(field => (
-                            <div className='form_field' key={field.type}>
-                                {field.component === 'InputDropdown' &&
-                                    <InputDropdown {...field.props} onSelectOption={(e) => handlers.handleSelect(e)} />
-                                }
-                                {field.component === 'TextFieldAddon' &&
-                                    <TextFieldAddon {...field.props} />
-                                }
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-const ContractFormWrapper = (props) => {
-    const { contracts, contracts_tree, selected } = props;
+const ContractFormWrapper = () => {
     
     const hasContractChange = useContractChange();
     const hasMarketChange = useMarketChange();
 
     const [formName, setFormName] = useState(Defaults.get(PARAM_NAMES.FORM_NAME));
-    const [expiry_type, setExpiryType] = useState('duration');
+    const [expiry_type, setExpiryType] = useState(Defaults.get(PARAM_NAMES.EXPIRY_TYPE) || 'duration');
+
+    const {
+        EXPIRY_TYPE,
+    } = Defaults.PARAM_NAMES;
 
     const handleStartTime = (value) => {
         console.log('Start Time selected:', value);
     };
 
     const handleExpiryType = (value) => {
+        Defaults.set(EXPIRY_TYPE, value);
         setExpiryType(value);
     };
 
@@ -213,30 +44,22 @@ const ContractFormWrapper = (props) => {
 
     useEffect(() => {
         setFormName(Defaults.get(PARAM_NAMES.FORM_NAME));
-        console.log('form changed', formName);
     }, [hasContractChange, hasMarketChange]);
 
     return (
         <FormComponent
-            formName={Defaults.get(PARAM_NAMES.FORM_NAME)}
+            formName={formName}
             handlers={handlers}
+            expiryType={expiry_type}
         />
     );
 };
 
-/* eslint-disable react/no-render-return-value */
-export const init = (contracts, contracts_tree, selected) => {
+export const init = () => {
     ReactDOM.render(
-        <ContractFormWrapper contracts={contracts} contracts_tree={contracts_tree} selected={selected} />,
+        <ContractFormWrapper />,
         getElementById('contract_forms_wrapper')
     );
 };
-/* eslint-enable react/no-render-return-value */
-
-ContractFormWrapper.propTypes = {
-    contracts     : PropTypes.object,
-    contracts_tree: PropTypes.array,
-    selected      : PropTypes.string,
-};
 
 export default init;
diff --git a/src/javascript/app/pages/form/form_component.jsx b/src/javascript/app/pages/form/form_component.jsx
new file mode 100644
index 00000000000..71fb30e64eb
--- /dev/null
+++ b/src/javascript/app/pages/form/form_component.jsx
@@ -0,0 +1,175 @@
+import React from 'react';
+import { TextField, InputDropdown, TextFieldAddon, DatePickerDropdown } from '@deriv-com/quill-ui';
+import { formConfig } from './form_config';
+import Defaults, { PARAM_NAMES } from '../trade/defaults';
+
+export const FormComponent = ({ formName, handlers }) => {
+    const expiryType = Defaults.get(PARAM_NAMES.EXPIRY_TYPE);
+    const config = formConfig[formName];
+
+    if (!config) {
+        return null;
+    }
+
+    return (
+        <div className='form_container'>
+            {formName === 'risefall' && (
+                <div className='form_rows'>
+                    <div className='row gap-8'>
+                        <div className='form_field'>
+                            <InputDropdown
+                                label={config.startTime.label}
+                                options={config.startTime.options}
+                                status='neutral'
+                                value={config.startTime.defaultValue}
+                                onSelectOption={handlers.handleStartTime}
+                            />
+                        </div>
+                    </div>
+                    <div className='row gap-8'>
+                        <div className='form_field'>
+                            <InputDropdown
+                                options={config.expiryType.options}
+                                status='neutral'
+                                value={expiryType || config.expiryType.defaultValue}
+                                onSelectOption={(value) => {
+                                    handlers.handleExpiryType(value);
+                                }}
+                            />
+                        </div>
+                        {expiryType === 'duration' &&
+                            <>
+                                <div className='form_field'>
+                                    <TextField type='number' value='15' message='Minimum: 15' />
+                                </div>
+                                <div className='form_field'>
+                                    <InputDropdown
+                                        options={[
+                                            {
+                                                text : 'minutes',
+                                                value: 'minutes',
+                                            },
+                                            {
+                                                text : 'hours',
+                                                value: 'hours',
+                                            },
+                                            {
+                                                text : 'days',
+                                                value: 'days',
+                                            },
+                                        ]}
+                                        status='neutral'
+                                        value='minutes'
+                                        onSelectOption={(e) => handlers.handleSelect(e)}
+                                    />
+                                </div>
+                            </>
+                        }
+                        {expiryType === 'endtime' &&
+                            <>
+                                <div className='form_field'>
+                                    <DatePickerDropdown
+                                        onSelectDate={(e) => handlers.handleDateSelect(e) }
+                                        status='neutral'
+                                    />
+                                </div>
+                                <div className='form_field'>
+                                    <TextField label='Time' />
+                                </div>
+                            </>
+                        }
+                    </div>
+                    <div className='row gap-8'>
+                        {config.payoutType.map(field => (
+                            <div className='form_field' key={field.type}>
+                                {field.component === 'InputDropdown' &&
+                                    <InputDropdown {...field.props} onSelectOption={(e) => handlers.handleSelect(e)} />
+                                }
+                                {field.component === 'TextFieldAddon' &&
+                                    <TextFieldAddon {...field.props} />
+                                }
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {formName === 'touchnotouch' && (
+                <div className='form_rows'>
+                    <div className='row gap-8'>
+                        <div className='form_field'>
+                            <InputDropdown
+                                options={config.expiryType.options}
+                                status='neutral'
+                                value={expiryType || config.expiryType.defaultValue}
+                                onSelectOption={(value) => {
+                                    handlers.handleExpiryType(value);
+                                }}
+                            />
+                        </div>
+                        {expiryType === 'duration' &&
+                            <>
+                                <div className='form_field'>
+                                    <TextField type='number' value='15' message='Minimum: 15' />
+                                </div>
+                                <div className='form_field'>
+                                    <InputDropdown
+                                        options={[
+                                            {
+                                                text : 'minutes',
+                                                value: 'minutes',
+                                            },
+                                            {
+                                                text : 'hours',
+                                                value: 'hours',
+                                            },
+                                            {
+                                                text : 'days',
+                                                value: 'days',
+                                            },
+                                        ]}
+                                        status='neutral'
+                                        value={'minutes'}
+                                        onSelectOption={(e) => handlers.handleSelect(e)}
+                                    />
+                                </div>
+                            </>
+                        }
+                        {expiryType === 'endtime' &&
+                            <>
+                                <div className='form_field'>
+                                    <DatePickerDropdown
+                                        onSelectDate={(e) => handlers.handleDateSelect(e) }
+                                        status='neutral'
+                                    />
+                                </div>
+                                <div className='form_field'>
+                                    <TextField label='Time' />
+                                </div>
+                            </>
+                        }
+                    </div>
+                    <div className='row'>
+                        <div className='form_field'>
+                            <TextField {...config.barrier.props} />
+                        </div>
+                    </div>
+                    <div className='row gap-8'>
+                        {config.payoutType.map(field => (
+                            <div className='form_field' key={field.type}>
+                                {field.component === 'InputDropdown' &&
+                                    <InputDropdown {...field.props} onSelectOption={(e) => handlers.handleSelect(e)} />
+                                }
+                                {field.component === 'TextFieldAddon' &&
+                                    <TextFieldAddon {...field.props} />
+                                }
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FormComponent;
diff --git a/src/javascript/app/pages/trade/common.js b/src/javascript/app/pages/trade/common.js
index f6e8ce20bac..e442f715f14 100644
--- a/src/javascript/app/pages/trade/common.js
+++ b/src/javascript/app/pages/trade/common.js
@@ -49,7 +49,7 @@ const commonTrading = (() => {
 
         if (!contracts_element) {
             contracts_element = contractsElement.init(all_contracts, contracts_tree, contract_to_show);
-            FormsElement.init(all_contracts, contracts_tree, contract_to_show);
+            FormsElement.init();
         } else { // Update the component.
             contracts_element.updater.enqueueSetState(contracts_element, {
                 contracts_tree,