ordering-ui-react-native 0.22.67-release → 0.22.68-release

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

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from 'react'
 import { View } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -45,7 +46,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +88,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-      (
-        <>
-          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-            <Container
-              key={wallet.id}
-              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-              onPress={() => handleOnChange(idx, wallet)}
-              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-            >
-              <SectionLeft>
-                {checkedState[idx] ? (
-                  <MaterialCommunityIcons
-                    name="checkbox-marked"
-                    size={25}
-                    color={theme.colors.primary}
-                  />
-                ) : (
-                  <MaterialCommunityIcons
-                    name="checkbox-blank-outline"
-                    size={25}
-                    color={theme.colors.disabled}
-                  />
-                )}
-                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                  <View>
-                    <OText
-                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
-                        color: theme.colors.disabled
-                      } : {}}
-                    >
-                      {walletName[wallet.type]?.name}
-                    </OText>
+        (
+          <>
+            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+              <Container
+                key={wallet.id}
+                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+                onPress={() => handleOnChange(idx, wallet)}
+                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+              >
+                <SectionLeft>
+                  {checkedState[idx] ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={25}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={25}
+                      color={theme.colors.disabled}
+                    />
+                  )}
+                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                    <View>
+                      <OText
+                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
+                          color: theme.colors.disabled
+                        } : {}}
+                      >
+                        {walletName[wallet.type]?.name}
+                      </OText>
+                    </View>
                   </View>
-              </View>
-              </SectionLeft>
-
-              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
-                {wallet.type === 'cash' && (
-                  <OText>
-                    {parsePrice(wallet?.balance)}
-                  </OText>
-                )}
-                {wallet.type === 'credit_point' && (
-                  <OText>
-                    <OText color={theme.colors.primary} weight='bold'>
-                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                </SectionLeft>
+
+                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
+                  {wallet.type === 'cash' && (
+                    <OText>
+                      {parsePrice(wallet?.balance, { isTruncable: true })}
                     </OText>
+                  )}
+                  {wallet.type === 'credit_point' && (
                     <OText>
-                      {wallet?.balance > 0
-                        ? creditBalance(wallet)
-                        : null}
+                      <OText color={theme.colors.primary} weight='bold'>
+                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                      </OText>
+                      <OText>
+                        {wallet?.balance > 0
+                          ? creditBalance(wallet)
+                          : null}
+                      </OText>
                     </OText>
-                  </OText>
-                )}
-              </View>
-            </Container>
-          ))}
-        </>
-      )}
+                  )}
+                </View>
+              </Container>
+            ))}
+          </>
+        )}
 
       {walletsState?.loading && (
         <View>

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

@@ -143,7 +143,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     const valid = busyTimes.some(item => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).valueOf() &&
           moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid

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

@@ -177,7 +177,7 @@ export const VerifyPhone = (props: any) => {
 								size={16}
 								color={theme.colors.error}
 							>
-								{`* ${t(getTraduction(e))}`}
+								{`* ${t(getTraduction(e, t))}`}
 							</OText>
 						))}
 					</ErrorSection>

package/themes/original/src/components/shared/OInput.tsx

@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme } from 'styled-components/native';
+import { useTheme, css } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -14,33 +14,33 @@ const Input = styled.TextInput`
 `;
 
 interface Props extends TextInputProps {
-	bgColor?: string;
-	borderColor?: string;
-	isRequired?: boolean;
-	requiredMsg?: string;
-	isDisabled?: boolean;
-	isSecured?: boolean;
-	style?: ViewStyle;
-	placeholder?: string;
-	icon?: ImageSourcePropType | string;
-	iconRight?: ImageSourcePropType;
-	iconColor?: string;
-	iconRightColor?: string;
-	iconStyle?: ImageStyle;
-	iconRightStyle?: ImageStyle;
-	iconCustomRight?: any;
-	value?: string;
-	onChange?: any;
-	name?: string;
-	type?: string;
-	multiline?: boolean;
-	vertorIcon?: string;
-	vectorIconColor?: string;
-	forwardRef?: any;
-	inputStyle?: TextStyle;
-	wrapperRef?: any;
-	onPress?: any;
-	isFocusHighlight?: boolean
+  bgColor?: string;
+  borderColor?: string;
+  isRequired?: boolean;
+  requiredMsg?: string;
+  isDisabled?: boolean;
+  isSecured?: boolean;
+  style?: ViewStyle;
+  placeholder?: string;
+  icon?: ImageSourcePropType | string;
+  iconRight?: ImageSourcePropType;
+  iconColor?: string;
+  iconRightColor?: string;
+  iconStyle?: ImageStyle;
+  iconRightStyle?: ImageStyle;
+  iconCustomRight?: any;
+  value?: string;
+  onChange?: any;
+  name?: string;
+  type?: string;
+  multiline?: boolean;
+  vertorIcon?: string;
+  vectorIconColor?: string;
+  forwardRef?: any;
+  inputStyle?: TextStyle;
+  wrapperRef?: any;
+  onPress?: any;
+  isFocusHighlight?: boolean
 }
 
 const Wrapper = styled.Pressable`
@@ -53,81 +53,85 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `;
 
 const OInput = (props: Props): React.ReactElement => {
-	const theme = useTheme();
-	const [inputFocused, setInputFocused] = React.useState(false)
-	return (
-		<Wrapper
-			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
-			style={{
-				backgroundColor: props.bgColor,
-				borderColor: !props.isFocusHighlight
-					? props.borderColor
-					: inputFocused ? theme.colors.primary : theme.colors.border,
-				...props.style,
-			}}>
-			{props.icon ? (
-				<OIcon
-					src={props.icon}
-					color={props.iconColor}
-					width={16}
-					height={20}
-					style={{ marginRight: 10, ...props.iconStyle }}
-				/>
-			) : null}
-			{props.vertorIcon && (
-				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
-			)}
-			<Input
-				autoFocus={props?.autoFocus}
-				name={props.name}
-				secureTextEntry={props.isSecured}
-				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
-				defaultValue={props.value}
-				placeholder={props.placeholder ? props.placeholder : ''}
-				keyboardType={props.type || 'default'}
-				multiline={props.multiline}
-				scrollEnabled={props.multiline}
-				editable={!props.isDisabled}
-				autoCapitalize={props.autoCapitalize}
-				autoCompleteType={props.autoCompleteType}
-				autoCorrect={props.autoCorrect}
-				returnKeyType={props.returnKeyType}
-				onSubmitEditing={props.onSubmitEditing}
-				blurOnSubmit={props.blurOnSubmit}
-				ref={(e: any) => {
-					props.forwardRef && (props.forwardRef.current = e)
-				}}
-				style={{
+  const theme = useTheme();
+  const [inputFocused, setInputFocused] = React.useState(false)
+  return (
+    <Wrapper
+      onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
+      style={{
+        backgroundColor: props.bgColor,
+        borderColor: !props.isFocusHighlight
+          ? props.borderColor
+          : inputFocused ? theme.colors.primary : theme.colors.border,
+        ...props.style,
+        borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
+      }}>
+      {props.icon ? (
+        <OIcon
+          src={props.icon}
+          color={props.iconColor}
+          width={16}
+          height={20}
+          style={{ marginRight: 10, ...props.iconStyle }}
+        />
+      ) : null}
+      {props.vertorIcon && (
+        <MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
+      )}
+      <Input
+        autoFocus={props?.autoFocus}
+        name={props.name}
+        secureTextEntry={props.isSecured}
+        onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
+        defaultValue={props.value}
+        placeholder={props.placeholder ? props.placeholder : ''}
+        keyboardType={props.type || 'default'}
+        multiline={props.multiline}
+        scrollEnabled={props.multiline}
+        editable={!props.isDisabled}
+        autoCapitalize={props.autoCapitalize}
+        autoCompleteType={props.autoCompleteType}
+        autoCorrect={props.autoCorrect}
+        returnKeyType={props.returnKeyType}
+        onSubmitEditing={props.onSubmitEditing}
+        blurOnSubmit={props.blurOnSubmit}
+        ref={(e: any) => {
+          props.forwardRef && (props.forwardRef.current = e)
+        }}
+        style={{
           ...(theme?.general?.components?.inputs?.color && {
             color: theme?.general?.components?.inputs?.color
           }),
-					...props?.inputStyle
-				}}
-				onFocus={() => setInputFocused(true)}
-				onBlur={() => setInputFocused(false)}
-			/>
-			{props.iconRight && (
-				<OIcon
-					src={props.iconRight}
-					color={props.iconRightColor}
-					width={16}
-					height={16}
-					style={{ ...props.iconRightStyle }}
-				/>
-			)}
-			{props.iconCustomRight}
-		</Wrapper>
-	);
+          ...props?.inputStyle
+        }}
+        onFocus={() => setInputFocused(true)}
+        onBlur={() => setInputFocused(false)}
+      />
+      {props.iconRight && (
+        <OIcon
+          src={props.iconRight}
+          color={props.iconRightColor}
+          width={16}
+          height={16}
+          style={{ ...props.iconRightStyle }}
+        />
+      )}
+      {props.iconCustomRight}
+    </Wrapper>
+  );
 };
 
 OInput.defaultProps = {
-	iconColor: '#959595',
-	bgColor: 'white',
-	borderColor: 'white',
-	isFocusHighlight: false
+  iconColor: '#959595',
+  bgColor: 'white',
+  borderColor: 'white',
+  isFocusHighlight: false
 };
 
 export default OInput;

package/themes/original/src/providers/AlertProvider.tsx

@@ -28,7 +28,7 @@ const Alert = (props: Props) => {
       show={open}
       showProgress={false}
       title={title}
-      message={getTraduction(content?.[0])}
+      message={getTraduction(content?.[0], t)}
       closeOnTouchOutside={true}
       closeOnHardwareBackPress={false}
       showConfirmButton={true}

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

@@ -1,12 +1,8 @@
 import React from 'react';
-import { useLanguage } from 'ordering-components/native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-
-const [languageState, t] = useLanguage();
 const theme = useTheme()
 
 export const flatArray = (arr: any) => [].concat(...arr)
@@ -20,8 +16,7 @@ export const orderTypeList = ['delivery', 'pickup', 'eatin', 'curbside', 'drivet
  * Function to return the traduction depending of a key 't'
  * @param {string} key for traduction
  */
-export const getTraduction = (key: string) => {
-  const [, t] = useLanguage()
+export const getTraduction = (key: string, t: any) => {
   const keyList: any = {
     // Add the key and traduction that you need below
     ERROR_ORDER_WITHOUT_CART: 'The order was placed without a cart',
@@ -131,32 +126,34 @@ export const monthsEnum: any = {
   Dec: 'MONTHSHORT12',
 }
 
-export const locale = {
-  name: languageState?.language?.code?.slice(0, 2),
-  config: {
-    months: [
-      t('MONTH1', 'January'),
-      t('MONTH2', 'February'),
-      t('MONTH3', 'March'),
-      t('MONTH4', 'April'),
-      t('MONTH5', 'May'),
-      t('MONTH6', 'June'),
-      t('MONTH7', 'July'),
-      t('MONTH8', 'August'),
-      t('MONTH9', 'September'),
-      t('MONTH10', 'October'),
-      t('MONTH11', 'November'),
-      t('MONTH12', 'December')
-    ],
-    weekdaysShort: [
-      t('DAYSHORT7', 'Sun'),
-      t('DAYSHORT1', 'Mon'),
-      t('DAYSHORT2', 'Tue'),
-      t('DAYSHORT3', 'Wed'),
-      t('DAYSHORT4', 'Thu'),
-      t('DAYSHORT5', 'Fri'),
-      t('DAYSHORT6', 'Sat')
-    ],
+export const locale = (languageState: any, t: any) => {
+  return {
+    name: languageState?.language?.code?.slice(0, 2),
+    config: {
+      months: [
+        t('MONTH1', 'January'),
+        t('MONTH2', 'February'),
+        t('MONTH3', 'March'),
+        t('MONTH4', 'April'),
+        t('MONTH5', 'May'),
+        t('MONTH6', 'June'),
+        t('MONTH7', 'July'),
+        t('MONTH8', 'August'),
+        t('MONTH9', 'September'),
+        t('MONTH10', 'October'),
+        t('MONTH11', 'November'),
+        t('MONTH12', 'December')
+      ],
+      weekdaysShort: [
+        t('DAYSHORT7', 'Sun'),
+        t('DAYSHORT1', 'Mon'),
+        t('DAYSHORT2', 'Tue'),
+        t('DAYSHORT3', 'Wed'),
+        t('DAYSHORT4', 'Thu'),
+        t('DAYSHORT5', 'Fri'),
+        t('DAYSHORT6', 'Sat')
+      ],
+    }
   }
 };
 
@@ -366,7 +363,7 @@ export const priceList = [
   { level: '5', content: '$$$$$' }
 ]
 
-export const getLogisticTag = (status: any) => {
+export const getLogisticTag = (status: any, t: any) => {
   const keyList: any = {
     0: t('PENDING', 'Pending'),
     1: t('IN_PROGRESS', 'In progress'),
@@ -377,7 +374,7 @@ export const getLogisticTag = (status: any) => {
   return keyList[status] ? keyList[status] : t('UNKNOWN', 'Unknown')
 }
 
-export const getOrderStatus = (s: string, t?: any) => {
+export const getOrderStatus = (s: string, t: any) => {
   const status = parseInt(s);
   const orderStatus = [
     {
@@ -594,7 +591,7 @@ export const getOrderStatus = (s: string, t?: any) => {
   return objectStatus && objectStatus;
 }
 
-export const getOrderStatuPickUp = (s: any) => {
+export const getOrderStatuPickUp = (s: any, t: any) => {
   const status = parseInt(s);
   const orderStatus = [
     {
@@ -744,13 +741,3 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
-
-export const vibrateApp = (impact?: string) => {
-  const options = {
-    enableVibrateFallback: true,
-    ignoreAndroidSystemSettings: false
-  };
-
-  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
-
-}