+
+ );
+};
+AdvertiserName.displayName = 'AdvertiserName';
+
+export default AdvertiserName;
diff --git a/src/components/AdvertiserName/AdvertiserNameBadges.scss b/src/components/AdvertiserName/AdvertiserNameBadges.scss
new file mode 100644
index 00000000..f27263e8
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameBadges.scss
@@ -0,0 +1,5 @@
+.p2p-advertiser-name-badges {
+ display: flex;
+ gap: 0.4rem;
+ padding: 0.4rem 0;
+}
diff --git a/src/components/AdvertiserName/AdvertiserNameBadges.tsx b/src/components/AdvertiserName/AdvertiserNameBadges.tsx
new file mode 100644
index 00000000..65489753
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameBadges.tsx
@@ -0,0 +1,34 @@
+import { TAdvertiserStats } from 'types';
+
+import { Badge } from '@/components';
+
+import './AdvertiserNameBadges.scss';
+
+/**
+ * This component is used to show an advertiser's badge, for instance:
+ * +100 Trades, ID verified, Address not verified, etc
+ *
+ * Use cases are usually in My Profile page and Advertiser page used under the advertiser's name
+ */
+const AdvertiserNameBadges = ({ advertiserStats }: { advertiserStats: DeepPartial
+
+ {isDesktop && isMyProfile &&
+
+ {name}
+
+ {(advertiserStats?.should_show_name || !isMyProfile) && (
+
+ ({advertiserStats?.fullName})
+
+ )}
+
+
+ {(totalOrders || 0) >= 100 &&
+ );
+};
+AdvertiserNameBadges.displayName = 'AdvertiserNameBadges';
+
+export default AdvertiserNameBadges;
diff --git a/src/components/AdvertiserName/AdvertiserNameStats.scss b/src/components/AdvertiserName/AdvertiserNameStats.scss
new file mode 100644
index 00000000..c1111c0f
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameStats.scss
@@ -0,0 +1,35 @@
+.p2p-advertiser-name-stats {
+ display: flex;
+ align-items: center;
+
+ @include mobile {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 2rem;
+ }
+
+ & div {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ padding: 0 0.8rem;
+ border-left: 1px solid #f2f3f4;
+
+ @include mobile {
+ border-left: none;
+ padding: 0;
+ }
+
+ &:first-child {
+ padding-left: 0;
+ padding-right: 0.8rem;
+ border-left: none;
+ }
+ }
+
+ &__rating {
+ display: flex;
+ gap: 0.5rem;
+ }
+}
diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx
new file mode 100644
index 00000000..e626ded8
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -0,0 +1,99 @@
+import clsx from 'clsx';
+import { TAdvertiserStats } from 'types';
+
+import { Text, useDevice } from '@deriv-com/ui';
+
+import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
+import { getCurrentRoute } from '@/utils';
+
+import ThumbUpIcon from '../../public/ic-thumb-up.svg';
+import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg';
+
+import './AdvertiserNameStats.scss';
+
+/**
+ * This component is to show an advertiser's stats, in UI its commonly used under an advertiser's name
+ * Example:
+ * Joined 2d | Not rated yet | x x x x x (5 ratings)
+ *
+ * Use cases are to show this in My Profile and Advertiser page
+ */
+const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
+
+ );
+};
+AdvertiserNameStats.displayName = 'AdvertiserNameStats';
+
+export default AdvertiserNameStats;
diff --git a/src/components/AdvertiserName/AdvertiserNameToggle.scss b/src/components/AdvertiserName/AdvertiserNameToggle.scss
new file mode 100644
index 00000000..9b501886
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameToggle.scss
@@ -0,0 +1,20 @@
+.p2p-advertiser-name-toggle {
+ display: flex;
+ gap: 0.8rem;
+
+ @include mobile {
+ padding: 1.4rem 1.6rem;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #f2f3f4;
+ }
+
+ &__label {
+ display: flex;
+ flex-direction: column;
+
+ &-real-name {
+ font-size: 1rem;
+ }
+ }
+}
diff --git a/src/components/AdvertiserName/AdvertiserNameToggle.tsx b/src/components/AdvertiserName/AdvertiserNameToggle.tsx
new file mode 100644
index 00000000..410c5392
--- /dev/null
+++ b/src/components/AdvertiserName/AdvertiserNameToggle.tsx
@@ -0,0 +1,46 @@
+import { memo, useEffect, useState } from 'react';
+import { TAdvertiserStats } from 'types';
+
+import { Text, ToggleSwitch } from '@deriv-com/ui';
+
+import { api } from '@/hooks';
+
+import './AdvertiserNameToggle.scss';
+
+type TAdvertiserNameToggle = {
+ advertiserInfo: DeepPartial
+ {!isMyProfile && (
+
+ Joined {daysSinceJoined && daysSinceJoined > 0 ? `${daysSinceJoined}d` : 'Today'}
+
+
+ {!ratingAverage && (
+
+
+ )}
+
+
+ Not rated yet
+
+
+ )}
+ {ratingAverage && (
+ <>
+
+
+
+ {isMobile && (
+
+ ({ratingAverage})
+
+ )}
+
+ ({ratingCount} ratings)
+
+
+
+
+ {recommendedAverage || 0}%
+
+
+
+ )}
+ {isMyProfile && (
+
+
+ {blockedByCount || 0}
+
+
+ )}
+
+
+ );
+});
+AdvertiserNameToggle.displayName = 'AdvertiserNameToggle';
+
+export default AdvertiserNameToggle;
diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx
new file mode 100644
index 00000000..ad1334cb
--- /dev/null
+++ b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx
@@ -0,0 +1,30 @@
+import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { render, screen } from '@testing-library/react';
+
+import AdvertiserName from '../AdvertiserName';
+
+const wrapper = ({ children }: { children: JSX.Element }) => (
+
+
+ Show my real name
+
+
+ {advertiserInfo?.fullName}
+
+
+
+
+ {isBuySellPage && (
+
+ {isMobile && (
+
+ Rate (1 USD)
+
+ )}
+
+
+ {isMobile && 'Limits:'} {min_order_amount_limit_display}-{max_order_amount_limit_display}{' '}
+ {account_currency}
+
+
+ {displayEffectiveRate} {local_currency}
+
+
+
+
+ {!isMyAdvert && (
+ setIsModalOpen(false)}
+ paymentMethods={paymentMethods}
+ />
+ )}
+
+ );
+});
+
+AdvertsTableRow.displayName = 'AdvertsTableRow';
+export default AdvertsTableRow;
diff --git a/src/components/AdvertsTableRow/index.ts b/src/components/AdvertsTableRow/index.ts
new file mode 100644
index 00000000..499d97db
--- /dev/null
+++ b/src/components/AdvertsTableRow/index.ts
@@ -0,0 +1 @@
+export { default as AdvertsTableRow } from './AdvertsTableRow';
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
new file mode 100644
index 00000000..b8c6c7e1
--- /dev/null
+++ b/src/components/Badge/Badge.scss
@@ -0,0 +1,40 @@
+.p2p-badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.2rem;
+ width: fit-content;
+ padding: 0.2rem 0.6rem;
+ border-radius: 3.4rem;
+ color: #ffffff;
+
+ &--general {
+ background-image: linear-gradient(#e6e9e9, #f2f3f4);
+ }
+
+ &--gold {
+ background: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
+ }
+
+ &--green {
+ background: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
+ }
+
+ &--success {
+ background-image: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%);
+ }
+
+ &--warning {
+ background-image: linear-gradient(#f7931a, #ffc71b);
+ }
+
+ &__label {
+ font-size: 1rem;
+ line-height: 1.4rem;
+ }
+
+ &__status {
+ font-size: 1rem;
+ line-height: 1.4rem;
+ }
+}
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
new file mode 100644
index 00000000..9fc84263
--- /dev/null
+++ b/src/components/Badge/Badge.tsx
@@ -0,0 +1,50 @@
+import { memo } from 'react';
+import clsx from 'clsx';
+
+import { Text } from '@deriv-com/ui';
+
+import './Badge.scss';
+
+type TBadgeProps = {
+ label?: string;
+ status?: string;
+ tradeCount?: number | undefined;
+ variant?: 'general' | 'success' | 'warning';
+};
+
+const Badge = ({ label, status, tradeCount, variant }: TBadgeProps) => {
+ const textColor = variant === 'general' ? 'less-prominent' : 'white';
+
+ if (tradeCount) {
+ return (
+ history.push(`${ADVERTISER_URL}/${id}`)}
+ >
+
+ )}
+
+
+
+
+ {name}
+
+
+
+ {hasRating ? (
+ <>
+
+ {ratingAverageDecimal}
+
+
+ ({rating_count})
+
+
+ ) : (
+
+ Not rated yet
+
+ )}
+
+
+ {payment_method_names ? (
+ payment_method_names.map((method: string, idx: number) => (
+
+
+ {isMobile && isBuySellPage && (
+
+ )}
+ {isModalOpen && (
+ = 100 && tradeCount < 250,
+ 'p2p-badge--green': tradeCount >= 250,
+ })}
+ >
+
+ {`${tradeCount >= 250 ? '250+' : '100+'}`}
+
+
+ );
+ }
+ return (
+
+
+ {label}
+
+
+ {status}
+
+
+ );
+};
+
+export default memo(Badge);
diff --git a/src/components/Badge/__tests__/Badge.spec.tsx b/src/components/Badge/__tests__/Badge.spec.tsx
new file mode 100644
index 00000000..879ada83
--- /dev/null
+++ b/src/components/Badge/__tests__/Badge.spec.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+
+import Badge from '../Badge';
+
+describe('Badge', () => {
+ it('should render the label and statuses correctly', () => {
+ render(
+
+ {`Enter ${isBuy ? 'sell' : 'buy'} amount`}
+
+
+ );
+};
+
+export default BuySellAmount;
diff --git a/src/components/BuySellForm/BuySellAmount/index.ts b/src/components/BuySellForm/BuySellAmount/index.ts
new file mode 100644
index 00000000..a76c6b77
--- /dev/null
+++ b/src/components/BuySellForm/BuySellAmount/index.ts
@@ -0,0 +1 @@
+export { default as BuySellAmount } from './BuySellAmount';
diff --git a/src/components/BuySellForm/BuySellData/BuySellData.scss b/src/components/BuySellForm/BuySellData/BuySellData.scss
new file mode 100644
index 00000000..51c7bd1f
--- /dev/null
+++ b/src/components/BuySellForm/BuySellData/BuySellData.scss
@@ -0,0 +1,12 @@
+.p2p-buy-sell-data {
+ &__details {
+ display: grid;
+ grid-auto-flow: column;
+ margin-bottom: 1.6rem;
+
+ @include mobile {
+ grid-auto-flow: row;
+ gap: 1.6rem;
+ }
+ }
+}
diff --git a/src/components/BuySellForm/BuySellData/BuySellData.tsx b/src/components/BuySellForm/BuySellData/BuySellData.tsx
new file mode 100644
index 00000000..f1fae85b
--- /dev/null
+++ b/src/components/BuySellForm/BuySellData/BuySellData.tsx
@@ -0,0 +1,90 @@
+import { THooks } from 'types';
+
+import { Text, useDevice } from '@deriv-com/ui';
+
+import { PaymentMethodWithIcon } from '@/components';
+import { formatTime } from '@/utils';
+
+import './BuySellData.scss';
+
+type TBuySellDataProps = {
+ accountCurrency: string;
+ expiryPeriod: number;
+ instructions?: string;
+ isBuy: boolean;
+ localCurrency: string;
+ name: string;
+ paymentMethodNames?: string[];
+ paymentMethods: THooks.PaymentMethods.Get;
+ rate: string;
+};
+
+type TType = THooks.AdvertiserPaymentMethods.Get[number]['type'];
+const BuySellData = ({
+ accountCurrency,
+ expiryPeriod,
+ instructions = '',
+ isBuy,
+ localCurrency,
+ name,
+ paymentMethodNames,
+ paymentMethods,
+ rate,
+}: TBuySellDataProps) => {
+ const { isMobile } = useDevice();
+ const labelSize = isMobile ? 'sm' : 'xs';
+ const valueSize = isMobile ? 'md' : 'sm';
+ const paymentMethodTypes = paymentMethods?.reduce((acc: Record
+ (
+
+
+ {
+ setInputValue(event.target.value);
+ onChange(event);
+ }}
+ onKeyDown={event => {
+ if (!floatingPointValidator(event.key)) {
+ event.preventDefault();
+ }
+ }}
+ rightPlaceholder={
+
+ {accountCurrency}
+
+ }
+ step='any'
+ type='number'
+ value={value}
+ />
+
+ )}
+ rules={{
+ max: {
+ message: `Maximum is ${maxLimit}${accountCurrency}`,
+ value: maxLimit,
+ },
+ min: {
+ message: `Minimum is ${minLimit}${accountCurrency}`,
+ value: minLimit,
+ },
+ required: 'Enter a valid amount',
+ }}
+ />
+ {isMobile &&
+ {`You'll ${isBuy ? 'receive' : 'send'}`}
+
+ {buySellAmount} {localCurrency}
+
+
+
+
+ );
+};
+
+export default BuySellData;
diff --git a/src/components/BuySellForm/BuySellData/index.ts b/src/components/BuySellForm/BuySellData/index.ts
new file mode 100644
index 00000000..55475fa5
--- /dev/null
+++ b/src/components/BuySellForm/BuySellData/index.ts
@@ -0,0 +1 @@
+export { default as BuySellData } from './BuySellData';
diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss
new file mode 100644
index 00000000..f7a2821e
--- /dev/null
+++ b/src/components/BuySellForm/BuySellForm.scss
@@ -0,0 +1,39 @@
+.p2p-buy-sell-form {
+ width: 44rem;
+ height: unset;
+ border-radius: 8px;
+
+ @include mobile {
+ width: 100vw;
+ height: 100vh;
+ box-shadow: none;
+ }
+
+ & .deriv-modal__body {
+ padding: 0;
+ }
+
+ &--is-buy {
+ height: 64.9rem;
+ & .deriv-modal__body {
+ max-height: calc(100vh - 13rem);
+ overflow: auto;
+ }
+ @include mobile {
+ height: unset;
+ max-height: unset;
+ }
+ }
+
+ &__full-page-modal {
+ position: absolute;
+ top: -4rem;
+ left: 0;
+ z-index: 1;
+ height: calc(100vh - 8rem);
+
+ & .p2p-mobile-wrapper__body {
+ overflow: auto;
+ }
+ }
+}
diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
new file mode 100644
index 00000000..edf3b03e
--- /dev/null
+++ b/src/components/BuySellForm/BuySellForm.tsx
@@ -0,0 +1,283 @@
+/* eslint-disable camelcase */
+import { useEffect, useState } from 'react';
+import { Control, Controller, FieldValues, useForm } from 'react-hook-form';
+import { useHistory } from 'react-router-dom';
+import { TAdvertType, THooks } from 'types';
+
+import { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui';
+
+import { BUY_SELL, ORDERS_URL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
+import { api } from '@/hooks';
+import {
+ getPaymentMethodObjects,
+ getTextFieldError,
+ removeTrailingZeros,
+ roundOffDecimal,
+ setDecimalPlaces,
+} from '@/utils';
+
+import { LightDivider } from '../LightDivider';
+
+import { BuySellAmount } from './BuySellAmount';
+import { BuySellData } from './BuySellData';
+import BuySellFormDisplayWrapper from './BuySellFormDisplayWrapper';
+import { BuySellPaymentSection } from './BuySellPaymentSection';
+
+import './BuySellForm.scss';
+
+type TPayload = Omit
+
+
+
+ {isBuy ? 'Buyer' : 'Seller'}
+
+ {name}
+
+
+ {`Rate (1 ${accountCurrency})`}
+
+ {rate}
+ {localCurrency}
+
+
+
+
+ Payment methods
+
+ {paymentMethodNames?.length
+ ? paymentMethodNames.map(method => (
+
+
+ {`${isBuy ? 'Buyer' : 'Seller'}'s instructions`}
+ {instructions}
+
+
+
+ Orders must be completed in
+
+ {formatTime(expiryPeriod)}
+
+
+
+
+
+ );
+};
+
+export default BuySellFormFooter;
diff --git a/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx b/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx
new file mode 100644
index 00000000..dceb7a81
--- /dev/null
+++ b/src/components/BuySellForm/BuySellFormFooter/__tests__/BuySellFormFooter.spec.tsx
@@ -0,0 +1,45 @@
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+
+import BuySellFormFooter from '../BuySellFormFooter';
+
+const mockProps = {
+ isDisabled: false,
+ onClickCancel: jest.fn(),
+};
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn().mockReturnValue({
+ isMobile: false,
+ }),
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+describe('BuySellFormFooter', () => {
+ it('should render the footer as expected', () => {
+ render(
+
+ Receive payment to
+
+
+ {sortedList && sortedList.length > 0
+ ? 'You may choose up to 3.'
+ : 'To place an order, add one of the advertiser’s preferred payment methods:'}
+
+
+
+ {sortedList?.map(paymentMethod => (
+ undefined}
+ onSelectPaymentMethodCard={onSelectPaymentMethodCard}
+ paymentMethod={paymentMethod}
+ selectedPaymentMethodIds={selectedPaymentMethodIds}
+ />
+ ))}
+
+
+ {items.map(item => (
+
+ );
+};
+
+export default Checklist;
diff --git a/src/components/Checklist/index.ts b/src/components/Checklist/index.ts
new file mode 100644
index 00000000..0e0985df
--- /dev/null
+++ b/src/components/Checklist/index.ts
@@ -0,0 +1 @@
+export { default as Checklist } from './Checklist';
diff --git a/src/components/Clipboard/Clipboard.scss b/src/components/Clipboard/Clipboard.scss
new file mode 100644
index 00000000..8c5a5a4b
--- /dev/null
+++ b/src/components/Clipboard/Clipboard.scss
@@ -0,0 +1,11 @@
+.p2p-clipboard {
+ all: unset;
+ border-radius: 0rem 0.4rem 0.4rem 0rem;
+ border-left: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ height: 3.8rem;
+ width: 3.2rem;
+}
diff --git a/src/components/Clipboard/Clipboard.tsx b/src/components/Clipboard/Clipboard.tsx
new file mode 100644
index 00000000..23de84ed
--- /dev/null
+++ b/src/components/Clipboard/Clipboard.tsx
@@ -0,0 +1,47 @@
+//TODO: to be replaced with derivcom component
+import { useEffect, useRef, useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
+
+import { Tooltip } from '@deriv-com/ui';
+
+import CheckmarkCircle from '../../public/ic-checkmark-circle.svg';
+import CopyIcon from '../../public/ic-clipboard.svg';
+
+import './Clipboard.scss';
+
+type TClipboardProps = {
+ textCopy: string;
+};
+
+const Clipboard = ({ textCopy }: TClipboardProps) => {
+ const timeoutClipboardRef = useRef
+
+ {item.text}
+
+ {item.status === 'done' ? (
+
+ ))}
+
+
+ ) : (
+
+ }
+ onClick={item.onClick}
+ />
+ )}
+
+
+ {isMobile ? 'Deriv P2P' : 'Cashier'}
+
+ window.history.back()}
+ />
+
+ );
+};
+
+export default CloseHeader;
diff --git a/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx b/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx
new file mode 100644
index 00000000..1218d6d4
--- /dev/null
+++ b/src/components/CloseHeader/__tests__/CloseHeader.spec.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CloseHeader from '../CloseHeader';
+
+const mockUseDevice = {
+ isMobile: false,
+};
+
+jest.mock('@/hooks/useDevice', () => ({
+ __esModule: true,
+ default: jest.fn(() => mockUseDevice),
+}));
+let windowHistoryBackSpy: jest.SpyInstance
+
+ );
+};
+
+export default Dropdown;
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
new file mode 100644
index 00000000..9f1f7763
--- /dev/null
+++ b/src/components/Dropdown/index.ts
@@ -0,0 +1,3 @@
+// TODO: Delete this component once @deriv-com/ui has it published
+
+export { default as Dropdown } from './Dropdown';
diff --git a/src/components/FileDropzone/FadeInMessage/FadeInMessage.scss b/src/components/FileDropzone/FadeInMessage/FadeInMessage.scss
new file mode 100644
index 00000000..5f6f2800
--- /dev/null
+++ b/src/components/FileDropzone/FadeInMessage/FadeInMessage.scss
@@ -0,0 +1,30 @@
+@import '../FileDropzone.scss';
+
+.p2p-fade-in-message {
+ @include file-dropzone-message;
+
+ &--enter-done {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+
+ &--enter {
+ opacity: 0;
+ transform: translate3d(0, -16px, 0);
+ }
+
+ &--enter-active {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+
+ &--exit {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+
+ &--exit-active {
+ opacity: 0;
+ transform: translate3d(0, -16px, 0);
+ }
+}
diff --git a/src/components/FileDropzone/FadeInMessage/FadeInMessage.tsx b/src/components/FileDropzone/FadeInMessage/FadeInMessage.tsx
new file mode 100644
index 00000000..eb6d40aa
--- /dev/null
+++ b/src/components/FileDropzone/FadeInMessage/FadeInMessage.tsx
@@ -0,0 +1,53 @@
+import { PropsWithChildren } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import { Text, useDevice } from '@deriv-com/ui';
+
+import { TTextColors } from '@/utils';
+
+import './FadeInMessage.scss';
+
+type TFadeInMessage = {
+ color?: TTextColors;
+ isVisible: boolean;
+ key?: string;
+ noText?: boolean;
+ timeout: number;
+};
+
+const FadeInMessage = ({ children, color, isVisible, key, noText, timeout }: PropsWithChildren
+ setHasSelected(true)}
+ onKeyUp={() => setShouldFilterList(true)}
+ placeholder={reactNodeToString(label)}
+ readOnly={variant !== 'comboBox'}
+ renderLeftIcon={icon ? () => icon : undefined}
+ renderRightIcon={() => (
+
+ )}
+ type='text'
+ value={value}
+ {...getInputProps()}
+ />
+
+ -
+ {isOpen &&
+ items.map((item, index) => (
+
-
+
+ {item.text} + +
+ ))}
+
{children}
+ ) : (
+ 0,
+ 'p2p-file-dropzone--is-active': isDragActive,
+ 'p2p-file-dropzone--is-noclick': noClick,
+ })}
+ ref={dropzoneRef}
+ >
+
+
+ )}
+
+
+
+
+ {hoverMessage}
+
+ {/* Handle cases for displaying multiple files and single filenames */}
+ {multiple && value.length > 0 && !validationErrorMessage
+ ? value.map(file => (
+
+ {filenameLimit ? truncateFileName(file, filenameLimit) : file.name}
+
+ ))
+ : value[0] &&
+ !isDragActive &&
+ !validationErrorMessage &&
+ {errorMessage}
+
+
+
+
+ {previewSingle}
;
+ }
+
+ return (
+
+
+ {filenameLimit ? truncateFileName(value[0], filenameLimit) : value[0].name}
+
+
+ );
+};
+
+export default PreviewSingle;
diff --git a/src/components/FileDropzone/PreviewSingle/index.ts b/src/components/FileDropzone/PreviewSingle/index.ts
new file mode 100644
index 00000000..e1e429ad
--- /dev/null
+++ b/src/components/FileDropzone/PreviewSingle/index.ts
@@ -0,0 +1 @@
+export { default as PreviewSingle } from './PreviewSingle';
diff --git a/src/components/FileDropzone/index.ts b/src/components/FileDropzone/index.ts
new file mode 100644
index 00000000..4a410dd7
--- /dev/null
+++ b/src/components/FileDropzone/index.ts
@@ -0,0 +1 @@
+export { default as FileDropzone } from './FileDropzone';
diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.scss b/src/components/FileUploaderComponent/FileUploaderComponent.scss
new file mode 100644
index 00000000..b31af4cb
--- /dev/null
+++ b/src/components/FileUploaderComponent/FileUploaderComponent.scss
@@ -0,0 +1,12 @@
+.p2p-file-uploader-component {
+ position: relative;
+
+ &__close-icon {
+ position: absolute;
+ top: 0.8rem;
+ right: 0.8rem;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/components/FileUploaderComponent/FileUploaderComponent.tsx b/src/components/FileUploaderComponent/FileUploaderComponent.tsx
new file mode 100644
index 00000000..5c66c298
--- /dev/null
+++ b/src/components/FileUploaderComponent/FileUploaderComponent.tsx
@@ -0,0 +1,73 @@
+import { memo, useCallback } from 'react';
+
+import { DerivLightIcCloudUploadIcon, StandaloneCircleXmarkBoldIcon } from '@deriv/quill-icons';
+import { Text } from '@deriv-com/ui';
+
+import { FileDropzone } from '../FileDropzone';
+
+import './FileUploaderComponent.scss';
+
+type TFileUploaderComponentProps = {
+ accept: string;
+ hoverMessage: string;
+ maxSize: number;
+ multiple?: boolean;
+ onClickClose: () => void;
+ onDropAccepted: (files: File[]) => void;
+ onDropRejected: (files: File[]) => void;
+ uploadedMessage: string;
+ validationErrorMessage: string | null;
+ value: (File & { file: Blob })[];
+};
+
+const FileUploaderComponent = ({
+ accept,
+ hoverMessage,
+ maxSize,
+ multiple = false,
+ onClickClose,
+ onDropAccepted,
+ onDropRejected,
+ uploadedMessage,
+ validationErrorMessage,
+ value,
+}: TFileUploaderComponentProps) => {
+ const getUploadMessage = useCallback(() => {
+ return (
+ <>
+
+
+ );
+};
+
+export default memo(FileUploaderComponent);
diff --git a/src/components/FileUploaderComponent/index.ts b/src/components/FileUploaderComponent/index.ts
new file mode 100644
index 00000000..33cd55d4
--- /dev/null
+++ b/src/components/FileUploaderComponent/index.ts
@@ -0,0 +1 @@
+export { default as FileUploaderComponent } from './FileUploaderComponent';
diff --git a/src/components/FloatingRate/FloatingRate.scss b/src/components/FloatingRate/FloatingRate.scss
new file mode 100644
index 00000000..da9ecfc5
--- /dev/null
+++ b/src/components/FloatingRate/FloatingRate.scss
@@ -0,0 +1,63 @@
+.p2p-floating-rate {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ @include mobile {
+ margin-top: -2.8rem;
+ margin-bottom: 1.6rem;
+ }
+
+ &__field {
+ display: flex;
+ align-items: center;
+
+ @include mobile {
+ flex-direction: column;
+ }
+
+ &--prefix {
+ @include mobile {
+ margin-bottom: 0.8rem;
+ }
+ margin-inline-end: 2rem;
+ }
+ }
+
+ &__mkt-rate {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 0 0.6rem;
+ background-color: #377cfc14;
+ border-radius: 0px 4px 4px 0px;
+ align-self: stretch;
+ gap: 0.2rem;
+ flex: none;
+
+ @include mobile {
+ padding-top: 0.4rem;
+ padding-bottom: 0.4rem;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ border-radius: 0px 0px 4px 4px;
+ }
+ }
+
+ &__hint {
+ padding-inline-start: 4rem;
+ margin-top: 0.3rem;
+ @include mobile {
+ padding-inline-start: 1rem;
+ }
+ }
+
+ &__error-message {
+ padding-inline-start: 4rem;
+ @include mobile {
+ padding-inline-start: 1rem;
+ }
+ }
+}
diff --git a/src/components/FloatingRate/FloatingRate.tsx b/src/components/FloatingRate/FloatingRate.tsx
new file mode 100644
index 00000000..375213a4
--- /dev/null
+++ b/src/components/FloatingRate/FloatingRate.tsx
@@ -0,0 +1,120 @@
+import { ChangeEvent, FocusEvent, useEffect } from 'react';
+
+import { useExchangeRateSubscription } from '@deriv/api-v2';
+import { Text, useDevice } from '@deriv-com/ui';
+import { FormatUtils } from '@deriv-com/utils';
+
+import { api } from '@/hooks';
+import { mobileOSDetect, percentOf, removeTrailingZeros, roundOffDecimal, setDecimalPlaces } from '@/utils';
+
+import InputField from '../InputField';
+
+import './FloatingRate.scss';
+
+type TFloatingRate = {
+ changeHandler?: (event: ChangeEvent
+
+ {errorMessages}
+
+ ) : (
+
+ Your rate is ={' '}
+ {removeTrailingZeros(
+ FormatUtils.formatMoney(Number(roundOffDecimal(marketFeed, decimalPlace)), {
+ currency: localCurrency,
+ decimalPlaces: decimalPlace,
+ })
+ )}{' '}
+ {localCurrency}
+
+ )}
+
+ );
+};
+
+export default FloatingRate;
diff --git a/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx
new file mode 100644
index 00000000..ab428ee0
--- /dev/null
+++ b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx
@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import FloatingRate from '../FloatingRate';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({
+ isMobile: false,
+ }),
+}));
+
+jest.mock('@deriv/api-v2', () => ({
+ p2p: {
+ settings: {
+ useGetSettings: () => ({
+ data: {
+ override_exchange_rate: 1,
+ },
+ }),
+ },
+ },
+ useExchangeRateSubscription: () => ({
+ data: {
+ rates: {
+ USD: 1,
+ },
+ },
+ subscribe: jest.fn(),
+ }),
+}));
+
+const mockProps = {
+ changeHandler: jest.fn(),
+ errorMessages: '',
+ fiatCurrency: 'USD',
+ localCurrency: 'IDR',
+ onChange: jest.fn(),
+ value: 1.1,
+};
+
+describe('FloatingRate', () => {
+ it('should render the component as expected', () => {
+ render(
+
+ at
+
+
+ {errorMessages ? (
+
+
+ of the market rate
+
+
+ 1 {fiatCurrency} ={' '}
+ {removeTrailingZeros(
+ FormatUtils.formatMoney(marketRate, {
+ currency: localCurrency,
+ decimalPlaces: decimalPlace,
+ })
+ )}
+
+
+
+ {
+ setIsOpen(!isOpen);
+ }}
+ renderIcon={renderIcon}
+ />
+
+ );
+};
+
+export default FlyoutMenu;
diff --git a/src/components/FlyoutMenu/FlyoutMenuList.tsx b/src/components/FlyoutMenu/FlyoutMenuList.tsx
new file mode 100644
index 00000000..3c79770a
--- /dev/null
+++ b/src/components/FlyoutMenu/FlyoutMenuList.tsx
@@ -0,0 +1,18 @@
+import { isValidElement, ReactNode } from 'react';
+
+type TFlyoutListProps = {
+ isOpen?: boolean;
+ listItems?: ReactNode[];
+};
+
+const FlyoutList = ({ isOpen = false, listItems }: TFlyoutListProps) => {
+ return isOpen ? (
+ -
+ {listItems?.map(listItem => {
+ return
- {listItem} ; + })} +
+ {renderIcon?.()}
+
+ );
+};
+
+export default FlyoutToggle;
diff --git a/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx b/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx
new file mode 100644
index 00000000..d40af0c1
--- /dev/null
+++ b/src/components/FlyoutMenu/__tests__/FlyoutList.spec.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+
+import FlyoutMenuList from '../FlyoutMenuList';
+
+jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ isValidElement: jest.fn().mockReturnValue((item: Record
+
+ );
+ await userEvent.click(screen.getByTestId('dt_flyout_toggle'));
+ expect(screen.queryByText(flyoutItems[0])).toBeInTheDocument();
+ await userEvent.click(screen.getByTestId('dt_flyout_parent'));
+ expect(screen.queryByText(flyoutItems[0])).not.toBeInTheDocument();
+ });
+});
diff --git a/src/components/FlyoutMenu/index.ts b/src/components/FlyoutMenu/index.ts
new file mode 100644
index 00000000..76059bfd
--- /dev/null
+++ b/src/components/FlyoutMenu/index.ts
@@ -0,0 +1 @@
+export { default as FlyoutMenu } from './FlyoutMenu';
diff --git a/src/components/FormProgress/FormProgress.scss b/src/components/FormProgress/FormProgress.scss
new file mode 100644
index 00000000..57acd822
--- /dev/null
+++ b/src/components/FormProgress/FormProgress.scss
@@ -0,0 +1,74 @@
+.p2p-form-progress {
+ width: 100%;
+ position: relative;
+
+ &__header {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 3.2rem;
+ }
+ &__step {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: 6rem;
+ justify-content: space-around;
+ width: 16rem;
+ z-index: 2;
+
+ & .p2p-identifier {
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.4rem;
+ height: 2.4rem;
+ background-color: #999999;
+ border: 1px solid #f2f3f4;
+ z-index: 1;
+
+ &--active {
+ background-color: #ff444f;
+ }
+ }
+ }
+ &__steps {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin-top: 2rem;
+ position: relative;
+
+ &--before {
+ bottom: 0;
+ content: '';
+ left: 0;
+ margin: 0 auto; /* this centers the line to the full width specified */
+ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
+ right: 0;
+ top: 1.7rem;
+ border-top: 2px solid #999999;
+ }
+ &--after {
+ border-top: 2px solid #ff444f;
+ transition: width 0.3s ease;
+ position: absolute;
+ @include desktop {
+ bottom: 0;
+ content: '';
+ left: 0;
+ margin: 0 auto; /* this centers the line to the full width specified */
+ top: 1.7rem;
+ }
+ @include mobile {
+ top: 0;
+ }
+ }
+ }
+
+ &--initial {
+ border-top: 2px solid #d6d6d6;
+ }
+}
diff --git a/src/components/FormProgress/FormProgress.tsx b/src/components/FormProgress/FormProgress.tsx
new file mode 100644
index 00000000..352e05c0
--- /dev/null
+++ b/src/components/FormProgress/FormProgress.tsx
@@ -0,0 +1,93 @@
+//TODO: Below component will be removed once deriv-com/ui form-progress is ready
+import React, { memo, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { TStep } from 'types';
+import { Text, useDevice } from '@deriv-com/ui';
+import './FormProgress.scss';
+
+type TFormProgress = {
+ currentStep: number;
+ steps: TStep[];
+ subSectionIndex?: number;
+};
+
+const FormProgress = ({ currentStep, steps = [], subSectionIndex = 0 }: TFormProgress) => {
+ const { isDesktop } = useDevice();
+ useEffect(() => {
+ animateCompleteBar();
+ });
+
+ const elCompletedBar = useRef
+
+ ) : (
+
+
+
+
+ {steps.map((item, idx) => (
+
+
+ {(active = idx === currentStep)}
+
+ ))}
+
+
+
+ {idx + 1}
+
+
+ {item.header.title}
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default memo(FormProgress);
diff --git a/src/components/FormProgress/index.ts b/src/components/FormProgress/index.ts
new file mode 100644
index 00000000..210a3aba
--- /dev/null
+++ b/src/components/FormProgress/index.ts
@@ -0,0 +1 @@
+export { default as FormProgress } from './FormProgress';
diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
new file mode 100644
index 00000000..b13fef09
--- /dev/null
+++ b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
@@ -0,0 +1,39 @@
+.p2p-mobile-wrapper {
+ @include mobile {
+ height: calc(100vh - 4rem);
+ width: 100vw;
+ border-radius: 0;
+ display: grid;
+ grid-template-rows: 6rem auto;
+ background-color: #fff;
+
+ &--fixed-footer {
+ grid-template-rows: 6rem auto 8rem;
+ }
+
+ &--no-header {
+ grid-template-rows: auto;
+ }
+
+ &--no-header-fixed-footer {
+ grid-template-rows: auto 7rem;
+ }
+
+ &--no-footer {
+ grid-template-rows: 6rem auto;
+ }
+ }
+
+ &__header {
+ align-items: center;
+ padding: 2rem;
+ border-bottom: 2px solid #f2f3f4;
+ display: flex;
+ gap: 2rem;
+ }
+
+ &__footer {
+ padding: 2rem;
+ border-top: 2px solid #f2f3f4;
+ }
+}
diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx
new file mode 100644
index 00000000..0133c7fa
--- /dev/null
+++ b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx
@@ -0,0 +1,51 @@
+import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons';
+import './FullPageMobileWrapper.scss';
+
+type TFullPageMobileWrapperProps = {
+ className?: string;
+ onBack?: () => void;
+ renderFooter?: () => React.ReactNode;
+ renderHeader?: () => React.ReactNode;
+ shouldFixedFooter?: boolean;
+ shouldShowBackIcon?: boolean;
+};
+
+const FullPageMobileWrapper = ({
+ children,
+ className = '',
+ onBack = () => undefined,
+ renderFooter,
+ renderHeader,
+ shouldFixedFooter = true,
+ shouldShowBackIcon = true,
+}: PropsWithChildren
+ {renderHeader && (
+
+ );
+};
+
+export default FullPageMobileWrapper;
diff --git a/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx b/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx
new file mode 100644
index 00000000..38ac09e2
--- /dev/null
+++ b/src/components/FullPageMobileWrapper/__tests__/FullPageMobileWrapper.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import FullPageMobileWrapper from '../FullPageMobileWrapper';
+
+const Header = () =>
+ {shouldShowBackIcon && (
+
+ )}
+ {children}
+ {renderFooter && {renderFooter()}
}
+ Header
; +const Footer = () =>Footer
; +const Body = () =>Body
; + +describe('FullPageMobileWrapper', () => { + it('should render body, header and/or footer', () => { + render( +
+ {leadingIcon &&
+ {errorMessage}
+
+ )}
+
+ );
+ }
+);
+
+Input.displayName = 'Input';
+
+export default Input;
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
new file mode 100644
index 00000000..b4d38647
--- /dev/null
+++ b/src/components/Input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input';
diff --git a/src/components/InputField/InputField.scss b/src/components/InputField/InputField.scss
new file mode 100644
index 00000000..2efe4688
--- /dev/null
+++ b/src/components/InputField/InputField.scss
@@ -0,0 +1,46 @@
+.p2p-input-field {
+ width: 100%;
+ position: relative;
+ &__prefix {
+ position: absolute;
+ right: 33%;
+ top: 1rem;
+
+ @include mobile {
+ right: 45%;
+ }
+ }
+ .deriv-input {
+ position: relative;
+ border-radius: 4px 0px 0px 4px;
+ @include mobile {
+ border-radius: 4px 4px 0px 0px;
+ }
+
+ &__field {
+ padding-right: 3rem;
+ @include desktop {
+ padding-right: 40%;
+ }
+ }
+
+ &__left-content {
+ position: absolute;
+ left: 0;
+ & .deriv-text {
+ display: flex;
+ }
+ }
+
+ &__right-content {
+ position: absolute;
+ right: 0;
+ & .deriv-text {
+ display: flex;
+ }
+ }
+ &__helper-message {
+ display: none;
+ }
+ }
+}
diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
new file mode 100644
index 00000000..a27e7208
--- /dev/null
+++ b/src/components/InputField/InputField.tsx
@@ -0,0 +1,206 @@
+import React, { ChangeEvent, FocusEventHandler, KeyboardEvent, MouseEvent, TouchEvent, useRef, useState } from 'react';
+import { LabelPairedMinusSmBoldIcon, LabelPairedPlusSmBoldIcon } from '@deriv/quill-icons';
+import { Button, Input, Text, useDevice } from '@deriv-com/ui';
+import './InputField.scss';
+
+export type TChangeEvent = ChangeEvent{leadingIcon}
}
+
+ {hasError && (
+
+
+ );
+};
+
+export default InputField;
diff --git a/src/components/InputField/__tests__/InputField.spec.tsx b/src/components/InputField/__tests__/InputField.spec.tsx
new file mode 100644
index 00000000..1bb60a2b
--- /dev/null
+++ b/src/components/InputField/__tests__/InputField.spec.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import InputField from '../InputField';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({
+ isMobile: false,
+ }),
+}));
+
+const mockProps = {
+ isError: false,
+ name: 'test',
+ onBlur: jest.fn(),
+ onChange: jest.fn(),
+ type: 'number',
+ value: 0,
+};
+describe('InputField', () => {
+ it('should render the component as expected', () => {
+ render(
+ %
+
+
+
+ {tabs.map((tab, i) => (
+ }
+ key={`${tab}-${i}`}
+ onClick={() => onChangeTab(tab)}
+ variant='contained'
+ >
+ {tab}
+
+ ))}
+
+ );
+}
+
+export default MobileTabs;
diff --git a/src/components/MobileTabs/index.ts b/src/components/MobileTabs/index.ts
new file mode 100644
index 00000000..110b10d9
--- /dev/null
+++ b/src/components/MobileTabs/index.ts
@@ -0,0 +1 @@
+export { default as MobileTabs } from './MobileTabs';
diff --git a/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.scss b/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.scss
new file mode 100644
index 00000000..d3d94812
--- /dev/null
+++ b/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.scss
@@ -0,0 +1,31 @@
+.p2p-ad-cancel-create-edit-modal {
+ border-radius: 8px;
+ width: 44rem;
+ height: fit-content;
+ @include mobile {
+ max-width: calc(100vw - 3.2rem);
+ }
+
+ &__header {
+ height: unset;
+ padding: 2.4rem;
+ @include mobile {
+ padding: 1.6rem;
+ }
+ }
+ &__body {
+ padding: 0.8rem 2.4rem;
+ @include mobile {
+ padding: 0.8rem 1.6rem;
+ }
+ }
+
+ &__footer {
+ gap: 0.8rem;
+ padding-bottom: 2.4rem;
+
+ @include mobile {
+ padding-bottom: 1.6rem;
+ }
+ }
+}
diff --git a/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.tsx b/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.tsx
new file mode 100644
index 00000000..5ff43f90
--- /dev/null
+++ b/src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.tsx
@@ -0,0 +1,58 @@
+import { useHistory } from 'react-router-dom';
+
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+
+import { MY_ADS_URL } from '@/constants';
+import { useQueryString } from '@/hooks/custom-hooks';
+
+import './AdCancelCreateEditModal.scss';
+
+type TAdCancelCreateEditModalProps = {
+ isModalOpen: boolean;
+ onRequestClose: () => void;
+};
+
+const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose }: TAdCancelCreateEditModalProps) => {
+ const { isMobile } = useDevice();
+ const history = useHistory();
+ const { queryString } = useQueryString();
+ const { advertId = '' } = queryString;
+ const isEdit = !!advertId;
+ const textSize = isMobile ? 'md' : 'sm';
+ return (
+
+ {index + 1}.{' '}
+ {getAdErrorMessage(
+ status,
+ accountCurrency,
+ remainingAmount,
+ balanceAvailable,
+ advertType,
+ dailyBuyLimit,
+ dailySellLimit
+ )}
+
+ ));
+
+ return (
+
+
+ {visibilityStatus.length === 1 ? (
+ getAdErrorMessage(
+ visibilityStatus[0],
+ accountCurrency,
+ remainingAmount,
+ balanceAvailable,
+ advertType,
+ dailyBuyLimit,
+ dailySellLimit
+ )
+ ) : (
+ <>
+ Your ad isn’t listed on Buy/Sell due to the following reason(s):
+ {getMultipleErrorMessages(visibilityStatus)}
+
+ )}
+
+
+
+
+
+ AdRateError
,
+}));
+
+describe('AdErrorTooltipModal', () => {
+ it('should render the component as expected', () => {
+ render(
+
+
+
+
+
+
+
+
+
+
+ );
+ } else if (error) {
+ return (
+ <>
+
+
+
+
+ );
+ }
+ return (
+ <>
+
+
+
+
+
+ );
+ };
+
+ return (
+ // TODO: below modal will be rewritten to use @deriv/ui modal
+
+ {reasons.map(reason => (
+
+ )}
+
+ {reason.text}
+
+ ))}
+
+ {/* TODO: Replace 59s with epoch value (verification_next_request) from BE response
+ * and disable the button if the epoch value is not reached yet
+ */}
+
+
+
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default FilterModalContent;
diff --git a/src/components/Modals/FilterModal/FilterModalContent/index.ts b/src/components/Modals/FilterModal/FilterModalContent/index.ts
new file mode 100644
index 00000000..e071719c
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalContent/index.ts
@@ -0,0 +1 @@
+export { default as FilterModalContent } from './FilterModalContent';
diff --git a/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.scss b/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.scss
new file mode 100644
index 00000000..a16ac896
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.scss
@@ -0,0 +1,14 @@
+.p2p-filter-modal-footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ padding: 1.5rem;
+
+ @include mobile {
+ position: relative;
+ padding: 0;
+ border: none;
+ }
+}
diff --git a/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx b/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx
new file mode 100644
index 00000000..7c5fcf14
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx
@@ -0,0 +1,51 @@
+import { Button, useDevice } from '@deriv-com/ui';
+
+import './FilterModalFooter.scss';
+
+type TFilterModalFooterProps = {
+ hasSameFilters: boolean;
+ hasSamePaymentMethods: boolean;
+ onApplyConfirm: () => void;
+ onResetClear: () => void;
+ paymentMethods: string[];
+ showPaymentMethods: boolean;
+};
+
+const FilterModalFooter = ({
+ hasSameFilters,
+ hasSamePaymentMethods,
+ onApplyConfirm,
+ onResetClear,
+ paymentMethods,
+ showPaymentMethods,
+}: TFilterModalFooterProps) => {
+ const { isMobile } = useDevice();
+
+ return (
+
+ {option.text}
+
+ {option.subtext}
+
+
+ {option.component}
+
+
+
+
+ );
+};
+
+export default FilterModalFooter;
diff --git a/src/components/Modals/FilterModal/FilterModalFooter/index.ts b/src/components/Modals/FilterModal/FilterModalFooter/index.ts
new file mode 100644
index 00000000..8da55c2e
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalFooter/index.ts
@@ -0,0 +1 @@
+export { default as FilterModalFooter } from './FilterModalFooter';
diff --git a/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.scss b/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.scss
new file mode 100644
index 00000000..beabd6f4
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.scss
@@ -0,0 +1,19 @@
+.p2p-filter-modal-payment-methods {
+ .deriv-input {
+ border: none;
+ border-bottom: 1px solid #f2f3f4;
+ border-radius: 0;
+ // stylelint-disable-next-line declaration-no-important
+ padding: 1.5rem !important;
+
+ @include mobile {
+ // stylelint-disable-next-line declaration-no-important
+ padding: 2.5rem 1.5rem !important;
+ }
+
+ &__label {
+ // stylelint-disable-next-line declaration-no-important
+ left: 4rem !important;
+ }
+ }
+}
diff --git a/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.tsx b/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.tsx
new file mode 100644
index 00000000..aaa185d6
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalPaymentMethods/FilterModalPaymentMethods.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { THooks } from 'types';
+
+import { Checkbox, Text } from '@deriv-com/ui';
+
+import { Search } from '@/components/Search';
+import { api } from '@/hooks';
+
+import './FilterModalPaymentMethods.scss';
+
+type TFilterModalPaymentMethodsProps = {
+ selectedPaymentMethods: string[];
+ setSelectedPaymentMethods: (value: string[]) => void;
+};
+
+const FilterModalPaymentMethods = ({
+ selectedPaymentMethods,
+ setSelectedPaymentMethods,
+}: TFilterModalPaymentMethodsProps) => {
+ const { data = [] } = api.paymentMethods.useGet();
+ const [searchedPaymentMethod, setSearchedPaymentMethod] = useState
+ onSearch(value)}
+ placeholder='Search payment method'
+ />
+ {searchedPaymentMethods?.length > 0 ? (
+
+ );
+};
+
+export default FilterModalPaymentMethods;
diff --git a/src/components/Modals/FilterModal/FilterModalPaymentMethods/index.ts b/src/components/Modals/FilterModal/FilterModalPaymentMethods/index.ts
new file mode 100644
index 00000000..1a31aebb
--- /dev/null
+++ b/src/components/Modals/FilterModal/FilterModalPaymentMethods/index.ts
@@ -0,0 +1 @@
+export { default as FilterModalPaymentMethods } from './FilterModalPaymentMethods';
diff --git a/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx b/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx
new file mode 100644
index 00000000..99826460
--- /dev/null
+++ b/src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx
@@ -0,0 +1,321 @@
+import { useDevice } from '@deriv-com/ui';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import FilterModal from '../FilterModal';
+
+const mockProps = {
+ isModalOpen: true,
+ isToggled: true,
+ onRequestClose: jest.fn(),
+ onToggle: jest.fn(),
+ selectedPaymentMethods: [],
+ setSelectedPaymentMethods: jest.fn(),
+};
+
+let mockData = [
+ {
+ display_name: 'Alipay',
+ id: 'alipay',
+ },
+ {
+ display_name: 'Bank Transfer',
+ id: 'bank_transfer',
+ },
+];
+
+jest.mock('@deriv/api-v2', () => ({
+ p2p: {
+ paymentMethods: {
+ useGet: jest.fn(() => ({
+ data: mockData,
+ })),
+ },
+ },
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn().mockReturnValue({
+ isMobile: false,
+ }),
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+
+describe('
+ {searchedPaymentMethods?.map(paymentMethod => (
+ {
+ if (event.target.checked) {
+ setSelectedPaymentMethods([...selectedPaymentMethods, paymentMethod.id]);
+ } else {
+ setSelectedPaymentMethods(
+ selectedPaymentMethods.filter(id => id !== paymentMethod.id)
+ );
+ }
+ }}
+ wrapperClassName='p-[1.6rem] leading-[3rem]'
+ />
+ ))}
+
+ ) : (
+
+
+ No results for "{searchedPaymentMethod}".
+
+ Check your spelling or use a different term.
+
+ )}
+
+
+
+
+ );
+ };
+ return (
+ <>
+ {!isLoadingInfo && (
+
+ If your complaint isn’t listed here, please contact our {' '}
+
+ Customer Support
+ {' '}
+ team.
+
+ );
+};
+
+const ComplainFooter = ({ disputeOrderRequest, disputeReason, onRequestClose }: TComplainFooterProps) => {
+ const { isMobile } = useDevice();
+ const buttonTextSize = isMobile ? 'md' : 'sm';
+ return (
+
+
+
+
+ );
+};
+
+const OrderDetailsComplainModal = ({
+ id,
+ isBuyOrderForUser,
+ isModalOpen,
+ onRequestClose,
+}: TOrderDetailsComplainModal) => {
+ const { isMobile } = useDevice();
+ const [disputeReason, setDisputeReason] = useState('');
+ const { isSuccess, mutate } = api.orderDispute.useDispute();
+
+ useEffect(() => {
+ if (isSuccess) {
+ onRequestClose();
+ }
+ }, [isSuccess, onRequestClose]);
+
+ const disputeOrderRequest = () => {
+ mutate({
+ dispute_reason: disputeReason,
+ id,
+ });
+ };
+
+ const onCheckboxChange = (reason: string) => setDisputeReason(reason);
+
+ if (isMobile)
+ return (
+ {children}
;
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('PaymentMethodErrorModal', () => {
+ it('should render the modal correctly', () => {
+ const props = {
+ errorMessage: 'error message',
+ isModalOpen: true,
+ onConfirm: jest.fn(),
+ title: 'title',
+ };
+ render({children}
;
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('PaymentMethodModal', () => {
+ it('should render the component correctly', () => {
+ render(
+
+
+ {`No results for “${value}”.`}
+
+
+ Check your spelling or use a different term.
+
+
+ );
+};
+
+export default NoSearchResults;
diff --git a/src/components/Modals/PreferredCountriesModal/NoSearchResults/__tests__/NoSearchResults.spec.tsx b/src/components/Modals/PreferredCountriesModal/NoSearchResults/__tests__/NoSearchResults.spec.tsx
new file mode 100644
index 00000000..ddf2ce87
--- /dev/null
+++ b/src/components/Modals/PreferredCountriesModal/NoSearchResults/__tests__/NoSearchResults.spec.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+
+import NoSearchResults from '../NoSearchResults';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({ isMobile: false }),
+}));
+
+describe('NoSearchResults', () => {
+ it('should render', () => {
+ render(
+
+ );
+};
+
+export default PreferredCountriesDropdown;
diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/__tests__/PreferredCountriesDropdown.spec.tsx b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/__tests__/PreferredCountriesDropdown.spec.tsx
new file mode 100644
index 00000000..09c30924
--- /dev/null
+++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesDropdown/__tests__/PreferredCountriesDropdown.spec.tsx
@@ -0,0 +1,96 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PreferredCountriesDropdown from '../PreferredCountriesDropdown';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({
+ isMobile: false,
+ }),
+}));
+
+const mockProps = {
+ list: [
+ {
+ text: 'United Kingdom',
+ value: 'uk',
+ },
+ {
+ text: 'United States',
+ value: 'us',
+ },
+ ],
+ selectedCountries: ['uk'],
+ setSelectedCountries: jest.fn(),
+ setShouldDisplayFooter: jest.fn(),
+};
+
+describe('PreferredCountriesDropdown', () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+ it('should render the component as expected', () => {
+ render(
+
+
+ {searchResults?.length > 0 ? (
+
+ 0,
+ })}
+ >
+ {searchResults?.length === list?.length && (
+
+ ) : (
+
+ ) => {
+ if (event.target.checked) {
+ setSelectedCountries(list.map(item => item.value));
+ } else {
+ setSelectedCountries([]);
+ }
+ }}
+ />
+
+ )}
+
+ ) => {
+ if (event.target.checked) {
+ setSelectedCountries([...selectedCountries, item.value]);
+ } else {
+ setSelectedCountries(
+ selectedCountries.filter(value => value !== item.value)
+ );
+ }
+ }}
+ />
+
+ ))}
+
+
+
+
+ );
+};
+
+export default PreferredCountriesFooter;
diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/__tests__/PreferredCountriesFooter.spec.tsx b/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/__tests__/PreferredCountriesFooter.spec.tsx
new file mode 100644
index 00000000..9970a0a2
--- /dev/null
+++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/__tests__/PreferredCountriesFooter.spec.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PreferredCountriesFooter from '../PreferredCountriesFooter';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({
+ isMobile: false,
+ }),
+}));
+
+const mockProps = {
+ isDisabled: false,
+ onClickApply: jest.fn(),
+ onClickClear: jest.fn(),
+};
+
+describe('PreferredCountriesFooter', () => {
+ it('should render the component as expected', () => {
+ render(
+
+ {rating > 0 && (
+
+ Would you recommend this {`${isBuyOrder ? 'buyer' : 'seller'}`}?
+
+ )}
+
+
+ }
+ onClick={handleSelectYes}
+ size='sm'
+ variant='outlined'
+ >
+ Yes
+
+
+ }
+ onClick={handleSelectNo}
+ size='sm'
+ variant='outlined'
+ >
+ No
+
+
+
+ 
+
+ {advertType} {account_currency}
+
+
+ );
+ }
+);
+
+ShareMyAdsCard.displayName = 'ShareMyAdsCard';
+export default ShareMyAdsCard;
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsModal.scss b/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
new file mode 100644
index 00000000..e31f0876
--- /dev/null
+++ b/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
@@ -0,0 +1,97 @@
+.p2p-share-ads-modal {
+ padding: 2.4rem;
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ width: 72rem;
+ border-radius: 8px;
+
+ @include mobile {
+ padding: 1.6rem;
+ width: 32.8rem;
+ }
+
+ &__container {
+ display: flex;
+ margin-top: 2.4rem;
+
+ @include mobile {
+ align-items: center;
+ justify-content: center;
+ margin-top: 0;
+ }
+
+ &__card {
+ display: flex;
+ flex-direction: column;
+ width: 48%;
+
+ @include mobile {
+ align-items: center;
+ width: 100%;
+ margin-top: 1.6rem;
+ }
+
+ &__button {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ border-width: 1px;
+ width: 100%;
+
+ & .deriv-text {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+ }
+ }
+ }
+
+ &__copy {
+ display: flex;
+ align-items: center;
+ border-radius: 0.3rem;
+ border: 0.1em solid var(--general-active);
+ margin-top: 2.5rem;
+ padding: 0.8rem;
+
+ &-clipboard {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--general-section-5);
+ border-radius: 0.3rem;
+ margin-left: 1rem;
+
+ &--icon {
+ display: flex;
+ margin: 1.5rem 1rem;
+ }
+
+ &--popover {
+ display: flex;
+ right: 0;
+ top: 0;
+ }
+ }
+
+ &-link {
+ display: -webkit-box;
+ white-space: pre-wrap;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+ }
+
+ &__line {
+ margin: 0 0 2.5rem;
+ }
+
+ &__share {
+ padding-left: 2.4rem;
+ width: 52%;
+ }
+}
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
new file mode 100644
index 00000000..a4904b6e
--- /dev/null
+++ b/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
@@ -0,0 +1,172 @@
+import { memo, MouseEvent, useEffect, useRef } from 'react';
+import html2canvas from 'html2canvas';
+
+import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui';
+
+import { Clipboard } from '@/components';
+import { ADVERTISER_URL, BUY_SELL, RATE_TYPE } from '@/constants';
+import { api } from '@/hooks';
+import { useCopyToClipboard } from '@/hooks/custom-hooks';
+
+//TODO: replace below icons with the one from quill once available
+import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg';
+import ShareIcon from '../../../public/ic-share.svg';
+import ShareLinkIcon from '../../../public/ic-share-link.svg';
+
+import ShareMyAdsCard from './ShareAdsCard';
+import ShareMyAdsSocials from './ShareAdsSocials';
+
+import './ShareAdsModal.scss';
+
+type TShareAdsModalProps = {
+ id: string;
+ isModalOpen: boolean;
+ onRequestClose: () => void;
+};
+
+const websiteUrl = () => `${location.protocol}//${location.hostname}`;
+
+const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps) => {
+ const timeoutClipboardRef = useRef
+
+
+
+ ID number
+
+
+ Limits
+
+
+ Rate
+
+
+
+
+ {id}
+
+
+ {min_order_amount_limit_display} - {max_order_amount_limit_display} {account_currency}
+
+
+ {rate_display}
+ {rate_type === RATE_TYPE.FIXED ? ` ${local_currency}` : '%'}
+
+
+
+
+ Scan this code to order via Deriv P2P
+
+
+
+ 
+
+
+
+
+
+ {isDesktop && (
+
+
+
+
+ )}
+
+ Share via
+ Or copy this link
+
+ )}
+
+
+ {advertUrl}
+
+ {/* TODO: clipboard to be replaced */}
+
+
+
+
+ {getShareButtons(advertUrl).map(({ ShareButton, href, icon, messagePropName, rel, target, text }) => (
+
+
+ ))}
+
+);
+
+export default ShareMyAdsSocials;
diff --git a/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
new file mode 100644
index 00000000..8dcd57df
--- /dev/null
+++ b/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
@@ -0,0 +1,114 @@
+import html2canvas from 'html2canvas';
+
+import { useDevice } from '@deriv-com/ui';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ShareAdsModal from '../ShareAdsModal';
+
+const mockProps = {
+ id: 'id',
+ isModalOpen: true,
+ onRequestClose: jest.fn(),
+};
+
+let element: HTMLElement;
+
+const mockUseGet = {
+ data: {
+ account_currency: 'USD',
+ advertiser_details: {
+ id: 'id',
+ },
+ local_currency: 'USD',
+ rate_display: '1',
+ rate_type: 'fixed',
+ type: 'buy',
+ },
+ isLoading: false,
+};
+
+jest.mock('@deriv/api-v2', () => ({
+ p2p: {
+ advert: {
+ useGet: jest.fn(() => mockUseGet),
+ },
+ },
+}));
+
+jest.mock('qrcode.react', () => ({ QRCodeSVG: () => {icon}
+ QR code
}));
+
+jest.mock('html2canvas', () => ({
+ __esModule: true,
+ default: jest.fn().mockResolvedValue({
+ toDataURL: jest.fn(),
+ }),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn().mockReturnValue({
+ isDesktop: true,
+ isMobile: false,
+ }),
+}));
+
+const mockCopyFn = jest.fn();
+jest.mock('@/hooks', () => ({
+ ...jest.requireActual('@/hooks'),
+ useCopyToClipboard: jest.fn(() => [true, mockCopyFn, jest.fn()]),
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+
+describe('ShareAdsModal', () => {
+ beforeAll(() => {
+ element = document.createElement('div');
+ element.setAttribute('id', 'v2_modal_root');
+ document.body.appendChild(element);
+ });
+ afterAll(() => {
+ document.body.removeChild(element);
+ });
+ it('should render the modal as expected', () => {
+ render(
+
+ );
+};
+
+export default PageReturn;
diff --git a/src/components/PageReturn/__tests__/PageReturn.spec.tsx b/src/components/PageReturn/__tests__/PageReturn.spec.tsx
new file mode 100644
index 00000000..dc4cc0cd
--- /dev/null
+++ b/src/components/PageReturn/__tests__/PageReturn.spec.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PageReturn from '../PageReturn';
+
+const mockOnClick = jest.fn();
+describe('PageReturn', () => {
+ it('should render the title and behaviour of return correctly', async () => {
+ render(
+
+ {pageTitle}
+
+
+ {rightPlaceHolder}
+
+ {!toAdd ? (
+ onSelectPaymentMethodCard?.(Number(paymentMethod.id))}
+ type={type}
+ />
+
+ );
+};
+
+export default PaymentMethodCard;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
new file mode 100644
index 00000000..6572e5a0
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
@@ -0,0 +1,8 @@
+.p2p-payment-method-card {
+ &__body {
+ display: flex;
+ flex-direction: column;
+ margin-top: 0.8rem;
+ vertical-align: baseline;
+ }
+}
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
new file mode 100644
index 00000000..a3a95397
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
@@ -0,0 +1,28 @@
+import { THooks } from 'types';
+
+import { Text } from '@deriv-com/ui';
+
+import './PaymentMethodCardBody.scss';
+
+type TPaymentMethodCardBodyProps = {
+ paymentMethod: THooks.AdvertiserPaymentMethods.Get[number];
+ shouldShowPaymentMethodDisplayName?: boolean;
+};
+
+const PaymentMethodCardBody = ({
+ paymentMethod,
+ shouldShowPaymentMethodDisplayName = true,
+}: TPaymentMethodCardBodyProps) => {
+ const displayName = paymentMethod?.display_name;
+ const modifiedDisplayName = displayName?.replace(/\s|-/gm, '');
+ const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
+ return (
+
+
+ {display_name}
+
+ ) : (
+ <>
+
+ {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : {displayName} }
+ {paymentMethod.fields?.bank_name?.value ?? paymentMethod.fields?.name?.value}
+ {paymentMethod.fields?.account?.value}
+
+ );
+};
+
+export default PaymentMethodCardBody;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/index.ts b/src/components/PaymentMethodCard/PaymentMethodCardBody/index.ts
new file mode 100644
index 00000000..5fcfce34
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodCardBody } from './PaymentMethodCardBody';
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
new file mode 100644
index 00000000..1816aa1b
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
@@ -0,0 +1,19 @@
+.p2p-payment-method-card {
+ &__icon {
+ border-radius: 2px;
+ }
+ &__header {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.1rem;
+ }
+ .derivs-button__variant--ghost {
+ color: #0e0e0e;
+ }
+ .derivs-button__variant--ghost:hover:not(:disabled) {
+ cursor: pointer;
+ background-color: #e6e9e9;
+ }
+}
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
new file mode 100644
index 00000000..de7ad609
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
@@ -0,0 +1,80 @@
+import React, { ComponentType, SVGAttributes } from 'react';
+import { THooks } from 'types';
+import { FlyoutMenu } from '@/components';
+import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
+import { Button, Checkbox } from '@deriv-com/ui';
+import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg';
+import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg';
+import IcCashierOther from '../../../public/ic-cashier-other.svg';
+import './PaymentMethodCardHeader.scss';
+
+type TPaymentMethodCardHeaderProps = {
+ isDisabled?: boolean;
+ isEditable?: boolean;
+ isSelectable?: boolean;
+ isSelected?: boolean;
+ medium?: boolean;
+ onDeletePaymentMethod?: () => void;
+ onEditPaymentMethod?: () => void;
+ onSelectPaymentMethod?: () => void;
+ small?: boolean;
+ type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
+};
+
+const PaymentMethodCardHeader = ({
+ isDisabled = false,
+ isEditable = false,
+ isSelectable = false,
+ isSelected = false,
+ medium = false,
+ onDeletePaymentMethod,
+ onEditPaymentMethod,
+ onSelectPaymentMethod,
+ small = false,
+ type,
+}: TPaymentMethodCardHeaderProps) => {
+ let Icon: ComponentType
+
+ );
+};
+
+export default PaymentMethodCardHeader;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/index.ts b/src/components/PaymentMethodCard/PaymentMethodCardHeader/index.ts
new file mode 100644
index 00000000..3fa1908d
--- /dev/null
+++ b/src/components/PaymentMethodCard/PaymentMethodCardHeader/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodCardHeader } from './PaymentMethodCardHeader';
diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCard.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCard.spec.tsx
new file mode 100644
index 00000000..cc334194
--- /dev/null
+++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCard.spec.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PaymentMethodCard from '../PaymentMethodCard';
+
+const mockProps = {
+ isEditable: false,
+ medium: false,
+ onClickAdd: jest.fn(),
+ onDeletePaymentMethod: jest.fn(),
+ onEditPaymentMethod: jest.fn(),
+ onSelectPaymentMethodCard: jest.fn(),
+ paymentMethod: {
+ fields: {},
+ id: 'test',
+ is_enabled: 0,
+ method: '',
+ type: 'other',
+ used_by_adverts: null,
+ used_by_orders: null,
+ },
+ shouldShowPaymentMethodDisplayName: false,
+};
+
+describe('PaymentMethodCard', () => {
+ it('should render the component correctly', () => {
+ render(
+
+ )}
+
+ {
+ return field === 'instructions' ? (
+
+ ) : (
+
+ );
+ }}
+ rules={{
+ pattern: {
+ message: `${displayName} can only include letters, numbers, spaces, and any of these symbols: -+.,'#@():;`, // TODO: Remember to translate this
+ value: VALID_SYMBOLS_PATTERN,
+ },
+ required: required ? 'This field is required.' : false,
+ }}
+ />
+
+ );
+};
+
+export default PaymentMethodField;
diff --git a/src/components/PaymentMethodField/__tests__/PaymentMethodField.spec.tsx b/src/components/PaymentMethodField/__tests__/PaymentMethodField.spec.tsx
new file mode 100644
index 00000000..3483adb5
--- /dev/null
+++ b/src/components/PaymentMethodField/__tests__/PaymentMethodField.spec.tsx
@@ -0,0 +1,31 @@
+import { useForm } from 'react-hook-form';
+
+import { render, screen } from '@testing-library/react';
+
+import PaymentMethodField from '../PaymentMethodField';
+
+jest.mock('react-hook-form', () => ({
+ ...jest.requireActual('react-hook-form'),
+ Controller: ({ control, defaultValue, name, render }) =>
+ render({
+ field: { control, name, onBlur: jest.fn(), onChange: jest.fn(), value: defaultValue },
+ fieldState: { error: null },
+ }),
+ useForm: () => ({
+ control: 'mockedControl',
+ }),
+}));
+
+const mockUseForm = useForm as jest.MockedFunction
+
+ );
+};
+
+export default PaymentMethodForm;
diff --git a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
new file mode 100644
index 00000000..d711d8a7
--- /dev/null
+++ b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
@@ -0,0 +1,103 @@
+import { THooks, TSelectedPaymentMethod } from 'types';
+
+import { Button, Input, Text } from '@deriv-com/ui';
+
+import { Dropdown } from '@/components';
+import { TFormState } from '@/reducers/types';
+
+import CloseCircle from '../../../public/ic-close-circle.svg';
+
+type TPaymentMethodFormAutocompleteProps = {
+ actionType: TFormState['actionType'];
+ availablePaymentMethods?: THooks.PaymentMethods.Get;
+ availablePaymentMethodsList: { text: string; value: string }[];
+ onAdd: (selectedPaymentMethod?: TSelectedPaymentMethod) => void;
+ reset: () => void;
+ selectedPaymentMethod: TFormState['selectedPaymentMethod'];
+};
+
+const PaymentMethodFormAutocomplete = ({
+ actionType,
+ availablePaymentMethods,
+ availablePaymentMethodsList,
+ onAdd,
+ reset,
+ selectedPaymentMethod,
+}: TPaymentMethodFormAutocompleteProps) => {
+ if (selectedPaymentMethod) {
+ // TODO: Remember to translate this
+ return (
+ {
+ onAdd();
+ reset();
+ }}
+ width={15.7}
+ />
+ )
+ }
+ />
+ );
+ }
+ return (
+ <>
+
+ {/* TODO: Remember to translate these */}
+
+ Don’t see your payment method?
+
+
+
+
+ );
+};
+
+export default PaymentMethodFormAutocomplete;
diff --git a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts
new file mode 100644
index 00000000..7ba73b1f
--- /dev/null
+++ b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete';
diff --git a/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx b/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
new file mode 100644
index 00000000..22c7211d
--- /dev/null
+++ b/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
@@ -0,0 +1,76 @@
+import { TSocketError } from '@deriv/api-v2/types';
+
+import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals';
+import { TFormState } from '@/reducers/types';
+
+type TPaymentMethodFormModalRendererProps = {
+ actionType: TFormState['actionType'];
+ createError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+ isCreateSuccessful: boolean;
+ isModalOpen: boolean;
+ isUpdateSuccessful: boolean;
+ onResetFormState: () => void;
+ setIsModalOpen: (isModalOpen: boolean) => void;
+ updateError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+};
+
+const PaymentMethodFormModalRenderer = ({
+ actionType,
+ createError,
+ isCreateSuccessful,
+ isModalOpen,
+ isUpdateSuccessful,
+ onResetFormState,
+ setIsModalOpen,
+ updateError,
+}: TPaymentMethodFormModalRendererProps) => {
+ if (actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen) {
+ return (
+ {children}
+
+ {name}
+
+ );
+};
+
+export default PaymentMethodWithIcon;
diff --git a/src/components/PaymentMethodWithIcon/index.ts b/src/components/PaymentMethodWithIcon/index.ts
new file mode 100644
index 00000000..95b345bd
--- /dev/null
+++ b/src/components/PaymentMethodWithIcon/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodWithIcon } from './PaymentMethodWithIcon';
diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
new file mode 100644
index 00000000..3aa0b467
--- /dev/null
+++ b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
@@ -0,0 +1,16 @@
+.p2p-payment-methods-form-footer {
+ display: flex;
+ justify-content: end;
+ gap: 0.8rem;
+ background: #fff;
+ margin-top: 2rem;
+
+ @include mobile {
+ margin-top: 0;
+ width: 100%;
+ padding: 1.6rem 2.4rem;
+ border-top: 2px solid #f2f3f4;
+ position: absolute;
+ bottom: 2.2rem;
+ }
+}
diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
new file mode 100644
index 00000000..761e9e09
--- /dev/null
+++ b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
@@ -0,0 +1,60 @@
+import { Button, useDevice } from '@deriv-com/ui';
+
+import { TFormState } from '@/reducers/types';
+
+import './PaymentMethodsFormFooter.scss';
+
+type TPaymentMethodsFormFooterProps = {
+ actionType: TFormState['actionType'];
+ handleGoBack: () => void;
+ isDirty: boolean;
+ isSubmitting: boolean;
+ isValid: boolean;
+};
+
+/**
+ * @component This component is used to display the footer of the PaymentMethodForm
+ * @param actionType - The type of action to be performed (ADD or EDIT)
+ * @param handleGoBack - The function to be called when the back / cancel button is clicked
+ * @param isDirty - The state of the form (whether it has been modified or not)
+ * @param isSubmitting - The state of the form (whether it is being submitted or not)
+ * @param isValid - The state of the form (whether it is valid or not)
+ * @returns {JSX.Element}
+ * @example
+
+ {/* TODO: Remember to translate these */}
+
+
+ );
+};
+
+export default PaymentMethodsFormFooter;
diff --git a/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx b/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx
new file mode 100644
index 00000000..6672cf37
--- /dev/null
+++ b/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx
@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PaymentMethodsFormFooter from '../PaymentMethodsFormFooter';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({ isMobile: false }),
+}));
+
+describe('PaymentMethodsFormFooter', () => {
+ it('should render the PaymentMethodsFormFooter component correctly', () => {
+ render(
+
+
+ setVisible(prevState => !prevState)}
+ />
+
+ {visible && (
+
+ );
+};
+
+export default PopoverDropdown;
diff --git a/src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx b/src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx
new file mode 100644
index 00000000..2f670b2e
--- /dev/null
+++ b/src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import PopoverDropdown from '../PopoverDropdown';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: () => ({
+ isMobile: false,
+ }),
+}));
+
+const mockProps = {
+ dropdownList: [
+ {
+ label: 'label 1',
+ value: 'value 1',
+ },
+ {
+ label: 'label 2',
+ value: 'value 2',
+ },
+ ],
+ onClick: jest.fn(),
+ tooltipMessage: 'test tooltip message',
+};
+
+describe('PopoverDropdown', () => {
+ it('should render', () => {
+ render(
+ {dropdownList.map(item => (
+
+ ))}
+
+ )}
+
+
+
+ );
+};
+
+export default ProfileBalance;
diff --git a/src/components/ProfileContent/ProfileBalance/__tests__/ProfileBalance.spec.tsx b/src/components/ProfileContent/ProfileBalance/__tests__/ProfileBalance.spec.tsx
new file mode 100644
index 00000000..65ccbf94
--- /dev/null
+++ b/src/components/ProfileContent/ProfileBalance/__tests__/ProfileBalance.spec.tsx
@@ -0,0 +1,117 @@
+import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ProfileBalance from '../ProfileBalance';
+
+const wrapper = ({ children }: { children: JSX.Element }) => (
+
+
+ {numberToCurrencyText(advertiserStats?.balance_available || 0)} USD
+
+
+
+
+ Available Deriv P2P Balance
+
+ setShouldShowAvailableBalanceModal(true)}
+ />
+
+
+
+
+ {dailyLimits.map(({ available, dailyLimit, type }) => (
+
+ {advertiserStats?.isEligibleForLimitUpgrade && (
+
+ {type}
+
+ ))}
+
+
+
+
+ Daily limit
+
+
+ {dailyLimit}
+
+
+
+
+ Available
+
+
+ {available}
+
+
+
+
+ )}
+
+
+ {isMobile && isMyProfile &&
+
+ Want to increase your daily limits to{' '}
+
+ {advertiserStats?.daily_buy_limit} {activeAccount?.currency || 'USD'}{' '}
+ {' '}
+ (buy) and{' '}
+
+ {advertiserStats?.daily_sell_limit} {activeAccount?.currency || 'USD'}{' '}
+ {' '}
+ (sell)?
+
+
+
+
+
+ );
+};
+
+export default ProfileStats;
diff --git a/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx b/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx
new file mode 100644
index 00000000..9bd30576
--- /dev/null
+++ b/src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx
@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+
+import ProfileStats from '../ProfileStats';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+let mockProps = {
+ advertiserStats: {
+ averagePayTime: -1,
+ averageReleaseTime: -1,
+ buyCompletionRate: 0,
+ buyOrdersCount: 0,
+ sellCompletionRate: 0,
+ sellOrdersCount: 0,
+ tradePartners: 0,
+ tradeVolume: 0,
+ },
+};
+
+describe('
+ {advertiserStatsList.slice(0, 3).map(stat => (
+
+
+
+ {stat.text}
+
+
+ {stat.value}
+
+
+ ))}
+
+ {advertiserStatsList.slice(-3).map(stat => (
+
+
+
+ {stat.text}
+
+
+ {stat.value}
+
+
+ ))}
+ AdvertiserName
,
+ AdvertiserNameToggle: () => AdvertiserNameToggle
,
+}));
+
+jest.mock('../ProfileBalance', () => ({
+ ProfileBalance: () => ProfileBalance
,
+}));
+
+jest.mock('../ProfileStats', () => ({
+ ProfileStats: () => ProfileStats
,
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+
+const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
;
+ }
+
+ return <>{children};
+};
+
+const RadioGroup = ({
+ children,
+ className,
+ name,
+ onToggle,
+ required,
+ selected,
+ shouldWrapItems,
+ textSize = 'lg',
+}: PropsWithChildren
+ {Array.isArray(children) &&
+ children
+ .filter(item => !item.props.hidden)
+ .map(item => (
+
+
+
+ ))}
+
+ );
+};
+
+const Item = ({ children, hidden = false, ...props }: PropsWithChildren
+ {children}
+
+);
+
+RadioGroup.Item = Item;
+
+export default RadioGroup;
diff --git a/src/components/RadioGroup/index.ts b/src/components/RadioGroup/index.ts
new file mode 100644
index 00000000..a93a1d6b
--- /dev/null
+++ b/src/components/RadioGroup/index.ts
@@ -0,0 +1 @@
+export { default as RadioGroup } from './RadioGroup';
diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss
new file mode 100644
index 00000000..0cf7bdb2
--- /dev/null
+++ b/src/components/Search/Search.scss
@@ -0,0 +1,30 @@
+.p2p-search {
+ width: 100%;
+ background-color: #fff;
+
+ .deriv-input {
+ padding: 6px 8px;
+ font-size: 1.4rem;
+
+ &__container {
+ width: 100%;
+ }
+
+ &__field {
+ margin-left: 0.8rem;
+
+ &:not(:placeholder-shown) ~ label,
+ &:focus ~ label {
+ display: none;
+ }
+ }
+
+ &__helper-message {
+ display: none;
+ }
+
+ &__label {
+ left: 3rem;
+ }
+ }
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
new file mode 100644
index 00000000..f28404e8
--- /dev/null
+++ b/src/components/Search/Search.tsx
@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { LabelPairedSearchMdRegularIcon } from '@deriv/quill-icons';
+import { Input } from '@deriv-com/ui';
+import './Search.scss';
+
+type TSearchProps = {
+ delayTimer?: number;
+ hideBorder?: boolean;
+ name: string;
+ onSearch: (value: string) => void;
+ placeholder: string;
+};
+
+//TODO: replace the component with deriv shared component
+const Search = ({ delayTimer = 500, hideBorder = false, name, onSearch, placeholder }: TSearchProps) => {
+ const debounce = (func: (value: string) => void, delay: number) => {
+ let timer: ReturnType
+ {isDesktop && columns.length > 0 && (
+
+ );
+};
+
+export default memo(Table);
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 00000000..56abcd12
--- /dev/null
+++ b/src/components/Table/index.ts
@@ -0,0 +1 @@
+export { default as Table } from './Table';
diff --git a/src/components/TextArea/TextArea.scss b/src/components/TextArea/TextArea.scss
new file mode 100644
index 00000000..adf63c7f
--- /dev/null
+++ b/src/components/TextArea/TextArea.scss
@@ -0,0 +1,69 @@
+.p2p-textarea {
+ position: relative;
+ width: 100%;
+
+ & textarea {
+ resize: none;
+ width: 100%;
+ height: 9.6rem;
+ border-radius: 0.4rem;
+ border: 1px solid #d6dadb;
+ outline: none;
+ padding: 1rem 1.6rem;
+ font-size: 1.4rem;
+
+ &:focus {
+ border: 1px solid #85acb0;
+ }
+
+ &::placeholder {
+ color: #999999;
+ }
+ &:focus + label span {
+ color: #85acb0;
+ }
+ &:focus + label,
+ &[data-has-value='true'] + label {
+ transform: translate(0, -1.4rem) scale(0.75);
+ background-color: #ffffff;
+ }
+ &:not(:focus)[data-has-value='true'] + label {
+ & span {
+ color: #333;
+ }
+ }
+ &:has(~ label)::placeholder {
+ color: transparent;
+ }
+ }
+
+ & label {
+ display: block;
+ position: absolute;
+ left: 1.6rem;
+ top: 1rem;
+ transition: all 0.2s ease;
+ transform-origin: left top;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ &--error {
+ & textarea,
+ & textarea:focus {
+ border: 1px solid #ec3f3f;
+ & + label span {
+ color: #ec3f3f;
+ }
+ }
+ }
+
+ &__footer {
+ display: flex;
+ line-height: 1.5;
+
+ & span {
+ margin-left: auto;
+ }
+ }
+}
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
new file mode 100644
index 00000000..bd2a3701
--- /dev/null
+++ b/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,69 @@
+import React, { HtmlHTMLAttributes, useState } from 'react';
+import clsx from 'clsx';
+import { Text } from '@deriv-com/ui';
+import './TextArea.scss';
+
+type TTextAreaProps = HtmlHTMLAttributes
+ {table.getFlatHeaders().map(header => (
+
+ {renderHeader(header.column.columnDef.header as string)}
+
+ ))}
+
+ )}
+ fetchMoreOnBottomReached(e.target as HTMLDivElement)}
+ ref={tableContainerRef}
+ style={{ height: isDesktop && columns.length > 0 ? `calc(${height}px - 3.6rem)` : '100%' }}
+ >
+ {data && data.length > 0 ? (
+ table.getRowModel().rows.map(row => (
+
+ {emptyDataMessage}
+
+ )}
+
+
+ {rowRender(row.original)}
+
+ ))
+ ) : (
+
+