ordering-ui-react-native 0.15.2 → 0.15.4-release

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

@@ -61,7 +61,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleChangeSearch,
 		businessId
 	} = props;
-
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -120,7 +119,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({
@@ -166,25 +165,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return R * c
 	}
 
-	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
-			const fb = businessesList.businesses.filter((b) => b.featured == true);
-			const ary = [];
-			while (fb.length > 0) {
-				ary.push(fb.splice(0, 2));
-			}
-			setFeaturedBusinesses(ary);
-		}
-	}, [businessesList.businesses]);
-
 	const resetInactivityTimeout = () => {
 		clearTimeout(timerId.current)
 		timerId.current = setInterval(() => {
 			getBusinesses(true)
-		}, 300000)
+		}, 120000)
 	}
 
 	useEffect(() => {
+		if (!businessesList?.loading) {
+			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
+			const ary = [];
+			while (fb.length > 0) {
+				ary.push(fb.splice(0, 2));
+			}
+			setFeaturedBusinesses(ary);
+		}
 		resetInactivityTimeout()
 	}, [businessesList.loading])
 
@@ -207,27 +203,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
-	useEffect(() => {
-		const onFocusApp = (nextAppState: any) => {
-			if (
-				appState.current.match(/inactive|background/) &&
-				nextAppState === "active"
-			) {
-				getBusinesses(true);
-			}
-			appState.current = nextAppState;
-			setAppStateVisible(appState.current);
-		}
-
-		AppState.addEventListener("change", onFocusApp);
-		return () => {
-			AppState.removeEventListener('change', onFocusApp);
-		};
-	}, [])
-
 	useFocusEffect(
 		useCallback(() => {
-			getBusinesses(true)
 			resetInactivityTimeout()
 			return () => clearTimeout(timerId.current)
 		}, [navigation])
@@ -288,25 +265,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
@@ -338,7 +317,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
@@ -401,6 +380,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
 							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
 						/>
 					)
 				)}

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

@@ -24,6 +24,7 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
+import { PlaceSpot } from '../PlaceSpot'
 
 const CartUI = (props: any) => {
   const {
@@ -54,12 +55,14 @@ const CartUI = (props: any) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const [openPlaceModal, setOpenPlaceModal] = useState(false)
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
+  const placeSpotTypes = [3, 4]
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -353,6 +356,24 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
             </OSTotal>
+            {placeSpotTypes.includes(orderState?.options?.type) && (
+              <OSTable style={{ marginTop: 15 }}>
+                <OText size={14} lineHeight={21} weight={'600'}>
+                  {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}
+                </OText>
+                <TouchableOpacity onPress={() => setOpenPlaceModal(true)}>
+                  <OText
+                    size={14}
+                    lineHeight={21}
+                    weight={'600'}
+                    color={theme.colors.primary}
+                    style={{ textDecorationLine: 'underline' }}
+                  >
+                    {t('EDIT', 'Edit')}
+                  </OText>
+                </TouchableOpacity>
+              </OSTable>
+            )}
             {cart?.status !== 2 && (
               <OSTable>
                 <View style={{ width: '100%', marginTop: 20 }}>
@@ -425,8 +446,6 @@ const CartUI = (props: any) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}
@@ -434,14 +453,26 @@ const CartUI = (props: any) => {
           products={cart?.products}
         />
       </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 })}
+      <OModal
+        open={openPlaceModal}
+        title={t('CHOOSE_YOUR_SPOT', 'Choose your spot')}
+        onClose={() => setOpenPlaceModal(false)}
+        entireModal
+      >
+        <PlaceSpot
+          cart={cart}
+          isOpenPlaceSpot={openPlaceModal}
+          setOpenPlaceModal={setOpenPlaceModal}
         />
+      </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 })}
+      />
     </CContainer>
   )
 }

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

@@ -22,9 +22,9 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
+					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
+					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (

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

@@ -39,7 +39,8 @@ import {
 	ChCart,
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
-	WalletPaymentOptionContainer
+	WalletPaymentOptionContainer,
+	CartHeader
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -131,9 +132,11 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-
-
+	
+	const placeSpotTypes = [3, 4]
 	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -149,6 +152,12 @@ const CheckoutUI = (props: any) => {
 		}
 	})
 
+	const handleMomentClick = () => {
+		if (isPreOrder) {
+			navigation.navigate('MomentOption')
+		}
+	}
+
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -193,8 +202,8 @@ const CheckoutUI = (props: any) => {
 		if (
 			!user?.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
-        configs?.verification_phone_required?.value === '1')
+				validationFields?.fields?.checkout?.cellphone?.required) ||
+				configs?.verification_phone_required?.value === '1')
 		) {
 			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
 		}
@@ -244,8 +253,8 @@ const CheckoutUI = (props: any) => {
 					isVertical
 					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 					title={t('CHECKOUT', 'Checkout')}
-					style={styles.pagePadding}
-					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
+					btnStyle={{ marginLeft: 40, padding: 40 }}
 				/>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
@@ -260,7 +269,7 @@ const CheckoutUI = (props: any) => {
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
-								onPress={() => navigation.navigate('MomentOption')}
+								onPress={() => handleMomentClick()}
 								disabled={loading}
 							>
 								<OText size={12} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textSecondary}>
@@ -268,11 +277,13 @@ const CheckoutUI = (props: any) => {
 										? parseDate(options?.moment, { outputFormat: configs?.dates_moment_format?.value })
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
+								{isPreOrder && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
 							</CHMomentWrapper>
 						</ChHeader>
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
@@ -535,17 +546,17 @@ const CheckoutUI = (props: any) => {
 									onNavigationRedirect={onNavigationRedirect}
 									paySelected={paymethodSelected}
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
-									handlePlaceOrder={handlePlaceOrder}
 								/>
 							</ChPaymethods>
 						</ChSection>
 					)}
 
-					{!cartState.loading && cart && isWalletEnabled && (
+					{!cartState.loading && cart && isWalletEnabled && businessDetails?.business?.configs && (
 						<WalletPaymentOptionContainer>
 							<PaymentOptionWallet
 								cart={cart}
 								businessId={cart?.business_id}
+								businessConfigs={businessDetails?.business?.configs}
 							/>
 						</WalletPaymentOptionContainer>
 					)}
@@ -561,9 +572,28 @@ const CheckoutUI = (props: any) => {
 									/>
 								) : (
 									<>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-											{t('ORDER_SUMMARY', 'Order Summary')}
-										</OText>
+										<CartHeader>
+											<OText
+												size={16}
+												lineHeight={24}
+												color={theme.colors.textNormal}
+												style={{ fontWeight: '500' }}
+											>
+												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
+											</OText>
+											<TouchableOpacity
+												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
+											>
+												<OText
+													size={10}
+													lineHeight={15}
+													color={theme.colors.primary}
+													style={{ textDecorationLine: 'underline' }}
+												>
+													{t('ADD_PRODUCTS', 'Add products')}
+												</OText>
+											</TouchableOpacity>
+										</CartHeader>
 										{props.isFranchiseApp && (
 											<TouchableOpacity
 												onPress={() => setOpenChangeStore(true)}
@@ -619,6 +649,14 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
 									</OText>
 								)}
+								{placeSpotTypes.includes(options?.type) && !cart?.place && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}
@@ -638,8 +676,8 @@ const CheckoutUI = (props: any) => {
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
 					handleClick={() => handlePlaceOrder()}
-					isSecondaryBtn={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
-					disabled={loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash || cart?.subtotal < cart?.minimum}
+					isSecondaryBtn={isDisabledButtonPlace}
+					disabled={isDisabledButtonPlace}
 					btnText={cart?.subtotal >= cart?.minimum
 						? (
 							placing
@@ -667,19 +705,6 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
-			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
-				<PaymentOptionsWebView
-					onNavigationRedirect={onNavigationRedirect}
-					uri={`https://test-square-f50f7.web.app`}
-					user={user}
-					token={token}
-					cart={cart}
-					currency={currency}
-					webviewPaymethod={webviewPaymethod}
-					setShowGateway={setShowGateway}
-					locationId={'L1NGAY5M6KJRX'}
-				/>
-			)}
 		</>
 	)
 }

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

@@ -105,3 +105,10 @@ export const DeliveryOptionItem = styled.View`
   flex-direction: row;
   background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
 `;
+
+export const CartHeader = styled.View`
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`

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

@@ -87,6 +87,7 @@ const CouponControlUI = (props: any) => {
 			) : (
 				<CCWrapper>
 					<OInput
+						value={couponInput}
 						placeholder={t('DISCOUNT_COUPON', 'Discount coupon')}
 						onChange={(e: any) => onChangeInputCoupon(e)}
 						style={styles.inputsStyle}

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

@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
 	return (
 		<DTContainer>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (				
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}

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

@@ -65,18 +65,6 @@ const ForgotPasswordUI = (props: any) => {
 		}
 	}, [formState])
 
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors)
-			let stringError = ''
-			list.map((item: any, i: number) => {
-				stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
-			})
-			showToast(ToastType.Error, stringError)
-		}
-	}, [errors])
-
 	return (
 		<Container>
 			<NavBar
@@ -100,6 +88,14 @@ const ForgotPasswordUI = (props: any) => {
 					{t('FORGOT_PASSWORD_TEXT_MESSAGE', "Enter your email address and we'll sent a link to reset your password.")}
 				</OText>
 				<FormInput>
+					{errors?.email && (
+						<OText
+							size={14}
+							color={theme.colors.danger5}
+							weight={'normal'}>
+							{errors?.email?.message}{errors?.email?.type === 'required' && '*'}
+						</OText>
+					)}
 					<Controller
 						control={control}
 						render={({ onChange, value }: any) => (