ordering-ui-react-native 0.15.35 → 0.15.38

package/package.json

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

package/themes/original/index.tsx

@@ -7,11 +7,15 @@ import { SignupForm } from './src/components/SignupForm';
 import { ActiveOrders } from './src/components/ActiveOrders';
 import { AddressList } from './src/components/AddressList';
 import { AppleLogin } from './src/components/AppleLogin';
+import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
+import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
+import { BusinessProductsList } from './src/components/BusinessProductsList';
 import { BusinessesListing } from './src/components/BusinessesListing';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
 import { CartContent } from './src/components/CartContent';
 import { BusinessCart } from './src/components/BusinessCart';
 import { Checkout } from './src/components/Checkout';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
@@ -33,6 +37,7 @@ import { HelpOrder } from './src/components/HelpOrder';
 import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { SearchBar } from './src/components/SearchBar';
 import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
@@ -94,7 +99,7 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
-  Messages,
+  	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
@@ -108,6 +113,11 @@ export {
 	UpsellingProducts,
 	UserVerification,
 	BusinessListingSearch,
+	BusinessBasicInformation,
+	BusinessProductsCategories,
+	BusinessProductsList,
+	FloatingButton,
+	SearchBar,
 
 	// OComponents
 	Toast,

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

@@ -4,6 +4,7 @@ import {
 	useUtils,
 	useOrder,
 	useLanguage,
+	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, View } from 'react-native';
@@ -44,6 +45,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const [{ configs }] = useConfig();
+	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 
 	const styles = StyleSheet.create({
 		headerStyle: {
@@ -112,7 +115,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	};
 
 	const handleBusinessClick = (selectedBusiness: any) => {
-		if (business?.open) handleClick && handleClick(selectedBusiness)
+		if (business?.open || !isPreOrderSetting) handleClick && handleClick(selectedBusiness)
 		else {
 			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
 		}
@@ -189,9 +192,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</View>
 					) : (
 						<View style={styles.bullet}>
-							<OText size={10} color={theme.colors.textSecondary}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
-							</OText>
+							{orderState?.options?.type === 1 && (
+								<OText size={10} color={theme.colors.textSecondary}>
+									{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+								</OText>
+							)}
 							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 								orderState?.options?.type === 1
 									? (businessDeliveryTime ?? business?.delivery_time)

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

@@ -137,6 +137,10 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     }
   }, [filters, openFilters])
 
+  useEffect(() => {
+    handleSearchbusinessAndProducts(true)
+  }, [])
+
   const MaxSectionItem = ({ title, options, filter }: any) => {
     const parseValue = (option: number) => {
       return filter === 'max_distance'

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
 import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
@@ -19,7 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const {top} = useSafeAreaInsets()
+  const { top } = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -36,7 +36,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
       height: 44,
       width: '100%'
     }
-	})
+  })
 
   const dropDownIcon = () => {
     return (
@@ -48,12 +48,18 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
     )
   }
 
+  useEffect(() => {
+    if (!businessMenuList?.loading && businessMenuList?.menus?.length === 1){
+      setMenu(businessMenuList?.menus[0])
+    }
+  }, [businessMenuList?.menus])
+
   return (
     <>
       {businessMenuList.loading ? (
         <Placeholder Animation={Fade}>
           <View>
-            <PlaceholderLine height={44}/>
+            <PlaceholderLine height={44} />
           </View>
         </Placeholder>
       ) : (
@@ -67,6 +73,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 onSelect={(selectedItem, index) => {
                   setMenu(selectedItem)
                 }}
+                defaultValue={businessMenuList?.menus?.length === 1 && businessMenuList?.menus[0]}
                 buttonTextAfterSelection={(selectedItem, index) => {
                   return selectedItem.name
                 }}

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

@@ -51,7 +51,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
-  const {top} = useSafeAreaInsets()
+  const { top } = useSafeAreaInsets()
+  const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
   const styles = StyleSheet.create({
     container: {
       height: windowHeight,
@@ -373,78 +374,80 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </MenuWrapper>
         )}
-        <OrderTimeWrapper>
-          <OText
-            size={16}
-            style={{
-              fontWeight: '600',
-              lineHeight: 24
-            }}
-          >
-            {t('ORDER_TIME', 'Order time')}
-          </OText>
-          <View style={{ flex: 1 }}>
-            {selectDate && datesWhitelist[0]?.start !== null && (
-              <CalendarStrip
-                scrollable
-                style={styles.calendar}
-                calendarHeaderContainerStyle={styles.calendarHeaderContainer}
-                calendarHeaderStyle={styles.calendarHeader}
-                dateNumberStyle={styles.dateNumber}
-                dateNameStyle={styles.dateName}
-                iconContainer={{ flex: 0.1 }}
-                highlightDateNameStyle={styles.highlightDateName}
-                highlightDateNumberStyle={styles.highlightDateNumber}
-                dayContainerStyle={{ height: '100%' }}
-                highlightDateContainerStyle={{ height: '100%' }}
-                calendarHeaderFormat='MMMM, YYYY'
-                iconStyle={{ borderWidth: 1 }}
-                selectedDate={selectDate}
-                datesWhitelist={datesWhitelist}
-                disabledDateNameStyle={styles.disabledDateName}
-                disabledDateNumberStyle={styles.disabledDateNumber}
-                disabledDateOpacity={0.6}
-                onDateSelected={(date) => onSelectDate(date)}
-                leftSelector={<LeftSelector />}
-                rightSelector={<RightSelector />}
-              />
-            )}
-          </View>
-          <TimeListWrapper nestedScrollEnabled={true}>
-            {(isEnabled && timeList?.length > 0) ? (
-              <TimeContentWrapper>
-                {timeList.map((time: any, i: number) => (
-                  <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                    <TimeItem active={timeSelected === time.value}>
-                      <OText
-                        size={14}
-                        color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
-                        style={{
-                          lineHeight: 24
-                        }}
-                      >{time.text}</OText>
-                    </TimeItem>
-                  </TouchableOpacity>
-                ))}
-                {timeList.length % 3 === 2 && (
-                  <TimeItem style={{ backgroundColor: 'transparent' }} />
-                )}
-              </TimeContentWrapper>
-            ) : (
-              <OText
-                size={16}
-                style={{
-                  fontWeight: '600',
-                  lineHeight: 24,
-                  marginBottom: 12,
-                  textAlign: 'center'
-                }}
-              >
-                {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
-              </OText>
-            )}
-          </TimeListWrapper>
-        </OrderTimeWrapper>
+        {showOrderTime && (
+          <OrderTimeWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24
+              }}
+            >
+              {t('ORDER_TIME', 'Order time')}
+            </OText>
+            <View style={{ flex: 1 }}>
+              {selectDate && datesWhitelist[0]?.start !== null && (
+                <CalendarStrip
+                  scrollable
+                  style={styles.calendar}
+                  calendarHeaderContainerStyle={styles.calendarHeaderContainer}
+                  calendarHeaderStyle={styles.calendarHeader}
+                  dateNumberStyle={styles.dateNumber}
+                  dateNameStyle={styles.dateName}
+                  iconContainer={{ flex: 0.1 }}
+                  highlightDateNameStyle={styles.highlightDateName}
+                  highlightDateNumberStyle={styles.highlightDateNumber}
+                  dayContainerStyle={{ height: '100%' }}
+                  highlightDateContainerStyle={{ height: '100%' }}
+                  calendarHeaderFormat='MMMM, YYYY'
+                  iconStyle={{ borderWidth: 1 }}
+                  selectedDate={selectDate}
+                  datesWhitelist={datesWhitelist}
+                  disabledDateNameStyle={styles.disabledDateName}
+                  disabledDateNumberStyle={styles.disabledDateNumber}
+                  disabledDateOpacity={0.6}
+                  onDateSelected={(date) => onSelectDate(date)}
+                  leftSelector={<LeftSelector />}
+                  rightSelector={<RightSelector />}
+                />
+              )}
+            </View>
+            <TimeListWrapper nestedScrollEnabled={true}>
+              {(isEnabled && timeList?.length > 0) ? (
+                <TimeContentWrapper>
+                  {timeList.map((time: any, i: number) => (
+                    <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
+                      <TimeItem active={timeSelected === time.value}>
+                        <OText
+                          size={14}
+                          color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
+                          style={{
+                            lineHeight: 24
+                          }}
+                        >{time.text}</OText>
+                      </TimeItem>
+                    </TouchableOpacity>
+                  ))}
+                  {timeList.length % 3 === 2 && (
+                    <TimeItem style={{ backgroundColor: 'transparent' }} />
+                  )}
+                </TimeContentWrapper>
+              ) : (
+                <OText
+                  size={16}
+                  style={{
+                    fontWeight: '600',
+                    lineHeight: 24,
+                    marginBottom: 12,
+                    textAlign: 'center'
+                  }}
+                >
+                  {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+                </OText>
+              )}
+            </TimeListWrapper>
+          </OrderTimeWrapper>
+        )}
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{ color: 'white' }}

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

@@ -17,6 +17,7 @@ import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
+import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
 import {
 	TopHeader,
 	WrapSearchBar,
@@ -50,7 +51,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
+	const [orderState, { clearCart }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
@@ -163,6 +164,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
 
+	const removeCartByReOrder = async () => {
+		const removeCardId = await _retrieveStoreData('remove-cartId')
+		if (currentCart && removeCardId) {
+			clearCart(removeCardId)
+			_removeStoreData('remove-cartId')
+			showToast(ToastType.Info, t('PRODUCT_REMOVED', 'Products removed from cart'))
+		}
+	}
+
+	useEffect(() => {
+		removeCartByReOrder()
+	}, [])
+
 	return (
 		<SafeAreaView
 			style={{ flex: 1 }}

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

@@ -61,7 +61,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleChangeSearch,
 		businessId
 	} = props;
-
+	
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -120,7 +120,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
-
+	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
 	// const panResponder = useRef(
 	// 	PanResponder.create({
@@ -266,25 +266,27 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								style={{ marginStart: 8 }}
 							/>
 						</WrapMomentOption>
-						<WrapMomentOption
-							onPress={() => handleMomentClick()}>
-							<OText
-								size={12}
-								numberOfLines={1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}>
-								{orderState.options?.momentß
-									? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-									: t('ASAP_ABBREVIATION', 'ASAP')}
-							</OText>
-							{isPreorderEnabled && (
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							)}
-						</WrapMomentOption>
+						{isPreOrderSetting && (
+							<WrapMomentOption
+								onPress={() => handleMomentClick()}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}>
+									{orderState.options?.momentß
+										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+										: t('ASAP_ABBREVIATION', 'ASAP')}
+								</OText>
+								{isPreorderEnabled && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
+							</WrapMomentOption>
+						)}
 
 						{!businessId && (
 							<SearchBar

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

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import { _setStoreData } from '../../providers/StoreUtil';
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
+  useOrder,
   useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -87,9 +89,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [{ configs }] = useConfig();
+  const [{ carts }] = useOrder()
+
   const [isReviewed, setIsReviewed] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-
   const { order, businessData } = props.order;
 
   const walletName: any = {
@@ -362,7 +365,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     if (reorderState?.error) {
-      navigation.navigate('Business', { store: businessData?.slug })
+      const _businessId = 'businessId:' + businessData?.id
+      const _uuid = carts[_businessId]?.uuid
+      if (_uuid) {
+        _setStoreData('remove-cartId', JSON.stringify(_uuid))
+        navigation.navigate('Business', { store: businessData?.slug })
+      }
     }
     if (!reorderState?.error && reorderState?.result?.uuid) {
       onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })

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

@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useState } from 'react';
-
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
 				if (img?.video) {
 					const keys = img?.video.split('/')
 					let _videoId = keys[keys.length - 1]
+
 					if (_videoId.includes('watch')) {
-						const __url = _videoId.split('=')[1]
-						_videoId = __url
+					  const __url = _videoId.split('=')[1]
+					  _videoId = __url
+					} else if (_videoId.includes('?')) {
+					  const __url = _videoId.split('?')[0]
+					  _videoId = __url
+					}
+
+					if (_videoId.search(/&/i) >= 0) {
+					  _videoId = _videoId.split('&')[0]
+					} else if (_videoId.search(/\?/i) >= 0) {
+					  _videoId = _videoId.split('?')[0]
 					}
-					if (_videoId.includes('?')) {
-						const __url = _videoId.split('?')[0]
-						_videoId = __url
+					if ((_videoId.length === 11)) {
+					  videoList.push(_videoId)
 					}
-					videoList.push(_videoId)
 				}
 			}
 		}
@@ -338,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
 					</OText>
 				</TouchableOpacity>
 			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}