fix: merge conflict

.github/workflows/build_docker_image.yml

@@ -1,5 +1,8 @@
 name: Build Docker image and push to dockerhub
 on:
+  workflow_run:
+    workflows: ["Deriv App Staging Workflow"]
+    types: [completed]
   workflow_dispatch:
     inputs:
         docker_image_tag_name:
@@ -11,7 +14,7 @@ jobs:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
     env: 
-      tag_name: ${{ github.event.inputs.docker_image_tag_name }}
+      tag_name: ${{ github.event.inputs.docker_image_tag_name || github.ref_name }}
     permissions:
       packages: write
       contents: read
@@ -22,6 +25,12 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v4
 
+      - name: Convert branch name to lowercase
+        id: branch_name
+        run: |
+          branch_name="$tag_name"
+          echo "image_name=${branch_name,,}" >> "$GITHUB_OUTPUT"
+
       - name: Log in to Docker Hub
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
         with:
@@ -54,10 +63,16 @@ jobs:
           TRUSTPILOT_API_KEY: ${{ secrets.TRUSTPILOT_API_KEY }}
 
       - name: Run Build Docker
-        run: docker build -t ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name . --platform=linux/amd64
+        env: 
+          IMAGE_NAME: ${{ steps.branch_name.outputs.image_name }} 
+        run: docker build -t ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$IMAGE_NAME . --platform=linux/amd64
 
       - name: Run Tag Docker
-        run: docker tag ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name
+        env: 
+          IMAGE_NAME: ${{ steps.branch_name.outputs.image_name }} 
+        run: docker tag ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$IMAGE_NAME ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$IMAGE_NAME
 
       - name: Run Push Docker
-        run: docker push ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name
+        env: 
+          IMAGE_NAME: ${{ steps.branch_name.outputs.image_name }} 
+        run: docker push ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$IMAGE_NAME

.gitignore

@@ -24,12 +24,13 @@ packages/appstore/lib/
 packages/appstore/.out
 packages/wallets/src/translations/messages.json
 .env
-nx-cloud.env
+.env.*
+*.env
 test-results/
 playwright-report/
 playwright/.cache/
 .nx
 packages/*/stats.json
 packages/*/report.json
 packages/*/analyzed.html
-packages/*/treemap.html
+packages/*/treemap.html

__mocks__/translation.mock.js

@@ -1,35 +1,35 @@
 import React from 'react';
 
+const replaceValue = (text, values) => {
+    const valueMatch = text.match(/{{(\w+)}}/);
+    if (valueMatch) {
+        const valueKey = valueMatch[1];
+        // If the value is an empty string, return an empty fragment to render nothing
+        if (values[valueKey] === '') {
+            return '';
+        }
+        return values[valueKey] || text;
+    }
+    return text;
+};
+
 const Localize = ({ i18n_default_text, components = [], values = {} }) => {
-    // Split text into parts, extracting placeholders for components and values
+    // Split text into parts, extracting placeholders for components
     const parts = i18n_default_text.split(/(<\d+>.*?<\/\d+>|{{\w+}})/g);
 
-    const replaceValues = text => {
-        return text.replace(/{{(\w+)}}/g, (match, key) => values[key] || match);
-    };
-
     return (
         <>
             {parts.map((part, index) => {
-                // Replace component placeholders with actual components
+                // Handle component placeholders
                 const componentMatch = part.match(/<(\d+)>(.*?)<\/\1>/);
-
                 if (componentMatch) {
                     const componentIndex = parseInt(componentMatch[1]);
-
-                    // Replace values wrapped in components with actual values
-                    const content = replaceValues(componentMatch[2]);
+                    const content = replaceValue(componentMatch[2], values);
                     const Component = components[componentIndex];
                     return Component ? React.cloneElement(Component, { key: index, children: content }) : content;
                 }
-
-                // Replace value placeholders with actual values
-                const valueMatch = part.match(/{{(\w+)}}/);
-                if (valueMatch) {
-                    const valueKey = valueMatch[1];
-                    return values[valueKey] || part;
-                }
-                return part;
+                // Replace placeholders with actual values
+                return replaceValue(part, values);
             })}
         </>
     );

packages/account/package.json

@@ -31,11 +31,11 @@
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
         "@deriv-com/analytics": "1.11.0",
-        "@deriv-com/translations": "1.3.4",
+        "@deriv-com/translations": "1.3.5",
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.29.9",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "1.13.33",
+        "@deriv-com/quill-ui": "1.13.42",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",

packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx

@@ -36,7 +36,7 @@ describe('<AccountLimitsOverlay/>', () => {
     it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
         render(<Component />);
 
-        expect(screen.getByText('Help Centre').hasAttribute('href'));
+        expect(screen.getByText(/Help Centre/).hasAttribute('href'));
     });
     it('should show Done Button', () => {
         render(<Component />);

packages/account/src/Components/account-limits/__tests__/account-limits-turnover-limit-row.spec.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
-import { formatMoney } from '@deriv/shared';
 import AccountLimitsTurnoverLimitRow from '../account-limits-turnover-limit-row';
 import AccountLimitsContext from '../account-limits-context';
+import { FormatUtils } from '@deriv-com/utils';
 
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    formatMoney: jest.fn(),
+jest.mock('@deriv-com/utils', () => ({
+    ...jest.requireActual('@deriv-com/utils'),
+    FormatUtils: {
+        formatMoney: jest.fn(),
+    },
 }));
 const AccountLimitsTurnoverLimitRowComponent = (props: React.ComponentProps<typeof AccountLimitsTurnoverLimitRow>) => (
     <AccountLimitsContext.Provider value={{ currency: 'AUD', overlay_ref: document.createElement('div') }}>
@@ -47,6 +49,6 @@ describe('<AccountLimitsTurnoverLimitRow/>', () => {
             container: document.body.appendChild(document.createElement('tbody')),
         });
 
-        expect(formatMoney).toHaveBeenCalledWith('AUD', 100000, true);
+        expect(FormatUtils.formatMoney).toHaveBeenCalledWith(100000, { currency: 'AUD' });
     });
 });

packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
-import { formatMoney } from '@deriv/shared';
 import { useDevice } from '@deriv-com/ui';
 import AccountLimits from '../account-limits';
 import { BrowserRouter } from 'react-router-dom';
 import { StoreProvider, mockStore } from '@deriv/stores';
+import { FormatUtils } from '@deriv-com/utils';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -25,9 +25,11 @@ jest.mock('@deriv-com/ui', () => ({
     useDevice: jest.fn(() => ({ isDesktop: true })),
 }));
 
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    formatMoney: jest.fn(),
+jest.mock('@deriv-com/utils', () => ({
+    ...jest.requireActual('@deriv-com/utils'),
+    FormatUtils: {
+        formatMoney: jest.fn(),
+    },
 }));
 
 jest.mock('Components/demo-message', () => jest.fn(() => 'mockedDemoMessage'));
@@ -288,7 +290,7 @@ describe('<AccountLimits/>', () => {
             </StoreProvider>
         );
         const { account_balance } = store.client.account_limits;
-        expect(formatMoney).toHaveBeenCalledWith(store.client.currency, account_balance, true);
+        expect(FormatUtils.formatMoney).toHaveBeenCalledWith(account_balance, { currency: store.client.currency });
     });
 
     it('should render Trading limits table and its maximum daily turnover contents properly', () => {

packages/account/src/Components/account-limits/account-limits-article.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { Localize, localize } from '@deriv/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import AccountArticle from '../article';
 
 const getDescription = () => [
     <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,
 ];
 
-const AccountLimitsArticle = () => (
-    <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />
-);
+const AccountLimitsArticle = () => {
+    const { localize } = useTranslations();
+    return <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />;
+};
 
 export default AccountLimitsArticle;

packages/account/src/Components/account-limits/account-limits-context.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createContext } from 'react';
 
 export type TAccountLimitsContext = {
     currency: string;
@@ -7,7 +7,7 @@ export type TAccountLimitsContext = {
     toggleOverlay?: () => void;
 };
 
-const AccountLimitsContext = React.createContext<TAccountLimitsContext>({
+const AccountLimitsContext = createContext<TAccountLimitsContext>({
     currency: '',
     overlay_ref: document.createElement('div'),
 });

packages/account/src/Components/account-limits/account-limits-extra-info.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Popover, Text } from '@deriv/components';
 import { useDevice } from '@deriv-com/ui';
 

packages/account/src/Components/account-limits/account-limits-footer.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { Localize } from '@deriv-com/translations';
 import AccountLimitsContext, { TAccountLimitsContext } from './account-limits-context';
 
 const AccountLimitsFooterPortal = () => {
-    const { footer_ref, toggleOverlay } = React.useContext<TAccountLimitsContext>(AccountLimitsContext);
+    const { footer_ref, toggleOverlay } = useContext<TAccountLimitsContext>(AccountLimitsContext);
 
     return createPortal(
         <a className='link link--prominent' onClick={toggleOverlay} data-testid='dt_footer_text'>

packages/account/src/Components/account-limits/account-limits-overlay.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import { useContext } from 'react';
 import { Popup, StaticUrl } from '@deriv/components';
-import { Localize, localize } from '@deriv/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import AccountLimitsContext from './account-limits-context';
 
 const AccountLimitsOverlay = () => {
-    const { overlay_ref, toggleOverlay } = React.useContext(AccountLimitsContext);
+    const { localize } = useTranslations();
+    const { overlay_ref, toggleOverlay } = useContext(AccountLimitsContext);
 
     return (
         <Popup.Overlay

packages/account/src/Components/account-limits/account-limits-table-cell.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { ReactElement, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Text } from '@deriv/components';
 
 type TAccountLimitsTableCell = {
     align: 'right' | 'left';
     is_hint: boolean;
     level: string;
-    renderExtraInfo: () => React.ReactElement;
+    renderExtraInfo: () => ReactElement;
 };
 
 const AccountLimitsTableCell = ({
@@ -15,7 +15,7 @@ const AccountLimitsTableCell = ({
     is_hint,
     level,
     renderExtraInfo,
-}: React.PropsWithChildren<Partial<TAccountLimitsTableCell>>) => {
+}: PropsWithChildren<Partial<TAccountLimitsTableCell>>) => {
     const text_size = is_hint ? 'xxxs' : 'xxs';
 
     return (

packages/account/src/Components/account-limits/account-limits-table-header.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import { ReactNode, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Text } from '@deriv/components';
 
 type TAccountLimitsTableHeader = {
     align: 'left' | 'right';
-    renderExtraInfo: () => React.ReactNode;
+    renderExtraInfo: () => ReactNode;
 };
 
 const AccountLimitsTableHeader = ({
     align,
     children,
     renderExtraInfo,
-}: React.PropsWithChildren<Partial<TAccountLimitsTableHeader>>) => {
+}: PropsWithChildren<Partial<TAccountLimitsTableHeader>>) => {
     return (
         <th
             className={clsx('da-account-limits__table-header', {

packages/account/src/Components/account-limits/account-limits-turnover-limit-row.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { formatMoney } from '@deriv/shared';
+import { useContext, Fragment } from 'react';
+import { FormatUtils, CurrencyConstants } from '@deriv-com/utils';
 import AccountLimitsTableCell from './account-limits-table-cell';
 import AccountLimitsContext, { TAccountLimitsContext } from './account-limits-context';
 
@@ -17,22 +17,22 @@ type TAccountLimitsTurnoverLimitRow = {
 };
 
 const AccountLimitsTurnoverLimitRow = ({ collection, title }: TAccountLimitsTurnoverLimitRow) => {
-    const { currency } = React.useContext<TAccountLimitsContext>(AccountLimitsContext);
+    const { currency } = useContext<TAccountLimitsContext>(AccountLimitsContext);
 
     return (
-        <React.Fragment>
+        <Fragment>
             {collection?.map(({ name, turnover_limit, level }) => (
                 <tr key={name} data-testid='account-limits-turnover-limit-row'>
                     <AccountLimitsTableCell level={level}>
                         {title && `${title} - `}
                         {name}
                     </AccountLimitsTableCell>
                     <AccountLimitsTableCell align='right'>
-                        {formatMoney(currency, turnover_limit, true)}
+                        {FormatUtils.formatMoney(turnover_limit, { currency: currency as CurrencyConstants.Currency })}
                     </AccountLimitsTableCell>
                 </tr>
             ))}
-        </React.Fragment>
+        </Fragment>
     );
 };