From 83a366b2e42c959e99dbeab01e46f8b791a5b4f7 Mon Sep 17 00:00:00 2001
From: hilat-autofleet <123887527+hilat-autofleet@users.noreply.github.com>
Date: Mon, 18 Dec 2023 17:08:16 +0200
Subject: [PATCH] Version 3.3.12 (#796)

* hide price (#791)

* Update cardDetailUtils.ts

* Revert "Update cardDetailUtils.ts"

This reverts commit d16d76607fe4df638110fa22ece86687fcca2f86.

* hide price

* move to settings context

* remove loadShowPrice from context

* Revert "remove loadShowPrice from context"

This reverts commit d94850e68b4b5b6a85af77e8771bcce4ed377708.

* id

* testID

---------

Co-authored-by: Omer Gery <68545675+OmerGery@users.noreply.github.com>
Co-authored-by: EliFrankel <elifrankelilj@gmail.com>

* change default to false (#795)

* add stripe key to debug mode

* change default to false

---------

Co-authored-by: Omer Gery <68545675+OmerGery@users.noreply.github.com>

---------

Co-authored-by: Omer Gery <68545675+OmerGery@users.noreply.github.com>
Co-authored-by: EliFrankel <elifrankelilj@gmail.com>
---
 .../src/Components/PriceBreakdown/index.tsx     | 14 +++++++++++---
 .../src/Components/RideCard/index.tsx           | 16 ++++++++++++----
 .../src/Components/RidePaymentDetails/index.tsx | 17 ++++++++++++-----
 .../src/context/newRideContext/index.tsx        |  4 ++--
 .../Locomotion/src/context/onboarding/index.tsx |  6 +++---
 .../Locomotion/src/context/settings/index.js    |  8 ++++++++
 .../Locomotion/src/context/settings/keys.ts     |  1 +
 .../ServiceOptions/ServiceCard/index.js         | 10 ++++++++--
 .../src/pages/AuthScreens/AuthLoadingScreen.js  |  6 +++---
 .../Locomotion/src/pages/DevPage/index.tsx      | 12 +++++++++++-
 .../Locomotion/src/pages/PostRide/Tips/index.js |  7 ++++++-
 .../src/pages/RideHistory/RideCard/index.js     | 14 +++++++++++++-
 .../src/popups/FareBreakdownPopup/index.tsx     | 17 ++++++++++++-----
 .../Locomotion/src/services/app-settings.js     |  4 +++-
 14 files changed, 105 insertions(+), 31 deletions(-)

diff --git a/examples/client/Locomotion/src/Components/PriceBreakdown/index.tsx b/examples/client/Locomotion/src/Components/PriceBreakdown/index.tsx
index 4aca23dd2..fa8552f50 100644
--- 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
index af6090725..dda8dc2b0 100644
--- a/examples/client/Locomotion/src/Components/RideCard/index.tsx
+++ b/examples/client/Locomotion/src/Components/RideCard/index.tsx
@@ -14,7 +14,8 @@ 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';
+import PaymentContext from '../../context/payments';
+import SettingsContext from '../../context/settings';
 
 interface CardComponentProps {
   paymentMethod: {
@@ -26,7 +27,7 @@ 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();
+  const { offlinePaymentText, loadOfflinePaymentText } = PaymentContext.useContainer();
 
   useEffect(() => {
     loadOfflinePaymentText();
@@ -51,7 +52,7 @@ const CardComponent = ({ paymentMethod }: CardComponentProps) => {
   };
   return (
     <TextRowWithIcon
-      text={getText()}
+      text={getText() || ''}
       Image={() => !isCash && !isOffline && <PaymentIcon type={paymentMethod.brand} />}
       icon={getIcon()}
       style={{ marginTop: 10, marginBottom: 10 }}
@@ -79,6 +80,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 +93,10 @@ const RideCard = ({
     }
   }, [ride]);
 
+  useEffect(() => {
+    loadShowPrice();
+  }, []);
+
   const formatScheludedTo = async (time: any) => {
     try {
       const { stopPoints = [] } = ride;
@@ -144,7 +150,8 @@ const RideCard = ({
             {serviceName}
           </ServiceType>
         </TopTextsContainer>
-        <TopPriceContainer>
+        { showPrice && (
+        <TopPriceContainer testID="priceContainer">
           <RideDate>
             {getFormattedPrice(ride.priceCurrency, ride.priceAmount)}
           </RideDate>
@@ -157,6 +164,7 @@ const RideCard = ({
             : null}
           {displayTimezone ? <ServiceType /> : null}
         </TopPriceContainer>
+        )}
       </DateContainer>
 
       <StopPointsVerticalView ride={ride} />
diff --git a/examples/client/Locomotion/src/Components/RidePaymentDetails/index.tsx b/examples/client/Locomotion/src/Components/RidePaymentDetails/index.tsx
index e5f96b41c..887ce9f17 100644
--- a/examples/client/Locomotion/src/Components/RidePaymentDetails/index.tsx
+++ b/examples/client/Locomotion/src/Components/RidePaymentDetails/index.tsx
@@ -11,7 +11,7 @@ import {
   PaymentRow, RidePriceDetails, PriceText, ViewDetails, CardRowContainer,
 } from './styled';
 import { PaymentMethodInterface } from '../../context/payments/interface';
-import PaymentContext from '../../context/payments';
+import SettingsContext from '../../context/settings';
 import * as navigationService from '../../services/navigation';
 import Button from '../Button';
 
@@ -33,6 +33,8 @@ const RidePaymentDetails = ({
     getRidePriceCalculation,
   } = useContext(RidePageContext);
 
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
+
   const updatePriceCalculation = async () => {
     const calculation = await getRidePriceCalculation(rideId);
     setPriceCalculation(calculation);
@@ -43,6 +45,7 @@ const RidePaymentDetails = ({
 
   useEffect(() => {
     updatePriceCalculation();
+    loadShowPrice();
   }, []);
 
   return (paymentMethod ? (
@@ -54,16 +57,19 @@ const RidePaymentDetails = ({
         </CardRowContainer>
         <RidePriceDetails>
 
-          {!rideHistory ? (totalAmount === 0
+          {!rideHistory && (totalAmount === 0
             ? <PriceText>{`${i18n.t('rideDetails.noCharge')}`}</PriceText>
-            : (
-              <PriceText>
+            : (showPrice
+              && (
+              <PriceText testID="priceText">
                 {getFormattedPrice(priceCalculation?.currency,
                   totalAmount)}
               </PriceText>
+              )
             )
-          ) : null}
+          )}
 
+          {showPrice && (
           <Button
             testID="viewRidePaymentDetails"
             noBackground
@@ -78,6 +84,7 @@ const RidePaymentDetails = ({
                </ViewDetails>
               ) : undefined}
           </Button>
+          )}
         </RidePriceDetails>
       </PaymentRow>
     </>
diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx
index 44dec2f35..038d28d6c 100644
--- a/examples/client/Locomotion/src/context/newRideContext/index.tsx
+++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx
@@ -257,7 +257,7 @@ 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 [futureBookingDays, setFutureBookingDays] = useState(0);
 
 
   const intervalRef = useRef<any>();
@@ -471,7 +471,7 @@ const RidePageContextProvider = ({ children }: {
 
   const loadFutureBookingDays = async () => {
     const maxDaysFromSettings = await getSettingByKey(SETTINGS_KEYS.MAX_DAYS_FOR_FUTURE_RIDE);
-    setfutureBookingDays(maxDaysFromSettings);
+    setFutureBookingDays(maxDaysFromSettings);
   };
 
   const getLastCompletedRide = async () => {
diff --git a/examples/client/Locomotion/src/context/onboarding/index.tsx b/examples/client/Locomotion/src/context/onboarding/index.tsx
index 59023989f..5a8a35795 100644
--- a/examples/client/Locomotion/src/context/onboarding/index.tsx
+++ b/examples/client/Locomotion/src/context/onboarding/index.tsx
@@ -3,7 +3,7 @@ import React, {
   createContext, useContext, useState,
 } from 'react';
 import { initStripe } from '@stripe/stripe-react-native';
-import Config from 'react-native-config';
+import AppSettings from '../../services/app-settings';
 import settings from '../settings';
 import SETTINGS_KEYS from '../settings/keys';
 import * as navigationService from '../../services/navigation';
@@ -109,9 +109,9 @@ const OnboardingContextProvider = ({ children }: { children: any }) => {
       getOrFetchClientPaymentAccount(),
       loadCustomer(),
     ]);
-
+    const publishableKey = await AppSettings.getStripeKey();
     initStripe({
-      publishableKey: Config.STRIPE_PUBLISHER_KEY,
+      publishableKey,
       merchantIdentifier: 'merchant.identifier',
       stripeAccountId: paymentAccount.stripeId,
     });
diff --git a/examples/client/Locomotion/src/context/settings/index.js b/examples/client/Locomotion/src/context/settings/index.js
index 58115f1f8..6b70dfaa5 100644
--- a/examples/client/Locomotion/src/context/settings/index.js
+++ b/examples/client/Locomotion/src/context/settings/index.js
@@ -21,6 +21,7 @@ const useSettings = () => {
   const [workingHours, setWorkingHours] = useState({});
   const [measureSystem, setMeasureSystem] = useState('metric');
   const [appSettingsState, setAppSettingsState] = useState({});
+  const [showPrice, setShowPrice] = useState(false);
 
 
   const getSettingByKey = async (key) => {
@@ -120,6 +121,11 @@ const useSettings = () => {
     setAppSettingsStates(appSettingsState);
   }, [appSettingsState]);
 
+  const loadShowPrice = async () => {
+    const hidePrice = await getSettingByKey(settingsKeys.HIDE_PRICE);
+    setShowPrice(!hidePrice);
+  };
+
   return {
     settingsList,
     getWorkingHours,
@@ -130,6 +136,8 @@ const useSettings = () => {
     getAppSettings,
     getMeasureSystem,
     measureSystem,
+    loadShowPrice,
+    showPrice,
   };
 };
 export default createContainer(useSettings);
diff --git a/examples/client/Locomotion/src/context/settings/keys.ts b/examples/client/Locomotion/src/context/settings/keys.ts
index cca79e50a..2daca45fe 100644
--- a/examples/client/Locomotion/src/context/settings/keys.ts
+++ b/examples/client/Locomotion/src/context/settings/keys.ts
@@ -18,4 +18,5 @@ export default {
   DISABLE_CAPTCHA_UI: 'riderApp.disableCaptchaUi',
   MAX_DAYS_FOR_FUTURE_RIDE: 'riderApp.daysForFutureRideBooking',
   OFFLINE_PAYMENT_TEXT: 'riderApp.offlinePaymentText',
+  HIDE_PRICE: 'riderApp.hidePrice',
 };
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 f14a4ed96..d72075232 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
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import propsTypes from 'prop-types';
 import { View } from 'react-native';
 import SvgIcon from '../../../../../../Components/SvgIcon';
@@ -20,6 +20,7 @@ import {
 import Tag from '../../../../../../Components/Tag';
 import { RidePageContext } from '../../../../../../context/newRideContext';
 import FareBreakdownPopup from '../../../../../../popups/FareBreakdownPopup';
+import SettingsContext from '../../../../../../context/settings';
 
 const FARE_POPUP = 'farePopup';
 
@@ -28,6 +29,7 @@ const ServiceCard = ({ service, withBorder }) => {
   const {
     setChosenService, chosenService, serviceEstimations, ride,
   } = useContext(RidePageContext);
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
   const [popup, setPopup] = useState(null);
   const isFutureRide = ride.scheduledTo;
   const unavailable = !((ride.scheduledTo && service.priceCalculationId)
@@ -98,9 +100,13 @@ const ServiceCard = ({ service, withBorder }) => {
       return i18n.t('rideDetails.unavailable');
     }
 
-    return getFormattedPrice(service.currency, service.price);
+    return showPrice ? getFormattedPrice(service.currency, service.price) : null;
   };
 
+  useEffect(() => {
+    loadShowPrice();
+  }, []);
+
   return (
     <>
       <CardContainer
diff --git a/examples/client/Locomotion/src/pages/AuthScreens/AuthLoadingScreen.js b/examples/client/Locomotion/src/pages/AuthScreens/AuthLoadingScreen.js
index 0be1f795d..b178ba537 100644
--- a/examples/client/Locomotion/src/pages/AuthScreens/AuthLoadingScreen.js
+++ b/examples/client/Locomotion/src/pages/AuthScreens/AuthLoadingScreen.js
@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { initStripe } from '@stripe/stripe-react-native';
-import Config from 'react-native-config';
 import moment from 'moment';
 import { Platform } from 'react-native';
+import AppSettings from '../../services/app-settings';
 import { APP_ROUTES, MAIN_ROUTES } from '../routes';
 import { logout } from '../../services/logout';
 import { getUserDetails } from '../../context/user/api';
@@ -69,9 +69,9 @@ const AuthLoadingScreen = () => {
           }),
         ]);
 
-
+        const publishableKey = await AppSettings.getStripeKey();
         initStripe({
-          publishableKey: Config.STRIPE_PUBLISHER_KEY,
+          publishableKey,
           merchantIdentifier: 'merchant.identifier',
           stripeAccountId: paymentAccount.stripeId,
         });
diff --git a/examples/client/Locomotion/src/pages/DevPage/index.tsx b/examples/client/Locomotion/src/pages/DevPage/index.tsx
index c8871ad55..63d4c08df 100644
--- a/examples/client/Locomotion/src/pages/DevPage/index.tsx
+++ b/examples/client/Locomotion/src/pages/DevPage/index.tsx
@@ -14,6 +14,7 @@ import { InputContainer, Label } from './styles';
 const DevSettingPage = () => {
   const [operationId, setOperationId] = useState(Config.OPERATION_ID);
   const [serverUrl, setServerUrl] = useState(Config.SERVER_HOST);
+  const [stripeKey, setStripeKey] = useState(Config.STRIPE_PUBLISHER_KEY);
   return (
     <PageContainer>
       <PageHeader
@@ -41,10 +42,19 @@ const DevSettingPage = () => {
         }}
         value={serverUrl}
       />
+      <Label>Stripe Key</Label>
+      <TextInput
+        testID="stripeKey"
+        autoFocus
+        onChangeText={(newStripeKey: string) => {
+          setStripeKey(newStripeKey);
+        }}
+        value={stripeKey}
+      />
       <NavButton
         testID="saveButton"
         onPress={() => {
-          AppSettings.setSettings({ serverUrl, operationId });
+          AppSettings.setSettings({ serverUrl, operationId, stripeKey });
           navigationService.goBack();
         }}
       >
diff --git a/examples/client/Locomotion/src/pages/PostRide/Tips/index.js b/examples/client/Locomotion/src/pages/PostRide/Tips/index.js
index 0337441c1..b78443741 100644
--- a/examples/client/Locomotion/src/pages/PostRide/Tips/index.js
+++ b/examples/client/Locomotion/src/pages/PostRide/Tips/index.js
@@ -16,6 +16,7 @@ import BottomSheet from '../../../Components/BottomSheet';
 import BottomSheetContextProvider, { BottomSheetContext, SNAP_POINT_STATES } from '../../../context/bottomSheetContext';
 import CustomTip from './CustomTip';
 import { getFormattedPrice, getCurrencySymbol } from '../../../context/newRideContext/utils';
+import SettingsContext from '../../../context/settings';
 
 const TipSectionContainer = styled.View`
  width: 100%;
@@ -106,6 +107,7 @@ const Tips = ({
 }) => {
   const [selectedTip, setSelectedTip] = useState(null);
   const [customTip, setCustomTip] = useState(null);
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
 
   const isPercentage = ridePrice >= tipSettings.percentageThreshold;
   const buttons = isPercentage ? tipSettings.percentage : tipSettings.fixedPrice;
@@ -121,6 +123,7 @@ const Tips = ({
 
   useEffect(() => {
     setSnapPointsState(SNAP_POINT_STATES.CUSTOM_TIP);
+    loadShowPrice();
   }, []);
 
 
@@ -173,9 +176,11 @@ const Tips = ({
             <Title testID="tipPageTitle">
               {`${i18n.t('postRide.tip.title')} ${driver.firstName}`}
             </Title>
-            <SubTitle>
+            {showPrice && (
+            <SubTitle testID="postRideTip">
               {`${i18n.t('postRide.tip.subTitle')} ${serviceDisplayPrice}`}
             </SubTitle>
+            )}
           </Column>
           <ThumbnailContainer>
             <StyledThumbnail>
diff --git a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
index abeec786b..ffdfcaf21 100644
--- a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
+++ b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js
@@ -10,6 +10,7 @@ import { isCardPaymentMethod } from '../../../lib/ride/utils';
 import { getPriceCalculation } from '../../../context/futureRides/api';
 import RidePaymentDetails from '../../../Components/RidePaymentDetails';
 import PaymentContext from '../../../context/payments';
+import SettingsContext from '../../../context/settings';
 import {
   DaySecTitleSubText,
   DaySecTitleText,
@@ -52,6 +53,12 @@ const RideTitleCard = ({
   ride, page, showTip, tip, isPaymentRejected,
 }) => {
   const isDebuggingEnabled = (typeof atob !== 'undefined');
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
+
+  useEffect(() => {
+    loadShowPrice();
+  }, []);
+
   const getTipButton = () => {
     if (!isDebuggingEnabled && tip === null) {
       return (
@@ -115,9 +122,11 @@ const RideTitleCard = ({
           ) : <RideStateText>{i18n.t(`rideHistory.ride.states.${ride.state}`)}</RideStateText>}
         </RideViewTextContainer>
         <RideViewSecTextContainer>
+          {showPrice && (
           <DaySecTitleText markError={isPaymentRejected} testID="ridePrice">
             {getFormattedPrice(ride.priceCurrency, ride.priceAmount)}
           </DaySecTitleText>
+          )}
           {getPriceSubtitle()}
         </RideViewSecTextContainer>
       </TitleContainer>
@@ -232,7 +241,10 @@ const RideView = ({ ride }) => {
                   ? (
                     <OutstandBalanceText>
                       {i18n.t('rideHistory.rideCard.paymentRetry.text',
-                        { price: getFormattedPrice(outstandingBalance.currency, outstandingBalance.amount) })}
+                        {
+                          price:
+                          getFormattedPrice(outstandingBalance.currency, outstandingBalance.amount),
+                        })}
                     </OutstandBalanceText>
                   ) : null}
                 <RoundedButton style={{ backgroundColor: '#24aaf2' }} onPress={retryPayment}>
diff --git a/examples/client/Locomotion/src/popups/FareBreakdownPopup/index.tsx b/examples/client/Locomotion/src/popups/FareBreakdownPopup/index.tsx
index 52f4059b6..682ad7d4e 100644
--- a/examples/client/Locomotion/src/popups/FareBreakdownPopup/index.tsx
+++ b/examples/client/Locomotion/src/popups/FareBreakdownPopup/index.tsx
@@ -13,6 +13,7 @@ import {
 import i18n from '../../I18n';
 import { Line } from '../../Components/PriceBreakdown/styled';
 import { getPriceCalculation } from '../../context/newRideContext/api';
+import SettingsContext from '../../context/settings';
 
 
 interface FareBreakdownPopupProps {
@@ -28,6 +29,8 @@ const FareBreakdownPopup = ({
 }: FareBreakdownPopupProps) => {
   const [priceCalculation, setPriceCalculation] = useState(null);
   const [didRequestFail, setDidRequestFail] = useState(false);
+  const { showPrice, loadShowPrice } = SettingsContext.useContainer();
+
   const loadPriceCalculation = async () => {
     try {
       setDidRequestFail(false);
@@ -39,6 +42,7 @@ const FareBreakdownPopup = ({
   };
   useEffect(() => {
     loadPriceCalculation();
+    loadShowPrice();
   }, []);
 
   return (
@@ -56,11 +60,14 @@ const FareBreakdownPopup = ({
           )}
         </InnerContainer>
         {service.isPriceEstimated && <Line />}
-        <PriceBreakdown
-          priceCalculation={priceCalculation}
-          didRequestFail={didRequestFail}
-          retryGetPriceBreakdown={loadPriceCalculation}
-        />
+        {showPrice
+          && (
+          <PriceBreakdown
+            priceCalculation={priceCalculation}
+            didRequestFail={didRequestFail}
+            retryGetPriceBreakdown={loadPriceCalculation}
+          />
+          )}
       </OuterContainer>
     </Modal>
   );
diff --git a/examples/client/Locomotion/src/services/app-settings.js b/examples/client/Locomotion/src/services/app-settings.js
index 0647b74bd..0dc4cef38 100644
--- a/examples/client/Locomotion/src/services/app-settings.js
+++ b/examples/client/Locomotion/src/services/app-settings.js
@@ -3,11 +3,12 @@ import Storage from './storage';
 
 const keyName = 'devSettings';
 
-const { SERVER_HOST, OPERATION_ID } = Config;
+const { SERVER_HOST, OPERATION_ID, STRIPE_PUBLISHER_KEY } = Config;
 
 const keyFallbackMap = {
   serverUrl: SERVER_HOST,
   operationId: OPERATION_ID,
+  stripeKey: STRIPE_PUBLISHER_KEY,
 };
 const AppSettings = {
   getSettings: async () => {
@@ -20,6 +21,7 @@ const AppSettings = {
   },
   getServerUrl: async () => AppSettings.getKeyWithFallback('serverUrl'),
   getOperationId: async () => AppSettings.getKeyWithFallback('operationId'),
+  getStripeKey: async () => AppSettings.getKeyWithFallback('stripeKey'),
   setSettings: async (newSettingKeyObject) => {
     const currentSettings = await AppSettings.getSettings();
     await Storage.save({