yashim/fix: onboarding carousel translations (deriv-com#7758)

sanjam-deriv · Mar 13, 2023 · a457614 · a457614
1 parent 680868c
commit a457614
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/appstore/src/constants/tour-steps-config-new.tsx b/packages/appstore/src/constants/tour-steps-config-new.tsx
@@ -5,7 +5,7 @@ import { localize, Localize } from '@deriv/translations';
 import 'Components/toggle-account-type/toggle-account-type.scss';
 import { isMobile } from '@deriv/shared';
 
-export const tour_step_config: Step[] = [
+export const getTourStepConfig = (): Step[] => [
     {
         title: (
             <React.Fragment>
@@ -63,7 +63,7 @@ export const tour_step_config: Step[] = [
     },
 ];
 
-export const high_risk_tour_step_config: Step[] = [
+export const getTourStepConfigHighRisk = (): Step[] => [
     {
         title: (
             <React.Fragment>
@@ -140,19 +140,18 @@ export const tour_styles_dark_mode: Styles = {
         fontWeight: 'bold',
     },
 };
-
-export const tour_step_locale: Locale = {
-    back: <SpanButton has_effect text={localize('Back')} secondary medium />,
+export const getTourStepLocale = (): Locale => ({
+    back: <Button has_effect text={localize('Back')} secondary medium />,
     close: localize('Close'),
     last: localize('OK'),
     next: localize('Next'),
     skip: localize('Skip'),
-};
+});
 
-export const high_risk_tour_step_locale: Locale = {
-    back: <SpanButton has_effect text={localize('Back')} secondary medium />,
+export const getHighRiskTourStepLocale = (): Locale => ({
+    back: <Button has_effect text={localize('Back')} secondary medium />,
     close: localize('Close'),
     last: localize('OK'),
     next: localize('Next'),
     skip: localize('Skip'),
-};
+});
diff --git a/packages/appstore/src/modules/tour-guide/tour-guide.tsx b/packages/appstore/src/modules/tour-guide/tour-guide.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Localize, localize } from '@deriv/translations';
 import {
-    tour_step_config,
+    getTourStepConfig,
     tour_styles,
-    tour_step_locale,
+    getTourStepLocale,
     tour_styles_dark_mode,
-    high_risk_tour_step_config,
-    high_risk_tour_step_locale,
+    getTourStepConfigHighRisk,
+    getHighRiskTourStepLocale,
 } from 'Constants/tour-steps-config-new';
 import { useStores } from 'Stores/index';
 import { routes, ContentFlag } from '@deriv/shared';
@@ -30,6 +30,8 @@ const TourGuide = () => {
 
     const history = useHistory();
     const [joyride_index, setJoyrideIndex] = React.useState<number>(0);
+    const tour_step_locale = getTourStepLocale();
+    const high_risk_tour_step_locale = getHighRiskTourStepLocale();
 
     tour_step_locale.last = (
         <div
@@ -68,7 +70,7 @@ const TourGuide = () => {
         );
     }
 
-    if (tour_step_config.length === joyride_index + 1) {
+    if (getTourStepConfig().length === joyride_index + 1) {
         tour_step_locale.back = (
             <SpanButton
                 has_effect
@@ -105,7 +107,7 @@ const TourGuide = () => {
             disableScrolling
             hideCloseButton
             disableCloseOnEsc
-            steps={low_risk ? tour_step_config : high_risk_tour_step_config}
+            steps={low_risk ? getTourStepConfig() : getTourStepConfigHighRisk()}
             styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
             locale={low_risk ? tour_step_locale : high_risk_tour_step_locale}
             floaterProps={{