enhance: Implement vendor default banner, profile image & controls. #2275
Conversation
…n vendor class & use it.
…n vendor class & use it.
…fault-banner-&-profile-image' into enhance/add-option-for-vendor-default-banner-&-profile-image
|
@tuhin480 Vhai, I think we need to improve ui in dokan pro's vendor edit page. 
|
@MdAsifHossainNadim Vai, We created this design in the cloud, so we should implement it in the plugin as well. Design link: Plugin cover image size: |
WalkthroughThe recent update focuses on enhancing store visuals by refining default image management, introducing new methods for retrieving default images, and improving customization options. These changes aim to provide a more user-friendly experience in managing store banners and avatars, ensuring a visually appealing and streamlined interface for users. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configration 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: 3
Outside diff range and nitpick comments (7)
templates/store-lists-loop.php (1)
Line range hint
59-59: Optimize the output by replacingecho sprintf(...)withprintf(...).- echo sprintf( esc_attr__( 'Rated %s out of 5', 'dokan-lite' ), number_format_i18n( $store_rating['rating'] ) ); + printf( esc_attr__( 'Rated %s out of 5', 'dokan-lite' ), number_format_i18n( $store_rating['rating'] ) );includes/Dashboard/Templates/Settings.php (6)
Line range hint
566-567: Sanitize input before use.- $opening_time = isset( $_POST['opening_time'][ $day_key ] ) ? wc_clean( wp_unslash( $_POST['opening_time'][ $day_key ] ) ) : ''; - $closing_time = isset( $_POST['closing_time'][ $day_key ] ) ? wc_clean( wp_unslash( $_POST['closing_time'][ $day_key ] ) ) : ''; + $opening_time = isset( $_POST['opening_time'][ $day_key ] ) ? sanitize_text_field( wp_unslash( $_POST['opening_time'][ $day_key ] ) ) : ''; + $closing_time = isset( $_POST['closing_time'][ $day_key ] ) ? sanitize_text_field( wp_unslash( $_POST['closing_time'][ $day_key ] ) ) : '';Ensure that all user inputs are sanitized before use to prevent security issues such as XSS attacks.
Line range hint
612-612: Sanitize address input.- $address = isset( $_POST['dokan_address'] ) ? wc_clean( wp_unslash( $_POST['dokan_address'] ) ) : $prev_dokan_settings['address']; + $address = isset( $_POST['dokan_address'] ) ? sanitize_text_field( wp_unslash( $_POST['dokan_address'] ) ) : $prev_dokan_settings['address'];It's crucial to sanitize the address input to ensure that no malicious code is injected through form submissions.
Line range hint
616-616: Sanitize phone number input.- $phone = isset( $_POST['setting_phone'] ) ? dokan_sanitize_phone_number( wp_unslash( $_POST['setting_phone'] ) ) : 'no'; + $phone = isset( $_POST['setting_phone'] ) ? sanitize_text_field( wp_unslash( $_POST['setting_phone'] ) ) : 'no';Phone numbers should be sanitized to prevent potential security risks.
Line range hint
636-636: Sanitize bank settings input.- $bank = wc_clean( wp_unslash( $_POST['settings']['bank'] ) ); + $bank = array_map('sanitize_text_field', wp_unslash( $_POST['settings']['bank'] ));Bank settings input should be sanitized to ensure data integrity and security.
Line range hint
824-824: Remove unused method parameter.- public function get_method_frontend_title( $title, $method ) { + public function get_method_frontend_title( $title ) {The
$methodparameter is not used within theget_method_frontend_titlemethod. Consider removing it to clean up the method signature.
[!TIP]
Codebase VerificationThe custom capabilities
dokan_view_store_settings_menu,dokan_view_store_social_menu, anddokan_view_store_payment_menuare used in various parts of the codebase, but there is no evidence of their registration with WordPress. This could lead to improper access control.
- includes/functions-dashboard-navigation.php: Lines where capabilities are assigned to permissions.
- includes/functions.php: Lines where capabilities are described but not registered.
- includes/Dashboard/Templates/Settings.php: Lines where capabilities are checked.
Please ensure that these custom capabilities are properly registered with WordPress using the
add_capfunction or an equivalent method.Analysis chain
Line range hint
134-134: Verify custom capabilities.Ensure that the custom capabilities used in the plugin are properly registered with WordPress. This is crucial for maintaining proper access control within the plugin.
Also applies to: 320-320, 332-332, 344-344
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that custom capabilities are registered with WordPress. # Test: Search for capability registration in the plugin. rg --type php "add_cap" | grep -E "dokan_view_store_settings_menu|dokan_view_store_social_menu|dokan_view_store_payment_menu"Length of output: 125
Script:
#!/bin/bash # Description: Search for the custom capabilities directly in the codebase to verify their registration and usage. # Search for the custom capabilities in the codebase. rg --type php "dokan_view_store_settings_menu|dokan_view_store_social_menu|dokan_view_store_payment_menu"Length of output: 1155
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
assets/images/mystery-person.jpgis excluded by!**/*.jpg
Files selected for processing (10)
- assets/src/less/store.less (1 hunks)
- includes/Admin/Settings.php (2 hunks)
- includes/Dashboard/Templates/Settings.php (1 hunks)
- includes/Vendor/Vendor.php (2 hunks)
- src/admin/components/FieldHeading.vue (2 hunks)
- src/admin/components/Fields.vue (7 hunks)
- src/admin/components/UploadImage.vue (1 hunks)
- templates/settings/store-form.php (3 hunks)
- templates/store-header.php (2 hunks)
- templates/store-lists-loop.php (3 hunks)
Files skipped from review due to trivial changes (2)
- assets/src/less/store.less
- src/admin/components/UploadImage.vue
Additional Context Used
GitHub Check Runs (1)
Run PHPCS inspection failure (18)
includes/Admin/Settings.php: [warning] 93-93:
Found unknown capability "manage_woocommerce" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Admin/Settings.php: [warning] 119-119:
Found unknown capability "manage_woocommerce" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Dashboard/Templates/Settings.php: [warning] 134-134:
Found unknown capability "dokan_view_store_settings_menu" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Dashboard/Templates/Settings.php: [warning] 320-320:
Found unknown capability "dokan_view_store_social_menu" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Dashboard/Templates/Settings.php: [warning] 332-332:
Found unknown capability "dokan_view_store_settings_menu" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Dashboard/Templates/Settings.php: [warning] 344-344:
Found unknown capability "dokan_view_store_payment_menu" in function call to current_user_can(). Please check the spelling of the capability. If this is a custom capability, please verify the capability is registered with WordPress via a call to WP_Role(s)->add_cap().
Custom capabilities can be made known to this sniff by setting the "custom_capabilities" property in the PHPCS ruleset.
includes/Dashboard/Templates/Settings.php: [failure] 566-566:
Detected usage of a non-sanitized input variable: $_POST['opening_time'][$day_key]
includes/Dashboard/Templates/Settings.php: [failure] 567-567:
Detected usage of a non-sanitized input variable: $_POST['closing_time'][$day_key]
includes/Dashboard/Templates/Settings.php: [failure] 612-612:
Detected usage of a non-sanitized input variable: $_POST['dokan_address']
includes/Dashboard/Templates/Settings.php: [failure] 616-616:
Detected usage of a non-sanitized input variable: $_POST['setting_phone']
includes/Dashboard/Templates/Settings.php: [failure] 636-636:
Detected usage of a non-sanitized input variable: $_POST['settings']['bank']
includes/Dashboard/Templates/Settings.php: [warning] 824-824:
The method parameter $method is never used
templates/store-lists-loop.php: [failure] 59-59:
Unnecessary "echo sprintf(...)" found. Use "printf(...)" instead.
Additional comments not posted (16)
src/admin/components/FieldHeading.vue (2)
15-18: Conditional rendering and new controls for default images are correctly implemented.
28-44: TherestoreDefaultImagemethod is well-implemented with user confirmation and event emission.templates/store-header.php (2)
15-15: Fetching the store banner URL using the vendor object method is correctly implemented.
52-52: Ensure the background image URL is correctly escaped to prevent XSS vulnerabilities.Verification successful
The background image URL is correctly escaped using
esc_url_raw, which is appropriate for preventing XSS vulnerabilities in this context.
templates/store-header.php:<div class="profile-info-img dummy-image" style="background-image: url(<?php esc_url_raw( $store_banner_url ); ?>);"> </div>Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the background image URL is correctly escaped. # Test: Search for the usage of `esc_url_raw` in the context of background images. Expect: Proper usage of escaping functions. rg --type php $'esc_url_raw'Length of output: 3616
templates/store-lists-loop.php (1)
15-22: Handling of default banners and conditional class application based on banner presence is correctly implemented.templates/settings/store-form.php (2)
61-69: Conditional rendering based on the presence of a banner URL is correctly implemented.
101-107: Conditional rendering based on the presence of a gravatar URL is correctly implemented.includes/Vendor/Vendor.php (3)
474-491: The implementation ofget_default_bannermethod is correct, providing a sensible default and allowing for customization through filters.
508-540: The updates toget_avatarmethod correctly implement the handling of default avatars and provide extensibility through filters. Ensure that the front-end correctly utilizes this method to display avatars.Verification successful
The
get_avatarmethod is correctly utilized in the front-end template filesstore-lists-loop.php,store-header.php, andvendor-store-info.php. The method calls are properly embedded in<img>tags and the URLs are safely escaped usingesc_url.
templates/store-lists-loop.phptemplates/store-header.phptemplates/vendor-store-info.phpScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the front-end correctly utilizes the `get_avatar` method. # Test: Search for the method usage in front-end related files. Expect: Correct usage of the method. rg --type php --files-with-matches 'get_avatar' templates/Length of output: 148
Script:
#!/bin/bash # Extract and display the relevant code snippets from the identified template files. # Display usage in store-lists-loop.php echo "Usage in store-lists-loop.php:" rg 'get_avatar' templates/store-lists-loop.php # Display usage in store-header.php echo "Usage in store-header.php:" rg 'get_avatar' templates/store-header.php # Display usage in vendor-store-info.php echo "Usage in vendor-store-info.php:" rg 'get_avatar' templates/vendor-store-info.phpLength of output: 661
439-472: The updates toget_bannermethod correctly implement the handling of default banners and provide extensibility through filters. Ensure that the front-end correctly utilizes this method to display banners.Verification successful
The
get_bannermethod is correctly utilized in the front-end templatestemplates/store-lists-loop.phpandtemplates/store-header.phpto retrieve and display the store banner URL.
templates/store-lists-loop.php: The method is used to set the$store_banner_urlvariable.templates/store-header.php: The method is used to set the$store_banner_urlvariable and directly within animgtag, with an additional check to ensure the banner exists before displaying it.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the front-end correctly utilizes the `get_banner` method. # Test: Search for the method usage in front-end related files. Expect: Correct usage of the method. rg --type php --files-with-matches 'get_banner' templates/Length of output: 116
Script:
#!/bin/bash # Extract the usage of `get_banner` in `templates/store-lists-loop.php` rg 'get_banner' templates/store-lists-loop.php # Extract the usage of `get_banner` in `templates/store-header.php` rg 'get_banner' templates/store-header.phpLength of output: 342
includes/Admin/Settings.php (2)
Line range hint
597-834: Addition of default store banner and profile picture settings.The newly added settings for default store banners and profile pictures (lines 815-834) are well-implemented. These settings include options for cropping, which aligns with the PR's objective to enhance vendor profile customization. The use of
dokan()function calls and checks foris_pro_exists()ensure compatibility with different versions of the plugin.
Line range hint
93-93: Verify custom capability 'manage_woocommerce'.The capability 'manage_woocommerce' used in
current_user_can()calls (lines 93 and 119) should be verified for registration within the plugin or WordPress core. If it's a custom capability, ensure it's properly registered to avoid potential security issues.Also applies to: 119-119
src/admin/components/Fields.vue (4)
535-535: Review the integration of theUploadImagecomponent and related data properties.The import and integration of the
UploadImagecomponent along with thecroppingWidth,croppingHeight, anddokanProExistsdata properties are correctly implemented. This setup supports the new image cropping functionality effectively.Also applies to: 546-547, 568-569, 576-576
595-599: Ensure default restoration functionality is correctly triggered.The method
dokanRestoreDefaultis designed to reset fields to their default values. It's crucial to verify that this functionality is correctly triggered across all relevant fields to ensure consistent behavior.Verification successful
The search results indicate that the
dokanRestoreDefaultevent is registered within thesrc/admin/components/Fields.vuefile. However, to ensure that this functionality is correctly triggered across all relevant fields, we need to verify where and how this event is emitted within the codebase.
The search results indicate that there are no direct emissions of the
dokanRestoreDefaultevent found in the codebase. This could mean that the event is either emitted indirectly or not at all, which requires further investigation to ensure the functionality is correctly implemented.To gather more information, we should search for any indirect references or methods that might be responsible for emitting this event.
The search results show that the
dokanRestoreDefaultevent is emitted in thesrc/admin/components/FieldHeading.vuefile. This confirms that the event is indeed being triggered within the codebase.
src/admin/components/Fields.vue: Registers thedokanRestoreDefaultevent.src/admin/components/FieldHeading.vue: Emits thedokanRestoreDefaultevent.This indicates that the functionality for restoring default values is correctly implemented and triggered.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for the usage of 'dokanRestoreDefault' across the component to ensure it's correctly implemented. # Test: Search for the method usage. Expect: Consistent usage across the component. rg --type vue $'dokanRestoreDefault' src/admin/components/Fields.vueLength of output: 95
Script:
#!/bin/bash # Description: Check for the usage of 'dokanRestoreDefault' across the component to ensure it's correctly implemented. # Test: Search for the method usage. Expect: Consistent usage across the component. rg 'dokanRestoreDefault' src/admin/components/Fields.vueLength of output: 126
Script:
#!/bin/bash # Description: Check for the emission of 'dokanRestoreDefault' event across the codebase to ensure it's correctly triggered. # Test: Search for the event emission. Expect: Consistent emission across relevant components. rg '\$emit\("dokanRestoreDefault"' .Length of output: 38
Script:
#!/bin/bash # Description: Check for any indirect references or methods that might emit the 'dokanRestoreDefault' event. # Test: Search for any methods or functions that might be responsible for emitting the event. rg 'dokanRestoreDefault' .Length of output: 253
604-608: Validate dynamic adjustment of cropping dimensions based on settings.The dynamic adjustment of
croppingWidthandcroppingHeightbased on thenewValuesuggests a dependency on external settings. It's important to verify that these settings are correctly passed and updated in the component.
763-765: Confirm the correct handling of uploaded image data.The method
uploadedImageprocesses the uploaded image data. It's essential to ensure that the image data is correctly handled and validated, especially since it involves dynamic content changes.Verification successful
The
uploadedImagemethod inFields.vuecorrectly processes the uploaded image data by calling thevalidateInputDatamethod. ThevalidateInputDatamethod applies filters to the new value, ensuring proper validation and handling of the input data.
uploadedImagemethod:uploadedImage( image ) { this.fieldValue[ this.id ] = this.validateInputData( this.id, image.src, this.fieldValue[ this.id ], this.fieldData ); }
validateInputDatamethod:validateInputData( name, newValue, oldValue, fieldData ) { return dokan.hooks.applyFilters( 'dokanFieldComponentInputValue', newValue, oldValue, name, fieldData.is_lite ?? false ); }The
validateInputDatamethod ensures that the new value (in this case,image.src) is processed through thedokan.hooks.applyFiltersfunction, which applies necessary filters for validation.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the handling of uploaded image data to ensure it's processed correctly. # Test: Check for the correct processing and validation of image data. rg --type vue $'uploadedImage' src/admin/components/Fields.vueLength of output: 89
Script:
#!/bin/bash # Locate the `uploadedImage` method in the `Fields.vue` file ast-grep --lang vue --pattern $'uploadedImage($_) { $$$ }' src/admin/components/Fields.vue # Locate the `validateInputData` method in the `Fields.vue` file ast-grep --lang vue --pattern $'validateInputData($_, $_, $_, $_) { $$$ }' src/admin/components/Fields.vueLength of output: 413
Script:
#!/bin/bash # Locate the `uploadedImage` method in the `Fields.vue` file rg 'uploadedImage' src/admin/components/Fields.vue # Locate the `validateInputData` method in the `Fields.vue` file rg 'validateInputData' src/admin/components/Fields.vueLength of output: 1013
Script:
#!/bin/bash # Extract the full implementation of the `uploadedImage` method in the `Fields.vue` file rg -A 5 'uploadedImage( image ) {' src/admin/components/Fields.vue # Extract the full implementation of the `validateInputData` method in the `Fields.vue` file rg -A 10 'validateInputData( name, newValue, oldValue, fieldData ) {' src/admin/components/Fields.vueLength of output: 464
Script:
#!/bin/bash # Extract the full implementation of the `uploadedImage` method in the `Fields.vue` file rg -A 5 'uploadedImage\( image \) \{' src/admin/components/Fields.vue # Extract the full implementation of the `validateInputData` method in the `Fields.vue` file rg -A 10 'validateInputData\( name, newValue, oldValue, fieldData \) \{' src/admin/components/Fields.vueLength of output: 902
| <template v-if="'croppable_image' === fieldData.type"> | ||
| <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']"> | ||
| <fieldset> | ||
| <FieldHeading :fieldData="fieldData"></FieldHeading> | ||
| <div class="field add_files"> | ||
| <label :style="{ maxWidth: fieldData.render_width + 'px' }" :for="sectionId + '[' + fieldData.name + ']'"> | ||
| <UploadImage | ||
| :croppingWidth="parseInt( croppingWidth )" | ||
| :croppingHeight="parseInt( croppingHeight )" | ||
| :src="fieldValue[fieldData.name]" | ||
| @uploadedImage="uploadedImage" | ||
| :showButton="false" /> | ||
| </label> | ||
| </div> | ||
| </fieldset> | ||
| <p v-if="hasError( fieldData.name )" class="dokan-error"> | ||
| {{ getError( fieldData.label ) }} | ||
| </p> | ||
| </div> | ||
| </template> |
There was a problem hiding this comment.
Add handling for missing or invalid image data in the croppable_image field.
The current implementation does not handle cases where the image data might be missing or invalid. It's important to ensure robustness by adding error handling for these scenarios.
+ if (!fieldValue[fieldData.name]) {
+ console.error('Invalid or missing image data');
+ return;
+ }Committable suggestion was skipped due low confidence.
| $current_user = dokan_get_current_user_id(); | ||
| $profile_info = dokan_get_store_info( $current_user ); | ||
|
|
||
| dokan_get_template_part( | ||
| 'settings/store-form', '', [ | ||
| 'current_user' => $currentuser, | ||
| 'current_user' => $current_user, |
There was a problem hiding this comment.
Ensure proper sanitization and escaping of user data.
The method load_store_content retrieves user IDs and store information but does not explicitly sanitize the $current_user variable before using it. Consider sanitizing this variable to prevent security vulnerabilities.
| $current_user = dokan_get_current_user_id(); | ||
| $profile_info = dokan_get_store_info( $current_user ); |
There was a problem hiding this comment.
Refactor variable names for consistency.
- public $currentuser;
+ public $current_user;This change aligns the variable name with WordPress coding standards, which recommend using underscores in variable names for better readability.
Committable suggestion was skipped due low confidence.
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
assets/images/default-store-banner.pngis excluded by!**/*.pngassets/images/mystery-person.jpgis excluded by!**/*.jpg
Files selected for processing (2)
- src/admin/components/UploadImage.vue (1 hunks)
- src/admin/pages/Vendors.vue (1 hunks)
Files skipped from review due to trivial changes (1)
- src/admin/pages/Vendors.vue
Files skipped from review as they are similar to previous changes (1)
- src/admin/components/UploadImage.vue
All Submissions:
Changes proposed in this Pull Request:
Related Pull Request(s)
Implement vendor default banner, profile image & controls.
Closes
How to test the changes in this Pull Request:
Video Guidance: Link
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
Bug Fixes
Enhancements
Style