ordering-ui-react-native 0.14.53 → 0.14.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.53",
+  "version": "0.14.56",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/StripeElementsForm/index.tsx

@@ -33,19 +33,33 @@ const StripeElementsFormUI = (props: any) => {
   const { confirmSetupIntent, loading: confirmSetupLoading } = useConfirmSetupIntent();
   const [createPmLoading, setCreatePmLoading] = useState(false);
 
-  const billingDetails = {
-    name: `${user.name} ${user.lastname}`,
-    email: user.email,
-    address: user.address
-  };
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
   const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod({
-        type: 'Card',
-        billingDetails,
-      });
+      const { paymentMethod } = await createPaymentMethod(params);
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -68,11 +82,12 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
-      const { setupIntent, error } = await confirmSetupIntent(requirements, {
-        type: 'Card',
-        billingDetails,
-      });
+      const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
       if (setupIntent?.status === 'Succeeded') {
         stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);

package/src/components/TaxInformation/index.tsx

@@ -36,7 +36,7 @@ export const TaxInformation = (props: taxInformationParams) => {
         ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
         : type === 'fee'
           ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
     )
   }
 

package/themes/original/index.tsx

@@ -32,6 +32,7 @@ import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
 import { UpsellingProducts } from './src/components/UpsellingProducts';
+import { VerifyEmail } from './src/components/VerifyEmail';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -94,6 +95,7 @@ export {
   PaymentOptionWallet,
   ProductForm,
   UpsellingProducts,
+  VerifyEmail,
 
 	// OComponents
 	Toast,

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

@@ -25,7 +25,7 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { business, handleClick, navigation } = props;
+	const { business, handleClick, navigation, isBusinessOpen } = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
@@ -122,7 +122,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				)}
 				<BusinessState>
-					{!business?.open && (
+					{!isBusinessOpen && (
 						<View style={styles.businessStateView}>
 							<OText
 								color={theme.colors.textThird}
@@ -168,7 +168,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
 				<Metadata>
-					{!business?.open ? (
+					{!isBusinessOpen ? (
 						<View style={styles.closed}>
 							<OText size={10} color={theme.colors.red}>
 								{t('CLOSED', 'Closed')}

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

@@ -23,7 +23,7 @@ import {
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
-	const { business, handleClick } = props;
+	const { business, handleClick, isBusinessOpen } = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
@@ -128,7 +128,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
             <OText>{getBusinessType()}</OText>
           </BusinessCategory> */}
 					<Metadata>
-						{!business?.open ? (
+						{!isBusinessOpen ? (
 							<View style={styles.closed}>
 								<OText size={10} color={theme.colors.red}>
 									{t('CLOSED', 'Closed')}

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

@@ -177,11 +177,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	// }, [])
 
 	const handleOnRefresh = () => {
-		const hasMore = !(
-			paginationProps.totalPages === paginationProps.currentPage
-		);
-		if (!businessesList.loading && hasMore) {
-			getBusinesses();
+		if (!businessesList.loading) {
+			getBusinesses(true);
 		}
 	}
 
@@ -315,6 +312,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									<BusinessFeaturedController
 										key={bAry[0].id}
 										business={bAry[0]}
+										isBusinessOpen={bAry[0]?.open}
 										handleCustomClick={handleBusinessClick}
 										orderType={orderState?.options?.type}
 									/>
@@ -322,6 +320,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 										<BusinessFeaturedController
 											key={bAry[1].id}
 											business={bAry[1]}
+											isBusinessOpen={bAry[1]?.open}
 											handleCustomClick={handleBusinessClick}
 											orderType={orderState?.options?.type}
 										/>
@@ -361,6 +360,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<BusinessController
 							key={business.id}
 							business={business}
+							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
 							navigation={navigation}

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

@@ -103,6 +103,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                     >
                       <BusinessController
                         business={business}
+                        isBusinessOpen={business?.open}
                         handleCustomClick={onBusinessClick}
                         orderType={orderState?.options?.type}
                         navigation={navigation}

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

@@ -5,7 +5,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 
 const LogoutButtonUI = (props: any) => {
-	const { handleLogoutClick, text, color } = props
+	const { handleLogoutClick, text, color, iconSize } = props
 	const theme = useTheme();
 
 	return (
@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
 		>
 			<OIcon
 				src={theme.images.general.logout}
-				width={17}
+				width={iconSize ?? 17}
 				color={color ? color : theme.colors.textNormal}
 				style={{ marginEnd: 14 }}
 			/>

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

@@ -20,19 +20,11 @@ import NavBar from '../NavBar';
 import { OButton, OIcon, OText } from '../shared';
 import { Container } from '../../layouts/Container';
 import {
-	HeaderTitle,
 	WrapSelectOption,
-	Days,
-	Day,
-	WrapHours,
-	Hours,
-	Hour,
 	WrapDelveryTime,
 } from './styles';
 import CalendarPicker from 'react-native-calendar-picker';
-import { TouchableRipple } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import SelectDropdown from 'react-native-select-dropdown';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
@@ -179,165 +171,165 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	useEffect(() => {
 		if (datesList?.length > 0) {
-		  const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
-		  const minDateParts = _datesList[0].split('-')
-		  const maxDateParts = _datesList[_datesList.length - 1].split('-')
-		  const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
-		  const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
-		  setMinDate(_minDate)
-		  setMaxDate(_maxDate)
+			const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
+			const minDateParts = _datesList[0].split('-')
+			const maxDateParts = _datesList[_datesList.length - 1].split('-')
+			const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
+			const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
+			setMinDate(_minDate)
+			setMaxDate(_maxDate)
 		}
 	}, [datesList])
 
 	return (
 		<>
-		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-			<View style={{ paddingBottom: 90 }}>
-				<NavBar
-					onActionLeft={() => goToBack()}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={0}
-					style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
-					title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
-					titleAlign={'center'}
-					titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
-					titleWrapStyle={{ paddingHorizontal: 0 }}
-				/>
+			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
+				<View style={{ paddingBottom: 90 }}>
+					<NavBar
+						onActionLeft={() => goToBack()}
+						btnStyle={{ paddingLeft: 0 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
+						titleWrapStyle={{ paddingHorizontal: 0 }}
+					/>
 
-				<WrapSelectOption
-					onPress={() => _handleAsap()}
-					disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
-					{optionSelected.isAsap ? (
-						<OIcon
-							src={theme.images.general.option_checked}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					) : (
-						<OIcon
-							src={theme.images.general.option_normal}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					)}
-					<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM d, yyyy h:mm A')} + delivery time)`}</OText>
-				</WrapSelectOption>
-				<WrapSelectOption
-					onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
-					disabled={orderState.loading}>
-					{optionSelected.isSchedule ? (
-						<OIcon
-							src={theme.images.general.option_checked}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					) : (
-						<OIcon
-							src={theme.images.general.option_normal}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					)}
-					<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
-				</WrapSelectOption>
+					<WrapSelectOption
+						onPress={() => _handleAsap()}
+						disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
+						{optionSelected.isAsap ? (
+							<OIcon
+								src={theme.images.general.option_checked}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						) : (
+							<OIcon
+								src={theme.images.general.option_normal}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						)}
+						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
+					</WrapSelectOption>
+					<WrapSelectOption
+						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
+						disabled={orderState.loading}>
+						{optionSelected.isSchedule ? (
+							<OIcon
+								src={theme.images.general.option_checked}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						) : (
+							<OIcon
+								src={theme.images.general.option_normal}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						)}
+						<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
+					</WrapSelectOption>
 
-				{optionSelected.isSchedule && (
-					<WrapDelveryTime>
-						{datesList.length > 0 && (
-							<View style={styles.dateWrap}>
-								<View style={styles.dateLabel}>
-									<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
+					{optionSelected.isSchedule && (
+						<WrapDelveryTime>
+							{datesList.length > 0 && (
+								<View style={styles.dateWrap}>
+									<View style={styles.dateLabel}>
+										<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
+									</View>
+									<SelectDropdown
+										defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
+										defaultValue={74}
+										data={hoursList}
+										disabled={orderState.loading}
+										onSelect={(selectedItem, index) => {
+											setSelectedTime(selectedItem.startTime)
+										}}
+										buttonTextAfterSelection={(selectedItem, index) => {
+											return `${selectedItem.startTime} - ${selectedItem.endTime}`
+										}}
+										rowTextForSelection={(item, index) => {
+											return `${item.startTime} - ${item.endTime}`
+										}}
+										buttonStyle={{
+											backgroundColor: theme.colors.white,
+											borderColor: theme.colors.border,
+											borderWidth: 1,
+											borderRadius: 8,
+											height: 40,
+											width: '100%',
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											marginBottom: 20
+										}}
+										buttonTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 12,
+											paddingTop: 10
+										}}
+										dropdownStyle={{
+											borderRadius: 8,
+											borderColor: theme.colors.lightGray,
+										}}
+										rowStyle={{
+											borderBottomColor: theme.colors.white,
+											backgroundColor: theme.colors.white,
+											height: 40,
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											paddingTop: 8,
+											paddingLeft: 22
+										}}
+										rowTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 14,
+										}}
+									/>
+									<CalendarPicker
+										nextTitle=">"
+										width={width - 80}
+										previousTitle="<"
+										nextComponent={
+											<OIcon
+												src={theme.images.general.chevron_right}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										previousComponent={
+											<OIcon
+												src={theme.images.general.chevron_left}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										onDateChange={(date: moment.Moment) =>
+											handleChangeDate(date.format('YYYY-MM-DD'))
+										}
+										selectedDayColor={theme.colors.primaryContrast}
+										todayBackgroundColor={theme.colors.border}
+										dayLabelsWrapper={{ borderColor: theme.colors.clear }}
+										customDayHeaderStyles={customDayHeaderStylesCallback}
+										weekdays={weekDays}
+										selectedStartDate={momento}
+										minDate={minDate}
+										maxDate={maxDate}
+									/>
 								</View>
-								<SelectDropdown
-									defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
-									defaultValue={74}
-									data={hoursList}
-									disabled={orderState.loading}
-									onSelect={(selectedItem, index) => {
-										setSelectedTime(selectedItem.startTime)
-									}}
-									buttonTextAfterSelection={(selectedItem, index) => {
-										return `${selectedItem.startTime} - ${selectedItem.endTime}`
-									}}
-									rowTextForSelection={(item, index) => {
-										return `${item.startTime} - ${item.endTime}`
-									}}
-									buttonStyle={{
-										backgroundColor: theme.colors.white,
-										borderColor: theme.colors.border,
-										borderWidth: 1,
-										borderRadius: 8,
-										height: 40,
-										width: '100%',
-										flexDirection: 'column',
-										alignItems: 'flex-start',
-										marginBottom: 20
-									}}
-									buttonTextStyle={{
-										color: theme.colors.textNormal,
-										fontSize: 12,
-										paddingTop: 10
-									}}
-									dropdownStyle={{
-										borderRadius: 8,
-										borderColor: theme.colors.lightGray,
-									}}
-									rowStyle={{
-										borderBottomColor: theme.colors.white,
-										backgroundColor: theme.colors.white,
-										height: 40,
-										flexDirection: 'column',
-										alignItems: 'flex-start',
-										paddingTop: 8,
-										paddingLeft: 22
-									}}
-									rowTextStyle={{
-										color: theme.colors.textNormal,
-										fontSize: 14,
-									}}
-								/>							
-								<CalendarPicker
-									nextTitle=">"
-									width={width - 80}
-									previousTitle="<"
-									nextComponent={
-										<OIcon
-											src={theme.images.general.chevron_right}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									previousComponent={
-										<OIcon
-											src={theme.images.general.chevron_left}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									onDateChange={(date: moment.Moment) =>
-										handleChangeDate(date.format('YYYY-MM-DD'))
-									}
-									selectedDayColor={theme.colors.primaryContrast}
-									todayBackgroundColor={theme.colors.border}
-									dayLabelsWrapper={{ borderColor: theme.colors.clear }}
-									customDayHeaderStyles={customDayHeaderStylesCallback}
-									weekdays={weekDays}
-									selectedStartDate={momento}
-									minDate={minDate}
-                					maxDate={maxDate}
-								/>
-							</View>
-						)}
-					</WrapDelveryTime>
-				)}
+							)}
+						</WrapDelveryTime>
+					)}
+				</View>
+				<Spinner visible={momentState.isLoading === 1} />
+			</Container>
+			<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
+				<OButton onClick={handleChangeMoment} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
 			</View>
-			<Spinner visible={momentState.isLoading === 1} />
-		</Container>
-		<View style={{position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%'}}>
-			<OButton onClick={handleChangeMoment} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{borderRadius: 7.6, height: 44, shadowOpacity: 0}} textStyle={{color: 'white', fontSize: 14}} showNextIcon />
-		</View>
 		</>
 	);
 };

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

@@ -155,7 +155,7 @@ export const ProductOptionsUI = (props: any) => {
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
-
+	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
@@ -208,11 +208,16 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleClickThumb = (index: number) => {
-		swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+		if (index !== indexGallery) {
+			swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+			setIndexGallery(index)
+		}
 	}
 
 	const handleRedirectLogin = () => {
-		navigation.navigate('Login');
+		navigation.navigate('Login', {
+			store_slug:  props.businessSlug
+		});
 	};
 
 	const handleSwitchQtyUnit = (val: string) => {

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

@@ -51,7 +51,6 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-
 	return (
 		<Container>
 			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
@@ -73,54 +72,57 @@ export const ProductOptionSubOptionUI = (props: any) => {
 				</OText>
 			</IconControl>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && state?.selected && (
-				<QuantityControl>
-					<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-						<OIcon
-							src={theme.images.general.minus}
-							width={16}
-							color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-					<OText mLeft={5} mRight={5}>
-						{state.quantity}
-					</OText>
-					<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-						<OIcon
-							src={theme.images.general.plus}
-							width={16}
-							color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-				</QuantityControl>
-			)}
-			{option?.with_half_option && state?.selected && (
-				<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={16}
-							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={16}
-						/>
-					</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={16}
-						/>
-					</Circle>
-				</PositionControl>
-			)
-			}
+			<QuantityControl>
+				{option?.allow_suboption_quantity && state?.selected && (
+					<>
+						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+							<OIcon
+								src={theme.images.general.minus}
+								width={16}
+								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}>
+							<OIcon
+								src={theme.images.general.plus}
+								width={16}
+								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+							/>
+						</Checkbox>
+					</>
+				)}
+			</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={16}
+								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={16}
+							/>
+						</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={16}
+							/>
+						</Circle>
+					</>
+				)}
+			</PositionControl>
 			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
 				+ {parsePrice(price)}
 			</OText>

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

@@ -5,28 +5,35 @@ export const Container = styled.View`
   align-items: center;
   justify-content: space-between;
   padding: 10px;
+  width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  flex: 1;
+  width: 45%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
+  justify-content: flex-start;
   margin-horizontal: 5px;
+  flex: 1;
+  width: 60px;
+
 `
 
 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;
 `

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

@@ -37,19 +37,33 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	const billingDetails = {
-		name: `${user.name} ${user.lastname}`,
-		email: user.email,
-		addressLine1: user.address
-	};
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
-			const { paymentMethod } = await createPaymentMethod({
-				type: 'Card',
-				billingDetails,
-			});
+			const { paymentMethod } = await createPaymentMethod(params);
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -79,11 +93,12 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
-			const { setupIntent, error } = await confirmSetupIntent(requirements, {
-				type: 'Card',
-				billingDetails,
-			});
+			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
 			if (setupIntent?.status === 'Succeeded') {
 				stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);

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

@@ -36,7 +36,7 @@ export const TaxInformation = (props: taxInformationParams) => {
         ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
         : type === 'fee'
           ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find((offer : any) => offer?.name === data?.name)
     )
   }
 

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

@@ -0,0 +1,303 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useTheme } from 'styled-components/native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  VerifyEmail as VerifyEmailController,
+  useToast,
+  useSession,
+  useLanguage,
+  ToastType
+} from 'ordering-components/native';
+
+import { OText, OInput, OButton } from '../shared';
+import { LogoutButton } from '../LogoutButton'
+
+import {
+  Container,
+  InputsSection,
+  WrapperText,
+  InputWrapper,
+  WrappCountdown,
+  CountDownContainer,
+  OtpSection,
+  DigitInput,
+  ButtonsActions,
+  WrapperActions
+} from './styles'
+
+const TIME_COUNTDOWN = 60 * 10 // 10 minutes
+const CODE_LENGTH = 6;
+
+const VerifyEmailUI = (props: any) => {
+  const {
+    verifyEmailState,
+    cleanErrorsState,
+    sendVerifyEmailCode,
+    checkVerifyEmailCode,
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [, { showToast }] = useToast();
+
+  const ref = useRef<TextInput>(null);
+
+  const [otpState, setOtpState] = useState('')
+  const [emailVerification, setEmailVerification] = useState(false)
+
+  const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
+  const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
+  const [containerIsFocused, setContainerIsFocused] = useState(false);
+
+  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
+
+  const style = StyleSheet.create({
+    inputContainer: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      padding: 12,
+      borderColor: theme.colors.disabled,
+    },
+    inputContainerFocused: {
+      borderColor: theme.colors.primary,
+    },
+    hiddenCodeInput: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      opacity: 0,
+    },
+    inputStyle: {
+      marginBottom: 28,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      marginTop: 5,
+      marginBottom: 2
+    }
+  });
+
+  const handleOnPress = () => {
+    setContainerIsFocused(true);
+    ref?.current?.focus();
+  };
+
+  const handleOnBlur = () => {
+    setContainerIsFocused(false);
+  };
+
+  const toDigitInput = (_value: number, idx: number) => {
+    const emptyInputChar = '0';
+    const digit = otpState[idx] || emptyInputChar;
+
+    const isCurrentDigit = idx === otpState.length;
+    const isLastDigit = idx === CODE_LENGTH - 1;
+    const isCodeFull = otpState.length === CODE_LENGTH;
+
+    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
+
+    const containerStyle =
+      containerIsFocused && isFocused
+        ? {...style.inputContainer, ...style.inputContainerFocused}
+        : style.inputContainer;
+
+    return (
+      <View key={idx} style={containerStyle}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: otpState[idx] ? theme.colors.black : theme.colors.disabled
+          }}
+        >
+          {digit}
+        </Text>
+      </View>
+    );
+  };
+
+  const handleSendOtp = () => {
+    setTimer(`${TIME_COUNTDOWN / 60}:00`)
+    setIsSendCodeAgain(true)
+    sendVerifyEmailCode({ email: user?.email })
+  }
+
+  useEffect(() => {
+    let _timer = TIME_COUNTDOWN - 1;
+    let minutes = 0;
+    let seconds = 0;
+    const interval = setInterval(() => {
+      minutes = _timer / 60;
+      seconds = _timer % 60;
+
+      minutes = minutes < 10 ? 0 + minutes : minutes;
+      seconds = seconds < 10 ? 0 + seconds : seconds;
+
+      const formatMinutes = parseInt(minutes.toString()) < 10
+        ? `0${parseInt(minutes.toString())}`
+        : parseInt(minutes.toString());
+
+      const formatseconds = parseInt(seconds.toString()) < 10
+        ? `0${parseInt(seconds.toString())}`
+        : parseInt(seconds.toString());
+
+      setTimer(`${formatMinutes}:${formatseconds}`);
+
+      if (--_timer < 0) {
+        clearInterval(interval);
+      }
+
+      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+        setIsSendCodeAgain(false)
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval)
+  }, [isSendCodeAgain])
+
+  useEffect(() => {
+    if (otpState?.length === CODE_LENGTH) {
+      if (emailVerification) {
+        checkVerifyEmailCode({ code: otpState })
+        return
+      }
+    }
+  }, [otpState])
+
+  useEffect(() => {
+    if (verifyEmailState?.errorSendCode || verifyEmailState?.errorCheckCode) {
+      showToast(
+        ToastType.Error,
+        verifyEmailState?.errorSendCode?.[0]
+          ?? verifyEmailState?.errorCheckCode?.[0]
+          ?? t('ERROR', 'Error'),
+      );
+      setTimeout(() => {
+        cleanErrorsState();
+        setOtpState('');
+      }, 2000);
+    }
+  }, [verifyEmailState])
+
+  useEffect(() => {
+    if (!verifyEmailState?.loadingSendCode) {
+      setEmailVerification(!!verifyEmailState?.resultSendCode)
+    }
+  }, [verifyEmailState])
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Container>
+        <WrapperActions>
+          <WrapperText>
+            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+              {t('VERIFICATION_CODE', 'Verification Code')}
+            </OText>
+            <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+              {!emailVerification ? (
+                t('VERIFICATION_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
+              ) : (
+                t('VERIFICATION_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
+              )}
+            </OText>
+          </WrapperText>
+          <View style={{ position: 'absolute', top: 0, right: 0 }}>
+            <LogoutButton iconSize={20} />
+          </View>
+        </WrapperActions>
+
+        {!emailVerification ? (
+          <InputWrapper>
+            <OInput
+              placeholder={user?.email}
+              style={style.inputStyle}
+              icon={theme.images.general.email}
+              isDisabled
+            />
+          </InputWrapper>
+        ) : (
+          <>
+            <WrappCountdown>
+              <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
+                <OText
+                  size={26}
+                  color={timer === '00:00' ? theme.colors.error: theme.colors.success}
+                >
+                  {timer}
+                </OText>
+              </CountDownContainer>
+            </WrappCountdown>
+
+            <InputsSection>
+              <OtpSection>
+                <DigitInput
+                  disabled={otpState.length === CODE_LENGTH}
+                  onPress={handleOnPress}
+                >
+                  {codeDigitsArray.map(toDigitInput)}
+                </DigitInput>
+                <TextInput
+                  ref={ref}
+                  value={otpState}
+                  placeholder='0'
+                  onChangeText={setOtpState}
+                  onSubmitEditing={handleOnBlur}
+                  keyboardType="number-pad"
+                  returnKeyType="done"
+                  textContentType="oneTimeCode"
+                  maxLength={CODE_LENGTH}
+                  style={style.hiddenCodeInput}
+                />
+              </OtpSection>
+            </InputsSection>
+
+            <WrapperText>
+              <TouchableOpacity
+                onPress={handleSendOtp}
+              >
+                <OText color={theme.colors.primary}>
+                  {t('RESEND_AGAIN', 'Resend again?')}
+                </OText>
+              </TouchableOpacity>
+            </WrapperText>
+          </>
+        )}
+      </Container>
+      <ButtonsActions>
+        <View style={{ width: '100%' }}>
+          <OButton
+            onClick={emailVerification ? () => setEmailVerification(false) : handleSendOtp}
+            text={emailVerification ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+            bgColor={emailVerification ? theme.colors.secundary : theme.colors.primary}
+            borderColor={emailVerification ? theme.colors.secundary : theme.colors.primary}
+            textStyle={{ color: emailVerification ? 'black' : 'white' }}
+            imgRightSrc={null}
+            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode}
+            style={emailVerification ? style.btnStyle : { borderRadius: 7.6 }}
+          />
+        </View>
+      </ButtonsActions>
+    </SafeAreaView>
+  )
+}
+
+export const VerifyEmail = (props: any) => {
+  const verifyProps = {
+    ...props,
+    UIComponent: VerifyEmailUI
+  }
+  return (
+    <VerifyEmailController {...verifyProps} />
+  )
+}

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

@@ -0,0 +1,77 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  padding: 20px;
+`
+
+export const WrapperText = styled.View`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 0px;
+  align-items: center;
+`
+
+export const InputWrapper = styled.View``
+
+export const WrapperActions = styled.View`
+  position: relative;
+`
+
+export const ButtonsActions = styled.View`
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  padding: 12px 40px;
+  flex-direction: row;
+  border-top-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+  width: 100%;
+  justify-content: space-between;
+  background-color: #FFF;
+  z-index: 1000;
+  justify-content: space-between;
+`
+
+export const OtpSection = styled.SafeAreaView`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`
+
+export const DigitInput = styled.Pressable`
+  width: 80%;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const CountDownContainer = styled.View`
+  background-color: ${(props: any) => `${props.color}4D`};
+  border-radius: 7.6px;
+  padding: 5px 0px 0px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+`
+
+export const WrappCountdown = styled.View`
+  padding-bottom: 20px;
+  padding-top: 20px;
+`
+
+export const InputsSection = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 20px;
+`
+
+export const ErrorSection = styled.View`
+  margin-bottom: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`