@opengovsg/confetti 0.0.1 → 0.0.3

package/build/confetti.css

@@ -1,8 +1,6 @@
 :root {
+  --confetti-font-scale: 16px;
   /* Define CSS Variables with defaults */
-  --confetti-font-family:
-    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --confetti-box-padding: 20px 24px;
   --confetti-max-width: 300px;
   --confetti-z-index: 2147483647;
@@ -39,6 +37,7 @@
 }
 
 .confetti-dialog {
+  width: 100%;
   max-width: var(--confetti-max-width);
   background: transparent;
   position: relative;
@@ -79,6 +78,7 @@
 }
 
 .confetti {
+  font-family: var(--confetti-font-family);
   overflow: hidden;
   padding: 24px;
   border-radius: var(--confetti-border-radius);
@@ -87,7 +87,7 @@
   flex-direction: column;
   gap: 16px;
   color: var(--confetti-text-primary-color);
-  font-size: 16px;
+  font-size: var(--confetti-font-scale);
   width: 100%;
   background: var(--confetti-background-color);
 
@@ -101,7 +101,7 @@
     border-radius: 8px;
     cursor: pointer;
     transition: transform 200ms;
-    font-size: 14px;
+    font-size: 0.875em;
     font-weight: 500;
     line-height: 20px;
 
@@ -154,7 +154,7 @@
   }
 
   .cf-choice {
-    font-size: 16px;
+    font-size: 1em;
     cursor: pointer;
     padding: 8px 10px;
     border-radius: 6px;
@@ -336,7 +336,7 @@
       }
 
       .cf-description {
-        font-size: 14px;
+        font-size: 0.875em;
         line-height: 20px;
         font-weight: 400;
         color: var(--confetti-text-subtle-color);
@@ -369,7 +369,7 @@
 
     .cf-rating-emoji,
     .cf-rating-star {
-      font-size: 16px;
+      font-size: 1em;
       background-color: transparent;
       border: none;
       padding: 0;
@@ -405,10 +405,10 @@
   .cf-rating-text {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: 0.75em;
     color: var(--confetti-text-subtle-color);
     font-weight: 500;
-    line-height: 16px;
+    line-height: 1;
 
     .cf-rating-text-lower {
       flex: 1;

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;
@@ -398,9 +404,7 @@ declare const MultiChoice: ({
 }: MultiChoiceProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/presentation/Flow.d.ts
-type ChildField = ({
-  onChange
-}: {
+type ChildField = (_: {
   onChange: (answer: Answer) => void;
   question: Question$1;
   error?: string;
@@ -409,11 +413,13 @@ interface FlowProps {
   onSubmit: (answer: Answer) => void;
   children: ChildField;
   question: Question$1;
+  isLastQuestion: boolean;
 }
 declare const Flow: ({
   onSubmit,
   children,
-  question
+  question,
+  isLastQuestion
 }: FlowProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/presentation/Embed.d.ts
@@ -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(), []);
@@ -186,7 +192,7 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, meta
 			setSurvey(parseResult.data);
 		});
 		if (!respondent && !internalRespondentId) return;
-		client$1.get(`v1/cfti/${surveyId}/respondent/${respondent ?? internalRespondentId}`).json().then((data) => {
+		client$1.get(`v1/cfti/${surveyId}/respondent/${respondent || internalRespondentId}`).json().then((data) => {
 			const parseResult = publicGetRespondentOutputSchema.safeParse(data);
 			if (!parseResult.success) {
 				setLastRespondedAt(null);
@@ -203,7 +209,7 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, meta
 	]);
 	const submit = useCallback(async ({ answers }) => {
 		await client$1.put(`v1/cfti/${surveyId}/response/${responseId}`, { json: {
-			respondent: respondent ?? internalRespondentId,
+			respondent: respondent || internalRespondentId,
 			data: answers,
 			metadata
 		} });
@@ -351,11 +357,12 @@ const getNextQuestionState = ({ originalQuestions, answers, errors, pointer = -1
 	for (let i = 0; i < questions.length; i++) {
 		const question = questions[i];
 		if (!question) continue;
-		question.visible = isVisible({
+		const visible = isVisible({
 			index: i,
 			questions,
 			answers
 		});
+		question.visible = pointer === i || visible;
 	}
 	let nextIndex = questions.findIndex((q, i) => i > pointer && q.visible && answers[q.id] === void 0);
 	if (nextIndex === -1) nextIndex = questions.findLastIndex((q) => !!q.visible);
@@ -466,13 +473,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 +490,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),
@@ -1094,7 +1109,7 @@ const getInitialState = (type) => {
 		default: return "";
 	}
 };
-const Flow = ({ onSubmit, children, question }) => {
+const Flow = ({ onSubmit, children, question, isLastQuestion }) => {
 	const [answer, setAnswer] = useState(getInitialState(question.properties.type));
 	const validator = useMemo(() => getAnswerValidator(question.properties, { required: question.required }), [question.properties, question.required]);
 	const error = useMemo(() => {
@@ -1102,13 +1117,30 @@ const Flow = ({ onSubmit, children, question }) => {
 		if (parseResult.success) return;
 		return prettifyError(parseResult.error);
 	}, [answer, validator]);
+	const hasNextQuestion = useMemo(() => {
+		const rule = question.routingLogic;
+		if (rule.type !== "always" && (answer === "" || Array.isArray(answer) && answer.length === 0) && question.required) return true;
+		const match = rule.type === "always" ? rule.target : rule.cases.find((condition) => evaluateCondition({
+			answer,
+			condition
+		}))?.target ?? rule.default;
+		if (match.type === "end") return false;
+		if (match.type === "next") return !isLastQuestion;
+		return true;
+	}, [
+		answer,
+		isLastQuestion,
+		question.required,
+		question.routingLogic
+	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [children({
 		onChange: setAnswer,
 		question,
 		error
 	}), /* @__PURE__ */ jsx(SubmitButton, {
 		isDisabled: !!error,
-		onPress: () => onSubmit(answer)
+		onPress: () => onSubmit(answer),
+		children: hasNextQuestion ? "Next" : "Submit"
 	})] });
 };
 
@@ -1158,10 +1190,12 @@ const PopoverConfetti = ({ closeOnFinishMs, ...props }) => {
 					props.onFinished?.();
 				},
 				children: ({ current, questions, update, isSubmitted }) => {
+					const isLastQuestion = current === questions.length - 1;
 					if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
 					const currentQuestion = questions[current];
 					if (!currentQuestion) return /* @__PURE__ */ jsx(Fragment, {});
 					return /* @__PURE__ */ jsx(Flow, {
+						isLastQuestion,
 						question: currentQuestion,
 						onSubmit: (answer) => {
 							return update({
@@ -1184,10 +1218,12 @@ const StepperConfetti = (props) => {
 		...props,
 		shouldAutoSubmit: true,
 		children: ({ current, questions, update, isSubmitted }) => {
+			const isLastQuestion = current === questions.length - 1;
 			if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
 			const currentQuestion = questions[current];
 			if (!currentQuestion) return /* @__PURE__ */ jsx(Fragment, {});
 			return /* @__PURE__ */ jsx(Flow, {
+				isLastQuestion,
 				question: currentQuestion,
 				onSubmit: (answer) => {
 					return update({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/confetti",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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": {