<Formik
    initialValues={{ email: '', phone: '', firstName: '', lastName: '' }}
    validationSchema={validationSchema}
    onSubmit={handleSubmit}
    render={({ isSubmitting }) => (
        <Form className="form">
            <EmailField
                className="form__input form__input__email"
                label="Email"
                sublabel="Tickets will be sent to this email"
                placeholder="Your email address"
                name="email"
                disabled={isSubmitting}
                required
            />
            <PhoneField
                className="form__input form__input__phone"
                label="Phone Number"
                placeholder="0811-2345-66788"
                name="phone"
                disabled={isSubmitting}
                required
            />
            <TextField
                className="form__input form__input__first-name"
                label="First Name"
                placeholder="First name"
                name="firstName"
                disabled={isSubmitting}
                required
            />
            <TextField
                className="form__input form__input__last-name"
                label="Last Name"
                placeholder="Last name"
                name="lastName"
                disabled={isSubmitting}
                required
            />
            <Button className="form__navigation__continue" type="submit" variant="success" loading={isSubmitting}>
                Continue
            </Button>
        </Form>
    )}
/>

it('should navigate when submit button clicked', () => {
    const mockOnSessionChange = jest.fn();
    const mockOnNavigate = jest.fn();
    const { container } = renderComponent({ onSessionChange: mockOnSessionChange, onNavigate: mockOnNavigate });
    const emailInput = container.querySelector('input[name="email"]');
    const phoneInput = container.querySelector('input[name="phone"]');
    const firstNameInput = container.querySelector('input[name="firstName"]');
    const lastNameInput = container.querySelector('input[name="lastName"]');
    const submitButton = container.querySelector('button[type="submit"]');
    fireEvent.change(emailInput, { persist: jest.fn(), target: { value: 'email@example.com' } });
    fireEvent.change(phoneInput, { persist: jest.fn(), target: { value: '0811234566788' } });
    fireEvent.change(firstNameInput, { persist: jest.fn(), target: { value: 'First Name' } });
    fireEvent.change(lastNameInput, { persist: jest.fn(), target: { value: 'Last Name' } });
    fireEvent.click(submitButton);
    expect(mockOnSessionChange).toHaveBeenCalledWith(session);
    expect(mockOnNavigate).toHaveBeenCalledWith(`/orders/${order.number}/${session}`);
});