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