🎇 fixes #31

Author: lorensr

package-lock.json

@@ -19,6 +19,7 @@
     "apollo-utilities": "^1.0.3",
     "auth0-helpers": "^0.4.2",
     "auth0-js": "^9.6.1",
+    "canvas-confetti": "0.0.3",
     "classnames": "^2.2.5",
     "cloudinary-core": "^2.5.0",
     "cloudinary-react": "^1.0.6",

package.json

@@ -0,0 +1,29 @@
+import confetti from 'canvas-confetti'
+
+export const fireworks = () => {
+  const DURATION_IN_MS = 7 * 1000
+  const endTime = Date.now() + DURATION_IN_MS
+
+  const firework = () => {
+    confetti({
+      startVelocity: 20,
+      spread: 700,
+      ticks: 200,
+      origin: {
+        x: Math.random(),
+        y: Math.random() - 0.2
+      }
+    })
+
+    const done = Date.now() > endTime
+    if (done) {
+      return
+    }
+
+    setTimeout(firework, Math.random() * 700)
+  }
+
+  firework()
+}
+
+window.fireworks = fireworks

src/lib/confetti.js

@@ -3,6 +3,7 @@ import gql from 'graphql-tag'
 
 import { apollo } from './apollo'
 import track from './track'
+import { fireworks } from './confetti'
 
 // https://stripe.com/docs/checkout#integration-custom
 // https://stripe.com/docs/checkout/express
@@ -89,7 +90,7 @@ export const stripeCheckout = (packageInfo, routerHistory) => {
         localStorage.setItem('package', packageInfo.key)
         localStorage.removeItem('stripe.associatedTokenWithUser')
 
-        // todo show spinner
+        fireworks()
 
         const { key: packageName, licenses: teamLicenses } = packageInfo