Merge branch 'master' into test-id

examples/client/Locomotion/ios/Podfile.lock

@@ -447,7 +447,7 @@ PODS:
     - Firebase/Crashlytics (= 8.15.0)
     - React-Core
     - RNFBApp
-  - RNGestureHandler (2.4.2):
+  - RNGestureHandler (2.12.1):
     - React-Core
   - RNLocalize (2.2.4):
     - React-Core
@@ -816,9 +816,9 @@ SPEC CHECKSUMS:
   RNFastImage: 3207b9eb17c2425d574ca40db35185db6e324f4e
   RNFBApp: e4439717c23252458da2b41b81b4b475c86f90c4
   RNFBCrashlytics: 94e1f78e2a9aa9e02edbfb0d3f1f0921ce00094b
-  RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
+  RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
   RNLocalize: ea02d6ee626a9239c9efe0b2b3f8a4660dff6df6
-  RNReanimated: 51bba3f4b6dc13fbfe83d620fe20e82fcf6e9697
+  RNReanimated: 1f117be601c59177816351a965bc57320b766c15
   RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
   RNSVG: ecd661f380a07ba690c9c5929c475a44f432d674
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
@@ -831,6 +831,6 @@ SPEC CHECKSUMS:
   StripeUICore: 08c1efbd7e3c54ee7fa74334a37a1d4c08ba944d
   Yoga: c4d61225a466f250c35c1ee78d2d0b3d41fe661c
 
-PODFILE CHECKSUM: 702820324fe56b3916c3fc841fd20ce5daddfaf7
+PODFILE CHECKSUM: 42909390370d7a65830c84fab99e66e070f1b4f9
 
 COCOAPODS: 1.12.1

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

@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import React, {
-  useCallback, useContext, forwardRef, useEffect,
+  useCallback, useContext, forwardRef,
 } from 'react';
 import BottomSheet, {
   BottomSheetFooter,
   BottomSheetHandle,
 } from '@gorhom/bottom-sheet';
 import styled from 'styled-components';
 import { Text, View } from 'react-native';
-import { UserContext } from '../../context/user';
+import { Trans } from 'react-i18next';
 // eslint-disable-next-line import/no-unresolved
 import SafeView from '../SafeView';
 import { BottomSheetContext } from '../../context/bottomSheetContext';
 
-const BottomSheetTopInfo = styled(View)`
-background-color: #989898;
+const BottomSheetTopInfo = styled(View)<{backgroundColor: string}>`
+background-color: ${props => props.backgroundColor || '#989898'};
 /* position: absolute;
 height: 38px;
 top: -38px; */
@@ -49,7 +49,7 @@ const BottomSheetComponent = forwardRef(({
     setIsExpanded,
     snapPoints,
     footerComponent,
-    topBarText,
+    topBarProps,
   } = useContext(BottomSheetContext);
   const onAnimate = useCallback((from: any, to: any) => {
     if (!closeable && from !== -1) {
@@ -77,10 +77,10 @@ const BottomSheetComponent = forwardRef(({
 
   const getTopBar = () => (
     <>
-      {!!topBarText && (
-      <BottomSheetTopInfo>
+      {!!topBarProps.text && (
+      <BottomSheetTopInfo backgroundColor={topBarProps.backgroundColor}>
         <InfoText>
-          {topBarText}
+          <Trans defaults={topBarProps.text} components={topBarProps.htmlTags} />
         </InfoText>
       </BottomSheetTopInfo>
       )}

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

@@ -284,6 +284,8 @@ export const ConfirmPickupTime = (props: any) => {
     chosenService,
     defaultService,
     setChosenService,
+    loadFutureBookingDays,
+    futureBookingDays,
   } = useContext(MewRidePageContext);
   const {
     changeBsPage,
@@ -300,9 +302,12 @@ export const ConfirmPickupTime = (props: any) => {
     const minutes = await getSettingByKey(SETTINGS_KEYS.MIN_MINUTES_BEFORE_FUTURE_RIDE);
     setMinMinutesBeforeFutureRide(minutes);
   };
+
   useEffect(() => {
     checkMinutesBeforeFutureRideSetting();
+    loadFutureBookingDays();
   }, []);
+
   useEffect(() => {
     setTempSelectedDate(startDate);
   }, [minMinutesBeforeFutureRide]);
@@ -361,7 +366,7 @@ export const ConfirmPickupTime = (props: any) => {
         textColor="black"
         isVisible={isDatePickerOpen}
         date={tempSelectedDate}
-        maximumDate={getFutureRideMaxDate()}
+        maximumDate={getFutureRideMaxDate(futureBookingDays)}
         minimumDate={getFutureRideMinDate((minMinutesBeforeFutureRide || 0))}
         mode="datetime"
         title={renderDatePickerTitle()}

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

@@ -5,17 +5,16 @@ import { View, Text } from 'react-native';
 import moment from 'moment';
 import styled, { ThemeContext } from 'styled-components';
 import { PaymentIcon } from 'react-native-payment-icons';
-import { PaymentMethodInterface } from 'context/payments/interface';
+import { PAYMENT_METHODS, paymentMethodToIconMap } from '../../pages/Payments/consts';
 import Button from '../Button';
 import { capitalizeFirstLetter, getLastFourForamttedShort } from '../../pages/Payments/cardDetailUtils';
 import i18n from '../../I18n';
 import SvgIcon from '../SvgIcon';
 import selected from '../../assets/selected-v.svg';
 import { Start, StartCapital } from '../../lib/text-direction';
-import cashIcon from '../../assets/cash.svg';
 import chevronIcon from '../../assets/chevron.svg';
 import { isCashPaymentMethod } from '../../lib/ride/utils';
-
+import paymentContext from '../../context/payments';
 
 type ContainerProps = {
   children: React.ReactNode,
@@ -91,17 +90,42 @@ const style = {
   [StartCapital()]: 28,
 };
 
+
 const CardRow = (paymentMethod: any) => {
   const { primaryColor } = useContext(ThemeContext);
+  const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer();
   const [isCardExpired, setIsCardExpired] = useState(false);
+
+  useEffect(() => {
+    loadOfflinePaymentText();
+  }, []);
   useEffect(() => {
     let isExpired = false;
     setTimeout(() => {
       isExpired = moment(paymentMethod.expiresAt).isBefore(moment());
       setIsCardExpired(isExpired);
     }, 100);
   }, [paymentMethod]);
-  const testID = paymentMethod.addNew ? `${paymentMethod.testIdPrefix || ''}AddPaymentMethod` : (`${paymentMethod.testIdPrefix || ''}ChoosePaymentMethod`);
+  const testID = paymentMethod.addNew
+    ? `${paymentMethod.testIdPrefix || ''}AddPaymentMethod`
+    : (`${paymentMethod.testIdPrefix || ''}ChoosePaymentMethod${paymentMethod.id === PAYMENT_METHODS.OFFLINE || paymentMethod.id === PAYMENT_METHODS.CASH ? `_${paymentMethod.id}` : ''}`);
+
+  const getPaymentMethodIcon = () => {
+    const { brand, id, lastFour } = paymentMethod;
+    const isCard = lastFour;
+    if (isCard) {
+      return <PaymentIcon type={brand} />;
+    }
+    return (
+      <SvgIcon
+        fill={primaryColor}
+        Svg={paymentMethodToIconMap[id]}
+        width={40}
+        height={25}
+      />
+    );
+  };
+
   return (
     <>
       <Button
@@ -129,9 +153,7 @@ const CardRow = (paymentMethod: any) => {
                 )
                 : (
                   <>
-                    {!paymentMethod.lastFour
-                      ? isCashPaymentMethod(paymentMethod) ? <SvgIcon fill={primaryColor} Svg={cashIcon} width={40} height={25} /> : null
-                      : <PaymentIcon type={paymentMethod.brand} />}
+                    {getPaymentMethodIcon()}
                     {paymentMethod.mark ? (
                       <SvgIcon
                         style={{
@@ -160,7 +182,7 @@ const CardRow = (paymentMethod: any) => {
                     {!paymentMethod.lastFour
                       ? (
                         <Type>
-                          {`${i18n.t(`payments.${isCashPaymentMethod(paymentMethod) ? 'cash' : 'offline'}`)}`}
+                          {isCashPaymentMethod(paymentMethod) ? i18n.t('payments.cash') : offlinePaymentText }
                         </Type>
                       )
                       : (

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

@@ -1,10 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import moment from 'moment-timezone';
 import { PaymentIcon } from 'react-native-payment-icons';
-import { View } from 'react-native';
 import SkeletonContent from 'react-native-skeleton-content-nonexpo';
-
-import { RIDE_STATES } from '../../lib/commonTypes';
 import { PriceCalculation, RideInterface, RidePageContext } from '../../context/newRideContext';
 import i18n from '../../I18n';
 import RoundedButton from '../RoundedButton';
@@ -17,6 +14,7 @@ import StopPointsVerticalView from '../StopPointsVerticalView';
 import { getFormattedPrice, isPriceEstimated, convertTimezoneByLocation } from '../../context/newRideContext/utils';
 import cashIcon from '../../assets/cash.svg';
 import { PAYMENT_METHODS } from '../../pages/Payments/consts';
+import paymentContext from '../../context/payments';
 
 interface CardComponentProps {
   paymentMethod: {
@@ -28,12 +26,17 @@ interface CardComponentProps {
 const CardComponent = ({ paymentMethod }: CardComponentProps) => {
   const isCash = PAYMENT_METHODS.CASH === paymentMethod.id;
   const isOffline = PAYMENT_METHODS.OFFLINE === paymentMethod.id;
+  const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer();
+
+  useEffect(() => {
+    loadOfflinePaymentText();
+  }, []);
 
   const getText = () => {
     if (isCash) {
       return i18n.t('payments.cash');
     } if (isOffline) {
-      return i18n.t('payments.offline');
+      return offlinePaymentText;
     }
     return paymentMethod.name;
   };

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

@@ -54,6 +54,7 @@
         "noCharge": "No charge",
         "estimatedFare": "Estimated fare",
         "estimatedFareMessage": "Some of the fares are estimated and may vary based on ride and other conditions",
+        "couponDiscountMessage": "<0>Promo code applied!<\/0> {{couponDiscount}} will be discounted at the end of the ride",
         "type": {
             "pickup": "Pickup",
             "dropoff": "Drop off",
@@ -427,7 +428,7 @@
         "noActivity": "No rides",
         "noActivityYet": "No rides yet",
         "noActivitySub": "Take your first ride and see it here!",
-        "unpaidRide": "Unpaid ride",
+        "unpaidRide": "Payment was rejected",
         "rideCard": {
             "rideJourney": "Ride journey",
             "driverRating": "Driver rating",
@@ -441,7 +442,8 @@
                 "retrySuccessTitle": "You are all set!",
                 "retrySuccessBody": "Thank you for your payment - you can now resume your rides!",
                 "retrySuccessButton": "Done",
-                "retryPaymentButton": "Pay balance now"
+                "retryPaymentButton": "Pay balance now",
+                "text": "You have an outstanding balance of \n {{ price }} for this ride"
             }
         },
         "filters": {
@@ -525,7 +527,7 @@
         "setPaymentBanner": "Set payment method",
         "payWithCash": "Pay with Cash",
         "cash": "Cash",
-        "offline": "Offline payment",
+        "offline": "Billed to company",
         "popups": {
             "removeCard": {
                 "title": "Remove payment method",
@@ -635,6 +637,7 @@
         },
         "ride": {
             "paymentMethodNotAllowedOnService": "{{type}} not allowed for this service",
+            "defaultPaymentMethodNotAllowedText": "This payment method is",
             "now": "Now",
             "notes": {
                 "edit": "Edit note",

examples/client/Locomotion/src/context/bottomSheetContext/index.js

@@ -27,12 +27,19 @@ export const SNAP_POINT_STATES = {
   [BS_PAGES.NO_AVAILABLE_SERVICES]: [STATIC_SNAP_POINTS],
   [BS_PAGES.PICKUP_NOT_IN_TERRITORY]: [STATIC_SNAP_POINTS],
 };
+
+export const INITIAL_TOP_BAR_PROPS = {
+  text: '',
+  backgroundColor: null,
+  htmlTags: [],
+};
+
 const BottomSheetProvider = ({ children }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [genericErrorDetails, setGenericErrorDetails] = useState({});
   const [snapPointsState, setSnapPointsState] = useState(SNAP_POINT_STATES[BS_PAGES.LOADING]);
   const [footerComponent, setFooterComponent] = useState(null);
-  const [topBarText, setTopBarText] = useState('');
+  const [topBarProps, setTopBarProps] = useState(INITIAL_TOP_BAR_PROPS);
   const snapPoints = useMemo(() => snapPointsState, [snapPointsState]);
 
   return (
@@ -44,10 +51,10 @@ const BottomSheetProvider = ({ children }) => {
         setSnapPointsState,
         setFooterComponent,
         footerComponent,
-        topBarText,
-        setTopBarText,
         genericErrorDetails,
         setGenericErrorDetails,
+        topBarProps,
+        setTopBarProps,
       }}
     >
       {children}

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

@@ -158,6 +158,8 @@ interface RidePageContextInterface {
   numberOfPassengers: number,
   setNumberOfPassengers: (num: number) => void,
   setLastAcknowledgedRideCompletionTimestampToNow: () => void
+  loadFutureBookingDays: () => void;
+  futureBookingDays: number;
 }
 
 export const RidePageContext = createContext<RidePageContextInterface>({
@@ -215,6 +217,8 @@ export const RidePageContext = createContext<RidePageContextInterface>({
   numberOfPassengers: null,
   setNumberOfPassengers: () => undefined,
   setLastAcknowledgedRideCompletionTimestampToNow: () => undefined,
+  loadFutureBookingDays: () => undefined,
+  futureBookingDays: 0,
 });
 
 const HISTORY_RECORDS_NUM = 10;
@@ -253,6 +257,8 @@ const RidePageContextProvider = ({ children }: {
   const getRouteName = () => navigationService?.getNavigator()?.getCurrentRoute().name;
   const [numberOfPassengers, setNumberOfPassengers] = useState<number | null>(null);
   const [addressSearchLabel, setAddressSearchLabel] = useState<string | null>(null);
+  const [futureBookingDays, setfutureBookingDays] = useState(0);
+
 
   const intervalRef = useRef<any>();
 
@@ -463,6 +469,11 @@ const RidePageContextProvider = ({ children }: {
 
   const getRidesByParams = async (params: any) => rideApi.fetchRides(params);
 
+  const loadFutureBookingDays = async () => {
+    const maxDaysFromSettings = await getSettingByKey(SETTINGS_KEYS.MAX_DAYS_FOR_FUTURE_RIDE);
+    setfutureBookingDays(maxDaysFromSettings);
+  };
+
   const getLastCompletedRide = async () => {
     let lastTimestamp = await StorageService.get('lastCompletedRideTimestamp');
     if (!lastTimestamp) {
@@ -1344,6 +1355,8 @@ const RidePageContextProvider = ({ children }: {
         formatStationsList,
         clearRequestSp,
         setLastAcknowledgedRideCompletionTimestampToNow,
+        loadFutureBookingDays,
+        futureBookingDays,
       }}
     >
       {children}

examples/client/Locomotion/src/context/newRideContext/utils.ts

@@ -26,7 +26,7 @@ export const FEEDBACK_TYPES = {
 export const RIDER_APP_SOURCE = 'RIDER_APP';
 
 export const getFutureRideMinDate = (minutesBefore: number) => moment().add(minutesBefore, 'minutes').toDate();
-export const getFutureRideMaxDate = () => moment().add(7, 'days').toDate();
+export const getFutureRideMaxDate = (daysAfter: number) => moment().add(daysAfter, 'days').toDate();
 
 export const TAG_OPTIONS = {
   FASTEST: i18n.t('services.tags.fastest'),
@@ -165,11 +165,19 @@ export const formatStopPointsForEstimations = (requestStopPoints: any[]) => requ
   lng: sp.lng,
 }));
 
-export const getFormattedPrice = (priceCurrency: string | undefined, priceAmount: number) => {
+export const getFormattedPrice = (priceCurrency: string | undefined,
+  priceAmount: number | undefined) => {
   if (!priceCurrency) {
     return i18n.t('rideDetails.noCharge');
   }
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: priceCurrency }).format(priceAmount);
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: priceCurrency }).format(priceAmount || 0);
+};
+
+export const getCouponText = (coupon: any) => {
+  if (!coupon || coupon.status === 'error') {
+    return '';
+  }
+  return coupon.percent_off ? `${coupon.percent_off}%` : getFormattedPrice(coupon.currency, coupon.amount_off);
 };