@opengovsg/confetti 0.0.1 → 0.0.2

package/build/index.d.ts

@@ -131,6 +131,11 @@ declare const publicGetSurveyOutputSchema: z.ZodMiniObject<{
       }, z.core.$strip>], "type">;
     }, z.core.$strip>], "type">;
   }, z.core.$strip>>;
+  confirmation: z.ZodMiniObject<{
+    title: z.ZodMiniString<string>;
+    description: z.ZodMiniString<string>;
+    buttonText: z.ZodMiniString<string>;
+  }, z.core.$strip>;
 }, z.core.$strip>;
 type PublicGetSurveyOutput = z.infer<typeof publicGetSurveyOutputSchema>;
 //#endregion
@@ -195,7 +200,7 @@ interface ConfettiProviderProps {
   surveyId: string;
   publishableKey: string;
   respondent?: string;
-  metadata: Record<string, string>;
+  metadata?: Record<string, string>;
   apiBaseUrl?: string;
   isSurveyVisible?: boolean | ((_: {
     lastRespondedAt: Date | null;
@@ -216,6 +221,7 @@ declare const useConfetti: () => ConfettiContextValue;
 interface ConfettiProps extends Omit<ConfettiProviderProps, 'children'>, Pick<ConfettiControllerProps, 'onFinished' | 'shouldAutoSubmit'> {}
 declare const Confetti: ({
   children,
+  onFinished,
   shouldAutoSubmit,
   ...props
 }: ConfettiProps & Pick<ConfettiControllerProps, "children" | "shouldAutoSubmit">) => react_jsx_runtime3.JSX.Element;
@@ -235,11 +241,11 @@ declare const ThankYouMessage: ({
   title,
   description,
   classNames
-}: ThankYouMessageProps) => react_jsx_runtime3.JSX.Element;
+}: ThankYouMessageProps) => react_jsx_runtime3.JSX.Element | null;
 //#endregion
 //#region src/components/container/PopoverContainer.d.ts
 interface PopoverContainerProps {
-  closeOnFinishMs?: number;
+  closeOnFinishMs?: number | null;
   classNames?: {
     dialog?: string;
     closeButton?: string;
@@ -431,7 +437,13 @@ declare const EmbeddedConfetti: (props: ConfettiProps) => react_jsx_runtime3.JSX
 //#endregion
 //#region src/templates/PopoverConfetti.d.ts
 interface PopoverConfettiProps extends ConfettiProps {
-  closeOnFinishMs?: number;
+  /**
+   * The popover will automatically close this many milliseconds
+   * after the survey is finished.
+   * Set to `null` to disable automatic closing.
+   * @default 3000
+   */
+  closeOnFinishMs?: number | null;
 }
 declare const PopoverConfetti: ({
   closeOnFinishMs,

package/build/index.js

@@ -123,6 +123,11 @@ const multiSelectAnswerSchemaFactory = ({ maxSelected, maxLength }, { required }
 
 //#endregion
 //#region ../validators/src/survey.ts
+const surveyConfirmationSchema = z.object({
+	title: z.string().check(z.trim()),
+	description: z.string().check(z.trim()),
+	buttonText: z.string().check(z.trim())
+});
 const publicGetSurveyOutputSchema = z.object({
 	title: z.string(),
 	description: z.nullable(z.string()),
@@ -134,7 +139,8 @@ const publicGetSurveyOutputSchema = z.object({
 		required: z.boolean(),
 		properties: questionPropertiesSchema,
 		routingLogic: routingLogicSchema
-	}))
+	})),
+	confirmation: surveyConfirmationSchema
 });
 
 //#endregion
@@ -165,7 +171,7 @@ const client = ky.create({
 //#endregion
 //#region src/core/ConfettiProvider.tsx
 const ConfettiContext = createContext(null);
-const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, metadata, isSurveyVisible: isSurveyVisibleInput, apiBaseUrl }) => {
+const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, metadata = {}, isSurveyVisible: isSurveyVisibleInput, apiBaseUrl }) => {
 	const [survey, setSurvey] = useState();
 	const [lastRespondedAt, setLastRespondedAt] = useState();
 	const responseId = useMemo(() => crypto.randomUUID(), []);
@@ -466,13 +472,14 @@ const ConfettiController = ({ current: currentProp, shouldAutoSubmit, onFinished
 
 //#endregion
 //#region src/components/Confetti.tsx
-const Confetti = ({ children, shouldAutoSubmit, ...props }) => {
+const Confetti = ({ children, onFinished, shouldAutoSubmit, ...props }) => {
 	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback: /* @__PURE__ */ jsx(Fragment, {}),
 		children: /* @__PURE__ */ jsx(ConfettiProvider, {
 			...props,
 			children: /* @__PURE__ */ jsx(ConfettiController, {
 				shouldAutoSubmit,
+				onFinished,
 				children
 			})
 		})
@@ -482,29 +489,36 @@ const Confetti = ({ children, shouldAutoSubmit, ...props }) => {
 //#endregion
 //#region src/components/ThankYouMessage.tsx
 const ThankYouMessage = ({ title, description, classNames }) => {
-	return /* @__PURE__ */ jsx("div", {
+	const { survey, dismiss } = useConfetti();
+	if (!survey) return null;
+	const descriptionText = description || survey.confirmation.description;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: clsx("cf-question", classNames?.question),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: clsx("cf-header", classNames?.header),
 			children: [/* @__PURE__ */ jsx(Label, {
 				className: clsx("cf-title", classNames?.title),
-				children: title ?? "Feedback submitted!"
-			}), /* @__PURE__ */ jsx(Text, {
+				children: title || survey.confirmation.title || "Feedback submitted!"
+			}), descriptionText && /* @__PURE__ */ jsx(Text, {
 				slot: "description",
 				className: clsx("cf-description", classNames?.description),
-				children: description ?? "Thank you for your feedback!"
+				children: descriptionText
 			})]
 		})
-	});
+	}), /* @__PURE__ */ jsx(Button, {
+		className: "cf-submit-button",
+		onPress: dismiss,
+		children: survey.confirmation.buttonText || "Close"
+	})] });
 };
 
 //#endregion
 //#region src/components/container/PopoverContainer.tsx
 const PopoverContainer = ({ children, classNames, containerProps, onDismiss, closeOnFinishMs = 3e3 }) => {
-	const { surveyId, dismiss } = useConfetti();
+	const { surveyId, survey, dismiss } = useConfetti();
 	const [isFinished, setIsFinished] = useState(false);
 	useTimeout(() => {
-		dismiss();
+		if (survey) dismiss();
 	}, isFinished ? closeOnFinishMs : null);
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("confetti-dialog", classNames?.dialog),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/confetti",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "sideEffects": false,
   "description": "Widgets for Confetti",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -40,8 +40,8 @@
     "typescript": "^5.9.3",
     "@confetti/tsconfig": "0.0.0",
     "@confetti/validators": "0.0.0",
-    "@confetti/prettier-config": "0.0.0",
-    "@confetti/eslint-config": "0.0.0"
+    "@confetti/eslint-config": "0.0.0",
+    "@confetti/prettier-config": "0.0.0"
   },
   "prettier": "@confetti/prettier-config",
   "scripts": {