ordering-ui-react-native 0.16.47 → 0.16.48-release

package/themes/original/src/components/Checkout/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, Vibration } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
@@ -24,6 +24,7 @@ import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
 import { PaymentOptionWallet } from '../PaymentOptionWallet';
+import { PlaceSpot } from '../PlaceSpot'
 
 import {
 	ChContainer,
@@ -86,7 +87,8 @@ const CheckoutUI = (props: any) => {
 		instructionsOptions,
 		handleChangeDeliveryOption,
 		currency,
-		merchantId
+		merchantId,
+		setPlaceSpotNumber
 	} = props
 
 	const theme = useTheme();
@@ -105,8 +107,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: 40
 		},
 		icon: {
 			top: 15,
@@ -118,9 +119,11 @@ const CheckoutUI = (props: any) => {
 			paddingHorizontal: 40,
 			width: '100%'
 		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
+		}
 	})
 
 	const [, { showToast }] = useToast();
@@ -141,18 +144,25 @@ const CheckoutUI = (props: any) => {
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
-  const [requiredFields, setRequiredFields] = useState<any>([])
+	const [requiredFields, setRequiredFields] = useState<any>([])
 
-	const placeSpotTypes = [3, 4]
+	const placeSpotTypes = [3, 4, 5]
+	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
-		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+		if (item?.type === 1)
+			return acc = acc + item?.summary?.tax
+		return acc = acc
+	}, cart?.subtotal)
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
+		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -178,15 +188,15 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment : any) => {
-		if (!userErrors.length && !requiredFields?.length) {
+	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
+		if (!userErrors.length && !requiredFields?.length || forcePlace) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
 		if (requiredFields?.length) {
-      setIsOpen(true)
-      return
-    }
+			setIsOpen(true)
+			return
+		}
 		let stringError = ''
 		Object.values(userErrors).map((item: any, i: number) => {
 			stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -217,7 +227,7 @@ const CheckoutUI = (props: any) => {
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code)) {
+			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
 				if (!user[field?.code]) {
 					_requiredFields.push(field?.code)
 				}
@@ -258,10 +268,6 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [errors])
 
-	// useEffect(() => {
-	//   handlePaymethodChange(null)
-	// }, [cart?.total])
-
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
 			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
@@ -272,6 +278,21 @@ const CheckoutUI = (props: any) => {
 		onFailPaypal()
 	}, [showGateway.closedByUser])
 
+	const HeaderTitle = (props: any) => {
+		const { text } = props
+		return (
+			<OText
+				size={16}
+				lineHeight={24}
+				weight={'500'}
+				mBottom={props.mb ?? 10}
+				color={theme.colors.textNormal}
+			>
+				{text}
+			</OText>
+		)
+	}
+
 	return (
 		<>
 			<Container noPadding>
@@ -282,7 +303,6 @@ const CheckoutUI = (props: any) => {
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0 }}
-						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -290,13 +310,20 @@ const CheckoutUI = (props: any) => {
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
-							{/* <OrderTypeSelector configTypes={configTypes} /> */}
-							<CHMomentWrapper onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(options?.type || 1), 'Delivery')}</OText>
+							<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode={'tail'}
+									color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
+								>
+									{t(getTypesText(options?.type || 1), 'Delivery')}
+								</OText>
 								<OIcon
 									src={theme.images.general.arrow_down}
 									width={10}
 									style={{ marginStart: 8 }}
+									{...(isChewLayout && { color: 'white' })}
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
@@ -327,10 +354,10 @@ const CheckoutUI = (props: any) => {
 								!businessDetails?.error &&
 								(
 									<Placeholder Animation={Fade}>
-										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={10} width={60} />
-										<PlaceholderLine height={10} width={60} />
-										<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
+										<PlaceholderLine height={20} />
+										<PlaceholderLine height={12} />
+										<PlaceholderLine height={12} />
+										<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 									</Placeholder>
 								)}
 							{
@@ -339,9 +366,7 @@ const CheckoutUI = (props: any) => {
 								Object.values(businessDetails?.business).length > 0 &&
 								(
 									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10}>
-											{t('BUSINESS_DETAILS', 'Business Details')}
-										</OText>
+										<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 										<View>
 											<OText size={12} lineHeight={18} weight={'400'}>
 												{businessDetails?.business?.name}
@@ -360,9 +385,7 @@ const CheckoutUI = (props: any) => {
 								)}
 							{businessDetails?.error && businessDetails?.error?.length > 0 && (
 								<View>
-									<OText size={16} lineHeight={24} weight={'500'}>
-										{t('BUSINESS_DETAILS', 'Business Details')}
-									</OText>
+									<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 									<NotFoundSource
 										content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
 									/>
@@ -376,14 +399,15 @@ const CheckoutUI = (props: any) => {
 						<ChUserDetails>
 							{cartState.loading ? (
 								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={20} width={70} />
-									<PlaceholderLine height={10} width={60} />
-									<PlaceholderLine height={10} width={60} />
-									<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
+									<PlaceholderLine height={20} />
+									<PlaceholderLine height={12} />
+									<PlaceholderLine height={12} />
+									<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 								</Placeholder>
 							) : (
 								<UserDetails
 									isUserDetailsEdit={isUserDetailsEdit}
+									HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
 									cartStatus={cart?.status}
 									businessId={cart?.business_id}
 									useValidationFields
@@ -403,13 +427,13 @@ const CheckoutUI = (props: any) => {
 							{cartState.loading || deliveryOptionSelected === undefined ? (
 								<View style={{ height: 110 }}>
 									<Placeholder Animation={Fade}>
-										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={40} width={100} />
+										<PlaceholderLine height={20} />
+										<PlaceholderLine height={40} />
 									</Placeholder>
 								</View>
 							) : (
-								<>
-									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+								<ChSection>
+									<HeaderTitle text={t('DELIVERY_OPTIONS', 'Delivery options')} />
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -455,7 +479,7 @@ const CheckoutUI = (props: any) => {
 										/>
 									</View>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-								</>
+								</ChSection>
 							)}
 
 						</DeliveryOptionsContainer>
@@ -477,29 +501,6 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{/* <ChSection>
-        <ChTotal>
-          {
-            (
-              <>
-                <OIcon
-                  url={businessLogo || businessDetails?.business?.logo}
-                  width={80}
-                  height={80}
-                  borderRadius={80}
-                />
-                <View style={{ marginLeft: 10, width: '85%' }}>
-                  <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
-                    {businessName || businessDetails?.business?.name}
-                  </OText>
-                  <OText size={22}>
-                    {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                  </OText>
-                </View>
-              </>
-            )}
-        </ChTotal>
-      </ChSection> */}
 					<ChSection>
 						<ChAddress>
 							{(businessDetails?.loading || cartState.loading) ? (
@@ -516,6 +517,7 @@ const CheckoutUI = (props: any) => {
 									uuid={cartUuid}
 									apiKey={configs?.google_maps_api_key?.value}
 									mapConfigs={mapConfigs}
+									HeaderTitle={<HeaderTitle text={t('DELIVERY_ADDRESS', 'Delivery address')} mb={0} />}
 								/>
 							)}
 						</ChAddress>
@@ -532,9 +534,7 @@ const CheckoutUI = (props: any) => {
 						(
 							<ChSection>
 								<ChDriverTips>
-									<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
+									<HeaderTitle text={t('DRIVER_TIPS', 'Driver Tips')} mb={0} />
 									<DriverTips
 										uuid={cartUuid}
 										businessId={cart?.business_id}
@@ -553,9 +553,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
 						<ChSection>
 							<ChPaymethods>
-								<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-									{t('PAYMENT_METHOD', 'Payment Method')}
-								</OText>
+								<HeaderTitle text={t('PAYMENT_METHOD', 'Payment Method')} mb={0} />
 								{!cartState.loading && cart?.status === 4 && (
 									<OText
 										style={{ textAlign: 'center', marginTop: 20 }}
@@ -595,6 +593,21 @@ const CheckoutUI = (props: any) => {
 					)}
 
 
+					{!cartState.loading && placeSpotsEnabled && (
+						<>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 30, marginHorizontal: -40 }} />
+							<PlaceSpot
+								isCheckout
+								isInputMode
+								cart={cart}
+								spotNumberDefault={cartState?.cart?.spot_number ?? cart?.spot_number}
+								setPlaceSpotNumber={setPlaceSpotNumber}
+								vehicleDefault={cart?.vehicle}
+							/>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</>
+					)}
+
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -606,19 +619,12 @@ const CheckoutUI = (props: any) => {
 								) : (
 									<>
 										<CartHeader>
-											<OText
-												size={16}
-												lineHeight={24}
-												color={theme.colors.textNormal}
-												style={{ fontWeight: '500' }}
-											>
-												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
-											</OText>
+											<HeaderTitle text={t('MOBILE_FRONT_YOUR_ORDER', 'Your order')} mb={0} />
 											<TouchableOpacity
 												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
 											>
 												<OText
-													size={10}
+													size={12}
 													lineHeight={15}
 													color={theme.colors.primary}
 													style={{ textDecorationLine: 'underline' }}
@@ -635,7 +641,7 @@ const CheckoutUI = (props: any) => {
 												<OText
 													size={12}
 													lineHeight={18}
-													color={theme.colors.textSecondary}
+													color={theme.colors.primary}
 													style={{ textDecorationLine: 'underline' }}
 												>
 													{t('CHANGE_STORE', 'Change store')}
@@ -646,6 +652,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											placeSpotTypes={placeSpotTypes}
 										/>
 									</>
 								)}
@@ -682,14 +689,6 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
-								{placeSpotTypes.includes(options?.type) && !cart?.place && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
-									</OText>
-								)}
 								{options.type === 1 &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -733,7 +732,10 @@ const CheckoutUI = (props: any) => {
 								togglePhoneUpdate={togglePhoneUpdate}
 								requiredFields={requiredFields}
 								hideUpdateButton
-								onClose={() => setIsOpen(false)}
+								onClose={() => {
+									setIsOpen(false)
+									handlePlaceOrder(null, true)
+								}}
 							/>
 						</View>
 					</OModal>
@@ -741,10 +743,10 @@ const CheckoutUI = (props: any) => {
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={() => handlePlaceOrder(null)}
+					handleClick={isDisabledButtonPlace ? () => Vibration.vibrate() : () => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
-					btnText={cart?.subtotal >= cart?.minimum
+					btnText={subtotalWithTaxes >= cart?.minimum
 						? (
 							placing
 								? t('PLACING', 'Placing')
@@ -771,19 +773,6 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
-			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
-				<PaymentOptionsWebView
-					onNavigationRedirect={onNavigationRedirect}
-					uri={`https://test-square-f50f7.web.app`}
-					user={user}
-					token={token}
-					cart={cart}
-					currency={currency}
-					webviewPaymethod={webviewPaymethod}
-					setShowGateway={setShowGateway}
-					locationId={'L1NGAY5M6KJRX'}
-				/>
-			)}
 		</>
 	)
 }
@@ -809,16 +798,23 @@ export const Checkout = (props: any) => {
 
 	const getOrder = async (cartId: any) => {
 		try {
-			setCartState({ ...cartState, loading: true })
-			const url = `${ordering.root}/carts/${cartId}`
-			const response = await fetch(url, {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${token}`
-				}
-			})
-			const { result } = await response.json();
+			let result: any = {}
+			const cart = orderState?.carts.find((cart: any) => cart.uuid === cartId)
+			if (cart) {
+				result = { ...cart }
+			} else {
+				setCartState({ ...cartState, loading: true })
+				const url = `${ordering.root}/carts/${cartId}`
+				const response = await fetch(url, {
+					method: 'GET',
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${token}`
+					}
+				})
+				const content = await response.json();
+				result = content.result
+			}
 
 			let publicKey = null
 			try {

package/themes/original/src/components/Checkout/styles.tsx

@@ -6,7 +6,7 @@ export const ChContainer = styled.View`
 `
 
 export const ChSection = styled.View`
-	padding-top: 30px;
+	padding-top: 20px;
 `
 
 export const ChHeader = styled.View`
@@ -40,7 +40,9 @@ export const ChMoment = styled(ChAddress)`
 `
 
 export const CHMomentWrapper = styled.TouchableOpacity`
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+	background-color: ${(props: any) => props.isCustomColor
+    ? props.theme.colors.primary
+    : props.theme.colors.backgroundGray100};
 	border-radius: 7.6px;
 	font-size: 12px;
 	max-width: 240px;
@@ -76,7 +78,6 @@ export const ChCart = styled(ChPaymethods)``
 
 export const WalletPaymentOptionContainer = styled(ChPaymethods)`
   padding-bottom: 0;
-  margin-left: -20px;
 `
 
 export const ChPlaceOrderBtn = styled.View`

package/themes/original/src/components/CitiesControl/index.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, useWindowDimensions, Keyboard, View } from 'react-native';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OIcon, OText } from '../shared';
+
+import { CityElement, Container } from './styles'
+
+export const CitiesControl = (props: any) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const { height } = useWindowDimensions();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setIsKeyboardShow(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setIsKeyboardShow(false)
+    );
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
+      <View>
+        {cities?.map((city: any) => (
+          <CityElement
+            key={city?.id}
+            activeOpacity={1}
+            disabled={orderState?.loading}
+            onPress={() => setCityState(city?.id === cityState ? null : city?.id)}
+          >
+            <OIcon
+              src={cityState === city?.id
+                ? theme.images.general.option_checked
+                : theme.images.general.option_normal}
+              width={16}
+              style={{ marginEnd: 24 }}
+            />
+            <OText color={theme.colors.black}>
+              {city?.name}
+            </OText>
+          </CityElement>
+        ))}
+      </View>
+      <OButton
+        text={t('CONTINUE', 'Continue')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        style={styles.btnStyle}
+        textStyle={{ color: 'white' }}
+        onClick={() => handleClick()}
+      />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    marginTop: 20,
+    borderRadius: 8,
+    shadowOpacity: 0,
+    height: 44
+  },
+})

package/themes/original/src/components/CitiesControl/styles.tsx

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding: 0 40px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+
+  ${(props: any) => props.height && css`
+    height: ${props.height}px;
+  `}
+`
+
+export const CityElement = styled.TouchableOpacity`
+  padding: 10px;
+  flex-direction: row;
+`

package/themes/original/src/components/DriverTips/index.tsx

@@ -35,8 +35,8 @@ const DriverTipsUI = (props: any) => {
 	const theme = useTheme();
 
 	const style = StyleSheet.create({
-		circle: {
-			borderRadius: 30
+		semicircle: {
+			borderRadius: 8
 		},
 		inputStyle: {
 			flex: 1,
@@ -75,10 +75,10 @@ const DriverTipsUI = (props: any) => {
 						onPress={() => handlerChangeOption(option)}
 					>
 						<DTCard
-							style={style.circle}
+							style={style.semicircle}
 							isActive={option === optionSelected}
 						>
-							<OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>

package/themes/original/src/components/DriverTips/styles.tsx

@@ -26,11 +26,12 @@ export const DTCard = styled.View`
   text-transform: capitalize;
   min-height: 55px;
   min-width: 55px;
-  max-width: 55px;
+  max-width: 80px;
   max-height: 55px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;
+  padding-horizontal: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};