ordering-ui-react-native 0.16.15-release → 0.16.16-release

package/package.json

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

package/src/components/BusinessInformation/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {
   BusinessInformation as BusinessInformationController,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native'
 import { OText } from '../shared'
 import {
@@ -26,6 +27,8 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+	const [{ configs }] = useConfig();
+
   const daysOfWeek = [
     t('SUNDAY_ABBREVIATION', 'Sun'),
     t('MONDAY_ABBREVIATION', 'Mon'),
@@ -35,9 +38,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const scheduleFormatted = ({ hour, minute } : {hour : number | string, minute : number | string}) => {
-    const checkTime = (val : number | string) => val < 10 ? `0${val}` : val
-    return `${checkTime(hour)}:${checkTime(minute)}`
+  const is12hours = configs?.format_time?.value?.includes('12')
+
+  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
+    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
+		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
+		const h = parseInt(`${hour}`);
+		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
   }
 
   return (

package/src/components/BusinessInformation/styles.tsx

@@ -18,7 +18,7 @@ export const InnerContent = styled.View`
 `
 export const WrapScheduleBlock = styled.ScrollView`
   margin: 20px 0;
-  max-height: 500px;
+  max-height: 520px;
 `
 export const ScheduleBlock = styled.View`
   display: flex;
@@ -27,7 +27,7 @@ export const ScheduleBlock = styled.View`
   padding: 0 20px;
   border-left-width: 1px;
   border-color: ${(props: any) => props.theme.colors.lightGray};
-  max-width: 100px;
+  max-width: 120px;
 `
 export const WrapBusinessMap = styled.View`
   max-height: 200px;

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

@@ -21,6 +21,7 @@ const MapViewComponent = (props: MapViewParams) => {
     customerMarkerGroups,
     alertState,
     setAlertState,
+    setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
   } = props;
@@ -211,6 +212,16 @@ const MapViewComponent = (props: MapViewParams) => {
     )
   }
 
+  useEffect(() => {
+    if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
+      const location = {
+        lat: userLocation.latitude,
+        lng: userLocation.longitude
+      }
+      setDriverLocation({ location })
+    }
+  }, [userLocation])
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>

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

@@ -337,9 +337,14 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
-                {order?.comment}
-              </OText>
+              <>
+                <OText weight='500' style={{ marginBottom: 5 }}>
+                  {t('ORDER_COMMENT', 'Order Comment')}
+                </OText>
+                <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 20 }}>
+                  {order?.comment}
+                </OText>
+              </>
             )}
           </View>
         )}

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

@@ -568,6 +568,7 @@ export interface AcceptOrRejectOrderParams {
 export interface MapViewParams {
   onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
+  setDriverLocation: (location: any) => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -68,6 +69,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		onBusinessClick
 	} = props
 
+	const insets = useSafeAreaInsets()
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
@@ -245,12 +247,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	return (
 		<>
-			<ContainerSafeAreaView
-				style={{ flex: 1 }}
-				isOpenFiltProducts={isOpenFiltProducts}
-			>
+			<View style={{ flex: 1 }}>
 				<Animated.View style={{ position: 'relative' }}>
-					<TopHeader isIos={Platform.OS === 'ios'}>
+					<TopHeader
+						style={{
+							marginTop: Platform.OS === 'ios' ? insets.top : 40
+						}}
+					>
 						{!isOpenSearchBar && (
 							<>
 								<TopActions onPress={() => handleBackNavigation()}>
@@ -512,7 +515,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onAccept={() => setAlertState({ open: false, content: [] })}
 					onClose={() => setAlertState({ open: false, content: [] })}
 				/>
-			</ContainerSafeAreaView>
+			</View>
 			<OModal
 				open={openService}
 				onClose={() => setOpenService(false)}

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

@@ -1,8 +1,5 @@
 import styled, { css } from 'styled-components/native'
 
-export const ContainerSafeAreaView = styled.SafeAreaView`
-`
-
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -14,7 +11,6 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
-  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;

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

@@ -10,6 +10,7 @@ import {
   useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { showLocation } from 'react-native-map-link';
 import {
   OrderDetailsContainer,
   Header,
@@ -116,6 +117,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const { order, businessData } = props.order;
   const mapValidStatuses = [9, 19, 23]
   const placeSpotTypes = [3, 4, 5]
+  const directionTypes = [2, 3, 4, 5]
 
   const walletName: any = {
     cash: {
@@ -743,6 +745,26 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.business?.address}
                 </OText>
               </View>
+              {directionTypes.includes(order?.delivery_type) && (
+                <OButton
+                  text={t('GET_DIRECTIONS', 'Get Directions')}
+                  imgRightSrc=''
+                  textStyle={{ color: theme.colors.white }}
+                  style={{
+                    alignSelf: 'center',
+                    borderRadius: 10,
+                    marginTop: 30
+                  }}
+                  onClick={() => showLocation({
+                    latitude: order?.business?.location?.lat,
+                    longitude: order?.business?.location?.lng,
+                    naverCallerName: 'com.reactnativeappstemplate5',
+                    dialogTitle: t('GET_DIRECTIONS', 'Get Directions'),
+                    dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                    cancelText: t('CANCEL', 'Cancel'),
+                  })}
+                />
+              )}
             </OrderBusiness>
             
             {placeSpotTypes.includes(order?.delivery_type) && (