ordering-ui-react-native 0.15.71 → 0.15.72-release

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

@@ -7,6 +7,7 @@ import {
   TextInput,
   SafeAreaView,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 import {
   UserVerification as UserVerificationController,
@@ -81,7 +82,6 @@ const UserVerificationUI = (props: any) => {
   const [containerIsFocused, setContainerIsFocused] = useState(false);
 
   const [phoneState, setPhoneState] = useState<any>(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
   const [verificationState, setVerificationState] = useState({ email: false, phone: false })
 
   const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
@@ -155,7 +155,7 @@ const UserVerificationUI = (props: any) => {
 
     const containerStyle =
       containerIsFocused && isFocused
-        ? {...style.inputContainer, ...style.inputContainerFocused}
+        ? { ...style.inputContainer, ...style.inputContainerFocused }
         : style.inputContainer;
 
     return (
@@ -250,8 +250,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyEmailState?.errorSendCode?.[0]
-          ?? verifyEmailState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyEmailState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -264,8 +264,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyPhoneState?.errorSendCode?.[0]
-          ?? verifyPhoneState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyPhoneState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -296,209 +296,195 @@ const UserVerificationUI = (props: any) => {
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <Container>
-        <WrapperActions>
-          <WrapperText>
-            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
-              {t('VERIFICATION_CODE', 'Verification Code')}
-            </OText>
-            {isEmailVerifyRequired && (
-              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
-                {!verificationState.email ? (
-                  t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
-                ) : (
-                  t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
-                )}
+      <ScrollView>
+        <Container>
+          <WrapperActions>
+            <WrapperText>
+              <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+                {t('VERIFICATION_CODE', 'Verification Code')}
               </OText>
-            )}
-
-            {isPhoneVerifyRequired && !isEmailVerifyRequired && (
-              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
-                {!verificationState.phone ? (
-                  t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
-                ) : (
-                  t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
-                )}
-              </OText>
-            )}
-          </WrapperText>
-          <View style={{ position: 'absolute', top: 0, right: 0 }}>
-            <LogoutButton iconSize={20} />
-          </View>
-        </WrapperActions>
-
-        {isEmailVerifyRequired && (
-          !verificationState.email ? (
-            <InputWrapper>
-              <OInput
-                placeholder={user?.email}
-                style={style.inputStyle}
-                icon={theme.images.general.email}
-                isDisabled
-              />
-            </InputWrapper>
-          ) : (
-            <>
-              <WrappCountdown>
-                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
-                  <OText
-                    size={26}
-                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
-                  >
-                    {timer}
-                  </OText>
-                </CountDownContainer>
-              </WrappCountdown>
-
-              <InputsSection>
-                <OtpSection>
-                  <DigitInput
-                    disabled={otpState.length === CODE_LENGTH}
-                    onPress={handleOnPress}
-                  >
-                    {codeDigitsArray.map(toDigitInput)}
-                  </DigitInput>
-                  <TextInput
-                    ref={ref}
-                    value={otpState}
-                    placeholder='0'
-                    onChangeText={setOtpState}
-                    onSubmitEditing={handleOnBlur}
-                    keyboardType="number-pad"
-                    returnKeyType="done"
-                    textContentType="oneTimeCode"
-                    maxLength={CODE_LENGTH}
-                    style={style.hiddenCodeInput}
-                  />
-                </OtpSection>
-              </InputsSection>
-
-              <WrapperText>
-                <TouchableOpacity
-                  onPress={() => handleSendOtp()}
-                >
-                  <OText color={theme.colors.primary}>
-                    {t('RESEND_AGAIN', 'Resend again?')}
-                  </OText>
-                </TouchableOpacity>
-              </WrapperText>
-            </>
-          )
-        )}
-
-        {isPhoneVerifyRequired && !isEmailVerifyRequired && (
-          !verificationState.phone ? (
-            phoneState?.formatted ? (
-              <>
-                <InputWrapper phone>
-                  <PhoneInputNumber
-                    handleData={() => {}}
-                    defaultValue={phoneState?.cellphone}
-                    defaultCode={phoneState?.country_phone_code.replace('+', '')}
-                    boxStyle={style.phoneSelect}
-                    inputStyle={style.phoneInputStyle}
-                    textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
-                    noDropIcon
-                    isDisabled
-                  />
-                </InputWrapper>
-              </>
+              {isEmailVerifyRequired && (
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {!verificationState.email ? (
+                    t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
+                  ) : (
+                    t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
+                  )}
+                </OText>
+              )}
+
+              {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {!verificationState.phone ? (
+                    t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
+                  ) : (
+                    t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
+                  )}
+                </OText>
+              )}
+            </WrapperText>
+            <View style={{ position: 'absolute', top: 0, right: 0 }}>
+              <LogoutButton iconSize={20} />
+            </View>
+          </WrapperActions>
+
+          {isEmailVerifyRequired && (
+            !verificationState.email ? (
+              <InputWrapper>
+                <OInput
+                  placeholder={user?.email}
+                  style={style.inputStyle}
+                  icon={theme.images.general.email}
+                  isDisabled
+                />
+              </InputWrapper>
             ) : (
               <>
+                <WrappCountdown>
+                  <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
+                    <OText
+                      size={26}
+                      color={timer === '00:00' ? theme.colors.error : theme.colors.success}
+                    >
+                      {timer}
+                    </OText>
+                  </CountDownContainer>
+                </WrappCountdown>
+
+                <InputsSection>
+                  <OtpSection>
+                    <DigitInput
+                      disabled={otpState.length === CODE_LENGTH}
+                      onPress={handleOnPress}
+                    >
+                      {codeDigitsArray.map(toDigitInput)}
+                    </DigitInput>
+                    <TextInput
+                      ref={ref}
+                      value={otpState}
+                      placeholder='0'
+                      onChangeText={setOtpState}
+                      onSubmitEditing={handleOnBlur}
+                      keyboardType="number-pad"
+                      returnKeyType="done"
+                      textContentType="oneTimeCode"
+                      maxLength={CODE_LENGTH}
+                      style={style.hiddenCodeInput}
+                    />
+                  </OtpSection>
+                </InputsSection>
+
+                <WrapperText>
+                  <TouchableOpacity
+                    onPress={() => handleSendOtp()}
+                  >
+                    <OText color={theme.colors.primary}>
+                      {t('RESEND_AGAIN', 'Resend again?')}
+                    </OText>
+                  </TouchableOpacity>
+                </WrapperText>
+              </>
+            )
+          )}
+
+          {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+            !verificationState.phone ? (
+              phoneState?.formatted ? (
+                <>
+                  <InputWrapper phone>
+                    <PhoneInputNumber
+                      handleData={() => { }}
+                      defaultValue={phoneState?.cellphone}
+                      defaultCode={phoneState?.country_phone_code.replace('+', '')}
+                      boxStyle={style.phoneSelect}
+                      inputStyle={style.phoneInputStyle}
+                      textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+                      noDropIcon
+                      isDisabled
+                    />
+                  </InputWrapper>
+                </>
+              ) : (
                 <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
                   {t('WARNING_PHONE_CODE_VALIDATION', 'Please update your phone number to continue')}
                 </OText>
+              )
+            ) : (
+              <>
+                <WrappCountdown>
+                  <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
+                    <OText
+                      size={26}
+                      color={timer === '00:00' ? theme.colors.error : theme.colors.success}
+                    >
+                      {timer}
+                    </OText>
+                  </CountDownContainer>
+                </WrappCountdown>
+
+                <InputsSection>
+                  <OtpSection>
+                    <DigitInput
+                      disabled={otpState.length === CODE_LENGTH}
+                      onPress={handleOnPress}
+                    >
+                      {codeDigitsArray.map(toDigitInput)}
+                    </DigitInput>
+                    <TextInput
+                      ref={ref}
+                      value={otpState}
+                      placeholder='0'
+                      onChangeText={setOtpState}
+                      onSubmitEditing={handleOnBlur}
+                      keyboardType="number-pad"
+                      returnKeyType="done"
+                      textContentType="oneTimeCode"
+                      maxLength={CODE_LENGTH}
+                      style={style.hiddenCodeInput}
+                    />
+                  </OtpSection>
+                </InputsSection>
+
                 <WrapperText>
                   <TouchableOpacity
-                    onPress={() => setModalIsOpen(true)}
+                    onPress={() => handleSendOtp('phone')}
+                    disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
                   >
                     <OText color={theme.colors.primary}>
-                      {t('UPDATE_PROFILE', 'Update profile')}
+                      {t('RESEND_AGAIN', 'Resend again?')}
                     </OText>
                   </TouchableOpacity>
                 </WrapperText>
               </>
             )
-          ) : (
-            <>
-              <WrappCountdown>
-                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
-                  <OText
-                    size={26}
-                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
-                  >
-                    {timer}
-                  </OText>
-                </CountDownContainer>
-              </WrappCountdown>
-
-              <InputsSection>
-                <OtpSection>
-                  <DigitInput
-                    disabled={otpState.length === CODE_LENGTH}
-                    onPress={handleOnPress}
-                  >
-                    {codeDigitsArray.map(toDigitInput)}
-                  </DigitInput>
-                  <TextInput
-                    ref={ref}
-                    value={otpState}
-                    placeholder='0'
-                    onChangeText={setOtpState}
-                    onSubmitEditing={handleOnBlur}
-                    keyboardType="number-pad"
-                    returnKeyType="done"
-                    textContentType="oneTimeCode"
-                    maxLength={CODE_LENGTH}
-                    style={style.hiddenCodeInput}
-                  />
-                </OtpSection>
-              </InputsSection>
-
-              <WrapperText>
-                <TouchableOpacity
-                  onPress={() => handleSendOtp('phone')}
-                  disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-                >
-                  <OText color={theme.colors.primary}>
-                    {t('RESEND_AGAIN', 'Resend again?')}
-                  </OText>
-                </TouchableOpacity>
-              </WrapperText>
-            </>
-          )
-        )}
-
-      </Container>
-      <ButtonsActions>
-        <View style={{ width: '100%' }}>
-          <OButton
-            onClick={(verificationState.email || verificationState.phone)
-              ? () => setVerificationState({ email: false, phone: false })
-              : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-            }
-            text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-            bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-            borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-            textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-            imgRightSrc={null}
-            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-            style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+          )}
+
+        </Container>
+        <ButtonsActions>
+          <View style={{ width: '100%' }}>
+            <OButton
+              onClick={(verificationState.email || verificationState.phone)
+                ? () => setVerificationState({ email: false, phone: false })
+                : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+              }
+              text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+              bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+              borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+              textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+              imgRightSrc={null}
+              isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+              style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+            />
+          </View>
+        </ButtonsActions>
+        <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
+          <UserDetails
+            user={user}
+            isEdit
+            isVerifiedPhone
           />
         </View>
-      </ButtonsActions>
-
-      <OModal
-        open={modalIsOpen}
-        entireModal
-        customClose
-        onClose={() => setModalIsOpen(false)}
-      >
-        <UserDetails
-          user={user}
-          handleSuccessUpdate={() => setModalIsOpen(false)}
-        />
-      </OModal>
+      </ScrollView>
     </SafeAreaView>
   )
 }

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

@@ -7,8 +7,7 @@ import {
   WalletList,
   useLanguage,
   useUtils,
-  useConfig,
-  useSession
+  useConfig
 } from 'ordering-components/native'
 
 import {
@@ -32,14 +31,17 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
-    isWalletPointsEnabled
+    isWalletPointsEnabled,
+    getWallets,
+    refreshWallets,
+    setRefreshWallets
   } = props
 
   const [, t] = useLanguage()
-  const [{ user }] = useSession()
   const theme = useTheme()
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
@@ -59,11 +61,11 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
-  const loyaltyLevel = Object.keys(user?.loyalty_level ?? {}).length > 0 && user?.loyalty_level
+  const loyaltyLevel = Object.keys(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
 
   const walletName: any = {
     cash: {
@@ -95,6 +97,13 @@ const WalletsUI = (props: any) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    if(refreshWallets){
+      getWallets()
+      setRefreshWallets && setRefreshWallets(false)
+    }
+  }, [refreshWallets])
+
   return (
     <Container>
       <NavBar
@@ -107,18 +116,22 @@ const WalletsUI = (props: any) => {
       />
 
       {!walletList.loading &&
+        !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
       (
         <>
-          <OTabs>
+          <OTabs
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
             {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
               <Pressable
                 key={wallet.id}
                 onPress={() => handleChangeTab(wallet)}
               >
-                <OTab>
-                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                <OTab isSelected={tabSelected === wallet.type}>
+                  <OText size={18}>
                     {walletName[wallet.type]?.name}
                   </OText>
                 </OTab>
@@ -127,7 +140,7 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
-            {!!loyaltyLevel && (
+            {!!loyaltyLevel && tabSelected === 'credit_point' && (
               <LoyaltyContent>
                 <LoyaltyWrapp>
                   <OText size={20}>
@@ -226,7 +239,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -250,7 +263,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
         <NotFoundSource
           content={walletList?.error
             ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')

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

@@ -1,33 +1,43 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
+import { Modal, TouchableWithoutFeedback, TouchableOpacity, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { OIcon } from '.';
 const deviceHeight = Dimensions.get('window').height
 
 interface Props {
 	open: boolean;
+	transparent?: boolean;
 	title?: string;
 	children?: any;
 	onClose?: any;
 	isStatusBar?: boolean;
+	bottomContainerStyle?: any;
+	titleStyle?: any;
+	closeIcon?: any;
 }
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
+		transparent,
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
+
 	return (
 		<Modal
 			animationType='slide'
-			transparent={false}
+			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,13 +45,24 @@ const OBottomPopup = (props: Props) => {
 				>
 					<View style={styles.touchableOutsideStyle} />
 				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
+				<View style={{ ...styles.bottomContainer, ...bottomContainerStyle }}>
 					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
-								{title}
-							</Text>
-						)}
+						<View style={styles.modalTitleStyle}>
+							{closeIcon && (
+								<TouchableOpacity onPress={() => onClose()} style={styles.closeIconStyle}>
+									<OIcon
+										src={closeIcon}
+										width={20}
+										height={20}
+									/>
+								</TouchableOpacity>
+							)}
+							{!!title && (
+								<Text style={{ ...styles.titleStyle, ...titleStyle }}>
+									{title}
+								</Text>
+							)}
+						</View>
 						{children}
 					</View>
 				</View>
@@ -54,7 +75,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
+		justifyContent: 'flex-end'
 	},
 	touchableOutsideStyle: {
 		flex: 1,
@@ -68,8 +89,18 @@ const styles = StyleSheet.create({
 	},
 	titleStyle: {
 		fontSize: 20,
-		fontWeight: 'bold',
-		marginVertical: 15
+		fontWeight: 'bold'
+	},
+	closeIconStyle: {
+		position: 'absolute',
+		left: 25,
+		top: 25,
+		zIndex: 100
+	},
+	modalTitleStyle: {
+		position: 'relative',
+		paddingHorizontal: 10,
+		paddingVertical: 20
 	}
 })
 

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

@@ -78,6 +78,7 @@ interface Props {
 	borderColor?: string;
 	loadingStyle?: ViewStyle;
 	showNextIcon?: boolean;
+	isDisabledWithSameStyles?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -110,6 +111,7 @@ const OButton = (props: Props): React.ReactElement => {
 			activeOpacity={props.activeOpacity}
 			onPress={props.onClick}
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
+			disabled={props.isDisabledWithSameStyles}
 		>
 			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
 				{props.imgLeftSrc ? (