redux-form#Field JavaScript Examples

ProductTypeForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field label="Iniciales" name="initials" component={InputField} type="text" />
      <Field label="Descripcion" name="description" component={InputField} type="text" />
      <Button className="producttype-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="producttype-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

ProductTypeForm = (props) => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field
        label="Iniciales"
        name="initials"
        component={InputField}
        type="text"
      />
      <Field
        label="Descripcion"
        name="description"
        component={InputField}
        type="text"
      />
      <Button className="provider-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="provider-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

AsyncValidationForm = ({ handleSubmit, pristine, reset, submitting }) => (
  <form onSubmit={handleSubmit}>
    <Field label="name" name="firstName" component={renderField} type="text" />
    <Field name="lastName" component={renderField} type="text" />
    <Field name="email" component={renderField} type="text" />
    <FormSection name="address">
      <Field label="calle" name="street" component={renderField} type="text" />
      <Field name="city" component={renderField} type="text" />
      <Field name="state" component={renderField} type="text" />
      <Field name="zip" component={renderField} type="text" />
    </FormSection>
    <Field
      name="prueba"
      options={options}
      component={selectable}
      type="select"
    />
    <div>
      <button type="submit" disabled={submitting}>
        Submit
      </button>
      <button type="button" disabled={pristine || submitting} onClick={reset}>
        Clear Values
      </button>
    </div>
  </form>
)

SyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={RenderField}
        label="Username"
      />
      <Field name="email" type="email" component={RenderField} label="Email" />
      <Field name="age" type="number" component={RenderField} label="Age" />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
}

ProductForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field
        label="Iniciales"
        name="initials"
        component={InputField}
        type="text"
      />
      <Field
        label="Descripción"
        name="description"
        component={InputField}
        type="text"
      />
      <Button className="product-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="product-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

ProviderForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field label="Telefono" name="phone" component={InputField} type="text" />
      <Field label="Email" name="email" component={InputField} type="text" />
      <Button className="provider-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="provider-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

StoreForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field label="Teléfono" name="phone" component={InputField} type="text" />
      <Field
        label="Dirección"
        name="address"
        component={InputField}
        type="text"
      />
      <Button className="store-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="store-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

ResourceActivityType = (props) => {
  const {
    resource,
    loadResourceTypes,
    selectType,
    type,
    setActiveView,
  } = props;
  const { types: activityTypes } = resource;

  useEffect(() => {
    loadResourceTypes();
  }, [loadResourceTypes]);

  const { handleSubmit, onChangeActivityType } = props;

  const activityTypesContent = activityTypes?.map((activityType) => (
    <div className="col-md-3" key={activityType.id}>
      <label className="activity-label">
        <Field
          name="activityType"
          component={ResourceActivityTypeField}
          type="radio"
          value={`${activityType.id}`}
          onChange={() => {
            onChangeActivityType(activityType.id);
            selectType([...type, 'select']);
            setActiveView('select');
          }}
          validate={[required]}
        />

        <div className="activity-item">
          <div
            className="activity-img"
            style={{ backgroundImage: `url(${global.config.resourceUrl}${activityType.image})` }}
          />

          <div className="activity-content">
            <span>{activityType.title}</span>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      {/* <div className="col-md-3">
        <AddResourceSidebar {...props} />
      </div> */}
      <div className="col-md-12">
        <div className="resource-activity">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Pick Activity Type</h2>

                <div className="activity-content">
                  <p>
                    Create memorable learning experiences from one of the
                    activity types below:
                  </p>
                </div>
              </div>
            </div>

            <form
              className="row meta-form"
              onSubmit={handleSubmit}
              autoComplete="off"
            >
              {activityTypesContent}
            </form>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

render() {
    const {
      classes,
      handleSubmit,
      pristine,
      submitting,
      valid,
      title,
      isProcessed,
      error,
      errorMessage,
    } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar
            className={classes.avatar}
            alt="Logo"
            src="/logo-circle512.png"
          />
          <Typography component="h1" variant="h5" color="primary">
            {title}
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
            <Field
              id="email"
              disabled={isProcessed && !errorMessage}
              label="Email Address"
              name="email"
              component={this.renderTextField}
            />
            <Button
              className={classes.submit}
              color="primary"
              disabled={
                pristine ||
                submitting ||
                !valid ||
                (isProcessed && !errorMessage)
              }
              fullWidth
              type="submit"
              variant="contained"
            >
              Submit
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="/signin" variant="body2">
                  Sign In
                </Link>
              </Grid>
              <Grid item>
                <Link href="/register" variant="body2">
                  {"Don't have an account? Sign up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Snackbar open={!!error}>
          <Alert severity="error">{error}</Alert>
        </Snackbar>
        <Snackbar open={isProcessed && !errorMessage}>
          <Alert severity="success">
            An email has been sent to your email address
          </Alert>
        </Snackbar>
      </Container>
    );
  }

Content = ({ handleSubmit }) => {
    const onSubmit = (values) => {
        // eslint-disable-next-line no-alert
        alert(`submitting ${JSON.stringify(values)}`);
    };
    return (
        <ContainerCard>
            <FormContainer onSubmit={handleSubmit(onSubmit)}>
                <Title>We had love to hear from you</Title>
                <Field
                    className="rainbow-m-bottom_medium"
                    component={Input}
                    name="name"
                    label="Name"
                    required
                    placeholder="Enter your name"
                />
                <Field
                    className="rainbow-m-bottom_medium"
                    component={Input}
                    name="email"
                    label="Email Address"
                    required
                    placeholder="Enter your email address"
                />
                <Field
                    className="rainbow-m-bottom_medium"
                    component={Textarea}
                    name="message"
                    label="Message"
                    required
                    placeholder="Type your message"
                />
                <Button
                    className="rainbow-m-bottom_medium rainbow-m-top_medium"
                    label="Send"
                    type="submit"
                    variant="brand"
                />
            </FormContainer>
        </ContainerCard>
    );
}

ProductForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field
        label="Precio de costo"
        name="costPrice"
        component={InputField}
        type="number"
        parse={v => Number.parseInt(v)}
      />
      <Field
        label="Precio de venta"
        name="salePrice"
        component={InputField}
        type="number"
        parse={v => Number.parseInt(v)}
      />
      <Field
        name="productTypeId"
        label="Tipo de producto"
        component={SelectField}
        type="select"
        options={props.productTypeOptions}
      />
      <Field
        name="providerId"
        label="Proveedor"
        component={SelectField}
        type="select"
        options={props.providerOptions}
      />
      <Button className="product-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="product-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

render() {
    return (
      <div>
        <h1 class="ui center aligned header" style={{ paddingTop: "200px" }}>
          Social Apes
        </h1>
        <div className="ui container" style={{ paddingTop: "20px" }}>
          <div
            class="ui placeholder segment"
            style={{ height: "350px", backgroundColor: "#FFFFFF" }}
          >
            <div class="ui two column very relaxed stackable grid">
              <div class="column">
                <form
                  className="ui form"
                  onSubmit={this.props.handleSubmit(this.onSubmit)}
                >
                  <Field
                    name="email"
                    component={this.renderInput}
                    label="Email"
                    icon="envelope icon"
                    type="text"
                    placeholder="[email protected]"
                  ></Field>
                  <Field
                    name="password"
                    component={this.renderInput}
                    label="Password"
                    icon="lock icon"
                    type="password"
                    placeholder="password"
                  ></Field>
                  <button
                    class={`fluid ui blue ${
                      this.state.loader ? "disabled loading" : ""
                    } submit button`}
                    type="submit"
                  >
                    Login
                  </button>
                </form>
                {this.renderError()}
              </div>
              <div class="small aligned column" style={{ paddingTop: "80px" }}>
                <Link to="/create">
                  <div class="fluid ui blue submit button">
                    <i class="signup icon"></i>
                    Sign Up
                  </div>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

render() {
    return (
      <div>
        <BackTo to="profile" toRoute="profile"></BackTo>
        <h1 class="ui center aligned header" style={{ paddingTop: "50px" }}>
          Edit Profile Details
        </h1>
        <div className="ui container" style={{ paddingTop: "20px" }}>
          <div
            class="ui placeholder segment"
            style={{ height: "50%", backgroundColor: "#FFFFFF" }}
          >
            <div class="column">
              <form
                className="ui form"
                onSubmit={this.props.handleSubmit(this.onSubmit)}
                autoComplete="off"
              >
                <Field
                  name="name"
                  component={this.renderInput}
                  label="Name"
                  icon="user icon"
                  type="text"
                  placeholder="John Doe"
                  iv={this.props.user.name}
                ></Field>
                <Field
                  name="age"
                  component={this.renderInput}
                  label="Age"
                  icon="hand point up icon"
                  type="number"
                  placeholder="19"
                  iv={this.props.user.age}
                ></Field>
                <Field
                  name="userName"
                  component={this.renderInput}
                  label="UserName"
                  icon="user circle icon"
                  type="text"
                  placeholder="JohnDoe"
                  iv={this.props.user.userName}
                ></Field>
                <Field
                  name="caption"
                  component={this.renderTextBox}
                  label="Caption"
                  icon="user circle icon"
                  type="text"
                  placeholder="Don't exceed 50 words."
                  iv={this.props.user.caption || ""}
                ></Field>
                {this.renderImage()}
                {/* <Field
                  name="password"
                  component={this.renderInput}
                  label="Password"
                  icon="lock icon"
                  type="password"
                  placeholder="password"
                ></Field> */}
                <button class="fluid ui blue submit button" type="submit">
                  Update
                </button>
              </form>
              {this.renderError()}
              <br></br>
              <br></br>
            </div>
          </div>
        </div>
      </div>
    );
  }

render() {
    return (
      <div>
        <BackTo to="profile" toRoute="profile"></BackTo>
        <h1 class="ui center aligned header" style={{ paddingTop: "100px" }}>
          Create New Post
        </h1>
        <div className="ui container" style={{ paddingTop: "20px" }}>
          <div
            class="ui placeholder segment"
            style={{ height: "50%", backgroundColor: "#FFFFFF" }}
          >
            <form
              className="ui form"
              onSubmit={this.props.handleSubmit(this.onSubmit)}
            >
              {this.renderImage()}
              <Field
                name="description"
                component={this.renderInput}
                label="Description"
                icon="pen square icon"
                type="text"
                placeholder="Life is what happens when you're busy making other plans."
              ></Field>
              <button
                class={`fluid ui ${
                  this.state.loader ? "disabled loading" : ""
                } blue submit button`}
                type="submit"
              >
                Create
              </button>
            </form>
            <br></br>
            <br></br>
          </div>
        </div>
      </div>
    );
  }

CreateForm = ({ handleSubmit, submitting, onSubmit, errorMessage }) => (
  <React.Fragment>
    <form className="form-signin" onSubmit={handleSubmit}>
      <FormGroup>
        <Field
          name="username"
          placeholder="Nombre de usuario"
          component={RenderField}
          type="text"
        />
      </FormGroup>
      <FormGroup>
        <Field
          name="password"
          placeholder="Contraseña"
          component={RenderField}
          type="password"
        />
      </FormGroup>
      <button
        disabled={submitting}
        className="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2"
        type="submit"
        onClick={handleSubmit(values =>
          onSubmit({ ...values, button: "login" })
        )}
      >
        Sign in
      </button>
      <button
        disabled={submitting}
        type="submit"
        className="btn btn-lg btn-secondary btn-block btn-login text-uppercase font-weight-bold mb-2"
        onClick={handleSubmit(values =>
          onSubmit({ ...values, button: "signup" })
        )}
      >
        Sign up
      </button>
    </form>
    {errorMessage && <div className="text-danger">{errorMessage}</div>}
  </React.Fragment>
)

Creation = (props) => {
  const { handleSubmit, editMode } = props;

  return (
    <div className="team-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">
            {editMode ? 'Edit ' : 'Create '}
            Team
          </h2>
          <div className="title-cross" />
        </div>

        <div className="create-team-wrapper">
          <h2 className="describe">
            {editMode ? ' Editing your team information ' : ' Start your team by adding a name and description '}
          </h2>

          <div className="creation-panel">
            <form className="create-team-form" onSubmit={handleSubmit}>
              <div className="team-info-input">
                <div className="team-name">
                  <Field
                    name="name"
                    component={InputField}
                    label="Team Name"
                    type="text"
                    validate={[required, maxName]}
                  />
                </div>

                <div className="team-description">
                  <Field
                    name="description"
                    component={TextareaField}
                    label="Team Description"
                    validate={[required, maxDescription]}
                  />
                </div>
                <h2 className="satelliteteaminfo"> Satellite Team Information (Optional)</h2>
                <div className="team-name">
                  <Field
                    name="noovo_group_title"
                    component={InputField}
                    label="Noovo Group Title"
                    validate={[maxName]}
                  />
                </div>
              </div>

              <button
                type="submit"
                className="create-team-continue-btn"
              //   onClick={() => {
              //     if (editMode) {
              //       handleSubmitInEditMode();
              //     }
              // }}
              >
                {editMode ? 'Update' : 'Continue'}
              </button>
            </form>
          </div>
        </div>
      </FadeDiv>
    </div>
  );
}

Creation = (props) => {
  const { handleSubmit, editMode } = props;

  return (
    <div className="group-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">
            {editMode ? 'Edit ' : 'Create '}
            Group
          </h2>
          <div className="title-cross" />
        </div>

        <div className="create-group-wrapper">
          <h2 className="describe">
            {editMode ? ' Editing your group information ' : 'Start your group by adding a name and description'}
          </h2>

          <div className="creation-panel">
            <form className="create-group-form" onSubmit={handleSubmit}>
              <div className="group-info-input">
                <div className="group-name">
                  <Field
                    name="name"
                    component={InputField}
                    label="Group Name"
                    type="text"
                    validate={[required, maxName]}
                  />
                </div>

                <div className="group-description">
                  <Field
                    name="description"
                    component={TextareaField}
                    label="Group Description"
                    validate={[required, maxDescription]}
                  />
                </div>
              </div>

              <button type="submit" className="create-group-continue-btn">
                Continue
              </button>
            </form>
          </div>
        </div>
      </FadeDiv>
    </div>
  );
}

ResourceSelectActivity = (props) => {
  const { handleSubmit, onChangeActivity } = props;

  const questionsContent = questions.map((activity) => (
    <div className="col-md-3" key={activity.id}>
      <label className="question-label">
        <Field
          name="activity"
          component={ResourceActivityTypeField}
          type="radio"
          value={activity.h5pLib}
          onChange={(e) => onChangeActivity(activity, e)}
          validate={[required]}
        />

        <div className="activity-item">
          <div className="activity-img">
            <img src={activity.icon} className="activity-icon" alt="" />
            <img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
          </div>

          <div className="activity-content">
            <span>{activity.text}</span>
            <p>{activity.description}</p>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      <div className="col-md-3">
        <EditResourceSidebar {...props} />
      </div>

      <div className="col-md-9">
        <div className="resource-question">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Select the activity you want to build from the options below:</h2>
              </div>
            </div>

            <div className="row">
              <form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
                {questionsContent}
                <div className="col-md-12">
                  <button type="submit" className="add-resource-continue-btn">Continue</button>
                </div>
              </form>
            </div>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

ResourceActivityType = (props) => {
  const {
    handleSubmit,
    onChangeActivityType,
  } = props;

  const activitiesContent = activities.map((activity) => (
    <div className="col-md-3" key={activity.id}>
      <label className="activity-label">

        <Field
          name="activityType"
          component={ResourceActivityTypeField}
          type="radio"
          value={activity.id}
          onChange={onChangeActivityType}
          validate={[required]}
        />

        <div className="activity-item">
          <div className="activity-img">
            <img src={activity.icon} className="activity-icon" alt="" />
            <img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
          </div>
          <div className="activity-content">
            <span>
              {activity.title}
            </span>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      <div className="col-md-3">
        <EditResourceSidebar {...props} />
      </div>

      <div className="col-md-9">
        <div className="resource-activity">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Select the type of activity you want to create?</h2>
                <div className="activity-content">
                  <p>
                    Create memorable learning experiences from one of the activity types below:
                  </p>
                </div>
              </div>
            </div>

            <form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
              {activitiesContent}
              <div className="row">
                <div className="col-md-12">
                  <button type="submit" className="add-resource-continue-btn">Continue</button>
                </div>
              </div>
            </form>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

render() {
		const {
			handleSubmit,
			pristine,
			invalid,
			valid,
			reset,
			submitting,
			loadingShippingMethods,
			loadingPaymentMethods,
			initialValues,
			settings,
			saveShippingLocation,
			saveShippingMethod,
			savePaymentMethod,
			paymentMethods,
			shippingMethods,
			inputClassName,
			buttonClassName,
			editButtonClassName,
			onEdit,
			isReadOnly,
			title
		} = this.props;

		if (isReadOnly) {
			return React.createElement(
				'div',
				{ className: 'checkout-step' },
				React.createElement(
					'h1',
					null,
					React.createElement(
						'span',
						null,
						'1'
					),
					title
				),
				!this.isFieldHidden('email') && React.createElement(ReadOnlyField, { name: text.email, value: initialValues.email }),
				!this.isFieldHidden('mobile') && React.createElement(ReadOnlyField, { name: text.mobile, value: initialValues.mobile }),
				!this.isFieldHidden('country') && React.createElement(ReadOnlyField, {
					name: text.country,
					value: initialValues.shipping_address.country
				}),
				!this.isFieldHidden('state') && React.createElement(ReadOnlyField, {
					name: text.state,
					value: initialValues.shipping_address.state
				}),
				!this.isFieldHidden('city') && React.createElement(ReadOnlyField, {
					name: text.city,
					value: initialValues.shipping_address.city
				}),
				React.createElement(ReadOnlyField, {
					name: text.shippingMethod,
					value: initialValues.shipping_method
				}),
				React.createElement(ReadOnlyField, {
					name: text.paymentMethod,
					value: initialValues.payment_method
				}),
				React.createElement(
					'div',
					{ className: 'checkout-button-wrap' },
					React.createElement(
						'button',
						{
							type: 'button',
							onClick: onEdit,
							className: editButtonClassName
						},
						text.edit
					)
				)
			);
		} else {
			return React.createElement(
				'div',
				{ className: 'checkout-step' },
				React.createElement(
					'h1',
					null,
					React.createElement(
						'span',
						null,
						'1'
					),
					title
				),
				React.createElement(
					'form',
					{ onSubmit: handleSubmit },
					!this.isFieldHidden('email') && React.createElement(Field, {
						className: inputClassName,
						name: 'email',
						id: 'customer.email',
						component: InputField,
						type: 'email',
						label: this.getFieldLabel('email'),
						validate: this.getFieldValidators('email'),
						placeholder: this.getFieldPlaceholder('email')
					}),
					!this.isFieldHidden('mobile') && React.createElement(Field, {
						className: inputClassName,
						name: 'mobile',
						id: 'customer.mobile',
						component: InputField,
						type: 'tel',
						label: this.getFieldLabel('mobile'),
						validate: this.getFieldValidators('mobile'),
						placeholder: this.getFieldPlaceholder('mobile')
					}),
					React.createElement(
						'h2',
						null,
						text.shippingTo
					),
					!this.isFieldHidden('country') && React.createElement(Field, {
						className: inputClassName,
						name: 'shipping_address.country',
						id: 'shipping_address.country',
						component: InputField,
						type: 'text',
						label: this.getFieldLabel('country'),
						validate: this.getFieldValidators('country'),
						placeholder: this.getFieldPlaceholder('country'),
						onBlur: (event, value) => setTimeout(() => saveShippingLocation({ country: value }))
					}),
					!this.isFieldHidden('state') && React.createElement(Field, {
						className: inputClassName,
						name: 'shipping_address.state',
						id: 'shipping_address.state',
						component: InputField,
						type: 'text',
						label: this.getFieldLabel('state'),
						validate: this.getFieldValidators('state'),
						placeholder: this.getFieldPlaceholder('state'),
						onBlur: (event, value) => setTimeout(() => saveShippingLocation({ state: value }))
					}),
					!this.isFieldHidden('city') && React.createElement(Field, {
						className: inputClassName,
						name: 'shipping_address.city',
						id: 'shipping_address.city',
						component: InputField,
						type: 'text',
						label: this.getFieldLabel('city'),
						validate: this.getFieldValidators('city'),
						placeholder: this.getFieldPlaceholder('city'),
						onBlur: (event, value) => setTimeout(() => saveShippingLocation({ city: value }))
					}),
					React.createElement(
						'h2',
						null,
						text.shippingMethods,
						' ',
						loadingShippingMethods && React.createElement(
							'small',
							null,
							text.loading
						)
					),
					React.createElement(
						'div',
						{ className: 'shipping-methods' },
						shippingMethods.map((method, index) => React.createElement(
							'label',
							{
								key: index,
								className: 'shipping-method' + (method.id === initialValues.shipping_method_id ? ' active' : '')
							},
							React.createElement(Field, {
								name: 'shipping_method_id',
								component: 'input',
								type: 'radio',
								value: method.id,
								onClick: () => saveShippingMethod(method.id)
							}),
							React.createElement(
								'div',
								null,
								React.createElement(
									'div',
									{ className: 'shipping-method-name' },
									method.name
								),
								React.createElement(
									'div',
									{ className: 'shipping-method-description' },
									method.description
								)
							),
							React.createElement(
								'span',
								{ className: 'shipping-method-rate' },
								formatCurrency(method.price, settings)
							)
						))
					),
					React.createElement(
						'h2',
						null,
						text.paymentMethods,
						' ',
						loadingPaymentMethods && React.createElement(
							'small',
							null,
							text.loading
						)
					),
					React.createElement(
						'div',
						{ className: 'payment-methods' },
						paymentMethods.map((method, index) => React.createElement(
							'label',
							{
								key: index,
								className: 'payment-method' + (method.id === initialValues.payment_method_id ? ' active' : '')
							},
							React.createElement(Field, {
								name: 'payment_method_id',
								validate: [validateRequired],
								component: 'input',
								type: 'radio',
								value: method.id,
								onClick: () => savePaymentMethod(method.id)
							}),
							React.createElement(
								'div',
								null,
								React.createElement(
									'div',
									{ className: 'payment-method-name' },
									method.name
								),
								React.createElement(
									'div',
									{ className: 'payment-method-description' },
									method.description
								)
							),
							React.createElement('span', { className: 'payment-method-logo' })
						))
					),
					React.createElement(
						'div',
						{ className: 'checkout-button-wrap' },
						React.createElement(
							'button',
							{
								type: 'submit',
								disabled: invalid,
								className: buttonClassName
							},
							text.next
						)
					)
				)
			);
		}
	}

render() {
    const {
      classes,
      handleSubmit,
      pristine,
      submitting,
      valid,
      errorMessage,
      error,
      isProcessed,
    } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar
            className={classes.avatar}
            alt="Logo"
            src="/logo-circle512.png"
          />
          <Typography component="h1" variant="h5" color="primary">
            Verify Email
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Field
                  component={this.renderTextField}
                  disabled={isProcessed && !errorMessage}
                  id="password"
                  label="Password"
                  placeholder="Please enter your password"
                  name="password"
                  type="password"
                />
              </Grid>
            </Grid>
            <Button
              className={classes.submit}
              color="primary"
              disabled={
                pristine ||
                submitting ||
                !valid ||
                (isProcessed && !errorMessage)
              }
              fullWidth
              type="submit"
              variant="contained"
            >
              Submit
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="/signin" variant="body2">
                  Sign In
                </Link>
              </Grid>
              <Grid item>
                <Link href="/request-password-reset" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Snackbar open={!!error}>
          <Alert severity="error">{error}</Alert>
        </Snackbar>
        <Snackbar open={isProcessed && !errorMessage}>
          <Alert
            severity="success"
            action={
              <Link href="/signin" variant="body2">
                Sign In
              </Link>
            }
          >
            Email has been verified successfully
          </Alert>
        </Snackbar>
      </Container>
    );
  }

render() {
		const {
			handleSubmit,
			pristine,
			invalid,
			valid,
			reset,
			submitting,
			processingCheckout,
			initialValues,
			shippingMethod,
			checkoutFields,
			settings,
			inputClassName,
			buttonClassName,
			editButtonClassName,
			title,
			show,
			isReadOnly,
			showPaymentForm,
			onEdit
		} = this.props;

		const hideBillingAddress = settings.hide_billing_address === true;
		const commentsField = checkoutFields.find(f => f.name === 'comments');
		const commentsFieldPlaceholder = commentsField && commentsField.placeholder && commentsField.placeholder.length > 0 ? commentsField.placeholder : '';
		const commentsFieldLabel = commentsField && commentsField.label && commentsField.label.length > 0 ? commentsField.label : text.comments;
		const commentsFieldStatus = commentsField && commentsField.status.length > 0 ? commentsField.status : null;
		const commentsValidate = commentsFieldStatus === 'required' ? validateRequired : null;
		const hideCommentsField = commentsFieldStatus === 'hidden';

		if (!show) {
			return React.createElement(
				'div',
				{ className: 'checkout-step' },
				React.createElement(
					'h1',
					null,
					React.createElement(
						'span',
						null,
						'2'
					),
					title
				)
			);
		} else if (isReadOnly) {
			let shippingFields = null;
			if (shippingMethod && shippingMethod.fields && shippingMethod.fields.length > 0) {
				shippingFields = shippingMethod.fields.map((field, index) => {
					const fieldLabel = getFieldLabel(field);
					const fieldValue = initialValues.shipping_address[field.key];

					return React.createElement(
						'div',
						{ key: index, className: 'checkout-field-preview' },
						React.createElement(
							'div',
							{ className: 'name' },
							fieldLabel
						),
						React.createElement(
							'div',
							{ className: 'value' },
							fieldValue
						)
					);
				});
			}

			return React.createElement(
				'div',
				{ className: 'checkout-step' },
				React.createElement(
					'h1',
					null,
					React.createElement(
						'span',
						null,
						'2'
					),
					title
				),
				shippingFields,
				!hideCommentsField && initialValues.comments !== '' && React.createElement(
					'div',
					{ className: 'checkout-field-preview' },
					React.createElement(
						'div',
						{ className: 'name' },
						commentsFieldLabel
					),
					React.createElement(
						'div',
						{ className: 'value' },
						initialValues.comments
					)
				),
				React.createElement(
					'div',
					{ className: 'checkout-button-wrap' },
					React.createElement(
						'button',
						{
							type: 'button',
							onClick: onEdit,
							className: editButtonClassName
						},
						text.edit
					)
				)
			);
		} else {
			let shippingFields = null;
			if (shippingMethod && shippingMethod.fields && shippingMethod.fields.length > 0) {
				shippingFields = shippingMethod.fields.map((field, index) => {
					const fieldLabel = getFieldLabel(field);
					const fieldId = `shipping_address.${field.key}`;
					const fieldClassName = `${inputClassName} shipping-${field.key}`;
					const validate = field.required === true ? validateRequired : null;

					return React.createElement(Field, {
						key: index,
						className: fieldClassName,
						name: fieldId,
						id: fieldId,
						component: InputField,
						type: 'text',
						label: fieldLabel,
						validate: validate
					});
				});
			}

			return React.createElement(
				'div',
				{ className: 'checkout-step' },
				React.createElement(
					'h1',
					null,
					React.createElement(
						'span',
						null,
						'2'
					),
					title
				),
				React.createElement(
					'form',
					{ onSubmit: handleSubmit },
					shippingFields,
					!hideCommentsField && React.createElement(Field, {
						className: inputClassName + ' shipping-comments',
						name: 'comments',
						id: 'customer.comments',
						component: TextareaField,
						type: 'text',
						label: commentsFieldLabel,
						placeholder: commentsFieldPlaceholder,
						validate: commentsValidate,
						rows: '3'
					}),
					!hideBillingAddress && React.createElement(
						'div',
						null,
						React.createElement(
							'h2',
							null,
							text.billingAddress
						),
						React.createElement(
							'div',
							{ className: 'billing-as-shipping' },
							React.createElement('input', {
								id: 'billingAsShipping',
								type: 'checkbox',
								onChange: this.onChangeBillingAsShipping,
								checked: this.state.billingAsShipping
							}),
							React.createElement(
								'label',
								{ htmlFor: 'billingAsShipping' },
								text.sameAsShipping
							)
						),
						!this.state.billingAsShipping && React.createElement(
							'div',
							null,
							React.createElement(Field, {
								className: inputClassName + ' billing-fullname',
								name: 'billing_address.full_name',
								id: 'billing_address.full_name',
								component: InputField,
								type: 'text',
								label: text.fullName,
								validate: [validateRequired]
							}),
							React.createElement(Field, {
								className: inputClassName + ' billing-address1',
								name: 'billing_address.address1',
								id: 'billing_address.address1',
								component: InputField,
								type: 'text',
								label: text.address1,
								validate: [validateRequired]
							}),
							React.createElement(Field, {
								className: inputClassName + ' billing-address2',
								name: 'billing_address.address2',
								id: 'billing_address.address2',
								component: InputField,
								type: 'text',
								label: text.address2 + ` (${text.optional})`
							}),
							React.createElement(Field, {
								className: inputClassName + ' billing-postalcode',
								name: 'billing_address.postal_code',
								id: 'billing_address.postal_code',
								component: InputField,
								type: 'text',
								label: text.postal_code + ` (${text.optional})`
							}),
							React.createElement(Field, {
								className: inputClassName + ' billing-phone',
								name: 'billing_address.phone',
								id: 'billing_address.phone',
								component: InputField,
								type: 'text',
								label: text.phone + ` (${text.optional})`
							}),
							React.createElement(Field, {
								className: inputClassName + ' billing-company',
								name: 'billing_address.company',
								id: 'billing_address.company',
								component: InputField,
								type: 'text',
								label: text.company + ` (${text.optional})`
							})
						)
					),
					React.createElement(
						'div',
						{ className: 'checkout-button-wrap' },
						React.createElement(
							'button',
							{
								type: 'submit',
								disabled: submitting || processingCheckout || invalid,
								className: `${buttonClassName}${processingCheckout ? ' is-loading' : ''}`
							},
							showPaymentForm ? text.next : text.orderSubmit
						)
					)
				)
			);
		}
	}

render() {
		const {
			handleSubmit,
			pristine,
			invalid,
			valid,
			reset,
			submitting,
			loadingShippingMethods,
			loadingPaymentMethods,
			initialValues,
			settings,
			saveShippingLocation,
			saveShippingMethod,
			savePaymentMethod,
			paymentMethods,
			shippingMethods,
			inputClassName,
			buttonClassName,
			editButtonClassName,
			onEdit,
			isReadOnly,
			title
		} = this.props;

		if (isReadOnly) {
			return (
				<div className="checkout-step">
					<h1>
						<span>1</span>
						{title}
					</h1>

					{!this.isFieldHidden('email') && (
						<ReadOnlyField name={text.email} value={initialValues.email} />
					)}
					{!this.isFieldHidden('mobile') && (
						<ReadOnlyField name={text.mobile} value={initialValues.mobile} />
					)}
					{!this.isFieldHidden('country') && (
						<ReadOnlyField
							name={text.country}
							value={initialValues.shipping_address.country}
						/>
					)}
					{!this.isFieldHidden('state') && (
						<ReadOnlyField
							name={text.state}
							value={initialValues.shipping_address.state}
						/>
					)}
					{!this.isFieldHidden('city') && (
						<ReadOnlyField
							name={text.city}
							value={initialValues.shipping_address.city}
						/>
					)}
					<ReadOnlyField
						name={text.shippingMethod}
						value={initialValues.shipping_method}
					/>
					<ReadOnlyField
						name={text.paymentMethod}
						value={initialValues.payment_method}
					/>

					<div className="checkout-button-wrap">
						<button
							type="button"
							onClick={onEdit}
							className={editButtonClassName}
						>
							{text.edit}
						</button>
					</div>
				</div>
			);
		} else {
			return (
				<div className="checkout-step">
					<h1>
						<span>1</span>
						{title}
					</h1>
					<form onSubmit={handleSubmit}>
						{!this.isFieldHidden('email') && (
							<Field
								className={inputClassName}
								name="email"
								id="customer.email"
								component={InputField}
								type="email"
								label={this.getFieldLabel('email')}
								validate={this.getFieldValidators('email')}
								placeholder={this.getFieldPlaceholder('email')}
							/>
						)}

						{!this.isFieldHidden('mobile') && (
							<Field
								className={inputClassName}
								name="mobile"
								id="customer.mobile"
								component={InputField}
								type="tel"
								label={this.getFieldLabel('mobile')}
								validate={this.getFieldValidators('mobile')}
								placeholder={this.getFieldPlaceholder('mobile')}
							/>
						)}

						<h2>{text.shippingTo}</h2>

						{!this.isFieldHidden('country') && (
							<Field
								className={inputClassName}
								name="shipping_address.country"
								id="shipping_address.country"
								component={InputField}
								type="text"
								label={this.getFieldLabel('country')}
								validate={this.getFieldValidators('country')}
								placeholder={this.getFieldPlaceholder('country')}
								onBlur={(event, value) =>
									setTimeout(() => saveShippingLocation({ country: value }))
								}
							/>
						)}

						{!this.isFieldHidden('state') && (
							<Field
								className={inputClassName}
								name="shipping_address.state"
								id="shipping_address.state"
								component={InputField}
								type="text"
								label={this.getFieldLabel('state')}
								validate={this.getFieldValidators('state')}
								placeholder={this.getFieldPlaceholder('state')}
								onBlur={(event, value) =>
									setTimeout(() => saveShippingLocation({ state: value }))
								}
							/>
						)}

						{!this.isFieldHidden('city') && (
							<Field
								className={inputClassName}
								name="shipping_address.city"
								id="shipping_address.city"
								component={InputField}
								type="text"
								label={this.getFieldLabel('city')}
								validate={this.getFieldValidators('city')}
								placeholder={this.getFieldPlaceholder('city')}
								onBlur={(event, value) =>
									setTimeout(() => saveShippingLocation({ city: value }))
								}
							/>
						)}

						<h2>
							{text.shippingMethods}{' '}
							{loadingShippingMethods && <small>{text.loading}</small>}
						</h2>
						<div className="shipping-methods">
							{shippingMethods.map((method, index) => (
								<label
									key={index}
									className={
										'shipping-method' +
										(method.id === initialValues.shipping_method_id
											? ' active'
											: '')
									}
								>
									<Field
										name="shipping_method_id"
										component="input"
										type="radio"
										value={method.id}
										onClick={() => saveShippingMethod(method.id)}
									/>
									<div>
										<div className="shipping-method-name">{method.name}</div>
										<div className="shipping-method-description">
											{method.description}
										</div>
									</div>
									<span className="shipping-method-rate">
										{formatCurrency(method.price, settings)}
									</span>
								</label>
							))}
						</div>

						<h2>
							{text.paymentMethods}{' '}
							{loadingPaymentMethods && <small>{text.loading}</small>}
						</h2>
						<div className="payment-methods">
							{paymentMethods.map((method, index) => (
								<label
									key={index}
									className={
										'payment-method' +
										(method.id === initialValues.payment_method_id
											? ' active'
											: '')
									}
								>
									<Field
										name="payment_method_id"
										validate={[validateRequired]}
										component="input"
										type="radio"
										value={method.id}
										onClick={() => savePaymentMethod(method.id)}
									/>
									<div>
										<div className="payment-method-name">{method.name}</div>
										<div className="payment-method-description">
											{method.description}
										</div>
									</div>
									<span className="payment-method-logo" />
								</label>
							))}
						</div>

						<div className="checkout-button-wrap">
							<button
								type="submit"
								disabled={invalid}
								className={buttonClassName}
							>
								{text.next}
							</button>
						</div>
					</form>
				</div>
			);
		}
	}

render() {
		const {
			handleSubmit,
			pristine,
			invalid,
			valid,
			reset,
			submitting,
			processingCheckout,
			initialValues,
			shippingMethod,
			checkoutFields,
			settings,
			inputClassName,
			buttonClassName,
			editButtonClassName,
			title,
			show,
			isReadOnly,
			showPaymentForm,
			onEdit
		} = this.props;

		const hideBillingAddress = settings.hide_billing_address === true;
		const commentsField = checkoutFields.find(f => f.name === 'comments');
		const commentsFieldPlaceholder =
			commentsField &&
			commentsField.placeholder &&
			commentsField.placeholder.length > 0
				? commentsField.placeholder
				: '';
		const commentsFieldLabel =
			commentsField && commentsField.label && commentsField.label.length > 0
				? commentsField.label
				: text.comments;
		const commentsFieldStatus =
			commentsField && commentsField.status.length > 0
				? commentsField.status
				: null;
		const commentsValidate =
			commentsFieldStatus === 'required' ? validateRequired : null;
		const hideCommentsField = commentsFieldStatus === 'hidden';

		if (!show) {
			return (
				<div className="checkout-step">
					<h1>
						<span>2</span>
						{title}
					</h1>
				</div>
			);
		} else if (isReadOnly) {
			let shippingFields = null;
			if (
				shippingMethod &&
				shippingMethod.fields &&
				shippingMethod.fields.length > 0
			) {
				shippingFields = shippingMethod.fields.map((field, index) => {
					const fieldLabel = getFieldLabel(field);
					const fieldValue = initialValues.shipping_address[field.key];

					return (
						<div key={index} className="checkout-field-preview">
							<div className="name">{fieldLabel}</div>
							<div className="value">{fieldValue}</div>
						</div>
					);
				});
			}

			return (
				<div className="checkout-step">
					<h1>
						<span>2</span>
						{title}
					</h1>
					{shippingFields}

					{!hideCommentsField &&
						initialValues.comments !== '' && (
							<div className="checkout-field-preview">
								<div className="name">{commentsFieldLabel}</div>
								<div className="value">{initialValues.comments}</div>
							</div>
						)}

					<div className="checkout-button-wrap">
						<button
							type="button"
							onClick={onEdit}
							className={editButtonClassName}
						>
							{text.edit}
						</button>
					</div>
				</div>
			);
		} else {
			let shippingFields = null;
			if (
				shippingMethod &&
				shippingMethod.fields &&
				shippingMethod.fields.length > 0
			) {
				shippingFields = shippingMethod.fields.map((field, index) => {
					const fieldLabel = getFieldLabel(field);
					const fieldId = `shipping_address.${field.key}`;
					const fieldClassName = `${inputClassName} shipping-${field.key}`;
					const validate = field.required === true ? validateRequired : null;

					return (
						<Field
							key={index}
							className={fieldClassName}
							name={fieldId}
							id={fieldId}
							component={InputField}
							type="text"
							label={fieldLabel}
							validate={validate}
						/>
					);
				});
			}

			return (
				<div className="checkout-step">
					<h1>
						<span>2</span>
						{title}
					</h1>
					<form onSubmit={handleSubmit}>
						{shippingFields}

						{!hideCommentsField && (
							<Field
								className={inputClassName + ' shipping-comments'}
								name="comments"
								id="customer.comments"
								component={TextareaField}
								type="text"
								label={commentsFieldLabel}
								placeholder={commentsFieldPlaceholder}
								validate={commentsValidate}
								rows="3"
							/>
						)}

						{!hideBillingAddress && (
							<div>
								<h2>{text.billingAddress}</h2>
								<div className="billing-as-shipping">
									<input
										id="billingAsShipping"
										type="checkbox"
										onChange={this.onChangeBillingAsShipping}
										checked={this.state.billingAsShipping}
									/>
									<label htmlFor="billingAsShipping">
										{text.sameAsShipping}
									</label>
								</div>

								{!this.state.billingAsShipping && (
									<div>
										<Field
											className={inputClassName + ' billing-fullname'}
											name="billing_address.full_name"
											id="billing_address.full_name"
											component={InputField}
											type="text"
											label={text.fullName}
											validate={[validateRequired]}
										/>
										<Field
											className={inputClassName + ' billing-address1'}
											name="billing_address.address1"
											id="billing_address.address1"
											component={InputField}
											type="text"
											label={text.address1}
											validate={[validateRequired]}
										/>
										<Field
											className={inputClassName + ' billing-address2'}
											name="billing_address.address2"
											id="billing_address.address2"
											component={InputField}
											type="text"
											label={text.address2 + ` (${text.optional})`}
										/>
										<Field
											className={inputClassName + ' billing-postalcode'}
											name="billing_address.postal_code"
											id="billing_address.postal_code"
											component={InputField}
											type="text"
											label={text.postal_code + ` (${text.optional})`}
										/>
										<Field
											className={inputClassName + ' billing-phone'}
											name="billing_address.phone"
											id="billing_address.phone"
											component={InputField}
											type="text"
											label={text.phone + ` (${text.optional})`}
										/>
										<Field
											className={inputClassName + ' billing-company'}
											name="billing_address.company"
											id="billing_address.company"
											component={InputField}
											type="text"
											label={text.company + ` (${text.optional})`}
										/>
									</div>
								)}
							</div>
						)}

						<div className="checkout-button-wrap">
							<button
								type="submit"
								disabled={submitting || processingCheckout || invalid}
								className={`${buttonClassName}${
									processingCheckout ? ' is-loading' : ''
								}`}
							>
								{showPaymentForm ? text.next : text.orderSubmit}
							</button>
						</div>
					</form>
				</div>
			);
		}
	}

render() {
    const {
      classes,
      handleSubmit,
      pristine,
      submitting,
      valid,
      error,
    } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar
            className={classes.avatar}
            alt="Logo"
            src="/logo-circle512.png"
          />
          <Typography component="h1" variant="h5" color="primary">
            Sign Up
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Field
                  id="username"
                  label="Username"
                  name="username"
                  component={this.renderTextField}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <Field
                  autoComplete="fname"
                  id="firstName"
                  label="First Name"
                  name="firstName"
                  component={this.renderTextField}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <Field
                  autoComplete="lname"
                  id="lastName"
                  label="Last Name"
                  name="lastName"
                  component={this.renderTextField}
                />
              </Grid>
              <Grid item xs={12}>
                <Field
                  id="email"
                  label="Email Address"
                  name="email"
                  component={this.renderTextField}
                />
              </Grid>
              <Grid item xs={12}>
                <Field
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  component={this.renderTextField}
                />
              </Grid>
            </Grid>
            <Button
              className={classes.submit}
              color="primary"
              disabled={pristine || submitting || !valid}
              fullWidth
              type="submit"
              variant="contained"
            >
              Submit
            </Button>
            <Grid container justify="flex-end">
              <Grid item>
                <Link href="/signin" variant="body2">
                  {'Already have an account? Sign in'}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Snackbar open={!!error}>
          <Alert severity="error">{error}</Alert>
        </Snackbar>
      </Container>
    );
  }

render() {
    const {
      classes,
      handleSubmit,
      pristine,
      submitting,
      valid,
      error,
    } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar
            className={classes.avatar}
            alt="Logo"
            src="/logo-circle512.png"
          />
          <Typography component="h1" variant="h5" color="primary">
            Sign in
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Field
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                  component={this.renderTextField}
                />
              </Grid>
              <Grid item xs={12}>
                <Field
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="current-password"
                  component={this.renderTextField}
                />
              </Grid>
            </Grid>
            <Button
              className={classes.submit}
              color="primary"
              disabled={pristine || submitting || !valid}
              fullWidth
              type="submit"
              variant="contained"
            >
              Submit
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="/request-password-reset" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="/signup" variant="body2">
                  {"Don't have an account? Sign up"}
                </Link>
              </Grid>
            </Grid>
          </form>
          <Box m={3}>
            <Typography variant="body2" color="textSecondary">
              Or Sign In With
            </Typography>
          </Box>
          <Grid container spacing={3}>
            <Grid item xs={6}>
              <FacebookLogin
                appId={process.env.REACT_APP_FACEBOOK_APP_ID}
                fields="name,email,picture"
                scope="public_profile,email"
                version="7.0"
                callback={this.onFacebookResponse}
                render={(renderProps) => (
                  <Button
                    color="primary"
                    disabled={renderProps.isProcessing}
                    fullWidth
                    onClick={renderProps.onClick}
                    startIcon={<Facebook />}
                    variant="outlined"
                  >
                    Facebook
                  </Button>
                )}
              />
            </Grid>
            <Grid item xs={6}>
              <GoogleLogin
                clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                buttonText="Google Login"
                onSuccess={this.onGoogleResponse}
                onFailure={this.onGoogleResponse}
                render={(renderProps) => (
                  <Button
                    color="secondary"
                    disabled={renderProps.disabled}
                    fullWidth
                    onClick={renderProps.onClick}
                    startIcon={<Google />}
                    variant="outlined"
                  >
                    Google
                  </Button>
                )}
              />
            </Grid>
          </Grid>
        </div>
        <Snackbar open={!!error}>
          {error !== 'Email is not verified' ? (
            <Alert severity="error">{error}</Alert>
          ) : (
            <Alert
              severity="error"
              action={
                <Link href="/request-verification-email" variant="body2">
                  Click here
                </Link>
              }
            >
              Email is not verified. Have not received verification email?
            </Alert>
          )}
        </Snackbar>
      </Container>
    );
  }

render() {
    const {
      classes,
      handleSubmit,
      pristine,
      submitting,
      valid,
      error,
      errorMessage,
      isProcessed,
    } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar
            className={classes.avatar}
            alt="Logo"
            src="/logo-circle512.png"
          />
          <Typography component="h1" variant="h5" color="primary">
            Reset Your Password
          </Typography>
          <form className={classes.form} onSubmit={handleSubmit(this.onSubmit)}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Field
                  component={this.renderTextField}
                  disabled={isProcessed && !errorMessage}
                  id="email"
                  label="Email Address"
                  name="email"
                />
              </Grid>
              <Grid item xs={12}>
                <Field
                  component={this.renderTextField}
                  disabled={isProcessed && !errorMessage}
                  id="password"
                  label="New Password"
                  name="password"
                  type="password"
                />
              </Grid>
            </Grid>
            <Button
              className={classes.submit}
              color="primary"
              disabled={
                pristine ||
                submitting ||
                !valid ||
                (isProcessed && !errorMessage)
              }
              fullWidth
              type="submit"
              variant="contained"
            >
              Submit
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="/signin" variant="body2">
                  Sign In
                </Link>
              </Grid>
              <Grid item>
                <Link href="/signup" variant="body2">
                  {"Don't have an account? Sign up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Snackbar open={!!error}>
          <Alert severity="error">{error}</Alert>
        </Snackbar>
        <Snackbar open={isProcessed && !errorMessage}>
          <Alert severity="success">
            Your password has been reset successfully
          </Alert>
        </Snackbar>
      </Container>
    );
  }

render() {
    return (
      <div>
        <h1 class="ui center aligned header" style={{ paddingTop: "80px" }}>
          Create New Account
        </h1>
        <div className="ui container" style={{ paddingTop: "20px" }}>
          <div
            class="ui placeholder segment"
            style={{ height: "700px", backgroundColor: "#FFFFFF" }}
          >
            <div class="column">
              <form
                className="ui form"
                onSubmit={this.props.handleSubmit(this.onSubmit)}
              >
                <Field
                  name="name"
                  component={this.renderInput}
                  label="Name"
                  icon="user icon"
                  type="text"
                  placeholder="John Doe"
                ></Field>
                <Field
                  name="age"
                  component={this.renderInput}
                  label="Age"
                  icon="hand point up icon"
                  type="number"
                  placeholder="19"
                ></Field>
                <Field
                  name="email"
                  component={this.renderInput}
                  label="Email"
                  icon="envelope icon"
                  type="text"
                  placeholder="[email protected]"
                ></Field>
                <Field
                  name="caption"
                  component={this.renderTextBox}
                  label="Caption"
                  type="text"
                  placeholder="Don't Exceed 50 words"
                ></Field>
                <Field
                  name="userName"
                  component={this.renderInput}
                  label="UserName"
                  icon="user circle icon"
                  type="text"
                  placeholder="JohnDoe"
                ></Field>
                <Field
                  name="password"
                  component={this.renderInput}
                  label="Password"
                  icon="lock icon"
                  type="password"
                  placeholder="password"
                ></Field>
                <button
                  class={`fluid ui blue ${
                    this.state.loader ? "disabled loading" : ""
                  } submit button`}
                  type="submit"
                >
                  Create
                </button>
              </form>
              {this.renderError()}
              <br></br>
              <br></br>
              <Link to="/">
                <div className="ui center aligned tiny header">
                  Already have account?
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  }

CreateProjectPopup = (props) => {
  const { isLoading, project, handleSubmit, handleCloseProjectModal, showCreateProjectModal, getProjectVisibilityTypes, vType } = props;
  const dispatch = useDispatch();
  const stateHeader = useSelector((state) => state.organization);
  const projectState = useSelector((state) => state.project);
  const { teamPermission } = useSelector((state) => state.team);
  const { permission } = stateHeader;
  const [modalShow, setModalShow] = useState(false);
  const openFile = useRef();
  const [visibilityTypeArray, setVisibilityTypeArray] = useState([]);
  // remove popup when escape is pressed
  const escFunction = useCallback(
    (event) => {
      if (event.keyCode === 27) {
        handleCloseProjectModal(event);
      }
    },
    [handleCloseProjectModal]
  );


  useEffect(() => {
    document.addEventListener('keydown', escFunction, false);
    return () => {
      document.removeEventListener('keydown', escFunction, false);
    };
  }, [escFunction]);
  useMemo(() => {
    (async () => {
      const { data } = await getProjectVisibilityTypes();
      setVisibilityTypeArray(data.data);
    })();
  }, [getProjectVisibilityTypes]);

  return (
    (permission?.Project?.includes('project:create')) ? (
      <div className="create-program-wrapper">
        <PexelsAPI
          show={modalShow}
          project={project}
          onHide={() => {
            setModalShow(false);
          }}
          searchName="abstract"
        />

        <form className="create-playlist-form" onSubmit={handleSubmit} autoComplete="off">
          <div className="project-name">
            <Field
              name="name"
              component={InputField}
              type="text"
              validate={[required, maxLength80]}
              autoComplete="new-password"
              className="reduxlabel"
              label="Project name"
              placeholder="e.g Course Name"
            />
          </div>

          <div className="project-description">
            <Field name="description" component={TextareaField} validate={[required, maxLength1000]} autoComplete="new-password" label="Project Description" />
          </div>
          <div className="upload-thumbnail check">
            <div className="upload_placeholder">
              <label style={{ display: 'none' }}>
                <input
                  ref={openFile}
                  type="file"
                  accept="image/x-png,image/jpeg"
                  onChange={(e) => {
                    if (e.target.files.length === 0) {
                      return true;
                    }
                    if (
                      !(
                        e.target.files[0].type.includes('png') ||
                        e.target.files[0].type.includes('jpg') ||
                        e.target.files[0].type.includes('gif') ||
                        e.target.files[0].type.includes('jpeg')
                      )
                    ) {
                      Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Invalid file selected.',
                      });
                    } else if (e.target.files[0].size > 100000000) {
                      Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Selected file size should be less then 100MB.',
                      });
                    } else {
                      uploadThumb(e, permission, teamPermission, projectState?.selectedProject?.id, dispatch);
                    }
                  }}
                />
                <span>Upload</span>
              </label>

              <span className="validation-error">{imageValidation}</span>

              <div>
                {project?.thumbUrl ? (
                  <div className="thumb-display">
                    <label>
                      <h2>Upload Image</h2>
                    </label>
                    <div
                      className="imgbox"
                      style={{
                        backgroundImage: project.thumbUrl.includes('pexels.com') ? `url(${project.thumbUrl})` : `url(${global.config.resourceUrl}${project.thumbUrl})`,
                      }}
                    />
                  </div>
                ) : (
                  <div className="new-box">
                    <label>
                      <h2>Upload Image</h2>
                    </label>
                    <div className="imgbox">
                      {/* eslint-disable-next-line max-len */}
                      <img src="https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280" alt="" />
                    </div>
                  </div>
                )}
              </div>

              <div className="button-flex ">
                <div className="pexel" onClick={() => setModalShow(true)}>
                  <img src={pexel} alt="pexel" />
                  <p>Pexels</p>
                </div>
                <div
                  className="gallery"
                  onClick={() => {
                    openFile.current.click();
                  }}
                >
                  <img src={computer} alt="" />
                  <p>My device</p>
                </div>
              </div>
            </div>

            <p className="disclaimer">
              Project Image dimension should be <strong>280px width and 200px height. </strong>
              Maximum File size allowed is <strong>100MB.</strong>
            </p>
          </div>
          <div className="create-project-template-wrapper">
            <button type="submit" className="create-project-submit-btn" disabled={isLoading}>
              {isLoading ? <img src={loader} alt="" /> : 'Create Project'}
            </button>
          </div>
        </form>
      </div>
    ) : (
      <Alert style={{ marginTop: '25px' }} variant="danger">
        You are not authorized to access this.
      </Alert>
    )
  );
}