From 4d165e30a2d5a6d6ba0156fbc346b88540b857d6 Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+george-usynin-binary@users.noreply.github.com> Date: Tue, 18 Oct 2022 15:49:58 +0300 Subject: [PATCH] george / rm66510 / implement new payment agent design for deposit and withdrawal flow (screens), add searchbar (#6113) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * george / add icons to cashier pa-redesign (#5954) * add payment-method icons, optimize icons in cashier folder with svgo * add icons * optimize cashier icons, fix icons * george / PA list improvements. Deposit flow (#5816) * add icons, add payment-agent-card * add props types * add capitalizeFirstLetter method * add payment-agent-providers constant * add shuffle array utility * add shuffling of payment agent list * make payment method filter visible, shuffle payment agent list * fix broken test (payment-agent-store) * add test for PaymentAgentCard * add test for PaymentAgentCardDescription * add tests for PaymentAgentCardDetails * add tests for heplpers payment agent * heplers test improvement * add pa-deposit-withdraw container * add hasNormalizedPaymentMethods hepler, add test for helper * code refactoring * fix tests * code refactoring * fix arrow expansion panel size * add payment-method icons, optimize icons in cashier folder with svgo * fix css issues, add icons, add disclaimer, fix tests * fix tests * fix dropdown width in 320px * fix tests payment-agent-disclaimer * fix comments * add detail shared component * replace px to rem * fix detail import, refactoring pa-card css * add index file for detail compoennt * change array utils to plain js files * refactoring details compoent * refactoring pa-card-deposit-details * fix tests, refactoring detail component * add card background in dark mode * refactor pa-deposit-details component * return ic-cashier icon * fix onload flashing of pa list * css refactoring * refcator detail component * fix css border * refactor pa detail component, add test * fix padding for deposit/withdraw tabs * fix naming data-testid * fix link attributes in pa-detail * george / pa list improvements - withdrawal flow (#5817) * add icons, add payment-agent-card * add props types * add capitalizeFirstLetter method * add payment-agent-providers constant * add shuffle array utility * add shuffling of payment agent list * make payment method filter visible, shuffle payment agent list * fix broken test (payment-agent-store) * add test for PaymentAgentCard * add test for PaymentAgentCardDescription * add tests for PaymentAgentCardDetails * add tests for heplpers payment agent * heplers test improvement * add pa-deposit-withdraw container * add hasNormalizedPaymentMethods hepler, add test for helper * code refactoring * fix tests * code refactoring * fix arrow expansion panel size * add icons, add payment-agent-card * add props types * add capitalizeFirstLetter method * add payment-agent-providers constant * add shuffle array utility * add shuffling of payment agent list * make payment method filter visible, shuffle payment agent list * fix broken test (payment-agent-store) * add test for PaymentAgentCard * add test for PaymentAgentCardDescription * add tests for PaymentAgentCardDetails * add tests for heplpers payment agent * heplers test improvement * add pa-deposit-withdraw container * test refactoring * add hasNormalizedPaymentMethods hepler, add test for helper * code refactoring * fix tests * add payment agent withdraw details * add withdraw for listed payment agents * fix text size * george / fix adding of payment methods for filtering by payment method (#5757) * fix adding of payment methods for filtering by payment method * fix resetting filter to default option * fix default filter option in mobile * refactored if statement * fix payment-agent-store tests * remove unused field * add unlisted withdrawal * resolve name import * css refactoring * fix payment agent receipt test * fix tests for payment agent withdraw confirm component * fix payment agent store tests * fiex PaymentAgentCardDepositDetails tests * fix test for Confirm component * add fixed deposit/withdraw mobile tabs * add test for payment-agent-withdraw-form * fic tests for payment agent transfer confirm component * add side note disclaimer, css refactoring * fix tests * css formatting, fix error dialog css * css refactoring * test refactoring, add test for payment-agent-withdrawal-details * add tests for payment-agent-deposit-withdraw-container * tests refactoring * add payment-method icons, optimize icons in cashier folder with svgo * fix pa card scc, icons rendering * fix: remove empty string banks * code refactoring * add test for disclaimer component, fix propstypes * fix scc confirm, fix tests * code refactoring, tesst fix * css refactoring * fix css pa transfer confirm * add close icon in form, fix css * fix account number regex * add payment-method icons, optimize icons in cashier folder with svgo * fix css issues, add icons, add disclaimer, fix tests * fix tests * fix dropdown width in 320px * fix tests payment-agent-disclaimer * fix comments * add detail shared component * replace px to rem * fix detail import, refactoring pa-card css * add index file for detail compoennt * change array utils to plain js files * refactoring details compoent * refactoring pa-card-deposit-details * fix tests, refactoring detail component * add card background in dark mode * refactor pa-deposit-details component * return ic-cashier icon * fix onload flashing of pa list * css refactoring * refcator detail component * fix scroll to top app-contents * fix css border * refactor pa detail component, add test * fix tests * fix padding for deposit/withdraw tabs * refactor code * slpit withdrawal to listed and ulisted * fix: responsive screen fix for payment-agent-transfer-receipt * added money icon and border in transfer to client success page * css fix for buttons in payment-agent-transfer-receipt * move pa-deposit-details to separate folder * refactor css pa-card * fix dark mode prop in pa card * refactor pa details, pa-deposit-details, refactor icons * refactor icons * refactor pa-details css * fix pa-receipt test * fix details link attributes, add desc-wrapper * refactor app-contents useEffect hook * implemented design change in pa-agent transfer pages as per the new design * adjusted test cases as per new change in payment-agent-transfer-confirm and confirm spec * implemented review comments * implemented review comments reverted unit of border to px from rem in pa transfer receipt scss * remove redundant test for pa-disclaimer component * remove pa-details * conflict fix * fix icons * refactor confirm component * fix tests * refactor pa-detail css * refactor disclaimer side note * fix ending of pa name in pa receipt * fix tests * fix css * fix comments * fix failed tests * fix useEffect dependencies * fix dependency eslint warning * improve useEffect hook * rename pa-deposit-withdraw-conainer to pa-container * style: change confirm submit buttons top margin * fix(payment agent withdraw): change payment agent account number validation * style(payment agent withdraw): fix withdrawal hint overlapping in crypto acount * fix(payment agent withdraw): clear withdrawal amount input field when switching between payment methods * fix(payment agent withdraw): dispaly unlisted payment agent name * fix(payment agent withdraw): change explanation for listed and unlisted pa in withdrawal receipt * style(payment agent withdraw): change margins for header and explanation blocks in receipt * fix(payment agent withdraw): fix test for pa-withdraw-receipt component * style(payment agent withdraw): margins for payment agent receipt * test(payment agent withdraw): fix tests * refactor: refactor payment agent name, fix tests * refactor(payment agent withdraw): refactor localize Co-authored-by: vinu-deriv * george / rm66637 / PA list improvements. Search bar (#5970) * add search bar component * add css for pa-list-search * add pa search box in deposit-withdraw container * fix comments * remove setTimeout from casgier search * add lodash.debounce as a dependency * add tests (cashier-search-box, pa-store, pa-deposit-withdraw-container) * style: fix overlapping in search input * fix: reset payment agent search term when moving between the pages * test: fix failed test * style: fix autofill overlapping * fix: fix proptypes for value, add number type (#6112) * george / fix conflicts in pa-redesign branch (#6188) * Suisin/Update validation rules (#6145) * update letter symbol rules * new rulels * Update declarative-validation-rules.js * Suisin/Renew validation rules (#6147) * update letter symbol rules * new rulels * Updated Rules * edited rules * Update rules to accept multiple space * translations: 📚 sync translations with crowdin (#6158) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * remove personal-details-step-from-financial-svg (#6135) * TS migration of cashier UI components (#5947) * added ts related change required for migrating all components (#5760) * ts-migration-crypto-fiat-converter (#5796) * Trigger build * Update package-lock * ts-migration-cashier-notifications (#5765) * bahar/funds_protection_component-ts-migration (#5756) * funds_protection_component-ts-migration * remove_extra_type_file * fix_merge_issue * hamid/migrate-transfer-confirm-to-ts (#5815) * Migrate TransferConfirm to TS * Rename component in test file * Replace Confirm with TransferConfirm in PAs * Enhance Tests * ts-migration-page-404 (#5766) * Vinu/converted percentage-selector component into typescript (#5785) * converted percentage-selector component into typescript * changed the name of test_ids in percentage-selector spec file as per new guidlines * updated with latest upstream branch * added reactMouse event in props.types.ts * Vinu/migrated recent-transaction component to typescript (#5791) * migrated recent-transaction component to typescript * fixed Rootsore path in recent-transaction * tsconfig.json change in types path * ts-migration-verification-email (#5769) * bahar/Ts migration no balance (#5774) * ts-migration-no-balance * fix_merge_issue * Vinu/migrating cashier-container into ts (#5780) * migrting cashier-container into ts WIP * added type in virtual.tsx * changed test-ids in cashier-container * updated the branch with latest upstream branch * fixed Rootsore path in cashier-container * tsconfig.json change in types path * Vinu/Ts cashier error dialog (#5820) * migrated error-dialog to typescript * removed proptypes from error-dialog * added appropriate types to message variable in error-dialog * updated code with latest upstream branch * fixed type of rootstore in error-dialog * fixed Rootsore path in error dialog * added type for ReactElement in props.types.ts cashier * Vinu/migration of crypto-transaction-history component into typescript (#5834) * migration of crypto-transaction-history component into typescript * Trigger Build * Trigger Build * fixed Rootstore path in crypto-transactions-history * added type for crypto-transaction-details * added ReactMouseEvent in prop.types * added data-testid's in crypto-transaction-renderer component * Migrate CashierLocked to TS (#5959) * Fix security hotspot reported by sonarcloud Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: Hamid * limit the number of chunks creating by webpack (#6040) * limit the number of chunks creating by webpack * webpack chunk strategy try 2 * webpack optmzn try 3 * add minchunks count as 30 * webpack max chunks set as 10 * chunk strategy maxchunks updated to 10 * webpack strat minsize rule * webpack strat update try 5 * webpack strat update try6 * Revert "MaryiaF/fix: P/L is not getting updated when a contract is terminated… (#6024)" (#6034) This reverts commit ba506880a588f34b911c9acf85829975b1c48f57. * translations: 📚 sync translations with crowdin (#6037) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * p2p/Floating rate feature (#5494) * Merge branch 'binary-com:master' into floating_rate (#5080) * Nijil / DBot - Add multipliers (#4172) * Retrigger vercel deployment * Init dbot multiplier * Fix es-lint issues * Add contract update dialog validations * logic added to hasAllRequiredBlocks for multipliers * Fix es-lint errors * Update stop loss block description and label * Filter out multipliers in quick-strategy * Fix incorrect rendering of duration/multiplier blocks on workspace when they're dragged out from toolbox * Fix typos * Add missing proptypes and other minor refactors * Fix minor issues + logic * Fix: trade option block not changing according to the selected trade type once it is dragged to workspace first and then plugged to the trade parameters block * Fix: Disable trade option block when plugged inside trade parameters * Remove connection to next statement in trade_defintion_restartonerror block * Make multiplier_stop_loss and multiplier_take_profit independant blocks + other UX improvement Description \n1.Make multiplier_stop_loss and multiplier_take_profit input field shadow blocks. \n2. Add check such that duplicate multiplier_take_profit and multiplier_stop_loss cannot be added to trade_definition_multiplier block. \n3.Show amount limits in trade_definition_multiplier block. * Cleanup workspace when switching between multiplier and other trade options * Remove extensice validation for multiplier_stop_loss block * Show dialog for multiplier contract on stop button click + minor cleanups * Update stop multiplier dialog content * Update stop multiplier dialog content and button actions * Minor bug fix * Fix stop multiplier dialog buttons styling * fix: multiplier contract not bought even after disabling TP/SL block inside multiiplier block * Disable stray blocks and their optional children recursively * fix: recover all pending transactions on page refresh or if client left page mid-contract * Restrict TP/SL blocks to multiplier block + add close button logic for dialog component * Fix profit not showing when it's zero * Add condition for restricted blocks to enable/disable stack option in context menu * Optimised proposal_open_contract call on mount of transaction tab * fix es-lint error * Update logic for recovering open contracts * Fix no-unused-vars error * Refactor code for readability * Refactor code for readability * Add logic to handle action of reset button in toolbar * Remove condition where it enabled the button in run panel while the contract is still closing * Fix default-case expected test error * Add note for multiplier block * Add condition to disable run panel button when multiplier contract is closing * Fix issue where connectWithContractUpdate tried to destructure undefined at first render * Add Learn more help content for multiplier trade option block * Minor change in toggle-card-dialog.jsx file * Refractored help-content from bot-skeleton to bot-web-ui package and updated help content for multiplier trade option block * Fix missing key prop error * Minor change in fix where connectWithContractUpdate tried to destructure undefined * Show banner for bot MF Real & VRTC Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei * Hirad/Cfd reset password modal js to ts (#4706) * Changed cfd-reset-password-modal container from js to ts * fix--Auto styling is done on the components * fix--Separated types from component * fix--Auto styling is done on the components * fix--Added a separate type for errors and Changed the type of current_list * Auto styling is done on the components * fix--Used Record utility type to improve readability * fix--Removed redundant imports and duplicate types * Pulled the latest changes from master * fix--Replaced ReactElement with ReactNode * Pulled from master * Made some changes to pass the tests * fix--Changed ReactNode to ReactElement to pass the tests * fix--Shortened one of the types * Fixed the conflicts Co-authored-by: Matin shafiei * Chore: Added NIN option in IDV dropdown for ng clients (#4970) * fix: payment info issue (#4978) Co-authored-by: Matin shafiei * Bala/Cleanup dashboard (#4967) * refactor: change folder name to appstore * chore: cleanup dashboard svgs * refactor: rename to appstore * remove separate build for dashboard * refactor: rename to appstore * cleanup build * remove appstore assets * fix: api-types auto generation * chore: cleanup dashboard * chore: cleanup appstore build * chore: fix appstore main file path * chore: use consistent configs * chore: refactor store usage to be consistent * chore: cleanup dist and routes * chore: remove old routes config * cleanup routes config * setup trading-hub path * cleanup asset_path * cleanup redirects * fix ts lint issues * fix lint issues * fix lint issue * fix test issues * update tsconfig path * update codeowners * chore: added a space * Update README.md Co-authored-by: Matin shafiei * Maryia/TrackJS_Avoiding_Pushwoosh_Failed_to_fetch_error (#4894) * Maryia/Checking network status before initializing Pushwoosh * Maryia/refactoring Co-authored-by: Matin shafiei * translations: 📚 sync translations with crowdin (#4987) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * salar / Hotfix/multiplier eu (#4989) * Add helper function for EU countries * Show digital options banner to VRTC-only EU clients * Add comment to remove duplicate code * Fix: apply more compliance conditions * Fix issue for EU residence * Apply prettier * Fix mobx issue for residence * Fix: prevent calls on undefined * Fix: check for blockly div first * Apply prettier * export_components_which_needed_to_be_used_in_app_store (#4972) * refactor_payment_agent_component_for_app_store (#4968) * translations: 📚 sync translations with crowdin (#5005) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * refactor: investor password (#4992) * Nuri/Refactor: Refactor compare account (#4969) * refactor compare account * retrigger circleci * retrigger deployment * removed unused text * likhith/OrderConfirmCompleted error status displayed on slow n/w (#4832) * Resolved: #56123 - OrderConfirmCompleted error status displayed on slow n/w * Refactored code * Fixed lint errors * implemented review comment * Resolved eslint issues * Resolved Console.log error * Added comments to changes * Resolved lint errors * Removed unwanted component * fix storybook build (#4997) * MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function (#4892) * MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function * MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function * Maryia/Fix for styles of POI & POA steps in Settings and CFD modals (#4761) * Maryia/fixed styles of poa upload block * Maryia/fixed cfd poa modal for responsive mode * Maryia/fix for POI step style in CFD modal * Maryia/fixed style of upload criteria in CFD modal POA step * Maryia/refactoring as per deriv app code standard * Maryia/replaced px with rem * Maryia/fix for the upload box style requiring nesting inside list * Maryia/fixed POI styles * Hirad/Cfd dashboard container JS to TS (#4941) * Changed cfd-dashboard container from javascript to typescript * fix--Fixed the default export of the cfd-dashboard * Pulled from master * fix--Invisible tab menu should be fixed * Auto styling is done * IDV notification changes and refactoring (#5001) * Akmal / Add trustpilot notification (#4974) * Add trustpilot notification * Fix formatting * Add undefined check * Vijayasree/Manage Account modal from Cashier Onboarding links are broken on iphoneSE (#4948) * Manage Account modal from Cashier Onboarding links are broken on iphone SE * Manage Account modal from Cashier Onboarding links are broken on iphone SE * Manage Account modal from Cashier Onboarding links are broken on iphoneSE * Update account-wizard.scss Co-authored-by: Matin shafiei * likhith/Added jest config and test cases for App-Content component (#4876) * Added jest config and test cases for App-Content component * Added test cases for App Content component * Fixed lint errors * Removed lint errors and configured webpack * Reordered webpack extension array * Implemented review comments * implemented review comments * george / added test for "PaymentAgentList" component (#4825) * added test for "PaymentAgentList" component * fixed a spelling error * refactored code, changed query method * code refactoring * george / added tests for OnRampProviderCard (#4880) * added tests for OnRampProviderCard * code refactoring (add data-testid into Icon component) * naming refactoring data-testid * naming refactoring * add new prop (data_testid) to Icon component * code refactoring using icon prop data_testid * add prop types for data_testid * likhith/Removed unused functions from Cashier container and added test cases (#4821) * likhith/added testcases to cashier-container * added loader check test case * Variable change * Fixed variable scoping * Refactored code inline with naming conventions * Removed code smells * Improved code visibility * Removed unused functionality in CashierComponent * Removed unused imports * Removed unused property and improved test cases * modified input data * Incorporated review comments * Incorporated review comments * Added test cases to order and order-table (#4916) * fix test cases because of refactoring the component (#5029) * Nijil/Pass correct value to SelectNative value prop from PA dropdown (#5034) * fix: pass correct value to SelectNative value prop * minor refactor * translations: 📚 sync translations with crowdin (#5039) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * MaryiaF/fix: bold the menu option when the user has gone by the child… (#4965) * MaryiaF/fix: bold the menu option when the user has gone by the child menu items and then navigated one of them to the corresponding page * MaryiaF/refactor: solution with switching to the bold menu item * MaryiaF/chore: revert intent * MaryiaF/refactor: use Text component instead of spane in toggle-menu-drawer file * MaryiaF/refactor: remove unuseful style and change import * Merge branch 'master' of github.com:binary-com/deriv-app into 57685_2 * MaryiaF/fix: all the sub menus are not supposed to be in bold in first visit, 1 of the sub menu should be bold during the visit * MaryiaF/fix: condition when the menu item should be bold * MaryiaF/fix: remove console.log * Revert "Merge branch 'master' of github.com:binary-com/deriv-app into 57685_2" This reverts commit 2c19bed858d09d2dee7b4ffb939f80617a91972e. Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * test coverage (#4900) Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * Artsem / test coverage (#4890) * test coverage * remove redundant import * fix testid naming * fix testid and elements naming * remove redundant mockProps() Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * Amina/test_coverage_for_poi-verified_component_in_account_package (#5006) * poi-verified-spec * poi-verified-spec Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * Amina/test_coverage_for_poa_unverified_component_in_account_package (#4993) * unverified-spec * poa-unverified Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * Amina/test coverage for poa-submitted (#4990) * test_coverage_for_poa_submitted * fix Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * george / test coverage for "recent transaction" component (#4838) * added tests for RecentTransaction component * fixed condition for cashier transaction icon * removed code duplication * refactored code * code refactoring (add data-testid into Item component) * code refactoring * naming refactoring data-testid * naming refactoring * add new prop (data_testid) to Icon component * code refactoring using icon prop data_testid * add prop types for data_testid Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> * translations: 📚 sync translations with crowdin (#5048) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * update branch with master (#5010) * Maryia/Set notifications together with each handling of notifications (#4958) * Maryia/Set notifications before each handling of notifications * Maryia/style fix to fit in long FR, ES & PT text on the notification button * Fix design for DMT5 investor password reset modal (#4942) * Ako/ Codecov integration (#5053) * build/ add test:ci script to run tests in the ci with different config * ci/ add codecov github action * ci/ workflow update * ci/ update coverage path * ci/ get coverage over all of the files * ci/ get coverage on pull request * Revert "build/ add test:ci script to run tests in the ci with different config" This reverts commit 2771958602f5af3048c334e28868d05f9ff4f6cd. * doc/ add codecov badge to readme file * Vijayasree/Crypto icon in withdrawal page is not shown for specific device IOS (#4976) * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * re-trigger build * re-trigger build * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Crypto icon in withdrawal page is not shown for specific device IOS * Sara / Fixed issue with error handling (#4966) * Fixed issue with error handling * Removed extra code * fixed issue with aggregation methods * MaryiaF/chore: remove consoles (#5059) * Matin/Add: TS files for translation extraction (#5073) * remove appstore package from translations (#5075) Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com> Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com> Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: mitra-fs <64970259+mitra-fs@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini Co-authored-by: sara-fs <55442058+sara-fs@users.noreply.github.com> Co-authored-by: Matin shafiei * Revert "Merge branch 'binary-com:master' into floating_rate (#5080)" (#5081) This reverts commit 725636b267eb434a278976b67c3461ccc2130338. * Artsem / Floating rate banner and warning for existing ads (#4975) * Add floating rate enable banner and warning icon * remove extra function call * remove deprecated conditions * remove conditional render, add todo comment * fix Localize settings * likhith/Created Floating rate custom component (#4971) * Created Floating rate custom component * Removed hardcoded values * Incorporated review comments * Reordered functions as per style guide * Replaced Css units * Incorporated review comments * Empty commit * Minor bug fix * Renamed functions appropriately * Incorporated review comments * Fetching floating rate status from const * Resolved lint errors * Incorporated review comments * incoeporated review comments * Added syles as per UX * Added a comment to explian props * Changed CSS as per BEM standard * Changes naming conventions * Implemented review comments * Refactored code as per comments * Fixed eslint errors * Reverted the changes made * Minor bug fixes * Added currecnt_focus prop * likhith/create floating-rate ad (#4964) * Floating-rate Ui created * Added validations to floating-rate component * Implemented Floating rate component * Added default values for floating rates based on ad type * fixed lint issues * Minor bug fixes * Added store subscriptions * Enhanced InputField component and added floating rate store * Resolved lint errors * Added changes for My Ad screen * Added floate-rate * Added exisiting user update * Added reaction to my-ad store * Edit form * Added edit ad section * Added switch rate modal * Added switch ad dialog * Added banner condition * Added banner condition * Empty commit * Minor bug fixes * Minor bug fixes * removed console logs * Incorporated API changes * Incorporated review comments * Removed duplication * Integrated API with create floting rate ad * Incorporated review comments * Added floating rate error messages * Resolved lint error * Added styling as per UX * Minor bug fix in create ad form * Changes CSS as per BEM * Resolved lint error * Added current_focus to input field * Minor bug fixes for Create ad * Incorporated review comments * Minor bug fix * Removed empty structure * Removed additional switch state * Fixed issue with date banner * Added test cases for Floating rate component * Removed the empty element and replaced with null * Incorporated the changes * fixed incorrect file name * Trigger Build * Added as per naming * Removed localize of 1 * Added review comments * Incorporated changes * Replaced string with constant * Incorporated review comments * Removed un-necessary div * Removed css * Renamed function * Minor bug fixes and incorporated comments * Added fallback * alphabetize observables * Replaced CSS for Ad status * Resoled CSS and functionality bugs * Fixed lint errors * Resolved lint erros * Incorporated review comments * Reduced spacing between the banner * Formatted user input * Fixed failing test case * Added comments to explain functionality * Fetching date and time from server * Renamed function * Refactored code * Added review comments * Resolved decimal round off issue * Fixed Rounding off of decimal digits * Regex change in psoitive integer check * Resolved issue with round off to decimal point * Re-arranged imports * Fixed the testcase * Fixed floating_rate input check * Removed Math.sign * Reverted decimal change * Implemented round of logic for decimal places * refactor: Renamed variables * fix: Round off issue in Create Ad summary * fix: resolved decimal point to 2 digits * Resolved lint errors * fix: Renamed the function * chore: Ad display table rate will be calculated from * fix: test color in dark theme * fix: label changes b/w fixed and floating * fix: invoking api call to fetch the changes * fix: rate synced b/w myads and buy/sell * fix: range offset validation * fix: modified rate property in edit ads * fix: Float rate input suffix * fix: code formatted * fix: setting floating rate to 2 decimals on blur * fix: spacing issue with floating rate input * Trigger build * Trigger build * fix: removed unwanted padding * fix: added ellipse to fix over lapping * fix: removed disabling of floating rate field buttons * fix: resolved issue with error message * fix: Overlapping CSS issues in Mobile * fix: added missing background color for dark theme * fix: removed button highlight in mobile * fix: button higlight issue * fix: display of cursor pointer on scroll * fix: resolved issue with message * fix: Ad change warning message * fix: color for dark mode Co-authored-by: Likhith Kolayari * fix: conflict message not updated * likhith/created edit my ad screen (#4988) * Floating-rate Ui created * Added validations to floating-rate component * Implemented Floating rate component * Added default values for floating rates based on ad type * fixed lint issues * Minor bug fixes * Added store subscriptions * Enhanced InputField component and added floating rate store * Resolved lint errors * Added changes for My Ad screen * Added floate-rate * Added exisiting user update * Added reaction to my-ad store * Edit form * Added edit ad section * Added switch rate modal * Added switch ad dialog * Added banner condition * Added banner condition * Empty commit * Implemented edit ads for floating rates * Inorporated review comment * minor bug fixes * Minor bug fixes * Minor bug fixes * removed console logs * Added rae_type prop * Incorporated API changes * Incorporated API changes * Incorporated review comments * Removed duplication * Integrated API with create floting rate ad * Incorporated review comments * Added floating rate error messages * Resolved lint error * Added styling as per UX * Added styles as per UX * Refactoring code * Css changes to summary component * Trigger Build * Minor bug fix in Create Ad form * Minor bug fix in create ad form * Changes CSS as per BEM * Resolved lint error * Added current_focus to input field * Minor bug fixes for Create ad * Incorporated review comments * Minor bug fix * Removed empty structure * Removed additional switch state * Fixed issue with date banner * Added test cases for Floating rate component * Removed the empty element and replaced with null * Incorporated the changes * fixed incorrect file name * Trigger Build * Added as per naming * Removed localize of 1 * Added review comments * Incorporated changes * Replaced string with constant * Incorporated review comments * Removed un-necessary div * Removed css * Renamed function * Minor bug fixes and incorporated comments * Added fallback * alphabetize observables * Replaced CSS for Ad status * Migrated create ad comments to Edit ad * Resolved lint errors * Fixed lint issues * Resoled CSS and functionality bugs * Fixed lint errors * Resolved lint erros * Incorporated review comments * Reduced spacing between the banner * Formatted user input * Fixed failing test case * Added comments to explain functionality * Fetching date and time from server * Renamed function * Refactored code * Added review comments * Resolved decimal round off issue * Fixed Rounding off of decimal digits * Added test case for create ad * Regex change in psoitive integer check * Added test case to test form values * Resolved decimal round off issue * Added test acss to edit form * Resolved lint errors * Resolved issue with round off to decimal point * Re-arranged imports * Fixed the testcase * Removed unused imports * Fixed floating_rate input check * Removed Math.sign * Reverted decimal change * Implemented round of logic for decimal places * refactor: Renamed variables * refactor: Added fallback condition * fix: added a exchange rate fallback condition * fix: Round off issue in Create Ad summary * fix: resolved decimal point to 2 digits * Resolved lint errors * fix: Renamed the function * chore: Ad display table rate will be calculated from * fix: test color in dark theme * fix: label changes b/w fixed and floating * fix: invoking api call to fetch the changes * fix: rate synced b/w myads and buy/sell * fix: range offset validation * fix: modified rate property in edit ads * fix: Float rate input suffix * fix: code formatted * fix: setting floating rate to 2 decimals on blur * fix: spacing issue with floating rate input * Trigger build * Trigger build * fix: removed unwanted padding * fix: added ellipse to fix over lapping * incorporated changes * fix: removed disabling of floating rate field buttons * fix: resolved issue with error message * fix: Overlapping CSS issues in Mobile * fix: added missing background color for dark theme * fix: removed button highlight in mobile * fix: button higlight issue * fix: display of cursor pointer on scroll * fix: resolved issue with message * fix: modified display of summary in edit ad component * fix: removed spec code * fix: Removed test cases * chore: reverted old commit * feat: Added banner for switch rate * fix: Error message text * fix: incorporated review comments * fix: removed unwanted store condition and added subscription to exchange rates * fix: removed incorrect function call * fix: added a null check * fix: refactored code * ref: Added comments * ref: Refactored code for performance * ref: refactored code * ref: code refactor * ref: Incorporated review comments * Trigger Build * fix: removed fixed size * fix: resolved conflict * fix: moved functionality from component to store * fix: removed unnecessary commenting * ref: renamed cancel action functions * ref: refactored code for increated readability * feat: implemented a function for removing trailing zeros * ref: refactored the code in edit ad summary * fix: reverted decimal round off rules * fix: resolved issue with resetting selected Ad id * fix: switching ad types in edit * fix: issue with edit ad switch * fix: display rate change dialog even when ads are deactivated * fix: disabled activate ad when past date is passed * fix: displaying error message based on the required ad type * fix: banner glitch occurs when data loaded in chunks * fix: enable ads after switch update * fix: Form should not be checked for value change when ad switch is triggered * fix: test to incorporate sign * fix: implemented dynamic type for field in mobile * fix: added css to fix disable styling * fix: enforcing disable bg color for popover * fix: responsive view of switch ad modal * fix: added missing theme color for dark mode * fix: banner width consistancy * fix: incorporated touched state for Payment method Co-authored-by: Likhith Kolayari * likhith/Feature buy sell confirmation (#5487) * Floating-rate Ui created * Added validations to floating-rate component * Implemented Floating rate component * Added default values for floating rates based on ad type * fixed lint issues * Minor bug fixes * Added store subscriptions * Enhanced InputField component and added floating rate store * Resolved lint errors * Added changes for My Ad screen * Added floate-rate * Added exisiting user update * Added reaction to my-ad store * Edit form * Added edit ad section * Added switch rate modal * Added switch ad dialog * Added banner condition * Added banner condition * Empty commit * Minor bug fixes * Minor bug fixes * removed console logs * Incorporated API changes * Incorporated review comments * Removed duplication * Integrated API with create floting rate ad * Incorporated review comments * Added floating rate error messages * Resolved lint error * Added styling as per UX * Minor bug fix in create ad form * Changes CSS as per BEM * Resolved lint error * Added current_focus to input field * Minor bug fixes for Create ad * Incorporated review comments * Minor bug fix * Removed empty structure * Removed additional switch state * Fixed issue with date banner * Added test cases for Floating rate component * Removed the empty element and replaced with null * Incorporated the changes * fixed incorrect file name * Trigger Build * Added as per naming * Removed localize of 1 * Added review comments * Incorporated changes * Replaced string with constant * Incorporated review comments * Removed un-necessary div * Removed css * Renamed function * Minor bug fixes and incorporated comments * Added fallback * alphabetize observables * Replaced CSS for Ad status * Resoled CSS and functionality bugs * Fixed lint errors * Resolved lint erros * Incorporated review comments * Reduced spacing between the banner * Formatted user input * Fixed failing test case * Added comments to explain functionality * Fetching date and time from server * Renamed function * Refactored code * Added review comments * Resolved decimal round off issue * Fixed Rounding off of decimal digits * Regex change in psoitive integer check * Resolved issue with round off to decimal point * Re-arranged imports * Fixed the testcase * Fixed floating_rate input check * Removed Math.sign * Reverted decimal change * Implemented round of logic for decimal places * refactor: Renamed variables * fix: Round off issue in Create Ad summary * fix: resolved decimal point to 2 digits * Resolved lint errors * fix: Renamed the function * chore: Ad display table rate will be calculated from * fix: test color in dark theme * fix: label changes b/w fixed and floating * fix: invoking api call to fetch the changes * fix: rate synced b/w myads and buy/sell * fix: range offset validation * fix: modified rate property in edit ads * fix: Float rate input suffix * fix: code formatted * fix: setting floating rate to 2 decimals on blur * fix: spacing issue with floating rate input * Trigger build * Trigger build * fix: removed unwanted padding * fix: added ellipse to fix over lapping * fix: removed disabling of floating rate field buttons * fix: resolved issue with error message * feat: Implemented floating rate for buy/sell * fix: Overlapping CSS issues in Mobile * fix: added missing background color for dark theme * fix: removed button highlight in mobile * fix: button higlight issue * fix: display of cursor pointer on scroll * fix: resolved issue with message * fix: color for dark mode * fix: buy/sell modal styling * fix: render data in accordian * feat: incorporated expand all accordian * feat: Implemented Expand & Collapse all feature * ref: code refactor * fix: removed console errors * fix: removed unused prop * fix: incorporated review comments * fix: incorporated review comments * fix: incorporated Expamd all button * fix: incorrect prop name in accordion component * fix: incorporated review comments * ref: Removed code duplication * ref: refactored the code * fix: changes px to rem * fix: incorporated rate change error dialog * fix: removed unwanted CSS * fix: renamed porptype in Rate Change modal * ref: code refactored * ref: rate change modal code refactored * ref: Refactored code * fix: css issues related to buy-sell dialog * fix: fixed failing test cases * fix: Added a error code check to display appropriate popups * fix: CSS inssues in Buy-sell modal * fix: css issue of error hintbox * fix: resolved issue with rounding digit in receive amount * fix: blocking order creation when balance is low * fix: css changes to fix disabling form * fix: modal condition to display low balance * fix: blocking user from entering value more than balance * fix: display Form error messages in footer and account balance error in banner * fix: resolved lint errors * ref: changed the TODO comment * ref: fixed the comment * fix: incorporated subscribeWS method * fix: resolved failing testcase issue * fix: removed commented code * fix: display of incorrect efective rate * fix: decimal round off * fix: navigation to buy/sell table when try again is clicked * fix: buy/sell order dialog title to match the design * fix: css issues in buy/sell * fix: design mismatch in order confiormation dialog * ref: Refactored code to reuse functionality * fix: removed commented code * fix: market change update in Advertiser section * fix: re-render on balance change * fix: disabling fields when balance is low * fix: expand/collapse issue * fix: resolved issue with expand and collapse * fix: restricted rate input to 8 characters * fix: resolved console error * fix: file name * fix: fixed failing test case * fix: added order input check against account balance * fix: css issues in add payment method in buy-sell form * fix: validation of sell order * fix: currency format of balance * fix: re-establish n/w connection on reload * ref: Incorporated safety null check * fix: moved low balance banner display to be handled by state Co-authored-by: Likhith Kolayari * farrah/ removed payment method banner in p2p (#5755) * removed transaction time and payment method banners * removed setting of missing payment methods * reverted removal of reduced transaction time banner * likhith/incorporated market rate calculation with 6 decimals (#5770) * feat: incorporated market rate calculation with 6 decimals * ref: refactored code to generate effective rate * ref: removed commented code * fix: round off decimal calculation of effective market rate * fix: formatting decimals in effective rate * fix: set the form to be dirty when PM is selected * fix: checking for change when PM methods are modified * fix: enable button for edit ad * fix: enabling submit method for buy ads * fix: decimal round off issue in buy-sell * fix: display min of 2 decimal points * fix: displying initial value of buy-sell ad * Trigger build * fix: removed unnecessary spacing * Trigger build * fix: effective rate round off in Buy/sell * Trigger build * fix: setting correct ad type * fix: display order rate amount * fix: removed formatted text usage * fix: removed incorrect round off * fix: sunc effective_rate calculation b/w FE & BE (#5910) * fixed order table row spacing (#5900) * fixed post ad button (#5912) * farrah/ update received amount if rate has changed (#5911) * fixed received amount when rate has changed * refactor code * formatted received amount (#5913) * farrah/ fixed input amount validation on buy/sell form (#5928) * fixed input amount validation * refactor code * disabled edit button for temporary banned users (#5926) * Remove duplicate setRemount entry * farrah/ fixed overlapping status in order page (#5950) * fixed overlapping status in order page * refactor code * farrah/ fixed buy and sell form spacing (#5899) * fixed buy and sell form spacing * fixed banner spacing * fixed banner spacing in mobile * fixed spacing on responsive Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com> Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com> Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: mitra-fs <64970259+mitra-fs@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini Co-authored-by: sara-fs <55442058+sara-fs@users.noreply.github.com> Co-authored-by: Matin shafiei Co-authored-by: Likhith Kolayari Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> * translations: 📚 sync translations with crowdin (#6041) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * add minchunks count as 30 * webpack max chunks set as 10 * chunk strategy maxchunks updated to 10 * fixed exchange rate subscription error (#6046) * reverted commit * webpack start try7 * farrah/ fixed sell form validation (#6047) * fixed sell form validation * fixed buy/sell form validations * reset amount with empty field * maxchunks to 25 * webpack strategy update * webpack strategy update minSizeReduction * webpack chunk strategy optimization * re arrange and update configs Co-authored-by: ashrafali-v Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com> Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com> Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com> Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com> Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: mitra-fs <64970259+mitra-fs@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini Co-authored-by: sara-fs <55442058+sara-fs@users.noreply.github.com> Co-authored-by: Matin shafiei Co-authored-by: Likhith Kolayari * MaryiaF/refactor: convert summary-card to ts (#6001) * MaryiaF/refactor: convert summary-card to ts * MaryiaF/refactor: contract-card-loading * MaryiaF/refactor: summary-card * MaryiaF/refactor: SummaryCard Co-authored-by: Yashim Wong * fix(cashier): avoid screen blinking of restricted pages during the first download (#6039) * try submitting an id document instead message removed (#5968) Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> * likith/testing functionality of reset trading password modal (#5823) * feat: test cases on reset-trading password-modal * feat: Added test acses for reset Password modal * fix: renamed data-testid as per guide * fix: created a reusable function containing interaction block * feat: added test case to check navigation reroute * ref: refactored code * ref: renamed the testid * Vinu/Service worker caching (#5887) * service-worker-precaching in progress * added images in runtime caching * added core js file to runtime caching * number of images to be kept at runtime caching kept at 15 * adjusted path for runtimecaching * added html files to caching * removed all files from precaching other than css * fixed pathnames in config.js * added path to cache js-core file * implemented review comments for runtime caching * implementation on review comments in progress * added smartchart-files to precaching * Vinu/Test coverage sent email modal (#5463) * added test coverage for sent-email-modal * fixed linting issue in sent-email-modal * props change in sent-email-modal.spec * fixed linting issue in sent-email-modal.spec * rearragned the order of imports in sent-email-modal.spec * Trigger Build * Trigger Build * implemented review comments in sent-email-modal-spec file * fixed linting issue in sent-email-modal * implemented review comments for sent email modal test coverage * adjusted the sent-email-modal spec file as per new guidlines * implemented review comments in sent-email-modal spec.js file * gave appropriate name to data-testid in sent-email-modal * thisyahlen/ added icon for tether trc20 (#6060) * added icon for tether trc20 * icons revert * fix for test cases * changed tooltip for all the tether coins * fixed the deposit page error and the tusdt lowercase * translations: 📚 sync translations with crowdin (#6174) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> * refactor(confirm component): refactor confirm component, fix tests * Hirad/ Finished MF urgent changes (#6159) * Finished MF urgent changes * Changed the styling of the condition * Jim / Publisher documentation (#6002) * docs: update README.md in publisher * docs: update README.md in publisher * docs: update README.md in publisher * Jim / Components documentation (#6008) * docs: update README.md, add description for valid script and replace lerna bootstrap * docs: remove empty docs * docs: update README.md * docs: update README * chore: fix end of note in README * docs: change note in components README.md * move PositionsDrawerCard from reports to components (#6049) * yauheni/#69488 changing language for closed market redirecting fix (#5999) * yauheni/#69488 changing language for closed market redirecting fix * func name fix * proptypes fix * interval delete fix, is_lang_change moved * store fix for language changing * several attempts of changing fix * closed word translation fix * logout active symbols loading fix * logout redirection to default markets fix Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> * Hirad/ Fixed the issue where landing company was shown for eu users who have… (#6078) * Fixed the issue where landing company was shown for eu users who have just financial options * Changed the naming convention of one_or_two_cards variable * made some changes to the naming according to the suggestions * Pulled from master Co-authored-by: Matin shafiei * Ameerul /Bug 64559 delete pm name handle for long value (#6107) * changed the margin-top for mobile view for buy-sell * merging upstream master * changed the payment methods list modal and wrapped the text for long bank names * hamid/overwrite-overflow-of-app-contents-in-cashier (#5915) * Overwrite overflow of app contents in cashier) * Update packages/cashier/src/containers/cashier/cashier.scss Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com> * Update branch and Enhance style Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com> * george / rm70573 / payment agent error visibility (#6023) * fix: pa error visibility * fix failed test * yauheni/70841 trackJS setUserId should be string (#6139) Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> * Hirad/ Account switcher demo total asset change (#5622) * Account switcher total asset is shown correctly * Changed currency that is shown * fix--api call is put in useEffect now * Made the condition shorter * Removed the redundant parameter in the exchange_rates call * Pulled from master * Pulled from master * Added currency exchange to real account tab of account switcher * translations: 📚 sync translations with crowdin (#6199) Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: suisin-deriv <103026762+suisin-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com> Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: Hamid Co-authored-by: ashraf-deriv <97999159+ashraf-deriv@users.noreply.github.com> Co-authored-by: ashrafali-v Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com> Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com> Co-authored-by: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com> Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com> Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: mitra-fs <64970259+mitra-fs@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini Co-authored-by: sara-fs <55442058+sara-fs@users.noreply.github.com> Co-authored-by: Matin shafiei Co-authored-by: Likhith Kolayari Co-authored-by: maryiafrantsava-binary <103181650+maryiafrantsava-binary@users.noreply.github.com> Co-authored-by: Yashim Wong Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com> Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Co-authored-by: jim-deriv <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: mahdiyeh-fs <82078941+mahdiyeh-fs@users.noreply.github.com> Co-authored-by: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> * Revert "george / fix conflicts in pa-redesign branch (#6188)" (#6212) This reverts commit 93f4389bb039eb2cb8f526e3613222b3dcebb0a6. * style(transfer-confirm): fix class name (#6213) * george / rm73705 / fix payment agent search last symbol remaining (#6234) * style(transfer-confirm): fix class name * fix(payment agent search): fix payment agent search last symbol remaining * george / fix failed test in payment-agent-container (#6376) * style(transfer-confirm): fix class name * fix(payment agent search): fix payment agent search last symbol remaining * test(payment agent container): fix failed test Co-authored-by: Nijil Nirmal Co-authored-by: vinu-deriv Co-authored-by: suisin-deriv <103026762+suisin-deriv@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com> Co-authored-by: vinu-deriv <100689171+vinu-deriv@users.noreply.github.com> Co-authored-by: Bahar Co-authored-by: Hamid Co-authored-by: ashraf-deriv <97999159+ashraf-deriv@users.noreply.github.com> Co-authored-by: ashrafali-v Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com> Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com> Co-authored-by: Salar Hafezi Co-authored-by: Matin shafiei Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com> Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com> Co-authored-by: balakrishna-binary <56330681+balakrishna-binary@users.noreply.github.com> Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com> Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com> Co-authored-by: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com> Co-authored-by: Akmal Djumakhodjaev Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com> Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com> Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: mitra-fs <64970259+mitra-fs@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini Co-authored-by: sara-fs <55442058+sara-fs@users.noreply.github.com> Co-authored-by: Matin shafiei Co-authored-by: Likhith Kolayari Co-authored-by: maryiafrantsava-binary <103181650+maryiafrantsava-binary@users.noreply.github.com> Co-authored-by: Yashim Wong Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com> Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Co-authored-by: jim-deriv <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: mahdiyeh-fs <82078941+mahdiyeh-fs@users.noreply.github.com> Co-authored-by: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com> Co-authored-by: George Usynin --- packages/cashier/package.json | 1 + .../__tests__/cashier-search-box.spec.js | 63 +++ .../cashier-search-box/cashier-search-box.jsx | 76 ++++ .../cashier-search-box.scss | 20 + .../components/cashier-search-box/index.js | 3 + .../components/error-dialog/error-dialog.tsx | 4 +- .../__tests__/transfer-confirm.spec.tsx | 118 +++--- .../transfer-confirm/transfer-confirm.scss | 48 ++- .../transfer-confirm/transfer-confirm.tsx | 98 +++-- .../src/containers/cashier/cashier.scss | 24 +- .../payment-agent-transfer-confirm.spec.js | 81 ++-- .../payment-agent-transfer-confirm.jsx | 84 ++-- .../payment-agent-transfer-confirm.scss | 20 - .../payment-agent-card-description.spec.js | 38 ++ .../__tests__/payment-agent-card.spec.js | 16 + .../constants/payment-agent-providers.js | 44 +++ .../helpers/__tests__/heplers.spec.js | 47 +++ .../payment-agent-card/helpers/helpers.js | 26 ++ .../payment-agent-card/helpers/index.js | 1 + .../payment-agent/payment-agent-card/index.js | 3 + .../payment-agent-card-description.jsx | 54 +++ .../payment-agent-card/payment-agent-card.jsx | 36 ++ .../payment-agent-card.scss | 54 +++ .../__tests__/payment-agent-container.spec.js | 146 +++++++ .../payment-agent-container/index.js | 3 + .../payment-agent-container.jsx | 202 ++++++++++ ...payment-agent-card-deposit-details.spec.js | 33 ++ .../payment-agent-deposit-details/index.js | 3 + .../payment-agent-deposit-details.jsx | 91 +++++ .../payment-agent-deposit-details.scss | 34 ++ .../payment-agent-deposit/index.js | 3 - .../payment-agent-deposit.jsx | 100 ----- .../__tests__/payment-agent-detail.spec.js | 44 +++ .../payment-agent-detail/index.js | 3 + .../payment-agent-detail.jsx | 72 ++++ .../payment-agent-detail.scss | 13 + .../__tests__/payment-agent-details.spec.js | 33 -- .../payment-agent-details/index.js | 3 - .../payment-agent-details.jsx | 75 ---- .../payment-agent-details.scss | 44 --- .../payment-agent-disclaimer/index.js | 3 + .../payment-agent-disclaimer.jsx | 23 ++ .../payment-agent-disclaimer.scss | 12 + .../__tests__/payment-agent-list.spec.js | 22 +- .../payment-agent-list/payment-agent-list.jsx | 130 ++++--- .../payment-agent-list.scss | 237 +++++------- ...payment-agent-listed-withdraw-form.spec.js | 145 +++++++ .../index.js | 3 + .../payment-agent-listed-withdraw-form.jsx | 196 ++++++++++ .../payment-agent-listed-withdraw-form.scss | 39 ++ .../__tests__/payment-agent-receipt.spec.js | 85 ++-- .../payment-agent-receipt.jsx | 142 ++++--- .../payment-agent-receipt.scss | 121 +++--- .../payment-agent-search-box/index.js | 3 + .../payment-agent-search-box.jsx | 46 +++ .../payment-agent-withdraw-form.spec.js | 122 ++++++ .../index.js | 3 + .../payment-agent-unlisted-withdraw-form.jsx | 182 +++++++++ .../payment-agent-unlisted-withdraw-form.scss | 58 +++ .../payment-agent-withdraw-confirm.spec.js | 125 +++--- .../payment-agent-withdraw-confirm.jsx | 14 +- .../payment-agent-withdraw-form.spec.js | 134 ------- .../payment-agent-withdraw-form/index.js | 3 - .../payment-agent-withdraw-form.jsx | 365 ------------------ .../payment-agent-withdraw-form.scss | 101 ----- .../src/pages/payment-agent/payment-agent.jsx | 8 +- .../__tests__/payment-agent-store.spec.js | 111 +++++- packages/cashier/src/stores/general-store.js | 2 + .../cashier/src/stores/payment-agent-store.js | 73 +++- .../src/components/dropdown/dropdown.jsx | 1 + .../icon/cashier/ic-cashier-add.svg | 2 +- .../icon/cashier/ic-cashier-air-tm-dark.svg | 2 +- .../icon/cashier/ic-cashier-air-tm-light.svg | 2 +- .../icon/cashier/ic-cashier-ali-pay-dark.svg | 2 +- .../icon/cashier/ic-cashier-ali-pay-light.svg | 2 +- .../icon/cashier/ic-cashier-alipay-dark.svg | 1 + .../icon/cashier/ic-cashier-alipay-light.svg | 1 + .../icon/cashier/ic-cashier-apple-pay.svg | 2 +- .../icon/cashier/ic-cashier-authenticate.svg | 2 +- .../icon/cashier/ic-cashier-bank-bri.svg | 2 +- .../icon/cashier/ic-cashier-bank-dark.svg | 1 + .../icon/cashier/ic-cashier-bank-light.svg | 1 + .../icon/cashier/ic-cashier-bank-transfer.svg | 2 +- .../icon/cashier/ic-cashier-bankbri-dark.svg | 1 + .../icon/cashier/ic-cashier-bankbri-light.svg | 1 + .../cashier/ic-cashier-banxa-small-dark.svg | 2 +- .../cashier/ic-cashier-banxa-small-light.svg | 2 +- .../icon/cashier/ic-cashier-bca-dark.svg | 1 + .../icon/cashier/ic-cashier-bca-light.svg | 1 + .../icon/cashier/ic-cashier-bca.svg | 2 +- .../icon/cashier/ic-cashier-bch-dark.svg | 1 + .../icon/cashier/ic-cashier-bch-light.svg | 1 + .../icon/cashier/ic-cashier-bitcoin-dark.svg | 2 +- .../icon/cashier/ic-cashier-bitcoin-light.svg | 2 +- .../cashier/ic-cashier-blueshyft-dark.svg | 2 +- .../cashier/ic-cashier-blueshyft-light.svg | 2 +- .../icon/cashier/ic-cashier-bni-dark.svg | 1 + .../icon/cashier/ic-cashier-bni-light.svg | 1 + .../icon/cashier/ic-cashier-card-dark.svg | 1 + .../icon/cashier/ic-cashier-card-light.svg | 1 + .../ic-cashier-cebuana-lhuillier-dark.svg | 2 +- .../ic-cashier-cebuana-lhuillier-light.svg | 2 +- .../cashier/ic-cashier-changelly-dark.svg | 2 +- .../cashier/ic-cashier-changelly-light.svg | 2 +- .../cashier/ic-cashier-changelly-row-dark.svg | 2 +- .../ic-cashier-changelly-row-light.svg | 2 +- .../icon/cashier/ic-cashier-changelly.svg | 2 +- .../icon/cashier/ic-cashier-cimb-niaga.svg | 2 +- .../cashier/ic-cashier-cimbniaga-dark.svg | 1 + .../cashier/ic-cashier-cimbniaga-light.svg | 1 + .../icon/cashier/ic-cashier-clipboard.svg | 2 +- .../cashier/ic-cashier-commission-deposit.svg | 1 + .../ic-cashier-commission-withdrawal.svg | 1 + .../icon/cashier/ic-cashier-crypto-dark.svg | 1 + .../icon/cashier/ic-cashier-crypto-light.svg | 1 + .../icon/cashier/ic-cashier-dai-dark.svg | 1 + .../icon/cashier/ic-cashier-dai-light.svg | 1 + .../icon/cashier/ic-cashier-deposit-lock.svg | 2 +- .../icon/cashier/ic-cashier-deposit.svg | 2 +- .../cashier/ic-cashier-diamondbank-dark.svg | 1 + .../cashier/ic-cashier-diamondbank-light.svg | 1 + .../icon/cashier/ic-cashier-directa-dark.svg | 2 +- .../icon/cashier/ic-cashier-directa-light.svg | 2 +- .../icon/cashier/ic-cashier-dp2p-blocked.svg | 2 +- .../icon/cashier/ic-cashier-dp2p.svg | 2 +- .../cashier/ic-cashier-dragon-phoenix.svg | 2 +- .../icon/cashier/ic-cashier-error.svg | 2 +- .../icon/cashier/ic-cashier-eth-dark.svg | 1 + .../icon/cashier/ic-cashier-eth-light.svg | 1 + .../icon/cashier/ic-cashier-ethereum-dark.svg | 2 +- .../cashier/ic-cashier-ethereum-light.svg | 2 +- .../icon/cashier/ic-cashier-ewallet-dark.svg | 2 +- .../icon/cashier/ic-cashier-ewallet-light.svg | 2 +- .../cashier/ic-cashier-firstbank-dark.svg | 1 + .../cashier/ic-cashier-firstbank-light.svg | 1 + .../icon/cashier/ic-cashier-flexepin-dark.svg | 2 +- .../cashier/ic-cashier-flexepin-light.svg | 2 +- .../icon/cashier/ic-cashier-fps-dark.svg | 2 +- .../icon/cashier/ic-cashier-fps-light.svg | 2 +- .../cashier/ic-cashier-funds-protection.svg | 2 +- .../icon/cashier/ic-cashier-go-pay-dark.svg | 2 +- .../icon/cashier/ic-cashier-go-pay-light.svg | 2 +- .../icon/cashier/ic-cashier-gtbank-dark.svg | 1 + .../icon/cashier/ic-cashier-gtbank-light.svg | 1 + .../cashier/ic-cashier-help-to-pay-dark.svg | 2 +- .../cashier/ic-cashier-help-to-pay-light.svg | 2 +- .../icon/cashier/ic-cashier-icbc-dark.svg | 1 + .../icon/cashier/ic-cashier-icbc-light.svg | 1 + .../icon/cashier/ic-cashier-ideal.svg | 2 +- .../cashier/ic-cashier-insta-pay-dark.svg | 2 +- .../cashier/ic-cashier-insta-pay-light.svg | 2 +- .../ic-cashier-instant-bank-transfer-dark.svg | 2 +- ...ic-cashier-instant-bank-transfer-light.svg | 2 +- .../cashier/ic-cashier-interac-etransfer.svg | 2 +- .../ic-cashier-libertyreserve-dark.svg | 1 + .../ic-cashier-libertyreserve-light.svg | 1 + .../cashier/ic-cashier-lite-coin-dark.svg | 2 +- .../cashier/ic-cashier-lite-coin-light.svg | 2 +- .../ic-cashier-local-payment-methods-dark.svg | 2 +- ...ic-cashier-local-payment-methods-light.svg | 2 +- .../icon/cashier/ic-cashier-locked.svg | 2 +- .../icon/cashier/ic-cashier-maestro.svg | 2 +- .../icon/cashier/ic-cashier-mandiri-dark.svg | 1 + .../icon/cashier/ic-cashier-mandiri-light.svg | 1 + .../icon/cashier/ic-cashier-mandiri-pay.svg | 2 +- .../ic-cashier-mandirisyariah-dark.svg | 1 + .../ic-cashier-mandirisyariah-light.svg | 1 + .../cashier/ic-cashier-mastercard-dark.svg | 2 +- .../cashier/ic-cashier-mastercard-light.svg | 2 +- .../cashier/ic-cashier-maximum-withdrawal.svg | 1 + .../cashier/ic-cashier-minimum-withdrawal.svg | 1 + .../icon/cashier/ic-cashier-minus.svg | 2 +- .../cashier/ic-cashier-moneygram-dark.svg | 1 + .../cashier/ic-cashier-moneygram-light.svg | 1 + .../cashier/ic-cashier-ngan-loung-dark.svg | 2 +- .../cashier/ic-cashier-ngan-loung-light.svg | 2 +- .../icon/cashier/ic-cashier-no-ads.svg | 2 +- .../icon/cashier/ic-cashier-no-balance.svg | 2 +- .../icon/cashier/ic-cashier-no-orders.svg | 2 +- .../icon/cashier/ic-cashier-off-ramp.svg | 2 +- .../icon/cashier/ic-cashier-on-ramp.svg | 2 +- .../cashier/ic-cashier-online-naira-dark.svg | 2 +- .../cashier/ic-cashier-online-naira-light.svg | 2 +- .../icon/cashier/ic-cashier-p2p-user.svg | 2 +- .../icon/cashier/ic-cashier-pay-id-dark.svg | 2 +- .../icon/cashier/ic-cashier-pay-id-light.svg | 2 +- .../cashier/ic-cashier-pay-livre-dark.svg | 2 +- .../cashier/ic-cashier-pay-livre-light.svg | 2 +- .../icon/cashier/ic-cashier-pay-now-dark.svg | 2 +- .../icon/cashier/ic-cashier-pay-now-light.svg | 2 +- .../cashier/ic-cashier-pay-retailers-dark.svg | 2 +- .../ic-cashier-pay-retailers-light.svg | 2 +- .../icon/cashier/ic-cashier-paypal-dark.svg | 1 + .../icon/cashier/ic-cashier-paypal-light.svg | 1 + .../cashier/ic-cashier-perfect-money-dark.svg | 2 +- .../ic-cashier-perfect-money-light.svg | 2 +- .../cashier/ic-cashier-permatabank-dark.svg | 1 + .../cashier/ic-cashier-permatabank-light.svg | 1 + .../icon/cashier/ic-cashier-poli-dark.svg | 2 +- .../icon/cashier/ic-cashier-poli-light.svg | 2 +- .../cashier/ic-cashier-post-bill-pay-dark.svg | 2 +- .../ic-cashier-post-bill-pay-light.svg | 2 +- .../cashier/ic-cashier-prompt-pay-dark.svg | 2 +- .../cashier/ic-cashier-prompt-pay-light.svg | 2 +- .../icon/cashier/ic-cashier-qr-code-dark.svg | 2 +- .../icon/cashier/ic-cashier-qr-code-light.svg | 2 +- .../icon/cashier/ic-cashier-search.svg | 1 + .../icon/cashier/ic-cashier-send-email.svg | 2 +- .../icon/cashier/ic-cashier-sepa-dark.svg | 2 +- .../icon/cashier/ic-cashier-sepa-light.svg | 2 +- .../icon/cashier/ic-cashier-sofort.svg | 2 +- .../icon/cashier/ic-cashier-tether-dark.svg | 2 +- .../icon/cashier/ic-cashier-tether-light.svg | 2 +- .../icon/cashier/ic-cashier-top-up.svg | 2 +- .../icon/cashier/ic-cashier-upi-dark.svg | 2 +- .../icon/cashier/ic-cashier-upi-light.svg | 2 +- .../icon/cashier/ic-cashier-usd-coin-dark.svg | 2 +- .../cashier/ic-cashier-usd-coin-light.svg | 2 +- .../cashier/ic-cashier-verification-badge.svg | 2 +- .../cashier/ic-cashier-vertical-ellipsis.svg | 2 +- .../icon/cashier/ic-cashier-verve-dark.svg | 1 + .../icon/cashier/ic-cashier-verve-light.svg | 1 + .../icon/cashier/ic-cashier-viettle-pay.svg | 2 +- .../icon/cashier/ic-cashier-visa-dark.svg | 2 +- .../icon/cashier/ic-cashier-visa-light.svg | 2 +- .../icon/cashier/ic-cashier-wallet.svg | 2 +- .../cashier/ic-cashier-wechatpay-dark.svg | 1 + .../cashier/ic-cashier-wechatpay-light.svg | 1 + .../cashier/ic-cashier-withdrawal-lock.svg | 2 +- .../icon/cashier/ic-cashier-withdrawal.svg | 2 +- .../icon/cashier/ic-cashier-wyre-dark.svg | 2 +- .../icon/cashier/ic-cashier-wyre-light.svg | 2 +- .../icon/cashier/ic-cashier-xanpool-dark.svg | 2 +- .../icon/cashier/ic-cashier-xanpool-light.svg | 2 +- .../cashier/ic-cashier-xanpool-small-dark.svg | 2 +- .../ic-cashier-xanpool-small-light.svg | 2 +- .../cashier/ic-cashier-zenithbank-dark.svg | 1 + .../cashier/ic-cashier-zenithbank-light.svg | 1 + .../components/icon/cashier/ic-cashier.svg | 2 +- .../icon/common/ic-close-circle-red.svg | 1 + .../icon/common/ic-email-outline-new.svg | 1 + .../components/src/components/icon/icons.js | 55 +++ packages/components/stories/icon/icons.js | 58 ++- .../App/Containers/Layout/app-contents.jsx | 11 + packages/core/src/Stores/ui-store.js | 6 + .../advertiser-page/advertiser-page.scss | 2 +- packages/shared/src/index.js | 1 + packages/shared/src/utils/array/array.js | 9 + packages/shared/src/utils/array/index.js | 1 + .../shared/src/utils/string/string_util.js | 2 + 250 files changed, 3149 insertions(+), 1653 deletions(-) create mode 100644 packages/cashier/src/components/cashier-search-box/__tests__/cashier-search-box.spec.js create mode 100644 packages/cashier/src/components/cashier-search-box/cashier-search-box.jsx create mode 100644 packages/cashier/src/components/cashier-search-box/cashier-search-box.scss create mode 100644 packages/cashier/src/components/cashier-search-box/index.js delete mode 100644 packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.scss create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card-description.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/constants/payment-agent-providers.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/__tests__/heplers.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/helpers.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card-description.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.scss create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-container/__tests__/payment-agent-container.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-container/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/__tests__/payment-agent-card-deposit-details.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.scss delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit/index.js delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-deposit/payment-agent-deposit.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-detail/__tests__/payment-agent-detail.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-detail/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.scss delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-details/__tests__/payment-agent-details.spec.js delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-details/index.js delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.jsx delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.scss create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.scss create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/__tests__/payment-agent-listed-withdraw-form.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.scss create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-search-box/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-search-box/payment-agent-search-box.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/__tests__/payment-agent-withdraw-form.spec.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/index.js create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/payment-agent-unlisted-withdraw-form.jsx create mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/payment-agent-unlisted-withdraw-form.scss delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/__tests__/payment-agent-withdraw-form.spec.js delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/index.js delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.jsx delete mode 100644 packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.scss create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-alipay-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-alipay-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bank-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bankbri-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bankbri-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bca-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bca-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bch-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bch-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bni-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-bni-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-card-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-card-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-commission-deposit.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-commission-withdrawal.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-crypto-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-crypto-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-dai-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-dai-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-diamondbank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-diamondbank-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-eth-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-eth-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-firstbank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-firstbank-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-gtbank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-gtbank-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-icbc-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-icbc-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-mandiri-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-mandiri-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-maximum-withdrawal.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-minimum-withdrawal.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-moneygram-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-moneygram-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-paypal-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-paypal-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-permatabank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-permatabank-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-search.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-verve-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-verve-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-wechatpay-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-wechatpay-light.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-zenithbank-dark.svg create mode 100644 packages/components/src/components/icon/cashier/ic-cashier-zenithbank-light.svg create mode 100644 packages/components/src/components/icon/common/ic-close-circle-red.svg create mode 100644 packages/components/src/components/icon/common/ic-email-outline-new.svg create mode 100644 packages/shared/src/utils/array/array.js create mode 100644 packages/shared/src/utils/array/index.js diff --git a/packages/cashier/package.json b/packages/cashier/package.json index f5921685e5b4..bc48d4ce94e5 100644 --- a/packages/cashier/package.json +++ b/packages/cashier/package.json @@ -44,6 +44,7 @@ "classnames": "^2.2.6", "formik": "^2.1.4", "loadjs": "^4.2.0", + "lodash.debounce": "^4.0.8", "mobx": "^5.15.7", "mobx-react": "6.3.1", "moment": "^2.29.2", diff --git a/packages/cashier/src/components/cashier-search-box/__tests__/cashier-search-box.spec.js b/packages/cashier/src/components/cashier-search-box/__tests__/cashier-search-box.spec.js new file mode 100644 index 000000000000..cb912390b92f --- /dev/null +++ b/packages/cashier/src/components/cashier-search-box/__tests__/cashier-search-box.spec.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { fireEvent, screen, render, waitFor } from '@testing-library/react'; +import CashierSearchBox from '../cashier-search-box'; + +describe('', () => { + const props = { + onClear: jest.fn(), + onSearch: jest.fn(), + placeholder: 'Search placeholder', + setIsSearchLoading: jest.fn(), + }; + + it('should have close icon if there is a text in input field', () => { + render(); + + const el_search_input = screen.getByPlaceholderText('Search placeholder'); + fireEvent.change(el_search_input, { target: { value: 'hello' } }); + + expect(screen.getByTestId('dt_close_icon')).toBeInTheDocument(); + }); + + it('should trigger onClear callback when the user clicks on close icon', () => { + render(); + + const el_search_input = screen.getByPlaceholderText('Search placeholder'); + fireEvent.change(el_search_input, { target: { value: 'hello' } }); + const el_close_icon = screen.getByTestId('dt_close_icon'); + fireEvent.click(el_close_icon); + + expect(props.onClear).toHaveBeenCalledTimes(1); + }); + + it('should not trigger setTimeout callback (formSubmit) when the user presses backspace button on empty search input', () => { + jest.useFakeTimers(); + jest.spyOn(global, 'setTimeout'); + render(); + + const el_search_input = screen.getByPlaceholderText('Search placeholder'); + fireEvent.keyDown(el_search_input); + + expect(props.setIsSearchLoading).not.toHaveBeenCalled(); + expect(setTimeout).not.toHaveBeenCalled(); + jest.useRealTimers(); + }); + + it('should trigger setIsSearchLoading, onSearch and setTimeout callbacks when the user enters the search term', async () => { + jest.useFakeTimers(); + jest.spyOn(global, 'setTimeout'); + + render(); + + const el_search_input = screen.getByPlaceholderText('Search placeholder'); + await waitFor(() => { + fireEvent.change(el_search_input, { target: { value: 'hello' } }); + fireEvent.keyUp(el_search_input); + + expect(props.setIsSearchLoading).toHaveBeenCalled(); + expect(setTimeout).toHaveBeenCalled(); + expect(props.onSearch).toHaveBeenCalled(); + }); + jest.useRealTimers(); + }); +}); diff --git a/packages/cashier/src/components/cashier-search-box/cashier-search-box.jsx b/packages/cashier/src/components/cashier-search-box/cashier-search-box.jsx new file mode 100644 index 000000000000..a2b16f25dda4 --- /dev/null +++ b/packages/cashier/src/components/cashier-search-box/cashier-search-box.jsx @@ -0,0 +1,76 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { Field as FormField, Formik, Form } from 'formik'; +import { Icon, Input } from '@deriv/components'; +import './cashier-search-box.scss'; + +const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_term, setIsSearchLoading }) => { + React.useEffect(() => { + return onClear; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const onSearchClear = setFieldValue => { + setFieldValue('search', ''); + onClear(); + }; + + const onSearchKeyUpDown = (submitForm, search) => { + if (!search.trim() && search_term) { + onClear(); + } else if (!search.trim()) return; + + setIsSearchLoading(true); + submitForm(); + }; + + const onSearchSubmit = ({ search }) => { + onSearch(search); + }; + + return ( +
+ + {({ submitForm, values: { search }, setFieldValue }) => ( +
+ + {({ field }) => ( + onSearchKeyUpDown(submitForm, search)} + onKeyDown={() => onSearchKeyUpDown(submitForm, search)} + leading_icon={} + trailing_icon={ + search && ( + onSearchClear(setFieldValue)} + /> + ) + } + /> + )} + +
+ )} + +
+ ); +}; + +CashierSearchBox.propTypes = { + className: PropTypes.string, + onClear: PropTypes.func, + onSearch: PropTypes.func, + placeholder: PropTypes.string, + search_term: PropTypes.string, + setIsSearchLoading: PropTypes.func, +}; + +export default CashierSearchBox; diff --git a/packages/cashier/src/components/cashier-search-box/cashier-search-box.scss b/packages/cashier/src/components/cashier-search-box/cashier-search-box.scss new file mode 100644 index 000000000000..4f54490be765 --- /dev/null +++ b/packages/cashier/src/components/cashier-search-box/cashier-search-box.scss @@ -0,0 +1,20 @@ +.cashier-search-box { + width: 100%; + margin-right: 1.6rem; + .dc-input { + margin-bottom: 0; + height: 3.2rem; + overflow: hidden; + &__field { + padding: 0.6rem 3.2rem; + height: 3.2rem; + } + &__leading-icon { + margin-left: 0.8rem; + top: 0.8rem; + } + &__trailing-icon { + cursor: pointer; + } + } +} diff --git a/packages/cashier/src/components/cashier-search-box/index.js b/packages/cashier/src/components/cashier-search-box/index.js new file mode 100644 index 000000000000..0be63590e6ce --- /dev/null +++ b/packages/cashier/src/components/cashier-search-box/index.js @@ -0,0 +1,3 @@ +import CashierSearchBox from './cashier-search-box.jsx'; + +export default CashierSearchBox; diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx index b8419cb429c7..7fb9f6c79b81 100644 --- a/packages/cashier/src/components/error-dialog/error-dialog.tsx +++ b/packages/cashier/src/components/error-dialog/error-dialog.tsx @@ -7,6 +7,7 @@ import { connect } from 'Stores/connect'; import { TRootStore, TError, TReactElement } from 'Types'; type TErrorDialogProps = { + className: string; disableApp: () => void; enableApp: () => void; error: TError | Record; @@ -21,7 +22,7 @@ type TSetDetails = { has_close_icon?: boolean; }; -const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) => { +const ErrorDialog = ({ className, disableApp, enableApp, error = {} }: TErrorDialogProps) => { const history = useHistory(); const [is_visible, setIsVisible] = React.useState(false); const [details, setDetails] = React.useState({ @@ -126,6 +127,7 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) = title={details.title} confirm_button_text={details.confirm_button_text} cancel_button_text={details.cancel_button_text} + className={className} onConfirm={() => { if (typeof details.onConfirm === 'function') { details.onConfirm(); diff --git a/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx b/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx index e02338c17588..a823f721d407 100644 --- a/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx +++ b/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx @@ -1,6 +1,4 @@ import React from 'react'; -import { Money } from '@deriv/components'; -import { Localize } from '@deriv/translations'; import { fireEvent, render, screen } from '@testing-library/react'; import TransferConfirm from '../transfer-confirm'; @@ -10,9 +8,8 @@ jest.mock('Stores/connect', () => ({ connect: () => Component => Component, })); -let modal_root_el; - describe('', () => { + let modal_root_el; beforeAll(() => { modal_root_el = document.createElement('div'); modal_root_el.setAttribute('id', 'modal_root'); @@ -22,90 +19,97 @@ describe('', () => { afterAll(() => { document.body.removeChild(modal_root_el); }); + const props = { data: [ - { key: 'pa', label: 'Payment agent', value: 'Payment Agent of CR90000561 (Created from Script)' }, - { key: 'amount', label: 'Amount', value: }, - { key: 'test', label: 'test', value: ['test1', 'test2'] }, + { key: '1', label: 'label 1', value: 'value 1' }, + { key: '2', label: 'label 2', value: ['value 2', 'value 3'] }, ], - header: 'Please confirm the transaction details in order to complete the withdrawal:', + error: {}, onClickBack: jest.fn(), onClickConfirm: jest.fn(), - warning_messages: [ - , - , - ], }; - it('should show proper icon, header, messages and buttons', () => { + it('should show proper icon, messages and buttons', () => { render(); - expect(screen.getByTestId('dti_confirm_details_icon')).toBeInTheDocument(); - expect( - screen.getByText('Please confirm the transaction details in order to complete the withdrawal:') - ).toBeInTheDocument(); - expect(screen.getByText('Payment agent')).toBeInTheDocument(); - expect(screen.getByText('Payment Agent of CR90000561 (Created from Script)')).toBeInTheDocument(); - expect(screen.getByText('Amount')).toBeInTheDocument(); - expect(screen.getByText('100.00 USD')).toBeInTheDocument(); - expect(screen.getByText('test')).toBeInTheDocument(); - expect(screen.getByText('test1')).toBeInTheDocument(); - expect(screen.getByText('test2')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument(); + const [back_btn, transfer_now_btn] = screen.getAllByRole('button'); + + expect(screen.getByTestId('dt_red_warning_icon')).toBeInTheDocument(); + expect(screen.getByText('label 1')).toBeInTheDocument(); + expect(screen.getByText('value 1')).toBeInTheDocument(); + expect(screen.getByText('label 2')).toBeInTheDocument(); + expect(screen.getByText('value 2')).toBeInTheDocument(); + expect(screen.getByText('value 3')).toBeInTheDocument(); + expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(screen.getByText(/please ensure/i)).toBeInTheDocument(); + expect(screen.getByText(/all details/i)).toBeInTheDocument(); + expect(screen.getByText(/are/i)).toBeInTheDocument(); + expect(screen.getByText(/correct/i)).toBeInTheDocument(); + expect(screen.getByText(/before making your transfer/i)).toBeInTheDocument(); + expect(screen.getByText(/we/i)).toBeInTheDocument(); + expect(screen.getByText(/do not/i)).toBeInTheDocument(); + expect(screen.getByText(/guarantee a refund if you make a wrong transfer/i)).toBeInTheDocument(); + expect(back_btn).toBeInTheDocument(); + expect(transfer_now_btn).toBeInTheDocument(); + }); + + it('should show error messages and button', () => { + render( + + ); + + expect(screen.getByText('Cashier Error')).toBeInTheDocument(); + expect(screen.getByText('error_message')).toBeInTheDocument(); + expect(screen.getAllByRole('button')[2]).toBeInTheDocument(); }); - it('should trigger onClick callback when the client clicks on Back button', () => { + it('should trigger onClickBack method when the client clicks on Back button', () => { render(); - const el_back_btn = screen.getByRole('button', { name: 'Back' }); - fireEvent.click(el_back_btn); + const [back_btn, _] = screen.getAllByRole('button'); + fireEvent.click(back_btn); + expect(props.onClickBack).toHaveBeenCalledTimes(1); }); - it('should trigger onClick callback when the client clicks on Confirm button', () => { + it('should enable Transfer now button when checkbox is checked', () => { render(); - const el_confirm_btn = screen.getByRole('button', { name: 'Confirm' }); - fireEvent.click(el_confirm_btn); - expect(props.onClickConfirm).toHaveBeenCalledTimes(1); - }); + const el_checkbox = screen.getByRole('checkbox'); + const [_, transfer_now_btn] = screen.getAllByRole('button'); + fireEvent.click(el_checkbox); - it('should show error message', () => { - render(); - - expect(screen.getByText('Error message')).toBeInTheDocument(); + expect(transfer_now_btn).toBeEnabled(); }); - - it('should show warning messages', () => { - render(); + it('should show proer checkbox label text when is_payment_agent_withdraw property is equal to true/false', () => { + const { rerender } = render(); expect( - screen.getByText( - 'Remember, it’s solely your responsibility to ensure the transfer is made to the correct account.' - ) + screen.getByLabelText('I confirm that I have verified the payment agent’s transfer information.') ).toBeInTheDocument(); - expect(screen.getByText('We do not guarantee a refund if you make a wrong transfer.')).toBeInTheDocument(); - }); - it('should show checkbox when is_payment_agent_transfer property is equal to true', () => { - render(); + rerender(); expect( screen.getByLabelText('I confirm that I have verified the client’s transfer information.') ).toBeInTheDocument(); }); - it('should enable "Transfer now" button when checkbox is checked', () => { - render(); + it('should trigger onClickConfirm method when the client clicks on Transfer now button', () => { + render(); - const el_checkbox_transfer_consent = screen.getByRole('checkbox'); - fireEvent.click(el_checkbox_transfer_consent); - const el_btn_transfer_now = screen.getByRole('button', { name: 'Transfer now' }); + const el_checkbox = screen.getByRole('checkbox'); + const [_, transfer_now_btn] = screen.getAllByRole('button'); + fireEvent.click(el_checkbox); + fireEvent.click(transfer_now_btn); - expect(el_btn_transfer_now).toBeEnabled(); + expect(props.onClickConfirm).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/cashier/src/components/transfer-confirm/transfer-confirm.scss b/packages/cashier/src/components/transfer-confirm/transfer-confirm.scss index 4b82081aadce..14cc321e569b 100644 --- a/packages/cashier/src/components/transfer-confirm/transfer-confirm.scss +++ b/packages/cashier/src/components/transfer-confirm/transfer-confirm.scss @@ -1,10 +1,13 @@ .transfer-confirm { + padding: 0 1.6rem; + width: 100%; &__header { margin-top: 1.4rem; margin-bottom: 2.4rem; } &__column { &-wrapper { + width: 100%; display: flex; justify-content: center; @include mobile { @@ -15,10 +18,19 @@ &__row { width: 40rem; display: flex; + column-gap: 1.6rem; + row-gap: 1.2rem; padding: 0.8rem 0; justify-content: space-between; border-bottom: 1px solid var(--general-section-1); + &-label, + &-value { + display: flex; + flex-direction: column; + row-gap: 1.2rem; + } + > :last-child { max-width: 50%; @@ -27,15 +39,31 @@ } } } + &__warning-icon { + margin-top: 0.8rem; + min-width: 7.2rem; + min-height: 7.2rem; + margin-bottom: 2.4rem; + @include mobile { + min-width: 4.8rem; + min-height: 4.8rem; + margin: 1.6rem 0; + } + &__description { + margin-bottom: 3.2rem; + @include mobile { + margin-bottom: 4rem; + } + } + } &__warnings { width: 40rem; display: flex; flex-direction: column; - margin: 2.4rem auto 1.8rem; + margin: 4rem auto 3.2rem; @include mobile { - margin-bottom: 1.2rem; + margin-bottom: 2.4rem; } - &-bullet { background-color: var(--text-loss-danger); border-radius: 100%; @@ -47,15 +75,20 @@ &-wrapper { display: flex; - margin-bottom: 1.1rem; } } } + &__checkbox { + width: 40rem; + .dc-checkbox__box { + margin-left: 0; + } + } &__checkbox-label { font-size: var(--text-size-xxs); } &__submit { - margin: 2.4rem auto; + margin: 4rem auto 0; width: 40rem; display: flex; justify-content: flex-end; @@ -63,8 +96,11 @@ > :not(:first-child) { margin-left: 0.8rem; } - } + @include mobile { + margin: 4rem auto 3.2rem; + } + } @include mobile { &__row, &__warnings, diff --git a/packages/cashier/src/components/transfer-confirm/transfer-confirm.tsx b/packages/cashier/src/components/transfer-confirm/transfer-confirm.tsx index 8f65d1eefbc5..af02d3f5467f 100644 --- a/packages/cashier/src/components/transfer-confirm/transfer-confirm.tsx +++ b/packages/cashier/src/components/transfer-confirm/transfer-confirm.tsx @@ -1,7 +1,8 @@ import classNames from 'classnames'; import React from 'react'; -import { localize } from '@deriv/translations'; import { Button, Checkbox, Icon, Text } from '@deriv/components'; +import { isMobile } from '@deriv/shared'; +import { Localize, localize } from '@deriv/translations'; import ErrorDialog from 'Components/error-dialog'; import './transfer-confirm.scss'; @@ -20,16 +21,16 @@ type TTransferConfirmProps = { data: Array; error?: object; header?: string; - is_payment_agent_transfer?: boolean; + is_payment_agent_withdraw?: boolean; onClickBack?: () => void; onClickConfirm?: () => void; warning_messages?: Array; }; const Row = ({ item_key, label, value }: TRowProps) => ( -
+
{Array.isArray(label) ? ( -
+
{label.map((label_text, idx) => ( {label_text} @@ -40,7 +41,7 @@ const Row = ({ item_key, label, value }: TRowProps) => ( {label} )} {Array.isArray(value) ? ( -
+
{value.map((v, idx) => ( {v} @@ -72,35 +73,48 @@ const WarningBullet = ({ children }: WarningBulletProps) => ( const TransferConfirm = ({ data, error, - header, - is_payment_agent_transfer, + is_payment_agent_withdraw, onClickBack, onClickConfirm, - warning_messages, }: TTransferConfirmProps) => { const [is_transfer_consent_checked, setIsTransferConsentChecked] = React.useState(false); + const warning_messages = [ + ]} + key={0} + />, + ]} + key={1} + />, + ]; + return (
- {!is_payment_agent_transfer && ( - - )} - {header && ( - - {header} - - )} + + + {is_payment_agent_withdraw + ? localize('Funds transfer information') + : localize('Check transfer information')} +
{data.map((d, key) => ( @@ -108,34 +122,36 @@ const TransferConfirm = ({ ))}
- {warning_messages && ( -
- {warning_messages.map((warning, idx) => ( - - - {warning} - - - ))} -
- )} - {is_payment_agent_transfer && ( +
+ {warning_messages.map((warning, idx) => ( + + + {warning} + + + ))} +
+
setIsTransferConsentChecked(!is_transfer_consent_checked)} - label={localize('I confirm that I have verified the client’s transfer information.')} + label={ + is_payment_agent_withdraw + ? localize('I confirm that I have verified the payment agent’s transfer information.') + : localize('I confirm that I have verified the client’s transfer information.') + } classNameLabel='transfer-confirm__checkbox-label' /> - )} +
diff --git a/packages/cashier/src/containers/cashier/cashier.scss b/packages/cashier/src/containers/cashier/cashier.scss index 6470f2424235..662b4ba9f5b6 100644 --- a/packages/cashier/src/containers/cashier/cashier.scss +++ b/packages/cashier/src/containers/cashier/cashier.scss @@ -161,7 +161,7 @@ &-span { font-size: 1.4rem; text-align: left; - padding: 9px 36px 9px 12px; + padding: 0.9rem 3.6rem 0.9rem 1.2rem; text-transform: none; line-height: 1.43; display: flex; @@ -174,8 +174,8 @@ } &-items { svg { - width: 24px; - height: 24px; + width: 2.4rem; + height: 2.4rem; } } &-label { @@ -228,7 +228,7 @@ } } &__tab-header-note { - max-width: 256px; + max-width: 25.6rem; } &__success { text-align: center; @@ -247,7 +247,7 @@ margin-bottom: 1.6rem; + .dc-text { - margin-bottom: 8px; + margin-bottom: 0.8rem; } } &-button { @@ -283,9 +283,8 @@ } &-button { - min-width: 25.8rem; - padding: 6px 16px; - margin-right: 0.1rem; + min-width: 25.6rem; + padding: 0.6rem 0.8rem; } .acc-prompt-dialog { padding: 0 1rem; @@ -303,11 +302,11 @@ /* stylelint-disable-next-line plugin/selector-bem-pattern */ .dc-checklist { width: 100%; - max-width: 500px; + max-width: 50rem; } /* stylelint-disable-next-line plugin/selector-bem-pattern */ .dc-checklist__item-text { - max-width: 320px; + max-width: 32rem; } &__icon { width: 12.8rem; @@ -328,6 +327,11 @@ } } } + + .dc-vertical-tab__content-side-note-item { + position: sticky; + top: calc(2.4rem + 4.1rem); + } } // Able to scroll the page container (app-contents) until 926px (MobileWrapper) if it should be scrollable diff --git a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/__tests__/payment-agent-transfer-confirm.spec.js b/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/__tests__/payment-agent-transfer-confirm.spec.js index f15ca495ce89..f5e7029a0ac5 100644 --- a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/__tests__/payment-agent-transfer-confirm.spec.js +++ b/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/__tests__/payment-agent-transfer-confirm.spec.js @@ -1,5 +1,6 @@ import React from 'react'; -import { cleanup, fireEvent, render, screen } from '@testing-library/react'; +import ReactDOM from 'react-dom'; +import { fireEvent, render, screen } from '@testing-library/react'; import PaymentAgentTransferConfirm from '../payment-agent-transfer-confirm.jsx'; jest.mock('Stores/connect', () => ({ @@ -8,62 +9,62 @@ jest.mock('Stores/connect', () => ({ connect: () => Component => Component, })); -beforeAll(() => { - const portal_root = document.createElement('div'); - portal_root.setAttribute('id', 'modal_root'); - document.body.appendChild(portal_root); -}); +describe('', () => { + beforeAll(() => { + ReactDOM.createPortal = jest.fn(component => { + return component; + }); + }); -afterEach(cleanup); + afterAll(() => { + ReactDOM.createPortal.mockClear(); + }); -describe('', () => { - const amount = 10; - const currency = 'testCurrency'; - const description = 'testDescription'; - const error = { - code: 'testCode', - message: 'testMessage', + const props = { + amount: 100, + currency: 'USD', + description: 'description', + transfer_to: 'CR900000101', + error: {}, + requestPaymentAgentTransfer: jest.fn(), + setIsTryTransferSuccessful: jest.fn(), }; - const requestPaymentAgentTransfer = jest.fn(); - const setIsTryTransferSuccessful = jest.fn(); - const transfer_to = 'test'; it('should show proper icon and message', () => { - render(); + render(); - expect(screen.getByTestId('dti_red_warning_icon')).toBeInTheDocument(); + expect(screen.getByTestId('dt_red_warning_icon')).toBeInTheDocument(); expect(screen.getByText('Check transfer information')).toBeInTheDocument(); }); - it(`setIsTryTransferSuccessful func should be triggered when click on 'Back' button`, () => { - render( - - ); + it(`setIsTryTransferSuccessful method should be triggered when click on 'Back' button`, () => { + render(); - const btn = screen.getByText('Back'); - fireEvent.click(btn); - expect(setIsTryTransferSuccessful).toBeCalledTimes(1); + const el_back_btn = screen.getByRole('button', { name: 'Back' }); + fireEvent.click(el_back_btn); + + expect(props.setIsTryTransferSuccessful).toHaveBeenCalledWith(false); }); - it(`requestPaymentAgentTransfer func should be triggered if checkbox is enabled and the "Transfer now" button is clicked`, () => { - render( - - ); + it(`requestPaymentAgentTransfer fuction should be triggered if checkbox is enabled and the "Transfer now" button is clicked`, () => { + render(); const el_checkbox_transfer_consent = screen.getByRole('checkbox'); fireEvent.click(el_checkbox_transfer_consent); const el_btn_transfer_now = screen.getByRole('button', { name: 'Transfer now' }); fireEvent.click(el_btn_transfer_now); - expect(requestPaymentAgentTransfer).toBeCalledTimes(1); + expect(props.requestPaymentAgentTransfer).toHaveBeenCalledWith({ + amount: 100, + currency: 'USD', + description: 'description', + transfer_to: 'CR900000101', + }); + }); + + it(`should show error message`, () => { + render(); + + expect(screen.getByText('error_message')).toBeInTheDocument(); }); }); diff --git a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.jsx b/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.jsx index 5cf6b2feb5ae..64d6bee23981 100644 --- a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.jsx +++ b/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.jsx @@ -1,11 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Icon, Money, Text } from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import { isMobile } from '@deriv/shared'; +import { Money } from '@deriv/components'; +import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; import TransferConfirm from 'Components/transfer-confirm'; -import './payment-agent-transfer-confirm.scss'; const PaymentAgentTransferConfirm = ({ amount, @@ -18,61 +16,31 @@ const PaymentAgentTransferConfirm = ({ transfer_to, transfer_to_name, }) => { - const payment_agent_transfer_warning_messages = [ - ]} - key={0} - />, - ]} - key={1} - />, - ]; return ( -
- - - {localize('Check transfer information')} - - , - key: 'amount', - }, - { label: localize('Description'), value: description, key: 'description' }, - ]} - error={error} - is_payment_agent_transfer - onClickBack={() => { - setIsTryTransferSuccessful(false); - }} - onClickConfirm={() => { - requestPaymentAgentTransfer({ amount, currency, description, transfer_to }); - }} - warning_messages={payment_agent_transfer_warning_messages} - /> -
+ , + key: 'amount', + }, + { label: localize('Description'), value: description, key: 'description' }, + ]} + error={error} + is_payment_agent_transfer + onClickBack={() => { + setIsTryTransferSuccessful(false); + }} + onClickConfirm={() => { + requestPaymentAgentTransfer({ amount, currency, description, transfer_to }); + }} + /> ); }; diff --git a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.scss b/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.scss deleted file mode 100644 index bec5a1172149..000000000000 --- a/packages/cashier/src/pages/payment-agent-transfer/payment-agent-transfer-confirm/payment-agent-transfer-confirm.scss +++ /dev/null @@ -1,20 +0,0 @@ -.payment-agent-transfer-confirm { - &__warning-icon { - margin-top: 0.8rem; - min-width: 7.2rem; - min-height: 7.2rem; - margin-bottom: 2.4rem; - @include mobile { - min-width: 4.8rem; - min-height: 4.8rem; - margin: 1.6rem 0; - } - - &__description { - margin-bottom: 3.2rem; - @include mobile { - margin-bottom: 4rem; - } - } - } -} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card-description.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card-description.spec.js new file mode 100644 index 000000000000..909752dcf401 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card-description.spec.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentCardDescription from '../payment-agent-card-description'; + +jest.mock('Stores/connect.js', () => ({ + __esModule: true, + default: 'mockedDefaultExport', + connect: () => Component => Component, +})); + +describe('', () => { + const mocked_payment_agent = { + further_information: 'further information', + name: 'Payment Agent of CR90000000', + supported_banks: [{ payment_method: 'Visa' }], + urls: [{ url: 'http://www.MyPAMyAdventure2.com/' }, { url: 'http://www.MyPAMyAdventure.com/' }], + }; + + it('should show proper description details and icon', () => { + render(); + + expect(screen.getByText('Payment Agent of CR90000000')).toBeInTheDocument(); + expect(screen.getByText('Further information')).toBeInTheDocument(); + expect(screen.getByText('http://www.MyPAMyAdventure2.com/,')).toBeInTheDocument(); + expect(screen.getByText('http://www.MyPAMyAdventure.com/')).toBeInTheDocument(); + expect(screen.getByTestId('dt_payment_method_icon')).toBeInTheDocument(); + }); + + it('should not show an icon when there is no appropriate icon for payment method', () => { + render( + + ); + + expect(screen.queryByTestId('dt_payment_method_icon')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card.spec.js new file mode 100644 index 000000000000..1c862c3e4829 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/__tests__/payment-agent-card.spec.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentCard from '../payment-agent-card'; + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + ExpansionPanel: () =>
ExpansionPanel
, +})); + +describe('', () => { + it('should render PaymentAgentCard component with ExpansionPanel', () => { + render(); + + expect(screen.getByText('ExpansionPanel')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/constants/payment-agent-providers.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/constants/payment-agent-providers.js new file mode 100644 index 000000000000..807a0763b75d --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/constants/payment-agent-providers.js @@ -0,0 +1,44 @@ +const normalized_payment_methods = { + Alipay: ['alipay'], + Bank: [ + 'bank', + 'bankdeposit', + 'banks', + 'banktransfer', + 'bankwire', + 'bankwiretransfer', + 'localbankwire', + 'localbank', + 'localbanks', + 'localbanktransfer', + ], + Bankbri: ['bri', 'bankbri'], + Bca: ['bca', 'grupbca'], + Bch: ['bch'], + Bni: ['bni'], + Bitcoin: ['bitcoin', 'btc'], + Card: ['card', 'cards', 'visa', 'mastercard'], + Cimbniaga: ['cimbniaga'], + Crypto: ['crypto', 'cryptos', 'cryptocurrencies', 'cryptocurrency', 'weacceptcrypto'], + Dai: ['dai'], + Diamondbank: ['diamondbank'], + Eth: ['eth', 'ethd', 'ethereum'], + Ewallet: ['ewallet', 'ewallets', 'ewalletpayment', 'skrill'], + Firstbank: ['firstbank'], + Gtbank: ['gtbank'], + Icbc: ['icbc'], + Libertyreserve: ['libertyreserve'], + LiteCoin: ['ltc', 'litecoin'], + Mandiri: ['mandiri'], + Mandirisyariah: ['mandirisyariah'], + Moneygram: ['moneygram'], + Paypal: ['paypal'], + PerfectMoney: ['perfectmoney'], + Permatabank: ['permatabank'], + Tether: ['tether'], + Verve: ['verve'], + Wechatpay: ['wechatpay'], + Zenithbank: ['zenithbank'], +}; + +export default { normalized_payment_methods }; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/__tests__/heplers.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/__tests__/heplers.spec.js new file mode 100644 index 000000000000..6ac194c30e89 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/__tests__/heplers.spec.js @@ -0,0 +1,47 @@ +import { + hasNormalizedPaymentMethods, + getNormalizedPaymentMethod, + getUniquePaymentAgentSupportedBanks, +} from '../helpers'; + +describe('Heplers', () => { + it('should normalize payment methods', () => { + expect(getNormalizedPaymentMethod('E-WALLET')).toBe('Ewallet'); + expect(getNormalizedPaymentMethod('Bank Wire Transfer')).toBe('Bank'); + expect(getNormalizedPaymentMethod('Localbank Transfer')).toBe('Bank'); + expect(getNormalizedPaymentMethod('crypto-currencies')).toBe('Crypto'); + expect(getNormalizedPaymentMethod('WeAcceptCrypto')).toBe('Crypto'); + expect(getNormalizedPaymentMethod('Fake method')).toBe(''); + }); + + it('should properly evaluate normalized payment methods', () => { + expect( + hasNormalizedPaymentMethods([ + { payment_method: 'E-WALLET' }, + { payment_method: 'Localbank Transfer' }, + { payment_method: 'Fake method' }, + ]) + ).toBeTruthy(); + + expect( + hasNormalizedPaymentMethods([ + { payment_method: 'Fake method' }, + { payment_method: 'Fake method' }, + { payment_method: 'Fake method' }, + ]) + ).toBeFalsy(); + + expect(hasNormalizedPaymentMethods([])).toBeFalsy(); + }); + + it('should remove duplicated methods', () => { + expect( + getUniquePaymentAgentSupportedBanks([ + { payment_method: 'Visa' }, + { payment_method: 'Mastercard' }, + { payment_method: 'Bank Wire Transfer' }, + { payment_method: 'Localbank Transfer' }, + ]).length + ).toBe(2); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/helpers.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/helpers.js new file mode 100644 index 000000000000..1e2dbf8bccb8 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/helpers.js @@ -0,0 +1,26 @@ +import PaymentAgentProviders from '../constants/payment-agent-providers'; + +export const getNormalizedPaymentMethod = payment_method => { + const trimmed_payment_method = payment_method.replace(/[' ',-]/g, '').toLowerCase(); + + const normalized_payment_method = Object.entries(PaymentAgentProviders.normalized_payment_methods).reduce( + (pay_method, [key, value]) => (value.some(el => el === trimmed_payment_method) ? key : pay_method), + '' + ); + + return normalized_payment_method; +}; + +export const hasNormalizedPaymentMethods = all_payment_methods => { + if (all_payment_methods.length > 0) { + return !all_payment_methods.every(method => getNormalizedPaymentMethod(method.payment_method) === ''); + } + return false; +}; + +export const getUniquePaymentAgentSupportedBanks = supported_banks => { + const normalized_payment_methods = supported_banks + .map(bank => getNormalizedPaymentMethod(bank.payment_method)) + .filter(Boolean); + return [...new Set(normalized_payment_methods)]; +}; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/index.js new file mode 100644 index 000000000000..c5f595cf9d42 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/helpers/index.js @@ -0,0 +1 @@ +export * from './helpers'; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-card/index.js new file mode 100644 index 000000000000..85c17942387f --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/index.js @@ -0,0 +1,3 @@ +import PaymentAgentCard from './payment-agent-card.jsx'; + +export default PaymentAgentCard; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card-description.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card-description.jsx new file mode 100644 index 000000000000..15d970b8894d --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card-description.jsx @@ -0,0 +1,54 @@ +import PropTypes from 'prop-types'; +import { toJS } from 'mobx'; +import React from 'react'; +import { Icon, Text } from '@deriv/components'; +import { capitalizeFirstLetter } from '@deriv/shared'; +import { hasNormalizedPaymentMethods, getUniquePaymentAgentSupportedBanks } from './helpers'; +import PaymentAgentDetail from '../payment-agent-detail'; + +const PaymentAgentCardDescription = ({ is_dark_mode_on, payment_agent }) => { + const payment_agent_urls = toJS(payment_agent.urls); + + return ( +
+ + {payment_agent.name} + + {payment_agent.further_information && ( + + {capitalizeFirstLetter(payment_agent.further_information)} + + )} + {payment_agent_urls && ( + + {payment_agent_urls.map(url => url.url)} + + )} + {hasNormalizedPaymentMethods(payment_agent.supported_banks) && ( +
+ {getUniquePaymentAgentSupportedBanks(payment_agent.supported_banks).map((bank, idx) => { + return ( + + ); + })} +
+ )} +
+ ); +}; + +PaymentAgentCardDescription.propTypes = { + is_dark_mode_on: PropTypes.bool, + payment_agent: PropTypes.object, +}; + +export default PaymentAgentCardDescription; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.jsx new file mode 100644 index 000000000000..c2349375318e --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.jsx @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import React from 'react'; +import { ExpansionPanel } from '@deriv/components'; +import PaymentAgentCardDescription from './payment-agent-card-description.jsx'; +import PaymentAgentDepositDetails from '../payment-agent-deposit-details'; +import PaymentAgentListedWithdrawForm from '../payment-agent-listed-withdraw-form'; +import './payment-agent-card.scss'; + +const PaymentAgentCard = ({ is_dark_mode_on, is_deposit, payment_agent }) => { + const message = { + header: , + content: is_deposit ? ( + + ) : ( + + ), + }; + return ( +
+ +
+ ); +}; + +PaymentAgentCard.propTypes = { + is_dark_mode_on: PropTypes.bool, + is_deposit: PropTypes.bool, + payment_agent: PropTypes.object, +}; + +export default PaymentAgentCard; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.scss b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.scss new file mode 100644 index 000000000000..cf00e766ccc0 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-card/payment-agent-card.scss @@ -0,0 +1,54 @@ +.payment-agent-card { + display: flex; + flex-direction: column; + padding: 1.6rem; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 16px 20px rgba(0, 0, 0, 0.05); + border-radius: $BORDER_RADIUS * 2; + margin-bottom: 1.6rem; + & .dc-expansion-panel__header-container { + align-items: flex-start; + } + & .dc-expansion-panel__header-chevron-icon { + flex-basis: 5%; + } + &--dark { + background-color: var(--general-section-1); + } + &__description-container { + display: flex; + flex-direction: column; + flex-basis: 95%; + &-icons-container { + display: flex; + flex-wrap: wrap; + gap: 1.6rem; + align-items: center; + margin-top: 1.6rem; + .dc-icon { + width: 5rem; + height: 3.2rem; + } + } + &-further-information { + margin: 0.8rem 0; + word-break: keep-all; + } + } + &__deposit-details-container { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 1rem; + row-gap: 0.8rem; + margin-top: 3.2rem; + & > .payment-agent-detail:nth-child(-n + 2) { + margin-bottom: 2.4rem; + @include mobile { + margin-bottom: 0; + } + } + @include mobile { + grid-template-columns: 1fr; + margin-top: 2.4rem; + } + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/__tests__/payment-agent-container.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-container/__tests__/payment-agent-container.spec.js new file mode 100644 index 000000000000..a9ca4e138edd --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-container/__tests__/payment-agent-container.spec.js @@ -0,0 +1,146 @@ +import React from 'react'; +import { fireEvent, screen, render } from '@testing-library/react'; +import PaymentAgentContainer from '../payment-agent-container'; +import { isMobile } from '@deriv/shared'; + +jest.mock('Stores/connect.js', () => ({ + __esModule: true, + default: 'mockedDefaultExport', + connect: () => Component => Component, +})); + +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + isMobile: jest.fn(() => false), +})); + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Loading: () =>
Loading
, +})); + +jest.mock('Pages/payment-agent/payment-agent-unlisted-withdraw-form', () => () => ( +
PaymentAgentUnlistedWithdrawForm
+)); +jest.mock('Pages/payment-agent/payment-agent-withdraw-confirm', () => () =>
PaymentAgentWithdrawConfirm
); +jest.mock('Pages/payment-agent/payment-agent-receipt', () => () =>
PaymentAgentReceipt
); +jest.mock('Pages/payment-agent/payment-agent-disclaimer', () => () =>
PaymentAgentDisclaimer
); +jest.mock('Pages/payment-agent/payment-agent-search-box', () => () =>
PaymentAgentSearchBox
); + +describe('', () => { + const props = { + app_contents_scroll_ref: { + current: {}, + }, + is_deposit: true, + is_try_withdraw_successful: false, + is_withdraw_successful: false, + onChangePaymentMethod: jest.fn(), + payment_agent_list: [ + { + currencies: 'USD', + deposit_commission: 0, + email: 'pa@example.com', + further_information: 'further information CR90000000', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'Payment Agent of CR90000000', + paymentagent_loginid: 'CR90000000', + phones: '+12345678', + supported_banks: [{ payment_method: 'Visa' }], + telephone: '+12345678', + url: 'http://www.pa.com', + withdrawal_commission: 0, + }, + { + currencies: 'USD', + deposit_commission: 0, + email: 'pa@example.com', + further_information: 'further information CR90000002', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'Payment Agent of CR90000002', + paymentagent_loginid: 'CR90000002', + phones: '+12345678', + supported_banks: [{ payment_method: 'Visa' }, { payment_method: 'Mastercard' }], + telephone: '+12345678', + url: 'http://www.pa.com', + withdrawal_commission: 0, + }, + ], + resetPaymentAgent: jest.fn(), + selected_bank: '', + supported_banks: [ + { text: 'MasterCard', value: 'mastercard' }, + { text: 'Visa', value: 'visa' }, + ], + verification_code: 'ABCdef', + }; + + it('should show proper messages and icons', () => { + render(); + + expect( + screen.getByText('Contact your preferred payment agent for payment instructions and make your deposit.') + ).toBeInTheDocument(); + expect(screen.getByText('PaymentAgentSearchBox')).toBeInTheDocument(); + expect(screen.getByTestId('dt_dropdown_container')).toBeInTheDocument(); + expect(screen.getByText('Payment Agent of CR90000000')).toBeInTheDocument(); + expect(screen.getByText('Further information CR90000000')).toBeInTheDocument(); + expect(screen.getByText('Payment Agent of CR90000002')).toBeInTheDocument(); + expect(screen.getByText('Further information CR90000002')).toBeInTheDocument(); + expect(screen.getAllByTestId('dt_payment_method_icon').length).toBe(2); + }); + + it('should show proper header when is_deposit is equal to false', () => { + render(); + + expect( + screen.getByText( + /choose your preferred payment agent and enter your withdrawal amount. If your payment agent is not listed/i + ) + ).toBeInTheDocument(); + expect(screen.getByText('search for them using their account number')).toBeInTheDocument(); + }); + + it('should show PaymentAgentUnlistedWithdrawForm when the user clicks on "search for them using their account number" link', () => { + render(); + + const el_withdrawal_link = screen.getByTestId('dt_withdrawal_link'); + fireEvent.click(el_withdrawal_link); + + expect(screen.getByText('PaymentAgentUnlistedWithdrawForm')).toBeInTheDocument(); + }); + + it('should show PaymentAgentWithdrawConfirm component when is_try_withdraw_successful is equal to true', () => { + render(); + + expect(screen.getByText('PaymentAgentWithdrawConfirm')).toBeInTheDocument(); + }); + + it('should show PaymentAgentReceipt component when is_withdraw_successful is equal to true', () => { + render(); + + expect(screen.getByText('PaymentAgentReceipt')).toBeInTheDocument(); + }); + + it('should show PaymentAgentDisclaimer in mobile view', () => { + isMobile.mockReturnValue(true); + render(); + + expect(screen.getByText('PaymentAgentDisclaimer')).toBeInTheDocument(); + }); + + it('should show search loader when is_search_loading equal to true', () => { + render(); + + expect(screen.getByText('Loading')).toBeInTheDocument(); + }); + + it('should show proper warning messages if there are no matches in search results', () => { + render(); + + expect(screen.getByText('No payment agents found for your search')).toBeInTheDocument(); + expect(screen.getByText('Try changing your search criteria.')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-container/index.js new file mode 100644 index 000000000000..f9ed45aaa6ab --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-container/index.js @@ -0,0 +1,3 @@ +import PaymentAgentContainer from './payment-agent-container.jsx'; + +export default PaymentAgentContainer; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx new file mode 100644 index 000000000000..b6e67c400d1a --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-container/payment-agent-container.jsx @@ -0,0 +1,202 @@ +import { PropTypes as MobxPropTypes } from 'mobx-react'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { DesktopWrapper, Dropdown, Icon, Loading, MobileWrapper, SelectNative, Text } from '@deriv/components'; +import { localize, Localize } from '@deriv/translations'; +import SideNote from 'Components/side-note'; +import { connect } from 'Stores/connect'; +import PaymentAgentCard from '../payment-agent-card'; +import PaymentAgentDisclaimer from '../payment-agent-disclaimer'; +import PaymentAgentReceipt from '../payment-agent-receipt'; +import PaymentAgentSearchBox from '../payment-agent-search-box'; +import PaymentAgentUnlistedWithdrawForm from '../payment-agent-unlisted-withdraw-form'; +import PaymentAgentWithdrawConfirm from '../payment-agent-withdraw-confirm'; + +const PaymentAgentSearchWarning = () => { + return ( +
+ + + + + + + +
+ ); +}; + +const PaymentAgentContainer = ({ + app_contents_scroll_ref, + has_payment_agent_search_warning, + is_dark_mode_on, + is_deposit, + is_search_loading, + is_try_withdraw_successful, + is_withdraw_successful, + onChangePaymentMethod, + payment_agent_list, + resetPaymentAgent, + selected_bank, + supported_banks, + verification_code, +}) => { + React.useEffect(() => { + return () => { + if (!is_deposit) { + resetPaymentAgent(); + } + }; + }, [is_deposit, resetPaymentAgent]); + + React.useEffect(() => { + return () => { + onChangePaymentMethod({ target: { value: '0' } }); + }; + }, [onChangePaymentMethod]); + + React.useEffect(() => { + if (app_contents_scroll_ref) app_contents_scroll_ref.current.scrollTop = 0; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [is_try_withdraw_successful, is_withdraw_successful]); + + const [is_unlisted_withdraw, setIsUnlistedWithdraw] = React.useState(false); + + const list_with_default = [ + { text: , value: 0 }, + ...supported_banks, + ]; + + if (is_try_withdraw_successful) { + return ; + } + + if (is_withdraw_successful) { + return ; + } + + if (is_unlisted_withdraw) { + return ( + + ); + } + + return ( + + {!has_payment_agent_search_warning && ( + + + + )} +
+ {is_deposit ? ( + + + + ) : ( + + setIsUnlistedWithdraw(!is_unlisted_withdraw)} + />, + ]} + /> + + )} +
+
+ + {supported_banks.length > 1 && ( + + + + + + + onChangePaymentMethod({ + target: { + name: 'payment_methods', + value: e.target.value ? e.target.value.toLowerCase() : 0, + }, + }) + } + use_text={false} + /> + + + )} +
+ {is_search_loading ? ( + + ) : ( + + {has_payment_agent_search_warning ? ( + + ) : ( + payment_agent_list.map((payment_agent, idx) => { + return ( + + ); + }) + )} + + )} + + ); +}; + +PaymentAgentContainer.propTypes = { + app_contents_scroll_ref: PropTypes.object, + has_payment_agent_search_warning: PropTypes.bool, + is_dark_mode_on: PropTypes.bool, + is_deposit: PropTypes.bool, + is_search_loading: PropTypes.bool, + is_try_withdraw_successful: PropTypes.bool, + is_withdraw_successful: PropTypes.bool, + onChangePaymentMethod: PropTypes.func, + payment_agent_list: PropTypes.array, + resetPaymentAgent: PropTypes.func, + selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + supported_banks: MobxPropTypes.arrayOrObservableArray, + verification_code: PropTypes.string, +}; + +export default connect(({ modules, ui }) => ({ + app_contents_scroll_ref: ui.app_contents_scroll_ref, + has_payment_agent_search_warning: modules.cashier.payment_agent.has_payment_agent_search_warning, + is_dark_mode_on: ui.is_dark_mode_on, + is_search_loading: modules.cashier.payment_agent.is_search_loading, + is_try_withdraw_successful: modules.cashier.payment_agent.is_try_withdraw_successful, + is_withdraw_successful: modules.cashier.payment_agent.is_withdraw_successful, + onChangePaymentMethod: modules.cashier.payment_agent.onChangePaymentMethod, + payment_agent_list: modules.cashier.payment_agent.filtered_list, + resetPaymentAgent: modules.cashier.payment_agent.resetPaymentAgent, + selected_bank: modules.cashier.payment_agent.selected_bank, + supported_banks: modules.cashier.payment_agent.supported_banks, +}))(PaymentAgentContainer); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/__tests__/payment-agent-card-deposit-details.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/__tests__/payment-agent-card-deposit-details.spec.js new file mode 100644 index 000000000000..f38cc5104173 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/__tests__/payment-agent-card-deposit-details.spec.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentDepositDetails from '../payment-agent-deposit-details'; + +describe('', () => { + const mocked_payment_agent = { + currency: 'USD', + deposit_commission: '10', + email: 'pa@example.com', + max_withdrawal: '2000', + min_withdrawal: '10', + phones: [{ phone_number: '+12345678' }, { phone_number: '+87654321' }], + withdrawal_commission: '0', + }; + + it('should show proper payment agent deposit details', () => { + render(); + + expect(screen.getByText('Phone number')).toBeInTheDocument(); + expect(screen.getByText('+12345678,')).toBeInTheDocument(); + expect(screen.getByText('+87654321')).toBeInTheDocument(); + expect(screen.getByText('Email')).toBeInTheDocument(); + expect(screen.getByText('pa@example.com')).toBeInTheDocument(); + expect(screen.getByText('Minimum withdrawal')).toBeInTheDocument(); + expect(screen.getByText('10.00 USD')).toBeInTheDocument(); + expect(screen.getByText('Maximum withdrawal')).toBeInTheDocument(); + expect(screen.getByText('2,000.00 USD')).toBeInTheDocument(); + expect(screen.getByText('Commission on deposits')).toBeInTheDocument(); + expect(screen.getByText('10%')).toBeInTheDocument(); + expect(screen.getByText('Commission on withdrawal')).toBeInTheDocument(); + expect(screen.getByText('0%')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/index.js new file mode 100644 index 000000000000..4e46d62b2950 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/index.js @@ -0,0 +1,3 @@ +import PaymentAgentDepositDetails from './payment-agent-deposit-details.jsx'; + +export default PaymentAgentDepositDetails; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.jsx new file mode 100644 index 000000000000..268169141f2e --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.jsx @@ -0,0 +1,91 @@ +import PropTypes from 'prop-types'; +import { toJS } from 'mobx'; +import React from 'react'; +import { Money } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import PaymentAgentDetail from '../payment-agent-detail'; +import './payment-agent-deposit-details.scss'; + +const PaymentAgentDepositDetails = ({ payment_agent }) => { + const payment_agent_phones = toJS(payment_agent.phones); + + const PaymentAgentPhonesDetails = () => { + return ( + + {payment_agent.phones.map(phone => phone.phone_number)} + + ); + }; + + const PaymentAgentEmailDetails = () => { + return ( + + {payment_agent.email} + + ); + }; + + const PaymentAgentMinimumWithdrawalDetails = () => { + return ( + + + + ); + }; + + const PaymentAgentMaximumWithdrawalDetails = () => { + return ( + + + + ); + }; + + const PaymentAgentDepositComissionDetails = () => { + return ( + + {`${payment_agent.deposit_commission}%`} + + ); + }; + + const PaymentAgentWithdrawalComissionDetails = () => { + return ( + + {`${payment_agent.withdrawal_commission}%`} + + ); + }; + + return ( +
+ {payment_agent_phones && } + {payment_agent.email && } + {payment_agent.min_withdrawal && } + {payment_agent.deposit_commission && } + {payment_agent.max_withdrawal && } + {payment_agent.withdrawal_commission && } +
+ ); +}; + +PaymentAgentDepositDetails.propTypes = { + payment_agent: PropTypes.object, +}; + +export default PaymentAgentDepositDetails; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.scss b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.scss new file mode 100644 index 000000000000..ceff51166a94 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-deposit-details/payment-agent-deposit-details.scss @@ -0,0 +1,34 @@ +.payment-agent-deposit-details { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 1rem; + row-gap: 0.8rem; + margin-top: 3.2rem; + & > .payment-agent-detail:nth-child(-n + 2) { + margin-bottom: 2.4rem; + @include mobile { + margin-bottom: 0; + } + } + .payment-agent-detail { + &__icon-wrapper { + width: 3.2rem; + height: 3.2rem; + background: var(--icon-grey-background); + border-radius: $BORDER_RADIUS * 2; + } + @include mobile { + &.deposit-commission { + order: 5; + } + + &.withdrawal_commission { + order: 6; + } + } + } + @include mobile { + grid-template-columns: 1fr; + margin-top: 2.4rem; + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-deposit/index.js deleted file mode 100644 index ad5067e20f62..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-deposit/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import PaymentAgentDeposit from './payment-agent-deposit.jsx'; - -export default PaymentAgentDeposit; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-deposit/payment-agent-deposit.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-deposit/payment-agent-deposit.jsx deleted file mode 100644 index 24d393898888..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-deposit/payment-agent-deposit.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import { toJS } from 'mobx'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { Accordion, DesktopWrapper, Dropdown, MobileWrapper, SelectNative, Text } from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import { isMobile } from '@deriv/shared'; -import { connect } from 'Stores/connect'; -import PaymentAgentDetails from '../payment-agent-details'; - -const PaymentAgentDeposit = ({ onChangePaymentMethod, payment_agent_list, selected_bank, supported_banks }) => { - const list_with_default = [ - { text: , value: 0 }, - ...supported_banks, - ]; - - React.useEffect(() => { - return () => { - onChangePaymentMethod({ target: { value: '0' } }); - }; - }, [onChangePaymentMethod]); - - return ( - -
- - - -
-
- -
- - - - {supported_banks.length > 1 && ( -
- - - - - - onChangePaymentMethod({ - target: { - name: 'payment_methods', - value: e.target.value ? e.target.value.toLowerCase() : 0, - }, - }) - } - use_text={false} - /> - -
- )} -
- ({ - header: payment_agent.name, - content: ( - - ), - }))} - /> - - ); -}; - -PaymentAgentDeposit.propTypes = { - onChangePaymentMethod: PropTypes.func, - payment_agent_list: PropTypes.array, - selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - supported_banks: PropTypes.any, -}; - -export default connect(({ modules }) => ({ - onChangePaymentMethod: modules.cashier.payment_agent.onChangePaymentMethod, - payment_agent_list: modules.cashier.payment_agent.filtered_list, - selected_bank: modules.cashier.payment_agent.selected_bank, - supported_banks: modules.cashier.payment_agent.supported_banks, -}))(PaymentAgentDeposit); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-detail/__tests__/payment-agent-detail.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-detail/__tests__/payment-agent-detail.spec.js new file mode 100644 index 000000000000..349874261013 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-detail/__tests__/payment-agent-detail.spec.js @@ -0,0 +1,44 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PaymentAgentDetail from '../payment-agent-detail'; + +describe('', () => { + const props = { + action: 'tel', + children: '+12345678', + has_red_color: false, + icon: 'phone_icon', + is_link: false, + title: 'Phone', + }; + it('should show proper icon, title and description', () => { + render(); + + expect(screen.getByTestId('dt_payment_agent_detail_icon')).toBeInTheDocument(); + expect(screen.getByText('Phone')).toBeInTheDocument(); + expect(screen.getByText('+12345678')).toBeInTheDocument(); + }); + + it('should show proper description if children is an array', () => { + render(); + + expect(screen.getByText('+12345678,')).toBeInTheDocument(); + expect(screen.getByText('+87654321')).toBeInTheDocument(); + }); + + it('should show description as a link if is_link or action were defined', () => { + const { rerender } = render(); + + expect(screen.getByTestId('dt_payment_agent_detail_link')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByTestId('dt_payment_agent_detail_link')).toBeInTheDocument(); + }); + + it('should show description as a paragraph if is_link or action were not defined', () => { + render(); + + expect(screen.getByTestId('dt_payment_agent_detail_paragraph')).toBeInTheDocument(); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-detail/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-detail/index.js new file mode 100644 index 000000000000..775708aae302 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-detail/index.js @@ -0,0 +1,3 @@ +import PaymentAgentDetail from './payment-agent-detail.jsx'; + +export default PaymentAgentDetail; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.jsx new file mode 100644 index 000000000000..4a5e8a78114f --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.jsx @@ -0,0 +1,72 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import classNames from 'classnames'; +import { Icon, Text } from '@deriv/components'; +import './payment-agent-detail.scss'; + +const PaymentAgentDetail = ({ action, children, className, has_red_color, icon, is_link, title, ...rest }) => { + const detail = Array.isArray(children) ? children : [children]; + return ( +
+ {icon && ( +
+ +
+ )} +
+ {title && ( + + {title} + + )} + {detail.map((child, id) => ( + + {action || is_link ? ( + + {child} + {id === detail.length - 1 ? '' : ', '} + + ) : ( + + {child} + + )} + + ))} +
+
+ ); +}; + +PaymentAgentDetail.propTypes = { + action: PropTypes.string, + children: PropTypes.oneOfType([PropTypes.array, PropTypes.element, PropTypes.string]), + className: PropTypes.string, + has_red_color: PropTypes.bool, + icon: PropTypes.string, + is_link: PropTypes.bool, + title: PropTypes.string, +}; + +export default PaymentAgentDetail; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.scss b/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.scss new file mode 100644 index 000000000000..77601d7c4a65 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-detail/payment-agent-detail.scss @@ -0,0 +1,13 @@ +.payment-agent-detail { + display: flex; + &__icon-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin-right: 0.8rem; + } + &__link { + text-decoration: none; + word-break: break-word; + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-details/__tests__/payment-agent-details.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-details/__tests__/payment-agent-details.spec.js deleted file mode 100644 index 214b200bbed8..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-details/__tests__/payment-agent-details.spec.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import PaymentAgentDetails from '../payment-agent-details'; - -describe('', () => { - const props = { - payment_agent_phones: '+12345678, +12345679', - payment_agent_urls: 'http://www.MyPAMyAdventure.com/, http://www.MyPAMyAdventure2.com/', - payment_agent_email: 'MyPaScript@example.com', - }; - - it('should render proper phones, urls and emails', () => { - const { rerender } = render(); - - expect(screen.getByText('+12345678,')).toBeInTheDocument(); - expect(screen.getByText('+12345679')).toBeInTheDocument(); - expect(screen.getByText('http://www.MyPAMyAdventure.com/,')).toBeInTheDocument(); - expect(screen.getByText('http://www.MyPAMyAdventure2.com/')).toBeInTheDocument(); - expect(screen.getByText('MyPaScript@example.com')).toBeInTheDocument(); - - rerender( - - ); - - expect(screen.getByText('+12345679')).toBeInTheDocument(); - expect(screen.getByText('http://www.MyPAMyAdventure2.com/')).toBeInTheDocument(); - expect(screen.getByText('MyPaScript@example.com')).toBeInTheDocument(); - }); -}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-details/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-details/index.js deleted file mode 100644 index 0d06ccd83b48..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-details/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import PaymentAgentDetails from './payment-agent-details.jsx'; - -export default PaymentAgentDetails; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.jsx deleted file mode 100644 index f45a469c7011..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { Icon } from '@deriv/components'; -import './payment-agent-details.scss'; - -const Detail = ({ action, icon, is_last_child, children, ...rest }) => { - const detail = Array.isArray(children) ? children : children.split(','); - return ( -
-
- -
-
- {detail.map((child, id) => ( - - {child} - {id === detail.length - 1 ? '' : ', '} - - ))} -
-
- ); -}; - -Detail.propTypes = { - action: PropTypes.string, - children: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), - icon: PropTypes.string, - is_last_child: PropTypes.bool, - rel: PropTypes.string, - target: PropTypes.string, - value: PropTypes.string, -}; - -const PaymentAgentDetails = ({ className, payment_agent_phones, payment_agent_urls, payment_agent_email }) => { - // TODO: Once telephone, url removed from paymentagent_list.list we can remove isArray conditions and only use the array - return ( -
- {payment_agent_phones && ( - - {Array.isArray(payment_agent_phones) - ? payment_agent_phones.map(phone => phone.phone_number) - : payment_agent_phones} - - )} - {payment_agent_urls && ( - - {Array.isArray(payment_agent_urls) ? payment_agent_urls.map(url => url.url) : payment_agent_urls} - - )} - {payment_agent_email && ( - - {payment_agent_email} - - )} -
- ); -}; - -PaymentAgentDetails.propTypes = { - className: PropTypes.string, - payment_agent_email: PropTypes.string, - payment_agent_phone: PropTypes.string, - payment_agent_phones: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), - payment_agent_url: PropTypes.string, - payment_agent_urls: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), -}; - -export default PaymentAgentDetails; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.scss b/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.scss deleted file mode 100644 index 8c917b595517..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-details/payment-agent-details.scss +++ /dev/null @@ -1,44 +0,0 @@ -.payment-agent-details { - &__contact { - text-decoration: none; - color: var(--brand-red-coral); - font-weight: bold; - font-size: var(--text-size-xs); - word-wrap: break-word; - - @include mobile { - padding-left: 0; - } - } - &__accordion-content { - &-line { - margin-bottom: 8px; - display: flex; - flex-direction: row; - word-break: break-all; - - &:first-child { - & .payment-agent-details__contact { - color: var(--text-prominent); - } - } - &:last-child { - margin-bottom: 0; - } - @include mobile { - overflow: hidden; - text-overflow: ellipsis; - - &:not(:first-child) { - color: var(--brand-red-coral); - } - } - } - &-icon { - vertical-align: middle; - margin-right: 0.8rem; - /* postcss-bem-linter: ignore */ - --fill-color1: var(--text-general); - } - } -} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/index.js new file mode 100644 index 000000000000..ef8d732d143f --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/index.js @@ -0,0 +1,3 @@ +import PaymentAgentDisclaimer from './payment-agent-disclaimer.jsx'; + +export default PaymentAgentDisclaimer; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.jsx new file mode 100644 index 000000000000..68928b4a911a --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Text } from '@deriv/components'; +import { Localize } from '@deriv/translations'; +import { website_name } from '@deriv/shared'; +import './payment-agent-disclaimer.scss'; + +const PaymentAgentDisclaimer = () => { + return ( +
+ + + + + + +
+ ); +}; + +export default PaymentAgentDisclaimer; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.scss b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.scss new file mode 100644 index 000000000000..5d6b7f1ecade --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-disclaimer/payment-agent-disclaimer.scss @@ -0,0 +1,12 @@ +.payment-agent-disclaimer { + &__title { + margin-bottom: 0.8rem; + } + @include mobile { + background-color: var(--general-section-1); + border-radius: $BORDER_RADIUS * 2; + padding: 1.6rem 2.4rem; + color: var(--text-general); + line-height: 1.5; + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/__tests__/payment-agent-list.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-list/__tests__/payment-agent-list.spec.js index 7a0871933d8c..a13c9c57e368 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-list/__tests__/payment-agent-list.spec.js +++ b/packages/cashier/src/pages/payment-agent/payment-agent-list/__tests__/payment-agent-list.spec.js @@ -12,8 +12,7 @@ jest.mock('Stores/connect', () => ({ jest.mock('Pages/payment-agent/payment-agent-withdrawal-locked', () => () =>
PaymentAgentWithdrawalLocked
); jest.mock('Components/verification-email', () => () =>
The email has been sent!
); -jest.mock('Pages/payment-agent/payment-agent-withdraw-form', () => () =>
Payment agent withdraw form
); -jest.mock('Pages/payment-agent/payment-agent-deposit', () => () =>
Payment agent deposit
); +jest.mock('Pages/payment-agent/payment-agent-container', () => () =>
Payment agent container
); jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), @@ -34,6 +33,7 @@ describe('', () => { verification_code: '', onMount: jest.fn(), sendVerificationEmail: jest.fn(), + setSideNotes: jest.fn(), }; let history; @@ -45,13 +45,7 @@ describe('', () => { it('should show proper messages', () => { renderWithRouter(); - expect(screen.getByText('Payment agent deposit')).toBeInTheDocument(); - expect(screen.getByText('DISCLAIMER')).toBeInTheDocument(); - expect( - screen.getByText( - 'Deriv is not affiliated with any Payment Agent. Customers deal with Payment Agents at their sole risk. Customers are advised to check the credentials of Payment Agents, and check the accuracy of any information about Payments Agents (on Deriv or elsewhere) before transferring funds.' - ) - ).toBeInTheDocument(); + expect(screen.getByText('Payment agent container')).toBeInTheDocument(); }); it('should show loader in Deposit tab', () => { @@ -76,7 +70,7 @@ describe('', () => { expect(screen.getByText('The email has been sent!')).toBeInTheDocument(); }); - it('should show "Payment agent withdraw form" message in Withdrawal tab', () => { + it('should show "Payment agent container" message in Withdrawal tab', () => { renderWithRouter( ', () => { /> ); - expect(screen.getByText('Payment agent withdraw form')).toBeInTheDocument(); + expect(screen.getByText('Payment agent container')).toBeInTheDocument(); + }); + + it('should set side notes when component is mounting', () => { + renderWithRouter(); + + expect(props.setSideNotes).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.jsx index 0b4261d3fbe6..3e4bb2ba801a 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.jsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.jsx @@ -1,13 +1,15 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import { Loading, Tabs, Text } from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import { isDesktop, isMobile, website_name } from '@deriv/shared'; +import { Loading, Tabs } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { isDesktop } from '@deriv/shared'; import { connect } from 'Stores/connect'; import VerificationEmail from 'Components/verification-email'; -import PaymentAgentDeposit from '../payment-agent-deposit'; -import PaymentAgentWithdrawForm from '../payment-agent-withdraw-form'; +import PaymentAgentContainer from '../payment-agent-container'; import PaymentAgentWithdrawalLocked from '../payment-agent-withdrawal-locked'; +import PaymentAgentDisclaimer from '../payment-agent-disclaimer'; +import SideNote from 'Components/side-note'; import './payment-agent-list.scss'; const PaymentAgentList = ({ @@ -16,12 +18,14 @@ const PaymentAgentList = ({ is_loading, is_resend_clicked, is_payment_agent_withdraw, + is_try_withdraw_successful, onMount, payment_agent_active_tab_index, resendVerificationEmail, sendVerificationEmail, setActiveTabIndex, setIsResendClicked, + setSideNotes, verification_code, }) => { React.useEffect(() => { @@ -35,67 +39,64 @@ const PaymentAgentList = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + React.useEffect(() => { + if (typeof setSideNotes === 'function' && !is_loading) { + const side_notes = []; + + if (!is_try_withdraw_successful) { + side_notes.push( + + + + ); + } + + setSideNotes(side_notes); + } + }, [is_loading, is_try_withdraw_successful]); + return ( -
- - +
+ - - -
- -
- {is_loading ? : } -
- - - - :  - - - +
+ {is_loading ? : } +
+
+ {error?.code ? ( + + ) : ( +
+ {is_email_sent ? ( +
+ +
+ ) : ( + (verification_code || is_payment_agent_withdraw) && ( + + ) + )}
-
-
- {error?.code ? ( - - ) : ( -
- {is_email_sent ? ( -
- -
- ) : ( - (verification_code || is_payment_agent_withdraw) && ( - - ) - )} -
- )} -
- -
- + )} +
+ +
); }; @@ -106,12 +107,14 @@ PaymentAgentList.propTypes = { is_loading: PropTypes.bool, is_resend_clicked: PropTypes.bool, is_payment_agent_withdraw: PropTypes.bool, + is_try_withdraw_successful: PropTypes.bool, onMount: PropTypes.func, payment_agent_active_tab_index: PropTypes.number, resendVerificationEmail: PropTypes.func, sendVerificationEmail: PropTypes.func, setActiveTabIndex: PropTypes.func, setIsResendClicked: PropTypes.func, + setSideNotes: PropTypes.func, verification_code: PropTypes.string, }; @@ -120,6 +123,7 @@ export default connect(({ modules }) => ({ is_email_sent: modules.cashier.payment_agent.verification.is_email_sent, is_loading: modules.cashier.general_store.is_loading, is_resend_clicked: modules.cashier.payment_agent.verification.is_resend_clicked, + is_try_withdraw_successful: modules.cashier.payment_agent.is_try_withdraw_successful, onMount: modules.cashier.payment_agent.onMountPaymentAgentList, payment_agent_active_tab_index: modules.cashier.payment_agent.active_tab_index, resendVerificationEmail: modules.cashier.payment_agent.verification.resendVerificationEmail, diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss b/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss index 4574f608bc3c..68f0b7a0b5d9 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss +++ b/packages/cashier/src/pages/payment-agent/payment-agent-list/payment-agent-list.scss @@ -1,69 +1,43 @@ .payment-agent-list { + padding: 0 4.2rem 1.6rem; + @include mobile { + padding: 0; + } + .side-note--mobile { + padding: 0; + margin: 0; + } &__instructions { - margin-top: 2.4rem; @include mobile { display: grid; grid-template-columns: 1fr; grid-gap: 0.8rem; - } - - &-section { - border: 1px solid var(--border-normal); - flex: 1; - padding: 1.6rem; - border-radius: $BORDER_RADIUS; - @include desktop { - &:not(:first-child) { - margin-left: 24px; - margin-left: 1.6rem; + .dc-tabs__list--header--tabs--desktop { + @include mobile { + position: fixed; + background-color: var(--general-main-1); + width: 100%; + left: 0; + z-index: 1000; + padding: 1.6rem 5rem; } } - @include mobile { - display: flex; - - &:first-child { - flex-direction: column; - align-items: flex-start; - } - /* postcss-bem-linter: ignore */ - &:last-child { - flex-direction: row; - justify-content: center; - align-items: center; - - & h2 { - margin: 0; - } - & .dc-btn { - margin: 0 0 0 auto; - padding: 0.3rem 0.8rem; - height: 3rem; - - &__text { - font-size: 1.2rem; - } - /* iPhone SE screen height fixes due to UI space restrictions */ - @media only screen and (max-height: 480px) { - height: 4.8rem; - - &__text { - width: 14rem; - white-space: normal; - } - } - } - } - /* postcss-bem-linter: ignore */ - & .cashier__paragraph { - padding-left: 0; - } + .dc-tabs__content { + margin-top: 7.2rem; } } - .dc-tabs__list--header--tabs--desktop { - margin: 0 auto; + &-hide-tabs { + & .dc-tabs__list { + display: none; + } - @include mobile { - margin: 0 3.5rem; + & .dc-tabs__content { + margin-top: 0; + } + + & .dc-tabs__list--header--tabs--desktop { + display: none; + padding: 1.6rem 5rem; } } .verification-email__icon { @@ -72,34 +46,36 @@ } &__list { &-header { - margin-top: 2.8rem; - margin-bottom: 1.8rem; - display: flex; - flex-direction: row; - align-items: center; - - &-text { - min-width: 12rem; - } - - &-line { - border-bottom: 1px solid var(--general-section-1); - width: 100%; - height: 1px; + margin-top: 2.4rem; + margin-bottom: 1.6rem; + @include mobile { + margin-top: 1.6rem; } } &-selector { - margin-bottom: 1rem; + margin-bottom: 2.4rem; display: flex; justify-content: space-between; - - .cashier { - &__paragraph { - margin-right: 0.8rem; + & .dc-dropdown { + &__container { + width: 18rem; + } + &-container { + margin-top: 0; + min-width: unset; + width: unset; + } + &__display { + justify-content: flex-start; + &-text { + padding-left: 0.8rem; + padding-right: 3.2rem; + color: var(--text-less-prominent); + } + } + &__select-arrow { + right: 10px; } - } - .dc-dropdown__display-text { - color: var(--text-less-prominent); } } @include mobile { @@ -108,68 +84,67 @@ z-index: 1; } &-selector { - margin-bottom: 1.8rem; - - /* postcss-bem-linter: ignore */ - & .dc-input { - width: 18rem; - margin-left: auto; - } + margin-bottom: 1.6rem; + flex-direction: column; /* postcss-bem-linter: ignore */ - & .dc-select-native__placeholder { - background-color: var(--general-main-1); + & .dc-select-native { + margin-top: 1.6rem; + &__arrow { + top: unset; + --fill-color1: var(--text-general); + } + &__placeholder { + padding: 0 0.8rem; + background-color: var(--general-main-1); + color: var(--text-general); + top: unset; + left: unset; + } + &__display { + height: 3.2rem; + &-text { + line-height: 3.2rem; + } + } + &__picker { + height: 3.2rem; + } + &__wrapper { + height: 3.2rem; + } } } } } - &__filter { - min-width: 22.8rem; - margin-top: 0; - - &-display { - min-height: 3.2rem; - min-width: 22.8rem; - } + &__search-warning { + row-gap: 1.6rem; + margin-top: 6.4rem; } - &__disclaimer { - background-color: var(--general-section-1); - margin-top: 2.4rem; - margin-bottom: 2.4rem; - padding: 1.6rem; - } - @include mobile { - &__accordion { - & .dc-accordion { - &__item { - font-size: 1.2rem; - position: relative; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: transparent; - - &-header { - max-width: calc(100% - 3.2rem); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-right: 0; - - &-icon-wrapper { - top: 0; - right: 0; - width: 36px; - height: 3.4rem; - padding-left: 0; - float: unset; - display: flex; - position: absolute; - align-items: center; - justify-content: center; - border-bottom: 1px solid var(--general-section-1); - } - } + &__error-dialog { + .dc-dialog { + &__content { + font-size: var(--text-size-s); + } + &__header--title { + font-size: var(--text-size-sm); + } + @include mobile { + &__dialog { + width: 100%; + margin: 0 1.6rem; + } + &__content { + font-size: var(--text-size-xxs); + } + &__header--title { + font-size: var(--text-size-xs); } } } } + &__search-loader { + @include mobile { + height: unset; + } + } } diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/__tests__/payment-agent-listed-withdraw-form.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/__tests__/payment-agent-listed-withdraw-form.spec.js new file mode 100644 index 000000000000..14ca7a7e6ac4 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/__tests__/payment-agent-listed-withdraw-form.spec.js @@ -0,0 +1,145 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import PaymentAgentListedWithdrawForm from '../payment-agent-listed-withdraw-form'; +import { validNumber } from '@deriv/shared'; + +jest.mock('Stores/connect.js', () => ({ + __esModule: true, + default: 'mockedDefaultExport', + connect: () => Component => Component, +})); + +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Loading: () =>
Loading
, +})); + +jest.mock('@deriv/shared/src/utils/validation/declarative-validation-rules', () => ({ + ...jest.requireActual('@deriv/shared/src/utils/validation/declarative-validation-rules'), + validNumber: jest.fn(() => ({ is_ok: true, message: '' })), +})); + +describe('', () => { + beforeAll(() => { + ReactDOM.createPortal = jest.fn(component => { + return component; + }); + }); + + afterAll(() => { + ReactDOM.createPortal.mockClear(); + }); + + const props = { + balance: '1000', + currency: 'USD', + error: {}, + is_loading: false, + onMount: jest.fn(), + payment_agent: { + currency: 'USD', + deposit_commission: '0', + email: 'MyPaScript@example.com', + further_information: 'Test Info', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'Payment Agent of CR90000102 (Created from Script)', + paymentagent_loginid: 'CR90000102', + phones: [{ phone_number: '+12345678' }], + supported_banks: [{ payment_method: 'MasterCard' }, { payment_method: 'Visa' }], + urls: [{ url: 'http://www.MyPAMyAdventure.com/' }, { url: 'http://www.MyPAMyAdventure2.com/' }], + withdrawal_commission: '0', + }, + payment_agent_list: [ + { + email: 'MyPaScript@example.com', + max_withdrawal: '2000', + min_withdrawal: '10', + phone: [{ phone_number: '+12345678' }], + text: 'Payment Agent of CR90000102 (Created from Script)', + url: [{ url: 'http://www.MyPAMyAdventure.com/' }, { url: 'http://www.MyPAMyAdventure2.com/' }], + value: 'CR90000102', + }, + { + email: 'MyPaScript2@example.com', + max_withdrawal: '1000', + min_withdrawal: '10', + phone: [{ phone_number: '+1234567822' }], + text: 'Payment Agent of CR90000100 (Created from Script)', + url: [{ url: 'http://www.MyPAMyAdventure1.com/' }, { url: 'http://www.MyPAMyAdventure2.com/' }], + value: 'CR90000100', + }, + ], + requestTryPaymentAgentWithdraw: jest.fn(), + verification_code: 'ABCdef', + }; + + it('should render the component', () => { + render(); + + expect(screen.getByText('Withdrawal amount')).toBeInTheDocument(); + expect(screen.getByText('USD')).toBeInTheDocument(); + expect(screen.getByLabelText('Enter amount')).toBeInTheDocument(); + expect(screen.getByText(/withdrawal limits:/i)).toBeInTheDocument(); + expect(screen.getByText('10.00 USD')).toBeInTheDocument(); + expect(screen.getByText('2,000.00 USD')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument(); + }); + + it('should show loader when is_loading equal to true or there is no payment agents', () => { + const { rerender } = render(); + + expect(screen.getByText('Loading')).toBeInTheDocument(); + + rerender(); + + expect(screen.getByText('Loading')).toBeInTheDocument(); + }); + + it('should show error message, if amount is not valid', async () => { + validNumber.mockReturnValue({ is_ok: false, message: 'error_message' }); + render(); + + const el_input_amount = screen.getByLabelText('Enter amount'); + const el_continue_btn = screen.getByRole('button', { name: 'Continue' }); + fireEvent.change(el_input_amount, { target: { value: '100.99999' } }); + fireEvent.click(el_continue_btn); + + await waitFor(() => { + expect(screen.getByText('error_message')).toBeInTheDocument(); + }); + validNumber.mockReturnValue({ is_ok: true, message: '' }); + }); + + it('should show Insufficient balance error', async () => { + render(); + + const el_input_amount = screen.getByLabelText('Enter amount'); + const el_continue_btn = screen.getByRole('button', { name: 'Continue' }); + fireEvent.change(el_input_amount, { target: { value: '2000' } }); + fireEvent.click(el_continue_btn); + + await waitFor(() => { + expect(screen.getByText('Insufficient balance.')).toBeInTheDocument(); + }); + }); + + it('should trigger requestTryPaymentAgentWithdraw, when all data are valid', async () => { + render(); + + const el_input_amount = screen.getByLabelText('Enter amount'); + const el_continue_btn = screen.getByRole('button', { name: 'Continue' }); + fireEvent.change(el_input_amount, { target: { value: '100' } }); + fireEvent.click(el_continue_btn); + + await waitFor(() => { + expect(props.requestTryPaymentAgentWithdraw).toHaveBeenCalledWith({ + loginid: 'CR90000102', + currency: 'USD', + amount: '100', + verification_code: 'ABCdef', + }); + }); + }); +}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/index.js new file mode 100644 index 000000000000..2f9099cba0a4 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/index.js @@ -0,0 +1,3 @@ +import PaymentAgentListedWithdrawForm from './payment-agent-listed-withdraw-form.jsx'; + +export default PaymentAgentListedWithdrawForm; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.jsx new file mode 100644 index 000000000000..718e588d3ce9 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.jsx @@ -0,0 +1,196 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { Field, Formik, Form } from 'formik'; +import { Button, Input, Loading, Money, Text } from '@deriv/components'; +import { getDecimalPlaces, getCurrencyDisplayCode, validNumber } from '@deriv/shared'; +import { localize, Localize } from '@deriv/translations'; +import { connect } from 'Stores/connect'; +import ErrorDialog from 'Components/error-dialog'; +import './payment-agent-listed-withdraw-form.scss'; + +const validateWithdrawal = (values, { balance, currency, payment_agent = {} }) => { + const errors = {}; + + const { is_ok, message } = validNumber(values.amount, { + type: 'float', + decimals: getDecimalPlaces(currency), + ...(payment_agent.min_withdrawal && { + min: payment_agent.min_withdrawal, + max: payment_agent.max_withdrawal, + }), + }); + + if (!values.amount) { + errors.amount = localize('This field is required.'); + } else if (!is_ok) { + errors.amount = message; + } else if (+balance < +values.amount) { + errors.amount = localize('Insufficient balance.'); + } + + return errors; +}; + +const PaymentAgentListedWithdrawForm = ({ + balance, + currency, + error, + is_crypto, + is_loading, + onMount, + payment_agent, + payment_agent_list, + requestTryPaymentAgentWithdraw, + selected_bank, + verification_code, +}) => { + React.useEffect(() => { + onMount(); + }, [onMount]); + + const input_ref = React.useRef(null); + + React.useEffect(() => { + if (input_ref.current) { + input_ref.current.value = null; + } + }, [selected_bank]); + + const validateWithdrawalPassthrough = values => + validateWithdrawal(values, { + balance, + currency, + payment_agent: payment_agent_list.find(pa => pa.value === payment_agent.paymentagent_loginid), + }); + + const onWithdrawalPassthrough = async (values, actions) => { + const payment_agent_withdraw = await requestTryPaymentAgentWithdraw({ + loginid: payment_agent.paymentagent_loginid, + currency, + amount: values.amount, + verification_code, + }); + if (payment_agent_withdraw?.error) { + actions.setSubmitting(false); + } + }; + + if (is_loading || !payment_agent_list.length) { + return ; + } + + return ( +
+ + + + + {({ errors, isSubmitting, isValid, touched, values }) => { + const getHint = () => { + return ( + payment_agent_list.find(pa => pa.value === payment_agent.paymentagent_loginid) && ( + pa.value === payment_agent.paymentagent_loginid + ).min_withdrawal + } + currency={payment_agent.currency} + show_currency + />, + pa.value === payment_agent.paymentagent_loginid + ).max_withdrawal + } + currency={payment_agent.currency} + show_currency + />, + ]} + /> + ) + ); + }; + return ( +
+ + {({ field }) => ( + + {getCurrencyDisplayCode(currency)} + + } + /> + )} + + +
+ ); + }} + + +
+ ); +}; + +PaymentAgentListedWithdrawForm.propTypes = { + balance: PropTypes.string, + currency: PropTypes.string, + error: PropTypes.object, + is_crypto: PropTypes.bool, + is_loading: PropTypes.bool, + onMount: PropTypes.func, + payment_agent: PropTypes.object, + payment_agent_list: PropTypes.array, + requestTryPaymentAgentWithdraw: PropTypes.func, + selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + verification_code: PropTypes.string, +}; + +export default connect(({ client, modules }) => ({ + balance: client.balance, + currency: client.currency, + error: modules.cashier.payment_agent.error, + is_crypto: modules.cashier.general_store.is_crypto, + is_loading: modules.cashier.general_store.is_loading, + onMount: modules.cashier.payment_agent.onMountPaymentAgentWithdraw, + payment_agent_list: modules.cashier.payment_agent.agents, + requestTryPaymentAgentWithdraw: modules.cashier.payment_agent.requestTryPaymentAgentWithdraw, + selected_bank: modules.cashier.payment_agent.selected_bank, + verification_code: client.verification_code.payment_agent_withdraw, +}))(PaymentAgentListedWithdrawForm); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.scss b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.scss new file mode 100644 index 000000000000..137af5c29ecd --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-listed-withdraw-form/payment-agent-listed-withdraw-form.scss @@ -0,0 +1,39 @@ +.payment-agent-listed-withdraw-form { + padding: 0 1.6rem; + margin-top: 3.2rem; + @include mobile { + padding: 0; + } + &__header { + margin-bottom: 1.6rem; + } + &__form { + display: flex; + @include mobile { + flex-direction: column; + } + .dc-input { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 1.8rem; + @include mobile { + border: 1px solid var(--border-normal); + border-top-right-radius: 0.4rem; + border-bottom-right-radius: 0.4rem; + &--crypto-hint { + margin-bottom: 2.8rem; + } + } + } + .dc-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + @include mobile { + margin-top: 1.2rem; + border-top-left-radius: 0.4rem; + border-bottom-left-radius: 0.4rem; + } + } + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-receipt/__tests__/payment-agent-receipt.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-receipt/__tests__/payment-agent-receipt.spec.js index df2d1e23f8e6..f17b4bb8a559 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-receipt/__tests__/payment-agent-receipt.spec.js +++ b/packages/cashier/src/pages/payment-agent/payment-agent-receipt/__tests__/payment-agent-receipt.spec.js @@ -3,7 +3,7 @@ import PaymentAgentReceipt from '../payment-agent-receipt'; import { fireEvent, render, screen } from '@testing-library/react'; import { createBrowserHistory } from 'history'; import { Router } from 'react-router'; -import { routes } from '@deriv/shared'; +import { isMobile, routes } from '@deriv/shared'; jest.mock('Stores/connect.js', () => ({ __esModule: true, @@ -11,72 +11,97 @@ jest.mock('Stores/connect.js', () => ({ connect: () => Component => Component, })); +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + isMobile: jest.fn(() => false), +})); + +jest.mock('Pages/payment-agent/payment-agent-disclaimer', () => () =>
PaymentAgentDisclaimer
); + describe('', () => { - const mockProps = () => ({ + const history = createBrowserHistory(); + const props = { currency: 'USD', + is_from_derivgo: false, loginid: 'CR90000170', receipt: { amount_transferred: '20.00', payment_agent_email: 'reshma+cr1@binary.com', payment_agent_id: 'CR90000089', payment_agent_name: 'Ms QA script reshmacrcdD', - payment_agent_phone: '+62417522087', - payment_agent_url: 'https://deriv.com/', + payment_agent_phone: [{ phone_number: '+62417522087' }], + payment_agent_url: [{ url: 'https://deriv.com/' }], }, resetPaymentAgent: jest.fn(), - }); + }; it('should show the proper text/messages', () => { - const history = createBrowserHistory(); - const props = mockProps(); render( ); - expect(screen.getByText('Your funds have been transferred')).toBeInTheDocument(); - expect(screen.getByText('20.00 USD')).toBeInTheDocument(); - expect(screen.getByText('USD')).toBeInTheDocument(); - expect(screen.getByText('CR90000170')).toBeInTheDocument(); - expect(screen.getByText('Ms QA script reshmacrcdD')).toBeInTheDocument(); - expect(screen.getByText('CR90000089')).toBeInTheDocument(); - expect(screen.getByText('IMPORTANT NOTICE TO RECEIVE YOUR FUNDS')).toBeInTheDocument(); + + const [view_transactions_btn, make_a_new_withdrawal_btn] = screen.getAllByRole('button'); + + expect(screen.getByText('You’ve transferred 20.00 USD')).toBeInTheDocument(); + expect(screen.getByText('Important notice to receive your funds')).toBeInTheDocument(); expect( - screen.getByText( - "You're not done yet. To receive the transferred funds, you must contact the payment agent for further instruction. A summary of this transaction has been emailed to you for your records." - ) + screen.getByText(/to receive your funds, contact the payment agent with the details below/i) ).toBeInTheDocument(); - expect(screen.getByText('Ms QA script reshmacrcdD agent contact details:')).toBeInTheDocument(); + expect(screen.getByText(/you can view the summary of this transaction in your email/i)).toBeInTheDocument(); + expect(screen.getByText('Ms QA script reshmacrcdD')).toBeInTheDocument(); + expect(screen.getByText("'s")).toBeInTheDocument(); + expect(screen.getByText('contact details')).toBeInTheDocument(); + expect(screen.getByText('+62417522087')).toBeInTheDocument(); expect(screen.getByText('reshma+cr1@binary.com')).toBeInTheDocument(); - expect(screen.getByText('View in statement')).toBeInTheDocument(); - expect(screen.getByText('Make a new transfer')).toBeInTheDocument(); + expect(view_transactions_btn).toBeInTheDocument(); + expect(make_a_new_withdrawal_btn).toBeInTheDocument(); }); - it('should redirect to "/reports/statement" when the "View in statement" button is clicked', () => { - const history = createBrowserHistory(); - const props = mockProps(); + it('should redirect to "/reports/statement" when the "View transactions" button is clicked', () => { render( ); - const view_in_statement_btn = screen.getByText('View in statement'); - fireEvent.click(view_in_statement_btn); + const [view_transactions_btn] = screen.getAllByRole('button'); + fireEvent.click(view_transactions_btn); expect(history.location.pathname).toBe(routes.statement); }); - it('should trigger onClick callback when the "Make a new transfer" button is clicked', () => { - const history = createBrowserHistory(); - const props = mockProps(); + it('should trigger onClick callback when the "Make a new withdrawal" button is clicked', () => { render( ); - const make_new_transfer_btn = screen.getByText('Make a new transfer'); - fireEvent.click(make_new_transfer_btn); + const [_, make_a_new_withdrawal_btn] = screen.getAllByRole('button'); + + fireEvent.click(make_a_new_withdrawal_btn); expect(props.resetPaymentAgent).toHaveBeenCalledTimes(1); }); + + it('should not show "View transactions" if is_from_derivgo equal to true', () => { + render( + + + + ); + + expect(screen.getAllByRole('button').length).toBe(1); + }); + + it('should show PaymentAgentDisclaimer in mobile view', () => { + isMobile.mockReturnValue(true); + render( + + + + ); + + expect(screen.getByText('PaymentAgentDisclaimer')).toBeInTheDocument(); + }); }); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-receipt/payment-agent-receipt.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-receipt/payment-agent-receipt.jsx index a399d21e9398..aca1bd0d2fab 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-receipt/payment-agent-receipt.jsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-receipt/payment-agent-receipt.jsx @@ -1,11 +1,14 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { withRouter } from 'react-router'; -import { Button, Icon, Text } from '@deriv/components'; -import { formatMoney, getCurrencyDisplayCode, isMobile, routes } from '@deriv/shared'; +import { Button, Text } from '@deriv/components'; +import { isMobile, routes } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; -import PaymentAgentDetails from '../payment-agent-details'; +import PaymentAgentDetail from '../payment-agent-detail'; +import PaymentAgentDisclaimer from '../payment-agent-disclaimer'; +import SideNote from 'Components/side-note'; import './payment-agent-receipt.scss'; const openStatement = (history, resetPaymentAgent) => { @@ -13,93 +16,90 @@ const openStatement = (history, resetPaymentAgent) => { resetPaymentAgent(); }; -const PaymentAgentReceipt = ({ currency, history, is_from_derivgo, loginid, receipt, resetPaymentAgent }) => { +const PaymentAgentDetails = ({ payment_agent_email, payment_agent_phones, payment_agent_urls }) => { + return ( +
+ {payment_agent_phones && ( + + {payment_agent_phones.map(phone => phone.phone_number)} + + )} + {payment_agent_email && ( + + {payment_agent_email} + + )} + {payment_agent_urls && ( + + {payment_agent_urls.map(url => url.url)} + + )} +
+ ); +}; + +const PaymentAgentReceipt = ({ currency, history, is_from_derivgo, receipt, resetPaymentAgent }) => { React.useEffect(() => { return () => resetPaymentAgent(); }, [resetPaymentAgent]); - const currency_display_code = getCurrencyDisplayCode(currency); - return ( -
-
- - - - - {formatMoney(currency, receipt.amount_transferred, true)} {currency_display_code} - -
- - - {currency_display_code} - - - {loginid} - - - - - - - {receipt.payment_agent_name && ( - - {receipt.payment_agent_name} - - )} - - {receipt.payment_agent_id} - - -
-
- - +
+ + + + + + + + ] : []} + values={{ + text: receipt.payment_agent_name + ? localize('To receive your funds, contact the payment agent with the details below') + : localize('To receive your funds, contact the payment agent'), + }} + key={0} /> {receipt.payment_agent_name && (
- + , ]} values={{ payment_agent: receipt.payment_agent_name }} options={{ interpolation: { escapeValue: false } }} /> openStatement(history, resetPaymentAgent)} secondary large @@ -120,7 +120,7 @@ const PaymentAgentReceipt = ({ currency, history, is_from_derivgo, loginid, rece +
+ + ); + }} + + + + + +
+ ); +}; + +PaymentAgentUnlistedWithdrawForm.propTypes = { + balance: PropTypes.string, + currency: PropTypes.string, + error: PropTypes.object, + onMount: PropTypes.func, + requestTryPaymentAgentWithdraw: PropTypes.func, + verification_code: PropTypes.string, + setIsUnlistedWithdraw: PropTypes.func, +}; + +export default connect(({ client, modules }) => ({ + balance: client.balance, + currency: client.currency, + error: modules.cashier.payment_agent.error, + onMount: modules.cashier.payment_agent.onMountPaymentAgentWithdraw, + requestTryPaymentAgentWithdraw: modules.cashier.payment_agent.requestTryPaymentAgentWithdraw, + verification_code: client.verification_code.payment_agent_withdraw, +}))(PaymentAgentUnlistedWithdrawForm); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/payment-agent-unlisted-withdraw-form.scss b/packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/payment-agent-unlisted-withdraw-form.scss new file mode 100644 index 000000000000..e35a0d8f63a5 --- /dev/null +++ b/packages/cashier/src/pages/payment-agent/payment-agent-unlisted-withdraw-form/payment-agent-unlisted-withdraw-form.scss @@ -0,0 +1,58 @@ +.payment-agent-withdraw-form { + &__page-return { + display: flex; + column-gap: 0.8rem; + margin: 2.4rem 0; + align-items: center; + @include mobile { + margin: 0 0 1.6rem; + } + .dc-icon { + cursor: pointer; + } + .dc-text { + padding-top: 1px; + } + } + &__form { + margin-bottom: 3.6rem; + @include mobile { + margin-bottom: 1.6rem; + } + &-account-number { + margin-bottom: 4.4rem; + @include mobile { + margin: 1.6rem 0 5.2rem; + } + .dc-icon { + cursor: pointer; + } + } + &-amount { + display: flex; + @include mobile { + flex-direction: column; + } + .dc-input { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; + @include mobile { + border: 1px solid var(--border-normal); + border-top-right-radius: 0.4rem; + border-bottom-right-radius: 0.4rem; + } + } + .dc-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + @include mobile { + margin-top: 4rem; + border-top-left-radius: 0.4rem; + border-bottom-left-radius: 0.4rem; + } + } + } + } +} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/__tests__/payment-agent-withdraw-confirm.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/__tests__/payment-agent-withdraw-confirm.spec.js index c45ad9576429..0cd2103d2b0f 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/__tests__/payment-agent-withdraw-confirm.spec.js +++ b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/__tests__/payment-agent-withdraw-confirm.spec.js @@ -1,5 +1,6 @@ import React from 'react'; -import { cleanup, fireEvent, render, screen } from '@testing-library/react'; +import ReactDOM from 'react-dom'; +import { fireEvent, render, screen } from '@testing-library/react'; import PaymentAgentWithdrawConfirm from '../payment-agent-withdraw-confirm'; jest.mock('Stores/connect', () => ({ @@ -8,70 +9,96 @@ jest.mock('Stores/connect', () => ({ connect: () => Component => Component, })); -beforeAll(() => { - const portal_root = document.createElement('div'); - portal_root.setAttribute('id', 'modal_root'); - document.body.appendChild(portal_root); -}); - -afterEach(cleanup); - describe('', () => { - const amount = 10; - const currency = 'BTC'; - const description = 'testDescription'; - const error = { - code: 'testCode', - message: 'testMessage', - }; - const header = 'Please confirm the transaction details in order to complete the withdrawal:'; - const requestPaymentAgentWithdraw = jest.fn(); - const setIsTryWithdrawSuccessful = jest.fn(); - - it('component should be rendered', () => { - render(); + beforeAll(() => { + ReactDOM.createPortal = jest.fn(component => { + return component; + }); + }); - expect(screen.getByTestId('dt_cashier_wrapper_transfer_confirm')).toBeInTheDocument(); + afterAll(() => { + ReactDOM.createPortal.mockClear(); }); - it('component should be rendered when has data', () => { - render(); + const props = { + amount: 20, + currency: 'USD', + client_loginid: 'CR90000100', + error: {}, + loginid: 'CR90000999', + payment_agent_name: 'Alicharger', + requestPaymentAgentWithdraw: jest.fn(), + setIsTryWithdrawSuccessful: jest.fn(), + verification_code: 'ABCdef', + }; - expect(screen.getByTestId('dt_transfer_confirm_row_0')).toBeInTheDocument(); + it('should show proper messages and buttons', () => { + render(); + + const [back_btn, transfer_now_btn] = screen.getAllByRole('button'); + + expect(screen.getByTestId('dt_red_warning_icon')).toBeInTheDocument(); + expect(screen.getByText('Funds transfer information')).toBeInTheDocument(); + expect(screen.getByText('From account number')).toBeInTheDocument(); + expect(screen.getByText('CR90000100')).toBeInTheDocument(); + expect(screen.getByText('To account number')).toBeInTheDocument(); + expect(screen.getByText('CR90000999')).toBeInTheDocument(); + expect(screen.getByText('Alicharger')).toBeInTheDocument(); + expect(screen.getByText('Amount')).toBeInTheDocument(); + expect(screen.getByText('20.00 USD')).toBeInTheDocument(); + expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(back_btn).toBeInTheDocument(); + expect(transfer_now_btn).toBeInTheDocument(); }); - it('component should be rendered when has an error', () => { - render(); + it('should show error messages and button', () => { + render( + + ); - expect(screen.getByText('testMessage')).toBeInTheDocument(); + expect(screen.getByText('Cashier Error')).toBeInTheDocument(); + expect(screen.getByText('error_message')).toBeInTheDocument(); + expect(screen.getAllByRole('button')[2]).toBeInTheDocument(); }); - it('header should be rendered', () => { - render(); + it('should trigger setIsTryWithdrawSuccessful method when the client clicks on Back button', () => { + render(); + + const [back_btn, _] = screen.getAllByRole('button'); + fireEvent.click(back_btn); - expect(screen.getByText(header)).toBeInTheDocument(); + expect(props.setIsTryWithdrawSuccessful).toHaveBeenCalledWith(false); }); - it(`setIsTryWithdrawSuccessful func should be triggered when click on 'Back' button`, () => { - render(); + it('should enable Transfer now button when checkbox is checked', () => { + render(); - const btn = screen.getByText('Back'); - fireEvent.click(btn); - expect(setIsTryWithdrawSuccessful).toBeCalledTimes(1); + const el_checkbox = screen.getByRole('checkbox'); + const [_, transfer_now_btn] = screen.getAllByRole('button'); + fireEvent.click(el_checkbox); + + expect(transfer_now_btn).toBeEnabled(); }); - it(`requestPaymentAgentWithdraw func should be triggered when click on 'Confirm' button`, () => { - render( - - ); + it('should trigger requestPaymentAgentWithdraw method when the client clicks on Transfer now button', () => { + render(); + + const el_checkbox = screen.getByRole('checkbox'); + const [_, transfer_now_btn] = screen.getAllByRole('button'); + fireEvent.click(el_checkbox); + fireEvent.click(transfer_now_btn); - const btn = screen.getByText('Confirm'); - fireEvent.click(btn); - expect(requestPaymentAgentWithdraw).toBeCalledTimes(1); + expect(props.requestPaymentAgentWithdraw).toHaveBeenCalledWith({ + loginid: props.loginid, + currency: props.currency, + amount: props.amount, + verification_code: props.verification_code, + }); }); }); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/payment-agent-withdraw-confirm.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/payment-agent-withdraw-confirm.jsx index 0b24e04c34ba..796fb989e6ad 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/payment-agent-withdraw-confirm.jsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/payment-agent-withdraw-confirm.jsx @@ -8,6 +8,7 @@ import TransferConfirm from 'Components/transfer-confirm'; const PaymentAgentWithdrawConfirm = ({ amount, currency, + client_loginid, error, loginid, payment_agent_name, @@ -17,7 +18,12 @@ const PaymentAgentWithdrawConfirm = ({ }) => ( , @@ -25,7 +31,7 @@ const PaymentAgentWithdrawConfirm = ({ }, ]} error={error} - header={localize('Please confirm the transaction details in order to complete the withdrawal:')} + is_payment_agent_withdraw onClickBack={() => { setIsTryWithdrawSuccessful(false); }} @@ -38,6 +44,7 @@ const PaymentAgentWithdrawConfirm = ({ PaymentAgentWithdrawConfirm.propTypes = { amount: PropTypes.number, currency: PropTypes.string, + client_loginid: PropTypes.string, error: PropTypes.object, loginid: PropTypes.string, payment_agent_name: PropTypes.string, @@ -46,9 +53,10 @@ PaymentAgentWithdrawConfirm.propTypes = { verification_code: PropTypes.string, }; -export default connect(({ modules }) => ({ +export default connect(({ client, modules }) => ({ amount: modules.cashier.payment_agent.confirm.amount, currency: modules.cashier.payment_agent.confirm.currency, + client_loginid: client.loginid, error: modules.cashier.payment_agent.error, loginid: modules.cashier.payment_agent.confirm.loginid, payment_agent_name: modules.cashier.payment_agent.confirm.payment_agent_name, diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/__tests__/payment-agent-withdraw-form.spec.js b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/__tests__/payment-agent-withdraw-form.spec.js deleted file mode 100644 index 3a2827ab02a1..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/__tests__/payment-agent-withdraw-form.spec.js +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import PaymentAgentWithdrawForm from '../payment-agent-withdraw-form'; - -jest.mock('Stores/connect', () => ({ - __esModule: true, - default: 'mockedDefaultExport', - connect: () => Component => Component, -})); - -jest.mock('@deriv/shared/src/utils/validation/declarative-validation-rules', () => ({ - __esModule: true, - default: 'mockedDefaultExport', - validNumber: jest.fn(() => true), -})); - -describe('', () => { - const onMount = jest.fn(); - const resetPaymentAgent = jest.fn(); - const payment_agent_list = [ - { - currencies: 'USD', - deposit_commission: '0', - email: 'test@example.com', - further_information: 'Test Info', - max_withdrawal: '2000', - min_withdrawal: '10', - name: 'Payment Agent', - paymentagent_loginid: 'CR90000874', - summary: 'Test Summary', - supported_banks: null, - telephone: '+12345678', - url: 'http://www.MyPAMyAdventure.com/', - withdrawal_commission: '0', - }, - ]; - - beforeAll(() => { - const modal_root_el = document.createElement('div'); - modal_root_el.setAttribute('id', 'modal_root'); - document.body.appendChild(modal_root_el); - }); - - afterAll(() => { - document.body.removeChild(modal_root_el); - }); - - it('should render the component', () => { - const { container } = render( - - ); - - expect(container.firstChild).toHaveClass('payment-agent-withdraw-form__withdrawal'); - }); - - it('should show the withdrawal confirmation', () => { - const { container } = render( - - ); - - expect(container.firstChild).toHaveClass('cashier__wrapper--confirm'); - }); - - it('should show an error if amount is not provided', async () => { - render( - - ); - - const withdraw_button = screen.getByRole('button'); - fireEvent.click(withdraw_button); - - await waitFor(() => { - expect(screen.getByText('This field is required.')).toBeInTheDocument(); - }); - }); - - it('should not proceed if amount is greater than the withdrawal limit', async () => { - const { container } = render( - - ); - - const amount = container.querySelector('input[name=amount]'); - const withdraw_button = screen.getByRole('button'); - - fireEvent.change(amount, { target: { value: '2500' } }); - fireEvent.click(withdraw_button); - - await waitFor(() => { - expect(withdraw_button).toBeDisabled(); - }); - }); - - it('should not proceed if payment agent id is invalid', async () => { - const { container } = render( - - ); - - const payment_agent = container.querySelector('input[name=payment_agent]'); - const withdraw_button = screen.getByRole('button'); - - fireEvent.change(payment_agent, { target: { value: 'abc' } }); - fireEvent.click(withdraw_button); - - await waitFor(() => { - expect(withdraw_button).toBeDisabled(); - }); - }); -}); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/index.js b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/index.js deleted file mode 100644 index 1d1693b2e48a..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import PaymentAgentWithdrawForm from './payment-agent-withdraw-form.jsx'; - -export default PaymentAgentWithdrawForm; diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.jsx b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.jsx deleted file mode 100644 index dcca5f276844..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.jsx +++ /dev/null @@ -1,365 +0,0 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { Field, Formik, Form } from 'formik'; -import { - Button, - DesktopWrapper, - Dropdown, - Input, - Loading, - MobileWrapper, - Money, - SelectNative, - Text, -} from '@deriv/components'; -import { getDecimalPlaces, getCurrencyDisplayCode, validNumber } from '@deriv/shared'; -import { localize, Localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; -import ErrorDialog from 'Components/error-dialog'; -import PaymentAgentWithdrawConfirm from '../payment-agent-withdraw-confirm'; -import PaymentAgentReceipt from '../payment-agent-receipt'; -import './payment-agent-withdraw-form.scss'; - -const validateWithdrawal = (values, { balance, currency, payment_agent = {} }) => { - const errors = {}; - - if ( - values.payment_method === 'payment_agent' && - (!values.payment_agent || !/^[A-Za-z]+[0-9]+$/.test(values.payment_agent)) - ) { - errors.payment_agent = localize('Please enter a valid payment agent ID.'); - } - - const { is_ok, message } = validNumber(values.amount, { - type: 'float', - decimals: getDecimalPlaces(currency), - ...(payment_agent.min_withdrawal && { - min: payment_agent.min_withdrawal, - max: payment_agent.max_withdrawal, - }), - }); - - if (!values.amount) { - errors.amount = localize('This field is required.'); - } else if (!is_ok) { - errors.amount = message; - } else if (+balance < +values.amount) { - errors.amount = localize('Insufficient balance.'); - } - - return errors; -}; - -// TODO: refactor this to use the main radio component for forms too if possible -const Radio = ({ children, field, props }) => ( -
- - -
-); - -const RadioDropDown = ({ field, values, ...props }) => ( - - - - - - {params => ( - - - { - params.form.setFieldValue('payment_agents', e.target.value); - params.form.setFieldValue('payment_method', props.id); - }} - /> - - - { - params.form.setFieldValue('payment_agents', e.target.value); - params.form.setFieldValue('payment_method', props.id); - }} - use_text={false} - /> - - - )} - - -); - -const RadioInput = ({ touched, errors, field, values, ...props }) => ( - - - - - - {params => ( - { - params.form.setFieldValue('payment_method', props.id); - }} - onBlur={params.field.onBlur} - /> - )} - - -); - -const PaymentAgentWithdrawForm = ({ - amount, - balance, - currency, - error, - is_loading, - is_try_withdraw_successful, - is_withdraw_successful, - onMount, - payment_agent_id, - payment_agent_list, - payment_agent_name, - requestTryPaymentAgentWithdraw, - resetPaymentAgent, - verification_code, -}) => { - React.useEffect(() => { - onMount(); - - return () => { - resetPaymentAgent(); - }; - }, [onMount, resetPaymentAgent]); - - const validateWithdrawalPassthrough = values => - validateWithdrawal(values, { - balance, - currency, - payment_agent: payment_agent_list.find(pa => pa.value === values[values.payment_method]), - }); - - const onWithdrawalPassthrough = async (values, actions) => { - const payment_agent_withdraw = await requestTryPaymentAgentWithdraw({ - loginid: values[values.payment_method], - currency, - amount: values.amount, - verification_code, - }); - if (payment_agent_withdraw?.error) { - actions.setSubmitting(false); - } - }; - - if (is_loading || !payment_agent_list.length) { - return ; - } - if (is_try_withdraw_successful) { - return ; - } - if (is_withdraw_successful) { - return ; - } - const should_fill_id = !payment_agent_name && payment_agent_id; - - return ( -
- - - - pa.text === payment_agent_name)?.value, - payment_method: should_fill_id ? 'payment_agent' : 'payment_agents', - }} - validate={validateWithdrawalPassthrough} - onSubmit={onWithdrawalPassthrough} - > - {({ errors, isSubmitting, isValid, values, touched }) => { - const getHint = () => { - const getHintText = payment_agent => { - return ( - payment_agent_list.find(pa => pa.value === payment_agent) && ( - pa.value === payment_agent) - .min_withdrawal - } - currency={currency} - />, - pa.value === payment_agent) - .max_withdrawal - } - currency={currency} - />, - ]} - /> - ) - ); - }; - switch (values.payment_method) { - case 'payment_agents': - return getHintText(values.payment_agents); - case 'payment_agent': - return getHintText(values.payment_agent); - default: - return <>; - } - }; - - return ( -
-
- - -
- - {({ field }) => ( - - {getCurrencyDisplayCode(currency)} - - } - autoComplete='off' - maxLength='30' - hint={getHint()} - /> - )} - -
- -
- - - ); - }} -
-
- ); -}; - -PaymentAgentWithdrawForm.propTypes = { - amount: PropTypes.string, - balance: PropTypes.string, - currency: PropTypes.string, - error: PropTypes.object, - error_message_withdraw: PropTypes.string, - is_loading: PropTypes.bool, - is_try_withdraw_successful: PropTypes.bool, - is_withdraw_successful: PropTypes.bool, - onMount: PropTypes.func, - payment_agent_id: PropTypes.string, - payment_agent_list: PropTypes.array, - payment_agent_name: PropTypes.string, - requestTryPaymentAgentWithdraw: PropTypes.func, - resetPaymentAgent: PropTypes.func, - verification_code: PropTypes.string, -}; - -export default connect(({ client, modules }) => ({ - amount: modules.cashier.payment_agent.confirm.amount, - balance: client.balance, - currency: client.currency, - error: modules.cashier.payment_agent.error, - is_loading: modules.cashier.general_store.is_loading, - is_try_withdraw_successful: modules.cashier.payment_agent.is_try_withdraw_successful, - is_withdraw_successful: modules.cashier.payment_agent.is_withdraw_successful, - onMount: modules.cashier.payment_agent.onMountPaymentAgentWithdraw, - payment_agent_id: modules.cashier.payment_agent.confirm.loginid, - payment_agent_list: modules.cashier.payment_agent.agents, - payment_agent_name: modules.cashier.payment_agent.confirm.payment_agent_name, - requestTryPaymentAgentWithdraw: modules.cashier.payment_agent.requestTryPaymentAgentWithdraw, - resetPaymentAgent: modules.cashier.payment_agent.resetPaymentAgent, -}))(PaymentAgentWithdrawForm); diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.scss b/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.scss deleted file mode 100644 index cfcd5710e7a2..000000000000 --- a/packages/cashier/src/pages/payment-agent/payment-agent-withdraw-form/payment-agent-withdraw-form.scss +++ /dev/null @@ -1,101 +0,0 @@ -.payment-agent-withdraw-form { - &__drop-down { - display: inline-block; - margin: 0; - line-height: 1.43; - padding-left: 1.6rem !important; - flex: 1; - @include mobile { - max-width: 72vw; - } - } - &__input { - margin-left: 1.6rem; - display: inline-block !important; - margin-bottom: 0 !important; - flex: 1; - } - &__withdrawal { - &-header { - margin: 3.2rem 0; - } - } - &__radio { - display: none; - - &-group { - display: block; - } - &-wrapper { - display: flex; - margin-bottom: 3.9rem; - } - &-circle { - border: 2px solid var(--text-less-prominent); - border-radius: 50%; - box-shadow: 0 0 1px 0 $color-white; - width: 16px; - height: 16px; - transition: all 0.3s ease-in-out; - margin-right: 8px; - align-self: center; - display: inline-flex; - - &--selected { - border-width: 4px; - border-color: var(--brand-red-coral); - } - } - } - @include mobile { - &__withdrawal { - display: flex; - justify-content: flex-start; - flex-direction: column; - align-items: center; - - form { - width: 100%; - margin-top: 3.2rem; - } - &-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - } - .payment-agent-withdraw-form__radio { - &-wrapper { - width: 100%; - position: relative; - - &:first-child { - margin-top: 2.4rem; - } - } - &-circle { - width: 16px; - height: 16px; - } - &-label:first-child { - flex: 1; - } - } - .cashier { - &__header { - display: none; - } - &__input { - width: 100%; - } - &__form-submit-button { - max-width: 10rem; - margin-left: auto; - } - } - .dc-select-native__placeholder { - background-color: var(--general-main-1); - } - } - } -} diff --git a/packages/cashier/src/pages/payment-agent/payment-agent.jsx b/packages/cashier/src/pages/payment-agent/payment-agent.jsx index 17a7bb36a8e8..81447ada7c00 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent.jsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent.jsx @@ -15,6 +15,7 @@ const PaymentAgent = ({ payment_agent_active_tab_index, setActiveTab, setPaymentAgentActiveTabIndex, + setSideNotes, verification_code, }) => { const initial_active_index = @@ -40,7 +41,11 @@ const PaymentAgent = ({ return ; } return ( - + ); }; @@ -53,6 +58,7 @@ PaymentAgent.propTypes = { payment_agent_active_tab_index: PropTypes.number, setActiveTab: PropTypes.func, setPaymentAgentActiveTabIndex: PropTypes.func, + setSideNotes: PropTypes.func, verification_code: PropTypes.string, }; diff --git a/packages/cashier/src/stores/__tests__/payment-agent-store.spec.js b/packages/cashier/src/stores/__tests__/payment-agent-store.spec.js index 499788a6ade4..d09519fd7146 100644 --- a/packages/cashier/src/stores/__tests__/payment-agent-store.spec.js +++ b/packages/cashier/src/stores/__tests__/payment-agent-store.spec.js @@ -8,41 +8,63 @@ describe('PaymentAgentStore', () => { const mocked_payment_agent_list = { list: [ { - name: 'Payment Agent of CR90000000', - paymentagent_loginid: 'CR90000000', + currencies: 'USD', + deposit_commission: 0, + email: 'pa@example.com', + further_information: 'further information', max_withdrawal: '2000', min_withdrawal: '10', - email: 'pa@example.com', + name: 'Payment Agent of CR90000000', + paymentagent_loginid: 'CR90000000', phone_numbers: [{ phone_number: '+12345678' }], - urls: [{ url: 'http://www.pa.com' }], supported_payment_methods: [{ payment_method: 'Visa' }], + urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, { - name: 'Payment Agent of CR90000002', - paymentagent_loginid: 'CR90000002', + currencies: 'USD', + deposit_commission: 0, + email: 'pa@example.com', + further_information: 'further information', max_withdrawal: '2000', min_withdrawal: '10', - email: 'pa@example.com', + name: 'Payment Agent of CR90000002', + paymentagent_loginid: 'CR90000002', phone_numbers: [{ phone_number: '+12345678' }], - urls: [{ url: 'http://www.pa.com' }], supported_payment_methods: [{ payment_method: 'Visa' }, { payment_method: 'Mastercard' }], + urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, ], }; const mocked_payment_agents = [ { + currency: 'USD', + deposit_commission: 0, email: 'pa@example.com', - phones: [{ phone_number: '+12345678' }], + further_information: 'further information', + max_withdrawal: '2000', + min_withdrawal: '10', name: 'Payment Agent of CR90000000', + paymentagent_loginid: 'CR90000000', + phones: [{ phone_number: '+12345678' }], supported_banks: [{ payment_method: 'Visa' }], urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, { + currency: 'USD', + deposit_commission: 0, email: 'pa@example.com', - phones: [{ phone_number: '+12345678' }], + further_information: 'further information', + max_withdrawal: '2000', + min_withdrawal: '10', name: 'Payment Agent of CR90000002', + paymentagent_loginid: 'CR90000002', + phones: [{ phone_number: '+12345678' }], supported_banks: [{ payment_method: 'Visa' }, { payment_method: 'Mastercard' }], urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, ]; const mocked_withdrawal_request = { @@ -83,7 +105,9 @@ describe('PaymentAgentStore', () => { paymentagent_list: mocked_payment_agent_list, }) ), - paymentAgentWithdraw: jest.fn(() => Promise.resolve({ paymentagent_withdraw: '2' })), + paymentAgentWithdraw: jest.fn(() => + Promise.resolve({ paymentagent_withdraw: '2', paymentagent_name: 'name' }) + ), }, wait: () => Promise.resolve(), }; @@ -161,11 +185,18 @@ describe('PaymentAgentStore', () => { expect(payment_agent_store.list).toEqual( expect.arrayContaining([ { + currency: 'USD', + deposit_commission: 0, email: 'pa@example.com', - phones: [{ phone_number: '+12345678' }], + further_information: 'further information', + max_withdrawal: '2000', + min_withdrawal: '10', name: 'Payment Agent of CR90000000', + paymentagent_loginid: 'CR90000000', + phones: [{ phone_number: '+12345678' }], supported_banks: [{ payment_method: 'Visa' }], urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, ]) ); @@ -180,7 +211,7 @@ describe('PaymentAgentStore', () => { const spySortSupportedBanks = jest.spyOn(payment_agent_store, 'sortSupportedBanks'); await payment_agent_store.setPaymentAgentList(); - expect(payment_agent_store.list).toEqual(mocked_payment_agents); + expect(payment_agent_store.list).toEqual(expect.arrayContaining(mocked_payment_agents)); expect(spySortSupportedBanks).toHaveBeenCalled(); }); @@ -190,16 +221,55 @@ describe('PaymentAgentStore', () => { expect(payment_agent_store.filtered_list).toEqual( expect.arrayContaining([ { + currency: 'USD', + deposit_commission: 0, email: 'pa@example.com', + further_information: 'further information', + max_withdrawal: '2000', + min_withdrawal: '10', + name: 'Payment Agent of CR90000002', + paymentagent_loginid: 'CR90000002', phones: [{ phone_number: '+12345678' }], + supported_banks: [{ payment_method: 'Visa' }, { payment_method: 'Mastercard' }], + urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, + }, + ]) + ); + }); + + it('should filter payment agent list by search term', async () => { + payment_agent_store.setSearchTerm('CR90000002'); + await payment_agent_store.setPaymentAgentList(); + payment_agent_store.filterPaymentAgentList(); + expect(payment_agent_store.filtered_list.length).toBe(1); + expect(payment_agent_store.filtered_list).toEqual( + expect.arrayContaining([ + { + currency: 'USD', + deposit_commission: 0, + email: 'pa@example.com', + further_information: 'further information', + max_withdrawal: '2000', + min_withdrawal: '10', name: 'Payment Agent of CR90000002', + paymentagent_loginid: 'CR90000002', + phones: [{ phone_number: '+12345678' }], supported_banks: [{ payment_method: 'Visa' }, { payment_method: 'Mastercard' }], urls: [{ url: 'http://www.pa.com' }], + withdrawal_commission: 0, }, ]) ); }); + it('should set has_payment_agent_search_warning to true when there is no matches for the search term', async () => { + payment_agent_store.setSearchTerm('blabla'); + await payment_agent_store.setPaymentAgentList(); + payment_agent_store.filterPaymentAgentList(); + expect(payment_agent_store.filtered_list.length).toBe(0); + }); + it('should return empty filtered list of payment agent if there is no payment agent available when accessing from payment agent page', async () => { payment_agent_store.filterPaymentAgentList(); expect(payment_agent_store.filtered_list).toEqual([]); @@ -222,6 +292,21 @@ describe('PaymentAgentStore', () => { expect(payment_agent_store.is_withdraw).toBeFalsy(); }); + it('should set is_search_loading', () => { + payment_agent_store.setIsSearchLoading(true); + expect(payment_agent_store.is_search_loading).toBeTruthy(); + }); + + it('should set has_payment_agent_search_warning', () => { + payment_agent_store.setPaymentAgentSearchWarning(true); + expect(payment_agent_store.has_payment_agent_search_warning).toBeTruthy(); + }); + + it('should set search_term', () => { + payment_agent_store.setSearchTerm('Search term'); + expect(payment_agent_store.search_term).toBe('Search term'); + }); + it('should set is_try_withdraw_successful', () => { const spySetErrorMessage = jest.spyOn(payment_agent_store.error, 'setErrorMessage'); diff --git a/packages/cashier/src/stores/general-store.js b/packages/cashier/src/stores/general-store.js index a261a0d5bc80..0bbe2f7c12f8 100644 --- a/packages/cashier/src/stores/general-store.js +++ b/packages/cashier/src/stores/general-store.js @@ -297,8 +297,10 @@ export default class GeneralStore extends BaseStore { } // we need to see if client's country has PA // if yes, we can show the PA tab in cashier + this.setLoading(true); await payment_agent.setPaymentAgentList(); await payment_agent.filterPaymentAgentList(); + this.setLoading(false); if (!payment_agent_transfer.is_payment_agent) { payment_agent_transfer.checkIsPaymentAgent(); diff --git a/packages/cashier/src/stores/payment-agent-store.js b/packages/cashier/src/stores/payment-agent-store.js index 10d512a1188e..822454845cbd 100644 --- a/packages/cashier/src/stores/payment-agent-store.js +++ b/packages/cashier/src/stores/payment-agent-store.js @@ -1,5 +1,5 @@ import { action, computed, observable } from 'mobx'; -import { formatMoney, routes } from '@deriv/shared'; +import { formatMoney, routes, shuffleArray } from '@deriv/shared'; import Constants from 'Constants/constants'; import ErrorStore from './error-store'; import VerificationStore from './verification-store'; @@ -16,6 +16,7 @@ export default class PaymentAgentStore { @observable error = new ErrorStore(); @observable filtered_list = []; @observable is_name_selected = true; + @observable is_search_loading = false; @observable is_withdraw = false; @observable is_try_withdraw_successful = false; @observable is_withdraw_successful = false; @@ -26,6 +27,8 @@ export default class PaymentAgentStore { @observable verification = new VerificationStore({ root_store: this.root_store, WS: this.WS }); @observable active_tab_index = 0; @observable all_payment_agent_list = []; + @observable search_term = ''; + @observable has_payment_agent_search_warning = false; @action.bound setActiveTabIndex(index) { @@ -43,7 +46,7 @@ export default class PaymentAgentStore { @computed get is_payment_agent_visible() { - return !!(this.filtered_list.length || this.agents.length); + return !!(this.filtered_list.length || this.agents.length || this.has_payment_agent_search_warning); } @action.bound @@ -104,6 +107,7 @@ export default class PaymentAgentStore { @action.bound async setPaymentAgentList(pa_list) { + const { setLoading } = this.root_store.modules.cashier.general_store; const payment_agent_list = pa_list || (await this.getPaymentAgentList()); this.clearList(); this.clearSuppertedBanks(); @@ -111,16 +115,25 @@ export default class PaymentAgentStore { try { payment_agent_list.paymentagent_list?.list.forEach(payment_agent => { this.setList({ + currency: payment_agent.currencies, + deposit_commission: payment_agent.deposit_commission, email: payment_agent.email, - phones: payment_agent?.phone_numbers || payment_agent?.telephone, + further_information: payment_agent.further_information, + max_withdrawal: payment_agent.max_withdrawal, + min_withdrawal: payment_agent.min_withdrawal, name: payment_agent.name, + paymentagent_loginid: payment_agent.paymentagent_loginid, + phones: payment_agent?.phone_numbers || payment_agent?.telephone, supported_banks: payment_agent?.supported_payment_methods, urls: payment_agent?.urls || payment_agent?.url, + withdrawal_commission: payment_agent.withdrawal_commission, }); const supported_banks_array = payment_agent?.supported_payment_methods.map(bank => bank.payment_method); supported_banks_array.forEach(bank => this.addSupportedBank(bank)); }); + shuffleArray(this.list); } catch (e) { + setLoading(false); // eslint-disable-next-line no-console console.error(e); } @@ -130,15 +143,24 @@ export default class PaymentAgentStore { @action.bound filterPaymentAgentList(bank) { - if (bank) { - this.filtered_list = []; + this.setPaymentAgentSearchWarning(false); + const { common } = this.root_store; + + this.filtered_list = []; + + if (bank || this.selected_bank) { this.list.forEach(payment_agent => { const supported_banks = payment_agent?.supported_banks; if (supported_banks) { const is_string = typeof supported_banks === 'string'; const bank_index = is_string - ? supported_banks.toLowerCase().split(',').indexOf(bank) - : supported_banks.map(x => x.payment_method.toLowerCase()).indexOf(bank); + ? supported_banks + .toLowerCase() + .split(',') + .indexOf(bank || this.selected_bank) + : supported_banks + .map(supported_bank => supported_bank.payment_method.toLowerCase()) + .indexOf(bank || this.selected_bank); if (bank_index !== -1) this.filtered_list.push(payment_agent); } @@ -146,6 +168,36 @@ export default class PaymentAgentStore { } else { this.filtered_list = this.list; } + if (this.search_term) { + this.filtered_list = this.filtered_list.filter(payment_agent => { + return payment_agent.name.toLocaleLowerCase().includes(this.search_term.toLocaleLowerCase()); + }); + + if (this.filtered_list.length === 0) { + this.setPaymentAgentSearchWarning(true); + } + } + + this.setIsSearchLoading(false); + + if (!this.is_payment_agent_visible && window.location.pathname.endsWith(routes.cashier_pa)) { + common.routeTo(routes.cashier_deposit); + } + } + + @action.bound + setSearchTerm(search_term) { + this.search_term = search_term; + } + + @action.bound + setIsSearchLoading(value) { + this.is_search_loading = value; + } + + @action.bound + setPaymentAgentSearchWarning(value) { + this.has_payment_agent_search_warning = value; } @action.bound @@ -257,7 +309,7 @@ export default class PaymentAgentStore { amount, currency, loginid, - ...(selected_agent && { payment_agent_name: selected_agent.text }), + payment_agent_name: selected_agent?.text || payment_agent_withdraw.paymentagent_name, }); this.setIsTryWithdrawSuccessful(true); } else { @@ -269,6 +321,8 @@ export default class PaymentAgentStore { resetPaymentAgent = () => { this.error.setErrorMessage(''); this.setIsWithdraw(false); + this.setIsWithdrawSuccessful(false); + this.setIsTryWithdrawSuccessful(false); this.verification.clearVerification(); this.setActiveTabIndex(0); }; @@ -320,9 +374,6 @@ export default class PaymentAgentStore { payment_agent_phone: selected_agent.phone, payment_agent_url: selected_agent.url, }), - ...(!selected_agent && { - payment_agent_id: loginid, - }), }); this.setIsWithdrawSuccessful(true); this.setIsTryWithdrawSuccessful(false); diff --git a/packages/components/src/components/dropdown/dropdown.jsx b/packages/components/src/components/dropdown/dropdown.jsx index 179c0b2b3ff9..5285887a6368 100644 --- a/packages/components/src/components/dropdown/dropdown.jsx +++ b/packages/components/src/components/dropdown/dropdown.jsx @@ -369,6 +369,7 @@ const Dropdown = ({ className={classNames('dc-dropdown__container', { 'dc-dropdown__container--suffix-icon': suffix_icon, })} + data-testid='dt_dropdown_container' > {label && ( \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-air-tm-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-air-tm-dark.svg index b298351d0bfa..5741fb626161 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-air-tm-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-air-tm-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-air-tm-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-air-tm-light.svg index e4455a40240c..e9605a58d567 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-air-tm-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-air-tm-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-dark.svg index 7c4ffd012835..1f0156e9274d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-light.svg index 7dad39f57492..4fcbc9b69e33 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ali-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-alipay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-alipay-dark.svg new file mode 100644 index 000000000000..7698acdd7533 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-alipay-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-alipay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-alipay-light.svg new file mode 100644 index 000000000000..a500c8f4f76b --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-alipay-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-apple-pay.svg b/packages/components/src/components/icon/cashier/ic-cashier-apple-pay.svg index 057ea70e57f1..1d15d304c773 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-apple-pay.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-apple-pay.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-authenticate.svg b/packages/components/src/components/icon/cashier/ic-cashier-authenticate.svg index be3c6d4fa2a7..1a385e50f5cc 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-authenticate.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-authenticate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bank-bri.svg b/packages/components/src/components/icon/cashier/ic-cashier-bank-bri.svg index 029ea2bcdb7e..2434edd5d0d5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-bank-bri.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-bank-bri.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bank-dark.svg new file mode 100644 index 000000000000..5ea8fbaf3fad --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bank-light.svg new file mode 100644 index 000000000000..66b90e83970a --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bank-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bank-transfer.svg b/packages/components/src/components/icon/cashier/ic-cashier-bank-transfer.svg index 81cd4eae8e46..0003349f8ca5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-bank-transfer.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-bank-transfer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bankbri-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bankbri-dark.svg new file mode 100644 index 000000000000..ca17f4c6b80f --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bankbri-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bankbri-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bankbri-light.svg new file mode 100644 index 000000000000..bc462cf877bc --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bankbri-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-dark.svg index da630ee7d4b6..58e9eeed4a09 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-light.svg index 13e7a25a2ac3..d12673bc0edf 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-banxa-small-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bca-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bca-dark.svg new file mode 100644 index 000000000000..c365fd03d740 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bca-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bca-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bca-light.svg new file mode 100644 index 000000000000..f3d608fe7d1f --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bca-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bca.svg b/packages/components/src/components/icon/cashier/ic-cashier-bca.svg index a6f433908650..2426d054707a 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-bca.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-bca.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bch-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bch-dark.svg new file mode 100644 index 000000000000..6b11acf6daac --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bch-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bch-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bch-light.svg new file mode 100644 index 000000000000..ab8433fe6356 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bch-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-dark.svg index 437b9b204383..71303762c700 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-light.svg index 0638cc117756..477494d78b72 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-bitcoin-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-dark.svg index 3318d5ff38c1..a65112ed56a7 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-light.svg index d2e471c50a3e..50801031aa48 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-blueshyft-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bni-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-bni-dark.svg new file mode 100644 index 000000000000..4e75e07b48ba --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bni-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-bni-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-bni-light.svg new file mode 100644 index 000000000000..4e75e07b48ba --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-bni-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-card-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-card-dark.svg new file mode 100644 index 000000000000..3269fbe68a70 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-card-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-card-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-card-light.svg new file mode 100644 index 000000000000..13a1665c78e8 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-card-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-dark.svg index e7b15303c469..9b94fdcbd3a6 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-light.svg index 2b22a038b0ba..b7ba1a295c3f 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-cebuana-lhuillier-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-changelly-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-changelly-dark.svg index c9755b7945d5..ad7c52fdfd95 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-changelly-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-changelly-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-changelly-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-changelly-light.svg index f4654fd10cf3..b4bd5bc17a18 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-changelly-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-changelly-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-dark.svg index 23f322779637..08f9825a33ac 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-light.svg index 07ce381b1332..ecd5a8786560 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-changelly-row-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-changelly.svg b/packages/components/src/components/icon/cashier/ic-cashier-changelly.svg index d0e18ae8cd0f..a252cd55ef56 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-changelly.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-changelly.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-cimb-niaga.svg b/packages/components/src/components/icon/cashier/ic-cashier-cimb-niaga.svg index 39ba7ede26bd..afeaaf880726 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-cimb-niaga.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-cimb-niaga.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-dark.svg new file mode 100644 index 000000000000..f37381a12470 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-light.svg new file mode 100644 index 000000000000..f9daa4f6b49d --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-cimbniaga-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-clipboard.svg b/packages/components/src/components/icon/cashier/ic-cashier-clipboard.svg index 83a945432728..f2a8a19b992c 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-clipboard.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-clipboard.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-commission-deposit.svg b/packages/components/src/components/icon/cashier/ic-cashier-commission-deposit.svg new file mode 100644 index 000000000000..c0416cbe1b04 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-commission-deposit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-commission-withdrawal.svg b/packages/components/src/components/icon/cashier/ic-cashier-commission-withdrawal.svg new file mode 100644 index 000000000000..02923176cf84 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-commission-withdrawal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-crypto-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-crypto-dark.svg new file mode 100644 index 000000000000..0471e113f8ca --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-crypto-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-crypto-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-crypto-light.svg new file mode 100644 index 000000000000..0916c03ef020 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-crypto-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-dai-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-dai-dark.svg new file mode 100644 index 000000000000..c5dbe25d3738 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-dai-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-dai-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-dai-light.svg new file mode 100644 index 000000000000..c5dbe25d3738 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-dai-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-deposit-lock.svg b/packages/components/src/components/icon/cashier/ic-cashier-deposit-lock.svg index 67d5451e6d4c..e81ad8eab72c 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-deposit-lock.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-deposit-lock.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-deposit.svg b/packages/components/src/components/icon/cashier/ic-cashier-deposit.svg index a3a094b4fba1..962e0d87123d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-deposit.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-deposit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-dark.svg new file mode 100644 index 000000000000..eae988c45ad9 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-light.svg new file mode 100644 index 000000000000..494ca15c5aa2 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-diamondbank-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-directa-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-directa-dark.svg index 80bb25d58acc..3875967790fe 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-directa-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-directa-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-directa-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-directa-light.svg index b775ddb5c321..c6065d0d9525 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-directa-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-directa-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-dp2p-blocked.svg b/packages/components/src/components/icon/cashier/ic-cashier-dp2p-blocked.svg index b11f7b96567a..7ba472bbeb2e 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-dp2p-blocked.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-dp2p-blocked.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-dp2p.svg b/packages/components/src/components/icon/cashier/ic-cashier-dp2p.svg index 8038a5a45499..8469ae66c7f8 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-dp2p.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-dp2p.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-dragon-phoenix.svg b/packages/components/src/components/icon/cashier/ic-cashier-dragon-phoenix.svg index ebe6b9000e28..452057686dd0 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-dragon-phoenix.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-dragon-phoenix.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-error.svg b/packages/components/src/components/icon/cashier/ic-cashier-error.svg index 5ec1a354de64..58ec435176b4 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-error.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-error.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-eth-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-eth-dark.svg new file mode 100644 index 000000000000..2daba18a8ee3 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-eth-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-eth-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-eth-light.svg new file mode 100644 index 000000000000..f6a839bc2258 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-eth-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ethereum-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-ethereum-dark.svg index 9171b77a874d..86b81b19097e 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ethereum-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ethereum-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ethereum-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-ethereum-light.svg index 1859a456954b..f3129544d6c7 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ethereum-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ethereum-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ewallet-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-ewallet-dark.svg index 5fa3b345252d..f63e775af3d5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ewallet-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ewallet-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ewallet-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-ewallet-light.svg index 417f76c5ed89..6d9ab8c16cfb 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ewallet-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ewallet-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-firstbank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-firstbank-dark.svg new file mode 100644 index 000000000000..687e9b35fe1e --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-firstbank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-firstbank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-firstbank-light.svg new file mode 100644 index 000000000000..2866c744687c --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-firstbank-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-flexepin-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-flexepin-dark.svg index c89e5420726b..a8a6d41c0e25 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-flexepin-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-flexepin-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-flexepin-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-flexepin-light.svg index 07fc203453cc..bace95f092b6 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-flexepin-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-flexepin-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-fps-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-fps-dark.svg index fd8beb71f91e..b1e91f5f75b7 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-fps-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-fps-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-fps-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-fps-light.svg index b16eee381e8d..3572805c8338 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-fps-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-fps-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-funds-protection.svg b/packages/components/src/components/icon/cashier/ic-cashier-funds-protection.svg index d2ad85427f5e..26cb74c2408f 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-funds-protection.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-funds-protection.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-go-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-go-pay-dark.svg index eda8598c6000..dc19f4402e1d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-go-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-go-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-go-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-go-pay-light.svg index 7aff6effa7d1..d40534418229 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-go-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-go-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-gtbank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-gtbank-dark.svg new file mode 100644 index 000000000000..54766f024fe2 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-gtbank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-gtbank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-gtbank-light.svg new file mode 100644 index 000000000000..54766f024fe2 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-gtbank-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-dark.svg index 65dad2a99f06..3ca64a196786 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-light.svg index fc1397839303..40e9137495aa 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-help-to-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-icbc-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-icbc-dark.svg new file mode 100644 index 000000000000..1acf865a8a98 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-icbc-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-icbc-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-icbc-light.svg new file mode 100644 index 000000000000..aaed5adcd845 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-icbc-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ideal.svg b/packages/components/src/components/icon/cashier/ic-cashier-ideal.svg index c95d88b5b4e4..64c99d5c5119 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ideal.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ideal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-dark.svg index 599c7c3bbb7c..d7eb7a30ac32 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-light.svg index cd8d866ca784..e3d5f167f67d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-insta-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-dark.svg index b4ebc10b1bab..92c85daf4921 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-light.svg index f78751bd9fde..382c150e13a4 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-instant-bank-transfer-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-interac-etransfer.svg b/packages/components/src/components/icon/cashier/ic-cashier-interac-etransfer.svg index 70f34c61e65b..1dce7bf8ca53 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-interac-etransfer.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-interac-etransfer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-dark.svg new file mode 100644 index 000000000000..d1e8705c1248 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-light.svg new file mode 100644 index 000000000000..ab94cc362f39 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-libertyreserve-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-dark.svg index 34c3f44385d4..88f638285b24 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-light.svg index 1ae5764d94fb..28459a23956f 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-lite-coin-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-dark.svg index f859e3c172e6..972017b30629 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-light.svg index b2cf234d68b0..ccd0e0574562 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-local-payment-methods-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-locked.svg b/packages/components/src/components/icon/cashier/ic-cashier-locked.svg index 6bd03c1fe908..d5b7037fc700 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-locked.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-locked.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-maestro.svg b/packages/components/src/components/icon/cashier/ic-cashier-maestro.svg index c0171641ef24..b62bd83482ea 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-maestro.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-maestro.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mandiri-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-dark.svg new file mode 100644 index 000000000000..a6ec84fe2ab0 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mandiri-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-light.svg new file mode 100644 index 000000000000..7372a3009352 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mandiri-pay.svg b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-pay.svg index b727c991877f..da1328b12445 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-mandiri-pay.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-mandiri-pay.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-dark.svg new file mode 100644 index 000000000000..68f2d99ec8c4 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-light.svg new file mode 100644 index 000000000000..91ba36d41e8f --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-mandirisyariah-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mastercard-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-mastercard-dark.svg index 9e8fd41358fd..ae3c650e1cd9 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-mastercard-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-mastercard-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-mastercard-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-mastercard-light.svg index f63899937b98..8cac3b9bad11 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-mastercard-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-mastercard-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-maximum-withdrawal.svg b/packages/components/src/components/icon/cashier/ic-cashier-maximum-withdrawal.svg new file mode 100644 index 000000000000..24255b55627e --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-maximum-withdrawal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-minimum-withdrawal.svg b/packages/components/src/components/icon/cashier/ic-cashier-minimum-withdrawal.svg new file mode 100644 index 000000000000..b90ed1885e39 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-minimum-withdrawal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-minus.svg b/packages/components/src/components/icon/cashier/ic-cashier-minus.svg index 65c9c8a4f0f9..11930ab4c68d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-minus.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-moneygram-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-moneygram-dark.svg new file mode 100644 index 000000000000..37322db7fb01 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-moneygram-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-moneygram-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-moneygram-light.svg new file mode 100644 index 000000000000..8e5b41d793b4 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-moneygram-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-dark.svg index 4b8ee50ee062..761ccddfd0f9 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-light.svg index 2204718c29b9..ab8cb2e7d2e3 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-ngan-loung-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-no-ads.svg b/packages/components/src/components/icon/cashier/ic-cashier-no-ads.svg index ce3e29cd53cc..b3fc8227fa80 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-no-ads.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-no-ads.svg @@ -1 +1 @@ -AD \ No newline at end of file +AD \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-no-balance.svg b/packages/components/src/components/icon/cashier/ic-cashier-no-balance.svg index 76001f770f2e..cdcec0a35350 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-no-balance.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-no-balance.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-no-orders.svg b/packages/components/src/components/icon/cashier/ic-cashier-no-orders.svg index a3861dc427fb..712595268362 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-no-orders.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-no-orders.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-off-ramp.svg b/packages/components/src/components/icon/cashier/ic-cashier-off-ramp.svg index 42fa1f17e8dc..6427415e755a 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-off-ramp.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-off-ramp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-on-ramp.svg b/packages/components/src/components/icon/cashier/ic-cashier-on-ramp.svg index fe17bda5f227..8aec7904e13b 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-on-ramp.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-on-ramp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-online-naira-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-online-naira-dark.svg index e62575d0299c..25e81e119d4a 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-online-naira-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-online-naira-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-online-naira-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-online-naira-light.svg index 5dc0ebf99407..6bfc2506c152 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-online-naira-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-online-naira-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-p2p-user.svg b/packages/components/src/components/icon/cashier/ic-cashier-p2p-user.svg index 976d981b64b3..fbf0a5e109e5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-p2p-user.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-p2p-user.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-id-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-id-dark.svg index a319c24f0862..f70061038ea5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-id-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-id-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-id-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-id-light.svg index c48cbe9d0675..0abc97427002 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-id-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-id-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-dark.svg index 7d791f7e8a8e..0b88fc352072 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-light.svg index 696f617bcfbc..6ec59ae7dcaa 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-livre-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-now-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-now-dark.svg index 0ba57daa0424..0d80c2d25d09 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-now-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-now-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-now-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-now-light.svg index 71060345088f..ecc0d5f5857b 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-now-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-now-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-dark.svg index 2a2140d36fd5..ab2950e6307b 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-light.svg index 614409512da7..36e0f7acf86d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-pay-retailers-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-paypal-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-paypal-dark.svg new file mode 100644 index 000000000000..46f4f1452572 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-paypal-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-paypal-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-paypal-light.svg new file mode 100644 index 000000000000..46f4f1452572 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-paypal-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-dark.svg index 4ac0b232d8e4..1ff04b583e55 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-light.svg index 1c1c39adaaa9..6e7ba6ba403a 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-perfect-money-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-permatabank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-permatabank-dark.svg new file mode 100644 index 000000000000..ee3b8f21b6df --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-permatabank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-permatabank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-permatabank-light.svg new file mode 100644 index 000000000000..a5fef0be7ce9 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-permatabank-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-poli-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-poli-dark.svg index 47148a5d9428..1c8a36f3cfc5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-poli-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-poli-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-poli-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-poli-light.svg index f1e8b752df63..d6bf7c95d8da 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-poli-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-poli-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-dark.svg index 8071c345a73c..c3e57cb767fe 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-light.svg index aa64a57b9f85..ead20e2a1c53 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-post-bill-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-dark.svg index 4bf3f062b1f2..62913bddb963 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-light.svg index 3e6d461854b0..34a6bcc7d1c7 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-prompt-pay-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-qr-code-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-qr-code-dark.svg index 0f476932bf93..9ba84205656d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-qr-code-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-qr-code-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-qr-code-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-qr-code-light.svg index 80e4d2fbd4af..566d1d90cae7 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-qr-code-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-qr-code-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-search.svg b/packages/components/src/components/icon/cashier/ic-cashier-search.svg new file mode 100644 index 000000000000..30c3db276e04 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-send-email.svg b/packages/components/src/components/icon/cashier/ic-cashier-send-email.svg index f96157c32ce9..b9c09818970c 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-send-email.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-send-email.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-sepa-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-sepa-dark.svg index 995338cd59c3..63990eab0c0e 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-sepa-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-sepa-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-sepa-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-sepa-light.svg index 6a866d67028b..557017e38ace 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-sepa-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-sepa-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-sofort.svg b/packages/components/src/components/icon/cashier/ic-cashier-sofort.svg index b9964d4701e9..9ec4d6d80aa0 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-sofort.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-sofort.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-tether-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-tether-dark.svg index 3753853b1d65..43dafad55542 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-tether-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-tether-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-tether-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-tether-light.svg index 1786e49361a1..df3c988538b9 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-tether-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-tether-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-top-up.svg b/packages/components/src/components/icon/cashier/ic-cashier-top-up.svg index 03173f341f85..c607b1a6f63d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-top-up.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-top-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-upi-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-upi-dark.svg index fa72f3207383..eef668c70c73 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-upi-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-upi-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-upi-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-upi-light.svg index 01ab297b8bf6..d5e2705f0e96 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-upi-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-upi-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-dark.svg index 086009994e02..1d2629fb1247 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-light.svg index 3aa699aee6b8..314d926bc897 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-usd-coin-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-verification-badge.svg b/packages/components/src/components/icon/cashier/ic-cashier-verification-badge.svg index c87840edf4c2..b08e10138e3d 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-verification-badge.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-verification-badge.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-vertical-ellipsis.svg b/packages/components/src/components/icon/cashier/ic-cashier-vertical-ellipsis.svg index a0d0171000eb..d934062e0026 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-vertical-ellipsis.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-vertical-ellipsis.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-verve-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-verve-dark.svg new file mode 100644 index 000000000000..4587f3c2086f --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-verve-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-verve-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-verve-light.svg new file mode 100644 index 000000000000..db17b5baa60c --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-verve-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-viettle-pay.svg b/packages/components/src/components/icon/cashier/ic-cashier-viettle-pay.svg index 2cb1c58b405e..f5387a65dacd 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-viettle-pay.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-viettle-pay.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-visa-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-visa-dark.svg index 2348c35500e6..d37c2687535b 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-visa-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-visa-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-visa-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-visa-light.svg index 48d33789c4d3..411f15d04d62 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-visa-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-visa-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-wallet.svg b/packages/components/src/components/icon/cashier/ic-cashier-wallet.svg index 1d56be73e354..a53339e24df5 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-wallet.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-wallet.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-dark.svg new file mode 100644 index 000000000000..7b805dc1a8d2 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-light.svg new file mode 100644 index 000000000000..7b805dc1a8d2 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-wechatpay-light.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-withdrawal-lock.svg b/packages/components/src/components/icon/cashier/ic-cashier-withdrawal-lock.svg index deae364d5f58..35453dc90155 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-withdrawal-lock.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-withdrawal-lock.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-withdrawal.svg b/packages/components/src/components/icon/cashier/ic-cashier-withdrawal.svg index 44aad3e95735..87bebf60e7d4 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-withdrawal.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-withdrawal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-wyre-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-wyre-dark.svg index 3cfb6f6044a4..0bfd5f29a6ac 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-wyre-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-wyre-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-wyre-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-wyre-light.svg index e077948d42e8..b386d29e6c2c 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-wyre-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-wyre-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-dark.svg index 421c56dd37fc..27890b07716f 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-light.svg index 77501b8d3614..07c52e5b0f95 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-dark.svg index 2ff07766e581..4d3bbe8ac01a 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-dark.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-light.svg index dfaea6a6fea5..6fedc3226674 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-light.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier-xanpool-small-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-dark.svg b/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-dark.svg new file mode 100644 index 000000000000..162403c15539 --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-light.svg b/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-light.svg new file mode 100644 index 000000000000..ca363a6677fa --- /dev/null +++ b/packages/components/src/components/icon/cashier/ic-cashier-zenithbank-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/cashier/ic-cashier.svg b/packages/components/src/components/icon/cashier/ic-cashier.svg index 027a31fbc4d8..457473a715fe 100644 --- a/packages/components/src/components/icon/cashier/ic-cashier.svg +++ b/packages/components/src/components/icon/cashier/ic-cashier.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-close-circle-red.svg b/packages/components/src/components/icon/common/ic-close-circle-red.svg new file mode 100644 index 000000000000..46f999487968 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-close-circle-red.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-email-outline-new.svg b/packages/components/src/components/icon/common/ic-email-outline-new.svg new file mode 100644 index 000000000000..fac6daa5722c --- /dev/null +++ b/packages/components/src/components/icon/common/ic-email-outline-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 67a98bfc89cc..de1b602f4513 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -16,21 +16,35 @@ import './cashier/ic-cashier-air-tm-dark.svg'; import './cashier/ic-cashier-air-tm-light.svg'; import './cashier/ic-cashier-ali-pay-dark.svg'; import './cashier/ic-cashier-ali-pay-light.svg'; +import './cashier/ic-cashier-alipay-dark.svg'; +import './cashier/ic-cashier-alipay-light.svg'; import './cashier/ic-cashier-apple-pay.svg'; import './cashier/ic-cashier-authenticate.svg'; import './cashier/ic-cashier-bank-bri.svg'; +import './cashier/ic-cashier-bank-dark.svg'; +import './cashier/ic-cashier-bank-light.svg'; import './cashier/ic-cashier-bank-transfer.svg'; +import './cashier/ic-cashier-bankbri-dark.svg'; +import './cashier/ic-cashier-bankbri-light.svg'; import './cashier/ic-cashier-banxa-dark.svg'; import './cashier/ic-cashier-banxa-light.svg'; import './cashier/ic-cashier-banxa-small-dark.svg'; import './cashier/ic-cashier-banxa-small-light.svg'; +import './cashier/ic-cashier-bca-dark.svg'; +import './cashier/ic-cashier-bca-light.svg'; import './cashier/ic-cashier-bca.svg'; +import './cashier/ic-cashier-bch-dark.svg'; +import './cashier/ic-cashier-bch-light.svg'; import './cashier/ic-cashier-bitcoin-dark.svg'; import './cashier/ic-cashier-bitcoin-light.svg'; import './cashier/ic-cashier-blueshyft-dark.svg'; import './cashier/ic-cashier-blueshyft-light.svg'; +import './cashier/ic-cashier-bni-dark.svg'; +import './cashier/ic-cashier-bni-light.svg'; import './cashier/ic-cashier-bpay-dark.svg'; import './cashier/ic-cashier-bpay-light.svg'; +import './cashier/ic-cashier-card-dark.svg'; +import './cashier/ic-cashier-card-light.svg'; import './cashier/ic-cashier-cebuana-lhuillier-dark.svg'; import './cashier/ic-cashier-cebuana-lhuillier-light.svg'; import './cashier/ic-cashier-changelly-dark.svg'; @@ -39,20 +53,34 @@ import './cashier/ic-cashier-changelly-row-dark.svg'; import './cashier/ic-cashier-changelly-row-light.svg'; import './cashier/ic-cashier-changelly.svg'; import './cashier/ic-cashier-cimb-niaga.svg'; +import './cashier/ic-cashier-cimbniaga-dark.svg'; +import './cashier/ic-cashier-cimbniaga-light.svg'; import './cashier/ic-cashier-clipboard.svg'; +import './cashier/ic-cashier-commission-deposit.svg'; +import './cashier/ic-cashier-commission-withdrawal.svg'; +import './cashier/ic-cashier-crypto-dark.svg'; +import './cashier/ic-cashier-crypto-light.svg'; +import './cashier/ic-cashier-dai-dark.svg'; +import './cashier/ic-cashier-dai-light.svg'; import './cashier/ic-cashier-deposit-lock.svg'; import './cashier/ic-cashier-deposit.svg'; +import './cashier/ic-cashier-diamondbank-dark.svg'; +import './cashier/ic-cashier-diamondbank-light.svg'; import './cashier/ic-cashier-directa-dark.svg'; import './cashier/ic-cashier-directa-light.svg'; import './cashier/ic-cashier-dp2p-blocked.svg'; import './cashier/ic-cashier-dp2p.svg'; import './cashier/ic-cashier-dragon-phoenix.svg'; import './cashier/ic-cashier-error.svg'; +import './cashier/ic-cashier-eth-dark.svg'; +import './cashier/ic-cashier-eth-light.svg'; import './cashier/ic-cashier-ethereum-dark.svg'; import './cashier/ic-cashier-ethereum-light.svg'; import './cashier/ic-cashier-ewallet-dark.svg'; import './cashier/ic-cashier-ewallet-light.svg'; import './cashier/ic-cashier-ewallet.svg'; +import './cashier/ic-cashier-firstbank-dark.svg'; +import './cashier/ic-cashier-firstbank-light.svg'; import './cashier/ic-cashier-flexepin-dark.svg'; import './cashier/ic-cashier-flexepin-light.svg'; import './cashier/ic-cashier-fps-dark.svg'; @@ -60,24 +88,38 @@ import './cashier/ic-cashier-fps-light.svg'; import './cashier/ic-cashier-funds-protection.svg'; import './cashier/ic-cashier-go-pay-dark.svg'; import './cashier/ic-cashier-go-pay-light.svg'; +import './cashier/ic-cashier-gtbank-dark.svg'; +import './cashier/ic-cashier-gtbank-light.svg'; import './cashier/ic-cashier-help-to-pay-dark.svg'; import './cashier/ic-cashier-help-to-pay-light.svg'; +import './cashier/ic-cashier-icbc-dark.svg'; +import './cashier/ic-cashier-icbc-light.svg'; import './cashier/ic-cashier-ideal.svg'; import './cashier/ic-cashier-insta-pay-dark.svg'; import './cashier/ic-cashier-insta-pay-light.svg'; import './cashier/ic-cashier-instant-bank-transfer-dark.svg'; import './cashier/ic-cashier-instant-bank-transfer-light.svg'; import './cashier/ic-cashier-interac-etransfer.svg'; +import './cashier/ic-cashier-libertyreserve-dark.svg'; +import './cashier/ic-cashier-libertyreserve-light.svg'; import './cashier/ic-cashier-lite-coin-dark.svg'; import './cashier/ic-cashier-lite-coin-light.svg'; import './cashier/ic-cashier-local-payment-methods-dark.svg'; import './cashier/ic-cashier-local-payment-methods-light.svg'; import './cashier/ic-cashier-locked.svg'; import './cashier/ic-cashier-maestro.svg'; +import './cashier/ic-cashier-mandiri-dark.svg'; +import './cashier/ic-cashier-mandiri-light.svg'; import './cashier/ic-cashier-mandiri-pay.svg'; +import './cashier/ic-cashier-mandirisyariah-dark.svg'; +import './cashier/ic-cashier-mandirisyariah-light.svg'; import './cashier/ic-cashier-mastercard-dark.svg'; import './cashier/ic-cashier-mastercard-light.svg'; +import './cashier/ic-cashier-maximum-withdrawal.svg'; +import './cashier/ic-cashier-minimum-withdrawal.svg'; import './cashier/ic-cashier-minus.svg'; +import './cashier/ic-cashier-moneygram-dark.svg'; +import './cashier/ic-cashier-moneygram-light.svg'; import './cashier/ic-cashier-ngan-loung-dark.svg'; import './cashier/ic-cashier-ngan-loung-light.svg'; import './cashier/ic-cashier-no-ads.svg'; @@ -98,8 +140,12 @@ import './cashier/ic-cashier-pay-now-light.svg'; import './cashier/ic-cashier-pay-retailers-dark.svg'; import './cashier/ic-cashier-pay-retailers-light.svg'; import './cashier/ic-cashier-payment-agent.svg'; +import './cashier/ic-cashier-paypal-dark.svg'; +import './cashier/ic-cashier-paypal-light.svg'; import './cashier/ic-cashier-perfect-money-dark.svg'; import './cashier/ic-cashier-perfect-money-light.svg'; +import './cashier/ic-cashier-permatabank-dark.svg'; +import './cashier/ic-cashier-permatabank-light.svg'; import './cashier/ic-cashier-poli-dark.svg'; import './cashier/ic-cashier-poli-light.svg'; import './cashier/ic-cashier-post-bill-pay-dark.svg'; @@ -109,6 +155,7 @@ import './cashier/ic-cashier-prompt-pay-light.svg'; import './cashier/ic-cashier-qr-code-dark.svg'; import './cashier/ic-cashier-qr-code-light.svg'; import './cashier/ic-cashier-red-warning.svg'; +import './cashier/ic-cashier-search.svg'; import './cashier/ic-cashier-send-email.svg'; import './cashier/ic-cashier-sepa-dark.svg'; import './cashier/ic-cashier-sepa-light.svg'; @@ -123,10 +170,14 @@ import './cashier/ic-cashier-usd-coin-dark.svg'; import './cashier/ic-cashier-usd-coin-light.svg'; import './cashier/ic-cashier-verification-badge.svg'; import './cashier/ic-cashier-vertical-ellipsis.svg'; +import './cashier/ic-cashier-verve-dark.svg'; +import './cashier/ic-cashier-verve-light.svg'; import './cashier/ic-cashier-viettle-pay.svg'; import './cashier/ic-cashier-visa-dark.svg'; import './cashier/ic-cashier-visa-light.svg'; import './cashier/ic-cashier-wallet.svg'; +import './cashier/ic-cashier-wechatpay-dark.svg'; +import './cashier/ic-cashier-wechatpay-light.svg'; import './cashier/ic-cashier-withdraw-wallet.svg'; import './cashier/ic-cashier-withdrawal-lock.svg'; import './cashier/ic-cashier-withdrawal.svg'; @@ -136,6 +187,8 @@ import './cashier/ic-cashier-xanpool-dark.svg'; import './cashier/ic-cashier-xanpool-light.svg'; import './cashier/ic-cashier-xanpool-small-dark.svg'; import './cashier/ic-cashier-xanpool-small-light.svg'; +import './cashier/ic-cashier-zenithbank-dark.svg'; +import './cashier/ic-cashier-zenithbank-light.svg'; import './cashier/ic-cashier.svg'; import './common/ic-account-cross.svg'; import './common/ic-account-dont-get-scam.svg'; @@ -218,6 +271,7 @@ import './common/ic-client.svg'; import './common/ic-clipboard.svg'; import './common/ic-clock-outline.svg'; import './common/ic-clock.svg'; +import './common/ic-close-circle-red.svg'; import './common/ic-close-circle.svg'; import './common/ic-close-light.svg'; import './common/ic-cloud-upload.svg'; @@ -242,6 +296,7 @@ import './common/ic-driving-license-dashboard.svg'; import './common/ic-driving-license.svg'; import './common/ic-edit.svg'; import './common/ic-email-firewall.svg'; +import './common/ic-email-outline-new.svg'; import './common/ic-email-outline.svg'; import './common/ic-email-sent-dashboard.svg'; import './common/ic-email-sent-p2p.svg'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 0b490b28613f..909eeb8ed34e 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -21,21 +21,35 @@ export const icons = 'IcCashierAirTmLight', 'IcCashierAliPayDark', 'IcCashierAliPayLight', + 'IcCashierAlipayDark', + 'IcCashierAlipayLight', 'IcCashierApplePay', 'IcCashierAuthenticate', 'IcCashierBankBri', + 'IcCashierBankDark', + 'IcCashierBankLight', 'IcCashierBankTransfer', + 'IcCashierBankbriDark', + 'IcCashierBankbriLight', 'IcCashierBanxaDark', 'IcCashierBanxaLight', 'IcCashierBanxaSmallDark', 'IcCashierBanxaSmallLight', + 'IcCashierBcaDark', + 'IcCashierBcaLight', 'IcCashierBca', + 'IcCashierBchDark', + 'IcCashierBchLight', 'IcCashierBitcoinDark', 'IcCashierBitcoinLight', 'IcCashierBlueshyftDark', 'IcCashierBlueshyftLight', + 'IcCashierBniDark', + 'IcCashierBniLight', 'IcCashierBpayDark', 'IcCashierBpayLight', + 'IcCashierCardDark', + 'IcCashierCardLight', 'IcCashierCebuanaLhuillierDark', 'IcCashierCebuanaLhuillierLight', 'IcCashierChangellyDark', @@ -44,20 +58,34 @@ export const icons = 'IcCashierChangellyRowLight', 'IcCashierChangelly', 'IcCashierCimbNiaga', + 'IcCashierCimbniagaDark', + 'IcCashierCimbniagaLight', 'IcCashierClipboard', + 'IcCashierCommissionDeposit', + 'IcCashierCommissionWithdrawal', + 'IcCashierCryptoDark', + 'IcCashierCryptoLight', + 'IcCashierDaiDark', + 'IcCashierDaiLight', 'IcCashierDepositLock', 'IcCashierDeposit', + 'IcCashierDiamondbankDark', + 'IcCashierDiamondbankLight', 'IcCashierDirectaDark', 'IcCashierDirectaLight', 'IcCashierDp2pBlocked', 'IcCashierDp2p', 'IcCashierDragonPhoenix', 'IcCashierError', + 'IcCashierEthDark', + 'IcCashierEthLight', 'IcCashierEthereumDark', 'IcCashierEthereumLight', 'IcCashierEwalletDark', 'IcCashierEwalletLight', 'IcCashierEwallet', + 'IcCashierFirstbankDark', + 'IcCashierFirstbankLight', 'IcCashierFlexepinDark', 'IcCashierFlexepinLight', 'IcCashierFpsDark', @@ -65,24 +93,38 @@ export const icons = 'IcCashierFundsProtection', 'IcCashierGoPayDark', 'IcCashierGoPayLight', + 'IcCashierGtbankDark', + 'IcCashierGtbankLight', 'IcCashierHelpToPayDark', 'IcCashierHelpToPayLight', + 'IcCashierIcbcDark', + 'IcCashierIcbcLight', 'IcCashierIdeal', 'IcCashierInstaPayDark', 'IcCashierInstaPayLight', 'IcCashierInstantBankTransferDark', 'IcCashierInstantBankTransferLight', 'IcCashierInteracEtransfer', + 'IcCashierLibertyreserveDark', + 'IcCashierLibertyreserveLight', 'IcCashierLiteCoinDark', 'IcCashierLiteCoinLight', 'IcCashierLocalPaymentMethodsDark', 'IcCashierLocalPaymentMethodsLight', 'IcCashierLocked', 'IcCashierMaestro', + 'IcCashierMandiriDark', + 'IcCashierMandiriLight', 'IcCashierMandiriPay', + 'IcCashierMandirisyariahDark', + 'IcCashierMandirisyariahLight', 'IcCashierMastercardDark', 'IcCashierMastercardLight', + 'IcCashierMaximumWithdrawal', + 'IcCashierMinimumWithdrawal', 'IcCashierMinus', + 'IcCashierMoneygramDark', + 'IcCashierMoneygramLight', 'IcCashierNganLoungDark', 'IcCashierNganLoungLight', 'IcCashierNoAds', @@ -103,8 +145,13 @@ export const icons = 'IcCashierPayRetailersDark', 'IcCashierPayRetailersLight', 'IcCashierPaymentAgent', + 'IcCashierPaypalDark', + 'IcCashierPaypalLight', + 'IcCashierPaymentAgent', 'IcCashierPerfectMoneyDark', 'IcCashierPerfectMoneyLight', + 'IcCashierPermatabankDark', + 'IcCashierPermatabankLight', 'IcCashierPoliDark', 'IcCashierPoliLight', 'IcCashierPostBillPayDark', @@ -114,6 +161,7 @@ export const icons = 'IcCashierQrCodeDark', 'IcCashierQrCodeLight', 'IcCashierRedWarning', + 'IcCashierSearch', 'IcCashierSendEmail', 'IcCashierSepaDark', 'IcCashierSepaLight', @@ -128,10 +176,14 @@ export const icons = 'IcCashierUsdCoinLight', 'IcCashierVerificationBadge', 'IcCashierVerticalEllipsis', + 'IcCashierVerveDark', + 'IcCashierVerveLight', 'IcCashierViettlePay', 'IcCashierVisaDark', 'IcCashierVisaLight', 'IcCashierWallet', + 'IcCashierWechatpayDark', + 'IcCashierWechatpayLight', 'IcCashierWithdrawWallet', 'IcCashierWithdrawalLock', 'IcCashierWithdrawal', @@ -141,6 +193,8 @@ export const icons = 'IcCashierXanpoolLight', 'IcCashierXanpoolSmallDark', 'IcCashierXanpoolSmallLight', + 'IcCashierZenithbankDark', + 'IcCashierZenithbankLight', 'IcCashier', ], 'common': [ @@ -225,6 +279,7 @@ export const icons = 'IcClipboard', 'IcClockOutline', 'IcClock', + 'IcCloseCircleRed', 'IcCloseCircle', 'IcCloseLight', 'IcCloudUpload', @@ -249,6 +304,7 @@ export const icons = 'IcDrivingLicense', 'IcEdit', 'IcEmailFirewall', + 'IcEmailOutlineNew', 'IcEmailOutline', 'IcEmailSentDashboard', 'IcEmailSentP2p', @@ -821,4 +877,4 @@ export const icons = 'IcWalletZingpayDark', 'IcWalletZingpayLight', ], -} +}; diff --git a/packages/core/src/App/Containers/Layout/app-contents.jsx b/packages/core/src/App/Containers/Layout/app-contents.jsx index ab893957d69d..d56c95d2be18 100644 --- a/packages/core/src/App/Containers/Layout/app-contents.jsx +++ b/packages/core/src/App/Containers/Layout/app-contents.jsx @@ -26,6 +26,7 @@ const AppContents = ({ platform, pageView, pushDataLayer, + setAppContentsScrollRef, }) => { const [show_cookie_banner, setShowCookieBanner] = React.useState(false); const [is_gtm_tracking, setIsGtmTracking] = React.useState(false); @@ -33,6 +34,13 @@ const AppContents = ({ const tracking_status = tracking_status_cookie.get(TRACKING_STATUS_KEY); + const scroll_ref = React.useRef(null); + + React.useEffect(() => { + if (scroll_ref.current) setAppContentsScrollRef(scroll_ref); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + React.useEffect(() => { const allow_tracking = !is_eu_country || tracking_status === 'accepted'; if (allow_tracking && !is_gtm_tracking) { @@ -91,6 +99,7 @@ const AppContents = ({ 'app-contents--is-dashboard': is_appstore, 'app-contents--is-hidden': platforms[platform], })} + ref={scroll_ref} > {children} @@ -127,6 +136,7 @@ AppContents.propTypes = { pushDataLayer: PropTypes.func, notifyAppInstall: PropTypes.func, platform: PropTypes.string, + setAppContentsScrollRef: PropTypes.func, }; export default withRouter( @@ -146,5 +156,6 @@ export default withRouter( is_route_modal_on: ui.is_route_modal_on, notifyAppInstall: ui.notifyAppInstall, platform: common.platform, + setAppContentsScrollRef: ui.setAppContentsScrollRef, }))(AppContents) ); diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index 05fd290f150b..c88c44cf8aa1 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -144,6 +144,7 @@ export default class UIStore extends BaseStore { // add crypto accounts @observable should_show_cancel = false; + @observable app_contents_scroll_ref = null; @observable is_deriv_account_needed_modal_visible = false; getDurationFromUnit = unit => this[`duration_${unit}`]; @@ -216,6 +217,11 @@ export default class UIStore extends BaseStore { this.notification_messages_ui = notification_messages; } + @action.bound + setAppContentsScrollRef(value) { + this.app_contents_scroll_ref = value; + } + @action.bound populateFooterExtensions(footer_extensions) { this.footer_extensions = footer_extensions; diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss index c82a07c5c9db..262673c0da55 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss @@ -101,7 +101,7 @@ height: fit-content; width: fit-content; - > span { + > span { padding-right: 0.8rem; } diff --git a/packages/shared/src/index.js b/packages/shared/src/index.js index b81e2bda6a98..e50443122508 100644 --- a/packages/shared/src/index.js +++ b/packages/shared/src/index.js @@ -1,3 +1,4 @@ +export * from './utils/array'; export * from './utils/brand'; export * from './utils/browser'; export * from './utils/config'; diff --git a/packages/shared/src/utils/array/array.js b/packages/shared/src/utils/array/array.js new file mode 100644 index 000000000000..738e7ee40ee5 --- /dev/null +++ b/packages/shared/src/utils/array/array.js @@ -0,0 +1,9 @@ +export const shuffleArray = array => { + if (Array.isArray(array)) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + } + return array; +}; diff --git a/packages/shared/src/utils/array/index.js b/packages/shared/src/utils/array/index.js new file mode 100644 index 000000000000..bd9a11d97a0e --- /dev/null +++ b/packages/shared/src/utils/array/index.js @@ -0,0 +1 @@ +export * from './array'; diff --git a/packages/shared/src/utils/string/string_util.js b/packages/shared/src/utils/string/string_util.js index 792248f83e9f..129a8e01a356 100644 --- a/packages/shared/src/utils/string/string_util.js +++ b/packages/shared/src/utils/string/string_util.js @@ -55,3 +55,5 @@ export const formatInput = (example_format, input_string, separator) => { }; export const getCharCount = (target_string, char) => target_string.match(new RegExp(char, 'g'))?.length || 0; + +export const capitalizeFirstLetter = string => string && string[0].toUpperCase() + string.slice(1);