ordering-ui-react-native 0.14.50 → 0.14.51

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -453,7 +453,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.offer_type === 1 ? (
                     <OText>
                       {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
-                      <span>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</span>
+                      <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
                     <OText>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>

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

@@ -24,7 +24,7 @@ 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()
   };
 
@@ -52,27 +52,31 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   const goToBack = () => navigation?.goBack();
 
-  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 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 skipButton  = (
-    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
+  const skipButton = (
+    <View style={{ flex: 1, alignItems: 'center' }}>
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primary, fontSize: 20}}
+        textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
@@ -80,7 +84,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         style={{
           backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width - 40
+            ? orientationState?.dimensions.width * 0.2
             : orientationState?.dimensions.width * 0.1,
         }}
       />
@@ -89,78 +93,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,
-            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
+      <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
                   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 - 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')),
-                  }
+          </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,
                 }}
-                defaultValue=""
+                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')),
+              }
+            }}
+            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

@@ -65,7 +65,7 @@ const Intro = (props: any): React.ReactElement => {
               />
 
               <OButton
-                text={t('TOUCH_TO_ORDER', 'Touch to order')}
+                text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
                 parentStyle={{
                   alignItems: 'center',
                   width: orientationState?.dimensions?.width - _offset

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

@@ -5,7 +5,6 @@ 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;
@@ -65,27 +64,28 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft || props?.leftImg) && (
+      {(props?.onActionLeft) && (
         <OButton
-          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
+          imgLeftSrc={props.leftImg}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle= {props.imgLeftStyle}
+          imgLeftStyle={props.imgLeftStyle}
+          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
         />)
       }
       <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/ProductForm/index.tsx

@@ -69,7 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT =  Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -100,35 +100,35 @@ export const ProductOptionsUI = (props: any) => {
   const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors)?.length > 0
 
   const [scrollY] = useState(new Animated.Value(0));
-  
+
   const headerHeight = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
     extrapolate: 'clamp'
   });
   const heroContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const heroTranslateY = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, -(HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT)],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, -(HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT)],
     extrapolate: 'clamp'
   });
   const navBar1ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const navBar2ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
 
   const collapsedBarContainerOpacity = scrollY.interpolate({
-    inputRange: [HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
@@ -223,7 +223,7 @@ export const ProductOptionsUI = (props: any) => {
     shadow: {
       shadowColor: '#000',
       shadowOffset: { width: 1, height: 1 },
-      shadowOpacity:  0.4,
+      shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
     }
@@ -235,33 +235,31 @@ export const ProductOptionsUI = (props: any) => {
         style={styles.mainContainer}
         contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
-          {useNativeDriver: false})
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
         <Animated.View style={[styles.header, { height: headerHeight }]}>
           {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-              <NavBar
-                {...navBarProps}
-                titleColor={theme.colors.white}
-                {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-                btnStyle={{
-                  width: 55,
-                  height: 55,
-                  backgroundColor: 'black',
-                  borderRadius: 100,
-                  opacity: 0.8,
-                  left: 20,
-                }}
-                imgLeftStyle={{ width: 27, height: 27 }}
-              />
-            </Animated.View>
+            <NavBar
+              {...navBarProps}
+              titleColor={theme.colors.white}
+              btnStyle={{
+                width: 66,
+                height: 66,
+                backgroundColor: 'black',
+                borderRadius: 100,
+                color: 'white',
+                opacity: 0.8,
+                left: 20,
+              }}
+            />
+          </Animated.View>
           )}
           <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
             <NavBar
               {...navBarProps}
-              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
               btnStyle={{
                 width: 55,
                 height: 55,
@@ -269,7 +267,6 @@ export const ProductOptionsUI = (props: any) => {
                 borderRadius: 100,
                 left: 20,
               }}
-              imgLeftStyle={{ width: 27, height: 27 }}
             />
           </Animated.View>
 
@@ -288,7 +285,7 @@ export const ProductOptionsUI = (props: any) => {
               }}
             >
               <OImage
-                source={{uri: product?.images}}
+                source={{ uri: product?.images }}
                 width={70}
                 height={70}
                 resizeMode="cover"
@@ -319,7 +316,7 @@ export const ProductOptionsUI = (props: any) => {
             opacity: heroContainerOpacity,
             position: 'absolute',
             zIndex: -100,
-            transform: [{translateY: heroTranslateY }],
+            transform: [{ translateY: heroTranslateY }],
           }}>
             <View
               style={{
@@ -330,13 +327,13 @@ export const ProductOptionsUI = (props: any) => {
                 backgroundColor: 'rgba(24, 28, 50, 0.4)',
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
+              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
 
             </View>
 
             <Animated.View
               style={{
-                transform: [{translateY: heroTranslateY }],
+                transform: [{ translateY: heroTranslateY }],
                 width: orientationState?.dimensions?.width * 0.75,
                 height: HEADER_EXPANDED_HEIGHT / 2,
                 position: 'relative',
@@ -347,7 +344,7 @@ export const ProductOptionsUI = (props: any) => {
             >
               <OText
                 color={theme.colors.white}
-                size={orientationState?.dimensions?.width * 0.048}
+                size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
                 numberOfLines={2}
@@ -369,18 +366,18 @@ export const ProductOptionsUI = (props: any) => {
           <Spinner visible={loading} />
         )} */}
         {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
             <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
                   (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) &&(
-                  <>
-                    <OText size={20}>{t('SKU', 'Sku')}</OText>
-                    <OText>{product?.sku || productCart?.sku}</OText>
-                  </>
-                )}
+                ) && (
+                    <>
+                      <OText size={20}>{t('SKU', 'Sku')}</OText>
+                      <OText>{product?.sku || productCart?.sku}</OText>
+                    </>
+                  )}
               </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
@@ -504,7 +501,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}