ordering-ui-react-native 0.12.68 → 0.12.72

package/package.json

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

package/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -150,11 +150,11 @@ export const OrderContentComponent = (props: OrderContent) => {
           {t('CUSTOMER_DETAILS', 'Customer details')}
         </OText>
         {
-          (order?.customer?.name || order?.customer?.lastname) && (
+          (!!order?.customer?.name || !!order?.customer?.lastname) && (
             <View style={{ flexDirection: 'row' }}>
               <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
                 <View style={{ flexDirection: 'row' }}>
-                  {order?.customer?.name && (
+                  {!!order?.customer?.name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -163,7 +163,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                       {order?.customer?.name}
                     </OText>
                   )}
-                  {order?.customer?.middle_name && (
+                  {!!order?.customer?.middle_name && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -172,7 +172,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                       {order?.customer?.middle_name}
                     </OText>
                   )}
-                  {order?.customer?.lastname && (
+                  {!!order?.customer?.lastname && (
                     <OText
                       numberOfLines={1}
                       mBottom={4}
@@ -182,7 +182,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     </OText>
                   )}
                   {
-                    order?.customer?.second_lastname && (
+                    !!order?.customer?.second_lastname && (
                       <OText
                         numberOfLines={1}
                         mBottom={4}
@@ -193,7 +193,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )
                   }
                 </View>
-                {order?.user_review?.qualification && (
+                {!!order?.user_review?.qualification && (
                   <View style={{ flexDirection: 'row' }}>
                     <MaterialIcon style={{ bottom: 2 }} name='star' size={24} color={theme.colors.arrowColor} />
                     <OText mLeft={5}>
@@ -440,7 +440,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {parsePrice(order?.summary?.total ?? 0)}
             </OText>
           </Table>
-          {order?.comment && (
+          {!!order?.comment && (
             <Table>
               <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
               <OText style={{ maxWidth: '70%' }}>

package/themes/instacart/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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

@@ -290,14 +290,6 @@ const AddressListUI = (props: AddressListParams) => {
 							/>
 						</>
 					)}
-					{!isFromProfile && addressList?.addresses?.length > 0 && (
-						<OButton
-							text={t('CONTINUE', 'Continue')}
-							style={styles.button}
-							onClick={() => onNavigatorRedirect()}
-							textStyle={{ color: theme.colors.white }}
-						/>
-					)}
 				</AddressListContainer>
 			)}
 		</Container>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, StyleSheet, BackHandler, KeyboardAvoidingView, Platform, Linking } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import LinearGradient from 'react-native-linear-gradient';
 import { Messages } from '../Messages';
@@ -483,10 +483,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                   <Icons>
                     <TouchableOpacity
-                      onPress={() =>
-                        props.navigation.navigate('Business', {
-                          store: businessData?.slug,
-                        })
+                      onPress={() => order?.business?.cellphone &&
+                        Linking.openURL(`tel:${order?.business?.cellphone}`)
                       }
                       style={{ paddingEnd: 5 }}>
                       <OIcon

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

@@ -314,6 +314,41 @@ export const UserFormDetailsUI = (props: any) => {
 									)}
 								</WrapperPhone>
 							)}
+							<Controller
+								control={control}
+								render={() => (
+									<>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('PASSWORD', 'Password')}
+										</OText>
+										<OInput
+											name='password'
+											placeholder={t('FRONT_VISUALS_PASSWORD', 'Password')}
+											inputStyle={styles.inputStyle}
+											style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+											autoCapitalize='none'
+											isDisabled={false}
+											value={
+												formState?.changes['password'] ??
+												(user && user['password']) ??
+												''
+											}
+											onChange={(val: any) => {
+												setValue('password', val.target.value)
+												handleChangeInput(val)
+											}}
+											autoCorrect
+											type='default'
+											returnKeyType="done"
+											autoCompleteType='off'
+											isSecured
+										/>
+									</>
+								)}
+								name='password'
+								rules={getInputRules({name: 'password', code: 'password'})}
+								defaultValue=''
+							/>
 						</UDWrapper>
 					)}
 				{validationFields?.loading && (
@@ -339,7 +374,7 @@ export const UserFormDetailsUI = (props: any) => {
 								borderColor={theme.colors.primary}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
-								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20 }}
+								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
 								onClick={handleSubmit(onSubmit)}
 							/>
 						)}

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

@@ -114,8 +114,9 @@ const ProfileUI = (props: ProfileParams) => {
 					console.log('ImagePicker Error: ', response.errorMessage);
 					showToast(ToastType.Error, response.errorMessage);
 				} else {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`;
+					if (response?.assets?.length > 0) {
+						const image = response?.assets[0]
+						const url = `data:${image.type};base64,${image.base64}`
 						handleButtonUpdateClick(null, true, url);
 					} else {
 						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));

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

@@ -33,8 +33,8 @@ export const VerifyPhone = (props: any) => {
 
 	const styles = StyleSheet.create({
 		inputStyle: {
-			width: 80,
-			height: 80,
+			width: 75,
+			height: 75,
 			marginBottom: 25,
 			borderWidth: 1,
 			borderColor: theme.colors.disabled,
@@ -50,12 +50,21 @@ export const VerifyPhone = (props: any) => {
 	const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
 	const [verifyCode, setVerifyCode] = useState({ 0: '', 1: '', 2: '', 3: '' })
 	const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
+	const inputRefs: any = [
+		React.createRef(),
+		React.createRef(),
+		React.createRef(),
+		React.createRef()
+	]
 
 	const lastNumbers = phone?.cellphone &&
 		`${phone?.cellphone.charAt(phone?.cellphone.length - 2)}${phone?.cellphone.charAt(phone?.cellphone.length - 1)}`
 
-	const handleChangeCode = (val: number, i: number) => {
+	const goNextAfterEdit = (val: number, i: number) => {
 		setVerifyCode({ ...verifyCode, [i]: val })
+		if(val && i < inputRefs.length - 1) {
+			inputRefs[i+1].focus()
+		}
 	}
 
 	const checkResult = (result: any) => {
@@ -141,14 +150,15 @@ export const VerifyPhone = (props: any) => {
 				</CountDownContainer>
 			</WrappCountdown>
 			<InputsSection>
-				{[...Array(4),].map((_: any, i: number) => (
+				{inputRefs.map((k: any, idx: number) => (
 					<TextInput
-						key={i}
+						key={idx}
 						keyboardType='number-pad'
-						placeholder={'0'}
-						style={styles.inputStyle}
-						onChangeText={(val: any) => handleChangeCode(val, i)}
+						ref={r => inputRefs[idx] =  r}
 						maxLength={1}
+						style={styles.inputStyle}
+						placeholder={'0'}
+						onChangeText={(val: any) => goNextAfterEdit(val, idx)}
 						editable={timer !== '00:00'}
 					/>
 				))}
@@ -173,11 +183,11 @@ export const VerifyPhone = (props: any) => {
 					</ErrorSection>
 				)}
 			<ResendSection>
-				<OText size={17} style={{ marginRight: 5 }}>
+				<OText size={16} style={{ marginRight: 5 }}>
 					{t('ARE_YOU_NOT_SEEING_THE_CODE', 'Are you not seeing the code?')}
 				</OText>
 				<Pressable onPress={() => handleSendCodeAgain()}>
-					<OText size={17} color={theme.colors.primary}>
+					<OText size={16} color={theme.colors.primary}>
 						{t('SEND_AGAIN', 'Send Again')}
 					</OText>
 				</Pressable>

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

@@ -3,8 +3,8 @@ import styled from 'styled-components/native';
 export const Container = styled.View`
   width: 100%;
   padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: 40px;
+  padding-right: 40px;
 `
 
 export const CountDownContainer = styled.View`

package/themes/single-business/src/components/DriverTips/index.tsx

@@ -41,10 +41,11 @@ const DriverTipsUI = (props: any) => {
 			borderRadius: 30
 		},
 		inputStyle: {
+			borderColor: theme.colors.border,
+			borderRadius: 8,
+			marginRight: 20,
+			height: 44,
 			flex: 1,
-			borderWidth: 1,
-			borderColor: theme.colors.disabled,
-			marginRight: 10
 		}
 	})
 
@@ -117,21 +118,23 @@ const DriverTipsUI = (props: any) => {
 						<OInput
 							placeholder={placeholderCurrency}
 							style={style.inputStyle}
+              inputStyle={{ fontSize: 12 }}
 							onChange={handleChangeDriverTip}
 							autoCapitalize='none'
 							autoCorrect={false}
 						/>
 						<OButton
-							text={t('APPLY_TIP', 'Apply Tip')}
+							text={t('APPLY', 'Apply')}
 							bgColor={theme.colors.primary}
 							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 20 }}
+							textStyle={{ color: 'white', fontSize: 12 }}
 							imgRightSrc={null}
 							isDisabled={!(value > 0 && value !== driverTip) || !value}
 							onClick={() => {
 								handlerChangeOption(value)
 								setvalue(0)
 							}}
+              style={{ borderRadius: 8, height: 44, shadowOpacity: 0 }}
 						/>
 					</DTWrapperInput>
 					{parseFloat(driverTip || 0) > 0 && (

package/themes/single-business/src/components/DriverTips/styles.tsx

@@ -60,5 +60,4 @@ export const DTWrapperInput = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 20px;
 `

package/themes/single-business/src/components/OrderSummary/index.tsx

@@ -192,19 +192,19 @@ const OrderSummaryUI = (props: any) => {
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={12} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
                         onChange={(value: string) => handleChangeComment(value)}
                         style={{
+                          borderColor: theme.colors.border,
+                          borderRadius: 10,
+                          marginBottom: 20,
+                          height: 104,
+                          maxHeight: 104,
                           alignItems: 'flex-start',
-                          width: '100%',
-                          height: 100,
-                          borderColor: theme.colors.textSecondary,
-                          paddingRight: 50,
-                          marginTop: 10
                         }}
                         multiline
                         inputStyle={{ color: theme.colors.textPrimary, fontSize: 12 }}

package/themes/uber-eats/src/components/Account/index.tsx

@@ -73,8 +73,9 @@ const AccountUI = (props: AccountParams) => {
         console.log('ImagePicker Error: ', response.errorMessage);
         showToast(ToastType.Error, response.errorMessage);
       } else {
-        if (response.uri) {
-          const url = `data:${response.type};base64,${response.base64}`
+        if (response?.assets?.[0]?.uri) {
+          const image = response?.assets?.[0]
+          const url = `data:${image?.type};base64,${image?.base64}`;
           handleButtonUpdateClick(null, true, url);
         } else {
           showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));

package/themes/uber-eats/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '500px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

package/themes/uber-eats/src/components/AddressList/index.tsx

@@ -300,14 +300,6 @@ const AddressListUI = (props: AddressListParams) => {
               />
             </>
           )}
-          {!isFromProfile && addressList?.addresses?.length > 0 && (
-            <OButton
-              text={t('CONTINUE', 'Continue')}
-              style={styles.button}
-              onClick={() => onNavigatorRedirect()}
-              textStyle={{ color: theme.colors.white }}
-            />
-          )}
         </AddressListContainer>
       )}
     </Container>

package/themes/uber-eats/src/layouts/Container.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import { Platform } from 'react-native';
+import styled, { css } from 'styled-components/native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
+  ${(props: any) => !props.nopadding && css`
+    padding: ${Platform.OS === 'ios' ? '0px 30px 0px' : '30px'};
+  `}
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
 const SafeAreaStyled = styled.SafeAreaView`
@@ -10,19 +15,13 @@ const SafeAreaStyled = styled.SafeAreaView`
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
-const ContentView = styled.View`
-  padding-horizontal: 30px;
-`
-
 
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled ref={props?.forwardRef} keyboardShouldPersistTaps='handled'>
-        <ContentView>
+      <ContainerStyled ref={props?.forwardRef} style={props?.style} {...props} keyboardShouldPersistTaps='handled'>
           {props.children}
-        </ContentView>
       </ContainerStyled>
     </SafeAreaStyled>
   )
-}
+}