ordering-ui-react-native 0.18.69 → 0.18.71

package/package.json

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

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
@@ -25,8 +25,7 @@ export const Otp = (props: otpParams) => {
     600, willVerifyOtpState)
 
   const [code, setCode] = useState('')
-
-
+  const inputRef = useRef<any>()
   const handleOnSubmit = () => {
     setAlertState({
       open: true,
@@ -49,6 +48,7 @@ export const Otp = (props: otpParams) => {
   useEffect(() => {
     if (code?.length === (pinCount || 6)) {
       handleLoginOtp(code)
+      inputRef?.current?.reset()
     }
   }, [code])
 
@@ -82,6 +82,7 @@ export const Otp = (props: otpParams) => {
           {formatSeconds(otpLeftTime)}
         </OText>
         <OtpInputs
+          ref={inputRef}
           autofillFromClipboard
           numberOfInputs={pinCount || 6}
           style={loginStyle.container}

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

@@ -166,7 +166,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           <OText key={event.id} size={12} lineHeight={18} color={theme.colors.textNormal}>
             {event?.wallet_event
               ? walletName[event?.wallet_event?.wallet?.type]?.name
-              : event?.paymethod?.name}
+              : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
           </OText>
         ))}
       </Section>

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

@@ -9,7 +9,6 @@ const TitleWrapper = styled.View`
   padding-horizontal: 10px;
 `
 const TitleTopWrapper = styled.View`
-  flex: 1;
   flex-direction: row;
   align-items: center;
 `
@@ -44,6 +43,7 @@ interface Props {
 	paddingTop?: number,
 	isVertical?: boolean,
 	noMargin?: any
+	hideArrowLeft?: boolean
 }
 
 const NavBar = (props: Props) => {
@@ -54,8 +54,6 @@ const NavBar = (props: Props) => {
 		background-color: ${theme.colors.white};
 		padding: 10px 20px 20px 0px;
 		flex-direction: row;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 	`
 
@@ -64,16 +62,18 @@ const NavBar = (props: Props) => {
 	}
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
-			<OButton
-				iconProps={{
-					name: 'arrowleft',
-					size: 26
-				}}
-				icon={AntDesignIcon}
-				imgRightSrc={null}
-				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
-				onClick={props?.onActionLeft}
-			/>
+			{!props.hideArrowLeft && (
+				<OButton
+					iconProps={{
+						name: 'arrowleft',
+						size: 26
+					}}
+					icon={AntDesignIcon}
+					imgRightSrc={null}
+					style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
+					onClick={props?.onActionLeft}
+				/>
+			)}
 			<TitleTopWrapper>
 				{props.withIcon
 					? (

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

@@ -77,6 +77,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
 	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
+	const [productQuantity, setProductQuantity] = useState(product.quantity.toString())
 
 	const productInfo = () => {
 		if (isCartProduct) {
@@ -120,6 +121,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
+			setProductQuantity(value)
 			if (parseInt(value) === 0) {
 				onDeleteProduct && onDeleteProduct(product)
 			} else {
@@ -209,7 +211,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={product.quantity.toString()}
+												value={productQuantity}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}

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

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity, Platform } f
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
+import NavBar from '../NavBar'
 import {
   WalletList,
   useLanguage,
@@ -119,51 +120,29 @@ const WalletsUI = (props: any) => {
 
   return (
     <>
-      <Container>
+      <Container
+        pdng={Platform.OS === 'ios' ? '10px' : '0'}
+      >
         <Header>
           <View style={{
             ...{
               width: '100%',
               display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginTop: 30,
-              justifyContent: 'space-between',
-              alignContent: 'center'
+              flexDirection: hideWalletsTheme ? 'column' : 'row',
+              justifyContent: hideWalletsTheme ? 'flex-start' : 'space-between',
+              alignItems: hideWalletsTheme ? 'flex-start' : 'center',
+              marginTop: hideWalletsTheme ? 0 : 10,
             },
           }}>
-            {(!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout && (
-              <OButton
-                imgLeftStyle={{ width: 18 }}
-                imgRightSrc={null}
-                style={{
-                  borderWidth: 0,
-                  width: 26,
-                  height: 26,
-                  backgroundColor: '#FFF',
-                  borderColor: '#FFF',
-                  shadowColor: '#FFF',
-                  paddingLeft: 0,
-                  paddingRight: 0,
-                }}
-                onClick={goToBack}
-                icon={AntDesignIcon}
-                iconProps={{
-                  name: 'arrowleft',
-                  size: 26
-                }}
-              />
-            )}
-            <OText
-              size={20}
-              style={{
-                marginLeft: (!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout ? 40 : 0,
-                color: theme.colors.textNormal,
-              }}
-              weight={Platform.OS === 'ios' ? '600' : 'bold'}
-            >
-              {t('WALLETS', 'Wallets')}
-            </OText>
+            <NavBar
+              title={t('WALLETS', 'Wallets')}
+              titleAlign={'center'}
+              onActionLeft={goToBack}
+              showCall={false}
+              paddingTop={10}
+              btnStyle={{ paddingLeft: 0 }}
+              hideArrowLeft={!hideWalletsTheme}
+            />
             {isChewLayout && (
               <OButton
                 text={t('WALLET_HISTORY', 'Wallet history')}
@@ -172,7 +151,7 @@ const WalletsUI = (props: any) => {
                 imgRightSrc={null}
                 textStyle={{ fontSize: 12, color: theme.colors.disabled }}
                 onClick={() => setOpenHistory(true)}
-                style={{ borderRadius: 8, height: 40 }}
+                style={{ borderRadius: 8, height: 40, width: hideWalletsTheme ? '100%' : 150, marginTop: hideWalletsTheme ? 10 : 0 }}
               />
             )}
           </View>

package/themes/original/src/components/Wallets/styles.tsx

@@ -1,13 +1,12 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  display: flex;
-  flex-direction: column;
+  padding-horizontal: 20px;
+  padding-bottom: 20px;
+  padding-top: ${(props: any) => props.pdng};
 `
 export const Header = styled.View`
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
 `
 export const SectionContent = styled.View`
   width: 100%;