ordering-ui-react-native 0.12.57 → 0.12.61

package/themes/franchises/src/components/UpsellingProducts/index.tsx

@@ -1,222 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Spinner from 'react-native-loading-spinner-overlay';
-import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { Platform, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'
-import {
-	UpsellingPage as UpsellingPageController,
-	useUtils,
-	useLanguage,
-} from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
-import { UpsellingProductsParams } from '../../types'
-import {
-	Container,
-	UpsellingContainer,
-	Item,
-	Details,
-	AddButton,
-	CloseUpselling,
-	TopBar,
-	TopActions
-} from './styles'
-import { ProductForm } from '../ProductForm';
-import { OrderSummary } from '../OrderSummary';
-import { ScrollView } from 'react-native-gesture-handler';
-import NavBar from '../NavBar';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const UpsellingProductsUI = (props: UpsellingProductsParams) => {
-	const {
-		isCustomMode,
-		upsellingProducts,
-		business,
-		cart,
-		handleUpsellingPage,
-		handleCloseUpsellingPage,
-		openUpselling,
-		canOpenUpselling,
-		setCanOpenUpselling
-	} = props
-
-	const theme = useTheme();
-
-
-	const styles = StyleSheet.create({
-		imageStyle: {
-			width: 73,
-			height: 73,
-			resizeMode: 'cover',
-			borderRadius: 7.6,
-		},
-		closeUpsellingButton: {
-			borderRadius: 7.6,
-			borderColor: theme.colors.primary,
-			backgroundColor: theme.colors.primary,
-			borderWidth: 1,
-			height: 44,
-			marginBottom: 10,
-			shadowOpacity: 0
-		},
-		cancelBtn: {
-			paddingHorizontal: 18,
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.textSecondary,
-			height: 38
-		}
-	})
-
-	const [actualProduct, setActualProduct] = useState<any>(null)
-	const [modalIsOpen, setModalIsOpen] = useState(false)
-	const [{ parsePrice }] = useUtils()
-	const [, t] = useLanguage()
-	const { bottom } = useSafeAreaInsets()
-
-	useEffect(() => {
-		if (!isCustomMode) {
-			if (!upsellingProducts.loading) {
-				setCanOpenUpselling && setCanOpenUpselling(true)
-			}
-			// if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
-			// 	(!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
-			// 	handleUpsellingPage && handleUpsellingPage()
-			// }
-		}
-	}, [upsellingProducts.loading, upsellingProducts?.products.length])
-
-	const handleFormProduct = (product: any) => {
-		setActualProduct(product)
-		setModalIsOpen(true)
-	}
-
-	const handleSaveProduct = () => {
-		setActualProduct(null)
-		setModalIsOpen(false)
-	}
-
-	const UpsellingLayout = () => {
-		return (
-			<Container>
-				<UpsellingContainer
-					horizontal
-					showsHorizontalScrollIndicator={false}
-					contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-				>
-					{
-						!upsellingProducts.loading && (
-							<>
-								{
-									!upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
-										<Item key={product.id}>
-											<View style={{ flexBasis: '57%' }}>
-												<Details>
-													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-													<OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-												</Details>
-												<AddButton onPress={() => handleFormProduct(product)}>
-													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-												</AddButton>
-											</View>
-											<View style={{}}>
-												<OIcon url={product.images} style={styles.imageStyle} />
-											</View>
-										</Item>
-									)) : (
-										<OText>
-											{upsellingProducts.message}
-										</OText>
-									)
-								}
-							</>
-						)
-					}
-				</UpsellingContainer>
-			</Container>
-		)
-	}
-
-	return (
-		<>
-			{isCustomMode ? (
-				<UpsellingLayout />
-			) : (
-				<>
-					{!canOpenUpselling ? null : (
-						<>
-							{!modalIsOpen && (
-								<OBottomPopup
-									title={''}
-									open={openUpselling}
-									onClose={() => handleUpsellingPage()}
-								>
-									<TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-										<TopActions onPress={() => handleCloseUpsellingPage()}>
-											<OIcon src={theme.images.general.arrow_left} width={20} />
-										</TopActions>
-										{/* <TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
-											<OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-										</TopActions> */}
-									</TopBar>
-									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
-										<View style={{ paddingHorizontal: 40 }}>
-											<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-											<OrderSummary
-												cart={cart}
-												isCartPending={cart?.status === 2}
-											/>
-										</View>
-										<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
-										<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-											{upsellingProducts?.products?.length > 0 && 
-												<>
-													<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-													<UpsellingLayout />
-												</>
-											}
-											<CloseUpselling>
-												<OButton
-													imgRightSrc=''
-													text={t('CHECKOUT', 'Checkout')}
-													style={styles.closeUpsellingButton}
-													textStyle={{ color: theme.colors.white, fontSize: 14 }}
-													onClick={() => handleUpsellingPage()}
-												/>
-											</CloseUpselling>
-										</View>
-									</ScrollView>
-								</OBottomPopup>
-							)}
-						</>
-					)}
-				</>
-			)}
-			<OModal
-				open={modalIsOpen}
-				onClose={() => setModalIsOpen(false)}
-				entireModal
-				customClose
-			>
-				{actualProduct && (
-					<ProductForm
-						product={actualProduct}
-						businessId={actualProduct?.api?.businessId}
-						businessSlug={business.slug}
-						onSave={() => handleSaveProduct()}
-						onClose={() => setModalIsOpen(false)}
-					/>
-				)}
-			</OModal>
-		</>
-	)
-}
-
-export const UpsellingProducts = (props: UpsellingProductsParams) => {
-	const upsellingProductsProps = {
-		...props,
-		UIComponent: UpsellingProductsUI
-	}
-	return (
-		<UpsellingPageController {...upsellingProductsProps} />
-	)
-}

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

@@ -1,50 +0,0 @@
-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/franchises/src/components/UserDetails/index.tsx

@@ -1,134 +0,0 @@
-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,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-
-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
-	} = props
-
-	const theme = useTheme();
-
-	const [, t] = useLanguage()
-	const [{ user }] = useSession()
-	const userData = props.userData || (!formState.result.error && formState.result?.result) || user
-
-
-	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])
-
-	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} />
-					)}
-				</UDContainer>
-			)}
-		</>
-	)
-}
-
-export const UserDetails = (props: any) => {
-	const userDetailsProps = {
-		...props,
-		UIComponent: UserDetailsUI
-	}
-
-	return <UserFormController {...userDetailsProps} />
-}

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

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