ordering-ui-react-native 0.22.44 → 0.22.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.44",
+  "version": "0.22.45",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -542,6 +542,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
 					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
 					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
+          buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

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

@@ -152,6 +152,11 @@ const AddressListUI = (props: AddressListParams) => {
 							showCall={false}
 							paddingTop={10}
 							btnStyle={{ paddingLeft: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{
@@ -173,6 +178,11 @@ const AddressListUI = (props: AddressListParams) => {
 								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
+                buttonProps={{
+                  bgColor: theme.colors.white,
+                  borderColor: theme.colors.white,
+                  textStyle: { color: theme.colors.btnFont }
+                }}
 							/>
 						)}
 					{addressList.loading && addressList?.addresses?.length === 0 && (

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

@@ -44,6 +44,11 @@ export const Favorite = (props: any) => {
         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 }
+        }}
       />
       <TabContainer>
         {tabList.map((menu, i) => (

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

@@ -125,6 +125,11 @@ const ForgotPasswordUI = (props: any) => {
 				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
 				titleStyle={{ width: '100%', marginLeft: 0, paddingLeft: 0 }}
 				titleWrapStyle={{ paddingHorizontal: 0, paddingStart: 0, flex: 1 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<FormSide>
 				<OText

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components/native';
 import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
@@ -17,6 +18,7 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [refreshing] = useState(false);
   const [refresh, setRefresh] = useState(false)
 
@@ -46,6 +48,11 @@ export const Help = (props: HelpParams) => {
         onActionLeft={goToBack}
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <HelpSubItem
         onPress={() => onRedirect('HelpOrder')}

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

@@ -37,6 +37,11 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -43,6 +43,11 @@ export const HelpGuide = (props: HelpGuideParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={15}>

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

@@ -39,6 +39,11 @@ export const HelpOrder = (props: HelpOrderParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -412,6 +412,11 @@ const LoginFormUI = (props: LoginParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>

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

@@ -237,6 +237,7 @@ export const MessageListing = (props: MessageListingParams) => {
 	const [seletedOrder, setSeletedOrder] = useState<any>()
 	const [openMessages, setOpenMessges] = useState(false)
 	const [, t] = useLanguage()
+	const theme = useTheme()
 
 	const goToBack = () => {
 		navigation?.canGoBack() && navigation.goBack()
@@ -265,6 +266,11 @@ export const MessageListing = (props: MessageListingParams) => {
 				showCall={false}
 				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
+				buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<OrderListing
 				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}

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

@@ -343,6 +343,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							titleAlign={'center'}
 							titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
 							titleWrapStyle={{ paddingHorizontal: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (

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

@@ -101,6 +101,11 @@ export const MyOrders = (props: any) => {
               showCall={false}
               paddingTop={30}
               btnStyle={{ paddingLeft: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
           )}
         </View>

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

@@ -44,6 +44,7 @@ interface Props {
 	isVertical?: boolean,
 	noMargin?: any
 	hideArrowLeft?: boolean
+	buttonProps?: any
 }
 
 const NavBar = (props: Props) => {
@@ -64,6 +65,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			{!props.hideArrowLeft && (
 				<OButton
+					{...props.buttonProps}
 					iconProps={{
 						name: 'arrowleft',
 						size: 26

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

@@ -75,6 +75,11 @@ 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/OrderTypeSelector/index.tsx

@@ -103,6 +103,11 @@ 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/PreviousOrders/index.tsx

@@ -49,6 +49,8 @@ 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 }}
 					/>

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

@@ -113,6 +113,11 @@ 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>

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

@@ -192,6 +192,11 @@ 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

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

@@ -215,6 +215,11 @@ 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 ? (

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

@@ -73,6 +73,11 @@ 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 ?

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

@@ -72,6 +72,11 @@ export const SessionsUI = (props: SessionsParams) => {
         showCall={false}
         paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       {user?.session_strategy === 'jwt_session' ? (
         <>

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

@@ -488,6 +488,11 @@ const SignupFormUI = (props: SignupParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+          buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>

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

@@ -287,6 +287,11 @@ const ProfileUI = (props: ProfileParams) => {
 					onActionLeft={() => navigation.goBack()}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
+          buttonProps={{
+            bgColor: theme.colors.white,
+            borderColor: theme.colors.white,
+            textStyle: { color: theme.colors.btnFont }
+          }}
 				/>
 				<CenterView>
 					<View style={styles.photo}>

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton

package/themes/original/src/components/shared/OButton.tsx

@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor ?? theme?.general?.components?.buttons?.color, borderColor: props.borderColor ?? theme?.general?.components?.buttons?.color, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color ?? theme?.general?.components?.buttons?.buttonTextColor }}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />