From db07b6b651ac74a216b4b4f7f8f601a81981f859 Mon Sep 17 00:00:00 2001 From: ram Date: Mon, 20 Feb 2023 21:10:18 +0530 Subject: [PATCH] Fixed the UI bugs on the plugin payment workflow. --- .../Admin/Billing/generalContent.js | 8 ++- .../Admin/Billing/pluginSubscription.js | 8 ++- web/src/containers/Admin/Plugins/MyPlugins.js | 58 +++++++++--------- .../Admin/Plugins/PluginAppStore.js | 54 +++++++++-------- .../containers/Admin/Plugins/PluginDetails.js | 56 ++++++++++++++---- .../containers/Admin/Plugins/PluginStore.js | 2 +- web/src/containers/Admin/Plugins/index.css | 59 ++++++++++++++++++- web/src/containers/Admin/Plugins/index.js | 15 +++-- 8 files changed, 179 insertions(+), 81 deletions(-) diff --git a/web/src/containers/Admin/Billing/generalContent.js b/web/src/containers/Admin/Billing/generalContent.js index e2a2041074..88ddfb4788 100644 --- a/web/src/containers/Admin/Billing/generalContent.js +++ b/web/src/containers/Admin/Billing/generalContent.js @@ -112,6 +112,7 @@ const GeneralContent = ({ dashExchange.period !== 'year' ? true : false ); const [invoiceData, setinvoiceData] = useState([]); + const [activateInvoiceData, setActivateInvoiceData] = useState({}); const [priceData, setPriceData] = useState({}); const [paymentOptions, setOptions] = useState([]); const [showPayAddress, setShowPayAddress] = useState(false); @@ -300,6 +301,7 @@ const GeneralContent = ({ setPaymentAddressDetails({}); setPendingPay(false); setHideBreadcrumb(false); + setActivateInvoiceData({}); }; const handleViewPlan = () => { @@ -333,7 +335,9 @@ const GeneralContent = ({ default: break; } - const invoiceId = selectedPendingId + const invoiceId = activateInvoiceData.id + ? activateInvoiceData.id + : selectedPendingId ? selectedPendingId : invoiceData[0].id; const res = await requestStoreInvoice(invoiceId, { method }); @@ -528,6 +532,7 @@ const GeneralContent = ({ const res = await getPluginActivateDetails(pluginData.name); if (res && res.data) { setinvoiceData([res.data]); + setActivateInvoiceData(res.data); setExchangePlanType('method'); } } catch (error) { @@ -1080,6 +1085,7 @@ const GeneralContent = ({ storePaymentMethod(selectedPendingItem?.id); } else if (exchangePlanType === 'payment') { setOpenPlanModal(false); + setActivateInvoiceData({}); } }; diff --git a/web/src/containers/Admin/Billing/pluginSubscription.js b/web/src/containers/Admin/Billing/pluginSubscription.js index 105cb277c9..cfd7b983da 100644 --- a/web/src/containers/Admin/Billing/pluginSubscription.js +++ b/web/src/containers/Admin/Billing/pluginSubscription.js @@ -31,7 +31,9 @@ const PluginSubscription = ({
Save 6%.
-
Requires plugin activation ({name})
+
+ Requires plugin activation ({price}-{name}) +
@@ -69,13 +71,13 @@ const PluginSubscription = ({ Cost : {paymentAddressDetails?.activation && paymentAddressDetails?.activation?.price - ? `${paymentAddressDetails?.activation?.price}* USDT` + ? `${paymentAddressDetails?.activation?.price} USDT` : !['method', 'item'].includes(exchangePlanType) && paymentAddressDetails?.currency ? `${paymentAddressDetails?.currency?.toUpperCase()} ${ paymentAddressDetails?.amount }` - : `${price}* USDT`} + : `${price} USDT`}

diff --git a/web/src/containers/Admin/Plugins/MyPlugins.js b/web/src/containers/Admin/Plugins/MyPlugins.js index 1e3c264503..f40604e0ec 100644 --- a/web/src/containers/Admin/Plugins/MyPlugins.js +++ b/web/src/containers/Admin/Plugins/MyPlugins.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Button, Input, Spin, Modal, message } from 'antd'; +import { Button, Input, Modal, message } from 'antd'; import _debounce from 'lodash/debounce'; import { STATIC_ICONS } from 'config/icons'; @@ -289,7 +289,9 @@ class MyPlugins extends Component { const { myPlugins, isPluginFetchLoading } = this.props; return ( -
+
My plugins apps
@@ -309,7 +311,7 @@ class MyPlugins extends Component {
@@ -333,35 +335,29 @@ class MyPlugins extends Component { : `url(${STATIC_ICONS.EXCHANGE_APP_STORE_BACKGROUND_SPLASH_2})`, }} > - - {myPlugins.length ? ( - <>{this.renderList()} - ) : ( - !isPluginFetchLoading && ( -
-
- {this.state.isSearchTerm ? ( - <>Can't find any plugin apps by that search term. - ) : ( - <>You haven't installed any exchange plugin apps yet. - )} -
- {!this.state.isSearchTerm ? ( -
- - Click here - {' '} - to find more plugin apps. -
- ) : null} + {myPlugins.length ? ( + <>{this.renderList()} + ) : ( + !isPluginFetchLoading && ( +
+
+ {this.state.isSearchTerm ? ( + <>Can't find any plugin apps by that search term. + ) : ( + <>You haven't installed any exchange plugin apps yet. + )}
- ) - )} - + {!this.state.isSearchTerm ? ( +
+ + Click here + {' '} + to find more plugin apps. +
+ ) : null} +
+ ) + )}
diff --git a/web/src/containers/Admin/Plugins/PluginAppStore.js b/web/src/containers/Admin/Plugins/PluginAppStore.js index a724825f04..2c7c18333b 100644 --- a/web/src/containers/Admin/Plugins/PluginAppStore.js +++ b/web/src/containers/Admin/Plugins/PluginAppStore.js @@ -6,33 +6,35 @@ const PluginAppStore = ({ onChangeNextType, router }) => {
onChangeNextType('myplugin')} + onClick={() => onChangeNextType('myPlugin')} >{`{' '} -
-
-
- -
- Exchange Plugin App Store -
-
- Marketplace to buy, sell and install plugin apps for your crypto - platform. -
-
router.push(`/admin/plugins/store`)} - > - Click to enter +
+
+
+
+ +
+ Exchange Plugin App Store +
+
+ Marketplace to buy, sell and install plugin apps for your crypto + platform. +
+
router.push(`/admin/plugins/store`)} + > + Click to enter +
diff --git a/web/src/containers/Admin/Plugins/PluginDetails.js b/web/src/containers/Admin/Plugins/PluginDetails.js index abef163ef2..13921d9141 100644 --- a/web/src/containers/Admin/Plugins/PluginDetails.js +++ b/web/src/containers/Admin/Plugins/PluginDetails.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, Modal, Divider, Spin, message } from 'antd'; +import { Button, Modal, Divider, Spin, message, Tooltip } from 'antd'; import { StarFilled, ClockCircleOutlined, @@ -233,25 +233,33 @@ const PluginDetails = ({

{`Description: ${pluginData.description}`}

{' '} - {!!pluginData?.free_for?.length ? ( + {!!free_for?.length ? ( <>

Note:

{' '}
- +
{' '} - {pluginData?.free_for?.map((item) => ( -

{item}

+ {free_for?.map((item, inx) => ( +

{`${inx === 0 ? '' : `, `} ${ + exchangeType[item] + }`}

))} ) : ( '' )}{' '}
-

+

Author: - {' '} + + + {' '} {pluginData.author}

@@ -274,6 +282,22 @@ const PluginDetails = ({ '' )}{' '}

+ {only_for?.length ? ( +
+

Only For:

+ {only_for?.map((item, inx) => ( +

{`${inx === 0 ? '' : `, `} ${exchangeType[item]}`}

+ ))} +
+ ) : null} + {free_for?.length ? ( +
+

Free For:

{' '} + {free_for?.map((item, inx) => ( +

{` ${inx === 0 ? '' : `, `} ${exchangeType[item]}`}

+ ))} +
+ ) : null} {pluginData.price && (

Price:

{' '} @@ -630,11 +654,17 @@ const PluginDetails = ({ '' )}{' '}
-

+

Author: - {' '} + + + {' '} {author}

{free_for?.length ? ( diff --git a/web/src/containers/Admin/Plugins/PluginStore.js b/web/src/containers/Admin/Plugins/PluginStore.js index 862973fbb8..b873b83d22 100644 --- a/web/src/containers/Admin/Plugins/PluginStore.js +++ b/web/src/containers/Admin/Plugins/PluginStore.js @@ -202,7 +202,7 @@ class Plugins extends Component { }; onChangeNextType = (nextType) => { - this.setState({ nextType }); + this.setState({ nextType, type: '', isConfigure: false }); }; onHandleCard = (key) => { diff --git a/web/src/containers/Admin/Plugins/index.css b/web/src/containers/Admin/Plugins/index.css index 4ff3619480..4d36b045cf 100644 --- a/web/src/containers/Admin/Plugins/index.css +++ b/web/src/containers/Admin/Plugins/index.css @@ -610,8 +610,30 @@ padding-left: 2rem; } -.app-store-wrapper .apps-store-background-img { - height: 78rem; +.admin-plugin-container { + height: 100%; +} + +.admin-plugin-container .ant-spin-nested-loading { + height: 100%; +} + +.admin-plugin-container .ant-spin-nested-loading .ant-spin-container { + height: 100%; +} + +.admin-plugin-container .app-store-wrapper { + height: 100%; +} + +.admin-plugin-container .app-store-wrapper .image-wrapper { + height: 100%; +} + +.app-store-wrapper .image-wrapper .apps-store-background-img { + z-index: 100; + height: 100%; + position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; @@ -620,6 +642,10 @@ .admin-content-wrapper:has(.app-store-wrapper) { padding: 0px !important; } + +.admin-content-wrapper:has(.myplugin-wrapper) { + padding: 0px !important; +} .plugin-container { padding-left: 20px; } @@ -632,6 +658,29 @@ font-size: 13px; } +.plugin-container .plugin-content-wrapper .tooltip-container { + height: 20px; +} +.plugin-container .plugin-content-wrapper .verified-icon { + padding: 0px 8px 0px 0px !important; + width: 2rem; + margin-right: 5px; +} + +.plugin-container .plugin-content-wrapper .verified-icon div { + padding: unset !important; +} + +.plugin-container .plugin-content-wrapper .verified-icon svg { + height: 1.5rem; + width: 1.5rem; +} + +.plugin-container .plugin-content-wrapper .verified-icon:hover svg { + height: 2rem; + width: 2rem; +} + .plugin-container .plugin-content-wrapper .title-wrapper { display: flex; align-items: flex-end; @@ -802,3 +851,9 @@ background: #b6b6b6; border-radius: 10px; } + +.gradient-bottom { + background: transparent + linear-gradient(0deg, #2c48ac 0%, #222a7d 24%, #22297b 100%) 0% 0% no-repeat + padding-box; +} diff --git a/web/src/containers/Admin/Plugins/index.js b/web/src/containers/Admin/Plugins/index.js index 8416cd679d..aa4dd4d27e 100644 --- a/web/src/containers/Admin/Plugins/index.js +++ b/web/src/containers/Admin/Plugins/index.js @@ -468,7 +468,7 @@ class Plugins extends Component { onHandleBack = () => { this.setState((nextType) => { - return { nextType }; + return { nextType, type: '', isConfigure: false }; }); }; @@ -710,7 +710,7 @@ class Plugins extends Component { }; render() { - const { loading, isVisible, processing, nextType } = this.state; + const { loading, isVisible, processing, nextType, isLoading } = this.state; if (loading || this.props.pluginsLoading) { return ( @@ -720,15 +720,22 @@ class Plugins extends Component { ); } return ( -
+
- {this.renderContent()} + + {this.renderContent()} +
{this.renderModalContent()}