ordering-ui-react-native 0.12.54 → 0.12.58

package/themes/franchises/src/components/FloatingButton/styles.tsx

@@ -1,26 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const Container = styled.View`
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  padding: 12px 40px;
-  flex-direction: row;
-  border-top-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  width: 100%;
-  justify-content: space-between;
-  background-color: #FFF;
-  z-index: 1000;
-  justify-content: space-between;
-`
-
-export const Button = styled.TouchableOpacity`
-  justify-content: center;
-  align-items: center;
-  border-radius: 7.6px;
-  height: 44px;
-  max-height; 44px;
-  padding-horizontal: 20px;
-`

package/themes/franchises/src/components/ForgotPasswordForm/index.tsx

@@ -1,156 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-
-import {
-	ForgotPasswordForm as ForgotPasswordController,
-	useLanguage,
-	useToast,
-	ToastType,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import NavBar from '../NavBar';
-import { FormInput, FormSide } from '../LoginForm/styles'
-import { Container } from './styles'
-
-import { OButton, OInput, OText } from '../shared';
-
-const ForgotPasswordUI = (props: any) => {
-	const {
-		navigation,
-		formState,
-		handleButtonForgotPasswordClick,
-	} = props;
-	const [, t] = useLanguage();
-	const [, { showToast }] = useToast();
-	const { control, handleSubmit, errors } = useForm();
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputStyle: {
-			marginBottom: 25,
-			borderWidth: 1,
-			borderColor: theme.theme.colors.border,
-			minHeight: 40,
-			borderRadius: 7.6,
-		}
-	});
-
-	const [emailSent, setEmailSent] = useState(null);
-
-	const onSubmit = (values: any) => {
-		setEmailSent(values.email)
-		handleButtonForgotPasswordClick && handleButtonForgotPasswordClick(values)
-	}
-
-	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-	}
-
-	useEffect(() => {
-		if (!formState.loading && emailSent) {
-			if (formState.result?.error) {
-				setEmailSent(null)
-				formState.result?.result && showToast(
-					ToastType.Error,
-					formState.result?.result[0]
-				)
-				return
-			}
-			showToast(
-				ToastType.Success,
-				`${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
-			)
-		}
-	}, [formState])
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors)
-			let stringError = ''
-			list.map((item: any, i: number) => {
-				stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
-			})
-			showToast(ToastType.Error, stringError)
-		}
-	}, [errors])
-
-	return (
-		<Container>
-			<NavBar
-				title={t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
-				titleAlign={'auto'}
-				btnStyle={{ paddingLeft: 0 }}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				paddingTop={0}
-				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-				titleStyle={{ width: '100%', marginLeft: 0, paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0, paddingStart: 0, flex: 1 }}
-			/>
-			<FormSide>
-				<OText
-					color={'gray'}
-					size={16}
-					weight={'300'}
-					style={{ marginBottom: 30 }}
-				>
-					{t('FORGOT_PASSWORD_TEXT_MESSAGE', "Enter your email address and we'll sent a link to reset your password.")}
-				</OText>
-				<FormInput>
-					<Controller
-						control={control}
-						render={({ onChange, value }: any) => (
-							<OInput
-								placeholder={t('EMAIL', 'Email')}
-								style={styles.inputStyle}
-								icon={theme.images.general.email}
-								onChange={(e: any) => {
-									handleChangeInputEmail(e, onChange)
-								}}
-								value={value}
-								autoCapitalize='none'
-								autoCorrect={false}
-								type='email-address'
-								autoCompleteType='email'
-								returnKeyType='done'
-								blurOnSubmit
-								onSubmitEditing={handleSubmit(onSubmit)}
-							/>
-						)}
-						name="email"
-						rules={{
-							required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
-							pattern: {
-								value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-								message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-							}
-						}}
-						defaultValue=""
-					/>
-
-					<OButton
-						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-						textStyle={{ color: 'white' }}
-						bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-						borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-						isLoading={formState.loading}
-						imgRightSrc={null}
-						onClick={emailSent && !formState.result?.error ? () => { } : handleSubmit(onSubmit)}
-						style={{ borderRadius: 7.6, shadowOpacity: 0 }}
-					/>
-				</FormInput>
-			</FormSide>
-		</Container>
-	);
-};
-
-export const ForgotPasswordForm = (props: any) => {
-	const ForgotPasswordProps = {
-		...props,
-		UIComponent: ForgotPasswordUI
-	}
-	return <ForgotPasswordController {...ForgotPasswordProps} />
-}

package/themes/franchises/src/components/ForgotPasswordForm/styles.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Wrapper = styled.View`
-  background-color: white;
-  min-height: 200px;
-  padding: 0px 25px;
-`;
-
-export const Container = styled.View`
-  padding-bottom: 40px;
-`

package/themes/franchises/src/components/GPSButton/index.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Geolocation from '@react-native-community/geolocation'
-import Geocoder from 'react-native-geocoding'
-import { GpsButtonStyle } from './styles'
-import { View } from 'react-native'
-import { OText } from '../shared'
-import { ActivityIndicator } from 'react-native-paper'
-
-export const GPSButton = (props: any) => {
-  const {
-    handleGPS,
-		apiKey,
-    googleReady,
-    IconButton,
-    IconLoadingButton
-  } = props
-
-	const [isLoading, setLoading] = useState(false);
-
-	const geoCodePosition = (pos: { latitude: number, longitude: number }) => {
-    Geocoder.from({
-      latitude: pos.latitude,
-      longitude: pos.longitude
-    }).then(({ results }: any) => {
-      let zipcode = null
-      if (results && results.length > 0) {
-        for (const component of results[0].address_components) {
-          const addressType = component.types[0]
-          if (addressType === 'postal_code') {
-            zipcode = component.short_name
-            break
-          }
-        }
-        let data = null
-        const details = {
-          geometry: { location: { lat: pos.latitude, lng: pos.longitude } }
-        }
-        // if (isSetInputs) {
-          data = {
-            address: results[0]?.formatted_address,
-            location: results[0]?.geometry?.location,
-            zipcode,
-            place_id: results[0]?.place_id,
-          }
-					console.log(JSON.stringify(data));
-        // }
-        handleGPS && handleGPS(data, details)
-      } else {
-        // setMapErrors && setMapErrors('ERROR_NOT_FOUND_ADDRESS')
-      }
-			setLoading(false);
-    }).catch((err: any) => {
-      console.log(err);
-			setLoading(false);
-    })
-  }
-
-	const getCurrentPosition = () => {
-		setLoading(true);
-		Geolocation.getCurrentPosition((pos) => {
-			geoCodePosition(pos.coords);
-		}, (err) => {
-			setLoading(false);
-			console.log(err);
-		});
-	}
-
-	useEffect(() => {
-		Geocoder.init(apiKey);
-	}, [])
-
-  return (
-    <GpsButtonStyle
-      disabled={isLoading}
-      onPress={getCurrentPosition}
-    >
-      {isLoading ? (
-				IconLoadingButton ? IconLoadingButton : <ActivityIndicator size={'small'} />
-      ) : (
-        IconButton ? IconButton : <OText>{'GPS'}</OText>
-      )}
-    </GpsButtonStyle>
-  )
-}

package/themes/franchises/src/components/GPSButton/styles.ts

@@ -1,6 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const GpsButtonStyle = styled.TouchableOpacity`
-  width: 30px;
-	height: 30px;
-`

package/themes/franchises/src/components/GoogleLogin/index.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { useLanguage, useApi, useSession } from 'ordering-components/native';
-import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';
-import { Container, GoogleButton } from './styles';
-import { useTheme } from 'styled-components/native';
-import { OIcon } from '../shared';
-
-export const GoogleLogin = (props: any) => {
-  const {
-    handleErrors,
-    handleLoading,
-    handleSuccessGoogleLogin,
-    notificationState,
-  } = props
-
-  const [, t] = useLanguage()
-  const [ordering] = useApi()
-  const theme = useTheme()
-	const [{ auth }] = useSession();
-
-	const buttonText = auth
-		? t('LOGOUT_WITH_FACEBOOK', 'Logout with Google')
-		: t('CONTINUE_WITH_GOOGLE', 'Continue with Google');
-
-  const performGoogleLogin = async (accessToken: string) => {
-    try {
-      const body: any = {
-        access_token: accessToken
-      }
-      if (notificationState?.notification_token) {
-        body.notification_token = notificationState.notification_token
-        body.notification_app = notificationState.notification_app
-      }
-      const response: any = await fetch(`${ordering.root}/auth/google`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      })
-      if (!response.content.error) {
-        if (handleSuccessGoogleLogin) {
-          handleSuccessGoogleLogin(response.content.result)
-          handleLoading && handleLoading(false)
-        }
-      } else {
-        handleLoading && handleLoading(false)
-        onSignoutFromGoogle()
-      }
-    } catch (err: any) {
-      handleLoading && handleLoading(false)
-      handleErrors && handleErrors(err.message)
-    }
-  }
-
-  const onLoginWithGoogle = async () => {
-    try {
-			
-			await GoogleSignin.configure({
-				iosClientId: '733099999972-s1s5amppj9qlfi5t16oemqbfvetap2t5.apps.googleusercontent.com',
-				offlineAccess: false
-			})
-
-      await GoogleSignin.hasPlayServices();
-      const userInfo = await GoogleSignin.signIn();
-      if (userInfo.idToken) {
-        performGoogleLogin(userInfo.idToken);
-      }
-      // this.setState({ userInfo });
-    } catch (error: any) {
-      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
-        // user cancelled the login flow
-      } else if (error.code === statusCodes.IN_PROGRESS) {
-        // operation (e.g. sign in) is in progress already
-      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
-        // play services not available or outdated
-      } else {
-        // some other error happened
-      }
-    }
-  };
-
-  const onSignoutFromGoogle = async () => {
-    try {
-      await GoogleSignin.signOut();
-      // this.setState({ user: null }); // Remember to remove the user from your app's state as well
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  return (
-		<Container>
-			<GoogleButton
-				onPress={onLoginWithGoogle}
-			>
-				<View style={style.fbBtn}>
-					<OIcon
-						src={theme.images.general.google}
-						width={16}
-					/>
-				</View>
-				<Text style={style.textBtn}>
-					{buttonText}
-				</Text>
-			</GoogleButton>
-		</Container>
-
-  );
-}
-
-const style = StyleSheet.create({
-  fbBtn: {
-    position: 'absolute',
-    left: 0,
-    marginHorizontal: 10
-  },
-  textBtn: {
-    fontSize: 16,
-    color: '#000000',
-    marginLeft: 20
-  }
-})

package/themes/franchises/src/components/GoogleLogin/styles.tsx

@@ -1,23 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-	margin-vertical: 20px;
-`
-
-export const GoogleButton = styled.TouchableOpacity`
-  background-color: #FFFFFF;
-  border-radius: 7.6px;
-  padding: 15px 30px;
-  font-size: 14px;
-  font-weight: 400;
-  text-align: center;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: 52px;
-  border-color: black;
-  border-width: 1px;
-`

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

@@ -1,229 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
-import Geocoder from 'react-native-geocoding';
-import { useLanguage, useConfig } from 'ordering-components/native'
-import { GoogleMapsParams } from '../../types';
-import Alert from '../../../../../src/providers/AlertProvider'
-import { OIcon } from '../shared';
-
-export const GoogleMap = (props: GoogleMapsParams) => {
-
-  const {
-    location,
-    handleChangeAddressMap,
-    maxLimitLocation,
-    readOnly,
-    markerTitle,
-    saveLocation,
-    setSaveLocation,
-    handleToggleMap,
-    locations
-  } = props
-
-  const [, t] = useLanguage()
-  const [configState] = useConfig()
-  const { width, height } = Dimensions.get('window');
-  const ASPECT_RATIO = width / height;
-  const [markerPosition, setMarkerPosition] = useState({ latitude: locations ? locations[2].lat : location.lat, longitude: locations ? locations[2].lng : location.lng })
-  const [region, setRegion] = useState({
-    latitude: location.lat,
-    longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
-  })
-  let mapRef = useRef<any>(null)
-  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
-
-  const center = { lat: location?.lat, lng: location?.lng }
-  const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string>, key?: string | null }>({ open: false, content: [], key: null })
-  const mapErrors: any = {
-    ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
-    ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
-  }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
-    return {
-      latitude: location.lat,
-      longitude: location.lng
-    }
-  })
-  const geocodePosition = (pos: { latitude: number, longitude: number }) => {
-    Geocoder.from({
-      latitude: pos.latitude,
-      longitude: pos.longitude
-    }).then(({ results }) => {
-      let zipcode = null
-      if (results && results.length > 0) {
-        for (const component of results[0].address_components) {
-          const addressType = component.types[0]
-          if (addressType === 'postal_code') {
-            zipcode = component.short_name
-            break
-          }
-        }
-        const address = {
-          address: results[0]?.formatted_address,
-          location: results[0]?.geometry?.location,
-          zipcode,
-          place_id: results[0]?.place_id,
-        }
-        const details = {
-          geometry: { location: { lat: pos.latitude, lng: pos.longitude } }
-        }
-        handleChangeAddressMap && handleChangeAddressMap(address, details)
-        setSaveLocation && setSaveLocation(false)
-        handleToggleMap && handleToggleMap()
-      } else {
-        setMapErrors && setMapErrors('ERROR_NOT_FOUND_ADDRESS')
-      }
-    }).catch(err => {
-      setMapErrors && setMapErrors(err.message)
-    })
-  }
-
-  const validateResult = (curPos: { latitude: number, longitude: number }) => {
-    const loc1 = center
-    const loc2 = curPos
-    const distance = calculateDistance(loc1, loc2)
-
-    if (!maxLimitLocation) {
-      geocodePosition(curPos)
-      setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
-      return
-    }
-
-    if (distance <= maxLimitLocation) {
-      setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
-    } else {
-      setMapErrors && setMapErrors('ERROR_MAX_LIMIT_LOCATION')
-      setMarkerPosition({ latitude: center.lat, longitude: center.lng })
-    }
-  }
-
-  const calculateDistance = (pointA: { lat: number, lng: number }, pointB: { latitude: number, longitude: number }) => {
-
-    const lat1 = pointA.lat;
-    const lon1 = pointA.lng;
-
-    const lat2 = pointB.latitude;
-    const lon2 = pointB.longitude;
-
-    const R = 6371e3;
-    const φ1 = lat1 * (Math.PI / 180);
-    const φ2 = lat2 * (Math.PI / 180);
-    const Δφ = (lat2 - lat1) * (Math.PI / 180);
-    const Δλ = (lon2 - lon1) * (Math.PI / 180);
-
-    const a = (Math.sin(Δφ / 2) * Math.sin(Δφ / 2)) +
-      ((Math.cos(φ1) * Math.cos(φ2)) * (Math.sin(Δλ / 2) * Math.sin(Δλ / 2)));
-
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
-    const distance = R * c;
-    return distance;
-  }
-
-  const handleChangeRegion = (coordinates: Region) => {
-    validateResult(coordinates)
-  }
-
-  const closeAlert = () => {
-    setAlertState({
-      open: false,
-      content: []
-    })
-  }
-
-  const setMapErrors = (errKey: string) => {
-    setAlertState({
-      open: true,
-      content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION')
-        ? [t(errKey, mapErrors[errKey])]
-        : [`${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t('METTERS', 'meters')}`],
-      key: errKey
-    })
-  }
-
-  const fitAllMarkers = () => {
-    mapRef.current.fitToCoordinates(MARKERS, {
-      edgePadding: { top: 80, right: 80, bottom: 80, left: 80 },
-      animated: true,
-    });
-  }
-
-  useEffect(() => {
-    Geocoder.init(googleMapsApiKey)
-  }, [])
-
-
-  useEffect(() => {
-    if (saveLocation) {
-      geocodePosition(markerPosition)
-    }
-  }, [saveLocation])
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (mapRef.current && locations) {
-        fitAllMarkers()
-      }
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [locations])
-
-  return (
-    <>
-      <MapView
-        provider={Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}
-        initialRegion={region}
-        style={styles.map}
-        onRegionChangeComplete={!readOnly ? (coordinates) => handleChangeRegion(coordinates) : () => { }}
-        zoomTapEnabled
-        zoomEnabled
-        zoomControlEnabled
-        cacheEnabled
-        moveOnMarkerPress
-        ref={mapRef}
-      >
-        {locations ? (
-          <>
-            {MARKERS && MARKERS.map((location: { latitude: number, longitude: number }, i: number) => (
-              <React.Fragment key={i}>
-                {
-                  <Marker
-                    coordinate={location}
-                    title={locations[i]?.title}
-                  >
-                    <View>
-                      <OIcon url={locations[i].icon} width={50} height={50} />
-                    </View>
-                  </Marker>
-                }
-              </React.Fragment>
-            ))}
-          </>
-        ) : (
-          <Marker
-            coordinate={markerPosition}
-            title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
-          />
-        )}
-      </MapView>
-      <Alert
-        open={alertState.open}
-        onAccept={closeAlert}
-        onClose={closeAlert}
-        content={alertState.content}
-        title={t('ERROR', 'Error')}
-      />
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  map: {
-    ...StyleSheet.absoluteFillObject,
-  }
-})