ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/ForgotPasswordForm/index.tsx

@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  ToastType,
+  useToast,
+  ForgotPasswordForm as ForgotPasswordController,
+  useLanguage,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Container, FormInput } from './styles';
+import { OButton, OInput, OText, OIconButton } from '../shared';
+
+const ForgotPasswordUI = (props: any) => {
+  const { navigation, formState, handleButtonForgotPasswordClick } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [, { showToast }] = useToast();
+  const { control, handleSubmit, errors } = useForm();
+
+  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]);
+
+  const styles = StyleSheet.create({
+    header: {
+      marginTop: 0,
+      marginBottom: 30,
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
+    },
+    text: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      color: theme.colors.textGray,
+    },
+    arrowLeft: {
+      maxWidth: 40,
+      height: 25,
+      justifyContent: 'flex-end',
+    },
+    inputStyle: {
+      marginBottom: 25,
+      borderWidth: 1,
+      borderColor: theme.colors.disabled,
+      borderRadius: 7.6,
+    },
+    ButtonText: {
+      color: theme.colors.primaryContrast,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 17,
+    },
+    button: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+  });
+
+  return (
+    <Container>
+      <View style={styles.header}>
+        <OIconButton
+          icon={theme.images.general.arrow_left}
+          borderColor={theme.colors.clear}
+          iconStyle={{ width: 20, height: 20 }}
+          style={styles.arrowLeft}
+          onClick={() => navigation?.canGoBack() && navigation.goBack()}
+        />
+
+        <OText size={26} weight="600" style={styles.text}>
+          {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
+        </OText>
+      </View>
+
+      <OText
+        size={16}
+        weight="normal"
+        style={{ ...styles.text, 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')}
+              placeholderTextColor={theme.colors.arrowColor}
+              style={styles.inputStyle}
+              icon={theme.images.logos.emailInputIcon}
+              onChange={(e: any) => {
+                handleChangeInputEmail(e, onChange);
+              }}
+              value={value}
+              autoCapitalize="none"
+              autoCorrect={false}
+              type="email-address"
+              selectionColor={theme.colors.primary}
+              color={theme.colors.textGray}
+              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={styles.ButtonText}
+          style={styles.button}
+          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}
+          onClick={
+            emailSent && !formState.result?.error
+              ? () => {}
+              : handleSubmit(onSubmit)
+          }
+        />
+      </FormInput>
+    </Container>
+  );
+};
+
+export const ForgotPasswordForm = (props: any) => {
+  const ForgotPasswordProps = {
+    ...props,
+    UIComponent: ForgotPasswordUI,
+  };
+  return <ForgotPasswordController {...ForgotPasswordProps} />;
+};

package/themes/business/src/components 2/ForgotPasswordForm/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  padding-bottom: 40px;
+`;
+
+export const FormInput = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;

package/themes/business/src/components 2/GoogleMap/index.tsx

@@ -0,0 +1,347 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Dimensions, StyleSheet, View, SafeAreaView } from 'react-native';
+import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
+import Geocoder from 'react-native-geocoding';
+import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
+import { GoogleMapsParams } from '../../types';
+import Alert from '../../providers/AlertProvider';
+import { OIconButton, OIcon } from '../shared';
+import { FloatingButton } from '../FloatingButton';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { useTheme } from 'styled-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export const GoogleMap = (props: GoogleMapsParams) => {
+  const {
+    location,
+    handleChangeAddressMap,
+    maxLimitLocation,
+    readOnly,
+    handleViewActionOrder,
+    markerTitle,
+    showAcceptOrReject,
+    driverLocation,
+    saveLocation,
+    handleOpenMapView,
+    setSaveLocation,
+    handleToggleMap,
+    locations,
+    isSetInputs,
+    navigation,
+  } = props;
+
+  const { top } = useSafeAreaInsets();
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [configState] = useConfig();
+  const [{ optimizeImage }] = useUtils();
+  const { width, height } = Dimensions.get('window');
+  const ASPECT_RATIO = width / height;
+  const [isMapReady, setIsMapReady] = useState(false);
+  const [markerPosition, setMarkerPosition] = useState({
+    latitude: locations ? locations[locations.length - 1].lat : location.lat,
+    longitude: locations ? locations[locations.length - 1].lng : location.lng,
+  });
+  const [region, setRegion] = useState({
+    latitude: location.lat,
+    longitude: location.lng,
+    latitudeDelta: 0.001,
+    longitudeDelta: 0.001 * 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_TO: 'Sorry, You can only set the position to',
+  };
+
+  const MARKERS =
+    locations &&
+    locations.map((location: { lat: number; lng: number; level: number }) => {
+      return location.level === 4 && driverLocation?.lat
+        ? {
+            latitude: driverLocation?.lat,
+            longitude: driverLocation?.lng,
+          }
+        : { latitude: location.lat, longitude: location.lng };
+    });
+
+  const handleArrowBack: any = () => {
+    handleOpenMapView && handleOpenMapView();
+  };
+
+  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;
+            }
+          }
+          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,
+            };
+          }
+          handleChangeAddressMap && handleChangeAddressMap(data, 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_TO')
+        ? [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(() => {
+    if (mapRef.current && locations && isMapReady) {
+      fitAllMarkers();
+    }
+  }, [isMapReady]);
+
+  const styles = StyleSheet.create({
+    map: {
+      flex: 1,
+      ...StyleSheet.absoluteFillObject,
+    },
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+    buttonBack: {
+      borderRadius: 7.6,
+      borderWidth: 0,
+      paddingLeft: 0,
+    },
+    buttonContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 15,
+      marginTop: top,
+    },
+  });
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1, position: 'relative' }}>
+        <MapView
+          provider={PROVIDER_GOOGLE}
+          initialRegion={region}
+          style={{ flex: 1 }}
+          onRegionChangeComplete={
+            !readOnly
+              ? coordinates => handleChangeRegion(coordinates)
+              : () => {}
+          }
+          zoomTapEnabled
+          zoomEnabled
+          zoomControlEnabled
+          cacheEnabled
+          moveOnMarkerPress
+          ref={mapRef}
+          onMapReady={() => setIsMapReady(true)}>
+          {locations ? (
+            <>
+              {MARKERS &&
+                MARKERS.map(
+                  (
+                    location: { latitude: number; longitude: number },
+                    i: number,
+                  ) => (
+                    <React.Fragment key={i}>
+                      <Marker coordinate={location} title={locations[i]?.title}>
+                        <Icon
+                          name="map-marker"
+                          size={50}
+                          color={theme.colors.primary}
+                        />
+                        <View style={styles.view}>
+                          <OIcon
+                            style={styles.image}
+                            url={optimizeImage(
+                              locations[i].icon,
+                              'h_300,c_limit',
+                            )}
+                            width={25}
+                            height={25}
+                          />
+                        </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')}
+        />
+      </View>
+      {showAcceptOrReject && (
+        <FloatingButton
+          btnText={t('ACCEPT', 'Accept')}
+          isSecondaryBtn={false}
+          color={theme.colors.green}
+          secondButtonClick={() =>
+            handleViewActionOrder && handleViewActionOrder('accept')
+          }
+          firstButtonClick={() =>
+            handleViewActionOrder && handleViewActionOrder('accept')
+          }
+          secondButton={false}
+          firstColorCustom={theme.colors.red}
+          secondColorCustom={theme.colors.green}
+          widthButton={'100%'}
+          isPadding
+        />
+      )}
+      <View style={styles.buttonContainer}>
+        <OIconButton
+          icon={theme.images.general.close}
+          iconStyle={{ width: 32, height: 32 }}
+          style={styles.buttonBack}
+          onClick={() => handleArrowBack()}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};

package/themes/business/src/components 2/Home/index.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, Dimensions, Platform } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { LogoWrapper, Container, BackgroundImage } from './styles';
+import { OButton, OIcon, OText } from '../shared';
+import { _setStoreData } from '../../providers/StoreUtil';
+
+export const Home = (props: any) => {
+  const { onNavigationRedirect } = props;
+  const safeHeight = Platform.OS === 'ios' ? 80 : 40;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+
+  const [orientation, setOrientation] = useState(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+  const [windowHeight, setWindowHeight] = useState(
+    parseInt(parseFloat(String(Dimensions.get('window').height)).toFixed(0)),
+  );
+
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    setWindowHeight(
+      parseInt(parseFloat(String(Dimensions.get('window').height)).toFixed(0)),
+    );
+
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
+  return (
+    <Container height={windowHeight - safeHeight} orientation={orientation}>
+      <BackgroundImage
+        source={theme.images.backgroundsImages.login}
+        resizeMode="cover">
+        <LogoWrapper>
+          <OIcon src={theme.images.logos.logotypeInvert} style={styles.logo} />
+        </LogoWrapper>
+
+        <View style={styles.wrapperContent}>
+          <View style={styles.wrapperText}>
+            <OText style={styles.textTitle} color={theme.colors.inputChat}>
+              {t('TITLE_SIGN_UP', 'Welcome')}
+            </OText>
+
+            <OText style={styles.textSubtitle} color={theme.colors.inputChat}>
+              {t(props.title.key, props.title.value)}
+            </OText>
+          </View>
+
+          <View style={styles.wrapperBtn}>
+            <OButton
+              text={t('LOGIN', 'Login')}
+              textStyle={{
+                ...styles.btnText,
+                color: theme.colors.inputTextColor,
+              }}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+              style={styles.btn}
+              imgRightSrc={false}
+              onClick={() => onNavigationRedirect('Login')}
+            />
+          </View>
+        </View>
+      </BackgroundImage>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  logo: {
+    height: 65,
+    width: 300,
+  },
+  wrapperContent: {
+    width: '100%',
+  },
+  wrapperText: {
+    marginBottom: 20,
+  },
+  textTitle: {
+    fontWeight: '600',
+    fontStyle: 'normal',
+    fontSize: 50,
+  },
+  textSubtitle: {
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontSize: 14,
+  },
+  wrapperBtn: {
+    marginBottom: 20,
+  },
+  btn: {
+    borderRadius: 7.6,
+    marginTop: 20,
+  },
+  btnText: {
+    fontFamily: 'Poppins',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 18,
+  },
+});

package/themes/business/src/components 2/Home/styles.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  width: 100%;
+  flex: 1;
+  height: ${(props: any) =>
+    props?.orientation === 'Portrait' && props?.height
+      ? `${props.height}px`
+      : 'auto'};
+`;
+
+export const LogoWrapper = styled.View`
+  margin-vertical: 50px;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const BackgroundImage = styled.ImageBackground`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+`;