src/admin/dashboard/pages/vendor-create-edit/Form.tsx (5)

54-56: Don't freeze useSelect with an empty deps array.

The empty dependency array prevents this selector from re-rendering when errors change in the store.

-    const errors: String[] = useSelect( ( select ) => {
-        return select( store ).getCreateOrEditVendorErrors();
-    }, [] );
+    const errors: String[] = useSelect( ( select ) =>
+        select( store ).getCreateOrEditVendorErrors()
+    );

---

193-207: Extract UI flags from the Vendor object.

Ephemeral flags like storeSearchText, userSearchText, and userEmailText are stored in the Vendor object and may leak into API payloads. Move them to component state (e.g., useState) or a dedicated UI slice.

Example refactor:

const [availability, setAvailability] = useState({
    store: '',
    username: '',
    email: ''
});

// Then use:
setAvailability(prev => ({ ...prev, store: 'searching' }));
// instead of:
setData('storeSearchText', 'searching', updatedData);

Also applies to: 214-226, 235-248

---

251-260: Guard against missing window.dokanAdminDashboard.countries.

If dokanAdminDashboard or countries is not bootstrapped, Object.keys() will throw.

     const getCountries = () => {
         // @ts-ignore
-        const dokanCountries = window?.dokanAdminDashboard.countries;
+        const dokanCountries = window?.dokanAdminDashboard?.countries || {};
         return Object.keys( dokanCountries ).map( ( key ) => {
             return {
                 label: dokanCountries[ key ],
                 value: key,
             };
         } );
     };

---

586-591: Set media IDs to zero or undefined, not empty strings.

gravatar_id is a number field; setting it to an empty string breaks type/API expectations.

                                                 setCreateOrEditVendor( {
                                                     ...vendor,
                                                     gravatar: '',
-                                                    // @ts-ignore
-                                                    gravatar_id: '',
+                                                    gravatar_id: 0,
                                                 } )

Also applies to: 654-660 (banner_id)

---

918-921: Fix phone sanitization regex.

Double-escaped backslashes erroneously allow backslash characters. Use a clean whitelist.

                                         setData(
                                             'phone',
                                             e.target.value.replace(
-                                                /[^0-9\\.\-\_\(\)\+]+/g,
+                                                /[^0-9.\-_()+]+/g,
                                                 ''
                                             )
                                         );

src/admin/dashboard/pages/vendor-create-edit/Form.tsx (1)

861-866: Simplify the password auto-generation logic.

The ternary with an empty arrow function is confusing. Simplify to a clear conditional.

                                             onFocus={ () => {
-                                                // @ts-ignore
-                                                // eslint-disable-next-line no-unused-expressions
-                                                ! vendor?.user_pass
-                                                    ? generatePassword()
-                                                    : () => {};
+                                                if ( ! vendor?.user_pass ) {
+                                                    generatePassword();
+                                                }
                                             } }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/admin/dashboard/pages/vendor-create-edit/Form.tsx (7)

54-56: Remove the empty deps array from useSelect.

Passing [] as the second argument freezes the subscription and prevents re-renders when store state changes, so errors won't update in the UI.

Apply this diff:

-    const errors: String[] = useSelect( ( select ) => {
-        return select( store ).getCreateOrEditVendorErrors();
-    }, [] );
+    const errors: String[] = useSelect( ( select ) =>
+        select( store ).getCreateOrEditVendorErrors()
+    );

---

109-126: Replace makePassword with cryptographically secure password generation.

The current implementation has critical security flaws:

• Math.random() is not cryptographically secure.
• Line 117 incorrectly uses len (25) instead of lowerCaseChars.length (26), biasing character selection.
• The concatenation pattern is predictable and doesn't ensure uniform distribution.

Use the Web Crypto API:

-    const makePassword = ( len = 25 ) => {
-        const lowerCaseChars = 'abcdefghijklmnopqurstuvwxyz';
-        const upperCaseChars = 'ABCDEFGHIJKLMNOPQURSTUVWXYZ';
-        const specialChars = '!@#$%^&*()';
-        let randomChars = '';
-
-        for ( let i = 0; i <= len; i++ ) {
-            const mixUp =
-                lowerCaseChars[ Math.floor( Math.random() * len ) ] +
-                upperCaseChars[ Math.floor( Math.random() * 10 ) ] +
-                specialChars[
-                    Math.floor( Math.random() * specialChars.length )
-                ];
-            randomChars += mixUp;
-        }
-
-        return randomChars.slice( -len );
-    };
+    const makePassword = ( len = 25 ) => {
+        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
+        const array = new Uint8Array( len );
+        window.crypto.getRandomValues( array );
+        return Array.from( array, ( byte ) => chars[ byte % chars.length ] ).join( '' );
+    };

---

188-207: Move ephemeral UI flag storeSearchText out of the Vendor object.

storeSearchText is a transient UI state ('searching', 'available', 'not-available') that should not be stored in the Vendor payload. Extract it into component state or a dedicated UI slice to prevent it from leaking into API calls.

Refactor to use useState:

+    const [ storeAvailability, setStoreAvailability ] = useState( '' );
...
     const checkStore = async ( storeName, updatedData = null ) => {
         if ( ! storeName ) {
             return;
         }

-        await setData( 'storeSearchText', 'searching', updatedData );
+        setStoreAvailability( 'searching' );

         const response = await apiFetch( {
             path: addQueryArgs( 'dokan/v1/stores/check', {
                 store_slug: storeName,
             } ),
         } );

         // @ts-ignore
         if ( response.available ) {
-            await setData( 'storeSearchText', 'available', updatedData );
+            setStoreAvailability( 'available' );
         } else {
-            await setData( 'storeSearchText', 'not-available', updatedData );
+            setStoreAvailability( 'not-available' );
         }
     };

Also applies to: 209-228 (userSearchText), 230-249 (userEmailText), 526-529 (rendering storeSearchText), 784-787 (rendering userEmailText), 834-838 (rendering userSearchText)

---

251-260: Guard against missing window.dokanAdminDashboard.countries.

Line 254 will throw a runtime error if countries is undefined. Add a fallback to prevent crashes when data isn't bootstrapped.

Apply this diff:

     const getCountries = () => {
         // @ts-ignore
-        const dokanCountries = window?.dokanAdminDashboard.countries;
+        const dokanCountries = window?.dokanAdminDashboard?.countries || {};
         return Object.keys( dokanCountries ).map( ( key ) => {
             return {
                 label: dokanCountries[ key ],
                 value: key,
             };
         } );
     };

---

586-592: Set gravatar_id to 0 or undefined, not an empty string.

gravatar_id is a number field; setting it to an empty string breaks type expectations and may cause API errors.

Apply this diff:

                                            <DokanButton
                                                variant="secondary"
                                                size="sm"
                                                className="h-8 p-[10px]"
                                                onClick={ () =>
                                                    setCreateOrEditVendor( {
                                                        ...vendor,
                                                        gravatar: '',
-                                                        // @ts-ignore
-                                                        gravatar_id: '',
+                                                        gravatar_id: 0,
                                                    } )
                                                }
                                            >

Also applies to: 656-661 (banner_id)

---

920-922: Fix phone sanitization regex to remove double-escaped backslashes.

The regex uses \\ which incorrectly allows literal backslash characters in phone numbers. Use a clean whitelist without double escaping.

Apply this diff:

                                        setData(
                                            'phone',
                                            e.target.value.replace(
-                                                /[^0-9\\.\-\_\(\)\+]+/g,
+                                                /[^0-9.\-_()+]+/g,
                                                ''
                                            )
                                        );

---

1602-1615: Guard against undefined currentTab.

If tabQueryParam doesn't match any tab name in tabsData, currentTab will be undefined and line 1607 will throw a runtime error.

Apply this diff:

     const getCurrentTabComponent = () => {
         const currentTab = tabsData.find(
             ( tab ) => tab.name === tabQueryParam
         );

+        if ( ! currentTab ) {
+            return null;
+        }
+
         const TabComponent = currentTab.component;

         if ( currentTab?.renderAsFunction ) {
             return currentTab.component();
         }

         // @ts-ignore
         return <TabComponent />;
     };

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: mrabbani
PR: getdokan/dokan#2891
File: src/admin/dashboard/pages/vendors-single/InformationTabs/WithdrawTab.tsx:58-59
Timestamp: 2025-09-19T06:19:41.376Z
Learning: The Dokan codebase uses 'dokan-lite' as the text domain for WordPress internationalization (__() function calls).

src/admin/dashboard/pages/vendors-single/HeaderNavigation.tsx (2)

19-24: Add noopener,noreferrer to prevent reverse tabnabbing.

The window.open call lacks security flags to prevent the opened page from accessing window.opener. This was flagged in previous reviews but remains unfixed.

Apply this diff:

     const visitStore = () => {
-        if ( vendor ) {
-            // Implement store URL logic here
-            window.open( vendor.shop_url, '_blank' );
+        if ( vendor?.shop_url ) {
+            window.open( vendor.shop_url, '_blank', 'noopener,noreferrer' );
         }
     };

---

56-61: Disable button when shop_url is missing.

The disabled check only verifies vendor exists, not vendor.shop_url. This was flagged in previous reviews but remains unfixed. Users can click the button even when there's no URL to visit.

Apply this diff:

                     <Button
                         className="flex items-center gap-1 dokan-btn-secondary"
                         color="primary"
                         onClick={ visitStore }
-                        disabled={ ! vendor }
+                        disabled={ ! vendor?.shop_url }
                     >

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro