Version 3.3.16

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

@@ -84,43 +84,51 @@ interface Item {
 
 interface SelectModalProps {
  data: Item[];
+ selectedValue?: any;
  onSelect: (item: Item) => void;
  onError: (error: boolean) => void;
 }
 
-const SelectModal = ({ data, onSelect, onError }: SelectModalProps) => {
- const [selectedItem, setSelectedItem] = useState(null);
+const SelectModal = ({
+ data, onSelect, onError, selectedValue,
+}: SelectModalProps) => {
+ const [selectedItem, setSelectedItem] = useState<Item| null>(null);
  const [error, setError] = useState(false);
 
  useEffect(() => {
  if (data?.length) {
- if (!selectedItem) {
- setSelectedItem(data[0]);
+ const defaultItem = data.find(i => i.value === selectedValue);
+ if (defaultItem) {
+ setSelectedItem(defaultItem);
  } else {
- setError(!(data.find(item => item.value === selectedItem.value)));
+ setSelectedItem(data[0]);
  }
  }
- }, [data, selectedItem]);
+ }, [data.length, selectedValue]);
 
  useEffect(() => {
  onError(error);
  }, [error]);
 
  useEffect(() => {
- onSelect(selectedItem);
+ if (selectedItem) {
+ onSelect(selectedItem);
+ setError(!(data.find(item => item.value === selectedItem.value)));
+ }
  }, [selectedItem]);
 
  return (
  <StyledPop
  error={error}
  data={data}
+ defaultValue={selectedItem}
  defaultButtonText={selectedItem?.label || '1'}
  onSelect={(item, index) => {
  setSelectedItem(item);
  }}
  dropdownIconPosition="left"
  dropdownOverlayColor="transparent"
- buttonTextAfterSelection={(item, index) => item.value}
+ buttonTextAfterSelection={(item, index) => item.label}
  renderCustomizedRowChild={(item, index) => (
  <StyledSelectRow
  item={item}
@@ -131,5 +139,8 @@ const SelectModal = ({ data, onSelect, onError }: SelectModalProps) => {
  />
  );
 };
+SelectModal.defaultProps = {
+ selectedValue: null,
+};
 
 export default SelectModal;

examples/client/Locomotion/src/context/newRideContext/index.tsx

@@ -123,7 +123,7 @@ interface RidePageContextInterface {
  setSpCurrentLocation: () => void;
  historyResults: any[];
  serviceEstimations: any[];
- ride: RideInterface;
+ ride: RideInterface | null;
  updateRidePayload: (ride: any) => void;
  chosenService: any;
  defaultService: any;
@@ -159,7 +159,7 @@ interface RidePageContextInterface {
  getRidePriceCalculation: (id: string | undefined, priceCalculationId?: string) => Promise<PriceCalculation | undefined>;
  getRideTotalPriceWithCurrency: (rideId : string | undefined) => Promise<{ amount: number; currency: string; } | undefined>;
  getRidesByParams: (params: any) => Promise<RideInterface[]>;
- numberOfPassengers: number,
+ numberOfPassengers: number | null,
  setNumberOfPassengers: (num: number) => void,
  setLastAcknowledgedRideCompletionTimestampToNow: () => void
  loadFutureBookingDays: () => void;
@@ -227,6 +227,8 @@ export const RidePageContext = createContext<RidePageContextInterface>({
  futureBookingDays: 0,
  businessAccountId: null,
  updateBusinessAccountId: (newBusinessAccountId: string | null) => undefined,
+ addNewEmptyRequestSp: () => undefined,
+ removeRequestSp: (index: number) => undefined,
 });
 
 const HISTORY_RECORDS_NUM = 10;
@@ -609,6 +611,10 @@ const RidePageContextProvider = ({ children }: {
  }
  }, [businessAccountId]);
 
+ useEffect(() => {
+ setNumberOfPassengers(-1);
+ }, [chosenService]);
+
  useEffect(() => {
  if (user?.id && isAppActive && !ride.id) {
  loadLastCompletedRide();

examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PassengersCounter/index.tsx

@@ -3,30 +3,40 @@ import React, { useState, useEffect } from 'react';
 
 import SelectModal from '../../../../../../Components/SelectModal';
 
+interface Item {
+ value: number;
+ label: string;
+}
+
+const PassengersCounter = ({
+ service, onSelect, onError = () => null, selectedValue,
+}) => {
+ const [passengersOptions, setPassengersOptions] = useState<Item[]>([]);
 
-const PassengersCounter = ({ service, onSelect, onError = () => null }) => {
  useEffect(() => {
  if (service?.availableSeats) {
  const array = [];
  for (let i = 1; i <= service.availableSeats; i += 1) {
- array.push({ label: i, value: i });
+ array.push({ label: i.toString(), value: i });
  }
  setPassengersOptions(array);
  }
  }, [service]);
 
- const [passengersOptions, setPassengersOptions] = useState([]);
 
- const onItemSelect = (item) => {
+ const onItemSelect = (item: Item) => {
  onSelect(item?.value);
  };
  return (
  <SelectModal
  data={passengersOptions}
  onSelect={onItemSelect}
  onError={onError}
+ selectedValue={selectedValue}
  />
  );
 };
-
+PassengersCounter.defaultProps = {
+ selectedValue: null,
+};
 export default PassengersCounter;

examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx

@@ -1,5 +1,5 @@
 import React, {
- useContext, useState, useEffect, useCallback,
+ useContext, useState, useEffect,
 } from 'react';
 import DatePicker from 'react-native-date-picker';
 import moment from 'moment';
@@ -61,6 +61,7 @@ const RideButtons = ({
  futureBookingDays,
  businessAccountId,
  serviceEstimations,
+ numberOfPassengers,
  } = useContext(RidePageContext);
 
 
@@ -70,6 +71,7 @@ const RideButtons = ({
  const [pickupTimeWindow, setPickupTimeWindow] = useState(0);
  const [pickupTimeWindowChangedHighlight, setPickupTimeWindowChangedHighlight] = useState(false);
  const [highEtaPopupVisible, setHighEtaPopupVisible] = useState(false);
+ const [tempPassengersNumber, setTempPassengersNumber] = useState<number>(0);
  const { getSettingByKey } = settings.useContainer();
  const {
  paymentMethods,
@@ -234,7 +236,7 @@ const RideButtons = ({
  useEffect(() => {
  loadOfflinePaymentText();
  }, []);
- const ridePaymentMethodId = ride?.paymentMethodId || '';
+ const ridePaymentMethodId = ride?.paymentMethodId || chosenService?.allowedPaymentMethods?.[0] || '';
  const selectedPaymentMethod:
  PaymentMethodInterface | undefined = paymentMethodIdToDataMap[ridePaymentMethodId]
  || paymentMethods.find(pm => pm.id === ridePaymentMethodId);
@@ -340,15 +342,17 @@ const RideButtons = ({
  ? (
  <PassengersCounter
  service={chosenService}
- onSelect={setNumberOfPassengers}
+ onSelect={setTempPassengersNumber}
  onError={setPassengersCounterError}
+ selectedValue={numberOfPassengers}
  />
  ) : null}
 
  <StyledButton
  testID="selectService"
  disabled={isSelectButtonDisabled()}
  onPress={() => {
+ setNumberOfPassengers(tempPassengersNumber);
  if (chosenService?.isHighEtaAsapRide) {
  setHighEtaPopupVisible(true);
  } else {

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

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Modal from 'react-native-modal';
+import { ScrollView } from 'react-native-gesture-handler';
 import CloseButton from '../../Components/CloseButton';
 import CancellationReasonsProvider, { CancellationReasonsContext } from '../../context/cancellation-reasons';
 import RoundedButton from '../../Components/RoundedButton';
@@ -76,39 +77,45 @@ const CancellationReasonsPopup = ({
  cancellationReasons?.length > 0 ? (
  <Modal isVisible={isVisible}>
  <Container>
- <CloseButtonContainer>
- <CloseButton onPress={onCancel} />
- </CloseButtonContainer>
- <Title>{i18n.t('popups.cancellationReasons.title')}</Title>
- <SubTitleContainer>
- <SubTitle>{i18n.t('popups.cancellationReasons.subTitle')}</SubTitle>
- </SubTitleContainer>
- <BodyContainer testID="cancellationReasons">
- {isLoading
- ? (
- <LoaderContainer>
- <Loader
- dark
- lottieViewStyle={{
- height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center',
- }}
- sourceProp={undefined}
- />
- </LoaderContainer>
- )
- : cancellationReasons.map(cr => (
- <ClickableContainer
- onPress={() => onCancellationReasonClick(cr.id)}
- testID={`cancellationReason-${cr.category}`}
- >
- <CancellationReasonCard key={cr.id}>
- <CancellationReasonText>
- {i18n.t(`cancellationReasons.${cr.value}`, cr.value)}
- </CancellationReasonText>
- </CancellationReasonCard>
- </ClickableContainer>
- ))}
- </BodyContainer>
+ <ScrollView>
+ <CloseButtonContainer>
+ <CloseButton onPress={onCancel} />
+ </CloseButtonContainer>
+ <Title>{i18n.t('popups.cancellationReasons.title')}</Title>
+ <SubTitleContainer>
+ <SubTitle>{i18n.t('popups.cancellationReasons.subTitle')}</SubTitle>
+ </SubTitleContainer>
+ <BodyContainer testID="cancellationReasons">
+ {isLoading
+ ? (
+ <LoaderContainer>
+ <Loader
+ dark
+ lottieViewStyle={{
+ height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center',
+ }}
+ sourceProp={undefined}
+ />
+ </LoaderContainer>
+ )
+ : (
+ cancellationReasons.map(cr => (
+ <ClickableContainer
+ onPress={() => onCancellationReasonClick(cr.id)}
+ testID={`cancellationReason-${cr.category}`}
+ >
+
+ <CancellationReasonCard key={cr.id}>
+ <CancellationReasonText>
+ {i18n.t(`cancellationReasons.${cr.value}`, cr.value)}
+ </CancellationReasonText>
+ </CancellationReasonCard>
+ </ClickableContainer>
+ ))
+ )
+ }
+ </BodyContainer>
+ </ScrollView>
  </Container>
  </Modal>
  ) : null