import {jsxs,jsx}from'react/jsx-runtime';import {useRef}from'react';import {ToastContainer}from'react-toastify';import {useNavigate,Link}from'@remix-run/react';import {FaSearch}from'@react-icons/all-files/fa/FaSearch.js';import emailjs from'emailjs-com';import Button from'../components/Buttons.js';import {TextInput}from'../components/FormInput.js';import {Formik,Form,ErrorMessage,Field}from'formik';import {contactUsSchema}from'../Validation/Schema.js';import Editor from'../components/editor.js';import {config}from'../config/env-config.js';const links = () => [];
function ContactUs() {
  const navigate = useNavigate();
  const {
    EMAILJS_SERVICE_ID,
    EMAILJS_TEMPLATE_ID_CONTACT_FORM,
    EMAILJS_USER_ID
  } = config;
  const formRef = useRef();
  // Options for the help dropdown
  const helpOptions = [{
    name: '-'
  }, {
    name: 'I need help booking a reservation'
  }, {
    name: 'I need help altering a reservation'
  }, {
    name: 'I need help canceling a reservation'
  }, {
    name: 'I need help with a refund'
  }, {
    name: 'I have a day of reservation issue'
  }, {
    name: 'I have a question about a payment or payout'
  }, {
    name: 'I have a question about my account'
  }, {
    name: 'I want help with event planning'
  }, {
    name: 'I have a question about reviews'
  }, {
    name: 'I have a question about verification'
  }, {
    name: 'I have feedback about the app or website'
  }, {
    name: 'I have a question about local regulations or taxes'
  }, {
    name: 'I have a question about property or liability coverage'
  }, {
    name: 'I want to report a safety concern'
  }, {
    name: 'I want to report a neighborhood disturbance'
  }, {
    name: 'I have a concern about the quality of a listing'
  }, {
    name: 'I want to report suspicious activity'
  }, {
    name: 'I have an issue that is not listed here'
  }, {
    name: 'I have a Marketing or Brand Partnership Request'
  }, {
    name: `I'm looking for help with my listing's photos`
  }];
  // Function to send email via EmailJS
  const sendEmail = async (values, {
    setSubmitting
  }) => {
    try {
      await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID_CONTACT_FORM, values, EMAILJS_USER_ID);
      console.log('Email sent successfully');
      navigate('/thanks'); // Redirect to the Thank You page
    } catch (error) {
      console.error('Email sending failed:', error);
    } finally {
      setSubmitting(false); // Stop the submitting state
    }
  };
  return jsxs("div", {
    className: "max-w-[1160px] mx-auto px-[5%] lg:px-0 lg:w-[90%] flex flex-row-reverse flex-wrap",
    children: [jsxs("div", {
      className: "relative mt-5",
      children: [jsx(FaSearch, {
        className: "absolute left-2.5 top-2.5 w-4 h-4 text-gray-500"
      }), jsx("input", {
        type: "text",
        placeholder: "Search",
        className: "h-10 w-full border border-gray-200 rounded-full pl-10 pr-5 text-sm font-light text-gray-600 outline-none"
      })]
    }), jsxs("main", {
      className: "flex justify-center items-center my-20 mx-auto w-3/5 max-md:w-full",
      children: [jsx(ToastContainer, {}), jsx("div", {
        className: "w-full",
        children: jsxs("div", {
          className: "w-full bg-white rounded shadow-sm p-5 md:p-12 lg:p-14",
          children: [jsx(Link, {
            to: "/",
            className: "text-gray-600 hover:text-gray-900",
            children: jsx("i", {
              className: "fas fa-home"
            })
          }), jsx("div", {
            className: "text-[32px] font-normal text-gray-900 mb-4",
            children: jsx("p", {
              children: "Submit a request"
            })
          }), jsx(Formik, {
            initialValues: {
              summary: '',
              contactEmail: '',
              description: '',
              file: null,
              hostGuest: '',
              helpOption: '',
              bookingID: '',
              country: ''
            },
            validationSchema: contactUsSchema,
            onSubmit: sendEmail,
            children: ({
              touched,
              errors,
              values,
              handleChange,
              isSubmitting,
              setFieldValue
            }) => jsxs(Form, {
              ref: formRef,
              className: "mt-4",
              children: [jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx(TextInput, {
                  label: "Your email address",
                  name: "contactEmail",
                  id: "contactEmail",
                  type: "email",
                  value: values.contactEmail,
                  className: `block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none focus:ring-0 ${touched.contactEmail && errors.contactEmail ? 'border-red-500' : ''}`,
                  labelClassName: "lead",
                  placeholder: "johndoe@gmail.com",
                  onChange: handleChange
                }), jsx(ErrorMessage, {
                  component: "div",
                  name: "contactEmail",
                  className: "invalid-feedback p-0"
                })]
              }), jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx("label", {
                  className: "text-[0.9rem] text-gray-500",
                  children: "How can we help you?"
                }), jsx(Field, {
                  as: "select",
                  name: "helpOption",
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none",
                  children: helpOptions.map((option, index) => jsx("option", {
                    value: option.name,
                    children: option.name
                  }, index))
                })]
              }), jsx("div", {
                className: "mb-4 text-[13px]",
                children: jsx(TextInput, {
                  label: "Do you have a booking ID? (optional)",
                  name: "bookingID",
                  id: "bookingID",
                  type: "text",
                  value: values.bookingID,
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none",
                  labelClassName: "lead",
                  onChange: handleChange
                })
              }), jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx("label", {
                  className: "text-[0.9rem] text-gray-500",
                  children: "Are you a host, guest, or other?"
                }), jsxs(Field, {
                  as: "select",
                  name: "hostGuest",
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none",
                  children: [jsx("option", {
                    children: "-"
                  }), jsx("option", {
                    children: "Host"
                  }), jsx("option", {
                    children: "Guest"
                  }), jsx("option", {
                    children: "Neighbor"
                  }), jsx("option", {
                    children: "Partner/Vendor"
                  }), jsx("option", {
                    children: "Other"
                  })]
                })]
              }), jsx("div", {
                className: "mb-4 text-[13px]",
                children: jsx(TextInput, {
                  label: "Summarize your request in a few words",
                  name: "summary",
                  id: "summary",
                  type: "text",
                  value: values.summary,
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none",
                  labelClassName: "lead",
                  onChange: handleChange
                })
              }), jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx("label", {
                  htmlFor: "description",
                  className: "text-[0.9rem] text-gray-500",
                  children: "Description"
                }), jsx(Field, {
                  name: "description",
                  children: ({
                    field
                  }) => jsx(Editor, {
                    id: "description",
                    name: "description",
                    value: values.description,
                    onChange: value => setFieldValue('description', value),
                    placeholder: "Please enter the details of your request."
                  })
                }), jsx("p", {
                  className: "text-gray-500 text-xs mt-2",
                  children: "Please enter the details of your request. A member of our support staff will respond as soon as possible."
                })]
              }), jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx("label", {
                  className: "text-[0.9rem] text-gray-500",
                  children: "Country (optional)"
                }), jsxs(Field, {
                  as: "select",
                  name: "country",
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none",
                  children: [jsx("option", {
                    children: "-"
                  }), jsx("option", {
                    children: "USA"
                  }), jsx("option", {
                    children: "Canada"
                  }), jsx("option", {
                    children: "Australia"
                  })]
                })]
              }), jsxs("div", {
                className: "mb-4 text-[13px]",
                children: [jsx("label", {
                  htmlFor: "file",
                  className: "text-[0.9rem] text-gray-500",
                  children: "Attachments (optional)"
                }), jsx("input", {
                  id: "file",
                  name: "file",
                  type: "file",
                  onChange: event => setFieldValue('file', event.currentTarget.files[0]),
                  className: "block w-full py-1.5 px-3 text-sm text-gray-800 font-light border border-gray-300 rounded bg-transparent mt-2 focus:border-[#3182ce] focus:outline-none"
                })]
              }), jsx(Button, {
                type: "submit",
                className: "button button--primary",
                id: "contact-us",
                disabled: isSubmitting,
                label: isSubmitting ? jsx("i", {
                  className: "fa fa-spinner fa-spin"
                }) : 'Submit'
              })]
            })
          })]
        })
      })]
    })]
  });
}export{ContactUs as default,links};//# sourceMappingURL=contact-us.js.map
