(quality) adapt code to New JSX transform

.eslintrc

@@ -37,14 +37,11 @@
         "sourceType": "module",
         "project": "./tsconfig.json"
       },
-      "settings": {
-        "react": {
-          "version": "detect"
-        }
-      },
       "plugins": ["@typescript-eslint", "react"],
       "rules": {
-        "react/prop-types": "off"
+        "react/prop-types": "off",
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
       }
     },
     {
@@ -67,6 +64,11 @@
         "camelcase": "off"
       }
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }
 

app/frontend/src/javascript/components/accounting/accounting-codes-settings.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { FabButton } from '../base/fab-button';

app/frontend/src/javascript/components/accounting/advanced-accounting-form.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import SettingAPI from '../../api/setting';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/angular/switch.ts

@@ -1,10 +1,10 @@
-/**
- * This is a compatibility wrapper to allow usage of react-switch inside the angular.js app
- */
 import Switch from 'react-switch';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';
 
 declare const Application: IApplication;
 
+/**
+ * This is a compatibility wrapper to allow usage of react-switch inside the angular.js app
+ */
 Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className', 'disabled']));

app/frontend/src/javascript/components/authentication-provider/boolean-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';

app/frontend/src/javascript/components/authentication-provider/data-mapping-form.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { UseFormRegister, useFieldArray, ArrayPath, useWatch, Path, FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import AuthProviderAPI from '../../api/auth-provider';

app/frontend/src/javascript/components/authentication-provider/database-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormInput } from '../form/form-input';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/authentication-provider/date-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';
 import { FormSelect } from '../form/form-select';

app/frontend/src/javascript/components/authentication-provider/integer-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArrayPath, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/authentication-provider/oauth2-data-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/authentication-provider/oauth2-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormInput } from '../form/form-input';
 import { UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/authentication-provider/openid-connect-data-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Path, UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormInput } from '../form/form-input';

app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Path, UseFormRegister } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { useTranslation } from 'react-i18next';

app/frontend/src/javascript/components/authentication-provider/provider-form.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
 import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
 import { react2angular } from 'react2angular';
 import { debounce as _debounce } from 'lodash';

app/frontend/src/javascript/components/authentication-provider/string-mapping-form.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArrayPath, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/authentication-provider/type-mapping-modal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { IntegerMappingForm } from './integer-mapping-form';

app/frontend/src/javascript/components/base/accordion-item.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { CaretDown } from 'phosphor-react';
 
 interface AccordionItemProps {

app/frontend/src/javascript/components/base/error-boundary.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 
 interface ErrorBoundaryState {
   hasError: boolean;
@@ -8,7 +8,7 @@ interface ErrorBoundaryState {
  * This component will catch javascript errors anywhere in their child component tree and display a message to the user.
  * @see https://reactjs.org/docs/error-boundaries.html
  */
-export class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<unknown, ErrorBoundaryState> {
   constructor (props) {
     super(props);
     this.state = { hasError: false };

app/frontend/src/javascript/components/base/fab-alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabAlertProps {
   level: 'info' | 'warning' | 'danger',

app/frontend/src/javascript/components/base/fab-button.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, BaseSyntheticEvent } from 'react';
+import { ReactNode, BaseSyntheticEvent } from 'react';
+import * as React from 'react';
 
 interface FabButtonProps {
   onClick?: (event: BaseSyntheticEvent) => void,

app/frontend/src/javascript/components/base/fab-input.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import { BaseSyntheticEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
 import { debounce as _debounce } from 'lodash';
 
 type inputType = string|number|readonly string [];

app/frontend/src/javascript/components/base/fab-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, BaseSyntheticEvent, useEffect } from 'react';
+import { ReactNode, BaseSyntheticEvent, useEffect } from 'react';
+import * as React from 'react';
 import Modal from 'react-modal';
 import { useTranslation } from 'react-i18next';
 import { Loader } from './loader';

app/frontend/src/javascript/components/base/fab-output-copy.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabOutputCopyProps {
   text: string,

app/frontend/src/javascript/components/base/fab-pagination.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from 'phosphor-react';
 
 interface FabPaginationProps {

app/frontend/src/javascript/components/base/fab-panel.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 
 interface FabPanelProps {
   className?: string,

app/frontend/src/javascript/components/base/fab-popover.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 
 interface FabPopoverProps {
   title: string,

app/frontend/src/javascript/components/base/fab-state-label.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 interface FabStateLabelProps {
   status?: string,

app/frontend/src/javascript/components/base/fab-tabs.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 
 type tabId = string|number;
 

app/frontend/src/javascript/components/base/html-translate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface HtmlTranslateProps {

app/frontend/src/javascript/components/base/labelled-input.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, ReactNode } from 'react';
+import { BaseSyntheticEvent, ReactNode } from 'react';
+import * as React from 'react';
 
 type inputType = string|number|readonly string [];
 

app/frontend/src/javascript/components/base/loader.tsx

@@ -1,4 +1,5 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
+import * as React from 'react';
 
 /**
  * This component is a wrapper that display a loader while the children components have their rendering suspended.

app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, RefObject, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, RefObject, useEffect, useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useEditor, EditorContent, Editor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';

app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { Editor } from '@tiptap/react';

app/frontend/src/javascript/components/cart/cart-button.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';

app/frontend/src/javascript/components/cart/store-cart.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';

app/frontend/src/javascript/components/coupon/coupon-input.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabInput } from '../base/fab-input';
 import { FabAlert } from '../base/fab-alert';

app/frontend/src/javascript/components/dashboard/orders/orders-dashboard.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../../base/loader';

app/frontend/src/javascript/components/dashboard/reservations/credits-panel.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabPanel } from '../../base/fab-panel';
 import { Loader } from '../../base/loader';
 import { useTranslation } from 'react-i18next';

app/frontend/src/javascript/components/dashboard/reservations/reservations-dashboard.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { IApplication } from '../../../models/application';
 import { react2angular } from 'react2angular';
 import { ReservationsPanel } from './reservations-panel';

app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { FabPanel } from '../../base/fab-panel';
 import { Reservation, SlotsReservation } from '../../../models/reservation';
 import ReservationAPI from '../../../api/reservation';

app/frontend/src/javascript/components/document-filters.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { LabelledInput } from './base/labelled-input';
 import { useTranslation } from 'react-i18next';
 import { TDateISODate } from '../typings/date-iso';

app/frontend/src/javascript/components/events/event-card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';

app/frontend/src/javascript/components/events/event-form.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Event, EventDecoration, EventPriceCategoryAttributes, RecurrenceOption } from '../../models/event';
 import EventAPI from '../../api/event';

app/frontend/src/javascript/components/events/update-recurrent-modal.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Event } from '../../models/event';
 import { FabModal } from '../base/fab-modal';

app/frontend/src/javascript/components/form/abstract-form-item.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { AbstractFormComponent } from '../../models/form-component';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { get as _get } from 'lodash';

app/frontend/src/javascript/components/form/form-checklist.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Controller, Path, FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';

app/frontend/src/javascript/components/form/form-file-upload.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Path } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';

app/frontend/src/javascript/components/form/form-image-upload.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Path, Controller } from 'react-hook-form';
 import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';

app/frontend/src/javascript/components/form/form-input.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
+import * as React from 'react';
 import { FieldPathValue } from 'react-hook-form';
 import { debounce as _debounce } from 'lodash';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/form/form-multi-file-upload.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FormFileUpload } from './form-file-upload';
 import { FabButton } from '../base/fab-button';
 import { Plus } from 'phosphor-react';

app/frontend/src/javascript/components/form/form-multi-image-upload.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormComponent, FormControlledComponent } from '../../models/form-component';
 import { AbstractFormItemProps } from './abstract-form-item';

app/frontend/src/javascript/components/form/form-multi-select.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import AsyncSelect from 'react-select/async';
 import Select from 'react-select';
 import AsyncCreatableSelect from 'react-select/async-creatable';
@@ -39,8 +39,8 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string, select?:
 export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange, formState, warning, loadOptions, creatable, selectKey }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const { t } = useTranslation('shared');
 
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
-  const [allOptions, setAllOptions] = React.useState<Array<selectOption<TOptionValue>>>(options || []);
+  const [allOptions, setAllOptions] = useState<Array<selectOption<TOptionValue>>>(options || []);
 
   useEffect(() => {
     if (typeof disabled === 'function') {

app/frontend/src/javascript/components/form/form-rich-text.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
 import { FormControlledComponent } from '../../models/form-component';
 import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/form/form-select.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Select from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Controller, Path } from 'react-hook-form';
@@ -22,7 +22,7 @@ interface FormSelectProps<TFieldValues, TContext extends object, TOptionValue, T
  * This component is a wrapper for react-select to use with react-hook-form
  */
 export const FormSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue, TOptionLabel>({ id, label, tooltip, className, control, placeholder, options, valueDefault, error, warning, rules, disabled = false, onChange, clearable = false, formState, creatable = false }: FormSelectProps<TFieldValues, TContext, TOptionValue, TOptionLabel>) => {
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
   useEffect(() => {
     if (typeof disabled === 'function') {

app/frontend/src/javascript/components/form/form-switch.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormControlledComponent } from '../../models/form-component';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';

app/frontend/src/javascript/components/form/unsaved-form-alert.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { UIRouter } from '@uirouter/angularjs';
 import { FormState } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';

app/frontend/src/javascript/components/group/change-group.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { User } from '../../models/user';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';

app/frontend/src/javascript/components/machines/machine-card.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { Machine } from '../../models/machine';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';

app/frontend/src/javascript/components/machines/machine-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { Machine } from '../../models/machine';
 import MachineAPI from '../../api/machine';

app/frontend/src/javascript/components/machines/machines-filters.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { SelectOption } from '../../models/select';

app/frontend/src/javascript/components/machines/machines-list.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { Machine } from '../../models/machine';
 import { IApplication } from '../../models/application';
 import { react2angular } from 'react2angular';

app/frontend/src/javascript/components/machines/pending-training-modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { HtmlTranslate } from '../base/html-translate';

app/frontend/src/javascript/components/machines/required-training-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';
 import { HtmlTranslate } from '../base/html-translate';

app/frontend/src/javascript/components/machines/reserve-button.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { PendingTrainingModal } from './pending-training-modal';

app/frontend/src/javascript/components/payment-schedule/payment-schedule-item-actions.tsx

@@ -4,7 +4,8 @@ import {
   PaymentScheduleItem,
   PaymentScheduleItemState
 } from '../../models/payment-schedule';
-import React, { ReactElement, useState } from 'react';
+import { ReactElement, useState } from 'react';
+import * as React from 'react';
 import { FabButton } from '../base/fab-button';
 import { useTranslation } from 'react-i18next';
 import { User } from '../../models/user';

app/frontend/src/javascript/components/payment-schedule/payment-schedule-summary.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import '../../lib/i18n';

app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { PaymentSchedulesTable } from './payment-schedules-table';

app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { DocumentFilters } from '../document-filters';

app/frontend/src/javascript/components/payment-schedule/payment-schedules-table.tsx

@@ -1,4 +1,5 @@
-import React, { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
+import { ReactEventHandler, useState, useEffect, ReactElement } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../base/loader';
 import _ from 'lodash';

app/frontend/src/javascript/components/payment-schedule/select-schedule.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import Switch from 'react-switch';

app/frontend/src/javascript/components/payment-schedule/update-payment-mean-modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../base/fab-modal';

app/frontend/src/javascript/components/payment/abstract-payment-modal.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
+import { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import WalletLib from '../../lib/wallet';
 import { WalletInfo } from './wallet-info';

app/frontend/src/javascript/components/payment/card-payment-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { StripeModal } from './stripe/stripe-modal';

app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx

@@ -1,4 +1,5 @@
-import React, { FormEvent, useEffect, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
+import * as React from 'react';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
 import { GatewayFormProps } from '../abstract-payment-modal';

app/frontend/src/javascript/components/payment/local-payment/local-payment-modal.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { AbstractPaymentModal, GatewayFormProps } from '../abstract-payment-modal';
 import { LocalPaymentForm } from './local-payment-form';
 import { ShoppingCart } from '../../../models/payment';

app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../../base/fab-modal';
 import { PaymentSchedule } from '../../../models/payment-schedule';

app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx

@@ -1,4 +1,5 @@
-import React, { FormEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
+import { FormEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import KRGlue from '@lyracom/embedded-form-glue';
 import { GatewayFormProps } from '../abstract-payment-modal';
 import SettingAPI from '../../../api/setting';

app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { enableMapSet } from 'immer';
 import { useImmer } from 'use-immer';

app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { GatewayFormProps, AbstractPaymentModal } from '../abstract-payment-modal';
 import { ShoppingCart } from '../../../models/payment';
 import { PaymentSchedule } from '../../../models/payment-schedule';

app/frontend/src/javascript/components/payment/payzen/payzen-settings.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { useTranslation } from 'react-i18next';
 import { useImmer } from 'use-immer';

app/frontend/src/javascript/components/payment/select-gateway-modal.tsx

@@ -3,7 +3,9 @@
  * The configuration of a payment gateway is required to enable the online payments.
  */
 
-import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
+import { BaseSyntheticEvent, useEffect, useState } from 'react';
+
+import * as React from 'react';
 import { react2angular } from 'react2angular';
 import { useTranslation } from 'react-i18next';
 import { StripeKeysForm } from './stripe/stripe-keys-form';

app/frontend/src/javascript/components/payment/stripe/payment-modal.tsx

@@ -2,7 +2,8 @@ import { Invoice } from '../../../models/invoice';
 import { PaymentSchedule } from '../../../models/payment-schedule';
 import { ShoppingCart } from '../../../models/payment';
 import { User } from '../../../models/user';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import WalletAPI from '../../../api/wallet';
 import { Wallet } from '../../../models/wallet';
 import WalletLib from '../../../lib/wallet';

app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FabModal } from '../../base/fab-modal';
 import { StripeCardUpdate } from './stripe-card-update';

app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx

@@ -1,4 +1,5 @@
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
+import * as React from 'react';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { User } from '../../../models/user';
 import StripeAPI from '../../../api/stripe';

app/frontend/src/javascript/components/payment/stripe/stripe-confirm-modal.tsx

@@ -1,6 +1,7 @@
 import { StripeConfirm } from './stripe-confirm';
 import { FabModal } from '../../base/fab-modal';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import PaymentScheduleAPI from '../../../api/payment-schedule';
 import { PaymentScheduleItem } from '../../../models/payment-schedule';
 import { useTranslation } from 'react-i18next';

app/frontend/src/javascript/components/payment/stripe/stripe-confirm.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useStripe } from '@stripe/react-stripe-js';
 import { useTranslation } from 'react-i18next';
 

app/frontend/src/javascript/components/payment/stripe/stripe-elements.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
+import * as React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import SettingAPI from '../../../api/setting';

app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx

@@ -1,4 +1,5 @@
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
+import * as React from 'react';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { useTranslation } from 'react-i18next';
 import { GatewayFormProps } from '../abstract-payment-modal';

app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { HtmlTranslate } from '../../base/html-translate';
 import { FabInput } from '../../base/fab-input';

app/frontend/src/javascript/components/payment/stripe/stripe-modal.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { StripeElements } from './stripe-elements';
 import { StripeForm } from './stripe-form';
 import { GatewayFormProps, AbstractPaymentModal } from '../abstract-payment-modal';

app/frontend/src/javascript/components/payment/update-card-modal.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
+import * as React from 'react';
 import { Loader } from '../base/loader';
 import { StripeCardUpdateModal } from './stripe/stripe-card-update-modal';
 import { PayzenCardUpdateModal } from './payzen/payzen-card-update-modal';

app/frontend/src/javascript/components/payment/wallet-info.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../../models/application';

app/frontend/src/javascript/components/plan-categories/delete-plan-category.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';

app/frontend/src/javascript/components/plan-categories/manage-plan-category.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PlanCategory } from '../../models/plan-category';
 import { FabButton } from '../base/fab-button';

app/frontend/src/javascript/components/plan-categories/plan-categories-list.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';

app/frontend/src/javascript/components/plan-categories/plan-category-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import PlanCategoryAPI from '../../api/plan-category';
 import { PlanCategory } from '../../models/plan-category';

app/frontend/src/javascript/components/plans/partner-modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FabModal } from '../base/fab-modal';
 import { useTranslation } from 'react-i18next';
 import { SubmitHandler, useForm } from 'react-hook-form';

app/frontend/src/javascript/components/plans/plan-card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
 import _ from 'lodash';

app/frontend/src/javascript/components/plans/plan-form.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { Interval, Plan } from '../../models/plan';
 import { useTranslation } from 'react-i18next';

app/frontend/src/javascript/components/plans/plan-pricing-form.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Control, FormState, UseFormSetValue } from 'react-hook-form/dist/types/form';