ordering-ui-react-native 0.22.51 → 0.22.53

package/package.json

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

package/themes/business/src/components/MapView/index.tsx

@@ -136,8 +136,20 @@ const MapViewComponent = (props: MapViewParams) => {
   const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
     const markerRef = useRef<any>()
 
-    let coordinateLat = (customer ? marker?.customer?.location?.lat || 0 : marker?.business?.location?.lat || 0) ?? (initialPosition?.latitude || 0)
-    let coordinateLng = (customer ? marker?.customer?.location?.lng || 0 : marker?.business?.location?.lng || 0) ?? (initialPosition?.longitude || 0)
+    let coordinateLat = (customer
+      ? typeof marker?.customer?.location?.lat === 'number' && !Number.isNaN(marker?.customer?.location?.lat)
+        ? marker?.customer?.location?.lat
+        : 0
+      : typeof marker?.business?.location?.lat === 'number' && !Number.isNaN(marker?.business?.location?.lat)
+        ? marker?.business?.location?.lat
+        : 0) ?? (initialPosition?.latitude || 0)
+    let coordinateLng = (customer
+      ? typeof marker?.customer?.location?.lng === 'number' && !Number.isNaN(marker?.customer?.location?.lng)
+        ? marker?.customer?.location?.lng
+        : 0
+      : typeof marker?.business?.location?.lng === 'number' && !Number.isNaN(marker?.business?.location?.lng)
+        ? marker?.business?.location?.lng
+        : 0) ?? (initialPosition?.longitude || 0)
 
     useEffect(() => {
       if (
@@ -157,8 +169,8 @@ const MapViewComponent = (props: MapViewParams) => {
         }}
         onPress={() =>
           setLocationSelected({
-            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+            latitude: coordinateLat,
+            longitude: coordinateLng
           })
         }
         ref={(ref) => markerRef.current = ref}
@@ -240,8 +252,8 @@ const MapViewComponent = (props: MapViewParams) => {
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition?.latitude,
-                longitude: initialPosition?.longitude,
+                latitude: initialPosition?.latitude || 0,
+                longitude: initialPosition?.longitude || 0,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
@@ -271,8 +283,8 @@ const MapViewComponent = (props: MapViewParams) => {
                 ))}
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: typeof location.lat === 'number' && !Number.isNaN(location.lat) ? location.lat : 0,
+                    longitude: typeof location.lng === 'number' && !Number.isNaN(location.lng) ? location.lng : 0,
                   }}
                   title={t('YOUR_LOCATION', 'Your Location')}
                 >

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -44,17 +44,25 @@ const SoundPlayerComponent = (props: any) => {
     const id = setInterval(() => setCount(count + 1), 2500)
 
     const playSound = async () => {
-      SoundPlayer.playUrl(URL_SOUND)
-      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
-      SoundPlayer.stop()
+      try {
+        SoundPlayer.playUrl(URL_SOUND)
+        await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
     }
     if (NativeModules?.RNSoundPlayer?.playUrl && typeof URL_SOUND === 'string' && isEnabledReadStorage) {
       playSound()
     }
 
     return () => {
-      SoundPlayer.stop()
       clearInterval(id);
+      try {
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
     }
   }, [count, isEnabledReadStorage])
 

package/themes/business/src/components/shared/OTextarea.tsx

@@ -4,8 +4,10 @@ import { useTheme } from 'styled-components/native';
 
 const Wrapper = styled.View`
   border-radius: 10px;
-  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.lightGray};
 `;
+
 const Inner = styled.TextInput`
   height: 100px;
   padding: 5px 10px 5px 10px;
@@ -29,16 +31,13 @@ const OTextarea = (props: Props) => {
         ref={props.textTareaRef}
         onFocus={() => props.onFocus()}
         onChangeText={(txt: any) => props.onChange(txt)}
-        textAlignVertical={'top'}
         placeholder={props.placeholder}
-        placeholderTextColor={theme.colors.arrowColor}
-        numberOfLines={props.lines}
-        underlineColorAndroid={'transparent'}
-        value={props.value}
+				placeholderTextColor={theme.colors.lightGray}
+				numberOfLines={props.lines}
+				underlineColorAndroid={'transparent'}
+				value={props.value}
+				multiline={true}
         autoFocus={props.autoFocus}
-        multiline={true}
-        selectionColor={theme.colors.primary}
-        color={theme.colors.textGray}
       />
     </Wrapper>
   );

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

@@ -542,11 +542,6 @@ 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}>
@@ -857,9 +852,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 										: t('LOADING', 'Loading')
 								}
 								onClick={handleSubmit(onSubmit)}
-								bgColor={theme.colors.primary}
-								borderColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white }}
 								isDisabled={formState.loading}
 								style={{ borderRadius: 7.6, shadowOpacity: 0 }}
 								showNextIcon
@@ -895,9 +887,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 						)}
 						<OButton
 							text={t('SAVE', 'Save')}
-							textStyle={{ color: theme.colors.white }}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
 							imgRightSrc={null}
 							style={{ marginHorizontal: 30, marginBottom: 10 }}
 							onClick={() => setSaveMapLocation(true)}

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

@@ -152,11 +152,6 @@ 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 }
-              }}
 						/>
 					)}
 					{
@@ -178,11 +173,6 @@ 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 && (
@@ -305,10 +295,7 @@ const AddressListUI = (props: AddressListParams) => {
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white }}
 								style={styles.button}
-								borderColor={theme.colors.primary}
 								onClick={() => !afterSignup ? onNavigationRedirect(
 									'AddressForm',
 									{

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

@@ -57,6 +57,8 @@ export const BusinessItemAccordion = (props: any) => {
 		return acc = acc
 	}, cart?.subtotal)
 
+	const bgStyle = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary
+
 	useEffect(() => {
 		if (isActive && !isFromUpselling) {
 			if (cart?.uuid !== viewedCart?.uuid) {
@@ -156,8 +158,8 @@ export const BusinessItemAccordion = (props: any) => {
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
 							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
-							bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-							borderColor={theme.colors.primary}
+							bgColor={bgStyle}
+							borderColor={bgStyle}
 							isDisabled={checkoutButtonDisabled}
 						/>
 					)}

package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx

@@ -47,13 +47,11 @@ export const BusinessSearchHeader = (props: any) => {
                             borderWidth: 0,
                             width: 26,
                             height: 26,
-                            backgroundColor: '#FFF',
-                            borderColor: '#FFF',
-                            shadowColor: '#FFF',
                             paddingLeft: 0,
                             paddingRight: 0,
                             marginTop: 50,
                         }}
+                        useArrow
                         onClick={() => props.navigation.goBack()}
                         icon={AntDesignIcon}
                         iconProps={{

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

@@ -230,7 +230,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 </BusinessInfoItem>
                 <OButton
                   onClick={() => onBusinessClick(business)}
-                  textStyle={{ color: theme.colors.primary, fontSize: 10 }}
+                  textStyle={{ fontSize: 10 }}
                   text={t('GO_TO_STORE', 'Go to store')}
                   style={{
                     borderRadius: 23,
@@ -238,7 +238,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                     paddingRight: 10,
                     height: 23,
                     shadowOpacity: 0,
-                    backgroundColor: theme.colors.primaryContrast,
                     borderWidth: 0
                   }}
                 />

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

@@ -527,9 +527,6 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         )}
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
-          textStyle={{ color: 'white' }}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
           style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
           isDisabled={isAsap || !(dateSelected && timeSelected)}
@@ -555,21 +552,21 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setMinutes(59)
 
   const cateringTypeString = orderState?.options?.type === 7
-  ? 'catering_delivery'
-  : orderState?.options?.type === 8
-    ? 'catering_pickup'
-    : null
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
 
-const splitCateringValue = (configName : string) =>
-  Object.values(props?.business?.configs || {})
-    ?.find(config => config?.key === configName)
-    ?.value?.split('|')
-    ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
-const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
-const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
-const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
-const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
-const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
+  const splitCateringValue = (configName: string) =>
+    Object.values(props?.business?.configs || {})
+      ?.find(config => config?.key === configName)
+      ?.value?.split('|')
+      ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
+  const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
+  const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
+  const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
+  const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
+  const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
 
   const businessPreorderProps = {
     ...props,

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

@@ -558,9 +558,8 @@ const CartUI = (props: any) => {
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
                   onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />

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

@@ -175,9 +175,8 @@ export const CartContent = (props: any) => {
 											text={t('CHECKOUT', 'Checkout')}
 											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											isDisabled={!cartsAvailable.length}
-											borderColor={theme.colors.primary}
+											borderColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											imgRightSrc={null}
-											textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
 											onClick={() => handleCheckoutRedirect()}
 											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 										/>

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

@@ -646,17 +646,11 @@ const CheckoutUI = (props: any) => {
 											<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer details')} />
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
-												textStyle={{ color: theme.colors.white }}
-												bgColor={theme.colors.primary}
-												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, signup: true })}
 											/>
 											<OButton
 												text={t('LOGIN', 'Login')}
-												textStyle={{ color: theme.colors.white }}
-												bgColor={theme.colors.primary}
-												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
 											/>

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

@@ -69,10 +69,7 @@ export const CitiesControl = (props: any) => {
       </View>
       <OButton
         text={t('CONTINUE', 'Continue')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
         style={styles.btnStyle}
-        textStyle={{ color: 'white' }}
         onClick={() => handleClick()}
       />
     </Container>

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

@@ -102,9 +102,7 @@ const CouponControlUI = (props: any) => {
 					/>
 					<OButton
 						onClick={() => onButtonApplyClick()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white', fontSize: 12 }}
+						textStyle={{ fontSize: 12 }}
 						imgRightSrc={null}
 						text={t('APPLY', 'Apply')}
 						isDisabled={!couponInput}

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

@@ -125,9 +125,7 @@ const DriverTipsUI = (props: any) => {
 						/>
 						<OButton
 							text={t('APPLY_TIP', 'Apply Tip')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 14 }}
+							textStyle={{ fontSize: 14 }}
 							imgRightSrc={null}
 							style={{ borderRadius: 5, height: 44 }}
 							isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}

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

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

@@ -270,7 +270,6 @@ const FavoriteListUI = (props: FavoriteParams) => {
             onClick={() => getFavoriteList(pagination?.currentPage + 1)}
             text={t('LOAD_MORE_ITEMS', 'Load more items')}
             imgRightSrc={null}
-            textStyle={{ color: theme.colors.white }}
             style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
           />
         </WrappButton>

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

@@ -64,7 +64,7 @@ const ForgotPasswordUI = (props: any) => {
 		handleReCaptcha(null)
 		if (reCaptchaValue) return
 
-	  if (!recaptchaConfig?.siteKey) {
+		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -73,7 +73,7 @@ const ForgotPasswordUI = (props: any) => {
 			return
 		}
 		recaptchaRef.current.open()
-  	}
+	}
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
@@ -92,8 +92,8 @@ const ForgotPasswordUI = (props: any) => {
 				formState.result?.result && showToast(
 					ToastType.Error,
 					typeof formState.result?.result === 'string'
-          ? formState.result?.result
-          : formState.result?.result[0]
+						? formState.result?.result
+						: formState.result?.result[0]
 				)
 				return
 			}
@@ -125,11 +125,6 @@ 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
@@ -213,7 +208,6 @@ const ForgotPasswordUI = (props: any) => {
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-						textStyle={{ color: 'white' }}
 						bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
 						borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
 						isLoading={formState.loading}

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

@@ -12,7 +12,7 @@ import {
   Container
 } from './styles'
 
-export const GiftCardUI =  React.memo((props: any) => {
+export const GiftCardUI = React.memo((props: any) => {
   const {
     navigation
   } = props
@@ -57,9 +57,7 @@ export const GiftCardUI =  React.memo((props: any) => {
         <OButton
           onClick={() => setOpenModal('purchase')}
           text={t('PURCHASE', 'Purchase')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
-          textStyle={{ color: 'white', fontSize: 13 }}
+          textStyle={{ fontSize: 13 }}
           imgRightSrc={null}
           style={{ ...style.btnStyle, marginRight: 14 }}
         />
@@ -76,26 +74,26 @@ export const GiftCardUI =  React.memo((props: any) => {
       </View>
 
       <OModal
-				open={openModal === 'purchase'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'purchase'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<PurchaseGiftCard
+      >
+        <PurchaseGiftCard
           handleCustomGoToCheckout={handleCustomGoToCheckout}
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
       <OModal
-				open={openModal === 'redeem'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'redeem'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<RedeemGiftCard
+      >
+        <RedeemGiftCard
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
     </Container>
   )
-})
+})

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

@@ -58,12 +58,10 @@ const PurchaseGiftCardUI = (props: any) => {
             borderWidth: 0,
             width: 26,
             height: 26,
-            backgroundColor: '#FFF',
-            borderColor: '#FFF',
-            shadowColor: '#FFF',
             paddingLeft: 0,
             paddingRight: 0,
           }}
+          useArrow
           onClick={onClose}
           icon={AntDesignIcon}
           iconProps={{
@@ -113,9 +111,7 @@ const PurchaseGiftCardUI = (props: any) => {
       <OButton
         onClick={() => handleAccept()}
         text={t('ACCEPT', 'Accept')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={!selectedProduct}
@@ -130,4 +126,4 @@ export const PurchaseGiftCard = (props: any) => {
     UIComponent: PurchaseGiftCardUI
   }
   return <PurchaseGiftCardController {...purchaseGiftCardProps} />
-}
+}