Tom Butcher
26132d206c
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced new components for managing Payment Policies and Fulfillment Policies, enhancing the dashboard's functionality for financial management. - Added corresponding SVG icons for Payment Policy, Fulfillment Policy, and Return Policy to improve visual representation. - Updated App.css with new styles for file gallery previews, ensuring a cohesive layout and user experience across the dashboard. - Implemented new object forms and tables for Payment Policies, allowing for better data handling and user interaction.
695 lines
17 KiB
JavaScript
695 lines
17 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 SyncFulfillmentPolicies = lazy(
|
|
() =>
|
|
import('../../components/Dashboard/Sales/Marketplaces/SyncFulfillmentPolicies')
|
|
)
|
|
const SyncPaymentPolicies = lazy(
|
|
() =>
|
|
import('../../components/Dashboard/Sales/Marketplaces/SyncPaymentPolicies')
|
|
)
|
|
const SyncReturnPolicies = lazy(
|
|
() =>
|
|
import('../../components/Dashboard/Sales/Marketplaces/SyncReturnPolicies')
|
|
)
|
|
const SyncTaxRates = lazy(
|
|
() => import('../../components/Dashboard/Sales/Marketplaces/SyncTaxRates')
|
|
)
|
|
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: '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 })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncFulfillmentPolicies',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Fulfillment Policies',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncFulfillmentPolicies, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncReturnPolicies',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Return Policies',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncReturnPolicies, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncPaymentPolicies',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Payment Policies',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncPaymentPolicies, { objectData, onOk })
|
|
}
|
|
},
|
|
{
|
|
name: 'syncTaxRates',
|
|
type: 'modal',
|
|
modalWidth: 520,
|
|
label: 'Sync Tax Rates',
|
|
icon: ReloadIcon,
|
|
disabled: (objectData) => {
|
|
return objectData?.state?.type != 'ready'
|
|
},
|
|
content: (objectData, { onOk } = {}) => {
|
|
return createElement(SyncTaxRates, { 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: '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: 'config.refreshTokenExpiresAt',
|
|
label: 'Refresh Token Expires At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
showSince: true,
|
|
columnWidth: 200
|
|
},
|
|
{
|
|
name: 'eBay.availableShippingServices',
|
|
label: 'Available Shipping Services',
|
|
type: 'number',
|
|
readOnly: true,
|
|
required: false,
|
|
visible: (objectData) => objectData?.provider === 'ebay',
|
|
extra: 'Loaded from eBay GeteBayDetails when this marketplace is synced.',
|
|
span: 2,
|
|
columnWidth: 280,
|
|
value: (objectData) => {
|
|
return objectData?.eBay?.availableShippingServices?.length
|
|
}
|
|
},
|
|
{
|
|
name: 'eBay.categoryReferences',
|
|
label: 'Category References',
|
|
type: 'treeSelect',
|
|
readOnly: true,
|
|
required: false,
|
|
visible: false,
|
|
extra:
|
|
'Loaded from the eBay taxonomy category tree when this marketplace is synced.',
|
|
span: 2,
|
|
columnWidth: 280
|
|
},
|
|
|
|
{
|
|
name: 'active',
|
|
label: 'Active',
|
|
type: 'bool',
|
|
readOnly: false,
|
|
required: true,
|
|
columnWidth: 125
|
|
},
|
|
{
|
|
name: 'config.lastTokenRefreshAt',
|
|
label: 'Last Token Refresh At',
|
|
type: 'dateTime',
|
|
readOnly: true,
|
|
showSince: true,
|
|
columnWidth: 200
|
|
},
|
|
{
|
|
name: 'connected',
|
|
label: 'Connected',
|
|
type: 'bool',
|
|
readOnly: true,
|
|
columnWidth: 125
|
|
},
|
|
|
|
{
|
|
name: 'config.clientId',
|
|
label: 'Client ID',
|
|
type: 'secret',
|
|
readOnly: false,
|
|
required: false,
|
|
columnWidth: 200,
|
|
visible: (objectData) => objectData?.provider === 'ebay'
|
|
},
|
|
|
|
{
|
|
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`
|
|
}
|
|
},
|
|
{
|
|
name: 'defaultFulfillmentPolicy',
|
|
label: 'Default Fulfillment Policy',
|
|
type: 'object',
|
|
objectType: 'fulfillmentPolicy',
|
|
showHyperlink: true,
|
|
required: false,
|
|
extra:
|
|
'Used on new listings and when a listing has no fulfillment policy.',
|
|
columnWidth: 240
|
|
},
|
|
{
|
|
name: 'defaultPaymentPolicy',
|
|
label: 'Default Payment Policy',
|
|
type: 'object',
|
|
objectType: 'paymentPolicy',
|
|
showHyperlink: true,
|
|
required: false,
|
|
extra: 'Used on new listings and when a listing has no payment policy.',
|
|
columnWidth: 220
|
|
},
|
|
{
|
|
name: 'defaultReturnPolicy',
|
|
label: 'Default Return Policy',
|
|
type: 'object',
|
|
objectType: 'returnPolicy',
|
|
showHyperlink: true,
|
|
required: false,
|
|
extra: 'Used on new listings and when a listing has no return policy.',
|
|
columnWidth: 220
|
|
}
|
|
],
|
|
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'
|
|
}
|
|
]
|
|
}
|