ordering-ui-react-native 0.12.30 → 0.12.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.30",
+  "version": "0.12.34",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -84,6 +84,7 @@
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
+    "react-native-map-link": "^2.8.2",
     "react-native-maps": "^0.28.0",
     "react-native-modal-dropdown": "^1.0.1",
     "react-native-onesignal": "^4.1.1",

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,
@@ -143,7 +146,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
-  }, [loading]);
+  }, [order?.loading]);
 
   const handleCloseModal = () => {
     setOpenModalForBusiness(false);
@@ -153,6 +156,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     navigation?.canGoBack() && navigation.goBack();
   };
 
+  const handleRejectLogisticOrder = () => {
+    handleClickLogisticOrder?.(2, order?.logistic_order_id)
+    handleArrowBack()
+  }
+
   useEffect(() => {
     if (order?.driver === null && session?.user?.level === 4) {
       setAlertState({
@@ -207,7 +215,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     },
   });
 
-  let locationMarker;
+  let locationMarker: any;
   let isToFollow = false;
   let isBusinessMarker = false;
 
@@ -235,10 +243,184 @@ 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={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={order?.loading}
+            btnText={t('PICKUP_FAILED', 'Pickup failed')}
+            isSecondaryBtn={false}
+            secondButtonClick={() =>
+              handleChangeOrderStatus && handleChangeOrderStatus(9)
+            }
+            firstButtonClick={() =>
+              handleViewActionOrder && handleViewActionOrder('failed')
+            }
+            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={order?.loading}
+              btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
+              isSecondaryBtn={false}
+              secondButtonClick={() =>
+                handleChangeOrderStatus && handleChangeOrderStatus(11)
+              }
+              firstButtonClick={() =>
+                handleViewActionOrder && handleViewActionOrder('failed')
+              }
+              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%'}
+          />
+        )}
+
+        <Alert
+          open={alertState.open}
+          onAccept={handleArrowBack}
+          onClose={handleArrowBack}
+          content={alertState.content}
+          title={t('WARNING', 'Warning')}
+        />
+      </>
+    )
+  }
+
   return (
     <>
       {(!order || Object.keys(order).length === 0) &&
-        (error?.length < 1 || !error) && (
+        (order?.error?.length < 1 || !order?.error) && (
           <View style={{ flex: 1 }}>
             {[...Array(6)].map((item, i) => (
               <Placeholder key={i} Animation={Fade}>
@@ -255,7 +437,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!error || error) && (
+      {(!!order?.error || order?.error) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={
@@ -266,179 +448,25 @@ 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 && (order?.error?.length < 1 || !order?.error) && (
+          <>
+            {order?.order_group && order?.order_group_id ? order?.order_group?.orders.map((order: any) => (
+              <OrderDetailsInformation order={order} />
+            )) : (
+              <OrderDetailsInformation order={order} />
+            )}
+          </>
+        )}
+      </View>
     </>
   );
 };