Untitled
unknown
plain_text
a month ago
16 kB
2
Indexable
Never
import React from 'react';
// Customizable Area Start
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
TouchableOpacity,
TouchableWithoutFeedback,
KeyboardAvoidingView,
SafeAreaView,
Platform,
} from 'react-native';
import {
defaultImage,
notificationIcon,
verifiedTick,
accountInfo,
paymentInformation,
settingsAndNotifications,
approvalStatusLogo,
supportCenterLogo,
becomeHostLogo,
TermsOfService,
rightArrow,
} from './assets';
import { SvgXml } from 'react-native-svg';
import Scale, { verticalScale } from '../../../components/src/Scale';
import { colors } from '../../utilities/src/Colors';
import { configJSON } from './UserProfileBasicController';
const { red, newText, background, grey, black, secondaryBlue } = colors();
// Customizable Area End
import UserProfileBasicController, {
Props,
} from './UserProfileBasicController';
export default class UserProfileBasicBlock extends UserProfileBasicController {
constructor(props: Props) {
super(props);
// Customizable Area Start
// Customizable Area End
}
// Customizable Area Start
// Customizable Area End
render() {
// Customizable Area Start
return (
//Required for all blocks
<KeyboardAvoidingView
behavior={this.isPlatformiOS() ? 'padding' : undefined}
style={{ flex: 1 }}
>
{/* Required for all blocks */}
<ScrollView keyboardShouldPersistTaps="always" style={styles.container}>
<TouchableWithoutFeedback
onPress={() => {
this.hideKeyboard();
}}
>
{/* Customizable Area Start */}
{/* Merge Engine UI Engine Code */}
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.Profile_PageView}>
<View style={styles.profileHeaderDetails}>
<TouchableOpacity
testID="HostNavigation"
onPress={this.handleButtonNavigation1}
>
<Image
style={styles.image_GroupImage}
source={
this.state.profilePicture
? { uri: this.state.profilePicture }
: defaultImage
}
/>
</TouchableOpacity>
<View style={{ marginLeft: 20 }}>
<View
style={{ flexDirection: 'row', alignItems: 'center' }}
>
<Text style={styles.Name}>
{this.state.firstName} {this.state.lastName}{' '}
</Text>
<SvgXml
xml={verifiedTick}
width={Scale(22)}
height={Scale(22)}
/>
</View>
<Text style={styles.attrbuted_textlabel_Joined}>
Joined in {this.state.joinedYear}
</Text>
</View>
<View style={{ marginLeft: 'auto' }}>
<TouchableOpacity
testID="notificationBtn"
onPress={() =>
this.handleButtonNavigation('Notifications')
}
>
<View style={{ flexDirection: 'row' }}>
<SvgXml
xml={notificationIcon}
width={verticalScale(38)}
height={verticalScale(38)}
/>
<View style={styles.notificationNumber}>
<Text style={styles.textlabel_2Text}>
{this.state.notificationCount}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.middleButtonsContainer}>
<Text style={styles.textlabel_AccountSettingsText}>
Account Settings
</Text>
<View style={styles.accountSettingButtonContainer}>
<View style={styles.subButtonContainer}>
<TouchableOpacity
onPress={() =>
this.handleButtonNavigation('AccountInformation')
}
style={styles.touchableButtons}
>
<View
style={{ ...styles.view_Rectangle41, marginLeft: 0 }}
>
<SvgXml
xml={accountInfo}
width={Scale(52)}
height={Scale(52)}
/>
<Text style={styles.buttonText}>
Account{'\n'}Information
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
this.handleButtonNavigation('PaymentsAndCredits')
}
style={styles.touchableButtons}
>
<View
style={{ ...styles.view_Rectangle41, marginRight: 0 }}
>
<SvgXml
xml={paymentInformation}
width={Scale(52)}
height={Scale(52)}
/>
<Text style={styles.buttonText}>
Payments &{'\n'}Credits
</Text>
</View>
</TouchableOpacity>
</View>
<View
style={[
styles.subButtonContainer,
{ marginTop: Scale(15) },
]}
>
<TouchableOpacity
testID="AddNewCar"
onPress={() =>
this.handleButtonNavigation(
'SettingsAndNotifications'
)
}
style={styles.touchableButtons}
>
<View
style={{ ...styles.view_Rectangle41, marginLeft: 0 }}
>
<SvgXml
xml={settingsAndNotifications}
width={Scale(52)}
height={Scale(52)}
/>
<Text style={styles.buttonText}>
Settings &{'\n'}
{configJSON.Notifications}
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
this.handleButtonNavigation('ApprovalStatus')
}
style={styles.touchableButtons}
>
<View
style={{ ...styles.view_Rectangle41, marginRight: 0 }}
>
<SvgXml
xml={approvalStatusLogo}
width={Scale(52)}
height={Scale(52)}
/>
<Text style={styles.buttonText}>
{configJSON.Verification} &{'\n'}
{configJSON.insuranceText}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.bottomButtonsContainer}>
<TouchableOpacity
onPress={() => this.handleButtonNavigation('HelpCentre')}
>
<View style={styles.view_Rectangle415}>
<SvgXml
xml={supportCenterLogo}
width={Scale(24)}
height={Scale(24)}
/>
<Text style={styles.textlabelText}>
{configJSON.supportTextt}
</Text>
<SvgXml
xml={rightArrow}
width={Scale(24)}
height={Scale(24)}
style={{ marginLeft: 'auto' }}
/>
</View>
</TouchableOpacity>
{this.state.role !== 'host' && (
<TouchableOpacity
testID="becomeAHostBtn"
onPress={() =>
this.handleButtonNavigation('BecomeAHost')
}
>
<View style={styles.view_Rectangle415}>
<SvgXml
xml={becomeHostLogo}
width={Scale(24)}
height={Scale(24)}
/>
<Text style={styles.textlabelText}>
{configJSON.becomeHost}
</Text>
<SvgXml
xml={rightArrow}
width={Scale(20)}
height={Scale(24)}
style={{ marginLeft: 'auto' }}
/>
</View>
</TouchableOpacity>
)}
<TouchableOpacity
onPress={() =>
this.handleButtonNavigation('TosAndPrivacyPolicy')
}
>
<View style={styles.view_Rectangle415}>
<SvgXml
xml={TermsOfService}
width={Scale(24)}
height={Scale(24)}
/>
<Text style={styles.textlabelText}>
{configJSON.termAndservice}{' '}
</Text>
<SvgXml
xml={rightArrow}
width={Scale(24)}
height={Scale(24)}
style={{ marginLeft: 'auto' }}
/>
</View>
</TouchableOpacity>
</View>
<TouchableOpacity
testID="logOutBtn"
onPress={this.onlogout}
style={styles.button_shortlistedButton}
>
<Text style={styles.TEXTCOLORSTYLEText}>Log out </Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
{/* Customizable Area End */}
{/* Merge Engine UI Engine Code */}
</TouchableWithoutFeedback>
</ScrollView>
</KeyboardAvoidingView>
);
// Customizable Area End
}
async componentDidMount() {
// Customizable Area Start
// this.getValidations();
this.getToken();
this.unsubscribe = this.props.navigation.addListener(
'didFocus',
async () => {
this.getToken();
this.notificationCountActionCable();
this.getReadNotificationApi();
this.getNotitifcationCounterApi();
}
);
// this.requestSessionData();
// Customizable Area End
}
// Customizable Area Start
async componentWillUnmount() {
this.state.actionCableChannel.unsubscribe();
this.unsubscribe.remove();
}
// Customizable Area End
}
// Customizable Area Start
const styles = StyleSheet.create({
container: {
flex: 1,
marginLeft: 'auto',
marginRight: 'auto',
width: Platform.OS === 'web' ? '75%' : '100%',
maxWidth: 650,
backgroundColor: '#fff',
},
Profile_PageView: {
flex: 1,
paddingHorizontal: 16,
},
profileHeaderDetails: {
flexDirection: 'row',
alignItems: 'center',
marginTop: '5%',
},
image_GroupImage: {
width: Scale(70),
height: Scale(70),
resizeMode: 'cover',
borderRadius: 100,
},
middleButtonsContainer: { marginTop: verticalScale(25) },
textlabel_2Text: {
color: background,
fontFamily: 'PlusJakartaSans-Regular',
fontSize: 12,
fontWeight: '500',
textAlign: 'center',
},
notificationNumber: {
backgroundColor: red,
borderRadius: 50,
borderWidth: 3,
borderColor: background,
marginTop: verticalScale(-9),
marginLeft: verticalScale(-18),
justifyContent: 'center',
alignItems: 'center',
height: Scale(25),
width: Scale(25),
},
accountSettingButtonContainer: {
marginTop: verticalScale(15),
},
touchableButtons: {
width: '50%',
},
subButtonContainer: {
flexDirection: 'row',
flex: 1,
},
buttonText: {
color: newText,
textAlign: 'center',
fontFamily: 'PlusJakartaSans-Regular',
fontSize: 16,
fontWeight: '500',
marginTop: Scale(5),
},
bottomButtonsContainer: {
marginTop: Scale(20),
},
image_BitmapImage: {
width: 25,
height: 25,
resizeMode: 'contain',
},
textlabelText: {
color: newText,
textAlign: 'center',
fontSize: 16,
fontFamily: 'PlusJakartaSans-Regular',
fontWeight: '600',
marginLeft: Scale(8),
},
Name: {
color: newText,
fontSize: 18,
fontFamily: 'PlusJakartaSans-Regular',
fontWeight: '600',
textAlign: 'center',
marginLeft: -2,
},
attrbuted_textlabel_Joined: {
color: newText,
fontFamily: 'PlusJakartaSans-Regular',
fontSize: 14,
fontWeight: '500',
marginTop: -2,
},
textlabel_AccountSettingsText: {
color: newText,
fontFamily: 'PlusJakartaSans-Regular',
fontSize: Scale(16),
fontWeight: '600',
},
view_Rectangle41: {
borderColor: grey,
borderRadius: 12,
borderWidth: 1,
paddingVertical: Scale(15),
marginHorizontal: 7,
alignItems: 'center',
shadowColor: black,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 5,
backgroundColor: '#ffff',
},
view_Rectangle415: {
borderColor: grey,
alignItems: 'center',
borderRadius: 12,
borderWidth: 1,
flexDirection: 'row',
width: '100%',
paddingVertical: Scale(14),
paddingHorizontal: Scale(18),
marginVertical: verticalScale(7),
shadowColor: black,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 5,
backgroundColor: background,
},
button_shortlistedButton: {
justifyContent: 'center',
flexDirection: 'row',
marginBottom: 22,
marginTop: verticalScale(10),
},
TEXTCOLORSTYLEText: {
color: secondaryBlue,
textAlign: 'center',
fontFamily: 'PlusJakartaSans-Regular',
fontSize: 16,
fontWeight: '700',
},
});
// Customizable Area End
Leave a Comment