ordering-ui-react-native 0.17.18 → 0.17.19

package/package.json

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

package/themes/original/index.tsx

@@ -51,6 +51,7 @@ import { LastOrders } from './src/components/LastOrders';
 import { MultiCheckout } from './src/components/MultiCheckout'
 import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
+import { NotificationsList } from './src/components/Notifications'
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
 import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
@@ -183,6 +184,7 @@ export {
 	OrderDetails,
 	OrderProgress,
 	BusinessPreorder,
+	NotificationsList,
 	UserProfileForm,
 	ReviewOrder,
 	ReviewProducts,

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

@@ -140,7 +140,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-		const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)
+		const productAddedToCartLength = currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0) || 0
 		if (product?.type === 'service' && business?.professionals?.length > 0) {
 			setCurrentProduct(product)
 			setOpenService(true)
@@ -251,7 +251,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				<Animated.View style={{ position: 'relative' }}>
 					<TopHeader
 						style={{
-							marginTop: Platform.OS === 'ios' ? insets.top : '40px'
+							marginTop: Platform.OS === 'ios' ? insets.top : 40
 						}}
 					>
 						{!isOpenSearchBar && (

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

@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react'
+import {
+	UserFormDetails as NotificationsController,
+	useLanguage,
+	useSession,
+	useOrderingTheme,
+	useToast,
+	ToastType,
+} from 'ordering-components/native'
+import { NotificationsGroupSwitchWrapper, SwitchWrapper } from './styles'
+import { Platform, StyleSheet, View } from 'react-native'
+import { useState } from 'react'
+import { useTheme } from 'styled-components/native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import ToggleSwitch from 'toggle-switch-react-native'
+import { Container } from '../../layouts/Container'
+import NavBar from '../NavBar'
+import { OText } from '../shared'
+
+const NotificationsUI = (props: any) => {
+	const {
+		navigation,
+		singleNotifications,
+		handleChangePromotions,
+		userData
+	} = props
+
+	const theme = useTheme();
+	const [{ user: userSession }] = useSession()
+	const [, t] = useLanguage();
+	const [, { showToast }] = useToast();
+	const [orderingTheme] = useOrderingTheme()
+
+	const user = userData || userSession
+
+	const [notificationsList, setNotificationsList] = useState({
+		email: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.email?.newsletter
+			: !!(singleNotifications?.changes?.settings?.email?.newsletter ?? (user && user?.settings?.email?.newsletter)),
+		sms: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.sms?.newsletter
+			: !!(singleNotifications?.changes?.settings?.sms?.newsletter ?? (user && user?.settings?.sms?.newsletter)),
+		notification: singleNotifications?.result?.result
+			? !!singleNotifications?.result?.result?.settings?.notification?.newsletter
+			: !!(singleNotifications?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))
+	})
+
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+	const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
+	const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
+
+	const handleEditNotifications = (key: any, value: any) => {
+		setNotificationsList({
+			...notificationsList,
+			[key]: value
+		})
+	}
+
+	useEffect(() => {
+		if (singleNotifications.result.result && !singleNotifications.loading) {
+			if (!singleNotifications.result?.error) {
+				showToast(ToastType.Success, t('UPDATE_SUCCESSFULLY', 'Update successfully'));
+			}
+		}
+	}, [singleNotifications.result])
+
+	useEffect(() => {
+		const isSingle = true
+		handleChangePromotions(notificationsList, isSingle)
+	}, [notificationsList])
+
+	return (
+		<Container noPadding>
+			<NavBar
+				title={t('NOTIFICATIONS', 'Notifications')}
+				titleAlign={'center'}
+				onActionLeft={goToBack}
+				showCall={false}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+			/>
+			{showCustomerPromotions && showNotifications && (
+				<>
+					<Spinner visible={singleNotifications?.loading} />
+					<View style={{ ...styles.pagePadding }}>
+						<NotificationsGroupSwitchWrapper>
+							<OText style={{ ...styles.title }}>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</OText>
+							<SwitchWrapper>
+								<OText>{t('EMAILS', 'Emails')}</OText>
+								<ToggleSwitch
+									isOn={notificationsList?.email}
+									onColor={theme.colors.primary}
+									size="small"
+									disabled={singleNotifications?.loading}
+									offColor={theme.colors.disabled}
+									animationSpeed={400}
+									onToggle={() => handleEditNotifications('email', !notificationsList?.email)}
+								/>
+							</SwitchWrapper>
+							<SwitchWrapper>
+								<OText>{t('SMS', 'Sms')}</OText>
+								<ToggleSwitch
+									isOn={notificationsList?.sms}
+									onColor={theme.colors.primary}
+									size="small"
+									disabled={singleNotifications?.loading}
+									offColor={theme.colors.disabled}
+									animationSpeed={400}
+									onToggle={() => handleEditNotifications('sms', !notificationsList?.sms)}
+								/>
+							</SwitchWrapper>
+							<SwitchWrapper>
+								<OText>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</OText>
+								<ToggleSwitch
+									isOn={notificationsList?.notification}
+									onColor={theme.colors.primary}
+									size="small"
+									disabled={singleNotifications?.loading}
+									offColor={theme.colors.disabled}
+									animationSpeed={400}
+									onToggle={() => handleEditNotifications('notification', !notificationsList?.notification)}
+								/>
+							</SwitchWrapper>
+						</NotificationsGroupSwitchWrapper>
+					</View>
+				</>
+			)}
+		</Container>
+	)
+}
+
+const styles = StyleSheet.create({
+	title: {
+		marginBottom: 24,
+		fontWeight: 'bold',
+	},
+	pagePadding: {
+		paddingLeft: 40,
+		paddingRight: 40
+	}
+});
+
+export const NotificationsList = (props: any) => {
+	const notificationsListProps = {
+		...props,
+		UIComponent: NotificationsUI
+	}
+	return <NotificationsController {...notificationsListProps} />
+}

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components/native'
+
+export const ContainerButtons = styled.View`
+    margin-vertical: 50px
+`
+
+export const NotificationsGroupSwitchWrapper = styled.View`
+  flex-grow: 1;
+  justify-content: space-between;
+`
+
+export const SwitchWrapper = styled.View`
+  flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+`

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

@@ -1110,7 +1110,7 @@ export const ProductOptionsUI = (props: any) => {
 export const ProductForm = (props: any) => {
 	const productOptionsProps = {
 		...props,
-		productCart: { quantity: props?.product?.maximum_per_order || props?.product?.minimum_per_order || 1 },
+		productCart: { quantity: props?.product?.minimum_per_order || 1 },
 		UIComponent: ProductOptionsUI,
 	};
 

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

@@ -10,7 +10,6 @@ import { OText, OButton, OInput } from '../shared';
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
-import CheckBox from '@react-native-community/checkbox';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -18,7 +17,6 @@ export const UserFormDetailsUI = (props: any) => {
 		formState,
 		showField,
 		requiredFields,
-		onClose,
 		setIsSubmit,
 		cleanFormState,
 		onCloseProfile,
@@ -29,12 +27,10 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
-		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -64,10 +60,6 @@ export const UserFormDetailsUI = (props: any) => {
 			paddingStart: 0,
 			paddingBottom: 0,
 			marginBottom: -0,
-		},
-		checkBoxStyle: {
-			width: 25,
-			height: 25,
 		}
 	});
 
@@ -79,7 +71,7 @@ export const UserFormDetailsUI = (props: any) => {
 	const [{ user }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
-  const [isChanged, setIsChanged] = useState(false)
+	const [isChanged, setIsChanged] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -243,10 +235,10 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
-			const _isValid = requiredFields.every((key: any) => formState?.changes[key])
-			setIsValid(_isValid)
-		}, [formState?.changes, requiredFields])
-	
+		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
+		setIsValid(_isValid)
+	}, [formState?.changes, requiredFields])
+
 	return (
 		<>
 			<UDForm>
@@ -333,7 +325,7 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber &&((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
+							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
 									<PhoneInputNumber
@@ -395,39 +387,6 @@ export const UserFormDetailsUI = (props: any) => {
 									defaultValue=''
 								/>
 							)}
-							{!requiredFields && (
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
-										<TouchableOpacity
-											style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}
-											onPress={() => {
-												onChange(!value)
-												handleChangePromotions(!value)
-											}}
-										>
-											<CheckBox
-												value={value}
-												boxType={'square'}
-												tintColors={{
-													true: theme.colors.primary,
-													false: theme.colors.disabled
-												}}
-												tintColor={theme.colors.disabled}
-												onCheckColor={theme.colors.primary}
-												onTintColor={theme.colors.primary}
-												style={Platform.OS === 'ios' && styles.checkBoxStyle}
-											/>
-											<OText style={{ fontSize: 14, paddingHorizontal: 5, paddingLeft: 10 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-										</TouchableOpacity>
-									)}
-									name='promotions'
-									defaultValue={formState?.result?.result
-										? !!formState?.result?.result?.settings?.notification?.newsletter
-										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
-								/>
-							)}
-
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (

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

@@ -29,22 +29,26 @@ import {
 	CenterView,
 	Actions,
 	ListWrap,
-	ListItem
+	ListItem,
+	NotificationsWrapper,
+	NotificationBadge
 } 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) => {
 	const {
 		navigation,
-		formState,
+		notificationsGroup,
 		handleRemoveAccount,
-		removeAccountState
+		removeAccountState,
+		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
 
-
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
 			color: theme.colors.textNormal,
@@ -108,8 +112,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const { top, bottom } = useSafeAreaInsets();
 
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
-
-  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 	const IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
 	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	const onRedirect = (route: string, params?: any) => {
@@ -117,14 +120,12 @@ const ProfileListUI = (props: ProfileParams) => {
 	}
 
 	useEffect(() => {
-		if (formState.result.result && !formState.loading) {
-			if (formState.result?.error) {
-				showToast(ToastType.Error, formState.result.result);
-			} else {
+		if (notificationsGroup.result.result && !notificationsGroup.loading) {
+			if (!notificationsGroup.result?.error) {
 				showToast(ToastType.Success, t('UPDATE_SUCCESSFULLY', 'Update successfully'));
 			}
 		}
-	}, [formState.result])
+	}, [notificationsGroup.result])
 
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
@@ -140,21 +141,20 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [errors]);
 
 	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)
-      }
-    })
+			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(() => {
@@ -189,7 +189,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				</View>
 			</CenterView>
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32 }} />
-			<Spinner visible={formState?.loading} />
+			<Spinner visible={notificationsGroup?.loading} />
 			<ListWrap style={{ ...styles.pagePadding }}>
 				<Actions>
 					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
@@ -222,6 +222,27 @@ const ProfileListUI = (props: ProfileParams) => {
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
 					</ListItem>
+					<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>
+						<NotificationsWrapper>
+							<ToggleSwitch
+								isOn={user && (!!user?.settings?.notification?.newsletter ||
+									!!user?.settings?.sms?.newsletter ||
+									!!user?.settings?.email?.newsletter)}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={notificationsGroup?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleChangePromotions(!(user && (!!user?.settings?.notification?.newsletter ||
+									!!user?.settings?.sms?.newsletter ||
+									!!user?.settings?.email?.newsletter)))}
+							/>
+						</NotificationsWrapper>
+					</ListItem>
 					<ListItem onPress={() => navigation.navigate('Sessions')} activeOpacity={0.7}>
 						<Ionicons name='md-list-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SESSIONS', 'Sessions')}</OText>
@@ -244,13 +265,13 @@ const ProfileListUI = (props: ProfileParams) => {
 				</Actions>
 			</ListWrap>
 			<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 })}
-      />
+				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 })}
+			/>
 		</View>
 	);
 };

package/themes/original/src/components/UserProfile/styles.ts

@@ -1,5 +1,8 @@
+import { useTheme } from 'styled-components';
 import styled from 'styled-components/native'
 
+const theme = useTheme();
+
 export const CenterView = styled.View`
 	flex-direction: row;
 	justify-content: flex-start;
@@ -40,3 +43,17 @@ export const ListItem = styled.TouchableOpacity`
 	margin-bottom: 24px;
 `
 
+export const NotificationsWrapper = styled.View`
+	position: absolute;
+  right: 0;
+`
+
+export const NotificationBadge = styled.View`
+    width: 10px;
+    height: 10px;
+	z-index: 2000;
+    background-color: ${theme.colors.red};
+    position: absolute;
+    left: -2px;
+    top: 3px;
+  `;

package/themes/original/src/types/index.tsx

@@ -47,6 +47,8 @@ export interface ProfileParams {
 	isVerifiedPhone?: any;
 	handleRemoveAccount?: any;
 	removeAccountState?: any;
+	handleChangePromotions?: any;
+	notificationsGroup?: any;
 }
 
 export interface AddressListParams {
@@ -655,10 +657,10 @@ export interface PlaceSpotParams {
 	spotNumberDefault?: any,
 	vehicleDefault?: any,
 	spotNumber?: any,
-    setSpotNumber?: any,
+	setSpotNumber?: any,
 	orderTypes?: any,
 	placesState?: any,
-	handleChangePlace? : any,
+	handleChangePlace?: any,
 	spotState?: any,
 	vehicle?: any,
 	setVehicle?: any,