EventTicketsDescription.tsx
2 years ago
EventTicketsHeader.tsx
1 year ago
EventTicketsList.tsx
1 year ago
EventTicketsListItem.tsx
1 year ago
types.ts
1 year ago
EventTicketsListItem.tsx
49 lines
| 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 | export default function EventTicketsListItem({ticketType, currency, currencyRate, selectedTickets, handleSelect}) { |
| 7 | const formatter = useCurrencyFormatter(currency); |
| 8 | const ticketPrice = |
| 9 | ticketType.price > 0 ? formatter.format((Number(ticketType.price) * currencyRate) / 100) : __('Free', 'give'); |
| 10 | const remainingTickets = ticketType.ticketsAvailable - selectedTickets; |
| 11 | |
| 12 | const handleButtonClick = (quantity) => (e) => { |
| 13 | e.preventDefault(); |
| 14 | handleSelect(quantity); |
| 15 | }; |
| 16 | |
| 17 | return ( |
| 18 | <div className={'givewp-event-tickets__tickets__ticket'} key={ticketType.id}> |
| 19 | <div className={'givewp-event-tickets__tickets__ticket__description'}> |
| 20 | <h5>{ticketType.title}</h5> |
| 21 | <p>{ticketPrice}</p> |
| 22 | <p>{ticketType.description}</p> |
| 23 | </div> |
| 24 | <div className={'givewp-event-tickets__tickets__ticket__quantity'}> |
| 25 | {remainingTickets > 0 ? ( |
| 26 | <> |
| 27 | <div className={'givewp-event-tickets__tickets__ticket__quantity__input'}> |
| 28 | <button onClick={handleButtonClick(selectedTickets - 1)}> |
| 29 | <Icon icon={minus} /> |
| 30 | </button> |
| 31 | <input type="text" value={selectedTickets} /> |
| 32 | <button onClick={handleButtonClick(selectedTickets + 1)}> |
| 33 | <Icon icon={plus} /> |
| 34 | </button> |
| 35 | </div> |
| 36 | <p className={'givewp-event-tickets__tickets__ticket__quantity__availability'}> |
| 37 | {remainingTickets} {__('remaining', 'give')} |
| 38 | </p> |
| 39 | </> |
| 40 | ) : ( |
| 41 | <span className={'givewp-event-tickets__tickets__ticket__quantity__sold-out'}> |
| 42 | {__('Sold out', 'give')} |
| 43 | </span> |
| 44 | )} |
| 45 | </div> |
| 46 | </div> |
| 47 | ); |
| 48 | } |
| 49 |