ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,204 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,347 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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;
-`;