Vendor panel order details — first-party React view behind a server-side view marker

[MdAsifHossainNadim]

All Submissions:

• My code follow the WordPress' coding standards
• My code satisfies feature requirements
• My code is tested
• My code passes the PHPCS tests
• My code has proper inline documentation
• I've included related pull request(s)
• I've included developer documentation

Changes proposed in this Pull Request:

Gives the Vendor panel's /orders/:orderId route a first-party React UI matching the design mockups, while the #3333 server-rendered fragment stays as the permanent compatibility fallback (ADR-0005 intact). Stacked on feat/vendor-panel-order-details-fragment.

Everything is additive — the only shipped files touched are one-line registrations plus this feature's own files from the base branch. OrderController, Assets.php, Order/functions.php, DetailsFragment and the fragment component are byte-identical.

• Server-side view marker — new WeDevs\Dokan\Order\VendorPanelOrderDetails (Hookable) publishes dokanFrontend.order_details.view (react | fragment) through the existing dokan_react_frontend_localized_args seam, plus sections, the status list and the order_status_change admin setting. Defaults to react, with automatic fallback to the fragment when third-party callbacks are detected on the details-template hooks (reflection, best-effort — the dokan_vendor_panel_order_details_view filter is the guaranteed override) or when the session is Vendor staff (whose access only the fragment endpoint currently grants — the shipped staff-refusing permission rule is deliberately untouched, per the WPML - CUSTOMER/SELLER ACCOUNT - ORDERS > Order Details: Date of Delivery > Date > not translated #2133 split).
• React view (src/dashboard/orders/details/) — summary strip (site-format "date at time", Dokan-formatted earning), items card (Figma column spec 44fr/22fr/22fr/22fr, #FDFDFD header strip, coupon chips, refund rows, strikethrough totals), downloadable-permissions card (search + grant, per-file editable limit/expiry with usage hints, revoke), sidebar Customer/Address/Notes cards built to the Figma spec (20px card grid with block-owned dividers, one label size throughout, lucide mail/phone/IP glyphs, addresses as a single line clamped to three with the full text on hover, legacy keycdn geo IP link, humanTimeDiff note stamps, trash-icon delete). One order fetch feeds the page; ORDER_DETAILS_LOADED/ORDER_DETAILS_STATUS_CHANGED keep the shared header in sync under either renderer.
• Extension contract — every section is bracketed by before-* / after-* slots (summary, items, downloads, customer, address, notes) alongside items-actions and sidebar-before/middle/after, each receiving { order, orderId, sections, isLoading, refetch, navigate } as fillProps; Pro's sections plug in via registerPlugin scoped to the route id (companion PR). First-party data runs through JS filters too — dokan_order_details_summary_items, dokan_order_details_statuses, dokan_order_details_address_parts — and on the server, dokan_vendor_panel_order_details_sections and …_statuses join the existing …_args / …_view.
• Header — RFQ-style breadcrumb ("< All Orders"), outlined status pill reusing the order-list badge theme classes at the RFQ pill's measured size, and the RFQ-measured split status button (42px segments, sharp white seam) offering the legacy status list — hidden on cancelled/refunded orders and honoring dokan_manage_order + the order_status_change admin setting. No Print control: the legacy page has none.
• Downloads REST — new OrderDownloadController: GET/POST dokan/v1/orders/<id>/downloads, PUT/DELETE …/downloads/<permission_id>, registered via the dokan_rest_api_class_map filter; staff-aware permission callbacks modeled on the fragment endpoint; grant wraps wc_downloadable_file_permission() with the vendor-ownership guard from the AJAX handler; expiry stored as UTC midnight so the picked day round-trips timezone-stable.

Related Pull Request(s)

• Base (stacked on): Vendor order details in the Vendor panel — server-rendered fragment over REST #3333
• dokan-pro companion: getdokan/dokan-pro#5985

Closes

• Part of getdokan/plugin-internal-tasks#2159 (implementation slices S1–S8 + parts of S10; automated tests and the extension-guide doc slice remain)

How to test the changes in this Pull Request:

1. Build (npm run build) and open /dashboard/new/#/orders, then any order — the details render as first-party React (no fragment markup), on the product editor's gray canvas.
2. Change the status from the split button — the header pill, button label and page data update together; the control is absent on cancelled/refunded orders and when the admin's "Order Status Change" setting is off.
3. Add/delete an order note; grant a downloadable product, edit its limit/expiry, Update, Revoke.
4. add_filter( 'dokan_vendor_panel_order_details_view', fn() => 'fragment' ); — the same route renders the Vendor order details in the Vendor panel — server-rendered fragment over REST #3333 fragment again (ADR-0005 gate). Legacy URL unchanged.
5. Register any callback on dokan_order_detail_after_order_items from a theme — the view auto-falls back to the fragment.

Changelog entry

Vendor order details render as first-party React in the Vendor panel

Previous behaviour: the panel's order-details route displayed the legacy server-rendered template bridged in as an HTML fragment.

New behaviour: stores without third-party template hooks get a first-party React details view matching the new design (summary, items and totals, downloadable permissions, customer/address/notes sidebar), with named section slots for extensions. The fragment remains the automatic fallback for stores with third-party hooked output, for Vendor staff sessions, and via the dokan_vendor_panel_order_details_view filter; the legacy URL keeps working unchanged.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 091f1bc1-5a1e-4c11-8439-55d8ee170aa1

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/vendor-panel-order-details-react

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}