Allow paying with Paygreen via redirect URL.

src/App.js

@@ -138,6 +138,12 @@ const config = {
         },
       },
     },
+    CheckoutNav: {
+      screens: {
+        CheckoutPaygreenReturn: 'paygreen/return',
+        CheckoutPaygreenCancel: 'paygreen/cancel',
+      },
+    },
   },
 };
 

src/i18n/locales/en.json

@@ -425,7 +425,10 @@
       "card": "Credit card",
       "cash_on_delivery": "Cash on delivery",
       "edenred": "Edenred",
-      "edenred+card": "Edenred"
+      "edenred+card": "Edenred",
+      "conecs": "Titres-restaurant",
+      "swile": "Swile",
+      "restoflash": "Restoflash"
     },
     "CASH_ON_DELIVERY_DISCLAIMER": "You are going to pay by cash on delivery. Please prepare the exact amount and make sure to be reachable.",
     "STORES": "Stores",
@@ -571,6 +574,7 @@
     "TASK_DONE": "Done",
     "TASK_CANCELLED": "Cancelled",
     "ASK_TO_START_PICKUP_TITLE": "Pickup task",
-    "ASK_TO_START_PICKUP_MESSAGE": "The pickup task is not yet started."
-  }
+    "ASK_TO_START_PICKUP_MESSAGE": "The pickup task is not yet started.",
+    "PAYGREEN_RETURN_TEXT": "Please wait while we process your payment…"
+  } 
 }

src/i18n/locales/fr.json

@@ -525,7 +525,7 @@
     "ORDER__SHIPPING_TIME_RANGE__NOT_AVAILABLE": "Indisponible pour l'instant",
     "EDENRED_ELIGIBLE_AMOUNT": "Montant éligible Ticket Restaurant®",
     "EDENRED_COMPLEMENT": "Complément",
-        "BARCODE_TASK_ALREADY_ASSIGNED_TITLE": "Tâche déjà assignée",
+    "BARCODE_TASK_ALREADY_ASSIGNED_TITLE": "Tâche déjà assignée",
     "BARCODE_TASK_ALREADY_ASSIGNED_ANOTHER_MESSAGE": "Cette tâche a déjà été assignée à un autre utilisateur",
     "BARCODE_TASK_ALREADY_ASSIGNED_SELF_MESSAGE": "Cette tâche vous a déjà été assignée",
     "BARCODE_TASK_ALREADY_ASSIGNED_UNASSIGN": "Désassigner",
@@ -543,6 +543,7 @@
     "TASK_DONE": "Fait",
     "TASK_CANCELLED": "Annulée",
     "ASK_TO_START_PICKUP_TITLE": "Tâche de ramassage",
-    "ASK_TO_START_PICKUP_MESSAGE": "La tâche de ramassage n'est pas encore commencée."
+    "ASK_TO_START_PICKUP_MESSAGE": "La tâche de ramassage n'est pas encore commencée.",
+    "PAYGREEN_RETURN_TEXT": "Veuillez patienter pendant que nous traitons votre paiement…"
   }
 }

src/navigation/checkout/PaygreenCancel.js

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
+
+export default () => {
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.navigate('CheckoutPayment');
+  }, [ navigation ]);
+
+  return null
+}

src/navigation/checkout/PaygreenReturn.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Text } from 'native-base';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+
+import { checkout } from '../../redux/Checkout/actions';
+
+export default () => {
+
+  const route = useRoute();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const paymentOrderId = route.params?.po_id;
+
+  useEffect(() => {
+    dispatch(checkout('', null, false, route.params.po_id));
+  }, [ dispatch, route.params.po_id ]);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>{ t('PAYGREEN_RETURN_TEXT') }</Text>
+    </View>
+  )
+}

src/navigation/checkout/Payment.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Center } from 'native-base';
-import { View } from 'react-native';
+import { Linking, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import {
@@ -41,8 +41,12 @@ class CreditCard extends Component {
       'edenred+card': 'CheckoutPaymentMethodEdenred',
     };
 
-    this.props.setPaymentMethod(type, () => {
-      this.props.navigation.navigate(routesByMethod[type]);
+    this.props.setPaymentMethod(type, (result) => {
+      if (result.redirectUrl) {
+        Linking.openURL(result.redirectUrl);
+      } else {
+        this.props.navigation.navigate(routesByMethod[type]);
+      }
     })
   }
 

src/navigation/checkout/components/PaymentMethodIcon.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Icon } from 'native-base';
+import { Image } from 'react-native';
+import { Box, Icon } from 'native-base';
 import Foundation from 'react-native-vector-icons/Foundation';
 import Svg, { Path, G } from 'react-native-svg';
+import ConecsIcon from './PaymentMethodIcon/ConecsIcon';
 
 const icons = {
   card: 'credit-card',
@@ -19,16 +21,47 @@ const PaymentMethodIcon = ({ type }) => {
     />)
   }
 
+  if (type === 'conecs') {
+    return (
+      <Icon size="xl" mr="2">
+        <ConecsIcon />
+      </Icon>
+    )
+  }
+
+  if (type === 'restoflash') {
+    return (
+      <Box mr="2">
+        <Image
+          resizeMode="contain"
+          source={require('../../../../assets/images/restoflash.png')}
+          style={{ width: 30, height: 30 }} />
+      </Box>
+    )
+  }
+
+  if (type === 'swile') {
+    return (
+      <Box mr="2">
+        <Image
+          resizeMode="contain"
+          source={require('../../../../assets/images/Swile_black.png')}
+          style={{ width: 40, height: 40 }} />
+      </Box>
+    )
+  }
+
   if (type === 'edenred' || type === 'edenred+card') {
     return (
-      <Icon size="xl" viewBox="0 0 413.24 265.47" mr="2">
+      <Icon size="xl" mr="2">
         <Svg
           xmlns="http://www.w3.org/2000/svg"
           xmlSpace="preserve"
           id="Layer_1"
           x={0}
           y={0}
           fill={ '#000000' }
+          viewBox="0 0 413.24 265.47"
         >
           <Path
             d="M160.43 117.34c-6.79 0-11.1 4.42-12.44 10.28h24.16c-.82-6.47-5.35-10.28-11.72-10.28zM95.86 119.91c-8.64 0-14.09 5.96-14.09 14.29 0 8.23 5.55 14.39 14.09 14.39s14.29-5.86 14.29-14.39c0-8.53-5.76-14.29-14.29-14.29z"

src/navigation/checkout/components/PaymentMethodPicker.js

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
   },
 });
 

src/navigation/index.js

@@ -53,6 +53,8 @@ import CheckoutMoreInfos from './checkout/MoreInfos';
 import CheckoutPayment from './checkout/Payment';
 import CheckoutProductDetails from './checkout/ProductDetails';
 import CheckoutSummary from './checkout/Summary';
+import CheckoutPaygreenReturn from './checkout/PaygreenReturn';
+import CheckoutPaygreenCancel from './checkout/PaygreenCancel';
 
 import CheckoutLoopeat from './checkout/Loopeat';
 import CheckoutRestaurant from './checkout/Restaurant';
@@ -114,6 +116,8 @@ export default {
   CheckoutPaymentMethodCashOnDelivery,
   CheckoutPaymentMethodEdenred,
   CheckoutLoopeat,
+  CheckoutPaygreenReturn,
+  CheckoutPaygreenCancel,
   AccountHome,
   AccountAddressesPage,
   AccountOrdersPage,

src/navigation/navigators/CheckoutNavigator.js

@@ -352,6 +352,20 @@ const DefaultNav = () => {
           title: i18n.t('ZERO_WASTE'),
         }}
       />
+      <RootStack.Screen
+        name="CheckoutPaygreenReturn"
+        component={screens.CheckoutPaygreenReturn}
+        options={{
+          title: i18n.t('PAYMENT'),
+        }}
+      />
+      <RootStack.Screen
+        name="CheckoutPaygreenCancel"
+        component={screens.CheckoutPaygreenCancel}
+        options={{
+          title: i18n.t('PAYMENT'),
+        }}
+      />
     </RootStack.Navigator>
   );
 };

src/redux/Checkout/actions.js

@@ -1099,7 +1099,8 @@ export function canProceedWithPayment(cart) {
 export function checkout(
   cardholderName,
   savedPaymentMethodId = null,
-  saveCard = false
+  saveCard = false,
+  paygreenPaymentOrderID = null
 ) {
   return async (dispatch, getState) => {
     dispatch(checkoutRequest());
@@ -1112,6 +1113,27 @@ export function checkout(
 
     const httpClient = selectHttpClient(getState());
 
+    if (paygreenPaymentOrderID) {
+      httpClient
+        .put(
+          cart['@id'] + '/pay',
+          {
+            paymentOrderId: paygreenPaymentOrderID
+          },
+          {
+            headers: selectCheckoutAuthorizationHeaders(
+              getState(),
+              cart,
+              token,
+            ),
+          },
+        )
+        .then(o => dispatch(handlePaymentSuccess(o)))
+        .catch(e => dispatch(handlePaymentFailed(e)));
+
+      return;
+    }
+
     if (isFree(cart)) {
       httpClient
         .put(
@@ -1902,7 +1924,7 @@ export function setPaymentMethod(paymentMethod, cb) {
         // TODO Use the payments returned
         // https://github.com/coopcycle/coopcycle-app/issues/1925
         dispatch(updateCartSuccess(cart));
-        cb()
+        cb(res)
       })
       .catch(e => dispatch(checkoutFailure(e)));
   };