Merge pull request #5343 from kiva/MP-267-thanks-page-for-opted-in-users

.storybook/stories/AnimatedSparkles.stories.js

@@ -0,0 +1,19 @@
+import AnimatedSparkles from '@/components/Thanks/AnimatedSparkles.vue';
+
+export default {
+  title: 'Components/AnimatedSparkles',
+  component: AnimatedSparkles,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AnimatedSparkles },
+  template: '<div class="tw-bg-brand"><animated-sparkles v-bind="$props" /></div>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // Define your default args here. For example:
+  // color: 'blue',
+  // size: 'large',
+};

server/vue-middleware.js

@@ -56,13 +56,16 @@ module.exports = function createMiddleware({
 		const userAgent = req.get('user-agent');
 		const device = userAgent ? Bowser.getParser(userAgent).parse().parsedResult : null;
 
+		// Set the first user visit to the web
+		req.session.firstPage = !req.session?.firstPage ? req.url : req.session.firstPage;
+
 		const context = {
 			url: req.url,
-			config: config.app,
+			config: { ...config.app, firstPage: req.session?.firstPage },
 			cookies,
 			user: req.user || {},
 			locale: req.locale,
-			device
+			device,
 		};
 
 		// set html response headers

src/components/Forms/GuestAccountCreation.vue

@@ -70,6 +70,14 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		eventCategory: {
+			type: String,
+			default: 'post-checkout'
+		},
+		eventLabel: {
+			type: String,
+			default: 'create-guest-account'
+		},
 	},
 	data() {
 		return {
@@ -83,7 +91,7 @@ export default {
 			this.serverError = false;
 			this.$v.$touch();
 			if (!this.$v.$invalid) {
-				this.$kvTrackEvent('post-checkout', 'click', 'create-guest-account');
+				this.$kvTrackEvent(this.eventCategory, 'click', this.eventLabel);
 
 				// will end up redirecting to password reset page.
 				this.apollo.mutate({