69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Result, Typography, Flex, Button } from 'antd'
|
|
import CopyButton from '../../common/CopyButton'
|
|
import MarketplaceIcon from '../../../Icons/MarketplaceIcon'
|
|
import { getMarketplaceCallbackUrl } from './authUtils'
|
|
|
|
const { Text } = Typography
|
|
|
|
const ConfigureMarketplace = ({
|
|
onConnect,
|
|
isConnected = false,
|
|
loading = false,
|
|
disabled = false
|
|
}) => {
|
|
const callbackUrl = getMarketplaceCallbackUrl()
|
|
|
|
return (
|
|
<Flex vertical align='center'>
|
|
<Result
|
|
title='Marketplace Connection'
|
|
subTitle={
|
|
<Text>
|
|
Use this callback URL for TikTok Shop redirects and as the eBay
|
|
RuName accept URL target. Click Connect to authorize your
|
|
marketplace account.
|
|
</Text>
|
|
}
|
|
icon={<MarketplaceIcon />}
|
|
>
|
|
<Flex
|
|
vertical
|
|
gap='middle'
|
|
align='center'
|
|
style={{ minWidth: '395px' }}
|
|
>
|
|
<Flex justify='center'>
|
|
<Flex gap='small' align='center' justify='center'>
|
|
<CopyButton size='default' text={callbackUrl} />
|
|
<Text code style={{ fontSize: '14px', wordBreak: 'break-all' }}>
|
|
{callbackUrl}
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
<Flex justify='center'>
|
|
<Button
|
|
type='primary'
|
|
onClick={onConnect}
|
|
loading={loading}
|
|
disabled={disabled}
|
|
key='connect'
|
|
>
|
|
{isConnected ? 'Reconnect' : 'Connect'}
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</Result>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
ConfigureMarketplace.propTypes = {
|
|
onConnect: PropTypes.func,
|
|
isConnected: PropTypes.bool,
|
|
loading: PropTypes.bool,
|
|
disabled: PropTypes.bool
|
|
}
|
|
|
|
export default ConfigureMarketplace
|