ordering-ui-react-native 0.19.2-testing → 0.19.3-release

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

@@ -7,6 +7,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image';
 
 import {
 	Container,
@@ -14,9 +15,12 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
+import { InView } from 'react-native-intersection-observer'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 
 export const ProductOptionSubOptionUI = (props: any) => {
 	const {
@@ -29,7 +33,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image,
+		enableIntersection
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -37,12 +43,25 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
+	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const iconsSize = 20
 
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -52,6 +71,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		}
 	}
 
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+	}
+
 	useEffect(() => {
 		if (balance === option?.max && state?.selected && isDirty) {
 			setIsDirty(false)
@@ -66,92 +89,110 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	}, [balance])
 
 	return (
-		<View>
-			<Container onPress={!(option?.with_half_option || option?.allow_suboption_quantity) ? () => handleSuboptionClick() : null}>
-				<IconControl disabled={disabled} 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} />
+		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
+			{isIntersectionObserver ? (
+				<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
+					<IconControl disabled={disabled} 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} />
+							)
 						) : (
-							<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>
-				<QuantityControl>
-					{option?.allow_suboption_quantity && state?.selected && (
-						<>
-							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<IconAntDesign
-									name='minuscircleo'
-									size={iconsSize}
-									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-								/>
-							</Checkbox>
-							<OText size={12} mLeft={5} mRight={5}>
-								{state.quantity}
-							</OText>
-							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<IconAntDesign
-									name='pluscircleo'
-									size={iconsSize}
-									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+							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} />
+							)
+						)}
+						{image && (
+							<Logo style={styles.logo}>
+								<FastImage
+									style={styles.icon}
+									source={{
+										uri: optimizeImage(image, 'h_100,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
 								/>
-							</Checkbox>
-						</>
+							</Logo>
+						)}
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
+							{suboption?.name}
+						</OText>
+					</IconControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<QuantityControl>
+							<>
+								<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+									<IconAntDesign
+										name='minuscircleo'
+										size={iconsSize}
+										color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+								<OText size={12}>
+									{state.quantity}
+								</OText>
+								<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+									<IconAntDesign
+										name='pluscircleo'
+										size={iconsSize}
+										color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+							</>
+						</QuantityControl>
 					)}
-				</QuantityControl>
-				<PositionControl>
 					{option?.with_half_option && state?.selected && (
-						<>
-							<Circle disabled={disabled} onPress={() => changePosition('left')}>
-								<OIcon
-									src={theme.images.general.half_l}
-									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-									style={styles.inverse}
-								/>
-							</Circle>
-							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-								<OIcon
-									src={theme.images.general.half_f}
-									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-								/>
-							</Circle>
-							<Circle disabled={disabled} onPress={() => changePosition('right')}>
-								<OIcon
-									src={theme.images.general.half_r}
-									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={20}
-									height={20}
-								/>
-							</Circle>
-						</>
+						<PositionControl>
+							<>
+								<Circle disabled={disabled} onPress={() => changePosition('left')}>
+									<OIcon
+										src={theme.images.general.half_l}
+										color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+										style={styles.inverse}
+									/>
+								</Circle>
+								<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+									<OIcon
+										src={theme.images.general.half_f}
+										color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+									/>
+								</Circle>
+								<Circle disabled={disabled} onPress={() => changePosition('right')}>
+									<OIcon
+										src={theme.images.general.half_r}
+										color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+										width={20}
+										height={20}
+									/>
+								</Circle>
+							</>
+						</PositionControl>
+					)}
+					{price > 0 && (
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
+							+ {parsePrice(price)}
+						</OText>
 					)}
-				</PositionControl>
-				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
-						+ {parsePrice(price)}
-					</OText>
-				)}
-			</Container>
+				</Container>
+			) : (
+				<Placeholder>
+					<PlaceholderLine height={25} />
+				</Placeholder>
+			)}
 			{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>
+		</InView>
 	)
 }
 

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

@@ -9,30 +9,31 @@ export const Container = styled.TouchableOpacity`
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  padding: 10px;
-  width: 38%;
+  padding: 10px 0 10px 10px;
+  width: 50%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  margin-right: 5px;
-  flex: 1;
-  width: 60px;
+  justify-content: space-between;
+  width: 62px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
-  margin-right: 5px;
-  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
-  margin: 0 1px;
+  margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

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

@@ -12,7 +12,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 
 export const InfoWrapper = styled.View`
   margin-vertical: 30px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const Divider = styled.View`
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ScheduleWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -43,4 +43,4 @@ export const CalendarWrapper = styled.View`
   border-color: ${(props: any) => props.theme.colors.backgroundGray200};
   border-radius: 7.6px;
   padding: 15px;
-`
+`

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

@@ -19,7 +19,7 @@ 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, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -98,8 +98,6 @@ const PromotionsUI = (props: PromotionParams) => {
 
   return (
     <Container
-      noPadding
-      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -112,7 +110,9 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: 0, marginLeft: 20 }}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
+        btnStyle={{ paddingLeft: 0 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -2,8 +2,6 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
-  padding-left: 40px;
-	padding-right: 40px;
 `
 
 export const WrapperSingleOffer = styled.View`

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewDriverContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewOrderContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewProductsContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -116,7 +116,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       marginHorizontal: 0
     },
     professionalList: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 20,
       paddingVertical: 30,
     }
   })
@@ -602,7 +602,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       <PlaceholderLine width={60} height={20} />
                     </Placeholder>
                   ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
                   )}
                 </TouchableOpacity>
               )}

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

@@ -11,7 +11,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 `;
 
 export const InfoWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-vertical: 30px;
 `
 
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ProfessionalWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -41,10 +41,10 @@ export const ButtonWrapper = styled.View`
   align-items: center;
   flex-direction: row;
   padding-vertical: 13px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
   margin-bottom: 40px;
   width: 100%;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
-`
+`

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

@@ -53,6 +53,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [isPressed, setIsPressed] = useState(false)
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
+  const isGiftCardOrder = !order?.business_id
 
   const styles = StyleSheet.create({
     container: {
@@ -290,11 +291,11 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   )}
                 </>
               )}
-              {!!pastOrders && (
+              {!!pastOrders && !isGiftCardOrder && (
                 <ButtonWrapper>
                   {!hideReviewOrderButton &&
                     allowedOrderStatus.includes(parseInt(order?.status)) &&
-                    !order.review && (
+                    !order.review && order?.cart && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
                         style={styles.reviewButton}>
@@ -303,7 +304,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {!hideReorderButton && typeof order?.id === 'number' && (
+                  {!hideReorderButton && typeof order?.id === 'number' && order?.cart && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}

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

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -1,14 +1,15 @@
 import React, { useEffect } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { getIconCard } from '../../utils';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OIcon, OText, OModal } from '../shared';
 
 import { NotFoundSource } from '../NotFoundSource';
 
@@ -17,6 +18,9 @@ import {
 	OSItemContent,
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
+import { StripeElementsForm } from '../StripeElementsForm';
+
+import { KeyboardAvoidingView } from 'react-native';
 
 export const StripeCardsListUI = (props: any) => {
 	const {
@@ -26,24 +30,31 @@ export const StripeCardsListUI = (props: any) => {
 		cardsList,
 		handleCardClick,
 		setAddCardOpen,
-		gateway
+		gateway,
+		setCardsList,
+		addCardOpen,
+		isOpenMethod,
+		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
-
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
 	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
 	useEffect(() => {
-		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen(true)
+		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen({ ...addCardOpen, stripe: true })
 		}
 	}, [cardsList?.loading])
 
@@ -85,7 +96,8 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
+							{console.log(card?.zipcode && validateZipcodeCard)}
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
 									{card.id === cardSelected?.id ? (
@@ -110,6 +122,13 @@ export const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert
@@ -128,6 +147,33 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
+			<OModal
+				entireModal
+				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+				open={addCardOpen.stripe}
+				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+				style={{ backgroundColor: 'red' }}
+			>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+					enabled={Platform.OS === 'ios' ? true : false}
+				>
+					<StripeElementsForm
+						openCarts={props.openCarts}
+						toSave
+						businessId={props.businessId}
+						businessIds={props.businessIds}
+						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
+						setCardsList={setCardsList}
+						cardsList={cardsList}
+						requirements={props.clientSecret}
+						handleCardClick={handleCardClick}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
 		</>
 	)
 }

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

@@ -55,7 +55,7 @@ const StripeElementsFormUI = (props: any) => {
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			justifyContent: 'space-between',
 			paddingBottom: 12
 		},

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -4,7 +4,10 @@ import { useApi, useSession } from 'ordering-components/native';
 export const StripeElementsForm = (props: any) => {
   const {
     UIComponent,
-    toSave
+    toSave,
+    setCardsList,
+    cardsList,
+    handleCardClick
   } = props;
 
   const [ordering] = useApi();
@@ -61,6 +64,14 @@ export const StripeElementsForm = (props: any) => {
       })
       const response = await result.json();
       isNewCard && props.onSelectCard && props.onSelectCard(response.result);
+      setCardsList && setCardsList({
+        ...cardsList,
+        cards: [
+          ...cardsList.cards,
+          response.result
+        ]
+      })
+      handleCardClick(response.result)
       setState({
         ...state,
         loadingAdd: false