Initialize fork and rebrand app to event_manager

dashboard/src/composables/usePaymentSuccess.ts

@@ -0,0 +1,114 @@
+import { triggerCelebrationConfetti } from "@/utils/confetti"
+import { type Ref, onMounted, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+interface PaymentSuccessOptions {
+	onSuccess?: () => void
+	messageDuration?: number
+	enableConfetti?: boolean
+	cleanupUrl?: boolean
+}
+
+interface PaymentSuccessReturn {
+	showSuccessMessage: Ref<boolean>
+	triggerSuccessFlow: () => void
+	checkForSuccess: () => void
+	hideSuccessMessage: () => void
+	showSuccess: () => void
+}
+
+/**
+ * Composable for handling payment success flow
+ * Handles success message display, confetti animation, URL cleanup, and data refresh
+ *
+ * @param {Object} options - Configuration options
+ * @param {Function} options.onSuccess - Callback function to execute on success (e.g., reload data)
+ * @param {number} options.messageDuration - How long to show success message in milliseconds (default: 10000)
+ * @param {boolean} options.enableConfetti - Whether to trigger confetti animation (default: true)
+ * @param {boolean} options.cleanupUrl - Whether to clean up success parameter from URL (default: true)
+ * @returns {Object} - Returns reactive state and helper functions
+ */
+export function usePaymentSuccess(
+	options: PaymentSuccessOptions = {},
+): PaymentSuccessReturn {
+	const {
+		onSuccess,
+		messageDuration = 10000,
+		enableConfetti = true,
+		cleanupUrl = true,
+	} = options
+
+	const route = useRoute()
+	const router = useRouter()
+
+	const showSuccessMessage = ref(false)
+
+	/**
+	 * Trigger the complete success flow
+	 */
+	const triggerSuccessFlow = () => {
+		// Show success message
+		showSuccessMessage.value = true
+
+		// Trigger confetti animation
+		if (enableConfetti) {
+			triggerCelebrationConfetti()
+		}
+
+		// Execute custom success callback (e.g., reload data)
+		if (onSuccess && typeof onSuccess === "function") {
+			onSuccess()
+		}
+
+		// Clean up the URL by removing the success parameter
+		if (cleanupUrl) {
+			router.replace({
+				name: route.name,
+				params: route.params,
+			})
+		}
+
+		// Hide success message after specified duration
+		if (messageDuration > 0) {
+			setTimeout(() => {
+				showSuccessMessage.value = false
+			}, messageDuration)
+		}
+	}
+
+	/**
+	 * Check for success parameter and trigger flow if present
+	 */
+	const checkForSuccess = () => {
+		if (route.query.success === "true") {
+			triggerSuccessFlow()
+		}
+	}
+
+	/**
+	 * Manually hide the success message
+	 */
+	const hideSuccessMessage = () => {
+		showSuccessMessage.value = false
+	}
+
+	/**
+	 * Manually show the success message
+	 */
+	const showSuccess = () => {
+		triggerSuccessFlow()
+	}
+
+	// Auto-check for success on mount
+	onMounted(() => {
+		checkForSuccess()
+	})
+
+	return {
+		showSuccessMessage,
+		triggerSuccessFlow,
+		checkForSuccess,
+		hideSuccessMessage,
+		showSuccess,
+	}
+}