Show proxiwash message in header if available

locales/en.json

@@ -55,6 +55,10 @@
       "tips": "Tips",
       "numAvailable": "available",
       "numAvailablePlural": "available",
+      "errors": {
+        "title": "Proxiwash message",
+        "button": "More info"
+      },
       "washinsa": {
         "title": "INSA laundromat",
         "subtitle": "Your favorite laundromat!!",
@@ -93,6 +97,10 @@
         "unknown": "UNKNOWN"
       },
       "notifications": {
+        "channel": {
+          "title": "Laundry reminders",
+          "description": "Get reminders for watched washers/dryers"
+        },
         "machineFinishedTitle": "Laundry Ready",
         "machineFinishedBody": "Machine n°{{number}} is finished and your laundry is ready for pickup",
         "machineRunningTitle": "Laundry running: {{time}} minutes left",

locales/fr.json

@@ -55,6 +55,10 @@
       "tips": "Conseils",
       "numAvailable": "disponible",
       "numAvailablePlural": "disponibles",
+      "errors": {
+        "title": "Message laverie",
+        "button": "En savoir plus"
+      },
       "washinsa": {
         "title": "Laverie INSA",
         "subtitle": "Ta laverie préférée !!",
@@ -93,6 +97,10 @@
         "unknown": "INCONNU"
       },
       "notifications": {
+        "channel": {
+          "title": "Rappels laverie",
+          "description": "Recevoir des rappels pour les machines demandées"
+        },
         "machineFinishedTitle": "Linge prêt",
         "machineFinishedBody": "La machine n°{{number}} est terminée et ton linge est prêt à être récupéré",
         "machineRunningTitle": "Machine en cours: {{time}} minutes restantes",

src/components/Lists/Proximo/ProximoListHeader.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Avatar, Button, Card, Text } from 'react-native-paper';
-import TimeAgo from 'react-native-timeago';
-import i18n from 'i18n-js';
-import { useNavigation } from '@react-navigation/core';
-import { MainRoutes } from '../../../navigation/MainNavigator';
-import ProxiwashConstants from '../../../constants/ProxiwashConstants';
-
-let moment = require('moment'); //load moment module to set local language
-require('moment/locale/fr'); // import moment local language file during the application build
-moment.locale('fr');
-
-type Props = {
-  date?: Date;
-  selectedWash: 'tripodeB' | 'washinsa';
-};
-
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: 5,
-  },
-  actions: {
-    justifyContent: 'center',
-  },
-});
-
-function ProximoListHeader(props: Props) {
-  const navigation = useNavigation();
-  const { date, selectedWash } = props;
-  let title = i18n.t('screens.proxiwash.washinsa.title');
-  let icon = ProxiwashConstants.washinsa.icon;
-  if (selectedWash === 'tripodeB') {
-    title = i18n.t('screens.proxiwash.tripodeB.title');
-    icon = ProxiwashConstants.tripodeB.icon;
-  }
-  return (
-    <Card style={styles.card}>
-      <Card.Title
-        title={title}
-        subtitle={
-          date ? (
-            <Text>
-              {i18n.t('screens.proxiwash.updated')}
-              <TimeAgo time={date} interval={2000} />
-            </Text>
-          ) : null
-        }
-        left={(iconProps) => <Avatar.Icon icon={icon} size={iconProps.size} />}
-      />
-      <Card.Actions style={styles.actions}>
-        <Button
-          mode={'contained'}
-          onPress={() => navigation.navigate(MainRoutes.Settings)}
-          icon={'swap-horizontal'}
-        >
-          {i18n.t('screens.proxiwash.switch')}
-        </Button>
-      </Card.Actions>
-    </Card>
-  );
-}
-
-export default ProximoListHeader;

src/components/Lists/Proxiwash/ProxiwashListHeader.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Linking, StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Button,
+  Card,
+  Paragraph,
+  Text,
+  useTheme,
+} from 'react-native-paper';
+import TimeAgo from 'react-native-timeago';
+import i18n from 'i18n-js';
+import { useNavigation } from '@react-navigation/core';
+import { MainRoutes } from '../../../navigation/MainNavigator';
+import ProxiwashConstants from '../../../constants/ProxiwashConstants';
+import { ProxiwashInfoType } from '../../../screens/Proxiwash/ProxiwashScreen';
+import * as Animatable from 'react-native-animatable';
+
+let moment = require('moment'); //load moment module to set local language
+require('moment/locale/fr'); // import moment local language file during the application build
+moment.locale('fr');
+
+type Props = {
+  date?: Date;
+  selectedWash: 'tripodeB' | 'washinsa';
+  info?: ProxiwashInfoType;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: 5,
+  },
+  messageCard: {
+    marginTop: 50,
+    marginBottom: 10,
+  },
+  actions: {
+    justifyContent: 'center',
+  },
+});
+
+function ProxiwashListHeader(props: Props) {
+  const navigation = useNavigation();
+  const theme = useTheme();
+  const { date, selectedWash } = props;
+  let title = i18n.t('screens.proxiwash.washinsa.title');
+  let icon = ProxiwashConstants.washinsa.icon;
+  if (selectedWash === 'tripodeB') {
+    title = i18n.t('screens.proxiwash.tripodeB.title');
+    icon = ProxiwashConstants.tripodeB.icon;
+  }
+  const message = props.info?.message;
+  return (
+    <>
+      <Card style={styles.card}>
+        <Card.Title
+          title={title}
+          subtitle={
+            date ? (
+              <Text>
+                {i18n.t('screens.proxiwash.updated')}
+                <TimeAgo time={date} interval={2000} />
+              </Text>
+            ) : null
+          }
+          left={(iconProps) => (
+            <Avatar.Icon icon={icon} size={iconProps.size} />
+          )}
+        />
+        <Card.Actions style={styles.actions}>
+          <Button
+            mode={'contained'}
+            onPress={() => navigation.navigate(MainRoutes.Settings)}
+            icon={'swap-horizontal'}
+          >
+            {i18n.t('screens.proxiwash.switch')}
+          </Button>
+        </Card.Actions>
+      </Card>
+      {message ? (
+        <Card
+          style={{
+            ...styles.card,
+            ...styles.messageCard,
+          }}
+        >
+          <Animatable.View
+            useNativeDriver={false}
+            animation={'flash'}
+            iterationCount={'infinite'}
+            duration={2000}
+          >
+            <Card.Title
+              title={i18n.t('screens.proxiwash.errors.title')}
+              titleStyle={{
+                color: theme.colors.primary,
+              }}
+              left={(iconProps) => (
+                <Avatar.Icon icon={'alert'} size={iconProps.size} />
+              )}
+            />
+          </Animatable.View>
+          <Card.Content>
+            <Paragraph
+              style={{
+                color: theme.colors.warning,
+              }}
+            >
+              {message}
+            </Paragraph>
+          </Card.Content>
+          <Card.Actions style={styles.actions}>
+            <Button
+              mode={'contained'}
+              onPress={() =>
+                Linking.openURL(ProxiwashConstants[selectedWash].webPageUrl)
+              }
+              icon={'open-in-new'}
+            >
+              {i18n.t('screens.proxiwash.errors.button')}
+            </Button>
+          </Card.Actions>
+        </Card>
+      ) : null}
+    </>
+  );
+}
+
+export default ProxiwashListHeader;

src/screens/Proxiwash/ProxiwashScreen.tsx

@@ -52,7 +52,7 @@ import GENERAL_STYLES from '../../constants/Styles';
 import { readData } from '../../utils/WebData';
 import { useNavigation } from '@react-navigation/core';
 import { setupMachineNotification } from '../../utils/Notifications';
-import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
+import ProxiwashListHeader from '../../components/Lists/Proxiwash/ProxiwashListHeader';
 import {
   getPreferenceNumber,
   getPreferenceObject,
@@ -76,7 +76,13 @@ export type ProxiwashMachineType = {
   program: string;
 };
 
+export type ProxiwashInfoType = {
+  message: string;
+  last_checked: number;
+};
+
 type FetchedDataType = {
+  info: ProxiwashInfoType;
   dryers: Array<ProxiwashMachineType>;
   washers: Array<ProxiwashMachineType>;
 };
@@ -444,7 +450,11 @@ function ProxiwashScreen() {
   ) => {
     if (data) {
       return (
-        <ProximoListHeader date={lastRefreshDate} selectedWash={selectedWash} />
+        <ProxiwashListHeader
+          date={lastRefreshDate}
+          selectedWash={selectedWash}
+          info={data?.info}
+        />
       );
     } else {
       return null;