ordering-ui-react-native 0.11.59 → 0.12.1

package/package.json

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

package/themes/business/index.tsx

@@ -34,7 +34,7 @@ import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
-
+import { MapViewUI as MapView } from './src/components/MapView'
 //OComponents
 import {
   OText,
@@ -74,6 +74,7 @@ export {
   LogoutButton,
   MessagesOption,
   NotFoundSource,
+  MapView,
   OrderDetailsBusiness,
   OrderDetailsDelivery,
   OrderMessage,

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

@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native'
+import MapView, {
+  PROVIDER_GOOGLE,
+  Marker,
+  Callout
+} from 'react-native-maps';
+import { useLanguage, useSession, MapView as MapViewController } from 'ordering-components/native';
+import { MapViewParams } from '../../types';
+import Alert from '../../providers/AlertProvider';
+import { useTheme } from 'styled-components/native';
+import { useLocation } from '../../hooks/useLocation';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { OIcon, OText } from '../shared'
+
+const MapViewComponent = (props: MapViewParams) => {
+
+  const {
+    onNavigationRedirect,
+    isLoadingBusinessMarkers,
+    getBusinessLocations,
+    markerGroups,
+    customerMarkerGroups
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ user }] = useSession()
+  const { width, height } = Dimensions.get('window');
+  const ASPECT_RATIO = width / height;
+  const mapRef = useRef<MapView>(null);
+  const following = useRef<boolean>(true);
+  const [isFocused, setIsFocused] = useState(false)
+  const [locationSelected, setLocationSelected] = useState<any>(null)
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [], key: null });
+
+  const {
+    initialPosition,
+    userLocation,
+    stopFollowUserLocation,
+    followUserLocation
+  } = useLocation();
+
+  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: [],
+    });
+  };
+
+  const fitCoordinates = (location?: any) => {
+    if (mapRef.current) {
+      mapRef.current.fitToCoordinates(
+        [
+          { latitude: location.latitude, longitude: location.longitude },
+          {
+            latitude: userLocation.latitude,
+            longitude: userLocation.longitude,
+          },
+        ],
+        {
+          edgePadding: { top: 120, right: 120, bottom: 120, left: 120 },
+        },
+      );
+    }
+  };
+
+  useEffect(() => {
+    fitCoordinates(locationSelected || userLocation);
+  }, [userLocation, locationSelected]);
+
+
+  useEffect(() => {
+    if (isFocused) {
+      getBusinessLocations()
+    }
+  }, [isFocused])
+
+  useEffect(() => {
+    followUserLocation();
+
+    return () => {
+      stopFollowUserLocation();
+    };
+  }, []);
+
+
+  useFocusEffect(
+    useCallback(() => {
+      setIsFocused(true)
+      return () => {
+        stopFollowUserLocation()
+        setIsFocused(false)
+        setLocationSelected(null)
+      }
+    }, [])
+  )
+
+  const styles = StyleSheet.create({
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+  });
+
+  const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
+    const markerRef = useRef<any>()
+    useEffect(() => {
+      if (
+        markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
+        markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
+      ) {
+        markerRef?.current?.showCallout()
+      } else {
+        markerRef?.current?.hideCallout()
+      }
+    }, [locationSelected])
+
+    return (
+      <Marker
+        key={customer ? marker?.customer?.id : marker?.business?.id}
+        coordinate={{
+          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+        }}
+        onPress={() =>
+          setLocationSelected({
+            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          })
+        }
+        ref={(ref) => markerRef.current = ref}
+      >
+        <Icon
+          name="map-marker"
+          size={50}
+          color={theme.colors.primary}
+        />
+        <View style={styles.view}>
+          <OIcon
+            style={styles.image}
+            src={{ uri: customer ? marker?.customer?.photo : marker?.business?.logo }}
+            width={25}
+            height={25}
+          />
+        </View>
+        <Callout
+          onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
+        >
+          <View style={{ flex: 1, width: 200, padding: 5 }}>
+            <OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
+            <OText>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
+                </>
+              ) : (
+                <>
+                  {t('ORDER_NUMBER', 'Order No.')} {marker?.id}
+                </>
+              )}
+            </OText>
+            <OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
+            {((customer && marker?.customer?.city?.address_notes) || !customer) && (
+              <OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
+            )}
+            {((customer && marker?.business?.zipcode) || (!customer && marker?.business?.zipcode)) && (
+              <OText>{customer ? marker?.customer?.zipcode : marker?.business?.zipcode}</OText>
+            )}
+            {customer && marker?.customer?.internal_number && (
+              <OText>{marker?.customer?.internal_number}</OText>
+            )}
+            <OText textDecorationLine='underline' color={theme.colors.primary}>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('SHOW_ORDERS', 'Show orders')}
+                </>
+              ) : (
+                <>
+                  {t('MORE_INFO', 'More info')}
+                </>
+              )}
+            </OText>
+          </View>
+        </Callout>
+      </Marker>
+    )
+  }
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
+          {typeof initialPosition?.latitude === 'number' && !isLoadingBusinessMarkers && isFocused && (
+            <MapView
+              ref={mapRef}
+              provider={PROVIDER_GOOGLE}
+              initialRegion={{
+                latitude: initialPosition.latitude,
+                longitude: initialPosition.longitude,
+                latitudeDelta: 0.01,
+                longitudeDelta: 0.01 * ASPECT_RATIO,
+              }}
+              style={{ flex: 1 }}
+              zoomTapEnabled
+              zoomEnabled
+              zoomControlEnabled
+              cacheEnabled
+              moveOnMarkerPress
+              onTouchStart={() => (following.current = false)}
+            >
+              <>
+                {Object.values(markerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.business_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                  />
+                ))}
+                {Object.values(customerMarkerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.customer_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                    customer
+                  />
+                ))}
+                <Marker
+                  coordinate={{
+                    latitude: location.lat,
+                    longitude: location.lng,
+                  }}
+                  title={t('YOUR_LOCATION', 'Your Location')}
+                >
+                  <Icon
+                    name="map-marker"
+                    size={50}
+                    color={theme.colors.primary}
+                  />
+                  <View style={styles.view}>
+                    <OIcon
+                      style={styles.image}
+                      src={{ uri: user.photo }}
+                      width={25}
+                      height={25}
+                    />
+                  </View>
+                </Marker>
+              </>
+            </MapView>
+          )}
+        </View>
+      </View>
+      <View>
+        <Alert
+          open={alertState.open}
+          onAccept={closeAlert}
+          onClose={closeAlert}
+          content={alertState.content}
+          title={t('ERROR', 'Error')}
+        />
+      </View>
+    </SafeAreaView >
+  );
+};
+
+export const MapViewUI = (props: any) => {
+  const MapViewProps = {
+    ...props,
+    UIComponent: MapViewComponent
+  }
+  return <MapViewController {...MapViewProps} />
+}

package/themes/business/src/components/shared/OText.tsx

@@ -23,6 +23,7 @@ const SText = styled.Text`
     css`
       flex: ${props.weight ? 1 : 0};
     `};
+  text-decoration: ${(props : any) => props.textDecorationLine};
 `;
 interface Props {
   color?: string;
@@ -39,6 +40,7 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
+  textDecorationLine?: string
 }
 
 const OText = (props: Props): React.ReactElement => {

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

@@ -539,3 +539,11 @@ export interface AcceptOrRejectOrderParams {
   titleReject?: textTranslate;
   appTitle?: textTranslate;
 }
+
+export interface MapViewParams {
+  onNavigationRedirect: (page : string, params ?: any) => void,
+  getBusinessLocations: () => void,
+  isLoadingBusinessMarkers?: boolean,
+  markerGroups: Array<any>,
+  customerMarkerGroups: Array<any>
+}

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -34,7 +34,7 @@ const CustomerName = (props: Props): React.ReactElement => {
       marginBottom: 20,
       borderWidth: 1,
       borderColor: theme.colors.disabled,
-      height: 44
+      height: 50
     },
   });
 
@@ -67,72 +67,99 @@ const CustomerName = (props: Props): React.ReactElement => {
     }}
   />);
 
+  const skipButton  = (
+    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
+      <OButton
+        text={t('SKIP', 'Skip')}
+        onClick={onProceedToPay}
+        textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+        parentStyle={{
+          height: orientationState?.orientation === PORTRAIT
+            ? 50 : 100
+        }}
+        style={{
+          width: orientationState?.orientation === PORTRAIT
+            ? orientationState?.dimensions.width - 40
+            : orientationState?.dimensions.width * 0.1,
+        }}
+      />
+    </View>
+  );
+
   return (
     <>
-      <Container>
-        <NavBar
-          title={t('YOUR_NAME', 'Your name')}
-          onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
-        />
-
-        <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText
-            size={orientationState?.dimensions?.width * 0.05}
-          >
-            {t('WHOM_MIGHT_THIS', 'Whom might this')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.05}
-              weight={'700'}
-            >
-              {`${t('ORDER_BE_FOR', 'order be for?')}`}
-            </OText>
-          </OText>
-        </View>
-
-        <Controller
-          control={control}
-          render={({ onChange, value }: any) => (
-            <OInput
-              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-              style={{
-                ...styles.inputStyle,
-                width: orientationState?.orientation === PORTRAIT
-                  ? orientationState?.dimensions.width - 40
-                  : orientationState?.dimensions.width * 0.5,
-              }}
-              value={value}
-              autoCapitalize="words"
-              autoCorrect={false}
-              onChange={(val: any) => onChange(val)}
-            />
-          )}
-          name="name"
-          rules={{
-            required: t(
-              'VALIDATION_ERROR_REQUIRED',
-              'The field Customer Name is required',
-            ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-            pattern: {
-              value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-              message: t(
-                'INVALID_ERROR',
-                'Invalid name',
-              ).replace('_attribute_', t('NAME', 'Name')),
-            }
-          }}
-          defaultValue=""
-        />
-
-        {orientationState?.orientation === LANDSCAPE && submitButton}
-      </Container>
+        <Container>
+          <NavBar
+                title={t('YOUR_NAME', 'Your name')}
+                onActionLeft={goToBack}
+                btnStyle={{paddingLeft: 0}}
+          />
+          <View style={{ 
+            marginVertical: orientationState?.dimensions?.height * 0.08,
+            paddingLeft: orientationState?.dimensions?.width * 0.25
+          }}>
+              <OText
+                size={orientationState?.dimensions?.width * 0.05}
+                style={{bottom: 20}}
+              >
+                {t('WHATS_YOUR_NAME', "What's your name?")}
+                {/* <OText
+                  size={orientationState?.dimensions?.width * 0.05}
+                  weight={'700'}
+                >
+                  {`${t('ORDER_BE_FOR', 'order be for?')}`}
+                </OText> */}
+              </OText>
+              <Controller
+                control={control}
+                render={({ onChange, value }: any) => (
+                  <OInput
+                    placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+                    style={{
+                      ...styles.inputStyle,
+                      width: orientationState?.orientation === PORTRAIT
+                        ? orientationState?.dimensions.width - 40
+                        : orientationState?.dimensions.width * 0.5,
+                    }}
+                    value={value}
+                    autoCapitalize="words"
+                    autoCorrect={false}
+                    onChange={(val: any) => onChange(val)}
+                    onSubmitEditing={handleSubmit(onSubmit)}
+                  />
+                )}
+                name="name"
+                rules={{
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'The field Customer Name is required',
+                  ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+                  pattern: {
+                    value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+                    message: t(
+                      'INVALID_ERROR',
+                      'Invalid name',
+                    ).replace('_attribute_', t('NAME', 'Name')),
+                  }
+                }}
+                defaultValue=""
+              />
 
-      {(orientationState?.orientation === PORTRAIT) && (
-        <OSActions>
-          {submitButton}
-        </OSActions>
-      )}
-    </>
+              {orientationState?.orientation === LANDSCAPE && submitButton}
+              {orientationState?.orientation === LANDSCAPE && skipButton}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {submitButton}
+                </OSActions>
+              )}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {skipButton}
+                </OSActions>
+              )}
+            </View>
+        </Container>
+      </>
   );
 };
 

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

@@ -27,7 +27,7 @@ import {
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
 import NavBar from '../../components/NavBar';
-import { OButton, OImage, OInput, OText } from '../../components/shared';
+import { OButton, OIconButton, OImage, OInput, OText } from '../../components/shared';
 import GridContainer from '../../layouts/GridContainer';
 import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
 import { verifyDecimals } from '../../../../../src/utils'
@@ -35,6 +35,7 @@ import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/ho
 import { useTheme } from 'styled-components/native'
 import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import EvilIcons from 'react-native-vector-icons/EvilIcons'
 const _EMAIL = 'email';
 const _SMS = 'sms';
 
@@ -335,7 +336,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OSInputWrapper>
 
       <OButton
-        text={`${t('YOU_ARE_DONE', 'You are done')}!`}
+        text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
           navigation.reset({
             routes: [{ name: 'Intro' }],
@@ -493,18 +494,46 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         <>
           <Container>
             <NavBar
-              title={t('TAKE_YOUR_RECEIPT', 'Take your receipt')}
+              title={t('BACK_BUTTON_CONFIRMATION', 'Confirmation')}
               style={{ right: 10 }}
+              rightComponent={
+                <OIconButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  RenderIcon={() => 
+                      <EvilIcons
+                        name={'close'}
+                        size={40}
+                        color={theme.colors.primary}
+                      />
+                  }
+                  style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+                  onClick={() => {
+                    navigation.reset({
+                      routes: [{ name: 'Intro' }],
+                    });
+                  }}
+                />
+              }
             />
 
             <View style={{
               marginVertical: orientationState?.dimensions?.height * 0.03,
               flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row',
             }}>
+              <View
+                style={{
+                  flex: 1,
+                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
+                }}
+              >
+                {orderDetailsContent}
+              </View>
               <View style={{
-                flex: 1,
+                flex: 1.1,
                 marginRight: orientationState?.orientation === PORTRAIT ? 0 : 20,
-                justifyContent: 'space-between'
+                justifyContent: 'space-between',
+                marginLeft: 20
               }}>
                 <View>
                   <OText
@@ -523,22 +552,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText
                     size={orientationState?.dimensions?.width * (orientationState?.orientation === PORTRAIT ? 0.04 : 0.025)}
                   >
-                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', 'To finish take your receipt and go to the front counter.')}
+                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', "We`ve received your order and we will call you by your name or your order number.")}
                   </OText>
 
                 </View>
 
                 {orientationState?.orientation === LANDSCAPE && actionsContent}
               </View>
-
-              <View
-                style={{
-                  flex: 1.4,
-                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
-                }}
-              >
-                {orderDetailsContent}
-              </View>
             </View>
           </Container>
 

package/themes/single-business/index.tsx

@@ -1,31 +1,76 @@
-import { AddressForm } from './src/components/AddressForm';
-import { AddressDetails } from './src/components/AddressDetails';
-import { Home } from './src/components/Home';
-import { LoginForm } from './src/components/LoginForm';
-import { SignupForm } from './src/components/SignupForm';
 import { ActiveOrders } from './src/components/ActiveOrders';
+import { AddressDetails } from './src/components/AddressDetails';
+import { AddressForm } from './src/components/AddressForm';
 import { AddressList } from './src/components/AddressList';
 import { AppleLogin } from './src/components/AppleLogin';
+import BottomWrapper from './src/components/BottomWrapper';
+import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
+import { BusinessController } from './src/components/BusinessController';
 import { BusinessesListing } from './src/components/BusinessesListing';
+import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
+import { BusinessInformation } from './src/components/BusinessInformation';
+import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
+import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
+import { BusinessProductsList } from './src/components/BusinessProductsList';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
+import { BusinessReviews } from './src/components/BusinessReviews';
+import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
+import { Cart } from './src/components/Cart';
 import { CartContent } from './src/components/CartContent';
 import { Checkout } from './src/components/Checkout';
+import { CouponControl } from './src/components/CouponControl';
+import { DriverTips } from './src/components/DriverTips';
+import { FacebookLogin } from './src/components/FacebookLogin';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
+import { GoogleLogin } from './src/components/GoogleLogin';
+import { GoogleMap } from './src/components/GoogleMap';
+import { GPSButton } from './src/components/GPSButton';
+import { Help } from './src/components/Help';
+import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
+import { HelpGuide } from './src/components/HelpGuide';
+import { HelpOrder } from './src/components/HelpOrder';
+import { Home } from './src/components/Home';
+import { LanguageSelector } from './src/components/LanguageSelector';
+import { LastOrder } from './src/components/LastOrder';
+import { LastOrders } from './src/components/LastOrders';
+import { LoginForm } from './src/components/LoginForm';
+import { LogoutButton } from './src/components/LogoutButton';
+import { Messages } from './src/components/Messages';
 import { MomentOption } from './src/components/MomentOption';
-import { OrdersOption } from './src/components/OrdersOption';
+import NavBar from './src/components/NavBar';
+import { NotFoundSource } from './src/components/NotFoundSource';
+import Notifications from './src/components/Notifications';
 import { OrderDetails } from './src/components/OrderDetails';
-import { UserProfileForm } from './src/components/UserProfileForm';
+import { OrdersOption } from './src/components/OrdersOption';
+import { OrderSummary } from './src/components/OrderSummary';
+import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { PaymentOptions } from './src/components/PaymentOptions';
+import { PaymentOptionStripe } from './src/components/PaymentOptionStripe';
+import { PhoneInputNumber } from './src/components/PhoneInputNumber';
+import { PreviousOrders } from './src/components/PreviousOrders';
+import { ProductForm } from './src/components/ProductForm';
+import { ProductIngredient } from './src/components/ProductIngredient';
+import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ProductOption } from './src/components/ProductOption';
+import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
 import { ReviewOrder } from './src/components/ReviewOrder';
+import { SearchBar } from './src/components/SearchBar';
+import { SignupForm } from './src/components/SignupForm';
+import { SingleProductCard } from './src/components/SingleProductCard';
+import { StripeCardForm } from './src/components/StripeCardForm';
+import { StripeCardsList } from './src/components/StripeCardsList';
+import { StripeElementsForm } from './src/components/StripeElementsForm';
+import { StripeRedirectForm } from './src/components/StripeRedirectForm';
+import TagSelector from './src/components/TagSelector';
+import { UpsellingProducts } from './src/components/UpsellingProducts';
+import { UserDetails } from './src/components/UserDetails';
+import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfile } from './src/components/UserProfile';
-import { NotFoundSource } from './src/components/NotFoundSource';
-import { Help } from './src/components/Help';
-import { HelpOrder } from './src/components/HelpOrder';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import Notifications from './src/components/Notifications';
+import { UserProfileForm } from './src/components/UserProfileForm';
+import { VerifyPhone } from './src/components/VerifyPhone';
 
-import { Toast } from './src/components/shared/OToast';
 import {
 	OText,
 	OButton,
@@ -40,6 +85,7 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
+  Toast
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -78,6 +124,52 @@ export {
 	HelpAccountAndPayment,
 	OrderTypeSelector,
 	Notifications,
+  BottomWrapper,
+  BusinessBasicInformation,
+  BusinessController,
+  BusinessFeaturedController,
+  BusinessInformation,
+  BusinessItemAccordion,
+  BusinessProductsCategories,
+  BusinessProductsList,
+  BusinessReviews,
+  BusinessTypeFilter,
+  Cart,
+  CouponControl,
+  DriverTips,
+  FacebookLogin,
+  FloatingButton,
+  GoogleLogin,
+  GoogleMap,
+  GPSButton,
+  LanguageSelector,
+  LastOrder,
+  LastOrders,
+  LogoutButton,
+  Messages,
+  NavBar,
+  OrderSummary,
+  PaymentOptionCash,
+  PaymentOptions,
+  PaymentOptionStripe,
+  PhoneInputNumber,
+  PreviousOrders,
+  ProductForm,
+  ProductIngredient,
+  ProductItemAccordion,
+  ProductOption,
+  ProductOptionSubOption,
+  SearchBar,
+  SingleProductCard,
+  StripeCardForm,
+  StripeCardsList,
+  StripeElementsForm,
+  StripeRedirectForm,
+  TagSelector,
+  UpsellingProducts,
+  UserDetails,
+  UserFormDetailsUI,
+  VerifyPhone,
 
 	// OComponents
 	Toast,
@@ -104,4 +196,4 @@ export {
 	_setStoreData,
 	_removeStoreData,
 	_clearStoreData
-}
+}

package/themes/single-business/src/components/BusinessBasicInformation/index.tsx

@@ -55,6 +55,11 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+  const onNavigationRedirect = (page: string, params: any) => {
+    if (!page) return
+    navigation.navigate(page, params);
+  }
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader
@@ -150,7 +155,12 @@ export const BusinessBasicInformation = (
 								{business?.name}
 							</OText>
 							{!isBusinessInfoShow && (
-								<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+								<WrapBusinessInfo
+                  onPress={() => onNavigationRedirect(
+                    'BusinessInformation',
+                    { businessState, business }
+                  )}
+                >
 									<OIcon src={theme.images.general.info} width={16} color={theme.colors.textSecondary} />
 								</WrapBusinessInfo>
 							)}
@@ -227,7 +237,7 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
+			{/* <OModal
 				titleSectionStyle={styles.modalTitleSectionStyle}
 				open={openBusinessInformation}
 				onClose={() => setOpenBusinessInformation(false)}
@@ -236,7 +246,7 @@ export const BusinessBasicInformation = (
 					businessState={businessState}
 					business={business}
 				/>
-			</OModal>
+			</OModal> */}
 			<OModal
 				entireModal
 				titleSectionStyle={styles.modalTitleSectionStyle}

package/themes/single-business/src/components/BusinessBasicInformation/styles.tsx

@@ -62,4 +62,4 @@ export const DropOptionButton = styled.TouchableOpacity`
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
-`
+`

package/themes/single-business/src/components/BusinessInformation/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
+import { SliderBox } from 'react-native-image-slider-box';
+import { OIcon, OText, OModal } from '../shared';
 import {
 	BusinessInformationContainer,
 	WrapMainContent,
@@ -16,17 +17,21 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
+import NavBar from '../../../../../src/components/NavBar'
 
 const BusinessInformationUI = (props: BusinessInformationParams) => {
-	const { businessState, businessSchedule, businessLocation } = props;
+	const { businessState, business, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
+
+  const [openImages, setOpenImages] = useState(false)
+
 	const daysOfWeek = [
 		t('SUNDAY_ABBREVIATION', 'Sun'),
 		t('MONDAY_ABBREVIATION', 'Mon'),
@@ -69,7 +74,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return vAry;
 	};
 	const bImages: any = () => {
-		const len = businessState?.business?.gallery?.length | 0;
+		const len = businessState?.business?.gallery?.length ?? 0;
 		if (len == 0) return [];
 		const iAry = businessState?.business?.gallery.filter(
 			({ type, video }: any) => type == 1 && video == null,
@@ -79,6 +84,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 
 	return (
 		<BusinessInformationContainer>
+      <NavBar
+        style={{ paddingBottom: 0 }}
+        onActionLeft={() => props.navigation?.canGoBack() && props.navigation.goBack()}
+      />
 			<WrapMainContent contentContainerStyle={{}}>
 				<InnerContent>
 					<OText size={24} weight={Platform.OS === 'ios' ? '600' : 'bold'}>
@@ -89,7 +98,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('BUSINESS_LOCATION', 'Business Location')}
 						</OText>
 					</GrayBackground>
-					{businessLocation.location && (
+					{!!businessLocation.location && (
 						<WrapBusinessMap style={styles.wrapMapStyle}>
 							<GoogleMap
 								readOnly
@@ -107,7 +116,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('OPENING_TIME', 'Opening Time')}
 						</OText>
 					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
+					{!!businessSchedule && businessSchedule?.length > 0 && (
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
@@ -164,19 +173,41 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										{t('IMAGES', 'Images')}
 									</OText>
 								</GrayBackground>
+
 								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-										</View>
-									))}
+									{bImages().map((i: any) => ( i.file != null && (
+                    <View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+                      <TouchableOpacity  onPress={() => setOpenImages(true)}>
+                        <OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+                      </TouchableOpacity>
+                    </View>
+                  )))}
 								</MediaWrapper>
 							</>
 						)}
 					</>
 				</InnerContent>
 			</WrapMainContent>
+      <OModal
+				titleSectionStyle={styles.modalTitleSectionStyle}
+				open={openImages}
+				onClose={() => setOpenImages(false)}
+				isNotDecoration
+      >
+        <View style={{ height: '100%', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
+          <View style={{ marginTop: 20, height: 200}}>
+            <SliderBox
+              // circleLoop
+              sliderBoxHeight={200}
+              images={bImages().map((image: any) => optimizeImage(image?.file, 'h_300,c_limit'))}
+              dotColor={theme.colors.primary}
+              inactiveDotColor={theme.colors.backgroundGray}
+              dotStyle={styles.dotStyle}
+              activeOpacity={1}
+            />
+          </View>
+        </View>
+			</OModal>
 		</BusinessInformationContainer>
 	);
 };
@@ -187,6 +218,21 @@ const styles = StyleSheet.create({
 		marginTop: 15,
 		marginBottom: 10,
 	},
+  dotStyle: {
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    padding: 0,
+    margin: 0
+  },
+  modalTitleSectionStyle: {
+		position: 'absolute',
+		width: '100%',
+		top: 0,
+		zIndex: 100,
+		left: 40
+	},
 });
 
 export const BusinessInformation = (props: BusinessInformationParams) => {

package/themes/single-business/src/components/BusinessInformation/styles.tsx

@@ -8,7 +8,7 @@ export const GrayBackground = styled.View`
   margin-top: 27px;
 `
 export const WrapMainContent = styled.ScrollView`
-  margin-top: 40px;
+  /* margin-top: 40px; */
 `
 export const MediaWrapper = styled.ScrollView`
   margin-top: 16px;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

package/themes/single-business/src/components/Checkout/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -22,6 +22,10 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
+import { FloatingButton } from '../FloatingButton';
+import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar';
+import { OrderSummary } from '../OrderSummary';
 
 import {
 	ChContainer,
@@ -36,12 +40,7 @@ import {
 	ChUserDetails,
 	ChCart
 } from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
-import { FloatingButton } from '../FloatingButton';
-import { Container } from '../../layouts/Container';
-import NavBar from '../NavBar';
-import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
 
 const mapConfigs = {

package/themes/single-business/src/components/DriverTips/index.tsx

@@ -84,6 +84,7 @@ const DriverTipsUI = (props: any) => {
 							<TouchableOpacity
 								key={i}
 								onPress={() => handleChangeOpt(option)}
+                disabled={loading}
 							>
 								<DTCard
 									style={style.circle}

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -13,21 +13,22 @@ export const DTWrapperTips = styled.View`
   display: flex;
   flex-direction: row;
   width: 100%;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
 `
 
 export const DTCard = styled.View`
+  display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
+  padding: 15px;
+  border: 1px solid ${(props: any) => props.theme.colors.whiteGray};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
+  min-height: 60px;
+  min-width: 60px;
+  margin-right: 10px;
+  margin-top: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};
@@ -45,11 +46,11 @@ export const DTForm = styled.View`
 export const DTLabel = styled.Text`
   font-size: 10px;
   align-self: flex-start;
-  color: ${(props: any) => props.theme.colors.textSecondary}
+  color: ${(props: any) => props.theme.colors.textSecondary};
   ${(props: any) => props.theme?.rtl && css`
     margin-left: 20px;
     margin-right: 0;
-  `}
+  `};
   margin-top: 5px;
   margin-bottom: 17px;
 `

package/themes/single-business/src/components/PaymentOptions/index.tsx

@@ -134,7 +134,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,19 +151,21 @@ const PaymentOptionsUI = (props: any) => {
 	return (
 		<PMContainer>
 			{paymethodsList.paymethods.length > 0 && (
-				<PMDropDownWrapper onPress={() => setShowMethods(true)}>
-					<OText color={theme.colors.textSecondary} style={{marginStart: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
-					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
-					{isShowMethods && <PMDropDownCont>
-						{
-							pmData.map((item: any, idx: number) => 
-							<React.Fragment key={idx}>
-								{renderPaymethods({item})}
-							</React.Fragment>	
-							)
-						}
-					</PMDropDownCont>}
-				</PMDropDownWrapper>
+        <View style={{ flexDirection: 'column' }}>
+          <PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+            <OText color={theme.colors.textSecondary} style={{marginLeft: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
+            <OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
+          </PMDropDownWrapper>
+          {isShowMethods && (
+            <PMDropDownCont>
+              {pmData.map((item: any, idx: number) =>
+                <TouchableOpacity key={idx} onPress={() => console.log('asdasdasda')}>
+                  {renderPaymethods({item})}
+                </TouchableOpacity>
+              )}
+            </PMDropDownCont>
+          )}
+        </View>
 			)}
 
 			{(paymethodsList.loading || isLoading) && (

package/themes/single-business/src/components/PaymentOptions/styles.tsx

@@ -66,11 +66,9 @@ export const PMDropDownWrapper = styled.TouchableOpacity`
 `;
 
 export const PMDropDownCont = styled.View`
-  background-color: white;
-  border-radius: 7.6px;
-  position: absolute;
-  top: 44px;
+  border-radius: 8px;
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px 0 0;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  z-index: 99999;
+`;

package/themes/single-business/src/components/shared/index.tsx

@@ -1,16 +1,17 @@
-import OText from './OText'
+import OAlert from './OAlert'
+import OBottomPopup from './OBottomPopup'
 import OButton from './OButton'
-import OInput from './OInput'
 import ODropDown from './ODropDown'
 import OIcon from './OIcon'
-import OIconText from './OIconText'
 import OIconButton from './OIconButton'
-import OTextarea from './OTextarea'
-import OToggle from './OToggle'
+import OIconText from './OIconText'
+import OInput from './OInput'
 import OKeyButton from './OKeyButton'
 import OModal from './OModal'
-import OAlert from './OAlert'
-import OBottomPopup from './OBottomPopup'
+import OText from './OText'
+import OTextarea from './OTextarea'
+import { Toast } from './OToast'
+import OToggle from './OToggle'
 
 export {
 	OText,
@@ -24,6 +25,7 @@ export {
 	OToggle,
 	OKeyButton,
 	OAlert,
-  	OModal,
+  OModal,
 	OBottomPopup,
+  Toast
 }