Merge pull request #81 from mustachebash/update/promos-meta

fixed promos sort and filtering
mustachebash · Feb 28, 2024 · 9e7a12a · 9e7a12a
2 parents 0445e5d + 4117f2e
commit 9e7a12a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
diff --git a/src/guests/components/Guest.js b/src/guests/components/Guest.js
@@ -12,6 +12,7 @@ import TicketsList from 'components/TicketsList';
 const Guest = ({ id }) => {
 	const [guest, setGuest] = useState(),
 		[event, setEvent] = useState(),
+		[users, setUsers] = useState(),
 		[editingComment, setEditingComment] = useState(''),
 		[commentInput, setCommentInput] = useState('');
 
@@ -23,6 +24,12 @@ const Guest = ({ id }) => {
 			.catch(e => console.error('Guest API Error', e));
 	}, [id]);
 
+	useEffect(() => {
+		apiClient.get('/users')
+			.then(setUsers)
+			.catch(e => console.error('Users API Error', e));
+	}, []);
+
 	useEffect(() => {
 		if(!guest) return;
 
@@ -59,6 +66,16 @@ const Guest = ({ id }) => {
 		{ name: eventName } = event,
 		{ role } = user;
 
+	let createdByName = '';
+	if (createdBy) {
+		createdByName = users.find(u => u.id === createdBy)?.displayName;
+	}
+
+	let updatedByName = '';
+	if (updatedBy) {
+		updatedByName = users.find(u => u.id === updatedBy)?.displayName;
+	}
+
 	return (
 		<div className="guest">
 			<h1>Guest - {eventName}</h1>
@@ -89,13 +106,13 @@ const Guest = ({ id }) => {
 							? createdReason === 'purchase'
 								? <><span>Confirmation Id:</span> <Link to={`/orders/${orderId}`}>{orderId}</Link></>
 								: createdReason === 'comp'
-									? <><span>Comped by:</span> {createdBy}</>
-									: <><span>Created by:</span> {createdBy}/{orderId}</>
+									? <><span>Comped by:</span> {createdByName}</>
+									: <><span>Created by:</span> {createdByName}/{orderId}</>
 							: <><span>Confirmation Id:</span> {orderId}</>
 						}
 					</h3>
 
-					{checkScope(role, 'write') && updatedBy && <h3><span>Updated by:</span> {updatedBy}</h3>}
+					{checkScope(role, 'write') && updatedBy && <h3><span>Updated by:</span> {updatedByName}</h3>}
 				</div>
 			</div>
 		</div>

diff --git a/src/guests/components/GuestsListItem.js b/src/guests/components/GuestsListItem.js
@@ -44,7 +44,14 @@ const GuestsListItem = ({ guest, updateGuest, event, role }) => (
 			</p>
 		</div>
 		<div className={classnames('vip', {'is-vip': guest.admissionTier === 'vip'})}>
-			{guest.admissionTier === 'vip' && <p>&#9989;</p>}
+			{guest.admissionTier === 'vip'
+				? checkScope(role, 'write')
+					? <button onClick={() => confirm('Are you sure you want to downgrade this guest?') && updateGuest(guest.id, {admissionTier: 'general'})}>{'\u2713'} VIP</button>
+					: <p>&#9989;</p>
+				: checkScope(role, 'write')
+					? <button onClick={() => updateGuest(guest.id, {admissionTier: 'vip'})}>Make VIP</button>
+					: ''
+			}
 		</div>
 	</li>
 );

diff --git a/src/promos/components/PromosList.js b/src/promos/components/PromosList.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import PromosListItem from './PromosListItem';
 
-const PromosList = ({ promos, products, event, sortBy, sortOrder, sortPromos, switchPromosOrder, disablePromo }) => {
+const PromosList = ({ promos, products, users, event, sortBy, sortOrder, sortPromos, switchPromosOrder, disablePromo }) => {
 	const productsById = products.reduce((obj, cur) => (obj[cur.id] = cur, obj), {});
 
 	return (
@@ -66,6 +66,7 @@ const PromosList = ({ promos, products, event, sortBy, sortOrder, sortPromos, sw
 				event={event}
 				product={productsById[promo.productId]}
 				promo={promo}
+				createdByName={users.find(u => u.id === promo.createdBy)?.displayName}
 				disablePromo={disablePromo}
 			/>)}
 		</ul>
@@ -77,6 +78,7 @@ export default PromosList;
 PromosList.propTypes = {
 	promos: PropTypes.array.isRequired,
 	products: PropTypes.array.isRequired,
+	users: PropTypes.array.isRequired,
 	event: PropTypes.object.isRequired,
 	sortPromos: PropTypes.func.isRequired,
 	switchPromosOrder: PropTypes.func.isRequired,

diff --git a/src/promos/components/PromosListItem.js b/src/promos/components/PromosListItem.js
@@ -4,7 +4,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'date-fns';
 
-const PromosListItem = ({ promo, product, event, disablePromo }) => (
+const PromosListItem = ({ promo, createdByName, product, event, disablePromo }) => (
 	<li className="promos-list-item">
 		<div className="status">
 			<span
@@ -24,7 +24,7 @@ const PromosListItem = ({ promo, product, event, disablePromo }) => (
 			<p>{event.name}</p>
 		</div>
 		<div className="product">
-			<p title={`$${promo.price} - ${promo.createdBy}`}>{product?.name}</p>
+			<p title={`${promo.productQuantity}qty @ $${promo.price} - ${createdByName}`}>{product?.name}</p>
 		</div>
 		<div className="link">
 			<p><a href={`${TICKET_LINK_HOST}/san-diego?promo=${promo.id}#tickets`} rel="noopener noreferrer" target="_blank">Promo Link</a></p>
@@ -38,6 +38,7 @@ const PromosListItem = ({ promo, product, event, disablePromo }) => (
 
 PromosListItem.propTypes = {
 	product: PropTypes.object.isRequired,
+	createdByName: PropTypes.string,
 	event: PropTypes.object.isRequired,
 	promo: PropTypes.object.isRequired,
 	disablePromo: PropTypes.func.isRequired

diff --git a/src/promos/components/PromosTable.js b/src/promos/components/PromosTable.js
@@ -20,9 +20,9 @@ function getPromoComparator({sortBy, sortOrder}) {
 
 			default:
 			case 'recipient':
-				sort = a.recipient > b.recipient
+				sort = a.recipientName > b.recipientName
 					? 1
-					: a.recipient === b.recipient
+					: a.recipientName === b.recipientName
 						? 0
 						: -1;
 				break;
@@ -35,6 +35,7 @@ function getPromoComparator({sortBy, sortOrder}) {
 const PromosTable = () => {
 	const [promos, setPromos] = useState([]),
 		[products, setProducts] = useState([]),
+		[users, setUsers] = useState(),
 		[filter, setFilter] = useState(''),
 		[sort, setSort] = useState({sortBy: 'recipient', sortOrder: 1}); // asc
 
@@ -50,6 +51,10 @@ const PromosTable = () => {
 		apiClient.get('/products')
 			.then(setProducts)
 			.catch(e => console.error('Products API Error', e));
+
+		apiClient.get('/users')
+			.then(setUsers)
+			.catch(e => console.error('Users API Error', e));
 	}, []);
 
 	function sortPromos(sortBy) {
@@ -87,7 +92,7 @@ const PromosTable = () => {
 		if(!filter) return true;
 
 		return (
-			filterRegExp.test(p.recipient) ||
+			filterRegExp.test(p.recipientName) ||
 			filterRegExp.test(p.email)
 		);
 	});
@@ -112,6 +117,7 @@ const PromosTable = () => {
 				promos={filteredPromos}
 				event={event}
 				products={filteredProducts}
+				users={users}
 				sortPromos={sortPromos}
 				switchPromosOrder={switchPromosOrder}
 				sortBy={sort.sortBy}