Merge remote-tracking branch 'upstream/master' into sergei/trah-3679/…

…modal-after-signup

.github/workflows/smoketests.yml

@@ -11,123 +11,47 @@ permissions:
 on: 
     issue_comment:
         types: [edited]
-        
+
 jobs:
-  cypress-run:
+  trigger-workflow:
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false 
-      matrix:
-        containers: [1,2]
-
     steps:
     - name: Capture Vercel preview URL
       id: vercel_preview_url
       uses: binary-com/vercel-preview-url-action@v1.0.5
       with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Checkout external repository with Cypress tests
-      uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
-      with:
-        repository: deriv-com/e2e-deriv-app
-
-    - name: Cypress run
-      # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
-      if: ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }}
-      uses: cypress-io/github-action@97d526c9027e1b1eedde4f37196aebe8834005ef
-      with:
-        # Records to Cypress Cloud 
-        # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
-        record: true
-        parallel: true # Runs test in parallel using settings above
-        spec: cypress/e2e/smoke/Wallets/*.cy.js
-        group: 'Smoke Tests'
-
-      env:
-        # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
-        # in GitHub repo → Settings → Secrets → Actions
-        CYPRESS_RECORD_KEY: ${{ secrets.E2E_CYPRESS_RECORD_KEY }}
-        # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # Set Base Url from client_payload.
-        CYPRESS_BASE_URL: https://staging-app.deriv.com/
-        # Send PR details to Cypress test run
-        COMMIT_INFO_MESSAGE: PR "${{ github.event.issue.number }}" Changed By "${{ github.event.issue.user.login }}" in Labels "${join(github.event.issue.labels.*.name, ', ')}" (draft? "${{ github.event.issue.draft }}")
-
-        # Set login env variables
-        E2E_OAUTH_URL: ${{ secrets.E2E_OAUTH_URL }}
-        E2E_CONFIG_APPID: ${{ secrets.E2E_CONFIG_APPID }}
-        E2E_CONFIG_SERVER: ${{ secrets.E2E_CONFIG_SERVER }}
-        E2E_MT5_LOGIN: ${{ secrets.E2E_MT5_LOGIN }}
-        E2E_MT5_PASSWORD: ${{ secrets.E2E_MT5_PASSWORD }}
-        E2E_MT5_BASEURL: ${{ secrets.E2E_MT5_BASEURL }}
-        E2E_STD_CONFIG_SERVER: ${{ env.QA_SERVER || secrets.E2E_STD_CONFIG_SERVER }}
-        E2E_STD_CONFIG_APPID: ${{ github.event.inputs.appid || secrets.E2E_STD_CONFIG_APPID }}
-        E2E_DOUGHFLOW_CONFIG_SERVER: ${{ secrets.E2E_DOUGHFLOW_CONFIG_SERVER }}
-        E2E_DOUGHFLOW_CONFIG_APPID: ${{ secrets.E2E_DOUGHFLOW_CONFIG_APPID }}
-        E2E_QABOX_URL: ${{ secrets.E2E_QABOX_URL }}
-        E2E_MAIN_QABOX_URL: ${{ secrets.E2E_MAIN_QABOX_URL }}
-        E2E_QABOX_LOGIN: ${{ secrets.E2E_QABOX_LOGIN }}
-        E2E_QABOX_PASSWORD: ${{ secrets.E2E_QABOX_PASSWORD }}
-        TEST_SUITE: ${{ github.event.inputs.suite }}
-        E2E_DERIV_LOGIN_PROD: ${{secrets.E2E_DERIV_LOGIN_PROD}}
-        E2E_DERIV_PASSWORD_PROD: ${{secrets.E2E_DERIV_PASSWORD_PROD }}
-        E2E_PROD_SERVER: ${{secrets.E2E_PROD_SERVER}}
-        E2E_PROD_APPID: ${{secrets.E2E_PROD_APPID}}
-        E2E_LOGIN_ID_P2P_FIXEDRATE: ${{ secrets.E2E_LOGIN_ID_P2P_FIXEDRATE }}
-        E2E_P2P_FLOATING: ${{secrets.E2E_P2P_FLOATING}}
-        E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHADS: ${{secrets.E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHADS}}
-        E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHOUTADS: ${{secrets.E2E_LOGIN_ID_P2P_STANDARDACCOUNTWITHOUTADS}}
-        E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_1: ${{secrets.E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_1}}
-        E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_2: ${{secrets.E2E_LOGIN_ID_P2P_FLOATINGRATE_SELLAD_2}}
-        E2E_LOGIN_ID_P2P_EMPTYSTATE: ${{secrets.E2E_LOGIN_ID_P2P_EMPTYSTATE}}
-        E2E_LOGIN_ID_P2P_SORT: ${{secrets.E2E_LOGIN_ID_P2P_SORT}}
-        E2E_CRYPTO: ${{secrets.E2E_CRYPTO}}
-        E2E_STG_APPID: ${{secrets.E2E_STG_APPID}}
-        E2E_PSWD_P2P: ${{secrets.E2E_PSWD_P2P}}
-        E2E_CASHIER_WITHDRAWAL_PROD: ${{secrets.E2E_CASHIER_WITHDRAWAL_PROD}}
-        E2E_CASHIER_PROD_PASSWORD: ${{secrets.E2E_CASHIER_PROD_PASSWORD}}
-        E2E_LOGIN_ID_DBOT: ${{secrets.E2E_LOGIN_ID_DBOT}}
-        E2E_LOGIN_ID_PROD_DBOT: ${{secrets.E2E_LOGIN_ID_PROD_DBOT}}
-        E2E_QA_ACCOUNT_PASSWORD: ${{secrets.E2E_QA_ACCOUNT_PASSWORD}}
-        E2E_LOGIN_ID_CASHIER_LEGACY: ${{secrets.E2E_LOGIN_ID_CASHIER_LEGACY}}
-        E2E_LOGIN_ID_CASHIER_LEGACY_NON_USD: ${{secrets.E2E_LOGIN_ID_CASHIER_LEGACY_NON_USD}}
-        E2E_MAILISK_NAMESPACE: ${{secrets.E2E_MAILISK_NAMESPACE}}
-        E2E_MAILISK_API_KEY: ${{secrets.E2E_MAILISK_API_KEY}}
-        E2E_DIEL_LOGIN: ${{secrets.E2E_DIEL_LOGIN}}
-        E2E_EU_LOGIN: ${{secrets.E2E_EU_LOGIN}}
-        E2E_APP_REGISTER_URL: ${{ steps.vercel_preview_url.outputs.vercel_preview_url }}
-        E2E_RUN_FROM_PR: ${{secrets.E2E_RUN_FROM_PR}}
-        E2E_DERIV_LOGIN_WALLET_MOBILE : ${{ secrets.E2E_DERIV_LOGIN_WALLET_MOBILE }}
-        E2E_WALLET_MIGRATION_NEWCLIENT : ${{ secrets.E2E_WALLET_MIGRATION_NEWCLIENT }}
-        E2E_WALLET_MIGRATION_NO_VRTC : ${{ secrets.E2E_WALLET_MIGRATION_NO_VRTC }}
-        E2E_WALLET_MIGRATION_VRTCONLY : ${{ secrets.E2E_WALLET_MIGRATION_VRTCONLY }}
-        E2E_WALLET_MIGRATION_NO_CURRENCY : ${{ secrets.E2E_WALLET_MIGRATION_NO_CURRENCY }}
-        E2E_WALLET_MIGRATION_NON_USD : ${{ secrets.E2E_WALLET_MIGRATION_NON_USD }}
-        E2E_WALLET_MIGRATION_P2P : ${{ secrets.E2E_WALLET_MIGRATION_P2P }}
-        E2E_WALLET_MIGRATION_PA : ${{ secrets.E2E_WALLET_MIGRATION_PA }}
-        E2E_WALLET_MIGRATION_PA_CLIENT : ${{ secrets.E2E_WALLET_MIGRATION_PA_CLIENT }}
-        E2E_DERIV_LOGIN_WALLET: ${{ secrets.E2E_DERIV_LOGIN_WALLET }}
-        E2E_WALLETS_LOGIN_PROD: ${{ secrets.E2E_WALLETS_LOGIN_PROD }}
-        E2E_WALLETS_PASSWORD_PROD: ${{ secrets.E2E_WALLETS_PASSWORD_PROD }}
-
-    - name: Set comments message
-      id: set_msg 
-      if: always() && ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }}
+    - name: Set env vars
+      id: set-env-vars
       run: |
-        # Using shell script to conditionally set the message
-        if [[ "${{ job.status }}" == "success" ]]; then
-          echo "msg=:rocket: Smoke test run (${{ matrix.containers }}) passed successfully!" >> $GITHUB_OUTPUT
+        if [[ "${{ github.event.issue.labels.*.name }}" == *"Bot"* ]]; then
+          echo "TEST_SUITE=dbot" >> $GITHUB_ENV
+        elif [[ "${{ github.event.issue.labels.*.name }}" == *"P2P"* ]]; then
+          echo "TEST_SUITE=P2P" >> $GITHUB_ENV
+        elif [[ "${{ github.event.issue.labels.*.name }}" == *"Wallets"* ]]; then
+          echo "TEST_SUITE=Wallets" >> $GITHUB_ENV
         else
-          # echo "msg=:x: Smoke test run (${{ matrix.containers }}) failed. See logs for details: [Visit Action](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}})" >> $GITHUB_OUTPUT
+          echo "TEST_SUITE=<do not run>" >> $GITHUB_ENV
         fi
         
-    - name: Leave comment
-      if: always() && ${{ github.event.issue.draft == false && contains(github.event.issue.labels.*.name, 'Wallets') }}
-      uses: marocchino/sticky-pull-request-comment@331f8f5b4215f0445d3c07b4967662a32a2d3e31
+    - name: Trigger deriv-app smoke tests from regentmarkets
+      if: ${{ github.event.issue.draft == false && env.TEST_SUITE != '<do not run>' }}
+      uses: actions/github-script@v6
       with:
-        header: Smoke tests status update
-        number: ${{ github.event.issue.number }}
-        message: "${{ steps.set_msg.outputs.msg }}"
-        recreate: true
+        github-token: ${{ secrets.E2E_WORKFLOW_TOKEN }}
+        script: |
+          const workflowInputs = {
+            environment: '${{ secrets.E2E_WORKFLOW_ENV }}',
+            suite: '${{ env.TEST_SUITE }}',
+            appRegUrl: '${{ steps.vercel_preview_url.outputs.vercel_preview_url }}',
+            issue_number: '${{ github.event.issue.number }}',
+            user_name: '${{ github.event.issue.user.login }}'
+            };
+          const response = await github.rest.actions.createWorkflowDispatch({
+            owner: 'regentmarkets',
+            repo: 'e2e-deriv-app',
+            workflow_id: 'E2E_Run_PR.yml',
+            ref: 'mark/pr-commit-v2',
+            inputs: workflowInputs
+          });

.github/workflows/smoketests_manual.yml

@@ -1,21 +1,80 @@
 name: Run Smoke Tests - Manually
-run-name: Manual run of ${{ github.event.inputs.suite }} tests on ${{ github.event.inputs.testlink || github.event.inputs.environment }} in ${{ github.event.inputs.qabox }} ${{ github.event.inputs.appid }}
+run-name: Manual run of tests
 
 on:
   workflow_dispatch:
+    inputs:
+      ilabel:
+        type: choice
+        description: Run smoke or full test suite
+        options:
+        - P2P
+        - dbot, Traders
+        - Traders
+        - Wallets
+        - dbot
+      idraft:
+        type: choice
+        description: Draft
+        options:
+        - 'true'
+        - 'false'
+      iappRegUrl:
+        type: choice
+        description: Select the Url for a specific PR
+        options:
+        - https://deriv-app-git-fork-maryia-matskevich-deriv-maryia-bot-1913.binary.sx/
+        - https://deriv-app-git-fork-suisin-deriv-suisin-upm1116addkhmerlanguage.binary.sx
+      iissue_number:
+        type: choice
+        description: Issue Number
+        options:
+        - '15719'
+        - '15714'
+      iuser_name:
+        type: choice
+        description: User name
+        options:
+        - maryia-deriv
+        - suisin-deriv
 
 jobs:
   trigger-workflow:
     runs-on: ubuntu-latest
     steps:
-      - name: Trigger another deriv-app smoke tests from regentmarkets
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            github.actions.createWorkflowDispatch({
-              owner: 'regentmarkets',
-              repo: 'e2e-deriv-app',
-              workflow_id: 'E2E_Run_v2.yml',
-              ref: 'master'
-            })
+
+    - name: Set env vars
+      id: set-env-vars
+      run: |
+        if [[ "${{ github.event.inputs.ilabel }}" == *"dbot"* ]]; then
+          echo "TEST_SUITE=dbot" >> $GITHUB_ENV
+        elif [[ "${{ github.event.inputs.ilabel }}" == *"P2P"* ]]; then
+          echo "TEST_SUITE=P2P" >> $GITHUB_ENV
+        elif [[ "${{ github.event.inputs.ilabel }}" == *"Wallets"* ]]; then
+          echo "TEST_SUITE=Wallets" >> $GITHUB_ENV
+        else
+          echo "TEST_SUITE=<do not run>" >> $GITHUB_ENV
+        fi
+        
+    - name: Trigger another deriv-app smoke tests from regentmarkets
+      if: ${{ github.event.inputs.idraft == 'false' && env.TEST_SUITE != '<do not run>' }}
+      uses: actions/github-script@v6
+      with:
+        github-token: ${{ secrets.E2E_WORKFLOW_TOKEN }}
+        script: |
+          const workflowInputs = {
+            environment: '${{ secrets.E2E_WORKFLOW_ENV }}',
+            suite: '${{ env.TEST_SUITE }}',
+            appRegUrl: '${{ github.event.inputs.iappRegUrl }}',
+            issue_number: '${{ github.event.inputs.iissue_number }}',
+            user_name: '${{ github.event.inputs.iuser_name }}'
+            };
+          const response = await github.rest.actions.createWorkflowDispatch({
+            owner: 'regentmarkets',
+            repo: 'e2e-deriv-app',
+            workflow_id: 'E2E_Run_PR.yml',
+            ref: 'mark/pr-commit-v2',
+            inputs: workflowInputs
+          });
+          console.log('Workflow dispatched successfully:', response);
+

.stylelintrc.js

@@ -36,7 +36,7 @@ module.exports = {
         'shorthand-property-no-redundant-values': true,
         'string-no-newline': true,
         'time-min-milliseconds': 100,
-        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
+        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'svw', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
     },
     extends: [

__mocks__/globals.js

@@ -20,6 +20,26 @@ jest.mock('@deriv-com/analytics', () => ({
     },
 }));
 
+// default breakpoint to desktop
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isDesktop: true }),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+
 const mock_onfido = {
     init: jest.fn().mockResolvedValue({}),
 };

jest.config.base.js

@@ -16,7 +16,7 @@ module.exports = {
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
     // This is needed to transform es modules imported from node_modules of the target component.
     transformIgnorePatterns: [
-        '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv-com/translations)).+\\.js$',
+        '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv-com/ui|@deriv-com/quill-ui|@sendbird/chat)).+\\.js$',
     ],
     setupFiles: ['<rootDir>/../../jest.setup.js'],
     setupFilesAfterEnv: ['<rootDir>/../../setupTests.js'],

jest.config.js

@@ -1,3 +1,5 @@
+const baseConfig = require('./jest.config.base');
+
 module.exports = {
     collectCoverage: false,
     collectCoverageFrom: [
@@ -17,6 +19,6 @@ module.exports = {
         '^.+\\.(ts|tsx)?$': 'ts-jest',
     },
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
-    transformIgnorePatterns: ['/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser)).+\\.js$'],
+    transformIgnorePatterns: baseConfig.transformIgnorePatterns,
     testPathIgnorePatterns: ['/integration-tests/'],
 };

packages/account/build/constants.js

@@ -17,6 +17,7 @@ const {
 } = require('./loaders-config');
 
 const ALIASES = {
+    'react/jsx-runtime': 'react/jsx-runtime.js',
     Assets: path.resolve(__dirname, '../src/Assets'),
     Components: path.resolve(__dirname, '../src/Components'),
     Configs: path.resolve(__dirname, '../src/Configs'),

packages/account/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
     ...baseConfigForPackages,
     preset: 'ts-jest',
     moduleNameMapper: {
+        '\\.css$': '<rootDir>/../../__mocks__/styleMock.js',
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',

packages/account/package.json

@@ -31,8 +31,9 @@
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
         "@deriv-com/analytics": "1.5.9",
-        "@deriv-com/translations": "^1.3.2",
+        "@deriv-com/translations": "^1.3.3",
         "@deriv-com/utils": "^0.0.25",
+        "@deriv-com/ui": "^1.28.1",
         "@deriv/api": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",

packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss

@@ -7,11 +7,17 @@
         row-gap: 1.6rem;
         margin-bottom: 2.4rem;
 
-        @include desktop {
+        @include tablet-screen {
+            grid-template-columns: repeat(2, 1fr);
+            row-gap: 3.2rem;
+        }
+
+        @include desktop-screen {
             grid-template-columns: repeat(3, 1fr);
             column-gap: calc((100% - 23.7rem * 3) / 2);
             row-gap: 3.2rem;
         }
+
         &-layout {
             background-color: var(--transparent-danger);
             gap: 1.6rem;
@@ -25,7 +31,7 @@
             width: 23.7rem;
             height: 21.8rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-inline: auto;
             }
         }