Skip to content

Commit 2b6bee4

Browse files
prince-derivprince-deriv
committed
chore: refactor handling selected contract
1 parent 2c53b7c commit 2b6bee4

File tree

1 file changed

+87
-73
lines changed

1 file changed

+87
-73
lines changed

‎src/javascript/app/pages/bottom/tabs.jsx

Lines changed: 87 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,32 @@ import { SegmentedControlSingleChoice } from '@deriv-com/quill-ui';
66
import { contractExplanationData } from './explanation_data.js';
77
import { getElementById } from '../../../_common/common_functions';
88
import WebtraderChart from '../trade/charts/webtrader_chart';
9-
import { useMarketChange } from '../../hooks/events';
9+
import { useContractChange, useMarketChange } from '../../hooks/events';
1010
import Defaults, { PARAM_NAMES } from '../trade/defaults';
1111
import Language from '../../../_common/language';
1212
import Url from '../../../_common/url';
1313
import { localize } from '../../../_common/localize.js';
1414

1515
const Explanation = () => {
1616
const language = Language.get();
17-
let form_name;
18-
form_name = Defaults.get(PARAM_NAMES.FORM_NAME) || 'risefall';
19-
const map_obj = {
20-
matchdiff : 'digits',
21-
callputequal: 'risefall',
22-
callput : 'higherlower',
23-
};
24-
form_name = map_obj[form_name] || form_name;
17+
18+
const [formName,setFormName] = useState('');
19+
20+
const hasContractChanges = useContractChange();
21+
22+
useEffect(() => {
23+
const contractObject = {
24+
matchdiff : 'digits',
25+
callputequal: 'risefall',
26+
callput : 'higherlower',
27+
};
28+
29+
const newFormName = Defaults.get(PARAM_NAMES.FORM_NAME) || 'risefall';
30+
const finalFormName = contractObject[newFormName] || newFormName;
31+
32+
setFormName(finalFormName);
33+
34+
},[hasContractChanges]);
2535

2636
const image_path = Url.urlForStatic(
2737
`images/pages/trade-explanation/${language}/`
@@ -83,79 +93,83 @@ const Explanation = () => {
8393
},
8494
};
8595

86-
return (
87-
<div className='tab-explanation'>
88-
{/* ========== Winning ========== */}
89-
<div id='explanation_winning'>
90-
<div id={`winning_${form_name}`}>
91-
<h3>{localize('Winning the contract')}</h3>
92-
{contractExplanationData.winning[form_name].content.map(
93-
(data, idx) => (
94-
<p key={idx}>{parse(data)}</p>
95-
)
96-
)}
96+
if (formName){
97+
return (
98+
<div className='tab-explanation'>
99+
{/* ========== Winning ========== */}
100+
<div id='explanation_winning'>
101+
<div id={`winning_${formName}`}>
102+
<h3>{localize('Winning the contract')}</h3>
103+
{contractExplanationData.winning[formName].content.map(
104+
(data, idx) => (
105+
<p key={idx}>{parse(data)}</p>
106+
)
107+
)}
108+
</div>
97109
</div>
98-
</div>
99110

100-
{/* ========== Image ========== */}
101-
{images[form_name] && (
102-
<div id='explanation_image'>
103-
<div className='gr-row'>
104-
<div className='gr-2 hide-mobile' />
105-
<div
106-
className='gr-4 gr-12-m padding-right'
107-
style={{ margin: 'auto' }}
108-
>
109-
<img
110-
id='explanation_image_1'
111-
className='responsive'
112-
src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
113-
/>
114-
</div>
115-
<div className='gr-4 gr-12-m padding-left'>
116-
<img
117-
id='explanation_image_2'
118-
className='responsive'
119-
src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
120-
/>
111+
{/* ========== Image ========== */}
112+
{images[formName] && (
113+
<div id='explanation_image'>
114+
<div className='gr-row'>
115+
<div className='gr-2 hide-mobile' />
116+
<div
117+
className='gr-4 gr-12-m padding-right'
118+
style={{ margin: 'auto' }}
119+
>
120+
<img
121+
id='explanation_image_1'
122+
className='responsive'
123+
src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
124+
/>
125+
</div>
126+
<div className='gr-4 gr-12-m padding-left'>
127+
<img
128+
id='explanation_image_2'
129+
className='responsive'
130+
src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
131+
/>
132+
</div>
133+
<div className='gr-2 hide-mobile' />
121134
</div>
122-
<div className='gr-2 hide-mobile' />
123135
</div>
124-
</div>
125-
)}
126-
127-
{/* ========== Explain ========== */}
128-
<div id='explanation_explain' className='gr-child'>
129-
<div id={`explain_${form_name}`}>
130-
<h3>{contractExplanationData.explain[form_name].title}</h3>
131-
{contractExplanationData.explain[form_name].content.map(
132-
(data, idx) => (
133-
<p key={idx}>{parse(data)}</p>
134-
)
135-
)}
136-
{contractExplanationData.explain[form_name].title_secondary && (
137-
<h3 className='secondary-title'>
138-
{contractExplanationData.explain[form_name].title_secondary}
139-
</h3>
140-
)}
141-
{contractExplanationData.explain[form_name].content_secondary &&
142-
contractExplanationData.explain[form_name].content_secondary.map(
136+
)}
137+
138+
{/* ========== Explain ========== */}
139+
<div id='explanation_explain' className='gr-child'>
140+
<div id={`explain_${formName}`}>
141+
<h3>{contractExplanationData.explain[formName].title}</h3>
142+
{contractExplanationData.explain[formName].content.map(
143+
(data, idx) => (
144+
<p key={idx}>{parse(data)}</p>
145+
)
146+
)}
147+
{contractExplanationData.explain[formName].title_secondary && (
148+
<h3 className='secondary-title'>
149+
{contractExplanationData.explain[formName].title_secondary}
150+
</h3>
151+
)}
152+
{contractExplanationData.explain[formName].content_secondary &&
153+
contractExplanationData.explain[formName].content_secondary.map(
143154
(data, idx) => <p key={idx}>{parse(data)}</p>
144155
)}
156+
</div>
145157
</div>
158+
159+
{/* ========== Note ========== */}
160+
{contractExplanationData.note[formName] && (
161+
<p className='hint'>
162+
<strong>{localize('Note')}: </strong>
163+
{contractExplanationData.note[formName].content.map((data, idx) => (
164+
<span key={idx}>{parse(data)}</span>
165+
))}
166+
</p>
167+
)}
146168
</div>
169+
);
170+
}
147171

148-
{/* ========== Note ========== */}
149-
{contractExplanationData.note[form_name] && (
150-
<p className='hint'>
151-
<strong>{localize('Note')}: </strong>
152-
{contractExplanationData.note[form_name].content.map((data, idx) => (
153-
<span key={idx}>{parse(data)}</span>
154-
))}
155-
</p>
156-
)}
157-
</div>
158-
);
172+
return <></>;
159173
};
160174

161175
const Graph = () => (

0 commit comments

Comments
 (0)