From ac5be578e3dd1064ac5a2eb5ff5948460df4949e Mon Sep 17 00:00:00 2001
From: Omer Gery <68545675+OmerGery@users.noreply.github.com>
Date: Thu, 4 Jan 2024 13:23:59 +0200
Subject: [PATCH] add subtitle

---
 .../Locomotion/src/Components/CardRow/index.tsx       |  3 +--
 .../Locomotion/src/Components/RideCard/index.tsx      |  4 +++-
 .../src/Components/TextRowWithIcon/index.tsx          | 11 +++++++++--
 .../ActiveRide/RideDrawer/FutureRides/StopPointRow.js |  2 --
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx
index e41223708..d5575782c 100644
--- a/examples/client/Locomotion/src/Components/CardRow/index.tsx
+++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx
@@ -114,8 +114,7 @@ const CardRow = (paymentMethod: any) => {
     if (isOfflinePaymentMethod(paymentMethod)) {
       return offlinePaymentText;
     }
-    return paymentMethod.doNotCapitalizeName ? paymentMethod.name
-      : capitalizeFirstLetter(paymentMethod.name);
+    return paymentMethod.name;
   };
 
   useEffect(() => {
diff --git a/examples/client/Locomotion/src/Components/RideCard/index.tsx b/examples/client/Locomotion/src/Components/RideCard/index.tsx
index 369d2a1df..30e0a9d2f 100644
--- a/examples/client/Locomotion/src/Components/RideCard/index.tsx
+++ b/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';
@@ -56,12 +57,13 @@ const CardComponent = ({ paymentMethod, businessAccountId }: 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 }}
diff --git a/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx b/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx
index a970c67d0..4d801026a 100644
--- a/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx
+++ b/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { Text, View } from 'react-native';
 import styled, { ThemeContext } from 'styled-components';
+import BusinessAccountText from '../BusinessAccountText';
 import { FONT_SIZES } from '../../context/theme';
 import SvgIcon from '../SvgIcon';
 
@@ -31,7 +32,7 @@ interface TextRowWithIconProps {
 }
 
 const TextRowWithIcon = ({
-  text, icon, style, Image, iconWidth, iconHeight,
+  subTitle, text, icon, style, Image, iconWidth, iconHeight,
 }: TextRowWithIconProps) => {
   const theme = useContext(ThemeContext);
   const getImage = () => {
@@ -56,7 +57,13 @@ const TextRowWithIcon = ({
         ...((Image || icon) && { marginLeft: 10 }),
       }}
       >
-        {text}
+        {subTitle ? (
+          <BusinessAccountText
+            title={text}
+            subTitle={subTitle}
+          />
+        )
+          : text}
       </BasicText>
     </Container>
   );
diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js
index 0e0ca260b..150885243 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
 import styled from 'styled-components';
-import moment from 'moment';
 
 import i18n from '../../../../I18n';
 import Button from '../../../../Components/Button';