Skip to content

feat: add DebouncedInput component and support for "dokan-seller-badge" panel#2974

Merged
MdAsifHossainNadim merged 7 commits intodevelopfrom
enhance/add-seller-badge-compatibility
Nov 24, 2025
Merged

feat: add DebouncedInput component and support for "dokan-seller-badge" panel#2974
MdAsifHossainNadim merged 7 commits intodevelopfrom
enhance/add-seller-badge-compatibility

Conversation

@Aunshon
Copy link
Collaborator

@Aunshon Aunshon commented Nov 11, 2025

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) (optional)
  • I've included developer documentation (optional)
  • I've added proper labels to this pull request

Related Pull Request(s)

Closes

How to test the changes in this Pull Request:

  • Steps or issue link

Changelog entry

No needed

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:

  • Code is not following code style guidelines
  • Bad naming: make sure you would understand your code if you read it a few months from now.
  • KISS: Keep it simple, Sweetie (not stupid!).
  • DRY: Don't Repeat Yourself.
  • Code that is not readable: too many nested 'if's are a bad sign.
  • Performance issues
  • Complicated constructions that need refactoring or comments: code should almost always be self-explanatory.
  • Grammar errors.

FOR PR REVIEWER ONLY:

As a reviewer, your feedback should be focused on the idea, not the person. Seek to understand, be respectful, and focus on constructive dialog.

As a contributor, your responsibility is to learn from suggestions and iterate your pull request should it be needed based on feedback. Seek to collaborate and produce the best possible contribution to the greater whole.

  • Correct — Does the change do what it’s supposed to? ie: code 100% fulfilling the requirements?
  • Secure — Would a nefarious party find some way to exploit this change? ie: everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities?
  • Readable — Will your future self be able to understand this change months down the road?
  • Elegant — Does the change fit aesthetically within the overall style and architecture?

Summary by CodeRabbit

  • New Features

    • Admin panel switcher now supports the seller badge page for easier navigation.
    • Added a reusable Debounced Input component to public components for smoother input handling.
    • Added TikTok as a supported social platform across vendor profiles and admin social settings, including an accessible TikTok icon.
  • Style

    • Introduced TikTok icon styling and layout tweaks for select inputs (dark-left-icon variant).
  • Documentation

    • Added doc example for dark background left icon on select components.

✏️ Tip: You can customize this high-level summary in your review settings.

@Aunshon Aunshon self-assigned this Nov 11, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 11, 2025

Warning

Rate limit exceeded

@MdAsifHossainNadim has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 2 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between fc9c5af and afce125.

📒 Files selected for processing (2)
  • includes/Admin/Dashboard/LegacySwitcher.php (1 hunks)
  • src/admin/panel-switcher/PanelSwitch.tsx (1 hunks)

Walkthrough

Adds legacy admin route support for dokan-seller-badge, introduces TikTok social support (data, model setter, icon, styles), re-exports a DebouncedInput component, and documents a dark-background variant for select icons.

Changes

Cohort / File(s) Summary
Legacy switcher mapping
includes/Admin/Dashboard/LegacySwitcher.php
Added 'dokan-seller-badge' => 'seller-badge' to admin URL → transient key mapping used by get_custom_transient_key.
Panel switcher
src/admin/panel-switcher/PanelSwitch.tsx
Included 'dokan-seller-badge' in supported keys so frontend recognizes that legacy route.
Component exports
src/components/index.tsx
Re-exported DebouncedInput (export { default as DebouncedInput } from './DebouncedInput').
Social platforms (frontend)
src/admin/dashboard/config/socialPlatforms.tsx, src/admin/dashboard/icons/socials/TikTok.tsx
Added TikTok platform entry and a new TikTok SVG icon component for dashboard social platform UI.
Vendor model / Social fields (PHP)
includes/Vendor/Vendor.php, includes/functions.php
Added public function set_tiktok( $value ) to Vendor and added tiktok entry to dokan_get_social_profile_fields.
Styles
assets/src/less/store.less, src/base-tailwind.scss
Added .fa-tiktok styling for seller/profile icons and a compact react-select left-icon dark-background style block.
Docs
docs/frontend/select.md
Documented "Dark background for the left icon" usage and example for Select component.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Browser as Browser
    participant Frontend as PanelSwitch (React)
    participant Backend as LegacySwitcher (PHP)

    Note over Browser,Frontend: Admin URL contains 'dokan-seller-badge'
    Browser->>Frontend: Load route with 'dokan-seller-badge'
    Frontend->>Frontend: isSupported? (supportedKeys includes 'dokan-seller-badge')
    alt supported
        Frontend->>Backend: request transient key for admin URL
        Backend-->>Frontend: returns transient key 'seller-badge'
        Frontend-->>Browser: render legacy seller-badge panel
    else not supported
        Frontend-->>Browser: fallback render
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

  • Inspect LegacySwitcher.php mapping for normalization/typos.
  • Verify PanelSwitch.tsx supportedKeys change fits routing guards and tests.
  • Confirm DebouncedInput export path and build exports.
  • Review TikTok SVG accessibility (title/aria) and CSS interactions.
  • Validate set_tiktok follows existing setter pattern and integrates with social fields.

Possibly related PRs

Suggested reviewers

  • mrabbani
  • shohag121

Poem

🐰 A hop, a badge, a brand-new tune,
TikTok colors shimmer under the moon.
Setters store links, icons hum with cheer,
Debounced inputs hush the typing near.
Little rabbit nods — the update is here.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning TikTok social platform support additions appear unrelated to the seller badge backward compatibility objective stated in linked issues. Clarify whether TikTok additions are intentional scope or should be separated into a distinct PR focusing on seller badge compatibility.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main changes: adding DebouncedInput component and dokan-seller-badge panel support.
Description check ✅ Passed The PR description includes required sections: checklists completed, related PRs, closed issues, and reviewer guidance, though test steps and before/after details are minimal.
Linked Issues check ✅ Passed Changes directly address backward compatibility for seller badge on legacy pages [#1128] through LegacySwitcher mapping and panel switcher support.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f4a7b4 and 7a87fbe.

📒 Files selected for processing (3)
  • includes/Admin/Dashboard/LegacySwitcher.php (3 hunks)
  • src/admin/panel-switcher/PanelSwitch.tsx (1 hunks)
  • src/components/index.tsx (1 hunks)
🔇 Additional comments (3)
src/admin/panel-switcher/PanelSwitch.tsx (1)

17-17: LGTM! Seller badge page support added correctly.

The addition of 'dokan-seller-badge' to the supported keys array properly enables panel switching for the seller badge page and aligns with the corresponding backend changes in LegacySwitcher.php.

includes/Admin/Dashboard/LegacySwitcher.php (1)

160-161: LGTM! Seller badge URL mapping added correctly.

The new mapping entry for 'dokan-seller-badge' => 'seller-badge' properly enables legacy URL resolution for the seller badge page and aligns with the frontend panel switcher changes.

src/components/index.tsx (1)

47-47: No issues found—DebouncedInput component is properly implemented and correctly exported.

The component exists at src/components/DebouncedInput.tsx and is well-implemented using WordPress packages and React hooks. The export in line 47 is correct and matches the component file.

@Aunshon Aunshon added Needs: Testing This requires further testing Needs: Dev Review It requires a developer review and approval Dependency With Pro labels Nov 11, 2025
@mrabbani mrabbani added Dev Review Done and removed Needs: Dev Review It requires a developer review and approval labels Nov 13, 2025
Aunshon and others added 2 commits November 18, 2025 11:26
# Conflicts:
#	src/admin/panel-switcher/PanelSwitch.tsx
* feat: add TikTok support to social profiles and dashboard

* feat: update TikTok icon SVG structure and styles for improved rendering

* feat: add TikTok icon styles to store

---------

Co-authored-by: Aunshon <32583103+Aunshon@users.noreply.github.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
includes/Vendor/Vendor.php (1)

86-90: Clean up minor style issues flagged by inspections

A few existing lines are being flagged by the inspections job and are straightforward to tidy up:

  • Constructor block:

    • Remove the blank line immediately after if ( is_numeric( $vendor ) ) {.
    • Remove the extra semicolon in get_user_by( 'id', $vendor );;.
  • __call() implementation:

    • Normalize spacing to match coding standards, e.g.:
      • str_replace( 'get_', '', $name );
      • $this->shop_data[ $function_name ] (spaces around array key).
  • is_featured():

    • Use strict comparison instead of loose:
      public function is_featured() {
          return 'yes' === get_user_meta( $this->id, 'dokan_feature_seller', true );
      }

These adjustments should satisfy the reported inspections with minimal behavioral risk.

Also applies to: 116-124, 215-216

🧹 Nitpick comments (1)
src/admin/dashboard/icons/socials/TikTok.tsx (1)

1-37: TikTok SVG icon component is consistent and accessible

The new TikTok icon component correctly reuses SocialIconProps, provides a localized default title, and exposes a className hook. The SVG structure and accessibility attributes (role="img", aria-label) look good and match typical patterns for the other social icons.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f38886 and e20748a.

📒 Files selected for processing (5)
  • assets/src/less/store.less (1 hunks)
  • includes/Vendor/Vendor.php (1 hunks)
  • includes/functions.php (1 hunks)
  • src/admin/dashboard/config/socialPlatforms.tsx (2 hunks)
  • src/admin/dashboard/icons/socials/TikTok.tsx (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/admin/dashboard/icons/socials/TikTok.tsx (1)
src/vendor-dashboard/reports/analytics/components/report-error/index.js (1)
  • title (16-19)
🪛 GitHub Actions: Inspections
includes/Vendor/Vendor.php

[error] 87-87: Blank line found at start of control structure


[warning] 89-89: Empty PHP statement detected: superfluous semicolon.


[error] 118-118: Expected 1 spaces after opening parenthesis; 0 found


[error] 124-124: Array keys must be surrounded by spaces unless they contain a string or an integer.


[error] 216-216: Loose comparisons are not allowed. Expected: ===; Found: ==


[warning] 118-118: Equals sign not aligned correctly; expected 1 space but found 2 spaces

includes/functions.php

[warning] 819-819: The method parameter $key is never used


[warning] 832-832: The method parameter $key is never used


[warning] 929-929: The method parameter $pro is never used


[warning] 1971-1971: The method parameter $args is never used


[warning] 2644-2644: The method parameter $product_id is never used


[warning] 2644-2644: The method parameter $category_id is never used

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: e2e tests (2, 3)
  • GitHub Check: e2e tests (3, 3)
  • GitHub Check: api tests (1, 1)
  • GitHub Check: e2e tests (1, 3)
🔇 Additional comments (4)
includes/functions.php (1)

2342-2345: Verify TikTok icon class mapping matches Font Awesome usage

The new tiktok social field looks consistent with other entries, but please double‑check how $fields[ $key ]['icon'] is turned into the actual <i> class. CSS targets .fa-tiktok, while this entry sets 'icon' => 'tiktok', so depending on the helper you may need either 'tiktok' (if 'fa-' is prefixed elsewhere) or 'fa-tiktok' / 'fa-brands fa-tiktok' if the value is used as‑is.

assets/src/less/store.less (1)

529-534: TikTok social icon styling is consistent

The .fa-tiktok styling aligns with the existing per-network color rules and should integrate cleanly into the store social icon list.

includes/Vendor/Vendor.php (1)

1222-1229: TikTok setter aligns with existing social setters

set_tiktok() correctly uses set_social_prop with the 'tiktok' key and esc_url_raw, staying consistent with the other social setters.

src/admin/dashboard/config/socialPlatforms.tsx (1)

11-11: TikTok platform config is well-integrated with existing social platforms

The new TikTok import and tiktok entry mirror the existing platform structure (id/key, domains, placeholder, icon/getIcon). The key name is consistent with the backend (dokan_get_social_profile_fields and Vendor::set_tiktok), so this should plug cleanly into existing forms and display components.

Also applies to: 97-106

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e20748a and f3066a1.

📒 Files selected for processing (2)
  • docs/frontend/select.md (1 hunks)
  • src/base-tailwind.scss (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: e2e tests (3, 3)
  • GitHub Check: api tests (1, 1)
  • GitHub Check: e2e tests (2, 3)
  • GitHub Check: e2e tests (1, 3)
🔇 Additional comments (1)
src/base-tailwind.scss (1)

105-113: Selector scope may affect unintended react-select UI elements; use design system color variable.

The selector .react-select__control span targets all span elements within the react-select control, not just the icon placeholder. This could inadvertently style internal UI elements (e.g., placeholder text wrapper, dropdown indicator). Additionally, the hardcoded color #EAEAEA breaks consistency with the design system approach used throughout the file (e.g., --dokan-button-background-color, --dokan-button-border-color).

Please:

  1. Verify whether the current selector scope is intentional or if it should be more specific (e.g., targeting only a particular child selector or data attribute if react-select provides one).
  2. Consider extracting #EAEAEA into a CSS custom property for consistency and maintainability.

Reference the design system pattern shown at lines 8–10 for guidance on using CSS variables.

@shohan0120 shohan0120 added 🎉 QA Approved This PR is approved by the QA team and removed Needs: Testing This requires further testing labels Nov 24, 2025
@MdAsifHossainNadim MdAsifHossainNadim merged commit 9a6cee3 into develop Nov 24, 2025
0 of 5 checks passed
@MdAsifHossainNadim MdAsifHossainNadim deleted the enhance/add-seller-badge-compatibility branch November 24, 2025 09:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants