ordering-ui-react-native 0.16.66 → 0.16.69

package/package.json

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

package/src/components/ActiveOrders/index.tsx

@@ -48,75 +48,73 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
   }, [orders.length])
 
   const Order = ({ order }: { order: any }) => (
-    <React.Fragment>
-      <Card
-        isMiniCard={configs?.google_maps_api_key?.value}
-        onPress={() => handleClickCard(order?.uuid)}
-      >
-        {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
+    <Card
+      isMiniCard={configs?.google_maps_api_key?.value}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      {!!(configs?.google_maps_api_key?.value) && (
+        <Map>
+          <OIcon
+            url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+            height={100}
+            width={320}
+            style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+          />
+        </Map>
+      )}
+      <Information>
+        {!!order.business?.logo && (
+          <Logo>
             <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
             />
-          </Map>
+          </Logo>
         )}
-        <Information>
-          {!!order.business?.logo && (
-            <Logo>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
-          )}
-          <OrderInformation>
-            <BusinessInformation style={{ width: '60%' }}>
-              <GestureHandlerScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                  horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View>
-                    <OText
-                      size={16}
-                      numberOfLines={1}
-                      ellipsizeMode='tail'
-                    >
-                      {order.business?.name}
-                    </OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <GestureHandlerScrollView
+        <OrderInformation>
+          <BusinessInformation style={{ width: '60%' }}>
+            <GestureHandlerScrollView
                 showsVerticalScrollIndicator={false}
                 showsHorizontalScrollIndicator={false}
                 horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View style={styles.orderNumber}>
-                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}</OText>
-            </BusinessInformation>
-            <Price>
-              <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
-              {order?.status !== 0 && (
-                <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
-              )}
-            </Price>
-          </OrderInformation>
-        </Information>
-      </Card>
-    </React.Fragment>
+            >
+              <TouchableWithoutFeedback>
+                <View>
+                  <OText
+                    size={16}
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {order.business?.name}
+                  </OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <GestureHandlerScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <TouchableWithoutFeedback>
+                <View style={styles.orderNumber}>
+                  <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                  <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}</OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+            {order?.status !== 0 && (
+              <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
+            )}
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
   )
 
   return (

package/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

package/src/components/NotificationSetting/index.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import { useTheme } from 'styled-components/native';
+import { StyleSheet, View } from 'react-native';
+import {
+  openSettings,
+  checkNotifications
+} from 'react-native-permissions';
+import { useLanguage } from 'ordering-components/native'
+import { OBottomPopup, OButton, OText } from '../shared';
+interface NotificationSettingPropsParams {
+  checkNotificationStatus: { open: boolean, checked: boolean };
+  setCheckNotificationStatus: (notificationStatus: any) => void;
+}
+export const NotificationSetting = (props: NotificationSettingPropsParams) => {
+  const { checkNotificationStatus, setCheckNotificationStatus } = props
+  const theme = useTheme();
+  const [, t] = useLanguage();
+
+  const requestLocationPermission = async () => {
+    const notificationStatus = await checkNotifications()
+    if (notificationStatus?.status === 'blocked') {
+      setCheckNotificationStatus({ open: true, checked: false })
+      return
+    }
+    setCheckNotificationStatus({ open: false, checked: true })
+  };
+
+  const callOpenSettings = () => {
+    openSettings().catch(() => console.warn('cannot open settings'));
+    setCheckNotificationStatus({ open: false, checked: true })
+  }
+
+  useEffect(() => {
+    requestLocationPermission()
+  }, [])
+  return (
+    <OBottomPopup
+      open={checkNotificationStatus?.open}
+      onClose={() => setCheckNotificationStatus({ open: false, checked: true })}
+      title={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+      titleStyle={{ textAlign: 'center' }}
+      containerStyle={{ borderRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}
+    >
+      <View style={styles.container}>
+        <View style={styles.textContainer}>
+          <OText style={{ textAlign: 'center' }}>
+            {t('ACTIVE_NOTIFICATION_TO_RECEIVE_INFORMATION', 'Activate notifications to receive information about your orders')}
+          </OText>
+        </View>
+        <OButton
+          text={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          parentStyle={styles.parentStyle}
+          style={styles.button}
+          textStyle={{ color: 'white' }}
+          onClick={() => callOpenSettings()}
+        />
+      </View>
+    </OBottomPopup>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    textAlign: 'center'
+  },
+  textContainer: {
+    width: '100%',
+    paddingHorizontal: 25,
+    paddingBottom: 20
+  },
+  parentStyle: {
+    display: 'flex',
+    width: '70%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: 25
+
+  },
+  button: {
+    borderRadius: 5
+  }
+});

package/src/components/shared/OBottomPopup.tsx

@@ -4,14 +4,18 @@ const deviceHeight = Dimensions.get('window').height
 
 interface Props {
   open: boolean;
+  containerStyle: any;
   title?: string;
+  titleStyle?: any;
   children?: any;
   onClose?: any;
 }
 const OBottomPopup = (props: Props) => {
   const {
     open,
+    containerStyle,
     title,
+    titleStyle,
     onClose,
     children
   } = props
@@ -29,9 +33,9 @@ const OBottomPopup = (props: Props) => {
         >
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
-        <View style={styles.bottomContainer}>
+        <View style={{ ...styles.bottomContainer, ...containerStyle }}>
           <View>
-            <Text style={styles.titleStyle}>
+            <Text style={{ ...styles.titleStyle, ...titleStyle }}>
               {title}
             </Text>
             {children}

package/src/index.tsx

@@ -36,6 +36,7 @@ import { LogoutButton } from './components/LogoutButton';
 import { Messages } from './components/Messages';
 import { MomentOption } from './components/MomentOption';
 import NavBar from './components/NavBar';
+import { NotificationSetting } from './components/NotificationSetting'
 import { NotFoundSource } from './components/NotFoundSource';
 import { OrderCreating } from './components/OrderCreating';
 import { OrderDetails } from './components/OrderDetails';
@@ -136,6 +137,7 @@ export {
   Messages,
   MomentOption,
   NavBar,
+  NotificationSetting,
   NotFoundSource,
   OrderCreating,
   OrderDetails,

package/themes/business/src/components/OrdersListManager/index.tsx

@@ -6,7 +6,7 @@ import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useTheme } from 'styled-components/native';
-
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import {
   FiltersTab,
   TabsContainer,
@@ -611,7 +611,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </LeftSide>
 
         <RightSide style={{ paddingBottom: 110, paddingHorizontal: 20 }}>
-          {currentOrderSelected &&  (
+          {currentOrderSelected && (
             <OrderDetailsBusiness {...props.orderDetailsProps} order={currentOrderSelected} isCustomView />
           )}
         </RightSide>
@@ -756,6 +756,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
 
 export const OrdersListManager = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersListManagerUI,
@@ -870,5 +871,11 @@ export const OrdersListManager = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

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

@@ -7,6 +7,7 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
 
 import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
@@ -726,11 +727,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </View>
       {/* </GestureRecognizer> */}
-                
+
       {isBusinessApp && (
         <NewOrderNotification isBusinessApp={isBusinessApp} />
       )}
-      
+
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer
@@ -935,6 +936,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
   const theme = useTheme()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
@@ -1049,5 +1051,11 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

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

@@ -21,8 +21,8 @@ export interface LoginParams {
   allowedLevels?: any;
   useRootPoint?: any;
   notificationState?: any;
-	handleReCaptcha?: any;
-	enableReCaptcha?: any;
+  handleReCaptcha?: any;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -266,7 +266,7 @@ export interface OrdersOptionParams {
   titleContent?: string;
   customArray?: Array<any>;
   loadMoreOrders?: () => {};
-  loadOrders?: ({}: any) => {};
+  loadOrders?: ({ }: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -280,7 +280,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
-  onFiltered?: ({}: any) => {};
+  onFiltered?: ({ }: any) => {};
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
@@ -291,10 +291,11 @@ export interface OrdersOptionParams {
   };
   isBusinessApp?: boolean;
   handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
   loadLogisticOrders: () => void;
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
+  checkNotification?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -563,13 +564,13 @@ export interface AcceptOrRejectOrderParams {
 }
 
 export interface MapViewParams {
-  onNavigationRedirect: (page : string, params ?: any) => void,
+  onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
-  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
+  setAlertState: ({ open, content, key }: { open: boolean, content: Array<string>, key?: string | null }) => void
 }
 
 export interface ReviewCustomerParams {

package/themes/original/index.tsx

@@ -59,6 +59,7 @@ import { PaymentOptions } from './src/components/PaymentOptions';
 import { DriverTips } from './src/components/DriverTips';
 import { UserDetails } from './src/components/UserDetails';
 import { OrderSummary } from './src/components/OrderSummary';
+import { OrderItAgain } from './src/components/OrderItAgain';
 import { CartStoresListing } from './src/components/CartStoresListing';
 import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
 import { GoogleMap } from './src/components/GoogleMap';
@@ -219,6 +220,7 @@ export {
 	DriverTips,
 	UserDetails,
 	OrderSummary,
+	OrderItAgain,
 	CartStoresListing,
 	PaymentOptionsWebView,
 	GoogleMap,

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -59,6 +59,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -144,8 +146,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+		fadeIn()
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 					{business?.ribbon?.enabled && (
@@ -167,6 +186,13 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
+					<Animated.View
+						style={[
+							{
+								opacity: fadeAnim
+							}
+						]}
+					>
 						<FastImage
 							style={{ height: 120 }}
 							source={{
@@ -175,6 +201,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
+					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />

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

@@ -11,6 +11,7 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
+import { OrderItAgain } from '../OrderItAgain'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -35,6 +36,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     onClickCategory,
     lazyLoadProductsRecommended,
     handleUpdateProducts,
+    previouslyProducts,
     isFiltMode,
     navigation
   } = props;
@@ -113,6 +115,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           <SubcategoriesComponent category={category} />
         )}
       </HeaderWrapper>
+      {previouslyProducts?.length > 0 && (
+        <OrderItAgain
+          onProductClick={onProductClick}
+          productList={previouslyProducts}
+          businessId={businessId}
+          categoryState={categoryState}
+          navigation={navigation}
+          handleUpdateProducts={handleUpdateProducts}
+          currentCart={currentCart}
+        />
+      )}
       {category.id &&
         categoryState.products
           ?.filter((product: any) =>
@@ -123,6 +136,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
+              enableIntersection
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -150,6 +164,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}

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

@@ -323,6 +323,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
 								handleUpdateProducts={handleUpdateProducts}
+								previouslyProducts={business?.previously_products}
 								navigation={navigation}
 								isFiltMode
 							/>
@@ -427,6 +428,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									onClickCategory={handleChangeCategory}
 									handleUpdateProducts={handleUpdateProducts}
 									navigation={navigation}
+									previouslyProducts={business?.previously_products}
 								/>
 							</WrapContent>
 						</>

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

@@ -7,6 +7,7 @@ import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 import { OBottomPopup } from '../shared';
 import { ReviewTrigger } from '../ReviewTrigger';
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting';
 
 export const BusinessesListing = (props: any) => {
   const { logosLayout } = props
@@ -18,6 +19,7 @@ export const BusinessesListing = (props: any) => {
   const [, { getLastOrderHasNoReview }] = useOrder();
 
   const [, setIsReviewed] = useState()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const defaultOrder = {
     id: 0,
     business_id: 0,
@@ -72,9 +74,11 @@ export const BusinessesListing = (props: any) => {
     )
   }
 
+
+
   useEffect(() => {
-    auth && _getLastOrderHasNoReview()
-  }, [auth])
+    (checkNotificationStatus?.checked && auth) && _getLastOrderHasNoReview()
+  }, [checkNotificationStatus, auth])
 
   return (
     <>
@@ -92,9 +96,10 @@ export const BusinessesListing = (props: any) => {
           closeIcon={theme.images.general.close}
         >
           {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
-
         </OBottomPopup>
       )}
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
     </>
   )
 }

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import { OText } from '../shared'
+import { useLanguage } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { SingleProductCard } from '../SingleProductCard'
+import { OrderItAgainParams } from '../../types'
+import { ScrollView, Dimensions } from 'react-native'
+import moment from 'moment';
+import {
+  Container,
+  ProductWrapper
+} from './styles'
+
+export const OrderItAgain = (props: OrderItAgainParams) => {
+  const {
+    onProductClick,
+    productList,
+    businessId,
+    categoryState,
+    currentCart,
+    handleUpdateProducts,
+    navigation
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { width } = Dimensions.get('window');
+
+  return (
+    <Container>
+      <OText
+        size={16}
+        lineHeight={24}
+        color={theme.colors.textNormal}
+        style={{
+          fontWeight: '600',
+          marginBottom: 6
+        }}
+      >
+        {t('ORDER_IT_AGAIN', 'Order it again')}
+      </OText>
+      <OText
+        size={12}
+        lineHeight={18}
+        color={theme.colors.disabled}
+      >
+        {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
+      </OText>
+      <ScrollView
+        horizontal
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        {productList?.length > 0 && productList?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf()).map((product: any, i: number) => (
+          <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
+            <SingleProductCard
+              isSoldOut={product.inventoried && !product.quantity}
+              product={product}
+              businessId={businessId}
+              categoryState={categoryState}
+              onProductClick={() => onProductClick(product)}
+              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+              handleUpdateProducts={handleUpdateProducts}
+              navigation={navigation}
+              isPreviously
+            />
+          </ProductWrapper>
+        ))}
+      </ScrollView>
+    </Container>
+  )
+}

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  margin-top: 20px;
+`
+
+export const ProductWrapper = styled.View`
+  margin-right: 20px;
+  padding-top: 30px;
+`

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -11,7 +11,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+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';
@@ -26,7 +26,7 @@ function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
 		prevProps.categoryState === nextProps.categoryState
 }
 
-const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
+const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
@@ -36,13 +36,16 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		handleFavoriteProduct,
 		enableIntersection,
 		navigation,
-		businessId
+		businessId,
+		isPreviously
 	} = props;
 
 	const theme = useTheme();
 	const [orderingTheme] = useOrderingTheme()
 	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -94,7 +97,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [, t] = useLanguage();
 	const [stateConfig] = useConfig();
 	const [{ auth }] = useSession()
-	const [{ parsePrice, optimizeImage }] = useUtils();
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
 	const [orderState] = useOrder()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
@@ -122,6 +125,14 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductInventory,
 	);
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
 	const handleChangeFavorite = () => {
 		if (auth) {
 			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
@@ -130,8 +141,17 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		}
 	}
 
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
@@ -160,15 +180,17 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								<TouchableOpacity
-									onPress={handleChangeFavorite}
-								>
-									<IconAntDesign
-										name={product?.favorite ? 'heart' : 'hearto'}
-										color={theme.colors.danger5}
-										size={18}
-									/>
-								</TouchableOpacity>
+								{!isPreviously && (
+									<TouchableOpacity
+										onPress={handleChangeFavorite}
+									>
+										<IconAntDesign
+											name={product?.favorite ? 'heart' : 'hearto'}
+											color={theme.colors.danger5}
+											size={18}
+										/>
+									</TouchableOpacity>
+								)}
 							</View>
 							<PricesContainer>
 								<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
@@ -178,12 +200,22 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							</PricesContainer>
 							<OText
 								size={10}
-								numberOfLines={2}
+								numberOfLines={!isPreviously ? 2 : 1}
 								ellipsizeMode="tail"
 								color={theme.colors.textSecondary}
 								style={styles.line15}>
 								{product?.description}
 							</OText>
+							{isPreviously && (
+								<OText
+									size={10}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.primary}
+									style={styles.line15}>
+									{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}
+								</OText>
+							)}
 						</CardInfo>
 						<LogoWrapper>
 							{product?.ribbon?.enabled && (
@@ -205,14 +237,23 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</RibbonBox>
 							)}
 							{product?.images && (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images, 'h_250,c_limit'),
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
+								<Animated.View
+									style={[
+										{
+											// Bind opacity to animated value
+											opacity: fadeAnim
+										}
+									]}
+								>
+									<FastImage
+										style={styles.productStyle}
+										source={{
+											uri: optimizeImage(product?.images, 'h_250,c_limit'),
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</Animated.View>
 							)}
 						</LogoWrapper>
 
@@ -262,7 +303,7 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {
 		...props,
-		UIComponent: SinguleProductCardUI
+		UIComponent: SingleProductCardUI
 	}
 	return <SingleProductCardController {...singleProductCardProps} />
 }

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

@@ -290,6 +290,7 @@ export interface BusinessProductsListParams {
 	isFiltMode?: boolean,
 	handleUpdateProducts?: any,
 	navigation?: any;
+	previouslyProducts?: any;
 }
 export interface SingleProductCardParams {
 	businessId: any;
@@ -303,6 +304,7 @@ export interface SingleProductCardParams {
 	handleUpdateProducts?: any;
 	enableIntersection?: boolean;
 	navigation?: any;
+	isPreviously?: any;
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -737,6 +739,16 @@ export interface ProfessionalProfileParams {
 	onClose: any
 }
 
+export interface OrderItAgainParams {
+	onProductClick: any,
+	productList: any,
+	businessId: any,
+	categoryState: any,
+	currentCart: any,
+	handleUpdateProducts: any,
+	navigation: any
+}
+
 export interface PreviousProductsOrderedParams {
 	products?: any,
 	onProductClick?: any,