ordering-ui-react-native 0.18.38 → 0.18.40-test

package/package.json

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

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

@@ -453,7 +453,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 {order?.delivery_datetime_utc
                   ? parseDate(order?.delivery_datetime_utc)
                   : parseDate(order?.delivery_datetime, { utc: false })}
-                {` - ${order?.paymethod?.name}`}
+                {` - ${t(order?.paymethod?.name?.replace(/\s+/g, '_')?.toUpperCase(), order?.paymethod?.name)}`}
               </OText>
               <OText weight="bold">
                 {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { OText, OIconButton } from '../shared';
 import { StyleSheet, View, Platform, Alert } from 'react-native';
 import {
@@ -23,7 +23,11 @@ import { useTheme } from 'styled-components/native';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
+export const OrderSummary = ({ order, navigation, orderStatus, permissions,
+  askBluetoothPermission,
+  getPermissions,
+  isGrantedPermissions,
+  checkBluetoothPermission }: any) => {
   const handleArrowBack: any = () => {
     navigation?.canGoBack() && navigation.goBack();
   };
@@ -48,10 +52,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 +64,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 +92,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 +135,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 +171,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 +181,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 +324,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 +371,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
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })
-              }`}
+              {`${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 +404,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 +426,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 +438,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 +509,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 +521,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 +544,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 +684,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%'}

package/themes/original/src/components/AddressForm/index.tsx

@@ -122,8 +122,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
+			: { paddingVertical: 20, paddingLeft: 40, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -352,6 +352,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 			map_data: { library: 'google', place_id: data.place_id },
 			zip_code: data?.zip_code || null,
 		};
+		if (googleInput?.current) {
+			googleInput?.current?.setAddressText(addressSelected.address);
+		}
 		updateChanges(addressSelected);
 	};
 
@@ -526,8 +529,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 					onActionLeft={goToBack}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
-					style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-					titleWrapStyle={{ paddingHorizontal: 0 }}
+					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
+					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
 				/>
 			</View>

package/themes/original/src/components/AddressList/index.tsx

@@ -346,7 +346,7 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		marginTop: 30,
-		marginBottom: 0,
+		marginBottom: 30,
 		borderRadius: 7.6,
 		borderWidth: 1,
 		shadowOpacity: 0,

package/themes/original/src/components/BusinessBasicInformation/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable, Image } from 'react-native';
 import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -45,6 +45,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+	const [imageRealSize, setImageRealSize] = useState({ width: 16, height: 9, loading: true })
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
@@ -61,7 +62,7 @@ export const BusinessBasicInformation = (
 			height: 150,
 		},
 		headerStyle: {
-			height: isChewLayout ? 170 : 260,
+			aspectRatio: imageRealSize?.width / imageRealSize?.height
 		},
 		logoStyle: {
 			width: 72,
@@ -195,6 +196,20 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	useEffect(() => {
+		const bannerImage = header || businessState?.business?.header
+		if (!bannerImage) {
+			setImageRealSize({ width: 16, height: 9, loading: false })
+			return
+		}
+		Image.getSize(bannerImage, (width: number, height: number) => {
+			setImageRealSize({ width: width, height: height, loading: false });
+		  }, (error: any) => {
+			setImageRealSize({ ...imageRealSize, loading: false });
+			console.log(error);
+		  });
+	}, [header, businessState?.business?.header])
+
 	const SocialIcons = () => {
 		return (
 			<>
@@ -283,7 +298,7 @@ export const BusinessBasicInformation = (
 							? styles.businesInfoheaderStyle
 							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 					}
-					{...(!loading && {
+					{...(!loading && !imageRealSize?.loading && {
 						source: (header || businessState?.business?.header || typeof theme?.images?.dummies?.businessHeader === 'string') ? {
 							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header || theme?.images?.dummies?.businessHeader
 						} : theme?.images?.dummies?.businessHeader

package/themes/original/src/components/BusinessBasicInformation/styles.tsx

@@ -8,9 +8,6 @@ export const BusinessContainer = styled.View`
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
   position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: cover;
 `;
 export const BusinessLogo = styled.View`
   position: absolute;

package/themes/original/src/components/BusinessController/index.tsx

@@ -11,10 +11,10 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape, vibrateApp } from '../../utils';
 
 import {
 	BusinessHero,
@@ -152,7 +152,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	};
 
 	const handleBusinessClick = (selectedBusiness: any) => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {