ordering-ui-react-native 0.17.53 → 0.17.54-release

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

@@ -0,0 +1,195 @@
+//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} />;
+};

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

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

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { Chat } from '../Chat';
-import { StyleSheet, View, BackHandler } from 'react-native';
+import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
 import {
   useLanguage,
   OrderDetails as OrderDetailsController,
@@ -9,7 +9,7 @@ import {
 } from 'ordering-components/native';
 import { useUtils } from 'ordering-components/native';
 
-import { OIcon, OIconButton, OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
@@ -146,13 +146,6 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       shadowRadius: 3.84,
       elevation: 3,
     },
-    cancelBtn: {
-      marginRight: 5,
-      zIndex: 10000,
-      height: 30,
-      width: 20,
-      justifyContent: 'flex-end',
-    },
     modalText: {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
@@ -161,6 +154,18 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       textAlign: 'center',
       zIndex: 10,
     },
+    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,
+      marginTop: 10
+    },
   });
 
   return (
@@ -260,13 +265,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
         <>
           <View style={styles.titleSection}>
             <View style={styles.titleGroups}>
-              <OIconButton
-                icon={theme.images.general.arrow_left}
-                iconStyle={{ width: 23, height: 23 }}
-                borderColor={theme.colors.clear}
-                style={styles.cancelBtn}
-                onClick={handleArrowBack}
-              />
+              <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+                <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+              </TouchableOpacity>
 
               <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
                 {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
@@ -292,7 +293,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
                 <OIcon
                   url={optimizeImage(
                     order?.customer?.photo ||
-                      theme?.images?.dummies?.customerPhoto,
+                    theme?.images?.dummies?.customerPhoto,
                     'h_300,c_limit',
                   )}
                   style={styles.titleIcons}

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

@@ -23,7 +23,7 @@ import { useTheme } from 'styled-components/native';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
+export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermission, getPermissions, isGrantedPermissions, checkBluetoothPermission }: any) => {
   const handleArrowBack: any = () => {
     navigation?.canGoBack() && navigation.goBack();
   };
@@ -48,10 +48,10 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
   const getSuboptions = (suboptions: any) => {
     const array: any = []
     suboptions?.length > 0 &&
-    suboptions?.map((suboption: any) => {
-      const string = `&nbsp;&nbsp;&nbsp;${getFormattedSubOptionName(suboption)}<br/>`
-      array.push(string)
-    })
+      suboptions?.map((suboption: any) => {
+        const string = `&nbsp;&nbsp;&nbsp;${getFormattedSubOptionName(suboption)}<br/>`
+        array.push(string)
+      })
 
     return array.join('')
   }
@@ -60,12 +60,12 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
     const array: any = [];
 
     options?.length &&
-    options?.map((option: any) => {
-      const string =
-      `  ${option.name}<br/>${getSuboptions(option.suboptions)}`;
+      options?.map((option: any) => {
+        const string =
+          `  ${option.name}<br/>${getSuboptions(option.suboptions)}`;
 
-      array.push(string)
-    })
+        array.push(string)
+      })
 
     if (productComment) {
       array.push(`${t('COMMENT', 'Comment')}<br/>&nbsp;&nbsp;&nbsp;&nbsp;${productComment}`)
@@ -88,46 +88,38 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
           ${orderStatus} </br>
 
-          ${t('DELIVERY_TYPE', 'Delivery Type')}: ${
-      deliveryStatus[order?.delivery_type]
-    }
+          ${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
+      }
           </br>
-          ${t('DELIVERY_DATE', 'Delivery Date')}: ${
-      order?.delivery_datetime_utc
+          ${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
         ? parseDate(order?.delivery_datetime_utc)
         : parseDate(order?.delivery_datetime, { utc: false })
-    }
+      }
           </br>
           ${t('PAYMENT_METHOD')}: ${order?.paymethod?.name}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
-        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${
-      order?.customer?.name
-    } ${order?.customer?.middle_name} ${order?.customer?.lastname} ${
-      order?.customer?.second_lastname
-    }
+        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name
+      } ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname
+      }
         </br>
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
         ${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}
          </br>
-         ${
-           !!order?.customer?.phone
-             ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                 order?.customer?.phone
-               } </br>`
-             : ''
-         }
+         ${!!order?.customer?.phone
+        ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
+        } </br>`
+        : ''
+      }
          ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address} 
          </br> 
-         ${
-           !!order?.customer?.internal_number
-             ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${
-                 order?.customer?.internal_number
-               } </br>`
-             : ''
-         }
+         ${!!order?.customer?.internal_number
+        ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number
+        } </br>`
+        : ''
+      }
          ${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}
          </p>  
 
@@ -139,30 +131,26 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
         </br> 
         ${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}
         </br> 
-        ${
-          !!order?.business?.phone
-            ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                order?.business?.phone
-              } </br>`
-            : ''
-        } 
+        ${!!order?.business?.phone
+        ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
+        } </br>`
+        : ''
+      } 
 
         ${t('ADDRESS', 'Address')}: ${order?.business?.address} 
         </br>
-        ${
-          !!order?.business?.address_notes
-            ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${
-                order?.business?.address_notes
-              } `
-            : ''
-        }
+        ${!!order?.business?.address_notes
+        ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
+        } `
+        : ''
+      }
         </p>
         <h1> ${t('ORDER_DETAILS', 'Order Details')}</h1>
 
         ${order?.products.length &&
-          order?.products.map(
-            (product: any, i: number) =>
-              `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
+      order?.products.map(
+        (product: any, i: number) =>
+          `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
                 <div style="display:flex;width:100%">
                   <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
                   ${product?.quantity}  ${product?.name}
@@ -179,8 +167,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                   </div>
                 </div>
               </div>`
-          )
-        }
+      )
+      }
         <div style="display: flex;">
 
             <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
@@ -189,62 +177,58 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
             <div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">
               ${parsePrice(
-                order.tax_type === 1
-                  ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                  : order?.summary?.subtotal ?? 0,
-              )}
+        order.tax_type === 1
+          ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+          : order?.summary?.subtotal ?? 0,
+      )}
             </div>
 
         </div>
 
         <div style="display: flex">
-        ${
-          order?.summary?.discount > 0
-            ? order?.offer_type === 1
-              ? `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
+        ${order?.summary?.discount > 0
+        ? order?.offer_type === 1
+          ? `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
                   ${t('DISCOUNT', 'Discount')} (${verifyDecimals(
-                  order?.offer_rate,
-                  parsePrice,
-                )}%)
+            order?.offer_rate,
+            parsePrice,
+          )}%)
                 </div>`
-              : `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%"> ${t(
-                  'DISCOUNT',
-                  'Discount',
-                )}
+          : `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%"> ${t(
+            'DISCOUNT',
+            'Discount',
+          )}
                  </div>`
-            : ''
-        }
-        ${
-          order?.summary?.discount > 0
-            ? `<div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">- ${parsePrice(
-                order?.summary?.discount,
-              )}
+        : ''
+      }
+        ${order?.summary?.discount > 0
+        ? `<div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">- ${parsePrice(
+          order?.summary?.discount,
+        )}
               </div>`
-            : ''
-        }
+        : ''
+      }
         </div>
 
-        ${
-          order?.tax_type !== 1
-            ? `<div style="font-size: 25px">
+        ${order?.tax_type !== 1
+        ? `<div style="font-size: 25px">
                 ${t('TAX', 'Tax')}
                 ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
                 ${parsePrice(order?.summary?.tax ?? 0)}
                 ${t('TAX', 'Tax')}
                 ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
               </div>`
-            : ''
-        }
-
-        ${
-          order?.summary?.delivery_price > 0
-            ? `<div style="font-size: 25px;"> ${t(
-                'DELIVERY_FEE',
-                'Delivery Fee',
-              )}
+        : ''
+      }
+
+        ${order?.summary?.delivery_price > 0
+        ? `<div style="font-size: 25px;"> ${t(
+          'DELIVERY_FEE',
+          'Delivery Fee',
+        )}
               </div>`
-            : ''
-        }
+        : ''
+      }
 
         <div style="display: flex">
 
@@ -336,6 +320,25 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
     },
   });
 
+  const handlePrint = async () => {
+    if (Platform.OS === 'ios') {
+      silentPrint()
+      return
+    }
+    const _permissions = await getPermissions()
+
+    if (!isGrantedPermissions) {
+      checkBluetoothPermission()
+    }
+    if (isGrantedPermissions) {
+      const response = await askBluetoothPermission();
+      const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.[_permission] === 'granted', true)
+      if (isGranted) {
+        printPDF()
+      }
+    }
+  };
+
   return (
     <>
       <Content>
@@ -364,17 +367,15 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${
-                deliveryStatus[order?.delivery_type]
-              }`}
+              {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
+                }`}
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${
-                order?.delivery_datetime_utc
+              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
                   ? parseDate(order?.delivery_datetime_utc)
                   : parseDate(order?.delivery_datetime, { utc: false })
-              }`}
+                }`}
             </OText>
 
             <OText style={{ marginBottom: 5 }}>{`${t('PAYMENT_METHOD')}: ${t(
@@ -399,11 +400,9 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
               adjustsFontSizeToFit
               ellipsizeMode="tail"
               color={theme.colors.textGray}>
-              {`${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name} ${
-                order?.customer?.middle_name
-              } ${order?.customer?.lastname} ${
-                order?.customer?.second_lastname
-              }`}
+              {`${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name} ${order?.customer?.middle_name
+                } ${order?.customer?.lastname} ${order?.customer?.second_lastname
+                }`}
             </OText>
 
             <OText
@@ -423,9 +422,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
               adjustsFontSizeToFit
               ellipsizeMode="tail"
               color={theme.colors.textGray}>
-              {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                order?.customer?.cellphone
-              }`}
+              {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
+                }`}
             </OText>
 
             {!!order?.customer?.phone && (
@@ -436,9 +434,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 adjustsFontSizeToFit
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                  order?.customer?.phone
-                }`}
+                {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
+                  }`}
               </OText>
             )}
 
@@ -508,9 +505,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 numberOfLines={2}
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                  order?.business?.cellphone
-                }`}
+                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
+                  }`}
               </OText>
             )}
 
@@ -521,9 +517,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 numberOfLines={2}
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                  order?.business?.phone
-                }`}
+                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
+                  }`}
               </OText>
             )}
 
@@ -545,9 +540,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 adjustsFontSizeToFit
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${
-                  order?.business?.address_notes
-                }`}
+                {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
+                  }`}
               </OText>
             )}
           </OrderBusiness>
@@ -686,9 +680,7 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
       <View style={{ marginBottom: 0 }}>
         <FloatingButton
-          firstButtonClick={() =>
-            Platform.OS === 'ios' ? silentPrint() : printPDF()
-          }
+          firstButtonClick={() => handlePrint()}
           btnText={t('PRINT', 'Print')}
           color={theme.colors.green}
           widthButton={'100%'}