diff --git a/src/components/sell/cart.tsx b/src/components/sell/cart.tsx index 8e01cf562df08444efc9315a0bf32681bddb4178..94189ecd752d727f719b962589865ff504584c26 100644 --- a/src/components/sell/cart.tsx +++ b/src/components/sell/cart.tsx @@ -1,8 +1,8 @@ import {Fragment, useContext, useEffect, useState} from 'react' import { Dialog, Transition } from '@headlessui/react' -import { ArrowLeftIcon, EmojiSadIcon } from '@heroicons/react/outline'; -import { XIcon } from '@heroicons/react/outline' +import { ArrowLeftIcon, EmojiSadIcon, XIcon } from '@heroicons/react/outline'; +import { XCircleIcon } from '@heroicons/react/solid'; import { cartContext } from '../../cart/CartStore'; import { updateProductQuantity } from '../../cart/CartActions'; @@ -11,6 +11,7 @@ import { sendTransaction } from '../../apis/money'; import { updateStock } from '../../apis/back'; const Cart = () => { + let [cartError, setCartError] = useState(""); const { cartState, dispatch } = useContext(cartContext); function renderPrice(price: number): string { @@ -26,6 +27,7 @@ const Cart = () => { const successTransaction = await sendTransaction(studentNumber, userName, cartState.totalPrice); if (!successTransaction) { console.error("Error during transaction with Money."); + setCartError("Error during transaction with payement server."); return; } @@ -35,6 +37,7 @@ const Cart = () => { const adhesionSuccess = await setAdhesion(studentNumber); if (!adhesionSuccess) { console.error("Error during adhesion with Student."); + setCartError("Error during adhesion with student database."); } } @@ -43,6 +46,9 @@ const Cart = () => { updateStock(product.id, -(product?.quantity ?? 1)); }); + // Reset cart error message + setCartError(""); + // Reset cart dispatch({ type: 'SET_CART', payload: [] }); } @@ -204,6 +210,18 @@ const Cart = () => { </div> </div> } + {cartError && + <div className="rounded-md bg-red-50 p-4 mt-4"> + <div className="flex"> + <div className="flex-shrink-0"> + <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" /> + </div> + <div className="ml-3"> + <h3 className="text-sm font-medium text-red-800">{cartError}</h3> + </div> + </div> + </div> + } </form> </div> </div>