ordering-ui-react-native 0.17.0 → 0.17.1

package/package.json

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

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

@@ -58,6 +58,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		saveAddress,
 		isGuestUser,
 		isRequiredField,
+		showField,
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
@@ -641,129 +642,138 @@ const AddressFormUI = (props: AddressFormParams) => {
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								<Controller
-									control={control}
-									name="internal_number"
-									rules={{
-										required:
-											isRequiredField && isRequiredField('internal_number')
-												? t(
-													`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
-													`The field internal number is required`,
-												)
-												: null,
-									}}
-									defaultValue={
-										address?.internal_number ||
-										formState.changes?.internal_number ||
-										addressState?.address?.internal_number ||
-										''
-									}
-									render={() => (
-										<OInput
-											name="internal_number"
-											placeholder={t('INTERNAL_NUMBER', 'Internal number')}
-											onChange={(text: string) => {
-												handleChangeInput(text);
-												setValue('internal_number', text);
-											}}
-											value={
-												address?.internal_number ||
-												formState.changes?.internal_number ||
-												addressState?.address?.internal_number ||
-												''
-											}
-											style={{ ...styles.inputsStyle, marginRight: 24 }}
-											forwardRef={internalNumberRef}
-											returnKeyType="next"
-											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-											blurOnSubmit={false}
-										/>
-									)}
-								/>
+								{showField && showField('internal_number') && (
+									<Controller
+										control={control}
+										name="internal_number"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('internal_number')
+													? t(
+														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
+														`The field internal number is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.internal_number ||
+											formState.changes?.internal_number ||
+											addressState?.address?.internal_number ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="internal_number"
+												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('internal_number', text);
+												}}
+												value={
+													address?.internal_number ||
+													formState.changes?.internal_number ||
+													addressState?.address?.internal_number ||
+													''
+												}
+												style={{
+													...styles.inputsStyle,
+													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+												}}
+												forwardRef={internalNumberRef}
+												returnKeyType="next"
+												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+
+								{showField && showField('zipcode') && (
+									<Controller
+										control={control}
+										name="zipcode"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('zipcode')
+													? t(
+														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
+														`The field Zip Code is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.zipcode ||
+											formState.changes?.zipcode ||
+											addressState.address.zipcode ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="zipcode"
+												placeholder={t('ZIP_CODE', 'Zip code')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('zipcode', text);
+												}}
+												value={
+													address?.zipcode ||
+													formState.changes?.zipcode ||
+													addressState.address.zipcode ||
+													''
+												}
+												style={styles.inputsStyle}
+												forwardRef={zipCodeRef}
+												returnKeyType="next"
+												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+							</View>
 
+							{showField && showField('address_notes') && (
 								<Controller
 									control={control}
-									name="zipcode"
+									name="address_notes"
 									rules={{
 										required:
-											isRequiredField && isRequiredField('zipcode')
+											isRequiredField && isRequiredField('address_notes')
 												? t(
-													`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
-													`The field Zip Code is required`,
+													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
+													`The field address notes is required`,
 												)
 												: null,
 									}}
 									defaultValue={
-										address?.zipcode ||
-										formState.changes?.zipcode ||
-										addressState.address.zipcode ||
+										address?.address_notes ||
+										formState.changes?.address_notes ||
+										addressState.address.address_notes ||
 										''
 									}
 									render={() => (
 										<OInput
-											name="zipcode"
-											placeholder={t('ZIP_CODE', 'Zip code')}
-											onChange={(text: string) => {
+											name="address_notes"
+											placeholder={t('ADDRESS_NOTES', 'Address notes')}
+											onChange={(text: any) => {
 												handleChangeInput(text);
-												setValue('zipcode', text);
+												setValue('address_notes', text);
 											}}
 											value={
-												address?.zipcode ||
-												formState.changes?.zipcode ||
-												addressState.address.zipcode ||
+												address?.address_notes ||
+												formState.changes?.address_notes ||
+												addressState.address.address_notes ||
 												''
 											}
-											style={styles.inputsStyle}
-											forwardRef={zipCodeRef}
-											returnKeyType="next"
-											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-											blurOnSubmit={false}
+											multiline
+											style={styles.textAreaStyles}
+											returnKeyType="done"
+											forwardRef={addressNotesRef}
+											blurOnSubmit
 										/>
 									)}
 								/>
-							</View>
-
-							<Controller
-								control={control}
-								name="address_notes"
-								rules={{
-									required:
-										isRequiredField && isRequiredField('address_notes')
-											? t(
-												`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
-												`The field address notes is required`,
-											)
-											: null,
-								}}
-								defaultValue={
-									address?.address_notes ||
-									formState.changes?.address_notes ||
-									addressState.address.address_notes ||
-									''
-								}
-								render={() => (
-									<OInput
-										name="address_notes"
-										placeholder={t('ADDRESS_NOTES', 'Address notes')}
-										onChange={(text: any) => {
-											handleChangeInput(text);
-											setValue('address_notes', text);
-										}}
-										value={
-											address?.address_notes ||
-											formState.changes?.address_notes ||
-											addressState.address.address_notes ||
-											''
-										}
-										multiline
-										style={styles.textAreaStyles}
-										returnKeyType="done"
-										forwardRef={addressNotesRef}
-										blurOnSubmit
-									/>
-								)}
-							/>
+							)}
 						</FormInput>
 						<IconsContainer>
 							{tagsName.map((tag) => (

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

@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList } from './styles';
 
 import { Cart } from '../Cart';
-import { OIcon, OText } from '../shared';
+import { OButton, OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
-import { View } from 'react-native';
 
 export const CartContent = (props: any) => {
 	const {
 		carts,
-		isOrderStateCarts
+		isOrderStateCarts,
+		onNavigationRedirect
 	} = props
 
 	const theme = useTheme();
@@ -22,9 +23,6 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
-						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
@@ -48,14 +46,22 @@ export const CartContent = (props: any) => {
 			)}
 			{(!carts || carts?.length === 0) && (
 				<CCNotCarts>
-					{/* <OIcon
-            url={props.icon}
-            width={200}
-            height={122}
-          /> */}
 					<OText size={24} style={{ textAlign: 'center' }}>
 						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
 					</OText>
+					<OButton
+						text={t('START_SHOPPING', 'Start shopping')}
+						bgColor={theme.colors.primary}
+						borderColor={theme.colors.primary}
+						textStyle={{
+							color: theme.colors.white,
+							fontSize: 14,
+							paddingRight: 0
+						}}
+						style={{ height: 35, marginVertical: 20, borderRadius: 8 }}
+						imgRightSrc={null}
+						onClick={() => onNavigationRedirect('BusinessList')}
+					/>
 				</CCNotCarts>
 			)}
 			<Spinner visible={isCartsLoading} />

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

@@ -89,7 +89,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       return
     }
 
-    if (distance <= maxLimitLocation) {
+    const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
+
+    if (distance <= _maxLimitLocation) {
       setMarkerPosition(curPos)
       setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
     } else {
@@ -153,6 +155,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     Geocoder.init(googleMapsApiKey)
   }, [])
 
+  useEffect(() => {
+    mapRef.current.animateToRegion({
+      ...region,
+      latitude: location?.lat,
+      longitude: location?.lng,
+    })
+  }, [location])
 
   useEffect(() => {
     if (saveLocation) {

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

@@ -20,7 +20,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
 	const theme = useTheme();
 
 	const errorImage = image || theme.images.general.notFound
-	const isUrl = errorImage.includes('http')
+	const isUrl = typeof errorImage === 'string' && errorImage.includes('http')
 
 	return (
 		<NotFound>

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

@@ -68,6 +68,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     },
     statusBar: {
       height: 12,
+      borderRadius: 8
     },
     logo: {
       width: 75,

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

@@ -13,7 +13,7 @@ import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, R
 import { StyleSheet, View, TouchableOpacity, Image, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { OButton, OText } from '../shared';
+import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
@@ -179,8 +179,10 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								)}
 							</View>
 							<PricesContainer>
-								<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
-								{product?.offer_price !== null && product?.in_offer && (
+								{!!product?.price && (
+									<OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+								)}
+								{product?.offer_price !== null && !!product?.in_offer && (
 									<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 								)}
 							</PricesContainer>
@@ -204,7 +206,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							)}
 						</CardInfo>
 						<LogoWrapper>
-							{product?.ribbon?.enabled && (
+							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
@@ -222,16 +224,21 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{(product?.images || theme?.images?.dummies?.product) && (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_250,c_limit'),
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							)}
+							{product?.images ? (
+                <FastImage
+                  style={styles.productStyle}
+                  source={{
+                    uri: optimizeImage(product?.images, 'h_250,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+              ) : (
+                <OIcon
+                  src={theme?.images?.dummies?.product}
+                  style={styles.productStyle}
+                />
+              )}
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (

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

@@ -150,7 +150,7 @@ const WalletsUI = (props: any) => {
                     onPress={() => handleChangeTab(wallet)}
                   >
                     <OTab isSelected={tabSelected === wallet.type}>
-                      <OText size={18}>
+                      <OText size={18} color={tabSelected === wallet.type && theme.colors.primary}>
                         {walletName[wallet.type]?.name}
                       </OText>
                     </OTab>
@@ -165,7 +165,7 @@ const WalletsUI = (props: any) => {
                       <OText size={20}>
                         {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
                       </OText>
-                      {loyaltyLevel.image ? (
+                      {/* {loyaltyLevel.image ? (
                         <FastImage
                           style={styles.logoStyle}
                           source={{
@@ -180,7 +180,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )}
+                      )} */}
                       <OText
                         size={22}
                         weight='bold'

package/themes/original/src/types/index.tsx

@@ -80,6 +80,7 @@ export interface AddressFormParams {
 	saveAddress?: any,
 	userCustomerSetup?: boolean,
 	isRequiredField?: (field: string) => {},
+	showField?: (field: string) => {},
 	isGuestUser?: boolean,
 	useValidationFileds?: boolean,
 	isSelectedAfterAdd?: boolean,