ordering-ui-react-native 0.17.49-release → 0.17.50-release

package/package.json

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

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -82,6 +82,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const validStatusComplete = [9, 19, 23]
 
+  const pendingOrderStatus = [1, 4, 7, 13]
+
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
@@ -167,7 +169,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleArrowBack: any = () => {
-    if (alertState?.open && !isAllowedDriverRejectOrder) {
+    if (alertState?.open && !isAllowedDriverRejectOrder && !pendingOrderStatus.includes(order?.status)) {
       setAlertState({
         ...alertState,
         open: false
@@ -367,7 +369,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!props.order?.error || props.order?.error) && (
+      {(!!props.order?.error || props.order?.error?.length > 0) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={

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

@@ -351,7 +351,7 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		marginTop: 30,
-		marginBottom: 0,
+		marginBottom: 30,
 		borderRadius: 7.6,
 		borderWidth: 1,
 		shadowOpacity: 0,

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

@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
@@ -161,7 +161,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	const handleBusinessClick = (selectedBusiness: any) => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {
@@ -229,17 +229,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						)}
 						{(!isCustomLayout) && !hideBusinessOffer && (
 							getBusinessOffer((business?.offers)) &&
-							<OfferBox>
+							<OfferBox
+								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
+								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
+							>
 								<OText
 									size={10}
 									weight={'400'}
+									color={theme.colors.textThird}
 									numberOfLines={2}
 									ellipsizeMode='tail'
 									lineHeight={13}
 								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
 							</OfferBox>
 						)}
-						<BusinessState>
+						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
 									<OText

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

@@ -106,7 +106,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
+              enableIntersection={!isFiltMode}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -135,7 +135,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
+                      enableIntersection={!isFiltMode}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -237,7 +237,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
+                      enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -45,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { vibrateApp } from '../../utils';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -322,7 +323,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [isFocused])
 
-
   useEffect(() => {
     function onKeyboardDidShow(e: KeyboardEvent) {
       setKeyboardHeight(e?.endCoordinates?.height);

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

@@ -53,7 +53,7 @@ import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
-import { getTypesText } from '../../utils';
+import { getTypesText, vibrateApp } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
 import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
 

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

@@ -46,6 +46,7 @@ import { AppleLogin } from '../AppleLogin';
 import { Otp } from './Otp'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Alert from '../../../../../src/providers/AlertProvider'
+import { vibrateApp } from '../../utils';
 
 const LoginFormUI = (props: LoginParams) => {
 	const {

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

@@ -148,6 +148,18 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
+          {ordersLength?.preordersLength > 0 && (
+            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+              <OrdersOption
+                {...props}
+                preOrders
+                ordersLength={ordersLength}
+                setOrdersLength={setOrdersLength}
+                setRefreshOrders={setRefreshOrders}
+                refreshOrders={refreshOrders}
+              />
+            </View>
+          )}
           <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}

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

@@ -99,7 +99,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			return false
 		})
 		setOrders(orders)
-	}, [_orders?.length])
+	}, [JSON.stringify(_orders)])
 
 	const onProductClick = (product: any) => {
 		if (product?.product_id && product?.category_id && product?.businessId &&
@@ -186,6 +186,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		} else {
+			setOrdersLength && setOrdersLength({ ...ordersLength, preordersLength: updateOrders?.length })
 		}
 	}, [_orders, activeOrders, preOrders])
 

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

@@ -9,8 +9,7 @@ import {
 	I18nManager,
 	SafeAreaView,
 	Platform,
-	Button,
-	Vibration
+	Button
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -56,7 +55,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList } from '../../utils';
+import { orderTypeList, vibrateApp } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -235,7 +234,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return

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

@@ -41,8 +41,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const iconsSize = isChewLayout ? 20 : 16
+	const iconsSize = 20
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
@@ -117,7 +116,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_l}
 									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 									style={styles.inverse}
 								/>
 							</Circle>
@@ -125,14 +125,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_f}
 									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 							<Circle disabled={disabled} onPress={() => changePosition('right')}>
 								<OIcon
 									src={theme.images.general.half_r}
 									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 						</>

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

@@ -10,7 +10,7 @@ export const Container = styled.TouchableOpacity`
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
   padding: 10px;
-  width: 45%;
+  width: 38%;
   align-items: center;
 `
 
@@ -18,7 +18,7 @@ export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  margin-horizontal: 5px;
+  margin-right: 5px;
   flex: 1;
   width: 60px;
 `

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

@@ -38,7 +38,7 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
 import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
-import { sortInputFields } from '../../utils';
+import { sortInputFields, vibrateApp } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
 

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

@@ -68,6 +68,22 @@ const StripeElementsFormUI = (props: any) => {
 		},
 	})
 
+	const styles = StyleSheet.create({
+		container: {
+			width: '100%',
+			paddingHorizontal: 40,
+			justifyContent: 'space-between',
+			paddingBottom: 12
+		},
+		btnAddStyle: {
+			marginTop: 20,
+			borderRadius: 7.6,
+			shadowOpacity: 0,
+			height: 44,
+			marginBottom: isKeyboardShow && Platform.OS === 'ios' ? 40 : 0
+		},
+	})
+
 	let billingDetails: any = {}
 
 	if (user?.name || user?.lastname) {

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

@@ -7,11 +7,12 @@ import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput, OModal } from '../shared';
-import Alert from '../../providers/AlertProvider'
+import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { OAlert } from '../../../../../src/components/shared'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
+import { ListItem } from '../UserProfile/styles';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -31,7 +32,9 @@ export const UserFormDetailsUI = (props: any) => {
 		setWillVerifyOtpState,
 		handlePlaceOrderAsGuest,
 		isCheckout,
-		setIsOpen
+		setIsOpen,
+		handleRemoveAccount,
+		isProfile
 	} = props;
 
 	const theme = useTheme();
@@ -85,8 +88,9 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
-	const [alertState, setAlertState] = useState({ open: false, content: '' })
+	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
+	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
 	const handleSuccessSignup = (user: any) => {
@@ -202,6 +206,18 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const onRemoveAccount = () => {
+		setConfirm({
+			open: true,
+			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+			title: t('ACCOUNT_ALERT', 'Account alert'),
+			handleOnAccept: () => {
+				setConfirm({ ...confirm, open: false })
+				handleRemoveAccount && handleRemoveAccount(user?.id)
+			}
+		})
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -408,6 +424,12 @@ export const UserFormDetailsUI = (props: any) => {
 							)}
 						</UDWrapper>
 					)}
+				{isProfile && (
+					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
+						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
+						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+					</ListItem>
+				)}
 				{validationFields?.loading && (
 					<UDLoader>
 						<OText size={12}>{t('LOADING', 'Loading')}</OText>
@@ -474,7 +496,14 @@ export const UserFormDetailsUI = (props: any) => {
 					/>
 				</ScrollView>
 			</OModal>
-			
+			<OAlert
+				open={confirm.open}
+				title={confirm.title}
+				content={confirm.content}
+				onAccept={confirm.handleOnAccept}
+				onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+				onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+			/>
 		</>
 	);
 };

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

@@ -35,7 +35,6 @@ import {
 } from './styles';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import styled from 'styled-components';
 import ToggleSwitch from 'toggle-switch-react-native';
 
 const ProfileListUI = (props: ProfileParams) => {
@@ -108,8 +107,6 @@ const ProfileListUI = (props: ProfileParams) => {
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
-	const isAdmin = user?.level === 0
-
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
@@ -143,19 +140,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
-		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
-	}
-
-	const onRemoveAccount = () => {
-		setConfirm({
-			open: true,
-			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
-			title: t('ACCOUNT_ALERT', 'Account alert'),
-			handleOnAccept: () => {
-				setConfirm({ ...confirm, open: false })
-				handleRemoveAccount && handleRemoveAccount(user?.id)
-			}
-		})
+		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
+		handleRemoveAccount
 	}
 
 	useEffect(() => {

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

@@ -297,7 +297,7 @@ const ProfileUI = (props: ProfileParams) => {
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
-									style={{ height: 60, width: 80, borderRadius: 8 }}
+									style={{ height: 80, width: 80, borderRadius: 8 }}
 									source={{
 										uri: user?.photo,
 										priority: FastImage.priority.normal,
@@ -320,6 +320,7 @@ const ProfileUI = (props: ProfileParams) => {
 					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
 					<UserFormDetailsUI
 						{...props}
+						isProfile
 						isEdit
 						setWillVerifyOtpState={setWillVerifyOtpState}
 					/>

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

@@ -373,8 +373,8 @@ export interface OrdersOptionParams {
 	preOrders?: boolean,
 	reorderState?: any,
 	handleReorder?: (orderId: number) => {},
-	setOrdersLength?: ({ activeOrdersLength, previousOrdersLength }: { activeOrdersLength: number, previousOrdersLength: number }) => void,
-	ordersLength: { activeOrdersLength: number, previousOrdersLength: number },
+	setOrdersLength?: ({ activeOrdersLength, previousOrdersLength, preordersLength }: { activeOrdersLength: number, previousOrdersLength: number, preordersLength: number }) => void,
+	ordersLength: { activeOrdersLength: number, previousOrdersLength: number, preordersLength: number },
 	setSelectedOrderId?: any,
 	setOpenMessges?: any,
 	loadMoreStatus?: boolean,

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

@@ -4,6 +4,7 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 const [languageState, t] = useLanguage();
 const theme = useTheme()
@@ -612,3 +613,13 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
+
+export const vibrateApp = (impact ?: string) => {
+  const options = {
+    enableVibrateFallback: true,
+    ignoreAndroidSystemSettings: false
+  };
+
+  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+
+}