config#REACT_APP_GLIFIC_REGISTRATION_API TypeScript Examples

The following examples show how to use config#REACT_APP_GLIFIC_REGISTRATION_API. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ConfirmOTP.tsx    From glific-frontend with GNU Affero General Public License v3.0 4 votes vote down vote up 
ConfirmOTP: React.SFC<ConfirmOTPProps> = (props) => {
  const { location } = props;
  const [OTP, setOTP] = useState('');
  const [authSuccess, setAuthSuccess] = useState<any | string>('');
  const [authError, setAuthError] = useState('');
  const { t } = useTranslation();

  const handleResend = () => {
    sendOTP(location.state.phoneNumber, 'true')
      .then((response) => response)
      .catch(() => {
        setAuthError(t('We are unable to generate an OTP, kindly contact your technical team.'));
      });
  };

  // Let's not allow direct navigation to this page
  if (location && location.state === undefined) {
    return <Redirect to="/registration" />;
  }

  const states = { OTP };
  const setStates = ({ OTPValue }: any) => {
    setOTP(OTPValue);
  };

  const formFields = [
    {
      component: Input,
      type: 'otp',
      name: 'OTP',
      placeholder: 'OTP',
      helperText: t('Please confirm the OTP received at your WhatsApp number.'),
      endAdornmentCallback: handleResend,
    },
  ];

  const FormSchema = Yup.object().shape({
    OTP: Yup.string().required(t('Input required')),
  });

  const initialFormValues = { OTP: '' };

  const onSubmitOTP = (values: any) => {
    axios
      .post(REACT_APP_GLIFIC_REGISTRATION_API, {
        user: {
          name: location.state.name,
          phone: location.state.phoneNumber,
          password: location.state.password,
          otp: values.OTP,
        },
      })
      .then(() => {
        setAuthSuccess(successMessage);
      })
      .catch((error) => {
        setAuthError(t('We are unable to register, kindly contact your technical team.'));
        // add log's
        setLogs(
          `onSubmitOTP:${{
            user: {
              name: location.state.name,
              phone: location.state.phoneNumber,
              otp: values.OTP,
            },
          }} URL:${REACT_APP_GLIFIC_REGISTRATION_API}`,
          'info'
        );
        setLogs(error, 'error');
      });
  };

  return (
    <Auth
      pageTitle={t('Create your new account')}
      buttonText={t('Continue')}
      mode="confirmotp"
      formFields={formFields}
      setStates={setStates}
      states={states}
      validationSchema={FormSchema}
      saveHandler={onSubmitOTP}
      initialFormValues={initialFormValues}
      errorMessage={authError}
      successMessage={authSuccess}
    />
  );
}