ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,201 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { getTraduction } from '../../utils';
-import { OText } from '../shared';
-import { useTheme } from 'styled-components/native';
-import {
-  Container,
-  CountDownContainer,
-  ResendSection,
-  WrappCountdown,
-  InputsSection,
-  ErrorSection,
-} from './styles';
-
-const TIME_COUNTDOWN = 60 * 10; // 10 minutes
-
-export const VerifyPhone = (props: any) => {
-  const {
-    phone,
-    formValues,
-    verifyPhoneState,
-    checkPhoneCodeState,
-    setCheckPhoneCodeState,
-    handleCheckPhoneCode,
-    handleVerifyCodeClick,
-  } = props;
-  const [, t] = useLanguage();
-
-  const theme = useTheme();
-  const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`);
-  const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' });
-  const [isSendCodeAgain, setIsSendCodeAgain] = useState(false);
-
-  const lastNumbers =
-    phone?.cellphone &&
-    `${phone?.cellphone.charAt(
-      phone?.cellphone.length - 2,
-    )}${phone?.cellphone.charAt(phone?.cellphone.length - 1)}`;
-
-  const handleChangeCode = (val: number, i: number) => {
-    setVerifyCode({ ...verifyCode, [i]: val });
-  };
-
-  const checkResult = (result: any) => {
-    if (!result) return;
-    return typeof result === 'string' ? [result] : result;
-  };
-
-  const handleSendCodeAgain = () => {
-    setCheckPhoneCodeState && setCheckPhoneCodeState();
-    setTimer(`${TIME_COUNTDOWN / 60}:00`);
-    setIsSendCodeAgain(true);
-    handleVerifyCodeClick && handleVerifyCodeClick();
-  };
-
-  useEffect(() => {
-    let _timer = TIME_COUNTDOWN - 1;
-    let minutes = 0;
-    let seconds = 0;
-    const interval = setInterval(() => {
-      minutes = _timer / 60;
-      seconds = _timer % 60;
-
-      minutes = minutes < 10 ? 0 + minutes : minutes;
-      seconds = seconds < 10 ? 0 + seconds : seconds;
-
-      const formatMinutes =
-        parseInt(minutes.toString()) < 10
-          ? `0${parseInt(minutes.toString())}`
-          : parseInt(minutes.toString());
-
-      const formatseconds =
-        parseInt(seconds.toString()) < 10
-          ? `0${parseInt(seconds.toString())}`
-          : parseInt(seconds.toString());
-
-      setTimer(`${formatMinutes}:${formatseconds}`);
-
-      if (--_timer < 0) {
-        clearInterval(interval);
-      }
-
-      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-        setIsSendCodeAgain(false);
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [isSendCodeAgain]);
-
-  useEffect(() => {
-    const codes = Object.keys(verifyCode).length;
-    const isFullInputs = codes && Object.values(verifyCode).every(val => val);
-    if (codes === 4 && isFullInputs) {
-      const values = {
-        ...formValues,
-        cellphone: phone.cellphone,
-        country_phone_code: `+${phone.country_phone_code}`,
-        code: Object.values(verifyCode).join().replace(/,/g, ''),
-      };
-      handleCheckPhoneCode && handleCheckPhoneCode(values);
-    }
-  }, [verifyCode]);
-
-  const styles = StyleSheet.create({
-    inputStyle: {
-      width: 80,
-      height: 80,
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled,
-      borderRadius: 20,
-      textAlign: 'center',
-      fontSize: 40,
-    },
-  });
-
-  return (
-    <Container>
-      <OText size={30} style={{ textAlign: 'left' }}>
-        {t('VERIFY_PHONE', 'Verify Phone')}
-      </OText>
-      {lastNumbers && (
-        <OText size={20} color={theme.colors.disabled}>
-          {`${t(
-            'MESSAGE_ENTER_VERIFY_CODE',
-            'Please, enter the verification code we sent to your mobile ending with',
-          )} **${lastNumbers}`}
-        </OText>
-      )}
-      <WrappCountdown>
-        <CountDownContainer
-          color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
-          <OText
-            size={30}
-            color={
-              timer === '00:00' ? theme.colors.error : theme.colors.success
-            }>
-            {timer}
-          </OText>
-        </CountDownContainer>
-      </WrappCountdown>
-      <InputsSection>
-        {[...Array(4)].map((_: any, i: number) => (
-          <TextInput
-            key={i}
-            keyboardType="number-pad"
-            placeholder={'0'}
-            style={styles.inputStyle}
-            onChangeText={(val: any) => handleChangeCode(val, i)}
-            maxLength={1}
-            editable={timer !== '00:00'}
-          />
-        ))}
-      </InputsSection>
-      {(verifyPhoneState?.result?.error
-        ? verifyPhoneState
-        : checkPhoneCodeState) &&
-        !(
-          verifyPhoneState?.result?.error
-            ? verifyPhoneState
-            : checkPhoneCodeState
-        )?.loading &&
-        (verifyPhoneState?.result?.error
-          ? verifyPhoneState
-          : checkPhoneCodeState
-        )?.result?.error &&
-        (verifyPhoneState?.result?.error
-          ? verifyPhoneState
-          : checkPhoneCodeState
-        ).result?.result && (
-          <ErrorSection>
-            {checkResult(
-              (verifyPhoneState?.result?.error
-                ? verifyPhoneState
-                : checkPhoneCodeState
-              ).result?.result,
-            )?.map((e: any, i: number) => (
-              <OText key={i} size={20} color={theme.colors.error}>
-                {`* ${t(getTraduction(e, t))}`}
-              </OText>
-            ))}
-          </ErrorSection>
-        )}
-      <ResendSection>
-        <OText size={17} style={{ marginRight: 5 }}>
-          {t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
-        </OText>
-        <Pressable onPress={() => handleSendCodeAgain()}>
-          <OText size={17} color={theme.colors.primary}>
-            {t('SEND_AGAIN', 'Send Again')}
-          </OText>
-        </Pressable>
-      </ResendSection>
-      <Spinner visible={checkPhoneCodeState.loading} />
-    </Container>
-  );
-};

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

@@ -1,43 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Container = styled.View`
-  width: 100%;
-  padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
-`;
-
-export const CountDownContainer = styled.View`
-  background-color: ${(props: any) => `${props.color}4D`};
-  border-radius: 30px;
-  padding: 5px 80px 0px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-`;
-
-export const ResendSection = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-bottom: 30px;
-`;
-
-export const WrappCountdown = styled.View`
-  padding-top: 20px;
-  padding-bottom: 20px;
-`;
-
-export const InputsSection = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const ErrorSection = styled.View`
-  margin-bottom: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-`;

package/themes/business/src/components 2/shared/OAlert.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components/native';
-import { Alert } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
-
-const Wrapper = styled.TouchableOpacity``;
-
-interface Props {
-  children: any;
-  title: string;
-  message?: string;
-  onCancel?: any;
-  onAccept?: any;
-  onClick?: () => void;
-  disabled?: boolean;
-}
-
-const OAlert = (props: Props) => {
-  const [, t] = useLanguage();
-
-  const createTwoButtonAlert = () => {
-    Alert.alert(
-      props.title,
-      props.message,
-      [
-        {
-          text: t('CANCEL', 'cancel'),
-          onPress: () => props.onCancel && props.onCancel(),
-          style: 'cancel',
-        },
-        {
-          text: t('ACCEPT', 'Accept'),
-          onPress: () => props.onAccept && props.onAccept(),
-        },
-      ],
-      { cancelable: false },
-    );
-  };
-
-  const handleClick = () => {
-    props.onClick && props.onClick();
-    createTwoButtonAlert();
-  };
-
-  return (
-    <Wrapper onPress={handleClick} disabled={props.disabled}>
-      {props.children}
-    </Wrapper>
-  );
-};
-
-export default OAlert;

package/themes/business/src/components 2/shared/OButton.tsx

@@ -1,149 +0,0 @@
-import {
-  ActivityIndicator,
-  ImageSourcePropType,
-  ImageStyle,
-  TextStyle,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import * as React from 'react';
-import styled from 'styled-components/native';
-
-const StyledButton = styled.View<Props>`
-  background-color: ${(props: any) => props.theme.colors.primary};
-  border-radius: 26px;
-  border-width: 2px;
-  height: 52px;
-  border-color: ${(props: any) => props.theme.colors.primary};
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 1px 1px 2px #00000020;
-  padding-left: 20px;
-  padding-right: 20px;
-  position: relative;
-`;
-
-const StyledButtonDisabled = styled(StyledButton)`
-  background-color: ${(props: any) => props.theme.colors.disabled};
-  border-color: ${(props: any) => props.theme.colors.disabled};
-`;
-
-const StyledText = styled.Text`
-  font-size: 16px;
-  color: ${(props: any) => props.theme.colors.btnFont};
-  margin-left: 10px;
-  margin-right: 10px;
-  font-family: 'Poppins-Regular';
-`;
-
-const StyledTextDisabled = styled(StyledText)`
-  color: ${(props: any) => props.theme.colors.primary};
-`;
-
-const StyledImage = styled.Image`
-  width: 20px;
-  height: 20px;
-  resize-mode: contain;
-`;
-
-const EndImage = styled.Image`
-  width: 15px;
-  height: 15px;
-  resize-mode: contain;
-  right: 20px;
-  position: absolute;
-  right: 20px;
-`;
-
-interface Props {
-  testID?: string;
-  isLoading?: boolean;
-  isDisabled?: boolean;
-  onClick?: () => void;
-  style?: ViewStyle;
-  parentStyle?: ViewStyle;
-  disabledStyle?: ViewStyle;
-  textStyle?: TextStyle;
-  imgLeftSrc?: ImageSourcePropType | string;
-  imgLeftStyle?: ImageStyle;
-  imgRightSrc?: any;
-  imgRightStyle?: ImageStyle;
-  indicatorColor?: string;
-  activeOpacity?: number;
-  text?: string;
-  isCircle?: boolean;
-  bgColor?: string;
-  borderColor?: string;
-  loadingStyle?: ViewStyle;
-}
-
-const OButton = (props: Props): React.ReactElement => {
-  if (props.isDisabled) {
-    return (
-      <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
-      </View>
-    );
-  }
-
-  if (props.isLoading) {
-    return (
-      <StyledButton style={props.style}>
-        <ActivityIndicator
-          size="small"
-          color={props.indicatorColor}
-          style={props.loadingStyle}
-        />
-      </StyledButton>
-    );
-  }
-
-  return (
-    <TouchableOpacity
-      testID={props.testID}
-      activeOpacity={props.activeOpacity}
-      onPress={props.onClick}
-      style={{
-        width: props.isCircle ? 52 : props.style?.width,
-        ...props.parentStyle,
-      }}>
-      <StyledButton
-        style={
-          props.bgColor
-            ? {
-                ...props.style,
-                backgroundColor: props.bgColor,
-                borderColor: props.borderColor,
-              }
-            : props.style
-        }>
-        {props.imgLeftSrc ? (
-          <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
-        ) : null}
-        {props.text ? (
-          <StyledText style={props.textStyle}>{props.text}</StyledText>
-        ) : null}
-        {props.imgRightSrc ? (
-          <EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
-        ) : null}
-      </StyledButton>
-    </TouchableOpacity>
-  );
-};
-
-OButton.defaultProps = {
-  isLoading: false,
-  isDisabled: false,
-  indicatorColor: 'white',
-  activeOpacity: 0.5,
-  imgRightSrc: require('../../assets/icons/arrow_right.png'),
-};
-
-export default OButton;

package/themes/business/src/components 2/shared/OChatBubble.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components/native';
-import { OIcon } from '.';
-import { DIRECTION } from '../../config/constants';
-import { useTheme } from 'styled-components/native';
-import { useUtils } from 'ordering-components/native';
-import OText from './OText';
-
-const Wrapper = styled.View`
-  flex: 1;
-  border-radius: 35px;
-  min-height: 50px;
-  padding-horizontal: 25px;
-  padding-vertical: 10px;
-  max-width: 80%;
-  margin-bottom: 14px;
-`;
-
-const ImageContainer = styled.TouchableOpacity`
-  flex: 1;
-`;
-interface Props {
-  side?: string;
-  bgColor?: string;
-  textColor?: string;
-  contents?: any;
-  datetime?: string;
-  data?: any;
-  image?: string;
-  onClick?: () => void;
-}
-
-const OChatBubble = (props: Props) => {
-  const theme = useTheme();
-  const [{ optimizeImage }] = useUtils();
-
-  return (
-    <Wrapper
-      style={
-        props?.side
-          ? props.side === DIRECTION.RIGHT
-            ? {
-                borderBottomRightRadius: 0,
-                backgroundColor: props.bgColor
-                  ? props.bgColor
-                  : theme.colors.primary,
-                alignSelf: 'flex-end',
-              }
-            : {
-                borderBottomLeftRadius: 0,
-                backgroundColor: props.bgColor
-                  ? props.bgColor
-                  : theme.colors.backgroundGray,
-                alignSelf: 'flex-start',
-              }
-          : {
-              borderRadius: 5,
-              backgroundColor: props.bgColor
-                ? props.bgColor
-                : theme.colors.backgroundGray,
-              alignSelf: 'center',
-            }
-      }>
-      {props?.image && (
-        <ImageContainer onPress={props.onClick}>
-          <OIcon
-            cover
-            url={optimizeImage(props.image, 'h_300,c_limit')}
-            width={250}
-            height={250}
-          />
-        </ImageContainer>
-      )}
-      <OText
-        color={
-          props.textColor
-            ? props.textColor
-            : props.side == DIRECTION.RIGHT
-            ? theme.colors.white
-            : 'black'
-        }>
-        {props.contents}
-      </OText>
-      <OText
-        color={
-          props.textColor
-            ? props.textColor
-            : props.side == DIRECTION.RIGHT
-            ? theme.colors.white
-            : 'black'
-        }
-        style={{ textAlign: 'right' }}
-        size={9}>
-        {props.datetime}
-      </OText>
-    </Wrapper>
-  );
-};
-
-export default OChatBubble;