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 | 2x 56x 56x 56x 17x 17x 17x 56x 36x 56x 13x 13x 56x 6x 6x 56x 56x | import { useState, useCallback, useMemo } from 'react';
import { useSettingForm } from './use-setting-form';
import type { BillingFormData } from '../schemas/billing.schema';
import { billingSchema } from '../schemas/billing.schema';
export const useBillingSettings = () => {
const [showForm, setShowForm] = useState(false);
const settingForm = useSettingForm<BillingFormData>(billingSchema, {
successMessage: 'Billing information updated successfully!',
defaultValues: {
cardNumber: '',
expiryDate: '',
cvv: '',
holderName: '',
},
});
const submitBilling = useCallback(
async (data: BillingFormData): Promise<void> => {
// TODO: Call API to save billing information
console.log('Saving billing information:', data);
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000));
// Hide form on successful submission
setShowForm(false);
},
[]
);
const handleSubmit = useMemo(() => {
return settingForm.handleFormSubmit(submitBilling);
}, [settingForm, submitBilling]);
const handleEditCard = useCallback(() => {
setShowForm(true);
settingForm.clearMessages();
}, [settingForm]);
const handleCancel = useCallback(() => {
setShowForm(false);
settingForm.clearMessages();
}, [settingForm]);
// Destructure and exclude 'form' and 'handleFormSubmit' from the returned object
const { form, handleFormSubmit, ...settingFormMethods } = settingForm;
return {
// Form state and methods (excluding internal form object)
...settingFormMethods,
// Billing-specific state
showForm,
// Billing-specific actions
handleSubmit,
handleEditCard,
handleCancel,
// Computed values
isSubmitting: settingForm.formState.isSubmitting,
};
};
|