ordering-ui-react-native 0.24.43-test → 0.25.1

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

@@ -1,536 +1,563 @@
-import React, { useState, useEffect, useRef } from 'react';
-import FeatherIcon from 'react-native-vector-icons/Feather';
-import {
-  Linking,
-  Keyboard,
-  Platform,
-  View,
-  KeyboardAvoidingView,
-  TextInput,
-  StyleSheet,
-  TouchableOpacity
-} from 'react-native';
-import { useTheme } from 'styled-components/native';
-import SelectDropdown from 'react-native-select-dropdown'
-import { useLanguage } from 'ordering-components/native';
-import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
-import { OText, OButton, OTextarea, OIcon } from '../shared';
-import { AcceptOrRejectOrderParams } from '../../types';
-
-import { orderCommentList } from '../../../../../src/utils'
-
-export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
-  const {
-    isPage,
-    customerCellphone,
-    action,
-    handleUpdateOrder,
-    actions,
-    closeModal,
-    orderId,
-    notShowCustomerPhone,
-    orderTitle,
-    appTitle,
-  } = props;
-
-  const [, t] = useLanguage();
-  const theme = useTheme();
-  const scrollViewRef = useRef<any>(null);
-  const viewRef = useRef<any>(null);
-  const timerRef = useRef() as React.MutableRefObject<TextInput>;
-  const textTareaRef = useRef<any>();
-  const [hour, setHour] = useState('00');
-  const [min, setMin] = useState('00');
-  const [time, setTime] = useState('');
-  const [comments, setComments] = useState('');
-  const [rejectReason, setRejectReason] = useState(null);
-  const [keyboardState, setKeyboardState] = useState({ show: false, height: 0 });
-
-  const isDriverApp = appTitle?.key === 'DELIVERY_APP'
-  const orderCommentsList = orderCommentList(action)
-
-  let codeNumberPhone, numberPhone, numberToShow;
-  const phoneNumber = customerCellphone;
-  const titleOrder = t(orderTitle[action]?.key, orderTitle[action]?.text)
-  const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
-  const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
-
-  const styles = StyleSheet.create({
-    selectOption: {
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      minHeight: 40,
-      width: '100%',
-      paddingHorizontal: 15,
-      backgroundColor: theme.colors.inputChat,
-      borderRadius: 7.6,
-    },
-    buttonTextStyle: {
-      textAlign: 'left',
-      marginHorizontal: 0,
-      fontSize: 16,
-      lineHeight: 24,
-      color: '#748194',
-      textTransform: 'capitalize'
-    },
-    dropdownStyle: {
-      borderWidth: 1,
-      borderRadius: 8,
-      paddingTop: 5,
-      backgroundColor: '#fff',
-      borderColor: theme.colors.lightGray,
-      overflow: 'hidden',
-      minHeight: 120
-    },
-    rowStyle: {
-      display: 'flex',
-      borderBottomWidth: 0,
-      height: 36,
-      alignItems: 'center',
-      paddingHorizontal: 10
-    },
-    parent: {
-      flex: 1,
-      backgroundColor: theme.colors.backgroundPage,
-    },
-    upper: {
-      flex: 1,
-      zIndex: 1001,
-      paddingTop: isPage ? 30 : 40,
-      marginBottom: 10,
-      backgroundColor: theme.colors.backgroundPage
-    },
-    bottomParent: {
-      justifyContent: "center",
-      paddingHorizontal: 30,
-      alignItems: "center",
-      width: '100%',
-      height: 45,
-    },
-    bottom: {
-      textAlignVertical: "center",
-      textAlign: "center",
-    },
-    btnBackArrow: {
-      borderWidth: 0,
-      width: 32,
-      height: 32,
-      tintColor: theme.colors.textGray,
-      backgroundColor: theme.colors.clear,
-      borderColor: theme.colors.clear,
-      shadowColor: theme.colors.clear,
-      paddingLeft: 0,
-      paddingRight: 0
-    },
-  })
-
-  const handleFocus = () => {
-    viewRef?.current?.measure((x: any, y: any) => {
-      scrollViewRef?.current?.scrollTo({ x: 0, y });
-    });
-  };
-
-  if (!notShowCustomerPhone) {
-    if (phoneNumber) {
-      codeNumberPhone = phoneNumber.slice(0, 3);
-      numberPhone = phoneNumber.slice(3, phoneNumber?.length);
-      numberToShow = `(${codeNumberPhone}) ${numberPhone}`;
-    }
-  }
-
-  const handleArrowBack: any = () => {
-    closeModal(false);
-  };
-
-  const handleTime = (e: any) => {
-    if (
-      e.includes(',') ||
-      e.includes('.') ||
-      e.includes('-') ||
-      e.includes(' ')
-    )
-      return;
-
-    setTime(e.slice(-4));
-    const mins = e.slice(-2);
-    const hours = e.slice(-4, -2);
-
-    setMin(mins);
-    setHour(hours);
-    setTime(`${hours}${mins}`);
-  };
-
-  useEffect(() => {
-    if (actions && action === 'accept') {
-      openTimerIOnput();
-    }
-
-    if (actions && showTextArea) {
-      openTextTareaOInput();
-    }
-  }, []);
-
-  const handleFixTime = () => {
-    if (min >= '60') {
-      setMin('59');
-    }
-
-    if (min.length < 2) setMin(`0${min}`);
-    if (hour.length < 2) setHour(`0${hour}`);
-
-    if (!hour) setHour('00');
-  };
-
-  const openTimerIOnput = () => {
-    const isFocus = timerRef.current?.isFocused();
-    if (isFocus) {
-      timerRef.current?.blur();
-    }
-
-  };
-
-  const openTextTareaOInput = () => {
-    const isFocus = textTareaRef.current?.isFocused();
-    if (isFocus && textTareaRef?.current) {
-      textTareaRef.current.blur();
-    }
-
-    if (!isFocus && textTareaRef?.current) {
-      textTareaRef?.current?.focus?.();
-    }
-  };
-
-  const handleAcceptOrReject = () => {
-    handleFixTime();
-    let minsToSend = min;
-
-    if (min > '60') minsToSend = '59';
-
-    const time = parseInt(hour || '0') * 60 + (parseInt(minsToSend) || 0);
-
-    let bodyToSend: any = {};
-    const orderStatus: any = {
-      acceptByBusiness: {
-        prepared_in: time,
-        status: 7,
-      },
-      rejectByBusiness: {
-        reasons: comments,
-        status: 5,
-      },
-      acceptByDriver: {
-        delivered_in: time,
-        status: 8,
-      },
-      rejectByDriver: {
-        reasons: comments,
-        status: 6,
-        reject_reason: rejectReason
-      },
-      pickupFailedByDriver: {
-        reasons: comments,
-        status: 10,
-        reject_reason: rejectReason
-      },
-      deliveryFailedByDriver: {
-        reasons: comments,
-        status: 12,
-        reject_reason: rejectReason
-      },
-      orderNotReady: {
-        reasons: comments,
-        status: 14,
-        reject_reason: rejectReason
-      },
-      forcePickUp: {
-        reasons: comments,
-        status: 9,
-        reject_reason: rejectReason
-      },
-      forceDelivery: {
-        reasons: comments,
-        status: 11,
-        reject_reason: rejectReason
-      }
-    };
-
-    if (actions && action === 'accept') {
-      bodyToSend = orderStatus[actions.accept];
-    }
-    if (actions && action === 'reject') {
-      bodyToSend = orderStatus[actions.reject];
-    }
-    if (actions && action === 'pickupFailed') {
-      bodyToSend = orderStatus[actions.pickupFailed]
-    }
-    if (actions && action === 'deliveryFailed') {
-      bodyToSend = orderStatus[actions.deliveryFailed]
-    }
-    if (actions && action === 'notReady') {
-      bodyToSend = orderStatus[actions.notReady]
-    }
-    if (actions && action === 'forcePickUp') {
-      bodyToSend = orderStatus[actions.forcePickUp]
-    }
-    if (actions && action === 'forceDelivery') {
-      bodyToSend = orderStatus[actions.forceDelivery]
-    }
-
-    bodyToSend.id = orderId;
-    handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
-  };
-
-  useEffect(() => {
-    if (actions && action === 'accept') {
-      const interval = setTimeout(() => {
-        timerRef?.current?.focus?.()
-      }, 200)
-      return () => {
-        clearTimeout(interval)
-      }
-    }
-  }, [timerRef?.current])
-
-  useEffect(() => {
-    const keyboardDidShowListener =
-      Keyboard.addListener('keyboardDidShow', (e) => setKeyboardState({
-        show: true,
-        height: e.endCoordinates.height > 100
-          ? Platform.OS == 'ios' ? e.endCoordinates.height : 0 : 0
-      }))
-    const keyboardDidHideListener =
-      Keyboard.addListener('keyboardDidHide', () => setKeyboardState({ show: false, height: 0 }))
-    return () => {
-      keyboardDidShowListener.remove()
-      keyboardDidHideListener.remove()
-    }
-  }, [])
-
-  return (
-    <KeyboardAvoidingView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1 }}
-    >
-      <View style={styles.parent}>
-        <View style={styles.upper}>
-          <TopActions>
-            <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
-              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
-            </TouchableOpacity>
-            <OText
-              size={20}
-              color={theme.colors.textGray}
-              style={{
-                fontFamily: 'Poppins',
-                fontStyle: 'normal',
-                marginBottom: 10,
-              }}
-              weight="600">
-              {titleOrder}
-            </OText>
-          </TopActions>
-          <Content showsVerticalScrollIndicator={false} ref={scrollViewRef}>
-            <Header>
-              {action === 'reject' && (
-                <>
-                  {!notShowCustomerPhone && (
-                    <>
-                      <OText
-                        size={15}
-                        color={theme.colors.textGray}
-                        style={{ marginTop: 10 }}>
-                        {t(
-                          'CALL_YOUR_CUSTOMER_TO_RESOLVE_THE_ISSUE_AS_POLITELY_AS_POSSIBLE',
-                          'Call your customer to resolve the issue as politely as possible',
-                        )}
-                      </OText>
-
-                      {!!numberToShow ? (
-                        <OButton
-                          bgColor="transparent"
-                          borderColor={theme.colors.primary}
-                          textStyle={{
-                            color: theme.colors.primary,
-                            fontSize: 20,
-                          }}
-                          style={{
-                            borderRadius: 10,
-                            marginVertical: 20,
-                          }}
-                          imgLeftStyle={{
-                            resizeMode: 'contain',
-                            left: 20,
-                            position: 'absolute',
-                          }}
-                          imgLeftSrc={theme.images.general.cellphone}
-                          text={numberToShow}
-                          onClick={() =>
-                            Linking.openURL(`tel:${customerCellphone}`)
-                          }
-                        />
-                      ) : (
-                        <OButton
-                          bgColor="transparent"
-                          borderColor={theme.colors.primary}
-                          textStyle={{
-                            color: theme.colors.primary,
-                            fontSize: 15,
-                          }}
-                          style={{
-                            borderRadius: 10,
-                            marginVertical: 20,
-                          }}
-                          imgLeftStyle={{
-                            resizeMode: 'contain',
-                            left: 20,
-                            position: 'absolute',
-                          }}
-                          isDisabled={true}
-                          imgLeftSrc={theme.images.general.cellphone}
-                          text={t('NOT_NUMBER', "There's not phonenumber.")}
-                          onClick={() =>
-                            Linking.openURL(`tel:${customerCellphone}`)
-                          }
-                        />
-                      )}
-                    </>
-                  )}
-
-                  <OText
-                    size={15}
-                    color={theme.colors.textGray}
-                    style={{ marginBottom: 10 }}>
-                    {t(
-                      'MARK_THE_ORDER_AS_REJECTED',
-                      'Mark the order as rejected',
-                    )}
-                  </OText>
-
-                  <OText>
-                    <OText style={{ fontWeight: '600' }}>
-                      {t('NOTE', 'Note')}
-                      {': '}
-                    </OText>
-
-                    <OText size={15} color={theme.colors.textGray}>
-                      {t(
-                        'YOUR_CUSTOMER_WILL_RECEIVE_A_NOTIFICATION_ABOUT_THIS_ACTIONS',
-                        'Your customer will receive a notification about this actions',
-                      )}
-                    </OText>
-                  </OText>
-                </>
-              )}
-            </Header>
-
-            {action === 'accept' && (
-              <View style={{ height: 300, justifyContent: 'center' }}>
-                <Timer onPress={() => openTimerIOnput()}>
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                    {hour}
-                  </OText>
-                  {hour.length > 0 && <OText size={55}>:</OText>}
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                    {min}
-                  </OText>
-                </Timer>
-              </View>
-            )}
-            <TimeField
-              ref={timerRef}
-              keyboardType="numeric"
-              value={time}
-              placeholder={'00:00'}
-              onChangeText={handleTime}
-              onPressOut={() => handleFixTime()}
-              editable={true}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={theme.colors.textGray}
-              color={theme.colors.textGray}
-              onEndEditing={handleFixTime}
-              onSubmitEditing={() => handleAcceptOrReject()}
-              onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
-            />
-
-            {orderCommentsList && isDriverApp && (
-              <CommentsButtonGroup>
-                <SelectDropdown
-                  defaultButtonText={t('REJECT_REASONS_OPTIONS', 'Reject reasons')}
-                  data={orderCommentsList?.list}
-                  onSelect={(selectedItem) => {
-                    setRejectReason(selectedItem?.value)
-                  }}
-                  buttonTextAfterSelection={(selectedItem) => selectedItem.content}
-                  rowTextForSelection={(item) => item.key}
-                  buttonStyle={styles.selectOption}
-                  buttonTextStyle={styles.buttonTextStyle}
-                  renderDropdownIcon={isOpened => {
-                    return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
-                  }}
-                  dropdownStyle={styles.dropdownStyle}
-                  dropdownOverlayColor='transparent'
-                  rowStyle={styles.rowStyle}
-                  renderCustomizedRowChild={(item) => {
-                    return (
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          alignItems: 'center'
-                        }}
-                      >
-                        <View>
-                          <OText
-                            size={14}
-                            color={'#748194'}
-                            style={{ textTransform: 'capitalize' }}
-                          >
-                            {item?.content}
-                          </OText>
-                        </View>
-                      </View>
-                    );
-                  }}
-                />
-              </CommentsButtonGroup>
-            )}
-
-            {showTextArea && (
-              <Comments ref={viewRef}>
-                <OTextarea
-                  textTareaRef={textTareaRef}
-                  autoFocus
-                  onFocus={handleFocus}
-                  placeholder={t(
-                    'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
-                    'Please type your comments in here',
-                  )}
-                  value={comments}
-                  onChange={setComments}
-                />
-              </Comments>
-            )}
-          </Content>
-        </View>
-        <View
-          style={{
-            ...styles.bottomParent,
-            marginBottom: (keyboardState.height === 0) ? isPage ? 0 : 30 : keyboardState.height - (isPage ? 20 : -10)
-          }}
-        >
-          <OButton
-            text={buttonText}
-            bgColor={action === 'accept' ? theme.colors.green : theme.colors.red}
-            borderColor={action === 'accept' ? theme.colors.green : theme.colors.red}
-            imgRightSrc={null}
-            style={{ borderRadius: 7, height: 45 }}
-            parentStyle={{ width: '100%' }}
-            textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={showTextArea && !comments}
-            onClick={() => handleAcceptOrReject()}
-          />
-        </View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-};
+import React, { useState, useEffect, useRef } from 'react';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import {
+  Linking,
+  Keyboard,
+  Platform,
+  View,
+  KeyboardAvoidingView,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity
+} from 'react-native';
+import { useTheme } from 'styled-components/native';
+import SelectDropdown from 'react-native-select-dropdown'
+import { useLanguage } from 'ordering-components/native';
+import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
+import { OText, OButton, OTextarea, OIcon } from '../shared';
+import { AcceptOrRejectOrderParams } from '../../types';
+import { useOfflineActions } from '../../../../../src/context/OfflineActions';
+import { orderCommentList } from '../../../../../src/utils'
+
+export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
+  const {
+    isPage,
+    customerCellphone,
+    action,
+    handleUpdateOrder,
+    actions,
+    closeModal,
+    orderId,
+    notShowCustomerPhone,
+    orderTitle,
+    appTitle,
+    isLoadingOrder
+  } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const [{ isNetConnected, canSaveChangesOffline }, { applyOffAction, registerOffOrder }] = useOfflineActions()
+
+  const scrollViewRef = useRef<any>(null);
+  const viewRef = useRef<any>(null);
+  const timerRef = useRef() as React.MutableRefObject<TextInput>;
+  const textTareaRef = useRef<any>();
+  const [hour, setHour] = useState('00');
+  const [min, setMin] = useState('00');
+  const [time, setTime] = useState('');
+  const [comments, setComments] = useState('');
+  const [rejectReason, setRejectReason] = useState(null);
+  const [keyboardState, setKeyboardState] = useState({ show: false, height: 0 });
+
+  const isDriverApp = appTitle?.key === 'DELIVERY_APP'
+  const orderCommentsList = orderCommentList(action)
+
+  let codeNumberPhone, numberPhone, numberToShow;
+  const phoneNumber = customerCellphone;
+  const titleOrder = t(orderTitle[action]?.key, orderTitle[action]?.text)
+  const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
+  const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 40,
+      width: '100%',
+      paddingHorizontal: 15,
+      backgroundColor: theme.colors.inputChat,
+      borderRadius: 7.6,
+    },
+    buttonTextStyle: {
+      textAlign: 'left',
+      marginHorizontal: 0,
+      fontSize: 16,
+      lineHeight: 24,
+      color: '#748194',
+      textTransform: 'capitalize'
+    },
+    dropdownStyle: {
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingTop: 5,
+      backgroundColor: '#fff',
+      borderColor: theme.colors.lightGray,
+      overflow: 'hidden',
+      minHeight: 120
+    },
+    rowStyle: {
+      display: 'flex',
+      borderBottomWidth: 0,
+      height: 36,
+      alignItems: 'center',
+      paddingHorizontal: 10
+    },
+    parent: {
+      flex: 1,
+      backgroundColor: theme.colors.backgroundPage,
+    },
+    upper: {
+      flex: 1,
+      zIndex: 1001,
+      paddingTop: isPage ? 30 : 40,
+      marginBottom: 10,
+      backgroundColor: theme.colors.backgroundPage
+    },
+    bottomParent: {
+      justifyContent: "center",
+      paddingHorizontal: 30,
+      alignItems: "center",
+      width: '100%',
+      height: 45,
+    },
+    bottom: {
+      textAlignVertical: "center",
+      textAlign: "center",
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+  })
+
+  const handleFocus = () => {
+    viewRef?.current?.measure((x: any, y: any) => {
+      scrollViewRef?.current?.scrollTo({ x: 0, y });
+    });
+  };
+
+  if (!notShowCustomerPhone) {
+    if (phoneNumber) {
+      codeNumberPhone = phoneNumber.slice(0, 3);
+      numberPhone = phoneNumber.slice(3, phoneNumber?.length);
+      numberToShow = `(${codeNumberPhone}) ${numberPhone}`;
+    }
+  }
+
+  const handleArrowBack: any = () => {
+    closeModal(false);
+  };
+
+  const handleTime = (e: any) => {
+    if (
+      e.includes(',') ||
+      e.includes('.') ||
+      e.includes('-') ||
+      e.includes(' ')
+    )
+      return;
+
+    setTime(e.slice(-4));
+    const mins = e.slice(-2);
+    const hours = e.slice(-4, -2);
+
+    setMin(mins);
+    setHour(hours);
+    setTime(`${hours}${mins}`);
+  };
+
+  useEffect(() => {
+    if (actions && action === 'accept') {
+      openTimerIOnput();
+    }
+
+    if (actions && showTextArea) {
+      openTextTareaOInput();
+    }
+  }, []);
+
+  const handleFixTime = () => {
+    if (min >= '60') {
+      setMin('59');
+    }
+
+    if (min.length < 2) setMin(`0${min}`);
+    if (hour.length < 2) setHour(`0${hour}`);
+
+    if (!hour) setHour('00');
+  };
+
+  const openTimerIOnput = () => {
+    const isFocus = timerRef.current?.isFocused();
+    if (isFocus) {
+      timerRef.current?.blur();
+    }
+
+  };
+
+  const openTextTareaOInput = () => {
+    const isFocus = textTareaRef.current?.isFocused();
+    if (isFocus && textTareaRef?.current) {
+      textTareaRef.current.blur();
+    }
+
+    if (!isFocus && textTareaRef?.current) {
+      textTareaRef?.current?.focus?.();
+    }
+  };
+
+  const handleAcceptOrReject = async () => {
+    handleFixTime();
+    let minsToSend = min;
+
+    if (min > '60') minsToSend = '59';
+
+    const time = parseInt(hour || '0') * 60 + (parseInt(minsToSend) || 0);
+
+    let bodyToSend: any = {};
+    const orderStatus: any = {
+      acceptByBusiness: {
+        prepared_in: time,
+      },
+      rejectByBusiness: {
+        reasons: comments,
+        status: 5,
+      },
+      acceptByDriver: {
+        delivered_in: time,
+        status: 8,
+      },
+      rejectByDriver: {
+        reasons: comments,
+        status: 6,
+        reject_reason: rejectReason
+      },
+      pickupFailedByDriver: {
+        reasons: comments,
+        status: 10,
+        reject_reason: rejectReason
+      },
+      deliveryFailedByDriver: {
+        reasons: comments,
+        status: 12,
+        reject_reason: rejectReason
+      },
+      orderNotReady: {
+        reasons: comments,
+        status: 14,
+        reject_reason: rejectReason
+      },
+      forcePickUp: {
+        reasons: comments,
+        status: 9,
+        reject_reason: rejectReason
+      },
+      forceDelivery: {
+        reasons: comments,
+        status: 11,
+        reject_reason: rejectReason
+      }
+    };
+
+    if (actions && action === 'accept') {
+      bodyToSend = orderStatus[actions.accept];
+    }
+    if (actions && action === 'reject') {
+      bodyToSend = orderStatus[actions.reject];
+    }
+    if (actions && action === 'pickupFailed') {
+      bodyToSend = orderStatus[actions.pickupFailed]
+    }
+    if (actions && action === 'deliveryFailed') {
+      bodyToSend = orderStatus[actions.deliveryFailed]
+    }
+    if (actions && action === 'notReady') {
+      bodyToSend = orderStatus[actions.notReady]
+    }
+    if (actions && action === 'forcePickUp') {
+      bodyToSend = orderStatus[actions.forcePickUp]
+    }
+    if (actions && action === 'forceDelivery') {
+      bodyToSend = orderStatus[actions.forceDelivery]
+    }
+
+    bodyToSend.id = orderId;
+
+    if (!isNetConnected && canSaveChangesOffline !== false) {
+      const body = Object.keys(bodyToSend || {}).length > 0
+        ? bodyToSend
+        : { status: bodyToSend.status }
+
+      const result = applyOffAction({
+        event: 'evt_off_change_order_status',
+        data: { orderId, body }
+      })
+
+      const orderUpdated = await handleUpdateOrder?.(
+        bodyToSend.status,
+        bodyToSend,
+        { dataToSave: { ...body, unsync: true } }
+      )
+      await registerOffOrder(orderUpdated)
+      closeModal && closeModal()
+    } else {
+      handleUpdateOrder?.(bodyToSend.status, bodyToSend);
+    }
+  };
+
+  useEffect(() => {
+    if (actions && action === 'accept') {
+      const interval = setTimeout(() => {
+        timerRef?.current?.focus?.()
+      }, 200)
+      return () => {
+        clearTimeout(interval)
+      }
+    }
+  }, [timerRef?.current])
+
+  useEffect(() => {
+    const keyboardDidShowListener =
+      Keyboard.addListener('keyboardDidShow', (e) => setKeyboardState({
+        show: true,
+        height: e.endCoordinates.height > 100
+          ? Platform.OS == 'ios' ? e.endCoordinates.height : 0 : 0
+      }))
+    const keyboardDidHideListener =
+      Keyboard.addListener('keyboardDidHide', () => setKeyboardState({ show: false, height: 0 }))
+    return () => {
+      keyboardDidShowListener.remove()
+      keyboardDidHideListener.remove()
+    }
+  }, [])
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+    >
+      <View style={styles.parent}>
+        <View style={styles.upper}>
+          <TopActions>
+            <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
+            <OText
+              size={20}
+              color={theme.colors.textGray}
+              style={{
+                fontFamily: 'Poppins',
+                fontStyle: 'normal',
+                marginBottom: 10,
+              }}
+              weight="600">
+              {titleOrder}
+            </OText>
+          </TopActions>
+          <Content showsVerticalScrollIndicator={false} ref={scrollViewRef}>
+            <Header>
+              {action === 'reject' && (
+                <>
+                  {!notShowCustomerPhone && (
+                    <>
+                      <OText
+                        size={15}
+                        color={theme.colors.textGray}
+                        style={{ marginTop: 10 }}>
+                        {t(
+                          'CALL_YOUR_CUSTOMER_TO_RESOLVE_THE_ISSUE_AS_POLITELY_AS_POSSIBLE',
+                          'Call your customer to resolve the issue as politely as possible',
+                        )}
+                      </OText>
+
+                      {!!numberToShow ? (
+                        <OButton
+                          bgColor="transparent"
+                          borderColor={theme.colors.primary}
+                          textStyle={{
+                            color: theme.colors.primary,
+                            fontSize: 20,
+                          }}
+                          style={{
+                            borderRadius: 10,
+                            marginVertical: 20,
+                          }}
+                          imgLeftStyle={{
+                            resizeMode: 'contain',
+                            left: 20,
+                            position: 'absolute',
+                          }}
+                          imgLeftSrc={theme.images.general.cellphone}
+                          text={numberToShow}
+                          onClick={() =>
+                            Linking.openURL(`tel:${customerCellphone}`)
+                          }
+                        />
+                      ) : (
+                        <OButton
+                          bgColor="transparent"
+                          borderColor={theme.colors.primary}
+                          textStyle={{
+                            color: theme.colors.primary,
+                            fontSize: 15,
+                          }}
+                          style={{
+                            borderRadius: 10,
+                            marginVertical: 20,
+                          }}
+                          imgLeftStyle={{
+                            resizeMode: 'contain',
+                            left: 20,
+                            position: 'absolute',
+                          }}
+                          isDisabled={true}
+                          imgLeftSrc={theme.images.general.cellphone}
+                          text={t('NOT_NUMBER', "There's not phonenumber.")}
+                          onClick={() =>
+                            Linking.openURL(`tel:${customerCellphone}`)
+                          }
+                        />
+                      )}
+                    </>
+                  )}
+
+                  <OText
+                    size={15}
+                    color={theme.colors.textGray}
+                    style={{ marginBottom: 10 }}>
+                    {t(
+                      'MARK_THE_ORDER_AS_REJECTED',
+                      'Mark the order as rejected',
+                    )}
+                  </OText>
+
+                  <OText>
+                    <OText style={{ fontWeight: '600' }}>
+                      {t('NOTE', 'Note')}
+                      {': '}
+                    </OText>
+
+                    <OText size={15} color={theme.colors.textGray}>
+                      {t(
+                        'YOUR_CUSTOMER_WILL_RECEIVE_A_NOTIFICATION_ABOUT_THIS_ACTIONS',
+                        'Your customer will receive a notification about this actions',
+                      )}
+                    </OText>
+                  </OText>
+                </>
+              )}
+            </Header>
+
+            {action === 'accept' && (
+              <View style={{ height: 300, justifyContent: 'center' }}>
+                <Timer onPress={() => openTimerIOnput()}>
+                  <OText weight="600" size={55}>
+                    {hour}
+                  </OText>
+                  {hour.length > 0 && <OText size={55} style={{ marginBottom: 10 }}>:</OText>}
+                  <OText weight="600" size={55}>
+                    {min}
+                  </OText>
+                  {time?.length > 2 && <OText style={{ position: 'absolute', bottom: 60, left: 55 }}>{t('HOURS', 'Hours')}</OText>}
+                  <OText style={{ position: 'absolute', bottom: 60, right: time?.length > 2 ? 55 : 95 }}>{t('MINUTES', 'Minutes')}</OText>
+                </Timer>
+              </View>
+            )}
+            <TimeField
+              ref={timerRef}
+              keyboardType="numeric"
+              value={time}
+              placeholder={'00:00'}
+              onChangeText={handleTime}
+              onPressOut={() => handleFixTime()}
+              editable={true}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={theme.colors.textGray}
+              color={theme.colors.textGray}
+              onEndEditing={handleFixTime}
+              onSubmitEditing={() => handleAcceptOrReject()}
+              onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
+            />
+
+            {orderCommentsList && isDriverApp && (
+              <CommentsButtonGroup>
+                <SelectDropdown
+                  defaultButtonText={t('REJECT_REASONS_OPTIONS', 'Reject reasons')}
+                  data={orderCommentsList?.list}
+                  onSelect={(selectedItem) => {
+                    setRejectReason(selectedItem?.value)
+                  }}
+                  buttonTextAfterSelection={(selectedItem) => selectedItem.content}
+                  rowTextForSelection={(item) => item.key}
+                  buttonStyle={styles.selectOption}
+                  buttonTextStyle={styles.buttonTextStyle}
+                  renderDropdownIcon={isOpened => {
+                    return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+                  }}
+                  dropdownStyle={styles.dropdownStyle}
+                  dropdownOverlayColor='transparent'
+                  rowStyle={styles.rowStyle}
+                  renderCustomizedRowChild={(item) => {
+                    return (
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center'
+                        }}
+                      >
+                        <View>
+                          <OText
+                            size={14}
+                            color={'#748194'}
+                            style={{ textTransform: 'capitalize' }}
+                          >
+                            {item?.content}
+                          </OText>
+                        </View>
+                      </View>
+                    );
+                  }}
+                />
+              </CommentsButtonGroup>
+            )}
+
+            {showTextArea && (
+              <Comments ref={viewRef}>
+                <OTextarea
+                  textTareaRef={textTareaRef}
+                  autoFocus
+                  onFocus={handleFocus}
+                  placeholder={t(
+                    'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
+                    'Please type your comments in here',
+                  )}
+                  value={comments}
+                  onChange={setComments}
+                />
+              </Comments>
+            )}
+          </Content>
+        </View>
+        <View
+          style={{
+            ...styles.bottomParent,
+            marginBottom: Platform.OS === 'ios'
+              ? 30 : (keyboardState.height === 0)
+                ? isPage ? 0 : 40
+                : keyboardState.height - (isPage ? 20 : -10)
+          }}
+        >
+          <OButton
+            text={buttonText}
+            bgColor={action === 'accept' ? theme.colors.green : theme.colors.red}
+            borderColor={action === 'accept' ? theme.colors.green : theme.colors.red}
+            imgRightSrc={null}
+            style={{ borderRadius: 7, height: 45 }}
+            parentStyle={{ width: '100%' }}
+            textStyle={{ color: '#FFF', fontSize: 18 }}
+            isDisabled={(showTextArea && !comments) || isLoadingOrder}
+            onClick={() => handleAcceptOrReject()}
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};