| 1 |
import {Icon} from '@wordpress/components'; |
| 2 |
import {__} from '@wordpress/i18n'; |
| 3 |
import {plus, reset as minus} from '@wordpress/icons'; |
| 4 |
import useCurrencyFormatter from '@givewp/forms/app/hooks/useCurrencyFormatter'; |
| 5 |
|
| 6 |
/** |
| 7 |
* @since 4.3.2 include proper labeling for accessibility. update title to <p> tag. |
| 8 |
*/ |
| 9 |
export default function EventTicketsListItem({ticketType, currency, currencyRate, selectedTickets, handleSelect}) { |
| 10 |
const formatter = useCurrencyFormatter(currency); |
| 11 |
const ticketPrice = |
| 12 |
ticketType.price > 0 ? formatter.format((Number(ticketType.price) * currencyRate) / 100) : __('Free', 'give'); |
| 13 |
const remainingTickets = ticketType.ticketsAvailable - selectedTickets; |
| 14 |
|
| 15 |
const handleButtonClick = (quantity) => (e) => { |
| 16 |
e.preventDefault(); |
| 17 |
handleSelect(quantity); |
| 18 |
}; |
| 19 |
|
| 20 |
return ( |
| 21 |
<div className={'givewp-event-tickets__tickets__ticket'} key={ticketType.id}> |
| 22 |
<div className={'givewp-event-tickets__tickets__ticket__description'}> |
| 23 |
<p>{ticketType.title}</p> |
| 24 |
<p>{ticketPrice}</p> |
| 25 |
<p>{ticketType.description}</p> |
| 26 |
</div> |
| 27 |
<div className={'givewp-event-tickets__tickets__ticket__quantity'}> |
| 28 |
{remainingTickets > 0 ? ( |
| 29 |
<> |
| 30 |
<div className={'givewp-event-tickets__tickets__ticket__quantity__input'}> |
| 31 |
<button |
| 32 |
onClick={handleButtonClick(selectedTickets - 1)} |
| 33 |
aria-label={__('Decrease quantity of', 'give') + ' ' + ticketType.title} |
| 34 |
> |
| 35 |
<Icon icon={minus} /> |
| 36 |
</button> |
| 37 |
<input |
| 38 |
type="text" |
| 39 |
value={selectedTickets} |
| 40 |
aria-label={__('Ticket quantity', 'give')} |
| 41 |
/> |
| 42 |
<button |
| 43 |
onClick={handleButtonClick(selectedTickets + 1)} |
| 44 |
aria-label={__('Increase quantity of', 'give') + ' ' + ticketType.title} |
| 45 |
> |
| 46 |
<Icon icon={plus} /> |
| 47 |
</button> |
| 48 |
</div> |
| 49 |
<p |
| 50 |
className={'givewp-event-tickets__tickets__ticket__quantity__availability'} |
| 51 |
role="status" |
| 52 |
aria-live="polite" |
| 53 |
aria-label={`${remainingTickets} ${__('tickets remaining', 'give')}`} |
| 54 |
> |
| 55 |
{remainingTickets} {__('remaining', 'give')} |
| 56 |
</p> |
| 57 |
</> |
| 58 |
) : ( |
| 59 |
<span |
| 60 |
className={'givewp-event-tickets__tickets__ticket__quantity__sold-out'} |
| 61 |
role="status" |
| 62 |
aria-live="polite" |
| 63 |
> |
| 64 |
{__('Sold out', 'give')} |
| 65 |
</span> |
| 66 |
)} |
| 67 |
</div> |
| 68 |
</div> |
| 69 |
); |
| 70 |
} |
| 71 |
|
