[TRAH] Sergei / TRAH - 3699 / 'Compare CFDs accounts' page does not h…

…ave side arrow options for navigation for Arabic language (#15670) * feat: add isRtl for carousel in cfd compare accounts * feat: implement review suggestions
deriv-com · Jun 25, 2024 · 23354ea · 23354ea
1 parent 22b764d
commit 23354ea
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
@@ -5,6 +5,7 @@ import { Text, Icon, PageOverlay, DesktopWrapper, MobileWrapper, CFDCompareAccou
 import { routes } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
+import { useIsRtl } from '@deriv/hooks';
 import CFDCompareAccountsCard from './cfd-compare-accounts-card';
 import {
     getSortedCFDAvailableAccounts,
@@ -18,6 +19,7 @@ import {
 import { REGION } from '../../Helpers/cfd-config';
 
 const CompareCFDs = observer(() => {
+    const is_rtl = useIsRtl();
     const history = useHistory();
     const store = useStore();
     const { client, traders_hub } = store;
@@ -106,7 +108,7 @@ const CompareCFDs = observer(() => {
                         })}
                     >
                         <div className='card-list'>
-                            <CFDCompareAccountsCarousel>
+                            <CFDCompareAccountsCarousel isRtl={is_rtl}>
                                 {all_cfd_available_accounts.map(item => (
                                     <CFDCompareAccountsCard
                                         trading_platforms={item}
@@ -148,7 +150,7 @@ const CompareCFDs = observer(() => {
                             'compare-cfd-account-container__card-count--mobile': card_count < 2,
                         })}
                     >
-                        <CFDCompareAccountsCarousel>
+                        <CFDCompareAccountsCarousel isRtl={is_rtl}>
                             {all_cfd_available_accounts.map(item => (
                                 <CFDCompareAccountsCard
                                     trading_platforms={item}

diff --git a/...nts/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel-button.tsx b/...nts/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel-button.tsx
@@ -5,11 +5,15 @@ import Icon from '../icon';
 type TPrevNextButtonProps = {
     enabled: boolean;
     onClick: () => void;
-    isNext: boolean;
+    isNext?: boolean;
+    isRtl?: boolean;
 };
 
 const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => {
-    const { enabled, onClick, isNext } = props;
+    const { enabled, onClick, isNext = false, isRtl = false } = props;
+
+    const nextButtonName = isRtl ? 'IcChevronLeftBold' : 'IcChevronRightBold';
+    const prevButtonName = isRtl ? 'IcChevronRightBold' : 'IcChevronLeftBold';
 
     return (
         <button
@@ -21,7 +25,7 @@ const CFDCompareAccountsCarouselButton = (props: TPrevNextButtonProps) => {
             disabled={!enabled}
         >
             <Icon
-                icon={isNext ? 'IcChevronRightBold' : 'IcChevronLeftBold'}
+                icon={isNext ? nextButtonName : prevButtonName}
                 className='cfd-compare-accounts-carousel__button__svg'
             />
         </button>

diff --git a/...components/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel.tsx b/...components/src/components/cfd-compare-accounts-carousel/cfd-compare-accounts-carousel.tsx
@@ -4,12 +4,14 @@ import CFDCompareAccountsCarouselButton from './cfd-compare-accounts-carousel-bu
 
 type TCFDCompareAccountsCarousel = {
     children: React.ReactNode;
+    isRtl?: boolean;
 };
 
-const CFDCompareAccountsCarousel = (props: TCFDCompareAccountsCarousel) => {
+const CFDCompareAccountsCarousel = ({ children, isRtl = false }: TCFDCompareAccountsCarousel) => {
     const options: EmblaOptionsType = {
         align: 0,
         containScroll: 'trimSnaps',
+        direction: isRtl ? 'rtl' : 'ltr',
     };
     const [emblaRef, emblaApi] = useEmblaCarousel(options);
     const [prev_btn_enabled, setPrevBtnEnabled] = React.useState(false);
@@ -34,10 +36,10 @@ const CFDCompareAccountsCarousel = (props: TCFDCompareAccountsCarousel) => {
     return (
         <div className='cfd-compare-accounts-carousel'>
             <div className='cfd-compare-accounts-carousel__viewport' ref={emblaRef}>
-                <div className='cfd-compare-accounts-carousel__container'>{props.children}</div>
+                <div className='cfd-compare-accounts-carousel__container'>{children}</div>
             </div>
-            <CFDCompareAccountsCarouselButton onClick={scrollPrev} isNext={false} enabled={prev_btn_enabled} />
-            <CFDCompareAccountsCarouselButton onClick={scrollNext} isNext={true} enabled={next_btn_enabled} />
+            <CFDCompareAccountsCarouselButton onClick={scrollPrev} enabled={prev_btn_enabled} isRtl={isRtl} />
+            <CFDCompareAccountsCarouselButton onClick={scrollNext} isNext enabled={next_btn_enabled} isRtl={isRtl} />
         </div>
     );
 };