ordering-ui-react-native 0.12.15 → 0.12.19

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/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { TouchableOpacity, View, StyleSheet } from 'react-native'
 import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
@@ -9,6 +9,7 @@ import { LanguageSelectorParams } from '../../types'
 import { OText } from '../shared'
 import MatarialIcon from "react-native-vector-icons/MaterialIcons"
 import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   const {
     languagesState,
@@ -18,7 +19,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	const theme = useTheme()
   const [{loading}] = useLanguage()
-
+  const [isLoading, setIsLoading] = useState(true)
   const styles = StyleSheet.create({
     closeIcon: {
       width: 48, marginLeft: 32
@@ -27,6 +28,15 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       marginLeft: 40
     }
   })
+  useEffect(() => {
+    if (!isLoading) return
+    const loadingLanguage = setTimeout(() =>{
+      setIsLoading(false)
+    }, 1000);
+    return () => {
+      clearTimeout(loadingLanguage);
+    }
+  }, [])
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
@@ -48,63 +58,73 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 	const currentLanguageData = _languages?.find((item:any) => item.value == currentLanguage);
 
 	return (
-    <Container>
-      {languagesState?.languages && (
-				<CountryPicker
-					countryCode={currentLanguageData?.countryCode}
-					visible={isCountryModalVisible}
-					onClose={() => setCountryModalVisible(false)}
-					withCountryNameButton
-					countryCodes={countryCodes}
-					closeButtonStyle={styles.closeIcon}
-					renderFlagButton={() => (
-						<TouchableOpacity
-							onPress={() => setCountryModalVisible(true)}
-							disabled={loading}
-						>
-							<LanguageItem>
-									<Flag
-										withEmoji
-										flagSize={24}
-										countryCode={currentLanguageData?.countryCode}
-									/>
-								<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
-								<MatarialIcon name='keyboard-arrow-down' size={24}/>
-							</LanguageItem>
-						</TouchableOpacity>
+		<>
+		{ isLoading ? 
+		(<Container>
+			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
+				<PlaceholderLine height={15}/>
+			</Placeholder>
+		</Container>
+		):(
+			<Container>
+			{languagesState?.languages && (
+						<CountryPicker
+							countryCode={currentLanguageData?.countryCode}
+							visible={isCountryModalVisible}
+							onClose={() => setCountryModalVisible(false)}
+							withCountryNameButton
+							countryCodes={countryCodes}
+							closeButtonStyle={styles.closeIcon}
+							renderFlagButton={() => (
+								<TouchableOpacity
+									onPress={() => setCountryModalVisible(true)}
+									disabled={loading}
+								>
+									<LanguageItem>
+											<Flag
+												withEmoji
+												flagSize={24}
+												countryCode={currentLanguageData?.countryCode}
+											/>
+										<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
+										<MatarialIcon name='keyboard-arrow-down' size={24}/>
+									</LanguageItem>
+								</TouchableOpacity>
+							)}
+							flatListProps={{
+								/* @ts-ignore */
+								keyExtractor: (item) => item.value,
+								data: _languages || [],
+								renderItem: ({item} : any) => (
+									<TouchableOpacity
+										onPress={() => {
+											/* @ts-ignore */
+											handleChangeLanguage(item.value);
+											setCountryModalVisible(false);
+										}}
+										disabled={loading}
+									>
+										<LanguageItem>
+											<View style={styles.flagsContainer} />
+											<Flag
+												withEmoji
+												flagSize={24}
+												/* @ts-ignore */
+												countryCode={item.countryCode}
+											/>
+											<OText>{
+												/* @ts-ignore */
+												item.label
+											}</OText>
+										</LanguageItem>
+									</TouchableOpacity>
+								)
+							}}
+						/>
 					)}
-					flatListProps={{
-						/* @ts-ignore */
-						keyExtractor: (item) => item.value,
-						data: _languages || [],
-						renderItem: ({item} : any) => (
-							<TouchableOpacity
-								onPress={() => {
-									/* @ts-ignore */
-									handleChangeLanguage(item.value);
-									setCountryModalVisible(false);
-								}}
-								disabled={loading}
-							>
-								<LanguageItem>
-									<View style={styles.flagsContainer} />
-									<Flag
-										withEmoji
-										flagSize={24}
-										/* @ts-ignore */
-										countryCode={item.countryCode}
-									/>
-									<OText>{
-										/* @ts-ignore */
-										item.label
-									}</OText>
-								</LanguageItem>
-							</TouchableOpacity>
-						)
-					}}
-				/>
-			)}
-    </Container>
+			</Container>
+		)}
+	</>
   )
 }
 

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

@@ -33,7 +33,7 @@ import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
 import { verifyDecimals } from '../../../../../src/utils'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import { useTheme } from 'styled-components/native'
-import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
+import { _retrieveStoreData, _setStoreData } from '../../../../../src/providers/StoreUtil';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import EvilIcons from 'react-native-vector-icons/EvilIcons'
 const _EMAIL = 'email';
@@ -218,6 +218,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
     getCustomerName()
     const redirectHome = setTimeout(() =>{
+      _setStoreData('customer_name', {customerName: ''});
       navigation.reset({
         routes: [{ name: 'Intro' }],
       });
@@ -344,6 +345,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       <OButton
         text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
+          _setStoreData('customer_name', {customerName: ''});
           navigation.reset({
             routes: [{ name: 'Intro' }],
           });