ordering-ui-react-native 0.21.55-test → 0.21.56-release

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

@@ -0,0 +1,220 @@
+import { useConfig, useUtils, useLanguage} from 'ordering-components/native'
+
+import { verifyDecimals, getProductPrice } from '../../utils';
+
+/**
+ * Hook to create commands for star micronics printer using PassPRNT library
+ * @returns array of strings
+ */
+
+export const usePrinterCommands = () => {
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig();
+  const [{ parsePrice, parseNumber, parseDate }] = useUtils();
+
+  const deliveryStatus: any = {
+    1: t('DELIVERY', 'Delivery'),
+    2: t('PICK_UP', 'Pick up'),
+    3: t('EAT_IN', 'Eat In'),
+    4: t('CURBSIDE', 'Curbside'),
+    5: t('DRIVER_THRU', 'Driver thru'),
+  };
+
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const percentTip = (order: any) =>
+    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+    verifyDecimals(order?.summary?.driver_tip, parseNumber);
+
+  const handlePaymethodsListString = (order: any) => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : paymethod?.paymethod?.gateway && paymethod?.paymethod?.gateway === 'cash' && order?.cash > 0
+          ? `${t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)} (${t('CASH_CHANGE_OF', 'Change of :amount:').replace(':amount:', parsePrice(order?.cash))})`
+          : paymethod?.paymethod?.gateway
+            ? t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+            : t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
+  const paymethodsLength = (order: any) => order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
+
+  const customerName = (order: any) => `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
+
+  const deliveryDate = (order: any) => {
+    const dateString = order?.delivery_datetime_utc ?? order?.delivery_datetime
+    const currentDate = new Date();
+    const receivedDate: any = new Date(order?.delivery_datetime);
+
+    const formattedDate = receivedDate <= currentDate
+      ? `${t('ASAP_ABBREVIATION', 'ASAP')}(${parseDate(dateString, { utc: !!order?.delivery_datetime_utc })})`
+      : parseDate(dateString, { utc: !!order?.delivery_datetime_utc })
+    return formattedDate
+  }
+
+  const generateProductsText = (order: any, { endLine }: any) => {
+    const list: any = []
+
+    if (order?.products.length) {
+      order?.products.map((product: any) => {
+        list.push(`${product?.quantity}  ${product?.name} \t ${parsePrice(product.total ?? getProductPrice(product))}${endLine}`)
+
+        if (product?.ingredients?.length) {
+          list.push({ text: `\t ${t('INGREDIENTS', 'Ingredients')}:${endLine}`, props: { fontSize: 10 } })
+          product?.ingredients?.map((ingredient: any) => {
+            list.push({ text: `\t ${t('NO', 'No')} ${ingredient.name}${endLine}` , fontSize: 10 })
+          })
+        }
+
+        product.options?.map((option: any) => {
+          list.push({ text: `\t ${option.name}${endLine}`, props: { fontSize: 10 } })
+
+          option.suboptions?.map((suboption: any) => {
+            const { quantity, name, position, price } = suboption
+            const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : ''
+            const string = name !== 'No'
+              ? pos
+                ? `${quantity} x ${name} ${pos} +${parsePrice(price)}`
+                : `${quantity} x ${name} +${parsePrice(price)}`
+              : 'No'
+
+            list.push({ text: `\t\t ${string}${endLine}`, props: { fontSize: 10 } })
+          })
+        })
+
+        if (product.comment) {
+          list.push({ text: `\t ${t('COMMENT', 'Comment')}${endLine}`, props: { fontSize: 10 } })
+          list.push({ text: `\t\t ${product.comment}${endLine}`, props: { fontSize: 10 } })
+        }
+
+        list.push('_separator_')
+      })
+    }
+
+    return list
+  }
+
+  const paymethodsList = (order: any, { endLine }: any) => {
+    const list: any = []
+
+    if (order?.payment_events?.length > 0) {
+      order?.payment_events.map((event: any) => {
+        const payment = event?.wallet_event
+          ? walletName[event?.wallet_event?.wallet?.type]?.name
+          : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
+
+        const amount = (event?.paymethod?.gateway === 'cash' && order?.cash)
+          ? parsePrice(order?.cash, { currency: order?.currency })
+          : `-${parsePrice(event?.amount, { currency: order?.currency })}`
+
+        list.push(`${payment} \t ${amount}${endLine}`)
+      })
+    }
+
+    return list
+  }
+
+  const replaceChars = (string: string) => {
+    const accents: any = {
+      'á': 'a',
+      'é': 'e',
+      'í': 'i',
+      'ó': 'o',
+      'ú': 'u',
+      'Á': 'A',
+      'É': 'E',
+      'Í': 'I',
+      'Ó': 'O',
+      'Ú': 'U',
+      'ü': 'u',
+      'Ü': 'U',
+      'ñ': 'n',
+      'Ñ': 'N',
+      "'": '',
+      "’": '',
+      "`": '',
+    };
+    return string.replace(/[áéíóúÁÉÍÓÚüÜñÑ'’`]/g, (match: any) => accents[match])
+  }
+
+  const generateCommands = (order: any, printMode: string = 'append') => {
+    let commands: any = [];
+
+    const isAppendMode = printMode === 'append'
+    const jumpLine = isAppendMode ? '\n' : ' '
+    const endLine = isAppendMode ? '\n' : ''
+
+    const textProps = { fontSize: 12 }
+
+    const appends: any = [
+      { text: `${t('ORDER_NO', 'Order No.')} ${order.id}${endLine}`, props: { fontSize: 16 } },
+      jumpLine,
+      `${order.orderStatus}${endLine}`,
+      { text: `${t('ORDER_TYPE', 'Order Type')}: ${deliveryStatus[order?.delivery_type]}${endLine}`, props: { fontSize: 14 } },
+      { text: `${t(`PAYMENT_METHOD${paymethodsLength(order) > 1 ? 'S' : ''}`, `Payment method${paymethodsLength(order) > 1 ? 's' : ''}`)}: ${handlePaymethodsListString(order)}${endLine}`, props: { fontSize: 14 } },
+      `${!!order?.delivery_option ? `${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: ${t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}${endLine}` : ''}`,
+      `${t('DELIVERY_DATE', 'Delivery Date')}: ${deliveryDate(order)}${endLine}`,
+      '_separator_',
+      { text: `${t('CUSTOMER_DETAILS', 'Customer details')}${endLine}`, props: { fontSize: 14 } },
+      `${t('FULL_NAME', 'Full Name')}: ${customerName(order)}${endLine}`,
+      `${t('EMAIL', 'Email')}: ${order?.customer?.email}${endLine}`,
+      `${!!order?.customer?.cellphone ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}${endLine}` : ''}`,
+      `${!!order?.customer?.phone ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}${endLine}` : ''}`,
+      `${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}${endLine}`,
+      `${!!order?.customer?.internal_number ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}${endLine}` : ''}`,
+      `${!!order?.customer?.zipcode ? `${t('ZIPCODE', 'Zipcode')}: ${order?.customer?.zipcode}${endLine}` : ''}`,
+      '_separator_',
+      { text: `${t('BUSINESS_DETAILS', 'Business details')}${endLine}`, props: { fontSize: 14 } },
+      `${order?.business?.name}${endLine}`,
+      `${order?.business?.email}${endLine}`,
+      `${!!order?.business?.cellphone ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}${endLine}` : ''}`,
+      `${!!order?.business?.phone ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}${endLine}` : ''}`,
+      `${t('ADDRESS', 'Address')}: ${order?.business?.address}${endLine}`,
+      `${!!order?.business?.address_notes ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}${endLine}` : ''}`,
+      '_separator_',
+      { text: `${t('ORDER_DETAILS', 'Order Details')}${endLine}`, props: { fontSize: 14 } },
+      `${!!order?.comment ? `${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}${endLine}` : ''}`,
+      ...generateProductsText(order, { endLine }),
+      `${t('SUBTOTAL', 'Subtotal')} \t\t ${parsePrice(order.tax_type === 1 ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0 : order?.summary?.subtotal ?? 0)}${endLine}`,
+      `${order?.summary?.discount > 0 ? `${order?.offer_type === 1 ? `${t('DISCOUNT', 'Discount')} (${verifyDecimals(order?.offer_rate, parsePrice)}%)${endLine}` : t('DISCOUNT', 'Discount')} \t\t ${parsePrice(order?.summary?.discount)}${endLine}` : ''}`,
+      `${order?.tax_type !== 1 ? `${t('TAX', 'Tax')} (${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%) \t\t ${parsePrice(order?.summary?.tax ?? 0)}${endLine}` : ''}`,
+      `${order?.summary?.delivery_price > 0 && order.delivery_type !== 2 ? `${t('DELIVERY_FEE', 'Delivery Fee')} \t\t ${parsePrice(order?.summary?.delivery_price ?? 0)}${endLine}` : ''}`,
+      `${(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && order.delivery_type !== 2 ? `${t('DRIVER_TIP', 'Driver tip')} ${percentTip(order) ? `(${percentTip(order)}%)` : ''} \t\t ${parsePrice(order?.summary?.driver_tip ?? 0)}${endLine}` : ''}`,
+      `${order?.summary?.service_fee > 0 ? `${t('SERVICE_FEE', 'Service Fee')} (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%) \t\t ${parsePrice(order?.summary?.service_fee ?? 0)}${endLine}` : ''}`,
+      '_separator_',
+      `${t('TOTAL', 'Total')} \t\t ${parsePrice(order?.summary?.total ?? 0)}${endLine}`,
+      jumpLine,
+      `${order?.payment_events?.length > 0 ? `${t('PAYMENTS', 'Payments')}${endLine}` : ''}`,
+      ...paymethodsList(order, { endLine }),
+      jumpLine,
+      jumpLine,
+    ]
+
+    commands = [
+      ...commands,
+      ...appends.map((append: any) => {
+        return append === '_separator_'
+          ? { [printMode]: `---------------------------------------${endLine}` }
+          : {
+            [printMode]: replaceChars(append?.text ?? append),
+            ...textProps,
+            ...append?.props
+          }
+      })
+    ]
+
+    return commands
+  }
+
+  return { generateCommands }
+}

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

@@ -1,195 +1,200 @@
-//React & React Native
-import React, { useState, useEffect } from 'react';
-import { View } from 'react-native';
-
-// Thirds
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-
-//OrderingComponent
-import {
-    useLanguage,
-    OrderDetails as OrderDetailsConTableoller,
-    useSession,
-} from 'ordering-components/native';
-
-//Components
-import Alert from '../../providers/AlertProvider';
-import { FloatingButton } from '../FloatingButton';
-import { OrderDetailsLogisticParams } from '../../types';
-import { useTheme } from 'styled-components/native';
-import { NotFoundSource } from '../NotFoundSource';
-import { getOrderStatus } from '../../utils';
-import { OrderHeaderComponent } from '../OrderDetails/OrderHeaderComponent';
-import { OrderContentComponent } from '../OrderDetails/OrderContentComponent';
-//Styles
-import { OrderDetailsContainer } from './styles';
-
-export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
-    const {
-        navigation,
-        handleClickLogisticOrder,
-        orderAssingId,
-    } = props;
-    const { order } = props.order
-    const theme = useTheme();
-    const [, t] = useLanguage();
-    const [session] = useSession();
-    const [alertState, setAlertState] = useState<{
-        open: boolean;
-        content: Array<string>;
-        key?: string | null;
-    }>({ open: false, content: [], key: null });
-
-    const logisticOrderStatus = [4, 6, 7]
-
-    const showFloatButtonsAcceptOrReject: any = {
-        0: true,
-        4: true,
-        7: true,
-        14: true
-    };
-
-    const handleArrowBack: any = () => {
-        navigation?.canGoBack() && navigation.goBack();
-    };
-
-    const handleRejectLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
-        handleArrowBack()
-    }
-
-    const handleAcceptLogisticOrder = (order: any) => {
-        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
-        handleArrowBack()
-    }
-
-    useEffect(() => {
-        if (order?.driver === null && session?.user?.level === 4) {
-            setAlertState({
-                open: true,
-                content: [
-                    t(
-                        'YOU_HAVE_BEEN_REMOVED_FROM_THE_ORDER',
-                        'You have been removed from the order',
-                    ),
-                ],
-                key: null,
-            });
-        }
-    }, [order?.driver]);
-
-    const OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
-        const {
-            order,
-            isOrderGroup,
-            lastOrder,
-        } = props
-        return (
-            <>
-                <OrderContentComponent
-                    order={order}
-                    logisticOrderStatus={logisticOrderStatus}
-                    isOrderGroup={isOrderGroup}
-                    lastOrder={lastOrder}
-                />
-                <View
-                    style={{
-                        height:
-                            order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
-                    }}
-                />
-
-            </>
-        )
-    }
-
-    return (
-        <>
-            {(!order || Object.keys(order).length === 0) &&
-                (props.order?.error?.length < 1 || !props.order?.error) && (
-                    <View style={{ flex: 1 }}>
-                        {[...Array(6)].map((item, i) => (
-                            <Placeholder key={i} Animation={Fade}>
-                                <View style={{ flexDirection: 'row', paddingVertical: 20 }}>
-                                    <Placeholder>
-                                        <PlaceholderLine width={100} />
-                                        <PlaceholderLine width={70} />
-                                        <PlaceholderLine width={30} />
-                                        <PlaceholderLine width={20} />
-                                    </Placeholder>
-                                </View>
-                            </Placeholder>
-                        ))}
-                    </View>
-                )}
-
-            {(!!props.order?.error || props.order?.error) && (
-                <NotFoundSource
-                    btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
-                    content={
-                        props.order.error[0] ||
-                        props.order.error ||
-                        t('NETWORK_ERROR', 'Network Error')
-                    }
-                    onClickButton={() => navigation.navigate('Orders')}
-                />
-            )}
-            {!((!order || Object.keys(order).length === 0) &&
-                (props.order?.error?.length < 1 || !props.order?.error)) && (
-                    <View style={{ flex: 1 }}>
-                        <OrderHeaderComponent
-                            order={order}
-                            getOrderStatus={getOrderStatus}
-                            handleArrowBack={handleArrowBack}
-                            logisticOrderStatus={logisticOrderStatus}
-                        />
-                        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
-                            <>
-                                <OrderDetailsContainer
-                                    keyboardShouldPersistTaps="handled"
-                                    showsVerticalScrollIndicator={false}
-                                >
-                                    {order?.order_group && !!order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
-                                        <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
-                                    )) : (
-                                        <OrderDetailsInformation order={order} />
-                                    )}
-                                </OrderDetailsContainer>
-
-                                {showFloatButtonsAcceptOrReject[order?.status] && (
-                                    <FloatingButton
-                                        btnText={t('REJECT', 'Reject')}
-                                        isSecondaryBtn={false}
-                                        secondButtonClick={() => handleAcceptLogisticOrder(order)}
-                                        firstButtonClick={() => handleRejectLogisticOrder(order)}
-                                        secondBtnText={t('ACCEPT', 'Accept')}
-                                        secondButton={true}
-                                        firstColorCustom={theme.colors.red}
-                                        secondColorCustom={theme.colors.green}
-                                        widthButton={'45%'}
-                                    />
-                                )}
-                            </>
-                        )}
-                    </View>
-                )}
-            {alertState?.open && (
-                <Alert
-                    open={alertState.open}
-                    onAccept={handleArrowBack}
-                    onClose={handleArrowBack}
-                    content={alertState.content}
-                    title={t('WARNING', 'Warning')}
-                />
-            )}
-        </>
-    );
-};
-
-export const OrderDetailsLogistic = (props: OrderDetailsLogisticParams) => {
-    const orderDetailsProps = {
-        ...props,
-        UIComponent: OrderDetailsLogisticUI,
-    };
-    return <OrderDetailsConTableoller {...orderDetailsProps} />;
-};
+//React & React Native
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+
+// Thirds
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+//OrderingComponent
+import {
+    useLanguage,
+    OrderDetails as OrderDetailsConTableoller,
+    useSession,
+    useConfig
+} from 'ordering-components/native';
+
+//Components
+import Alert from '../../providers/AlertProvider';
+import { FloatingButton } from '../FloatingButton';
+import { OrderDetailsLogisticParams } from '../../types';
+import { useTheme } from 'styled-components/native';
+import { NotFoundSource } from '../NotFoundSource';
+import { getOrderStatus } from '../../utils';
+import { OrderHeaderComponent } from '../OrderDetails/OrderHeaderComponent';
+import { OrderContentComponent } from '../OrderDetails/OrderContentComponent';
+//Styles
+import { OrderDetailsContainer } from './styles';
+
+export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
+    const {
+        navigation,
+        handleClickLogisticOrder,
+        orderAssingId,
+    } = props;
+    const { order } = props.order
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [session] = useSession();
+    const [{ configs }] = useConfig();
+
+    const [alertState, setAlertState] = useState<{
+        open: boolean;
+        content: Array<string>;
+        key?: string | null;
+    }>({ open: false, content: [], key: null });
+
+    const logisticOrderStatus = [4, 6, 7]
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
+
+    const showFloatButtonsAcceptOrReject: any = {
+        0: true,
+        4: true,
+        7: true,
+        14: true
+    };
+
+    const handleArrowBack: any = () => {
+        navigation?.canGoBack() && navigation.goBack();
+    };
+
+    const handleRejectLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    const handleAcceptLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    useEffect(() => {
+        if (order?.driver === null && session?.user?.level === 4) {
+            setAlertState({
+                open: true,
+                content: [
+                    t(
+                        'YOU_HAVE_BEEN_REMOVED_FROM_THE_ORDER',
+                        'You have been removed from the order',
+                    ),
+                ],
+                key: null,
+            });
+        }
+    }, [order?.driver]);
+
+    const OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
+        const {
+            order,
+            isOrderGroup,
+            lastOrder,
+        } = props
+        return (
+            <>
+                <OrderContentComponent
+                    order={order}
+                    logisticOrderStatus={logisticOrderStatus}
+                    isOrderGroup={isOrderGroup}
+                    lastOrder={lastOrder}
+                />
+                <View
+                    style={{
+                        height:
+                            order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+                    }}
+                />
+
+            </>
+        )
+    }
+
+    return (
+        <>
+            {(!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error) && (
+                    <View style={{ flex: 1 }}>
+                        {[...Array(6)].map((item, i) => (
+                            <Placeholder key={i} Animation={Fade}>
+                                <View style={{ flexDirection: 'row', paddingVertical: 20 }}>
+                                    <Placeholder>
+                                        <PlaceholderLine width={100} />
+                                        <PlaceholderLine width={70} />
+                                        <PlaceholderLine width={30} />
+                                        <PlaceholderLine width={20} />
+                                    </Placeholder>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </View>
+                )}
+
+            {(!!props.order?.error || props.order?.error) && (
+                <NotFoundSource
+                    btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+                    content={
+                        props.order.error[0] ||
+                        props.order.error ||
+                        t('NETWORK_ERROR', 'Network Error')
+                    }
+                    onClickButton={() => navigation.navigate('Orders')}
+                />
+            )}
+            {!((!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error)) && (
+                    <View style={{ flex: 1 }}>
+                        <OrderHeaderComponent
+                            order={order}
+                            getOrderStatus={getOrderStatus}
+                            handleArrowBack={handleArrowBack}
+                            logisticOrderStatus={logisticOrderStatus}
+                        />
+                        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
+                            <>
+                                <OrderDetailsContainer
+                                    keyboardShouldPersistTaps="handled"
+                                    showsVerticalScrollIndicator={false}
+                                >
+                                    {order?.order_group && !!order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
+                                        <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
+                                    )) : (
+                                        <OrderDetailsInformation order={order} />
+                                    )}
+                                </OrderDetailsContainer>
+
+                                {showFloatButtonsAcceptOrReject[order?.status] && (
+                                    <FloatingButton
+                                        btnText={t('REJECT', 'Reject')}
+                                        isSecondaryBtn={false}
+                                        secondButtonClick={() => handleAcceptLogisticOrder(order)}
+                                        firstButtonClick={() => handleRejectLogisticOrder(order)}
+                                        secondBtnText={t('ACCEPT', 'Accept')}
+                                        secondButton={true}
+                                        firstColorCustom={theme.colors.red}
+                                        secondColorCustom={theme.colors.green}
+                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        isHideRejectButtons={isHideRejectButtons}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </View>
+                )}
+            {alertState?.open && (
+                <Alert
+                    open={alertState.open}
+                    onAccept={handleArrowBack}
+                    onClose={handleArrowBack}
+                    content={alertState.content}
+                    title={t('WARNING', 'Warning')}
+                />
+            )}
+        </>
+    );
+};
+
+export const OrderDetailsLogistic = (props: OrderDetailsLogisticParams) => {
+    const orderDetailsProps = {
+        ...props,
+        UIComponent: OrderDetailsLogisticUI,
+    };
+    return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};

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

@@ -1,5 +1,5 @@
-import styled from 'styled-components/native';
-
-export const OrderDetailsContainer = styled.ScrollView`
-  flex: 1;
-`;
+import styled from 'styled-components/native';
+
+export const OrderDetailsContainer = styled.ScrollView`
+  flex: 1;
+`;