ordering-ui-react-native 0.8.3 → 0.8.7

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

@@ -87,16 +87,13 @@ const StoresListUI = (props: BusinessesListingParams) => {
 
   const styles = StyleSheet.create({
     container: {
-      padding: Platform.OS === 'ios' && orientation === 'Portrait' ? 0 : 20,
       paddingBottom: 20,
-      paddingHorizontal: 20,
       marginBottom: 0,
       flex: 1,
     },
     header: {
       flexDirection: 'row',
       justifyContent: 'space-between',
-      marginBottom: 25,
     },
     sectionTitle: {
       fontStyle: 'normal',
@@ -115,7 +112,7 @@ const StoresListUI = (props: BusinessesListingParams) => {
   });
 
   return (
-    <ScrollView style={styles.container} onScroll={(e: any) => handleScroll(e)}>
+    <>
       <View style={styles.header}>
         <OText style={styles.sectionTitle}>{t('STORES', 'Stores')}</OText>
 
@@ -131,53 +128,58 @@ const StoresListUI = (props: BusinessesListingParams) => {
           />
         </View>
       </View>
-
-      {!loading && businesses?.length === 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={theme.images.general.notFound}
-          conditioned={false}
-        />
-      )}
-
-      {!error &&
-        businesses?.map((business: any) => (
-          <BusinessController
-            key={business?.id}
-            business={business}
-            handleCustomClick={handleBusinessClick}
-            orderType={orderState?.options?.type}
-            isBusinessOpen={business?.open}
-            setIsUpdateStore={setIsUpdateStore}
-            isUpdateStore={isUpdateStore}
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        style={styles.container}
+        onScroll={(e: any) => handleScroll(e)}>
+        {!loading && businesses?.length === 0 && (
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={theme.images.general.notFound}
+            conditioned={false}
           />
-        ))}
-
-      {loadBusinesses && (
-        <View>
-          {[...Array(6)].map((item, i) => (
-            <Placeholder key={i} Animation={Fade}>
-              <View style={{ flex: 1, flexDirection: 'row', marginBottom: 10 }}>
-                <PlaceholderLine
-                  width={orientation === 'Portrait' ? 22 : 11}
-                  height={74}
-                  style={{
-                    marginRight: 20,
-                    marginBottom: 20,
-                    borderRadius: 7.6,
-                  }}
-                />
-                <Placeholder>
-                  <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                  <PlaceholderLine width={50} />
-                  <PlaceholderLine width={20} />
-                </Placeholder>
-              </View>
-            </Placeholder>
+        )}
+
+        {!error &&
+          businesses?.map((business: any) => (
+            <BusinessController
+              key={business?.id}
+              business={business}
+              handleCustomClick={handleBusinessClick}
+              orderType={orderState?.options?.type}
+              isBusinessOpen={business?.open}
+              setIsUpdateStore={setIsUpdateStore}
+              isUpdateStore={isUpdateStore}
+            />
           ))}
-        </View>
-      )}
-    </ScrollView>
+
+        {loadBusinesses && (
+          <View>
+            {[...Array(6)].map((item, i) => (
+              <Placeholder key={i} Animation={Fade}>
+                <View
+                  style={{ flex: 1, flexDirection: 'row', marginBottom: 10 }}>
+                  <PlaceholderLine
+                    width={orientation === 'Portrait' ? 22 : 11}
+                    height={74}
+                    style={{
+                      marginRight: 20,
+                      marginBottom: 20,
+                      borderRadius: 7.6,
+                    }}
+                  />
+                  <Placeholder>
+                    <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                    <PlaceholderLine width={50} />
+                    <PlaceholderLine width={20} />
+                  </Placeholder>
+                </View>
+              </Placeholder>
+            ))}
+          </View>
+        )}
+      </ScrollView>
+    </>
   );
 };
 

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

@@ -211,7 +211,6 @@ export const UserFormDetailsUI = (props: any) => {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
-      paddingHorizontal: 16,
     },
     errorText: {
       color: theme.colors.error,
@@ -229,6 +228,8 @@ export const UserFormDetailsUI = (props: any) => {
       borderTopWidth: 0,
       borderRightWidth: 0,
       borderLeftWidth: 0,
+      paddingHorizontal: 0,
+      borderRadius: 0,
     },
     editButton: {
       height: 44,

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -45,6 +45,7 @@ const ProfileUI = (props: ProfileParams) => {
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
     userState,
+    isAvailableLoading,
   } = props;
 
   const [{ user }] = useSession();
@@ -136,24 +137,11 @@ const ProfileUI = (props: ProfileParams) => {
   }, [user?.country_phone_code]);
 
   const styles = StyleSheet.create({
-    header: {
-      marginBottom: 25,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    title: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      fontSize: 26,
-      color: theme.colors.textGray,
-    },
     label: {
       color: theme.colors.textGray,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
-      paddingHorizontal: 16,
     },
     inputStyle: {
       marginBottom: 25,
@@ -162,6 +150,8 @@ const ProfileUI = (props: ProfileParams) => {
       borderTopWidth: 0,
       borderRightWidth: 0,
       borderLeftWidth: 0,
+      paddingHorizontal: 0,
+      borderRadius: 0,
     },
     editButton: {
       height: 44,
@@ -182,10 +172,6 @@ const ProfileUI = (props: ProfileParams) => {
 
   return (
     <>
-      <View style={styles.header}>
-        <OText style={styles.title}>{t('PROFILE', 'Profile')}</OText>
-      </View>
-
       {(formState?.loading || state?.loading) && (
         <View
           style={{
@@ -259,7 +245,7 @@ const ProfileUI = (props: ProfileParams) => {
       )}
 
       {!formState?.loading && !state?.loading && (
-        <>
+        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
           <CenterView>
             <OIcon
               url={optimizeImage(user?.photo, 'h_300,c_limit')}
@@ -279,15 +265,17 @@ const ProfileUI = (props: ProfileParams) => {
           </CenterView>
 
           {user?.level === 4 && (
-            <UDWrapper>
-              <EnabledStatusDriver>
-                <OText style={{ ...styles.label, paddingHorizontal: 0 }}>
-                  {t(
-                    'AVAILABLE_TO_RECEIVE_ORDERS',
-                    'Available to receive orders',
-                  )}
-                </OText>
+            <EnabledStatusDriver>
+              <OText style={{ ...styles.label, paddingHorizontal: 0 }}>
+                {t(
+                  'AVAILABLE_TO_RECEIVE_ORDERS',
+                  'Available to receive orders',
+                )}
+              </OText>
 
+              {isAvailableLoading ? (
+                <ActivityIndicator size="small" color={theme.colors.primary} />
+              ) : (
                 <ToggleSwitch
                   isOn={userState?.result?.result?.available}
                   onColor={theme.colors.primary}
@@ -302,8 +290,8 @@ const ProfileUI = (props: ProfileParams) => {
                   disabled={userState?.loading}
                   animationSpeed={200}
                 />
-              </EnabledStatusDriver>
-            </UDWrapper>
+              )}
+            </EnabledStatusDriver>
           )}
 
           {!isEdit ? (
@@ -396,7 +384,7 @@ const ProfileUI = (props: ProfileParams) => {
 
             <LogoutButton />
           </Actions>
-        </>
+        </ScrollView>
       )}
     </>
   );

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

@@ -24,7 +24,6 @@ export const EnabledStatusDriver = styled.View`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 20px;
 `;
 
 export const Actions = styled.View`
@@ -32,7 +31,6 @@ export const Actions = styled.View`
   border-top-width: 5px;
   border-top-color: ${(props: any) => props.theme.colors.inputChat};
   padding-vertical: 10px;
-  padding-horizontal: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

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

@@ -11,9 +11,10 @@ import OIcon from './OIcon';
 
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.backgroundLight};
-  border-radius: 25px;
+  border-radius: ${(props: any) => (props.border ? props.border : '25px')};
   border-width: 1px;
-  padding-horizontal: 16px;
+  padding-horizontal: ${(props: any) =>
+    props.paddingHorizontal ? props.paddingHorizontal : '16px'};
   height: 50px;
   flex-direction: row;
   align-items: center;

package/themes/business/src/hooks/useLocation.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import GeoLocation from '@react-native-community/geolocation';
+import GeoLocation from 'react-native-geolocation-service';
 import { Location } from '../types';
 
 export const useLocation = () => {
@@ -7,10 +7,12 @@ export const useLocation = () => {
   const [initialPosition, setInitialPosition] = useState<Location>({
     longitude: 0,
     latitude: 0,
+    speed: 0,
   });
   const [userLocation, setUserLocation] = useState<Location>({
     longitude: 0,
     latitude: 0,
+    speed: 0,
   });
   const [routeLines, setRoutesLines] = useState<Location[]>([]);
   const isMounted = useRef(true);
@@ -43,10 +45,11 @@ export const useLocation = () => {
           resolve({
             latitude: coords.latitude,
             longitude: coords.longitude,
+            speed: coords.speed,
           });
         },
         err => reject({ err }),
-        { enableHighAccuracy: true, timeout: 5000, maximumAge: 10000 },
+        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
       );
     });
   };
@@ -58,12 +61,13 @@ export const useLocation = () => {
         const location: Location = {
           latitude: coords.latitude,
           longitude: coords.longitude,
+          speed: coords.speed,
         };
         setUserLocation(location);
         setRoutesLines(routes => [...routes, location]);
       },
       err => console.log(err),
-      { enableHighAccuracy: true, distanceFilter: 20 },
+      { enableHighAccuracy: true, distanceFilter: 1 },
     );
   };
 

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

@@ -1,6 +1,49 @@
+import React, { useState } from 'react';
+import {
+  Dimensions,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import styled from 'styled-components/native';
 
 export const SafeAreaContainer = styled.SafeAreaView`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
+
+export const SafeAreaContainerLayout = (props: any) => {
+  const [orientation, setOrientation] = useState(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
+  return (
+    <>
+      <SafeAreaContainer>
+        <View
+          style={{
+            paddingHorizontal: 20,
+            paddingTop: 20,
+            paddingBottom: 0,
+            flex: 1,
+          }}>
+          <StatusBar
+            barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
+          />
+          {props.children}
+        </View>
+      </SafeAreaContainer>
+    </>
+  );
+};

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

@@ -28,6 +28,7 @@ export interface ProfileParams {
   toggleIsEdit?: any;
   cleanFormState?: any;
   setFormState?: any;
+  isAvailableLoading?: boolean;
   handleChangeInput?: any;
   handleButtonUpdateClick?: any;
   handleToggleAvalaibleStatusDriver?: any;
@@ -329,6 +330,8 @@ export interface OrderDetailsParams {
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
   appTitle?: textTranslate;
+  drivers?: any;
+  loadingDriver?: boolean;
   navigation?: any;
   messagesReadList?: any;
   urlToShare?: string;
@@ -343,6 +346,9 @@ export interface OrderDetailsParams {
   isFromCheckout?: boolean;
   driverLocation?: any;
   goToBusinessList?: boolean;
+  permissions?: any;
+  askLocationPermission?: any;
+  redirectToSettings?: any;
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -458,6 +464,7 @@ export interface UpsellingProductsParams {
 export interface Location {
   latitude: number;
   longitude: number;
+  speed: number;
 }
 
 export interface GoogleMapsParams {
@@ -470,6 +477,7 @@ export interface GoogleMapsParams {
   markerTitle?: string;
   showAcceptOrReject?: boolean;
   order?: any;
+  driverLocation?: any;
   saveLocation?: boolean;
   handleOpenMapView?: () => void;
   isBusinessMarker?: boolean;

package/themes/doordash/index.tsx

@@ -6,10 +6,6 @@ import { BusinessProductsList } from "./src/components/BusinessProductsList";
 import { CartContent } from "./src/components/CartContent";
 import { Checkout } from "./src/components/Checkout";
 import { ForgotPasswordForm } from "./src/components/ForgotPasswordForm";
-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 { LoginForm } from "./src/components/LoginForm";
 import { MomentOption } from "./src/components/MomentOption";
 import { OrdersOption } from "./src/components/OrdersOption";
@@ -19,6 +15,10 @@ import { ReviewOrder } from "./src/components/ReviewOrder";
 import { SignupForm } from "./src/components/SignupForm";
 import { BusinessProductsListing } from "./src/components/BusinessProductsListing";
 import { NotFoundSource } from "./src/components/NotFoundSource";
+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 {
 	OAlert,

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

@@ -265,10 +265,7 @@ const LoginFormUI = (props: LoginParams) => {
 					</LoginWith>
 				)}
 				{/* Social login button group */}
-				{configs && Object.keys(configs).length > 0 && (
-					(configs?.facebook_login?.value === 'true' ||
-						configs?.facebook_login?.value === '1') &&
-					configs?.facebook_id?.value &&
+				{configs && Object.keys(configs).length > 0 && 
 					(
 						<>
 							<ButtonsWrapper>
@@ -309,7 +306,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<View style={{ height: 1, backgroundColor: theme.colors.border, width: width }} />
 						</>
 					)
-				)}
+				}
 
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>

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

@@ -80,7 +80,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				<OText numberOfLines={1} ellipsizeMode='tail' style={{ ...styles.textStyle, ...theme.labels.middle } as TextStyle}>{product?.name}</OText>
 				<OText color={theme.colors.textSecondary} numberOfLines={2} ellipsizeMode='tail' style={{ ...styles.textStyle, ...theme.labels.normal } as TextStyle}>{product?.description}</OText>
 				<OText color={theme.colors.textThird} style={theme.labels.normal as TextStyle}>{parsePrice(product?.price)}</OText>
-				<OText color={theme.colors.textThird} style={theme.labels.normal as TextStyle}>{JSON.stringify(product?.rank)}</OText>
+				{/* <OText color={theme.colors.textThird} style={theme.labels.normal as TextStyle}>{JSON.stringify(product?.rank)}</OText> */}
 			</CardInfo>
 			<ImageBackground source={{ uri: optimizeImage(product?.images, 'h_200,c_limit') }} style={{ width: 115, height: 115, borderRadius: 7.6, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, overflow: 'hidden' }} />
 

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

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { ImageSourcePropType, ImageStyle, Platform, StyleSheet } from 'react-native';
 import Share from 'react-native-share';
 import { OIcon } from '../shared';
 import { FavItem, FavMenu } from './styles';
 import { useTheme } from 'styled-components/native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { ToastType, useToast } from 'ordering-components/native';
 
 interface SSFTypes {
 	icon?: ImageSourcePropType,
@@ -27,6 +28,7 @@ const SocialShareFav = (props: SSFTypes) => {
 	const { icon, style, mode, data } = props;
 
 	const theme = useTheme();
+	const [, { showToast }] = useToast();
 
 	const SApps: Array<any> = [
 		{
@@ -74,24 +76,51 @@ const SocialShareFav = (props: SSFTypes) => {
 	];
 
 	const [showMenu, setShowMenu] = useState(false);
+	const [result, setResult] = useState<{success: boolean, message: string}>({success: true, message: ''});
+
+	const getErrorString = (error: any, defaultValue?: any) => {
+    let e = defaultValue || 'Something went wrong. Please try again';
+    if (typeof error === 'string') {
+      e = error;
+    } else if (error && error.message) {
+      e = error.message;
+    } else if (error && error.props) {
+      e = error.props;
+    }
+    return e;
+  }
 
 	const onShare = async (social: any) => {
 		const options = {
 			title: 'Share via',
-			message: 'some message',
-			url: 'some share url',
+			message: 'Awesome Restaurant!, Please enjoy your meal ;)',
+			url: 'https://www.ordering.co',
 			social: social,
-			whatsAppNumber: "9199999999",  // country code + phone number
+			whatsAppNumber: "8615640383320",  // country code + phone number
 			// filename: 'test' , // only for base64 file in Android
 		}
 		setShowMenu(false);
-		const shareResult = await Share.shareSingle(options);
+		try {
+      const shareResult = await Share.shareSingle(options);
+      setResult({success: shareResult.success, message: shareResult.message});
+    } catch (error) {
+      setResult({success: false, message: 'error: '.concat(getErrorString(error, `Wrong ${social} configuration!`))});
+    }
 	}
 
 	const onOpenMenu = () => {
 		setShowMenu(!showMenu);
 	}
 
+	useEffect(() => {
+		if (result.message.length < 3) return;
+		if (result.success) {
+			showToast(ToastType.Success, result.message);
+		} else {
+			showToast(ToastType.Error, result.message);
+		}
+	}, [result])
+
 	return (
 		<>
 		<FavItem onPress={onOpenMenu}>

package/themes/doordash/src/components/shared/OModal.tsx

@@ -52,17 +52,12 @@ const OModal = (props: Props): React.ReactElement => {
 
   return (
     <Modal
-      // animationType="slide"
-      // transparent={isTransparent}
-      // visible={open}
-      // presentationStyle={transition || 'fullScreen'}
-      // onRequestClose={() => { onClose() }}
       avoidKeyboard={false}
       isVisible={open}
       coverScreen={overScreen ? overScreen : false}
       style={{ height: '100%', flex: 1, position: 'absolute', backgroundColor: '#F8F9FA', margin: 0, marginTop: top, marginBottom: bottom, paddingBottom: bottom, ...style, zIndex: 10000 }}
     >
-      <View style={styles.container}>
+      <View style={{...styles.container, paddingBottom: top}}>
         {!entireModal ? (
           <View style={styles.centeredView}>
             <View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>