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/ListingVarients/ListingVarientInfo.jsx

@@ -12,6 +12,7 @@ import ObjectProperty from '../../common/ObjectProperty.jsx'
 import ViewButton from '../../common/ViewButton'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import PictureIcon from '../../../Icons/PictureIcon.jsx'
+import BulletListIcon from '../../../Icons/BulletListIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
@@ -55,6 +56,7 @@ const ListingVarientInfo = () => {
     {
       info: true,
       listingImages: true,
+      aspects: true,
       notes: true,
       auditLogs: false
     }
@@ -118,6 +120,7 @@ const ListingVarientInfo = () => {
               items={[
                 { key: 'info', label: 'Listing Varient Information' },
                 { key: 'listingImages', label: 'Listing Images' },
+                { key: 'aspects', label: 'Aspects' },
                 { key: 'notes', label: 'Notes' },
                 { key: 'auditLogs', label: 'Audit Logs' }
               ]}
@@ -196,7 +199,10 @@ const ListingVarientInfo = () => {
                       isEditing={isEditing}
                       type='listingVarient'
                       objectData={objectData}
-                      visibleProperties={{ listingImages: false }}
+                      visibleProperties={{
+                        listingImages: false,
+                        aspects: false
+                      }}
                     />
                   </InfoCollapse>
                   <InfoCollapse
@@ -217,6 +223,23 @@ const ListingVarientInfo = () => {
                       showCard={false}
                     />
                   </InfoCollapse>
+                  <InfoCollapse
+                    title='Aspects'
+                    icon={<BulletListIcon />}
+                    active={collapseState.aspects}
+                    onToggle={(expanded) =>
+                      updateCollapseState('aspects', expanded)
+                    }
+                    collapseKey='aspects'
+                  >
+                    <ObjectProperty
+                      {...getModelProperty('listingVarient', 'aspects')}
+                      isEditing={isEditing}
+                      objectData={objectData}
+                      loading={loading}
+                      size='medium'
+                    />
+                  </InfoCollapse>
                 </Flex>
               )}
             </ObjectForm>

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',