Prince/Purchase section refactor

src/javascript/app/components/loading-spinner.js

@@ -29,7 +29,7 @@ export const show = (content_id) => {
  */
 export const hide = (content_id) => {
     dataManager.setContract({
-        hidePageLoader: true,
+        hide_page_loader: true,
     });
 
     assertContainerExists(content_id);

src/javascript/app/pages/bottom/data/explanation.js

@@ -1,6 +1,6 @@
 import { localize } from '../../../../_common/localize.js';
 
-export const contractExplanationData = {
+export const contract_explanation_data = {
     winning: {
         asian: {
 

src/javascript/app/pages/bottom/explanation.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
 import { SectionMessage, Skeleton, Text } from '@deriv-com/quill-ui';
-import { contractExplanationData } from './data/explanation.js';
+import { contract_explanation_data } from './data/explanation.js';
 import Language from '../../../_common/language';
 import Url from '../../../_common/url';
 import { localize } from '../../../_common/localize.js';
@@ -10,9 +10,9 @@ import { useContractChange } from '../../hooks/events.js';
 
 export const Explanation = ({ explanationOnly = false }) => {
 
-    const [formName,setFormName] = useState(null);
+    const [form_name,setFormName] = useState(null);
 
-    const hasContractChanges = useContractChange();
+    const has_contract_changes = useContractChange();
 
     useEffect(() => {
         const actualFormName = dataManager.getContract('explanationFormName');
@@ -22,7 +22,7 @@ export const Explanation = ({ explanationOnly = false }) => {
             setFormName(actualFormName);
         }, 500);
 
-    }, [hasContractChanges]);
+    }, [has_contract_changes]);
 
     const language = Language.get();
     const image_path = Url.urlForStatic(
@@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => {
     const Notes = () => (
         <>
             <strong>{localize('Note')}: </strong>
-            {contractExplanationData.note[formName].content.map((data, idx) => (
+            {contract_explanation_data.note[form_name].content.map((data, idx) => (
                 <span key={idx}>{parse(data)}</span>
             ))}
         </>
@@ -93,19 +93,19 @@ export const Explanation = ({ explanationOnly = false }) => {
         },
     };
 
-    if (formName) {
+    if (form_name) {
         return (
             <div className='tab-explanation'>
                 {/* ========== Winning ========== */}
                 {!explanationOnly && (
                     <>
                         <div id='explanation_winning'>
-                            <div id={`winning_${formName}`}>
+                            <div id={`winning_${form_name}`}>
                                 <div className='explanation-heading'>
-                                    <Text size='lg' bold >{localize('Winning the contract')}</Text>
+                                    <Text size='lg' bold>{localize('Winning the contract')}</Text>
                                 </div>
                                 <div className='explanation-content'>
-                                    {contractExplanationData.winning[formName].content.map(
+                                    {contract_explanation_data.winning[form_name].content.map(
                                         (data, idx) => (
                                             <Text size='md' key={idx}>{parse(data)}</Text>
                                         )
@@ -116,7 +116,7 @@ export const Explanation = ({ explanationOnly = false }) => {
                         </div>
 
                         {/* ========== Image ========== */}
-                        {images[formName] && (
+                        {images[form_name] && (
                             <div id='explanation_image'>
                                 <div className='gr-row'>
                                     <div className='gr-2 hide-mobile' />
@@ -127,15 +127,15 @@ export const Explanation = ({ explanationOnly = false }) => {
                                         <img
                                             id='explanation_image_1'
                                             className='responsive'
-                                            src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
+                                            src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
                                         />
                                     </div>
-                                    {images[formName].image2 && (
+                                    {images[form_name].image2 && (
                                         <div className='gr-4 gr-12-m padding-left'>
                                             <img
                                                 id='explanation_image_2'
                                                 className='responsive'
-                                                src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
+                                                src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
                                             />
                                         </div>
                                     )}
@@ -149,29 +149,29 @@ export const Explanation = ({ explanationOnly = false }) => {
 
                 {/* ========== Explain ========== */}
                 <div id='explanation_explain' className='gr-child'>
-                    <div id={`explain_${formName}`}  >
+                    <div id={`explain_${form_name}`}  >
                         <div className='explanation-heading'>
-                            <Text size='lg' bold >{contractExplanationData.explain[formName].title}</Text>
+                            <Text size='lg' bold >{contract_explanation_data.explain[form_name].title}</Text>
                         </div>
                         <div className='explanation-content'>
-                            {contractExplanationData.explain[formName].content.map(
+                            {contract_explanation_data.explain[form_name].content.map(
                                 (data, idx) => (
                                     <Text size='md' key={idx}>{parse(data)}</Text>
                                 )
                             )}
                         </div>
 
-                        {contractExplanationData.explain[formName].title_secondary && (
+                        {contract_explanation_data.explain[form_name].title_secondary && (
                             <div className='explanation-heading secondary-heading'>
                                 <Text size='lg' bold>
-                                    {contractExplanationData.explain[formName].title_secondary}
+                                    {contract_explanation_data.explain[form_name].title_secondary}
                                 </Text>
                             </div>
                         )}
 
-                        {contractExplanationData.explain[formName].content_secondary && (
+                        {contract_explanation_data.explain[form_name].content_secondary && (
                             <div className='explanation-content'>
-                                {contractExplanationData.explain[formName].content_secondary.map(
+                                {contract_explanation_data.explain[form_name].content_secondary.map(
                                     (data, idx) => (
                                         <Text size='md' key={idx}>{parse(data)}</Text>
                                     )
@@ -184,7 +184,7 @@ export const Explanation = ({ explanationOnly = false }) => {
 
                 {/* ========== Note ========== */}
                 {!explanationOnly && (
-                    contractExplanationData.note[formName] && (
+                    contract_explanation_data.note[form_name] && (
                         <SectionMessage status='info' message={<Notes />} size='sm' />
                     )
                 )}

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

@@ -11,14 +11,14 @@ import dataManager from '../../common/data_manager.js';
 import LastDigit from '../trade/last_digit.jsx';
 
 const BottomTabs = () => {
-    const hasMarketChange = useMarketChange();
-    const [selectedTab, setSelectedTab] = useState(1);
-    const [hasLastDigit, setHasLastDigit] = useState(false);
-    const [formName, setFormName] = useState('');
-    const hasContractChange = useContractChange();
-    const savedTab = sessionStorage.getItem('currentTab');
-    const triggerOldTabTimer = useRef();
-    const [isShowGraph, setIsShowGraph] = useState(false);
+    const has_market_change = useMarketChange();
+    const [selected_tab, setSelectedTab] = useState(1);
+    const [has_last_digit, setHasLastDigit] = useState(false);
+    const [form_name, setFormName] = useState('');
+    const has_contract_change = useContractChange();
+    const saved_tab = sessionStorage.getItem('currentTab');
+    const [is_show_graph, setIsShowGraph] = useState(false);
+    const trigger_old_tab_timer = useRef();
 
     const handleChange = (e) => {
         setSelectedTab(e);
@@ -31,43 +31,43 @@ const BottomTabs = () => {
 
     const tabs = [{ label: localize('Chart') }, { label: localize('Explanation') }];
 
-    const bottomTabOptions = hasLastDigit
+    const bottom_tab_options = has_last_digit
         ? [...tabs, { label: localize('Last Digit Stats') }]
         : tabs;
 
     useEffect(() => {
         setFormName(dataManager.getContract('explanationFormName'));
-    }, [hasContractChange, hasMarketChange]);
+    }, [has_contract_change, has_market_change]);
 
     useEffect(() => {
-        setHasLastDigit(formName === 'digits' || formName === 'evenodd' || formName === 'overunder');
-    }, [formName]);
+        setHasLastDigit(form_name === 'digits' || form_name === 'evenodd' || form_name === 'overunder');
+    }, [form_name]);
 
     useEffect(() => {
-        if (savedTab !== null) {
-            const tabIndex = parseInt(savedTab);
-            if (tabIndex === 2 && !hasLastDigit) {
+        if (saved_tab !== null) {
+            const tab_index = parseInt(saved_tab);
+            if (tab_index === 2 && !has_last_digit) {
                 setSelectedTab(1);
             } else {
-                setSelectedTab(tabIndex);
+                setSelectedTab(tab_index);
             }
         } else {
             setSelectedTab(1);
         }
-    }, [hasLastDigit]);
+    }, [has_last_digit]);
 
     useEffect(() => {
-        const oppositeTab = (selectedTab + 1) > 2 ? 0 : (selectedTab + 1);
+        const opposite_tab = (selected_tab + 1) > 2 ? 0 : (selected_tab + 1);
 
-        triggerOldTab(oppositeTab);
+        triggerOldTab(opposite_tab);
 
-        triggerOldTabTimer.current = setTimeout(() => {
-            triggerOldTab(selectedTab);
+        trigger_old_tab_timer.current = setTimeout(() => {
+            triggerOldTab(selected_tab);
         }, 100);
-    }, [selectedTab, savedTab]);
+    }, [selected_tab, saved_tab]);
 
     useEffect(() => () => {
-        clearTimeout(triggerOldTabTimer.current);
+        clearTimeout(trigger_old_tab_timer.current);
         WebtraderChart.cleanupChart();
         WebtraderChart.showChart();
     },[]);
@@ -76,20 +76,20 @@ const BottomTabs = () => {
         <>
             <div className='quill-container-centered'>
                 <SegmentedControlSingleChoice
-                    options={bottomTabOptions}
-                    selectedItemIndex={selectedTab}
+                    options={bottom_tab_options}
+                    selectedItemIndex={selected_tab}
                     onChange={handleChange}
                 />
             </div>
             <div className='bottom-content-section'>
-                {selectedTab === 0 && <Graph
+                {selected_tab === 0 && <Graph
                     onUnload={() => setIsShowGraph(false)}
                     onLoad={() => setIsShowGraph(true)}
                 />}
-                {selectedTab === 1 && <Explanation />}
-                {selectedTab === 2 && hasLastDigit && <LastDigit />}
+                {selected_tab === 1 && <Explanation />}
+                {selected_tab === 2 && has_last_digit && <LastDigit />}
 
-                <div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'grap-hide'}`}>
+                <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'grap-hide'}`}>
                     <p className='error-msg' id='chart-error' />
                     <div id='trade_live_chart'>
                         <div id='webtrader_chart' />

src/javascript/app/pages/form/barrier-fields.jsx

@@ -19,8 +19,8 @@ const BarrierFields = ({ form_name, handleAmountChange }) => {
     const barrier_low = Defaults.get(PARAM_NAMES.BARRIER_LOW);
 
     useEffect(() => {
-        setBarrierData((oldData) => ({
-            ...oldData,
+        setBarrierData((old_data) => ({
+            ...old_data,
             ...dataManager.getAllTrades(),
         }));
     }, [hasBarrierChange]);