diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
index 4dbaaef16..c5be3a150 100644
--- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
+++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
@@ -5,29 +5,17 @@ import { View } from 'react-native';
import SvgIcon from '../../../../../../Components/SvgIcon';
import i18n from '../../../../../../I18n';
import Seat from '../../../../../../assets/seat.svg';
-import {
- getFormattedPrice,
- TAG_OPTIONS,
-} from '../../../../../../context/newRideContext/utils';
+import { getFormattedPrice, TAG_OPTIONS } from '../../../../../../context/newRideContext/utils';
import { Context as ThemeContext } from '../../../../../../context/theme';
import {
- Circle,
- AvailableSeats,
- Capacity,
- CardContainer,
- CarIcon,
- Eta,
- Row,
- Price,
- ServiceDetails,
- TimeDetails,
- Title,
- Description,
- CarContainer,
- TitleContainer,
- EstimatedText,
- WrapRow,
- HighEta,
+ Circle, AvailableSeats,
+ Capacity, CardContainer,
+ CarIcon, Eta,
+ Row, Price,
+ ServiceDetails, TimeDetails,
+ Title, Description,
+ CarContainer, TitleContainer,
+ EstimatedText, WrapRow, HighEta,
} from './styled';
import Tag from '../../../../../../Components/Tag';
import { RidePageContext } from '../../../../../../context/newRideContext';
@@ -41,17 +29,15 @@ const FARE_POPUP = 'farePopup';
const ServiceCard = ({ service, withBorder, testID }) => {
const { businessAccountId } = useContext(RidePageContext);
const theme = useContext(ThemeContext);
- const { setChosenService, chosenService, serviceEstimations, ride } =
- useContext(RidePageContext);
+ const {
+ setChosenService, chosenService, serviceEstimations, ride,
+ } = useContext(RidePageContext);
const { showPrice, loadShowPrice } = SettingContext.useContainer();
const { getBusinessAccountById } = PaymentContext.useContainer();
const [popup, setPopup] = useState(null);
const isFutureRide = ride.scheduledTo;
- const unavailable = !(
- (ride.scheduledTo && service.priceCalculationId) ||
- service.eta ||
- service.isHighEtaAsapRide
- );
+ const unavailable = !((ride.scheduledTo && service.priceCalculationId)
+ || (service.eta || service.isHighEtaAsapRide));
const isSelected = chosenService && chosenService.id === service.id;
const sharedTagContainerStyles = {
borderWidth: 1,
@@ -84,23 +70,28 @@ const ServiceCard = ({ service, withBorder, testID }) => {
const etaTimeDetails = () => {
if (service.isHighEtaAsapRide) {
- return {i18n.t('rideDetails.highEta')};
+ return (
+
+ {i18n.t('rideDetails.highEta')}
+
+ );
}
return (
- {moment(service.eta).format('h:mm A')}
+
+ {moment(service.eta).format('h:mm A')}
+
- {getEta()}
+
+ {getEta()}
+
);
};
- const getDescription = (forFutureRidesView) => (
-
- {service.description || ''}
+ const getDescription = forFutureRidesView => (
+
+ {(service.description || '')}
);
@@ -113,17 +104,11 @@ const ServiceCard = ({ service, withBorder, testID }) => {
return i18n.t('rideDetails.unavailable');
}
- return showPrice
- ? getFormattedPrice(service.currency, service.price)
- : null;
+ return showPrice ? getFormattedPrice(service.currency, service.price) : null;
};
useEffect(() => {
- showPriceBasedOnAccount(
- loadShowPrice,
- getBusinessAccountById,
- businessAccountId
- );
+ showPriceBasedOnAccount(loadShowPrice, getBusinessAccountById, businessAccountId);
}, [businessAccountId]);
return (
@@ -146,62 +131,79 @@ const ServiceCard = ({ service, withBorder, testID }) => {
}}
>
-
+
- {service.name}
+
+ {service.name}
+
- {serviceEstimations.filter((s) => s.price).length > 1 &&
- service.tag &&
- !(isFutureRide && service.tag === TAG_OPTIONS.FASTEST) ? (
-
- ) : (
-
- )}
- {getUnavailableText()}
+ {serviceEstimations.filter(s => s.price).length > 1
+ && service.tag
+ && !(isFutureRide && service.tag === TAG_OPTIONS.FASTEST)
+ ? (
+
+ )
+ :
+ }
+
+ {getUnavailableText()}
+
{!unavailable && (
-
- {!isFutureRide ? etaTimeDetails() : getDescription(isFutureRide)}
+
+ {!isFutureRide
+ ? (
+ etaTimeDetails()
+ )
+ : getDescription(isFutureRide)}
+
+ {service.isPriceEstimated && showPrice ? (
+
+ {i18n.t('rideDetails.estimatedFare')}
+
+ ) : (
+
+
+ {service.availableSeats}
+
+
+
+ )}
- {service.isPriceEstimated && showPrice ? (
-
- {i18n.t('rideDetails.estimatedFare')}
-
- ) : (
-
- {service.availableSeats}
-
-
- )}
-
+
)}
{!isFutureRide && (
-
- {getDescription()}
- {service.isPriceEstimated && showPrice ? (
-
- {service.availableSeats}
-
-
- ) : null}
-
+
+ {getDescription()}
+ {service.isPriceEstimated && showPrice ? (
+
+
+ {service.availableSeats}
+
+
+
+ ) : null}
+
)}
{popup === FARE_POPUP && (
- setPopup('')}
- />
+ setPopup('')}
+ />
)}
>
);