Merge pull request #1289 from ThatConference/cs/claimTicket

feat: adds claim ticket

package.json

@@ -42,6 +42,7 @@
 		"@tailwindcss/line-clamp": "^0.4.0",
 		"@tailwindcss/typography": "^0.5.2",
 		"@xstate/inspect": "^0.7.0",
+		"@xstate/svelte": "^2.0.0",
 		"all-contributors-cli": "^6.20.0",
 		"archieml": "^0.5.0",
 		"autoprefixer": "^10.4.7",
@@ -95,8 +96,7 @@
 		"tailwindcss": "^3.0.24",
 		"unist-util-visit": "^4.1.0",
 		"uuid": "^8.3.2",
-		"xstate": "^4.32.1",
-		"xstate-svelte": "^1.0.1",
+		"xstate": "^4.33.5",
 		"yup": "^0.32.11"
 	}
 }

src/_components/nav/Cart.svelte

@@ -6,17 +6,17 @@
 	$: cartItems = Object.keys($state.context.cart).length;
 </script>
 
-<div class="relative inline-block h-12 w-12 ">
-	<div class="rounded-full p-2  hover:bg-thatBlue-500 hover:text-white focus:text-white">
-		<a href="/orders/summary/">
-			<Cart />
-			{#if cartItems > 0}
+{#if cartItems > 0}
+	<div class="relative flex items-center justify-center">
+		<div class="ml-4 rounded-full p-1 hover:bg-thatBlue-500 hover:text-white focus:text-white">
+			<a href="/orders/summary/">
+				<Cart />
 				<span class="absolute bottom-0 right-0 block animate-pulse">
-					<span class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-500">
-						<span class="text-xs font-medium leading-none text-white">{cartItems}</span>
+					<span class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-thatRed-500">
+						<span class="font-mediumß text-xs text-white">{cartItems}</span>
 					</span>
 				</span>
-			{/if}
-		</a>
+			</a>
+		</div>
 	</div>
-</div>
+{/if}

src/_components/nav/ClaimCart.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { getContext } from 'svelte';
+	import Ticket from '$elements/svgs/Ticket.svelte';
+
+	const { state } = getContext('claimTicket');
+</script>
+
+{#if ['claim.pending'].some($state.matches)}
+	<div class="relative flex items-center justify-center">
+		<div class="ml-4 rounded-full p-1 hover:bg-thatBlue-500 hover:text-white focus:text-white">
+			<a href="/orders/claim/">
+				<Ticket />
+				<span class="absolute bottom-0 right-0 block animate-pulse">
+					<span
+						class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-thatRed-500" />
+				</span>
+			</a>
+		</div>
+	</div>
+{/if}

src/_components/nav/UserProfile.svelte

@@ -7,7 +7,7 @@
 	import { clickOutside } from '$elements/actions';
 
 	const { isEmpty } = lodash;
-	let visible;
+	let visible = false;
 </script>
 
 <div class="relative">

src/_components/nav/interiorNav/Large.svelte

@@ -1,27 +1,25 @@
 <script>
-	import { getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import Icon from 'svelte-awesome';
 	import { plus } from '$components/svelte-awesome-icons';
 
-	import { Activity, Cart } from '$elements/svgs';
+	import { Activity } from '$elements/svgs';
 	import { hasNotifications } from '$stores/notificationCenter';
 
 	import ActivitySlideOver from '../../activityCenter/ActivitySlideOver.svelte';
 	import DesktopLink from './_DesktopLink.svelte';
 	import UserProfile from '../UserProfile.svelte';
 	import { clickOutside } from '$elements/actions';
 
+	import Cart from '../Cart.svelte';
+	import ClaimCart from '../ClaimCart.svelte';
+
 	let activityVisible;
 	let helpVisible;
 
 	function handleCloseActivityCenter() {
 		activityVisible = !activityVisible;
 	}
-
-	const { state } = getContext('cart');
-
-	$: cartItems = Object.keys($state.context.cart).length;
 </script>
 
 <div class="relative flex items-center">
@@ -160,29 +158,19 @@
 			{/if}
 		{/if}
 
-		{#if true}
-			<div class="relative inline-block">
-				<div class="ml-4 rounded-full p-1 text-white hover:bg-thatBlue-500">
-					<a href="/orders/summary/">
-						<Cart />
-
-						{#if cartItems > 0}
-							<span class="absolute bottom-0 right-0 block animate-pulse">
-								<span
-									class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-500">
-									<span class="text-xs font-medium leading-none text-white">{cartItems}</span>
-								</span>
-							</span>
-						{/if}
-					</a>
-				</div>
-			</div>
-		{/if}
+		<div class="text-white">
+			<ClaimCart />
+		</div>
+		<div class="text-white">
+			<Cart />
+		</div>
 
-		<div class="ml-4 rounded-full p-1 text-white hover:bg-thatBlue-500">
-			<a href="/activities/create/">
-				<Icon data={plus} class="h-8 w-8" />
-			</a>
+		<div class="flex items-center justify-center">
+			<div class="ml-4 rounded-full p-1 text-white hover:bg-thatBlue-500">
+				<a href="/activities/create/">
+					<Icon data={plus} class="h-8 w-8" />
+				</a>
+			</div>
 		</div>
 
 		<div class="ml-4 rounded-full text-white hover:bg-thatBlue-500">