Merge pull request #262 from farabi-deriv/farabi/feq-2693/fix-localis…

…ation-with-account-switcher-tabs Farabi/feq-2693/fix-localisation-with-account-switcher-tabs
deriv-com · Oct 15, 2024 · ed00699 · ed00699
2 parents 78ed22d + 3afa7f5
commit ed00699
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/AppLayout/AccountSwitcher/index.tsx b/src/components/AppLayout/AccountSwitcher/index.tsx
@@ -27,13 +27,18 @@ type AccountSwitcherProps = {
     buttonClassName?: string;
     children?: ReactElement<TabTitleProps>[];
     isDisabled?: boolean;
+    tabsLabels?: {
+        demo: string;
+        real: string;
+    };
 };
 
 export const AccountSwitcher = ({
     children,
     activeAccount,
     isDisabled = false,
     buttonClassName,
+    tabsLabels,
 }: AccountSwitcherProps) => {
     const [isOpen, setIsOpen] = useState(false);
     const ref = useRef(null);
@@ -87,8 +92,8 @@ export const AccountSwitcher = ({
                                 <Tabs
                                     activeTab={
                                         activeAccount.isVirtual
-                                            ? "Demo"
-                                            : "Real"
+                                            ? tabsLabels?.demo ?? "Demo"
+                                            : tabsLabels?.real ?? "Real"
                                     }
                                     variant="secondary"
                                 >
@@ -110,8 +115,8 @@ export const AccountSwitcher = ({
                                 <Tabs
                                     activeTab={
                                         activeAccount.isVirtual
-                                            ? "Demo"
-                                            : "Real"
+                                            ? tabsLabels?.demo ?? "Demo"
+                                            : tabsLabels?.real ?? "Real"
                                     }
                                     variant="secondary"
                                 >

diff --git a/stories/AccountSwitcher.stories.tsx b/stories/AccountSwitcher.stories.tsx
@@ -94,8 +94,12 @@ export const Default: Story = {
             isActive: false,
         },
         children: [], // Add an empty array for the children property
+        tabsLabels: {
+            demo: "Demo",
+            real: "Real",
+        },
     },
-    render: () => {
+    render: (args) => {
         return (
             <div style={{ width: "800px", height: "500px" }}>
                 <Header>
@@ -116,8 +120,9 @@ export const Default: Story = {
                                     isActive: true,
                                 }
                             }
+                            tabsLabels={args.tabsLabels}
                         >
-                            <AccountSwitcher.Tab title="Real">
+                            <AccountSwitcher.Tab title={args.tabsLabels?.real ?? "Real"}>
                                 <AccountSwitcher.AccountsPanel
                                     isOpen
                                     title="EU Accounts"
@@ -172,7 +177,7 @@ export const Default: Story = {
                                     this is a footer
                                 </AccountSwitcher.Footer>
                             </AccountSwitcher.Tab>
-                            <AccountSwitcher.Tab title="Demo">
+                            <AccountSwitcher.Tab title={args.tabsLabels?.demo ?? "Demo"}>
                                 test 2
                             </AccountSwitcher.Tab>
                         </AccountSwitcher>