corrected the cards of the categories #2325
Conversation
|
@SadafKausar2025 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes in this pull request primarily focus on the Changes
Assessment against linked issues
Poem
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
hello @codervivek5 |
![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
🧹 Outside diff range and nitpick comments (1)
src/User/components/Popular_Categories/ProductGrid.jsx (1)
90-90: Improved product title styling for better text handling.The removal of the height constraint and addition of the
overflow-hiddenclass improves the handling of product titles with varying lengths. This change enhances the component's flexibility and prevents text overflow issues.Consider adding
text-ellipsisandwhitespace-nowrapclasses to truncate long titles with an ellipsis for a more consistent appearance across all product cards.-<h3 className="font-bold text-sm overflow-hidden">{product.title}</h3> +<h3 className="font-bold text-sm overflow-hidden text-ellipsis whitespace-nowrap">{product.title}</h3>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/User/components/Popular_Categories/ProductGrid.jsx (6 hunks)
🧰 Additional context used
🔇 Additional comments (4)
src/User/components/Popular_Categories/ProductGrid.jsx (4)
13-13: Improved formatting for better readability.The reformatting of the
getNewPricefunction's return statement enhances code readability without changing the logic. This is a good practice.
23-27: Improved code formatting in product mapping.The multi-line formatting of the
product.newPriceassignment and the separate line for theProductCardreturn statement enhance code readability. This change is beneficial for maintaining clean and understandable code.
67-67: Minor formatting improvement in wishlist buttons.The closing brackets for the wishlist buttons have been moved to new lines, slightly improving code readability. This change is consistent with good coding practices.
Also applies to: 76-76
92-98: Enhanced price display with improved styling.The updated price display using flexbox and the addition of the original price with a line-through style improve the visual presentation of pricing information. This change clearly shows the discount and enhances the overall user experience.
| <div className="flex h-10 gap-2"> | ||
| <button | ||
| className="mt-1 bg-[#166635ff] text-white px-4 py-2 rounded text-sm w-full hover:bg-[#3d9970ff] transition-colors disabled:opacity-45 disabled:pointer-events-none" | ||
| onClick={() => { | ||
| onAddToCart(product); | ||
| }} | ||
| disabled={cartItems.find((item) => item.id === product.id)}> | ||
| {/* <lord-icon | ||
| style={{ | ||
| height: "20px", | ||
| width: "20px", | ||
| }} | ||
| src="https://cdn.lordicon.com/pbrgppbb.json" | ||
| trigger="hover" | ||
| colors="primary:#ffffff"></lord-icon> */} | ||
| {cartItems.find((item) => item.id === product.id) | ||
| ? "Added to cart" | ||
| : "Add to Cart"} | ||
| </button> | ||
| <button | ||
| className="mt-1 bg-orange-600 text-white px-4 py-2 rounded text-sm w-full hover:bg-orange-700 transition-colors disabled:opacity-45 disabled:pointer-events-none" | ||
| onClick={() => PaymentPage} | ||
| disabled={cartItems.find((item) => item.id === product.id)}> | ||
| {cartItems.find((item) => item.id === product.id) | ||
| ? "⚡Buy Now" | ||
| : "⚡Buy Now"} | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Improved button layout with new "Buy Now" option, but potential issue in onClick handler.
The addition of a flex container for buttons and the new "⚡Buy Now" button enhances the user interface and provides a direct purchase option. However, there's a potential issue with the onClick handler of the "Buy Now" button.
- The
onClickhandler is incorrectly set toPaymentPageinstead of a function that navigates to or renders thePaymentPagecomponent. - The "Buy Now" button is disabled when the item is in the cart, which might not be the desired behavior.
Consider updating the "Buy Now" button implementation as follows:
<button
className="mt-1 bg-orange-600 text-white px-4 py-2 rounded text-sm w-full hover:bg-orange-700 transition-colors disabled:opacity-45 disabled:pointer-events-none"
- onClick={() => PaymentPage}
- disabled={cartItems.find((item) => item.id === product.id)}>
+ onClick={() => navigate('/payment', { state: { product } })}>
⚡Buy Now
</button>Also, ensure that the necessary state management for the payment process is implemented.
Committable suggestion was skipped due to low confidence.
|
Kindly add issue number |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Kindly take a look of code rabbit code... When you fix it the let me know I'll merge it |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/User/components/Popular_Categories/ProductGrid.jsx (6 hunks)
🧰 Additional context used
🔇 Additional comments (4)
src/User/components/Popular_Categories/ProductGrid.jsx (4)
13-13: Improved code formatting enhances readability.The reformatting of the
getNewPricefunction and theproduct.newPriceassignment improves code readability without changing functionality. This adheres to good coding practices.These changes make the code more maintainable and easier to understand. Good job!
Also applies to: 23-27
67-67: Improved conciseness in wishlist button handlers.The simplification of the wishlist button
onClickhandlers improves code readability.This change makes the code more maintainable and easier to understand.
Also applies to: 76-76
90-92: Verify text overflow handling for product title.The removal of the specific height constraint on the product title
h3element may affect text overflow handling.Please ensure that long product titles are displayed correctly and do not disrupt the layout. Consider adding ellipsis or other text truncation methods if necessary.
112-112: Improved button layout with flex container.The introduction of a flex container for the buttons enhances the layout and provides better control over button positioning.
This change improves the overall design and user interface of the product card.
| @@ -5,12 +5,12 @@ import { manageWishlistItem } from "../../redux/wishlist"; | |||
| import toast from "react-hot-toast"; | |||
| import { useNavigate } from "react-router-dom"; | |||
| import { FaHeart, FaRegHeart } from "react-icons/fa"; | |||
| import PaymentPage from "../../pages/Payment/Payment"; | |||
There was a problem hiding this comment.
Verify the necessity and usage of the PaymentPage import.
The PaymentPage component is imported but not visibly used in the code. This may lead to unnecessary imports and potential confusion.
Consider one of the following actions:
- If
PaymentPageis used elsewhere in this component, ensure it's properly implemented. - If it's not used, remove the unused import to keep the code clean.
Additionally, based on a previous review comment, ensure that PaymentPage is not misused in any onClick handlers. It should be used for navigation or state changes, not directly rendered in an event handler.
|
hello @codervivek5 |
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/User/components/Popular_Categories/ProductGrid.jsx (7 hunks)
🧰 Additional context used
🔇 Additional comments (1)
src/User/components/Popular_Categories/ProductGrid.jsx (1)
141-145: Consider enabling the "Buy Now" button even if the item is in the cartCurrently, the "Buy Now" button is disabled when the item is already in the cart. This may not be the desired behavior, as users might want to proceed to purchase immediately, regardless of the cart status.
| const handleBuyNow = () => { | ||
| navigate(`/payment`); | ||
| }; |
There was a problem hiding this comment.
Ensure product data is passed to the payment page
The handleBuyNow function navigates to /payment, but it's unclear how the payment page receives the product information necessary for processing the payment.
Modify the handleBuyNow function to include the product data using the state parameter of navigate:
const handleBuyNow = () => {
- navigate(`/payment`);
+ navigate(`/payment`, { state: { product } });
};Additionally, ensure that the PaymentPage component accesses the passed state correctly:
// In PaymentPage.jsx
const location = useLocation();
const { product } = location.state || {};| product.newPrice = getNewPrice( | ||
| product.discountPercentage, | ||
| product.price | ||
| ); |
There was a problem hiding this comment.
Avoid mutating product objects directly in the map function
Modifying the product object directly within the map function can lead to unintended side effects, especially if products is derived from props or state. This practice can cause unexpected bugs elsewhere in your application.
Consider creating a new object or passing the computed newPrice as a prop to ProductCard without mutating the original product object:
{products.map((product) => {
- product.newPrice = getNewPrice(
- product.discountPercentage,
- product.price
- );
- return <ProductCard key={product.id} product={product} />;
+ const newPrice = getNewPrice(
+ product.discountPercentage,
+ product.price
+ );
+ return <ProductCard key={product.id} product={{ ...product, newPrice }} />;
})}📝 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.
| product.newPrice = getNewPrice( | |
| product.discountPercentage, | |
| product.price | |
| ); | |
| const newPrice = getNewPrice( | |
| product.discountPercentage, | |
| product.price | |
| ); | |
| return <ProductCard key={product.id} product={{ ...product, newPrice }} />; |
| onClick={() => { | ||
| onAddToCart(product); // First, add the product to the cart | ||
| handleBuyNow(); // Then, navigate to the payment page | ||
| }} |
There was a problem hiding this comment.
Re-evaluate adding the product to the cart before "Buy Now"
The "Buy Now" button currently adds the product to the cart before navigating to the payment page. If the intention is to allow users to purchase the item directly without adding it to the cart, consider removing the onAddToCart(product) call.
Update the onClick handler to navigate directly to the payment page with the product data:
<button
onClick={() => {
- onAddToCart(product); // First, add the product to the cart
handleBuyNow(); // Then, navigate to the payment page
}}
className="..."
>Committable suggestion was skipped due to low confidence.
|
Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨ |
Fixes Issue #2326
Closes #2326
Changes proposed
Screenshots
before:
after:
Note to reviewers
Summary by CodeRabbit
Summary by CodeRabbit