ordering-ui-react-native 0.12.29 → 0.12.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.29",
+  "version": "0.12.33",
   "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/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,80 +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}
-          />
-          <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>
+      {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/components/shared/OButton.tsx

@@ -143,7 +143,6 @@ OButton.defaultProps = {
   isDisabled: false,
   indicatorColor: 'white',
   activeOpacity: 0.5,
-  imgRightSrc: require('../../assets/icons/arrow_right.png'),
 };
 
 export default OButton;

package/themes/uber-eats/src/components/AddressList/index.tsx

@@ -11,7 +11,6 @@ import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 
-const addIcon = require('../../assets/icons/add-circular-outlined-button.png')
 
 const AddressListUI = (props: AddressListParams) => {
   const {
@@ -32,6 +31,7 @@ const AddressListUI = (props: AddressListParams) => {
   } = props
 
   const theme = useTheme()
+  const addIcon = theme.general?.images?.addCircularOutlined
 
   const styles = StyleSheet.create({
     address: {

package/themes/uber-eats/src/components/Messages/index.tsx

@@ -10,9 +10,6 @@ import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboa
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
-const ImageDummy = require('../../assets/images/image.png')
-const paperIcon = require('../../assets/images/paper-plane.png')
-
 const ORDER_STATUS: any = {
   0: 'ORDER_STATUS_PENDING',
   1: 'ORDERS_COMPLETED',
@@ -61,8 +58,11 @@ const MessagesUI = (props: MessagesParams) => {
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
   const [isKeyboardShow, setIsKeyboardShow] = useState(false)
   const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
-  const chatDisabled = previousStatus.includes(order?.status)
 
+  const ImageDummy = theme.images?.general?.ImageDummy
+  const paperIcon = theme?.images?.general?.paperIcon
+
+  const chatDisabled = previousStatus.includes(order?.status)
   const quickMessageList = [
     { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'customer_message_1') },
     { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'customer_message_2') },

package/themes/uber-eats/src/components/shared/OButton.tsx

@@ -128,7 +128,6 @@ OButton.defaultProps = {
   isDisabled: false,
   indicatorColor: 'white',
   activeOpacity: 0.5,
-  imgRightSrc: require('../../assets/icons/arrow_right.png')
 };
 
 export default OButton;

package/themes/uber-eats/src/components/shared/ODropDown.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import styled, { css } from 'styled-components/native'
+import styled, { css, useTheme } from 'styled-components/native'
 import { ScrollView, TouchableOpacity  } from 'react-native-gesture-handler'
 import {
   ScrollView as CustomScrollView,
@@ -76,6 +76,7 @@ const ODropDown = (props: Props) => {
     isModal
   } = props
 
+  const theme = useTheme()
   const [isOpen, setIsOpen] = useState(false)
   const defaultOption = options?.find((option: any) => option.value === defaultValue)
   const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
@@ -114,7 +115,7 @@ const ODropDown = (props: Props) => {
         <DropIcon
           textcolor={props.textcolor}
           secondary={secondary}
-          source={require('../../assets/icons/drop_down.png')}
+          source={theme.images.general.dropDown}
         />
       </Selected>
       {isOpen && options && (

package/themes/uber-eats/src/components/shared/OIcon.tsx

@@ -1,7 +1,7 @@
 
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
-import styled from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +23,11 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme()
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,