Merge pull request #132 from ThatConference/feat/claim-specific-succe…

…ss-page

Specific success page for claim ticket type

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thatconference.com",
-	"version": "5.1.10",
+	"version": "5.1.11",
 	"description": "THATConference.com website",
 	"main": "index.js",
 	"type": "module",
@@ -101,7 +101,7 @@
 		"uuid": "^9.0.1",
 		"vite": "^4.4.11",
 		"vitest": "^0.34.6",
-		"xstate": "^4.38.2",
+		"xstate": "^4.38.3",
 		"zod": "^3.22.4"
 	},
 	"dependencies": {

src/_dataSources/api.that.tech/events/queries.js

@@ -11,6 +11,7 @@ const productBaseFieldsFragment = `
 		price
 		isEnabled
 		uiReference
+		eventActivities
 		shortDescription
 		onSaleFrom
 		onSaleUntil

src/lib/claimTicket/config.js

@@ -7,7 +7,8 @@ function createConfig(metaContext) {
 			eventId: undefined,
 			productId: undefined,
 			pendingClaim: false,
-			claimResults: undefined
+			claimResults: undefined,
+			ticketType: undefined
 		},
 		states: {
 			verification: {
@@ -71,7 +72,7 @@ function createConfig(metaContext) {
 							onDone: [
 								{
 									cond: 'wasTicketClaimed',
-									actions: ['claimTicketSuccess', 'clearCart', 'clearLocalStorage'],
+									actions: ['claimTicketSuccess'],
 									target: 'ticketClaimed'
 								},
 								{
@@ -83,7 +84,27 @@ function createConfig(metaContext) {
 					},
 
 					ticketClaimed: {
-						entry: 'redirectToSuccess'
+						entry: ['clearCart', 'clearLocalStorage'],
+						initial: 'initial',
+						states: {
+							initial: {
+								always: [
+									{
+										cond: 'isExpoHallTicket',
+										target: 'expoHall'
+									},
+									{
+										target: 'defaultRedirect'
+									}
+								]
+							},
+							expoHall: {
+								entry: 'expoHallRedirect'
+							},
+							defaultRedirect: {
+								entry: 'defaultRedirect'
+							}
+						}
 					},
 
 					ticketClaimIssue: {},

src/lib/claimTicket/machine.js

@@ -13,11 +13,16 @@ const claimCartVersion = '1.0.0';
 
 function createServices() {
 	const { claimTicket } = orderMutationApi();
+	const TICKET_TYPE = {
+		EXPO_HALL: 'expoHall',
+		OTHER: 'other'
+	};
 
 	return {
 		guards: {
 			isPendingClaim: (context) => context.pendingClaim,
-			wasTicketClaimed: (_, { data }) => data.result
+			wasTicketClaimed: (_, { data }) => data.result,
+			isExpoHallTicket: (context) => context?.ticketType === TICKET_TYPE.EXPO_HALL
 		},
 
 		services: {
@@ -39,23 +44,30 @@ function createServices() {
 				const localCart = browser ? window.localStorage.getItem(claimCartKeyName) : null;
 				const results = JSON.parse(localCart) || {};
 
-				const { eventId = undefined, productId = undefined, eventDetails = undefined } = results;
+				const {
+					eventId = undefined,
+					productId = undefined,
+					eventDetails = undefined,
+					productDetails = undefined
+				} = results;
 				return {
 					eventId,
 					eventDetails,
 					productId,
+					productDetails,
 					pendingClaim: eventId && productId ? true : false
 				};
 			}),
 
 			setLocalStorage: (context) => {
-				const { eventId, productId, eventDetails } = context;
+				const { eventId, productId, eventDetails, productDetails } = context;
 
 				const localCart = {
 					version: claimCartVersion,
 					eventId,
 					eventDetails,
-					productId
+					productId,
+					productDetails
 				};
 
 				window.localStorage.setItem(claimCartKeyName, JSON.stringify(localCart));
@@ -65,7 +77,8 @@ function createServices() {
 				pendingClaim: () => false,
 				eventId: () => undefined,
 				eventDetails: () => undefined,
-				productId: () => undefined
+				productId: () => undefined,
+				productDetails: () => undefined
 			}),
 
 			clearLocalStorage: () => window.localStorage.removeItem(claimCartKeyName),
@@ -77,18 +90,35 @@ function createServices() {
 						? {
 								logo: event.eventDetails.logo,
 								name: event.eventDetails.name,
-								slug: event.eventDetails.slug
+								slug: event.eventDetails.slug,
+								type: event.eventDetails.type
 						  }
 						: context.eventDetails,
 				eventId: (context, event) => context.eventId || event.eventId,
-				productId: (context, event) => context.productId || event.productId
+				productId: (context, event) => context.productId || event.productId,
+				productDetails: (context, event) =>
+					event.productDetails
+						? {
+								name: event.productDetails.name,
+								eventActivities: event.productDetails.eventActivities,
+								uiReference: event.productDetails.uiReference
+						  }
+						: context.productDetails
 			}),
 
 			claimTicketSuccess: assign({
-				claimResults: (_, { data }) => data.results
+				claimResults: (_, { data }) => data.results,
+				ticketType: ({ productDetails }) => {
+					let ticketType = TICKET_TYPE.OTHER;
+					if (productDetails?.eventActivities?.includes('EXPO_HALL')) {
+						ticketType = TICKET_TYPE.EXPO_HALL;
+					}
+					return ticketType;
+				}
 			}),
 
-			redirectToSuccess: () => goto('/orders/success/claim-ticket/')
+			defaultRedirect: () => goto('/orders/success/claim-ticket/'),
+			expoHallRedirect: () => goto('/orders/success/expo-hall-ticket')
 		}
 	};
 }

src/routes/(root)/orders/_components/_ClaimCart.svelte

@@ -35,7 +35,7 @@
 						<a href="/{$state.context.eventDetails?.slug}"
 							>{$state.context.eventDetails?.name || 'THAT Online'}</a>
 					</h3>
-					<p class="mt-1 text-gray-500">Expo Hall Only Ticket</p>
+					<p class="mt-1 text-gray-500">{$state.context.productDetails?.name}</p>
 				</div>
 
 				<p class="font-semibold text-gray-900">FREE</p>

src/routes/(root)/orders/success/claim-ticket/+page.svelte

@@ -28,7 +28,7 @@
 
 	<ol>
 		<li>
-			Ensure your <a href="/my/profiles/primary">profile</a> is up-to-date with a photo. This is a great
+			Ensure your <a href="/my/profiles/primary/">profile</a> is up-to-date with a photo. This is a great
 			way for folks who have visited your booth another way to get in contact with you after the event.
 		</li>
 		<li>
@@ -42,8 +42,7 @@
 		</li>
 		<li>
 			If you haven’t done so already, make sure you’ve booked your hotel room. All booking
-			information can be found here: <a href="/support/travel"
-				>https://thatconference.com/support/travel/</a>
+			information can be found here: <a href="/support/travel/">https://that.us/support/travel/</a>
 		</li>
 		<li>
 			When you get to the event make sure you check in at registration to get your sponsor badge.
@@ -56,8 +55,8 @@
 	</ol>
 
 	<p>
-		Visit <a href="/support/sponsors/forms">https://sponsor.thatconference.com</a> for a one-stop resource
-		for your sponsorship. It contains links to lead generation, a sponsor handbook and many other important
+		Visit <a href="/support/sponsors/forms/">https://sponsor.that.us</a> for a one-stop resource for
+		your sponsorship. It contains links to lead generation, a sponsor handbook and many other important
 		resources.
 	</p>
 	<p>

src/routes/(root)/orders/success/expo-hall-ticket/+page.svelte

@@ -0,0 +1,69 @@
+<div class="mx-auto max-w-prose text-base lg:max-w-none">
+	<p
+		class="text-base font-semibold uppercase leading-6 tracking-wide
+			text-thatOrange-400">
+		WELCOME TO THAT CONFERENCE
+	</p>
+	<h1
+		class="mb-8 mt-2 text-3xl font-extrabold leading-8 tracking-tight
+			text-gray-900 sm:text-4xl sm:leading-10">
+		Your ticket has been claimed!
+	</h1>
+</div>
+
+<div
+	class="prose relative mx-auto mb-8 max-w-prose leading-7 text-gray-500 lg:mx-0 lg:max-w-5xl lg:pr-72">
+	<p>
+		Welcome to THAT Conference, we are excited you’re joining us. Here are details about your Expo
+		Hall Only ticket and next steps you need to complete.
+	</p>
+
+	<p>
+		The Expo Hall Only ticket provides access only to the Expo Hall (sponsor booths), Open Spaces,
+		Game Night, the Waterpark Party, and the Closing Ceremony. It does not provide food, beverages,
+		access to sessions or any other activities not listed above.
+	</p>
+
+	<h2>What you need to do next</h2>
+
+	<ol>
+		<li>
+			Ensure your <a href="/my/profiles/primary">profile</a> is up-to-date with a photo. This is a great
+			way for folks who have visited your booth another way to get in contact with you after the event.
+		</li>
+		<li>
+			Your company has a Spotlight page on our website. Let the attendees put a name with your face
+			by adding your profile to your company’s Spotlight page. Simply contact us and we can quickly
+			add your profile.
+		</li>
+		<li>
+			You will need access to our lead generation system if you plan on using the system during our
+			event. Simply contact us and we will get you setup.
+		</li>
+		<li>
+			If you haven’t done so already, make sure you’ve booked your hotel room. All booking
+			information can be found here: <a href="/support/travel"
+				>https://thatconference.com/support/travel/</a>
+		</li>
+		<li>
+			When you get to the event make sure you check in at registration to get your sponsor badge.
+		</li>
+		<li>
+			On <span class="font-bold">Monday at 1:00 PM</span> there will be a sponsor meeting in the Open
+			Spaces area. This is an opportunity to meet one another, discuss the event, answer any questions,
+			and get things kicked off before the early registration meet and greet that evening.
+		</li>
+	</ol>
+
+	<p>
+		Visit <a href="/support/sponsors/forms">https://sponsor.thatconference.com</a> for a one-stop resource
+		for your sponsorship. It contains links to lead generation, a sponsor handbook and many other important
+		resources.
+	</p>
+	<p>
+		If you have any questions you can <a href="email:[email protected]">email us</a> or speak
+		to anyone onsite with a staff t-shirt.
+	</p>
+
+	<p>Thank you for your support and we look forward to seeing you soon.</p>
+</div>

src/routes/(root)/support/sponsors/expo-hall/+page.svelte

@@ -22,8 +22,10 @@
 				// add ticket to basket
 				const to = {
 					eventId: event.id,
+					eventType: event.type,
 					eventDetails: event,
-					productId: ticket.id
+					productId: ticket.id,
+					productDetails: ticket
 				};
 				claimTicket.send('ADD_ITEM', to);
 				goto('/orders/claim/');

src/routes/(that conference online)/[event]/[date]/+page.svelte

@@ -44,7 +44,8 @@
 		const ticket = {
 			eventId: event.id,
 			eventDetails: event,
-			productId: product.id
+			productId: product.id,
+			productDetails: product
 		};
 
 		claimTicket.send('ADD_ITEM', ticket);