ordering-ui-react-native 0.15.10-release → 0.15.12-release

package/themes/kiosk/src/components/OrderDetails/index.tsx

@@ -23,6 +23,7 @@ import {
   Table,
   OrderBill,
   Total,
+  OSRow,
 } from './styles'
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
@@ -178,6 +179,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setIsLoading(false)
   }
 
+  const getIncludedTaxes = () => {
+    if (order?.taxes?.length === 0) {
+      return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
+    } else {
+      return order?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   useEffect(() => {
     const backAction = () => {
       Alert.alert(`${t('HOLD_ON', 'Hold on')}!`, `${t('ARE_YOU_SURE_YOU_WANT_TO_GO_BACK', 'Are you sure you want to go back')}?`, [
@@ -209,7 +224,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     const getCustomerName = async () => {
       try {
         const { customerName: name } = await _retrieveStoreData('customer_name')
-          setCustomerName(name)
+        setCustomerName(name)
       } catch (e) {
         if (e) {
           setCustomerName(null)
@@ -217,8 +232,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       }
     }
     getCustomerName()
-    const redirectHome = setTimeout(() =>{
-      _setStoreData('customer_name', {customerName: ''});
+    const redirectHome = setTimeout(() => {
+      _setStoreData('customer_name', { customerName: '' });
       navigation.reset({
         routes: [{ name: 'Intro' }],
       });
@@ -345,7 +360,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       <OButton
         text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
-          _setStoreData('customer_name', {customerName: ''});
+          _setStoreData('customer_name', { customerName: '' });
           navigation.reset({
             routes: [{ name: 'Intro' }],
           });
@@ -419,46 +434,135 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         <Table>
           <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText>
-            {parsePrice(isTaxIncluded
-              ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0
-              : order?.summary?.subtotal ?? 0
-            )}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
           </OText>
         </Table>
-        {order?.summary?.discount > 0 && (
+        {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
           <Table>
             {order?.offer_type === 1 ? (
               <OText>
                 {t('DISCOUNT', 'Discount')}
-                <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+                <OText>{`(${verifyDecimals(
+                  order?.offer_rate,
+                  parsePrice,
+                )}%)`}</OText>
               </OText>
             ) : (
               <OText>{t('DISCOUNT', 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount)}</OText>
+            <OText>
+              - {parsePrice(order?.summary?.discount || order?.discount)}
+            </OText>
           </Table>
         )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
           <Table>
             <OText>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
-            <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
-          </Table>
-        )}
-        {order?.tax_type !== 1 && (
-          <Table>
-            <OText>
-              {t('TAX', 'Tax')}
-              {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
-            </OText>
-            <OText>{parsePrice(order?.summary?.tax)}</OText>
+            {order?.tax_type === 1 ? (
+              <OText>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+            ) : (
+              <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+            )}
           </Table>
         )}
+        {
+          order?.taxes?.length === 0 && order?.tax_type === 2 && (
+            <Table>
+              <OText>
+                {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
+              </OText>
+              <OText>{parsePrice(order?.summary?.tax || 0)}</OText>
+            </Table>
+          )
+        }
+        {
+          order?.fees?.length === 0 && (
+            <Table>
+              <OText>
+                {t('SERVICE_FEE', 'Service fee')}
+                {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
+              </OText>
+              <OText>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+            </Table>
+          )
+        }
+        {
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+            <Table key={tax.id}>
+              <OSRow>
+                <OText>
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                </OText>
+              </OSRow>
+              <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+            <Table key={fee.id}>
+              <OSRow>
+                <OText>
+                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
+                </OText>
+              </OSRow>
+              <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+            </Table>
+          ))
+        }
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.delivery_price > 0 && (
           <Table>
             <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
             <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
           </Table>
         )}
+        {
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
         {order?.summary?.driver_tip > 0 && (
           <Table>
             <OText>
@@ -470,23 +574,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText>{parsePrice(order?.summary?.driver_tip ?? 0)}</OText>
-          </Table>
-        )}
-        {order?.summary?.service_fee > 0 && (
-          <Table>
-            <OText>
-              {t('SERVICE_FEE', 'Service Fee')}
-              {`(${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)`}
-            </OText>
-            <OText>{parsePrice(order?.summary?.service_fee)}</OText>
+            <OText>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
           </Table>
         )}
         <Total>
           <Table>
             <OText style={styles.textBold}>{t('TOTAL', 'Total')}</OText>
             <OText style={styles.textBold} color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? 0)}
+              {parsePrice(order?.summary?.total ?? order?.total)}
             </OText>
           </Table>
         </Total>
@@ -508,14 +603,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <OIconButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  RenderIcon={() => 
-                      <EvilIcons
-                        name={'close'}
-                        size={40}
-                        color={theme.colors.primary}
-                      />
+                  RenderIcon={() =>
+                    <EvilIcons
+                      name={'close'}
+                      size={40}
+                      color={theme.colors.primary}
+                    />
                   }
-                  style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+                  style={{ flex: 1, justifyContent: 'flex-end', left: 30 }}
                   onClick={() => {
                     navigation.reset({
                       routes: [{ name: 'Intro' }],

package/themes/kiosk/src/components/OrderDetails/styles.tsx

@@ -51,3 +51,8 @@ export const Total = styled.View`
   padding-vertical: 10px;
 `
 
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

package/themes/kiosk/src/types/index.d.ts

@@ -472,6 +472,8 @@ export interface Cart {
   delivery_price_with_discount: number;
   total: number;
   clearInactivityTimeout: any;
+  taxes: Array<any>;
+  fees: Array<any>;
 }
 
 export interface NoNetworkParams {

package/themes/original/index.tsx

@@ -45,7 +45,7 @@ import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
 import { BusinessListingSearch } from './src/components/BusinessListingSearch';
 import { LastOrders } from './src/components/LastOrders';
-import  NavBar from './src/components/NavBar';
+import NavBar from './src/components/NavBar';
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
 import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
@@ -77,21 +77,22 @@ import { StripeCardsList } from './src/components/StripeCardsList';
 import { ProductIngredient } from './src/components/ProductIngredient';
 import { ProductOption } from './src/components/ProductOption';
 import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
+import { Sessions } from './src/components/Sessions';
 import { SingleProductReview } from './src/components/SingleProductReview';
 import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
-
+import { Promotions } from './src/components/Promotions'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
-import { OSItem, OSItemContent, OSItemActions} from './src/components/PaymentOptionStripe/styles';
+import { OSItem, OSItemContent, OSItemActions } from './src/components/PaymentOptionStripe/styles';
 
 import Alert from './src/providers/AlertProvider'
 
-import { 
+import {
 	LoginParams,
 	ProfileParams,
 	AddressListParams,
@@ -134,7 +135,7 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
-  	HeaderTitle
+	HeaderTitle
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -176,7 +177,7 @@ export {
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
-  	Messages,
+	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
@@ -227,11 +228,12 @@ export {
 	ProductIngredient,
 	ProductOption,
 	ProductOptionSubOption,
+	Sessions,
 	SingleProductReview,
 	LogoutButton,
 	UserFormDetailsUI,
 	WalletTransactionItem,
-
+	Promotions,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -296,7 +298,7 @@ export {
 	OAlert,
 	OModal,
 	OBottomPopup,
- 	HeaderTitle,
+	HeaderTitle,
 
 	// layout
 	Container,

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

@@ -4,7 +4,7 @@ import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';

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

@@ -9,7 +9,7 @@ import {
 import { OIcon, OText } from '../shared';
 import { StyleSheet, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
@@ -121,6 +122,24 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+			{business?.ribbon?.enabled && (
+				<RibbonBox
+					bgColor={business?.ribbon?.color}
+					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+				>
+					<OText
+						size={10}
+						weight={'400'}
+						color={theme.colors.white}
+						numberOfLines={2}
+						ellipsizeMode='tail'
+						lineHeight={13}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}

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

@@ -53,3 +53,25 @@ export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 180px;
+
+  ${(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/BusinessFeaturedController/index.tsx

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
@@ -97,6 +98,24 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+			{business?.ribbon?.enabled && (
+				<RibbonBox
+					bgColor={business?.ribbon?.color}
+					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+				>
+					<OText
+						size={10}
+						weight={'400'}
+						color={theme.colors.white}
+						numberOfLines={2}
+						ellipsizeMode='tail'
+						lineHeight={13}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<BusinessLogo>
 					<OIcon

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

@@ -4,6 +4,7 @@ export const Card = styled.TouchableOpacity`
   margin-vertical: 4px;
   height: 60px;
   overflow: hidden;
+  position: relative;
 `;
 
 export const BusinessHero = styled.View`
@@ -48,3 +49,25 @@ export const BusinessLogo = styled.View`
 export const Reviews = styled.View`
   flex-direction: row;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  right: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 160px;
+
+  ${(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/BusinessProductsList/styles.tsx

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(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/Cart/index.tsx

@@ -255,7 +255,7 @@ const CartUI = (props: any) => {
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -891,7 +891,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OSRow>
                       <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -112,7 +112,7 @@ const OrderSummaryUI = (props: any) => {
       {cart?.products?.length > 0 && (
         <>
           <OSProductList>
-            {cart?.products.map((product: any) => (
+            {cart?.products?.map((product: any) => (
               <ProductItemAccordion
                 key={product.code}
                 product={product}
@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -51,7 +51,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				btnStyle={{ paddingLeft: 0 }}
 				paddingTop={0}
 				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
+				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 				titleAlign={'center'}
 				titleStyle={{ fontSize: 14 }}
 			/>

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

@@ -292,20 +292,20 @@ export const ProductOptionsUI = (props: any) => {
 					let _videoId = keys[keys.length - 1]
 
 					if (_videoId.includes('watch')) {
-					  const __url = _videoId.split('=')[1]
-					  _videoId = __url
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
 					} else if (_videoId.includes('?')) {
-					  const __url = _videoId.split('?')[0]
-					  _videoId = __url
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
 					}
 
 					if (_videoId.search(/&/i) >= 0) {
-					  _videoId = _videoId.split('&')[0]
+						_videoId = _videoId.split('&')[0]
 					} else if (_videoId.search(/\?/i) >= 0) {
-					  _videoId = _videoId.split('?')[0]
+						_videoId = _videoId.split('?')[0]
 					}
 					if ((_videoId.length === 11)) {
-					  videoList.push(_videoId)
+						videoList.push(_videoId)
 					}
 				}
 			}
@@ -326,25 +326,6 @@ 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, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
 					{respect_to == null && suboptions?.length > 0 && (
@@ -665,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} />
 										)}