fix: updated with latest master

.github/workflows/sync-translations.yml

@@ -0,0 +1,25 @@
+name: Sync translations
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  sync_translations:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout to master branch
+        uses: actions/checkout@v3
+
+      - name: Sync translations
+        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
+        with:
+          PROJECT_NAME: ${{ env.VITE_PROJECT_NAME }}
+          CROWDIN_BRANCH_NAME: ${{ env.VITE_CROWDIN_BRANCH_NAME }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+          R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
+          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
+          R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+          R2_BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.19",
+        "@deriv-com/translations": "^1.2.0",
         "@deriv-com/ui": "latest",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",

src/App.tsx

@@ -2,14 +2,22 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { Header } from '@/components';
+import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import AppContent from './routes/AppContent';
 
+//TODO: replace with ${process.env.VITE_PROJECT_NAME}/${process.env.VITE_CROWDIN_BRANCH_NAME}
+const i18nInstance = initializeI18n({
+    cdnUrl: `https://pub-5ce11fcb15f34c0a9ce8ba7086d16e6a.r2.dev/p2p/DP2P`,
+});
+
 const App = () => {
     return (
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
-                <Header />
-                <AppContent />
+                <TranslationProvider defaultLang='ID' i18nInstance={i18nInstance}>
+                    <Header />
+                    <AppContent />
+                </TranslationProvider>
             </QueryParamProvider>
         </BrowserRouter>
     );

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -3,6 +3,7 @@ import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
 import { LabelPairedCircleUserSlashSmRegularIcon, LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './AdvertiserNameStats.scss';
 
@@ -51,7 +52,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
             {!ratingAverage && (
                 <div>
                     <Text color='less-prominent' size='sm'>
-                        Not rated yet
+                        <Localize i18n_default_text='Not rated yet' />
                     </Text>
                 </div>
             )}

src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss

@@ -38,7 +38,7 @@
                 width: 100%;
 
                 &:first-child {
-                    border-bottom: 1px solid var(--border-normal);
+                    border-bottom: 1px solid #d6dadb;
                 }
             }
         }

src/components/Modals/ShareAdsModal/ShareAdsModal.scss

@@ -52,15 +52,15 @@
         display: flex;
         align-items: center;
         border-radius: 0.3rem;
-        border: 0.1em solid var(--general-active);
+        border: 0.1em solid #d6dadb;
         margin-top: 2.5rem;
         padding: 0.8rem;
 
         &-clipboard {
             display: flex;
             align-items: center;
             justify-content: center;
-            background: var(--general-section-5);
+            background: #f2f3f4;
             border-radius: 0.3rem;
             margin-left: 1rem;
 

src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss

@@ -2,7 +2,6 @@
     &__body {
         display: flex;
         flex-direction: column;
-        margin-top: 0.8rem;
         vertical-align: baseline;
     }
 }

src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx

@@ -16,11 +16,11 @@ const PaymentMethodCardBody = ({
     const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
     return (
         <div className='payment-method-card__body'>
-            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size='xs'>{displayName}</Text>}
-            <Text size='xs'>
+            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text>{displayName}</Text>}
+            <Text>
                 {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
             </Text>
-            <Text size='xs'>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
+            <Text>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
         </div>
     );
 };

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss

@@ -8,6 +8,26 @@
         justify-content: space-between;
         align-items: center;
         margin-bottom: 1.1rem;
+
+        .deriv-dropdown {
+            width: 3.2rem;
+
+            &__items {
+                width: 12.8rem;
+                border: 0;
+                padding: 0;
+            }
+
+            .deriv-input {
+                border: 0;
+                padding: 0;
+
+                &__field,
+                &__helper-message {
+                    display: none;
+                }
+            }
+        }
     }
     .derivs-button__variant--ghost {
         color: #0e0e0e;

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx

@@ -1,7 +1,6 @@
 import { THooks } from 'types';
-import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
-import { Button, Checkbox } from '@deriv-com/ui';
+import { Checkbox, Dropdown } from '@deriv-com/ui';
 import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg';
 import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg';
 import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg';
@@ -20,6 +19,18 @@ type TPaymentMethodCardHeaderProps = {
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
 };
 
+// TODO: Remember to translate these
+const actions = [
+    {
+        text: 'Edit',
+        value: 'edit',
+    },
+    {
+        text: 'Delete',
+        value: 'delete',
+    },
+];
+
 const PaymentMethodCardHeader = ({
     isDisabled = false,
     isEditable = false,
@@ -38,16 +49,7 @@ const PaymentMethodCardHeader = ({
     } else if (type === 'ewallet') {
         Icon = IcCashierEwallet;
     }
-    // TODO: Remember to translate these
-    const flyoutMenuItems = [
-        <Button color='black' key={0} onClick={() => onEditPaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Edit
-        </Button>,
 
-        <Button color='black' key={1} onClick={() => onDeletePaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Delete
-        </Button>,
-    ];
     return (
         <div className='payment-method-card__header' data-testid='dt_payment_method_card_header'>
             <Icon
@@ -57,9 +59,18 @@ const PaymentMethodCardHeader = ({
                 width={medium || small ? 16 : 24}
             />
             {isEditable && (
-                <FlyoutMenu
-                    listItems={flyoutMenuItems}
-                    renderIcon={() => <LabelPairedEllipsisVerticalXlRegularIcon className='cursor-pointer' />}
+                <Dropdown
+                    className='payment-method-card__header-dropdown'
+                    dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon />}
+                    list={actions}
+                    name='payment-method-actions'
+                    onSelect={value => {
+                        if (value === 'edit') {
+                            onEditPaymentMethod?.();
+                        } else if (value === 'delete') {
+                            onDeletePaymentMethod?.();
+                        }
+                    }}
                 />
             )}
             {isSelectable && (