{"version":3,"sources":["webpack:///./src/pages/register.tsx"],"names":["RegisterPage","lang","useIntl","ValidationSchema","useMemo","Yup","shape","email","formatMessage","id","required","password","min","max","confirmPassword","oneOf","firstName","lastName","phoneNumber","address_1","city","state","zipcode","tos","test","value","useState","getDate","moment","format","locale","selectedDate","handleDateChange","isOpen","setIsOpen","showErrorMessage","setShowErrorMessage","errorMessage","setErrorMessage","useRegisterUserMutation","registerUser","data","loading","error","isLoggedIn","navigate","client","utils","MomentUtils","title","description","show","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","className","xmlns","viewBox","fill","fillRule","d","clipRule","type","onClick","aria-label","initialValues","address_2","validationSchema","onSubmit","values","actions","a","variables","username","clientId","process","dob","toISOString","acceptedTerms","address","street1","street2","phone","formatPhoneNumber","response","setSubmitting","token","user","handleLogin","console","warn","errors","toString","message","isSubmitting","setFieldValue","htmlFor","name","placeholder","autoComplete","msg","onChange","open","onOpen","onClose","TextFieldComponent","props","field","form","touched","formattedValue","meta","options","states","option","styles","valueContainer","provided","padding","isOn","color","target","to","disabled","css","cx","cy","r","stroke","strokeWidth"],"mappings":"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","file":"component---src-pages-register-tsx-7f50876020dffe9e49da.js","sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Link, FormattedMessage, useIntl } from \"gatsby-plugin-intl\";\nimport tw from \"twin.macro\";\nimport moment from \"moment\";\nimport { DatePicker } from \"@material-ui/pickers\";\nimport * as Yup from \"yup\";\nimport Select from \"react-select\";\nimport { navigate } from \"gatsby\";\nimport { Transition } from \"@tailwindui/react\";\nimport { ApolloProvider } from \"@apollo/client\";\nimport { MuiPickersUtilsProvider } from \"@material-ui/pickers\";\nimport MomentUtils from \"@date-io/moment\";\n\nimport { states, formatPhoneNumber, getDate } from \"../components/app/helpers\";\nimport Toggle from \"../components/inputs/toggle\";\nimport Layout from \"../components/layout\";\nimport SEO from \"../components/seo\";\nimport { handleLogin, isLoggedIn } from \"../components/app/services/auth\";\nimport { useRegisterUserMutation } from \"../components/app/generated/graphql\";\nimport client from \"../gatsby-theme-apollo/client\";\n\nconst RegisterPage: 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      password: Yup.string()\n        .min(2, lang.formatMessage({ id: \"error_too_short\" }))\n        .max(50, lang.formatMessage({ id: \"error_too_long\" }))\n        .required(lang.formatMessage({ id: \"required\" })),\n      confirmPassword: Yup.string()\n        .oneOf(\n          [Yup.ref(\"password\"), null],\n          lang.formatMessage({ id: \"error_password_matching\" })\n        )\n        .required(lang.formatMessage({ id: \"required\" })),\n      firstName: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      lastName: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      phoneNumber: Yup.string().required(\n        lang.formatMessage({ id: \"required\" })\n      ),\n      // .min(14, \"Phone number is not valid\"),\n      // .max(14, \"Phone number is not valid\"),\n      // .matches(/^(1\\s|1|)?((\\(\\d{3}\\))|\\d{3})(\\-|\\s)?(\\d{3})(\\-|\\s)?(\\d{4})$/, 'Phone number is not valid'),\n      address_1: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      city: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      state: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      zipcode: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n      tos: Yup.boolean()\n        .test(\n          \"tos\",\n          lang.formatMessage({ id: \"error_tos\" }),\n          value => value === true\n        )\n        .required(lang.formatMessage({ id: \"required\" })),\n    });\n  }, [lang]);\n\n  const [selectedDate, handleDateChange] = useState(\n    getDate(moment().format(), lang.locale)\n  );\n  const [isOpen, setIsOpen] = useState(false);\n  const [showErrorMessage, setShowErrorMessage] = useState<boolean>(false);\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n  const [registerUser, { data, loading, error }] = useRegisterUserMutation();\n\n  if (isLoggedIn()) {\n    navigate(`/app`);\n  }\n\n  return (\n    <ApolloProvider client={client}>\n      <MuiPickersUtilsProvider utils={MomentUtils}>\n        <Layout>\n          <SEO\n            title=\"Sign Up\"\n            description=\"Sign Up | Register a new GivFast account.\"\n          />\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=\"py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24\">\n            <div className=\"relative max-w-xl mx-auto\">\n              <div className=\"text-center\">\n                <h2 className=\"text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10\">\n                  <FormattedMessage id=\"label_register\" />\n                </h2>\n                {/* <p className=\"mt-4 text-lg leading-6 text-gray-500\">\n                Nullam risus blandit ac aliquam justo ipsum. Quam mauris\n                volutpat massa dictumst amet. Sapien tortor lacus arcu.\n                </p> */}\n              </div>\n              <div className=\"mt-12\">\n                <Formik\n                  initialValues={{\n                    email: \"\",\n                    password: \"\",\n                    confirmPassword: \"\",\n                    firstName: \"\",\n                    lastName: \"\",\n                    phoneNumber: \"\",\n                    address_1: \"\",\n                    address_2: \"\",\n                    city: \"\",\n                    state: \"\",\n                    zipcode: \"\",\n                    tos: false,\n                  }}\n                  validationSchema={ValidationSchema}\n                  onSubmit={async (values, actions) => {\n                    try {\n                      const response = await registerUser({\n                        variables: {\n                          username: values.email,\n                          password: values.password,\n                          clientId: process.env.GIVFAST_API_CLIENT_ID,\n                          data: {\n                            firstName: values.firstName,\n                            lastName: values.lastName,\n                            dob: selectedDate.toISOString(),\n                            acceptedTerms: values.tos,\n                            address: {\n                              city: values.city,\n                              street1: values.address_1,\n                              street2: values.address_2,\n                              state: values.state,\n                              zipcode: values.zipcode,\n                              phone: formatPhoneNumber(values.phoneNumber),\n                            },\n                          },\n                        },\n                      });\n\n                      actions.setSubmitting(false);\n\n                      if (\n                        response &&\n                        response.data &&\n                        response.data.registerUser\n                      ) {\n                        const { token, user } = response.data.registerUser;\n                        handleLogin({ user, token });\n                        navigate(`/app`);\n                      } else {\n                        console.warn(\"ERROR:\", response);\n                        setShowErrorMessage(true);\n                        setErrorMessage(response.errors.toString());\n                      }\n                    } catch (error) {\n                      console.error(error);\n                      setErrorMessage(error.message);\n                      setShowErrorMessage(true);\n                      actions.setSubmitting(false);\n                    }\n                  }}\n                >\n                  {({ isSubmitting, errors, setFieldValue, values }) => (\n                    <Form className=\"grid grid-cols-1 row-gap-6 sm:grid-cols-2 sm:col-gap-8\">\n                      <div className=\"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_email\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"email\" type=\"email\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"email\"\n                            name=\"email\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\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                            autoComplete={\"email\"}\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>\n                        <label\n                          htmlFor=\"password\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_password\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input type=\"password\" id=\"password\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"password\"\n                            name=\"password\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.password\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            autoComplete={\"new-password\"}\n                          />\n                        </div>\n                        <ErrorMessage name=\"password\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"password-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"confirmPassword\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_confirm_password\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          <Field\n                            type=\"password\"\n                            name=\"confirmPassword\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.confirmPassword\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            autoComplete={\"new-password\"}\n                          />\n                        </div>\n                        <ErrorMessage name=\"confirmPassword\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"confirmPassword-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"firstName\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_f_name\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"firstName\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"firstName\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.firstName\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                        <ErrorMessage name=\"firstName\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"firstName-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"lastName\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_l_name\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"last_name\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"lastName\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.lastName\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                        <ErrorMessage name=\"lastName\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"lastName-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"date_of_birth\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_dob\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          <DatePicker\n                            format={\"MMMM DD, yyyy\"}\n                            value={selectedDate}\n                            onChange={handleDateChange}\n                            open={isOpen}\n                            onOpen={() => setIsOpen(true)}\n                            onClose={() => setIsOpen(false)}\n                            TextFieldComponent={props => {\n                              return (\n                                <button\n                                  onClick={() => setIsOpen(true)}\n                                  type=\"button\"\n                                  id=\"date_of_birth\"\n                                  className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150 text-left\"\n                                >\n                                  {props.value}\n                                </button>\n                              );\n                            }}\n                          />\n                        </div>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"phoneNumber\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_phone\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"phone_number\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" placeholder=\"(555) 987-6543\" /> */}\n                          {/* <Field\n                        type=\"text\"\n                        name=\"phoneNumber\"\n                        className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                          errors.phoneNumber\n                            ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                            : \"\"\n                          }`}\n                        placeholder=\"\"\n                      /> */}\n                          <Field name=\"phoneNumber\">\n                            {({\n                              field, // { name, value, onChange, onBlur }\n                              form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.\n                              meta,\n                            }) => {\n                              const formattedValue = formatPhoneNumber(\n                                field.value\n                              );\n\n                              if (formattedValue) {\n                                field.value = formattedValue;\n                              }\n\n                              return (\n                                <>\n                                  <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n                                    <span className=\"text-gray-500 sm:text-sm sm:leading-5\">\n                                      + 1\n                                    </span>\n                                  </div>\n                                  <input\n                                    type=\"text\"\n                                    className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 pl-10 ${\n                                      errors.phoneNumber\n                                        ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                        : \"\"\n                                    }`}\n                                    {...field}\n                                  />\n                                </>\n                              );\n                            }}\n                          </Field>\n                        </div>\n                        <ErrorMessage name=\"phoneNumber\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"phoneNumber-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div className=\"sm:col-span-2\">\n                        <label\n                          htmlFor=\"address_1\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_street_1\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"address_1\" type=\"text\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"address_1\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.address_1\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                        <ErrorMessage name=\"address_1\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"address_1-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"address_2\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_street_2\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"address_2\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"address_2\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"city\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_city\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"city\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"city\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.city\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                        <ErrorMessage name=\"city\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"city-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"state\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_state\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <select id=\"state\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150 form-select\">\n                        \n                      </select> */}\n                          <Select\n                            options={states}\n                            onChange={option =>\n                              setFieldValue(\"state\", option.value, true)\n                            }\n                            styles={{\n                              valueContainer: (provided, state) => {\n                                return { ...provided, padding: \"0.5rem\" };\n                              },\n                            }}\n                          />\n                        </div>\n                        <ErrorMessage name=\"state\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"state-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div>\n                        <label\n                          htmlFor=\"zipcode\"\n                          className=\"block text-sm font-medium leading-5 text-gray-700\"\n                        >\n                          <FormattedMessage id=\"label_zipcode\" />\n                        </label>\n                        <div className=\"mt-1 relative rounded-md shadow-sm\">\n                          {/* <input id=\"zipcode\" className=\"form-input py-3 px-4 block w-full transition ease-in-out duration-150\" /> */}\n                          <Field\n                            type=\"text\"\n                            name=\"zipcode\"\n                            className={`form-input py-3 px-4 block w-full transition ease-in-out duration-150 ${\n                              errors.zipcode\n                                ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                                : \"\"\n                            }`}\n                            placeholder=\"\"\n                          />\n                        </div>\n                        <ErrorMessage name=\"zipcode\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"zipcode-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div></div>\n                      <div className=\"sm:col-span-2\">\n                        <div className=\"flex items-start\">\n                          <div className=\"flex-shrink-0\">\n                            <Toggle\n                              isOn={values.tos}\n                              onClick={() =>\n                                setFieldValue(\"tos\", !values.tos, true)\n                              }\n                              color={tw`bg-green-600`}\n                            />\n                          </div>\n                          <div className=\"ml-3\">\n                            <p className=\"text-base leading-6 text-gray-500\">\n                              <FormattedMessage id=\"label_agree\" />\n                              {` `}\n                              <Link\n                                target=\"blank\"\n                                to=\"/terms-of-use\"\n                                className=\"font-medium text-gray-700 underline\"\n                              >\n                                <FormattedMessage id=\"nav_link_terms\" />\n                              </Link>\n                              {` `}and{` `}\n                              <Link\n                                target=\"blank\"\n                                to=\"/privacy-policy\"\n                                className=\"font-medium text-gray-700 underline\"\n                              >\n                                <FormattedMessage id=\"nav_link_privacy\" />\n                              </Link>\n                              .\n                            </p>\n                          </div>\n                        </div>\n                        <ErrorMessage name=\"tos\">\n                          {(msg: string): React.ReactNode => (\n                            <p\n                              className=\"mt-2 text-sm text-red-600\"\n                              id=\"tos-error\"\n                            >\n                              {msg}\n                            </p>\n                          )}\n                        </ErrorMessage>\n                      </div>\n                      <div className=\"sm:col-span-2\">\n                        <span className=\"w-full inline-flex rounded-md shadow-sm\">\n                          <button\n                            type=\"submit\"\n                            className=\"w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:border-teal-700 focus:shadow-outline-indigo active:bg-teal-700 transition ease-in-out duration-150\"\n                            disabled={!values.tos || isSubmitting}\n                            css={[\n                              !values.tos && tw`opacity-50 cursor-not-allowed`,\n                            ]}\n                          >\n                            {isSubmitting && (\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                            <FormattedMessage id=\"label_register\" />\n                          </button>\n                        </span>\n                      </div>\n                    </Form>\n                  )}\n                </Formik>\n              </div>\n            </div>\n          </div>\n        </Layout>\n      </MuiPickersUtilsProvider>\n    </ApolloProvider>\n  );\n};\n\nexport default RegisterPage;\n"],"sourceRoot":""}