web2019/static/js/shop/RFQFeedback.jsx

36 lines
1.2 KiB
JavaScript

import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import {Validation} from "./validate";
import React from "react";
export function RFQFeedback() {
const {closeRFQ, shouldShow, status} = useShopStore(state => ({
closeRFQ: state.closeRFQFeedback,
shouldShow: state.shouldShowRFQFeedback,
status: state.processingResult
}))
const ref = useClickAway((e) => {
if (e.type === "mousedown") // ignore touchstart
closeRFQ()
});
return (
<Modal show={shouldShow} animation={true} centered>
<Modal.Body ref={ref} className="rfqFeedback">
<div className="d-flex">
<div>
{status.status === Validation.OK ?
<img width="30px" src="/images/shop/icon-done.svg" alt="close"/>
: <img width="30px" src="/images/shop/icon-warning.svg" alt="close"/>
}
</div>
<div style={{'padding': '0 .5em'}}>
{status.message}
</div>
</div>
</Modal.Body>
</Modal>
)
}