Enhance/select email for customer without name - #177
Conversation
dev-shahed
added
Enhancement
WalkthroughA new method, Changes
Poem
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 (3)
assets/src/frontend/components/CustomerSearch.vue (3)
290-294: Helper looks good – tiny simplification availableThe logic is sound and the ternary nicely handles trimming, but a small rewrite removes one optional–chaining edge case and reads a bit cleaner:
-return (first_name?.trim() || last_name?.trim()) - ? `${(first_name || '').trim()} ${(last_name || '').trim()}`.trim() - : (email || ''); +const name = `${(first_name || '').trim()} ${(last_name || '').trim()}`.trim(); +return name ? name : (email || '');
326-331: Avoid blockingalert; use existing notification utility
window.alertfreezes the UI and feels out of place in SPA flows.
Ifweposalready has a toast / notice component (as it does elsewhere), leverage that instead.- alert( this.__( 'Customer created successfully', 'wepos' ) ); + this.$notify?.success?.( + this.__( 'Customer created successfully', 'wepos' ) + );
33-37: Search-result label can reuse the new helperTo keep the fallback logic identical between the input field and the dropdown list, consider:
- <span class="name wepos-left">{{ customer.first_name + ' ' + customer.last_name }} + <span class="name wepos-left">{{ getCustomerDisplayName(customer.first_name, customer.last_name, customer.email) }}This avoids rendering an empty space when both names are absent.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
assets/src/frontend/components/CustomerSearch.vue(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: e2e_api tests
🔇 Additional comments (1)
assets/src/frontend/components/CustomerSearch.vue (1)
297-299: Consistent usage – nice!Replacing the previous manual concatenation with
getCustomerDisplayNamekeeps the behaviour in one place and prevents future drift.
| var orderdata = JSON.parse( localStorage.getItem( 'orderdata' ) ); | ||
|
|
||
| if ( orderdata.customer_id != 'undefined' && orderdata.customer_id != 0 ) { | ||
| this.serachInput = orderdata.billing.first_name + ' ' + orderdata.billing.last_name; | ||
| this.serachInput = this.getCustomerDisplayName(orderdata.billing.first_name, orderdata.billing.last_name, orderdata.billing.email); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Same undefined-billing guard needed here
orderdata.billing is accessed directly in created(). Mirror the defensive guard added to the watcher to prevent a startup crash.
🤖 Prompt for AI Agents
In assets/src/frontend/components/CustomerSearch.vue around lines 381 to 384,
the code accesses orderdata.billing directly without checking if
orderdata.billing is defined, which can cause a startup crash. Add a defensive
check to ensure orderdata.billing exists before accessing its properties,
similar to the guard used in the watcher, to prevent errors when billing is
undefined.
| 'orderdata.customer_id'(newVal) { | ||
| this.serachInput = newVal ? this.orderdata.billing.first_name + ' ' + this.orderdata.billing.last_name : ''; | ||
| this.serachInput = newVal ? this.getCustomerDisplayName(this.orderdata.billing.first_name, this.orderdata.billing.last_name, this.orderdata.billing.email) : ''; | ||
| } | ||
|
|
||
| }, |
There was a problem hiding this comment.
Potential TypeError when orderdata.billing is missing
this.orderdata.billing is dereferenced without a null-check.
When the order arrives from an endpoint where the billing object is not yet populated, the watcher will throw (Cannot read property 'first_name' of undefined) and break reactivity.
- this.serachInput = newVal ? this.getCustomerDisplayName(this.orderdata.billing.first_name, this.orderdata.billing.last_name, this.orderdata.billing.email) : '';
+const billing = this.orderdata.billing || {};
+this.serachInput = newVal
+ ? this.getCustomerDisplayName(billing.first_name, billing.last_name, billing.email)
+ : '';📝 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.
| 'orderdata.customer_id'(newVal) { | |
| this.serachInput = newVal ? this.orderdata.billing.first_name + ' ' + this.orderdata.billing.last_name : ''; | |
| this.serachInput = newVal ? this.getCustomerDisplayName(this.orderdata.billing.first_name, this.orderdata.billing.last_name, this.orderdata.billing.email) : ''; | |
| } | |
| }, | |
| 'orderdata.customer_id'(newVal) { | |
| const billing = this.orderdata.billing || {}; | |
| this.serachInput = newVal | |
| ? this.getCustomerDisplayName(billing.first_name, billing.last_name, billing.email) | |
| : ''; | |
| } | |
| }, |
🤖 Prompt for AI Agents
In assets/src/frontend/components/CustomerSearch.vue around lines 228 to 232,
the watcher accesses this.orderdata.billing without checking if billing exists,
which can cause a TypeError if billing is undefined. To fix this, add a
null-check to ensure this.orderdata.billing is defined before accessing its
properties. If billing is missing, set this.serachInput to an empty string or a
safe default to prevent errors and maintain reactivity.
1 participant
📄 Description
This PR improves the customer search input behavior by ensuring that:
If first name and last name are missing or empty, the customer’s email is used as a fallback.
This fallback works consistently when:
A helper method
getCustomerDisplayNameis added to handle this logic in a single place, ensuring consistent formatting.🔍 Changes
getCustomerDisplayNamemethod.watchandselectCustomerto use the fallback.🧪 Testing
📌 Related Issue
https://github.com/getdokan/plugin-internal-tasks/issues/398
✅ Checklist
Summary by CodeRabbit
New Features
Refactor