|
|
@@ -1,35 +1,68 @@
|
|
|
import React, { Component } from 'react';
|
|
|
-import { View, Text, StyleSheet, TextInput } from 'react-native';
|
|
|
+import { View, Text, StyleSheet, TextInput, ScrollView } from 'react-native';
|
|
|
import Button from '../../components/Button';
|
|
|
+import { CountryDropCode, GetCountryList } from '../../components/CountryIcon';
|
|
|
+import Dropdown from '../../components/Dropdown';
|
|
|
|
|
|
export default class EditAddress extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- addressDto: userInfo.address ?? {}
|
|
|
+ addressDto: {
|
|
|
+ countryCode: "",
|
|
|
+ city: "",
|
|
|
+ street: "",
|
|
|
+ zipCode: "",
|
|
|
+ houseNumber: ""
|
|
|
+ }
|
|
|
};
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
+ const address = userInfo.address ?? {}
|
|
|
+ if (!address.countryCode) {
|
|
|
+ address.countryCode = "SG"
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ addressDto: address,
|
|
|
+ countryList: [],
|
|
|
+ })
|
|
|
userInfo.editAddress = false;
|
|
|
+ GetCountryList(list => {
|
|
|
+ this.setState({
|
|
|
+ countryList: list
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ changeCountry(value, index) {
|
|
|
+ this.state.addressDto.countryCode = value;
|
|
|
+ this.setState({
|
|
|
+ addressDto: this.state.addressDto
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
saveInfo() {
|
|
|
const dto = this.state.addressDto
|
|
|
+ if (!dto.city) {
|
|
|
+ toastShort($t('profile.plsInputCity'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (!dto.street) {
|
|
|
- toastShort('Please input street');
|
|
|
+ toastShort($t('profile.plsInputStreet'));
|
|
|
return;
|
|
|
}
|
|
|
if (!dto.houseNumber) {
|
|
|
- toastShort('Please input unit number');
|
|
|
+ toastShort($t('profile.plsInputUnitNo'));
|
|
|
return;
|
|
|
}
|
|
|
if (!dto.zipCode) {
|
|
|
- toastShort('Please input postal code');
|
|
|
+ toastShort($t('profile.plsInputPostal'));
|
|
|
return;
|
|
|
}
|
|
|
userInfo.address = dto;
|
|
|
userInfo.addressLine = dto.houseNumber + ', ' + dto.street + ', ' + dto.zipCode
|
|
|
+ console.log(userInfo.addressLine);
|
|
|
userInfo.editAddress = true;
|
|
|
goBack();
|
|
|
}
|
|
|
@@ -37,43 +70,74 @@ export default class EditAddress extends Component {
|
|
|
render() {
|
|
|
return (
|
|
|
<View style={styles.container}>
|
|
|
- <View style={styles.formView}>
|
|
|
- <Text style={styles.label}>Street</Text>
|
|
|
- <TextInput
|
|
|
- style={styles.formInput}
|
|
|
- placeholder='Street name and number'
|
|
|
- placeholderTextColor={textPlacehoder}
|
|
|
- maxLength={50}
|
|
|
- defaultValue={this.state.addressDto?.street}
|
|
|
- onChangeText={text => this.state.addressDto.street = text}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={styles.formView}>
|
|
|
- <Text style={styles.label}>Unit Number</Text>
|
|
|
- <TextInput
|
|
|
- style={styles.formInput}
|
|
|
- placeholder='Unit number'
|
|
|
- placeholderTextColor={textPlacehoder}
|
|
|
- maxLength={15}
|
|
|
- defaultValue={this.state.addressDto?.houseNumber}
|
|
|
- onChangeText={text => this.state.addressDto.houseNumber = text}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={styles.formView}>
|
|
|
- <Text style={styles.label}>Postal Code</Text>
|
|
|
- <TextInput
|
|
|
- style={styles.formInput}
|
|
|
- placeholder='Postal Code'
|
|
|
- placeholderTextColor={textPlacehoder}
|
|
|
- maxLength={10}
|
|
|
- defaultValue={this.state.addressDto?.zipCode}
|
|
|
- onChangeText={text => this.state.addressDto.zipCode = text}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <Text style={ui.flex1}></Text>
|
|
|
+ <ScrollView style={ui.flex1}>
|
|
|
+ <View style={styles.formView}>
|
|
|
+ <Text style={styles.label}>{$t('sign.labelCountry')}</Text>
|
|
|
+ <Dropdown
|
|
|
+ style={styles.selectView}
|
|
|
+ title={$t('sign.labelCountry')}
|
|
|
+ list={this.state.countryList}
|
|
|
+ value={this.state.addressDto.countryCode}
|
|
|
+ nameKey='countryName'
|
|
|
+ valueKey='countryCode'
|
|
|
+ onChange={(value, index)=> this.changeCountry(value, index)}
|
|
|
+ customerItemView={
|
|
|
+ (item, index, onClick) =>
|
|
|
+ <CountryDropCode
|
|
|
+ key={index}
|
|
|
+ country={item}
|
|
|
+ value={this.state.addressDto.countryCode}
|
|
|
+ onClick={onClick}/>
|
|
|
+ }/>
|
|
|
+ </View>
|
|
|
+ <View style={styles.formView}>
|
|
|
+ <Text style={styles.label}>{$t('profile.labelCity')}</Text>
|
|
|
+ <TextInput
|
|
|
+ style={styles.formInput}
|
|
|
+ placeholder={$t('profile.labelCity')}
|
|
|
+ maxLength={50}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ defaultValue={this.state.addressDto?.city}
|
|
|
+ onChangeText={text => this.state.addressDto.city = text}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={styles.formView}>
|
|
|
+ <Text style={styles.label}>{$t('profile.street')}</Text>
|
|
|
+ <TextInput
|
|
|
+ style={styles.formInput}
|
|
|
+ placeholder={$t('profile.hintStreet')}
|
|
|
+ maxLength={50}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ defaultValue={this.state.addressDto?.street}
|
|
|
+ onChangeText={text => this.state.addressDto.street = text}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={styles.formView}>
|
|
|
+ <Text style={styles.label}>{$t('profile.unitNumber')}</Text>
|
|
|
+ <TextInput
|
|
|
+ style={styles.formInput}
|
|
|
+ placeholder={$t('profile.hintUnitNo')}
|
|
|
+ maxLength={15}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ defaultValue={this.state.addressDto?.houseNumber}
|
|
|
+ onChangeText={text => this.state.addressDto.houseNumber = text}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={styles.formView}>
|
|
|
+ <Text style={styles.label}>{$t('profile.postalCode')}</Text>
|
|
|
+ <TextInput
|
|
|
+ style={styles.formInput}
|
|
|
+ placeholder={$t('profile.hintPostal')}
|
|
|
+ maxLength={10}
|
|
|
+ placeholderTextColor={textPlacehoder}
|
|
|
+ defaultValue={this.state.addressDto?.zipCode}
|
|
|
+ onChangeText={text => this.state.addressDto.zipCode = text}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
<View style={styles.buttonView}>
|
|
|
<Button
|
|
|
- text='Save'
|
|
|
+ text={$t('common.save')}
|
|
|
elevation={1.5}
|
|
|
onClick={() => {
|
|
|
this.saveInfo();
|
|
|
@@ -87,7 +151,7 @@ export default class EditAddress extends Component {
|
|
|
const styles = StyleSheet.create({
|
|
|
container: {
|
|
|
flex: 1,
|
|
|
- backgroundColor: 'white'
|
|
|
+ backgroundColor: pageBackground
|
|
|
},
|
|
|
formView: {
|
|
|
paddingTop: 16,
|
|
|
@@ -95,19 +159,29 @@ const styles = StyleSheet.create({
|
|
|
paddingRight: 16,
|
|
|
paddingBottom: 4
|
|
|
},
|
|
|
+ selectView: {
|
|
|
+ marginTop: 4,
|
|
|
+ marginBottom: -8,
|
|
|
+ ...$padding(8, 0, 8, 4),
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row',
|
|
|
+ borderBottomColor: '#EEE',
|
|
|
+ borderBottomWidth: 1
|
|
|
+ },
|
|
|
label: {
|
|
|
- color: '#333',
|
|
|
+ color: textPrimary,
|
|
|
fontSize: 14
|
|
|
},
|
|
|
formInput: {
|
|
|
- color: '#333',
|
|
|
+ color: textPrimary,
|
|
|
fontSize: 14,
|
|
|
+ height: 44,
|
|
|
paddingBottom: 2,
|
|
|
borderBottomColor: '#EEE',
|
|
|
borderBottomWidth: 1
|
|
|
},
|
|
|
buttonView: {
|
|
|
padding: 16,
|
|
|
- marginBottom: 16
|
|
|
- },
|
|
|
+ marginBottom: 4
|
|
|
+ }
|
|
|
})
|