From 3a594a0a32c43ac24380c634cd82115a7f1bfecc Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Wed, 17 Nov 2021 09:51:24 +0100
Subject: [PATCH 1/5] Allow to clear car selection

---
 src/components/modal/ModalSelect.tsx          | 50 +++++++++++++------
 src/components/modal/ModalStyles.tsx          |  4 ++
 .../ChargingStationConnectorDetails.tsx       | 19 ++++++-
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/modal/ModalSelect.tsx b/src/components/modal/ModalSelect.tsx
index 05934c658..de57bf664 100644
--- a/src/components/modal/ModalSelect.tsx
+++ b/src/components/modal/ModalSelect.tsx
@@ -17,8 +17,12 @@ export interface Props<T> extends BaseProps {
   disabled?: boolean;
   label?: string;
   renderItem?: (item?: T) => React.ReactElement;
+  // Render a generic item when the items list is empty (only if renderItemPlaceholder is null)
   renderNoItem?: () => React.ReactElement;
+  // Render a generic item when nothing is selected
   renderItemPlaceholder?: () => React.ReactElement;
+  // Whether or not to display the button to cleat the input
+  canClearInput?: boolean;
   selectionMode: ItemSelectionMode;
   onItemsSelected: (selectedItems: T[]) => void;
   defaultItemLoading?: boolean;
@@ -26,6 +30,7 @@ export interface Props<T> extends BaseProps {
 }
 interface State<T> {
   isVisible: boolean;
+  noneSelected: boolean;
   selectedItems: T[];
   selectedItemsCount: number;
 }
@@ -42,12 +47,29 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
     this.state = {
       isVisible: false,
       selectedItems: [],
-      selectedItemsCount: 0
+      selectedItemsCount: 0,
+      noneSelected: false
     };
   }
 
-  public clearInput() {
-    this.setState({ selectedItems: [] });
+  public componentDidMount() {
+    this.setState({ selectedItems: [this.props.defaultItem] });
+  }
+
+  public componentDidUpdate(prevProps: Readonly<Props<T>>, prevState: Readonly<State<T>>, snapshot?: any) {
+    if(this.state.selectedItems[0]?.id !== this.props.defaultItem?.id && this.state.noneSelected === false) {
+      this.setState({ selectedItems: [this.props.defaultItem, ...this.state.selectedItems.slice(1)] });
+    }
+  }
+
+  public resetInput(noneSelected: boolean = false): void {
+    this.itemsListRef?.current?.clearSelectedItems();
+    this.setState({noneSelected, selectedItems: [], selectedItemsCount: 0, isVisible: false});
+  }
+
+  private clearInput(): void {
+    this.resetInput(true);
+
   }
 
   public render() {
@@ -88,7 +110,7 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
             </View>
             {selectionMode === ItemSelectionMode.MULTI && (
               <View style={style.bottomButtonContainer}>
-                <Button style={style.modalButton} block light onPress={() => this.clearSelection()}>
+                <Button style={style.modalButton} block light onPress={() => this.resetInput()}>
                   <Text style={style.buttonText}>{I18n.t('general.reset')}</Text>
                 </Button>
                 <Button
@@ -107,11 +129,6 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
     );
   }
 
-  private clearSelection(): void {
-    this.itemsListRef?.current?.clearSelectedItems();
-    this.setState(this.state);
-  }
-
   private validateSelection(): void {
     const { onItemsSelected } = this.props;
     const selectedItems = this.itemsListRef?.current?.state.selectedItems;
@@ -130,8 +147,8 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
   }
 
   private renderButton(style: any) {
-    const { defaultItemLoading, defaultItem, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled } = this.props;
-    const { selectedItems } = this.state;
+    const { defaultItemLoading, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled, canClearInput } = this.props;
+    const { selectedItems, noneSelected } = this.state;
     const listItemCommonStyle = computeListItemCommonStyle();
     const commonColors = Utils.getCurrentCommonColor();
     if (defaultItemLoading) {
@@ -141,16 +158,21 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
         </View>
       );
     }
-    if (defaultItem || selectedItems[0]) {
+    if (selectedItems[0]) {
       return (
         <TouchableOpacity
           disabled={disabled || !openable}
           onPress={() => this.setState({ isVisible: true })}
           style={[style.itemContainer, disabled && style.buttonDisabled]}>
-          {renderItem?.(selectedItems.length > 0 ? selectedItems[0] : defaultItem)}
+          {canClearInput && (
+            <TouchableOpacity style={style.clearContainer} onPress={() => this.clearInput()}>
+              <Text style={{textAlign: 'right', color: commonColors.primary}}>Clear field</Text>
+            </TouchableOpacity>
+          )}
+          {renderItem?.(selectedItems[0])}
         </TouchableOpacity>
       );
-    } else if (renderItemPlaceholder) {
+    } else if (renderItemPlaceholder && noneSelected !== false) {
       return (
         <TouchableOpacity onPress={() => this.setState({ isVisible: true })} style={style.itemContainer}>
           {renderItemPlaceholder?.()}
diff --git a/src/components/modal/ModalStyles.tsx b/src/components/modal/ModalStyles.tsx
index 13cd45263..60f085beb 100644
--- a/src/components/modal/ModalStyles.tsx
+++ b/src/components/modal/ModalStyles.tsx
@@ -120,6 +120,10 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       marginLeft: '5%',
       marginBottom: '6@s',
       textAlign: 'left'
+    },
+    clearContainer: {
+      width: '100%',
+      paddingBottom: '3@s'
     }
   });
   const portraitStyles = {};
diff --git a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
index f436f77a7..c537ed4c2 100644
--- a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
+++ b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
@@ -1071,9 +1071,11 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
           disabled={disabled}
           openable={true}
           renderNoItem={this.renderNoCar.bind(this)}
+          canClearInput={true}
           renderItem={() => <CarComponent car={selectedCar} navigation={navigation} />}
           ref={this.carModalRef}
           defaultItem={selectedCar}
+          renderItemPlaceholder={this.renderCarPlaceholder.bind(this)}
           defaultItemLoading={tagCarLoading}
           onItemsSelected={(selectedCars: Car[]) => this.setState({ selectedCar: selectedCars?.[0] })}
           navigation={navigation}
@@ -1084,6 +1086,19 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
     );
   }
 
+  private renderCarPlaceholder() {
+    const listItemCommonStyle = computeListItemCommonStyle();
+    const style = computeStyleSheet();
+    return (
+      <View style={[listItemCommonStyle.container, style.noItemContainer, style.noCarContainer]}>
+        <Icon style={style.noCarIcon} type={'MaterialCommunityIcons'} name={'car'} />
+        <View style={style.column}>
+          <Text style={style.messageText}>{I18n.t('cars.noCarMessageTitle')}</Text>
+        </View>
+      </View>
+    );
+  }
+
   private renderNoCar() {
     const listItemCommonStyle = computeListItemCommonStyle();
     const style = computeStyleSheet();
@@ -1168,8 +1183,8 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
     this.setState({ tagCarLoading: true });
     try {
       const userDefaultTagCar = await this.getUserDefaultTagAndCar(selectedUser);
-      this.carModalRef.current?.clearInput();
-      this.tagModalRef.current?.clearInput();
+      this.carModalRef.current?.resetInput();
+      this.tagModalRef.current?.resetInput();
       // Temporary workaround to ensure that the default property is set (server-side changes are to be done)
       if (userDefaultTagCar?.tag) {
         userDefaultTagCar.tag.default = true;

From bc04ee5656fb04b9930bc7cacf04846cc9c8bafa Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Thu, 18 Nov 2021 17:12:58 +0100
Subject: [PATCH 2/5] Fixed clear car and added error when user inactive

---
 ios/Podfile.lock                              |  2 +-
 src/I18n/languages/cz.json                    |  1 +
 src/I18n/languages/de.json                    |  1 +
 src/I18n/languages/en.json                    |  1 +
 src/I18n/languages/es.json                    |  1 +
 src/I18n/languages/fr.json                    |  1 +
 src/I18n/languages/it.json                    |  1 +
 src/I18n/languages/pt.json                    |  1 +
 src/components/modal/ModalSelect.tsx          | 39 +++++++------------
 src/components/modal/ModalStyles.tsx          |  3 +-
 src/components/user/UserComponent.tsx         |  5 ++-
 src/screens/cars/AddCar.tsx                   |  2 +-
 .../ChargingStationConnectorDetails.tsx       | 17 ++++++--
 .../ChargingStationConnectorDetailsStyles.tsx |  7 ++--
 14 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 70074616b..8b3fd02b1 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -768,7 +768,7 @@ SPEC CHECKSUMS:
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   Fabric: ea977e3cd9c20425516d3dafd3bf8c941c51223f
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: b35d59fb992273db0c098cbb3d3bcf7788f1e9f9
+  FBReactNativeSpec: 52a80ca1a343877d4c72738fffcf539ac4a64dec
   Firebase: 8db6f2d1b2c5e2984efba4949a145875a8f65fe5
   FirebaseAnalytics: 5dd088bd2e67bb9d13dbf792d1164ceaf3052193
   FirebaseCore: d889d9e12535b7f36ac8bfbf1713a0836a3012cd
diff --git a/src/I18n/languages/cz.json b/src/I18n/languages/cz.json
index 9aa0903d1..0a28e41c0 100644
--- a/src/I18n/languages/cz.json
+++ b/src/I18n/languages/cz.json
@@ -243,6 +243,7 @@
     "car": "Car",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Add a car",
     "addCarButton": "Add car",
diff --git a/src/I18n/languages/de.json b/src/I18n/languages/de.json
index d29a5d399..4b2d15c15 100644
--- a/src/I18n/languages/de.json
+++ b/src/I18n/languages/de.json
@@ -243,6 +243,7 @@
     "car": "Car",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Add a car",
     "addCarButton": "Add car",
diff --git a/src/I18n/languages/en.json b/src/I18n/languages/en.json
index 23103c478..244217fda 100644
--- a/src/I18n/languages/en.json
+++ b/src/I18n/languages/en.json
@@ -243,6 +243,7 @@
     "car": "Car",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Add a car",
     "addCarButton": "Add car",
diff --git a/src/I18n/languages/es.json b/src/I18n/languages/es.json
index c096b44ed..2607a592d 100644
--- a/src/I18n/languages/es.json
+++ b/src/I18n/languages/es.json
@@ -243,6 +243,7 @@
     "car": "Vehículo",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Add a car",
     "addCarButton": "Add car",
diff --git a/src/I18n/languages/fr.json b/src/I18n/languages/fr.json
index 371f1e46b..275b38b97 100644
--- a/src/I18n/languages/fr.json
+++ b/src/I18n/languages/fr.json
@@ -243,6 +243,7 @@
     "car": "Voiture",
     "selectCar": "Sélectionnez une voiture",
     "selectCars": "Sélectionnez des voitures",
+    "clearCar": "Effacer voiture",
     "noCarMessageTitle": "Indiquez la voiture utilisée pour bénéficier de meilleures recharges",
     "addCarTitle": "Ajouter une voiture",
     "addCarButton": "Ajouter",
diff --git a/src/I18n/languages/it.json b/src/I18n/languages/it.json
index c0464287d..b80d3cad0 100644
--- a/src/I18n/languages/it.json
+++ b/src/I18n/languages/it.json
@@ -243,6 +243,7 @@
     "car": "Car",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Ajouter une voiture",
     "addCarButton": "Ajouter",
diff --git a/src/I18n/languages/pt.json b/src/I18n/languages/pt.json
index f1aa4a110..21dee7651 100644
--- a/src/I18n/languages/pt.json
+++ b/src/I18n/languages/pt.json
@@ -243,6 +243,7 @@
     "car": "Car",
     "selectCar": "Select a car",
     "selectCars": "Select cars",
+    "clearCar": "Clear car",
     "noCarMessageTitle": "Indicate what car you are using to get better recharges",
     "addCarTitle": "Ajouter une voiture",
     "addCarButton": "Ajouter",
diff --git a/src/components/modal/ModalSelect.tsx b/src/components/modal/ModalSelect.tsx
index de57bf664..fbc8db82e 100644
--- a/src/components/modal/ModalSelect.tsx
+++ b/src/components/modal/ModalSelect.tsx
@@ -14,19 +14,23 @@ import computeListItemCommonStyle from '../list/ListItemCommonStyle';
 export interface Props<T> extends BaseProps {
   defaultItem?: T;
   buildItemName?: (item: T) => string;
+  // Disable the opening with specific styles
   disabled?: boolean;
   label?: string;
+  // Render list item
   renderItem?: (item?: T) => React.ReactElement;
   // Render a generic item when the items list is empty (only if renderItemPlaceholder is null)
   renderNoItem?: () => React.ReactElement;
   // Render a generic item when nothing is selected
   renderItemPlaceholder?: () => React.ReactElement;
-  // Whether or not to display the button to cleat the input
+  // Whether or not to display the button to clear the input
   canClearInput?: boolean;
   selectionMode: ItemSelectionMode;
   onItemsSelected: (selectedItems: T[]) => void;
   defaultItemLoading?: boolean;
+  // Can open the modal
   openable?: boolean;
+  itemsEquals?: (a: T, b: T) => boolean;
 }
 interface State<T> {
   isVisible: boolean;
@@ -52,24 +56,10 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
     };
   }
 
-  public componentDidMount() {
-    this.setState({ selectedItems: [this.props.defaultItem] });
-  }
-
-  public componentDidUpdate(prevProps: Readonly<Props<T>>, prevState: Readonly<State<T>>, snapshot?: any) {
-    if(this.state.selectedItems[0]?.id !== this.props.defaultItem?.id && this.state.noneSelected === false) {
-      this.setState({ selectedItems: [this.props.defaultItem, ...this.state.selectedItems.slice(1)] });
-    }
-  }
 
   public resetInput(noneSelected: boolean = false): void {
     this.itemsListRef?.current?.clearSelectedItems();
-    this.setState({noneSelected, selectedItems: [], selectedItemsCount: 0, isVisible: false});
-  }
-
-  private clearInput(): void {
-    this.resetInput(true);
-
+    this.setState({noneSelected, selectedItems: [], selectedItemsCount: 0, isVisible: false}, () => this.props.onItemsSelected([]));
   }
 
   public render() {
@@ -133,23 +123,24 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
     const { onItemsSelected } = this.props;
     const selectedItems = this.itemsListRef?.current?.state.selectedItems;
     if (!Utils.isEmptyArray(selectedItems)) {
-      this.setState({ isVisible: false }, () => onItemsSelected(selectedItems));
+      this.setState({ isVisible: false }, () => onItemsSelected?.(selectedItems));
     }
   }
 
   private onItemSelected(selectedItems: T[]): void {
     const { selectionMode, onItemsSelected } = this.props;
     if (selectionMode === ItemSelectionMode.MULTI) {
-      this.setState({ selectedItems });
+      this.setState({ selectedItems, noneSelected: false });
     } else if (selectionMode === ItemSelectionMode.SINGLE && !Utils.isEmptyArray(selectedItems)) {
-      this.setState({ selectedItems, isVisible: false }, () => onItemsSelected(selectedItems));
+      this.setState({ selectedItems, isVisible: false, noneSelected: false }, () => onItemsSelected?.(selectedItems));
     }
   }
 
   private renderButton(style: any) {
-    const { defaultItemLoading, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled, canClearInput } = this.props;
+    const { defaultItemLoading, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled, canClearInput, defaultItem } = this.props;
     const { selectedItems, noneSelected } = this.state;
     const listItemCommonStyle = computeListItemCommonStyle();
+
     const commonColors = Utils.getCurrentCommonColor();
     if (defaultItemLoading) {
       return (
@@ -158,18 +149,18 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
         </View>
       );
     }
-    if (selectedItems[0]) {
+    if ((defaultItem || selectedItems[0]) && !noneSelected) {
       return (
         <TouchableOpacity
           disabled={disabled || !openable}
           onPress={() => this.setState({ isVisible: true })}
           style={[style.itemContainer, disabled && style.buttonDisabled]}>
           {canClearInput && (
-            <TouchableOpacity style={style.clearContainer} onPress={() => this.clearInput()}>
-              <Text style={{textAlign: 'right', color: commonColors.primary}}>Clear field</Text>
+            <TouchableOpacity style={style.clearContainer} onPress={() => this.resetInput(true)}>
+              <Text style={{textAlign: 'right', color: commonColors.primary}}>{I18n.t('cars.clearCar')}</Text>
             </TouchableOpacity>
           )}
-          {renderItem?.(selectedItems[0])}
+          {renderItem?.(selectedItems[0] ?? defaultItem)}
         </TouchableOpacity>
       );
     } else if (renderItemPlaceholder && noneSelected !== false) {
diff --git a/src/components/modal/ModalStyles.tsx b/src/components/modal/ModalStyles.tsx
index 60f085beb..493eec6d5 100644
--- a/src/components/modal/ModalStyles.tsx
+++ b/src/components/modal/ModalStyles.tsx
@@ -122,8 +122,7 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       textAlign: 'left'
     },
     clearContainer: {
-      width: '100%',
-      paddingBottom: '3@s'
+      width: '100%'
     }
   });
   const portraitStyles = {};
diff --git a/src/components/user/UserComponent.tsx b/src/components/user/UserComponent.tsx
index 9ecd59895..b7eff97f9 100644
--- a/src/components/user/UserComponent.tsx
+++ b/src/components/user/UserComponent.tsx
@@ -13,6 +13,7 @@ import computeListItemCommonStyle from '../list/ListItemCommonStyle';
 export interface Props extends BaseProps {
   user: User;
   selected?: boolean;
+  outlinedInactive?: boolean;
 }
 
 interface State {}
@@ -37,13 +38,13 @@ export default class UserComponent extends React.Component<Props, State> {
     const style = computeStyleSheet();
     const listItemCommonStyle = computeListItemCommonStyle();
     const chipStyle = computeChipStyleSheet();
-    const { user, navigation, selected } = this.props;
+    const { user, navigation, selected, outlinedInactive } = this.props;
     const userFullName = Utils.buildUserName(user);
     const userRole = user ? user.role : '';
     const userStatus = user ? user.status : '';
     const statusStyle = this.computeStatusStyle(userStatus, chipStyle);
     return (
-      <View style={[listItemCommonStyle.container, style.container]}>
+      <View style={[listItemCommonStyle.container, style.container, outlinedInactive && userStatus !== UserStatus.ACTIVE && listItemCommonStyle.outlinedError]}>
         <View style={style.userContent}>
           <View style={style.avatarContainer}>
             {selected ? <UserAvatar isSelected={true} navigation={navigation} /> : <UserAvatar user={user} navigation={navigation} />}
diff --git a/src/screens/cars/AddCar.tsx b/src/screens/cars/AddCar.tsx
index 97eba282c..c171e0ced 100644
--- a/src/screens/cars/AddCar.tsx
+++ b/src/screens/cars/AddCar.tsx
@@ -242,7 +242,7 @@ export default class AddCar extends BaseScreen<Props, State> {
             buttonStyle={modalCommonStyles.primaryButton}
             onPress={this.addCar.bind(this)}
             loading={addCarPending}
-            title={I18n.t('cars.addCarButton').toUpperCase()}
+            title={I18n.t('cars.addCarButton')}
           />
         </ScrollView>
       </View>
diff --git a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
index c537ed4c2..10c0cb09c 100644
--- a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
+++ b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
@@ -67,6 +67,7 @@ export interface State {
   showNoBadgeErrorMessage?: boolean;
   showBadgeInactiveErrorMessage?: boolean;
   showBillingErrorMessage?: boolean;
+  userInactiveError?: boolean;
   transactionPending?: boolean;
   didPreparing?: boolean;
   showAdviceMessage?: boolean;
@@ -111,6 +112,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
       showNoBadgeErrorMessage: false,
       showBadgeInactiveErrorMessage: false,
       showBillingErrorMessage: false,
+      userInactiveError: false,
       transactionPending: false,
       showAdviceMessage: false,
       didPreparing: false,
@@ -288,6 +290,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
     let transaction = null;
     let showNoBadgeErrorMessage: boolean;
     let showBadgeInactiveErrorMessage: boolean;
+    let userInactiveError: boolean;
     let showBillingErrorMessage: boolean;
     let showStartTransactionDialog: boolean;
     let showAdviceMessage = false;
@@ -304,6 +307,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
     const transactionStillPending = this.isTransactionStillPending(connector);
     if (transactionStillPending) {
       buttonDisabled = true;
+      userInactiveError = true;
     } else {
       // if the transaction is no longer pending, reset the flags
       this.setState({ transactionPending: false, didPreparing: false });
@@ -324,6 +328,11 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
       transaction = await this.getTransaction(connector.currentTransactionID);
     }
     const { selectedUser, selectedTag } = this.state;
+    // Check selected user is active
+    if (selectedUser?.status !== UserStatus.ACTIVE) {
+      buttonDisabled = true;
+      userInactiveError = true;
+    }
     // Get the default tag and car of the selected user (only to get errors codes)
     const userDefaultTagCar = await this.getUserDefaultTagAndCar(selectedUser);
     // If error codes, disabled the button
@@ -373,6 +382,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
       showBillingErrorMessage,
       showNoBadgeErrorMessage,
       showBadgeInactiveErrorMessage,
+      userInactiveError,
       showAdviceMessage,
       buttonDisabled,
       chargingStation,
@@ -948,12 +958,12 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
   }
 
   private renderAccordion(style: any) {
-    const { showChargingSettings, showBillingErrorMessage, showNoBadgeErrorMessage, showBadgeInactiveErrorMessage } = this.state;
+    const { showChargingSettings, showBillingErrorMessage, showNoBadgeErrorMessage, showBadgeInactiveErrorMessage, userInactiveError } = this.state;
     return (
       <TouchableOpacity onPress={() => this.setState({ showChargingSettings: !showChargingSettings })} style={style.accordion}>
         <Text style={style.accordionText}>
           {I18n.t('transactions.chargingSettings')}
-          {(showBillingErrorMessage || showNoBadgeErrorMessage || showBadgeInactiveErrorMessage) && (
+          {(showBillingErrorMessage || showNoBadgeErrorMessage || showBadgeInactiveErrorMessage || userInactiveError) && (
             <Text style={style.errorAsterisque}>*</Text>
           )}
         </Text>
@@ -1048,7 +1058,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
           <ModalSelect<User>
             disabled={disabled}
             openable={isAdmin}
-            renderItem={() => <UserComponent user={selectedUser} navigation={navigation} />}
+            renderItem={() => <UserComponent outlinedInactive={true} user={selectedUser} navigation={navigation} />}
             defaultItem={selectedUser}
             onItemsSelected={this.onUserSelected.bind(this)}
             navigation={navigation}
@@ -1133,6 +1143,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
           disabled={disabled}
           openable={true}
           renderNoItem={this.renderNoTag.bind(this)}
+          itemsEquals={(a, b) => a?.visualID === b?.visualID}
           ref={this.tagModalRef}
           defaultItem={selectedTag}
           defaultItemLoading={tagCarLoading}
diff --git a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
index cb754bfcd..4e6882fc7 100644
--- a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
+++ b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
@@ -133,7 +133,8 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       marginHorizontal: '2.5%',
       justifyContent: 'center',
       alignItems: 'center',
-      height: 'auto'
+      height: 'auto',
+      paddingTop: '10@s'
     },
     rowContainer: {
       flexDirection: 'row',
@@ -145,9 +146,7 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
     rowUserCarBadgeContainer: {
       width: '100%',
       justifyContent: 'center',
-      alignItems: 'center',
-      marginBottom: '5@s',
-      paddingTop: '5@s'
+      alignItems: 'center'
     },
     columnContainer: {
       flexDirection: 'column',

From a1143427a055267e97752ed845cfba023e423c09 Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Fri, 19 Nov 2021 12:10:20 +0100
Subject: [PATCH 3/5] Fixed clear car

---
 src/components/modal/ModalSelect.tsx                | 13 +++++++------
 .../ChargingStationConnectorDetails.tsx             |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/modal/ModalSelect.tsx b/src/components/modal/ModalSelect.tsx
index fbc8db82e..974b402c4 100644
--- a/src/components/modal/ModalSelect.tsx
+++ b/src/components/modal/ModalSelect.tsx
@@ -24,7 +24,7 @@ export interface Props<T> extends BaseProps {
   // Render a generic item when nothing is selected
   renderItemPlaceholder?: () => React.ReactElement;
   // Whether or not to display the button to clear the input
-  canClearInput?: boolean;
+  clearable?: boolean;
   selectionMode: ItemSelectionMode;
   onItemsSelected: (selectedItems: T[]) => void;
   defaultItemLoading?: boolean;
@@ -137,7 +137,7 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
   }
 
   private renderButton(style: any) {
-    const { defaultItemLoading, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled, canClearInput, defaultItem } = this.props;
+    const { defaultItemLoading, renderNoItem, renderItem, renderItemPlaceholder, openable, disabled, clearable, defaultItem } = this.props;
     const { selectedItems, noneSelected } = this.state;
     const listItemCommonStyle = computeListItemCommonStyle();
 
@@ -149,13 +149,13 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
         </View>
       );
     }
-    if ((defaultItem || selectedItems[0]) && !noneSelected) {
+    if ((selectedItems[0] || defaultItem)) {
       return (
         <TouchableOpacity
           disabled={disabled || !openable}
           onPress={() => this.setState({ isVisible: true })}
           style={[style.itemContainer, disabled && style.buttonDisabled]}>
-          {canClearInput && (
+          {clearable && (
             <TouchableOpacity style={style.clearContainer} onPress={() => this.resetInput(true)}>
               <Text style={{textAlign: 'right', color: commonColors.primary}}>{I18n.t('cars.clearCar')}</Text>
             </TouchableOpacity>
@@ -163,13 +163,14 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
           {renderItem?.(selectedItems[0] ?? defaultItem)}
         </TouchableOpacity>
       );
-    } else if (renderItemPlaceholder && noneSelected !== false) {
+    } if (renderItemPlaceholder && (noneSelected || !renderNoItem)) {
       return (
         <TouchableOpacity onPress={() => this.setState({ isVisible: true })} style={style.itemContainer}>
           {renderItemPlaceholder?.()}
         </TouchableOpacity>
       );
-    } else {
+    }
+    else {
       return <View style={style.itemContainer}>{renderNoItem?.()}</View>;
     }
   }
diff --git a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
index 10c0cb09c..6843cceed 100644
--- a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
+++ b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetails.tsx
@@ -1081,7 +1081,7 @@ export default class ChargingStationConnectorDetails extends BaseAutoRefreshScre
           disabled={disabled}
           openable={true}
           renderNoItem={this.renderNoCar.bind(this)}
-          canClearInput={true}
+          clearable={true}
           renderItem={() => <CarComponent car={selectedCar} navigation={navigation} />}
           ref={this.carModalRef}
           defaultItem={selectedCar}

From fbea9c38c8a2371c436e33a09fdabfc75b9e106f Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Mon, 29 Nov 2021 14:32:41 +0100
Subject: [PATCH 4/5] Removed unused styles

---
 android/app/src/main/res/values/colors.xml                | 1 +
 src/components/modal/ModalSelect.tsx                      | 8 +++-----
 src/components/modal/ModalStyles.tsx                      | 6 ------
 .../ChargingStationConnectorDetailsStyles.tsx             | 1 -
 4 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index 043f9d38e..d6f23cc78 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -2,6 +2,7 @@
   <color name="primary_dark">#00376C</color>
   <color name="primary">#0a6ed1</color>
   <color name="status_bar_color">#00376C</color>
+  <color name="modalBackground">#262626</color>
   <color name="navigationBarBackground">#E7E7E7</color>
   <color name="white">#FFF</color>
 </resources>
diff --git a/src/components/modal/ModalSelect.tsx b/src/components/modal/ModalSelect.tsx
index 974b402c4..ba2ee7eda 100644
--- a/src/components/modal/ModalSelect.tsx
+++ b/src/components/modal/ModalSelect.tsx
@@ -69,17 +69,15 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
     const itemsList = React.Children.only(this.props.children);
     return (
       <View style={style.container}>
-        <View style={style.buttonContainer}>
-          {label && <Text style={style.label}>{label}</Text>}
-          {this.renderButton(style)}
-        </View>
+        {label && <Text style={style.label}>{label}</Text>}
+        {this.renderButton(style)}
         <Modal
           propagateSwipe={true}
           supportedOrientations={['portrait', 'landscape']}
           style={style.modal}
           isVisible={isVisible}
           swipeDirection={'down'}
-          animationInTiming={1000}
+          animationInTiming={800}
           onSwipeComplete={() => this.setState({ isVisible: false })}
           onBackButtonPress={() => this.setState({ isVisible: false })}
           onBackdropPress={() => this.setState({ isVisible: false })}
diff --git a/src/components/modal/ModalStyles.tsx b/src/components/modal/ModalStyles.tsx
index 493eec6d5..74b28d80f 100644
--- a/src/components/modal/ModalStyles.tsx
+++ b/src/components/modal/ModalStyles.tsx
@@ -11,12 +11,6 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
     container: {
       width: '100%'
     },
-    button: {
-      width: '95%',
-      alignSelf: 'center',
-      height: '40@s',
-      backgroundColor: commonColor.buttonBg
-    },
     buttonDisabled: {
       opacity: 0.5
     },
diff --git a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
index 4e6882fc7..5f7f811a9 100644
--- a/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
+++ b/src/screens/charging-stations/connector-details/ChargingStationConnectorDetailsStyles.tsx
@@ -247,7 +247,6 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
     noTagContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      height: '80@s',
       borderColor: commonColor.dangerLight,
       borderTopWidth: 0.8,
       borderLeftWidth: 0.8,

From 221411571381401e45a5cc7e5687695460f9ebd9 Mon Sep 17 00:00:00 2001
From: AlixH <alixhumbert@gmail.com>
Date: Tue, 7 Dec 2021 17:34:52 +0100
Subject: [PATCH 5/5] podfile lock

---
 ios/Podfile.lock                        | 20 ++++++++++----------
 ios/eMobility.xcodeproj/project.pbxproj |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index d5d32aaf0..8b3fd02b1 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -358,7 +358,7 @@ PODS:
   - React-jsinspector (0.64.2)
   - react-native-appearance (0.3.4):
     - React
-  - react-native-blob-util (0.13.17):
+  - react-native-blob-util (0.13.16):
     - React-Core
   - react-native-camera (3.44.3):
     - React-Core
@@ -368,13 +368,13 @@ PODS:
     - React-Core
   - react-native-camera/RN (3.44.3):
     - React-Core
-  - react-native-google-maps (0.29.4):
+  - react-native-google-maps (0.29.3):
     - Google-Maps-iOS-Utils (= 2.1.0)
     - GoogleMaps (= 3.5.0)
     - React-Core
   - react-native-location (2.5.0):
     - React
-  - react-native-maps (0.29.4):
+  - react-native-maps (0.29.3):
     - React-Core
   - react-native-orientation-locker (1.3.1):
     - React-Core
@@ -384,7 +384,7 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webview (11.14.3):
+  - react-native-webview (11.14.2):
     - React-Core
   - React-perflogger (0.64.2)
   - React-RCTActionSheet (0.64.2):
@@ -768,7 +768,7 @@ SPEC CHECKSUMS:
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   Fabric: ea977e3cd9c20425516d3dafd3bf8c941c51223f
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: 6ad80628fb64b13af43b7a67ee3e2489cfd29615
+  FBReactNativeSpec: 52a80ca1a343877d4c72738fffcf539ac4a64dec
   Firebase: 8db6f2d1b2c5e2984efba4949a145875a8f65fe5
   FirebaseAnalytics: 5dd088bd2e67bb9d13dbf792d1164ceaf3052193
   FirebaseCore: d889d9e12535b7f36ac8bfbf1713a0836a3012cd
@@ -807,16 +807,16 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 80c46bd381fd06e418e0d4f53672dc1d1945c4c3
   React-jsinspector: cc614ec18a9ca96fd275100c16d74d62ee11f0ae
   react-native-appearance: 0f0e5fc2fcef70e03d48c8fe6b00b9158c2ba8aa
-  react-native-blob-util: d2919a2243cba497cd5713f72faeec283c69fde4
+  react-native-blob-util: 6e75bea8ffce35c4009c0e519cd0a96432a93e2b
   react-native-camera: b8cc03e2feec0c04403d0998e37cf519d8fd4c6f
-  react-native-google-maps: 34517207071d54f3bc23c68752bbec0217bfc79e
+  react-native-google-maps: d6a30377b40a338bd09d6ad36ce48dc5d12b5792
   react-native-location: 5a40ec1cc6abf2f6d94df979f98ec76c3a415681
-  react-native-maps: a421fe6aeb74279597c4ea9598f25796108e2d89
+  react-native-maps: 41d01d8e0afcebe32bec9eea3bd945adc1b18f7a
   react-native-orientation-locker: 998c0744e26624407dac068c04c605b4af7304a2
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-sensitive-info: 400c6e3d27945e15c8cddb5b4b92233c85ee06f8
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webview: b83cf1aa6b4453fe53ffcc5896c36cdf37f0383f
+  react-native-webview: cc4ac8f021a832dce2979e1f48c5595341dd2fb5
   React-perflogger: 25373e382fed75ce768a443822f07098a15ab737
   React-RCTActionSheet: af7796ba49ffe4ca92e7277a5d992d37203f7da5
   React-RCTAnimation: 6a2e76ab50c6f25b428d81b76a5a45351c4d77aa
@@ -852,4 +852,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: b8dc8cd1a42309e725520e15610740f459384595
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.2
diff --git a/ios/eMobility.xcodeproj/project.pbxproj b/ios/eMobility.xcodeproj/project.pbxproj
index cbde5e6ce..f7b46890e 100644
--- a/ios/eMobility.xcodeproj/project.pbxproj
+++ b/ios/eMobility.xcodeproj/project.pbxproj
@@ -576,7 +576,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-eMobility-eMobilityTests/Pods-eMobility-eMobilityTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
@@ -594,7 +594,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-eMobility/Pods-eMobility-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (