rn-try-n-buy-abfrl
Version:
Virtual try-on plugin for ABFRL
448 lines (425 loc) • 23.4 kB
JavaScript
import axios from "axios";
import React, { useEffect, useState, useRef } from "react";
import {
SafeAreaView,
View,
StyleSheet,
TouchableOpacity,
Image,
Text,
TextInput,
FlatList
} from "react-native";
import SceneUtils from "../utils/SceneUtils";
import STORAGE from "../utils/Storage";
const GuideMe = ({ ...props }) => {
const flatListRef = useRef();
const [bandSectionFlag, setBandSectionFlag] = useState(true)
const [selecetdBandImage, setSelecetdBandImage] = useState('1')
const [bustValue, setBustValue] = useState('')
const [bandValue, setBandValue] = useState('')
const [shapeSectionFlag, setShapeSectionFlag] = useState(false)
const [shapeList, setShapeList] = useState([
{ id: 1, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/shape1.jpg`, isSelected: false },
{ id: 2, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/shape2.jpg`, isSelected: false },
{ id: 3, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/shape3.jpg`, isSelected: false }
])
const [spaceSectionFlag, setSpaceSectionFlag] = useState(false)
const [spacingList, setSpacingList] = useState([
{ id: 1, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space1.png`, isSelected: false },
{ id: 2, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space2.png`, isSelected: false },
{ id: 3, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space3.png`, isSelected: false },
{ id: 4, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space4.png`, isSelected: false },
{ id: 5, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space5.png`, isSelected: false },
{ id: 6, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space6.png`, isSelected: false },
{ id: 7, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space7.png`, isSelected: false },
{ id: 8, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space8.png`, isSelected: false },
{ id: 9, imageUrl: `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/space9.png`, isSelected: false },
])
const [sizeSectionFlag, setSizeSectionFlag] = useState(false)
const [selecetdSizeImage, setSelecetdSizeImage] = useState('0')
const [recomendedSize, setRecommendedSize] = useState('')
const [sisterSize1, setSisterSize1] = useState('')
const [sisterSize2, setSisterSize2] = useState('')
const [selectedSize, setSelectedSize] = useState('')
const [currentIndex, setCurrentIndex] = useState('0')
// const [sizeSectionFlag, setSizeSectionFlag] = useState(false)
useEffect(() => {
STORAGE.retrieveData("bustSize", (value) => {
if(value != null){
setBustValue(value)
}
})
STORAGE.retrieveData("bandSize", (value) => {
if(value != null){
setBandValue(value)
}
})
STORAGE.retrieveData("shapeSelection", (value) => {
let shapeListNew = [...shapeList]
shapeListNew.map((item) => {
if (item.id == value) {
item.isSelected = true
} else {
item.isSelected = false
}
})
})
STORAGE.retrieveData("spacingSelection", (value) => {
let spacingListNew = [...spacingList]
spacingListNew.map((item) => {
if (item.id == value) {
item.isSelected = true
} else {
item.isSelected = false
}
})
})
})
const renderBandSection = () => {
let bandImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/b0.jpg`
selecetdBandImage == '1' ?
bandImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/b1.jpg`
:
(selecetdBandImage == '2' ?
bandImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/b2.jpg`
:
bandImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/b0.jpg`
)
return (
<View style={{ flex: 1, marginTop: 10, alignItems: 'center' }}>
<Text style={{ color: '#9EA0A4', fontSize: 22, fontWeight: '600' }}>Discover your size!</Text>
<View style={{ width: '75%', height: '60%', marginTop: 20 }}>
<Image source={{uri: bandImage}} style={{ width: '100%', height: '100%', flex: 1 }} />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '70%', marginTop: 20, alignSelf: 'center' }}>
<View style={{ flexDirection: 'row', width: '46%', borderColor: '#9EA0A4', borderWidth: 1, paddingLeft: 10 }}>
<TextInput value={bustValue} onTouchStart={() => setSelecetdBandImage('1')} placeholder='Bust' keyboardType='numeric' style={{ width: '60%', height: 40, fontSize: 16, alignSelf: 'flex-start', color: '#222' }}
onChangeText={(item) => {
STORAGE.saveItem("bustSize", item)
setBustValue(item)
}} autoFocus={true}/>
<Text style={{ fontSize: 16, color: '#222', alignSelf: 'center', position: 'absolute', right: 10 }}>in</Text>
</View>
<View style={{ flexDirection: 'row', width: '46%', borderColor: '#9EA0A4', borderWidth: 1, paddingLeft: 10 }}>
<TextInput value={bandValue} onTouchStart={() => setSelecetdBandImage('2')} placeholder='Band' keyboardType='numeric' style={{ width: '60%', height: 40, fontSize: 16, alignSelf: 'flex-start', color: '#222' }}
onChangeText={(item) => {
STORAGE.saveItem("bandSize", item)
setBandValue(item)}
}/>
<Text style={{ fontSize: 16, color: '#222', alignSelf: 'center', position: 'absolute', right: 10 }}>in</Text>
</View>
<TextInput />
</View>
<TouchableOpacity style={{ backgroundColor: '#616b75', width: 120, height: 40, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}
onPress={onPressBandBtn}>
<Text style={{ color: '#fff', fontSize: 16 }}>NEXT</Text>
</TouchableOpacity>
</View>
)
}
const onPressBandBtn = () => {
if (bandValue != '' && bustValue != '') {
if (bandValue >= bustValue) {
alert('Bust size should be greater than band size')
return;
}
} else {
alert('Please measure and enter your bust and band value')
return
}
STORAGE.saveItem("bustSize", bustValue)
STORAGE.saveItem("bandSize", bandValue)
setBandSectionFlag(false)
setShapeSectionFlag(true)
setSpaceSectionFlag(false)
setSizeSectionFlag(false)
}
const renderShapeSection = () => {
return (
<View style={{ flex: 1, marginTop: 20, alignItems: 'center' }}>
<View style={{ flexDirection: 'row', width: '80%', justifyContent: 'space-between', marginTop: 20 }}>
<View style={{ justifyContent: 'center', alignItems: 'center', width: 60, height: 60, borderRadius: 30, borderColor: '#222', borderWidth: 1 }}>
<Text style={{ color: '#000', fontSize: 16 }}>1</Text>
</View>
<View style={{ backgroundColor: '#d9d9d9', width: '50%', height: 1, alignSelf: 'center' }} />
<View style={{ justifyContent: 'center', alignItems: 'center', width: 60, height: 60, borderRadius: 30, borderColor: '#d2d2d2', borderWidth: 1 }}>
<Text style={{ color: '#d2d2d2', fontSize: 16 }}>2</Text>
</View>
</View>
<View style={{ flexDirection: 'row', width: '130%', justifyContent: 'space-around', marginTop: 20, marginLeft: 10 }}>
<Text style={{ color: '#000', fontSize: 16 }}>Shape</Text>
<Text style={{ color: '#d2d2d2', fontSize: 16 }}>Spacing</Text>
</View>
<Text style={{ color: '#9EA0A4', fontSize: 22, fontWeight: '600', marginTop: 40 }}>Select your shape</Text>
<View style={{ marginTop: 20, marginBottom: 20, width: '100%', height: 220, marginLeft: 12 }}>
<FlatList
contentContainerStyle={{ justifyContent: 'space-between' }}
data={shapeList}
renderItem={(data) => {
return (
<TouchableOpacity style={{ width: 120, height: 220, marginRight: 8, borderColor: '#616b75', borderWidth: data.item.isSelected ? 1 : 0 }} onPress={() => onPressShapeimage(data.item.id)}>
<Image source={{url: data.item.imageUrl}} style={{ width: '100%', height: '100%', flex: 1, resizeMode: 'contain' }} />
</TouchableOpacity>
)
}}
horizontal={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '70%', alignSelf: 'center', marginTop: 30 }}>
<TouchableOpacity style={{ borderColor: '#616b75', borderWidth: 1, width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }}
onPress={onPressShapeBtn}>
<Text style={{ color: '#616b75', fontSize: 16 }}>BACK</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#616b75', width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }}
onPress={() => {
setBandSectionFlag(false)
setShapeSectionFlag(false)
setSpaceSectionFlag(true)
setSizeSectionFlag(false)
}}>
<Text style={{ color: '#fff', fontSize: 16 }}>NEXT</Text>
</TouchableOpacity>
</View>
</View>
)
}
const onPressShapeBtn = () => {
setBandSectionFlag(true)
setShapeSectionFlag(false)
setSpaceSectionFlag(false)
setSizeSectionFlag(false)
}
const onPressShapeimage = (itemId) => {
STORAGE.saveItem("shapeSelection", JSON.stringify(itemId))
let shapeListNew = [...shapeList]
shapeListNew.map((item) => {
if (item.id == itemId) {
item.isSelected = true
} else {
item.isSelected = false
}
})
setShapeList(shapeListNew)
setBandSectionFlag(false)
setShapeSectionFlag(false)
setSpaceSectionFlag(true)
setSizeSectionFlag(false)
}
const renderSpaceSection = () => {
return (
<View style={{ flex: 1, marginTop: 20, alignItems: 'center' }}>
<View style={{ flexDirection: 'row', width: '80%', justifyContent: 'space-between', marginTop: 20 }}>
<View style={{ justifyContent: 'center', alignItems: 'center', width: 60, height: 60, borderRadius: 30, borderColor: '#d2d2d2', borderWidth: 1 }}>
<Text style={{ color: '#d2d2d2', fontSize: 16 }}>1</Text>
</View>
<View style={{ backgroundColor: '#d9d9d9', width: '50%', height: 1, alignSelf: 'center' }} />
<View style={{ justifyContent: 'center', alignItems: 'center', width: 60, height: 60, borderRadius: 30, borderColor: '#222', borderWidth: 1 }}>
<Text style={{ color: '#000', fontSize: 16 }}>2</Text>
</View>
</View>
<View style={{ flexDirection: 'row', width: '130%', justifyContent: 'space-around', marginTop: 20, marginLeft: 10 }}>
<Text style={{ color: '#d2d2d2', fontSize: 16 }}>Shape</Text>
<Text style={{ color: '#000', fontSize: 16 }}>Spacing</Text>
</View>
<Text style={{ color: '#9EA0A4', fontSize: 22, fontWeight: '600', marginTop: 40 }}>Select your spacing</Text>
<View style={{ marginTop: 20, marginBottom: 20, width: '100%', height: 220, marginLeft: 12 }}>
<FlatList
ref={flatListRef}
contentContainerStyle={{ justifyContent: 'space-between' }}
data={spacingList}
renderItem={(data) => {
return (
<TouchableOpacity style={{ width: 120, height: 220, marginRight: 8, borderColor: '#616b75', borderWidth: data.item.isSelected ? 1 : 0 }} onPress={() => onPressSpaceimage(data.item.id)}>
<Image source={{uri: data.item.imageUrl}} style={{ width: '100%', height: '100%', flex: 1, resizeMode: 'contain' }} />
</TouchableOpacity>
)
}}
horizontal={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
</View>
<View style={{ width: '100%', height: 20, justifyContent: 'space-around', flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity disabled={currentIndex == 0} onPress={() => onPressScrollBtn('Back')}>
<Image source={require('../assets/images/arrow.png')} style={{ width: 70, height: 10, transform: [{ rotate: '180deg' }] , tintColor: currentIndex == 0 ? '#d2d2d2' : '#000'}} />
</TouchableOpacity>
<TouchableOpacity disabled={currentIndex == 8} onPress={() => onPressScrollBtn('Next')}>
<Image source={require('../assets/images/arrow.png')} style={{ width: 70, height: 10, tintColor: currentIndex == 8 ? '#d2d2d2' : '#000' }} />
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '70%', alignSelf: 'center', marginTop: 30 }}>
<TouchableOpacity style={{ borderColor: '#616b75', borderWidth: 1, width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }}
onPress={() => onPressSpacingBtn('Back')}>
<Text style={{ color: '#616b75', fontSize: 16 }}>BACK</Text>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#616b75', width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }}
onPress={() => onPressSpacingBtn('Next')}>
<Text style={{ color: '#fff', fontSize: 16 }}>NEXT</Text>
</TouchableOpacity>
</View>
</View>
)
}
const onPressSpaceimage = (itemId) => {
STORAGE.saveItem("spacingSelection", JSON.stringify(itemId))
let spacingListNew = [...spacingList]
spacingListNew.map((item) => {
if (item.id == itemId) {
item.isSelected = true
} else {
item.isSelected = false
}
})
setSpacingList(spacingListNew)
}
const onPressSpacingBtn = (action) => {
if (action == 'Back') {
setBandSectionFlag(false),
setShapeSectionFlag(true),
setSpaceSectionFlag(false),
setSizeSectionFlag(false)
}
else {
axios.get(
`${SceneUtils.BASE_URL}/api/GetSizeLingeries?bust=${bustValue}&band=${bandValue}&type=1`
)
.then((response) => {
if (response.data) {
console.log("🚀 ~ file: GuideMe.js ~ line 238 ~ .then ~ response.data", JSON.parse(response.data.size))
const bodyData = JSON.parse(response.data.size)
setRecommendedSize(response.data.size && Array.isArray(bodyData) ? bodyData[0] : '')
setSisterSize1(response.data.size && Array.isArray(bodyData) ? bodyData[2] : '')
setSisterSize2(response.data.size && Array.isArray(bodyData) ? bodyData[1] : '')
setSelectedSize(response.data.size && Array.isArray(bodyData) ? bodyData[0] : '')
setBandSectionFlag(false),
setShapeSectionFlag(false),
setSpaceSectionFlag(false),
setSizeSectionFlag(true)
}
}).catch((error) => {
console.log(error);
});
}
}
const onPressSize = (option, size) => {
setSelecetdSizeImage(option)
setSelectedSize(size)
}
const onPressScrollBtn = (action) => {
if (action == 'Back') {
if (flatListRef?.current){
flatListRef?.current?.scrollToIndex({index: currentIndex-1})
setCurrentIndex(currentIndex-1)
}
} else {
if (flatListRef?.current){
flatListRef?.current?.scrollToIndex({index: currentIndex+1})
setCurrentIndex(parseInt(currentIndex)+1)
}
}
}
const submitSizeData = () => {
const sizeToSubmit = selectedSize.match(/[a-zA-Z]+|[0-9]+/g);
const bandSizeToSubmit = sizeToSubmit[0]
const cupSizeToSubmit = sizeToSubmit[1]
STORAGE.saveItem("bodyDetails", JSON.stringify({
heightFeet: props.ownProps.heightFeet,
heightInch: props.ownProps.heightInch,
waist: props.ownProps.waist,
hip: props.ownProps.hip,
weight: props.ownProps.weight,
bandSize: bandSizeToSubmit,
cupSize: cupSizeToSubmit,
selectedHeaderIndex: props.ownProps.selectedHeaderIndex,
bodyShapeIndex: props.ownProps.bodyShapeIndex,
bodyDetailsSaved: true,
sz: `${props.ownProps.heightFeet}.${props.ownProps.heightInch},${Math.round(Number(props.ownProps.weight))},${bandSizeToSubmit},${cupSizeToSubmit},${props.ownProps.waist},${props.ownProps.hip},${props.ownProps.selectedHeaderIndex}`
}), () => console.log())
props.onGoBack()
props.goBack()
}
const renderSizeSection = () => {
let sizeImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/size1.png`
selecetdSizeImage == '1' ?
sizeImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/size2.png`
:
(selecetdSizeImage == '2' ?
sizeImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/size3.png`
:
sizeImage = `${SceneUtils.PLUGIN_URL}/lingerie/lingerie/images/size1.png`
)
return (
<View style={{ flex: 1, marginTop: 20, alignItems: 'center' }}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: '#9EA0A4', fontSize: 22, fontWeight: '600' }}>Recommended size </Text>
<TouchableOpacity onPress={() => onPressSize('0', recomendedSize)}>
<Text style={{ color: '#00000090', fontSize: 22, fontWeight: '600', textDecorationLine: 'underline' }}>{recomendedSize}</Text>
</TouchableOpacity>
</View>
<Text style={{ color: '#9EA0A4', fontSize: 22, fontWeight: '400', marginTop: 40 }}>Sister sizes</Text>
<View style={{ justifyContent: 'space-between', alignItems: 'center', width: '70%', flexDirection: 'row', marginTop: 40 }}>
<TouchableOpacity style={{ borderColor: '#616b75', borderWidth: 1, width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }} onPress={() => onPressSize('1', sisterSize1)}>
<Text style={{ color: '#616b75', fontSize: 16 }}>{sisterSize1}</Text>
</TouchableOpacity>
<TouchableOpacity style={{ borderColor: '#616b75', borderWidth: 1, width: 120, height: 40, justifyContent: 'center', alignItems: 'center' }} onPress={() => onPressSize('2', sisterSize2)}>
<Text style={{ color: '#616b75', fontSize: 16 }}>{sisterSize2}</Text>
</TouchableOpacity>
</View>
<View style={{ width: '100%', height: '40%', marginTop: 20 }}>
<Image source={sizeImage} style={{ width: undefined, height: undefined, flex: 1, resizeMode: 'cover' }} />
</View>
<TouchableOpacity style={{ backgroundColor: '#616b75', width: 120, height: 40, justifyContent: 'center', alignItems: 'center', marginTop: 50 }} onPress={() => submitSizeData()}>
<Text style={{ color: '#fff', fontSize: 16 }}>Submit</Text>
</TouchableOpacity>
</View>
)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.innerContainer}>
<TouchableOpacity
style={{ alignItems: "flex-end", marginRight: 20 }}
onPress={() => {
// callLogEventTNB(props.ownProps?.uuid, CLOSE_ICON_CLICKED_PERSONALISE,`{styleID: ${props.ownProps?.styleid}, sessionID: ${props.ownProps?.sessionid}, deviceID: ${props.ownProps?.deviceid}}`) //TNB log
props.onPressCancel()
}}
>
<Image
style={styles.cross}
source={require("../assets/images/letter-x.png")}
/>
</TouchableOpacity>
{bandSectionFlag &&
renderBandSection()
}
{shapeSectionFlag &&
renderShapeSection()
}
{spaceSectionFlag &&
renderSpaceSection()
}
{sizeSectionFlag &&
renderSizeSection()
}
</View>
</SafeAreaView>
)
}
export default GuideMe;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
innerContainer: {
flex: 1,
marginTop: 20,
},
cross: {
height: 17,
width: 17
},
})