Merge branch 'master' into test-id

Autofleet · Feb 8, 2024 · b882225 · b882225
2 parents 260decd + 204c7b1
commit b882225
Show file tree

Hide file tree

Showing 41 changed files with 804 additions and 164 deletions.
diff --git a/examples/client/Locomotion/src/Components/BsPages/ActiveRide/index.tsx b/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}

diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { BoldTitle, SubTitle, TitleWithSubTitle } from './styled';
+
+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;
diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts
@@ -0,0 +1,22 @@
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+import { FONT_SIZES, FONT_WEIGHTS } from '../../context/theme';
+
+export const TitleWithSubTitle = styled(View)`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+`;
+export const BaseText = styled(Text)`
+color: #212229;
+${FONT_SIZES.LARGE};
+font-family: Inter;
+font-style: normal;
+line-height: 20px;
+`;
+export const SubTitle = styled(BaseText)`
+font-weight: 500;
+`;
+export const BoldTitle = styled(BaseText)`
+font-weight: 700;
+`;
diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/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 = {
@@ -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',
@@ -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>
     </>

diff --git a/examples/client/Locomotion/src/Components/EmptyState/index.tsx b/examples/client/Locomotion/src/Components/EmptyState/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  Container, Description, Title, TitleWithoutDescription,
+} from './styled';
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+}
+const EmptyState = ({
+  title,
+  description,
+}: EmptyStateProps) => (
+  <Container>
+    {description
+      ? <Title>{title}</Title>
+      : <TitleWithoutDescription>{title}</TitleWithoutDescription>
+    }
+
+    {description ? <Description>{description}</Description> : null}
+  </Container>
+);
+EmptyState.defaultProps = {
+  description: '',
+};
+export default EmptyState;
diff --git a/examples/client/Locomotion/src/Components/EmptyState/styled.ts b/examples/client/Locomotion/src/Components/EmptyState/styled.ts
@@ -0,0 +1,40 @@
+import { Text, View } from 'react-native';
+import styled from 'styled-components';
+import { FONT_SIZES, FONT_WEIGHTS } from '../../context/theme';
+
+export const Container = styled(View)`
+border-radius: 8px;
+border: 1px dashed rgba(125, 139, 172, 0.32);
+display: flex;
+padding: 16px;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+margin: 4px;
+flex: 1 0 0;
+align-self: stretch;
+`;
+export const Title = styled(Text)`
+align-self: stretch;
+color: #212229;
+text-align: center;
+${FONT_WEIGHTS.REGULAR};
+${FONT_SIZES.LARGE};
+font-weight: 600;
+`;
+export const Description = styled(Text)`
+align-self: stretch;
+color: #666975;
+text-align: center;
+${FONT_WEIGHTS.REGULAR};
+${FONT_SIZES.LARGE};
+font-weight: 400;
+`;
+export const TitleWithoutDescription = styled(Text)`
+align-self: stretch;
+color: #666975;
+text-align: center;
+${FONT_WEIGHTS.REGULAR};
+${FONT_SIZES.LARGE};
+font-weight: 500;
+`;
diff --git a/examples/client/Locomotion/src/Components/PriceBreakdown/index.tsx b/examples/client/Locomotion/src/Components/PriceBreakdown/index.tsx
@@ -17,6 +17,7 @@ import {
   PriceText,
 } from './styled';
 import { COUPON_TYPE } from '../../lib/commonTypes';
+import settingsContext from '../../context/settings';
 
 const NoBreakdownComponent = ({
   didRequestFail,
@@ -59,9 +60,11 @@ const PriceBreakdown = ({
   didRequestFail,
   retryGetPriceBreakdown,
 }: PriceBreakdownProps) => {
+  const { showPrice, loadShowPrice } = settingsContext.useContainer();
   const isDebuggingEnabled = typeof atob !== 'undefined';
   const [priceCalculationItems, setPriceCalculationItems] = useState<any[]>();
   const [total, setTotal] = useState<null | string>(null);
+
   const getPriceWithCurrency = (amount: number) => `${getCurrencySymbol(priceCalculation.currency)}${amount.toFixed(2)}`;
 
   const calculationTypeToUnit: any = {
@@ -83,7 +86,8 @@ const PriceBreakdown = ({
       totalPrice += item.price;
       let name;
       if (item.pricingRule) {
-        const calculationTypeToUnitInstance = calculationTypeToUnit[item.pricingRule.calculationType];
+        const calculationTypeToUnitInstance = calculationTypeToUnit[
+          item.pricingRule.calculationType];
         name = `${i18n.t('ridePriceBreakdown.priceItem', {
           name: item.pricingRule.name,
         })} ${calculationTypeToUnitInstance ? calculationTypeToUnitInstance(
@@ -117,6 +121,10 @@ const PriceBreakdown = ({
     }
   }, [priceCalculation]);
 
+  useEffect(() => {
+    loadShowPrice();
+  }, []);
+
   return (
     <>
       <InnerContainer>
@@ -142,8 +150,8 @@ const PriceBreakdown = ({
           <InnerContainer>
             <Row>
               <ItemText>{`${i18n.t('ridePriceBreakdown.total')}`}</ItemText>
-              {priceCalculationItems ? (
-                <PriceText>{total}</PriceText>
+              {priceCalculationItems && showPrice ? (
+                <PriceText testID="priceCalculation">{total}</PriceText>
               ) : (
                 <SkeletonContent
                   containerStyle={{}}

diff --git a/examples/client/Locomotion/src/Components/RideCard/index.tsx b/examples/client/Locomotion/src/Components/RideCard/index.tsx
@@ -13,26 +13,37 @@ 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 PaymentContext from '../../context/payments';
+import SettingsContext from '../../context/settings';
 
 interface CardComponentProps {
   paymentMethod: {
     name: string;
     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) {
@@ -46,12 +57,13 @@ const CardComponent = ({ paymentMethod }: CardComponentProps) => {
       return cashIcon;
     }
     if (isOffline) {
-      return null;
+      return offlineIcon;
     }
   };
   return (
     <TextRowWithIcon
-      text={getText()}
+      text={getText() || ''}
+      subTitle={businessAccountId ? offlinePaymentText : ''}
       Image={() => !isCash && !isOffline && <PaymentIcon type={paymentMethod.brand} />}
       icon={getIcon()}
       style={{ marginTop: 10, marginBottom: 10 }}
@@ -79,6 +91,7 @@ const RideCard = ({
   const {
     getRidePriceCalculation,
   } = useContext(RidePageContext);
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
 
   const addPriceCalculation = async () => {
     const price = await getRidePriceCalculation(ride.id, ride.priceCalculationId);
@@ -91,6 +104,10 @@ const RideCard = ({
     }
   }, [ride]);
 
+  useEffect(() => {
+    loadShowPrice();
+  }, []);
+
   const formatScheludedTo = async (time: any) => {
     try {
       const { stopPoints = [] } = ride;
@@ -144,7 +161,8 @@ const RideCard = ({
             {serviceName}
           </ServiceType>
         </TopTextsContainer>
-        <TopPriceContainer>
+        { showPrice && (
+        <TopPriceContainer testID="priceContainer">
           <RideDate>
             {getFormattedPrice(ride.priceCurrency, ride.priceAmount)}
           </RideDate>
@@ -157,10 +175,16 @@ const RideCard = ({
             : null}
           {displayTimezone ? <ServiceType /> : null}
         </TopPriceContainer>
+        )}
       </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>