ordering-ui-react-native 0.22.51 → 0.22.53

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -36,10 +36,10 @@ const RedeemGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -65,7 +65,7 @@ const RedeemGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -85,7 +85,7 @@ const RedeemGiftCardUI = (props: any) => {
       t('ERROR', 'Error'),
       stringError,
       [
-        { text: t('OK', 'oK'), onPress: () => {} }
+        { text: t('OK', 'oK'), onPress: () => { } }
       ]
     )
   }, [actionState.error])
@@ -108,12 +108,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -124,25 +122,25 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
           </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
-              <OInput
-                placeholder='XXXX-XXXX-XXXX-XXXX'
-                value={codeValue}
-                onChange={(val: any) => {
-                  onChange(val)
-                  handleChangeCode(val)
-                }}
-                autoCapitalize='characters'
-                autoCorrect={false}
-                blurOnSubmit={false}
-                style={style.inputStyle}
-              />
+                <OInput
+                  placeholder='XXXX-XXXX-XXXX-XXXX'
+                  value={codeValue}
+                  onChange={(val: any) => {
+                    onChange(val)
+                    handleChangeCode(val)
+                  }}
+                  autoCapitalize='characters'
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  style={style.inputStyle}
+                />
               )}
               name='code'
               rules={{
@@ -178,9 +176,7 @@ const RedeemGiftCardUI = (props: any) => {
           <OButton
             onClick={handleSubmit(onSubmit)}
             text={actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            textStyle={{ color: 'white', fontSize: 13 }}
+            textStyle={{ fontSize: 13 }}
             imgRightSrc={null}
             style={style.btnStyle}
             isDisabled={actionState.loading}
@@ -202,12 +198,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -218,7 +212,7 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
           </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
@@ -232,9 +226,7 @@ const RedeemGiftCardUI = (props: any) => {
                 onClose()
               }}
               text={t('OK', 'Ok')}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 13 }}
+              textStyle={{ fontSize: 13 }}
               imgRightSrc={null}
               style={style.btnStyle}
             />

package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { StyleSheet, Platform, Alert } from 'react-native';
-import { useLanguage, SendGiftCard as SendGiftCardController  } from 'ordering-components/native';
+import { useLanguage, SendGiftCard as SendGiftCardController } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
 import { useForm, Controller } from 'react-hook-form'
@@ -29,10 +29,10 @@ const SendGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -50,7 +50,7 @@ const SendGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -144,9 +144,7 @@ const SendGiftCardUI = (props: any) => {
       <OButton
         onClick={handleSubmit(onSubmit)}
         text={actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={actionState.loading}

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
-	Placeholder,
-	PlaceholderLine,
-	Fade
+  Placeholder,
+  PlaceholderLine,
+  Fade
 } from 'rn-placeholder';
 import { SingleGiftCard } from '../SingleGiftCard';
 import { OButton, OText } from '../../shared';
@@ -24,7 +24,7 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
     onNavigationRedirect
   } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
   const [, t] = useLanguage()
 
   useEffect(() => {
@@ -40,8 +40,8 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
             <PlaceholderLine width={30} height={16} />
           </Placeholder>
         ) : giftCards.list?.length > 0 && (
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
-      )}
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
+        )}
       {giftCards.list.map(card => (
         <SingleGiftCardWrapper key={card.id}>
           <SingleGiftCard
@@ -62,12 +62,11 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
       {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
         <WrappButton>
           <OButton
-						onClick={loadMoreOrders}
-						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-						imgRightSrc={null}
-						textStyle={{ color: theme.colors.white }}
-						style={{ borderRadius: 7.6, shadowOpacity: 0 }}
-					/>
+            onClick={loadMoreOrders}
+            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+            imgRightSrc={null}
+            style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+          />
         </WrappButton>
       )}
     </ProductsListContainer>

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

@@ -48,11 +48,6 @@ 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,11 +37,6 @@ 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,11 +43,6 @@ 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,11 +39,6 @@ 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/Home/index.tsx

@@ -49,11 +49,8 @@ export const Home = (props: any) => {
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					style={styles.buttons}
 					isCircle={false}
-					textStyle={{ color: 'white' }}
 					onClick={() => onNavigationRedirect('Login')}
 					imgRightSrc={null}
 				/>

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

@@ -145,9 +145,6 @@ export const Otp = (props: otpParams) => {
         </TouchableOpacity>
         <OButton
           onClick={() => handleCloseOtp()}
-          bgColor={theme.colors.white}
-          borderColor={theme.colors.primary}
-          textStyle={{ color: theme.colors.primary }}
           style={{ borderRadius: 8, width: '100%' }}
           text={t('CANCEL', 'Cancel')}
         />

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

@@ -412,11 +412,6 @@ 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>
@@ -711,9 +706,6 @@ const LoginFormUI = (props: LoginParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isLoading={formState.loading}
 							style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
@@ -752,7 +744,6 @@ const LoginFormUI = (props: LoginParams) => {
 								<OButton
 									onClick={handleVerifyCodeClick}
 									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									borderColor={theme.colors.primary}
 									style={loginStyle.btnOutline}
 									imgRightSrc={null}
 									isLoading={isLoadingVerifyModal}

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

@@ -266,11 +266,6 @@ 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,11 +343,6 @@ 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 && (
@@ -476,12 +471,10 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
 					<OButton
 						onClick={() => handleChangeMoment()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
 						isDisabled={!selectedTime}
 						text={t('CONTINUE', 'Continue')}
 						style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }}
-						textStyle={{ color: 'white', fontSize: 14 }}
+						textStyle={{ fontSize: 14 }}
 						showNextIcon
 					/>
 				</View>

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

@@ -394,7 +394,6 @@ const MultiCheckoutUI = (props: any) => {
                   </OText>
                   <OButton
                     text={t('SIGN_UP', 'Sign up')}
-                    textStyle={{ color: theme.colors.white }}
                     style={{ borderRadius: 7.6, marginTop: 20 }}
                     onClick={() => setOpenModal({ ...openModal, signup: true })}
                   />

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

@@ -101,6 +101,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           style={styles.btnBackArrow}
           onClick={() => handleArrowBack()}
           icon={AntDesignIcon}
+          useArrow
           iconProps={{
             name: 'arrowleft',
             size: 26

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

@@ -101,11 +101,6 @@ 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,7 +44,6 @@ interface Props {
 	isVertical?: boolean,
 	noMargin?: any
 	hideArrowLeft?: boolean
-	buttonProps?: any
 }
 
 const NavBar = (props: Props) => {
@@ -65,7 +64,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}
+					useArrow
 					iconProps={{
 						name: 'arrowleft',
 						size: 26
@@ -116,8 +115,6 @@ const NavBar = (props: Props) => {
 			{props.showCall
 				? (<OButton
 					isCircle={true}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					imgRightSrc={null}
 					imgLeftStyle={{ tintColor: 'white', width: 30, height: 30 }}
 					imgLeftSrc={theme.images.general.support}

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,
@@ -833,7 +832,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,
@@ -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