@pinhadev/pinha-quiz-builder-pkg 0.1.0 → 0.1.1

package/dist/index.js

@@ -4074,7 +4074,7 @@ function PresetOrCustomColorField({
 }
 
 // src/v2/QuizV2.tsx
-var import_react13 = require("react");
+var import_react13 = __toESM(require("react"));
 var import_formik3 = require("formik");
 var import_styled_components9 = require("styled-components");
 
@@ -6196,6 +6196,213 @@ var EmptyState = import_styled_components8.default.div`
 
 // src/v2/QuizV2.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
+var QuizContent = import_react13.default.memo(function QuizContent2({
+  data,
+  pages,
+  currentPageIndex,
+  setCurrentPageIndex,
+  safePageIndex,
+  headerSectionIds,
+  footerSectionIds,
+  rootSectionIds,
+  sectionsById,
+  collectInputFieldNames,
+  withDefaultTracking,
+  onSubmit,
+  layoutMaxWidth,
+  quizTitle,
+  quizDescription
+}) {
+  const { validateForm, setTouched, submitForm, values } = (0, import_formik3.useFormikContext)();
+  const { trackEvent, trackFormSubmission } = useDefaultFormTracking();
+  const handleAction = (0, import_react13.useCallback)(
+    async (action) => {
+      if (withDefaultTracking) {
+        trackEvent({
+          event_type: "action_trigger",
+          step: currentPageIndex,
+          metadata: {
+            ...values,
+            action_type: action.type,
+            target_page_index: action.targetPageIndex
+          }
+        });
+      }
+      switch (action.type) {
+        case "goToPage":
+          if (action.targetPageIndex != null) {
+            const allSectionIds = [
+              ...headerSectionIds,
+              ...rootSectionIds,
+              ...footerSectionIds
+            ];
+            const currentPageFieldNames = collectInputFieldNames(allSectionIds);
+            const validationErrors = await validateForm();
+            const touchedFields = {};
+            currentPageFieldNames.forEach((fieldName) => {
+              touchedFields[fieldName] = true;
+            });
+            setTouched(touchedFields);
+            const hasErrors = currentPageFieldNames.some(
+              (fieldName) => validationErrors[fieldName]
+            );
+            if (hasErrors) {
+              if (withDefaultTracking) {
+                trackEvent({
+                  event_type: "validation_error",
+                  step: currentPageIndex,
+                  metadata: {
+                    ...values,
+                    errors: validationErrors
+                  }
+                });
+              }
+              setTimeout(() => {
+                const firstErrorField = document.querySelector('[data-error="true"]');
+                if (firstErrorField) {
+                  firstErrorField.scrollIntoView({ behavior: "smooth", block: "center" });
+                }
+              }, 100);
+              return;
+            }
+            const targetIndex = Math.max(0, Math.min(action.targetPageIndex, pages.length - 1));
+            if (withDefaultTracking) {
+              trackEvent({
+                event_type: "step_complete",
+                step: currentPageIndex,
+                metadata: values
+              });
+            }
+            setCurrentPageIndex(targetIndex);
+            if (withDefaultTracking) {
+              trackEvent({
+                event_type: "step_view",
+                step: targetIndex,
+                metadata: values
+              });
+            }
+          }
+          break;
+        case "toThankYouPage":
+          const thankYouPageIndex = pages.findIndex((p) => p.type === "thankYou");
+          if (withDefaultTracking) {
+            trackEvent({
+              event_type: "form_submission",
+              step: currentPageIndex,
+              metadata: values
+            });
+            trackFormSubmission(values, data.id);
+          }
+          if (thankYouPageIndex !== -1) {
+            setCurrentPageIndex(thankYouPageIndex);
+            await submitForm();
+          } else {
+            await submitForm();
+          }
+          break;
+        case "toRedirectionPage":
+          const redirectionPageIndex = pages.findIndex((p) => p.type === "redirection");
+          if (withDefaultTracking) {
+            trackEvent({
+              event_type: "redirection_trigger",
+              step: currentPageIndex,
+              metadata: values
+            });
+          }
+          if (redirectionPageIndex !== -1) {
+            setCurrentPageIndex(redirectionPageIndex);
+            if (withDefaultTracking) {
+              trackEvent({
+                event_type: "step_view",
+                step: redirectionPageIndex,
+                metadata: values
+              });
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [validateForm, setTouched, submitForm, headerSectionIds, rootSectionIds, footerSectionIds, collectInputFieldNames, pages, setCurrentPageIndex, trackEvent, currentPageIndex, values, withDefaultTracking, data.id, trackFormSubmission]
+  );
+  const handleButtonClick = (0, import_react13.useCallback)(
+    (button) => {
+      if (!button.onClick) return;
+      handleAction(button.onClick);
+    },
+    [handleAction]
+  );
+  const handleSelectAction = (0, import_react13.useCallback)(
+    (action) => {
+      handleAction(action);
+    },
+    [handleAction]
+  );
+  (0, import_react13.useEffect)(() => {
+    const currentPage2 = pages[safePageIndex];
+    if (currentPage2?.type === "thankYou" && onSubmit) {
+      submitForm();
+    }
+  }, [safePageIndex, pages, onSubmit, submitForm]);
+  const theme2 = (0, import_styled_components9.useTheme)();
+  const currentPage = pages[safePageIndex] ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_formik3.Form, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(QuizContainer, { $maxWidth: layoutMaxWidth === "medium" || !layoutMaxWidth ? "medium" : layoutMaxWidth, children: [
+    (quizTitle || quizDescription) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Header, { children: [
+      quizTitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Title, { children: quizTitle }),
+      quizDescription && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Description, { children: quizDescription })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionGroup, { id: "header-generator", children: headerSectionIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      SectionTreeRenderer,
+      {
+        sectionId: id,
+        sectionsById,
+        onButtonClick: handleButtonClick,
+        onSelectAction: handleSelectAction,
+        isBuilderMode: false,
+        totalPages: pages.length,
+        currentPageIndex
+      },
+      id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SectionGroup, { id: "main-content-generator", children: [
+      currentPage?.type === "redirection" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        RedirectionPage,
+        {
+          redirectUrl: currentPage.redirectUrl || "https://example.com",
+          countdownSeconds: currentPage.redirectCountdownSeconds
+        }
+      ),
+      currentPage?.type === "thankYou" && rootSectionIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThankYouPage, {}),
+      rootSectionIds.length === 0 && currentPage?.type !== "redirection" && currentPage?.type !== "thankYou" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(EmptyState, { children: "This page has no content." }) : rootSectionIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        SectionTreeRenderer,
+        {
+          sectionId: id,
+          sectionsById,
+          onButtonClick: handleButtonClick,
+          onSelectAction: handleSelectAction,
+          isBuilderMode: false,
+          totalPages: pages.length,
+          currentPageIndex
+        },
+        id
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionGroup, { id: "footer-generator", children: footerSectionIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      SectionTreeRenderer,
+      {
+        sectionId: id,
+        sectionsById,
+        onButtonClick: handleButtonClick,
+        onSelectAction: handleSelectAction,
+        isBuilderMode: false,
+        totalPages: pages.length,
+        currentPageIndex
+      },
+      id
+    )) })
+  ] }) });
+});
 function QuizV2Content({
   data,
   onSubmit,
@@ -6205,13 +6412,13 @@ function QuizV2Content({
 }) {
   const [internalPageIndex, setInternalPageIndex] = (0, import_react13.useState)(0);
   const currentPageIndex = controlledPageIndex !== void 0 ? controlledPageIndex : internalPageIndex;
-  const setCurrentPageIndex = (index) => {
+  const setCurrentPageIndex = (0, import_react13.useCallback)((index) => {
     if (controlledPageIndex !== void 0 && onPageChange) {
       onPageChange(index);
     } else {
       setInternalPageIndex(index);
     }
-  };
+  }, [controlledPageIndex, onPageChange]);
   const pages = data.pages ?? [];
   const sections = data.sections ?? [];
   const layouts = data.layouts ?? [];
@@ -6222,10 +6429,10 @@ function QuizV2Content({
   const safePageIndex = pages.length === 0 ? 0 : Math.min(currentPageIndex, pages.length - 1);
   const currentPage = pages[safePageIndex] ?? null;
   const resolvedLayout = resolveLayoutForPage(layouts, currentPage);
-  const headerSectionIds = resolvedLayout?.headerSectionIds ?? [];
-  const footerSectionIds = resolvedLayout?.footerSectionIds ?? [];
-  const rootSectionIds = currentPage?.sectionIds ?? [];
-  const sectionsById = getSectionsById(sections);
+  const headerSectionIds = (0, import_react13.useMemo)(() => resolvedLayout?.headerSectionIds ?? [], [resolvedLayout]);
+  const footerSectionIds = (0, import_react13.useMemo)(() => resolvedLayout?.footerSectionIds ?? [], [resolvedLayout]);
+  const rootSectionIds = (0, import_react13.useMemo)(() => currentPage?.sectionIds ?? [], [currentPage]);
+  const sectionsById = (0, import_react13.useMemo)(() => getSectionsById(sections), [sections]);
   const initialValues = (0, import_react13.useMemo)(() => {
     const values = {};
     sections.forEach((section) => {
@@ -6278,213 +6485,6 @@ function QuizV2Content({
     },
     [sectionsById]
   );
-  function QuizContent({
-    data: data2,
-    pages: pages2,
-    currentPageIndex: currentPageIndex2,
-    setCurrentPageIndex: setCurrentPageIndex2,
-    safePageIndex: safePageIndex2,
-    headerSectionIds: headerSectionIds2,
-    footerSectionIds: footerSectionIds2,
-    rootSectionIds: rootSectionIds2,
-    sectionsById: sectionsById2,
-    collectInputFieldNames: collectInputFieldNames2,
-    withDefaultTracking: withDefaultTracking2,
-    onSubmit: onSubmit2,
-    layoutMaxWidth: layoutMaxWidth2,
-    quizTitle: quizTitle2,
-    quizDescription: quizDescription2
-  }) {
-    const { validateForm, setTouched, submitForm, values } = (0, import_formik3.useFormikContext)();
-    const { trackEvent, trackFormSubmission } = useDefaultFormTracking();
-    const handleAction = (0, import_react13.useCallback)(
-      async (action) => {
-        if (withDefaultTracking2) {
-          trackEvent({
-            event_type: "action_trigger",
-            step: currentPageIndex2,
-            metadata: {
-              ...values,
-              action_type: action.type,
-              target_page_index: action.targetPageIndex
-            }
-          });
-        }
-        switch (action.type) {
-          case "goToPage":
-            if (action.targetPageIndex != null) {
-              const allSectionIds = [
-                ...headerSectionIds2,
-                ...rootSectionIds2,
-                ...footerSectionIds2
-              ];
-              const currentPageFieldNames = collectInputFieldNames2(allSectionIds);
-              const validationErrors = await validateForm();
-              const touchedFields = {};
-              currentPageFieldNames.forEach((fieldName) => {
-                touchedFields[fieldName] = true;
-              });
-              setTouched(touchedFields);
-              const hasErrors = currentPageFieldNames.some(
-                (fieldName) => validationErrors[fieldName]
-              );
-              if (hasErrors) {
-                if (withDefaultTracking2) {
-                  trackEvent({
-                    event_type: "validation_error",
-                    step: currentPageIndex2,
-                    metadata: {
-                      ...values,
-                      errors: validationErrors
-                    }
-                  });
-                }
-                setTimeout(() => {
-                  const firstErrorField = document.querySelector('[data-error="true"]');
-                  if (firstErrorField) {
-                    firstErrorField.scrollIntoView({ behavior: "smooth", block: "center" });
-                  }
-                }, 100);
-                return;
-              }
-              const targetIndex = Math.max(0, Math.min(action.targetPageIndex, pages2.length - 1));
-              if (withDefaultTracking2) {
-                trackEvent({
-                  event_type: "step_complete",
-                  step: currentPageIndex2,
-                  metadata: values
-                });
-              }
-              setCurrentPageIndex2(targetIndex);
-              if (withDefaultTracking2) {
-                trackEvent({
-                  event_type: "step_view",
-                  step: targetIndex,
-                  metadata: values
-                });
-              }
-            }
-            break;
-          case "toThankYouPage":
-            const thankYouPageIndex = pages2.findIndex((p) => p.type === "thankYou");
-            if (withDefaultTracking2) {
-              trackEvent({
-                event_type: "form_submission",
-                step: currentPageIndex2,
-                metadata: values
-              });
-              trackFormSubmission(values, data2.id);
-            }
-            if (thankYouPageIndex !== -1) {
-              setCurrentPageIndex2(thankYouPageIndex);
-              await submitForm();
-            } else {
-              await submitForm();
-            }
-            break;
-          case "toRedirectionPage":
-            const redirectionPageIndex = pages2.findIndex((p) => p.type === "redirection");
-            if (withDefaultTracking2) {
-              trackEvent({
-                event_type: "redirection_trigger",
-                step: currentPageIndex2,
-                metadata: values
-              });
-            }
-            if (redirectionPageIndex !== -1) {
-              setCurrentPageIndex2(redirectionPageIndex);
-              if (withDefaultTracking2) {
-                trackEvent({
-                  event_type: "step_view",
-                  step: redirectionPageIndex,
-                  metadata: values
-                });
-              }
-            }
-            break;
-          default:
-            break;
-        }
-      },
-      [validateForm, setTouched, submitForm, headerSectionIds2, rootSectionIds2, footerSectionIds2, collectInputFieldNames2, pages2, setCurrentPageIndex2, trackEvent, currentPageIndex2, values, withDefaultTracking2, data2.id, trackFormSubmission]
-    );
-    const handleButtonClick = (0, import_react13.useCallback)(
-      (button) => {
-        if (!button.onClick) return;
-        handleAction(button.onClick);
-      },
-      [handleAction]
-    );
-    const handleSelectAction = (0, import_react13.useCallback)(
-      (action) => {
-        handleAction(action);
-      },
-      [handleAction]
-    );
-    (0, import_react13.useEffect)(() => {
-      const currentPage3 = pages2[safePageIndex2];
-      if (currentPage3?.type === "thankYou" && onSubmit2) {
-        submitForm();
-      }
-    }, [safePageIndex2, pages2, onSubmit2, submitForm]);
-    const theme2 = (0, import_styled_components9.useTheme)();
-    const currentPage2 = pages2[safePageIndex2] ?? null;
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_formik3.Form, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(QuizContainer, { $maxWidth: layoutMaxWidth2 === "medium" || !layoutMaxWidth2 ? "medium" : layoutMaxWidth2, children: [
-      (quizTitle2 || quizDescription2) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Header, { children: [
-        quizTitle2 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Title, { children: quizTitle2 }),
-        quizDescription2 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Description, { children: quizDescription2 })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionGroup, { id: "header-generator", children: headerSectionIds2.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        SectionTreeRenderer,
-        {
-          sectionId: id,
-          sectionsById: sectionsById2,
-          onButtonClick: handleButtonClick,
-          onSelectAction: handleSelectAction,
-          isBuilderMode: false,
-          totalPages: pages2.length,
-          currentPageIndex: currentPageIndex2
-        },
-        id
-      )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SectionGroup, { id: "main-content-generator", children: [
-        currentPage2?.type === "redirection" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          RedirectionPage,
-          {
-            redirectUrl: currentPage2.redirectUrl || "https://example.com",
-            countdownSeconds: currentPage2.redirectCountdownSeconds
-          }
-        ),
-        currentPage2?.type === "thankYou" && rootSectionIds2.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThankYouPage, {}),
-        rootSectionIds2.length === 0 && currentPage2?.type !== "redirection" && currentPage2?.type !== "thankYou" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(EmptyState, { children: "This page has no content." }) : rootSectionIds2.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          SectionTreeRenderer,
-          {
-            sectionId: id,
-            sectionsById: sectionsById2,
-            onButtonClick: handleButtonClick,
-            onSelectAction: handleSelectAction,
-            isBuilderMode: false,
-            totalPages: pages2.length,
-            currentPageIndex: currentPageIndex2
-          },
-          id
-        ))
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionGroup, { id: "footer-generator", children: footerSectionIds2.map((id) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        SectionTreeRenderer,
-        {
-          sectionId: id,
-          sectionsById: sectionsById2,
-          onButtonClick: handleButtonClick,
-          onSelectAction: handleSelectAction,
-          isBuilderMode: false,
-          totalPages: pages2.length,
-          currentPageIndex: currentPageIndex2
-        },
-        id
-      )) })
-    ] }) });
-  }
   if (pages.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(EmptyState, { children: "No pages yet." });
   }