feat: add sharing button on sponsor spotlight page

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

@@ -237,6 +237,7 @@ export const QUERY_EVENT_PARTNERS = `
 		events {
 			event (findBy: { slug: $slug }) {
 				get {
+					id
 					logo
 					name
 					slug

src/routes/(root)/sponsors/[partner]/+page.svelte

@@ -18,8 +18,10 @@
 	import { Action as ActionModal } from '$elements/modals';
 	import { Standard as StandardLink } from '$elements/links';
 	import createMachine from '../_machines/partner';
+	import ShareWithSponsorModal from '../_components/ShareWithSponsor.svelte';
 
 	const { partner } = $page.params;
+	const eventId = $page.url.searchParams.get('eventId');
 
 	const { state, send } = useMachine(createMachine(partner), {
 		devTools: debug.xstate
@@ -59,6 +61,7 @@
 		if (reset) delayCounter = 200;
 		return current;
 	}
+	let showShareWithSponsorModal = false;
 </script>
 
 <Seo title={metaTags?.title || ''} tags={metaTags?.tags || []} />
@@ -74,20 +77,26 @@
 			</div>
 		</ActionModal>
 	{/if}
+	{#if showShareWithSponsorModal}
+		<ShareWithSponsorModal
+			on:HIDE_SHARE_SPONSOR_MODAL={() => (showShareWithSponsorModal = false)}
+			partner={$state.context.profile}
+			{eventId} />
+	{/if}
+
 	<div class="flex flex-col">
 		<div in:fade={{ delay: getDelay() }}>
 			<Hero
 				partner={$state.context.profile}
 				isFollowing={$state.context.isFollowing}
 				wasContactExchanged={$state.context.leadAdded}
+				{eventId}
 				on:TOGGLE_FOLLOW={() =>
 					send('FOLLOW', {
 						id: $state.context.profile.id
 					})}
-				on:XCHANGE_CONTACT={() =>
-					send('XCHANGE_CONTACT', {
-						id: $state.context.profile.id
-					})} />
+				on:SHOW_SHARE_SPONSOR_MODAL={() => (showShareWithSponsorModal = true)}
+				on:HIDE_SHARE_SPONSOR_MODAL={() => (showShareWithSponsorModal = false)} />
 		</div>
 
 		{#if $state?.context?.profile?.members?.length > 0}
@@ -130,10 +139,13 @@
 			<CTA
 				partner={$state.context.profile}
 				isFollowing={$state.context.isFollowing}
+				{eventId}
 				on:TOGGLE_FOLLOW={() =>
 					send('FOLLOW', {
 						id: $state.context.profile.id
-					})} />
+					})}
+				on:SHOW_SHARE_SPONSOR_MODAL={() => (showShareWithSponsorModal = true)}
+				on:HIDE_SHARE_SPONSOR_MODAL={() => (showShareWithSponsorModal = false)} />
 		</div>
 	</div>
 {/if}

src/routes/(root)/sponsors/_components/ShareWithSponsor.svelte

@@ -0,0 +1,30 @@
+<script>
+	export let partner;
+	export let eventId;
+
+	console.log('🦛 partner', partner);
+	import { Standard as StandardButton } from '$elements/buttons';
+	import { Action as ActionModal } from '$elements/modals';
+	import { createEventDispatcher } from 'svelte';
+	import partnerLeadMutationApi from '$dataSources/api.that.tech/partner/leads/mutations';
+
+	const dispatch = createEventDispatcher();
+	const { companyName = '', id: partnerId } = partner;
+	const { addLead } = partnerLeadMutationApi();
+
+	const actionTitle = `Share with ${companyName}`;
+	const actionText = `By clicking the button below you agree to share your shared profile with <span class="font-bold">${companyName}</span>. 
+		See what you're sharing in your 
+		<a class="text-thatBlue-500 hover:text-thatOrange-500" href="/my/profiles/primary">Shared Profile</>.`;
+
+	function shareWithSponsorAction() {
+		if (partnerId) {
+			return addLead(partnerId, eventId).then(() => dispatch('HIDE_SHARE_SPONSOR_MODAL'));
+		}
+	}
+</script>
+
+<ActionModal title={actionTitle} text={actionText}>
+	<StandardButton on:click={() => shareWithSponsorAction()}>Share with Sponsor</StandardButton>
+	<StandardButton on:click={() => dispatch('HIDE_SHARE_SPONSOR_MODAL')}>Cancel</StandardButton>
+</ActionModal>

src/routes/(root)/sponsors/_components/_CTA.svelte

@@ -1,6 +1,7 @@
 <script>
 	export let partner;
 	export let isFollowing = false;
+	export let eventId;
 
 	import { createEventDispatcher } from 'svelte';
 	import { page } from '$app/stores';
@@ -28,6 +29,9 @@
 
 	<span slot="actionPrimary">
 		{#if $page.data.user.isAuthenticated}
+			{#if eventId}
+				<StandardButton on:click={() => dispatch('SHOW_SHARE_SPONSOR_MODAL')}>Share</StandardButton>
+			{/if}
 			<StandardButton class="h-3/4" on:click={() => dispatch('TOGGLE_FOLLOW')}>
 				{#if isFollowing}Un-Follow{:else}Follow{/if}
 				{handle}

src/routes/(root)/sponsors/_components/_Hero.svelte

@@ -1,7 +1,7 @@
 <script>
 	export let partner;
 	export let isFollowing = false;
-	// export let wasContactExchanged = false;
+	export let eventId;
 
 	import { createEventDispatcher } from 'svelte';
 	import { page } from '$app/stores';
@@ -47,17 +47,10 @@
 						</StandardLink>
 
 						{#if $page.data.user.isAuthenticated}
-							<!-- TODO.. Needs a bit of work.
-                <StandardButton
-                  class="h-3/4"
-                  on:click="{() => dispatch('XCHANGE_CONTACT')}">
-                  {#if !wasContactExchanged}
-                    Exhange Contact Information
-                  {:else}
-                    Contact Exchang ed
-                  {/if}
-                </StandardButton> -->
-
+							{#if eventId}
+								<StandardButton on:click={() => dispatch('SHOW_SHARE_SPONSOR_MODAL')}
+									>Share</StandardButton>
+							{/if}
 							<StandardButton class="h-3/4" on:click={() => dispatch('TOGGLE_FOLLOW')}>
 								{#if !isFollowing}Follow{:else}Un-Follow{/if}
 							</StandardButton>

src/routes/(that conferences)/_components/sponsors/Level.svelte

@@ -1,8 +1,11 @@
 <script>
 	export let header;
 	export let partners = [];
+	export let eventId = '';
 
 	import PartnerCard from '$components/partners/PartnerCard.svelte';
+
+	const q = eventId ? `?eventId=${eventId}` : '';
 </script>
 
 <div class="py-12">
@@ -15,7 +18,7 @@
 			{#each partners as p, _i (p.id)}
 				<li
 					class="col-span-1 flex transform flex-col rounded-lg bg-white text-center shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-that-offWhite">
-					<a href={`/sponsors/${p.slug}`}>
+					<a href={`/sponsors/${p.slug}${q}`}>
 						<PartnerCard {...p} />
 					</a>
 				</li>

src/routes/(that conferences)/tx/[year]/sponsors/+page.svelte

@@ -8,6 +8,7 @@
 	import Hero from '../../../_components/sponsors/Hero.svelte';
 
 	let { event, levels } = data;
+	let { id: eventId } = event ?? {};
 
 	const metaTags = ((title = 'THAT Conference sponsors and partners.') => ({
 		title,
@@ -29,35 +30,35 @@
 	<div class="relative">
 		<div class="mx-auto max-w-2xl lg:max-w-7xl">
 			{#if levels['PIONEER']}
-				<Level header="Pioneer Sponsors" partners={levels['PIONEER']} />
+				<Level header="Pioneer Sponsors" partners={levels['PIONEER']} {eventId} />
 			{/if}
 
 			{#if levels['EXPLORER']}
-				<Level header="Explorer Sponsors" partners={levels['EXPLORER']} />
+				<Level header="Explorer Sponsors" partners={levels['EXPLORER']} {eventId} />
 			{/if}
 
 			{#if levels['SCOUT']}
-				<Level header="Scout Sponsors" partners={levels['SCOUT']} />
+				<Level header="Scout Sponsors" partners={levels['SCOUT']} {eventId} />
 			{/if}
 
 			{#if levels['RANGER']}
-				<Level header="Ranger Sponsors" partners={levels['RANGER']} />
+				<Level header="Ranger Sponsors" partners={levels['RANGER']} {eventId} />
 			{/if}
 
 			{#if levels['TRAILBLAZER']}
-				<Level header="Trailblazer Sponsors" partners={levels['TRAILBLAZER']} />
+				<Level header="Trailblazer Sponsors" partners={levels['TRAILBLAZER']} {eventId} />
 			{/if}
 
 			{#if levels['CUB']}
-				<Level header="Family Sponsors" partners={levels['CUB']} />
+				<Level header="Family Sponsors" partners={levels['CUB']} {eventId} />
 			{/if}
 
 			{#if levels['PATRON']}
-				<Level header="Patron Sponsors" partners={levels['PATRON']} />
+				<Level header="Patron Sponsors" partners={levels['PATRON']} {eventId} />
 			{/if}
 
 			{#if levels['MEDIA']}
-				<Level header="Additional Sponsors and Partners" partners={levels['MEDIA']} />
+				<Level header="Additional Sponsors and Partners" partners={levels['MEDIA']} {eventId} />
 			{/if}
 		</div>
 	</div>