[WALL] Aizad/WALL-4655/Translating the migration video to Arabic (der…

…iv-com#16570) * chore: added logic to show the correct video based on language selected * chore: updated current language from useTranslations to commmon store * chore: update video-player to support rtl * chore: added arabic video * chore: added key for seamless translations * chore: updated values within video-player component
heorhi-deriv · Sep 3, 2024 · de7d139 · de7d139
1 parent 7356879
commit de7d139
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 10 deletions.
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
@@ -19,9 +19,10 @@ const trackAnalyticsEvent = (
 };
 
 const WalletsBannerUnsuccessful = observer(() => {
-    const { traders_hub } = useStore();
+    const { traders_hub, common } = useStore();
     const { isDesktop, isMobile, isTablet } = useDevice();
     const { is_demo, toggleWalletsUpgrade } = traders_hub;
+    const { current_language } = common;
     const account_mode = is_demo ? 'demo' : 'real';
     let titleFontSize, descriptionFontSize, iconHeight, iconWidth;
 
@@ -52,7 +53,10 @@ const WalletsBannerUnsuccessful = observer(() => {
     };
 
     return (
-        <div className='wallets-banner wallets-banner-unsuccessful'>
+        <div
+            className='wallets-banner wallets-banner-unsuccessful'
+            key={`wallets-banner__${current_language}--unsuccessful`}
+        >
             <div className='wallets-banner__content wallets-banner-unsuccessful__content'>
                 <Localize
                     i18n_default_text='<0>Setup unsuccessful</0>'

diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
@@ -23,9 +23,10 @@ type TProps = {
 };
 
 const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
-    const { traders_hub } = useStore();
+    const { traders_hub, common } = useStore();
     const { isDesktop, isMobile, isTablet } = useDevice();
     const { is_demo, toggleWalletsUpgrade } = traders_hub;
+    const { current_language } = common;
     const account_mode = is_demo ? 'demo' : 'real';
     let titleFontSize, iconHeight, iconWidth;
 
@@ -53,7 +54,7 @@ const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
     };
 
     return (
-        <div className='wallets-banner wallets-banner-upgrade'>
+        <div className='wallets-banner wallets-banner-upgrade' key={`wallets-banner__${current_language}--upgrade`}>
             <div className='wallets-banner__content wallets-banner-upgrade__content'>
                 <div>
                     <Localize

diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
@@ -6,8 +6,9 @@ import { Localize } from '@deriv/translations';
 import { useDevice } from '@deriv-com/ui';
 
 const WalletsBannerUpgrading = observer(() => {
-    const { traders_hub } = useStore();
+    const { traders_hub, common } = useStore();
     const { is_demo } = traders_hub;
+    const { current_language } = common;
     const { isDesktop, isMobile, isTablet } = useDevice();
     let titleFontSize, descriptionFontSize, iconHeight, iconWidth;
 
@@ -39,7 +40,7 @@ const WalletsBannerUpgrading = observer(() => {
     }, [is_demo]);
 
     return (
-        <div className='wallets-banner wallets-banner-upgrading'>
+        <div className='wallets-banner wallets-banner-upgrading' key={`wallets-banner__${current_language}--upgrading`}>
             <div className='wallets-banner__content wallets-banner-upgrading__content'>
                 <div className='wallets-banner-upgrading__loading' data-testid='dt_wallets_loading_dots'>
                     <span className='wallets-banner-upgrading__dot' />

diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx
@@ -5,6 +5,10 @@ import { Button, Text, Modal, VideoPlayer } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import { useWalletMigration } from '@deriv/hooks';
+import {
+    getWalletMigrationVideoTranslations,
+    WALLET_MIGRATION_VIDEO_TRANSLATIONS,
+} from 'Constants/wallet-migration-video-translations';
 import './wallets-upgrade-modal.scss';
 
 const trackAnalyticsEvent = (
@@ -21,7 +25,8 @@ const trackAnalyticsEvent = (
 };
 
 const WalletsUpgradeModal = observer(() => {
-    const { traders_hub, ui } = useStore();
+    const { traders_hub, ui, common } = useStore();
+    const { current_language } = common;
     const { is_demo, is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
     const { is_desktop, is_mobile } = ui;
     const { is_eligible, startMigration } = useWalletMigration();
@@ -30,6 +35,10 @@ const WalletsUpgradeModal = observer(() => {
     const [modalOpen, setModalOpen] = React.useState(!isWalletMigrationModalClosed);
     const is_open = (is_eligible && modalOpen) || is_real_wallets_upgrade_on;
 
+    const video_src = getWalletMigrationVideoTranslations(
+        current_language as keyof typeof WALLET_MIGRATION_VIDEO_TRANSLATIONS
+    );
+
     React.useEffect(() => {
         if (is_open) {
             trackAnalyticsEvent('open', account_mode);
@@ -68,7 +77,7 @@ const WalletsUpgradeModal = observer(() => {
                             height={is_desktop ? '311px' : '157px'}
                             is_mobile={is_mobile}
                             muted
-                            src='25df7df0d0af48090b086cd6f103d8f3'
+                            src={video_src}
                         />
                     </div>
                     <div className='wallets-upgrade-modal__text'>

diff --git a/packages/appstore/src/constants/wallet-migration-video-translations.ts b/packages/appstore/src/constants/wallet-migration-video-translations.ts
@@ -0,0 +1,12 @@
+export const WALLET_MIGRATION_VIDEO_TRANSLATIONS = {
+    AR: 'e52c6a3b483e287e39e983791f50e592',
+    EN: '25df7df0d0af48090b086cd6f103d8f3',
+    // TODO: Add translations for other languages
+} as const;
+
+export const getWalletMigrationVideoTranslations = (language_key: keyof typeof WALLET_MIGRATION_VIDEO_TRANSLATIONS) => {
+    if (language_key in WALLET_MIGRATION_VIDEO_TRANSLATIONS) {
+        return WALLET_MIGRATION_VIDEO_TRANSLATIONS[language_key];
+    }
+    return WALLET_MIGRATION_VIDEO_TRANSLATIONS.EN;
+};
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -75,6 +75,7 @@
         "@cloudflare/stream-react": "^1.9.1",
         "@contentpass/zxcvbn": "^4.4.3",
         "@deriv-com/ui": "1.29.10",
+        "@deriv/hooks": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/components/src/components/video-player/video-player.tsx b/packages/components/src/components/video-player/video-player.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Stream, StreamPlayerApi } from '@cloudflare/stream-react';
+import { useIsRtl } from '@deriv/hooks';
 import { isSafariBrowser, mobileOSDetect } from '@deriv/shared';
 import debounce from 'lodash.debounce';
 import VideoOverlay from './video-overlay';
@@ -16,6 +17,8 @@ type TVideoPlayerProps = {
 };
 
 const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false, src }: TVideoPlayerProps) => {
+    const is_rtl = useIsRtl();
+
     const should_autoplay =
         (!isSafariBrowser() || (is_mobile && mobileOSDetect() !== 'iOS' && mobileOSDetect() !== 'unknown')) ?? true;
 
@@ -51,6 +54,7 @@ const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false,
             | TouchEvent
             | MouseEvent
     ) => {
+        const full_width = 100;
         const progress_bar = progress_bar_ref.current;
         const client_X =
             e.type === 'mousemove' || e.type === 'click'
@@ -60,8 +64,9 @@ const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false,
         let new_width =
             ((client_X - shift_X - (progress_bar?.getBoundingClientRect().left ?? 0)) /
                 (progress_bar?.getBoundingClientRect().width ?? 0)) *
-            100;
-        if (new_width >= 100) new_width = 100;
+            full_width;
+        if (is_rtl) new_width = full_width - new_width;
+        if (new_width >= full_width) new_width = full_width;
         if (new_width <= 0) new_width = 0;
         return parseFloat(new_width.toFixed(3));
     };