ordering-ui-react-native 0.12.23 → 0.12.27

package/themes/instacart/src/components/TagSelector/index.tsx

@@ -1,94 +1,94 @@
-import React, { useEffect, useState } from 'react'
-import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
-import { useTheme } from 'styled-components/native';
-// import { TouchableOpacity } from 'react-native-gesture-handler';
-
-interface TProps {
-	items: Array<string>;
-	onUpdated?: (items: Array<TItem>) => void;
-	activeColor?: string;
-	normalColor?: string; 
-}
-
-interface TItem {
-	id: number;
-	label: string;
-	checked: boolean;
-}
-
-const TagSelector = (props: TProps) => {
-	const { items, onUpdated, activeColor, normalColor } = props;
-	const theme = useTheme();
-	const [tags, setTags] = useState<TItem[]>([]);
-
-	const onCheck = (tag: TItem, remove?: boolean) => {
-		let temp = [...tags];
-		temp[tag.id].checked = remove ? !temp[tag.id].checked : true;
-		setTags(temp);
-	}
-	
-	useEffect(() => {
-		const tagItems = items.map((str, idx) => 
-			{
-				return {
-					id: idx,
-					label: str,
-					checked: false,
-				}	
-			}
-		)
-		setTags(tagItems);
-	}, [items]);
-
-	useEffect(() => {
-		if (onUpdated) onUpdated(tags);
-	}, [tags]);
-
-	return (
-		<View style={tcStyles.wrapper}>
-			{tags.map((t, idx) => 
-				<TouchableOpacity key={idx} activeOpacity={0.8} onPress={() => onCheck(t)} 
-					style={{...tcStyles.item, backgroundColor: t.checked === true ? activeColor || 'blue' : normalColor || '#eee'}}>
-					<Text style={{fontSize: 10, color: t.checked ? 'white' : 'black'}}>{t.label}</Text>
-					{t.checked &&
-						<TouchableOpacity onPress={() => onCheck(t, true)} style={tcStyles.remove}>
-							<Image source={theme.images.general.close} style={tcStyles.removeIcon} />
-						</TouchableOpacity>
-					}
-				</TouchableOpacity>
-			)}
-		</View>
-	)
-}
-
-const tcStyles = StyleSheet.create({
-	wrapper: {
-		flexDirection: 'row',
-		flexShrink: 1,
-		flexWrap: 'wrap'
-	},
-	item: {
-		borderRadius: 20,
-		paddingHorizontal: 12,
-		paddingVertical: 5,
-		marginEnd: 10,
-		backgroundColor: '#EEE',
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'space-between',
-		marginBottom: 14,
-		minHeight: 24
-	},
-	remove: {
-		padding: 2,
-		marginStart: 12,
-	},
-	removeIcon: {
-		width: 7,
-		height: 7,
-		resizeMode: 'contain',
-		tintColor: 'white'
-	},
-});
-
-export default TagSelector;
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
+import { useTheme } from 'styled-components/native';
+// import { TouchableOpacity } from 'react-native-gesture-handler';
+
+interface TProps {
+	items: Array<string>;
+	onUpdated?: (items: Array<TItem>) => void;
+	activeColor?: string;
+	normalColor?: string; 
+}
+
+interface TItem {
+	id: number;
+	label: string;
+	checked: boolean;
+}
+
+const TagSelector = (props: TProps) => {
+	const { items, onUpdated, activeColor, normalColor } = props;
+	const theme = useTheme();
+	const [tags, setTags] = useState<TItem[]>([]);
+
+	const onCheck = (tag: TItem, remove?: boolean) => {
+		let temp = [...tags];
+		temp[tag.id].checked = remove ? !temp[tag.id].checked : true;
+		setTags(temp);
+	}
+	
+	useEffect(() => {
+		const tagItems = items.map((str, idx) => 
+			{
+				return {
+					id: idx,
+					label: str,
+					checked: false,
+				}	
+			}
+		)
+		setTags(tagItems);
+	}, [items]);
+
+	useEffect(() => {
+		if (onUpdated) onUpdated(tags);
+	}, [tags]);
+
+	return (
+		<View style={tcStyles.wrapper}>
+			{tags.map((t, idx) => 
+				<TouchableOpacity key={idx} activeOpacity={0.8} onPress={() => onCheck(t)} 
+					style={{...tcStyles.item, backgroundColor: t.checked === true ? activeColor || 'blue' : normalColor || '#eee'}}>
+					<Text style={{fontSize: 10, color: t.checked ? 'white' : 'black'}}>{t.label}</Text>
+					{t.checked &&
+						<TouchableOpacity onPress={() => onCheck(t, true)} style={tcStyles.remove}>
+							<Image source={theme.images.general.close} style={tcStyles.removeIcon} />
+						</TouchableOpacity>
+					}
+				</TouchableOpacity>
+			)}
+		</View>
+	)
+}
+
+const tcStyles = StyleSheet.create({
+	wrapper: {
+		flexDirection: 'row',
+		flexShrink: 1,
+		flexWrap: 'wrap'
+	},
+	item: {
+		borderRadius: 20,
+		paddingHorizontal: 12,
+		paddingVertical: 5,
+		marginEnd: 10,
+		backgroundColor: '#EEE',
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		marginBottom: 14,
+		minHeight: 24
+	},
+	remove: {
+		padding: 2,
+		marginStart: 12,
+	},
+	removeIcon: {
+		width: 7,
+		height: 7,
+		resizeMode: 'contain',
+		tintColor: 'white'
+	},
+});
+
+export default TagSelector;

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

@@ -1,230 +1,230 @@
-import React, { useState, useEffect } from 'react'
-import { PanResponder, StyleSheet, useWindowDimensions, View } from 'react-native'
-import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import {
-	UpsellingPage as UpsellingPageController,
-	useUtils,
-	useLanguage
-} from 'ordering-components/native'
-import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
-import { UpsellingProductsParams } from '../../types'
-import {
-	Container,
-	UpsellingContainer,
-	Item,
-	Details,
-	AddButton,
-	CloseUpselling
-} from './styles'
-import { ProductForm } from '../ProductForm';
-import { useTheme } from 'styled-components/native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import NavBar from '../NavBar'
-
-const UpsellingProductsUI = (props: UpsellingProductsParams) => {
-	const {
-		isCustomMode,
-		upsellingProducts,
-		business,
-		handleUpsellingPage,
-		openUpselling,
-		canOpenUpselling,
-		setCanOpenUpselling
-	} = props
-
-	const { height, width } = useWindowDimensions();
-	const { bottom, top } = useSafeAreaInsets();
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		imageStyle: {
-			width: ((width - 80) * 0.5) - 40,
-			height: ((width - 80) * 0.5) - 40,
-			resizeMode: 'cover',
-			borderRadius: 3
-		},
-		closeUpsellingButton: {
-			borderRadius: 3,
-			borderColor: theme.colors.primary,
-			backgroundColor: theme.colors.primary,
-			height: 42,
-		}
-	})
-
-	const [actualProduct, setActualProduct] = useState<any>(null)
-	const [modalIsOpen, setModalIsOpen] = useState(false)
-	const [productSorts, setSorts] = useState<any>([]);
-	const [{ parsePrice }] = useUtils()
-	const [, t] = useLanguage()
-
-	useEffect(() => {
-		if (!isCustomMode) {
-			if (upsellingProducts?.products?.length && !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)
-	}
-
-	// useEffect(() => {
-	// 	if (upsellingProducts?.products.length > 0) {
-	// 		const ary = [];
-	// 		while (upsellingProducts?.products.length > 0) {
-	// 			ary.push(upsellingProducts?.products.splice(0, 2));
-	// 		}
-	// 		setSorts(ary);
-	// 	}
-	// }, [upsellingProducts?.products]);
-
-	const UpsellingLayout = () => {
-		return (
-			<Container>
-				<UpsellingContainer
-					showsVerticalScrollIndicator={true}
-					style={{ height: height - bottom - top - 180 }}
-				>
-					{
-						!upsellingProducts.loading && (
-							<>
-								{
-									!upsellingProducts.error ? upsellingProducts.products.map((product: any, idx: number) => (
-										<React.Fragment key={`up-key-${idx}`}>
-											{idx % 2 == 1 && (
-												<View key={upsellingProducts.products[idx].id} style={{ flexDirection: 'row' }}>
-													<Item activeOpacity={1}	onPress={() => handleFormProduct(upsellingProducts.products[idx - 1])}>
-														<OIcon
-															url={upsellingProducts.products[idx - 1].images}
-															style={styles.imageStyle}
-														/>
-														<Details>
-															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[idx - 1].price)}</OText>
-															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx - 1].name}</OText>
-															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx - 1]?.description}</OText>
-														</Details>
-														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[idx - 1])}>
-															<OIcon src={theme.images.general.plus_circle} width={16} />
-														</AddButton>
-													</Item>
-
-													<Item	activeOpacity={1} onPress={() => handleFormProduct(upsellingProducts.products[idx])}>
-														<OIcon
-															url={upsellingProducts.products[idx].images}
-															style={styles.imageStyle}
-														/>
-														<Details>
-															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[idx].price)}</OText>
-															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx].name}</OText>
-															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx]?.description}</OText>
-														</Details>
-														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[idx])}>
-															<OIcon src={theme.images.general.plus_circle} width={16} />
-														</AddButton>
-													</Item>
-												</View>
-											)}
-											{upsellingProducts.products.length % 2 == 1 && upsellingProducts.products.length - idx === 1 && (
-												<View key={idx} style={{ flexDirection: 'row' }}>
-													<Item	key={upsellingProducts.products[upsellingProducts.products.length - 1].id} activeOpacity={1}
-													 onPress={() => handleFormProduct(upsellingProducts.products[upsellingProducts.products.length - 1])}>
-														<OIcon
-															url={upsellingProducts.products[upsellingProducts.products.length - 1].images}
-															style={styles.imageStyle}
-														/>
-														<Details>
-															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[upsellingProducts.products.length - 1].price)}</OText>
-															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[upsellingProducts.products.length - 1].name}</OText>
-															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[upsellingProducts.products.length - 1]?.description}</OText>
-														</Details>
-														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[upsellingProducts.products.length - 1])}>
-															<OIcon src={theme.images.general.plus_circle} width={16} />
-														</AddButton>
-													</Item>
-												</View>
-											)}
-										</React.Fragment>
-									)) : (
-										<OText size={12}>
-											{upsellingProducts.message}
-										</OText>
-									)
-								}
-							</>
-						)
-					}
-				</UpsellingContainer>
-			</Container>
-		)
-	}
-	return (
-		<>
-			{isCustomMode ? (
-				<UpsellingLayout />
-			) : (
-				<>
-					{!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
-						<>
-							{!modalIsOpen && (
-								<OBottomPopup
-									open={openUpselling}
-									onClose={() => handleUpsellingPage()}
-									title={t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
-								>
-									<UpsellingLayout />
-									<CloseUpselling style={{ paddingBottom: bottom + 12 }}>
-										<OButton
-											imgRightSrc=''
-											text={t('NO_THANKS', 'No Thanks')}
-											style={styles.closeUpsellingButton}
-											onClick={() => handleUpsellingPage()}
-											textStyle={{ color: theme.colors.white, fontSize: 14, lineHeight: 21, fontWeight: '500' }}
-										/>
-									</CloseUpselling>
-								</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} />
-	)
-}
+import React, { useState, useEffect } from 'react'
+import { PanResponder, StyleSheet, useWindowDimensions, View } from 'react-native'
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import {
+	UpsellingPage as UpsellingPageController,
+	useUtils,
+	useLanguage
+} from 'ordering-components/native'
+import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
+import { UpsellingProductsParams } from '../../types'
+import {
+	Container,
+	UpsellingContainer,
+	Item,
+	Details,
+	AddButton,
+	CloseUpselling
+} from './styles'
+import { ProductForm } from '../ProductForm';
+import { useTheme } from 'styled-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import NavBar from '../NavBar'
+
+const UpsellingProductsUI = (props: UpsellingProductsParams) => {
+	const {
+		isCustomMode,
+		upsellingProducts,
+		business,
+		handleUpsellingPage,
+		openUpselling,
+		canOpenUpselling,
+		setCanOpenUpselling
+	} = props
+
+	const { height, width } = useWindowDimensions();
+	const { bottom, top } = useSafeAreaInsets();
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		imageStyle: {
+			width: ((width - 80) * 0.5) - 40,
+			height: ((width - 80) * 0.5) - 40,
+			resizeMode: 'cover',
+			borderRadius: 3
+		},
+		closeUpsellingButton: {
+			borderRadius: 3,
+			borderColor: theme.colors.primary,
+			backgroundColor: theme.colors.primary,
+			height: 42,
+		}
+	})
+
+	const [actualProduct, setActualProduct] = useState<any>(null)
+	const [modalIsOpen, setModalIsOpen] = useState(false)
+	const [productSorts, setSorts] = useState<any>([]);
+	const [{ parsePrice }] = useUtils()
+	const [, t] = useLanguage()
+
+	useEffect(() => {
+		if (!isCustomMode) {
+			if (upsellingProducts?.products?.length && !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)
+	}
+
+	// useEffect(() => {
+	// 	if (upsellingProducts?.products.length > 0) {
+	// 		const ary = [];
+	// 		while (upsellingProducts?.products.length > 0) {
+	// 			ary.push(upsellingProducts?.products.splice(0, 2));
+	// 		}
+	// 		setSorts(ary);
+	// 	}
+	// }, [upsellingProducts?.products]);
+
+	const UpsellingLayout = () => {
+		return (
+			<Container>
+				<UpsellingContainer
+					showsVerticalScrollIndicator={true}
+					style={{ height: height - bottom - top - 180 }}
+				>
+					{
+						!upsellingProducts.loading && (
+							<>
+								{
+									!upsellingProducts.error ? upsellingProducts.products.map((product: any, idx: number) => (
+										<React.Fragment key={`up-key-${idx}`}>
+											{idx % 2 == 1 && (
+												<View key={upsellingProducts.products[idx].id} style={{ flexDirection: 'row' }}>
+													<Item activeOpacity={1}	onPress={() => handleFormProduct(upsellingProducts.products[idx - 1])}>
+														<OIcon
+															url={upsellingProducts.products[idx - 1].images}
+															style={styles.imageStyle}
+														/>
+														<Details>
+															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[idx - 1].price)}</OText>
+															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx - 1].name}</OText>
+															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx - 1]?.description}</OText>
+														</Details>
+														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[idx - 1])}>
+															<OIcon src={theme.images.general.plus_circle} width={16} />
+														</AddButton>
+													</Item>
+
+													<Item	activeOpacity={1} onPress={() => handleFormProduct(upsellingProducts.products[idx])}>
+														<OIcon
+															url={upsellingProducts.products[idx].images}
+															style={styles.imageStyle}
+														/>
+														<Details>
+															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[idx].price)}</OText>
+															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx].name}</OText>
+															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[idx]?.description}</OText>
+														</Details>
+														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[idx])}>
+															<OIcon src={theme.images.general.plus_circle} width={16} />
+														</AddButton>
+													</Item>
+												</View>
+											)}
+											{upsellingProducts.products.length % 2 == 1 && upsellingProducts.products.length - idx === 1 && (
+												<View key={idx} style={{ flexDirection: 'row' }}>
+													<Item	key={upsellingProducts.products[upsellingProducts.products.length - 1].id} activeOpacity={1}
+													 onPress={() => handleFormProduct(upsellingProducts.products[upsellingProducts.products.length - 1])}>
+														<OIcon
+															url={upsellingProducts.products[upsellingProducts.products.length - 1].images}
+															style={styles.imageStyle}
+														/>
+														<Details>
+															<OText size={12} color={theme.colors.textPrimary}>{parsePrice(upsellingProducts.products[upsellingProducts.products.length - 1].price)}</OText>
+															<OText size={10} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[upsellingProducts.products.length - 1].name}</OText>
+															<OText size={8} numberOfLines={2} ellipsizeMode='tail'>{upsellingProducts.products[upsellingProducts.products.length - 1]?.description}</OText>
+														</Details>
+														<AddButton onPress={() => handleFormProduct(upsellingProducts.products[upsellingProducts.products.length - 1])}>
+															<OIcon src={theme.images.general.plus_circle} width={16} />
+														</AddButton>
+													</Item>
+												</View>
+											)}
+										</React.Fragment>
+									)) : (
+										<OText size={12}>
+											{upsellingProducts.message}
+										</OText>
+									)
+								}
+							</>
+						)
+					}
+				</UpsellingContainer>
+			</Container>
+		)
+	}
+	return (
+		<>
+			{isCustomMode ? (
+				<UpsellingLayout />
+			) : (
+				<>
+					{!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
+						<>
+							{!modalIsOpen && (
+								<OBottomPopup
+									open={openUpselling}
+									onClose={() => handleUpsellingPage()}
+									title={t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+								>
+									<UpsellingLayout />
+									<CloseUpselling style={{ paddingBottom: bottom + 12 }}>
+										<OButton
+											imgRightSrc=''
+											text={t('NO_THANKS', 'No Thanks')}
+											style={styles.closeUpsellingButton}
+											onClick={() => handleUpsellingPage()}
+											textStyle={{ color: theme.colors.white, fontSize: 14, lineHeight: 21, fontWeight: '500' }}
+										/>
+									</CloseUpselling>
+								</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} />
+	)
+}