ordering-ui-react-native 0.10.3 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.10.3",
+  "version": "0.11.3",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -92,6 +92,7 @@
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",
     "react-native-snap-carousel": "^3.9.1",
+    "react-native-swipe-gestures": "^1.0.5",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
     "rn-placeholder": "^3.0.3",

package/themes/business/index.tsx

@@ -12,8 +12,8 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { MessagesOption } from './src/components/MessagesOption';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderMessage } from './src/components/OrderMessage';
-import { OrderDetails } from './src/components/OrderDetails';
-import { OrderDetailsDelivery } from './src/components/OrderDetailsDelivery';
+import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
+import { OrderDetailsDelivery } from './src/components/OrderDetails/Delivery';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
@@ -38,7 +38,7 @@ import {
   OTextarea,
   OAlert,
   OModal,
-  OLink
+  OLink,
 } from './src/components/shared';
 
 //layouts
@@ -51,26 +51,26 @@ export {
   AcceptOrRejectOrder,
   BusinessController,
   Chat,
+  DriverMap,
   FloatingButton,
   ForgotPasswordForm,
   GoogleMap,
-  DriverMap,
   Home,
   LanguageSelector,
   LoginForm,
   LogoutButton,
   MessagesOption,
+  NotFoundSource,
+  OrderDetailsBusiness,
   OrderDetailsDelivery,
   OrderMessage,
-  NotFoundSource,
-  OrderDetails,
   OrdersOption,
   OrderSummary,
   PhoneInputNumber,
-  SafeAreaContainerLayout,
   PreviousMessages,
   PreviousOrders,
   ProductItemAccordion,
+  SafeAreaContainerLayout,
   SearchBar,
   SignupForm,
   StoresList,
@@ -78,15 +78,15 @@ export {
   UserProfileForm,
   VerifyPhone,
   //OComponents
-  OText,
+  OAlert,
   OButton,
-  OInput,
   OIcon,
   OIconButton,
-  OTextarea,
-  OAlert,
-  OModal,
+  OInput,
   OLink,
+  OModal,
+  OText,
+  OTextarea,
   //layouts
   Container,
   SafeAreaContainer,

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

@@ -5,6 +5,7 @@ import {
   Platform,
   View,
   KeyboardAvoidingView,
+  TextInput
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage } from 'ordering-components/native';
@@ -33,7 +34,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const theme = useTheme();
   const scrollViewRef = useRef<any>(null);
   const viewRef = useRef<any>(null);
-  const timerRef = useRef<any>();
+  const timerRef = useRef() as React.MutableRefObject<TextInput>;
   const textTareaRef = useRef<any>();
   const [hour, setHour] = useState('00');
   const [min, setMin] = useState('00');
@@ -42,7 +43,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const phoneNumber = customerCellphone;
   let codeNumberPhone, numberPhone, numberToShow;
-  const { top } = useSafeAreaInsets();
+  const { top, bottom} = useSafeAreaInsets()
 
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
@@ -105,6 +106,16 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     setTime(`${hours}${mins}`);
   };
 
+  useEffect(() => {
+    if (actions && action === 'accept') {
+      openTimerIOnput();
+    }
+
+    if (actions && action === 'reject') {
+      openTextTareaOInput();
+    }
+  }, []);
+
   const handleFixTime = () => {
     if (min >= '60') {
       setMin('59');
@@ -118,11 +129,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
   const openTimerIOnput = () => {
     const isFocus = timerRef.current.isFocused();
-    if (isFocus && timerRef?.current) {
+    if (isFocus) {
       timerRef.current.blur();
     }
 
-    if (!isFocus && timerRef?.current) {
+    if (!isFocus) {
       if (time.length > 1) timerRef.current.clear();
       timerRef.current.focus();
       handleFocusTimer();
@@ -137,20 +148,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
     if (!isFocus && textTareaRef?.current) {
       textTareaRef.current.focus();
-      handleFocusTimer();
     }
   };
 
-  useEffect(() => {
-    if (actions && action === 'accept') {
-      openTimerIOnput();
-    }
-
-    if (actions && action === 'reject') {
-      openTextTareaOInput();
-    }
-  }, []);
-
   const handleAcceptOrReject = () => {
     handleFixTime();
 
@@ -193,31 +193,38 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   };
 
   return (
-    <>
       <KeyboardAvoidingView
+      enabled
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={{ flex: 1, marginTop: top }}>
-        <Content ref={scrollViewRef}>
+        style={{ flex: 1, paddingHorizontal: 30, paddingTop: 30, marginTop: top, marginBottom: bottom,justifyContent: 'space-between' }}>
+          <View>
+        <OIconButton
+          icon={theme.images.general.arrow_left}
+          borderColor={theme.colors.clear}
+          iconStyle={{ width: 20, height: 20 }}
+          style={{
+            maxWidth: 40,
+            height: 35,
+            justifyContent: 'flex-end',
+            marginBottom: 30,
+          }}
+          onClick={() => handleArrowBack()}
+        />
+        <OText
+          size={20}
+          color={theme.colors.textGray}
+          style={{
+            fontFamily: 'Poppins',
+            fontStyle: 'normal',
+          }}
+          weight="600">
+          {action === 'accept'
+            ? `${t(titleAccept?.key, titleAccept?.text)}:`
+            : t(titleReject?.key, titleReject?.text)}
+        </OText>
+        </View>
+        <Content showsVerticalScrollIndicator={false} ref={scrollViewRef}>
           <Header>
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 20, height: 20 }}
-              style={{
-                maxWidth: 40,
-                height: 35,
-                justifyContent: 'flex-end',
-                marginBottom: 30,
-              }}
-              onClick={() => handleArrowBack()}
-            />
-
-            <OText size={20} color={theme.colors.textGray} weight="600">
-              {action === 'accept'
-                ? `${t(titleAccept?.key, titleAccept?.text)}:`
-                : t(titleReject?.key, titleReject?.text)}
-            </OText>
-
             {action === 'reject' && (
               <>
                 {!notShowCustomerPhone && (
@@ -323,7 +330,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
               </Timer>
             </View>
           )}
-
+            
           <TimeField
             ref={timerRef}
             keyboardType="numeric"
@@ -332,6 +339,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             onChangeText={handleTime}
             onPressOut={() => handleFixTime()}
             editable={true}
+            autoFocus={actions && action === 'accept'}
             selectionColor={theme.colors.primary}
             placeholderTextColor={theme.colors.textGray}
             color={theme.colors.textGray}
@@ -342,6 +350,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             <Comments ref={viewRef}>
               <OTextarea
                 textTareaRef={textTareaRef}
+                autoFocus={actions && action === 'reject'}
                 onFocus={handleFocus}
                 placeholder={t(
                   'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
@@ -355,10 +364,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           )}
         </Content>
 
-        <Action
-          style={{
-            marginBottom: isKeyboardShow ? (Platform.OS === 'ios' ? 0 : 10) : 0,
-          }}>
+        <Action>
           <FloatingButton
             firstButtonClick={() => {
               handleAcceptOrReject();
@@ -369,9 +375,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
                 : t('REJECT', 'Reject')
             }
             color={action === 'accept' ? theme.colors.green : theme.colors.red}
+            widthButton={'100%'}
           />
         </Action>
       </KeyboardAvoidingView>
-    </>
   );
 };

package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx

@@ -1,9 +1,8 @@
 import styled from 'styled-components/native';
 
 export const Content = styled.ScrollView`
-  margin-bottom: 60px;
   background-color: ${(props: any) => props.theme.colors.white};
-  flex: 1;
+  margin-bottom: 30px;
 `;
 
 export const Timer = styled.TouchableOpacity`
@@ -28,15 +27,10 @@ export const TimeField = styled.TextInput`
   opacity: 0;
 `;
 
-export const Header = styled.View`
-  padding-horizontal: 20px;
-`;
+export const Header = styled.View``;
 
-export const Action = styled.View`
-  margin-horizontal: 30px;
-`;
+export const Action = styled.View``;
 
 export const Comments = styled.View`
-  padding-horizontal: 20px;
-  margin-bottom: 40px;
+  margin-top: 20px;
 `;

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

@@ -8,6 +8,7 @@ import {
   Keyboard,
   Dimensions,
   Pressable,
+  SafeAreaView,
 } from 'react-native';
 import {
   GiftedChat,
@@ -59,7 +60,7 @@ const ChatUI = (props: MessagesParams) => {
   } = props;
 
   const [{ user }] = useSession();
-  const [{ parseDate, optimizeImage, getTimeAgo }] = useUtils();
+  const [{ parseDate, parseTime, optimizeImage, getTimeAgo }] = useUtils();
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const theme = useTheme();
@@ -75,6 +76,21 @@ const ChatUI = (props: MessagesParams) => {
           parseFloat(String(Dimensions.get('window').height)).toFixed(0),
         );
 
+  const [orientation, setOrientation] = useState<string>(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+
+  // Events
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
   const styles = StyleSheet.create({
     containerActions: {
       width: 44,
@@ -102,8 +118,8 @@ const ChatUI = (props: MessagesParams) => {
     },
     toolbarStyle: {
       flexDirection: 'column-reverse',
-      paddingHorizontal: 20,
       paddingVertical: 15,
+      paddingHorizontal: 30,
       backgroundColor: theme.colors.white,
       borderTopWidth: 1,
       borderTopColor: theme.colors.tabBar,
@@ -159,7 +175,7 @@ const ChatUI = (props: MessagesParams) => {
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: theme.colors.inputChat,
-      padding: 10,
+      paddingVertical: 10,
       borderRadius: 7.6,
     },
     firstMessageText: {
@@ -341,8 +357,8 @@ const ChatUI = (props: MessagesParams) => {
       <View
         style={{
           ...styles.firstMessage,
-          marginLeft: 10,
-          marginRight: 10,
+          marginHorizontal: 0,
+          paddingHorizontal: 32,
           width: 320,
         }}>
         <OText
@@ -375,6 +391,9 @@ const ChatUI = (props: MessagesParams) => {
               }`
             : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
+        <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
+          {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
+        </OText>
       </View>
     );
   };
@@ -426,7 +445,7 @@ const ChatUI = (props: MessagesParams) => {
         <View style={styles.firstMessage}>
           <OText style={styles.firstMessageText}>
             {t('ORDER_PLACED_FOR', 'Order placed for')}{' '}
-            <OText style={{ ...styles.firstMessageText, fontWeight: '600' }}>
+            <OText style={{ ...styles.firstMessageText, fontWeight: 'bold' }}>
               {parseDate(order?.created_at)}
             </OText>
           </OText>
@@ -571,14 +590,18 @@ const ChatUI = (props: MessagesParams) => {
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         horizontal
-        contentContainerStyle={{ justifyContent: 'space-between' }}>
+        contentContainerStyle={{
+          justifyContent:
+            orientation === 'Landscape' ? 'center' : 'space-between',
+          width: '100%',
+        }}>
         {user?.level !== 2 && (
           <Pressable
             style={{
               flexDirection: 'row',
               alignItems: 'center',
-              marginRight: 25,
               opacity: canRead?.business ? 1 : 0.25,
+              marginRight: 25,
             }}
             onPress={() =>
               handleFilter({ business: !canRead?.business }, 'business')
@@ -604,7 +627,10 @@ const ChatUI = (props: MessagesParams) => {
                 {order?.business?.name}
               </OText>
 
-              <OText adjustsFontSizeToFit size={14}>
+              <OText
+                adjustsFontSizeToFit
+                color={theme.colors.unselectText}
+                size={14}>
                 {t('BUSINESS', 'Business')}
               </OText>
             </TitleHeader>
@@ -615,8 +641,8 @@ const ChatUI = (props: MessagesParams) => {
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            marginRight: 25,
             opacity: canRead?.customer ? 1 : 0.25,
+            marginRight: 25,
           }}
           onPress={() =>
             handleFilter({ customer: !canRead?.customer }, 'customer')
@@ -642,7 +668,10 @@ const ChatUI = (props: MessagesParams) => {
               {order?.customer?.name}
             </OText>
 
-            <OText adjustsFontSizeToFit size={14}>
+            <OText
+              adjustsFontSizeToFit
+              color={theme.colors.unselectText}
+              size={14}>
               {t('CUSTOMER', 'Customer')}
             </OText>
           </TitleHeader>
@@ -653,8 +682,8 @@ const ChatUI = (props: MessagesParams) => {
             style={{
               flexDirection: 'row',
               alignItems: 'center',
-              marginRight: 25,
               opacity: canRead?.driver ? 1 : 0.25,
+              marginRight: 25,
             }}
             onPress={() =>
               handleFilter({ driver: !canRead?.driver }, 'driver')
@@ -680,7 +709,10 @@ const ChatUI = (props: MessagesParams) => {
                 {order?.driver?.name}
               </OText>
 
-              <OText adjustsFontSizeToFit size={14}>
+              <OText
+                adjustsFontSizeToFit
+                color={theme.colors.unselectText}
+                size={14}>
                 {t('DRIVER', 'Driver')}
               </OText>
             </TitleHeader>
@@ -725,14 +757,9 @@ const ChatUI = (props: MessagesParams) => {
         {...props}
         textInputStyle={{
           borderRadius: 7.6,
-          paddingHorizontal: 10,
           borderColor: theme.colors.transparent,
           borderWidth: 0,
           color: '#010300',
-          marginLeft: 1,
-          marginRight: 0,
-          marginBottom: 0,
-          paddingVertical: 0,
         }}
         textInputProps={{
           value: message,
@@ -891,54 +918,63 @@ const ChatUI = (props: MessagesParams) => {
     );
   };
 
-  const renderAvatar = (props: any) => (
-    <View style={{ marginBottom: 10, alignItems: 'flex-end' }}>
-      <OText size={9} color={theme.colors.textGray}>
-        {`${t('SENT_TO', 'Sent to')}:`}
-      </OText>
+  const renderAvatar = (props: any) => {
+    const isMine = user?.id === props?.currentMessage?.user?._id;
 
-      <View style={{ flexDirection: 'row' }}>
-        {props?.currentMessage?.user?.can_see?.includes('2') &&
-          user?.level !== 2 && (
-            <View style={styles.avatar}>
-              <OIcon
-                url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                src={
-                  !order?.business?.logo && theme?.images?.dummies?.businessLogo
-                }
-                style={styles.avatarIcon}
-              />
-            </View>
-          )}
+    return (
+      <View
+        style={{
+          marginBottom: 10,
+          alignItems: isMine ? 'flex-end' : 'flex-start',
+        }}>
+        <OText size={9} color={theme.colors.textGray}>
+          {`${t('SENT_TO', 'Sent to')}:`}
+        </OText>
 
-        {props?.currentMessage?.user?.can_see?.includes('3') && (
-          <View style={styles.avatar}>
-            <OIcon
-              url={optimizeImage(
-                order?.customer?.photo || theme?.images?.dummies?.customerPhoto,
-                'h_300,c_limit',
-              )}
-              style={styles.avatarIcon}
-            />
-          </View>
-        )}
+        <View style={{ flexDirection: 'row' }}>
+          {props?.currentMessage?.user?.can_see?.includes('2') &&
+            user?.level !== 2 && (
+              <View style={styles.avatar}>
+                <OIcon
+                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                  src={
+                    !order?.business?.logo &&
+                    theme?.images?.dummies?.businessLogo
+                  }
+                  style={styles.avatarIcon}
+                />
+              </View>
+            )}
 
-        {props?.currentMessage?.user?.can_see?.includes('4') &&
-          user?.level !== 4 && (
-            <View style={{ ...styles.avatar, marginRight: 0 }}>
+          {props?.currentMessage?.user?.can_see?.includes('3') && (
+            <View style={styles.avatar}>
               <OIcon
-                url={
-                  optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
-                  theme?.images?.dummies?.driverPhoto
-                }
+                url={optimizeImage(
+                  order?.customer?.photo ||
+                    theme?.images?.dummies?.customerPhoto,
+                  'h_300,c_limit',
+                )}
                 style={styles.avatarIcon}
               />
             </View>
           )}
-      </View>
-    </View>
-  );
 
+          {props?.currentMessage?.user?.can_see?.includes('4') &&
+            user?.level !== 4 && (
+              <View style={{ ...styles.avatar, marginRight: 0 }}>
+                <OIcon
+                  url={
+                    optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
+                    theme?.images?.dummies?.driverPhoto
+                  }
+                  style={styles.avatarIcon}
+                />
+              </View>
+            )}
+        </View>
+      </View>
+    );
+  };
   const renderTime = (props: any) => (
     <>
       <OText style={styles.timeText}>
@@ -966,7 +1002,7 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1 }}>
       <Wrapper>
         <GiftedChat
           messages={formattedMessages}
@@ -982,7 +1018,8 @@ const ChatUI = (props: MessagesParams) => {
             contentContainerStyle: {
               flexGrow: 1,
               justifyContent: 'flex-end',
-              paddingHorizontal: 9,
+              paddingHorizontal: 22,
+              paddingBottom: 30,
             },
           }}
           renderCustomView={renderNameMessage}
@@ -1007,7 +1044,7 @@ const ChatUI = (props: MessagesParams) => {
           keyboardShouldPersistTaps="handled"
         />
       </Wrapper>
-    </>
+    </SafeAreaView>
   );
 };