Merge branch 'master' into api-hooks-fix

.github/workflows/build-and-deploy-prod.yml

@@ -0,0 +1,64 @@
+name: Build Production and Deploy to Cloudflare Pages
+
+on:
+    push:
+      tags:
+      - production_*
+
+concurrency:
+    group: cloudflare-pages-build-production
+    cancel-in-progress: true
+
+jobs:
+    build_to_cloudflare_pages:
+        timeout-minutes: 30
+        runs-on: ubuntu-latest
+        environment: Production
+        steps:
+            - name: Checkout to main branch
+              uses: actions/checkout@v3
+
+            - name: Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.x
+                  cache: 'npm'
+
+            - name: Get cached dependencies
+              id: cache-npm
+              uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
+              with:
+                  path: node_modules
+                  key: npm-${{ hashFiles('./package-lock.json') }}
+
+            - name: Install dependencies
+              if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+              run: npm ci
+              shell: bash
+
+            - name: Build
+              run: npm run build
+
+            - name: Run tests for Eslint
+              run: npm run test:lint
+
+            - name: Publish to Cloudflare Pages
+              uses: "deriv-com/shared-actions/.github/actions/publish_to_pages_branch@master"
+              with:
+                CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                project_name: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                branch_name: master
+                output_dir: dist
+                cname_url: p2p.deriv.com
+    send_slack_success:
+      name: Send Release Slack notification success
+      runs-on: ubuntu-latest
+      if: success()
+      needs: [build_to_cloudflare_pages]
+      steps:
+        - name: Send Slack Notification
+          uses: "deriv-com/shared-actions/.github/actions/send_slack_notification@master"
+          with:
+            SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+            MESSAGE: "Production Release succeeded for p2p.deriv.com with version ${{ github.head_ref }}"

.github/workflows/build-and-deploy-staging.yml

@@ -36,31 +36,23 @@ jobs:
               run: npm ci
               shell: bash
 
-            - name: Build staging
+            - name: Build
               run: npm run build
               env:
                 VITE_PROJECT_NAME: ${{ vars.VITE_PROJECT_NAME }}
                 VITE_CROWDIN_BRANCH_NAME: ${{ vars.VITE_CROWDIN_BRANCH_NAME }}
                 VITE_TRANSLATIONS_CDN_URL: ${{ vars.VITE_TRANSLATIONS_CDN_URL }}
 
 
-            - name: Run tests for Eslint
+            - name: Run tests for Eslintbuild_to_cloudflare_pages
               run: npm run test:lint
 
             - name: Publish to Cloudflare Pages
-              id: publish-to-pages
-              env:
-                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-                  HEAD_BRANCH: ${{ github.head_ref }}
-              run: |
-                  echo "Installing Wrangler CLI"
-                  npm i -g wrangler
-                  echo "Deploying build to Cloudflare Pages"
-                  directory='dist'
-                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
-                  branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
-                  cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
-                  echo "------"
-                  preview_url=https://$branch.$projectName.pages.dev
-                  cat log.txt
+              uses: "deriv-com/shared-actions/.github/actions/publish_to_pages_branch@master"
+              with:
+                CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                project_name: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                branch_name: staging
+                output_dir: dist
+                cname_url: staging-p2p.deriv.com

.github/workflows/build-and-deploy-test.yml

@@ -21,6 +21,12 @@ jobs:
         timeout-minutes: 30
         runs-on: ubuntu-latest
         steps:
+            - name: Verify user
+              uses: 'deriv-com/shared-actions/.github/actions/verify_user_in_organization@v1'
+              with:
+                  username: ${{ github.event.pull_request.user.login }}
+                  token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+
             - name: Checkout to branch
               uses: actions/checkout@v3
               with:
@@ -74,15 +80,15 @@ jobs:
             - name: Publish to Cloudflare Pages
               id: publish-to-pages
               env:
-                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_TEST_LINK_TOKEN }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_TEST_LINK_ACCOUNT_ID }}
                   HEAD_BRANCH: ${{ github.head_ref }}
               run: |
                   echo "Installing Wrangler CLI"
                   npm i -g wrangler
                   echo "Deploying build to Cloudflare Pages"
                   directory='dist'
-                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                  projectName=${{ secrets.CLOUDFLARE_TEST_LINK_PROJECT_NAME }}
                   branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
                   cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
                   echo "------"

localstorage-sync.html

@@ -16,6 +16,7 @@
                     'https://staging-app.deriv.me',
                     'https://staging-app.deriv.be',
                     'https://test-app.deriv.com',
+                    'https://uat-app.deriv.com',
                 ];
 
                 if (allowed_origins.includes(message.origin)) {

src/App.tsx

@@ -2,9 +2,10 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { AppFooter, AppHeader, DerivIframe } from '@/components';
+import { useRedirectToOauth } from '@/hooks';
+import AppContent from '@/routes/AppContent';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
-import AppContent from './routes/AppContent';
 
 const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env;
 const i18nInstance = initializeI18n({
@@ -13,6 +14,9 @@ const i18nInstance = initializeI18n({
 
 const App = () => {
     const { isDesktop } = useDevice();
+    const { redirectToOauth } = useRedirectToOauth();
+
+    redirectToOauth();
 
     return (
         <BrowserRouter>

src/__mocks__/mock-data.ts

@@ -1,4 +1,4 @@
-import { TAdvertType, TType01 } from 'types';
+import { TAdvertType, TPaymentFieldType, TType01, TWalletType } from 'types';
 
 export const mockAdvertValues = {
     account_currency: 'USD',
@@ -93,3 +93,184 @@ export const mockAdvertValues = {
     type: 'sell' as 'buy' | 'sell',
     visibility_status: ['advertiser_temp_ban'] as TAdvertType['visibility_status'],
 };
+
+export const mockAdvertiserPaymentMethods = [
+    {
+        display_name: 'Other',
+        fields: {
+            account: {
+                display_name: 'Account ID / phone number / email',
+                required: 0,
+                type: 'text' as TPaymentFieldType,
+                value: 'adfg',
+            },
+            instructions: {
+                display_name: 'Instructions',
+                required: 0,
+                type: 'memo' as TPaymentFieldType,
+                value: 'rtbnrt',
+            },
+            name: {
+                display_name: 'Payment method name',
+                required: 1,
+                type: 'text' as TPaymentFieldType,
+                value: 'wrtnwrtn',
+            },
+        },
+        id: '89',
+        is_enabled: 1 as TType01,
+        method: 'other',
+        type: 'other' as TWalletType,
+        used_by_adverts: ['194'],
+        used_by_orders: null,
+    },
+];
+
+export const mockCountryList = {
+    af: {
+        country_name: 'Afghanistan',
+        cross_border_ads_enabled: 1,
+        fixed_rate_adverts: 'enabled',
+        float_rate_adverts: 'disabled',
+        float_rate_offset_limit: 10,
+        local_currency: 'AFN',
+        payment_methods: {
+            alipay: {
+                display_name: 'Alipay',
+                fields: {
+                    account: {
+                        display_name: 'Alipay ID',
+                        required: 1,
+                        type: 'text',
+                    },
+                    instructions: {
+                        display_name: 'Instructions',
+                        required: 0,
+                        type: 'memo',
+                    },
+                },
+                type: 'ewallet',
+            },
+        },
+    },
+};
+
+export const mockPaymentMethods = [
+    {
+        display_name: 'Bank Transfer',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Bank Transfer', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test1',
+        is_enabled: 0,
+        method: '',
+        type: 'bank',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+    {
+        display_name: 'Ali pay',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Ali pay', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test2',
+        is_enabled: 0,
+        method: '',
+        type: 'wallet',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+    {
+        display_name: 'Skrill',
+        fields: {
+            account: {
+                display_name: 'Account Number',
+                required: 1,
+                type: 'text',
+                value: 'Account Number',
+            },
+            bank_name: { display_name: 'Skrill', required: 1, type: 'text', value: 'Bank Name' },
+        },
+        id: 'test3',
+        is_enabled: 0,
+        method: '',
+        type: 'wallet',
+        used_by_adverts: null,
+        used_by_orders: null,
+    },
+];
+
+export const mockAdvertiserAdvertValues = {
+    account_currency: 'USD',
+    active_orders: 0,
+    advertiser_details: {
+        completed_orders_count: 0,
+        has_not_been_recommended: false,
+        id: '34',
+        is_blocked: false,
+        is_favourite: false,
+        is_online: true,
+        is_recommended: false,
+        last_online_time: 1688480346,
+        name: 'client CR90000212',
+        rating_average: null,
+        rating_count: 0,
+        recommended_average: null,
+        recommended_count: null,
+        total_completion_rate: null,
+    },
+    amount: 22,
+    amount_display: '22.00',
+    block_trade: false,
+    contact_info: '',
+    counterparty_type: 'sell' as const,
+    country: 'id',
+    created_time: new Date(1688460999),
+    currentRateType: 'fixed' as const,
+    days_until_archive: 1,
+    description: '',
+    effective_rate: 22,
+    effective_rate_display: '22.00',
+    eligible_countries: ['ID'],
+    id: '138',
+    is_active: true,
+    is_floating: false,
+    is_visible: true,
+    local_currency: 'IDR',
+    max_order_amount: 22,
+    max_order_amount_display: '22.00',
+    max_order_amount_limit: 22,
+    max_order_amount_limit_display: '22.00',
+    min_completion_rate: 22,
+    min_join_days: 4,
+    min_order_amount: 22,
+    min_order_amount_display: '22.00',
+    min_order_amount_limit: 22,
+    min_order_amount_limit_display: '22.00',
+    min_rating: 4,
+    order_expiry_period: 900,
+    payment_info: '',
+    payment_method: null,
+    payment_method_names: ['Bank Transfer'],
+    price: 22,
+    price_display: '22.00',
+    rate: 22,
+    rate_display: '22.00',
+    rate_type: 'fixed' as const,
+    remaining_amount: 22,
+    remaining_amount_display: '22.00',
+    type: 'buy' as const,
+    visibility_status: [],
+};

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -167,14 +167,14 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                         {payment_method_names ? (
                             payment_method_names.map((method: string, idx: number) => (
                                 <PaymentMethodLabel
-                                    color={textColor}
+                                    color='general'
                                     key={idx}
                                     paymentMethodName={method}
-                                    size={isMobile ? 'sm' : 'xs'}
+                                    size={isMobile ? 'xs' : 'sm'}
                                 />
                             ))
                         ) : (
-                            <PaymentMethodLabel color={textColor} paymentMethodName='-' />
+                            <PaymentMethodLabel color='general' paymentMethodName='-' />
                         )}
                     </div>
                 </Container>