ordering-ui-react-native 0.15.17 → 0.15.18-release

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

@@ -32,8 +32,6 @@ import {
 import { getIconCard, flatArray } from '../../utils';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
-const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -56,8 +54,7 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymethodClick,
 		handlePaymethodDataChange,
 		isOpenMethod,
-		handlePaymentMethodClickCustom,
-		handlePlaceOrder
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
@@ -125,16 +122,12 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (props.paySelected && props.paySelected?.data) {
-			setPaymethodData && setPaymethodData(props.paySelected?.data)
+			requestAnimationFrame(() => {
+				setPaymethodData && setPaymethodData(props.paySelected?.data)
+			})
 		}
 	}, [props.paySelected])
 
-	useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
-		}
-	}, [paymethodData, paymethodSelected])
-
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<TouchableOpacity
@@ -163,7 +156,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -296,11 +289,11 @@ const PaymentOptionsUI = (props: any) => {
 				</KeyboardAvoidingView>
 			</OModal>
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
+				open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
 				onClose={() => handlePaymethodClick(null)}
 			>
 				<KeyboardAvoidingView
@@ -309,13 +302,10 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
-						cart={cart}
-						paymethod={isOpenMethod?.paymethod?.gateway}
-						methodsPay={methodsPay}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
 						handleSource={handlePaymethodDataChange}
-						onCancel={() => handlePaymethodClick(null)}
+						onCancel={() => handlePaymethodClick(false)}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>

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

@@ -85,7 +85,11 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};
@@ -139,18 +143,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 							</OText>
 						</Information>
 						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
+							{order.cart && (
+								<OButton
+									text={t('REORDER', 'Reorder')}
+									imgRightSrc={''}
+									textStyle={styles.buttonText}
+									style={
+										reorderLoading && order.id === reorderSelected
+											? styles.reorderLoading
+											: styles.reorderbutton
+									}
+									onClick={() => handleReorderClick(order.id)}
+									isLoading={reorderLoading && order.id === reorderSelected}
+								/>
+							)}
 							{allowedOrderStatus.includes(parseInt(order?.status)) &&
 								!order.review && (
 									<TouchableOpacity

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;
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
 				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('?')) {
+					} else if (_videoId.includes('?')) {
 						const __url = _videoId.split('?')[0]
 						_videoId = __url
 					}
-					videoList.push(_videoId)
+
+					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)
+					}
 				}
 			}
 		}
@@ -319,28 +326,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)}
@@ -658,6 +646,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 +694,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 +711,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[
@@ -772,7 +779,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 +804,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[
@@ -991,14 +998,14 @@ export const ProductOptionsUI = (props: any) => {
 												? t('UPDATE', 'Update')
 												: t('ADD', 'Add')
 										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order}
+									isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
 									textStyle={{
 										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.white : theme.colors.primary,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
 										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,

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/ProductOptionSubOption/index.tsx

@@ -128,9 +128,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;
+`