Untitled

mail@pastecode.io avatar
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