ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/shared/OText.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { TextStyle } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+const SText = styled.Text`
+  color: ${(props: any) => props.color || '#344050'};
+  font-family: 'Poppins-Regular';
+  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
+  flex-wrap: wrap;
+  margin-bottom: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
+  margin-right: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
+  margin-left: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
+  ${(props: any) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight};
+    `};
+  ${(props: any) =>
+    props.isWrap &&
+    css`
+      flex: ${props.weight ? 1 : 0};
+    `};
+  text-decoration: ${(props : any) => props.textDecorationLine};
+`;
+interface Props {
+  color?: string;
+  size?: number;
+  weight?: any;
+  style?: TextStyle;
+  children?: JSX.Element | JSX.Element[] | string;
+  isWrap?: boolean;
+  hasBottom?: boolean;
+  mBottom?: any;
+  space?: any;
+  mRight?: number;
+  mLeft?: number;
+  numberOfLines?: number;
+  ellipsizeMode?: string;
+  adjustsFontSizeToFit?: boolean;
+  textDecorationLine?: string
+}
+
+const OText = (props: Props): React.ReactElement => {
+  return (
+    <SText {...props} style={props.style}>
+      {props.children}
+      {props.space && ' '}
+    </SText>
+  );
+};
+
+export default OText;

package/themes/business/src/components 2/shared/OTextarea.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import styled from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
+
+const Wrapper = styled.View`
+  border-radius: 10px;
+  border: 1px solid ${(props: any) => props.theme.colors.lightGray};
+`;
+const Inner = styled.TextInput`
+  height: 100px;
+`;
+
+interface Props {
+  lines?: number;
+  value?: string;
+  placeholder?: string;
+  onChange?: any;
+  onFocus?: any;
+  textTareaRef?: any;
+  autoFocus?: boolean;
+}
+
+const OTextarea = (props: Props) => {
+  const theme = useTheme();
+  return (
+    <Wrapper>
+      <Inner
+        ref={props.textTareaRef}
+        onFocus={() => props.onFocus()}
+        onChangeText={(txt: any) => props.onChange(txt)}
+        textAlignVertical={'top'}
+        placeholder={props.placeholder}
+        placeholderTextColor={theme.colors.arrowColor}
+        numberOfLines={props.lines}
+        underlineColorAndroid={'transparent'}
+        value={props.value}
+        autoFocus={props.autoFocus}
+        multiline={true}
+        selectionColor={theme.colors.primary}
+        color={theme.colors.textGray}
+      />
+    </Wrapper>
+  );
+};
+
+export default OTextarea;

package/themes/business/src/components 2/shared/OToast.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { ToastType, useToast, useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { getTraduction } from '../../utils';
+
+const fadeDuration = 300;
+const bottomPosition = 20;
+
+export const Toast = (props: any) => {
+  const [toastConfig, { hideToast }] = useToast();
+  const [, t] = useLanguage();
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  const theme = useTheme();
+
+  const fadeIn = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: fadeDuration,
+      useNativeDriver: true,
+    }).start();
+  }, [opacity]);
+
+  const fadeOut = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: fadeDuration,
+      useNativeDriver: true,
+    }).start(() => {
+      hideToast();
+    });
+  }, [opacity, hideToast]);
+
+  React.useEffect(() => {
+    if (!toastConfig) {
+      return;
+    }
+
+    fadeIn();
+    const timer = setTimeout(fadeOut, toastConfig.duration);
+
+    return () => clearTimeout(timer);
+  }, [toastConfig, fadeIn, fadeOut]);
+
+  if (!toastConfig) {
+    return null;
+  }
+
+  const { type, message } = toastConfig;
+
+  let backgroundColor;
+  switch (type) {
+    case ToastType.Info:
+      backgroundColor = theme.colors.toastInfo || '#6BA4FF';
+      break;
+    case ToastType.Error:
+      backgroundColor = theme.colors.toastError || '#D83520';
+      break;
+    case ToastType.Success:
+      backgroundColor = theme.colors.toastSuccess || '#90C68E';
+      break;
+  }
+
+  return (
+    <Animated.View
+      style={[styles.container, { bottom: bottomPosition, opacity }]}>
+      <View style={[styles.toast, { backgroundColor }]}>
+        <Text style={{ ...styles.message, ...props.messageStyle }}>
+          {getTraduction(message, t)}
+        </Text>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    position: 'absolute',
+    maxWidth: 480,
+    zIndex: 9999999999,
+  },
+  toast: {
+    borderRadius: 16,
+    padding: 16,
+  },
+  message: {
+    fontSize: 14,
+    textAlign: 'center',
+    color: '#fff',
+  },
+});

package/themes/business/src/components 2/shared/index.tsx

@@ -0,0 +1,27 @@
+import OText from './OText';
+import OButton from './OButton';
+import OInput from './OInput';
+import OIcon from './OIcon';
+import OIconButton from './OIconButton';
+import OTextarea from './OTextarea';
+import OModal from './OModal';
+import OAlert from './OAlert';
+import OFab from './OFab';
+import OLink from './OLink';
+import ODropDown from './ODropDown';
+import ODropDownCalendar from './ODropDownCalendar';
+
+export {
+  OText,
+  OButton,
+  OInput,
+  OIcon,
+  OIconButton,
+  OTextarea,
+  OAlert,
+  OModal,
+  OFab,
+  OLink,
+  ODropDown,
+  ODropDownCalendar
+};

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

@@ -341,6 +341,7 @@ export interface OrderDetailsParams {
   actions?: actions;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
+  titleNotReady?: textTranslate;
   appTitle?: textTranslate;
   drivers?: any;
   loadingDriver?: boolean;
@@ -520,6 +521,7 @@ interface actions {
   accept: string;
   reject: string;
   failed: string;
+  notReady: string;
 }
 
 interface textTranslate {
@@ -531,13 +533,14 @@ export interface AcceptOrRejectOrderParams {
   customerCellphone?: string;
   closeModal?: any;
   loading?: boolean;
-  action?: string;
+  action: string;
   orderId?: number;
   handleUpdateOrder?: (status: number, isAccept: any) => {};
   notShowCustomerPhone?: boolean | undefined;
   actions?: actions;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
+  titleNotReady?: textTranslate;
   appTitle?: textTranslate;
 }
 

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;
+`;