react-bootstrap#Form TypeScript Examples

FormGroupSelect = (props: any) => {
    return (!(props && props.options)
        ? <></>
        : <Form.Group as={Row} hidden={props.hidden} controlId={props.controlId} className='mb-1'>
            <Form.Label className='input-label' column xs='5' sm='3'>{props.title + (props.required ? '*' : '')}</Form.Label>

            <Col xs='7' sm='9' className='d-flex'>
                <Row className='m-0'>
                    {props.infoText ? <Form.Label className='text-justify'>{props.infoText}</Form.Label> : <></>}
                    <Form.Control as="select"
                        className={!props.value ? 'selection-placeholder qt-input' : 'qt-input'}
                        value={props.value}
                        onChange={props.onChange}
                        placeholder={props.placeholder ? props.placeholder : props.title}
                        required={props.required}
                    >
                        <option disabled={props.required} key={0} value=''>{props.placeholder ? props.placeholder : props.title}</option>
                        {props.options}
                    </Form.Control>
                </Row>
            </Col>
        </Form.Group>
    )
}

getNumberForm(
        stateVar: "warId" | "battleBgId" | "bgmId" | "fieldAiId" | "enemySvtId" | "enemySvtAiId",
        label: string
    ) {
        return (
            <Form.Group>
                <Form.Label>{label}</Form.Label>
                <Form.Control
                    type="number"
                    value={this.state[stateVar]?.toString() ?? ""}
                    onChange={(ev: ChangeEvent) => {
                        if (ev.target.value !== "" && isPositiveInteger(ev.target.value)) {
                            this.setState({
                                [stateVar]: parseInt(ev.target.value),
                            } as Pick<IState, typeof stateVar>);
                        } else {
                            this.setState({
                                [stateVar]: undefined,
                            } as Pick<IState, typeof stateVar>);
                        }
                    }}
                />
            </Form.Group>
        );
    }

FormGroupPermissionCkb = (props: any) => {

    return (!props ? <></> :
        <Form.Group as={Row} controlId={props.controlId} className='mb-1' hidden={props.hidden ? props.hidden : false}>
            <Form.Label className='input-label' column xs='5' sm='3'>{props.title + (props.required ? '*' : '')}</Form.Label>
            <Col xs='7' sm='9' className='jcc-xs-jcfs-md '>
                <Form.Check className='d-flex align-self-center'>
                    <Form.Check.Input
                        className={(props.type === 'radio' ? 'rdb-input' : 'ckb-input') + ' mt-0'}
                        onClick={props.onClick}
                        onChange={props.onChange}
                        type={props.type}
                        name={props.name}
                        disabled={props.readOnly}
                        checked={props.checked}
                        required={props.required}
                        id={props.controlId}
                    />
                    <Form.Label className='rdb-label mb-0'>{props.label}</Form.Label>
                </Form.Check>
            </Col>
        </Form.Group>
    )
}

getNumberForm(stateVar: "hits" | "strengthStatus" | "numFunctions", label: string) {
        return (
            <Form.Group>
                <Form.Label>{label}</Form.Label>
                <TraitsSelector
                    region={this.props.region}
                    traitList={[]}
                    initialTraits={this.state[stateVar]}
                    onUpdate={(trait) => {
                        this.setState({ [stateVar]: trait } as Pick<IState, typeof stateVar>);
                    }}
                    customPlaceHolder="Add a positive integer"
                    emptyLabel=""
                    numericInput={true}
                />
            </Form.Group>
        );
    }

FormGroupInlineRadio = (props: any) => {

    return (!props ? <></> :
        <Form.Group
            as={Col}
            controlId={props.controlId}
            className='d-flex mb-0'
            xs='12'
            sm={props.sm ? props.sm : '4'}
            md={props.md}
        >
            <Form.Check className='d-flex align-self-center'>
                <Form.Check.Input
                    className='rdb-input'
                    type='radio'
                    name={props.name}
                    id={props.controlId}
                    checked={props.checked}
                    onChange={props.onChange}
                    required={props.required}
                />
                <Form.Label className='rdb-label mb-0 txt-no-wrap'>{props.title}</Form.Label>
            </Form.Check>
        </Form.Group>
    )
}

getNumberForm(stateVar: "num" | "priority" | "strengthStatus" | "lvl1coolDown" | "numFunctions", label: string) {
        return (
            <Form.Group>
                <Form.Label>{label}</Form.Label>
                <TraitsSelector
                    region={this.props.region}
                    traitList={[]}
                    initialTraits={this.state[stateVar]}
                    onUpdate={(trait) => {
                        this.setState({ [stateVar]: trait } as Pick<IState, typeof stateVar>);
                    }}
                    customPlaceHolder="Add a positive integer"
                    emptyLabel=""
                    numericInput={true}
                />
            </Form.Group>
        );
    }

SwitchTour = () => {
	const { disabled, setDisabled } = useContext(TourContext);

	return (
		<ToggleTourContainer>
			<Form.Check onChange={(_event) => setDisabled(!disabled)} checked={disabled} type="switch" id="custom-switch" label="Disable tour" />
		</ToggleTourContainer>
	);
}

FormGroupRadio = (props: any) => {

    return (!props ? <></> :
        <Form.Group as={Row} controlId={props.controlId} className='mb-1'>
            <Form.Label className='input-label' column xs='5' sm='3'>{props.title + (props.required ? '*' : '')}</Form.Label>

            <Col xs='7' sm='9' className='d-flex'>
                <Form.Check className='align-self-center'>
                    <Form.Check.Input
                        className='rdb-input'
                        type='radio'
                        name={props.name}
                        id={props.controlId}
                        checked={props.checked}
                        onChange={props.onChange}
                        required={props.required}
                    />
                </Form.Check>
            </Col>
        </Form.Group>
    )
}

render() {
        const craftEssences = this.props.craftEssences.slice().reverse(),
            craftEssenceLabels = new Map<number, string>(
                craftEssences.map((craftEssences) => [
                    craftEssences.collectionNo,
                    `${craftEssences.collectionNo.toString().padStart(4, "0")} - ${craftEssences.name}`,
                ])
            );

        return (
            <div>
                <form>
                    <Form.Group>
                        <Form.Label>Jump to:</Form.Label>
                        <SearchableSelect<number>
                            id="craftEssencePicker"
                            options={craftEssences.map((craftEssence) => craftEssence.collectionNo)}
                            labels={craftEssenceLabels}
                            selected={this.props.id}
                            selectedAsPlaceholder={true}
                            hideSelected={true}
                            hideReset={true}
                            disableLabelStyling={true}
                            maxResults={20}
                            onChange={(value?: number) => {
                                if (value) {
                                    this.changeCraftEssence(value);
                                }
                            }}
                        />
                    </Form.Group>
                </form>
            </div>
        );
    }

Option = ({
    value,
    selected,
    onChange,
    label,
}: {
    value: FIX_OPTIONS;
    selected: FIX_OPTIONS;
    onChange: (e: string | ChangeEvent<any>) => void;
    label: string;
}) => (
    <Form.Check
        name="group1"
        style={{
            margin: '5px 0',
            color: value !== Number(selected) ? '#aaa' : '#fff',
        }}>
        <Form.Check.Input
            style={{ marginTop: '6px' }}
            id={value.toString()}
            type="radio"
            value={value}
            checked={value === Number(selected)}
            onChange={onChange}
        />
        <Form.Check.Label
            style={{ cursor: 'pointer' }}
            htmlFor={value.toString()}>
            {label}
        </Form.Check.Label>
    </Form.Check>
)

export default function NumberSelector(props: {
    value: string | number | string[] | undefined;
    onChange: (ev: ChangeEvent) => void;
    min?: number;
    max?: number;
    placeholder?: string;
}) {
    const placeholder = props.placeholder ? props.placeholder : "Enter a positive integer";
    return (
        <Form.Control
            placeholder={placeholder}
            value={props.value}
            type="number"
            min={props.min}
            max={props.max}
            onChange={props.onChange}
        />
    );
}

export function AllowedBackendsForm(props: AllowedMeetingBackendsFormProps) {
    const enabledBackends = props.backends.filter((value) => value.enabled);

    const toggleAllowed = (backend_type: string) => {
        const newAllowed = new Set(props.allowed);
        if (newAllowed.has(backend_type)) {
            newAllowed.delete(backend_type);
        } else {
            newAllowed.add(backend_type);
        }
        props.onChange(newAllowed);
    }
    const allowedMeetingTypeEditors = enabledBackends
        .map((b) =>
            <Form.Group key={b.name} controlId={b.name}>
                <Form.Check
                    type="checkbox"
                    label={b.friendly_name}
                    checked={props.allowed.has(b.name)}
                    onChange={() => toggleAllowed(b.name)}
                />
            </Form.Group>
        );
    return (
        <Form>
            {allowedMeetingTypeEditors}
        </Form>
    );
}

render() {
        return (
            <Modal show={this.props.open} size="xl" onHide={this.props.close}>
                <Modal.Header closeButton>
                    <Modal.Title>Enemy Configuration</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Form.Group>
                            <Form.Label>Name</Form.Label>
                            <Form.Control
                                type="text"
                                disabled={this.props.loading}
                                value={this.props.servantOptions?.name}
                            />
                        </Form.Group>
                    </Form>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={this.props.close}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={this.props.add}>
                        Add
                    </Button>
                </Modal.Footer>
            </Modal>
        );
    }

FormGroupAddressInput = (props: any) => {

    return (!props ? <></> :
        <Form.Group as={Col} sm={props.sm} controlId={props.controlId} className={props.className}>
            <Form.Control
                className='qt-input'
                value={props.value}
                onChange={props.onChange}
                placeholder={props.placeholder ? props.placeholder : props.title}
                type={props.type ? props.type : 'text'}
                required={props.required}
                maxLength={props.maxLength}
                min={props.min}
                max={props.max}
                pattern={props.pattern}
            />
        </Form.Group>
    )
}

export default function FixCreationTimeOptions({ handleChange, values }) {
    return (
        <Form noValidate>
            <Row style={{ margin: '0' }}>
                <Option
                    value={FIX_OPTIONS.DATE_TIME_ORIGINAL}
                    onChange={handleChange('option')}
                    label={constants.DATE_TIME_ORIGINAL}
                    selected={Number(values.option)}
                />
            </Row>
            <Row style={{ margin: '0' }}>
                <Option
                    value={FIX_OPTIONS.DATE_TIME_DIGITIZED}
                    onChange={handleChange('option')}
                    label={constants.DATE_TIME_DIGITIZED}
                    selected={Number(values.option)}
                />
            </Row>
            <Row style={{ margin: '0' }}>
                <Value width="50%">
                    <Option
                        value={FIX_OPTIONS.CUSTOM_TIME}
                        onChange={handleChange('option')}
                        label={constants.CUSTOM_TIME}
                        selected={Number(values.option)}
                    />
                </Value>
                {Number(values.option) === FIX_OPTIONS.CUSTOM_TIME && (
                    <Value width="40%">
                        <EnteDateTimePicker
                            isInEditMode
                            pickedTime={new Date(values.customTime)}
                            handleChange={(x: Date) =>
                                handleChange('customTime')(x.toUTCString())
                            }
                        />
                    </Value>
                )}
            </Row>
        </Form>
    );
}

render() {
        if (this.state.error) return <ErrorStatus error={this.state.error} />;

        if (this.state.loading) return <Loading />;

        const tabProperty = this.props.tab ?? "servant-materials",
            index = this.state.tabs.findIndex((tab) => tab.key === tabProperty);

        const tab = index < 0 ? { items: [] } : this.state.tabs[index],
            items = this.applySearch(tab.items, this.state.search ?? ""),
            hasPaginator = items.length > this.state.perPage;

        return (
            <div id="items" className="listing-page">
                <Row>
                    <Col xs={12} sm={6} md={9}>
                        {hasPaginator && <div>{this.paginator(items.length)}</div>}
                    </Col>
                    <Col xs={12} sm={6} md={3} id="item-search">
                        <Form inline>
                            <Form.Control
                                placeholder={"Search"}
                                value={this.state.search ?? ""}
                                onChange={(ev: ChangeEvent) => {
                                    this.setState({ search: ev.target.value });
                                }}
                            />
                        </Form>
                    </Col>
                </Row>

                <hr />

                <Tabs
                    id={"items-tabs"}
                    defaultActiveKey={this.props.tab ?? "servant-materials"}
                    mountOnEnter={true}
                    onSelect={(key: string | null) => {
                        this.props.history.replace(`/${this.props.region}/items/${key}`);
                    }}
                >
                    {this.state.tabs.map((_, index) => this.renderTab(index))}
                </Tabs>
                {hasPaginator && <div>{this.paginator(items.length)}</div>}
            </div>
        );
    }

FileNameEditForm = ({ filename, saveEdits, discardEdits, extension }) => {
    const [loading, setLoading] = useState(false);

    const onSubmit = async (values: formValues) => {
        try {
            setLoading(true);
            await saveEdits(values.filename);
        } finally {
            setLoading(false);
        }
    };
    return (
        <Formik<formValues>
            initialValues={{ filename }}
            validationSchema={Yup.object().shape({
                filename: Yup.string()
                    .required(constants.REQUIRED)
                    .max(
                        MAX_EDITED_FILE_NAME_LENGTH,
                        constants.FILE_NAME_CHARACTER_LIMIT
                    ),
            })}
            validateOnBlur={false}
            onSubmit={onSubmit}>
            {({ values, errors, handleChange, handleSubmit }) => (
                <Form noValidate onSubmit={handleSubmit}>
                    <Form.Row>
                        <Form.Group
                            bsPrefix="ente-form-group"
                            as={Col}
                            xs={extension ? 7 : 8}>
                            <Form.Control
                                as="textarea"
                                placeholder={constants.FILE_NAME}
                                value={values.filename}
                                onChange={handleChange('filename')}
                                isInvalid={Boolean(errors.filename)}
                                autoFocus
                                disabled={loading}
                            />
                            <FormControl.Feedback
                                type="invalid"
                                style={{ textAlign: 'center' }}>
                                {errors.filename}
                            </FormControl.Feedback>
                        </Form.Group>
                        {extension && (
                            <Form.Group
                                bsPrefix="ente-form-group"
                                as={Col}
                                xs={1}
                                controlId="formHorizontalFileName">
                                <FlexWrapper style={{ padding: '5px' }}>
                                    {`.${extension}`}
                                </FlexWrapper>
                            </Form.Group>
                        )}
                        <Form.Group bsPrefix="ente-form-group" as={Col} xs={2}>
                            <Value width={'16.67%'}>
                                <IconButton type="submit" disabled={loading}>
                                    {loading ? (
                                        <SmallLoadingSpinner />
                                    ) : (
                                        <TickIcon />
                                    )}
                                </IconButton>
                                <IconButton
                                    onClick={discardEdits}
                                    disabled={loading}>
                                    <CloseIcon />
                                </IconButton>
                            </Value>
                        </Form.Group>
                    </Form.Row>
                </Form>
            )}
        </Formik>
    );
}

render() {
        return (
            <Modal animation={false} show={this.props.open} size="xl" onHide={this.props.close}>
                <Modal.Header closeButton>
                    <Modal.Title>Servant Configuration</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Form.Group>
                            <Form.Label>Name</Form.Label>
                            <Form.Control
                                type="text"
                                disabled={this.props.loading}
                                onBlur={this.props.validate}
                                onChange={(event) => this.setName(event.target.value)}
                                value={this.props.servantOptions?.name}
                            />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Level</Form.Label>
                            <Form.Control
                                type="number"
                                disabled={this.props.loading}
                                onBlur={this.props.validate}
                                onChange={(event) => this.setLevel(event.target.value)}
                                value={this.props.servantOptions.level}
                            />
                        </Form.Group>
                    </Form>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={this.props.close}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={this.props.add}>
                        Add
                    </Button>
                </Modal.Footer>
            </Modal>
        );
    }

AddressInputs = (props: any) => {

    const { t } = useTranslation();

    const [zip, setZip] = React.useState('');
    const [city, setCity] = React.useState('');
    const [street, setStreet] = React.useState('');
    // const [houseNumber, setHouseNumber] = React.useState('');

    React.useEffect(() => {
        if (props && props.quickTest && props.quickTest.addressData) {
            const data = props.quickTest.addressData;

            if (data.zip) {
                setZip(data.zip);
            }
            if (data.city) {
                setCity(data.city);
            }
            if (data.street) {
                setStreet(data.street);
            }
            // if (data.houseNumber) {
            //     setHouseNumber(data.houseNumber);
            // }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    React.useEffect(() => {
        if (props.onChange) {
            props.onChange({
                zip: zip,
                city: city,
                street: street
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [zip, city, street])

    return (!props ? <></>
        : <>
            <Row>
                <Form.Label className='input-label' column xs='5' sm='3'>{t('translation:address')+'*'}</Form.Label>

                <Col xs='7' sm='9' className=''>
                    <Row>

                        <FormGroupAddressInput sm='4' className='mb-1' controlId='zipInput' placeholder={t('translation:zip')}
                            value={zip}
                            onChange={(evt: any) => setZip(evt.currentTarget.value)}
                            required
                            pattern={utils.pattern.zip}
                        />
                        <FormGroupAddressInput sm='8' className='my-1 mt-sm-0' controlId='cityInput' placeholder={t('translation:city')}
                            value={city}
                            onChange={(evt: any) => setCity(evt.currentTarget.value)}
                            required
                            maxLength={255}
                        />
                        <FormGroupAddressInput className='my-1 mb-sm-0' controlId='streetInput' placeholder={t('translation:street')}
                            value={street}
                            onChange={(evt: any) => setStreet(evt.currentTarget.value)}
                            required
                            maxLength={255}
                        />
                        {/* <FormGroupAddressInput sm='4' className='mt-1 mb-sm-0' controlId='houseNumberInput' placeholder={t('translation:house-number')}
                            value={houseNumber}
                            onChange={(evt: any) => setHouseNumber(evt.currentTarget.value)}
                            required
                            pattern={utils.pattern.houseNo}
                            maxLength={15}
                        /> */}
                    </Row>
                </Col>
            </Row>
        </>)
}

render() {
        const getSelectString = (servant: Servant.ServantBasic) => {
            const classString = toTitleCase(servant.className);
            const selectString = `${servant.collectionNo.toString().padStart(3, "0")} - ${servant.name}`;

            if (!servant.name.includes(classString)) return `${selectString} (${classString})`;

            return selectString;
        };
        const servants = this.props.servants.slice().reverse(),
            servantLabels = new Map<number, string>(
                servants.map((servant) => [servant.collectionNo, getSelectString(servant)])
            );

        return (
            <div>
                <form>
                    <Form.Group>
                        <Form.Label>Jump to:</Form.Label>
                        <SearchableSelect<number>
                            id="servantPicker"
                            options={servants.map((servant) => servant.collectionNo)}
                            labels={servantLabels}
                            selected={this.props.id}
                            selectedAsPlaceholder={true}
                            hideSelected={true}
                            hideReset={true}
                            disableLabelStyling={true}
                            maxResults={20}
                            onChange={(value?: number) => {
                                if (value) {
                                    this.changeServant(value);
                                }
                            }}
                        />
                    </Form.Group>
                </form>
            </div>
        );
    }

FormGroupInput = (props: any) => {

    return (!props ? <></> :
        <Form.Group as={Row} controlId={props.controlId} hidden={props.hidden} className='mb-1'>
            <Form.Label className={`'input-label' ${props.lableAlign && 'align-self-'+props.lableAlign}`} column xs='5' sm='3'>{props.title + (props.required ? '*' : '')}</Form.Label>

            <Col xs='7' sm='9' className='d-flex'>
                <Row className='m-0 w-100'>
                    {props.infoText ? <Form.Label className='text-justify'>{props.infoText}</Form.Label> : <></>}
                    <InputGroup>
                        {!props.dropdown
                            ? <></>
                            : <DropdownButton
                                as={InputGroup.Prepend}
                                variant="outline-secondary"
                                title={props.dropdownTitle}
                                id="input-group-dropdown-1"
                            >
                                {props.dropdown}
                            </DropdownButton>
                        }
                        <Form.Control
                            className={!props.prepend ? 'qt-input' : 'qt-input-prepend'}
                            value={props.value}
                            readOnly={props.readOnly}
                            disabled={props.disabled}
                            onClick={props.onClick}
                            onChange={props.onChange}
                            placeholder={props.placeholder ? props.placeholder : props.title}
                            type={props.type ? props.type : 'text'}
                            required={props.required}
                            maxLength={props.maxLength}
                            minLength={props.minLength}
                            min={props.min}
                            max={props.max}
                            pattern={props.pattern}
                            list={props.datalistId}
                            isInvalid={props.isInvalid}
                        />
                        {
                            !(props.datalist && props.datalistId)
                                ? <></>
                                : <datalist id={props.datalistId}>
                                    {props.datalist}
                                </datalist>
                        }
                        {
                            !props.prepend
                                ? <></>
                                : <OverlayTrigger
                                    placement='top-end'
                                    overlay={
                                        <Tooltip id='prepend-tooltip'>
                                            {props.tooltip}
                                        </Tooltip>
                                    }
                                ><InputGroup.Text className='prepend px-3' >{props.prepend}</InputGroup.Text>
                                </OverlayTrigger>
                        }
                        <Form.Control.Feedback type="invalid">
                            {props.InvalidText}
                        </Form.Control.Feedback>
                    </InputGroup>
                </Row>
            </Col>
        </Form.Group>
    )
}

export default function CollectionNamer({ attributes, ...props }: Props) {
    const collectionNameInputRef = useRef(null);
    useEffect(() => {
        if (attributes) {
            setTimeout(() => {
                collectionNameInputRef.current?.focus();
            }, 200);
        }
    }, [attributes]);
    if (!attributes) {
        return (
            <MessageDialog show={false} onHide={() => null} attributes={{}} />
        );
    }
    const onSubmit = ({ albumName }: formValues) => {
        attributes.callback(albumName);
        props.onHide();
    };
    return (
        <MessageDialog
            show={props.show}
            onHide={props.onHide}
            size="sm"
            attributes={{
                title: attributes?.title,
            }}>
            <Formik<formValues>
                initialValues={{ albumName: attributes.autoFilledName ?? '' }}
                validationSchema={Yup.object().shape({
                    albumName: Yup.string().required(constants.REQUIRED),
                })}
                validateOnChange={false}
                validateOnBlur={false}
                onSubmit={onSubmit}>
                {({ values, touched, errors, handleChange, handleSubmit }) => (
                    <Form noValidate onSubmit={handleSubmit}>
                        <Form.Group>
                            <Form.Control
                                className="text-center"
                                type="text"
                                value={values.albumName}
                                onChange={handleChange('albumName')}
                                isInvalid={Boolean(
                                    touched.albumName && errors.albumName
                                )}
                                placeholder={constants.ENTER_ALBUM_NAME}
                                ref={collectionNameInputRef}
                                autoFocus
                            />

                            <Form.Control.Feedback
                                type="invalid"
                                className="text-center">
                                {errors.albumName}
                            </Form.Control.Feedback>
                        </Form.Group>
                        <SubmitButton
                            buttonText={attributes.buttonText}
                            loading={false}
                        />
                    </Form>
                )}
            </Formik>
        </MessageDialog>
    );
}

AddYearPopup: FC<AddYearPopupProps> = ({ placeholderYear }) => {
  const dispatch = useAppDispatch();
  const [year, setYear] = useState(placeholderYear);
  const [show, setShow] = useState(false);
  const target = useRef(null);

  useEffect(() => { setYear(placeholderYear) }, [placeholderYear]);

  const handleClick = (event: React.MouseEvent) => {
    setShow(!show);
  };

  return (
    <div>
      <Button variant="light" ref={target} className="add-year-btn" onClick={handleClick}>
        <PlusCircleFill className="add-year-icon" />
        <div className="add-year-text">Add year</div>
      </Button>
      <Overlay show={show} target={target} placement="top">
        <Popover id=''>
          <Popover.Content>
            <Form>
              <Form.Group>
                <Form.Label className="add-year-form-label">
                  Start Year
                </Form.Label>
                <Form.Control
                  type="number"
                  name="year"
                  value={year}
                  onChange={(e) => {
                    setYear(parseInt(e.target.value));
                  }}
                  onKeyDown={(e: React.KeyboardEvent) => {
                    // prevent submitting form (reloads the page)
                    if (e.key === 'Enter') {
                      e.preventDefault();
                    }
                  }}
                  min={1000}
                  max={9999}
                  placeholder={placeholderYear.toString()}
                ></Form.Control>
              </Form.Group>
              <Button
                className="popup-btn"
                onClick={() => {
                  setShow(!show);
                  dispatch(addYear(
                    {
                      yearData: {
                        startYear: year,
                        quarters: ['fall', 'winter', 'spring'].map(quarter => { return { name: quarter, courses: [] } })
                      }
                    }
                  ));
                  setYear(placeholderYear);
                }}
              >
                Add Year
              </Button>
            </Form>
          </Popover.Content>
        </Popover>
      </Overlay>
    </div >
  );
}

CheckoutWithIota = () => {
	const { isVerified } = useContext(UserContext);
	const [showCredential, setShowCredential] = useState(false);
	const [credentialButtonDisabled, setCredentialButtonDisabled] = useState(false);

	// Hide credential display and disable toggle button on smaller screens
	useEffect(() => {
		checkWindowSize();
		window.addEventListener('resize', () => {
			checkWindowSize();
		});
	}, []);

	const checkWindowSize = () => {
		if (window.innerWidth < 600) {
			showCredential && setShowCredential(false);
			!credentialButtonDisabled && setCredentialButtonDisabled(true);
		} else {
			credentialButtonDisabled && setCredentialButtonDisabled(false);
		}
	};

	return (
		<CheckoutWithIotaContainer>
			<CheckoutWithIotaContainerHeading>Checkout with IOTA</CheckoutWithIotaContainerHeading>
			<VerifyCredential showCredential={showCredential}></VerifyCredential>
			{isVerified && (
				<>
					<CheckoutStepHeading>Authenticate credential</CheckoutStepHeading>
					<AuthenticateCredential></AuthenticateCredential>
				</>
			)}
			<Form.Check
				onChange={(_event) => setShowCredential(!showCredential)}
				style={{ marginTop: '20px' }}
				checked={showCredential}
				disabled={credentialButtonDisabled}
				type="switch"
				id="custom-switch"
				label="Show credential"
			/>
		</CheckoutWithIotaContainer>
	);
}

StatelessInputGroupForm: React.FC<StatelessValidatedInputFormProps> = (props) => {
    const inputRef = useInitFocusRef<HTMLInputElement>(!!props.initFocus);
    const handleChange = (newValue: string) => props.onChangeValue(newValue);

    let buttonBlock;
    let handleSubmit;
    if (props.buttonOptions) {
        const { onSubmit, buttonType } = props.buttonOptions;
        const buttonClass = `btn btn-${buttonType}`;
        handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
            e.preventDefault();
            onSubmit(props.value);
        };
        buttonBlock = (
            <InputGroup.Append>
                <Button bsPrefix={buttonClass} type='submit' disabled={props.disabled}>
                    {props.children}
                </Button>
            </InputGroup.Append>
        );
    }

    let feedback;
    if (props.validationResult) {
        const { isInvalid, messages } = props.validationResult;
        const feedbackTextClass = isInvalid ? ' text-danger' : '';
        if (messages.length > 0) {
            // Only show one message at a time.
            feedback = <Form.Text className={`form-feedback${feedbackTextClass}`}>{messages[0]}</Form.Text>;
        }
    }

    return (
        <Form onSubmit={handleSubmit}>
            <InputGroup>
                <Form.Control
                    id={props.id}
                    as='input'
                    ref={inputRef}
                    value={props.value}
                    aria-label={props.formLabel}
                    placeholder={props.placeholder}
                    onChange={(e: any) => handleChange(e.currentTarget.value)}
                    disabled={props.disabled}
                    isInvalid={props.validationResult?.isInvalid}
                />
                {buttonBlock}
            </InputGroup>
            {feedback}
        </Form>
    );
}

NetworkModal: React.FC<IProps> = ({ show, handleCloseModal, cb }) => {
  const themeContext = useContext(ThemeContext);
  const { theme } = themeContext!;
  const [networkUrlInput, setNetworkUrlInput] = useState("");
  const [networkNameInput, setNetworkNameInput] = useState("");

  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
    cb(sanitizeHtml(networkUrlInput), sanitizeHtml(networkNameInput));
    setNetworkUrlInput("");
    setNetworkNameInput("");
  };

  return (
    <Modal
      className={
        theme === "dark"
          ? "custom-modal dark-theme"
          : "custom-modal light-theme"
      }
      show={show}
      onHide={handleCloseModal}
    >
      <div className="modal-header">
        <h6>Add Network</h6>
      </div>
      <Modal.Body>
        <Form onSubmit={handleSubmit}>
          <Form.Group>
            <div className="d-flex align-items-center mb-2">
              <FontAwesomeIcon className="mr-3" icon={faTag} />
              <Form.Control
                required
                type="text"
                value={networkNameInput}
                maxLength={20}
                onChange={(e) => {
                  setNetworkNameInput(e.target.value.toString());
                }}
                placeholder="Enter Name"
              />
            </div>
          </Form.Group>
          <Form.Group>
            <div className="d-flex align-items-center mb-4">
              <FontAwesomeIcon className="mr-3" icon={faLink} />
              <Form.Control
                required
                type="text"
                value={networkUrlInput}
                onChange={(e) => {
                  setNetworkUrlInput(e.target.value.toString());
                }}
                placeholder="Enter Url"
              />
            </div>
          </Form.Group>
          <div>
            <Button block type="submit">
              Save
            </Button>
          </div>
        </Form>
      </Modal.Body>
    </Modal>
  );
}

render() {
    if (this.state.toConfirm) return <Redirect to='/checkout-confirm' />

    if (this.state.isLoading) return null;
    return (
      <div className="well-bs col-md-12 full-page no-padding-top">
        <div className="white-box no-margin-top">
          <div className="checkout ">
            <img src={supportedCards} alt="Supported cards" />
            <Form>
              <FormGroup
                controlId="card"
                validationState={this.getCardNumberValidationState()}>
                <ControlLabel>Card number</ControlLabel>
                <FormControl
                  name="card"
                  type="text"
                  value={this.state.card}
                  onChange={this.handleChange} />
                <FormControl.Feedback />
              </FormGroup>
              <div className="form-row">
                <FormGroup
                  controlId="expDate">
                  <ControlLabel>Expiration date</ControlLabel>
                  <FormControl
                    name="expDate"
                    type="date"
                    value={this.state.expDate}
                    onChange={this.handleChange} />
                  <FormControl.Feedback />
                </FormGroup>
                <FormGroup
                  className="ccv"
                  controlId="ccv">
                  <ControlLabel>CCV</ControlLabel>
                  <FormControl
                    name="ccv"
                    type="text"
                    value={this.state.ccv}
                    onChange={this.handleChange} />
                  <FormControl.Feedback />
                </FormGroup>
              </div>
            </Form>
          </div>
        </div>
        <div className="pull-right">
          <button className="btn btn-black" type="button" onClick={this.onCheckout}>{`Pay ($${this.getOrderTotal()})`}</button>
        </div>
      </div>
    );
  }

function AddAttendeeForm(props: AddAttendeeFormProps) {
    const [attendee, setAttendee] = useState('');
    const [selectedBackend, setSelectedBackend] = useState(props.defaultBackend);
    const [attendeeValidationResult, validateAndSetAttendeeResult, clearAttendeeResult] = useStringValidation(uniqnameSchema);

    if (!props.allowedBackends.has(selectedBackend)) {
        setSelectedBackend(Array.from(props.allowedBackends)[0]);
    }

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const curAttendeeValidationResult = !attendeeValidationResult ? validateAndSetAttendeeResult(attendee) : attendeeValidationResult;
        if (!curAttendeeValidationResult.isInvalid) {
            props.onSubmit(attendee, selectedBackend);
            clearAttendeeResult();
            setAttendee(''); // Clear successful input
        }
    }

    const handleAttendeeChange = (e: any) => {
        const newAttendee = e.currentTarget.value;
        setAttendee(newAttendee);
        validateAndSetAttendeeResult(newAttendee);
    }

    let feedback;
    if (attendeeValidationResult) {
        // Only show one message at a time.
        const feedbackTextClass = attendeeValidationResult.isInvalid ? ' text-danger' : '';
        feedback = <Form.Text className={`form-feedback${feedbackTextClass}`}>{attendeeValidationResult.messages[0]}</Form.Text>;
    }

    return (
        <Form onSubmit={handleSubmit} aria-label='Add Attendee'>
            <InputGroup>
                <Form.Control
                    id='add_attendee'
                    as='input'
                    value={attendee}
                    placeholder='Uniqname...'
                    onChange={handleAttendeeChange}
                    disabled={props.disabled}
                    isInvalid={attendeeValidationResult?.isInvalid}
                />
                <InputGroup.Append>
                    <MeetingBackendSelector
                        allowedBackends={props.allowedBackends}
                        backends={props.backends}
                        onChange={setSelectedBackend}
                        selectedBackend={selectedBackend}
                    />
                </InputGroup.Append>
                <InputGroup.Append>
                    <Button variant='success' type='submit' disabled={props.disabled}>
                        + Add Attendee
                    </Button>
                </InputGroup.Append>
            </InputGroup>
            {feedback}
        </Form>
    );
}

RecordPatientData = (props: any) => {

    const context = React.useContext(AppContext);
    const { t } = useTranslation();

    const { keycloak } = useKeycloak();

    const [isInit, setIsInit] = React.useState(false)
    const [uuIdHash, setUuIdHash] = React.useState('');

    const [isBack, setIsBack] = React.useState(true);
    const isBackRef = React.useRef(isBack);
    isBackRef.current = isBack;

    const [processId, setProcessId] = React.useState('');
    const processIdRef = React.useRef(processId);
    processIdRef.current = processId;

    const [person, setPerson] = React.useState<IPersonData>();
    const [address, setAddress] = React.useState<IAddressData>();

    const [pcrEnabled, setPcrEnabled] = React.useState(false);
    const [testType, setTestType] = React.useState(TestType.RAT);

    const [phoneNumber, setPhoneNumber] = React.useState('');
    const [emailAddress, setEmailAddress] = React.useState('');
    const [additionalInfo, setAdditionalInfo] = React.useState('');
    const [consent, setConsent] = React.useState(false);
    const [dccConsent, setDccConsent] = React.useState(false);
    const [dccNoConsent, setDccNoConsent] = React.useState(false);
    const [persDataInQR, setIncludePersData] = React.useState(false)
    const [privacyAgreement, setPrivacyAgreement] = React.useState(false)
    const [validated, setValidated] = React.useState(false);



    const handleError = (error: any) => {
        let msg = '';

        if (error) {
            msg = error.message
        }

        if (error && error.message && (error.message as string).includes('412')) {
            msg = t('translation:no-group-error');
        }
        props.setError({ error: error, message: msg, onCancel: context.navigation!.toLanding });
    }

    const handleDelete = () => { deleteQuicktest(processIdRef.current); }
    const [uuid, deleteQuicktest] = useGetUuid(props?.quickTest?.uuId, undefined, handleError);
    useOnUnload(() => handleDelete);


    React.useEffect(() => {
        return () => {
            if (isBackRef.current) {
                handleDelete();
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    React.useEffect(() => {

        if (keycloak.idTokenParsed) {
            setPcrEnabled(!!(keycloak.idTokenParsed as any).pcr_enabled);
        }

    }, [keycloak])

    // set values from props or new uuid on mount
    React.useEffect(() => {
        if (props.quickTest) {
            const p = props.quickTest;

            setConsent(p.processingConsens);
            setIncludePersData(p.includePersData);
            setPrivacyAgreement(p.privacyAgreement);
            setPhoneNumber(p.phoneNumber);
            if (p.emailAddress) {
                setEmailAddress(p.emailAddress);
            }
            if (p.additionalInfo) {
                setAdditionalInfo(p.additionalInfo);
            }
            setDccConsent(p.dccConsent);
            setDccNoConsent(!p.dccConsent);
            setTestType(p.testType);
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.quickTest]);

    // set hash from uuid
    React.useEffect(() => {
        if (uuid) {
            setUuIdHash(sha256(uuid).toString());
        }
    }, [uuid]);

    // set process id from hash
    React.useEffect(() => {
        setProcessId(utils.shortHash(uuIdHash));
    }, [uuIdHash]);

    // set ready state for spinner
    React.useEffect(() => {
        if (processId && context.navigation && context.valueSets) {
            setIsInit(true);
        }
    }, [processId, context.navigation, context.valueSets])

    const handleDccConsentChange = (evt: any) => {
        setDccConsent(true)
        setDccNoConsent(false);
    }

    const handleDccNoConsentChange = (evt: any) => {
        setDccConsent(false)
        setDccNoConsent(true);
    }

    const handleConsentChange = (evt: any) => {
        setConsent(!consent)
        setIncludePersData(false);
    }

    const handlePersDataInQRChange = (evt: any) => {
        setIncludePersData(!persDataInQR);
        setConsent(false);
    }

    const handleCancel = () => {
        props.setQuickTest(undefined);
        context.navigation!.toLanding();
    }

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        const form = event.currentTarget;

        event.preventDefault();
        event.stopPropagation();

        setValidated(true);
        setIsBack(false);

        if (form.checkValidity() && person) {
            props.setQuickTest({
                personData: person,
                addressData: address,
                processingConsens: consent,
                uuId: uuid,
                includePersData: persDataInQR,
                privacyAgreement: privacyAgreement,
                phoneNumber: phoneNumber,
                emailAddress: emailAddress || undefined,
                dccConsent: dccConsent,
                additionalInfo: additionalInfo || undefined,
                testType: testType
            })
            setTimeout(context.navigation!.toShowRecordPatient, 200);
        }

    }

    return (
        !(isInit && context && context.valueSets)
            ? <CwaSpinner />
            : <Fade appear={true} in={true} >
                <Container className='form-flex p-0 '>
                    <Row id='process-row'>
                        <span className='font-weight-bold mr-2'>{t('translation:process')}</span>
                        <span>{processId}</span>
                    </Row>
                    <Card id='data-card'>

                        <Form className='form-flex' onSubmit={handleSubmit} validated={validated}>

                            {/*
                            header with title and id card query
                            */}
                            <CardHeader idCard={true} title={t('translation:record-result2')} />

                            {/*
                            content area with patient inputs and check box
                            */}
                            <Card.Body id='data-body' className='pt-0'>

                                {/* dccConsent */}
                                <Row className='yellow'>
                                    <Col className='p-0' xs='5' sm='3'>
                                        <Row className='m-0 mb-2'>
                                            <Col className='p-0' xs='auto'>
                                                <Form.Label className='input-label pl-1'>
                                                    {t('translation:testZertifikat')}*
                                                </Form.Label>
                                            </Col>
                                            <Col className='p-0 jcc-xs-jcfs-lg ml-lg-2 d-flex'>
                                                <Image className="eu-flag" src={eu_logo} />
                                            </Col>
                                        </Row>
                                    </Col>
                                    <Col xs='7' sm='9'>
                                        <Row className='m-0'>
                                            <Form.Label className='input-label m-0'>{t('translation:dccConsent')}</Form.Label>
                                        </Row>
                                        <Collapse in={dccConsent}>
                                            <Row className='m-0 my-1'>
                                                <Form.Label className='input-label text-justify m-0'>
                                                    <Form.Label className='input-label mb-0 mr-2'>
                                                        &#xf071;
                                                    </Form.Label>
                                                    {t('translation:dccConsent-cwa-only')}
                                                </Form.Label>
                                            </Row>
                                        </Collapse>
                                        <Row className='m-0 mb-2'>
                                            <FormGroupDccConsentRadio controlId='dccConsent-radio1' name="dccConsent-radios" title={t('translation:ja')}
                                                checked={dccConsent}
                                                onChange={handleDccConsentChange}
                                                required={true}
                                            />

                                            <FormGroupDccConsentRadio controlId='dccConsent-radio2' name="dccConsent-radios" title={t('translation:nein')}
                                                checked={dccNoConsent}
                                                onChange={handleDccNoConsentChange}
                                                required={true}
                                            />
                                        </Row>
                                    </Col>
                                </Row>

                                <hr />
                                {!pcrEnabled
                                    ? <></>
                                    : <>
                                        <Row>
                                            <Form.Label className='input-label txt-no-wrap' column xs='5' sm='3'>{t('translation:test-type') + '*'}</Form.Label>

                                            <Col xs='7' sm='9' className='d-flex'>
                                                <Row>
                                                    <FormGroupInlineRadio controlId='test-type1' name="test-type-radios" title={t(`translation:${TestType.RAT}`)} sm='6'
                                                        checked={testType === TestType.RAT}
                                                        onChange={() => setTestType(TestType.RAT)}
                                                    />

                                                    <FormGroupInlineRadio controlId='test-type2' name="test-type-radios" title={t(`translation:${TestType.PCR}`)} sm='6'
                                                        checked={testType === TestType.PCR}
                                                        onChange={() => setTestType(TestType.PCR)}
                                                        required={true}
                                                    />
                                                </Row>
                                            </Col>
                                        </Row>
                                        <hr />
                                    </>
                                }

                                <PersonInputs quickTest={props.quickTest} onChange={setPerson} dccConsent={dccConsent} onDccChanged={setDccConsent} />

                                <hr />

                                {/* address input */}
                                <AddressInputs quickTest={props.quickTest} onChange={setAddress} />

                                <hr />

                                {/* phone number input */}

                                < FormGroupInput controlId='formPhoneInput' title={t('translation:phone-number')}
                                    value={phoneNumber}
                                    onChange={(evt: any) => setPhoneNumber(evt.target.value)}
                                    type='tel'
                                    required
                                    pattern={utils.pattern.tel}
                                    maxLength={79}
                                />

                                < FormGroupInput controlId='formEmailInput' title={t('translation:email-address')}
                                    value={emailAddress}
                                    onChange={(evt: any) => setEmailAddress(evt.target.value)}
                                    type='email'
                                    pattern={utils.pattern.eMail}
                                    minLength={5}
                                    maxLength={255}
                                />

                                < FormGroupInput controlId='formAdditionalInfo' title={t('translation:additional-info')}
                                    value={additionalInfo}
                                    onChange={(evt: any) => setAdditionalInfo(evt.target.value)}
                                    type='text'
                                    minLength={1}
                                    maxLength={250}
                                    prepend='i'
                                    tooltip={t('translation:additional-info-tooltip')}
                                />

                                <hr />
                                {/* processing consent check box */}
                                <FormGroupConsentCkb controlId='formConsentCheckbox' title={t('translation:processing-consent-title')}
                                    accordion={t('translation:processing-consent')}
                                    onClick={handleConsentChange}
                                    onChange={handleConsentChange}
                                    type='radio'
                                    name="check-radios"
                                    checked={consent}
                                    required={dccConsent}
                                />
                                <FormGroupConsentCkb controlId='formKeepPrivateCheckbox' title={t('translation:patientdata-exclude-title')}
                                    accordion={t('translation:patientdata-exclude')}
                                    onClick={handlePersDataInQRChange}
                                    onChange={handlePersDataInQRChange}
                                    type='radio'
                                    name="check-radios"
                                    checked={persDataInQR}
                                    required={dccConsent}
                                />
                                <FormGroupConsentCkb controlId='formDataPrivacyCheckbox' title={t('translation:data-privacy-approve')}
                                    onChange={(evt: any) => setPrivacyAgreement(evt.currentTarget.checked)}
                                    type='checkbox'
                                    checked={privacyAgreement}
                                    required
                                />
                            </Card.Body>

                            {/*
    footer with clear and nex button
    */}
                            <CardFooter handleCancel={handleCancel} />

                        </Form>
                    </Card>
                </Container>
            </Fade>
    )
}