ordering-ui-react-native 0.14.81 → 0.14.82

package/themes/original/src/components/UpsellingProducts/styles.tsx

@@ -1,50 +1,50 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-  margin: 20px 0;
-  margin-start: -40px;
-  margin-end: -40px;
-`
-export const UpsellingContainer = styled.ScrollView`
-  max-height: 92px;
-`
-export const Item = styled.View`
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  border-radius: 7.6px;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 10px;
-  margin-right: 12px;
-  min-width: 207px;
-  max-width: 207px;
-  width: 207px;
-`
-export const Details = styled.View`
-  align-items: flex-start;
-  justify-content: center;
-`
-export const AddButton = styled.TouchableOpacity`
-	padding: 4px 8px;
-	background-color: ${(props: any) => props.theme.colors.primaryContrast};
-	border-radius: 30px;
-	width: 40%;
-	align-items: center;
-	margin-top: 6px;
-`
-export const CloseUpselling = styled.View`
-  margin-vertical: 10px;
-  width: 100%;
-`
-export const TopBar = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 50px;
-  padding-horizontal: 40px;
-`
-export const TopActions = styled.TouchableOpacity`
-	height: 44px;
-	justify-content: center;
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  margin: 20px 0;
+  margin-start: -40px;
+  margin-end: -40px;
+`
+export const UpsellingContainer = styled.ScrollView`
+  max-height: 92px;
+`
+export const Item = styled.View`
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+  border-radius: 7.6px;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 10px;
+  margin-right: 12px;
+  min-width: 207px;
+  max-width: 207px;
+  width: 207px;
+`
+export const Details = styled.View`
+  align-items: flex-start;
+  justify-content: center;
+`
+export const AddButton = styled.TouchableOpacity`
+	padding: 4px 8px;
+	background-color: ${(props: any) => props.theme.colors.primaryContrast};
+	border-radius: 30px;
+	width: 40%;
+	align-items: center;
+	margin-top: 6px;
+`
+export const CloseUpselling = styled.View`
+  margin-vertical: 10px;
+  width: 100%;
+`
+export const TopBar = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 50px;
+  padding-horizontal: 40px;
+`
+export const TopActions = styled.TouchableOpacity`
+	height: 44px;
+	justify-content: center;
 `;

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

@@ -1,226 +1,226 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-
-import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
-import {
-	UserFormDetails as UserFormController,
-	useLanguage,
-	useSession,
-	ToastType,
-	useToast
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText, OModal } from '../shared';
-import { VerifyPhone } from '../VerifyPhone';
-import Spinner from 'react-native-loading-spinner-overlay';
-
-import { UserFormDetailsUI } from '../UserFormDetails';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-
-const UserDetailsUI = (props: any) => {
-	const {
-		isEdit,
-		formState,
-		cleanFormState,
-		cartStatus,
-		toggleIsEdit,
-		validationFields,
-		isUserDetailsEdit,
-		phoneUpdate,
-		togglePhoneUpdate,
-		isCheckout,
-		checkPhoneCodeState,
-		handleSendVerifyCode,
-		handleCheckPhoneCode,
-		verifyPhoneState,
-		isVerifiedPhone,
-		setCheckPhoneCodeState
-	} = props
-
-	const theme = useTheme();
-
-	const [, t] = useLanguage()
-	const [{ user }] = useSession()
-	const [, { showToast }] = useToast();
-
-	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
-
-	const [isModalVisible, setIsModalVisible] = useState(false);
-	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-
-
-	useEffect(() => {
-		if (isUserDetailsEdit) {
-			!isEdit && toggleIsEdit()
-		}
-	}, [isUserDetailsEdit])
-
-	const toggleEditState = () => {
-		toggleIsEdit()
-		cleanFormState({ changes: {} })
-	}
-
-	useEffect(() => {
-		if (user?.cellphone && !user?.country_phone_code) {
-			togglePhoneUpdate(true)
-		} else {
-			togglePhoneUpdate(false)
-		}
-	}, [user?.country_phone_code])
-
-	const handleVerifyCodeClick = () => {
-		if (formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
-			const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
-
-			setPhoneInputData({
-				error: '',
-				phone: {
-					country_phone_code: countryPhoneCode,
-					cellphone: cellphone,
-				},
-			});
-			handleSendVerifyCode({
-			  cellphone: cellphone,
-			  country_phone_code: countryPhoneCode
-			})
-		}
-	}
-
-	useEffect(() => {
-		if (willVerifyOtpState) handleVerifyCodeClick()
-	}, [willVerifyOtpState])
-
-	useEffect(() => {
-		if (verifyPhoneState && !verifyPhoneState?.loading) {
-			if (verifyPhoneState.result?.error) {
-				const message = typeof verifyPhoneState?.result?.result === 'string'
-					? verifyPhoneState?.result?.result
-					: verifyPhoneState?.result?.result[0]
-				verifyPhoneState.result?.result && showToast(
-					ToastType.Error,
-					message
-				)
-				setWillVerifyOtpState(false)
-				return
-			}
-
-			const okResult = verifyPhoneState.result?.result === 'OK'
-			if (okResult) {
-				!isModalVisible && setIsModalVisible(true)
-				setWillVerifyOtpState(false)
-			}
-		}
-	}, [verifyPhoneState])
-
-	useEffect(() => {
-		if (isVerifiedPhone) setIsModalVisible(false)
-	}, [isVerifiedPhone])
-
-	return (
-		<>
-			{(validationFields.loading || formState.loading) && (
-				<Placeholder Animation={Fade}>
-					<PlaceholderLine height={20} width={70} />
-					<PlaceholderLine height={15} width={60} />
-					<PlaceholderLine height={15} width={60} />
-					<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
-				</Placeholder>
-			)}
-
-			{!(validationFields.loading || formState.loading) && (
-				<UDContainer>
-					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'}>
-							{t('CUSTOMER_DETAILS', 'Customer Details')}
-						</OText>
-						{cartStatus !== 2 && (
-							!isEdit ? (
-								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
-									<OIcon
-										src={theme.images.general.pencil}
-										width={16}
-										height={16}
-										color={theme.colors.editColor}
-										style={{ marginBottom: 10, marginLeft: 5 }}
-									/>
-								</EditBtn>
-							) : (
-								<EditBtn onPress={() => toggleEditState()} activeOpacity={0.7}>
-									<OIcon
-										src={theme.images.general.close}
-										color={theme.colors.cancelColor}
-										width={16}
-										height={16}
-										style={{ marginBottom: 5, marginLeft: 5 }}
-									/>
-								</EditBtn>
-							)
-						)}
-					</UDHeader>
-
-					{!isEdit ? (
-						<UDInfo>
-							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
-							</OText>
-							<OText size={12} lineHeight={18} weight={'400'}>
-								{userData?.email}
-							</OText>
-							{!!(userData?.cellphone || user?.cellphone) && (
-								<>
-									<OText size={12} lineHeight={18} weight={'400'}>
-										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
-									</OText>
-									{!!phoneUpdate && (
-										<OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
-									)}
-								</>
-							)}
-						</UDInfo>
-					) : (
-						<UserFormDetailsUI
-							{...props}
-							phoneUpdate={phoneUpdate}
-							togglePhoneUpdate={togglePhoneUpdate}
-							isCheckout={isCheckout}
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
-					)}
-				</UDContainer>
-			)}
-			<OModal
-				open={isModalVisible}
-				onClose={() => setIsModalVisible(false)}
-				entireModal
-			>
-				<VerifyPhone
-				phone={phoneInputData.phone}
-				verifyPhoneState={verifyPhoneState}
-				checkPhoneCodeState={checkPhoneCodeState}
-				handleCheckPhoneCode={handleCheckPhoneCode}
-				setCheckPhoneCodeState={setCheckPhoneCodeState}
-				handleVerifyCodeClick={handleVerifyCodeClick}
-				onClose={() => setIsModalVisible(false)}
-				/>
-			</OModal>
-			<Spinner visible={verifyPhoneState?.loading} />
-		</>
-	)
-}
-
-export const UserDetails = (props: any) => {
-	const userDetailsProps = {
-		...props,
-		UIComponent: UserDetailsUI
-	}
-
-	return <UserFormController {...userDetailsProps} />
-}
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
+import {
+	UserFormDetails as UserFormController,
+	useLanguage,
+	useSession,
+	ToastType,
+	useToast
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { OIcon, OText, OModal } from '../shared';
+import { VerifyPhone } from '../VerifyPhone';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+import { UserFormDetailsUI } from '../UserFormDetails';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+
+const UserDetailsUI = (props: any) => {
+	const {
+		isEdit,
+		formState,
+		cleanFormState,
+		cartStatus,
+		toggleIsEdit,
+		validationFields,
+		isUserDetailsEdit,
+		phoneUpdate,
+		togglePhoneUpdate,
+		isCheckout,
+		checkPhoneCodeState,
+		handleSendVerifyCode,
+		handleCheckPhoneCode,
+		verifyPhoneState,
+		isVerifiedPhone,
+		setCheckPhoneCodeState
+	} = props
+
+	const theme = useTheme();
+
+	const [, t] = useLanguage()
+	const [{ user }] = useSession()
+	const [, { showToast }] = useToast();
+
+	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
+
+	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false);
+	const [phoneInputData, setPhoneInputData] = useState({
+		error: '',
+		phone: {
+			country_phone_code: null,
+			cellphone: null,
+		},
+	});
+
+
+	useEffect(() => {
+		if (isUserDetailsEdit) {
+			!isEdit && toggleIsEdit()
+		}
+	}, [isUserDetailsEdit])
+
+	const toggleEditState = () => {
+		toggleIsEdit()
+		cleanFormState({ changes: {} })
+	}
+
+	useEffect(() => {
+		if (user?.cellphone && !user?.country_phone_code) {
+			togglePhoneUpdate(true)
+		} else {
+			togglePhoneUpdate(false)
+		}
+	}, [user?.country_phone_code])
+
+	const handleVerifyCodeClick = () => {
+		if (formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
+			const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
+
+			setPhoneInputData({
+				error: '',
+				phone: {
+					country_phone_code: countryPhoneCode,
+					cellphone: cellphone,
+				},
+			});
+			handleSendVerifyCode({
+			  cellphone: cellphone,
+			  country_phone_code: countryPhoneCode
+			})
+		}
+	}
+
+	useEffect(() => {
+		if (willVerifyOtpState) handleVerifyCodeClick()
+	}, [willVerifyOtpState])
+
+	useEffect(() => {
+		if (verifyPhoneState && !verifyPhoneState?.loading) {
+			if (verifyPhoneState.result?.error) {
+				const message = typeof verifyPhoneState?.result?.result === 'string'
+					? verifyPhoneState?.result?.result
+					: verifyPhoneState?.result?.result[0]
+				verifyPhoneState.result?.result && showToast(
+					ToastType.Error,
+					message
+				)
+				setWillVerifyOtpState(false)
+				return
+			}
+
+			const okResult = verifyPhoneState.result?.result === 'OK'
+			if (okResult) {
+				!isModalVisible && setIsModalVisible(true)
+				setWillVerifyOtpState(false)
+			}
+		}
+	}, [verifyPhoneState])
+
+	useEffect(() => {
+		if (isVerifiedPhone) setIsModalVisible(false)
+	}, [isVerifiedPhone])
+
+	return (
+		<>
+			{(validationFields.loading || formState.loading) && (
+				<Placeholder Animation={Fade}>
+					<PlaceholderLine height={20} width={70} />
+					<PlaceholderLine height={15} width={60} />
+					<PlaceholderLine height={15} width={60} />
+					<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+				</Placeholder>
+			)}
+
+			{!(validationFields.loading || formState.loading) && (
+				<UDContainer>
+					<UDHeader>
+						<OText size={16} lineHeight={24} weight={'500'}>
+							{t('CUSTOMER_DETAILS', 'Customer Details')}
+						</OText>
+						{cartStatus !== 2 && (
+							!isEdit ? (
+								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
+									<OIcon
+										src={theme.images.general.pencil}
+										width={16}
+										height={16}
+										color={theme.colors.editColor}
+										style={{ marginBottom: 10, marginLeft: 5 }}
+									/>
+								</EditBtn>
+							) : (
+								<EditBtn onPress={() => toggleEditState()} activeOpacity={0.7}>
+									<OIcon
+										src={theme.images.general.close}
+										color={theme.colors.cancelColor}
+										width={16}
+										height={16}
+										style={{ marginBottom: 5, marginLeft: 5 }}
+									/>
+								</EditBtn>
+							)
+						)}
+					</UDHeader>
+
+					{!isEdit ? (
+						<UDInfo>
+							<OText size={12} lineHeight={18} weight={'400'}>
+								{userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
+							</OText>
+							<OText size={12} lineHeight={18} weight={'400'}>
+								{userData?.email}
+							</OText>
+							{!!(userData?.cellphone || user?.cellphone) && (
+								<>
+									<OText size={12} lineHeight={18} weight={'400'}>
+										{(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
+									</OText>
+									{!!phoneUpdate && (
+										<OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
+									)}
+								</>
+							)}
+						</UDInfo>
+					) : (
+						<UserFormDetailsUI
+							{...props}
+							phoneUpdate={phoneUpdate}
+							togglePhoneUpdate={togglePhoneUpdate}
+							isCheckout={isCheckout}
+							setWillVerifyOtpState={setWillVerifyOtpState}
+						/>
+					)}
+				</UDContainer>
+			)}
+			<OModal
+				open={isModalVisible}
+				onClose={() => setIsModalVisible(false)}
+				entireModal
+			>
+				<VerifyPhone
+				phone={phoneInputData.phone}
+				verifyPhoneState={verifyPhoneState}
+				checkPhoneCodeState={checkPhoneCodeState}
+				handleCheckPhoneCode={handleCheckPhoneCode}
+				setCheckPhoneCodeState={setCheckPhoneCodeState}
+				handleVerifyCodeClick={handleVerifyCodeClick}
+				onClose={() => setIsModalVisible(false)}
+				/>
+			</OModal>
+			<Spinner visible={verifyPhoneState?.loading} />
+		</>
+	)
+}
+
+export const UserDetails = (props: any) => {
+	const userDetailsProps = {
+		...props,
+		UIComponent: UserDetailsUI
+	}
+
+	return <UserFormController {...userDetailsProps} />
+}

package/themes/original/src/components/UserDetails/styles.tsx

@@ -1,26 +1,26 @@
-import styled, { css } from 'styled-components/native';
-
-export const UDContainer = styled.View``
-
-export const UDHeader = styled.View`
-  flex-direction: row;
-  align-items: center;
-`
-
-export const UDForm = styled.View`
-  width: 100%;
-  /* margin-top: 25px; */
-`
-
-export const UDInfo = styled.View`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  text-align: left;
-`
-export const EditBtn = styled.TouchableOpacity`
-	align-items: center;
-	justify-content: center;
-	padding-top: 9px;
-	width: 40px;
+import styled, { css } from 'styled-components/native';
+
+export const UDContainer = styled.View``
+
+export const UDHeader = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const UDForm = styled.View`
+  width: 100%;
+  /* margin-top: 25px; */
+`
+
+export const UDInfo = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: left;
+`
+export const EditBtn = styled.TouchableOpacity`
+	align-items: center;
+	justify-content: center;
+	padding-top: 9px;
+	width: 40px;
 `;