ordering-ui-react-native 0.12.21 → 0.12.25

package/themes/single-business/src/components/BusinessProductsListing/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
+import React, { useEffect, useState, useRef } from 'react'
+import { View, StyleSheet, SafeAreaView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -7,6 +7,8 @@ import {
 	useOrder,
 	useSession,
 	useUtils,
+  useToast,
+  ToastType
 } from 'ordering-components/native'
 import { OButton, OModal } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -27,6 +29,8 @@ import { ProductForm } from '../ProductForm'
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { _setStoreData } from '../../providers/StoreUtil';
 
+const PIXELS_TO_SCROLL = 1000
+
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
 		navigation,
@@ -41,7 +45,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		featuredProducts,
 		errorQuantityProducts,
 		header,
-		logo
+		logo,
+    getNextProducts
 	} = props
 
 	const theme = useTheme();
@@ -49,6 +54,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ auth }] = useSession()
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
+  const [ ,{showToast}] = useToast()
 	const { top, bottom } = useSafeAreaInsets()
 
 	const styles = StyleSheet.create({
@@ -84,6 +90,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [curProduct, setCurProduct] = useState(null)
 	const [openUpselling, setOpenUpselling] = useState(false)
 	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const scrollViewRef = useRef<any>(null)
+
+  const [categoriesLayout, setCategoriesLayout] = useState<any>({})
+	const [productListLayout, setProductListLayout] = useState<any>(null)
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(null)
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
@@ -122,6 +133,28 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		setOpenUpselling(false)
 	}
 
+  const handleScroll = ({ nativeEvent }: any) => {
+		const scrollOffset = nativeEvent.contentOffset.y
+		if (businessState?.business?.lazy_load_products_recommended) {
+			const height = nativeEvent.contentSize.height
+			const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+			if (scrollOffset + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+				getNextProducts()
+				showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+			}
+		} else {
+			if (!scrollOffset || !categoriesLayout || !productListLayout) return
+			for (const key in categoriesLayout) {
+				const categoryOffset = categoriesLayout[key].y + productListLayout?.y - 70
+				if (categoryOffset - 50 <= scrollOffset && scrollOffset <= categoryOffset + 50) {
+					if (selectedCategoryId !== key) {
+						setSelectedCategoryId(key)
+					}
+				}
+			}
+		}
+	}
+
 	useEffect(() => {
 		if (!orderState.loading) {
 			handleCloseProductModal()
@@ -131,16 +164,23 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	useEffect(() => {
 		if (businessState?.business?.logo) {
 			_setStoreData('b_logo', {businessLogo: businessState.business?.logo});
-		} else {
-			console.log('logo undefined!!')
 		}
 	}, [businessState])
 
 	return (
-		<>
-			<BusinessProductsListingContainer style={styles.mainContainer} isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}>
+		<SafeAreaView
+      style={{ flex: 1 }}
+    >
+			<BusinessProductsListingContainer
+        stickyHeaderIndices={[2]}
+        style={styles.mainContainer}
+				ref={scrollViewRef}
+				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
+				onScroll={(e: any) => handleScroll(e)}
+				scrollEventThrottle={16}
+      >
 				<WrapHeader>
-					{!auth && 
+					{!auth &&
 						<TopHeader style={{top: top}}>
 							<OButton
 								imgLeftSrc={theme.images.general.arrow_left}
@@ -173,14 +213,30 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</WrapSearchBar>
 						{!(business?.categories?.length === 0) && (
 							<BusinessProductsCategories
-								categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+								categories={[
+                  { id: null, name: t('ALL', 'All') },
+                  { id: 'featured', name: t('FEATURED', 'Featured') },
+                  ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)
+                ]}
 								categorySelected={categorySelected}
 								onClickCategory={handleChangeCategory}
 								featured={featuredProducts}
 								openBusinessInformation={openBusinessInformation}
+                scrollViewRef={scrollViewRef}
+                productListLayout={productListLayout}
+								categoriesLayout={categoriesLayout}
+								selectedCategoryId={selectedCategoryId}
+                setSelectedCategoryId={setSelectedCategoryId}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 							/>
 						)}
-						<WrapContent>
+					</>
+				)}
+        {!loading && business?.id && (
+					<>
+            <WrapContent
+							onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+						>
 							<BusinessProductsList
 								categories={[
 									{ id: null, name: t('ALL', 'All') },
@@ -198,10 +254,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								handleClearSearch={handleChangeSearch}
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
+                categoriesLayout={categoriesLayout}
+								setCategoriesLayout={setCategoriesLayout}
 							/>
 						</WrapContent>
-					</>
-				)}
+          </>
+        )}
 				{loading && !error && (
 					<>
 						<BusinessProductsCategories
@@ -256,20 +314,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onSave={handlerProductAction}
 				/>
 			</OModal>
-			{/* {openUpselling && (
-				<UpsellingProducts
-					businessId={currentCart?.business_id}
-					business={currentCart?.business}
-					cartProducts={currentCart?.products}
-					cart={currentCart}
-					handleUpsellingPage={handleUpsellingPage}
-					handleCloseUpsellingPage={handleCloseUpsellingPage}
-					openUpselling={openUpselling}
-					canOpenUpselling={canOpenUpselling}
-					setCanOpenUpselling={setCanOpenUpselling}
-				/>
-			)} */}
-		</>
+    </SafeAreaView>
 	)
 }
 

package/themes/single-business/src/components/LoginForm/index.tsx

@@ -136,6 +136,10 @@ const LoginFormUI = (props: LoginParams) => {
       fontWeight: 'normal',
       fontSize: 16,
     },
+    linkTxt: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    }
 	});
 
 	const inputRef = useRef<any>({});
@@ -425,6 +429,15 @@ const LoginFormUI = (props: LoginParams) => {
 							}}
 							defaultValue=""
 						/>
+
+            {onNavigationRedirect && forgotButtonText && (
+              <Pressable onPress={() => onNavigationRedirect('Forgot')}>
+                <OText size={14} mBottom={18}>
+                  {forgotButtonText}
+                </OText>
+              </Pressable>
+            )}
+
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginButtonText}
@@ -438,13 +451,18 @@ const LoginFormUI = (props: LoginParams) => {
 					</FormInput>
 				)}
 
-				{onNavigationRedirect && forgotButtonText && (
-					<Pressable onPress={() => onNavigationRedirect('Forgot')}>
-						<OText size={16} mBottom={18}>
-							{forgotButtonText}
-						</OText>
-					</Pressable>
-				)}
+        {onNavigationRedirect && registerButtonText && (
+          <View style={loginStyle.linkTxt}>
+            <OText size={14} space>
+              {t('NEW_ON_PLATFORM', 'New on Ordering?')}
+            </OText>
+            <Pressable onPress={() => onNavigationRedirect('Signup')}>
+              <OText size={14} color={theme.colors.primary}>
+                {registerButtonText}
+              </OText>
+            </Pressable>
+          </View>
+        )}
 
 				{useLoginByCellphone &&
 					loginTab === 'cellphone' &&
@@ -453,13 +471,24 @@ const LoginFormUI = (props: LoginParams) => {
 					(configs?.twilio_service_enabled?.value === 'true' ||
 						configs?.twilio_service_enabled?.value === '1') && (
 						<>
-							<OrSeparator>
-								<LineSeparator />
-								<OText size={18} mRight={20} mLeft={20}>
-									{t('OR', 'Or')}
-								</OText>
-								<LineSeparator />
-							</OrSeparator>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 30
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
 
 							<ButtonsWrapper mBottom={20}>
 								<OButton
@@ -533,18 +562,6 @@ const LoginFormUI = (props: LoginParams) => {
 						</Placeholder>
 					</SkeletonWrapper>
 				)}
-
-				{/* {onNavigationRedirect && registerButtonText && (
-          <ButtonsWrapper>
-            <OButton
-              onClick={() => onNavigationRedirect('Signup')}
-              text={registerButtonText}
-              style={loginStyle.btnOutline}
-              borderColor={theme.colors.primary}
-              imgRightSrc={null}
-            />
-          </ButtonsWrapper>
-        )} */}
 			</FormSide>
 			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
 				<VerifyPhone

package/themes/single-business/src/components/OrderListOption/index.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+import {
+  OrdersContainer,
+  Card,
+  Information,
+  OrderInformation,
+  BusinessInformation,
+  Price,
+  OptionTitle,
+  Status,
+} from './styles';
+
+import { useTheme } from 'styled-components/native';
+import { getTextOrderStatus } from '../../utils';
+import { OButton, OText } from '../shared'
+
+export const OrderListOption = (props: any) => {
+  const {
+    orders,
+    titleContent,
+    typeStyle,
+    allowedOrderStatus,
+    isLoadingReorder,
+    handleReorder,
+    onNavigationRedirect,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate, parsePrice }] = useUtils();
+
+  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])
+
+  const handleClickCard = (uuid: string) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  };
+
+  const handleReviewState = (orderId: any) => {
+    if (!orderId || isReviewedOrders.includes(orderId)) return
+    setIsReviewedOrders([...isReviewedOrders, orderId])
+  }
+
+  const handleClickOrderReview = (order: any) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('ReviewOrder', {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        },
+        handleReviewState: handleReviewState
+      });
+  };
+
+  const handleReorderClick = (id: number) => {
+    setReorderSelected(id);
+    handleReorder(id);
+  };
+
+  const styles = StyleSheet.create({
+    reorderbutton: {
+      height: 23,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primaryContrast,
+      borderWidth: 0,
+      width: 80
+    },
+    reorderLoading: {
+      width: 80,
+      height: 23,
+      borderRadius: 23,
+      paddingHorizontal: 10,
+    },
+    reviewButton: {
+      width: 80,
+      height: 23,
+      maxHeight: 23,
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 10,
+      borderRadius: 23,
+      borderWidth: 1,
+      borderColor: theme.colors.primaryContrast,
+    },
+    buttonText: {
+      color: theme.colors.primary,
+      fontSize: 10,
+      marginLeft: 2,
+      marginRight: 2,
+    },
+  });
+
+  const OrderStyleOne = ({ order }: any) => (
+    <Card
+      activeOpacity={1}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      <Information>
+        <OrderInformation>
+          <BusinessInformation>
+            <OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
+              {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+            </OText>
+            <OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+            <OText
+              color={theme.colors.primary}
+              size={10}
+              lineHeight={15}
+              weight={400}
+              numberOfLines={2}>
+              {getTextOrderStatus(order.status, t)?.value}
+            </OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={12} lineHeight={18}>
+              {parsePrice(order?.summary?.total || order?.total)}
+            </OText>
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
+  );
+
+  const OrderStyleTwo = ({ order }: any) => (
+    <TouchableOpacity
+      onPress={() => handleClickCard(order?.uuid)}
+      activeOpacity={1}
+      style={{ flexDirection: 'row' }}
+    >
+      <Card themetwo>
+        <Information themetwo>
+          <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+            {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+          </OText>
+          <OText
+            size={10}
+            lineHeight={21}
+            color={theme.colors.textSecondary}
+            style={{ marginVertical: 3 }}
+            numberOfLines={1}>
+            {order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}
+          </OText>
+          <OText
+            color={theme.colors.primary}
+            size={10}
+            lineHeight={15}
+            numberOfLines={1}>
+            {getTextOrderStatus(order.status, t)?.value}
+          </OText>
+        </Information>
+        <Status>
+          <OButton
+            text={t('REORDER', 'Reorder')}
+            imgRightSrc={''}
+            textStyle={styles.buttonText}
+            style={
+              isLoadingReorder && order.id === reorderSelected
+                ? styles.reorderLoading
+                : styles.reorderbutton
+            }
+            onClick={() => handleReorderClick(order.id)}
+            isLoading={isLoadingReorder && order.id === reorderSelected}
+          />
+          {allowedOrderStatus.includes(parseInt(order?.status)) &&
+            !order.review && !isReviewedOrders.includes(order?.id) &&
+            (
+              <TouchableOpacity
+                onPress={() => handleClickOrderReview(order)}
+                style={styles.reviewButton}>
+                <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                  {t('REVIEW', 'Review')}
+                </OText>
+              </TouchableOpacity>
+            )}
+        </Status>
+      </Card>
+    </TouchableOpacity>
+  )
+
+  return (
+    <>
+      <OptionTitle>
+        <OText
+          size={16}
+          color={theme.colors.textPrimary}
+          mBottom={10}
+        >
+          {titleContent}
+        </OText>
+      </OptionTitle>
+      <OrdersContainer>
+        {orders.length > 0 &&
+          orders.map((order: any, index: any) => (
+            <React.Fragment key={order?.id || order?.uuid}>
+              {typeStyle === 1 && (
+                <OrderStyleOne order={order} />
+              )}
+              {typeStyle === 2 && (
+                <OrderStyleTwo order={order} />
+              )}
+            </React.Fragment>
+          ))}
+      </OrdersContainer>
+      <View
+        style={{
+          height: 8,
+          backgroundColor: theme.colors.backgroundGray100,
+          marginBottom: 10
+        }}
+      />
+    </>
+  );
+};

package/themes/single-business/src/components/OrderListOption/styles.tsx

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components/native'
+
+export const OrdersContainer = styled.View`
+  margin-bottom: 10px;
+`
+
+export const Card = styled.TouchableOpacity`
+  ${(props: any) => props.themetwo ? css`
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+    flex-direction: row;
+    width: 100%;
+  ` : css`
+    flex: 1;
+  `};
+`
+
+export const Map = styled.View`
+  flex: 1;
+  height: 125px;
+  margin-bottom: 22px;
+`
+
+export const Information = styled.View`
+  ${(props: any) => props.themetwo ? css`
+    justify-content: center;
+    align-items: flex-start;
+    margin-end: 7px;
+    flex: 1;
+  ` : css`
+    flex-direction: row;
+    align-items: center;
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+  `};
+`
+
+export const OrderInformation = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+`
+
+export const BusinessInformation = styled.View`
+	flex-basis: 65%;
+`
+
+export const Price = styled.View`
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin-left: 10px;
+  width: 30%;
+`
+
+export const OptionTitle = styled.View`
+  margin-top: 10px;
+`
+
+export const Status = styled.View`
+  align-items: center;
+  justify-content: space-between;
+`

package/themes/single-business/src/components/OrdersListing/index.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { View, useWindowDimensions } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { useLanguage, OrderVerticalList } from 'ordering-components/native'
+import { Placeholder, PlaceholderLine, Fade } from "rn-placeholder";
+import { OButton, OText } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { OrderListOption } from '../OrderListOption'
+
+const OrdersListingUI = (props: any) => {
+  const {
+    ordersGroup,
+    reorderLoading,
+    loadMoreOrders,
+    handleReorder,
+    onNavigationRedirect,
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { height } = useWindowDimensions()
+
+  const imageFails = theme.images.general.emptyActiveOrders
+
+  return (
+    <>
+      <OText size={20} style={{ marginTop: 20 }}>
+        {t('MY_ORDERS', 'My Orders')}
+      </OText>
+
+      {!ordersGroup.error && ordersGroup.all?.orders?.length > 0 && (
+        <>
+          {ordersGroup.upcoming?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('UPCOMING', 'Upcoming')}
+              typeStyle={1}
+              orders={ordersGroup.upcoming?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.active?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('ACTIVE', 'Active')}
+              typeStyle={1}
+              orders={ordersGroup.active?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.past?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('PAST', 'Past')}
+              typeStyle={2}
+              orders={ordersGroup.past?.orders}
+              allowedOrderStatus={[1, 2, 5, 6, 10, 11, 12]}
+              isLoadingReorder={reorderLoading}
+              handleReorder={handleReorder}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {!ordersGroup.loading &&
+            ordersGroup?.pagination?.totalPages &&
+            ordersGroup?.pagination?.currentPage < ordersGroup?.pagination?.totalPages &&
+          (
+            <View>
+              <OButton
+                text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                imgRightSrc={null}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, shadowOpacity: 0, marginTop: 20 }}
+                onClick={loadMoreOrders}
+              />
+            </View>
+          )}
+        </>
+      )}
+
+      {ordersGroup.loading && (
+        <View style={{ marginTop: 20 }}>
+          {[...Array(6)].map((_, i) => (
+            <Placeholder key={i} Animation={Fade}>
+              <View style={{ width: '100%', flexDirection: 'row' }}>
+                <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+                <Placeholder>
+                  <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                  <PlaceholderLine width={50} />
+                  <PlaceholderLine width={20} />
+                </Placeholder>
+              </View>
+            </Placeholder>
+          ))}
+        </View>
+      )}
+
+      {!ordersGroup.loading && ordersGroup.all?.orders?.length === 0 && (
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={imageFails}
+          />
+        </View>
+      )}
+    </>
+  )
+}
+
+export const OrdersListing = (props: any) => {
+  const ordersProps = {
+    ...props,
+    UIComponent: OrdersListingUI,
+  }
+  return <OrderVerticalList {...ordersProps} />
+}