[Enhancement] CheckoutProduct has no "Remove from basket" button — users can't remove items

[saismrutiranjan18]

Problem

Once an item is added to the basket, there is no way to remove it from
the Checkout page. CheckoutProduct.js renders each item but has no
remove button. The REMOVE_FROM_BASKET action type is either missing
from reducer.js or exists but is never dispatched from the UI.

Steps to Reproduce

1. Add any item to basket via "Add to Basket" button
2. Navigate to /checkout
3. Observe: no remove/delete button on any basket item
4. The only way to empty the basket is to complete a payment

Expected Behaviour

Each item in the checkout should have a "Remove from Basket" button.

Fix — reducer.js

case 'REMOVE_FROM_BASKET': {
  const index = state.basket.findIndex(item => item.id === action.id);
  let newBasket = [...state.basket];
  if (index >= 0) {
    newBasket.splice(index, 1);
  } else {
    console.warn(`Item ${action.id} not found in basket`);
  }
  return { ...state, basket: newBasket };
}

Fix — CheckoutProduct.js

const [{ basket }, dispatch] = useStateValue();

const removeFromBasket = () => {
  dispatch({
    type: 'REMOVE_FROM_BASKET',
    id: id,
  });
};

// Add to JSX:
<button onClick={removeFromBasket} className="checkout-product__remove">
  Remove from Basket
</button>

Why this matters

Without this, users who accidentally add the wrong item — or add
duplicates — have no recourse short of completing a payment to trigger
EMPTY_BASKET.