Merge pull request #3093 from hollaex/design_channel_issues

Design channel issues
hollaex · Nov 18, 2024 · 2473b9f · 2473b9f
2 parents 7cc8fcd + a02e9a1
commit 2473b9f
Show file tree

Hide file tree

Showing 11 changed files with 372 additions and 53 deletions.
diff --git a/web/src/config/lang/en.json b/web/src/config/lang/en.json
@@ -2286,7 +2286,9 @@
 		"CHECK_CONFIRM_PAYMENT_DESC_2": "After confirming below the crypto ({0} {1}) will be released.",
 		"CHECK_CONFIRM_DECLARATION": "I confirm that I have received the correct payment",
 		"P2P_ORDER_COMPLETE": "P2P Order Complete",
-		"EXIST_PAYMENT_METHOD_DESC": "You’ve already added a payment method for {0}"
+		"EXIST_PAYMENT_METHOD_DESC": "You’ve already added a payment method for {0}",
+		"ADMIN_ORDER_CANCELLATION_MESSAGE": "An exchange operator has cancelled this order. The transaction is closed.",
+		"TIME_LIMIT_REACHED": "0:00 (Please contact your counter-party)"
 	},
 	"VOLUME": {
 		"VOLUME": "VOLUME",

diff --git a/web/src/containers/Admin/Trades/index.css b/web/src/containers/Admin/Trades/index.css
@@ -819,3 +819,26 @@
 .p2p-admin-confirm-warning-popup-wrapper .ant-modal-close-x {
 	color: white;
 }
+
+.p2p-admin-order-details-popup-wrapper
+	.p2p-admin-order-details-container
+	.title {
+	font-size: 22px;
+	margin-bottom: 3%;
+}
+
+.p2p-admin-order-details-popup-wrapper
+	.p2p-admin-order-details-container
+	.order-details {
+	margin-top: 2%;
+	display: flex;
+	align-items: center;
+}
+
+.p2p-admin-order-details-popup-wrapper
+	.p2p-admin-order-details-container
+	.order-details
+	.asset-icon {
+	position: relative;
+	top: 3px;
+}
diff --git a/web/src/containers/Admin/Trades/p2pActive.js b/web/src/containers/Admin/Trades/p2pActive.js
@@ -9,8 +9,9 @@ import {
 } from 'containers/P2P/actions/p2pActions';
 import { getToken } from 'utils/token';
 import { WS_URL } from 'config/constants';
+import { Coin } from 'components';
 
-const dataSource = (setIsConfirmWarning, setUserData) => {
+const dataSource = (setIsConfirmWarning, setUserData, setIsOrderDetails) => {
 	return [
 		{ title: 'Order Id', dataIndex: 'id', key: 'id' },
 		{
@@ -51,15 +52,32 @@ const dataSource = (setIsConfirmWarning, setUserData) => {
 				);
 			},
 		},
+		{
+			title: 'View More',
+			render: (data) => {
+				return (
+					<Button
+						onClick={() => {
+							setIsOrderDetails(true);
+							setUserData(data);
+						}}
+						className="green-btn"
+					>
+						View More
+					</Button>
+				);
+			},
+		},
 	];
 };
 
-const P2PActive = ({ user }) => {
+const P2PActive = ({ user, coins }) => {
 	const [getOrders, setGetOrders] = useState();
 	const [selectedTransaction, setSelectedTransaction] = useState();
 	const [webSocket, setWebSocket] = useState();
 	const [isConfirmWarning, setIsConfirmWarning] = useState(false);
 	const [userData, setUserData] = useState();
+	const [isOrderDetails, setIsOrderDetails] = useState(false);
 
 	const fetchData = async () => {
 		try {
@@ -162,7 +180,7 @@ const P2PActive = ({ user }) => {
 				user_status: 'cancelled',
 			});
 			fetchData();
-			notificationStatus('cancelled');
+			notificationStatus('cancelled', 'admin cancel');
 			setSelectedTransaction(data);
 		} catch (error) {
 			console.error(error);
@@ -210,8 +228,91 @@ const P2PActive = ({ user }) => {
 					</div>
 				</div>
 			</Modal>
+			<Modal
+				maskClosable={false}
+				closeIcon={<CloseOutlined />}
+				visible={isOrderDetails}
+				footer={null}
+				onCancel={() => {
+					setIsOrderDetails(false);
+				}}
+				width={450}
+				className="p2p-admin-order-details-popup-wrapper p2p-admin-confirm-warning-popup-wrapper"
+			>
+				<div className="p2p-admin-order-details-container">
+					<div className="title">Order Details</div>
+					<div className="order-details">
+						<span className="font-weight-bold order-title">
+							Transaction Id :
+						</span>
+						<span className="ml-2">{userData?.transaction_id}</span>
+					</div>
+					<div className="order-details">
+						<span className="font-weight-bold order-title">Fiat Amount:</span>
+						<span className="ml-2">{userData?.amount_fiat}</span>
+						<span className="ml-1">
+							{userData?.deal?.spending_asset?.toUpperCase()}
+						</span>
+						<span className="asset-icon ml-1">
+							<Coin
+								iconId={coins[userData?.deal?.spending_asset]?.icon_id}
+								type="CS4"
+							/>
+						</span>
+					</div>
+
+					<div className="order-details">
+						<span className="font-weight-bold order-title">Price:</span>
+						<span className="ml-2">{userData?.price}</span>
+						<span className="ml-1">
+							{userData?.deal?.spending_asset?.toUpperCase()}
+						</span>
+						<span className="asset-icon ml-1">
+							<Coin
+								iconId={coins[userData?.deal?.spending_asset]?.icon_id}
+								type="CS4"
+							/>
+						</span>
+						<span className="ml-2">(per coin)</span>
+						<span className="ml-2">
+							{userData?.deal?.buying_asset?.toUpperCase()}
+						</span>
+						<span className="asset-icon ml-1">
+							<Coin
+								iconId={coins[userData?.deal?.buying_asset]?.icon_id}
+								type="CS4"
+							/>
+						</span>
+					</div>
+					<div className="order-details">
+						<span className="font-weight-bold order-title">Crypto Amount:</span>
+						<span className="ml-2">{userData?.amount_digital_currency}</span>
+						<span className="ml-1">
+							{userData?.deal?.buying_asset?.toUpperCase()}
+						</span>
+						<span className="asset-icon ml-1">
+							<Coin
+								iconId={coins[userData?.deal?.buying_asset]?.icon_id}
+								type="CS4"
+							/>
+						</span>
+					</div>
+					<div className="order-details">
+						<span className="font-weight-bold order-title">
+							Payment Method:
+						</span>
+						<span className="ml-2">
+							{userData?.payment_method_used?.system_name}
+						</span>
+					</div>
+				</div>
+			</Modal>
 			<Table
-				columns={dataSource(setIsConfirmWarning, setUserData)}
+				columns={dataSource(
+					setIsConfirmWarning,
+					setUserData,
+					setIsOrderDetails
+				)}
 				dataSource={filteredOrders}
 				pagination={{ pageSize: 10 }}
 			/>
@@ -221,6 +322,7 @@ const P2PActive = ({ user }) => {
 
 const mapStateToProps = (state) => ({
 	user: state.user,
+	coins: state.app.coins,
 });
 
 export default connect(mapStateToProps)(P2PActive);
diff --git a/web/src/containers/App/MobileBarMoreOptions.js b/web/src/containers/App/MobileBarMoreOptions.js
@@ -38,6 +38,7 @@ const MobileBarMoreOptions = ({
 	pinnedAsset,
 	getMarkets,
 	quickTrade,
+	getRemoteRoutes,
 }) => {
 	const [search, setSearch] = useState('');
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -274,10 +275,8 @@ const MobileBarMoreOptions = ({
 				STRINGS['MORE_OPTIONS_LABEL.OTHER_FUNCTIONS.SECURITY'],
 			],
 		},
-		{
-			icon_id: 'BUY_CRYPTO_OPTION',
-			iconText: 'MORE_OPTIONS_LABEL.ICONS.BUY_CRYPTO',
-			path: '/buy-crypto',
+		...getRemoteRoutes?.map((route, index) => ({
+			...route,
 			isDisplay: true,
 			searchContent: [
 				STRINGS['MARKET_OPTIONS.CARD'],
@@ -293,7 +292,7 @@ const MobileBarMoreOptions = ({
 				STRINGS['MORE_OPTIONS_LABEL.OTHER_FUNCTIONS.BUY_COIN'],
 				STRINGS['MORE_OPTIONS_LABEL.OTHER_FUNCTIONS.BUY_TOKEN'],
 			],
-		},
+		})),
 		{
 			icon_id: 'DEFI_STAKE_OPTION_ICON',
 			iconText: 'MORE_OPTIONS_LABEL.ICONS.DEFI_STAKE',
@@ -731,7 +730,9 @@ const MobileBarMoreOptions = ({
 
 	const filterOptions = (options) => {
 		return options?.filter((option) => {
-			const iconTextMatch = (STRINGS[option?.iconText] || '')
+			const iconTextMatch = (
+				STRINGS[option?.iconText ? option?.iconText : option?.string_id] || ''
+			)
 				?.toLowerCase()
 				.includes(search?.toLowerCase());
 			const searchContentMatch = option?.searchContent?.some((content) =>
@@ -753,7 +754,12 @@ const MobileBarMoreOptions = ({
 									<div
 										key={inx}
 										className="icon-field"
-										onClick={() => onHandleRoute(data?.iconText, data?.path)}
+										onClick={() =>
+											onHandleRoute(
+												data?.iconText ? data?.iconText : data?.string_id,
+												data?.path
+											)
+										}
 									>
 										{fieldHasCoinIcon?.includes(data?.iconText) ? (
 											<div className={isValidCoin ? 'image-wrapper' : ''}>
@@ -769,13 +775,29 @@ const MobileBarMoreOptions = ({
 										) : (
 											<Image
 												iconId={data?.icon_id}
-												icon={icons[data?.icon_id]}
+												icon={
+													icons[
+														data?.string_id === 'RC_BANXA_ACCESS'
+															? 'BUY_CRYPTO_OPTION'
+															: data?.string_id === 'RC_ONRAMPER_MENU_ITEM'
+															? 'ONRAMPER_ICON'
+															: data?.icon_id
+													]
+												}
 												wrapperClassName="icon-logo"
 											/>
 										)}
 										<div className="option-title">
-											<EditWrapper stringId={data?.iconText}>
-												{STRINGS[data?.iconText]}
+											<EditWrapper
+												stringId={
+													data?.iconText ? data?.iconText : data?.string_id
+												}
+											>
+												{
+													STRINGS[
+														data?.iconText ? data?.iconText : data?.string_id
+													]
+												}
 											</EditWrapper>
 										</div>
 									</div>
@@ -919,6 +941,7 @@ const mapStateToProps = (store) => ({
 	pinnedAsset: store.app.pinned_assets,
 	getMarkets: MarketsSelector(store),
 	quickTrade: store.app.quicktrade,
+	getRemoteRoutes: store.app.remoteRoutes,
 });
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/web/src/containers/App/Socket.js b/web/src/containers/App/Socket.js
@@ -461,6 +461,10 @@ class Container extends Component {
 										{data.action === 'getStatus' &&
 										data?.data?.status === 'appeal'
 											? STRINGS['P2P.APPEAL_STATUS_MESSAGE']
+											: data?.action === 'getStatus' &&
+											  data?.data?.status === 'cancelled' &&
+											  data?.data?.title === 'admin cancel'
+											? STRINGS['P2P.ADMIN_ORDER_CANCELLATION_MESSAGE']
 											: data?.action === 'getStatus' &&
 											  data?.data?.status === 'cancelled'
 											? STRINGS['P2P.CANCEL_STATUS_MESSAGE']
@@ -541,17 +545,18 @@ class Container extends Component {
 									notification.close(newLastNotification?.key);
 									notification.open({
 										...newLastNotification,
-										icon:
-											newLastNotificationMessage ===
-											(STRINGS['P2P.CANCEL_STATUS_MESSAGE'] ||
-												STRINGS['P2P.APPEAL_STATUS_MESSAGE']) ? (
-												<ExclamationCircleOutlined />
-											) : newLastNotificationMessage ===
-											  STRINGS['P2P.NEW_MESSAGE'] ? (
-												<MailOutlined />
-											) : (
-												<BellOutlined />
-											),
+										icon: [
+											STRINGS['P2P.CANCEL_STATUS_MESSAGE'],
+											STRINGS['P2P.ADMIN_ORDER_CANCELLATION_MESSAGE'],
+											STRINGS['P2P.APPEAL_STATUS_MESSAGE'],
+										]?.includes(newLastNotificationMessage) ? (
+											<ExclamationCircleOutlined />
+										) : newLastNotificationMessage ===
+										  STRINGS['P2P.NEW_MESSAGE'] ? (
+											<MailOutlined />
+										) : (
+											<BellOutlined />
+										),
 										className: isMobile
 											? 'p2p-chat-notification-wrapper p2p-chat-notification-wrapper-mobile'
 											: 'p2p-chat-notification-wrapper',
@@ -583,17 +588,18 @@ class Container extends Component {
 							notification.close(previousNotification?.key);
 							notification.open({
 								...previousNotification,
-								icon:
-									previousNotificationMessage ===
-									(STRINGS['P2P.CANCEL_STATUS_MESSAGE'] ||
-										STRINGS['P2P.APPEAL_STATUS_MESSAGE']) ? (
-										<ExclamationCircleOutlined />
-									) : previousNotificationMessage ===
-									  STRINGS['P2P.NEW_MESSAGE'] ? (
-										<MailOutlined />
-									) : (
-										<BellOutlined />
-									),
+								icon: [
+									STRINGS['P2P.CANCEL_STATUS_MESSAGE'],
+									STRINGS['P2P.ADMIN_ORDER_CANCELLATION_MESSAGE'],
+									STRINGS['P2P.APPEAL_STATUS_MESSAGE'],
+								]?.includes(previousNotificationMessage) ? (
+									<ExclamationCircleOutlined />
+								) : previousNotificationMessage ===
+								  STRINGS['P2P.NEW_MESSAGE'] ? (
+									<MailOutlined />
+								) : (
+									<BellOutlined />
+								),
 								className: isMobile
 									? 'p2p-chat-notification-wrapper p2p-chat-notification-wrapper-mobile p2p-chat-notification'
 									: 'p2p-chat-notification-wrapper p2p-chat-notification',

diff --git a/web/src/containers/P2P/P2POrder/P2POrder.js b/web/src/containers/P2P/P2POrder/P2POrder.js
@@ -26,7 +26,7 @@ import {
 import { formatToCurrency } from 'utils/currency';
 import { getToken } from 'utils/token';
 import { WS_URL } from 'config/constants';
-import { renderFeedback } from '../Utilis';
+import { renderFeedback, Timer } from '../Utilis';
 import classnames from 'classnames';
 import BigNumber from 'bignumber.js';
 import '../_P2P.scss';
@@ -1168,12 +1168,14 @@ const P2POrder = ({
 								</div>
 							</div>
 							<div className="order-verification-container secondary-text">
-								<div className="mb-3 important-text">
-									<EditWrapper stringId="P2P.EXPECTED_TIME">
-										{STRINGS['P2P.EXPECTED_TIME']}
-									</EditWrapper>
-								</div>
-
+								{selectedOrder?.user_status === 'pending' && (
+									<div className="mb-3 important-text order-timer-wrapper">
+										<EditWrapper stringId="P2P.EXPECTED_TIME">
+											{STRINGS['P2P.EXPECTED_TIME']}
+										</EditWrapper>
+										<Timer order={selectedOrder} />
+									</div>
+								)}
 								{user.id === selectedOrder?.user_id && (
 									<>
 										{selectedOrder.user_status === 'pending' && (