From 55f05dfc8b9c7a234713c6b5e877ac1bf6253f70 Mon Sep 17 00:00:00 2001 From: Brett Slaski Date: Wed, 8 Nov 2023 15:34:10 -0600 Subject: [PATCH] feat: specific landing page for claim ticket type refactor: ticket name used in cart --- package-lock.json | 12 +- package.json | 4 +- .../api.that.tech/events/queries.js | 1 + src/lib/claimTicket/config.js | 27 ++++- src/lib/claimTicket/machine.js | 48 ++++++-- .../orders/_components/_ClaimCart.svelte | 2 +- .../orders/success/claim-ticket/+page.svelte | 9 +- .../success/expo-hall-ticket/+page.svelte | 69 +++++++++++ .../support/sponsors/expo-hall/+page.svelte | 4 +- .../[event]/[date]/+page.svelte | 3 +- .../_components/EventTicket.svelte | 114 +++++++++--------- 11 files changed, 209 insertions(+), 84 deletions(-) create mode 100644 src/routes/(root)/orders/success/expo-hall-ticket/+page.svelte diff --git a/package-lock.json b/package-lock.json index 31efa18..c1cd9d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "thatconference.com", - "version": "5.1.0", + "version": "5.1.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "thatconference.com", - "version": "5.1.0", + "version": "5.1.11", "license": "GPL-3.0", "dependencies": { "@sentry/sveltekit": "^7.74.0" @@ -84,7 +84,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" }, "engines": { @@ -9914,9 +9914,9 @@ } }, "node_modules/xstate": { - "version": "4.38.2", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.2.tgz", - "integrity": "sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==", + "version": "4.38.3", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.3.tgz", + "integrity": "sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==", "dev": true, "funding": { "type": "opencollective", diff --git a/package.json b/package.json index 0187229..4a4edfe 100644 --- a/package.json +++ b/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": { diff --git a/src/_dataSources/api.that.tech/events/queries.js b/src/_dataSources/api.that.tech/events/queries.js index 39494a4..b2fea13 100644 --- a/src/_dataSources/api.that.tech/events/queries.js +++ b/src/_dataSources/api.that.tech/events/queries.js @@ -11,6 +11,7 @@ const productBaseFieldsFragment = ` price isEnabled uiReference + eventActivities shortDescription onSaleFrom onSaleUntil diff --git a/src/lib/claimTicket/config.js b/src/lib/claimTicket/config.js index dd0e45b..714397a 100644 --- a/src/lib/claimTicket/config.js +++ b/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: {}, diff --git a/src/lib/claimTicket/machine.js b/src/lib/claimTicket/machine.js index f956fdd..51aaa37 100644 --- a/src/lib/claimTicket/machine.js +++ b/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') } }; } diff --git a/src/routes/(root)/orders/_components/_ClaimCart.svelte b/src/routes/(root)/orders/_components/_ClaimCart.svelte index 7b89305..f9024c6 100644 --- a/src/routes/(root)/orders/_components/_ClaimCart.svelte +++ b/src/routes/(root)/orders/_components/_ClaimCart.svelte @@ -35,7 +35,7 @@ {$state.context.eventDetails?.name || 'THAT Online'} -

Expo Hall Only Ticket

+

{$state.context.productDetails?.name}

FREE

diff --git a/src/routes/(root)/orders/success/claim-ticket/+page.svelte b/src/routes/(root)/orders/success/claim-ticket/+page.svelte index cd4ed44..97f0fd5 100644 --- a/src/routes/(root)/orders/success/claim-ticket/+page.svelte +++ b/src/routes/(root)/orders/success/claim-ticket/+page.svelte @@ -28,7 +28,7 @@
  1. - Ensure your profile is up-to-date with a photo. This is a great + Ensure your profile 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.
  2. @@ -42,8 +42,7 @@
  3. If you haven’t done so already, make sure you’ve booked your hotel room. All booking - information can be found here: https://thatconference.com/support/travel/ + information can be found here: https://that.us/support/travel/
  4. When you get to the event make sure you check in at registration to get your sponsor badge. @@ -56,8 +55,8 @@

- Visit https://sponsor.thatconference.com for a one-stop resource - for your sponsorship. It contains links to lead generation, a sponsor handbook and many other important + Visit https://sponsor.that.us for a one-stop resource for + your sponsorship. It contains links to lead generation, a sponsor handbook and many other important resources.

diff --git a/src/routes/(root)/orders/success/expo-hall-ticket/+page.svelte b/src/routes/(root)/orders/success/expo-hall-ticket/+page.svelte new file mode 100644 index 0000000..cd4ed44 --- /dev/null +++ b/src/routes/(root)/orders/success/expo-hall-ticket/+page.svelte @@ -0,0 +1,69 @@ +

+

+ WELCOME TO THAT CONFERENCE +

+

+ Your ticket has been claimed! +

+
+ +
+

+ 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. +

+ +

+ 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. +

+ +

What you need to do next

+ +
    +
  1. + Ensure your profile 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. +
    2. +
  2. + 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. +
    3. +
  3. + 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. +
    4. +
  4. + If you haven’t done so already, make sure you’ve booked your hotel room. All booking + information can be found here: https://thatconference.com/support/travel/ +
    5. +
  5. + When you get to the event make sure you check in at registration to get your sponsor badge. +
    6. +
  6. + On Monday at 1:00 PM 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. +
    7. +
+ +

+ Visit https://sponsor.thatconference.com for a one-stop resource + for your sponsorship. It contains links to lead generation, a sponsor handbook and many other important + resources. +

+

+ If you have any questions you can email us or speak + to anyone onsite with a staff t-shirt. +

+ +

Thank you for your support and we look forward to seeing you soon.

+
diff --git a/src/routes/(root)/support/sponsors/expo-hall/+page.svelte b/src/routes/(root)/support/sponsors/expo-hall/+page.svelte index 8507eac..0e447f6 100644 --- a/src/routes/(root)/support/sponsors/expo-hall/+page.svelte +++ b/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/'); diff --git a/src/routes/(that conference online)/[event]/[date]/+page.svelte b/src/routes/(that conference online)/[event]/[date]/+page.svelte index 8b39984..66e7cc1 100644 --- a/src/routes/(that conference online)/[event]/[date]/+page.svelte +++ b/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); diff --git a/src/routes/(that conference online)/_components/EventTicket.svelte b/src/routes/(that conference online)/_components/EventTicket.svelte index 7c26931..cdfd83f 100644 --- a/src/routes/(that conference online)/_components/EventTicket.svelte +++ b/src/routes/(that conference online)/_components/EventTicket.svelte @@ -21,14 +21,19 @@ dayjs.extend(advancedFormat); const tickets = event.products - .filter((f) => f.isEnabled) - .filter((e) => e.productType === 'TICKET'); + .filter((f) => f.isEnabled === true && f.productType === 'TICKET') + // if claimable_ticket don't filter in if eventActivities includes expo hall + .filter((e) => + e.uiReference === 'CLAIMABLE_TICKET' ? !e.eventActivities?.includes('EXPO_HALL') : true + ); const eventTickets = keyBy( tickets.filter((t) => t.uiReference), (i) => i.uiReference ); + const claimableTicket = eventTickets['CLAIMABLE_TICKET'] ?? {}; + const dispatch = createEventDispatcher(); @@ -52,66 +57,63 @@
-
-
-
-
- - THAT Online - Event Ticket - + {#if claimableTicket.id} +
+
+
+
+ + THAT Online - Event Ticket + +
+
Free
+

+ {event.name} +

+

+ {dayjs(event.startDate).format('dddd, MMMM D, YYYY - h:mm A z')} +

+

+ {claimableTicket.description} +

-
- {#if eventTickets['CLAIMABLE_TICKET']?.price === 0} - Free - {:else} - ${eventTickets['CLAIMABLE_TICKET']?.price ?? 15} - USD - {/if} -
-

- {event.name} -

-

- {dayjs(event.startDate).format('dddd, MMMM D, YYYY - h:mm A z')} -

-

- {eventTickets['VIRTUAL_CAMPER'].description} -

-
-
-
    -
  • -
    - -
    -

    Full Access All Day

    -
    • +
    +
      +
    • +
      + +
      +

      Full Access All Day

      +
      • -
    • -
      - -
      -

      Create and Facilitate Activities

      -
      • +
    • +
      + +
      +

      Create and Facilitate Activities

      +
      • -
    • -
      - -
      -

      Join Any Activity

      -
      • -
    +
  • +
    + +
    +

    Join Any Activity

    +
    • +
- - dispatch('claim-ticket', { product: { id: eventTickets['CLAIMABLE_TICKET']?.id } })}> - Claim Your Ticket - + + dispatch('claim-ticket', { + product: { ...claimableTicket } + })}> + Claim Your Ticket + +
-
+ {/if}