ordering-ui-react-native 0.12.33 → 0.12.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.33",
+  "version": "0.12.37",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -40,12 +40,14 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [time, setTime] = useState('');
   const [comments, setComments] = useState('');
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
-  const phoneNumber = customerCellphone;
-  let codeNumberPhone, numberPhone, numberToShow;
   const { top, bottom } = useSafeAreaInsets()
-  const titleOrder = t(orderTitle[action].key, orderTitle[action].text)
-  const buttonText = t(orderTitle[action].btnKey, orderTitle[action].btnText)
+
+  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'].includes(action)
+
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
       scrollViewRef?.current?.scrollTo({ x: 0, y });
@@ -210,7 +212,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     }
 
     bodyToSend.id = orderId;
-
     handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
   };
 

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -48,8 +48,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     isFromCheckout,
     driverLocation,
     actions,
-    titleAccept,
-    titleReject,
+    orderTitle,
     appTitle,
   } = props;
 
@@ -607,8 +606,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   orderId={order?.id}
                   notShowCustomerPhone={false}
                   actions={actions}
-                  titleAccept={titleAccept}
-                  titleReject={titleReject}
+                  orderTitle={orderTitle}
                   appTitle={appTitle}
                 />
               </OModal>

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -50,10 +50,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setDriverUpdateLocation,
     orderTitle,
     appTitle,
+    handleClickLogisticOrder
   } = props;
 
   const [, { showToast }] = useToast();
-  const { order, loading, error } = props.order;
+  const { order } = props.order
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
@@ -71,6 +72,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     key?: string | null;
   }>({ open: false, content: [], key: null });
 
+  const logisticOrderStatus = [4, 6, 7]
+
   const showFloatButtonsPickUp: any = {
     8: true,
     3: true,
@@ -125,6 +128,36 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
+  const handleCloseModal = () => {
+    setOpenModalForBusiness(false);
+  };
+
+  const handleArrowBack: any = () => {
+    navigation?.canGoBack() && navigation.goBack();
+  };
+
+  const handleRejectLogisticOrder = () => {
+    handleClickLogisticOrder?.(2, order?.logistic_order_id)
+    handleArrowBack()
+  }
+
+  const locations = [
+    {
+      ...order?.business?.location,
+      title: order?.business?.name,
+      icon: order?.business?.logo || theme.images.dummies.businessLogo,
+      type: 'Business',
+    },
+    {
+      ...order?.customer?.location,
+      title: order?.customer?.name,
+      icon:
+        order?.customer?.photo ||
+        'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
+      type: 'Customer',
+    },
+  ];
+
   useEffect(() => {
     if (permissions.locationStatus !== 'granted' && openModalForMapView) {
       setOpenModalForMapView(false);
@@ -143,15 +176,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
-  }, [loading]);
-
-  const handleCloseModal = () => {
-    setOpenModalForBusiness(false);
-  };
-
-  const handleArrowBack: any = () => {
-    navigation?.canGoBack() && navigation.goBack();
-  };
+  }, [props.order?.loading]);
 
   useEffect(() => {
     if (order?.driver === null && session?.user?.level === 4) {
@@ -168,23 +193,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [order?.driver]);
 
-  const locations = [
-    {
-      ...order?.business?.location,
-      title: order?.business?.name,
-      icon: order?.business?.logo || theme.images.dummies.businessLogo,
-      type: 'Business',
-    },
-    {
-      ...order?.customer?.location,
-      title: order?.customer?.name,
-      icon:
-        order?.customer?.photo ||
-        'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
-      type: 'Customer',
-    },
-  ];
-
   useEffect(() => {
     if (driverLocation) {
       locations[0] = driverLocation;
@@ -207,7 +215,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     },
   });
 
-  let locationMarker;
+  let locationMarker: any;
   let isToFollow = false;
   let isBusinessMarker = false;
 
@@ -235,10 +243,176 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     );
   }
 
+  const OrderDetailsInformation = (_order: any, isOrderGroup: boolean) => {
+    const { order } = _order
+    return (
+      <>
+        <OrderDetailsContainer
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <>
+            <OrderContentComponent
+              order={order}
+              logisticOrderStatus={logisticOrderStatus}
+              isOrderGroup={isOrderGroup}
+            />
+            {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
+              <Pickup>
+                <OButton
+                  style={styles.btnPickUp}
+                  textStyle={{ color: theme.colors.primary }}
+                  text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+                  onClick={() =>
+                    handleChangeOrderStatus && handleChangeOrderStatus(3)
+                  }
+                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
+                />
+              </Pickup>
+            )}
+            {(order?.status === 3) && order?.delivery_type === 1 && (
+              <View style={{ paddingVertical: 20, marginBottom: 20 }}>
+                <OButton
+                  style={styles.btnPickUp}
+                  textStyle={{ color: theme.colors.white }}
+                  text={t('ORDER_NOT_READY', 'Order not ready')}
+                  onClick={() =>
+                    handleViewActionOrder && handleViewActionOrder('notReady')
+                  }
+                  imgLeftStyle={{ tintColor: theme.colors.backArrow }}
+                  bgColor={theme.colors.red}
+                />
+              </View>
+            )}
+          </>
+
+          <OModal
+            open={openModalForBusiness}
+            order={order}
+            title={`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id}`}
+            entireModal
+            onClose={() => handleCloseModal()}>
+            <Chat
+              type={
+                openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER
+              }
+              orderId={order?.id}
+              messages={messages}
+              order={order}
+              setMessages={setMessages}
+            />
+          </OModal>
+
+          <OModal
+            open={openModalForAccept}
+            onClose={() => setOpenModalForAccept(false)}
+            entireModal
+            customClose>
+            <AcceptOrRejectOrder
+              handleUpdateOrder={handleChangeOrderStatus}
+              closeModal={setOpenModalForAccept}
+              customerCellphone={order?.customer?.cellphone}
+              loading={props.order?.loading}
+              action={actionOrder}
+              orderId={order?.id}
+              notShowCustomerPhone
+              actions={actions}
+              orderTitle={orderTitle}
+              appTitle={appTitle}
+            />
+          </OModal>
+
+          <OModal
+            open={openModalForMapView}
+            onClose={() => handleOpenMapView()}
+            entireModal
+            customClose>
+            <DriverMap
+              navigation={navigation}
+              order={order}
+              orderStatus={getOrderStatus(order?.status, t)?.value || ''}
+              location={locationMarker}
+              readOnly
+              updateDriverPosition={updateDriverPosition}
+              driverUpdateLocation={driverUpdateLocation}
+              setDriverUpdateLocation={setDriverUpdateLocation}
+              handleViewActionOrder={handleViewActionOrder}
+              isBusinessMarker={isBusinessMarker}
+              isToFollow={isToFollow}
+              showAcceptOrReject={
+                showFloatButtonsAcceptOrReject[order?.status]
+              }
+              handleOpenMapView={handleOpenMapView}
+            />
+          </OModal>
+
+          <View
+            style={{
+              height:
+                order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+            }}
+          />
+        </OrderDetailsContainer>
+
+        {showFloatButtonsPickUp[order?.status] && (
+          <FloatingButton
+            disabled={props.order?.loading}
+            btnText={t('PICKUP_FAILED', 'Pickup failed')}
+            isSecondaryBtn={false}
+            secondButtonClick={() =>
+              handleChangeOrderStatus && handleChangeOrderStatus(9)
+            }
+            firstButtonClick={() =>
+              handleViewActionOrder && handleViewActionOrder('pickupFailed')
+            }
+            secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
+            secondButton={true}
+            firstColorCustom={theme.colors.red}
+            secondColorCustom={theme.colors.green}
+            widthButton={'45%'}
+          />
+        )}
+        {(order?.status === 9 || order?.status === 19) && (
+          <>
+            <FloatingButton
+              disabled={props.order?.loading}
+              btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
+              isSecondaryBtn={false}
+              secondButtonClick={() =>
+                handleChangeOrderStatus && handleChangeOrderStatus(11)
+              }
+              firstButtonClick={() =>
+                handleViewActionOrder && handleViewActionOrder('deliveryFailed')
+              }
+              secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
+              secondButton={true}
+              firstColorCustom={theme.colors.red}
+              secondColorCustom={theme.colors.green}
+              widthButton={'45%'}
+            />
+          </>
+        )}
+        {showFloatButtonsAcceptOrReject[order?.status] && (
+          <FloatingButton
+            btnText={t('REJECT', 'Reject')}
+            isSecondaryBtn={false}
+            secondButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleClickLogisticOrder?.(1, order?.logistic_order_id) : handleViewActionOrder('accept')}
+            firstButtonClick={() => order?.isLogistic && logisticOrderStatus.includes(order?.status) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
+            secondBtnText={t('ACCEPT', 'Accept')}
+            secondButton={true}
+            firstColorCustom={theme.colors.red}
+            secondColorCustom={theme.colors.green}
+            widthButton={'45%'}
+          />
+        )}
+      </>
+    )
+  }
+
   return (
     <>
       {(!order || Object.keys(order).length === 0) &&
-        (error?.length < 1 || !error) && (
+        (props.order?.error?.length < 1 || !props.order?.error) && (
           <View style={{ flex: 1 }}>
             {[...Array(6)].map((item, i) => (
               <Placeholder key={i} Animation={Fade}>
@@ -255,7 +429,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!error || error) && (
+      {(!!props.order?.error || props.order?.error) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={
@@ -266,178 +440,33 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           onClickButton={() => navigation.navigate('Orders')}
         />
       )}
-      {order && Object.keys(order).length > 0 && (error?.length < 1 || !error) && (
-        <View style={{ flex: 1 }}>
-          <OrderHeaderComponent
-            order={order}
-            handleOpenMapView={handleOpenMapView}
-            handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
-            getOrderStatus={getOrderStatus}
-            handleArrowBack={handleArrowBack}
-          />
-          <OrderDetailsContainer
-            keyboardShouldPersistTaps="handled"
-            showsVerticalScrollIndicator={false}
-          >
-            <>
-              <OrderContentComponent order={order} />
-              {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
-                <Pickup>
-                  <OButton
-                    style={styles.btnPickUp}
-                    textStyle={{ color: theme.colors.primary }}
-                    text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
-                    onClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(3)
-                    }
-                    imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                  />
-                </Pickup>
-              )}
-              {(order?.status === 3) && order?.delivery_type === 1 && (
-                <View style={{ paddingVertical: 20, marginBottom: 20 }}>
-                  <OButton
-                    style={styles.btnPickUp}
-                    textStyle={{ color: theme.colors.white }}
-                    text={t('ORDER_NOT_READY', 'Order not ready')}
-                    onClick={() =>
-                      handleViewActionOrder && handleViewActionOrder('notReady')
-                    }
-                    imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                    bgColor={theme.colors.red}
-                  />
-                </View>
-              )}
-            </>
-
-            <OModal
-              open={openModalForBusiness}
-              order={order}
-              title={`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id}`}
-              entireModal
-              onClose={() => handleCloseModal()}>
-              <Chat
-                type={
-                  openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER
-                }
-                orderId={order?.id}
-                messages={messages}
-                order={order}
-                setMessages={setMessages}
-              />
-            </OModal>
-
-            <OModal
-              open={openModalForAccept}
-              onClose={() => setOpenModalForAccept(false)}
-              entireModal
-              customClose>
-              <AcceptOrRejectOrder
-                handleUpdateOrder={handleChangeOrderStatus}
-                closeModal={setOpenModalForAccept}
-                customerCellphone={order?.customer?.cellphone}
-                loading={loading}
-                action={actionOrder}
-                orderId={order?.id}
-                notShowCustomerPhone
-                actions={actions}
-                orderTitle={orderTitle}
-                appTitle={appTitle}
-              />
-            </OModal>
-
-            <OModal
-              open={openModalForMapView}
-              onClose={() => handleOpenMapView()}
-              entireModal
-              customClose>
-              <DriverMap
-                navigation={navigation}
-                order={order}
-                orderStatus={getOrderStatus(order?.status, t)?.value || ''}
-                location={locationMarker}
-                readOnly
-                updateDriverPosition={updateDriverPosition}
-                driverUpdateLocation={driverUpdateLocation}
-                setDriverUpdateLocation={setDriverUpdateLocation}
-                handleViewActionOrder={handleViewActionOrder}
-                isBusinessMarker={isBusinessMarker}
-                isToFollow={isToFollow}
-                showAcceptOrReject={
-                  showFloatButtonsAcceptOrReject[order?.status]
-                }
-                handleOpenMapView={handleOpenMapView}
-              />
-            </OModal>
-
-            <View
-              style={{
-                height:
-                  order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
-              }}
-            />
-          </OrderDetailsContainer>
-
-          {showFloatButtonsPickUp[order?.status] && (
-            <FloatingButton
-              disabled={loading}
-              btnText={t('PICKUP_FAILED', 'Pickup failed')}
-              isSecondaryBtn={false}
-              secondButtonClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(9)
-              }
-              firstButtonClick={() =>
-                handleViewActionOrder && handleViewActionOrder('pickupFailed')
-              }
-              secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
-              secondButton={true}
-              firstColorCustom={theme.colors.red}
-              secondColorCustom={theme.colors.green}
-              widthButton={'45%'}
-            />
-          )}
-          {(order?.status === 9 || order?.status === 19) && (
-            <>
-              <FloatingButton
-                disabled={loading}
-                btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
-                isSecondaryBtn={false}
-                secondButtonClick={() =>
-                  handleChangeOrderStatus && handleChangeOrderStatus(11)
-                }
-                firstButtonClick={() =>
-                  handleViewActionOrder && handleViewActionOrder('deliveryFailed')
-                }
-                secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
-                secondButton={true}
-                firstColorCustom={theme.colors.red}
-                secondColorCustom={theme.colors.green}
-                widthButton={'45%'}
-              />
-            </>
-          )}
-          {showFloatButtonsAcceptOrReject[order?.status] && (
-            <FloatingButton
-              btnText={t('REJECT', 'Reject')}
-              isSecondaryBtn={false}
-              secondButtonClick={() => handleViewActionOrder('accept')}
-              firstButtonClick={() => handleViewActionOrder('reject')}
-              secondBtnText={t('ACCEPT', 'Accept')}
-              secondButton={true}
-              firstColorCustom={theme.colors.red}
-              secondColorCustom={theme.colors.green}
-              widthButton={'45%'}
-            />
-          )}
-
-          <Alert
-            open={alertState.open}
-            onAccept={handleArrowBack}
-            onClose={handleArrowBack}
-            content={alertState.content}
-            title={t('WARNING', 'Warning')}
-          />
-        </View>
+      <View style={{ flex: 1 }}>
+        <OrderHeaderComponent
+          order={order}
+          handleOpenMapView={handleOpenMapView}
+          handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
+          getOrderStatus={getOrderStatus}
+          handleArrowBack={handleArrowBack}
+          logisticOrderStatus={logisticOrderStatus}
+        />
+        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
+          <>
+            {order?.order_group && order?.order_group_id ? order?.order_group?.orders.map((order: any) => (
+              <OrderDetailsInformation order={order} />
+            )) : (
+              <OrderDetailsInformation order={order} />
+            )}
+          </>
+        )}
+      </View>
+      {alertState?.open && (
+        <Alert
+          open={alertState.open}
+          onAccept={handleArrowBack}
+          onClose={handleArrowBack}
+          content={alertState.content}
+          title={t('WARNING', 'Warning')}
+        />
       )}
     </>
   );