ordering-ui-react-native 0.12.45 → 0.12.49

package/package.json

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

package/src/components/ProductForm/index.tsx

@@ -132,7 +132,7 @@ export const ProductOptionsUI = (props: any) => {
                 ) : (
                   <>
                     <View style={{ flexDirection: 'column', width: '100%' }}>
-                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{'price'}</OText>
+                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
                       <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
                         <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>

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

@@ -136,11 +136,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       timerRef.current.blur();
     }
 
-    if (!isFocus) {
-      if (time.length > 1) timerRef.current.clear();
-      timerRef?.current?.focus?.();
-      handleFocusTimer();
-    }
   };
 
   const openTextTareaOInput = () => {
@@ -163,7 +158,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
     const time = parseInt(hour || '0') * 60 + (parseInt(minsToSend) || 0);
 
-    let bodyToSend : any = {};
+    let bodyToSend: any = {};
     const orderStatus: any = {
       acceptByBusiness: {
         prepared_in: time,
@@ -215,11 +210,22 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
   };
 
+  useEffect(() => {
+    if (actions && action === 'accept') {
+      const interval = setTimeout(() => {
+        timerRef?.current?.focus?.()
+      }, 200)
+      return () => {
+        clearTimeout(interval)
+      }
+    }
+  }, [timerRef?.current])
+
   return (
     <KeyboardAvoidingView
       enabled
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1, paddingHorizontal: 30, paddingTop: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
+      style={{ flex: 1, paddingHorizontal: 30, paddingVertical: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
       <View>
         <OIconButton
           icon={theme.images.general.arrow_left}
@@ -359,11 +365,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onChangeText={handleTime}
           onPressOut={() => handleFixTime()}
           editable={true}
-          autoFocus={actions && action === 'accept'}
           selectionColor={theme.colors.primary}
           placeholderTextColor={theme.colors.textGray}
           color={theme.colors.textGray}
           onEndEditing={handleFixTime}
+          onSubmitEditing={() => handleAcceptOrReject()}
+          onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
         {showTextArea && (
@@ -379,7 +386,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
               value={comments}
               onChange={setComments}
             />
-            <View style={{ height: 20 }} />
           </Comments>
         )}
       </Content>

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

@@ -33,4 +33,5 @@ export const Action = styled.View``;
 
 export const Comments = styled.View`
   margin-top: 20px;
+  padding-bottom: 40px;
 `;

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

@@ -157,9 +157,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       : '';
 
     const customerName = !!order?.customer?.name
-      ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${
-          order?.customer?.lastname || ''
-        } ${order?.customer?.second_lastname || ''} \n`
+      ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${order?.customer?.lastname || ''
+      } ${order?.customer?.second_lastname || ''} \n`
       : '';
 
     const customerEmail = !!order?.customer.email
@@ -183,26 +182,25 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       : '';
 
     const payment = order?.paymethod?.name
-      ? `${order?.paymethod?.name} - ${
-          order.delivery_type === 1
-            ? t('DELIVERY', 'Delivery')
-            : order.delivery_type === 2
-            ? t('PICKUP', 'Pickup')
-            : order.delivery_type === 3
+      ? `${order?.paymethod?.name} - ${order.delivery_type === 1
+        ? t('DELIVERY', 'Delivery')
+        : order.delivery_type === 2
+          ? t('PICKUP', 'Pickup')
+          : order.delivery_type === 3
             ? t('EAT_IN', 'Eat in')
             : order.delivery_type === 4
-            ? t('CURBSIDE', 'Curbside')
-            : t('DRIVER_THRU', 'Driver thru')
-        }\n`
+              ? t('CURBSIDE', 'Curbside')
+              : t('DRIVER_THRU', 'Driver thru')
+      }\n`
       : '';
 
     const getSuboptions = (suboptions: any) => {
       const array: any = []
       suboptions?.length > 0 &&
-      suboptions?.map((suboption: any) => {
-        const string = `${getFormattedSubOptionName(suboption)}`
-        array.push(string)
-      })
+        suboptions?.map((suboption: any) => {
+          const string = `${getFormattedSubOptionName(suboption)}`
+          array.push(string)
+        })
 
       return array.join('')
     }
@@ -211,12 +209,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       const array: any = [];
 
       options?.length &&
-      options?.map((option: any) => {
-        const string =
-        `  ${option.name}\n    ${getSuboptions(option.suboptions)}`;
+        options?.map((option: any) => {
+          const string =
+            `  ${option.name}\n    ${getSuboptions(option.suboptions)}`;
 
-        array.push(string)
-      })
+          array.push(string)
+        })
 
       if (productComment) {
         array.push(`  ${t('COMMENT', 'Comment')}\n    ${productComment}\n`)
@@ -415,7 +413,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           onClickButton={() => navigation.navigate('Orders')}
         />
       )}
-
       {order && Object.keys(order).length > 0 && (error?.length < 1 || !error) && (
         <View style={{ flex: 1 }}>
           <OrderHeaderComponent
@@ -423,6 +420,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleOpenMapView={handleOpenMapView}
             handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
             getOrderStatus={getOrderStatus}
+            handleViewSummaryOrder={handleViewSummaryOrder}
+            handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
           />
           <OrderDetailsContainer
@@ -468,7 +467,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                                   <OText>
                                     {itemsDrivers.length > 0
                                       ? order?.driver?.name ||
-                                        t('SELECT_DRIVER', 'Select Driver')
+                                      t('SELECT_DRIVER', 'Select Driver')
                                       : t('WITHOUT_DRIVERS', 'Without drivers')}
                                   </OText>
                                   <OIcon
@@ -515,66 +514,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </AssignDriver>
                 )}
 
-              {order?.status === 7 && (
-                <Pickup>
-                  <OButton
-                    style={styles.btnPickUp}
-                    textStyle={{ color: theme.colors.primary }}
-                    text={t('READY_FOR_PICKUP', 'Ready for pickup')}
-                    onClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(4)
-                    }
-                    imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                    imgRightSrc={false}
-                    isLoading={loading}
-                  />
-                </Pickup>
-              )}
-
-              {order?.status === 4 && ![1].includes(order?.delivery_type) && (
-                <Pickup>
-                  <OButton
-                    style={{
-                      ...styles.btnPickUp,
-                      backgroundColor: theme.colors.green,
-                    }}
-                    textStyle={{ color: theme.colors.white }}
-                    text={t(
-                      'PICKUP_COMPLETED_BY_CUSTOMER',
-                      'Pickup completed by customer',
-                    )}
-                    onClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(15)
-                    }
-                    imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                    imgRightSrc={false}
-                    isLoading={loading}
-                  />
-                </Pickup>
-              )}
-
-              {order?.status === 4 && ![1].includes(order?.delivery_type) && (
-                <Pickup>
-                  <OButton
-                    style={{
-                      ...styles.btnPickUp,
-                      backgroundColor: theme.colors.red,
-                    }}
-                    textStyle={{ color: theme.colors.white }}
-                    text={t(
-                      'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-                      'Order not picked up by customer',
-                    )}
-                    onClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(17)
-                    }
-                    imgLeftStyle={{ tintColor: theme.colors.backArrow }}
-                    imgRightSrc={false}
-                    isLoading={loading}
-                  />
-                </Pickup>
-              )}
-
               <OModal
                 open={openModalForBusiness}
                 order={order}
@@ -636,7 +575,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
-              t('PENDING', 'Pending') && (
+            t('PENDING', 'Pending') && (
               <FloatingButton
                 btnText={t('REJECT', 'Reject')}
                 isSecondaryBtn={false}
@@ -649,24 +588,37 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 widthButton={'45%'}
               />
             )}
-
-          {order &&
-            Object.keys(order).length > 0 &&
-            getOrderStatus(order?.status, t)?.value !==
-              t('PENDING', 'Pending') && (
-              <FloatingButton
-                btnText={t('COPY', 'Copy')}
-                isSecondaryBtn={false}
-                colorTxt1={theme.colors.primary}
-                secondButtonClick={handleViewSummaryOrder}
-                firstButtonClick={handleCopyClipboard}
-                secondBtnText={t('PRINT', 'Print')}
-                secondButton={true}
-                firstColorCustom="transparent"
-                secondColorCustom={theme.colors.primary}
-                widthButton={'45%'}
-              />
-            )}
+          {order?.status === 7 && (
+            <FloatingButton
+              btnText={t('READY_FOR_PICKUP', 'Ready for pickup')}
+              colorTxt1={theme.colors.primary}
+              color={theme.colors.btnBGWhite}
+              firstButtonClick={() => handleChangeOrderStatus?.(4)}
+              widthButton={'100%'}
+              disabled={loading}
+            />
+          )}
+          {order?.status === 4 && ![1].includes(order?.delivery_type) && (
+            <FloatingButton
+              btnText={t(
+                'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+                'Order not picked up by customer',
+              )}
+              isSecondaryBtn={false}
+              colorTxt1={theme.colors.white}
+              secondButtonClick={() => handleChangeOrderStatus?.(15)}
+              firstButtonClick={() => handleChangeOrderStatus?.(17)}
+              secondBtnText={t(
+                'PICKUP_COMPLETED_BY_CUSTOMER',
+                'Pickup completed by customer',
+              )}
+              secondButton={true}
+              firstColorCustom={theme.colors.red}
+              secondColorCustom={theme.colors.green}
+              widthButton={'45%'}
+              disabled={loading}
+            />
+          )}
         </View>
       )}
     </>

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

@@ -27,7 +27,9 @@ interface OrderHeader {
   handleOpenMapView?: any,
   handleOpenMessagesForBusiness?: any,
   getOrderStatus?: any,
-  logisticOrderStatus?: Array<number>
+  logisticOrderStatus?: Array<number>,
+  handleViewSummaryOrder: any;
+  handleCopyClipboard: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -37,7 +39,9 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     handleOpenMapView,
     handleOpenMessagesForBusiness,
     getOrderStatus,
-    logisticOrderStatus
+    logisticOrderStatus,
+    handleViewSummaryOrder,
+    handleCopyClipboard
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
@@ -46,7 +50,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
   const styles = StyleSheet.create({
     icons: {
       maxWidth: 40,
-      height: 25,
+      height: 40,
+      padding: 10,
       alignItems: 'flex-end',
     },
   })
@@ -93,6 +98,34 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         {
           (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
             <Actions>
+              {getOrderStatus(order?.status, t)?.value !==
+                t('PENDING', 'Pending') && (
+                  <>
+                    <OIconButton
+                      icon={theme.images.general.copy}
+                      iconStyle={{
+                        width: 20,
+                        height: 25,
+                        top: 2,
+                        tintColor: theme.colors.backArrow,
+                      }}
+                      borderColor={theme.colors.clear}
+                      style={styles.icons}
+                      onClick={() => handleCopyClipboard()}
+                    />
+                    <OIconButton
+                      icon={theme.images.general.print}
+                      iconStyle={{
+                        width: 25,
+                        height: 22,
+                        tintColor: theme.colors.backArrow,
+                      }}
+                      borderColor={theme.colors.clear}
+                      style={styles.icons}
+                      onClick={() => handleViewSummaryOrder()}
+                    />
+                  </>
+                )}
               <OIconButton
                 icon={theme.images.general.map}
                 iconStyle={{

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

@@ -28,14 +28,13 @@ export const OrderContent = styled.View`
 `;
 
 export const OrderHeader = styled.View`
-  padding-vertical: 20px;
-  border-bottom-width: 10px;
-  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
+  padding-top: 20px;
+  padding-bottom: 10px;
 `;
 
 export const OrderBusiness = styled.View`
   position: relative;
-  bottom: 10px;
+  bottom: 20px;
   padding-vertical: 20px;
   flex-direction: column;
   border-bottom-width: 10px;

package/themes/business/src/types/index.tsx

@@ -526,9 +526,9 @@ export interface TagsParams {
 interface actions {
   accept: string;
   reject: string;
-  pickupFailed?: string;
-  deliveryFailed?: string;
-  notReady?: string;
+  pickupFailed: string;
+  deliveryFailed: string;
+  notReady: string;
 }
 
 interface textTranslate {