ordering-ui-react-native 0.15.31 → 0.15.33-release

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

@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useState } from 'react';
-
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
@@ -176,6 +175,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [optionLayout, setOptionLayout] = useState<any>({})
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
+	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -279,39 +279,6 @@ export const ProductOptionsUI = (props: any) => {
 		setOptionLayout(_optionLayout)
 	}
 
-	useEffect(() => {
-		const imageList: any = []
-		const videoList: any = []
-		product?.images && imageList.push(product.images)
-		if (product?.gallery && product?.gallery.length > 0) {
-			for (const img of product?.gallery) {
-				if (img?.file) {
-					imageList.push(img?.file)
-				}
-				if (img?.video) {
-					const keys = img?.video.split('/')
-					let _videoId = keys[keys.length - 1]
-					if (_videoId.includes('watch')) {
-						const __url = _videoId.split('=')[1]
-						_videoId = __url
-					}
-					if (_videoId.includes('?')) {
-						const __url = _videoId.split('?')[0]
-						_videoId = __url
-					}
-					videoList.push(_videoId)
-				}
-			}
-		}
-		const gallery = imageList.concat(videoList)
-		setGallery(gallery)
-
-		if (product?.weight && product?.weight_unit) {
-			setIsHaveWeight(true)
-			setPricePerWeightUnit(product?.price / product?.weight)
-		}
-	}, [product])
-
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
@@ -319,28 +286,9 @@ export const ProductOptionsUI = (props: any) => {
 
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
-			{product?.ingredients.length > 0 && (
-				<TouchableOpacity
-					key={`eopt_all_00`}
-					onPress={() => setSelectedOpt(-1)}
-					style={[
-						styles.extraItem,
-						{
-							borderBottomColor:
-								selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-						},
-					]}>
-					<OText
-						color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-						size={selOpt == -1 ? 14 : 12}
-						weight={selOpt == -1 ? '600' : 'normal'}>
-						{t('INGREDIENTS', 'Ingredients')}
-					</OText>
-				</TouchableOpacity>
-			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}
@@ -370,6 +318,54 @@ export const ProductOptionsUI = (props: any) => {
 		? () => navigation.goBack()
 		: () => navigation.navigate('Business', { store: props.businessSlug })
 
+	useEffect(() => {
+		if (isScrollAvailable) {
+			setIsScrollAvailable(null)
+			scrollDown(isScrollAvailable)
+		}
+	}, [errors])
+
+	useEffect(() => {
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
+		if (product?.gallery && product?.gallery.length > 0) {
+			for (const img of product?.gallery) {
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					let _videoId = keys[keys.length - 1]
+
+					if (_videoId.includes('watch')) {
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
+					} else if (_videoId.includes('?')) {
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
+					}
+
+					if (_videoId.search(/&/i) >= 0) {
+						_videoId = _videoId.split('&')[0]
+					} else if (_videoId.search(/\?/i) >= 0) {
+						_videoId = _videoId.split('?')[0]
+					}
+					if ((_videoId.length === 11)) {
+						videoList.push(_videoId)
+					}
+				}
+			}
+		}
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
+
+		if (product?.weight && product?.weight_unit) {
+			setIsHaveWeight(true)
+			setPricePerWeightUnit(product?.price / product?.weight)
+		}
+	}, [product])
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -658,6 +654,25 @@ export const ProductOptionsUI = (props: any) => {
 												{t('ALL', 'All')}
 											</OText>
 										</TouchableOpacity>
+										{product?.ingredients.length > 0 && (
+											<TouchableOpacity
+												key={`eopt_all_00`}
+												onPress={() => setSelectedOpt(-1)}
+												style={[
+													styles.extraItem,
+													{
+														borderBottomColor:
+															selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+													},
+												]}>
+												<OText
+													color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+													size={selOpt == -1 ? 14 : 12}
+													weight={selOpt == -1 ? '600' : 'normal'}>
+													{t('INGREDIENTS', 'Ingredients')}
+												</OText>
+											</TouchableOpacity>
+										)}
 										{product?.extras.map((extra: any) =>
 											<ExtraOptions key={extra.id} options={extra.options} />
 										)}
@@ -687,8 +702,8 @@ export const ProductOptionsUI = (props: any) => {
 													</WrapperIngredients>
 												</View>
 											)}
-											{product?.extras.map((extra: any) =>
-												extra.options.map((option: any) => {
+											{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 													const currentState =
 														productCart.options[`id:${option.id}`] || {};
 													return (
@@ -704,7 +719,7 @@ export const ProductOptionsUI = (props: any) => {
 																				backgroundColor: isError(option.id),
 																				borderRadius: 7.6
 																			}}>
-																			{option.suboptions.map(
+																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																				(suboption: any) => {
 																					const currentState =
 																						productCart.options[
@@ -731,7 +746,7 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
-																							scrollDown={scrollDown}
+																							setIsScrollAvailable={setIsScrollAvailable}
 																							error={errors[`id:${option.id}`]}
 																						/>
 																					);
@@ -772,7 +787,7 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													{product?.extras.map((extra: any) =>
-														extra.options.map((option: any) => {
+														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 															if (
 																option.id == selOpt ||
 																(hasRespected(
@@ -797,7 +812,7 @@ export const ProductOptionsUI = (props: any) => {
 																								option.id,
 																							),
 																						}}>
-																						{option.suboptions.map(
+																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																							(suboption: any) => {
 																								const currentState =
 																									productCart.options[

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

@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
 `
 
 export const TopActions = styled.TouchableOpacity`
-	height: 44px;
+	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
+  width: 80px;
 `;
 
 export const TopHeader = styled.View`
@@ -48,7 +49,6 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
 `
 
 export const SectionTitle = styled.View`

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

@@ -40,7 +40,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 			color: theme.colors.textNormal
 		},
 		inputIOS: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,

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

@@ -28,36 +28,40 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		error,
-		scrollDown
+		setIsScrollAvailable
 	} = props
 
+	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
+	
 	const theme = useTheme();
-
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
+	const [isDirty, setIsDirty] = useState(false)
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-
-		if (balance === option?.max - 1 && !state.selected) {
-			scrollDown(option?.id)
-		}
+		setIsDirty(true)
 
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
 	}
 
+	useEffect(() => {
+		if (balance === option?.max && state?.selected && isDirty) {
+			setIsDirty(false)
+			setIsScrollAvailable(option?.id)
+		}
+	}, [state?.selected])
+
 	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 (
 		<View>
 			<Container onPress={() => handleSuboptionClick()}>
@@ -130,9 +134,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						</>
 					)}
 				</PositionControl>
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-					+ {parsePrice(price)}
-				</OText>
+				{price > 0 && (
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+						+ {parsePrice(price)}
+					</OText>
+				)}
 			</Container>
 			{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>}
 		</View>

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

@@ -0,0 +1,250 @@
+import React, { useState } from 'react'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
+import {
+    PromotionsContainer,
+    SingleOfferContainer,
+    OfferInformation,
+    SearchBarContainer,
+    SingleBusinessOffer,
+    AvailableBusinesses,
+    OfferData,
+    Code,
+    BusinessInfo
+} from './styles'
+import { SearchBar } from '../SearchBar'
+import NavBar from '../NavBar'
+import { useTheme } from 'styled-components/native';
+import { OButton, OIcon, OModal, OText } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { NotFoundSource } from '../NotFoundSource'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { PromotionParams } from '../../types'
+import { Container } from '../../layouts/Container'
+
+const PromotionsUI = (props: PromotionParams) => {
+    const {
+        navigation,
+        offersState,
+        handleSearchValue,
+        searchValue,
+        loadOffers,
+        offerSelected,
+        setOfferSelected
+    } = props
+
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        productStyle: {
+            width: 75,
+            height: 75,
+            borderRadius: 7.6
+        },
+        buttonStyle: {
+            width: 55,
+            height: 25,
+            paddingLeft: 0,
+            paddingRight: 0
+        },
+        offerTitle: {
+            fontSize: 12
+        },
+        offerDescription: {
+            color: '#909BA9',
+            fontSize: 10
+        },
+        offerExtraInfo: {
+            fontSize: 10
+        },
+        modalButtonStyle: {
+            width: 100,
+            height: 35,
+            paddingLeft: 0,
+            paddingRight: 0,
+            borderRadius: 7.6
+        }
+    });
+
+    const [, t] = useLanguage()
+    const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
+    const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
+
+    const handleClickOffer = (offer: any) => {
+        setOpenModal(true)
+        setOfferSelected(offer)
+    }
+
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
+    }
+
+    const handleOnRefresh = () => {
+        if (!offersState.loading) {
+            loadOffers();
+        }
+    }
+
+    const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+    const targetString = offerSelected?.target === 1
+        ? t('SUBTOTAL', 'Subtotal')
+        : offerSelected?.target === 2
+            ? t('DELIVERY_FEE', 'Delivery fee')
+            : t('SERVICE_FEE', 'Service fee')
+
+    return (
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
+            <NavBar
+                title={t('PROMOTIONS', 'Promotions')}
+                titleAlign={'center'}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
+            />
+            <PromotionsContainer>
+                <SearchBarContainer>
+                    <SearchBar
+                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                        onSearch={handleSearchValue}
+                    />
+                </SearchBarContainer>
+
+                {offersState?.loading && (
+                    <>
+                        {[...Array(5).keys()].map((key, i) => (
+                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                                <PlaceholderLine height={10} width={45} />
+                                <PlaceholderLine height={10} width={60} />
+                                <PlaceholderLine height={10} width={75} />
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                    <NotFoundSource
+                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                    />
+                )}
+                <ScrollView>
+                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+                        <SingleOfferContainer key={offer.id}>
+                            <OfferInformation>
+                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                                {!!offer?.description && (
+                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                                )}
+                                <OText style={styles.offerExtraInfo}>
+                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+                                </OText>
+                                <AvailableBusinesses>
+                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                        {t('APPLY_FOR', 'Apply for')}:
+                                        {offer.businesses.map((business: any, i: number) => (
+                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                        ))}
+                                    </OText>
+                                </AvailableBusinesses>
+                            </OfferInformation>
+                            <OButton
+                                onClick={() => handleClickOffer(offer)}
+                                text={t('VIEW', 'View')}
+                                style={styles.buttonStyle}
+                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                            />
+                        </SingleOfferContainer>
+                    ))}
+                </ScrollView>
+                <OModal
+                    open={openModal}
+                    onClose={() => setOpenModal(false)}
+                    entireModal
+
+                    title={``}
+                >
+                    <View style={{ padding: 20 }}>
+                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                        </OText>
+                        <OfferData>
+                            {offerSelected?.type === 2 && (
+                                <Code>
+                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                                </Code>
+                            )}
+                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                            {offerSelected?.auto && (
+                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                            )}
+                            {!!offerSelected?.minimum && (
+                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            )}
+                            {!!offerSelected?.max_discount && (
+                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                            )}
+                            {!!offerSelected?.description && (
+                                <OText>{offerSelected?.description}</OText>
+                            )}
+                        </OfferData>
+                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                        </OText>
+                        <ScrollView style={{ height: '75%' }}>
+                            {offerSelected?.businesses?.map((business: any) => {
+                                return (
+                                    <SingleBusinessOffer key={business.id}>
+                                        {business?.logo ? (
+                                            <FastImage
+                                                style={styles.productStyle}
+                                                source={{
+                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                    priority: FastImage.priority.normal,
+                                                }}
+                                                resizeMode={FastImage.resizeMode.cover}
+                                            />
+                                        ) : (
+                                            <OIcon
+                                                src={theme?.images?.dummies?.product}
+                                                style={styles.productStyle}
+                                            />
+                                        )}
+                                        <BusinessInfo>
+                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                                            <OButton
+                                                onClick={() => handleBusinessClick(business)}
+                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                                style={styles.modalButtonStyle}
+                                                textStyle={{ fontSize: 10, color: '#fff' }}
+                                            />
+                                        </BusinessInfo>
+                                    </SingleBusinessOffer>
+                                )
+                            })}
+                        </ScrollView>
+                    </View>
+                </OModal>
+            </PromotionsContainer>
+        </Container>
+    )
+}
+
+export const Promotions = (props: PromotionParams) => {
+    const PromotionsProps = {
+        ...props,
+        UIComponent: PromotionsUI
+    }
+
+    return (
+        <PromotionsController {...PromotionsProps} />
+    )
+}

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

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components/native'
+
+export const PromotionsContainer = styled.View`
+  width: 100%;
+  padding-left: 40px;
+	padding-right: 40px;
+`
+
+export const SingleOfferContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+`
+
+export const OfferInformation = styled.View`
+  justify-content: space-between;
+  max-width: 75%;
+`
+
+export const SearchBarContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+`
+
+export const SingleBusinessOffer = styled.View`
+  flex-direction: row;
+`
+
+export const AvailableBusinesses = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+`
+
+export const OfferData = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`
+
+export const Code = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+`
+
+export const ValueOfOffer = styled.View``
+
+export const BusinessInfo = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 10px;
+`