ordering-ui-react-native 0.17.39 → 0.17.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.39",
+  "version": "0.17.41",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -120,8 +120,7 @@
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "toggle-react-native": "^1.1.2",
-    "toggle-switch-react-native": "^3.2.0",
-    "lottie-react-native": "4.1.3"
+    "toggle-switch-react-native": "^3.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

package/themes/business/src/components/ReviewCustomer/index.tsx

@@ -58,7 +58,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     photoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -96,11 +96,11 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   })
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('customer')
@@ -144,7 +144,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   }, [actionState.error])
 
   useEffect(() => {
-    if(scrollref?.current){
+    if (scrollref?.current) {
       Keyboard.addListener('keyboardDidShow', () => {
         scrollref.current.scrollToEnd()
       })
@@ -213,13 +213,13 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               marginTop: 16
             }}
           >
-            {order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}
+            {order?.customer?.name ?? ''} {order?.customer?.middle_name ?? ''} {order?.customer?.lastname ?? ''} {order?.customer?.second_lastname ?? ''}
           </OText>
         </CustomerInfoContainer>
         <OText
           size={12}
         >
-          {t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', `${order?.customer?.name} ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname}`)}
+          {t('HOW_WAS_YOUR_CUSTOMER', 'How was your experience with _name_?').replace('_name_', `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`)}
         </OText>
         <RatingBarContainer>
           <LinearGradient
@@ -281,7 +281,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
               imgRightStyle={{ right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>
@@ -309,7 +309,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       </ActionButtonWrapper>
       <Alert
         open={alertState.open}
-        onAccept={() => setAlertState({  open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
         onClose={() => setAlertState({ open: false, content: [] })}
         content={alertState.content}
         title={t('ERROR', 'Error')}

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

@@ -234,8 +234,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<LottieAnimation
 									type='favorite'
 									onClick={handleChangeFavorite}
-									initialValue={business?.favorite ? 1 : 0}
-									toValue={business?.favorite ? 0 : 1}
+									initialValue={business?.favorite ? 0.75 : 0}
+									toValue={business?.favorite ? 0 : 0.75}
 									disableAnimation={!auth}
 									iconProps={{ color: theme.colors.danger5, size: 18 }}
 									isActive={business?.favorite}

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

@@ -37,7 +37,7 @@ export const BusinessProductsListingContainer = styled.ScrollView`
 export const FiltProductsContainer = styled.ScrollView`
   position: absolute;
   width: 100%;
-  z-index: 2000;
+  z-index: 20000;
   top: 80px;
   margin-top: 20px;
 `
@@ -48,7 +48,7 @@ export const BackgroundGray = styled.View`
   background-color: rgba(0,0,0,0.5);
   position: absolute;
   margin-top: 100px;
-  z-index: 100;
+  z-index: 10000;
   width: 100%;
 `
 

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

@@ -13,7 +13,8 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation
+    navigation,
+    franchiseId
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -69,6 +70,7 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
+          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -77,6 +79,7 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
+          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -85,6 +88,7 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
+          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -7,7 +7,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
-import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { OText, OIcon, OModal, OButton } from '../shared'
 import { getIconCard, flatArray } from '../../utils'
 import { StripeElementsForm } from '../StripeElementsForm'
@@ -37,7 +37,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
 
-	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+  const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
 
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
@@ -54,52 +54,52 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   }
 
   const getPayIcon = (method: string) => {
-		switch (method) {
-			case 'cash':
-				return theme.images.general.cash
-			case 'card_delivery':
-				return theme.images.general.carddelivery
-			case 'paypal':
-				return theme.images.general.paypal
-			case 'stripe':
-				return theme.images.general.stripe
-			case 'stripe_direct':
-				return theme.images.general.stripecc
-			case 'stripe_connect':
-				return theme.images.general.stripes
-			case 'stripe_redirect':
-				return theme.images.general.stripesb
-			default:
-				return theme.images.general.creditCard
-		}
-	}
+    switch (method) {
+      case 'cash':
+        return theme.images.general.cash
+      case 'card_delivery':
+        return theme.images.general.carddelivery
+      case 'paypal':
+        return theme.images.general.paypal
+      case 'stripe':
+        return theme.images.general.stripe
+      case 'stripe_direct':
+        return theme.images.general.stripecc
+      case 'stripe_connect':
+        return theme.images.general.stripes
+      case 'stripe_redirect':
+        return theme.images.general.stripesb
+      default:
+        return theme.images.general.creditCard
+    }
+  }
 
   const renderPaymethods = ({ item }: any) => {
-		return (
-			<TouchableOpacity
-				onPress={() => handleSelectPaymethod(item)}
-			>
-				<PMItem
-					key={item.id}
-					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
-				>
-					<OIcon
-						src={getPayIcon(item.paymethod?.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
-					>
-						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
-		)
-	}
+    return (
+      <TouchableOpacity
+        onPress={() => handleSelectPaymethod(item)}
+      >
+        <PMItem
+          key={item.id}
+          isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+        >
+          <OIcon
+            src={getPayIcon(item.paymethod?.gateway)}
+            width={20}
+            height={20}
+            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+          />
+          <OText
+            size={10}
+            style={{ margin: 0, marginTop: 4 }}
+            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+          >
+            {t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+          </OText>
+        </PMItem>
+      </TouchableOpacity>
+    )
+  }
 
   return (
     <PMContainer>
@@ -123,10 +123,10 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       ) : (
         <FlatList
           horizontal
-					showsHorizontalScrollIndicator={false}
-          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
-					renderItem={renderPaymethods}
-					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+          showsHorizontalScrollIndicator={false}
+          data={businessPaymethods?.result?.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+          renderItem={renderPaymethods}
+          keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
         />
       )}
       {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
@@ -138,22 +138,22 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       {paymethodSelected?.paymethod?.gateway === 'stripe' && (
         <View>
           <OButton
-						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
-						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
-						style={styles.btnAddStyle}
-						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-						imgRightSrc={null}
-						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
-					/>
+            text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+            bgColor={theme.colors.white}
+            borderColor={theme.colors.primary}
+            style={styles.btnAddStyle}
+            textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+            imgRightSrc={null}
+            onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+          />
           <StripeCardsList
-						paymethod={paymethodSelected?.paymethod}
-						businessId={businessIds[0]}
+            paymethod={paymethodSelected?.paymethod}
+            businessId={businessIds[0]}
             businessIds={businessIds}
-						publicKey={paymethodSelected?.data?.publishable}
-						payType={paymethodSelected?.paymethod?.name}
-						onSelectCard={handlePaymethodDataChange}
-					/>
+            publicKey={paymethodSelected?.data?.publishable}
+            payType={paymethodSelected?.paymethod?.name}
+            onSelectCard={handlePaymethodDataChange}
+          />
         </View>
       )}
 
@@ -170,7 +170,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       ) : (
         <>
-          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+          {walletsState?.result?.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
             <WalletItem
               key={wallet.type}
               isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
@@ -197,40 +197,40 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       )}
 
       <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
-						toSave
-						businessId={businessIds[0]}
+        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
+            toSave
+            businessId={businessIds[0]}
             businessIds={businessIds}
             publicKey={paymethodSelected?.data?.publishable}
-						requirements={props.clientSecret}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
+            requirements={props.clientSecret}
+            onSelectCard={handlePaymethodDataChange}
+            onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+          />
+        </KeyboardAvoidingView>
+      </OModal>
     </PMContainer>
   )
 }
 
 const styles = StyleSheet.create({
-	btnAddStyle: {
-		marginVertical: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44,
-		borderWidth: 1
-	},
+  btnAddStyle: {
+    marginVertical: 20,
+    borderRadius: 7.6,
+    shadowOpacity: 0,
+    height: 44,
+    borderWidth: 1
+  },
 })
 
 

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

@@ -187,6 +187,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
+	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -295,6 +296,7 @@ export const ProductOptionsUI = (props: any) => {
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
+	
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -302,19 +304,25 @@ export const ProductOptionsUI = (props: any) => {
 					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
-							onPress={() => setSelectedOpt(id)}
+							onPress={() => {
+								setSelectedOpt(id)
+								scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+									y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+									animated: true
+								})
+							}}
 							style={[
 								styles.extraItem,
 								{
 									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+										selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
 								},
 							]}>
 							<OText
 								color={
 									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
 								}
-								size={selOpt == id ? 14 : 12}
+								size={12}
 								weight={selOpt == id ? '600' : 'normal'}
 								style={{ maxWidth: 150 }}
 								numberOfLines={1}>
@@ -701,39 +709,34 @@ export const ProductOptionsUI = (props: any) => {
 						<ExtraOptionWrap
 							horizontal
 							showsHorizontalScrollIndicator={false}
-							style={{ marginBottom: 20 }}
-							contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
+							style={{
+								marginBottom: 20,
+								borderBottomWidth: 1,
+								borderBottomColor: theme.colors.border,
+								marginHorizontal: 30,
+								backgroundColor: theme.colors.backgroundPage,
+							}}
 						>
-							<TouchableOpacity
-								key={`eopt_key_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('ALL', 'All')}
-								</OText>
-							</TouchableOpacity>
 							{product?.ingredients.length > 0 && (
 								<TouchableOpacity
 									key={`eopt_key_01`}
-									onPress={() => setSelectedOpt(0)}
+									onPress={() => {
+										setSelectedOpt(0)
+										scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+											y: optionLayout[`id:0`]?.y + editionsLayoutY - 50,
+											animated: true
+										})
+									}}
 									style={[
 										styles.extraItem,
 										{
 											borderBottomColor:
-												selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+												selOpt == 0 ? theme.colors.textNormal : theme.colors.backgroundPage,
 										},
 									]}>
 									<OText
 										color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-										size={selOpt == 0 ? 14 : 12}
+										size={12}
 										weight={selOpt == 0 ? '600' : 'normal'}>
 										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
@@ -783,184 +786,93 @@ export const ProductOptionsUI = (props: any) => {
 							))}
 						</>
 					) : (
-						<ProductEditions>
-							{selOpt === -1 ? (
-								<>
-									{product?.ingredients.length > 0 && (
-										<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</WrapperIngredients>
-										</View>
-									)}
-									{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 (
-												<React.Fragment key={`popt_${option.id}`}>
-													{showOption(option) && (
-														<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
-															<ProductOption
-																option={option}
-																currentState={currentState}
-																error={errors[`id:${option.id}`]}>
-																<WrapperSubOption
-																	style={{
-																		backgroundColor: isError(option.id),
-																		borderRadius: 7.6
-																	}}>
-																	{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																		(suboption: any) => {
-																			const currentState =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.suboptions[
-																				`id:${suboption.id}`
-																				] || {};
-																			const balance =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.balance || 0;
-																			return (
-																				<ProductOptionSubOption
-																					key={suboption.id}
-																					isSoldOut={isSoldOut}
-																					onChange={
-																						handleChangeSuboptionState
-																					}
-																					balance={balance}
-																					option={option}
-																					suboption={suboption}
-																					state={currentState}
-																					disabled={
-																						isSoldOut ||
-																						maxProductQuantity <= 0
-																					}
-																					setIsScrollAvailable={setIsScrollAvailable}
-																					error={errors[`id:${option.id}`]}
-																				/>
-																			);
-																		},
-																	)}
-																</WrapperSubOption>
-															</ProductOption>
-														</View>
-													)}
-												</React.Fragment>
-											);
-										}),
-									)}
-								</>
-							) : (
-								<>
-									{selOpt === 0 ? (
-										<View style={styles.optionContainer}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</WrapperIngredients>
-										</View>
-									) : (
-										<>
-											{product?.extras.map((extra: any) =>
-												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-													if (
-														option.id == selOpt ||
-														(hasRespected(
-															extra.options,
-															option.respect_to,
-														) &&
-															showOption(option))
-													) {
-														const currentState =
-															productCart.options[`id:${option.id}`] || {};
-														return (
-															<React.Fragment key={option.id}>
-																{showOption(option) && (
-																	<View style={styles.optionContainer}>
-																		<ProductOption
-																			option={option}
-																			currentState={currentState}
-																			error={errors[`id:${option.id}`]}>
-																			<WrapperSubOption
-																				style={{
-																					backgroundColor: isError(
-																						option.id,
-																					),
-																				}}>
-																				{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																					(suboption: any) => {
-																						const currentState =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.suboptions[
-																							`id:${suboption.id}`
-																							] || {};
-																						const balance =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.balance || 0;
-																						return (
-																							<ProductOptionSubOption
-																								key={suboption.id}
-																								onChange={
-																									handleChangeSuboptionState
-																								}
-																								balance={balance}
-																								option={option}
-																								suboption={suboption}
-																								state={currentState}
-																								disabled={
-																									isSoldOut ||
-																									maxProductQuantity <= 0
-																								}
-																							/>
-																						);
-																					},
-																				)}
-																			</WrapperSubOption>
-																		</ProductOption>
-																	</View>
-																)}
-															</React.Fragment>
-														);
+						<ProductEditions
+							onLayout={(event: any) => {
+								setEditionsLayoutY(event.nativeEvent.layout?.y)
+							}}
+						>
+							<>
+								{product?.ingredients.length > 0 && (
+									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
+										<SectionTitle>
+											<OText size={16}>
+												{t('INGREDIENTS', 'Ingredients')}
+											</OText>
+										</SectionTitle>
+										<WrapperIngredients>
+											{product?.ingredients.map((ingredient: any) => (
+												<ProductIngredient
+													key={ingredient.id}
+													ingredient={ingredient}
+													state={
+														productCart.ingredients[`id:${ingredient.id}`]
 													}
-												}),
-											)}
-										</>
-									)}
-								</>
-							)}
+													onChange={handleChangeIngredientState}
+													isSoldOut={isSoldOut}
+												/>
+											))}
+										</WrapperIngredients>
+									</View>
+								)}
+								{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 (
+											<React.Fragment key={`popt_${option.id}`}>
+												{showOption(option) && (
+													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+														<ProductOption
+															option={option}
+															currentState={currentState}
+															error={errors[`id:${option.id}`]}>
+															<WrapperSubOption
+																style={{
+																	backgroundColor: isError(option.id),
+																	borderRadius: 7.6
+																}}>
+																{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																	(suboption: any) => {
+																		const currentState =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.suboptions[
+																			`id:${suboption.id}`
+																			] || {};
+																		const balance =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.balance || 0;
+																		return (
+																			<ProductOptionSubOption
+																				key={suboption.id}
+																				isSoldOut={isSoldOut}
+																				onChange={
+																					handleChangeSuboptionState
+																				}
+																				balance={balance}
+																				option={option}
+																				suboption={suboption}
+																				state={currentState}
+																				disabled={
+																					isSoldOut ||
+																					maxProductQuantity <= 0
+																				}
+																				setIsScrollAvailable={setIsScrollAvailable}
+																				error={errors[`id:${option.id}`]}
+																			/>
+																		);
+																	},
+																)}
+															</WrapperSubOption>
+														</ProductOption>
+													</View>
+												)}
+											</React.Fragment>
+										);
+									}),
+								)}
+							</>
 							{!product?.hide_special_instructions && (
 								<ProductComment>
 									<SectionTitle>

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

@@ -9,7 +9,7 @@ export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
-  width: 80px;
+  width: 100px;
 `;
 
 export const TopHeader = styled.View`
@@ -82,7 +82,6 @@ export const ProductActions = styled.View`
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: 30px;
 `;
 
 export const WeightUnitSwitch = styled.View`

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

@@ -191,7 +191,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										)
 									)}
 								</ProductImage>
-								)}
+							)}
 							{!!product?.calendar_event ? (
 								<View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
 									<View>
@@ -201,7 +201,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
 									</OText>
 								</View>
-							): (
+							) : (
 								<>
 									{isCartProduct && !isCartPending && getProductMax && (
 										<ProductInfo>
@@ -316,22 +316,22 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				</View>
 			</AccordionSection>
 			<OModal
-        open={isServiceOpen}
-        onClose={() => setIsServiceOpen(false)}
-        entireModal
-      >
-        <ServiceForm
-          isCartProduct
-          isService
-          businessId={product?.business_id}
+				open={isServiceOpen}
+				onClose={() => setIsServiceOpen(false)}
+				entireModal
+			>
+				<ServiceForm
+					isCartProduct
+					isService
+					businessId={product?.business_id}
 					categoryId={product?.category_id}
 					productId={product?.id}
 					productCart={product}
-          onSave={() => setIsServiceOpen(false)}
-          onClose={() => setIsServiceOpen(false)}
-          professionalSelected={product?.calendar_event?.professional}
-        />
-      </OModal>
+					onSave={() => setIsServiceOpen(false)}
+					onClose={() => setIsServiceOpen(false)}
+					professionalSelected={product?.calendar_event?.professional}
+				/>
+			</OModal>
 		</>
 	)
 }

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

@@ -297,8 +297,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}
-                  initialValue={order?.favorite ? 1 : 0}
-                  toValue={order?.favorite ? 0 : 1}
+                  initialValue={order?.favorite ? 0.75 : 0}
+                  toValue={order?.favorite ? 0 : 0.75}
                   style={{ marginBottom: 5 }}
                   iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
                   isActive={order?.favorite}

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

@@ -187,8 +187,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
-										initialValue={product?.favorite ? 1 : 0}
-										toValue={product?.favorite ? 0 : 1}
+										initialValue={product?.favorite ? 0.75 : 0}
+										toValue={product?.favorite ? 0 : 0.75}
 										disableAnimation={!auth}
 										iconProps={{ color: theme.colors.danger5, size: 18 }}
 										isActive={product?.favorite}

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

@@ -146,7 +146,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 												</AddButton>
 											</View>
 											<View>
-												<OIcon url={product.images} style={styles.imageStyle} />
+												<OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
 											</View>
 										</Item>
 									)) : (

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
@@ -24,7 +24,6 @@ import {
   WalletTransactionsWrapper
 } from './styles'
 
-import NavBar from '../NavBar'
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
@@ -78,7 +77,7 @@ const WalletsUI = (props: any) => {
       isActive: isWalletCashEnabled
     },
     credit_point: {
-      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      name: t('POINTS_WALLET', 'Points Wallet'),
       value: 1,
       isActive: isWalletPointsEnabled
     }
@@ -112,15 +111,7 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-          <NavBar
-            title={isChewLayout ? '' : t('WALLETS', 'Wallets')}
-            titleAlign={'center'}
-            onActionLeft={goToBack}
-            showCall={false}
-            paddingTop={10}
-            btnStyle={{ paddingLeft: 0 }}
-            style={{ flex: 1 }}
-          />
+        <OText size={24}>{t('WALLETS', 'Wallets')}</OText>
           {isChewLayout && (
             <OButton
               text={t('WALLET_HISTORY', 'Wallet history')}
@@ -145,16 +136,25 @@ const WalletsUI = (props: any) => {
                 showsHorizontalScrollIndicator={false}
               >
                 {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
-                  <Pressable
+                  <TouchableOpacity
                     key={wallet.id}
                     onPress={() => handleChangeTab(wallet)}
                   >
-                    <OTab isSelected={tabSelected === wallet.type}>
-                      <OText size={18} color={tabSelected === wallet.type && theme.colors.primary}>
+                    <OTab
+                      isSelected={tabSelected === wallet.type}
+                      style={{
+                        borderBottomWidth: 1,
+                        borderBottomColor:
+                          tabSelected === wallet.type
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }}
+                    >
+                      <OText>
                         {walletName[wallet.type]?.name}
                       </OText>
                     </OTab>
-                  </Pressable>
+                  </TouchableOpacity>
                 ))}
               </OTabs>
 

package/themes/original/src/components/shared/CardAnimation.tsx

@@ -10,7 +10,7 @@ interface Props {
     onClick: any
 }
 
-export const CardAnimation = (props : Props) => {
+export const CardAnimation = (props: Props) => {
     const {
         children,
         onClick,
@@ -21,8 +21,8 @@ export const CardAnimation = (props : Props) => {
         cardAnimation: {
             elevation: isPressed ? 2 : 0,
             shadowColor: '#888',
-            shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
-            shadowRadius: 18,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 0,
             shadowOpacity: isPressed ? 0.8 : 0,
             borderRadius: 12,
         }

package/themes/original/src/components/shared/OBottomPopup.tsx

@@ -33,7 +33,7 @@ const OBottomPopup = (props: Props) => {
 	
 	return (
 		<Modal
-			animationType='slide'
+			animationType='fade'
 			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}

package/themes/original/src/layouts/Container.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import styled, { css } from 'styled-components/native';
-import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import styled, { css, useTheme } from 'styled-components/native';
+import { Platform, View } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
@@ -10,17 +11,20 @@ const ContainerStyled = styled.ScrollView`
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
-const SafeAreaStyled = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
 export const Container = (props: any) => {
+  const theme = useTheme()
+  const insets = useSafeAreaInsets()
   return (
-    <SafeAreaStyled>
+    <View
+      style={{
+        flex: 1,
+        paddingTop: insets.top,
+        backgroundColor: theme.colors.backgroundPage
+      }}
+    >
       <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
         {props.children}
       </ContainerStyled>
-    </SafeAreaStyled>
+    </View>
   )
 }