From 3f8dd3a1de3f72a9cc92f3a0c3e1ceb4a172097a Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Sun, 31 Dec 2023 16:14:25 +0200 Subject: [PATCH 01/42] start business accounts ui payment methods --- .../src/Components/TabSwitch/index.tsx | 109 ++++++++++++++++++ examples/client/Locomotion/src/I18n/en.json | 6 +- .../src/assets/business-payment.svg | 3 + .../src/assets/personal-payment.svg | 3 + .../Locomotion/src/pages/Payments/consts.ts | 15 +++ .../src/popups/ChoosePaymentMethod/index.tsx | 11 +- .../src/popups/ChoosePaymentMethod/styled.js | 10 +- 7 files changed, 152 insertions(+), 5 deletions(-) create mode 100644 examples/client/Locomotion/src/Components/TabSwitch/index.tsx create mode 100644 examples/client/Locomotion/src/assets/business-payment.svg create mode 100644 examples/client/Locomotion/src/assets/personal-payment.svg diff --git a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx new file mode 100644 index 000000000..76ae2ab7c --- /dev/null +++ b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import styled from 'styled-components/native'; +import SvgIcon from '../SvgIcon'; +import i18n from '../../I18n'; + +const SELECTED_COLOR = '#212229'; +const UNSELECTED_COLOR = '#666975'; +interface ITabSwitchProps { + onUnselectedClick: (tab) => void + activeTabId: string; + tabs: { + textKey: string; + id: string; + Svg: any; + }[]; +} +interface TabStyled { + isSelected: boolean; +} +const Container = styled.View` + flex-direction: row; + justify-content: center; + align-items: center; + align-self: stretch; + border-color: rgba(125, 139, 172, 0.32) + border-bottom-width: 1px; + border-bottom-color: #7D8BAC52; + margin-bottom: 16px; + padding-left: 8px; + padding-right: 8px; +`; + +const Tab = styled.TouchableOpacity` + height: 40px; + justify-content: center; + align-items: center; + flex: 1 0 0; + text-align: center; + ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`} + margin-left: 8px; + margin-right: 8px; +`; +const TabInner = styled.View` +display: flex; +flex-direction: row; +height: 32px; +padding: 4px; +justify-content: center; +align-items: center; +color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; +font-family: Montserrat; +font-size: 16px; +font-style: normal; +font-weight: 500; +line-height: 24px; +`; +const TextContainer = styled.Text` +color: #666975; +color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; +/* Body - Mobile */ +font-family: Montserrat; +font-size: 16px; +font-style: normal; +font-weight: 500; +line-height: 24px; /* 150% */ +padding-left: 4px; +`; + + +const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => ( + + + {tabs.map((tab) => { + const isSelected = tab.id === activeTabId; + return ( + { + if (!isSelected) { + onUnselectedClick(tab); + } + }} + isSelected={tab.id === activeTabId} + > + + + {tab.Svg + && ( + + ) + } + + {i18n.t(tab.textKey)} + + + + + ); + })} + + +); +export default TabSwitch; diff --git a/examples/client/Locomotion/src/I18n/en.json b/examples/client/Locomotion/src/I18n/en.json index bdd7eade1..50eca14ab 100644 --- a/examples/client/Locomotion/src/I18n/en.json +++ b/examples/client/Locomotion/src/I18n/en.json @@ -289,7 +289,11 @@ "placeholder": "How to find me, flights, info, etc.", "save": "Save", "cancel": "Cancel", - "unavailable": "Unavailable for the selected service" + "unavailable": "Unavailable for the selected service", + "tabs": { + "personal": "Personal", + "business": "Business" + } }, "rideSummary": { "thanksForRideHeadline": "Thanks for your ride!", diff --git a/examples/client/Locomotion/src/assets/business-payment.svg b/examples/client/Locomotion/src/assets/business-payment.svg new file mode 100644 index 000000000..1f28c0949 --- /dev/null +++ b/examples/client/Locomotion/src/assets/business-payment.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/client/Locomotion/src/assets/personal-payment.svg b/examples/client/Locomotion/src/assets/personal-payment.svg new file mode 100644 index 000000000..82c93b8af --- /dev/null +++ b/examples/client/Locomotion/src/assets/personal-payment.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/client/Locomotion/src/pages/Payments/consts.ts b/examples/client/Locomotion/src/pages/Payments/consts.ts index 78cfbdef7..bb5e9a356 100644 --- a/examples/client/Locomotion/src/pages/Payments/consts.ts +++ b/examples/client/Locomotion/src/pages/Payments/consts.ts @@ -1,5 +1,7 @@ import cashIcon from '../../assets/cash.svg'; import offlineIcon from '../../assets/offline.svg'; +import personalPaymentIcon from '../../assets/personal-payment.svg'; +import businessPaymentIcon from '../../assets/business-payment.svg'; export const PAYMENT_METHODS = { CASH: 'cash', @@ -7,6 +9,19 @@ export const PAYMENT_METHODS = { CARD: 'card', }; +export const PAYMENT_TABS = [ + { + textKey: 'popups.choosePaymentMethod.tabs.personal', + id: 'personal', + Svg: personalPaymentIcon, + }, + { + textKey: 'popups.choosePaymentMethod.tabs.business', + id: 'business', + Svg: businessPaymentIcon, + }, +]; +export const INITIAL_ACTIVE_PAYMENT_TAB = PAYMENT_TABS[0].id; export const paymentMethodToIconMap = { [PAYMENT_METHODS.CASH]: cashIcon, [PAYMENT_METHODS.OFFLINE]: offlineIcon, diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index 9575622a3..5ab2eb74c 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -4,6 +4,8 @@ import { View } from 'react-native'; import PropTypes from 'prop-types'; import Modal from 'react-native-modal'; import { useNavigation } from '@react-navigation/native'; +import { INITIAL_ACTIVE_PAYMENT_TAB, PAYMENT_TABS } from '../../pages/Payments/consts'; +import TabSwitch from '../../Components/TabSwitch'; import { getPaymentMethod } from '../../pages/Payments/cardDetailUtils'; import CloseButton from '../../Components/CloseButton'; import i18n from '../../I18n'; @@ -49,7 +51,7 @@ const PaymentMethodPopup = ({ const usePayments: any = PaymentsContext.useContainer(); const { chosenService } = useContext(MewRidePageContext); const [selectedPaymentId, setSelectedPaymentId] = useState(selected); - + const [activePaymentTab, setActivePaymentTab] = useState(INITIAL_ACTIVE_PAYMENT_TAB); const getDisabledReason = (paymentMethod: any) => { if ( chosenService @@ -102,6 +104,13 @@ const PaymentMethodPopup = ({ + { + setActivePaymentTab(tab.id); + }} + /> { [ diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js index 83aa8c781..b33ce8cb0 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js @@ -43,10 +43,14 @@ export const SummaryContainer = styled.View` `; export const Title = styled.Text` - ${FONT_SIZES.H2} - color: black; - ${FONT_WEIGHTS.SEMI_BOLD}; flex: 10; + color: var(--gray-05, #212229); + /* Body strong - Mobile */ + font-family: Montserrat; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 150% */ `; export const StyledTextArea = styled(TextArea)` From 53a46a6c6ab5df681b47e665de42fcc185433d0c Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Sun, 31 Dec 2023 17:17:46 +0200 Subject: [PATCH 02/42] wip --- .../Locomotion/src/pages/Payments/consts.ts | 9 ++-- .../src/popups/ChoosePaymentMethod/index.tsx | 48 +++++++++++-------- 2 files changed, 33 insertions(+), 24 deletions(-) diff --git a/examples/client/Locomotion/src/pages/Payments/consts.ts b/examples/client/Locomotion/src/pages/Payments/consts.ts index bb5e9a356..f37104621 100644 --- a/examples/client/Locomotion/src/pages/Payments/consts.ts +++ b/examples/client/Locomotion/src/pages/Payments/consts.ts @@ -8,16 +8,19 @@ export const PAYMENT_METHODS = { OFFLINE: 'offline', CARD: 'card', }; - +export const PAYMENT_MODES = { + PERSONAL: 'personal', + BUSINESS: 'business', +}; export const PAYMENT_TABS = [ { textKey: 'popups.choosePaymentMethod.tabs.personal', - id: 'personal', + id: PAYMENT_MODES.PERSONAL, Svg: personalPaymentIcon, }, { textKey: 'popups.choosePaymentMethod.tabs.business', - id: 'business', + id: PAYMENT_MODES.BUSINESS, Svg: businessPaymentIcon, }, ]; diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index 5ab2eb74c..d3b35fcbe 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -4,7 +4,7 @@ import { View } from 'react-native'; import PropTypes from 'prop-types'; import Modal from 'react-native-modal'; import { useNavigation } from '@react-navigation/native'; -import { INITIAL_ACTIVE_PAYMENT_TAB, PAYMENT_TABS } from '../../pages/Payments/consts'; +import { INITIAL_ACTIVE_PAYMENT_TAB, PAYMENT_MODES, PAYMENT_TABS } from '../../pages/Payments/consts'; import TabSwitch from '../../Components/TabSwitch'; import { getPaymentMethod } from '../../pages/Payments/cardDetailUtils'; import CloseButton from '../../Components/CloseButton'; @@ -52,6 +52,7 @@ const PaymentMethodPopup = ({ const { chosenService } = useContext(MewRidePageContext); const [selectedPaymentId, setSelectedPaymentId] = useState(selected); const [activePaymentTab, setActivePaymentTab] = useState(INITIAL_ACTIVE_PAYMENT_TAB); + const isBusinessMode = activePaymentTab === PAYMENT_MODES.BUSINESS; const getDisabledReason = (paymentMethod: any) => { if ( chosenService @@ -113,26 +114,30 @@ const PaymentMethodPopup = ({ /> { - [ - ...usePayments.paymentMethods, - ...(showCash ? [cashPaymentMethod] : []), - ...(showOffline ? [offlinePaymentMethod] : []), - ].map((paymentMethod: any) => { - const reason = getDisabledReason(paymentMethod); - return ( - { - setSelectedPaymentId(paymentMethod.id); - }} - /> - ); - })} + ( + [ + ...usePayments.paymentMethods, + ...(showCash ? [cashPaymentMethod] : []), + ...(showOffline ? [offlinePaymentMethod] : []), + ].map((paymentMethod: any) => { + const reason = getDisabledReason(paymentMethod); + return ( + { + setSelectedPaymentId(paymentMethod.id); + }} + /> + ); + }) + ) + } + { !isBusinessMode && ( + ) } From 52a750ad179badd3aec5667192462e8a41c4238d Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Mon, 1 Jan 2024 17:22:13 +0200 Subject: [PATCH 03/42] wip service estimation adapt --- .../src/Components/CardRow/index.tsx | 29 ++++--- .../src/Components/TabSwitch/index.tsx | 4 +- .../src/context/newRideContext/api.js | 4 +- .../src/context/newRideContext/index.tsx | 26 +++++- .../Locomotion/src/context/payments/index.js | 11 +-- .../RideOptions/RideButtons/index.tsx | 12 ++- .../RideDrawer/RideOptions/index.tsx | 17 +++- .../src/popups/ChoosePaymentMethod/index.tsx | 80 ++++++++++++------- 8 files changed, 124 insertions(+), 59 deletions(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index 65aaab089..befb6e08b 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -13,7 +13,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 = { @@ -96,6 +96,17 @@ const CardRow = (paymentMethod: any) => { const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer(); const [isCardExpired, setIsCardExpired] = useState(false); + const getPaymentMethodTitle = () => { + if (isCashPaymentMethod(paymentMethod)) { + return i18n.t('payments.cash'); + } + if (isOfflinePaymentMethod(paymentMethod)) { + return offlinePaymentText; + } + return paymentMethod.doNotCapitalizeName ? paymentMethod.name + : capitalizeFirstLetter(paymentMethod.name); + }; + useEffect(() => { loadOfflinePaymentText(); }, []); @@ -153,7 +164,7 @@ const CardRow = (paymentMethod: any) => { ) : ( <> - {getPaymentMethodIcon()} + {!paymentMethod.noSvg && getPaymentMethodIcon()} {paymentMethod.mark ? ( { ) : ( <> - {!paymentMethod.lastFour - ? ( - - {isCashPaymentMethod(paymentMethod) ? i18n.t('payments.cash') : offlinePaymentText } - - ) - : ( - - {capitalizeFirstLetter(paymentMethod.name)} - - )} + + {getPaymentMethodTitle()} + {paymentMethod.lastFour ? {getLastFourForamttedShort(paymentMethod.lastFour)} : null} diff --git a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx index 76ae2ab7c..c6c30af83 100644 --- a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx +++ b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx @@ -81,7 +81,7 @@ const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => onUnselectedClick(tab); } }} - isSelected={tab.id === activeTabId} + isSelected={isSelected} > @@ -95,7 +95,7 @@ const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => /> ) } - + {i18n.t(tab.textKey)} diff --git a/examples/client/Locomotion/src/context/newRideContext/api.js b/examples/client/Locomotion/src/context/newRideContext/api.js index ceeb865b0..c212a9373 100644 --- a/examples/client/Locomotion/src/context/newRideContext/api.js +++ b/examples/client/Locomotion/src/context/newRideContext/api.js @@ -1,8 +1,8 @@ import network from '../../services/network'; -export const createServiceEstimations = async (stopPoints, scheduledTo) => { +export const createServiceEstimations = async (stopPoints, scheduledTo, businessAccountId) => { try { - const { data } = await network.post('api/v1/services/service-estimations', { stopPoints, scheduledTo }); + const { data } = await network.post('api/v1/services/service-estimations', { stopPoints, scheduledTo, businessAccountId }); return data; } catch (e) { console.error(e); diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx index 038d28d6c..0182eae2e 100644 --- a/examples/client/Locomotion/src/context/newRideContext/index.tsx +++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx @@ -78,6 +78,7 @@ export interface RideInterface { priceCalculationId?: string; rideFeedbacks?: RideFeedback[]; cancellationReasonId?: string; + businessAccountId?: string; } type AdditionalCharge = { @@ -160,6 +161,8 @@ interface RidePageContextInterface { setLastAcknowledgedRideCompletionTimestampToNow: () => void loadFutureBookingDays: () => void; futureBookingDays: number; + businessAccountId: string | null, + updateBusinessAccountId: (newBusinessAccountId: string | null) => void; } export const RidePageContext = createContext({ @@ -219,6 +222,8 @@ export const RidePageContext = createContext({ setLastAcknowledgedRideCompletionTimestampToNow: () => undefined, loadFutureBookingDays: () => undefined, futureBookingDays: 0, + businessAccountId: null, + updateBusinessAccountId: (newBusinessAccountId: string | null) => undefined, }); const HISTORY_RECORDS_NUM = 10; @@ -258,7 +263,7 @@ const RidePageContextProvider = ({ children }: { const [numberOfPassengers, setNumberOfPassengers] = useState(null); const [addressSearchLabel, setAddressSearchLabel] = useState(null); const [futureBookingDays, setFutureBookingDays] = useState(0); - + const [businessAccountId, setBusinessAccountId] = useState(null); const intervalRef = useRef(); @@ -392,9 +397,8 @@ const RidePageContextProvider = ({ children }: { const unixScheduledTo = moment.unix(Number(ride.scheduledTo) / 1000); scheduledTime = await getLocationTimezoneTime(formattedStopPoints[0].lat, formattedStopPoints[0].lng, unixScheduledTo); } - const { estimations, services } = await rideApi - .createServiceEstimations(formattedStopPoints, scheduledTime); + .createServiceEstimations(formattedStopPoints, scheduledTime, businessAccountId); const tags = getEstimationTags(estimations); const formattedEstimations = formatEstimations(services, estimations, tags); @@ -554,6 +558,12 @@ const RidePageContextProvider = ({ children }: { } }, [user?.id]); + useEffect(() => { + if (currentBsPage === BS_PAGES.SERVICE_ESTIMATIONS) { + getServiceEstimations(); + } + }, [businessAccountId]); + useEffect(() => { if (user?.id && isAppActive && !ride.id) { loadLastCompletedRide(); @@ -1081,7 +1091,6 @@ const RidePageContextProvider = ({ children }: { const unixScheduledTo = moment.unix(Number(ride.scheduledTo) / 1000); scheduledToMoment = await getLocationTimezoneTime(pickupLocation.lat, pickupLocation.lng, unixScheduledTo); } - const rideToCreate = { serviceId: chosenService?.id, estimationId: chosenService?.estimationId, @@ -1096,6 +1105,7 @@ const RidePageContextProvider = ({ children }: { type: sp.type, ...(i === 0 && { notes: ride.notes }), })), + businessAccountId, }; @@ -1290,6 +1300,12 @@ const RidePageContextProvider = ({ children }: { streetAddress: null, }, index); }; + const updateBusinessAccountId = (newBusinessAccountId: string | null) => { + if (newBusinessAccountId !== businessAccountId) { + console.log('UPDATING...BS!', newBusinessAccountId); + setBusinessAccountId(newBusinessAccountId); + } + }; return ( {children} diff --git a/examples/client/Locomotion/src/context/payments/index.js b/examples/client/Locomotion/src/context/payments/index.js index 8d158be88..7bbbe1cd9 100644 --- a/examples/client/Locomotion/src/context/payments/index.js +++ b/examples/client/Locomotion/src/context/payments/index.js @@ -17,6 +17,7 @@ const usePayments = () => { const [paymentAccount, setPaymentAccount] = useState(null); const [hasOutstandingPayment, setHasOutstandingPayment] = useState(false); const [offlinePaymentText, setOfflinePaymentText] = useState(null); + const [businessPaymentMethods, setBusinessPaymentMethods] = useState([]); const loadOfflinePaymentText = async () => { const companyName = await useSettings.getSettingByKey(SETTINGS_KEYS.OFFLINE_PAYMENT_TEXT); @@ -41,16 +42,11 @@ const usePayments = () => { const customerData = await getCustomer(); setCustomer(customerData); setPaymentMethods(customerData.paymentMethods); + setBusinessPaymentMethods(customerData.businessAccounts); return customerData; }; - const getOrFetchCustomer = async () => { - if (customer) { - return customer; - } - - return loadCustomer(); - }; + const getOrFetchCustomer = async () => loadCustomer(); const setup = async () => { try { @@ -193,6 +189,7 @@ const usePayments = () => { loadCustomer, setup, paymentMethods, + businessPaymentMethods, detachPaymentMethod, getOrFetchCustomer, clientHasValidPaymentMethods, diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx index 208f2af3f..fb1efcc33 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx @@ -59,6 +59,7 @@ const RideButtons = ({ defaultService, loadFutureBookingDays, futureBookingDays, + businessAccountId, } = useContext(RidePageContext); @@ -222,7 +223,11 @@ const RideButtons = ({ [PAYMENT_METHODS.OFFLINE]: offlinePaymentMethod, }; const renderPaymentButton = () => { - const { offlinePaymentText, loadOfflinePaymentText } = PaymentsContext.useContainer(); + const { + offlinePaymentText, + businessPaymentMethods, + loadOfflinePaymentText, + } = PaymentsContext.useContainer(); useEffect(() => { loadOfflinePaymentText(); }, []); @@ -232,6 +237,11 @@ const RideButtons = ({ || paymentMethods.find(pm => pm.id === ridePaymentMethodId); const getSelectedPaymentMethodTitle = () : string => { + if (businessAccountId) { + const businessAccount : any = businessPaymentMethods + .find((ba :any) => ba.id === businessAccountId); + return businessAccount?.name; + } if (isCashPaymentMethod(selectedPaymentMethod)) { return i18n.t('payments.cash'); } diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx index 6bbe38ce0..9d23a44d1 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx @@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState, } from 'react'; import { Portal } from '@gorhom/portal'; +import offlinePaymentMethod from '../../../Payments/offlinePaymentMethod'; import { MAIN_ROUTES } from '../../../routes'; import i18n from '../../../../I18n'; import { RIDE_POPUPS } from '../../../../context/newRideContext/utils'; @@ -30,6 +31,7 @@ const RideOptions = () => { stopRequestInterval, serviceEstimations, chosenService, + updateBusinessAccountId, } = useContext(RidePageContext); const { @@ -125,9 +127,18 @@ const RideOptions = () => { isVisible={popupToShow === 'payment'} onCancel={() => clearPopup()} onSubmit={(payment: any) => { - updateRidePayload({ - paymentMethodId: payment, - }); + if (payment.isBusiness) { + updateRidePayload({ + paymentMethodId: offlinePaymentMethod.id, + }); + console.log('IDD', payment.id); + updateBusinessAccountId(payment.id); + } else { + updateBusinessAccountId(null); + updateRidePayload({ + paymentMethodId: payment, + }); + } }} /> diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index d3b35fcbe..35d5c4e0d 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -30,7 +30,7 @@ import { MewRidePageContext } from '../../context'; interface PaymentMethodPopupProps { isVisible: boolean; onCancel: () => void; - onSubmit: (payment: string | undefined) => void; + onSubmit: (payment: any) => void; showCash: boolean; rideFlow: boolean; selected: any; @@ -48,11 +48,17 @@ const PaymentMethodPopup = ({ onAddNewMethod, showOffline, }: PaymentMethodPopupProps) => { - const usePayments: any = PaymentsContext.useContainer(); + const usePayments = PaymentsContext.useContainer(); const { chosenService } = useContext(MewRidePageContext); const [selectedPaymentId, setSelectedPaymentId] = useState(selected); const [activePaymentTab, setActivePaymentTab] = useState(INITIAL_ACTIVE_PAYMENT_TAB); const isBusinessMode = activePaymentTab === PAYMENT_MODES.BUSINESS; + const personalPaymentMethods = [ + ...usePayments.paymentMethods, + ...(showCash ? [cashPaymentMethod] : []), + ...(showOffline ? [offlinePaymentMethod] : []), + ]; + const getDisabledReason = (paymentMethod: any) => { if ( chosenService @@ -82,7 +88,14 @@ const PaymentMethodPopup = ({ }, [usePayments.paymentMethods, selected, chosenService]); const onSave = (id?: string) => { - onSubmit(id || selectedPaymentId); + if (isBusinessMode) { + onSubmit({ + id: selectedPaymentId, + isBusiness: true, + }); + } else { + onSubmit(id || selectedPaymentId); + } onCancel(); }; @@ -113,30 +126,43 @@ const PaymentMethodPopup = ({ }} /> - { - ( - [ - ...usePayments.paymentMethods, - ...(showCash ? [cashPaymentMethod] : []), - ...(showOffline ? [offlinePaymentMethod] : []), - ].map((paymentMethod: any) => { - const reason = getDisabledReason(paymentMethod); - return ( - { - setSelectedPaymentId(paymentMethod.id); - }} - /> - ); - }) - ) - } + {isBusinessMode ? ( + usePayments.businessPaymentMethods.map((paymentMethod: any) => { + const reason = getDisabledReason(paymentMethod); + return ( + { + setSelectedPaymentId(paymentMethod.id); + }} + /> + ); + }) + ) : ( + personalPaymentMethods.map((paymentMethod: any) => { + const reason = getDisabledReason(paymentMethod); + return ( + { + setSelectedPaymentId(paymentMethod.id); + }} + /> + ); + }) + )} { !isBusinessMode && ( Date: Mon, 1 Jan 2024 18:12:39 +0200 Subject: [PATCH 04/42] fix --- .../client/Locomotion/src/context/newRideContext/index.tsx | 2 +- examples/client/Locomotion/src/context/payments/index.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx index 0182eae2e..1813ca680 100644 --- a/examples/client/Locomotion/src/context/newRideContext/index.tsx +++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx @@ -291,6 +291,7 @@ const RidePageContextProvider = ({ children }: { } setRide({}); clearLastRide(); + setBusinessAccountId(null); }; const onRideCompleted = (rideId: string, priceCalculationId: string) => { @@ -1302,7 +1303,6 @@ const RidePageContextProvider = ({ children }: { }; const updateBusinessAccountId = (newBusinessAccountId: string | null) => { if (newBusinessAccountId !== businessAccountId) { - console.log('UPDATING...BS!', newBusinessAccountId); setBusinessAccountId(newBusinessAccountId); } }; diff --git a/examples/client/Locomotion/src/context/payments/index.js b/examples/client/Locomotion/src/context/payments/index.js index 7bbbe1cd9..d7c2b095f 100644 --- a/examples/client/Locomotion/src/context/payments/index.js +++ b/examples/client/Locomotion/src/context/payments/index.js @@ -46,7 +46,12 @@ const usePayments = () => { return customerData; }; - const getOrFetchCustomer = async () => loadCustomer(); + const getOrFetchCustomer = async () => { + if (customer) { + return customer; + } + return loadCustomer(); + }; const setup = async () => { try { From 81e5c2d6eb045408c14456064f57101531f28870 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Tue, 2 Jan 2024 14:07:48 +0200 Subject: [PATCH 05/42] add skelton. fix service estimation interval. hide business payment methods in default payment select --- .../client/Locomotion/src/context/newRideContext/index.tsx | 3 ++- .../src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx | 1 + .../Locomotion/src/popups/ChoosePaymentMethod/index.tsx | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx index 1813ca680..027eec746 100644 --- a/examples/client/Locomotion/src/context/newRideContext/index.tsx +++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx @@ -561,7 +561,8 @@ const RidePageContextProvider = ({ children }: { useEffect(() => { if (currentBsPage === BS_PAGES.SERVICE_ESTIMATIONS) { - getServiceEstimations(); + setServiceEstimations(null); + tryServiceEstimations(); } }, [businessAccountId]); diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx index 9d23a44d1..2a4b9ab52 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx @@ -112,6 +112,7 @@ const RideOptions = () => { /> { clearPopup(); setTimeout(() => { diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index 35d5c4e0d..c5cea4db7 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -36,6 +36,7 @@ interface PaymentMethodPopupProps { selected: any; onAddNewMethod: () => void; showOffline: boolean; + showBusinessPaymentMethods: boolean; } const PaymentMethodPopup = ({ @@ -47,6 +48,7 @@ const PaymentMethodPopup = ({ selected, onAddNewMethod, showOffline, + showBusinessPaymentMethods, }: PaymentMethodPopupProps) => { const usePayments = PaymentsContext.useContainer(); const { chosenService } = useContext(MewRidePageContext); @@ -118,6 +120,7 @@ const PaymentMethodPopup = ({ + { showBusinessPaymentMethods && ( + ) } {isBusinessMode ? ( usePayments.businessPaymentMethods.map((paymentMethod: any) => { From d447b809fe08020ed1d522f60f87d351b1809835 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Tue, 2 Jan 2024 16:11:43 +0200 Subject: [PATCH 06/42] show business tab only if at least 1 buiz payment method --- .../src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx | 2 +- .../client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx index 2a4b9ab52..89e5ef1bf 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx @@ -112,7 +112,7 @@ const RideOptions = () => { /> 0} onAddNewMethod={() => { clearPopup(); setTimeout(() => { diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index c5cea4db7..e4a58e8cb 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -72,7 +72,7 @@ const PaymentMethodPopup = ({ }; useEffect(() => { - usePayments.getOrFetchCustomer(); + usePayments.loadCustomer(); }, []); useEffect(() => { From 05e9076cd3814665f38d13cb8e3f40846c0f307c Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Tue, 2 Jan 2024 18:02:19 +0200 Subject: [PATCH 07/42] display BA name in ride history and active --- .../src/Components/BsPages/ActiveRide/index.tsx | 2 +- .../Locomotion/src/Components/CardRow/index.tsx | 16 +++++++++++++++- .../src/Components/RidePaymentDetails/index.tsx | 12 ++++++------ .../src/context/newRideContext/index.tsx | 2 +- .../src/pages/RideHistory/RideCard/index.js | 3 +-- .../src/pages/RidePriceBreakdown/index.tsx | 13 ++++++++----- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/examples/client/Locomotion/src/Components/BsPages/ActiveRide/index.tsx b/examples/client/Locomotion/src/Components/BsPages/ActiveRide/index.tsx index c1b0f4bf9..d835a94b9 100644 --- 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} /> { const { primaryColor } = useContext(ThemeContext); - const { offlinePaymentText, loadOfflinePaymentText } = paymentContext.useContainer(); + const { + offlinePaymentText, + businessPaymentMethods, + loadOfflinePaymentText, + } = paymentContext.useContainer(); + const { businessAccountId } = paymentMethod; const [isCardExpired, setIsCardExpired] = useState(false); const getPaymentMethodTitle = () => { + if (businessAccountId) { + const relevantBusinessAccount : any = businessPaymentMethods + .find((ba: any) => ba.id === businessAccountId); + if (relevantBusinessAccount) { + return relevantBusinessAccount.name; + } + } if (isCashPaymentMethod(paymentMethod)) { return i18n.t('payments.cash'); } @@ -127,6 +140,7 @@ const CardRow = (paymentMethod: any) => { if (isCard) { return ; } + if (!paymentMethodToIconMap[id]) { return null; } return ( { - const calculation = await getRidePriceCalculation(rideId); + const calculation = await getRidePriceCalculation(ride?.id); setPriceCalculation(calculation); }; @@ -53,7 +53,7 @@ const RidePaymentDetails = ({ - + @@ -74,7 +74,7 @@ const RidePaymentDetails = ({ testID="viewRidePaymentDetails" noBackground onPress={() => navigationService.navigate(MAIN_ROUTES.RIDE_PRICE_BREAKDOWN, - { rideId, rideHistory })} + { rideId: ride.id, rideHistory })} > {state !== RIDE_STATES.CANCELED || (state === RIDE_STATES.CANCELED diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx index 027eec746..e3c2645e6 100644 --- a/examples/client/Locomotion/src/context/newRideContext/index.tsx +++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx @@ -1107,7 +1107,7 @@ const RidePageContextProvider = ({ children }: { type: sp.type, ...(i === 0 && { notes: ride.notes }), })), - businessAccountId, + ...(businessAccountId ? { businessAccountId } : {}), }; diff --git a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js index ffdfcaf21..e5f69c543 100644 --- a/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js +++ b/examples/client/Locomotion/src/pages/RideHistory/RideCard/index.js @@ -159,7 +159,6 @@ const RideView = ({ ride }) => { const [isPaymentSuccessPopupVisible, setIsPaymentSuccessPopupVisible] = useState(false); const [outstandingBalance, setOutstandingBalance] = useState(null); const isPaymentRejected = !isPaymentSettled && isRidePaymentRejected; - const usePayments = PaymentContext.useContainer(); const map = createRef(); @@ -260,7 +259,7 @@ const RideView = ({ ride }) => { { const updateRideFromApi = async () => { setLoading(true); - if (params.rideId || ride.id) { - // ts does not recognize the null check - // @ts-ignore - const result = await getRideFromApi(params.rideId || ride.id); + const rideId = params.rideId || ride.id; + if (rideId) { + const result = await getRideFromApi(rideId); setLocalRide(result); setPaymentMethod(result.payment.paymentMethod); @@ -93,7 +92,11 @@ const RidePriceBreakDown = () => { - + { (priceCalculation && isPriceEstimated(priceCalculation.calculationBasis) From c3089f5d7c7c94ccebf7318489965f76a5d4c339 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Tue, 2 Jan 2024 18:20:40 +0200 Subject: [PATCH 08/42] add name of BA to future ride --- .../src/Components/CardRow/index.tsx | 11 ++++------ .../src/Components/RideCard/index.tsx | 20 ++++++++++++++++--- .../Locomotion/src/context/payments/index.js | 9 +++++++++ .../RideOptions/RideButtons/index.tsx | 11 +++++----- 4 files changed, 35 insertions(+), 16 deletions(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index a84086337..9f5757234 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -96,19 +96,16 @@ const CardRow = (paymentMethod: any) => { const { primaryColor } = useContext(ThemeContext); const { offlinePaymentText, - businessPaymentMethods, loadOfflinePaymentText, + getBusinessAccountNameById, } = paymentContext.useContainer(); const { businessAccountId } = paymentMethod; const [isCardExpired, setIsCardExpired] = useState(false); const getPaymentMethodTitle = () => { - if (businessAccountId) { - const relevantBusinessAccount : any = businessPaymentMethods - .find((ba: any) => ba.id === businessAccountId); - if (relevantBusinessAccount) { - return relevantBusinessAccount.name; - } + const businessAccountName = getBusinessAccountNameById(businessAccountId); + if (businessAccountName) { + return businessAccountName; } if (isCashPaymentMethod(paymentMethod)) { return i18n.t('payments.cash'); diff --git a/examples/client/Locomotion/src/Components/RideCard/index.tsx b/examples/client/Locomotion/src/Components/RideCard/index.tsx index dda8dc2b0..369d2a1df 100644 --- a/examples/client/Locomotion/src/Components/RideCard/index.tsx +++ b/examples/client/Locomotion/src/Components/RideCard/index.tsx @@ -23,17 +23,26 @@ interface CardComponentProps { 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) { @@ -168,7 +177,12 @@ const RideCard = ({ - {paymentMethod && } + {paymentMethod && ( + + )} {i18n.t('home.cancelRideButton')} diff --git a/examples/client/Locomotion/src/context/payments/index.js b/examples/client/Locomotion/src/context/payments/index.js index d7c2b095f..0d58ac723 100644 --- a/examples/client/Locomotion/src/context/payments/index.js +++ b/examples/client/Locomotion/src/context/payments/index.js @@ -185,6 +185,14 @@ const usePayments = () => { } return returnObject; }; + const getBusinessAccountNameById = (id) => { + if (!id) { return null; } + const relevantBusinessAccount = businessPaymentMethods.find(ba => ba.id === id); + if (relevantBusinessAccount) { + return relevantBusinessAccount.name; + } + return null; + }; return { paymentAccount, @@ -209,6 +217,7 @@ const usePayments = () => { loadOutstandingBalance, offlinePaymentText: offlinePaymentText || i18n.t('payments.offline'), loadOfflinePaymentText, + getBusinessAccountNameById, }; }; diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx index fb1efcc33..c1958c72c 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx @@ -225,7 +225,7 @@ const RideButtons = ({ const renderPaymentButton = () => { const { offlinePaymentText, - businessPaymentMethods, + getBusinessAccountNameById, loadOfflinePaymentText, } = PaymentsContext.useContainer(); useEffect(() => { @@ -236,11 +236,10 @@ const RideButtons = ({ PaymentMethodInterface | undefined = paymentMethodIdToDataMap[ridePaymentMethodId] || paymentMethods.find(pm => pm.id === ridePaymentMethodId); - const getSelectedPaymentMethodTitle = () : string => { - if (businessAccountId) { - const businessAccount : any = businessPaymentMethods - .find((ba :any) => ba.id === businessAccountId); - return businessAccount?.name; + const getSelectedPaymentMethodTitle = () : string | null => { + const businessAccountName = getBusinessAccountNameById(businessAccountId); + if (businessAccountName) { + return businessAccountName; } if (isCashPaymentMethod(selectedPaymentMethod)) { return i18n.t('payments.cash'); From c4ba27022ef4211c858a8c7adbc44972b7e60bfa Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Wed, 3 Jan 2024 18:03:34 +0200 Subject: [PATCH 09/42] checkmark to the right --- .../Locomotion/src/Components/CardRow/index.tsx | 13 ++++++++++++- .../src/popups/ChoosePaymentMethod/index.tsx | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index 9f5757234..8997c03bf 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -176,7 +176,7 @@ const CardRow = (paymentMethod: any) => { : ( <> {!paymentMethod.noSvg && getPaymentMethodIcon()} - {paymentMethod.mark ? ( + {(paymentMethod.mark && !paymentMethod.alignMarkToRight) ? ( { {paymentMethod.disabledReason} )} + {(paymentMethod.mark && paymentMethod.alignMarkToRight) ? ( + + ) : null } diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index e4a58e8cb..585cc37f2 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -137,6 +137,7 @@ const PaymentMethodPopup = ({ Date: Wed, 3 Jan 2024 18:24:30 +0200 Subject: [PATCH 10/42] style fix --- .../client/Locomotion/src/Components/CardRow/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index 8997c03bf..3c344e12b 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -50,7 +50,7 @@ const margin = `margin-${Start()}`; const TextContainer = styled(View)` justify-content: center; ${margin}: 16px; - width: 80%; + width: ${({ noSvg } : { noSvg: boolean}) => (noSvg ? '95%' : '80%')}; `; const Type = styled(Text)` @@ -132,6 +132,9 @@ 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) { @@ -175,7 +178,7 @@ const CardRow = (paymentMethod: any) => { ) : ( <> - {!paymentMethod.noSvg && getPaymentMethodIcon()} + {getPaymentMethodIcon()} {(paymentMethod.mark && !paymentMethod.alignMarkToRight) ? ( { } - + {paymentMethod.addNew ? ( <> From cf14a37730febe057cd502f41485ff9c98f8707d Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:24:31 +0200 Subject: [PATCH 11/42] add mixpanels --- .../client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index 585cc37f2..a6aead16c 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -4,6 +4,7 @@ import { View } from 'react-native'; import PropTypes from 'prop-types'; import Modal from 'react-native-modal'; import { useNavigation } from '@react-navigation/native'; +import Mixpanel from '../../services/Mixpanel'; import { INITIAL_ACTIVE_PAYMENT_TAB, PAYMENT_MODES, PAYMENT_TABS } from '../../pages/Payments/consts'; import TabSwitch from '../../Components/TabSwitch'; import { getPaymentMethod } from '../../pages/Payments/cardDetailUtils'; @@ -126,6 +127,7 @@ const PaymentMethodPopup = ({ tabs={PAYMENT_TABS} onUnselectedClick={(tab) => { setActivePaymentTab(tab.id); + Mixpanel.setEvent('change payment mode personal / business', { mode: tab.id }); }} /> ) } @@ -145,6 +147,7 @@ const PaymentMethodPopup = ({ selected={selectedPaymentId === paymentMethod.id} mark={selectedPaymentId === paymentMethod.id} onPress={() => { + Mixpanel.setEvent('select payment method', { method: paymentMethod.id }); setSelectedPaymentId(paymentMethod.id); }} /> From c2d94b91185901548c1f05f24e69702061265ea9 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 12:22:51 +0200 Subject: [PATCH 12/42] update BA svg, add subtitle to BA payment card --- .../Components/BusinessAccountText/index.tsx | 36 +++++++++++++++++++ .../src/Components/CardRow/index.tsx | 17 +++++++-- .../client/Locomotion/src/assets/offline.svg | 7 ++-- .../RideButtons/PaymentButton/index.tsx | 8 ++++- .../RideOptions/RideButtons/index.tsx | 1 + 5 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx new file mode 100644 index 000000000..33049655a --- /dev/null +++ b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Text, View } from 'react-native'; +import styled from 'styled-components'; + +const TitleWithSubTitle = styled(View)` + display: flex; + flex-direction: column; + flex: 1 0 0; +`; +const BaseText = styled(Text)` +color: #212229; +font-family: Montserrat; +font-size: 14px; +font-style: normal; +line-height: 20px; +`; +const SubTitle = styled(BaseText)` +font-weight: 500; +`; +const BoldTitle = styled(BaseText)` +font-weight: 700; +`; +interface BusinessAccountTextProps { + title: string; + subTitle: string; +} +const BusinessAccountText = ({ + title, subTitle, +} : BusinessAccountTextProps) => ( + + {title} + {subTitle} + +); + +export default BusinessAccountText; diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index 3c344e12b..e41223708 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -5,6 +5,7 @@ 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'; @@ -204,9 +205,19 @@ const CardRow = (paymentMethod: any) => { ) : ( <> - - {getPaymentMethodTitle()} - + { + (businessAccountId && offlinePaymentText) + ? ( + + ) + : ( + + {getPaymentMethodTitle()} + + )} {paymentMethod.lastFour ? {getLastFourForamttedShort(paymentMethod.lastFour)} : null} diff --git a/examples/client/Locomotion/src/assets/offline.svg b/examples/client/Locomotion/src/assets/offline.svg index 6d5ea4f51..66a39d4e8 100644 --- a/examples/client/Locomotion/src/assets/offline.svg +++ b/examples/client/Locomotion/src/assets/offline.svg @@ -1,4 +1,3 @@ - - - - + + + \ No newline at end of file diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx index 1d277df1f..d491d5d89 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/PaymentButton/index.tsx @@ -6,6 +6,7 @@ import { PaymentIcon } from 'react-native-payment-icons'; import styled, { ThemeContext } from 'styled-components'; import { useFocusEffect } from '@react-navigation/native'; import SkeletonContent from 'react-native-skeleton-content-nonexpo'; +import BusinessAccountText from '../../../../../../Components/BusinessAccountText'; import { isCardPaymentMethod, isCashPaymentMethod, isOfflinePaymentMethod } from '../../../../../../lib/ride/utils'; import { getCouponText } from '../../../../../../context/newRideContext/utils'; import { MAIN_ROUTES } from '../../../../../routes'; @@ -76,6 +77,7 @@ interface PaymentButtonProps { brand?: Brand; id?: string; invalid?: boolean; + subTitle?: string; } @@ -85,6 +87,7 @@ const PaymentButton = ({ brand, id, invalid, + subTitle, }: PaymentButtonProps) => { const { primaryColor } = useContext(ThemeContext); const { getCoupon, coupon, setCoupon } = useContext(UserContext); @@ -165,7 +168,9 @@ const PaymentButton = ({ width={40} /> )} - {title} + { subTitle + ? + : {title} } {loadPromoButton()} @@ -180,4 +185,5 @@ PaymentButton.defaultProps = { brand: null, id: null, invalid: false, + subTitle: null, }; diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx index c1958c72c..35236c392 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/RideButtons/index.tsx @@ -264,6 +264,7 @@ const RideButtons = ({ brand={selectedPaymentMethod?.brand} icon={paymentMethodToIconMap[selectedPaymentMethod?.id]} title={getSelectedPaymentMethodTitle()} + subTitle={businessAccountId && offlinePaymentText} id={selectedPaymentMethod?.id} invalid={paymentMethodNotAllowedOnService} /> From ac5be578e3dd1064ac5a2eb5ff5948460df4949e Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 13:23:59 +0200 Subject: [PATCH 13/42] add subtitle --- .../Locomotion/src/Components/CardRow/index.tsx | 3 +-- .../Locomotion/src/Components/RideCard/index.tsx | 4 +++- .../src/Components/TextRowWithIcon/index.tsx | 11 +++++++++-- .../ActiveRide/RideDrawer/FutureRides/StopPointRow.js | 2 -- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index e41223708..d5575782c 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -114,8 +114,7 @@ const CardRow = (paymentMethod: any) => { if (isOfflinePaymentMethod(paymentMethod)) { return offlinePaymentText; } - return paymentMethod.doNotCapitalizeName ? paymentMethod.name - : capitalizeFirstLetter(paymentMethod.name); + return paymentMethod.name; }; useEffect(() => { diff --git a/examples/client/Locomotion/src/Components/RideCard/index.tsx b/examples/client/Locomotion/src/Components/RideCard/index.tsx index 369d2a1df..30e0a9d2f 100644 --- a/examples/client/Locomotion/src/Components/RideCard/index.tsx +++ b/examples/client/Locomotion/src/Components/RideCard/index.tsx @@ -13,6 +13,7 @@ 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 SettingsContext from '../../context/settings'; @@ -56,12 +57,13 @@ const CardComponent = ({ paymentMethod, businessAccountId }: CardComponentProps) return cashIcon; } if (isOffline) { - return null; + return offlineIcon; } }; return ( !isCash && !isOffline && } icon={getIcon()} style={{ marginTop: 10, marginBottom: 10 }} diff --git a/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx b/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx index a970c67d0..4d801026a 100644 --- a/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx +++ b/examples/client/Locomotion/src/Components/TextRowWithIcon/index.tsx @@ -1,6 +1,7 @@ import React, { useContext } from 'react'; import { Text, View } from 'react-native'; import styled, { ThemeContext } from 'styled-components'; +import BusinessAccountText from '../BusinessAccountText'; import { FONT_SIZES } from '../../context/theme'; import SvgIcon from '../SvgIcon'; @@ -31,7 +32,7 @@ interface TextRowWithIconProps { } const TextRowWithIcon = ({ - text, icon, style, Image, iconWidth, iconHeight, + subTitle, text, icon, style, Image, iconWidth, iconHeight, }: TextRowWithIconProps) => { const theme = useContext(ThemeContext); const getImage = () => { @@ -56,7 +57,13 @@ const TextRowWithIcon = ({ ...((Image || icon) && { marginLeft: 10 }), }} > - {text} + {subTitle ? ( + + ) + : text} ); diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js index 0e0ca260b..150885243 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/FutureRides/StopPointRow.js @@ -1,7 +1,5 @@ import React from 'react'; -import { View } from 'react-native'; import styled from 'styled-components'; -import moment from 'moment'; import i18n from '../../../../I18n'; import Button from '../../../../Components/Button'; From 59b916940d7095b833c9412577c5cb122f6a55ff Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 13:59:34 +0200 Subject: [PATCH 14/42] clean business account state --- examples/client/Locomotion/src/Components/CardRow/index.tsx | 2 +- examples/client/Locomotion/src/context/newRideContext/index.tsx | 1 + .../src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx | 1 - examples/client/Locomotion/src/pages/ActiveRide/index.js | 2 ++ 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/client/Locomotion/src/Components/CardRow/index.tsx b/examples/client/Locomotion/src/Components/CardRow/index.tsx index d5575782c..3c3c4a567 100644 --- a/examples/client/Locomotion/src/Components/CardRow/index.tsx +++ b/examples/client/Locomotion/src/Components/CardRow/index.tsx @@ -114,7 +114,7 @@ const CardRow = (paymentMethod: any) => { if (isOfflinePaymentMethod(paymentMethod)) { return offlinePaymentText; } - return paymentMethod.name; + return capitalizeFirstLetter(paymentMethod.name); }; useEffect(() => { diff --git a/examples/client/Locomotion/src/context/newRideContext/index.tsx b/examples/client/Locomotion/src/context/newRideContext/index.tsx index e3c2645e6..500832875 100644 --- a/examples/client/Locomotion/src/context/newRideContext/index.tsx +++ b/examples/client/Locomotion/src/context/newRideContext/index.tsx @@ -283,6 +283,7 @@ const RidePageContextProvider = ({ children }: { setRequestStopPoints(INITIAL_STOP_POINTS); setChosenService(null); setDefaultService(null); + setBusinessAccountId(null); }; const cleanRideState = (initSpsBool = true) => { diff --git a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx index 89e5ef1bf..75f30fd97 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx +++ b/examples/client/Locomotion/src/pages/ActiveRide/RideDrawer/RideOptions/index.tsx @@ -132,7 +132,6 @@ const RideOptions = () => { updateRidePayload({ paymentMethodId: offlinePaymentMethod.id, }); - console.log('IDD', payment.id); updateBusinessAccountId(payment.id); } else { updateBusinessAccountId(null); diff --git a/examples/client/Locomotion/src/pages/ActiveRide/index.js b/examples/client/Locomotion/src/pages/ActiveRide/index.js index 558577eba..27c477b56 100644 --- a/examples/client/Locomotion/src/pages/ActiveRide/index.js +++ b/examples/client/Locomotion/src/pages/ActiveRide/index.js @@ -118,6 +118,7 @@ const RidePage = ({ mapSettings, navigation }) => { lastSelectedLocation, saveSelectedLocation, reverseLocationGeocode, + updateBusinessAccountId, } = useContext(RidePageContext); const { setIsExpanded, snapPoints, isExpanded, topBarProps, @@ -149,6 +150,7 @@ const RidePage = ({ mapSettings, navigation }) => { setServiceEstimations(null); setChosenService(null); setRide({}); + updateBusinessAccountId(null); changeBsPage(BS_PAGES.ADDRESS_SELECTOR); setSelectedInputIndex(selectedIndex); if (isStationsEnabled) { From 967301a05e8318886c51d678d047bd94aba3e180 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 14:01:51 +0200 Subject: [PATCH 15/42] Update styled.js --- .../Locomotion/src/popups/ChoosePaymentMethod/styled.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js index b33ce8cb0..9e7131448 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/styled.js @@ -44,13 +44,12 @@ export const SummaryContainer = styled.View` export const Title = styled.Text` flex: 10; - color: var(--gray-05, #212229); - /* Body strong - Mobile */ + color: #212229; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 700; - line-height: 24px; /* 150% */ + line-height: 24px; `; export const StyledTextArea = styled(TextArea)` From d5b9e4da12a52698c9694133c1f20c153ba9b5c2 Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 14:03:38 +0200 Subject: [PATCH 16/42] Update index.tsx --- examples/client/Locomotion/src/Components/TabSwitch/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx index c6c30af83..b40ed49e2 100644 --- a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx +++ b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx @@ -57,12 +57,11 @@ line-height: 24px; const TextContainer = styled.Text` color: #666975; color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; -/* Body - Mobile */ font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 500; -line-height: 24px; /* 150% */ +line-height: 24px; padding-left: 4px; `; From 056ef4696d98c5fb11cb5c75712d13a2e0157b8f Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Thu, 4 Jan 2024 14:52:37 +0200 Subject: [PATCH 17/42] extract to styled files @ormiz --- .../Components/BusinessAccountText/index.tsx | 21 +------ .../Components/BusinessAccountText/styled.ts | 21 +++++++ .../src/Components/TabSwitch/index.tsx | 57 +------------------ .../src/Components/TabSwitch/styled.ts | 56 ++++++++++++++++++ 4 files changed, 81 insertions(+), 74 deletions(-) create mode 100644 examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts create mode 100644 examples/client/Locomotion/src/Components/TabSwitch/styled.ts diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx index 33049655a..01d3cd986 100644 --- a/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx +++ b/examples/client/Locomotion/src/Components/BusinessAccountText/index.tsx @@ -1,25 +1,6 @@ import React from 'react'; -import { Text, View } from 'react-native'; -import styled from 'styled-components'; +import { BoldTitle, SubTitle, TitleWithSubTitle } from './styled'; -const TitleWithSubTitle = styled(View)` - display: flex; - flex-direction: column; - flex: 1 0 0; -`; -const BaseText = styled(Text)` -color: #212229; -font-family: Montserrat; -font-size: 14px; -font-style: normal; -line-height: 20px; -`; -const SubTitle = styled(BaseText)` -font-weight: 500; -`; -const BoldTitle = styled(BaseText)` -font-weight: 700; -`; interface BusinessAccountTextProps { title: string; subTitle: string; diff --git a/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts new file mode 100644 index 000000000..f83310911 --- /dev/null +++ b/examples/client/Locomotion/src/Components/BusinessAccountText/styled.ts @@ -0,0 +1,21 @@ +import { Text, View } from 'react-native'; +import styled from 'styled-components'; + +export const TitleWithSubTitle = styled(View)` + display: flex; + flex-direction: column; + flex: 1 0 0; +`; +export const BaseText = styled(Text)` +color: #212229; +font-family: Montserrat; +font-size: 14px; +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/TabSwitch/index.tsx b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx index b40ed49e2..c95db56e7 100644 --- a/examples/client/Locomotion/src/Components/TabSwitch/index.tsx +++ b/examples/client/Locomotion/src/Components/TabSwitch/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import styled from 'styled-components/native'; import SvgIcon from '../SvgIcon'; import i18n from '../../I18n'; +import { + Container, SELECTED_COLOR, Tab, TabInner, TextContainer, UNSELECTED_COLOR, +} from './styled'; -const SELECTED_COLOR = '#212229'; -const UNSELECTED_COLOR = '#666975'; interface ITabSwitchProps { onUnselectedClick: (tab) => void activeTabId: string; @@ -14,57 +14,6 @@ interface ITabSwitchProps { Svg: any; }[]; } -interface TabStyled { - isSelected: boolean; -} -const Container = styled.View` - flex-direction: row; - justify-content: center; - align-items: center; - align-self: stretch; - border-color: rgba(125, 139, 172, 0.32) - border-bottom-width: 1px; - border-bottom-color: #7D8BAC52; - margin-bottom: 16px; - padding-left: 8px; - padding-right: 8px; -`; - -const Tab = styled.TouchableOpacity` - height: 40px; - justify-content: center; - align-items: center; - flex: 1 0 0; - text-align: center; - ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`} - margin-left: 8px; - margin-right: 8px; -`; -const TabInner = styled.View` -display: flex; -flex-direction: row; -height: 32px; -padding: 4px; -justify-content: center; -align-items: center; -color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; -font-family: Montserrat; -font-size: 16px; -font-style: normal; -font-weight: 500; -line-height: 24px; -`; -const TextContainer = styled.Text` -color: #666975; -color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; -font-family: Montserrat; -font-size: 16px; -font-style: normal; -font-weight: 500; -line-height: 24px; -padding-left: 4px; -`; - const TabSwitch = ({ onUnselectedClick, tabs, activeTabId }: ITabSwitchProps) => ( diff --git a/examples/client/Locomotion/src/Components/TabSwitch/styled.ts b/examples/client/Locomotion/src/Components/TabSwitch/styled.ts new file mode 100644 index 000000000..76bfa2bc5 --- /dev/null +++ b/examples/client/Locomotion/src/Components/TabSwitch/styled.ts @@ -0,0 +1,56 @@ +import styled from 'styled-components/native'; + +interface TabStyled { + isSelected: boolean; +} + +export const SELECTED_COLOR = '#212229'; +export const UNSELECTED_COLOR = '#666975'; + +export const Container = styled.View` + flex-direction: row; + justify-content: center; + align-items: center; + align-self: stretch; + border-color: rgba(125, 139, 172, 0.32) + border-bottom-width: 1px; + border-bottom-color: #7D8BAC52; + margin-bottom: 16px; + padding-left: 8px; + padding-right: 8px; +`; + +export const Tab = styled.TouchableOpacity` + height: 40px; + justify-content: center; + align-items: center; + flex: 1 0 0; + text-align: center; + ${({ isSelected }: TabStyled) => isSelected && `border-bottom-width: 2px; border-bottom-color: ${SELECTED_COLOR};`} + margin-left: 8px; + margin-right: 8px; +`; +export const TabInner = styled.View` +display: flex; +flex-direction: row; +height: 32px; +padding: 4px; +justify-content: center; +align-items: center; +color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; +font-family: Montserrat; +font-size: 16px; +font-style: normal; +font-weight: 500; +line-height: 24px; +`; +export const TextContainer = styled.Text` +color: #666975; +color: ${({ isSelected }: TabStyled) => (isSelected ? SELECTED_COLOR : UNSELECTED_COLOR)}; +font-family: Montserrat; +font-size: 16px; +font-style: normal; +font-weight: 500; +line-height: 24px; +padding-left: 4px; +`; From 446eede8774d1b61addab964058340635391a8dc Mon Sep 17 00:00:00 2001 From: Omer Gery <68545675+OmerGery@users.noreply.github.com> Date: Tue, 9 Jan 2024 08:31:02 +0200 Subject: [PATCH 18/42] on submit AUT-18223 fix --- .../src/popups/ChoosePaymentMethod/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx index a6aead16c..7debda0b6 100644 --- a/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx +++ b/examples/client/Locomotion/src/popups/ChoosePaymentMethod/index.tsx @@ -90,14 +90,18 @@ const PaymentMethodPopup = ({ updateDefaultPaymentMethod(); }, [usePayments.paymentMethods, selected, chosenService]); - const onSave = (id?: string) => { - if (isBusinessMode) { + const onSave = () => { + const businessPaymentSelected = showBusinessPaymentMethods + && usePayments.businessPaymentMethods.some( + (paymentMethod: any) => paymentMethod.id === selectedPaymentId, + ); + if (businessPaymentSelected) { onSubmit({ id: selectedPaymentId, isBusiness: true, }); } else { - onSubmit(id || selectedPaymentId); + onSubmit(selectedPaymentId); } onCancel(); }; @@ -187,6 +191,7 @@ const PaymentMethodPopup = ({