rn-try-n-buy-abfrl
Version:
Virtual try-on plugin for ABFRL
1,044 lines (999 loc) • 39.3 kB
JavaScript
import React, { useEffect, useState } from "react";
import {
SafeAreaView,
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
FlatList,
Image,
ScrollView,
Keyboard,
Platform
} from "react-native";
import RNPickerSelect from "../component/NewPicker";
import SceneUtils from "../utils/SceneUtils";
import BodyUtils from "../utils/BodyUtils";
import STORAGE from "../utils/Storage";
const CheckSelected = require('../assets/images/check_selected.png');
const CheckUnSelected = require('../assets/images/check_unselected.png');
const BodyDetails = ({ ismale, ...props }) => {
const [heightFeet, setHeightFeet] = useState("5")
const [heightFeetMale, setHeightFeetMale] = useState("5")
const [heightInch, setHeightInch] = useState("8")
const [heightInchMale, setHeightInchMale] = useState("11")
const [weight, setWeight] = useState("56")
const [weightMale, setWeightMale] = useState("60")
const [bandSize, setBandSize] = useState("30")
const [chestSize, setChestSize] = useState("38")
const [cupSize, setCupSize] = useState("A")
const [waist, setWaist] = useState("Auto")
const [waistMale, setWaistMale] = useState("Auto")
const [hip, setHip] = useState("Auto")
const [hipMale, setHipMale] = useState("Auto")
const [selectedHeaderIndex, setSelectedHeaderIndex] = useState(0)
const [bodyShapeIndex, setBodyShapeIndex] = useState('')
const [bodyDetailsSaved, setBodyDetailsSaved] = useState(false)
const [bodyDetailsSavedMale, setBodyDetailsSavedMale] = useState(false)
const [is_male, setIsMale] = useState(props.is_male)
const [category, setCategory] = useState(props.ownProps.category)
const [knowMyBandSizeFlag, setKnowMyBandSizeFlag] = useState(false)
const [knowMyCupSizeFlag, setKnowMyCupSizeFlag] = useState(false)
const [showKeyboard, setShowKeyboard] = useState(false)
const [showAutofillTextFlag, setShowAutofillTextFlag] = useState(true)
const [onLandingWaistFlag, setOnLandingWaistFlag] = useState(true)
const [onLandingHipFlag, setOnLandingHipFlag] = useState(true)
const [dontKnowSizeFlag, setDontKnowSizeFlag] = useState(false)
const [brandValue, setBrandValue] = useState(2)
const [tshirtSize, setTshirtSize] = useState('M')
const [bodyDetailFlag, setBodyDetailFlag] = useState(true)
const [hair, setHair] = useState(props.is_male ? "" : props.selectedHair)
const [hairMale, setHairMale] = useState(props.is_male ? props.selectedHair : "")
const [skin, setSkin] = useState(props.is_male ? "" : props.selectedSkinTone)
const [skinMale, setSkinMale] = useState(props.is_male ? props.selectedSkinTone : "")
let _ownProps = ''
const weightRef = React.useRef(null)
let flatlist = React.useRef();
const flatListRef = React.useRef()
useEffect(() => {
if (weightRef?.current) weightRef.current.focus()
}, [showKeyboard])
useEffect(() => {
_ownProps = props.ownProps
_ownProps.logEvent(_ownProps.uuid, SceneUtils.ENTER_DETAILS_PAGE, '')
is_male ? STORAGE.retrieveData("bodyDetailsMale", (value) => {
if (value != null) {
const bodyDetails = JSON.parse(value)
console.log("🚀 ~ file: BodyDetails.js ~ line 46 ~ BodyDetails male ~ bodyDetails", bodyDetails)
setHeightFeetMale(bodyDetails.heightFeetMale)
setHeightInchMale(bodyDetails.heightInchMale)
setWaistMale(bodyDetails.waistMale)
setHipMale(bodyDetails.hipMale)
setWeightMale(bodyDetails.weightMale)
setChestSize(bodyDetails.chestSize)
setBodyDetailsSavedMale(bodyDetails.bodyDetailsSavedMale)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.PERSONALISE_LOAD, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${heightFeetMale}'${heightInchMale}", weight: ${weightMale}, waist: ${waistMale}, hip: ${hipMale}, chest: ${chestSize}}`) //TNB log
}
}) :
STORAGE.retrieveData("bodyDetails", (value) => {
if (value != null) {
const bodyDetails = JSON.parse(value)
console.log("🚀 ~ file: BodyDetails.js ~ line 60 ~ BodyDetails female ~ bodyDetails", bodyDetails)
setHeightFeet(bodyDetails.heightFeet)
setHeightInch(bodyDetails.heightInch)
setWaist(bodyDetails.waist)
setHip(bodyDetails.hip)
setWeight(bodyDetails.weight)
setBandSize(bodyDetails.bandSize)
setCupSize(bodyDetails.cupSize)
setSelectedHeaderIndex(bodyDetails.selectedHeaderIndex)
setBodyShapeIndex(bodyDetails.bodyShapeIndex)
setBodyDetailsSaved(bodyDetails.bodyDetailsSaved)
setKnowMyBandSizeFlag(bodyDetails.bodyDetailsSaved)
setKnowMyCupSizeFlag(bodyDetails.bodyDetailsSaved)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.PERSONALISE_LOAD, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${heightFeet}'${heightInch}", weight: ${weight}, waist: ${waist}, hip: ${hip}, bandSize: ${bandSize}, cupSize: ${cupSize}, bodyShape: ${selectedHeaderIndex}, ethnicity: ${bodyShapeIndex}}`) //TNB log
}
});
STORAGE.retrieveData("showAutofillTextFlag", (value) => {
if(value != null)
setShowAutofillTextFlag(value == 'true' ? true : false)
})
STORAGE.retrieveData("brandValue", (value) => {
console.log("🚀 ~ STORAGE.retrieveData brandValue ~ value:", value)
if(value != null)
setBrandValue(value)
})
STORAGE.retrieveData("tshirtSize", (value) => {
console.log("🚀 ~ STORAGE.retrieveData tshirtSize~ value:", value)
if(value != null)
setTshirtSize(value)
})
STORAGE.retrieveData("dontKnowSize", (value) => {
console.log("🚀 ~ STORAGE.retrieveData dontKnowSize~ value:", value)
if(value != null)
setDontKnowSizeFlag(value == 'true' ? true : false)
})
}, []);
const setHorizontalDropDownChange = (val, type) => {
_ownProps = props.ownProps;
switch (type) {
case "Height":
is_male ? setHeightFeetMale(val) : setHeightFeet(val);
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.HEIGHT_INPUT, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${val}'${heightInch}"`) //TNB log
break;
case "Waist":
is_male ? setWaistMale(val) : setWaist(val);
if(!is_male && !onLandingWaistFlag && (is_male ? hipMale : hip) != 'Auto'){
STORAGE.saveItem('showAutofillTextFlag', JSON.stringify(false))
setShowAutofillTextFlag(false)
}
setOnLandingWaistFlag(false)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.WAIST_SELECTION, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, waist: ${val}`) //TNB log
break;
case "Hips":
is_male ? setHipMale(val) : setHip(val);
if (!is_male && !onLandingHipFlag) {
if (val == 'Auto') {
STORAGE.saveItem('showAutofillTextFlag', JSON.stringify(true))
setShowAutofillTextFlag(true)
}
else {
STORAGE.saveItem('showAutofillTextFlag', JSON.stringify(false))
setShowAutofillTextFlag(false)
}
}
!is_male && setOnLandingHipFlag(false)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.HIP_SELECTION, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, hip: ${val}}`) //TNB log
break;
default:
is_male ? setHeightInchMale(val) : setHeightInch(val);
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.HEIGHT_INPUT, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${heightFeetMale}'${val}"}`) //TNB log
break;
}
};
const renderHorizontalDropDown = (
label1,
measureType1,
label2,
measureType2,
renderWeightBool
) => {
_ownProps = props.ownProps
return (
<View style={styles.heightWeightContainer}>
<View style={{ width: renderWeightBool ? "35%" : "50%" }}>
<Text style={[styles.label]}>{label1}</Text>
<View style={[styles.dropDownContainer, { width: "95%" }]}>
<RNPickerSelect
onValueChange={(value) => {
setHorizontalDropDownChange(value, label1);
}}
items={
label1 === "Waist"
? BodyUtils.waistOption
: BodyUtils.heightFeetOptions
}
value={label1 === "Height" ? (is_male ? heightFeetMale : heightFeet) : (is_male ? waistMale : waist)}
style={styles}
/>
<Text style={[styles.year,{right: 4}]}>{measureType1}</Text>
</View>
</View>
<View style={{ width: renderWeightBool ? "35%" : "50%" }}>
<Text style={[styles.label, { marginLeft: 8 }]}>{label2}</Text>
<View
style={[styles.dropDownContainer, { width: "95%", marginLeft: 8 }]}
>
<RNPickerSelect
onValueChange={(value) => {
setHorizontalDropDownChange(value, label2);
}}
items={
label2 === "Hips"
? BodyUtils.hipOption
: BodyUtils.heightInchOptions
}
value={label2 === "Hips" ? (is_male ? hipMale : hip) : (is_male ? heightInchMale : heightInch)}
style={styles}
/>
<Text style={[styles.year,{right: 3}]}>{measureType2}</Text>
</View>
</View>
{renderWeightBool && <View style={{ width: "30%", marginLeft: 16 }}>
<Text style={[styles.label]}>{'Weight'}</Text>
<View
style={{ flexDirection: "row", alignItems: "center", marginTop: 8 }}
>
{Platform.OS == 'android' ?
<TextInput
ref={weightRef}
keyboardType="numeric"
maxLength={3}
autoFocus={true}
onChangeText={(text) => {
is_male ? setWeightMale(text) : setWeight(text)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.WEIGHT_INPUT, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, weight: ${text}}`) //TNB log
}}
value={is_male ? weightMale : weight}
style={styles.weightInput}
returnKeyType={"done"}
showSoftInputOnFocus={showKeyboard}
onPressIn={() => {
setShowKeyboard(true)
}}
/>
:
<TextInput
ref={weightRef}
keyboardType="numeric"
onChangeText={(text) => {
is_male ? setWeightMale(text) : setWeight(text)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.WEIGHT_INPUT, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, weight: ${text}}`) //TNB log
}}
value={is_male ? weightMale : weight}
style={styles.weightInput}
returnKeyType={"done"}
/>
}
<Text style={[styles.year, { right: 22 }]}>{'kg'}</Text>
</View>
</View>}
</View>
);
};
const renderBandSize = () => {
return <>
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.label, { marginLeft: 16, }]}>{is_male ? 'Chest Size' : 'Band Size'}</Text>
{(!is_male && category == '1' && knowMyBandSizeFlag && bodyDetailsSaved) &&
<>
<Text style={[styles.label, { marginLeft: 6 }]}> | </Text>
<TouchableOpacity onPress={() => {
// props.ownProps={heightFeet}
// SceneUtils.callLogEventTNB(props.ownProps?.uuid, SceneUtils.CLOSE_ICON_CLICKED_PERSONALISE,`{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.goToGuideMe(heightFeet, heightInch, waist, hip, weight, selectedHeaderIndex, bodyShapeIndex)
}}>
<Text style={{ color: SceneUtils.primary_color, fontSize: 14, marginTop: 23, marginLeft: 2 }}>Edit Bust Shape</Text>
</TouchableOpacity>
</>
}
</View>
{(!is_male && category == '1' && !knowMyBandSizeFlag && !bodyDetailsSaved) ?
<View style={styles.categoryView}>
<TouchableOpacity style={styles.knowMySizeTouch} onPress={() => {
setKnowMyBandSizeFlag(true)
setKnowMyCupSizeFlag(true)
}}>
<Text style={styles.knowMySizeText}>I Know My Size</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.knowMySizeTouch} onPress={() => {
// SceneUtils.callLogEventTNB(props.ownProps?.uuid, SceneUtils.CLOSE_ICON_CLICKED_PERSONALISE,`{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.goToGuideMe(heightFeet, heightInch, waist, hip, weight, selectedHeaderIndex, bodyShapeIndex)
}}>
<Text style={styles.knowMySizeText}>Guide Me</Text>
</TouchableOpacity>
</View>
:
<FlatList
ref={flatlist}
data={is_male ? BodyUtils.chestSize : BodyUtils.bandSize}
contentContainerStyle={{ paddingRight: 16 }}
horizontal
renderItem={renderBandSizeItem}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
}
{dontKnowSizeFlag && is_male &&
renderBrandTShirtDropDown("Brand", "", "T-Shirt", "", false)
}
{is_male &&<View style={{flexDirection: "row", alignItems: "center", marginTop: 22}}>
<TouchableOpacity style={{width: 20, height: 20, borderRadius: 4, borderColor: SceneUtils.text_color_3, borderWidth: 1, marginLeft: 16, justifyContent: "center", alignItems: "center"}} onPress={() => setDontKnowSizeFlag(!dontKnowSizeFlag)}>
{dontKnowSizeFlag && <Image source={require("../assets/images/check_unselected.png")} style={{width: 18, height: 18, resizeMode: "contain"}}/>}
</TouchableOpacity>
<Text style={{ marginLeft: 10, fontSize: 14, color: SceneUtils.text_color_3 }}>I don't know my chest size</Text>
</View>}
</>
};
const renderBrandTShirtDropDown = (
label1,
measureType1,
label2,
measureType2,
renderWeightBool
) => {
_ownProps = props.ownProps
return (
<View style={styles.heightWeightContainer}>
<View style={{ width: renderWeightBool ? "35%" : "50%" }}>
<Text style={[styles.label]}>{label1}</Text>
<View style={[styles.dropDownContainer, { width: "95%" }]}>
<RNPickerSelect
onValueChange={(value) => {
setBrandTShirtDropDownChange(value, label1);
}}
items={BodyUtils.brand}
value={brandValue}
style={styles}
/>
<Text style={[styles.year, { right: 4 }]}>{measureType1}</Text>
</View>
</View>
<View style={{ width: renderWeightBool ? "35%" : "50%" }}>
<Text style={[styles.label, { marginLeft: 8 }]}>{label2}</Text>
<View
style={[styles.dropDownContainer, { width: "95%", marginLeft: 8 }]}
>
<RNPickerSelect
onValueChange={(value) => {
setBrandTShirtDropDownChange(value, label2);
}}
items={BodyUtils.tshirtSize.find(c => c.brand == brandValue)?.sizes}
value={tshirtSize}
style={styles}
/>
<Text style={[styles.year, { right: 3 }]}>{measureType2}</Text>
</View>
</View>
</View>
)
}
const setBrandTShirtDropDownChange = (val, type) => {
if(type == "Brand") {
setBrandValue(val)
if(val != '0' && tshirtSize != ""){
const brandObj = BodyUtils.brandTshirtMap.find(c => c.brand == val)
if(brandObj) {
const chest = brandObj.size.find(c => c.tshirt == tshirtSize)?.chest
setChestSize(chest)
let index = BodyUtils.chestSize.findIndex(item => item === chest)
flatlist?.current.scrollToIndex({ animated: true, index: index })
}
}
}
else if(type == "T-Shirt") {
setTshirtSize(val)
if(brandValue != '0' && val != ""){
const brandObj = BodyUtils.brandTshirtMap.find(c => c.brand == brandValue)
if(brandObj) {
const chest = brandObj.size.find(c => c.tshirt == val)?.chest
setChestSize(chest)
let index = BodyUtils.chestSize.findIndex(item => item === chest)
flatlist?.current.scrollToIndex({ animated: true, index: index })
}
}
}
};
const renderBandSizeItem = (item) => {
_ownProps = props.ownProps
return <View
style={{
marginLeft: item.index === 0 ? 10 : 16,
height: 40,
marginTop: 11
}}
>
<TouchableOpacity
onPress={() => {
if (is_male) {
setDontKnowSizeFlag(false)
setChestSize(item.item)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.BAND_SIZE_PILL, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, chest: ${item.item}}`) //TNB log
} else {
setBandSize(item.item)
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.BAND_SIZE_PILL, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, bandSize: ${item.item}}`) //TNB log
}
}}
style={{
height: 40,
width: 40,
justifyContent: "flex-end",
alignItems: "center",
}}
>
<Text
style={[
styles.genderText,
is_male ? chestSize === item.item && styles.selectedCircle : bandSize === item.item && styles.selectedCircle,
]}
>
{item.item}
</Text>
</TouchableOpacity>
</View>
};
const renderCupSize = () => (
<>
<View style={{ flexDirection: 'row' }}>
<Text style={[styles.label, { marginLeft: 16 }]}>Cup Size</Text>
{(category == '1' && knowMyCupSizeFlag && bodyDetailsSaved) &&
<>
<Text style={[styles.label, { marginLeft: 6 }]}> | </Text>
<TouchableOpacity onPress={() => {
// SceneUtils.callLogEventTNB(props.ownProps?.uuid, SceneUtils.CLOSE_ICON_CLICKED_PERSONALISE,`{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.goToGuideMe(heightFeet, heightInch, waist, hip, weight, selectedHeaderIndex, bodyShapeIndex)
}}>
<Text style={{ color: SceneUtils.primary_color, fontSize: 14, marginTop: 23, marginLeft: 2 }}>Edit Cup Shape</Text>
</TouchableOpacity>
</>
}
</View>
{(category == '1' && !knowMyCupSizeFlag && !bodyDetailsSaved) ?
<View style={styles.categoryView}>
<TouchableOpacity style={styles.knowMySizeTouch} onPress={() => {
setKnowMyBandSizeFlag(true)
setKnowMyCupSizeFlag(true)
}}>
<Text style={styles.knowMySizeText}>I Know My Size</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.knowMySizeTouch} onPress={() => {
// SceneUtils.callLogEventTNB(props.ownProps?.uuid, SceneUtils.CLOSE_ICON_CLICKED_PERSONALISE,`{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.goToGuideMe(heightFeet, heightInch, waist, hip, weight, selectedHeaderIndex, bodyShapeIndex)
}}>
<Text style={styles.knowMySizeText}>Guide Me</Text>
</TouchableOpacity>
</View>
:
<FlatList
data={BodyUtils.cupSize}
contentContainerStyle={{ paddingRight: 16 }}
horizontal
renderItem={renderCupSizeItem}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
}
</>
);
const renderCupSizeItem = (item) => {
_ownProps = props.ownProps
return <View
style={{
marginLeft: item.index === 0 ? 10 : 16,
height: 40,
marginTop: 11,
}}
>
<TouchableOpacity
onPress={() => {
setCupSize(item.item);
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.CUP_SIZE_PILL, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, cupSize: ${cupSize}}`) //TNB log
}}
style={{
height: 40,
width: 40,
justifyContent: "flex-end",
alignItems: "center",
}}
>
<Text
style={[
styles.genderText,
cupSize === item.item && styles.selectedCircle,
]}
>
{item.item}
</Text>
</TouchableOpacity>
</View>
}
const onPressButton = async () => {
_ownProps = props.ownProps
let weightError = true
if (bodyDetailFlag) {
if (category == "1" && (!knowMyBandSizeFlag || !knowMyCupSizeFlag)) {
alert('Please fill band & cup size')
return
}
if (is_male) {
if (weightMale !== "0" && weightMale !== '') weightError = false
} else {
if (weight !== "0" && weight !== '') weightError = false
}
if (!weightError) {
let msg = ''
if (is_male) {
if (parseFloat(weightMale) > BodyUtils.male_max_weight) {
msg = `Maximum allowed weight for male body is ${BodyUtils.male_max_weight} kg`
} else if (parseFloat(weightMale) < BodyUtils.male_min_weight) {
msg = `Minimum allowed weight for male body is ${BodyUtils.male_min_weight} kg`
}
} else {
if (parseFloat(weight) > BodyUtils.female_max_weight) {
msg = `Maximum allowed weight for female body is ${BodyUtils.female_max_weight} kg`
} else if (parseFloat(weight) < BodyUtils.female_min_weight) {
msg = `Minimum allowed weight for female body is ${BodyUtils.female_min_weight} kg`
}
}
if (msg === '') {
is_male ? STORAGE.saveItem("bodyDetailsMale", JSON.stringify({
heightFeetMale: heightFeetMale,
heightInchMale: heightInchMale,
waistMale: waistMale,
hipMale: hipMale,
weightMale: weightMale,
chestSize: chestSize,
bodyDetailsSavedMale: true,
sz_male: `${heightFeetMale}.${heightInchMale},${Math.round(Number(weightMale))},${chestSize},'',${waistMale},${hipMale}`
})) :
STORAGE.saveItem("bodyDetails", JSON.stringify({
heightFeet: heightFeet,
heightInch: heightInch,
waist: waist,
hip: hip,
weight: weight,
bandSize: bandSize,
cupSize: cupSize,
selectedHeaderIndex: selectedHeaderIndex,
bodyShapeIndex: bodyShapeIndex,
bodyDetailsSaved: true,
sz: `${heightFeet}.${heightInch},${Math.round(Number(weight))},${bandSize},${cupSize},${waist},${hip},${selectedHeaderIndex}`
}), () => console.log())
is_male ? STORAGE.saveItem('firstLaunchMale', "0") : STORAGE.saveItem('firstLaunch', "0")
let body_data = ''
if (is_male) {
body_data = `${heightFeetMale}.${heightInchMale},${Math.round(Number(weightMale))},${chestSize},'',${waistMale},${hipMale},1`
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.DONE_CLICKED_PERSONALISE, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${heightFeetMale}'${heightInchMale}", weight: ${weightMale}, waist: ${waistMale}, hip: ${hipMale}, chest: ${chestSize}}`) //TNB log
} else {
body_data = `${heightFeet}.${heightInch},${Math.round(Number(weight))},${bandSize},${cupSize},${waist},${hip},${selectedHeaderIndex}`
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.DONE_CLICKED_PERSONALISE, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, height: ${heightFeet}'${heightInch}", weight: ${weight}, waist: ${waist}, hip: ${hip}, bandSize: ${bandSize}, cupSize: ${cupSize}, bodyShape: ${selectedHeaderIndex}, ethnicity: ${bodyShapeIndex}}`) //TNB log
}
STORAGE.saveItem("dontKnowSize", `${dontKnowSizeFlag}`)
STORAGE.saveItem("brandValue", brandValue)
STORAGE.saveItem("tshirtSize", tshirtSize)
_ownProps.logEvent(_ownProps.uuid, SceneUtils.ENTER_DETAILS_PAGE_COMPLETE, `{body_data: ${body_data}}`)
setBodyDetailFlag(false)
} else {
alert(msg)
}
} else {
alert('Weight cannot be empty!')
}
} else {
props.onGoBack((is_male ? skinMale : skin), (is_male ? hairMale : hair))
props.goBack()
}
}
const renderButton = () => (
<TouchableOpacity
style={styles.button}
onPress={onPressButton}
>
<Text style={styles.saveText}>{bodyDetailFlag ? "NEXT" : "DONE"}</Text>
</TouchableOpacity>
);
const renderBodyHeader = () => (
<View>
<View style={{ flexDirection: 'row', marginLeft: 16, marginTop: 25 }}>
<Text style={{ color: SceneUtils.text_color_3 }}>Choose body shape</Text>
<Text style={{ color: SceneUtils.text_color_2 }}> (refer to images below)</Text>
</View>
<FlatList
contentContainerStyle={{ paddingLeft: 16, paddingRight: 16 }}
data={BodyUtils.body_shape}
horizontal
renderItem={renderItem}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
const calculateBodySize = (item) => {
_ownProps = props.ownProps
SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.BODY_SHAPE_SELECTION, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, bodyShape: ${item.id}}`) //TNB log
setSelectedHeaderIndex(item.id)
//Calculate waist and hip from bust and body shape
let _waistAvg = 0, _hipAvg = 0
const shapeObj = BodyUtils.bodyShapeMatrix.find(c => c.id === item.id)
const _waistMin = parseFloat(bandSize) * shapeObj.waist_min
const _waistMax = parseFloat(bandSize) * shapeObj.waist_max
if (_waistMin && _waistMax) _waistAvg = (_waistMin + _waistMax) / 2
else if (_waistMin) _waistAvg = _waistMin
else if (_waistMax) _waistAvg = _waistMax
if(waist == 'Auto') setWaist(`${Math.round(_waistAvg)}`)
const _hipMin = parseFloat(bandSize) * shapeObj.hip_min
const _hipMax = parseFloat(bandSize) * shapeObj.hip_max
if (_hipMin && _hipMax) _hipAvg = (_hipMin + _hipMax) / 2
else if (_hipMin) _hipAvg = _hipMin
else if (_hipMax) _hipAvg = _hipMax
if(hip == 'Auto') setHip(`${Math.round(_hipAvg)}`)
}
const renderItem = (item) => (
<TouchableOpacity
onPress={() => {
calculateBodySize(item.item)
}}
style={[
styles.renderItemContainer,
{
marginLeft: item.item.id !== 0 ? 8 : 0,
borderColor:
item.item.id == selectedHeaderIndex
? SceneUtils.primary_color
: SceneUtils.secondary_color,
},
]}
>
<Text style={[styles.itemText, {
color:
item.item.id == selectedHeaderIndex
? SceneUtils.primary_color
: SceneUtils.text_color
}]}>{item.item.name}</Text>
</TouchableOpacity>
);
// const decreaseIndex = () => {
// _ownProps = props.ownProps
// const _bodyShape = BodyUtils.Shapes.find(c => c.id == selectedHeaderIndex)
// if (bodyShapeIndex === 0) {
// setBodyShapeIndex(_bodyShape.images.length - 1)
// } else {
// setBodyShapeIndex(bodyShapeIndex - 1)
// }
// SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.ETHNICITY_MINUS_CLICKED, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, ethnicity: ${bodyShapeIndex}}`) //TNB log
// };
// const increaseIndex = () => {
// _ownProps = props.ownProps
// const _bodyShape = BodyUtils.Shapes.find(c => c.id == selectedHeaderIndex)
// if (bodyShapeIndex === _bodyShape.images.length - 1) {
// setBodyShapeIndex(0)
// } else {
// setBodyShapeIndex(bodyShapeIndex + 1)
// }
// SceneUtils.callLogEventTNB(_ownProps.uuid, SceneUtils.ETHNICITY_PLUS_CLICKED, `{styleID: ${_ownProps.styleid}, sessionID: ${_ownProps.sessionid}, deviceID: ${_ownProps.deviceid}, ethnicity: ${bodyShapeIndex}}`) //TNB log
// };
const renderBodyShape = () => {
const _bodyShape = BodyUtils.Shapes.find(c => c.id == selectedHeaderIndex)
// const body_image = _bodyShape && _bodyShape.images[bodyShapeIndex]
return <View style={styles.bodyShapeContainer}>
<View style={styles.flexRow}>
{/* {!is_male && (
<TouchableOpacity onPress={decreaseIndex} style={styles.img}>
<Image
style={{ resizeMode: "contain", width: 100, height: 200 }}
source={{ uri: `${SceneUtils.BASE_URL}/assets/images/shapes/Left-Shape.png` }}
/>
<Image
style={styles.plusMinus}
source={{ uri: `${SceneUtils.BASE_URL}/assets/images/shapeicon/minus-icon.png` }}
/>
</TouchableOpacity>
)} */}
<View style={[styles.bodyImgOuter, { marginTop: is_male ? 20 : 0 }]}>
<Image
style={{ height: 280, width: is_male ? 230 : 200, alignSelf: "center", resizeMode: 'contain' }}
source={
is_male
? require('../assets/images/male_body_shape.png')
: _bodyShape?.image
}
/>
</View>
{/* {!is_male && (
<TouchableOpacity style={styles.img} onPress={increaseIndex}>
<Image
style={{ resizeMode: "contain", width: 100, height: 200 }}
source={{ uri: `${SceneUtils.BASE_URL}/assets/images/shapes/Right-Shape.png` }}
/>
<Image
style={styles.plusMinus}
source={{ uri: `${SceneUtils.BASE_URL}/assets/images/shapeicon/plus-icon.png` }}
/>
</TouchableOpacity>
)} */}
</View>
</View>
}
const renderHairBody = (item) => (
<View>
<TouchableOpacity
onPress={() => is_male ? setHairMale(item.item.id) : setHair(item.item.id)}
style={{
height: 80,
width: 88,
backgroundColor: 'white',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
borderColor:
item.item.id == (is_male ? hairMale : hair)
? SceneUtils.primary_color
: SceneUtils.secondary_color,
borderWidth: 2,
marginLeft: 8,
marginTop: 20
}}>
<Image
style={{
height: 80,
width: 90,
marginBottom : 5
}}
source={{ uri: `${SceneUtils.BASE_URL}/${item.item.thumb}` }}
/>
</TouchableOpacity>
</View>
);
const renderSkinBody = (item) => (
<View>
<TouchableOpacity
onPress={() => is_male ? setSkinMale(item.item.id) : setSkin(item.item.id)}
style={{
height: 60,
width: 60,
backgroundColor: 'white',
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
borderColor:
item.item.id == (is_male ? skinMale : skin)
? SceneUtils.primary_color
: SceneUtils.secondary_color,
borderWidth: 2,
marginTop: 10,
marginLeft: 8
}}>
<Image
style={{
height: 56,
width: 56,
borderRadius: 10,
marginLeft : 0.2,
resizeMode: "contain"
}}
source={{uri:`${SceneUtils.BASE_URL}/${item.item.thumb}`}}
/>
</TouchableOpacity>
</View>
);
const clickOnClose = () => {
if (bodyDetailFlag) {
SceneUtils.callLogEventTNB(props.ownProps?.uuid, SceneUtils.CLOSE_ICON_CLICKED_PERSONALISE, `{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.goBack()
} else setBodyDetailFlag(true)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.innerContainer}>
<TouchableOpacity
style={{ alignItems: "flex-start", marginLeft: 20 }}
onPress={() => {
clickOnClose()
}}
>
<Image
style={styles.cross}
source={require("../assets/images/arrow.png")}
/>
</TouchableOpacity>
{bodyDetailFlag ?
<>
<Text style={styles.headerTitle}>Personalise your body shape</Text>
<Text style={[styles.autofill, { fontStyle: 'normal', color: SceneUtils.text_color_3 }]}>
& edit the following for better size recommendations
</Text>
<ScrollView keyboardShouldPersistTaps='handled'>
{renderHorizontalDropDown("Height", "ft", " ", "in", true)}
{renderBandSize()}
{!is_male && renderCupSize()}
{renderHorizontalDropDown("Waist", "in", "Hips", "in", false)}
{!is_male ?
showAutofillTextFlag && <Text style={styles.autofill}>
Autofilled from selected body shape
</Text> : null}
{!is_male && renderBodyHeader()}
{renderBodyShape()}
</ScrollView>
</>
:
<>
<View style={{ width: "100%",}}>
<Text style={{ fontSize: 18, color: "#000", textAlign: "center", fontWeight: "bold" }}>Hair Style</Text>
<FlatList
ref={flatListRef}
data={props.hairData}
style={{ marginLeft: 10 }}
numColumns={4}
renderItem={renderHairBody}
extraData={props.hairData}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
</View>
<View style={{ width: "100%", marginTop: 20 }}>
<Text style={{ fontSize: 18, color: "#000", textAlign: "center", fontWeight: "bold" }}>Skin Tone</Text>
<FlatList
ref={flatListRef}
data={props.skinData}
style={{ marginLeft: 10, marginRight: 10 }}
horizontal
renderItem={renderSkinBody}
extraData={props.skinData}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</>
}
{renderButton()}
</View>
</SafeAreaView>
);
};
export default BodyDetails;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FFF",
},
innerContainer: {
flex: 1,
marginTop: 20,
},
headerTitle: {
fontSize: 18,
marginLeft: 16,
marginTop: 20,
color: SceneUtils.text_color_3
},
txtInput: {
height: 40,
borderWidth: 1,
borderRadius: 4,
borderColor: SceneUtils.secondary_color,
marginTop: 8,
paddingLeft: 8
},
label: {
color: SceneUtils.text_color_3,
fontSize: 14,
marginTop: 22
},
dropDownContainer: {
borderWidth: 1,
borderRadius: 4,
borderColor: SceneUtils.secondary_color,
marginTop: 8,
width: "100%",
height: 40,
justifyContent: "space-between",
flexDirection: "row",
alignItems: "center"
},
year: {
position: 'absolute',
fontSize: 12,
color: SceneUtils.text_color_3
},
viewContainer: {
width: "100%",
justifyContent: "center",
paddingLeft: 8
},
heightWeightContainer: {
flexDirection: "row",
marginHorizontal: 16,
},
genderText: {
fontSize: 14,
height: 40,
width: "100%",
color: SceneUtils.text_color,
borderColor: SceneUtils.text_color,
borderRadius: 20,
borderWidth: 1,
textAlign: "center",
paddingTop: 10,
},
selectedCircle: {
borderColor: SceneUtils.primary_color,
color: SceneUtils.primary_color,
},
cross: {
height: 24,
width: 24,
resizeMode: 'contain'
},
bodyShapeTitle: {
fontSize: 14,
marginTop: 40,
marginLeft: 16,
},
bodyShape: {
color: SceneUtils.primary_color,
fontWeight: "bold",
fontSize: 14,
marginLeft: 16,
marginTop: 8,
},
button: {
width: '96%',
height: 48,
backgroundColor: SceneUtils.primary_color,
borderRadius: 4,
marginVertical: 10,
justifyContent: "center",
alignItems: "center",
position: "absolute",
bottom: 0,
marginHorizontal: 10,
},
saveText: {
color: "#FFF",
fontSize: 14
},
weightInput: {
width: "90%",
borderWidth: 1,
borderColor: SceneUtils.secondary_color,
height: 40,
borderRadius: 4,
padding: 8,
paddingLeft: 16,
fontSize: 16,
color: SceneUtils.text_color
},
autofill: {
fontSize: 14,
color: SceneUtils.text_color_2,
marginLeft: 16,
marginTop: 7
},
renderItemContainer: {
padding: 12,
borderRadius: 24,
borderWidth: 1,
borderColor: "grey",
marginTop: 14,
},
itemText: {
fontSize: 14,
color: SceneUtils.text_color,
},
bodyShapeContainer: {
marginTop: 10,
alignItems: "center",
paddingBottom: 60
},
bodyImgOuter: {
width: "40%"
},
flexRow: {
flexDirection: "row"
},
plusMinus: {
position: "absolute",
width: 15,
height: 15
},
img: {
justifyContent: "center",
alignItems: "center",
width: "30%"
},
flexDirectionRow: {
flexDirection: "row",
alignItems: "flex-end"
},
categoryView: {
width: '90%',
height: 50,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center'
},
knowMySizeTouch: {
width: '48%',
height: 40,
borderColor: '#9EA0A4',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center'
},
knowMySizeText: {
fontSize: 16,
color: '#9EA0A4'
}
});