ordering-ui-react-native 0.12.28 → 0.12.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.28",
+  "version": "0.12.32",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -84,6 +84,7 @@
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
+    "react-native-map-link": "^2.8.2",
     "react-native-maps": "^0.28.0",
     "react-native-modal-dropdown": "^1.0.1",
     "react-native-onesignal": "^4.1.1",

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

@@ -4,16 +4,15 @@ import MapView, {
   PROVIDER_GOOGLE,
   Marker
 } 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, OFab, OText, OLink } from '../shared';
+import { OIconButton, OIcon, OFab, OText, OButton } from '../shared';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
-// import MapViewDirections from 'react-native-maps-directions';
 import { FloatingButton } from '../FloatingButton';
+import { showLocation } from 'react-native-map-link';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -90,11 +89,11 @@ export const DriverMap = (props: GoogleMapsParams) => {
       content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
         ? [t(errKey, mapErrors[errKey])]
         : [
-            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
-              'METTERS',
-              'meters',
-            )}`,
-          ],
+          `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+            'METTERS',
+            'meters',
+          )}`,
+        ],
       key: errKey,
     });
   };
@@ -322,6 +321,17 @@ export const DriverMap = (props: GoogleMapsParams) => {
     arrowDistance: {
       borderWidth: 0,
     },
+    buttonContainer: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 80,
+    },
+    showButton: {
+      alignSelf: 'center',
+      borderRadius: 10,
+    }
   });
 
   return (
@@ -453,7 +463,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
               </OText>
             </View>
           </View>
-
           <View style={styles.facDistance}>
             <View
               style={{
@@ -475,22 +484,31 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${
-                  isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
+                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
               </OText>
             </View>
           </View>
         </View>
-        <View>
-          <OLink
-            PressStyle={{paddingHorizontal: 80, paddingVertical: 10,bottom: showAcceptOrReject ? 80 : 0}}
-            hasButton
-            url={Platform.select({
-              ios: `maps:0,0?q=${destination.latitude},${destination.longitude}`,
-              android: `geo:0,0?q=${destination.latitude},${destination.longitude}`,
+        <View style={styles.buttonContainer}>
+          <OButton
+            imgRightSrc=''
+            textStyle={{ color: theme.colors.white }}
+            style={{
+              ...styles.showButton,
+              bottom: showAcceptOrReject ? 80 : 0
+            }}
+            onClick={() => showLocation({
+              latitude: destination.latitude,
+              longitude: destination.longitude,
+              sourceLatitude: userLocation.latitude,
+              sourceLongitude: userLocation.longitude,
+              naverCallerName: 'com.deliveryapp',
+              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'),
             })}
-            shorcut={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
           />
         </View>
         {showAcceptOrReject && (

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

@@ -442,6 +442,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       style={{
                         backgroundColor: theme.colors.inputChat,
                         borderRadius: 7.5,
+                        marginBottom: 20
                       }}>
                       <CountryPicker
                         // @ts-ignore

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

@@ -5,7 +5,7 @@ export const OrderDetailsContainer = styled.ScrollView`
 `;
 
 export const Pickup = styled.View`
-  padding-vertical: 10px;
+  padding-vertical: 20px;
   margin-bottom: 20px;
 `;
 

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

@@ -309,25 +309,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      {isBusinessApp && (
-        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
-          <OIcon
-            src={theme.images.general.information}
-            width={12}
-            height={12}
-            color={theme.colors.skyBlue}
-            style={{ marginRight: 5 }}
-          />
-          <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
-          </OText>
-          <TouchableOpacity onPress={() => { Linking.openURL('https://new-admin.tryordering.com/') }}>
-            <OText size={12} color={theme.colors.skyBlue}>
-              {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
-            </OText>
-          </TouchableOpacity>
-        </View>
-      )}
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -524,85 +505,82 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       {/* </GestureRecognizer> */}
 
       <NewOrderNotification />
-      <OModal open={openModal} entireModal customClose>
-        <ModalContainer
-          nestedScrollEnabled={true}
-        >
-          <OIconButton
-            icon={theme.images.general.arrow_left}
-            borderColor={theme.colors.clear}
-            iconColor={theme.colors.backArrow}
-            iconStyle={{ width: 20, height: 13 }}
-            style={{
-              maxWidth: 40,
-              height: 35,
-              justifyContent: 'flex-end',
-              marginBottom: 30,
-              marginTop: 30
-            }}
-            onClick={() => setOpenModal(false)}
-          />
-          <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
-          <OInput
-            value={search.id}
-            onChange={(value: any) => setSearch({ ...search, id: value })}
-            style={styles.inputStyle}
-            placeholder={t('ORDER_NUMBER', 'Order number')}
-            autoCorrect={false}
-          />
-          <OrdersOptionDate
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionStatus
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionCity
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          <OrdersOptionBusiness
-            {...props}
-            search={search}
-            onSearch={setSearch}
-          />
-          {isBusinessApp && (
-            <>
-              <OrdersOptionDelivery
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-              <OrdersOptionDriver
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-              <OrdersOptionPaymethod
-                {...props}
-                search={search}
-                onSearch={setSearch}
-              />
-            </>
-          )}
-          <OButton
-            text={t('SEARCH', 'Search')}
-            textStyle={{ color: theme.colors.white }}
-            imgRightSrc={null}
-            style={{
-              borderRadius: 7.6,
-              marginBottom: 70,
-              marginTop: 60,
-              zIndex: 12
-            }}
-            onClick={applyFilters}
-          />
-        </ModalContainer>
-      </OModal>
+      {openModal && (
+        <OModal open={openModal} entireModal customClose>
+          <ModalContainer
+            nestedScrollEnabled={true}
+          >
+            <OIconButton
+              icon={theme.images.general.arrow_left}
+              borderColor={theme.colors.clear}
+              iconColor={theme.colors.backArrow}
+              iconStyle={{ width: 20, height: 13 }}
+              style={{
+                maxWidth: 40,
+                height: 35,
+                justifyContent: 'flex-end',
+                marginBottom: 30,
+                marginTop: 30
+              }}
+              onClick={() => setOpenModal(false)}
+            />
+            <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+            <OInput
+              value={search.id}
+              onChange={(value: any) => setSearch({ ...search, id: value })}
+              style={styles.inputStyle}
+              placeholder={t('ORDER_NUMBER', 'Order number')}
+              autoCorrect={false}
+            />
+            <OrdersOptionDate
+              {...props}
+              search={search}
+              onSearch={setSearch}
+            />
+            <OrdersOptionCity
+              {...props}
+              search={search}
+              onSearch={setSearch}
+            />
+            {isBusinessApp && (
+              <>
+                <OrdersOptionBusiness
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionDelivery
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionDriver
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+                <OrdersOptionPaymethod
+                  {...props}
+                  search={search}
+                  onSearch={setSearch}
+                />
+              </>
+            )}
+            <OButton
+              text={t('SEARCH', 'Search')}
+              textStyle={{ color: theme.colors.white }}
+              imgRightSrc={null}
+              style={{
+                borderRadius: 7.6,
+                marginBottom: 70,
+                marginTop: 60,
+                zIndex: 12
+              }}
+              onClick={applyFilters}
+            />
+          </ModalContainer>
+        </OModal>
+      )}
     </>
   );
 };

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

@@ -2,6 +2,7 @@ import styled from 'styled-components/native';
 
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
+  max-height: 35px;
 `;
 
 export const TabsContainer = styled.View`

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

@@ -38,7 +38,7 @@ export const SearchBar = (props: any) => {
       clearTimeout(timeout);
       timeout = setTimeout(function () {
         onSearch(e);
-      }, 750);
+      }, 1000);
     }
   };
 

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
+import { View, StyleSheet, Dimensions, Linking } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NetInfo from '@react-native-community/netinfo';
 import { useTheme } from 'styled-components/native';
@@ -14,7 +14,7 @@ import {
 import { NotFoundSource } from '../NotFoundSource';
 import { SearchBar } from '../SearchBar';
 import { BusinessController } from '../BusinessController';
-import { OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { BusinessesListingParams } from '../../types';
 
 const StoresListUI = (props: BusinessesListingParams) => {
@@ -143,6 +143,23 @@ const StoresListUI = (props: BusinessesListingParams) => {
         showsVerticalScrollIndicator={false}
         style={styles.container}
         onScroll={(e: any) => handleScroll(e)}>
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
+          <OIcon
+            src={theme.images.general.information}
+            width={12}
+            height={12}
+            color={theme.colors.skyBlue}
+            style={{ marginRight: 5 }}
+          />
+          <OText size={12}>
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+          </OText>
+          <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
+            <OText size={12} color={theme.colors.skyBlue}>
+              {t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')}
+            </OText>
+          </TouchableOpacity>
+        </View>
         {!loading && !loadBusinesses && businesses?.length === 0 && (
           <NotFoundSource
             content={
@@ -154,8 +171,7 @@ const StoresListUI = (props: BusinessesListingParams) => {
             conditioned={false}
           />
         )}
-
-        {!error &&
+        {!error && businesses &&
           businesses?.map((business: any) => (
             <BusinessController
               key={business?.id}

package/themes/business/src/types/react-native-map-link/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-map-link'