Pay with Business accounts

examples/client/Locomotion/src/Components/BsPages/ActiveRide/index.tsx

@@ -165,7 +165,7 @@ const ActiveRideContent = () => {
             ride={ride}
           />
           <RidePaymentDetails
-            rideId={ride.id || ''}
+            ride={ride}
             paymentMethod={ride.payment?.paymentMethod}
             state={ride.state}
             currency={ride.priceCurrency}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+
+const TitleWithSubTitle = styled(View)`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+`;
+const BaseText = styled(Text)`
+color: #212229;
+font-family: Montserrat;
+font-size: 14px;
+font-style: normal;
+line-height: 20px;
+`;
+const SubTitle = styled(BaseText)`
+font-weight: 500;
+`;
+const BoldTitle = styled(BaseText)`
+font-weight: 700;
+`;
+interface BusinessAccountTextProps {
+    title: string;
+    subTitle: string;
+}
+const BusinessAccountText = ({
+  title, subTitle,
+} : BusinessAccountTextProps) => (
+  <TitleWithSubTitle>
+    <BoldTitle numberOfLines={1}>{title}</BoldTitle>
+    <SubTitle numberOfLines={1}>{subTitle}</SubTitle>
+  </TitleWithSubTitle>
+);
+
+export default BusinessAccountText;

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

@@ -5,6 +5,8 @@ import { View, Text } from 'react-native';
 import moment from 'moment';
 import styled, { ThemeContext } from 'styled-components';
 import { PaymentIcon } from 'react-native-payment-icons';
+import BusinessAccountText from '../BusinessAccountText';
+import { RideInterface, RidePageContext } from '../../context/newRideContext';
 import { PAYMENT_METHODS, paymentMethodToIconMap } from '../../pages/Payments/consts';
 import Button from '../Button';
 import { capitalizeFirstLetter, getLastFourForamttedShort } from '../../pages/Payments/cardDetailUtils';
@@ -13,7 +15,7 @@ import SvgIcon from '../SvgIcon';
 import selected from '../../assets/selected-v.svg';
 import { Start, StartCapital } from '../../lib/text-direction';
 import chevronIcon from '../../assets/chevron.svg';
-import { isCashPaymentMethod } from '../../lib/ride/utils';
+import { isCashPaymentMethod, isOfflinePaymentMethod } from '../../lib/ride/utils';
 import paymentContext from '../../context/payments';
 
 type ContainerProps = {
@@ -49,7 +51,7 @@ const margin = `margin-${Start()}`;
 const TextContainer = styled(View)`
   justify-content: center;
   ${margin}: 16px;
-  width: 80%;
+  width: ${({ noSvg } : { noSvg: boolean}) => (noSvg ? '95%' : '80%')};
 `;
 
 const Type = styled(Text)`
@@ -93,9 +95,28 @@ const style = {
 
 const CardRow = (paymentMethod: any) => {
   const { primaryColor } = useContext(ThemeContext);
-  const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer();
+  const {
+    offlinePaymentText,
+    loadOfflinePaymentText,
+    getBusinessAccountNameById,
+  } = paymentContext.useContainer();
+  const { businessAccountId } = paymentMethod;
   const [isCardExpired, setIsCardExpired] = useState(false);
 
+  const getPaymentMethodTitle = () => {
+    const businessAccountName = getBusinessAccountNameById(businessAccountId);
+    if (businessAccountName) {
+      return businessAccountName;
+    }
+    if (isCashPaymentMethod(paymentMethod)) {
+      return i18n.t('payments.cash');
+    }
+    if (isOfflinePaymentMethod(paymentMethod)) {
+      return offlinePaymentText;
+    }
+    return capitalizeFirstLetter(paymentMethod.name);
+  };
+
   useEffect(() => {
     loadOfflinePaymentText();
   }, []);
@@ -111,11 +132,15 @@ const CardRow = (paymentMethod: any) => {
     : (`${paymentMethod.testIdPrefix || ''}ChoosePaymentMethod${paymentMethod.id === PAYMENT_METHODS.OFFLINE || paymentMethod.id === PAYMENT_METHODS.CASH ? `_${paymentMethod.id}` : ''}`);
 
   const getPaymentMethodIcon = () => {
+    if (paymentMethod.noSvg) {
+      return null;
+    }
     const { brand, id, lastFour } = paymentMethod;
     const isCard = lastFour;
     if (isCard) {
       return <PaymentIcon type={brand} />;
     }
+    if (!paymentMethodToIconMap[id]) { return null; }
     return (
       <SvgIcon
         fill={primaryColor}
@@ -154,7 +179,7 @@ const CardRow = (paymentMethod: any) => {
                 : (
                   <>
                     {getPaymentMethodIcon()}
-                    {paymentMethod.mark ? (
+                    {(paymentMethod.mark && !paymentMethod.alignMarkToRight) ? (
                       <SvgIcon
                         style={{
                           position: 'absolute',
@@ -170,7 +195,7 @@ const CardRow = (paymentMethod: any) => {
         }
 
             </ImageContainer>
-            <TextContainer>
+            <TextContainer noSvg={paymentMethod.noSvg}>
               {paymentMethod.addNew
                 ? (
                   <>
@@ -179,17 +204,19 @@ const CardRow = (paymentMethod: any) => {
                 )
                 : (
                   <>
-                    {!paymentMethod.lastFour
-                      ? (
-                        <Type>
-                          {isCashPaymentMethod(paymentMethod) ? i18n.t('payments.cash') : offlinePaymentText }
-                        </Type>
-                      )
-                      : (
-                        <Type>
-                          {capitalizeFirstLetter(paymentMethod.name)}
-                        </Type>
-                      )}
+                    {
+                      (businessAccountId && offlinePaymentText)
+                        ? (
+                          <BusinessAccountText
+                            title={getPaymentMethodTitle()}
+                            subTitle={offlinePaymentText}
+                          />
+                        )
+                        : (
+                          <Type>
+                            {getPaymentMethodTitle()}
+                          </Type>
+                        )}
                     {paymentMethod.lastFour
                       ? <Description>{getLastFourForamttedShort(paymentMethod.lastFour)}</Description>
                       : null}
@@ -205,6 +232,17 @@ const CardRow = (paymentMethod: any) => {
             {paymentMethod.disabledReason}
           </Description>
           )}
+          {(paymentMethod.mark && paymentMethod.alignMarkToRight) ? (
+            <SvgIcon
+              style={{
+                position: 'absolute',
+                right: 10,
+                bottom: 15,
+              }}
+              Svg={selected}
+              fill={primaryColor}
+            />
+          ) : null }
         </Container>
       </Button>
     </>

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

@@ -13,6 +13,7 @@ import {
 import StopPointsVerticalView from '../StopPointsVerticalView';
 import { getFormattedPrice, isPriceEstimated, convertTimezoneByLocation } from '../../context/newRideContext/utils';
 import cashIcon from '../../assets/cash.svg';
+import offlineIcon from '../../assets/offline.svg';
 import { PAYMENT_METHODS } from '../../pages/Payments/consts';
 import PaymentContext from '../../context/payments';
 import SettingsContext from '../../context/settings';
@@ -23,17 +24,26 @@ interface CardComponentProps {
     brand: any;
     id: string;
   }
+  businessAccountId: string | undefined;
 }
-const CardComponent = ({ paymentMethod }: CardComponentProps) => {
+const CardComponent = ({ paymentMethod, businessAccountId }: CardComponentProps) => {
   const isCash = PAYMENT_METHODS.CASH === paymentMethod.id;
   const isOffline = PAYMENT_METHODS.OFFLINE === paymentMethod.id;
-  const { offlinePaymentText, loadOfflinePaymentText } = PaymentContext.useContainer();
+  const {
+    offlinePaymentText,
+    loadOfflinePaymentText,
+    getBusinessAccountNameById,
+  } = PaymentContext.useContainer();
 
   useEffect(() => {
     loadOfflinePaymentText();
   }, []);
 
   const getText = () => {
+    const businessAccountName = getBusinessAccountNameById(businessAccountId);
+    if (businessAccountName) {
+      return businessAccountName;
+    }
     if (isCash) {
       return i18n.t('payments.cash');
     } if (isOffline) {
@@ -47,12 +57,13 @@ const CardComponent = ({ paymentMethod }: CardComponentProps) => {
       return cashIcon;
     }
     if (isOffline) {
-      return null;
+      return offlineIcon;
     }
   };
   return (
     <TextRowWithIcon
       text={getText() || ''}
+      subTitle={businessAccountId ? offlinePaymentText : ''}
       Image={() => !isCash && !isOffline && <PaymentIcon type={paymentMethod.brand} />}
       icon={getIcon()}
       style={{ marginTop: 10, marginBottom: 10 }}
@@ -168,7 +179,12 @@ const RideCard = ({
       </DateContainer>
 
       <StopPointsVerticalView ride={ride} />
-      {paymentMethod && <CardComponent paymentMethod={paymentMethod} />}
+      {paymentMethod && (
+      <CardComponent
+        paymentMethod={paymentMethod}
+        businessAccountId={ride.businessAccountId}
+      />
+      )}
       <RoundedButton testID="cancelRide" onPress={onPress} hollow type="cancel">
         {i18n.t('home.cancelRideButton')}
       </RoundedButton>

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

@@ -6,7 +6,7 @@ import { getFormattedPrice } from '../../context/newRideContext/utils';
 import CardRow from '../CardRow';
 import CardsTitle from '../CardsTitle';
 import i18n from '../../I18n';
-import { PriceCalculation, RidePageContext } from '../../context/newRideContext';
+import { PriceCalculation, RideInterface, RidePageContext } from '../../context/newRideContext';
 import {
   PaymentRow, RidePriceDetails, PriceText, ViewDetails, CardRowContainer,
 } from './styled';
@@ -16,12 +16,12 @@ import * as navigationService from '../../services/navigation';
 import Button from '../Button';
 
 const RidePaymentDetails = ({
-  rideId,
+  ride,
   paymentMethod,
   rideHistory = false,
   state,
 } :{
-  rideId: string,
+  ride: RideInterface,
   paymentMethod: PaymentMethodInterface,
   rideHistory: boolean
   currency: string,
@@ -36,7 +36,7 @@ const RidePaymentDetails = ({
   const { showPrice, loadShowPrice } = SettingsContext.useContainer();
 
   const updatePriceCalculation = async () => {
-    const calculation = await getRidePriceCalculation(rideId);
+    const calculation = await getRidePriceCalculation(ride?.id);
     setPriceCalculation(calculation);
   };
 
@@ -53,7 +53,7 @@ const RidePaymentDetails = ({
       <CardsTitle noPaddingLeft title={i18n.t('ride.paymentMethod')} />
       <PaymentRow>
         <CardRowContainer>
-          <CardRow {...paymentMethod} />
+          <CardRow {...{ ...paymentMethod, businessAccountId: ride.businessAccountId }} />
         </CardRowContainer>
         <RidePriceDetails>
 
@@ -74,7 +74,7 @@ const RidePaymentDetails = ({
             testID="viewRidePaymentDetails"
             noBackground
             onPress={() => navigationService.navigate(MAIN_ROUTES.RIDE_PRICE_BREAKDOWN,
-              { rideId, rideHistory })}
+              { rideId: ride.id, rideHistory })}
           >
             {state !== RIDE_STATES.CANCELED
             || (state === RIDE_STATES.CANCELED