ordering-ui-react-native 0.22.76 → 0.22.77-release

package/themes/original/src/components/UserVerification/index.tsx

@@ -37,6 +37,7 @@ import {
   WrapperActions
 } from './styles'
 
+const CONDITIONAL_CODES = [1787]
 const TIME_COUNTDOWN = 60 * 10 // 10 minutes
 
 const UserDetails = (props: any) => {
@@ -60,6 +61,7 @@ const UserVerificationUI = (props: any) => {
     checkVerifyEmailCode,
     checkVerifyPhoneCode,
     cleanErrorsState,
+    useWhatsappVerification,
   } = props
 
   const theme = useTheme();
@@ -83,6 +85,7 @@ const UserVerificationUI = (props: any) => {
 
   const [phoneState, setPhoneState] = useState<any>(null)
   const [verificationState, setVerificationState] = useState({ email: false, phone: false })
+  const [selectedChannel, setSelectedChannel] = useState(2)
 
   const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
 
@@ -172,13 +175,25 @@ const UserVerificationUI = (props: any) => {
     );
   };
 
-  const handleSendOtp = (opt: string = '') => {
+  const handleSendOtp = (opt: string = '', channel?: number) => {
     setTimer(`${TIME_COUNTDOWN / 60}:00`)
     setIsSendCodeAgain(true)
     if (opt === 'phone') {
+      const ch = channel || 2
+      setSelectedChannel(ch)
+      let cellphone = phoneState?.cellphone
+      let country_phone_code = phoneState?.country_phone_code
+
+      if (CONDITIONAL_CODES.includes(Number(country_phone_code))) {
+        if (Number(country_phone_code) === 1787) {
+          cellphone = `787${cellphone}`
+          country_phone_code = '1'
+        }
+      }
       sendVerifyPhoneCode({
-        cellphone: phoneState?.cellphone,
-        country_phone_code: phoneState?.country_phone_code
+        cellphone,
+        country_phone_code,
+        channel: ch
       })
       return
     }
@@ -188,8 +203,8 @@ const UserVerificationUI = (props: any) => {
   const setupUserPhoneNumber = () => {
     if (!user || !user?.cellphone || !user?.country_phone_code) return
     setPhoneState({
-      cellphone: user?.cellphone,
-      country_phone_code: user?.country_phone_code,
+      cellphone: user?.country_code === "PR" ? user?.cellphone.replace('787', '') : user?.cellphone,
+      country_phone_code: user?.country_code === "PR" ? '1787' : user?.country_phone_code,
       formatted: `+${user?.country_phone_code} ${user?.cellphone}`
     })
   }
@@ -239,7 +254,8 @@ const UserVerificationUI = (props: any) => {
         checkVerifyPhoneCode({
           cellphone: phoneState?.cellphone,
           country_phone_code: +(phoneState?.country_phone_code),
-          code: otpState
+          code: otpState,
+          channel: selectedChannel
         })
         return
       }
@@ -399,6 +415,7 @@ const UserVerificationUI = (props: any) => {
                       defaultCode={phoneState?.country_phone_code.replace('+', '')}
                       boxStyle={style.phoneSelect}
                       inputStyle={style.phoneInputStyle}
+                      defaultCodeFallback={phoneState?.country_phone_code.replace('+', '')}
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled
@@ -449,7 +466,7 @@ const UserVerificationUI = (props: any) => {
 
                 <WrapperText>
                   <TouchableOpacity
-                    onPress={() => handleSendOtp('phone')}
+                    onPress={() => handleSendOtp('phone', selectedChannel)}
                     disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
                   >
                     <OText color={theme.colors.primary}>
@@ -464,28 +481,58 @@ const UserVerificationUI = (props: any) => {
         </Container>
         {!!phoneState?.cellphone && (
           <ButtonsActions>
-            <View style={{ width: '100%' }}>
-              <OButton
-                onClick={(verificationState.email || verificationState.phone)
-                  ? () => setVerificationState({ email: false, phone: false })
-                  : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-                }
-                text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-                bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-                borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-                textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-                imgRightSrc={null}
-                isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-                style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
-              />
-            </View>
+            {(verificationState.email || verificationState.phone) ? (
+              <View style={{ width: '100%' }}>
+                <OButton
+                  onClick={() => setVerificationState({ email: false, phone: false })}
+                  text={t('CANCEL', 'Cancel')}
+                  bgColor={theme.colors.secundary}
+                  borderColor={theme.colors.secundary}
+                  textStyle={{ color: 'black' }}
+                  imgRightSrc={null}
+                  isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                  style={style.btnStyle}
+                />
+              </View>
+            ) : useWhatsappVerification && isPhoneVerifyRequired && !isEmailVerifyRequired ? (
+              <View style={{ flexDirection: 'row', gap: 10, width: '100%' }}>
+                <OButton
+                  onClick={() => handleSendOtp('phone', 2)}
+                  text={t('SEND_BY_SMS', 'Send by SMS')}
+                  imgRightSrc={null}
+                  isLoading={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                  parentStyle={{ flex: 1 }}
+                  style={{ borderRadius: 7.6 }}
+                />
+                <OButton
+                  onClick={() => handleSendOtp('phone', 4)}
+                  text={t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
+                  imgRightSrc={null}
+                  isLoading={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                  parentStyle={{ flex: 1 }}
+                  style={{ borderRadius: 7.6 }}
+                />
+              </View>
+            ) : (
+              <View style={{ width: '100%' }}>
+                <OButton
+                  onClick={() => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')}
+                  text={t('SEND_CODE', 'Send code')}
+                  imgRightSrc={null}
+                  isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                  style={{ borderRadius: 7.6 }}
+                />
+              </View>
+            )}
           </ButtonsActions>
         )}
         <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
           <UserDetails
             user={user}
             isEdit
-            isVerifiedPhone
+            isPhoneVerifyRequired={isPhoneVerifyRequired}
+            cellphoneOtpSent={verificationState.phone}
+            setPhoneState={setPhoneState}
             dontToggleEditMode
           />
         </View>

package/themes/original/src/components/VerifyPhone/index.tsx

@@ -177,7 +177,7 @@ export const VerifyPhone = (props: any) => {
 								size={16}
 								color={theme.colors.error}
 							>
-								{`* ${t(getTraduction(e))}`}
+								{`* ${t(getTraduction(e, t))}`}
 							</OText>
 						))}
 					</ErrorSection>

package/themes/original/src/components/shared/OInput.tsx

@@ -14,33 +14,33 @@ const Input = styled.TextInput`
 `;
 
 interface Props extends TextInputProps {
-	bgColor?: string;
-	borderColor?: string;
-	isRequired?: boolean;
-	requiredMsg?: string;
-	isDisabled?: boolean;
-	isSecured?: boolean;
-	style?: ViewStyle;
-	placeholder?: string;
-	icon?: ImageSourcePropType | string;
-	iconRight?: ImageSourcePropType;
-	iconColor?: string;
-	iconRightColor?: string;
-	iconStyle?: ImageStyle;
-	iconRightStyle?: ImageStyle;
-	iconCustomRight?: any;
-	value?: string;
-	onChange?: any;
-	name?: string;
-	type?: string;
-	multiline?: boolean;
-	vertorIcon?: string;
-	vectorIconColor?: string;
-	forwardRef?: any;
-	inputStyle?: TextStyle;
-	wrapperRef?: any;
-	onPress?: any;
-	isFocusHighlight?: boolean
+  bgColor?: string;
+  borderColor?: string;
+  isRequired?: boolean;
+  requiredMsg?: string;
+  isDisabled?: boolean;
+  isSecured?: boolean;
+  style?: ViewStyle;
+  placeholder?: string;
+  icon?: ImageSourcePropType | string;
+  iconRight?: ImageSourcePropType;
+  iconColor?: string;
+  iconRightColor?: string;
+  iconStyle?: ImageStyle;
+  iconRightStyle?: ImageStyle;
+  iconCustomRight?: any;
+  value?: string;
+  onChange?: any;
+  name?: string;
+  type?: string;
+  multiline?: boolean;
+  vertorIcon?: string;
+  vectorIconColor?: string;
+  forwardRef?: any;
+  inputStyle?: TextStyle;
+  wrapperRef?: any;
+  onPress?: any;
+  isFocusHighlight?: boolean
 }
 
 const Wrapper = styled.Pressable`
@@ -59,79 +59,79 @@ const Wrapper = styled.Pressable`
 `;
 
 const OInput = (props: Props): React.ReactElement => {
-	const theme = useTheme();
-	const [inputFocused, setInputFocused] = React.useState(false)
-	return (
-		<Wrapper
-			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
-			style={{
-				backgroundColor: props.bgColor,
-				borderColor: !props.isFocusHighlight
-					? props.borderColor
-					: inputFocused ? theme.colors.primary : theme.colors.border,
-				...props.style,
-				borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
-			}}>
-			{props.icon ? (
-				<OIcon
-					src={props.icon}
-					color={props.iconColor}
-					width={16}
-					height={20}
-					style={{ marginRight: 10, ...props.iconStyle }}
-				/>
-			) : null}
-			{props.vertorIcon && (
-				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
-			)}
-			<Input
-				autoFocus={props?.autoFocus}
-				name={props.name}
-				secureTextEntry={props.isSecured}
-				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
-				defaultValue={props.value}
-				placeholder={props.placeholder ? props.placeholder : ''}
-				keyboardType={props.type || 'default'}
-				multiline={props.multiline}
-				scrollEnabled={props.multiline}
-				editable={!props.isDisabled}
-				autoCapitalize={props.autoCapitalize}
-				autoCompleteType={props.autoCompleteType}
-				autoCorrect={props.autoCorrect}
-				returnKeyType={props.returnKeyType}
-				onSubmitEditing={props.onSubmitEditing}
-				blurOnSubmit={props.blurOnSubmit}
-				ref={(e: any) => {
-					props.forwardRef && (props.forwardRef.current = e)
-				}}
-				style={{
-					...(theme?.general?.components?.inputs?.color && {
-						color: theme?.general?.components?.inputs?.color
-					}),
-					...props?.inputStyle
-				}}
-				onFocus={() => setInputFocused(true)}
-				onBlur={() => setInputFocused(false)}
-			/>
-			{props.iconRight && (
-				<OIcon
-					src={props.iconRight}
-					color={props.iconRightColor}
-					width={16}
-					height={16}
-					style={{ ...props.iconRightStyle }}
-				/>
-			)}
-			{props.iconCustomRight}
-		</Wrapper>
-	);
+  const theme = useTheme();
+  const [inputFocused, setInputFocused] = React.useState(false)
+  return (
+    <Wrapper
+      onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
+      style={{
+        backgroundColor: props.bgColor,
+        borderColor: !props.isFocusHighlight
+          ? props.borderColor
+          : inputFocused ? theme.colors.primary : theme.colors.border,
+        ...props.style,
+        borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
+      }}>
+      {props.icon ? (
+        <OIcon
+          src={props.icon}
+          color={props.iconColor}
+          width={16}
+          height={20}
+          style={{ marginRight: 10, ...props.iconStyle }}
+        />
+      ) : null}
+      {props.vertorIcon && (
+        <MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
+      )}
+      <Input
+        autoFocus={props?.autoFocus}
+        name={props.name}
+        secureTextEntry={props.isSecured}
+        onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
+        defaultValue={props.value}
+        placeholder={props.placeholder ? props.placeholder : ''}
+        keyboardType={props.type || 'default'}
+        multiline={props.multiline}
+        scrollEnabled={props.multiline}
+        editable={!props.isDisabled}
+        autoCapitalize={props.autoCapitalize}
+        autoCompleteType={props.autoCompleteType}
+        autoCorrect={props.autoCorrect}
+        returnKeyType={props.returnKeyType}
+        onSubmitEditing={props.onSubmitEditing}
+        blurOnSubmit={props.blurOnSubmit}
+        ref={(e: any) => {
+          props.forwardRef && (props.forwardRef.current = e)
+        }}
+        style={{
+          ...(theme?.general?.components?.inputs?.color && {
+            color: theme?.general?.components?.inputs?.color
+          }),
+          ...props?.inputStyle
+        }}
+        onFocus={() => setInputFocused(true)}
+        onBlur={() => setInputFocused(false)}
+      />
+      {props.iconRight && (
+        <OIcon
+          src={props.iconRight}
+          color={props.iconRightColor}
+          width={16}
+          height={16}
+          style={{ ...props.iconRightStyle }}
+        />
+      )}
+      {props.iconCustomRight}
+    </Wrapper>
+  );
 };
 
 OInput.defaultProps = {
-	iconColor: '#959595',
-	bgColor: 'white',
-	borderColor: 'white',
-	isFocusHighlight: false
+  iconColor: '#959595',
+  bgColor: 'white',
+  borderColor: 'white',
+  isFocusHighlight: false
 };
 
 export default OInput;

package/themes/original/src/components/shared/OModal.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
 import styled from 'styled-components/native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-
+import { Toast } from '../../../../../src/components/shared/OToast'
 interface Props {
 	open?: boolean;
 	title?: string;
@@ -22,6 +22,7 @@ interface Props {
 	styleCloseButton?: any,
 	isAvoidKeyBoardView?: boolean;
 	styleContainerCloseButton?: any;
+	showToastInsideModal?: boolean;
 }
 const KeyboardView = styled.KeyboardAvoidingView`
   flex-grow: 1;
@@ -47,7 +48,8 @@ const OModal = (props: Props): React.ReactElement => {
 		style,
 		styleCloseButton,
 		styleContainerCloseButton,
-		isAvoidKeyBoardView
+		isAvoidKeyBoardView,
+		showToastInsideModal
 	} = props
 
 	const renderSafeAreaView = () => (
@@ -94,6 +96,9 @@ const OModal = (props: Props): React.ReactElement => {
 			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
+			{showToastInsideModal && (
+				<Toast />
+			)}
 			{isAvoidKeyBoardView ? (
 				<KeyboardView
 					enabled

package/themes/original/src/providers/AlertProvider.tsx

@@ -28,7 +28,7 @@ const Alert = (props: Props) => {
       show={open}
       showProgress={false}
       title={title}
-      message={getTraduction(content?.[0])}
+      message={getTraduction(content?.[0], t)}
       closeOnTouchOutside={true}
       closeOnHardwareBackPress={false}
       showConfirmButton={true}