Add Pro Features react page and integrate with admin dashboard. #2787
Conversation
WalkthroughA new "Pro Features" page is added to the Dokan admin dashboard. This includes a PHP backend page registration, service provider inclusion, a React frontend with route integration, dedicated Tailwind CSS configuration, and a new Webpack entry for asset bundling. No existing logic or flows are modified. Changes
Sequence Diagram(s)sequenceDiagram
participant Admin as Admin User
participant Dashboard as Dokan Admin Dashboard
participant PHP as ProFeatures PHP Page
participant React as ProFeatures React Component
Admin->>Dashboard: Navigates to "Pro Features"
Dashboard->>PHP: Loads ProFeatures page (registers scripts/styles)
PHP->>Dashboard: Enqueues assets (JS/CSS)
Dashboard->>React: Loads React component via route
React-->>Admin: Renders Pro Features UI
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
src/ProFeatures/ProFeatures.tsx (1)
1-7: Consider using design system colors instead of hardcoded values.The component uses a hardcoded color
text-[#e3a333]which doesn't align with the established design system. Based on the base Tailwind configuration, consider using semantic color tokens liketext-dokan-warning-DEFAULTor other appropriate design system colors.- <h1 className="text-[#e3a333]">Hello From ProFeatures.tsx 🔥</h1> + <h1 className="text-dokan-warning-DEFAULT">Pro Features</h1>src/ProFeatures/tailwind.scss (1)
3-3: Clarify the commented-out dokan-ui import.Is the commented-out
@import "@getdokan/dokan-ui/dist/dokan-ui.css";intentional? Consider removing it if not needed, or add a comment explaining why it's preserved.src/ProFeatures/index.tsx (1)
7-8: Consider adding proper TypeScript declarations instead of @ts-ignore.The
@ts-ignorecomment suppresses TypeScript errors but reduces type safety. Consider adding proper TypeScript declarations forwp.hooksor importing it from@wordpress/hooks.- // @ts-ignore - wp.hooks.addFilter( + import { addFilter } from '@wordpress/hooks'; + + addFilter(Alternatively, if you need to keep the global
wpobject, consider adding a proper type declaration:+declare global { + interface Window { + wp: { + hooks: { + addFilter: (hookName: string, namespace: string, callback: Function) => void; + }; + }; + } +} + - // @ts-ignore wp.hooks.addFilter(includes/Admin/Dashboard/Pages/ProFeatures.php (3)
10-10: Replace placeholder @SInCE tag with actual version.The
@since DOKAN_SINCEappears to be a placeholder. Please replace it with the actual version number when this feature will be released.- * @since DOKAN_SINCE + * @since 3.12.0
48-48: Replace placeholder @SInCE tag with actual version.Same issue as above - the
@since DOKAN_SINCEneeds to be replaced with the actual version number.- * @since DOKAN_SINCE + * @since 3.12.0
59-59: Replace placeholder @SInCE tag with actual version.Same issue as above - the
@since DOKAN_SINCEneeds to be replaced with the actual version number.- * @since DOKAN_SINCE + * @since 3.12.0
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
includes/Admin/Dashboard/Pages/ProFeatures.php(1 hunks)includes/DependencyManagement/Providers/AdminDashboardServiceProvider.php(2 hunks)src/ProFeatures/ProFeatures.tsx(1 hunks)src/ProFeatures/index.tsx(1 hunks)src/ProFeatures/tailwind.config.js(1 hunks)src/ProFeatures/tailwind.scss(1 hunks)webpack-entries.js(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/ProFeatures/ProFeatures.tsx (1)
includes/Admin/Dashboard/Pages/ProFeatures.php (1)
ProFeatures(5-79)
src/ProFeatures/tailwind.config.js (1)
base-tailwind.config.js (1)
baseConfig(9-291)
src/ProFeatures/index.tsx (2)
src/admin/dashboard/components/Dashboard.tsx (1)
DokanAdminRoute(8-13)includes/Admin/Dashboard/Pages/ProFeatures.php (1)
ProFeatures(5-79)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: e2e tests (3, 3)
- GitHub Check: e2e tests (2, 3)
- GitHub Check: e2e tests (1, 3)
- GitHub Check: api tests (1, 1)
🔇 Additional comments (8)
webpack-entries.js (1)
61-61: LGTM! Entry point follows established patterns.The new webpack entry point for the Pro Features module is correctly added and follows the naming convention used throughout the configuration.
src/ProFeatures/tailwind.config.js (1)
1-9: LGTM! Tailwind configuration is properly scoped.The configuration correctly extends the base Tailwind config and appropriately scopes the content to only include files within the ProFeatures directory. This follows the established pattern for module-specific styling.
src/ProFeatures/tailwind.scss (1)
1-3: LGTM! SCSS structure is correct.The file properly imports the base Tailwind styles and configures the module-specific Tailwind config. The use of modern
@usesyntax is appropriate.includes/DependencyManagement/Providers/AdminDashboardServiceProvider.php (2)
7-7: LGTM! Import is properly namespaced and positioned.The ProFeatures class import follows the established pattern and is correctly positioned with other dashboard page imports.
23-23: LGTM! Service registration follows established patterns.The ProFeatures class is correctly added to the services array, ensuring it will be registered with the dependency injection container alongside other dashboard pages.
src/ProFeatures/index.tsx (1)
11-19: LGTM! Well-structured route registration.The route registration implementation is clean and follows WordPress patterns properly. The use of
satisfies DokanAdminRouteensures type safety while maintaining the correct structure.includes/Admin/Dashboard/Pages/ProFeatures.php (2)
21-28: LGTM! Proper menu configuration.The menu configuration follows WordPress standards with proper translation, capability handling, and positioning. The position value of 99 ensures it appears at the end of the menu as expected for a Pro Features page.
66-78: LGTM! Proper asset registration.The script and style registration follows WordPress best practices with proper dependency management, versioning, and loading strategies. The deferred loading strategy is appropriate for dashboard functionality.
| function ProFeatures() { | ||
| return ( | ||
| <div> | ||
| <h1 className="text-[#e3a333]">Hello From ProFeatures.tsx 🔥</h1> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
This appears to be placeholder content.
The current implementation displays a placeholder message. Ensure this gets replaced with actual Pro Features content before merging to production.
🤖 Prompt for AI Agents
In src/ProFeatures/ProFeatures.tsx at line 4, the current heading is placeholder
content. Replace the placeholder message with the actual Pro Features content
that should be displayed in this component before merging to production.
| public function register(): void { | ||
| $asset_file = include DOKAN_DIR . '/assets/js/dokan-pro-features.asset.php'; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for asset file inclusion.
The asset file inclusion should have error handling to prevent fatal errors if the file doesn't exist.
- public function register(): void {
- $asset_file = include DOKAN_DIR . '/assets/js/dokan-pro-features.asset.php';
+ public function register(): void {
+ $asset_file_path = DOKAN_DIR . '/assets/js/dokan-pro-features.asset.php';
+
+ if ( ! file_exists( $asset_file_path ) ) {
+ return;
+ }
+
+ $asset_file = include $asset_file_path;
+
+ if ( ! is_array( $asset_file ) || ! isset( $asset_file['dependencies'], $asset_file['version'] ) ) {
+ return;
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| public function register(): void { | |
| $asset_file = include DOKAN_DIR . '/assets/js/dokan-pro-features.asset.php'; | |
| public function register(): void { | |
| $asset_file_path = DOKAN_DIR . '/assets/js/dokan-pro-features.asset.php'; | |
| if ( ! file_exists( $asset_file_path ) ) { | |
| return; | |
| } | |
| $asset_file = include $asset_file_path; | |
| if ( ! is_array( $asset_file ) || ! isset( $asset_file['dependencies'], $asset_file['version'] ) ) { | |
| return; | |
| } |
🤖 Prompt for AI Agents
In includes/Admin/Dashboard/Pages/ProFeatures.php around lines 63 to 65, the
code includes an asset file without checking if the file exists, which can cause
a fatal error if the file is missing. Add error handling by verifying the file's
existence before including it, and handle the case where the file is not found
gracefully, such as logging an error or providing a fallback to prevent fatal
errors.
|
@Wasi-Ur-Rahman vai i have setup the page and component You can go with |
All Submissions:
Changes proposed in this Pull Request:
Related Pull Request(s)
Closes
How to test the changes in this Pull Request:
Changelog entry
Title
Detailed Description of the pull request. What was previous behaviour
and what will be changed in this PR.
Before Changes
Describe the issue before changes with screenshots(s).
After Changes
Describe the issue after changes with screenshot(s).
Feature Video (optional)
Link of detailed video if this PR is for a feature.
PR Self Review Checklist:
FOR PR REVIEWER ONLY:
Summary by CodeRabbit
New Features
Chores