reorganized react components

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

@@ -2,8 +2,8 @@ import React, { ReactNode, BaseSyntheticEvent } from 'react';
 import Modal from 'react-modal';
 import { useTranslation } from 'react-i18next';
 import { Loader } from './loader';
-import CustomAssetAPI from '../api/custom-asset';
-import { CustomAssetName } from '../models/custom-asset';
+import CustomAssetAPI from '../../api/custom-asset';
+import { CustomAssetName } from '../../models/custom-asset';
 import { FabButton } from './fab-button';
 
 Modal.setAppElement('body');

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { LabelledInput } from './labelled-input';
+import { LabelledInput } from './base/labelled-input';
 import { useTranslation } from 'react-i18next';
 
 interface DocumentFiltersProps {

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

@@ -5,8 +5,8 @@ import moment from 'moment';
 import { IApplication } from '../models/application';
 import '../lib/i18n';
 import { PaymentSchedule } from '../models/payment-schedule';
-import { Loader } from './loader';
-import { FabModal } from './fab-modal';
+import { Loader } from './base/loader';
+import { FabModal } from './base/fab-modal';
 import { IFablab } from '../models/fablab';
 
 declare var Application: IApplication;

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { IApplication } from '../models/application';
 import { useTranslation } from 'react-i18next';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { react2angular } from 'react2angular';
 import PaymentScheduleAPI from '../api/payment-schedule';
 import { PaymentSchedulesTable } from './payment-schedules-table';
-import { FabButton } from './fab-button';
+import { FabButton } from './base/fab-button';
 import { User } from '../models/user';
 import { PaymentSchedule } from '../models/payment-schedule';
 

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { IApplication } from '../models/application';
 import { useTranslation } from 'react-i18next';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { react2angular } from 'react2angular';
 import PaymentScheduleAPI from '../api/payment-schedule';
 import { DocumentFilters } from './document-filters';
 import { PaymentSchedulesTable } from './payment-schedules-table';
-import { FabButton } from './fab-button';
+import { FabButton } from './base/fab-button';
 import { User } from '../models/user';
 import { PaymentSchedule } from '../models/payment-schedule';
 

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

@@ -1,12 +1,12 @@
 import React, { ReactEventHandler, ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import moment from 'moment';
 import { IFablab } from '../models/fablab';
 import _ from 'lodash';
 import { PaymentSchedule, PaymentScheduleItem, PaymentScheduleItemState } from '../models/payment-schedule';
-import { FabButton } from './fab-button';
-import { FabModal } from './fab-modal';
+import { FabButton } from './base/fab-button';
+import { FabModal } from './base/fab-modal';
 import PaymentScheduleAPI from '../api/payment-schedule';
 import { StripeElements } from './stripe-elements';
 import { StripeConfirm } from './stripe-confirm';

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

@@ -1,17 +1,13 @@
-/**
- * Form to set the PayZen's username, password and public key
- */
-
 import React, { ReactNode, useEffect, useState } from 'react';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { useTranslation } from 'react-i18next';
 import SettingAPI from '../api/setting';
 import { SettingName } from '../models/setting';
-import { FabInput } from './fab-input';
+import { FabInput } from './base/fab-input';
 import { enableMapSet } from 'immer';
 import { useImmer } from 'use-immer';
 import PayzenAPI from '../api/payzen';
-import { HtmlTranslate } from './html-translate';
+import { HtmlTranslate } from './base/html-translate';
 
 enableMapSet();
 
@@ -31,19 +27,34 @@ const payZenKeys = SettingAPI.query(payZenSettings);
 // this cannot be handled by a React state because of their asynchronous nature
 let pendingKeysValidation = false;
 
+/**
+ * Form to set the PayZen's username, password and public key
+ */
 const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys }) => {
   const { t } = useTranslation('admin');
 
+  // values of the PayZen settings
   const [settings, updateSettings] = useImmer<Map<SettingName, string>>(new Map(payZenSettings.map(name => [name, ''])));
+  // Icon of the fieldset for the PayZen's keys concerning the REST API. Used to display if the key is valid.
   const [restApiAddOn, setRestApiAddOn] = useState<ReactNode>(null);
-  const [restApiAddOnClassName, setRestApiAddOnClassName] = useState<string>('');
+  // Style class for the add-on icon, for the REST API
+  const [restApiAddOnClassName, setRestApiAddOnClassName] = useState<'key-invalid' | 'key-valid' | ''>('');
+  // Icon of the input field for the PayZen's public key. Used to display if the key is valid.
   const [publicKeyAddOn, setPublicKeyAddOn] = useState<ReactNode>(null);
-  const [publicKeyAddOnClassName, setPublicKeyAddOnClassName] = useState<string>('');
+  // Style class for the add-on icon, for the public key
+  const [publicKeyAddOnClassName, setPublicKeyAddOnClassName] = useState<'key-invalid' | 'key-valid' | ''>('');
 
+  /**
+   * When the component loads for the first time, initialize the keys with the values fetched from the API (if any)
+   */
   useEffect(() => {
     updateSettings(payZenKeys.read());
   }, []);
 
+  /**
+   * When the style class for the public key, and the REST API are updated, check if they indicate valid keys.
+   * If both are valid, run the 'onValidKeys' callback
+   */
   useEffect(() => {
     const validClassName = 'key-valid';
     if (publicKeyAddOnClassName === validClassName && restApiAddOnClassName === validClassName) {

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

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../models/application';
 import { useTranslation } from 'react-i18next';
 import SettingAPI from '../api/setting';
 import { SettingName } from '../models/setting';
 import { useImmer } from 'use-immer';
-import { FabInput } from './fab-input';
-import { FabButton } from './fab-button';
-import { HtmlTranslate } from './html-translate';
+import { FabInput } from './base/fab-input';
+import { FabButton } from './base/fab-button';
+import { HtmlTranslate } from './base/html-translate';
 
 declare var Application: IApplication;
 

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

@@ -6,7 +6,7 @@ import _ from 'lodash'
 import { IApplication } from '../models/application';
 import { Plan } from '../models/plan';
 import { User, UserRole } from '../models/user';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import '../lib/i18n';
 import { IFablab } from '../models/fablab';
 

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

@@ -5,10 +5,10 @@
 
 import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
 import { react2angular } from 'react2angular';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { IApplication } from '../models/application';
 import { useTranslation } from 'react-i18next';
-import { FabModal, ModalSize } from './fab-modal';
+import { FabModal, ModalSize } from './base/fab-modal';
 import { User } from '../models/user';
 import { Gateway } from '../models/gateway';
 import { StripeKeysForm } from './stripe-keys-form';

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import Switch from 'react-switch';
 import { IApplication } from '../models/application';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import '../lib/i18n';
 
 declare var Application: IApplication;

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

@@ -1,11 +1,11 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { useTranslation } from 'react-i18next';
 import SettingAPI from '../api/setting';
 import { SettingName } from '../models/setting';
-import { FabInput } from './fab-input';
+import { FabInput } from './base/fab-input';
 import StripeAPI from '../api/stripe';
-import { HtmlTranslate } from './html-translate';
+import { HtmlTranslate } from './base/html-translate';
 
 
 interface StripeKeysFormProps {

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

@@ -1,10 +1,10 @@
 import React, { ReactNode, useEffect, useState } from 'react';
 import { react2angular } from 'react2angular';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { IApplication } from '../models/application';
 import { StripeElements } from './stripe-elements';
 import { useTranslation } from 'react-i18next';
-import { FabModal, ModalSize } from './fab-modal';
+import { FabModal, ModalSize } from './base/fab-modal';
 import { SetupIntent } from '@stripe/stripe-js';
 import { WalletInfo } from './wallet-info';
 import { User } from '../models/user';
@@ -14,14 +14,14 @@ import { PaymentSchedule } from '../models/payment-schedule';
 import { IFablab } from '../models/fablab';
 import WalletLib from '../lib/wallet';
 import { StripeForm } from './stripe-form';
+import { CartItems, PaymentConfirmation } from '../models/payment';
+import WalletAPI from '../api/wallet';
+import PriceAPI from '../api/price';
+import { HtmlTranslate } from './base/html-translate';
 
 import stripeLogo from '../../../images/powered_by_stripe.png';
 import mastercardLogo from '../../../images/mastercard.png';
 import visaLogo from '../../../images/visa.png';
-import { CartItems, PaymentConfirmation } from '../models/payment';
-import WalletAPI from '../api/wallet';
-import PriceAPI from '../api/price';
-import { HtmlTranslate } from './html-translate';
 
 declare var Application: IApplication;
 declare var Fablab: IFablab;

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { IApplication } from '../models/application';
 import '../lib/i18n';
-import { Loader } from './loader';
+import { Loader } from './base/loader';
 import { User } from '../models/user';
 import { Wallet } from '../models/wallet';
 import { IFablab } from '../models/fablab';