ordering-ui-react-native 0.22.47-map → 0.22.47-test

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

@@ -45,15 +45,10 @@ export const NetworkError = (props: NoNetworkParams) => {
         />
         <OButton
           text={t('REFRESH', 'Refresh')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
           style={{
             borderRadius: 8,
             marginTop: 45
           }}
-          textStyle={{
-            color: theme.colors.white
-          }}
           onClick={() => RNRestart.Restart()}
         />
       </ImageContainer>

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

@@ -42,11 +42,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
 						style={{ width: '100%', height: 50, ...btnStyle }}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}
 						text={btnTitle}
-						textStyle={{ color: theme.colors.white }}
 					/>
 				</View>
 			)}

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

@@ -75,11 +75,6 @@ const NotificationsUI = (props: any) => {
 				showCall={false}
 				style={{ paddingVertical: 0 }}
 				btnStyle={{ paddingLeft: 0 }}
-        buttonProps={{
-          bgColor: theme.colors.white,
-          borderColor: theme.colors.white,
-          textStyle: { color: theme.colors.btnFont }
-        }}
 			/>
 			{showCustomerPromotions && showNotifications && (
 				<>

package/themes/original/src/components/OrderDetails/OrderHistory.tsx

@@ -145,10 +145,10 @@ export const OrderHistory = (props: any) => {
                     </>
                   )
                     : message.change?.attribute === 'prepared_in' ? (
-                    <>
-                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
-                      {formatSeconds(parseInt(message.change.new, 10))}
-                    </>
+                      <>
+                        {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                        {formatSeconds(parseInt(message.change.new, 10))}
+                      </>
                     ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
@@ -170,11 +170,9 @@ export const OrderHistory = (props: any) => {
       ))}
       <OButton
         text={enableReview ? t('REVIEW_ORDER', 'Review order') : t('CONTINUE', 'Continue')}
-        textStyle={{ fontSize: 14, color: theme.colors.white }}
+        textStyle={{ fontSize: 14 }}
         imgRightSrc={theme.images.general.arrow_right}
         imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-        borderColor='transparent'
-        bgColor={theme.colors.primary}
         style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginBottom: 30, marginTop: 20 }}
         onClick={() => handleReview()}
       />

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

@@ -643,7 +643,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OButton
                       text={t('GET_DIRECTIONS', 'Get Directions')}
                       imgRightSrc=''
-                      textStyle={{ color: theme.colors.white }}
                       style={{
                         alignSelf: 'center',
                         borderRadius: 10,
@@ -750,6 +749,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           }
                           locations={parsedLocations}
                           readOnly
+                          manualZoom
                         />
                       </Map>
                     )}
@@ -833,7 +833,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     text={t('YOUR_ORDERS', 'Your Orders')}
                     textStyle={{ fontSize: 14, color: theme.colors.primary }}
                     imgRightSrc={null}
-                    borderColor={theme.colors.primary}
                     bgColor={theme.colors.clear}
                     style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
                     parentStyle={{ marginTop: 29, marginEnd: 15 }}

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

@@ -31,9 +31,9 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+	const orderTypeTitle = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
+	const orderTypeDescription = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
+	const orderTypeCallAction = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
@@ -103,11 +103,6 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
 						noMargin
-            buttonProps={{
-              bgColor: theme.colors.white,
-              borderColor: theme.colors.white,
-              textStyle: { color: theme.colors.btnFont }
-            }}
 					/>
 					{
 						items.length > 0 && (

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

@@ -131,7 +131,6 @@ const PaymentOptionStripeUI = (props: any) => {
 						bgColor={theme.colors.backgroundGray}
 						borderColor={theme.colors.backgroundGray}
 						style={styles.btnAddStyle}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={() => setAddCardOpen(true)}
 					/>
@@ -141,7 +140,6 @@ const PaymentOptionStripeUI = (props: any) => {
 								text={t('CANCEL', 'Cancel')}
 								bgColor={theme.colors.backgroundGray}
 								borderColor={theme.colors.backgroundGray}
-								textStyle={{ color: 'white' }}
 								style={styles.btnAction}
 								imgRightSrc={null}
 								onClick={() => onCancel()}
@@ -150,9 +148,6 @@ const PaymentOptionStripeUI = (props: any) => {
 						<View style={{ width: '48%' }}>
 							<OButton
 								text={t('ACCEPT', 'Accept')}
-								bgColor={theme.colors.primary}
-								borderColor={theme.colors.primary}
-								textStyle={{ color: 'white' }}
 								style={styles.btnAction}
 								imgRightSrc={null}
 								isDisabled={!cardSelected || cardsList?.cards?.length === 0}

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

@@ -326,7 +326,6 @@ const PaymentOptionsUI = (props: any) => {
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
 						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
 						style={styles.btnAddStyle}
 						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
 						imgRightSrc={null}
@@ -426,7 +425,6 @@ const PaymentOptionsUI = (props: any) => {
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
 						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
 						style={styles.btnAddStyle}
 						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
 						imgRightSrc={null}

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

@@ -236,9 +236,7 @@ const PlaceSpotUI = (props: PlaceSpotParams) => {
           <View style={{ alignItems: 'flex-start' }}>
             <OButton
               onClick={() => onChangeSpot()}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 12 }}
+              textStyle={{ fontSize: 12 }}
               imgRightSrc={null}
               text={t('UPDATE_SPOT_NUMBER', 'Update')}
               isDisabled={(!spotNumber && !Object.values(vehicle).every(e => e))}

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

@@ -27,7 +27,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 
 	const [, t] = useLanguage();
 
-  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+	const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
@@ -49,9 +49,6 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 						onClick={loadMoreOrders}
 						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
 						imgRightSrc={null}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: theme.colors.white }}
 						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
 					/>
 				</WrappButton>

package/themes/original/src/components/ProductForm/ActionButton.tsx

@@ -59,11 +59,11 @@ export const ActionButton = (props: any) => {
                             }`}
                         isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
                         textStyle={{
-                            color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
+                            color: theme.colors.white,
                             fontSize: orderState.loading || editMode ? 10 : 14
                         }}
                         bgColor={buttonColor ? theme.colors.lightGray : theme.colors.primary}
-                        borderColor={!buttonColor ? theme.colors.white : theme.colors.primary}
+                        borderColor={buttonColor ? theme.colors.lightGray : theme.colors.primary}
                         style={{
                             opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
                             borderRadius: 7.6,
@@ -84,7 +84,7 @@ export const ActionButton = (props: any) => {
                         textStyle={{ fontSize: 10 }}
                     />
                 ) : (
-                    <OButton onClick={navigation.navigate('AddressList')} />
+                    <OButton onClick={() => navigation.navigate('AddressList')} />
                 ))}
             {!auth && (
                 <OButton
@@ -96,10 +96,9 @@ export const ActionButton = (props: any) => {
                             : t('LOGIN_SIGNUP', 'Login / Sign Up')
                     }
                     imgRightSrc=""
-                    textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
+                    textStyle={{ fontSize: 13, textAlign: 'center', color: theme.colors.primary }}
                     style={{
                         height: 42,
-                        borderColor: theme.colors.primary,
                         backgroundColor: theme.colors.white,
                         paddingLeft: 0,
                         paddingRight: 0

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

@@ -35,7 +35,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		disabled,
 		setIsScrollAvailable,
 		image,
-		enableIntersection
+		enableIntersection,
+		onChange
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -88,6 +89,12 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		}
 	}, [balance])
 
+	useEffect(() => {
+		if (!suboption?.preselected || !option?.respect_to) return
+		const newState = { ...state, selected: suboption?.preselected, quantity: state.selected ? 0 : 1 }
+		onChange(newState, suboption, option)
+	}, [suboption, option])
+
 	return (
 		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
 			{isIntersectionObserver ? (

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

@@ -233,7 +233,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
           <CalendarWrapper>
             {(timeList?.length > 0 && isEnabled) ? (
               <SelectDropdown
-                ref={dropdownRef} 
+                ref={dropdownRef}
                 data={timeList}
                 onSelect={(selectedItem, index) => {
                   console.log(selectedItem.value)
@@ -244,7 +244,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                 rowTextForSelection={(item, index) => {
                   return item.text
                 }}
-                buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                 buttonTextStyle={{
                   color: theme.colors.disabled,
                   fontSize: 14,
@@ -267,7 +267,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                 }}
                 renderCustomizedRowChild={(item, index) => {
                   return (
-                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                       {item.text}
                     </Text>
                   )
@@ -326,11 +326,10 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       </ScheduleWrapper>
       <ButtonWrapper>
         <OButton
-          bgColor={theme.colors.primary}
           onClick={() => handleSelectProfessional()}
           text={t('BOOK', 'Book')}
           style={styles.buttonStyle}
-          textStyle={{ fontSize: 14, color: theme.colors.white }}
+          textStyle={{ fontSize: 14 }}
         />
       </ButtonWrapper>
     </Container>

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

@@ -113,11 +113,6 @@ const PromotionsUI = (props: PromotionParams) => {
         paddingTop={Platform.OS === 'ios' ? 20 : 10}
         style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
-        buttonProps={{
-          bgColor: theme.colors.white,
-          borderColor: theme.colors.white,
-          textStyle: { color: theme.colors.btnFont }
-        }}
       />
       <PromotionsContainer>
         <SearchBarContainer>
@@ -176,7 +171,7 @@ const PromotionsUI = (props: PromotionParams) => {
                 onClick={() => handleClickOffer(offer)}
                 text={t('VIEW', 'View')}
                 style={styles.buttonStyle}
-                textStyle={{ fontSize: 14, color: '#fff', flexWrap: 'nowrap' }}
+                textStyle={{ fontSize: 14, flexWrap: 'nowrap' }}
               />
             </WrapperSingleOffer>
           ))}
@@ -240,7 +235,7 @@ const PromotionsUI = (props: PromotionParams) => {
                         onClick={() => handleBusinessClick(business)}
                         text={t('GO_TO_BUSINESSS', 'Go to business')}
                         style={styles.modalButtonStyle}
-                        textStyle={{ fontSize: 10, color: '#fff' }}
+                        textStyle={{ fontSize: 10 }}
                       />
                     </BusinessInfo>
                   </SingleBusinessOffer>

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

@@ -192,11 +192,6 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
-          buttonProps={{
-            bgColor: theme.colors.white,
-            borderColor: theme.colors.white,
-            textStyle: { color: theme.colors.btnFont }
-          }}
         />
         <DriverPhotoContainer>
           <View
@@ -298,7 +293,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}

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

@@ -215,11 +215,6 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
-          buttonProps={{
-            bgColor: theme.colors.white,
-            borderColor: theme.colors.white,
-            textStyle: { color: theme.colors.btnFont }
-          }}
         />
         <BusinessLogo isMulti={order?.business?.length > 1}>
           {typeof order?.logo === 'string' || !order?.logo ? (
@@ -232,7 +227,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -338,7 +333,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -73,11 +73,6 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
-          buttonProps={{
-            bgColor: theme.colors.white,
-            borderColor: theme.colors.white,
-            textStyle: { color: theme.colors.btnFont }
-          }}
         />
         {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
           productsOrder?.length ? productsOrder?.map((product: any, i: any) => !product?.deleted ?
@@ -109,7 +104,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -90,7 +90,7 @@ export const ReviewTrigger = (props: any) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -122,7 +122,7 @@ export const ReviewTrigger = (props: any) => {
       <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
         <ActionContainer>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('GOTO_REVIEW', 'Go to review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -57,9 +57,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [{ optimizeImage, parsePrice, parseDate }] = useUtils()
   const { top } = useSafeAreaInsets()
   const [{ configs }] = useConfig()
-	const [orderState] = useOrder()
-	const [{ auth }] = useSession()
-	const { product, loading, error } = productObject;
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const { product, loading, error } = productObject;
 
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
@@ -77,8 +77,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const styles = StyleSheet.create({
     photoStyle: {
       width: 45,
-			height: 45,
-			borderRadius: 7.6
+      height: 45,
+      borderRadius: 7.6
     },
     buttonStyle: {
       borderRadius: 7.6,
@@ -144,7 +144,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
-        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+          moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -166,9 +166,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleUpdateGuest = () => {
-		const guestToken = uuid.v4()
-		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
-	}
+    const guestToken = uuid.v4()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
 
   const customDayHeaderStylesCallback = () => {
     return {
@@ -193,11 +193,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleRedirectLogin = () => {
-		navigation && navigation.navigate('Login', {
-			store_slug: props.businessSlug
-		});
+    navigation && navigation.navigate('Login', {
+      store_slug: props.businessSlug
+    });
     onClose && onClose()
-	};
+  };
 
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
@@ -290,7 +290,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
     setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
   }, [productCart])
-  
+
   return (
     <>
       {loading && !error && (
@@ -450,7 +450,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               <CalendarWrapper>
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
-                    ref={dropdownRef} 
+                    ref={dropdownRef}
                     defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
@@ -462,7 +462,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     rowTextForSelection={(item, index) => {
                       return item.text
                     }}
-                    buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                    buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                     buttonTextStyle={{
                       color: theme.colors.disabled,
                       fontSize: 14,
@@ -485,7 +485,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     }}
                     renderCustomizedRowChild={(item, index) => {
                       return (
-                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                           {item.text}
                         </Text>
                       )
@@ -553,7 +553,6 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               auth &&
               orderState.options?.address_id)) && (
                 <OButton
-                  bgColor={theme.colors.primary}
                   onClick={() => handleSaveService()}
                   text={orderState.loading
                     ? t('LOADING', 'Loading')
@@ -562,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
                   isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
-                  textStyle={{ fontSize: 14, color: theme.colors.white }}
+                  textStyle={{ fontSize: 14 }}
                 />
               )}
             {auth &&
@@ -577,45 +576,44 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               ) : (
                 <OButton onClick={() => addressRedirect()} />
               ))}
-              {!auth && (
-                <OButton
-                  isDisabled={isSoldOut || maxProductQuantity <= 0}
-                  onClick={() => handleRedirectLogin()}
-                  text={
-                    isSoldOut || maxProductQuantity <= 0
-                      ? t('SOLD_OUT', 'Sold out')
-                      : t('LOGIN_SIGNUP', 'Login / Sign Up')
-                  }
-                  imgRightSrc=""
-                  textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-                  style={{
-                    height: 44,
-                    borderColor: theme.colors.primary,
-                    backgroundColor: theme.colors.white,
-                  }}
-                />
-              )}
-              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
-                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-                  {actionStatus?.loading ? (
-                    <Placeholder Animation={Fade}>
-                      <PlaceholderLine width={60} height={20} />
-                    </Placeholder>
-                  ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-                  )}
-                </TouchableOpacity>
-              )}
+            {!auth && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={
+                  isSoldOut || maxProductQuantity <= 0
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                }
+                imgRightSrc=""
+                textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+                style={{
+                  height: 44,
+                  backgroundColor: theme.colors.white,
+                }}
+              />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+              <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                {actionStatus?.loading ? (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine width={60} height={20} />
+                  </Placeholder>
+                ) : (
+                  <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                )}
+              </TouchableOpacity>
+            )}
           </ButtonWrapper>
         </Container>
       )}
 
       <OModal
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				entireModal
-			>
-				<ScrollView contentContainerStyle={styles.professionalList}>
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        entireModal
+      >
+        <ScrollView contentContainerStyle={styles.professionalList}>
           <View style={{ paddingVertical: 11 }}>
             <OText
               size={14}
@@ -671,7 +669,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
             </TouchableOpacity>
           ))}
         </ScrollView>
-			</OModal>
+      </OModal>
     </>
   )
 }