📈 Added tracking to decision CTAs

Also extracted a re-usable share button component.

src/lib/Inviter.svelte

@@ -1,72 +1,26 @@
 <script>
-  import {Button, Toast} from 'spaper'
-  import ShareIcon from '$lib/ShareIcon.svelte'
   import {page} from '$app/stores'
-  import {getContext} from 'svelte'
-
-  const {getAnalytics} = getContext('analytics')
+  import ShareButton from '$lib/ShareButton.svelte'
+  import {Toast} from 'spaper'
 
   const inviteUrl = new URL('invite', $page.url).href
-
-  async function share() {
-    try {
-      await navigator.share({
-        title: 'Schedule Your Social',
-        text: "You've been invited to a social!",
-        url: inviteUrl,
-      })
-      trackShareInviteLink('native')
-    } catch (error) {
-      console.warn('Unable to use native sharing', error)
-      if (error.name === 'AbortError') return // If we try to fallback to 'copy' after this it results in a NotAllowedErorr. I'm guesing this is because when the user aborts share it resets Safari's concept of if is a valid and safe clipboard operation triggered by a user interaction (see https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/).
-
-      try {
-        await copy()
-        Toast.open({
-          message: 'Link copied to clipiboard',
-          type: 'success',
-          position: 'top',
-        })
-        trackShareInviteLink('auto copy with dialog')
-      } catch (error) {
-        // One example of when this would happen is in some Android Webviews that don't provide copy permissions.
-        console.warn('Unable to copy to clipboard', error)
-        Toast.open({
-          message: 'Sharing not available, pleaese copy the link manually',
-          type: 'warning',
-          position: 'top',
-        })
-        trackShareInviteLink('manual copy with dialog')
-      }
-      displayInviteUrlDialog()
-    }
-  }
-
-  async function copy() {
-    if (!navigator.clipboard)
-      throw new Error('Navigator clipboard not available')
-    await navigator.clipboard.writeText(inviteUrl)
-  }
-
-  function displayInviteUrlDialog() {
-    document.getElementById('invite-url').select()
-  }
-
-  function trackShareInviteLink(method) {
-    getAnalytics().trackEvent('Share invite link', {
-      props: {
-        method,
-      },
-    })
-  }
 </script>
 
 <h1>Copy the invite link and wait for others to join</h1>
 <form style:text-align="center" method="dialog">
   <input id="invite-url" readonly type="url" value={inviteUrl} />
-  <Button on:click={share} type="success">
-    <ShareIcon />
-  </Button>
+  <ShareButton
+    url={inviteUrl}
+    shareText="You've been invited to a social!"
+    fallback={() => {
+      Toast.open({
+        message: 'Sharing not available, pleaese copy the link manually',
+        type: 'warning',
+        position: 'top',
+      })
+      document.getElementById('invite-url').select()
+    }}
+  />
 </form>
 
 <style>

src/lib/ShareButton.svelte

@@ -0,0 +1,66 @@
+<script>
+  import {Button, Modal, Toast} from 'spaper'
+  import {getContext} from 'svelte'
+  import ShareIcon from '$lib/ShareIcon.svelte'
+
+  const {getAnalytics} = getContext('analytics')
+
+  export let url
+  export let shareText
+  export let fallback = () => {
+    Modal.open({
+      title: 'Copy the below link and share it with your friends!',
+      content: url,
+    })
+  }
+
+  async function share() {
+    try {
+      await navigator.share({
+        title: 'Schedule Your Social',
+        text: shareText,
+        url,
+      })
+      trackShareInviteLink('native')
+    } catch (error) {
+      console.warn('Unable to use native sharing', error)
+      if (error.name === 'AbortError') return // If we try to fallback to 'copy' after this it results in a NotAllowedErorr. I'm guesing this is because when the user aborts share it resets Safari's concept of if is a valid and safe clipboard operation triggered by a user interaction (see https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/).
+
+      try {
+        await copy()
+        Toast.open({
+          message: 'Link copied to clipiboard',
+          type: 'success',
+          position: 'top',
+        })
+        trackShareInviteLink('auto copy with dialog')
+      } catch (error) {
+        // One example of when this would happen is in some Android Webviews that don't provide copy permissions.
+        console.warn('Unable to copy to clipboard', error)
+        trackShareInviteLink('manual copy with dialog')
+        fallback()
+      }
+    }
+  }
+
+  async function copy() {
+    if (!navigator.clipboard)
+      throw new Error('Navigator clipboard not available')
+    await navigator.clipboard.writeText(url)
+  }
+
+  function trackShareInviteLink(method) {
+    getAnalytics().trackEvent('Share invite link', {
+      props: {
+        method,
+      },
+    })
+  }
+</script>
+
+<Button on:click={share} type="success">
+  <span style:margin-right="0.2rem">
+    <slot />
+  </span>
+  <ShareIcon />
+</Button>

src/routes/[socialId=socialId]/decision/+page.svelte

@@ -1,8 +1,11 @@
 <script>
-  import {Button} from 'spaper'
-  import cookie from 'cookie'
+  import ShareButton from '$lib/ShareButton.svelte'
   import Retreat from '$lib/Back.svelte'
-  import {onMount} from 'svelte'
+  import cookie from 'cookie'
+  import {Button} from 'spaper'
+  import {getContext, onMount} from 'svelte'
+
+  const {getAnalytics} = getContext('analytics')
 
   export let data
 
@@ -25,8 +28,18 @@
 <p>Have fun 🎉</p>
 <div style:display="flex" style:gap="0.5rem">
   <Retreat back="everyone" />
-  <Button href="https://buymeacoffee.com/homostellaris" isLink external
-    >Buy the creator a beer 🍻*</Button
+  <Button
+    on:click={() => {
+      getAnalytics().trackEvent('Tapped buy me a beer button')
+    }}
+    href="https://buymeacoffee.com/homostellaris"
+    isLink
+    external>Buy the creator a beer 🍻*</Button
+  >
+  <ShareButton
+    url="https://scheduleyour.social?ref=decision-share"
+    shareText="The fastest way to find out when your friends are free"
+    >Spread the word</ShareButton
   >
 </div>
 <p style:font-size="0.8rem">*Beer helps support development</p>