ordering-ui-react-native 0.12.52 → 0.12.56

package/package.json

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

package/src/components/Cart/index.tsx

@@ -16,14 +16,14 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OModal, OText, OInput } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
-import { TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 
 const CartUI = (props: any) => {
   const {
@@ -35,6 +35,8 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
+    handleChangeComment,
+    commentState
   } = props
 
   const theme = useTheme()
@@ -180,19 +182,19 @@ const CartUI = (props: any) => {
               ))
             }
             {
-              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>
+              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 && (
@@ -235,6 +237,38 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
             </OSTotal>
+            {cart?.status !== 2 && (
+              <OSTable>
+                <View style={{ width: '100%', marginTop: 20 }}>
+                  <OText>{t('COMMENTS', 'Comments')}</OText>
+                  <View style={{ flex: 1, width: '100%' }}>
+                    <OInput
+                      value={cart?.comment}
+                      placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                      onChange={(value: string) => handleChangeComment(value)}
+                      style={{
+                        alignItems: 'flex-start',
+                        width: '100%',
+                        height: 100,
+                        borderColor: theme.colors.textSecondary,
+                        paddingRight: 50,
+                        marginTop: 10
+                      }}
+                      multiline
+                    />
+                    {commentState?.loading && (
+                      <View style={{ position: 'absolute', right: 20 }}>
+                        <ActivityIndicator
+                          size='large'
+                          style={{ height: 100 }}
+                          color={theme.colors.primary}
+                        />
+                      </View>
+                    )}
+                  </View>
+                </View>
+              </OSTable>
+            )}
           </OSBill>
         )}
         {cart?.valid_products && (
@@ -294,7 +328,7 @@ const CartUI = (props: any) => {
         onClose={() => setOpenTaxModal({ open: false, data: null })}
         entireModal
       >
-        <TaxInformation data={openTaxModal.data} products={cart.products} />
+        <TaxInformation data={openTaxModal.data} products={cart?.products} />
       </OModal>
     </CContainer>
   )

package/src/components/OrderDetails/index.tsx

@@ -527,6 +527,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
+              {order?.comment && (
+                <Table>
+                  <OText style={{flex: 1}}>{t('COMMENT', 'Comment')}</OText>
+                  <OText style={{maxWidth: '70%'}}>
+                    {order?.comment}
+                  </OText>
+                </Table>
+              )}
               {
                 (
                   parseInt(order?.status) === 1 ||

package/src/components/OrderSummary/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
 import {
   Cart,
   useOrder,
@@ -19,12 +19,13 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OModal, OText } from '../shared';
+import { OInput, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { TaxInformation } from '../TaxInformation';
 import AntIcon from 'react-native-vector-icons/AntDesign'
+
 const OrderSummaryUI = (props: any) => {
   const {
     cart,
@@ -33,7 +34,9 @@ const OrderSummaryUI = (props: any) => {
     offsetDisabled,
     removeProduct,
     isCartPending,
-    isFromCheckout
+    isFromCheckout,
+    commentState,
+    handleChangeComment
   } = props;
 
   const theme = useTheme();
@@ -186,6 +189,38 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
+              {cart?.status !== 2 && (
+                <OSTable>
+                  <View style={{ width: '100%', marginTop: 20 }}>
+                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <View style={{ flex: 1, width: '100%' }}>
+                      <OInput
+                        value={cart?.comment}
+                        placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                        onChange={(value: string) => handleChangeComment(value)}
+                        style={{
+                          alignItems: 'flex-start',
+                          width: '100%',
+                          height: 100,
+                          borderColor: theme.colors.textSecondary,
+                          paddingRight: 50,
+                          marginTop: 10
+                        }}
+                        multiline
+                      />
+                      {commentState?.loading && (
+                        <View style={{ position: 'absolute', right: 20 }}>
+                          <ActivityIndicator
+                            size='large'
+                            style={{ height: 100 }}
+                            color={theme.colors.primary}
+                          />
+                        </View>
+                      )}
+                    </View>
+                  </View>
+                </OSTable>
+              )}
             </OSBill>
           )}
           <OModal

package/src/layouts/Container.tsx

@@ -19,7 +19,7 @@ const SafeAreaStyled = styled.SafeAreaView`
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled  nopadding={props.nopadding} keyboardShouldPersistTaps='handled'>
+      <ContainerStyled ref={props?.forwardRef} nopadding={props.nopadding} keyboardShouldPersistTaps='handled'>
         {props.children}
       </ContainerStyled>
     </SafeAreaStyled>

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

@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Dimensions, StyleSheet, View, SafeAreaView } from 'react-native';
-import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
+import MapView, { PROVIDER_GOOGLE, Marker, Region, Callout } from 'react-native-maps';
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { GoogleMapsParams } from '../../types';
 import Alert from '../../providers/AlertProvider';
-import { OIconButton, OIcon } from '../shared';
+import { OIconButton, OIcon, OText, OButton } from '../shared';
 import { FloatingButton } from '../FloatingButton';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useLocation } from '../../hooks/useLocation';
+import { showLocation } from 'react-native-map-link';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
   const {
@@ -30,6 +32,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     navigation,
   } = props;
 
+  const {
+    hasLocation,
+    initialPosition,
+    followUserLocation,
+    getCurrentLocation,
+    userLocation,
+    stopFollowUserLocation,
+  } = useLocation();
+
   const { top } = useSafeAreaInsets();
   const theme = useTheme();
   const [, t] = useLanguage();
@@ -64,7 +75,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
   };
 
-  const MARKERS =
+  let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
@@ -221,6 +232,18 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       fitAllMarkers();
     }
   }, [isMapReady]);
+  useEffect(() => {
+    if (!locations) return
+    MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
+      return location.level === 4 && driverLocation?.lat
+        ? {
+            latitude: driverLocation?.lat,
+            longitude: driverLocation?.lng,
+          }
+        : { latitude: location.lat, longitude: location.lng };
+    })
+    fitAllMarkers();
+  }, [driverLocation])
 
   const styles = StyleSheet.create({
     map: {
@@ -279,7 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker coordinate={location} title={locations[i]?.title}>
+                      <Marker 
+                        coordinate={location} 
+                        onPress={() => { 
+                          mapRef.current?.animateCamera({
+                          center: { latitude: location.latitude, longitude:location.longitude },
+                        })}}
+                      >
                         <Icon
                           name="map-marker"
                           size={50}
@@ -296,6 +325,51 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                             height={25}
                           />
                         </View>
+                        <Callout
+                          onPress={() => {
+                            showLocation({
+                                      latitude: location.latitude,
+                                      longitude: location.longitude,
+                                      sourceLatitude: userLocation.latitude,
+                                      sourceLongitude: userLocation.longitude,
+                                      naverCallerName: 'com.businessapp',
+                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                                      cancelText: t('CANCEL', 'Cancel'),
+                            })
+                          }}
+                        >
+                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
+                              <View style={{flex: 1, marginBottom: 20}}>
+                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
+                                { locations[i]?.address && (
+                                  <>
+                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                  </>
+                                )}
+                              </View>
+                              <OButton
+                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                                imgRightSrc={null}
+                                textStyle={{
+                                  color: theme.colors.white,
+                                  fontFamily: 'Poppins',
+                                  fontStyle: 'normal',
+                                  fontWeight: 'normal',
+                                  fontSize: 16
+                                }}
+                                style={{
+                                  alignContent:'center',
+                                  borderRadius: 10,
+                                  height: 35,
+                                  bottom:10
+                                }}
+                                bgColor={theme.colors.primary}
+                                borderColor={theme.colors.primary}
+                              />   
+                          </View>
+                        </Callout>
                       </Marker>
                     </React.Fragment>
                   ),

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

@@ -319,10 +319,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList]);
 
-  const locations = [
+  let locations = [
     {
       ...order?.driver?.location,
-      title: t('DRIVER', 'Driver'),
+      title: order?.driver?.name ?? t('DRIVER', 'Driver'),
       icon:
         order?.driver?.photo ||
         'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
@@ -331,12 +331,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     {
       ...order?.business?.location,
       title: order?.business?.name,
+      address: {
+        addressName: order?.business?.address,
+        zipcode: order?.business?.zipcode
+      },
       icon: order?.business?.logo || theme.images.dummies.businessLogo,
       level: 2,
     },
     {
       ...order?.customer?.location,
-      title: t('CUSTOMER', 'Customer'),
+      title: order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+      address: {
+        addressName: order?.customer?.address,
+        zipcode: order?.customer?.zipcode
+      },
       icon:
         order?.customer?.photo ||
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',

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

@@ -40,7 +40,6 @@ export const OrderContentComponent = (props: OrderContent) => {
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [openReviewModal, setOpenReviewModal] = useState(false)
-  const [isCustomerReviewed, setIsCustomerReviewed] = useState(false)
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
@@ -65,11 +64,6 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
-  const handleSuccessReviewed = () => {
-    setOpenReviewModal(false)
-    setIsCustomerReviewed(true)
-  }
-
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -265,7 +259,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
-        {/* {!order?.user_review && pastOrderStatuses.includes(order?.status) && !isCustomerReviewed && (
+        {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
           <OButton
             style={styles.btnReview}
             textStyle={{ color: theme.colors.white }}
@@ -273,7 +267,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             imgRightSrc={false}
             onClick={() => setOpenReviewModal(true)}
           />
-        )} */}
+        )}
       </OrderCustomer>
 
       <OrderProducts>
@@ -435,6 +429,14 @@ export const OrderContentComponent = (props: OrderContent) => {
             </OText>
           </Table>
         </Total>
+        {order?.comment && (
+          <Table>
+            <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+            <OText style={{ maxWidth: '70%' }}>
+              {order?.comment}
+            </OText>
+          </Table>
+        )}
       </OrderBill >
       <OModal
         open={openReviewModal}
@@ -445,7 +447,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <ReviewCustomer
           order={order}
           closeModal={() => setOpenReviewModal(false)}
-          onClose={() => handleSuccessReviewed()}
+          onClose={() => setOpenReviewModal(false)}
         />
       </OModal>
     </OrderContent>

package/themes/business/src/layouts/Container.tsx

@@ -46,7 +46,9 @@ export const Container = (props: any) => {
       <ContainerStyled
         contentContainerStyle={props.style}
         keyboardShouldPersistTaps="handled"
-        orientation={orientation}>
+        orientation={orientation}
+        ref={props?.forwardRef}
+      >
         {props.children}
       </ContainerStyled>
     </SafeAreaStyled>

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

@@ -16,12 +16,12 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OInput, OModal, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { Platform } from 'react-native';
+import { ActivityIndicator, Platform, View } from 'react-native';
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
@@ -36,6 +36,8 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
+    handleChangeComment,
+    commentState
     // isFromCart
   } = props
   const theme = useTheme();
@@ -222,6 +224,38 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
             </OSTotal>
+            {cart?.status !== 2 && (
+              <OSTable>
+                <View style={{ width: '100%', marginTop: 20 }}>
+                  <OText>{t('COMMENTS', 'Comments')}</OText>
+                  <View style={{ flex: 1, width: '100%' }}>
+                    <OInput
+                      value={cart?.comment}
+                      placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                      onChange={(value: string) => handleChangeComment(value)}
+                      style={{
+                        alignItems: 'flex-start',
+                        width: '100%',
+                        height: 100,
+                        borderColor: theme.colors.textSecondary,
+                        paddingRight: 50,
+                        marginTop: 10
+                      }}
+                      multiline
+                    />
+                    {commentState?.loading && (
+                      <View style={{ position: 'absolute', right: 20 }}>
+                        <ActivityIndicator
+                          size='large'
+                          color={theme.colors.primary}
+                          style={{ height: 100 }}
+                        />
+                      </View>
+                    )}
+                  </View>
+                </View>
+              </OSTable>
+            )}
           </OSBill>
         )}
         {cart?.valid_products && (

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

@@ -445,6 +445,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText size={12} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{parsePrice(order?.summary?.total || order?.total)}</OText>
                 </Table>
               </Total>
+              {order?.comment && (
+                <Table>
+                  <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+                  <OText style={{ maxWidth: '70%' }}>
+                    {order?.comment}
+                  </OText>
+                </Table>
+              )}
             </OrderBill>
           </OrderContent>
         </>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TextStyle, TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TextStyle, TouchableOpacity, View } from 'react-native'
 import {
   Cart,
   useOrder,
@@ -19,7 +19,7 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OModal, OText } from '../shared';
+import { OInput, OModal, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
@@ -40,6 +40,8 @@ const OrderSummaryUI = (props: any) => {
     title,
     paddingH,
     isMini,
+    commentState,
+    handleChangeComment
   } = props;
 
   const theme = useTheme();
@@ -235,7 +237,38 @@ const OrderSummaryUI = (props: any) => {
                   )}
                 </View>
               ) : null}
-
+              {cart?.status !== 2 && (
+                <OSTable>
+                  <View style={{ width: '100%', marginTop: 20 }}>
+                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <View style={{ flex: 1, width: '100%' }}>
+                      <OInput
+                        value={cart?.comment}
+                        placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                        onChange={(value: string) => handleChangeComment(value)}
+                        style={{
+                          alignItems: 'flex-start',
+                          width: '100%',
+                          height: 100,
+                          borderColor: theme.colors.textSecondary,
+                          paddingRight: 50,
+                          marginTop: 10
+                        }}
+                        multiline
+                      />
+                      {commentState?.loading && (
+                        <View style={{ position: 'absolute', right: 20 }}>
+                          <ActivityIndicator
+                            size='large'
+                            style={{ height: 100 }}
+                            color={theme.colors.primary}
+                          />
+                        </View>
+                      )}
+                    </View>
+                  </View>
+                </OSTable>
+              )}
             </OSBill>
           )}
           <OModal

package/themes/doordash/src/layouts/Container.tsx

@@ -18,7 +18,7 @@ const SafeAreaStyled = styled.SafeAreaView`
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled style={props?.style} {...props} keyboardShouldPersistTaps='handled'>
+      <ContainerStyled ref={props?.forwardRef} style={props?.style} {...props} keyboardShouldPersistTaps='handled'>
         {props.children}
       </ContainerStyled>
     </SafeAreaStyled>