@opengovsg/confetti 0.1.1 → 0.1.2

package/README.md

@@ -56,7 +56,7 @@ function App() {
 3. Add Confetti to your CSP headers:
 
 ```
-connect-src https://confetti.hack2026.gov.sg;
+connect-src https://confetti.gov.sg;
 ```
 
 ## Template Components

package/build/index.js

@@ -201,8 +201,9 @@ const ConfettiContext = createContext(null);
 const ConfettiProvider = ({ children, surveyId, publishableKey, respondent: respondentInput, metadata = {}, isSurveyVisible: isSurveyVisibleInput, apiBaseUrl }) => {
 	const hasTrackedViewRef = useRef(false);
 	const [survey, setSurvey] = useState();
-	const [lastRespondedAt, setLastRespondedAt] = useState();
-	const [lastDismissedAt, setLastDismissedAt] = useState();
+	const [isSettled, setIsSettled] = useState(false);
+	const [lastRespondedAt, setLastRespondedAt] = useState(null);
+	const [lastDismissedAt, setLastDismissedAt] = useState(null);
 	const responseId = useMemo(() => crypto.randomUUID(), []);
 	const [internalRespondentId, setInternalRespondentId] = useLocalStorage(`cfti:${surveyId}:respondent`, "");
 	useEffect(() => {
@@ -215,30 +216,51 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent: resp
 		if (apiBaseUrl) properties.prefixUrl = apiBaseUrl;
 		return client.extend(properties);
 	}, [apiBaseUrl, publishableKey]);
-	useEffect(() => {
-		client$1.get(`v1/cfti/${surveyId}`).json().then((data) => {
-			const parseResult = publicGetSurveyOutputSchema.safeParse(data);
-			if (!parseResult.success) return;
-			setSurvey(parseResult.data);
-		});
+	const fetchRespondentData = useCallback(async () => {
 		if (!respondent) return;
-		client$1.get(`v1/cfti/${surveyId}/respondent/${respondent}`).json().then((data) => {
-			const parseResult = publicGetRespondentOutputSchema.safeParse(data);
-			if (!parseResult.success) {
-				setLastRespondedAt(null);
-				setLastDismissedAt(null);
-				return;
-			}
-			setLastRespondedAt(parseResult.data.lastRespondedAt ? new Date(parseResult.data.lastRespondedAt) : null);
-			setLastDismissedAt(parseResult.data.lastDismissedAt ? new Date(parseResult.data.lastDismissedAt) : null);
-		});
+		const respondentData = await client$1.get(`v1/cfti/${surveyId}/respondent/${respondent}`).json();
+		const respondentResult = publicGetRespondentOutputSchema.safeParse(respondentData);
+		if (!respondentResult.success) return;
+		setLastRespondedAt(respondentResult.data.lastRespondedAt ? new Date(respondentResult.data.lastRespondedAt) : null);
+		setLastDismissedAt(respondentResult.data.lastDismissedAt ? new Date(respondentResult.data.lastDismissedAt) : null);
 	}, [
-		apiBaseUrl,
 		client$1,
-		internalRespondentId,
 		respondent,
 		surveyId
 	]);
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof document === "undefined") return;
+		const eventHandler = () => {
+			if (document.visibilityState === "visible") fetchRespondentData();
+		};
+		document.addEventListener("visibilitychange", eventHandler);
+		return () => {
+			document.removeEventListener("visibilitychange", eventHandler);
+		};
+	}, [fetchRespondentData]);
+	useEffect(() => {
+		const fetchData = async () => {
+			hasTrackedViewRef.current = false;
+			setIsSettled(false);
+			setSurvey(void 0);
+			setLastRespondedAt(null);
+			setLastDismissedAt(null);
+			try {
+				const surveyData = await client$1.get(`v1/cfti/${surveyId}`).json();
+				const parseResult = publicGetSurveyOutputSchema.safeParse(surveyData);
+				if (!parseResult.success) return;
+				setSurvey(parseResult.data);
+				await fetchRespondentData();
+			} catch {} finally {
+				setIsSettled(true);
+			}
+		};
+		fetchData();
+	}, [
+		client$1,
+		fetchRespondentData,
+		surveyId
+	]);
 	const submit = useCallback(async ({ answers }) => {
 		await client$1.put(`v1/cfti/${surveyId}/response/${responseId}`, { json: {
 			respondent,
@@ -261,21 +283,22 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent: resp
 		surveyId
 	]);
 	const isSurveyVisible = useMemo(() => {
+		if (!isSettled) return false;
 		if (isSurveyVisibleInput === void 0) return true;
 		if (typeof isSurveyVisibleInput === "boolean") return isSurveyVisibleInput;
-		if (lastRespondedAt === void 0 || lastDismissedAt === void 0) return false;
 		return isSurveyVisibleInput({
 			lastRespondedAt,
 			lastDismissedAt
 		});
 	}, [
+		isSettled,
 		isSurveyVisibleInput,
 		lastRespondedAt,
 		lastDismissedAt
 	]);
 	useEffect(() => {
 		if (hasTrackedViewRef.current) return;
-		if (isSurveyVisible) {
+		if (isSurveyVisible && survey && respondent) {
 			hasTrackedViewRef.current = true;
 			client$1.post(`v1/cfti/${surveyId}/respondent/${respondent}/event`, { json: { type: "view" } }).catch(() => {});
 		}
@@ -283,6 +306,7 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent: resp
 		client$1,
 		isSurveyVisible,
 		respondent,
+		survey,
 		surveyId
 	]);
 	if (!isSurveyVisible || !survey) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/confetti",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "sideEffects": false,
   "description": "Widgets for Confetti",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -45,10 +45,10 @@
     "prettier": "^3.7.4",
     "tsdown": "0.19.0",
     "typescript": "^5.9.3",
+    "@confetti/eslint-config": "0.0.0",
     "@confetti/prettier-config": "0.0.0",
     "@confetti/tsconfig": "0.0.0",
-    "@confetti/validators": "0.0.0",
-    "@confetti/eslint-config": "0.0.0"
+    "@confetti/validators": "0.0.0"
   },
   "prettier": "@confetti/prettier-config",
   "scripts": {