ordering-ui-react-native 0.18.0 → 0.18.1-release

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

@@ -1,119 +1,41 @@
-import React, { useState, useEffect } from 'react'
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
+import React, { useEffect } from 'react'
 import {
   UpsellingPage as UpsellingPageController,
-  useUtils,
-  useLanguage,
   useOrder,
-  useConfig
 } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OBottomPopup, OButton } from '../shared'
+import { OBottomPopup } from '../shared'
 import { UpsellingProductsParams } from '../../types'
-import {
-  Container,
-  UpsellingContainer,
-  Item,
-  Details,
-  AddButton,
-  CartList,
-  CartDivider
-} from './styles'
-import { OrderSummary } from '../OrderSummary';
-import { Cart } from '../Cart';
-import { ScrollView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { UpsellingLayout } from './UpsellingLayout';
+import { UpsellingContent } from './UpsellingContent';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const {
     isCustomMode,
     upsellingProducts,
-    business,
     handleUpsellingPage,
-    handleCloseUpsellingPage,
     openUpselling,
     canOpenUpselling,
     setCanOpenUpselling,
-    isFromCart,
-    onNavigationRedirect,
-    onGoBack
+    isFromCart
   } = props
 
-  const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    imageStyle: {
-      width: 73,
-      height: 73,
-      resizeMode: 'cover',
-      borderRadius: 7.6,
-    },
-    closeUpsellingButton: {
-      borderRadius: 7.6,
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.primary,
-      borderWidth: 1,
-      alignSelf: 'center',
-      height: 44,
-      shadowOpacity: 0,
-      width: '80%',
-    },
-    cancelBtn: {
-      paddingHorizontal: 18,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      borderColor: theme.colors.textSecondary,
-      height: 38
-    },
-    headerItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginVertical: 2,
-      marginHorizontal: 20,
-    },
-    btnBackArrow: {
-      borderWidth: 0,
-      width: 26,
-      height: 26,
-      backgroundColor: theme.colors.clear,
-      borderColor: theme.colors.clear,
-      shadowColor: theme.colors.clear,
-      paddingLeft: 0,
-      paddingRight: 0,
-      marginLeft: 20,
-      marginBottom: 10
-    },
-  })
-
-  const [modalIsOpen, setModalIsOpen] = useState(false)
   const [{ carts }] = useOrder()
-  const [{ parsePrice }] = useUtils()
-  const [{ configs }] = useConfig()
-  const [, t] = useLanguage()
-  const { bottom } = useSafeAreaInsets()
-  const [isCheckout, setIsCheckout] = useState(false)
-  const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const showCartList = isChewLayout
-  const commentDelayTime = isChewLayout ? 500 : null
 
   const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-  const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
   const cartProducts = cart?.products?.length
-    ? cart?.products.map((product: any) => product.id)
-    : []
+  ? cart?.products.map((product: any) => product.id)
+  : []
 
   const productsList = !upsellingProducts.loading && !upsellingProducts.error
-    ? upsellingProducts?.products?.length
+  ? upsellingProducts?.products?.length
       ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
       : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-    : []
+  : []
 
   useEffect(() => {
     if (!isCustomMode && !props.products) {
-      if (!upsellingProducts.loading) {
+      if (!upsellingProducts?.loading) {
         if (upsellingProducts?.products?.length && !isFromCart) {
           setCanOpenUpselling && setCanOpenUpselling(true)
         } else {
@@ -121,136 +43,25 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         }
       }
     }
-  }, [upsellingProducts.loading, upsellingProducts?.products.length])
-
-  const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
-    })
-  }
-
-  const UpsellingLayout = () => {
-    return (
-      <Container>
-        <UpsellingContainer
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-        >
-          {
-            !upsellingProducts.loading && (
-              <>
-                {
-                  !upsellingProducts.error ? productsList.map((product: any, i: number) => (
-                    <Item key={`${product.id}_${i}`}>
-                      <View style={{ flexBasis: '57%' }}>
-                        <Details>
-                          <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-                          <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-                        </Details>
-                        <AddButton onPress={() => handleFormProduct(product)}>
-                          <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-                        </AddButton>
-                      </View>
-                      <View>
-                        <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
-                      </View>
-                    </Item>
-                  )) : (
-                    <OText>
-                      {upsellingProducts.message}
-                    </OText>
-                  )
-                }
-              </>
-            )
-          }
-        </UpsellingContainer>
-      </Container>
-    )
-  }
-
-  const UpsellingContent = () => {
-    return (
-      <>
-        <View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
-          <TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
-            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-          </TouchableOpacity>
-        </View>
-        <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-          {productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <View style={{ paddingHorizontal: 40 }}>
-            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-            <OrderSummary
-              cart={cart}
-              commentDelayTime={commentDelayTime}
-              isCartPending={cart?.status === 2}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-          {showCartList && cartList.map((cart: any, i: number) => (
-            <CartList key={i}>
-              <Cart
-                cart={cart}
-                cartuuid={cart.uuid}
-                hideUpselling
-                singleBusiness={props.singleBusiness}
-                isFranchiseApp={props.isFranchiseApp}
-                isCartsLoading={isCartsLoading}
-                setIsCartsLoading={setIsCartsLoading}
-                isMultiCheckout={isMultiCheckout}
-                onNavigationRedirect={props.onNavigationRedirect}
-              />
-              <CartDivider />
-            </CartList>
-          ))}
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{ ...styles.closeUpsellingButton }}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-              handleUpsellingPage(cart)
-              setIsCheckout(true)
-            }}
-          />
-        </View>
-      </>
-    )
-  }
+  }, [upsellingProducts?.loading, upsellingProducts?.products?.length])
 
   return (
     <>
       {isCustomMode ? (
-        <UpsellingLayout />
+        <UpsellingLayout {...props} productsList={productsList} />
       ) : (
         <>
           {props.isPage ? (
-            <UpsellingContent />
+            <UpsellingContent {...props} cart={cart} productsList={productsList} />
           ) : (
-            canOpenUpselling && !modalIsOpen && (
+            canOpenUpselling && (
               <OBottomPopup
                 title={''}
                 open={openUpselling}
                 onClose={() => handleUpsellingPage(cart)}
                 isStatusBar
               >
-                <UpsellingContent />
+                <UpsellingContent {...props} productsList={productsList} />
               </OBottomPopup>
             )
           )}

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

@@ -59,3 +59,22 @@ export const CartDivider = styled.View`
   background-color:  ${(props: any) => props.theme.colors.backgroundGray100};
   margin: 20px -40px 0;
 `
+
+
+export const TopActionsHeader = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`
+

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

@@ -34,7 +34,8 @@ const UserDetailsUI = (props: any) => {
 		isCheckout,
 		handleSendVerifyCode,
 		verifyPhoneState,
-		setFormState
+		setFormState,
+		setIsOpen
 	} = props
 
 	const theme = useTheme();
@@ -209,6 +210,7 @@ const UserDetailsUI = (props: any) => {
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
 							setIsSubmit={setIsSubmit}
+							setIsOpen={setIsOpen}
 						/>
 					)}
 				</UDContainer>

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

@@ -7,10 +7,14 @@ import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput, OModal } from '../shared';
+import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { OAlert } from '../../../../../src/components/shared'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
+import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -29,7 +33,10 @@ export const UserFormDetailsUI = (props: any) => {
 		hideUpdateButton,
 		setWillVerifyOtpState,
 		handlePlaceOrderAsGuest,
-		isCheckout
+		isCheckout,
+		setIsOpen,
+		handleRemoveAccount,
+		isProfile
 	} = props;
 
 	const theme = useTheme();
@@ -76,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -83,16 +92,19 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
+	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
+	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
-    login({
-      user,
-      token: user?.session?.access_token
-    })
-    handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
-  }
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+	}
 
 	const getInputRules = (field: any) => {
 		const rules: any = {
@@ -199,9 +211,23 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
-	const handleClickBtn = () => {
-		if (!user?.guest_id) handleSubmit(onSubmit)
-		else setIsModalOpen(true)
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
+	const onRemoveAccount = () => {
+		setConfirm({
+			open: true,
+			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+			title: t('ACCOUNT_ALERT', 'Account alert'),
+			handleOnAccept: () => {
+				setConfirm({ ...confirm, open: false })
+				handleRemoveAccount && handleRemoveAccount(user?.id)
+			}
+		})
 	}
 
 	useEffect(() => {
@@ -223,6 +249,10 @@ export const UserFormDetailsUI = (props: any) => {
 		if (!formState?.loading && formState?.result?.error) {
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
+			if (isCheckout) {
+				setIsOpen && setIsOpen(false)
+				cleanFormState && cleanFormState({ changes: {} })
+			}
 		}
 	}, [formState?.loading]);
 
@@ -250,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -341,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
+											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+										</OText>
+									</TouchableOpacity>
+									{showDatePicker && (
+										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
+									)}
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
@@ -406,6 +458,12 @@ export const UserFormDetailsUI = (props: any) => {
 							)}
 						</UDWrapper>
 					)}
+				{isProfile && (
+					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
+						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
+						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+					</ListItem>
+				)}
 				{validationFields?.loading && (
 					<UDLoader>
 						<OText size={12}>{t('LOADING', 'Loading')}</OText>
@@ -424,8 +482,8 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white, fontSize: 14 }}
 								borderColor={theme.colors.primary}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
@@ -441,16 +499,29 @@ export const UserFormDetailsUI = (props: any) => {
 						formState.loading
 							? t('UPDATING', 'Updating...')
 							: ((isCheckout && !!user?.guest_id)
-									? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
-									: t('CONTINUE', 'Continue'))
+								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
+								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.white}
-					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+					bgColor={theme.colors.primary}
+					textStyle={{ 
+						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white, 
+						fontSize: 14 
+					}}
 					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
-					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-					onClick={handleClickBtn}
+					style={{
+						borderRadius: 7.6,
+						shadowOpacity: 0,
+						width: '100%',
+						borderWidth: 1,
+						marginTop: 20,
+						marginBottom: 20,
+						backgroundColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.lightGray : theme.colors.primary,
+						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
+						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
+					}}
+					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
 				/>
 			)}
 			{isCheckout && !!user?.guest_id && (
@@ -462,7 +533,7 @@ export const UserFormDetailsUI = (props: any) => {
 				open={isModalOpen}
 				onClose={() => setIsModalOpen(false)}
 			>
-				<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+				<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
 					<SignupForm
 						handleSuccessSignup={handleSuccessSignup}
 						isGuest
@@ -472,7 +543,14 @@ export const UserFormDetailsUI = (props: any) => {
 					/>
 				</ScrollView>
 			</OModal>
+			<OAlert
+				open={confirm.open}
+				title={confirm.title}
+				content={confirm.content}
+				onAccept={confirm.handleOnAccept}
+				onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+				onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+			/>
 		</>
 	);
 };
-

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

@@ -20,7 +20,7 @@ export const UDLoader = styled.View`
   width: 100%;
   justify-content: center;
   height: auto;
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   padding: 0;
   margin-top: 0px;

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

@@ -35,7 +35,6 @@ import {
 } from './styles';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import styled from 'styled-components';
 import ToggleSwitch from 'toggle-switch-react-native';
 
 const ProfileListUI = (props: ProfileParams) => {
@@ -60,7 +59,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const hideSession = theme?.bar_menu?.components?.sessions?.hidden
 	const hidePromotions = theme?.bar_menu?.components?.promotions?.hidden
 	const hideAddressList = theme?.profile?.components?.address_list?.hidden
-	const showLanguages = !theme?.profile?.components?.languages?.hidden
+	const showLanguages = theme?.profile?.components?.languages?.hidden
 	const showNotifications = !theme?.profile?.components?.notification_settings?.hidden
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
@@ -102,7 +101,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingHorizontal: isChewLayout ? 20 : 40
+			paddingHorizontal: 20
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -118,8 +117,6 @@ const ProfileListUI = (props: ProfileParams) => {
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
-	const isAdmin = user?.level === 0
-
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
@@ -153,19 +150,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
-		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
-	}
-
-	const onRemoveAccount = () => {
-		setConfirm({
-			open: true,
-			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
-			title: t('ACCOUNT_ALERT', 'Account alert'),
-			handleOnAccept: () => {
-				setConfirm({ ...confirm, open: false })
-				handleRemoveAccount && handleRemoveAccount(user?.id)
-			}
-		})
+		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
+		handleRemoveAccount
 	}
 
 	useEffect(() => {
@@ -175,7 +161,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [removeAccountState])
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom, paddingTop: 20 }}>
+		<View style={{ flex: 1, height: '100%', paddingTop: 20 }}>
 			<CenterView style={styles.pagePadding}>
 				{user?.photo && !hideProfileImage && (
 					<View style={styles.photo}>
@@ -238,11 +224,11 @@ const ProfileListUI = (props: ProfileParams) => {
 							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
 						</ListItem>
 					)}
-					{!showNotifications && (
+					{showNotifications && (
 						<ListItem onPress={() => navigation.navigate('Notifications', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 							<NotificationBadge style={{ borderRadius: 100 / 2 }} />
 							<Ionicons name='notifications-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('NOTIFICATIONS', 'Notifications')}
+							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MARKETING_NOTIFICATIONS', 'Marketing notifications')}
 							</OText>
 							<NotificationsWrapper>
 								<ToggleSwitch
@@ -275,17 +261,13 @@ const ProfileListUI = (props: ProfileParams) => {
 					)}
 				</Actions>
 
-				<Actions>
+				<Actions style={{ paddingTop: height * .02 }}>
 					{!showLanguages && (
 						<LanguageSelector iconColor={theme.colors.textNormal} pickerStyle={langPickerStyle} />
 					)}
 					<View style={{ height: 17 }} />
 					<LogoutButton color={theme.colors.textNormal} text={t('LOGOUT', 'Logout')} />
 					<View style={{ height: 17 }} />
-					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
-						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
-					</ListItem>
 				</Actions>
 			</ListWrap>
 			<OAlert