@web-site-utilities/feedback 0.0.12 → 0.0.15

package/dist/common/hooks/useStepper.d.ts

@@ -11,6 +11,7 @@ type UseStepperProps = {
 export declare const useStepper: (props: UseStepperProps) => {
     step: number;
     errors: FormError[];
+    isLastStep: boolean;
     onContinue: () => void;
     onBack: () => void;
 };

package/dist/form/App.d.ts

@@ -8,5 +8,5 @@ export declare const App: (props: AppProps) => string | React.FunctionComponentE
     theme: typeof import("@web-site-utilities/common/theme/ThemeProvider").theme;
     selectedVariant?: import("@web-site-utilities/common/theme/ThemeProvider").Variants;
     children: React.ReactNode;
-}>;
+}> | null;
 export {};

package/dist/form/features/InPlaceForm/InPlaceForm.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { FormConfigTheme, InlineForm } from '@web-site-utilities/common/types/FormConfig';
-import { Nullable } from '@web-site-utilities/common/types/Nullable';
+import { FormConfigTheme, InlineForm } from "@web-site-utilities/common/types/FormConfig";
+import { Nullable } from "@web-site-utilities/common/types/Nullable";
 export type InPlaceFormProps = {
     formId: string;
     domainId: string;

package/dist/index.cjs.js

@@ -2934,6 +2934,7 @@ const useStepper = (props) => {
   return {
     step,
     errors,
+    isLastStep: step === props.stepsCount,
     onContinue,
     onBack
   };
@@ -3756,12 +3757,15 @@ const InPlaceForm = (props) => {
     []
   );
   const [maxHeight, setMaxHeight] = React.useState(null);
-  const onSetMaxHeight = React.useCallback((h) => {
-    setMaxHeight((stateHeight) => {
-      if (!stateHeight || stateHeight < h) return h;
-      return stateHeight;
-    });
-  }, [setMaxHeight, props.inlineForm.form.steps]);
+  const onSetMaxHeight = React.useCallback(
+    (h) => {
+      setMaxHeight((stateHeight) => {
+        if (!stateHeight || stateHeight < h) return h;
+        return stateHeight;
+      });
+    },
+    [setMaxHeight, props.inlineForm.form.steps]
+  );
   const populatedForm = useForm({
     form: props.inlineForm.form,
     formId: props.formId,
@@ -3807,7 +3811,7 @@ const InPlaceForm = (props) => {
       React.createElement(Footer$1, {
         children: [
           React.createElement(Button, {
-            children: "Back",
+            children: props.inlineForm.config.previousButtonText,
             disabled: stepper.step === 0,
             onClick: stepper.onBack
           }),
@@ -3816,7 +3820,7 @@ const InPlaceForm = (props) => {
             currentStepIndex: stepper.step
           }),
           React.createElement(Button, {
-            children: "Continue",
+            children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
             onClick: stepper.onContinue
           })
         ]
@@ -4054,12 +4058,14 @@ const PopupForm = (props) => {
   });
 };
 const App = (props) => {
+  const [isClient, setIsClient] = React.useState(false);
   props.locale ?? "en-US";
   let { data, loading, error } = useRequest(
     () => getFormConfigMock({
       formId: props.formId
     })
   );
+  React.useEffect(() => setIsClient(true), []);
   const inPlaceForm = React.useMemo(() => {
     if (!(data == null ? void 0 : data.inlineForm)) return null;
     return React.createElement(InPlaceForm, {
@@ -4080,6 +4086,7 @@ const App = (props) => {
       popupForm: data.popupForm
     });
   }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+  if (!isClient) return null;
   if (!data && loading) return "Loading...";
   if (!data || error) return error ? error.message : "Unknown error";
   return React.createElement(ThemeProvider, {

package/dist/index.es.js

@@ -2932,6 +2932,7 @@ const useStepper = (props) => {
   return {
     step,
     errors,
+    isLastStep: step === props.stepsCount,
     onContinue,
     onBack
   };
@@ -3754,12 +3755,15 @@ const InPlaceForm = (props) => {
     []
   );
   const [maxHeight, setMaxHeight] = React.useState(null);
-  const onSetMaxHeight = useCallback((h) => {
-    setMaxHeight((stateHeight) => {
-      if (!stateHeight || stateHeight < h) return h;
-      return stateHeight;
-    });
-  }, [setMaxHeight, props.inlineForm.form.steps]);
+  const onSetMaxHeight = useCallback(
+    (h) => {
+      setMaxHeight((stateHeight) => {
+        if (!stateHeight || stateHeight < h) return h;
+        return stateHeight;
+      });
+    },
+    [setMaxHeight, props.inlineForm.form.steps]
+  );
   const populatedForm = useForm({
     form: props.inlineForm.form,
     formId: props.formId,
@@ -3805,7 +3809,7 @@ const InPlaceForm = (props) => {
       React.createElement(Footer$1, {
         children: [
           React.createElement(Button, {
-            children: "Back",
+            children: props.inlineForm.config.previousButtonText,
             disabled: stepper.step === 0,
             onClick: stepper.onBack
           }),
@@ -3814,7 +3818,7 @@ const InPlaceForm = (props) => {
             currentStepIndex: stepper.step
           }),
           React.createElement(Button, {
-            children: "Continue",
+            children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
             onClick: stepper.onContinue
           })
         ]
@@ -4052,12 +4056,14 @@ const PopupForm = (props) => {
   });
 };
 const App = (props) => {
+  const [isClient, setIsClient] = React.useState(false);
   props.locale ?? "en-US";
   let { data, loading, error } = useRequest(
     () => getFormConfigMock({
       formId: props.formId
     })
   );
+  React.useEffect(() => setIsClient(true), []);
   const inPlaceForm = useMemo(() => {
     if (!(data == null ? void 0 : data.inlineForm)) return null;
     return React.createElement(InPlaceForm, {
@@ -4078,6 +4084,7 @@ const App = (props) => {
       popupForm: data.popupForm
     });
   }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+  if (!isClient) return null;
   if (!data && loading) return "Loading...";
   if (!data || error) return error ? error.message : "Unknown error";
   return React.createElement(ThemeProvider, {

package/dist/index.iife.js

@@ -2932,6 +2932,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     return {
       step,
       errors,
+      isLastStep: step === props.stepsCount,
       onContinue,
       onBack
     };
@@ -3754,12 +3755,15 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       []
     );
     const [maxHeight, setMaxHeight] = React2.useState(null);
-    const onSetMaxHeight = React2.useCallback((h) => {
-      setMaxHeight((stateHeight) => {
-        if (!stateHeight || stateHeight < h) return h;
-        return stateHeight;
-      });
-    }, [setMaxHeight, props.inlineForm.form.steps]);
+    const onSetMaxHeight = React2.useCallback(
+      (h) => {
+        setMaxHeight((stateHeight) => {
+          if (!stateHeight || stateHeight < h) return h;
+          return stateHeight;
+        });
+      },
+      [setMaxHeight, props.inlineForm.form.steps]
+    );
     const populatedForm = useForm({
       form: props.inlineForm.form,
       formId: props.formId,
@@ -3805,7 +3809,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
         React2.createElement(Footer$1, {
           children: [
             React2.createElement(Button, {
-              children: "Back",
+              children: props.inlineForm.config.previousButtonText,
               disabled: stepper.step === 0,
               onClick: stepper.onBack
             }),
@@ -3814,7 +3818,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
               currentStepIndex: stepper.step
             }),
             React2.createElement(Button, {
-              children: "Continue",
+              children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
               onClick: stepper.onContinue
             })
           ]
@@ -4052,12 +4056,14 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     });
   };
   const App = (props) => {
+    const [isClient, setIsClient] = React2.useState(false);
     props.locale ?? "en-US";
     let { data, loading, error } = useRequest(
       () => getFormConfigMock({
         formId: props.formId
       })
     );
+    React2.useEffect(() => setIsClient(true), []);
     const inPlaceForm = React2.useMemo(() => {
       if (!(data == null ? void 0 : data.inlineForm)) return null;
       return React2.createElement(InPlaceForm, {
@@ -4078,6 +4084,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
         popupForm: data.popupForm
       });
     }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+    if (!isClient) return null;
     if (!data && loading) return "Loading...";
     if (!data || error) return error ? error.message : "Unknown error";
     return React2.createElement(ThemeProvider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-site-utilities/feedback",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "workspaces": [
     "src/**",
     "examples/**"