Overview:

The CartLayout component is a React functional component that handles the layout and functionality for a shopping cart page. It displays a list of products in the user's cart, allowing the user to adjust product quantities, calculate the total price, and proceed to a payment page. The component integrates with a global context (ContextProvider) to manage cart data and provides a user interface to interact with the cart contents.

Imports:

• useContext, useLayoutEffect, useRef, useState: React hooks for managing state, side effects, and referencing DOM elements.
• useLocation, useNavigate: React Router hooks used to navigate between pages and access the current URL.
• ContextProvider: Custom context provider for managing cart-related operations like removing products.

State Variables:

1. quantities (useState({})):
   • Tracks the quantities of each product in the cart. The key is the product's ID, and the value is the quantity for that product.
2. toggle (useState(false)):
   • A boolean state that controls the visibility of the form input for the user's email or phone number.
3. error (useState("")):
   • Stores error messages related to form validation.
4. infoRef (useRef()):
   • A reference for accessing the input field where the user enters their email or phone number.

Functions:

1. handleDecrease(id):
   • Decreases the quantity of a specific product by 1. It ensures that the quantity doesn't go below 0.
2. handleIncrease(id):
   • Increases the quantity of a specific product by 1. It defaults to 1 if no quantity is set.
3. calculateTotalPrice(product):
   • Calculates the total price for a product by multiplying its price (offerPrice) by its quantity.
4. totalPrice:
   • A computed variable that calculates the total price of all items in the cart, based on the product prices and quantities.
5. handlePay():
   • Handles the action when the user proceeds to pay. It checks the validity of the input form (email or phone number) and navigates to the payment page. If the form input is invalid, an error message is displayed.
6. useLayoutEffect():
   • Ensures that the page scrolls to the top every time the location (URL) changes.