Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: React Skeleton #2403

Open
wants to merge 29 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a2701f5
feat: React Skeleton
shohag121 Oct 17, 2024
e931d06
update: header footer customization support added
shohag121 Oct 18, 2024
057a92f
update: blank title markup support added
shohag121 Oct 18, 2024
0077f78
Feat: Add REST API endpoint for vendor-specific customer search
mralaminahamed Oct 21, 2024
3d4d19c
Added router context support. (#2407)
Aunshon Oct 21, 2024
9beb3b3
update: header layout.
shohag121 Oct 22, 2024
15994f8
Merge remote-tracking branch 'upstream/update/vendor-dashboard-struct…
shohag121 Oct 22, 2024
c27f504
Updated react router props
Aunshon Oct 22, 2024
c295722
Merge remote-tracking branch 'origin/update/vendor-dashboard-structur…
Aunshon Oct 22, 2024
0b1ce02
update: `useNavigate` send as fillProps for `dokan-header-actions`
shohag121 Oct 22, 2024
25b4a1a
feat: test case for Customer API
mralaminahamed Oct 23, 2024
c56dacb
feat: and more callback and permission for crud endpoints and test ca…
mralaminahamed Oct 23, 2024
e59521e
Country and Continent api added.
Aunshon Oct 23, 2024
e6bf1ec
update: DokanToaster Support Added
shohag121 Oct 24, 2024
8b2b753
Merge remote-tracking branch 'refs/remotes/mralaminahamed/feat/custom…
Aunshon Oct 25, 2024
a064fe7
Add new endpoints to order and product api
Aunshon Nov 6, 2024
322dc62
Merge remote-tracking branch 'upstream/develop' into update/vendor-da…
shohag121 Nov 11, 2024
c9478eb
Merge branch 'refs/heads/develop' into update/vendor-dashboard-structure
Aunshon Nov 20, 2024
46bcda5
Add register woocommerce script
Aunshon Nov 25, 2024
5f7ea35
Merge branch 'refs/heads/develop' into update/vendor-dashboard-structure
MdAsifHossainNadim Nov 29, 2024
16f8a1d
Merge branch 'refs/heads/develop' into update/vendor-dashboard-structure
MdAsifHossainNadim Nov 29, 2024
c8719b5
update: Vendor dashboard menu override for react templates based on T…
shohag121 Dec 6, 2024
d045a63
Merge remote-tracking branch 'origin/update/vendor-dashboard-structur…
MdAsifHossainNadim Dec 9, 2024
44370c8
Merge branch 'develop' into update/vendor-dashboard-structure
shohag121 Dec 9, 2024
2585e5b
Merge remote-tracking branch 'origin/update/vendor-dashboard-structur…
MdAsifHossainNadim Dec 10, 2024
125f1b7
update: secondary tertiary button support added
shohag121 Dec 10, 2024
66f84ea
Merge remote-tracking branch 'origin/update/vendor-dashboard-structur…
MdAsifHossainNadim Dec 11, 2024
3e3ddd0
enhance: update page heading ui.
MdAsifHossainNadim Dec 17, 2024
198afb2
enhance: Seperate dokan rest controller for role-wise API implementat…
MdAsifHossainNadim Dec 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions base-tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import {
scopedPreflightStyles,
isolateInsideOfContainer,
} from 'tailwindcss-scoped-preflight';

const rootClass = '.dokan-layout'; //We will use this class to scope the styles.

/** @type {import('tailwindcss').Config} */
const baseConfig = {
important: rootClass,
content: [ './src/**/*.{js,jsx,ts,tsx}', '!./**/*.asset.php' ],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Use 'exclude' option instead of negation in 'content' array

In line 11, the content array includes a negation pattern '!./**/*.asset.php'. Tailwind CSS does not support negation patterns in the content array. Instead, you should use the exclude option to exclude files or directories.

Apply this diff to correct the configuration:

 const baseConfig = {
     important: rootClass,
-    content: [ './src/**/*.{js,jsx,ts,tsx}', '!./**/*.asset.php' ],
+    content: [ './src/**/*.{js,jsx,ts,tsx}' ],
+    exclude: [ './**/*.asset.php' ],
     theme: {

Committable suggestion was skipped due to low confidence.

theme: {
extend: {
backgroundColor: {
dokan: {
sidebar: {
DEFAULT:
'var(--dokan-sidebar-background-color, #F05025)',
hover: 'var(--dokan-sidebar-hover-background-color, #F05025)',
},
btn: {
DEFAULT:
'var(--dokan-button-background-color, #F05025)',
hover: 'var(--dokan-button-hover-background-color, #F05025)',
secondary: {
DEFAULT:
'var(--dokan-button-secondary-background-color, var(--dokan-button-text-color))',
hover: 'var(--dokan-button-secondary-hover-background-color, var(--dokan-button-background-color))',
},
tertiary: {
DEFAULT:
'var(--dokan-button-tertiary-background-color, #00000000)',
hover: 'var(--dokan-button-tertiary-hover-background-color, var(--dokan-button-text-color))',
},
},
},
},
textColor: {
dokan: {
sidebar: {
DEFAULT: 'var(--dokan-sidebar-text-color, #CFCFCF)',
hover: 'var(--dokan-sidebar-hover-text-color, #ffffff)',
},
btn: {
DEFAULT: 'var(--dokan-button-text-color, #ffffff)',
hover: 'var(--dokan-button-hover-text-color, #ffffff)',
secondary: {
DEFAULT:
'var(--dokan-button-secondary-text-color, var(--dokan-button-background-color))',
hover: 'var(--dokan-button-secondary-hover-text-color, var(--dokan-button-text-color))',
},
tertiary: {
DEFAULT:
'var(--dokan-button-tertiary-text-color, var(--dokan-button-background-color))',
hover: 'var(--dokan-button-tertiary-hover-text-color, var(--dokan-button-background-color))',
},
},
},
},
borderColor: {
dokan: {
btn: {
DEFAULT: 'var(--dokan-button-border-color, #F05025)',
hover: 'var(--dokan-button-hover-border-color, #F05025)',
secondary: {
DEFAULT:
'var(--dokan-button-secondary-border-color, var(--dokan-button-border-color))',
hover: 'var(--dokan-button-secondary-hover-border-color, var(--dokan-button-border-color))',
},
tertiary: {
DEFAULT:
'var(--dokan-button-tertiary-border-color, #00000000)',
hover: 'var(--dokan-button-tertiary-hover-border-color, var(--dokan-button-border-color))',
},
},
},
},
colors: {
primary: 'var(--dokan-button-background-color, #F05025)',
dokan: {
sidebar: 'var(--dokan-button-background-color, #1B233B)',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Potential typo in 'sidebar' color variable

In line 51, the sidebar color is set to 'var(--dokan-button-background-color, #1B233B)'. This seems inconsistent with the variable naming convention used elsewhere. Should it be 'var(--dokan-sidebar-background-color, #1B233B)' to match the sidebar background color variable used in the backgroundColor section?

Apply this diff to correct the variable name:

                     sidebar: 'var(--dokan-button-background-color, #1B233B)',
+                    sidebar: 'var(--dokan-sidebar-background-color, #1B233B)',
📝 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.

Suggested change
sidebar: 'var(--dokan-button-background-color, #1B233B)',
sidebar: 'var(--dokan-sidebar-background-color, #1B233B)',

btn: 'var(--dokan-button-background-color, #F05025)',
},
},
},
},
plugins: [
scopedPreflightStyles( {
isolationStrategy: isolateInsideOfContainer( rootClass, {} ),
} ),
require( '@tailwindcss/typography' ),
require( '@tailwindcss/forms' ),
],
};

module.exports = baseConfig;
164 changes: 164 additions & 0 deletions docs/feature-override/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
# How to define a menu is available in `React` and its `PHP` override information.

- [Introduction](#introduction)
- [1. Declare a menu is available in `React`.](#1-declare-a-menu-is-available-in-react)
- [Declare `React` menu in **Dokan Lite.**](#declare-react-menu-in-dokan-lite)
- [Declare `React` menu in **Dokan Pro** or **External Plugin**.](#declare-react-menu-in-dokan-pro-or-external-plugin)
- [2. Declare the Override templates for a React route.](#2-declare-the-override-templates-for-a-react-route)
- [Define the override templates for a React route in Dokan Lite.](#define-the-override-templates-for-a-react-route-in-dokan-lite)
- [Define the override templates for a React route in **Dokan Pro** or **External Plugin**.](#define-the-override-templates-for-a-react-route-in-dokan-pro-or-external-plugin)
- [Define the override templates array structure.](#define-the-override-templates-array-structure)
- [Manual Override from External Plugin](#manual-override-from-external-plugin)

## Introduction
This document will help you to define a menu is available in `React` and its `PHP` override information.


## 1. Declare a menu is available in `React`.
To declare a menu is available in `React`, you need to define `route` property during the menu registration.

### Declare `React` menu in **Dokan Lite**.
```php
// includes/functions-dashboard-navigation.php#L27-L66
$menus = [
'dashboard' => [
'title' => __( 'Dashboard', 'dokan-lite' ),
'icon' => '<i class="fas fa-tachometer-alt"></i>',
'url' => dokan_get_navigation_url(),
'pos' => 10,
'permission' => 'dokan_view_overview_menu',
'react_route' => '/', // <-- Define the route here
],
'products' => [
'title' => __( 'Products', 'dokan-lite' ),
'icon' => '<i class="fas fa-briefcase"></i>',
'url' => dokan_get_navigation_url( 'products' ),
'pos' => 30,
'permission' => 'dokan_view_product_menu',
'react_route' => 'products', // <-- Define the route here
],
'orders' => [
'title' => __( 'Orders', 'dokan-lite' ),
'icon' => '<i class="fas fa-shopping-cart"></i>',
'url' => dokan_get_navigation_url( 'orders' ),
'pos' => 50,
'permission' => 'dokan_view_order_menu',
'react_route' => 'orders', // <-- Define the route here
],
'withdraw' => [
'title' => __( 'Withdraw', 'dokan-lite' ),
'icon' => '<i class="fas fa-upload"></i>',
'url' => dokan_get_navigation_url( 'withdraw' ),
'pos' => 70,
'permission' => 'dokan_view_withdraw_menu',
],
'settings' => [
'title' => __( 'Settings', 'dokan-lite' ),
'icon' => '<i class="fas fa-cog"></i>',
'url' => dokan_get_navigation_url( 'settings/store' ),
'pos' => 200,
],
];
```
In the above example, the `route` property is defined for each menu which we are indicating that the react route is available.
This will be used to determine if the menu is pointing to the react Application or to the Legacy PHP Route.

The `route` property should be the same as the route defined in the `React` application in Router Array.

It is important to note that the `route` property should be defined for the menu which is available in the `React` application.
If the `route` key is not defined for the menu, then the menu will be considered as a legacy menu and will be rendered using the PHP template.


### Declare `React` menu in **Dokan Pro** or **External Plugin**.

```php
add_filter( 'dokan_get_dashboard_nav', function ( $menus ) {
$menus['products'] = [
'title' => __( 'Products', 'dokan-lite' ),
'icon' => '<i class="fas fa-briefcase"></i>',
'url' => dokan_get_navigation_url( 'products' ),
'pos' => 30,
'permission' => 'dokan_view_product_menu',
'react_route' => 'products', // <-- Define the route here
];

return $menus;
} );
```


## 2. Declare the Override templates for a React route.
If you are writing a new feature or modifying an existing feature in the `React` application, you do not need to define the override templates for the `React` route.
But if you are modifying or migrating an existing feature written in PHP to the `React` application and you want that if some of the PHP template is overridden by the existing PHP template then the legacy PHP page will be displayed, then you need to define the override templates for the `React` route.
### Define the override templates for a React route in Dokan Lite.
```php
// VendorNavMenuChecker.php#L13-L26
protected array $template_dependencies = [
'' => [
[ 'slug' => 'dashboard/dashboard' ],
[ 'slug' => 'dashboard/orders-widget' ],
[ 'slug' => 'dashboard/products-widget' ],
],
'products' => [
[ 'slug' => 'products/products' ],
[
'slug' => 'products/products',
'name' => 'listing',
],
],
];
```

In the above example, the `template_dependencies` property is defined for each route which we are indicating that the override templates are available for the route. This will be used to determine if the override templates are available for the route or not.

### Define the override templates for a React route in **Dokan Pro** or **External Plugin**.
From Dokan Pro, we can add dependencies by using the filter `dokan_get_dashboard_nav_template_dependency`.

```php
add_filter( 'dokan_get_dashboard_nav_template_dependency', function ( array $dependencies ) {
$dependencies['products'] = [
[ 'slug' => 'products/products' ],
[
'slug' => 'products/products',
'name' => 'listing',
],
];

return $dependencies;
} );
```
### Define the override templates array structure.
```php
/**
* @var array $template_dependencies Array of template dependencies for the route.
*/

[
'route_name' => [
[
'slug' => 'template-slug',
'name' => 'template-name' // (Optional),
'args' = [] // (Optional)
],
]
]
```

- **Slug:** The slug of the template file which is used to display the php content.
- **Name:** The name of the template file which is used to display the php content. (Optional)
- **Args:** The arguments which are passed to the template file in `dokan_get_template_part()` function. (Optional)

## Manual Override from External Plugin
If you did not override any of the template file directly but you have override functionality by using `add_action` or `add_filter` then you can forcefully override the php route and template rendering for the route by using the `dokan_is_dashboard_nav_dependency_cleared` filter hook.

```php

add_filter( 'dokan_is_dashboard_nav_dependency_cleared', function ( $is_cleared, $route ) {
if ( 'products' === $route ) {
return true;
}

return $is_cleared;
}, 10, 2 );

```
21 changes: 21 additions & 0 deletions includes/Assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

namespace WeDevs\Dokan;

use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
use WeDevs\Dokan\Admin\Notices\Helper;
use WeDevs\Dokan\ReverseWithdrawal\SettingsHelper;
use WeDevs\Dokan\ProductCategory\Helper as CategoryHelper;
Expand All @@ -15,6 +16,11 @@ class Assets {
public function __construct() {
add_action( 'init', [ $this, 'register_all_scripts' ], 10 );
add_filter( 'dokan_localized_args', [ $this, 'conditional_localized_args' ] );
add_action(
'wp_footer', function () {
echo '<div class="dokan-layout" id="headlessui-portal-root"><div></div></div>';
}
);

if ( is_admin() ) {
add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_scripts' ], 10 );
Expand Down Expand Up @@ -360,6 +366,10 @@ public function get_styles() {
'src' => DOKAN_PLUGIN_ASSEST . '/css/dokan-tailwind.css',
'version' => filemtime( DOKAN_DIR . '/assets/css/dokan-tailwind.css' ),
],
'dokan-react-frontend' => [
'src' => DOKAN_PLUGIN_ASSEST . '/css/frontend.css',
'version' => filemtime( DOKAN_DIR . '/assets/css/frontend.css' ),
],
];

return $styles;
Expand All @@ -373,6 +383,7 @@ public function get_styles() {
public function get_scripts() {
global $wp_version;

$frontend_shipping_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Correct the variable name to match the asset being loaded

The variable $frontend_shipping_asset is assigned the contents of frontend.asset.php. The name suggests it's related to shipping assets, which might be misleading in this context. To improve clarity and maintain consistent naming conventions, please rename the variable to $frontend_asset.

Apply this diff to correct the variable name:

-$frontend_shipping_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';
+$frontend_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';

Ensure to update all references to $frontend_shipping_asset accordingly.

📝 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.

Suggested change
$frontend_shipping_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';
$frontend_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';

$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
$asset_url = DOKAN_PLUGIN_ASSEST;
$asset_path = DOKAN_DIR . '/assets/';
Expand Down Expand Up @@ -567,6 +578,11 @@ public function get_scripts() {
'deps' => [ 'jquery' ],
'version' => filemtime( $asset_path . 'js/dokan-frontend.js' ),
],
'dokan-react-frontend' => [
'src' => $asset_url . '/js/frontend.js',
'deps' => $frontend_shipping_asset['dependencies'],
'version' => $frontend_shipping_asset['version'],
],
Comment on lines +581 to +585
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update variable references after renaming

Following the renaming of $frontend_shipping_asset to $frontend_asset, please update the variable references in the script registration to reflect this change.

Apply this diff to update the variable references:

 'dokan-react-frontend' => [
     'src'     => $asset_url . '/js/frontend.js',
-    'deps'    => $frontend_shipping_asset['dependencies'],
-    'version' => $frontend_shipping_asset['version'],
+    'deps'    => $frontend_asset['dependencies'],
+    'version' => $frontend_asset['version'],
 ],
📝 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.

Suggested change
'dokan-react-frontend' => [
'src' => $asset_url . '/js/frontend.js',
'deps' => $frontend_shipping_asset['dependencies'],
'version' => $frontend_shipping_asset['version'],
],
'dokan-react-frontend' => [
'src' => $asset_url . '/js/frontend.js',
'deps' => $frontend_asset['dependencies'],
'version' => $frontend_asset['version'],
],

];

return $scripts;
Expand Down Expand Up @@ -873,6 +889,11 @@ public function dokan_dashboard_scripts() {
self::load_form_validate_script();
$this->load_gmap_script();

$wc_instance = WCAdminAssets::get_instance();
$wc_instance->register_scripts();

wp_enqueue_script( 'dokan-react-frontend' );
wp_enqueue_style( 'dokan-react-frontend' );
Comment on lines +895 to +896
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Conditionally enqueue 'dokan-react-frontend' assets to optimize performance

Currently, the scripts and styles for 'dokan-react-frontend' are enqueued unconditionally in the dokan_dashboard_scripts() method. Loading these assets on pages where they are not required can negatively impact performance. Consider enqueueing these assets only when they are needed.

For example, you can modify the code to enqueue the assets conditionally:

if ( /* condition to check if the assets are needed */ ) {
    wp_enqueue_script( 'dokan-react-frontend' );
    wp_enqueue_style( 'dokan-react-frontend' );
}

Replace /* condition to check if the assets are needed */ with the appropriate conditional logic based on your application's requirements.

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
namespace WeDevs\Dokan\DependencyManagement\Providers;

use WeDevs\Dokan\DependencyManagement\BaseServiceProvider;
use WeDevs\Dokan\VendorNavMenuChecker;

class CommonServiceProvider extends BaseServiceProvider {
/**
Expand Down Expand Up @@ -65,5 +66,8 @@ public function register(): void {
$this->getContainer()
->addShared( \WeDevs\Dokan\Privacy::class, \WeDevs\Dokan\Privacy::class )
->addTag( self::TAG );
$this->getContainer()
->addShared( VendorNavMenuChecker::class, VendorNavMenuChecker::class )
->addTag( self::TAG );
}
}
Loading
Loading