Fixing wizard validation (#6068)

packages/ui/v2/core/Stepper.tsx

@@ -1,3 +1,4 @@
+import { TFunction } from "next-i18next";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -11,8 +12,12 @@ function Stepper<T extends DefaultStep>(props: {
   step: number;
   steps: T[];
   disableSteps?: boolean;
+  t?: TFunction;
 }) {
-  const { t } = useLocale();
+  let { t } = useLocale();
+  if (props.t) {
+    t = props.t;
+  }
   const { href, steps } = props;
   return (
     <>

packages/ui/v2/core/WizardForm.tsx

@@ -1,3 +1,4 @@
+import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
@@ -18,9 +19,13 @@ function WizardForm<T extends DefaultStep>(props: {
   steps: T[];
   disableNavigation?: boolean;
   containerClassname?: string;
+  t?: TFunction;
 }) {
   const { href, steps } = props;
-  const { t } = useLocale();
+  let { t } = useLocale();
+  if (props.t) {
+    t = props.t;
+  }
   const router = useRouter();
   const step = parseInt((router.query.step as string) || "1");
   const currentStep = steps[step - 1];
@@ -63,10 +68,7 @@ function WizardForm<T extends DefaultStep>(props: {
                   type="submit"
                   color="primary"
                   form={`wizard-step-${step}`}
-                  className="relative ml-2"
-                  onClick={() => {
-                    setStep(step + 1);
-                  }}>
+                  className="relative ml-2">
                   {step < steps.length ? t("next_step_text") : t("finish")}
                 </Button>
               </div>
@@ -76,7 +78,7 @@ function WizardForm<T extends DefaultStep>(props: {
       </div>
       {!props.disableNavigation && (
         <div className="print:hidden">
-          <Stepper href={href} step={step} steps={steps} disableSteps />
+          <Stepper href={href} step={step} steps={steps} disableSteps t={t} />
         </div>
       )}
     </div>