ordering-ui-react-native 0.12.4 → 0.12.5

package/package.json

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

package/themes/franchises/src/components/Checkout/index.tsx

@@ -96,7 +96,7 @@ const CheckoutUI = (props: any) => {
 		}
 	})
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
 	const [{ configs }] = useConfig();
@@ -514,7 +514,7 @@ export const Checkout = (props: any) => {
 		onNavigationRedirect,
 	} = props
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ token }] = useSession();
 	const [ordering] = useApi();

package/themes/franchises/src/components/ForgotPasswordForm/index.tsx

@@ -22,7 +22,7 @@ const ForgotPasswordUI = (props: any) => {
 		handleButtonForgotPasswordClick,
 	} = props;
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { control, handleSubmit, errors } = useForm();
 
 	const theme = useTheme();

package/themes/franchises/src/components/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, StyleSheet, View } from 'react-native'
@@ -61,13 +61,19 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 		(a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
 	)
 
+  const changeLang = useCallback((lang) => {
+		if (lang !== currentLanguage || orderState.loading)	{
+			handleChangeLanguage(lang);
+		}
+	}, []);
+
 	return (
 		<Container>
 			{languagesState?.languages && (
 				<>
 					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
 					<RNPickerSelect
-						onValueChange={handleChangeLanguage}
+						onValueChange={changeLang}
 						items={_languages || []}
 						value={currentLanguage}
 						style={pickerStyle ? pickerStyle : _pickerStyle}

package/themes/franchises/src/components/LoginForm/index.tsx

@@ -58,7 +58,7 @@ const LoginFormUI = (props: LoginParams) => {
 		onNavigationRedirect,
 	} = props;
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { login }] = useSession();

package/themes/franchises/src/components/PaymentOptions/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
 import {
 	Placeholder,
 	PlaceholderLine,
@@ -24,12 +24,10 @@ import { OText, OIcon, OModal, OButton } from '../shared';
 import {
 	PMContainer,
 	PMItem,
-	PMCardSelected,
-	PMCardItemContent,
 	PMDropDownWrapper,
 	PMDropDownCont
 } from './styles'
-import { getIconCard, flatArray } from '../../utils';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 // const stripeRedirectOptions = [
@@ -134,7 +132,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12, marginRight: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,8 +149,8 @@ const PaymentOptionsUI = (props: any) => {
 	return (
 		<PMContainer>
 			{paymethodsList.paymethods.length > 0 && (
-				<PMDropDownWrapper onPress={() => setShowMethods(true)}>
-					<OText color={theme.colors.textSecondary} style={{marginStart: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
+				<PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+        <OText color={theme.colors.textSecondary} style={{marginLeft: 14, marginRight: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
 					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
 					{isShowMethods && <PMDropDownCont>
 						{

package/themes/franchises/src/components/PaymentOptions/styles.tsx

@@ -73,4 +73,5 @@ export const PMDropDownCont = styled.View`
   width: 100%;
   padding: 10px 16px;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  border: 1px solid #EEE;
+`;

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

@@ -142,7 +142,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				activeOpacity={1}
 			>
 				<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-					<ContentInfo>
+          <ContentInfo style={{alignItems: 'center'}}>
 						{product?.images && (
 							<ProductImage>
 								{isFromCheckout ? (

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

@@ -95,7 +95,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const showInputPhoneNumber =
 		validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
 
-	const { showToast } = useToast();
+  const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();

package/themes/franchises/src/components/StripeRedirectForm/index.tsx

@@ -26,7 +26,7 @@ const StripeRedirectFormUI = (props: any) => {
 	//   // androidPayMode: 'test', // Android only
 	// })
 
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { control, handleSubmit, errors } = useForm();
 
 	const [{ user }] = useSession();

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

@@ -62,7 +62,7 @@ export const UserFormDetailsUI = (props: any) => {
 	});
 
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
 	const [{ user }] = useSession();

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

@@ -84,7 +84,7 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const [{ user }] = useSession();
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
 	const { height } = useWindowDimensions();

package/themes/franchises/src/components/UserProfileForm/index.tsx

@@ -52,7 +52,7 @@ const ProfileUI = (props: ProfileParams) => {
 
 	const [{ user }] = useSession();
 	const [, t] = useLanguage();
-	const { showToast } = useToast();
+	const [, { showToast }] = useToast();
 	const { handleSubmit, errors, setValue, control } = useForm();
 
 	const [phoneInputData, setPhoneInputData] = useState({

package/themes/franchises/src/components/shared/OToast.tsx

@@ -9,7 +9,7 @@ const bottomPosition = 20;
 export const Toast: React.FC = () => {
 	const theme = useTheme();
 	// const insets = useSafeAreaInsets();
-	const { toastConfig, hideToast } = useToast();
+	const [, { toastConfig, hideToast }] = useToast();
 	const opacity = React.useRef(new Animated.Value(0)).current;
 
 	const fadeIn = React.useCallback(() => {