ordering-ui-react-native 0.15.57 → 0.15.59-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/VerifyPhone/index.tsx

@@ -37,8 +37,8 @@ export const VerifyPhone = (props: any) => {
 			height: 75,
 			marginBottom: 25,
 			borderWidth: 1,
-			borderColor: theme.colors.inputBorderColor,
-			borderRadius: 8,
+			borderColor: theme.colors.disabled,
+			borderRadius: 20,
 			textAlign: 'center',
 			fontSize: 40
 		}
@@ -131,11 +131,11 @@ export const VerifyPhone = (props: any) => {
 
 	return (
 		<Container>
-			<OText size={26} style={{ textAlign: 'left', fontWeight: '600', marginTop: 10, marginBottom: 30 }}>
-				{t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<OText size={30} style={{ textAlign: 'left' }}>
+				{t('VERIFY_PHONE', 'Verify Phone')}
 			</OText>
 			{lastNumbers && (
-				<OText size={16} color={theme.colors.disabled}>
+				<OText size={20} color={theme.colors.disabled}>
 					{`${t('MESSAGE_ENTER_VERIFY_CODE', 'Please, enter the verification code we sent to your mobile ending with')} **${lastNumbers}`}
 				</OText>
 			)}
@@ -174,7 +174,7 @@ export const VerifyPhone = (props: any) => {
 						).result?.result)?.map((e: any, i: number) => (
 							<OText
 								key={i}
-								size={16}
+								size={20}
 								color={theme.colors.error}
 							>
 								{`* ${t(getTraduction(e))}`}
@@ -183,9 +183,12 @@ export const VerifyPhone = (props: any) => {
 					</ErrorSection>
 				)}
 			<ResendSection>
+				<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={16} color={theme.colors.primary}>
-						{t('RESEND_CODE', 'Resend code')}
+						{t('SEND_AGAIN', 'Send Again')}
 					</OText>
 				</Pressable>
 			</ResendSection>

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

@@ -19,12 +19,13 @@ export const CountDownContainer = styled.View`
 export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
+  justify-content: center;
   margin-bottom: 30px;
 `
 
 export const WrappCountdown = styled.View`
   padding-top: 20px;
-  padding-bottom: 50px;
+  padding-bottom: 20px;
 `
 
 export const InputsSection = styled.View`

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import FastImage from 'react-native-fast-image'
 import {
   WalletList,
   useLanguage,
@@ -15,7 +16,10 @@ import {
   TransactionsWrapper,
   OTabs,
   OTab,
-  SectionContent
+  SectionContent,
+  LoyaltyContent,
+  LoyaltyWrapp,
+  LoyaltyImg
 } from './styles'
 
 import NavBar from '../NavBar'
@@ -27,10 +31,14 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
-    isWalletPointsEnabled
+    isWalletPointsEnabled,
+    getWallets,
+    refreshWallets,
+    setRefreshWallets
   } = props
 
   const [, t] = useLanguage()
@@ -38,12 +46,27 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  const styles = StyleSheet.create({
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });
+
   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(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
+
   const walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
@@ -74,6 +97,13 @@ const WalletsUI = (props: any) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    if(refreshWallets){
+      getWallets()
+      setRefreshWallets && setRefreshWallets(false)
+    }
+  }, [refreshWallets])
+
   return (
     <Container>
       <NavBar
@@ -86,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>
@@ -106,6 +140,39 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
+            {!!loyaltyLevel && tabSelected === 'credit_point' && (
+              <LoyaltyContent>
+                <LoyaltyWrapp>
+                  <OText size={20}>
+                    {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                  </OText>
+                  {loyaltyLevel.image ? (
+                    <FastImage
+                      style={styles.logoStyle}
+                      source={{
+                        uri: loyaltyLevel.image,
+                        priority: FastImage.priority.high,
+                        cache:FastImage.cacheControl.web
+                      }}
+                      resizeMode={FastImage.resizeMode.contain}
+                    />
+                  ) : (
+                    <LoyaltyImg
+                      source={theme.images.dummies.loyaltyLevel}
+                      resizeMode='contain'
+                    />
+                  )}
+                  <OText
+                    size={22}
+                    weight='bold'
+                    style={{ textTransform: 'uppercase' }}
+                    color={theme.colors.primary}
+                  >
+                    {loyaltyLevel.name}
+                  </OText>
+                </LoyaltyWrapp>
+              </LoyaltyContent>
+            )}
             <BalanceElement>
               <OText size={20} style={{fontWeight: '600'}}>
                 {currentWalletSelected?.type === 'cash'
@@ -172,7 +239,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -196,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')