ordering-ui-react-native 0.15.7 → 0.15.8-release

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { _setStoreData } from '../../../../../src/providers/StoreUtil';
+import { _setStoreData, _removeStoreData } from '../../../../../src/providers/StoreUtil';
 
 import { OButton, OInput, OText } from '../shared';
 import { useForm, Controller } from 'react-hook-form';
@@ -24,10 +24,15 @@ const CustomerName = (props: Props): React.ReactElement => {
   const [orientationState] = useDeviceOrientation();
 
   const onSubmit = (values: any) => {
-    _setStoreData('customer_name', { customerName: values.name });
+    _setStoreData('customer_name', {customerName: values.name});
     onProceedToPay()
   };
 
+  const onSkip = () => {
+    _removeStoreData('customer_name')
+    onProceedToPay()
+  }
+
   const styles = StyleSheet.create({
     inputStyle: {
       borderRadius: 4,
@@ -52,30 +57,26 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   const goToBack = () => navigation?.goBack();
 
-  const submitButton = (
-    <View style={{ flex: 1, alignItems: 'center' }}>
-      <OButton
-        text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
-        onClick={handleSubmit(onSubmit)}
-        textStyle={{ color: theme.colors.primaryContrast, fontSize: 20 }}
-        parentStyle={{
-          height: orientationState?.orientation === PORTRAIT
-            ? 50 : 100
-        }}
-        style={{
-          width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width * 0.5
-            : orientationState?.dimensions.width * 0.5
-        }}
-      />
-    </View>
-  );
+  const submitButton  = (<OButton
+    text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
+    onClick={handleSubmit(onSubmit)}
+    textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+    parentStyle={{
+      height: orientationState?.orientation === PORTRAIT
+         ? 50 : 100
+    }}
+    style={{
+      width: orientationState?.orientation === PORTRAIT
+        ? orientationState?.dimensions.width - 40
+        : orientationState?.dimensions.width * 0.5,
+    }}
+  />);
 
-  const skipButton = (
-    <View style={{ flex: 1, alignItems: 'center' }}>
+  const skipButton  = (
+    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
       <OButton
         text={t('SKIP', 'Skip')}
-        onClick={onProceedToPay}
+        onClick={onSkip}
         textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
@@ -84,7 +85,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         style={{
           backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width * 0.2
+            ? orientationState?.dimensions.width - 40
             : orientationState?.dimensions.width * 0.1,
         }}
       />
@@ -93,78 +94,78 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   return (
     <>
-      <Container>
-        <NavBar
-          title={t('YOUR_NAME', 'Your name')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-        <View style={{
-          marginVertical: orientationState?.dimensions?.height * 0.08,
-          alignItems: 'center'
-        }}>
-          <OText
-            size={orientationState?.dimensions?.width * 0.05}
-            style={{ bottom: 20 }}
-          >
-            {t('WHATS_YOUR_NAME', "What's your name?")}
-            {/* <OText
+        <Container>
+          <NavBar
+                title={t('YOUR_NAME', 'Your name')}
+                onActionLeft={goToBack}
+                btnStyle={{paddingLeft: 0}}
+          />
+          <View style={{ 
+            marginVertical: orientationState?.dimensions?.height * 0.08,
+            paddingLeft: orientationState?.dimensions?.width * 0.25
+          }}>
+              <OText
+                size={orientationState?.dimensions?.width * 0.05}
+                style={{bottom: 20}}
+              >
+                {t('WHATS_YOUR_NAME', "What's your name?")}
+                {/* <OText
                   size={orientationState?.dimensions?.width * 0.05}
                   weight={'700'}
                 >
                   {`${t('ORDER_BE_FOR', 'order be for?')}`}
                 </OText> */}
-          </OText>
-          <Controller
-            control={control}
-            render={({ onChange, value }: any) => (
-              <OInput
-                placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-                style={{
-                  ...styles.inputStyle,
-                  width: orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions.width * 0.5
-                    : orientationState?.dimensions.width * 0.5,
+              </OText>
+              <Controller
+                control={control}
+                render={({ onChange, value }: any) => (
+                  <OInput
+                    placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+                    style={{
+                      ...styles.inputStyle,
+                      width: orientationState?.orientation === PORTRAIT
+                        ? orientationState?.dimensions.width - 40
+                        : orientationState?.dimensions.width * 0.5,
+                    }}
+                    value={value}
+                    autoCapitalize="words"
+                    autoCorrect={false}
+                    onChange={(val: any) => onChange(val)}
+                    onSubmitEditing={handleSubmit(onSubmit)}
+                  />
+                )}
+                name="name"
+                rules={{
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'The field Customer Name is required',
+                  ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+                  pattern: {
+                    value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+                    message: t(
+                      'INVALID_ERROR',
+                      'Invalid name',
+                    ).replace('_attribute_', t('NAME', 'Name')),
+                  }
                 }}
-                value={value}
-                autoCapitalize="words"
-                autoCorrect={false}
-                onChange={(val: any) => onChange(val)}
-                onSubmitEditing={handleSubmit(onSubmit)}
+                defaultValue=""
               />
-            )}
-            name="name"
-            rules={{
-              required: t(
-                'VALIDATION_ERROR_REQUIRED',
-                'The field Customer Name is required',
-              ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-              pattern: {
-                value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-                message: t(
-                  'INVALID_ERROR',
-                  'Invalid name',
-                ).replace('_attribute_', t('NAME', 'Name')),
-              }
-            }}
-            defaultValue=""
-          />
 
-          {orientationState?.orientation === LANDSCAPE && submitButton}
-          {orientationState?.orientation === LANDSCAPE && skipButton}
-          {(orientationState?.orientation === PORTRAIT) && (
-            <OSActions>
-              {submitButton}
-            </OSActions>
-          )}
-          {(orientationState?.orientation === PORTRAIT) && (
-            <OSActions>
-              {skipButton}
-            </OSActions>
-          )}
-        </View>
-      </Container>
-    </>
+              {orientationState?.orientation === LANDSCAPE && submitButton}
+              {orientationState?.orientation === LANDSCAPE && skipButton}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {submitButton}
+                </OSActions>
+              )}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {skipButton}
+                </OSActions>
+              )}
+            </View>
+        </Container>
+      </>
   );
 };
 

package/themes/kiosk/src/components/Intro/index.tsx

@@ -32,17 +32,17 @@ const Intro = (props: any): React.ReactElement => {
   };
 
   return (
-    <ScrollView
-      scrollEnabled={false}
-      refreshControl={
-        <RefreshControl
-          refreshing={showLogoutPopup ? false : refreshing}
-          onRefresh={() => setShowLogoutPopup(true)}
-        />
-      }
-    >
+    // <ScrollView
+    //   scrollEnabled={false}
+    //   refreshControl={
+    //     <RefreshControl
+    //       refreshing={showLogoutPopup ? false : refreshing}
+    //       onRefresh={() => setShowLogoutPopup(true)}
+    //     />
+    //   }
+    // >
       <Pressable onPress={goBusiness}>
-        <Container nopadding={orientationState.orientation === LANDSCAPE}>
+        <View style={{ height: orientationState?.dimensions?.height }}>
           {orientationState.orientation === PORTRAIT ? (
             <View
               style={{
@@ -132,15 +132,15 @@ const Intro = (props: any): React.ReactElement => {
             open={showLogoutPopup}
             onClose={() => setShowLogoutPopup(false)}
           />
-        </Container>
+        </View>
       </Pressable>
-    </ScrollView>
+    // </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 290,
+    minWidth: 130,
     marginBottom: 16
   }
 });

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { LanguageSelector as LanguageSelectorController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet, ActivityIndicator } from 'react-native'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
 
 import { Container, LanguageItem } from './styles'
@@ -40,6 +40,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
 	)
 
+	const [orderState] = useOrder()
 	const [isCountryModalVisible, setCountryModalVisible] = useState(false);
 
 	const countryCodes = _languages?.map((item:any) => item.countryCode);
@@ -48,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<>
-		{ languagesState.loading ? 
+		{ languagesState.loading ?
 		(<Container>
 			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
 				<PlaceholderLine height={15}/>
@@ -66,8 +67,8 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 							closeButtonStyle={styles.closeIcon}
 							renderFlagButton={() => (
 								<TouchableOpacity
-									onPress={() => setCountryModalVisible(true)}
-									disabled={languagesState.loading}
+									onPress={() => orderState.loading ? {} : setCountryModalVisible(true)}
+									// disabled={orderState.loading}
 								>
 									<LanguageItem>
 											<Flag
@@ -76,7 +77,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 												countryCode={currentLanguageData?.countryCode}
 											/>
 										<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
-										<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										{orderState.loading ? (
+											<ActivityIndicator size="small" color={theme.colors.primary} style={{ marginLeft: 5 }} />
+										) : (
+											<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										)}
 									</LanguageItem>
 								</TouchableOpacity>
 							)}
@@ -87,11 +92,10 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 								renderItem: ({item} : any) => (
 									<TouchableOpacity
 										onPress={() => {
-											/* @ts-ignore */
 											handleChangeLanguage(item.value);
 											setCountryModalVisible(false);
 										}}
-										disabled={languagesState.loading}
+										disabled={orderState.loading}
 									>
 										<LanguageItem>
 											<View style={styles.flagsContainer} />

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -5,6 +5,7 @@ import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -64,28 +65,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -125,7 +125,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderDetails/index.tsx

@@ -212,7 +212,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           setCustomerName(name)
       } catch (e) {
         if (e) {
-          setCustomerName('')
+          setCustomerName(null)
         }
       }
     }
@@ -553,7 +553,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       size={orientationState?.dimensions?.width * 0.048}
                       weight="700"
                     >
-                      {`${t('HUNGRY', 'hungry')}, ${customerName}`}
+                      {t('HUNGRY', 'hungry')}{!!customerName && `, ${customerName}`}
                     </OText>
                   </OText>
 

package/themes/kiosk/src/components/OrderSummary/index.tsx

@@ -169,7 +169,7 @@ const OrderSummaryUI = (props: any) => {
               isCartProduct
               productCart={curProduct}
               businessSlug={cart?.business?.slug}
-              businessId={curProduct?.business_id}
+              businessId={cart?.business_id}
               categoryId={curProduct?.category_id}
               productId={curProduct?.id}
               onSave={handlerProductAction}

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -59,8 +57,8 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack })}
-          btnStyle={{ paddingLeft: 0 }}
+          {...(goBack && { onActionLeft: goBack } )}
+          btnStyle={{paddingLeft: 0}}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')