88f223bf08
feat(marketing): enhance step components with validity reporting - Added onValidityChange prop to multiple step components (BenefitsStep, ChallengesStep, ChartStep, ContactsStep, FeaturesStep, FooterStep, HeroStep) to handle form validity. - Updated respective presenter hooks to utilize the new onValidityChange functionality for real-time validity reporting. - Enhanced MarketingForm to manage step validity and disable the next button based on current step validity.
50 lines
1023 B
TypeScript
50 lines
1023 B
TypeScript
"use client";
|
|
import { ForwardedRef, useImperativeHandle } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import useReportStepValidity from "./useReportStepValidity";
|
|
|
|
export interface IHeroStepFields {
|
|
title: string;
|
|
description: string;
|
|
button_text: string;
|
|
button_link: string;
|
|
gif_file: string;
|
|
}
|
|
|
|
const useHeroStepPresenter = (
|
|
initialData?: IHeroStepFields,
|
|
ref?: ForwardedRef<unknown>,
|
|
onValidityChange?: (valid: boolean) => void,
|
|
) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isValid },
|
|
getValues,
|
|
trigger,
|
|
} = useForm<IHeroStepFields>({
|
|
defaultValues: initialData,
|
|
mode: "onChange",
|
|
});
|
|
|
|
useReportStepValidity(isValid, onValidityChange);
|
|
|
|
const onSubmit = (data: IHeroStepFields) => {
|
|
console.log(data);
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
getData: () => getValues(),
|
|
validate: () => trigger(),
|
|
}));
|
|
|
|
return {
|
|
register,
|
|
handleSubmit,
|
|
errors,
|
|
onSubmit,
|
|
};
|
|
};
|
|
|
|
export default useHeroStepPresenter;
|