fix: added localize in tabs

scripts/js_texts/extracted_strings_app.js

@@ -1,5 +1,7 @@
 // This is an auto-generated list of strings used in js code for debugging purpose only
 module.exports = [
+    ' • The contract doesn\'t end within 5 minutes (for tick duration contracts',
+    ' • There are less than 2 ticks between the start and end times',
     'A whole new trading experience on a powerful yet easy to use platform.',
     'A word by itself is easy to guess',
     'AM',
@@ -17,6 +19,8 @@ module.exports = [
     'April',
     'Asian Down',
     'Asian Up',
+    'Asian options settle by comparing the [_1]last tick[_2] with the average spot over the period.',
+    'At reset time, if the spot is in the opposite direction of your prediction, the barrier is reset to that spot.',
     'Audit',
     'Audit Page',
     'Aug',
@@ -37,6 +41,9 @@ module.exports = [
     'Bitcoin',
     'Buy',
     'Buy price',
+    'By purchasing the [_1]"Close-Low"[_2] contract, you\'ll win the multiplier times the difference between the [_1]close[_2] and [_1]low[_2] over the duration of the contract.',
+    'By purchasing the [_1]"High-Close"[_2] contract, you\'ll win the multiplier times the difference between the [_1]high[_2] and [_1]close[_2] over the duration of the contract.',
+    'By purchasing the [_1]"High-Low"[_2] contract, you\'ll win the multiplier times the difference between the [_1]high[_2] and [_1]low[_2] over the duration of the contract.',
     'Call Spread',
     'Capitalization doesn\'t help very much',
     'Cashier disabled',
@@ -60,6 +67,7 @@ module.exports = [
     'Contract ends',
     'Contract has not started yet',
     'Contract information',
+    'Contract period',
     'Contract result',
     'Contract starts',
     'Contract type',
@@ -123,12 +131,51 @@ module.exports = [
     'High Barrier',
     'High Tick',
     'High barrier',
+    'High, Low and Close',
     'High-Close',
     'High-Low',
     'Higher',
     'Hour',
     'I want to reapply',
     'IDK',
+    'If the [_1]exit spot[_2] is equal to either the [_1]Low barrier[_2] or the [_1]High barrier[_2], you don\'t win the payout.',
+    'If the [_1]exit spot[_2] is equal to the [_1]barrier[_2] or the <stronm g>new barrier (if a reset occurs)</stronmg>, you don\'t win the payout.',
+    'If the [_1]exit spot[_2] is equal to the [_1]barrier[_2], you don\'t win the payout.',
+    'If the [_1]last tick[_2] is equal to the average of the ticks, you don\'t win the payout.',
+    'If you select "Allow equals", you win the payout if exit spot is higher than or equal to entry spot for "Rise". Similarly, you win the payout if exit spot is lower than or equal to entry spot for "Fall".',
+    'If you select "Asian Fall", you will win the payout if the [_1]last tick[_2] is [_1]lower[_2] than the [_1]average[_2] of the ticks.',
+    'If you select "Asian Rise", you will win the payout if the [_1]last tick[_2] is [_1]higher[_2] than the [_1]average[_2] of the ticks.',
+    'If you select "Differs", you will win the payout if the [_1]last digit[_2] of the last tick is [_1]not the same[_2] as your [_1]prediction[_2].',
+    'If you select "Does Not Touch", you win the payout if the market never touches the [_1]barrier[_2] at any time during the [_1]contract period[_2].',
+    'If you select "Ends Between", you win the payout if the [_1]exit spot[_2] is strictly higher than the [_1]Low barrier[_2] AND strictly lower than the [_1]High barrier[_2].',
+    'If you select "Ends Outside", you win the payout if the [_1]exit spot[_2] is EITHER strictly higher than the [_1]High barrier[_2], OR strictly lower than the [_1]Low barrier[_2].',
+    'If you select "Even", you will win the payout if the [_1]last digit[_2] of the last tick is an [_1]even number (i.e., 2, 4, 6, 8, or 0).[_2]',
+    'If you select "Fall", you win the payout if the [_1]exit spot[_2] is strictly lower than the [_1]entry spot[_2].',
+    'If you select "Falls", you win the payout if the [_1]exit spot[_2] is strictly lower than the [_1]entry spot[_2].',
+    'If you select "Goes Outside", you win the payout if the market touches either the [_1]High barrier[_2] or the [_1]Low barrier[_2] at any time during the [_1]contract period[_2].',
+    'If you select "Higher", you win the payout if the [_1]exit spot[_2] is strictly higher than the [_1]barrier[_2].',
+    'If you select "Lower", you win the payout if the [_1]exit spot[_2] is strictly lower than the [_1]barrier[_2].',
+    'If you select "Matches", you will win the payout if the [_1]last digit[_2] of the last tick is the [_1]same[_2] as your [_1]prediction.[_2]',
+    'If you select "Odd", you will win the payout if the [_1]last digit[_2] of the last tick is an [_1]odd number (i.e., 1, 3, 5, 7, or 9).[_2]',
+    'If you select "Over", you will win the payout if the [_1]last digit[_2] of the last tick is [_1]greater than your prediction.[_2]',
+    'If you select "Reset-Call", you win the payout if the exit spot is strictly higher than either the entry spot or the spot at reset time.',
+    'If you select "Reset-Put", you win the payout if the exit spot is strictly lower than either the entry spot or the spot at reset time.',
+    'If you select "Rise", you win the payout if the [_1]exit spot[_2] is strictly higher than the [_1]entry spot[_2].',
+    'If you select "Rises", you win the payout if the [_1]exit spot[_2] is strictly higher than the [_1]entry spot[_2].',
+    'If you select "Stays Between", you win the payout if the market stays between (does not touch) either the [_1]High barrier[_2] or the [_1]Low barrier[_2] at any time during the [_1]contract period[_2].',
+    'If you select "Touches", you win the payout if the market touches the [_1]barrier[_2] at any time during the [_1]contract period[_2].',
+    'If you select "Under", you will win the payout if the [_1]last digit[_2] of the last tick is [_1]less than your prediction.[_2]',
+    'If you select "falls", you win the payout if the market price is lower than the [_1]entry spot[_2].',
+    'If you select "falls", you win the payout if the market price is lower than the entry spot.',
+    'If you select "rises", you win the payout if the market price is higher than the [_1]entry spot[_2].',
+    'If you select "rises", you win the payout if the market price is higher than the entry spot.',
+    'If you select [_1]"High Tick"[_2], you win the payout if the selected tick is the [_1]highest among the next five ticks[_2].',
+    'If you select [_1]"Low Tick"[_2], you win the payout if the selected tick is the [_1]lowest among the next five ticks[_2].',
+    'If you select [_1]"Only Downs"[_2], you win the payout if consecutive ticks fall successively after the [_1]entry spot[_2].[_3]No payout if any tick rises or is equal to any of the previous ticks.',
+    'If you select [_1]"Only Ups"[_2], you win the payout if consecutive ticks rise successively after the [_1]entry spot[_2].[_3]No payout if any tick falls or is equal to any of the previous ticks.',
+    'If you select a <strong>start time</strong> in the future, the <strong>start time</strong> is that which is selected and the <strong>entry spot</strong> is the price in effect at that time.',
+    'If you select a <strong>start time</strong> of "Now", the <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).',
+    'If you select a specific <strong>end time</strong>, the <strong>end time</strong> is the selected time.',
     'In the EU, financial binary options are only available to professional investors.',
     'Indicates required field',
     'Indicative',
@@ -312,6 +359,24 @@ module.exports = [
     'Tether TRC20',
     'Th',
     'Thank you, we\'ll get back to you within 24 hours',
+    'The <strong>contract period</strong> is the period between the <strong>next tick</strong> after the <strong>start time</strong> and the <strong>end time</strong>.',
+    'The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).',
+    'The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong>.',
+    'The <strong>entry spot</strong> is the first tick after the contract is processed by our servers.',
+    'The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>.',
+    'The <strong>start time</strong> is when the contract is processed by our servers and the <strong>entry spot</strong> is the <strong>next tick</strong> thereafter.',
+    'The <strong>start time</strong> is when the contract is processed by our servers.',
+    'The Average',
+    'The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.',
+    'The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].',
+    'The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].',
+    'The [_1]exit spot[_2] is the last tick when the contract ends. Contract ends when all ticks rise or fall successively, or when a single tick breaks the predicted pattern.',
+    'The [_1]high[_2] is the highest point ever reached by the market during the contract period.',
+    'The [_1]low[_2] is the lowest point ever reached by the market during the contract period.',
+    'The [_1]start time[_2] begins when the contract is processed by our servers.',
+    'The [_1]start time[_2] is when the contract has been processed by our servers and the [_1]entry spot[_2] is the [_1]next tick[_2] thereafter.',
+    'The average is the average of the ticks, including the entry spot and the last tick.',
+    'The entry spot is the first tick after the contract is processed by our servers.',
     'The reset time is [_1]',
     'The server <a href="[_1]">endpoint</a> is: [_2]',
     'The two passwords that you entered do not match.',
@@ -375,6 +440,7 @@ module.exports = [
     'Wednesday',
     'We’ll update your limits. Click [_1]Agree and accept[_2] to acknowledge that you are fully responsible for your actions, and we are not liable for any addiction or loss.',
     'When you click "OK" you will be excluded from trading on the site until the selected date.',
+    'Winning the contract',
     'Withdrawal and trading limits',
     'Withdrawal disabled',
     'Withdrawals have been disabled on your account. Please check your email for more details.',
@@ -385,6 +451,8 @@ module.exports = [
     'You have sold this contract at [_1] [_2]',
     'You should enter [_1] characters.',
     'You will be redirected to a third-party website which is not owned by Binary.com.',
+    'You win the payout if the market price does not end in the digit you have selected.',
+    'You win the payout if the market price ends in the digit you have selected.',
     'Your account is restricted. Kindly [_1]contact customer support[_2] for assistance.',
     'Your application to be treated as a professional client is being processed.',
     'Your changes have been updated.',
@@ -399,6 +467,16 @@ module.exports = [
     '[_1] and [_2] cannot be the same.',
     '[_1] days [_2] hours [_3] minutes',
     '[_1] has been credited into your Virtual Account: [_2].',
+    '[_1]Note[_2]: Asian contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.',
+    '[_1]Note[_2]: Digit contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.',
+    '[_1]Note[_2]: Ends Between/Ends Outside contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.',
+    '[_1]Note[_2]: Even/Odd contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.',
+    '[_1]Note[_2]: High Tick/Low Tick contracts have a strict duration of five ticks.',
+    '[_1]Note[_2]: Higher/Lower contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.',
+    '[_1]Note[_2]: Over/Under contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.',
+    '[_1]Note[_2]: Rise/Fall contracts will be refunded if:',
+    '[_1]Note[_2]: Stays Between/Goes Outside Contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.',
+    '[_1]Note[_2]: Touch/No Touch contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.',
     'account',
     'accounts',
     'day',

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

@@ -1,15 +1,15 @@
 /* eslint-disable no-console */
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import parse from 'html-react-parser';
 import { SegmentedControlSingleChoice } from '@deriv-com/quill-ui';
-import { contractExplanationData } from './explanation_data';
+import { contractExplanationData } from './explanation_data.js';
 import { getElementById } from '../../../_common/common_functions';
 import WebtraderChart from '../trade/charts/webtrader_chart';
 import { useContractChange } from '../../hooks/events';
 import Defaults, { PARAM_NAMES } from '../trade/defaults';
 import Language from '../../../_common/language';
 import Url from '../../../_common/url';
+import { localize } from '../../../_common/localize.js';
 
 const Explanation = () => {
     const language = Language.get();
@@ -82,9 +82,9 @@ const Explanation = () => {
             <div id='explanation_winning'>
                 {Object.keys(contractExplanationData.winning).map((key) => (
                     <div key={key} id={`winning_${key}`} className={form_name !== key && 'invisible'}>
-                        <h3>{parse(contractExplanationData.winning[key].title)}</h3>
+                        <h3>{localize(contractExplanationData.winning[key].title)}</h3>
                         {contractExplanationData.winning[key].content.map((data, idx) => (
-                            <p key={idx}>{parse(data)}</p>
+                            <p key={idx}>{localize(data)}</p>
                         ))}
                     </div>
                 ))}
@@ -109,15 +109,15 @@ const Explanation = () => {
             <div id='explanation_explain' className='gr-child'>
                 {Object.keys(contractExplanationData.explain).map((key) => (
                     <div key={key} id={`explain_${key}`} className={form_name !== key && 'invisible'}>
-                        <h3>{parse(contractExplanationData.explain[key].title)}</h3>
+                        <h3>{localize(contractExplanationData.explain[key].title)}</h3>
                         {contractExplanationData.explain[key].content.map((data, idx) => (
-                            <p key={idx}>{parse(data)}</p>
+                            <p key={idx}>{localize(data)}</p>
                         ))}
                         {contractExplanationData.explain[key].title_secondary &&
-                            <h3 className='secondary-title'>{parse(contractExplanationData.explain[key].title_secondary)}</h3>}
+                            <h3 className='secondary-title'>{localize(contractExplanationData.explain[key].title_secondary)}</h3>}
                         {contractExplanationData.explain[key].content_secondary &&
                             contractExplanationData.explain[key].content_secondary.map((data, idx) => (
-                                <p key={idx}>{parse(data)}</p>
+                                <p key={idx}>{localize(data)}</p>
                             ))}
 
                     </div>
@@ -129,7 +129,7 @@ const Explanation = () => {
             {Object.keys(contractExplanationData.note).map((key) => (
                 <div key={key} id='explanation_note' className={form_name !== key && 'invisible gr-padding-20 gr-child' }>
                     <p className='hint'>{contractExplanationData.note[key].content.map((data, idx) => (
-                        <p key={idx}>{parse(data)}</p>
+                        <p key={idx}>{localize(data)}</p>
                     ))}
 
                     </p>