{"version":3,"sources":["webpack:///./src/pages/contact-us.tsx"],"names":["ContactUsPage","lang","useIntl","ValidationSchema","useMemo","Yup","shape","email","formatMessage","id","required","message","reason","useContactUsMutation","contactUs","loading","data","error","useState","showErrorMessage","setShowErrorMessage","errorMessage","setErrorMessage","showSuccess","setShowSuccess","client","title","description","show","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","className","xmlns","viewBox","fill","fillRule","d","clipRule","type","onClick","aria-label","initialValues","validationSchema","onSubmit","values","actions","a","variables","clientId","process","res","success","resetForm","console","setSubmitting","isSubmitting","errors","htmlFor","name","placeholder","msg","as","value","rows","disabled","cx","cy","r","stroke","strokeWidth"],"mappings":"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","file":"component---src-pages-contact-us-tsx-df66a2d6bde9d0c65f42.js","sourcesContent":["import React, { useState, useMemo, useEffect } from \"react\";\nimport * as Yup from \"yup\";\nimport { Link, FormattedMessage, useIntl } from \"gatsby-plugin-intl\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Transition } from \"@tailwindui/react\";\n// import tw from \"twin.macro\";\nimport { ApolloProvider } from \"@apollo/client\";\n\nimport Layout from \"../components/layout\";\nimport SEO from \"../components/seo\";\nimport { client } from \"../gatsby-theme-apollo/client\";\nimport { useContactUsMutation } from \"../components/app/generated/graphql\";\n\nconst ContactUsPage: React.FC = () => {\n  const lang = useIntl();\n\n  const ValidationSchema = useMemo(() => {\n    return Yup.object().shape({\n      email: Yup.string()\n        .email(lang.formatMessage({ id: \"error_invalid_email\" }))\n        .required(lang.formatMessage({ id: \"required\" })),\n      message: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      reason: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n    });\n  }, [lang]);\n\n  const [contactUs, { data, loading, error }] = useContactUsMutation();\n  const [showErrorMessage, setShowErrorMessage] = useState<boolean>(false);\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n  const [showSuccess, setShowSuccess] = useState<boolean>(false);\n\n  return (\n    <ApolloProvider client={client}>\n      <Layout>\n        <SEO\n          title=\"Contact Us\"\n          description=\"Please contact us with any questions or inquries and we will answer them as soon as we can. If you are contacting us about registering your organization please add your phone number and organization's legal name to the message. If you would like to invite an organization please add a contact email and/or email of that organization to the message.\"\n        />\n        <Transition\n          show={showSuccess}\n          enter=\"ease-out duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"ease-in duration-200\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        >\n          <div>\n            <div className=\"rounded-md bg-green-50 p-4\">\n              <div className=\"flex\">\n                <div className=\"flex-shrink-0\">\n                  <svg\n                    className=\"h-5 w-5 text-green-400\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </div>\n                <div className=\"ml-3\">\n                  <p className=\"text-sm leading-5 font-medium text-green-800\">\n                    <FormattedMessage id=\"sent_msg\" />\n                  </p>\n                </div>\n                <div className=\"ml-auto pl-3\">\n                  <div className=\"-mx-1.5 -my-1.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setShowSuccess(false)}\n                      className=\"inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:bg-green-100 transition ease-in-out duration-150\"\n                      aria-label=\"Dismiss\"\n                    >\n                      <svg\n                        className=\"h-5 w-5\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"currentColor\"\n                      >\n                        <path\n                          fillRule=\"evenodd\"\n                          d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                          clipRule=\"evenodd\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Transition>\n        <Transition\n          show={showErrorMessage}\n          enter=\"ease-out duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"ease-in duration-200\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        >\n          <div>\n            <div className=\"rounded-md bg-red-50 p-4\">\n              <div className=\"flex\">\n                <div className=\"flex-shrink-0\">\n                  <svg className=\"h-5 w-5 text-red-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                    <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clipRule=\"evenodd\" />\n                  </svg>\n                </div>\n                <div className=\"ml-3\">\n                  <h3 className=\"text-sm leading-5 font-medium text-red-800\">\n                    <FormattedMessage id=\"oops\" />\n                  </h3>\n                  <div className=\"mt-2 text-sm leading-5 text-red-700\">\n                    <ul className=\"list-disc pl-5\">\n                      <li>\n                        {errorMessage}\n                      </li>\n                    </ul>\n                  </div>\n                </div>\n                <div className=\"ml-auto pl-3\">\n                  <div className=\"-mx-1.5 -my-1.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setShowErrorMessage(false)}\n                      className=\"inline-flex rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:bg-red-100 transition ease-in-out duration-150\"\n                      aria-label=\"Dismiss\"\n                    >\n                      <svg\n                        className=\"h-5 w-5\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"currentColor\"\n                      >\n                        <path\n                          fillRule=\"evenodd\"\n                          d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                          clipRule=\"evenodd\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Transition>\n        <div className=\"max-w-2xl mx-auto py-16 sm:py-24 sm:px-6 lg:max-w-screen-xl lg:px-8\">\n          <div>\n            <div className=\"md:grid md:grid-cols-3 md:gap-6\">\n              <div className=\"md:col-span-1\">\n                <div className=\"px-4 sm:px-0\">\n                  <h2 className=\"text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10 capitalize\">\n                    <FormattedMessage id=\"nav_link_contact_us\" />\n                  </h2>\n                  <p className=\"mt-1 text-sm leading-5 text-gray-600\">\n                    <FormattedMessage id=\"contact_us_1\" />\n                  </p>\n                </div>\n              </div>\n              <div className=\"mt-5 md:mt-0 md:col-span-2\">\n                <Formik\n                  initialValues={{\n                    email: \"\",\n                    message: \"\",\n                    reason: \"General Question or Inquery\",\n                  }}\n                  validationSchema={ValidationSchema}\n                  onSubmit={async (values, actions) => {\n                    try {\n                      const res = await contactUs({\n                        variables: {\n                          ...values,\n                          clientId: process.env.GIVFAST_API_CLIENT_ID,\n                        },\n                      });\n\n                      if (\n                        res.data &&\n                        res.data.contactUs &&\n                        res.data.contactUs.success\n                      ) {\n                        setShowSuccess(true);\n                        actions.resetForm();\n                      } else {\n                        setErrorMessage(lang.formatMessage({ id: \"oops\" }));\n                        setShowErrorMessage(true);\n                      }\n                    } catch (error) {\n                      console.error(error);\n                      setErrorMessage(error);\n                      setShowErrorMessage(true);\n                    }\n                    actions.setSubmitting(false);\n                  }}\n                >\n                  {({ isSubmitting, errors }) => (\n                    <Form>\n                      <div className=\"shadow sm:rounded-md sm:overflow-hidden\">\n                        <div className=\"px-4 py-5 bg-white sm:p-6\">\n                          <div className=\"grid grid-cols-3 gap-6\">\n                            <div className=\"col-span-3 sm:col-span-2\">\n                              <label\n                                htmlFor=\"email\"\n                                className=\"block text-sm font-medium leading-5 text-gray-700\"\n                              >\n                                <FormattedMessage id=\"label_your\" />{` `}\n                                <FormattedMessage id=\"label_email\" />\n                              </label>\n                              <div className=\"mt-1 rounded-md shadow-sm\">\n                                <Field\n                                  type=\"email\"\n                                  name=\"email\"\n                                  className={`form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 ${\n                                    errors.email\n                                      ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                      : \"\"\n                                  }`}\n                                  placeholder=\"you@example.com\"\n                                />\n                              </div>\n                              <ErrorMessage name=\"email\">\n                                {(msg: string): React.ReactNode => (\n                                  <p\n                                    className=\"mt-2 text-sm text-red-600\"\n                                    id=\"email-error\"\n                                  >\n                                    {msg}\n                                  </p>\n                                )}\n                              </ErrorMessage>\n                            </div>\n                            <div className=\"col-span-3 sm:col-span-2\">\n                              <label\n                                htmlFor=\"reason\"\n                                className=\"block text-sm font-medium leading-5 text-gray-700\"\n                              >\n                                <FormattedMessage id=\"label_reason\" />\n                              </label>\n                              <Field\n                                name=\"reason\"\n                                as=\"select\"\n                                className=\"mt-1 block form-select w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5\"\n                              >\n                                <option value=\"General Question or Inquery\">\n                                  {lang.formatMessage({ id: \"reason_1\" })}\n                                </option>\n                                <option value=\"Register an organization\">\n                                  {lang.formatMessage({ id: \"reason_2\" })}\n                                </option>\n                                <option value=\"Invite an organization\">\n                                  {lang.formatMessage({ id: \"reason_3\" })}\n                                </option>\n                                <option value=\"Other\">\n                                  {lang.formatMessage({ id: \"reason_4\" })}\n                                </option>\n                              </Field>\n                            </div>\n                          </div>\n\n                          <div className=\"mt-6\">\n                            <label\n                              htmlFor=\"message\"\n                              className=\"block text-sm leading-5 font-medium text-gray-700\"\n                            >\n                              <FormattedMessage id=\"label_message\" />\n                            </label>\n                            <div className=\"rounded-md shadow-sm\">\n                              <Field\n                                as=\"textarea\"\n                                name=\"message\"\n                                className={`form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 ${\n                                  errors.message\n                                    ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                    : \"\"\n                                }`}\n                                placeholder=\"description\"\n                                rows={3}\n                              />\n                            </div>\n                            <ErrorMessage name=\"message\">\n                              {(msg: string): React.ReactNode => (\n                                <p\n                                  className=\"mt-2 text-sm text-red-600\"\n                                  id=\"message-error\"\n                                >\n                                  {msg}\n                                </p>\n                              )}\n                            </ErrorMessage>\n                          </div>\n                        </div>\n                        <div className=\"px-4 py-3 bg-gray-50 text-right sm:px-6\">\n                          <span className=\"block rounded-md shadow-sm\">\n                            <button\n                              type=\"submit\"\n                              className=\"relative block w-full justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:border-teal-700 focus:shadow-outline-teal active:bg-teal-700 transition duration-150 ease-in-out capitalize\"\n                              disabled={loading || isSubmitting}\n                            >\n                              <span className=\"absolute left-0 inset-y-0 flex items-center pl-3\">\n                                {(loading || isSubmitting) && !error && (\n                                  <svg\n                                    className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\"\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    fill=\"none\"\n                                    viewBox=\"0 0 24 24\"\n                                  >\n                                    <circle\n                                      className=\"opacity-25\"\n                                      cx=\"12\"\n                                      cy=\"12\"\n                                      r=\"10\"\n                                      stroke=\"currentColor\"\n                                      strokeWidth=\"4\"\n                                    ></circle>\n                                    <path\n                                      className=\"opacity-75\"\n                                      fill=\"currentColor\"\n                                      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                                    ></path>\n                                  </svg>\n                                )}\n                              </span>\n                              <FormattedMessage id=\"submit\" />\n                            </button>\n                          </span>\n                        </div>\n                      </div>\n                    </Form>\n                  )}\n                </Formik>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    </ApolloProvider>\n  );\n};\n\nexport default ContactUsPage;\n"],"sourceRoot":""}