ordering-ui-react-native 0.15.55 → 0.15.56-release

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

@@ -11,6 +11,7 @@ import {
   Table,
   OrderBill,
   Total,
+  OSRow,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -75,11 +76,53 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
+  const getIncludedTaxes = () => {
+    if (!order?.taxes) return 0
+    if (order?.taxes?.length === 0) {
+      return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
+    } else {
+      return order?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
         <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
       )}
+
+      {order?.metafields?.length > 0 && (
+        <OrderBusiness>
+          <OText style={{ marginBottom: 5 }} size={16} weight="600">
+            {t('CUSTOM_FIELDS', 'Custom fields')}
+          </OText>
+
+          {order.metafields.map((field: any) => (
+            <View
+              key={field.id}
+              style={{
+                width: '100%',
+                flexDirection: 'row',
+                marginBottom: 5
+              }}
+            >
+              <OText style={{ width: '50%' }}>
+                {field.key}
+              </OText>
+              <OText style={{ width: '45%', textAlign: 'right' }}>
+                {field.value}
+              </OText>
+            </View>
+          ))}
+        </OrderBusiness>
+      )}
+
       <OrderBusiness>
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('BUSINESS_DETAILS', 'Business details')}
@@ -231,8 +274,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.cellphone}`}
-              shorcut={order?.customer?.cellphone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -280,15 +323,21 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
+
+        {!!order?.on_behalf_of && (
+          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+            {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
+          </OText>
+        )}
         {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
-          <View style={{marginTop: 10}}>
+          <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
                 {order?.delivery_option?.name}
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{fontStyle: 'italic', opacity: 0.6, marginBottom: 5}}>
+              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
                 {order?.comment}
               </OText>
             )}
@@ -323,84 +372,109 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(
-              order.tax_type === 1
-                ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                : order?.summary?.subtotal ?? 0,
-            )}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
           </OText>
         </Table>
-
-        {order?.tax_type !== 1 && (
+        {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
+          <Table>
+            {order?.offer_type === 1 ? (
+              <OText mBottom={4}>
+                {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
+                <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+              </OText>
+            ) : (
+              <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
+            )}
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+          </Table>
+        )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
+        {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
+          <Table>
+            <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+            {order?.tax_type === 1 ? (
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+            ) : (
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+            )}
+          </Table>
+        )}
+        {order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
           <Table>
             <OText mBottom={4}>
-              {t('TAX', 'Tax')}
-              {`(${verifyDecimals(
-                order?.summary?.tax_rate,
-                parseNumber,
-              )}%)`}
+              {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
-
             <OText mBottom={4}>
               {parsePrice(order?.summary?.tax ?? 0)}
             </OText>
-          </Table >
+          </Table>
         )}
-
         {
-          order?.summary?.discount > 0 && (
+          order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
             <Table>
-              {order?.offer_type === 1 ? (
-                <OText mBottom={4}>
-                  <OText>{t('DISCOUNT', 'Discount')}</OText>
-
-                  <OText>
-                    {`(${verifyDecimals(
-                      order?.offer_rate,
-                      parsePrice,
-                    )}%)`}
-                  </OText>
-                </OText>
-              ) : (
-                <OText mBottom={4}>{t('DISCOUNT', 'Discount')}</OText>
-              )}
-
               <OText mBottom={4}>
-                - {parsePrice(order?.summary?.discount)}
+                {t('SERVICE_FEE', 'Service fee')}
+                {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
             </Table>
           )
         }
-
         {
-          order?.summary?.subtotal_with_discount > 0 &&
-          order?.summary?.discount > 0 &&
-          order?.summary?.total >= 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t(
-                  'SUBTOTAL_WITH_DISCOUNT',
-                  'Subtotal with discount',
-                )}
-              </OText>
-              {order?.tax_type === 1 ? (
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+            <Table key={tax.id}>
+              <OSRow>
                 <OText mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount +
-                    order?.summary?.tax ?? 0,
-                  )}
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
-              ) : (
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+            <Table key={fee.id}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
                 <OText mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount ?? 0,
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
-              )}
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
-
         {
           order?.summary?.delivery_price > 0 && (
             <Table>
@@ -414,41 +488,35 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           )
         }
-
-        <Table>
-          <OText mBottom={4}>
-            {t('DRIVER_TIP', 'Driver tip')}{' '}
-            {order?.summary?.driver_tip > 0 &&
-              parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-              !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-              `(${verifyDecimals(
-                order?.summary?.driver_tip,
-                parseNumber,
-              )}%)`}
-          </OText>
-
-          <OText mBottom={4}>
-            {parsePrice(order?.summary?.driver_tip ?? 0)}
-          </OText>
-        </Table>
-
         {
-          order?.summary?.service_fee > 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t('SERVICE_FEE', 'Service Fee')}{' '}
-                {`(${verifyDecimals(
-                  order?.summary?.service_fee,
-                  parseNumber,
-                )}%)`}
-              </OText>
-
-              <OText mBottom={4}>
-                {parsePrice(order?.summary?.service_fee)}
-              </OText>
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
+        {order?.summary?.driver_tip > 0 && (
+          <Table>
+            <OText mBottom={4}>
+              {t('DRIVER_TIP', 'Driver tip')}
+              {order?.summary?.driver_tip > 0 &&
+                parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                (
+                  `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                )}
+            </OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+          </Table>
+        )}
 
         <Total style={{ paddingBottom: 10 }}>
           <Table>
@@ -460,7 +528,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? 0)}
+              {parsePrice(order?.summary?.total ?? order?.total)}
             </OText>
           </Table>
         </Total>

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

@@ -268,6 +268,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
               <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
               {orderTypes(order.delivery_type)}
             </OText>
+            {order?.delivery_option && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
+                {order?.delivery_option?.name}
+              </OText>
+            )}
             {order?.payment_events?.length > 0 && (
               <View>
                 <OText size={13}>

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

@@ -91,3 +91,10 @@ export const AssignDriver = styled.View`
   padding-vertical: 10px;
   margin-bottom: 10px;
 `;
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 70%;
+  flex-wrap: wrap;
+`

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

@@ -617,7 +617,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </RightSide>
       </Sides>
 
-      <NewOrderNotification />
+      <NewOrderNotification isBusinessApp={isBusinessApp} />
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer

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

@@ -725,8 +725,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </View>
       {/* </GestureRecognizer> */}
-
-      <NewOrderNotification />
+                
+      {isBusinessApp && (
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
+      )}
+      
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer

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

@@ -153,7 +153,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 {(
                   productInfo?.()?.ingredients?.length > 0 ||
                   productInfo?.()?.options?.length > 0 ||
-                  product.comment
+                  !!product.comment
                 ) && !isClickableEvent && (
                     <MaterialCommunityIcon name="chevron-down" size={12} />
                   )}
@@ -278,7 +278,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               </ProductOptionsList>
             )}
 
-            {product.comment && (
+            {!!product.comment && (
               <ProductComment>
                 <OText
                   size={12}

package/themes/business/src/components/shared/OModal.tsx

@@ -165,7 +165,7 @@ const OModal = (props: Props): React.ReactElement => {
         transparent={isTransparent}
         visible={open}
         onRequestClose={() => {
-          onClose();
+          onClose && onClose();
         }}
         style={{
           height: '100%',

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

@@ -20,6 +20,9 @@ export interface LoginParams {
   passwordInputIcon?: any;
   allowedLevels?: any;
   useRootPoint?: any;
+  notificationState?: any;
+	handleReCaptcha?: any;
+	enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -373,6 +376,7 @@ export interface OrderDetailsParams {
   handleClickLogisticOrder?: (status: number, orderId: number) => void;
   orderTitle?: any;
   forceUpdate?: number;
+  getPermissions?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -578,4 +582,4 @@ export interface ReviewCustomerParams {
 
 export interface NoNetworkParams {
   image?: any;
-}
+}

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

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

package/themes/kiosk/src/components/BusinessMenu/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PanResponder, TouchableOpacity, View } from 'react-native';
+import { PanResponder, Platform, TouchableOpacity, View } from 'react-native';
 import {
   useLanguage,
   useOrder,
@@ -40,7 +40,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
   const clearCartWhenTimeOut = () => {
     if (cart?.uuid) clearCart(cart?.uuid)
   }
-  const timerId = useRef(false);
+  const timerId: any = useRef(false);
 
   const clearInactivityTimeout = () =>{ 
     clearTimeout(timerId.current);
@@ -93,6 +93,17 @@ const BusinessMenu = (props:any): React.ReactElement => {
     else showCartBottomSheet();
   }
 
+  const handleRedirect = () => {
+    navigation.navigate('DeliveryType', {
+      callback: () => {
+        navigation.navigate('Business');
+      },
+      goBack: () => {
+        navigation.goBack();
+      },
+    });
+  };
+
   return (
     <View style={{
       flex: 1,
@@ -109,31 +120,31 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingTop: 20 }}>
-            <NavBar
-              title={t('MENU_V21', 'Menu')}
-              onActionLeft={goToBack}
-              includeOrderTypeSelector
-              rightComponent={cart && (
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                  onPress={onToggleCart}
+          {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
+          <NavBar
+            title={t('MENU_V21', 'Menu')}
+            onActionLeft={goToBack}
+            includeOrderTypeSelector
+            onClickTypes={handleRedirect}
+            rightComponent={cart && (
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+                onPress={onToggleCart}
+              >
+                <OText
+                  color={theme.colors.mediumGray}
                 >
-                  <OText
-                    color={theme.colors.mediumGray}
-                  >
-                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                  </OText>
-
-                  <MaterialIcon
-                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                    color={theme.colors.primary}
-                    size={30}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
+                  {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                </OText>
+
+                <MaterialIcon
+                  name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                  color={theme.colors.primary}
+                  size={30}
+                />
+              </TouchableOpacity>
+            )}
+          />
 
           <BusinessProductsListing
             { ...businessProductsListingProps }
@@ -144,7 +155,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         </Container>
       </View>
 
-        <View
+        {/* <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
             display: bottomSheetVisibility ? 'flex' : 'none'
@@ -155,7 +166,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
             resetInactivityTimeout={resetInactivityTimeout}
             clearInactivityTimeout={clearInactivityTimeout}
           />
-        </View>
+        </View> */}
     </View>
   );
 };

package/themes/kiosk/src/components/BusinessesListing/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import React from 'react';
+import { PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -21,7 +21,6 @@ const BusinessesListingUI = (props: any) => {
     navigation,
     businessesList,
     handleBusinessClick,
-    paginationProps,
   } = props;
 
   const theme = useTheme();