ordering-ui-react-native 0.12.14 → 0.12.18

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

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

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

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

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

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