Tom Butcher
71f5e10e5f
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Updated SalesOverview to include new collapsible sections for Listing, Marketplace, and Client statistics, improving data organization and visibility. - Added detailed statistics for Sales Order History, Confirmed Sales Orders, Listing History, Draft Listings, Marketplace History, Ready Marketplaces, Client History, and Active Clients. - Refactored useCollapseState to manage the expanded state of new sections, ensuring a cohesive user experience across the dashboard.
593 lines
14 KiB
JavaScript
593 lines
14 KiB
JavaScript
import { createElement, lazy } from 'react'
|
|
|
|
const MarketplaceInfo = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/MarketplaceInfo')
|
|
)
|
|
const NewMarketplace = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/NewMarketplace')
|
|
)
|
|
const SyncMarketplace = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/SyncMarketplace')
|
|
)
|
|
const SyncListings = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/SyncListings')
|
|
)
|
|
const SyncOrders = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/SyncOrders')
|
|
)
|
|
const DeleteObject = lazy(
|
|
() => import('../../components/Dashboard/common/DeleteObject')
|
|
)
|
|
import MarketplaceIcon from '../../components/Icons/MarketplaceIcon'
|
|
import PlusIcon from '../../components/Icons/PlusIcon'
|
|
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
|
|
import EditIcon from '../../components/Icons/EditIcon'
|
|
import CheckIcon from '../../components/Icons/CheckIcon'
|
|
import XMarkIcon from '../../components/Icons/XMarkIcon'
|
|
import ReloadIcon from '../../components/Icons/ReloadIcon'
|
|
import LinkIcon from '../../components/Icons/LinkIcon'
|
|
import BinIcon from '../../components/Icons/BinIcon'
|
|
import ListIcon from '../../components/Icons/ListIcon'
|
|
|
|
export const Marketplace = {
|
|
name: 'marketplace',
|
|
label: 'Marketplace',
|
|
labelPlural: 'Marketplaces',
|
|
url: '/dashboard/sales/marketplaces',
|
|
prefix: 'MKT',
|
|
icon: MarketplaceIcon,
|
|
actions: [
|
|
{
|
|
name: 'new',
|
|
type: 'modal',
|
|
pageName: 'list',
|
|
modalWidth: 800,
|
|
label: 'New Marketplace',
|
|
icon: PlusIcon,
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(NewMarketplace, {
|
|
defaultValues: objectData,
|
|
onOk,
|
|
reset: true
|
|
})
|
|
}
|
|
},
|
|
{
|
|
name: 'list',
|
|
type: 'page',
|
|
pageName: 'list',
|
|
label: 'List',
|
|
icon: ListIcon
|
|
},
|
|
{
|
|
name: 'info',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
label: 'Info',
|
|
default: true,
|
|
row: true,
|
|
icon: InfoCircleIcon
|
|
},
|
|
{
|
|
name: 'edit',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
label: 'Edit',
|
|
row: true,
|
|
icon: EditIcon,
|
|
visible: (objectData) => {
|
|
return !(objectData?._isEditing && objectData?._isEditing == true)
|
|
}
|
|
},
|
|
{
|
|
name: 'cancelEdit',
|
|
label: 'Cancel Edits',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
icon: XMarkIcon,
|
|
visible: (objectData) => {
|
|
return objectData?._isEditing && objectData?._isEditing == true
|
|
}
|
|
},
|
|
{
|
|
name: 'finishEdit',
|
|
label: 'Save Edits',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
icon: CheckIcon,
|
|
visible: (objectData) => {
|
|
return objectData?._isEditing && objectData?._isEditing == true
|
|
}
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
name: 'sync',
|
|
label: 'Sync',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
children: [
|
|
{
|
|
name: 'syncMarketplace',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Marketplace',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncMarketplace, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncListings',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Listings',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncListings, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncMarketplace',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Marketplace',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncMarketplace, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncOrders',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Orders',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncOrders, { objectData, onOk })
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
name: 'connect',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
label: 'Connect',
|
|
icon: LinkIcon,
|
|
disabled: (objectData) => {
|
|
return (
|
|
objectData?.state?.type == 'ready' ||
|
|
objectData?.state?.type == 'connecting' ||
|
|
objectData?.state?.type == 'syncing'
|
|
)
|
|
}
|
|
},
|
|
{
|
|
name: 'reconnect',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
label: 'Reconnect',
|
|
icon: LinkIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
}
|
|
},
|
|
{
|
|
name: 'refreshToken',
|
|
type: 'page',
|
|
pageName: 'info',
|
|
label: 'Refresh Token',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
}
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
name: 'delete',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
modalCentered: true,
|
|
label: 'Delete',
|
|
icon: BinIcon,
|
|
danger: true,
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(DeleteObject, { objectData, onOk })
|
|
}
|
|
}
|
|
],
|
|
pages: [
|
|
{
|
|
name: 'info',
|
|
content: () => createElement(MarketplaceInfo)
|
|
}
|
|
],
|
|
columns: [
|
|
'_reference',
|
|
'name',
|
|
'provider',
|
|
'authConnected',
|
|
'state',
|
|
'connected',
|
|
'config.accessTokenExpiresAt',
|
|
'active',
|
|
'createdAt',
|
|
'updatedAt'
|
|
],
|
|
filters: [
|
|
'name',
|
|
'provider',
|
|
'active',
|
|
'connected',
|
|
'state.type',
|
|
'createdAt',
|
|
'updatedAt',
|
|
'state',
|
|
'_reference'
|
|
],
|
|
sorters: [
|
|
'name',
|
|
'provider',
|
|
'active',
|
|
'connected',
|
|
'state',
|
|
'createdAt',
|
|
'updatedAt',
|
|
'_id'
|
|
],
|
|
group: ['provider'],
|
|
properties: [
|
|
{
|
|
name: '_id',
|
|
label: 'ID',
|
|
columnFixed: 'left',
|
|
type: 'id',
|
|
objectType: 'marketplace',
|
|
showCopy: true,
|
|
columnWidth: 140
|
|
},
|
|
{
|
|
name: 'createdAt',
|
|
label: 'Created At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
columnWidth: 175
|
|
},
|
|
{
|
|
name: '_reference',
|
|
label: 'Reference',
|
|
type: 'reference',
|
|
columnFixed: 'left',
|
|
objectType: 'marketplace',
|
|
showCopy: true,
|
|
readOnly: true,
|
|
columnWidth: 180
|
|
},
|
|
{
|
|
name: 'updatedAt',
|
|
label: 'Updated At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
columnWidth: 175
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: 'Name',
|
|
columnFixed: 'left',
|
|
required: true,
|
|
type: 'text',
|
|
columnWidth: 200
|
|
},
|
|
{
|
|
name: 'connectedAt',
|
|
label: 'Connected At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
showSince: true,
|
|
columnWidth: 175
|
|
},
|
|
{
|
|
name: 'provider',
|
|
label: 'Provider',
|
|
type: 'select',
|
|
required: true,
|
|
options: [
|
|
{ value: 'ebay', label: 'eBay' },
|
|
{ value: 'etsy', label: 'Etsy' },
|
|
{ value: 'tiktokShop', label: 'TikTok Shop' }
|
|
],
|
|
columnWidth: 150
|
|
},
|
|
{
|
|
name: 'eBay.availableShippingServices',
|
|
label: 'Available Shipping Services',
|
|
type: 'stringList',
|
|
readOnly: true,
|
|
required: false,
|
|
visible: (objectData) => objectData?.provider === 'ebay',
|
|
extra: 'Loaded from eBay GeteBayDetails when this marketplace is synced.',
|
|
span: 2,
|
|
columnWidth: 280
|
|
},
|
|
{
|
|
name: 'config.accessTokenExpiresAt',
|
|
label: 'Access Token Expires At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
columnWidth: 215
|
|
},
|
|
|
|
{
|
|
name: 'state',
|
|
label: 'State',
|
|
type: 'state',
|
|
objectType: 'marketplace',
|
|
readOnly: true,
|
|
columnWidth: 260
|
|
},
|
|
{
|
|
name: 'active',
|
|
label: 'Active',
|
|
type: 'bool',
|
|
readOnly: false,
|
|
required: true,
|
|
columnWidth: 125
|
|
},
|
|
{
|
|
name: 'connected',
|
|
label: 'Connected',
|
|
type: 'bool',
|
|
readOnly: true,
|
|
columnWidth: 125
|
|
},
|
|
{
|
|
name: 'config.refreshTokenExpiresAt',
|
|
label: 'Refresh Token Expires At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
showSince: true,
|
|
columnWidth: 200
|
|
},
|
|
{
|
|
name: 'config.clientId',
|
|
label: 'Client ID',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
|
|
{
|
|
name: 'config.lastTokenRefreshAt',
|
|
label: 'Last Token Refresh At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
showSince: true,
|
|
columnWidth: 200
|
|
},
|
|
|
|
{
|
|
name: 'config.clientSecret',
|
|
label: 'Client Secret',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.ruName',
|
|
label: 'RuName',
|
|
type: 'text',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.marketplaceId',
|
|
label: 'Marketplace ID',
|
|
type: 'text',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 160,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.sandbox',
|
|
label: 'Sandbox',
|
|
type: 'bool',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 120,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.verificationToken',
|
|
label: 'Verification Token',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.refreshToken',
|
|
label: 'Refresh Token',
|
|
type: 'secret',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.accessToken',
|
|
label: 'Access Token',
|
|
type: 'secret',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
{
|
|
name: 'config.redirectUri',
|
|
label: 'Redirect URI',
|
|
type: 'url',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 280,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.refreshToken',
|
|
label: 'Refresh Token',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
value: (objectData) => {
|
|
if (objectData?.config?.refreshToken) {
|
|
return '••••••••••••••••••••••••••••••••••••'
|
|
}
|
|
return undefined
|
|
},
|
|
visible: (objectData) => objectData?.provider === 'etsy'
|
|
},
|
|
{
|
|
name: 'config.shopId',
|
|
label: 'Shop ID',
|
|
type: 'text',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'etsy'
|
|
},
|
|
{
|
|
name: 'config.accessToken',
|
|
label: 'Access Token',
|
|
type: 'secret',
|
|
readOnly: (objectData) => objectData?.provider === 'tiktokShop',
|
|
required: false,
|
|
columnWidth: 200,
|
|
value: (objectData) => {
|
|
if (objectData?.config?.accessToken) {
|
|
return '••••••••••••••••••••••••••••••••••••'
|
|
}
|
|
return undefined
|
|
},
|
|
visible: (objectData) =>
|
|
objectData?.provider === 'etsy' || objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.appKey',
|
|
label: 'App Key',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.appSecret',
|
|
label: 'App Secret',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.shopCipher',
|
|
label: 'Shop Cipher',
|
|
type: 'text',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.shopName',
|
|
label: 'Shop Name',
|
|
type: 'text',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.shopRegion',
|
|
label: 'Shop Region',
|
|
type: 'text',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 140,
|
|
visible: (objectData) => objectData?.provider === 'tiktokShop'
|
|
},
|
|
{
|
|
name: 'config.callbackUrl',
|
|
label: 'Callback URL',
|
|
type: 'url',
|
|
readOnly: true,
|
|
required: false,
|
|
columnWidth: 280,
|
|
visible: (objectData) =>
|
|
objectData?.provider === 'ebay' ||
|
|
objectData?.provider === 'tiktokShop',
|
|
value: () => {
|
|
if (typeof window === 'undefined') {
|
|
return undefined
|
|
}
|
|
return `${window.location.origin}/auth/marketplace/callback`
|
|
}
|
|
}
|
|
],
|
|
stats: [
|
|
{
|
|
name: 'ready.count',
|
|
label: 'Ready',
|
|
type: 'number',
|
|
color: 'success'
|
|
},
|
|
{
|
|
name: 'syncing.count',
|
|
label: 'Syncing',
|
|
type: 'number',
|
|
color: 'processing'
|
|
},
|
|
{
|
|
name: 'disconnected.count',
|
|
label: 'Disconnected',
|
|
type: 'number',
|
|
color: 'warning'
|
|
},
|
|
{
|
|
name: 'inactive.count',
|
|
label: 'Inactive',
|
|
type: 'number',
|
|
color: 'default'
|
|
},
|
|
{
|
|
name: 'offline.count',
|
|
label: 'Offline',
|
|
type: 'number',
|
|
color: 'default'
|
|
}
|
|
]
|
|
}
|