Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 1x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 26x 9x 9x 26x 26x 1x 1x 26x 1x 26x | import { useEffect, useMemo, useRef } from "react";
import NiceModal from "@ebay/nice-modal-react";
import { cloneDeep, isEqual } from "lodash";
import { TERMS_OF_SERVICE_MODAL } from "modals/modal_names";
import { useCalculatePercentage } from "@common/SignUp/useCalculatePercentage";
import useSignup from "@hooks/onboarding/useSignup";
import { useFormData } from "@components/Signup/Forms/SignupFormProvider";
type Args = {
handleNext: () => void;
handleBack: () => void;
handleUpdateStatusValue: (value: number) => void;
};
export const useSignupOrganizationDetails = ({
handleNext,
handleBack,
handleUpdateStatusValue,
}: Args) => {
const { setFormValues, formData } = useFormData();
const { calculatePercentageNested } = useCalculatePercentage({
isEdit: false,
});
const {
methods,
schema,
onSubmit,
handleChangeStatus,
isLoading,
isSuccess,
} = useSignup({ handleNext });
const saveOnUnmount = useRef<any>();
const {
watch,
setValue,
formState: { isValid, dirtyFields, errors },
} = methods;
const values = watch();
/** Back */
const goBackHandler = () => {
setFormValues("organizationDetails", values);
handleBack();
};
/** Terms modal */
const openTermsConditions = (e: React.MouseEvent<HTMLDivElement>) => {
e.preventDefault();
NiceModal.show(TERMS_OF_SERVICE_MODAL, {
agree: () =>
setValue("termsConditions", true, {
shouldDirty: true,
shouldValidate: true,
shouldTouch: true,
}),
});
};
/** Progress calculation */
useEffect(() => {
(async () => {
const shouldUpdate =
Object.keys(dirtyFields).length > 0 &&
!isEqual(values, saveOnUnmount.current);
if (shouldUpdate) {
const value = await calculatePercentageNested(schema, values);
handleUpdateStatusValue(value);
}
saveOnUnmount.current = cloneDeep(values);
})();
}, [values, dirtyFields]);
/** Persist on unmount */
useEffect(() => {
return () => {
setFormValues("organizationDetails", saveOnUnmount.current);
};
}, []);
/** Logo preview */
const merchantLogo = useMemo(
() => values.logo && URL.createObjectURL(values.logo as any),
[values.logo],
);
return {
methods,
errors,
values,
formData,
merchantLogo,
isValid,
isLoading,
isSuccess,
onSubmit,
handleChangeStatus,
goBackHandler,
openTermsConditions,
};
};
|