ordering-ui-react-native 0.12.44 → 0.12.48

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,11 @@ 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}
+          onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
         {showTextArea && (
@@ -379,7 +385,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,29 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
         {
           (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
             <Actions>
+              <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 {

package/themes/doordash/src/components/Cart/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { CContainer, CheckoutAction } from './styles';
 
-import { OSBill, OSTable, OSCoupon, OSTotal } from '../OrderSummary/styles';
+import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
@@ -22,6 +22,9 @@ import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { Platform } from 'react-native';
+import { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
+import AntIcon from 'react-native-vector-icons/AntDesign'
 
 const CartUI = (props: any) => {
   const {
@@ -47,6 +50,7 @@ const CartUI = (props: any) => {
   const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -92,6 +96,16 @@ const CartUI = (props: any) => {
     })
   }
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      return cart.business.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
   return (
     <CContainer>
       <BusinessItemAccordion
@@ -120,9 +134,7 @@ const CartUI = (props: any) => {
             <OSTable>
               <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
               <OText>
-                {cart.business.tax_type === 1
-                  ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                  : parsePrice(cart?.subtotal || 0)}
+                {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
             {cart?.discount > 0 && cart?.total >= 0 && (
@@ -138,15 +150,38 @@ const CartUI = (props: any) => {
                 <OText>- {parsePrice(cart?.discount || 0)}</OText>
               </OSTable>
             )}
-            {cart.business.tax_type !== 1 && (
-              <OSTable>
-                <OText>
-                  {t('TAX', 'Tax')}
-                  {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                </OText>
-                <OText>{parsePrice(cart?.tax || 0)}</OText>
-              </OSTable>
-            )}
+            {
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                <OSTable key={tax.id}>
+                  <OSRow>
+                    <OText numberOfLines={1} >
+                      {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                      {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                </OSTable>
+              ))
+            }
+            {
+              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
+                <OSTable key={fee?.id}>
+                  <OSRow>
+                    <OText numberOfLines={1}>
+                      {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                      ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                </OSTable>
+              ))
+            }
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -167,15 +202,6 @@ const CartUI = (props: any) => {
                 <OText>{parsePrice(cart?.driver_tip)}</OText>
               </OSTable>
             )}
-            {cart?.service_fee > 0 && (
-              <OSTable>
-                <OText>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {isCouponEnabled && !isCartPending && (
               <OSTable>
                 <OSCoupon>
@@ -249,6 +275,13 @@ const CartUI = (props: any) => {
           setCanOpenUpselling={setCanOpenUpselling}
         />
       )}
+      <OModal
+        open={openTaxModal.open}
+        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        entireModal
+      >
+        <TaxInformation data={openTaxModal.data} products={cart.products} />
+      </OModal>
     </CContainer>
   )
 }