ordering-ui-react-native 0.12.57 → 0.12.61

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

@@ -1,78 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const WrapHeader = styled.View`
-  position: relative;
-  z-index: 1;
-`
-
-export const TopHeader = styled.View`
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
-  padding-horizontal: 40px;
-`
-
-export const ProductHeader = styled.ImageBackground`
-  flex-direction: row;
-  width: 100%;
-  position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: contain;
-  min-height: 200px;
-  z-index: 0;
-`
-
-export const WrapContent = styled.View`
-  padding: 26px 40px;
-  position: relative;
-  bottom: 20px;
-  background-color: white;
-  z-index: 100;
-`
-
-export const ProductTitle = styled.View`
-  justify-content: flex-start;
-  padding-bottom: 7px;
-`
-
-export const ProductDescription = styled.View`
-  margin-bottom: 30px;
-`
-
-export const ProductEditions = styled.View`
-
-`
-
-export const SectionTitle = styled.View`
-  padding: 15px 0px;
-`
-
-export const WrapperIngredients = styled.View`
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-`
-
-export const WrapperSubOption = styled.View`
-`
-
-export const ProductComment = styled.View`
-`
-
-export const ProductActions = styled.View`
-	min-height: 70px;
-  padding: 12px 40px;
-  width: 100%;
-  flex-direction: row;
-  background-color: #FFF;
-  z-index: 1000;
-  align-items: center;
-  justify-content: space-between;
-  border-top-width: 1px;
-  border-top-color: ${(props: any) => props.theme.colors.border};
-`
-export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: -40px;
-`;

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

@@ -1,43 +0,0 @@
-import React from 'react'
-import { ProductIngredient as ProductIngredientController } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { Container } from './styles'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { View } from 'react-native'
-import { OText } from '../shared'
-
-const ProductIngredientUI = (props: any) => {
-	const {
-		state,
-		ingredient,
-		toggleSelect
-	} = props
-
-	const theme = useTheme();
-
-	return (
-		<Container onPress={() => toggleSelect()}>
-			<View>
-				{state?.selected ? (
-					<MaterialCommunityIcon name='checkbox-marked' color={theme.colors.primary} size={24} />
-				) : (
-					<MaterialCommunityIcon name='checkbox-blank-outline' color={theme.colors.backgroundDark} size={24} />
-				)}
-			</View>
-			<OText mLeft={10}>
-				{ingredient.name}
-			</OText>
-		</Container>
-	)
-}
-
-export const ProductIngredient = (props: any) => {
-	const productIngredientProps = {
-		...props,
-		UIComponent: ProductIngredientUI
-	}
-
-	return (
-		<ProductIngredientController {...productIngredientProps} />
-	)
-}

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

@@ -1,7 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const Container = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-  padding: 10px;
-`

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

@@ -1,276 +0,0 @@
-import React, { useState } from 'react'
-import { View, Animated, StyleSheet, Platform, TouchableOpacity } from 'react-native'
-import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import RNPickerSelect from 'react-native-picker-select'
-
-import {
-	Accordion,
-	AccordionSection,
-	ProductInfo,
-	ProductQuantity,
-	ContentInfo,
-	ProductImage,
-	AccordionContent,
-	ProductOptionsList,
-	ProductOption,
-	ProductSubOption,
-	ProductComment
-} from './styles'
-import { OIcon, OText, OAlert } from '../shared'
-
-import { ProductItemAccordionParams } from '../../types'
-
-export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
-
-	const {
-		isCartPending,
-		isCartProduct,
-		product,
-		changeQuantity,
-		getProductMax,
-		onDeleteProduct,
-		onEditProduct,
-		isFromCheckout,
-	} = props
-
-	const theme = useTheme();
-
-
-	const pickerStyle = StyleSheet.create({
-		inputAndroid: {
-			width: 27,
-			textAlign: 'center',
-			overflow: 'visible',
-			fontSize: 12,
-			height: 20,
-			padding: 0,
-			color: theme.colors.textNormal
-		},
-		inputIOS: {
-			width: 27,
-			textAlign: 'center',
-			overflow: 'visible',
-			fontSize: 12,
-		},
-		icon: {
-			position: 'absolute',
-			zIndex: 1,
-			top: -4,
-			end: -4,
-		},
-		placeholder: {
-			color: theme.colors.secundaryContrast
-		},
-	})
-
-
-	const [, t] = useLanguage()
-	const [orderState] = useOrder()
-	const [{ parsePrice, optimizeImage }] = useUtils()
-
-	const [isActive, setActiveState] = useState(false)
-	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
-	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
-
-	const productInfo = () => {
-		if (isCartProduct) {
-			const ingredients = JSON.parse(JSON.stringify(Object.values(product.ingredients ?? {})))
-			let options = JSON.parse(JSON.stringify(Object.values(product.options ?? {})))
-
-			options = options.map((option: any) => {
-				option.suboptions = Object.values(option.suboptions ?? {})
-				return option
-			})
-			return {
-				...productInfo,
-				ingredients,
-				options
-			}
-		}
-		return product
-	}
-
-	/* const toggleAccordion = () => {
-		if ((!product?.valid_menu && isCartProduct)) return
-		if (isActive) {
-		  Animated.timing(setHeight.height, {
-			 toValue: 100,
-			 duration: 500,
-			 easing: Easing.linear,
-			 useNativeDriver: false,
-		  }).start()
-		} else {
-		  setHeightState({height: new Animated.Value(0)})
-		}
-	 }*/
-
-	const handleChangeQuantity = (value: string) => {
-		if (!orderState.loading) {
-			if (parseInt(value) === 0) {
-				onDeleteProduct && onDeleteProduct(product)
-			} else {
-				changeQuantity && changeQuantity(product, parseInt(value))
-			}
-		}
-	}
-
-	const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
-		const pos = position ? `(${position})` : ''
-		return `${quantity} x ${name} ${pos} +${price}`
-	}
-
-	/*useEffect(() => {
-	  toggleAccordion()
-	}, [isActive])*/
-
-	const productOptions = getProductMax && [...Array(getProductMax(product) + 1),].map((_: any, opt: number) => {
-		return {
-			label: opt === 0 ? t('REMOVE', 'Remove') : opt.toString(),
-			value: opt.toString()
-		}
-	})
-
-	return (
-		<AccordionSection>
-			<Accordion
-				isValid={product?.valid ?? true}
-				onPress={() => (!product?.valid_menu && isCartProduct)
-					? {}
-					: setActiveState(!isActive)}
-				activeOpacity={1}
-			>
-				<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-          <ContentInfo style={{alignItems: 'center'}}>
-						{product?.images && (
-							<ProductImage>
-								{isFromCheckout ? (
-									<OIcon url={optimizeImage(product?.images, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
-								) : (
-									<OIcon url={optimizeImage(product?.images, 'h_100,c_limit')} style={styles.productImage} />
-								)}
-							</ProductImage>
-						)}
-						{isCartProduct && !isCartPending && getProductMax && (
-							<ProductInfo>
-								<RNPickerSelect
-									items={productOptions}
-									onValueChange={handleChangeQuantity}
-									value={product.quantity.toString()}
-									style={pickerStyle}
-									useNativeAndroidPickerStyle={false}
-									placeholder={{}}
-									Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
-									disabled={orderState.loading}
-								/>
-							</ProductInfo>
-						)}
-						{isFromCheckout && (
-							<ProductQuantity>
-								<OText size={12} lineHeight={18}>
-									{product?.quantity}
-								</OText>
-							</ProductQuantity>
-						)}
-						<View style={{ flex: 1 }}>
-							<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
-						</View>
-						<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end' }}>
-							<View style={{ flexDirection: 'row' }}>
-								<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
-								{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
-									<MaterialCommunityIcon name='chevron-down' size={18} />
-								)}
-							</View>
-							<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
-								{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-									<TouchableOpacity onPress={() => onEditProduct(product)} style={{ marginEnd: 7 }}>
-										<OIcon
-											src={theme.images.general.pencil}
-											width={16}
-											color={theme.colors.textSecondary}
-										/>
-									</TouchableOpacity>
-								)}
-								{onDeleteProduct && isCartProduct && !isCartPending && (
-									<OAlert
-										title={t('DELETE_PRODUCT', 'Delete Product')}
-										message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
-										onAccept={() => onDeleteProduct(product)}
-									>
-										<OIcon
-											src={theme.images.general.trash}
-											width={17}
-											color={theme.colors.textSecondary}
-										/>
-									</OAlert>
-								)}
-							</View>
-						</View>
-					</ContentInfo>
-				</View>
-
-				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
-					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<OText size={20} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 10 }}>
-							{t('NOT_AVAILABLE', 'Not available')}
-						</OText>
-					)}
-			</Accordion>
-
-			<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
-				<Animated.View>
-					<AccordionContent>
-						{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
-							<ProductOptionsList>
-								<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
-								{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
-									<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
-								))}
-							</ProductOptionsList>
-						)}
-						{productInfo().options.length > 0 && (
-							<ProductOptionsList>
-								{productInfo().options.map((option: any, i: number) => (
-									<ProductOption key={option.id + i}>
-										<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
-										{option.suboptions.map((suboption: any) => (
-											<ProductSubOption key={suboption.id}>
-												<OText size={10} color={theme.colors.textThird}>
-													{getFormattedSubOptionName({
-														quantity: suboption.quantity,
-														name: suboption.name,
-														position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-														price: parsePrice(suboption.price)
-													})}
-												</OText>
-											</ProductSubOption>
-										))}
-									</ProductOption>
-								))}
-							</ProductOptionsList>
-						)}
-						{product.comment && (
-							<ProductComment>
-								<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
-								<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
-							</ProductComment>
-						)}
-					</AccordionContent>
-				</Animated.View>
-			</View>
-		</AccordionSection>
-	)
-}
-
-const styles = StyleSheet.create({
-	productImage: {
-		borderRadius: 7.6,
-		width: 48,
-		height: 48
-	},
-	test: {
-		overflow: 'hidden',
-	}
-})

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

@@ -1,57 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const AccordionSection = styled.View`
-  background: #FFF;
-  padding-vertical: 10px;
-`
-
-export const Accordion = styled.TouchableOpacity`
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-
-  ${(props: any) => !props.isValid && css`
-    background-color: rgba(0, 0, 0, 0.1);
-  `}
-`
-
-export const ProductInfo = styled.View`
-	margin-horizontal: 7px;
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-	padding: 4px 12px 4px 0px;
-	border-radius: 7.6px;
-`
-
-export const ProductQuantity = styled.View`
-	background-color: ${(props: any) => props.theme.colors.clear};
-	margin-horizontal: 7px;
-	min-width: 16px;
-	align-items: center;
-`
-
-export const ContentInfo = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  overflow: hidden;
-`
-
-export const ProductImage = styled.View`
-`
-
-export const AccordionContent = styled.View`
-  overflow: hidden;
-`
-
-export const ProductOptionsList = styled.View`
-  margin-top: 20px;
-  margin-left: 20px;
-`
-
-export const ProductOption = styled.View``
-
-export const ProductSubOption = styled.View`
-  margin-left: 10px;
-`
-
-export const ProductComment = styled.View``

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

@@ -1,50 +0,0 @@
-import React from 'react'
-import { ProductOption as ProductOptionController, useLanguage } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import {
-	Container,
-	WrapHeader,
-} from './styles'
-import { OText } from '../shared'
-
-const ProductOptionUI = (props: any) => {
-	const {
-		children,
-		option,
-		error
-	} = props
-
-	const theme = useTheme();
-
-	const [, t] = useLanguage()
-
-	let maxMin = `(${t('MIN', 'Min')}: ${option.min} / ${t('MAX', 'Max')}: ${option.max})`
-	if (option.min === 1 && option.max === 1) {
-		maxMin = t('REQUIRED', 'Required')
-	} else if (option.min === 0 && option.max > 0) {
-		maxMin = `(${t('MAX', 'Max')}: ${option.max})`
-	} else if (option.min > 0 && option.max === 0) {
-		maxMin = `(${t('MIN', 'Min')}: ${option.min})`
-	}
-
-	return (
-		<Container style={{ color: error ? 'orange' : theme.colors.white }}>
-			<WrapHeader>
-				<OText size={16} lineHeight={24} weight={'600'}>{option.name}</OText>
-				<OText color={theme.colors.red}>{maxMin}</OText>
-			</WrapHeader>
-			{children}
-		</Container>
-	)
-}
-
-export const ProductOption = (props: any) => {
-	const productOptionProps = {
-		...props,
-		UIComponent: ProductOptionUI
-	}
-
-	return (
-		<ProductOptionController {...productOptionProps} />
-	)
-}

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-`
-
-export const WrapHeader = styled.View`
-  padding: 15px 0px;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-`

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

@@ -1,146 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import {
-	useUtils,
-	useLanguage,
-	ProductOptionSuboption as ProductSubOptionController,
-} from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native'
-
-import {
-	Container,
-	IconControl,
-	QuantityControl,
-	Checkbox,
-	PositionControl,
-	Circle
-} from './styles'
-import { OIcon, OText } from '../shared'
-
-export const ProductOptionSubOptionUI = (props: any) => {
-	const {
-		state,
-		increment,
-		decrement,
-		balance,
-		option,
-		suboption,
-		toggleSelect,
-		changePosition,
-		disabled
-	} = props
-
-	const theme = useTheme();
-
-	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
-	const [showMessage, setShowMessage] = useState(false)
-
-	const handleSuboptionClick = () => {
-		toggleSelect()
-		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
-			setShowMessage(true)
-		}
-	}
-
-	useEffect(() => {
-		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
-			setShowMessage(false)
-		}
-	}, [balance])
-
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
-	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-
-	return (
-		<Container disabled={disabled}>
-			<IconControl onPress={() => handleSuboptionClick()}>
-				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-					state?.selected ? (
-						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
-					) : (
-						<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-					)
-				) : (
-					state?.selected ? (
-						<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
-					) : (
-						<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-					)
-				)}
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
-					{suboption?.name}
-				</OText>
-			</IconControl>
-			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && (
-				<QuantityControl>
-					<Checkbox disabled={state.quantity === 0} onPress={decrement}>
-						<OIcon
-							src={theme.images.general.minus}
-							width={16}
-							color={state.quantity === 0 ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-					<OText mLeft={5} mRight={5}>
-						{state.quantity}
-					</OText>
-					<Checkbox disabled={disableIncrement} onPress={increment}>
-						<OIcon
-							src={theme.images.general.plus}
-							width={16}
-							color={disableIncrement ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-				</QuantityControl>
-			)}
-			{option?.with_half_option && (
-				<PositionControl>
-					<Circle onPress={() => changePosition('left')}>
-						<OIcon
-							src={theme.images.general.half_l}
-							color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-							style={styles.inverse}
-						/>
-					</Circle>
-					<Circle onPress={() => changePosition('whole')}>
-						<OIcon
-							src={theme.images.general.half_f}
-							color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-					<Circle onPress={() => changePosition('right')}>
-						<OIcon
-							src={theme.images.general.half_r}
-							color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-				</PositionControl>
-			)
-			}
-			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-				+ {parsePrice(price)}
-			</OText>
-		</Container>
-	)
-}
-
-const styles = StyleSheet.create({
-	inverse: {
-		transform: [{ rotateY: '180deg' }]
-	}
-})
-
-export const ProductOptionSubOption = (props: any) => {
-	const productOptionSubOptionProps = {
-		...props,
-		UIComponent: ProductOptionSubOptionUI
-	}
-
-	return (
-		<ProductSubOptionController {...productOptionSubOptionProps} />
-	)
-}

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

@@ -1,32 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const Container = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 0;
-`
-
-export const IconControl = styled.TouchableOpacity`
-  flex-direction: row;
-  flex: 1;
-  align-items: center;
-`
-
-export const QuantityControl = styled.View`
-  flex-direction: row;
-  align-items: center;
-  margin-horizontal: 5px;
-`
-
-export const PositionControl = styled.View`
-  flex-direction: row;
-  align-items: center;
-  margin-right: 5px;
-`
-
-export const Checkbox = styled.TouchableOpacity`
-`
-
-export const Circle = styled.TouchableOpacity`
-`