add empty state for services and choose payment

examples/client/Locomotion/src/Components/EmptyState/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  Container, Description, Title, TitleWithoutDescription,
+} from './styled';
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+}
+const EmptyState = ({
+  title,
+  description,
+}: EmptyStateProps) => (
+  <Container>
+    {description
+      ? <Title>{title}</Title>
+      : <TitleWithoutDescription>{title}</TitleWithoutDescription>
+    }
+
+    {description ? <Description>{description}</Description> : null}
+  </Container>
+);
+EmptyState.defaultProps = {
+  description: '',
+};
+export default EmptyState;

examples/client/Locomotion/src/Components/EmptyState/styled.ts

@@ -0,0 +1,42 @@
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+
+export const Container = styled(View)`
+border-radius: 8px;
+border: 1px dashed rgba(125, 139, 172, 0.32);
+display: flex;
+padding: 16px;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+margin: 4px;
+flex: 1 0 0;
+align-self: stretch;
+`;
+export const Title = styled(Text)`
+align-self: stretch;
+color: #212229;
+text-align: center;
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+`;
+export const Description = styled(Text)`
+align-self: stretch;
+color: #666975;
+text-align: center;
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+`;
+export const TitleWithoutDescription = styled(Text)`
+align-self: stretch;
+color: #666975;
+text-align: center;
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+`;

examples/client/Locomotion/src/I18n/en.json

@@ -45,6 +45,10 @@
         "tags": {
             "fastest": "Fastest",
             "cheapest": "Cheapest"
+        },
+        "emptyState": {
+            "title": "There are no available services",
+            "description": "Try changing the ride schedule or select a different payment method"
         }
     },
     "rideDetails": {
@@ -290,6 +294,7 @@
             "save": "Save",
             "cancel": "Cancel",
             "unavailable": "Unavailable for the selected service",
+            "emptyStateText": "No credit cards were added",
             "tabs": {
                 "personal": "Personal",
                 "business": "Business"

examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/index.js

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import SkeletonContent from 'react-native-skeleton-content-nonexpo';
 import { Text } from 'react-native';
+import EmptyState from '../../../../../Components/EmptyState';
 import { getCouponText } from '../../../../../context/newRideContext/utils';
 import { RidePageContext } from '../../../../../context/newRideContext';
 import { UserContext } from '../../../../../context/user';
@@ -55,13 +56,22 @@ const ServiceOptions = () => {
 
   return (
     <ServiceOptionsContainer alwaysBounceVertical={false}>
-      {(serviceEstimations || []).map(option => (
-        <ServiceCard
-          withBorder
-          service={option}
-          key={option.name}
-        />
-      ))}
+
+      { serviceEstimations?.length === 0
+        ? (
+          <EmptyState
+            title={i18n.t('services.emptyState.title')}
+            description={i18n.t('services.emptyState.description')}
+          />
+        )
+        : (serviceEstimations || []).map(option => (
+          <ServiceCard
+            withBorder
+            service={option}
+            key={option.name}
+          />
+        ))
+      }
       {!isDebuggingEnabled
         ? (
           <SkeletonContent

examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import { useNavigation } from '@react-navigation/native';
+import EmptyState from '../../Components/EmptyState';
 import Mixpanel from '../../services/Mixpanel';
 import { INITIAL_ACTIVE_PAYMENT_TAB, PAYMENT_MODES, PAYMENT_TABS } from '../../pages/Payments/consts';
 import TabSwitch from '../../Components/TabSwitch';
@@ -105,6 +106,31 @@ const PaymentMethodPopup = ({
     }
     onCancel();
   };
+  const renderPersonalPaymentMethods = () => (
+    personalPaymentMethods.length > 0
+      ? (personalPaymentMethods.map((paymentMethod: any) => {
+        const reason = getDisabledReason(paymentMethod);
+        return (
+          <PaymentMethod
+            testIdPrefix="Dialog"
+            {...paymentMethod}
+            chooseMethodPage
+            disabledReason={reason}
+            selected={selectedPaymentId === paymentMethod.id}
+            mark={selectedPaymentId === paymentMethod.id}
+            onPress={() => {
+              setSelectedPaymentId(paymentMethod.id);
+            }}
+          />
+        );
+      })
+      ) : (
+        <EmptyState
+          title={i18n.t('popups.choosePaymentMethod.emptyStateText')}
+        />
+      )
+  );
+
 
   return (
     <Modal
@@ -157,24 +183,7 @@ const PaymentMethodPopup = ({
                     />
                   );
                 })
-              ) : (
-                personalPaymentMethods.map((paymentMethod: any) => {
-                  const reason = getDisabledReason(paymentMethod);
-                  return (
-                    <PaymentMethod
-                      testIdPrefix="Dialog"
-                      {...paymentMethod}
-                      chooseMethodPage
-                      disabledReason={reason}
-                      selected={selectedPaymentId === paymentMethod.id}
-                      mark={selectedPaymentId === paymentMethod.id}
-                      onPress={() => {
-                        setSelectedPaymentId(paymentMethod.id);
-                      }}
-                    />
-                  );
-                })
-              )}
+              ) : renderPersonalPaymentMethods()}
               { !isBusinessMode && (
               <PaymentMethod
                 testIdPrefix="Dialog"