Add Webhook URL Configuration and Sync Webhooks Component

- Introduced a new 'SyncWebhooks' component for managing marketplace webhooks, enhancing integration capabilities.
- Added 'config.webhookUrl' to the Marketplace model, providing a read-only URL for webhook registration.
- Updated the NewMarketplace component to include the webhook URL configuration, improving the setup process for new marketplaces.

src/components/Dashboard/Sales/Marketplaces/NewMarketplace.jsx

@@ -77,6 +77,7 @@ const NewMarketplace = ({ onOk, defaultValues }) => {
                   'config.marketplaceId': false,
                   'config.sandbox': false,
                   'config.verificationToken': false,
+                  'config.webhookUrl': false,
                   'config.redirectUri': false,
                   'config.accessToken': false,
                   'config.refreshToken': false,

src/components/Dashboard/Sales/Marketplaces/SyncWebhooks.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import SyncAccountPolicies from './SyncAccountPolicies.jsx'
+
+const SyncWebhooks = ({ onOk, objectData }) => (
+  <SyncAccountPolicies
+    onOk={onOk}
+    objectData={objectData}
+    functionName='sync/webhooks'
+    title='Sync marketplace webhooks?'
+    description={`This will register order webhooks on ${objectData?.name || objectData?._reference || objectData?._id} so new and updated marketplace orders are created or updated in FarmControl.`}
+    successMessage='Webhooks synced successfully'
+  />
+)
+
+SyncWebhooks.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object
+}
+
+export default SyncWebhooks

src/database/models/Marketplace.js

@@ -1,4 +1,5 @@
 import { createElement, lazy } from 'react'
+import config from '../../config'
 
 const MarketplaceInfo = lazy(
   () => import('../../components/Dashboard/Sales/Marketplaces/MarketplaceInfo')
@@ -30,6 +31,9 @@ const SyncReturnPolicies = lazy(
 const SyncTaxRates = lazy(
   () => import('../../components/Dashboard/Sales/Marketplaces/SyncTaxRates')
 )
+const SyncWebhooks = lazy(
+  () => import('../../components/Dashboard/Sales/Marketplaces/SyncWebhooks')
+)
 const DeleteObject = lazy(
   () => import('../../components/Dashboard/common/DeleteObject')
 )
@@ -162,6 +166,19 @@ export const Marketplace = {
             return createElement(SyncOrders, { objectData, onOk })
           }
         },
+        {
+          name: 'syncWebhooks',
+          type: 'modal',
+          modalWidth: 520,
+          label: 'Sync Webhooks',
+          icon: ReloadIcon,
+          disabled: (objectData) => {
+            return objectData?.state?.type != 'ready'
+          },
+          content: (objectData, { onOk } = {}) => {
+            return createElement(SyncWebhooks, { objectData, onOk })
+          }
+        },
         {
           name: 'syncFulfillmentPolicies',
           type: 'modal',
@@ -627,6 +644,27 @@ export const Marketplace = {
         return `${window.location.origin}/auth/marketplace/callback`
       }
     },
+    {
+      name: 'config.webhookUrl',
+      label: 'Webhook URL',
+      type: 'url',
+      readOnly: true,
+      required: false,
+      columnWidth: 280,
+      extra:
+        'Registered with the marketplace so new and updated orders are written to FarmControl.',
+      visible: (objectData) =>
+        objectData?.provider === 'ebay' ||
+        objectData?.provider === 'tiktokShop',
+      value: (objectData) => {
+        const id = objectData?._id
+        const base = config.backendUrl?.replace(/\/$/, '')
+        if (!id || !base) {
+          return undefined
+        }
+        return `${base}/marketplaces/${id}/hook`
+      }
+    },
     {
       name: 'defaultFulfillmentPolicy',
       label: 'Default Fulfillment Policy',