ordering-ui-react-native 0.14.77 → 0.14.78

package/package.json

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

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

@@ -62,7 +62,8 @@ const SignupFormUI = (props: SignupParams) => {
 		setCheckPhoneCodeState,
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
-		notificationState
+		notificationState,
+		handleChangePromotions
 	} = props;
 
 	const theme = useTheme();
@@ -92,9 +93,9 @@ const SignupFormUI = (props: SignupParams) => {
 			marginBottom: 7,
 		},
 		checkBoxStyle: {
-      width: 25,
-      height: 25,
-    }
+			width: 25,
+			height: 25,
+		}
 	});
 
 	const [, { showToast }] = useToast();
@@ -281,9 +282,9 @@ const SignupFormUI = (props: SignupParams) => {
 		const supported = await Linking.canOpenURL(url);
 
 		if (supported) {
-		  	await Linking.openURL(url);
+			await Linking.openURL(url);
 		} else {
-		  	showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
 		}
 	}
 
@@ -470,6 +471,33 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<CheckBox
+											value={value}
+											onValueChange={newValue => {
+												onChange(newValue)
+												handleChangePromotions()
+											}}
+											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' && style.checkBoxStyle}
+										/>
+									)}
+									name='promotions'
+									defaultValue={false}
+								/>
+								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+							</View>
+
 							{configs?.terms_and_conditions?.value === 'true' && (
 								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
 									<Controller
@@ -592,25 +620,25 @@ const SignupFormUI = (props: SignupParams) => {
 							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
-							style={{ borderRadius: 7.6, marginTop: 6,shadowOpacity: 0 }}
+							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
 						/>
 					)}
 				</FormInput>
 
 				{
-          onNavigationRedirect && loginButtonText && (
-            <View style={style.wrappText}>
-              <OText size={14} style={{ marginRight: 5 }}>
-                {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
-              </OText>
-              <Pressable onPress={() => onNavigationRedirect('Login')}>
-                <OText size={14} color={theme.colors.primary}>
-                  {loginButtonText}
-                </OText>
-              </Pressable>
-            </View>
-          )
-        }
+					onNavigationRedirect && loginButtonText && (
+						<View style={style.wrappText}>
+							<OText size={14} style={{ marginRight: 5 }}>
+								{t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
+							</OText>
+							<Pressable onPress={() => onNavigationRedirect('Login')}>
+								<OText size={14} color={theme.colors.primary}>
+									{loginButtonText}
+								</OText>
+							</Pressable>
+						</View>
+					)
+				}
 				<View
 					style={{
 						flexDirection: 'row',
@@ -632,23 +660,23 @@ const SignupFormUI = (props: SignupParams) => {
 
 				{configs && Object.keys(configs).length > 0 && (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-					(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
 					(
 						<ButtonsWrapper>
 							<SocialButtons>
 								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-								configs?.facebook_id?.value && (
-									<FacebookLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessFacebookLogin={handleSuccessFacebook}
-									/>
-								)}
+									configs?.facebook_id?.value && (
+										<FacebookLogin
+											notificationState={notificationState}
+											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessFacebookLogin={handleSuccessFacebook}
+										/>
+									)}
 								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
 									<GoogleLogin
 										notificationState={notificationState}
-                    					webClientId={configs?.google_login_client_id?.value}
+										webClientId={configs?.google_login_client_id?.value}
 										handleErrors={(err: any) => showToast(ToastType.Error, err)}
 										handleLoading={(val: boolean) => setIsFBLoading(val)}
 										handleSuccessGoogleLogin={handleSuccessFacebook}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
@@ -10,6 +10,7 @@ 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 {
@@ -24,6 +25,7 @@ export const UserFormDetailsUI = (props: any) => {
 		handleButtonUpdateClick,
 		phoneUpdate,
 		hideUpdateButton,
+		handleChangePromotions
 	} = props;
 
 	const theme = useTheme();
@@ -58,6 +60,10 @@ export const UserFormDetailsUI = (props: any) => {
 			paddingStart: 0,
 			paddingBottom: 0,
 			marginBottom: -0,
+		},
+		checkBoxStyle: {
+			width: 25,
+			height: 25,
 		}
 	});
 
@@ -320,7 +326,7 @@ export const UserFormDetailsUI = (props: any) => {
 								render={() => (
 									<>
 										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-										{t('PASSWORD', 'Password')}
+											{t('PASSWORD', 'Password')}
 										</OText>
 										<OInput
 											name='password'
@@ -347,9 +353,37 @@ export const UserFormDetailsUI = (props: any) => {
 									</>
 								)}
 								name='password'
-								rules={getInputRules({name: 'password', code: 'password'})}
+								rules={getInputRules({ name: 'password', code: 'password' })}
 								defaultValue=''
 							/>
+							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20, width: '100%' }}>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<CheckBox
+											value={value}
+											onValueChange={newValue => {
+												onChange(newValue)
+												handleChangePromotions(newValue)
+											}}
+											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}
+										/>
+									)}
+									name='promotions'
+									defaultValue={formState?.result?.result
+										? !!formState?.result?.result?.settings?.notification?.newsletter
+										: !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))}
+								/>
+								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+							</View>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (

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

@@ -93,6 +93,7 @@ export interface SignupParams {
 	handleSendVerifyCode?: any;
 	handleCheckPhoneCode?: any;
 	notificationState?: any;
+	handleChangePromotions: () => void;
 }
 
 export interface PhoneInputParams {