feat(product-options): enhance product option selectors with price formatting and sorting #47
Conversation
…rmatting and sorting - Updated ProductOptionSelectorRadio and ProductOptionSelectorSelect components to include price information (minPrice, maxPrice, exactPrice, discountPercentage). - Implemented sorting of option values by price in both selectors. - Added currencyCode prop to support dynamic currency formatting. - Refactored option value filtering to ensure unique values are displayed. - Enhanced price display logic to show ranges and discounts where applicable.
WalkthroughThe pull request updates the product option selector components and product page template to include enhanced pricing information and discount handling. Both the radio and select option components have been modified to support additional optional pricing fields and a new currency code property, which leads to changes in filtering, sorting, and formatting the option display. The product template now features improved variant selection logic and breadcrumb generation, while the product utility functions have been enhanced with detailed documentation, explicit return types, and a new method for variant selection based on user options. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OptionSelector
participant ProductTemplate
participant ProductUtility
User->>OptionSelector: Select an option (radio/select)
OptionSelector->>ProductTemplate: Emit onChange event with new value
ProductTemplate->>ProductUtility: getVariantFromSelectedOptions(selectedOptions)
ProductUtility-->>ProductTemplate: Return matching variant (or undefined)
ProductTemplate->>OptionSelector: Update component state with variant & pricing details
OptionSelector-->>User: Render updated option display (price, discount)
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances product option selectors by adding price formatting, sorting by price, discount display, and dynamic currency support while refactoring option filtering for uniqueness. Key changes include:
- Updating both selector components to include price range/discount information.
- Adding a new currencyCode prop and using a price formatting utility.
- Refactoring helper functions in the products library to support these new price features.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/storefront/app/components/product/ProductOptionSelectorSelect.tsx | Updates to sort options by price and display formatted pricing details. |
| apps/storefront/app/templates/ProductTemplate.tsx | Adjustments to default option values and option change handling with currency support. |
| apps/storefront/libs/util/products.ts | Enhancements in generating option combinations and pricing details. |
| apps/storefront/app/components/product/ProductOptionSelectorRadio.tsx | Similar price formatting and sorting logic added to the radio selector. |
Comments suppressed due to low confidence (1)
apps/storefront/app/components/product/ProductOptionSelectorRadio.tsx:78
- [nitpick] Using the index as a key may lead to rendering issues if the list is re-ordered or modified. Consider using a unique property from optionValue (e.g., optionValue.value) as the key.
key={valueIndex}
apps/storefront/app/components/product/ProductOptionSelectorSelect.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/storefront/app/components/product/ProductOptionSelectorSelect.tsx (3)
10-16: Ensure consistent typing for optional fields
Consider verifying that the data source always supplies numeric values or handle fallback for undefined to avoid runtime errors.
33-35: Duplicate filtering check
Filtering out duplicate values is good. Be sure the original data doesn't rely on repeated items for any logic.
37-43: Sorting by price
Sorting logic looks correct. Consider clarifying tie-breaking rules for identical prices if needed.apps/storefront/app/templates/ProductTemplate.tsx (2)
38-38: New imports for pricing
The additional utilitiesgetCheapestProductVariantandgetVariantFinalPricesuggest future-ready price manipulation. Ensure any exceptional cases (e.g., no variants) are handled.
173-175: Variant selection memo
Performance optimization withuseMemois good. Verify correct variant resolution when partial or unknown options are selected.apps/storefront/app/components/product/ProductOptionSelectorRadio.tsx (1)
54-117: Price & discount rendering
The logic for displaying a single price, range, or discount annotation is well done. The UI feedback for disabled state and checked items is also clear.Consider extracting price formatting into a shared helper if reused across multiple components to further streamline the radio rendering.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/storefront/app/components/product/ProductOptionSelectorRadio.tsx(1 hunks)apps/storefront/app/components/product/ProductOptionSelectorSelect.tsx(1 hunks)apps/storefront/app/templates/ProductTemplate.tsx(10 hunks)apps/storefront/libs/util/products.ts(2 hunks)
🔇 Additional comments (25)
apps/storefront/app/components/product/ProductOptionSelectorSelect.tsx (5)
2-2: Nice usage of formatPrice utility
No additional instructions needed, everything looks good.
20-20: Currency code integration
Adding thecurrencyCodeprop is consistent with the dynamic price formatting goal.
23-28: Component signature extension
Great job addingcurrencyCodeto the component signature to support price formatting.
45-71: Comprehensive price formatting
The logic constructing labels with price ranges and discounts is thorough and user-friendly.
77-77: Placeholder option
Providing a default "Select one" option is helpful for guiding users.apps/storefront/app/templates/ProductTemplate.tsx (6)
48-52: Clear JSDoc comment
The descriptive JSDoc ongetAddToCartValidatoris helpful for future maintainers.
74-78: Breadcrumb doc block
Excellent addition of a JSDoc comment for breadcrumb generation. Improves codebase clarity.
112-116: Sold-out detection doc
Clear explanation of the inventory-based sold-out logic.
130-161: Enhanced default values logic
The use ofuseMemofor constructing default option values from the first variant is efficient. Make sure the fallback logic covers edge cases when no variants or option values exist.Please confirm through tests or QA that products with zero variants do not break this logic.
180-221: Refined product option generation
Sorting and filtering logic for options based on the user’s prior selections appears well-structured. Good approach to ensuring the correct values remain available while preserving discount labeling.
394-394: Passing currency code to selector
Properly passingcurrencyCodeensures consistent display of all relevant prices.apps/storefront/app/components/product/ProductOptionSelectorRadio.tsx (6)
5-5: Import formatPrice
Nice addition for consistent price formatting in radio option labels.
11-18: Extended option values type
Adding additional price and discount fields to the option values is logical for displaying more info.
22-22: Currency code prop
IntroducingcurrencyCodefosters dynamic currency formatting for each radio option.
25-30: Component signature update
The updated signature neatly integratescurrencyCode.
35-38: Duplicate value filtering
Ensuring uniqueness prevents confusion from redundant entries.
40-45: Price-based sorting
Sorting options by ascending price is intuitive.apps/storefront/libs/util/products.ts (8)
8-15: Great addition of JSDoc comments and explicit return types!The JSDoc documentation and explicit return type for
getVariantBySelectedOptionsimprove code clarity and maintainability. This makes the function's purpose and behavior more evident to other developers.
17-27: Good refactoring of the variant matrix functionThe renamed parameter from
priceMatrixtomatrixis more appropriate, and the added explicit return ofundefinedimproves code clarity. The JSDoc comment clearly explains the function's purpose.
38-49: Improved documentation and null handling in discount calculationThe enhanced JSDoc comment and explicit return type for
selectDiscountFromVariantare good improvements. The code comment on line 47 also clarifies the early return condition.
59-75: Good addition of documentation for combinatorial logicThe JSDoc comment for the option combinations generator function helps other developers understand the purpose of this potentially complex code. The typing for the reduce accumulator in line 69 is also a good improvement.
77-102: Great improvements to the variant matrix builderThe JSDoc comment and variable name change from
priceMatrixtomatrixbetter reflect the function's purpose. The code comments also provide more clarity on what the function is doing.
104-159: Significant improvement to option filtering logicThe enhanced documentation and refactored logic in
getFilteredOptionValuesprovide a clearer approach to filtering option values. The special handling for the first option and the consideration of option sequence is a good improvement that ensures users only see valid combinations.
161-245: Well-implemented price range and discount calculationThe pricing logic has been significantly improved with proper handling of:
- Different behaviors for final vs. non-final options
- Price range calculation when multiple prices exist
- Exact price and discount percentage for final options
This enhances the user experience by providing more comprehensive pricing information.
247-271: Well-structured new variant selection functionThe new
getVariantFromSelectedOptionsfunction is a valuable addition:
- Properly handles empty selections
- Uses clear early returns
- Includes thorough documentation
- Implements efficient filtering logic to find matching variants
This will be useful for determining the exact variant that matches a user's selections.
…lect.tsx Using the logical OR operator here may wrongly fallback when aPrice is 0. Consider using the nullish coalescing operator (??) as in: 'const aPrice = a.minPrice ?? a.exactPrice ?? 0;' to correctly handle 0 values. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…rolledOptions helper function - Introduced updateControlledOptions function to streamline the logic for updating controlled options based on user selection. - Refactored handleOptionChangeBySelect and handleOptionChangeByRadio to utilize the new helper function for improved code clarity and maintainability.
…a2-starter into updated-options-logic
Summary by CodeRabbit
New Features
Bug Fixes