ordering-ui-react-native 0.12.16 → 0.12.20

package/themes/doordash/src/components/Help/index.tsx

@@ -48,7 +48,7 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders />
+        <LastOrders navigation={navigation} />
       </LastOrdersContainer>
     </>
   )

package/themes/doordash/src/components/LastOrders/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   OrderList as OrderListController,
   useUtils,
@@ -17,10 +17,12 @@ import {
   OrderContainer,
   OrderInfo
 } from './styles'
+import { StackActions } from '@react-navigation/native'
 
 const LastOrdersUI = (props: LastOrdersParams) => {
   const {
-    orderList
+    orderList,
+    navigation
   } = props
   const { loading, error, orders } = orderList
 
@@ -40,6 +42,10 @@ const LastOrdersUI = (props: LastOrdersParams) => {
     }
   })
 
+  const goToOrders = useCallback((order) => {
+    navigation.navigate('BottomTab', { screen: 'MyOrders' });
+  }, [])
+
   return (
     <>
       {loading ? (
@@ -53,7 +59,7 @@ const LastOrdersUI = (props: LastOrdersParams) => {
       ) : (
         <>
           {orders.map((order: any) => (
-            <OrderContainer key={order.id}>
+            <OrderContainer key={order.id} onPress={() => goToOrders(order)}>
               <OIcon
                 url={optimizeImage(order.business?.header, 'h_300,c_limit')}
                 style={styles.headerLogo}

package/themes/doordash/src/components/LastOrders/styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components/native'
 
-export const OrderContainer = styled.View`
+export const OrderContainer = styled.TouchableOpacity`
   position: relative;
   margin-vertical: 12px;
 `

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

@@ -99,7 +99,7 @@ export const ProductOptionsUI = (props: any) => {
 			minHeight: 200,
 			zIndex: 0
 		},
-		closeButton: { width: 32, height: 32, borderRadius: 17, backgroundColor: theme.colors.white, alignItems: 'center', justifyContent: 'center' },
+		closeButton: { width: 11, height: 32, backgroundColor: theme.colors.white, alignItems: 'center', justifyContent: 'center' },
 		quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled }
 	})
 	const [{ parsePrice }] = useUtils()

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

@@ -164,6 +164,7 @@ export interface BusinessProductsListingParams {
   handleChangeCategory: (value: any) => {};
   setProductLogin?: () => {};
   updateProductModal?: (value: any) => {}
+  getNextProducts?: () => {};
 }
 export interface BusinessBasicInformationParams {
   businessState?: any;
@@ -175,13 +176,19 @@ export interface BusinessBasicInformationParams {
 }
 export interface BusinessProductsCategoriesParams {
   categories: Array<any>;
-  // handlerClickCategory: any;
   onClickCategory: any;
   openBusinessInformation: any;
   categorySelected: any;
   featured: boolean;
   loading?: any;
   contentStyle?: ViewStyle;
+  scrollViewRef?: any;
+	productListLayout?: any;
+	categoriesLayout?: any;
+	selectedCategoryId?: any;
+	lazyLoadProductsRecommended?: any;
+  setSelectedCategoryId?: any;
+  setCategoryClicked?: any;
 }
 export interface BusinessProductsListParams {
   errors?: any;
@@ -198,6 +205,8 @@ export interface BusinessProductsListParams {
   errorQuantityProducts?: boolean;
   handleCancelSearch?: () => void;
   sortBy?: string;
+  categoriesLayout?: any,
+	setCategoriesLayout?: any
 }
 export interface SingleProductCardParams {
   businessId: any;
@@ -407,6 +416,7 @@ export interface HelpParams {
 }
 
 export interface LastOrdersParams {
+  navigation?: any,
   orderList?: any,
 }
 

package/themes/kiosk/src/components/CategoriesMenu/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Platform, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Dimensions, Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
@@ -17,13 +17,16 @@ import { CartContent } from '../../components/CartContent';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
-import { useTheme } from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
+import { DrawerView } from '../DrawerView';
+import { ProductForm } from '../ProductForm';
 
 const CategoriesMenu = (props: any): React.ReactElement => {
 
   const {
     navigation,
     route,
+    isDrawer
   } = props;
 
   const {
@@ -41,7 +44,16 @@ const CategoriesMenu = (props: any): React.ReactElement => {
   const [{ parsePrice }] = useUtils();
   const [orientationState] = useDeviceOrientation();
   const [bottomSheetVisibility, { showCartBottomSheet, hideCartBottomSheet }] = useCartBottomSheet();
-
+  const [productSelected, setProductSelected] = useState({})
+  const [drawerState, setDrawerState] = useState({ isOpen: false, data: { order: null } });
+
+  const width_dimension = Dimensions.get('window').width;
+  const height_dimension = Dimensions.get('window').height;
+  
+  const KeyboardView = styled.KeyboardAvoidingView`
+    flex: 1;
+  `;
+  
   const onChangeTabs = (idx: number) => {
     resetInactivityTimeout();
     setIndexCateg(idx);
@@ -49,6 +61,10 @@ const CategoriesMenu = (props: any): React.ReactElement => {
 
   const goToBack = () => navigation.goBack()
 
+  const setDrawerValues = ({ isOpen, data }: any) => {
+    setDrawerState({ ...drawerState, isOpen, data });
+  }
+
   const [{ carts }] = useOrder();
   const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || [];
   const VISIBLE_CART_BOTTOM_SHEET_HEIGHT = orientationState?.dimensions?.height * (orientationState.orientation === PORTRAIT ? 0.5 : 1);
@@ -82,91 +98,120 @@ const CategoriesMenu = (props: any): React.ReactElement => {
   }
 
   return (
-    <View style={{
-      flex: 1,
-      flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row'
-    }}>
-      <View
-        style={{
-          flex: 1,
-          paddingBottom: bottomSheetVisibility && !!cart && orientationState?.orientation === PORTRAIT
-            ? VISIBLE_CART_BOTTOM_SHEET_HEIGHT
-            : 0,
-        }}
-      >
-        <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingTop: 20 }}>
-            <NavBar
-              title={categories[curIndexCateg].name}
-              onActionLeft={goToBack}
-              rightComponent={cart && (
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                  onPress={onToggleCart}
-                >
-                  <OText
-                    color={theme.colors.mediumGray}
+    <>
+      <View style={{
+        flex: 1,
+        flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row'
+      }}>
+        <View
+          style={{
+            flex: 1,
+            paddingBottom: bottomSheetVisibility && !!cart && orientationState?.orientation === PORTRAIT
+              ? VISIBLE_CART_BOTTOM_SHEET_HEIGHT
+              : 0,
+          }}
+        >
+          <Container nopadding nestedScrollEnabled>
+            <View style={{ paddingTop: 20 }}>
+              <NavBar
+                title={categories[curIndexCateg].name}
+                onActionLeft={goToBack}
+                rightComponent={cart && (
+                  <TouchableOpacity
+                    style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
+                    onPress={onToggleCart}
                   >
-                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                  </OText>
-
-                  <MaterialIcon
-                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                    color={theme.colors.primary}
-                    size={30}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-            <OSegment
-              items={categories.map((category) => ({
-                text: category.name
-              }))}
-              selectedIdx={curIndexCateg}
-              onSelectItem={onChangeTabs}
+                    <OText
+                      color={theme.colors.mediumGray}
+                    >
+                      {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                    </OText>
+
+                    <MaterialIcon
+                      name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                      color={theme.colors.primary}
+                      size={30}
+                    />
+                  </TouchableOpacity>
+                )}
+              />
+              <OSegment
+                items={categories.map((category) => ({
+                  text: category.name
+                }))}
+                selectedIdx={curIndexCateg}
+                onSelectItem={onChangeTabs}
+              />
+            </View>
+
+            <GridContainer style={{ marginTop: 20 }}>
+              {categories[curIndexCateg].products.map((product) => (
+                <OCard
+                  key={product.id}
+                  title={product?.name}
+                  image={{ uri: product?.images }}
+                  style={{
+                    width: orientationState?.orientation === LANDSCAPE
+                      ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
+                      : orientationState?.dimensions?.width * 0.20
+                  }}
+                  titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
+                  onPress={() => {
+                    resetInactivityTimeout()
+                    if (isDrawer) {
+                      setProductSelected(product)
+                      setDrawerValues({ isOpen: true, data: null })
+                    } else {
+                      navigation.navigate('ProductDetails', {
+                        businessId,
+                        businessSlug,
+                        product,
+                      });
+                    }
+                  }}
+                  {...(!!product?.description && { description: product?.description } )}
+                  {...(!!product?.price && { price: parsePrice(product?.price) } )}
+                  {...(product?.in_offer && { prevPrice: `$${product?.offer_price}` } )}
+                />
+              ))}
+            </GridContainer>
+          </Container>
+        </View>
+
+          <View
+            style={{
+              flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+              display: bottomSheetVisibility ? 'flex' : 'none'
+            }}
+          >
+            <CartContent
+              {...cartProps}
             />
           </View>
-
-          <GridContainer style={{ marginTop: 20 }}>
-            {categories[curIndexCateg].products.map((product) => (
-              <OCard
-                key={product.id}
-                title={product?.name}
-                image={{ uri: product?.images }}
-                style={{
-                  width: orientationState?.orientation === LANDSCAPE
-                    ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
-                    : orientationState?.dimensions?.width * 0.20
-                }}
-                titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
-                onPress={() => {
-                  resetInactivityTimeout()
-                  navigation.navigate('ProductDetails', {
-                    businessId,
-                    businessSlug,
-                    product,
-                  });
-                }}
-                {...(!!product?.description && { description: product?.description } )}
-                {...(!!product?.price && { price: parsePrice(product?.price) } )}
-                {...(product?.in_offer && { prevPrice: `$${product?.offer_price}` } )}
-              />
-            ))}
-          </GridContainer>
-        </Container>
       </View>
-
-        <View
-          style={{
-            flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
-            display: bottomSheetVisibility ? 'flex' : 'none'
-          }}
+      <DrawerView
+        isOpen={drawerState.isOpen}
+        width={width_dimension - (width_dimension * 0.4)}
+        height={height_dimension}
+        onClickIcon={() => setDrawerValues({ isOpen: !drawerState.isOpen, data: null })}
+      >
+        <KeyboardView
+          enabled
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         >
-          <CartContent
-            {...cartProps}
+          <ProductForm
+            isDrawer
+            product={productSelected}
+            businessId={parseInt(businessId, 10)}
+            businessSlug={businessSlug}
+            onSave={() => {
+              setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
+            }}
+            navigation={navigation}
           />
-        </View>
-    </View>
+        </KeyboardView>
+      </DrawerView>
+    </>
 	);
 };
 

package/themes/kiosk/src/components/DrawerView/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+  Container,
+  Wrapper,
+  WrapperFloatBtn,
+  IconControl
+} from './styles';
+
+export const DrawerView = (props: any) => {
+  const {
+    children,
+    isOpen,
+    width,
+    height,
+    onClickIcon,
+    iconStyles
+  } = props;
+
+  return (
+    isOpen && (
+      <>
+        <WrapperFloatBtn>
+          <IconControl
+            activeOpacity={1}
+            style={{ ...iconStyles, ...styles.shadow}}
+            onPress={() => onClickIcon()}
+          >
+            <MaterialCommunityIcon
+              name='arrow-expand-right'
+              size={24}
+            />
+          </IconControl>
+        </WrapperFloatBtn>
+        <Container style={styles.shadow}>
+          <Wrapper width={width} height={height}>
+            {children}
+          </Wrapper>
+        </Container>
+      </>
+    )
+  )
+}
+
+const styles = StyleSheet.create({
+  shadow:{
+    shadowColor: 'rgba(0.0, 0.0, 0.0, 0.5)',
+    shadowOffset: {
+      width: 0,
+      height: 1.5,
+    },
+    shadowOpacity: 0.21,
+    shadowRadius: 5,
+  }
+})

package/themes/kiosk/src/components/DrawerView/styles.tsx

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10001;
+  elevation: 5;
+  background-color: #FFF;
+`;
+
+export const Wrapper = styled.View`
+  width: ${(props: any) => props.width}px;
+  height: ${(props: any) => props.height}px;
+`;
+
+export const WrapperFloatBtn = styled.View`
+  position: absolute;
+  top: 10%;
+  right: ${(props: any) => props.outside ? 11 : 58}%;
+  z-index: 20002;
+  elevation: 11;
+`;
+
+export const IconControl = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.white};
+  padding: 10px;
+  border-radius: 8px;
+  elevation: 11;
+`;

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

@@ -55,7 +55,8 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout
+    isFromCheckout,
+    isDrawer
   } = props;
 
   const theme = useTheme();
@@ -240,22 +241,23 @@ export const ProductOptionsUI = (props: any) => {
         scrollEventThrottle={16}
       >
         <Animated.View style={[styles.header, { height: headerHeight }]}>
-          <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-            <NavBar
-              {...navBarProps}
-              titleColor={theme.colors.white}
-              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                backgroundColor: 'black',
-                borderRadius: 100,
-                opacity: 0.8,
-                left: 20,
-              }}
-              imgLeftStyle={{ width: 27, height: 27 }}
-            />
-          </Animated.View>
+          {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+              <NavBar
+                {...navBarProps}
+                titleColor={theme.colors.white}
+                {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'black',
+                  borderRadius: 100,
+                  opacity: 0.8,
+                  left: 20,
+                }}
+                imgLeftStyle={{ width: 27, height: 27 }}
+              />
+            </Animated.View>
+          )}
           <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
             <NavBar
               {...navBarProps}
@@ -367,8 +369,8 @@ export const ProductOptionsUI = (props: any) => {
           <Spinner visible={loading} />
         )}
         {!loading && !error && product && (
-          <View style={{ paddingTop: 20, paddingBottom: 80 }}> 
-            <WrapContent>
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+            <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
@@ -500,7 +502,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}

package/themes/kiosk/src/components/ProductForm/styles.tsx

@@ -27,7 +27,7 @@ export const ProductHeader = styled.ImageBackground`
 `
 
 export const WrapContent = styled.View`
-  padding: 0 20px;
+  padding: ${(props: any) => props.isDrawer ? '0 5px' : '0 20px'};
   position: relative;
   bottom: 20px;
   background-color: white;