rn-try-n-buy-abfrl
Version:
Virtual try-on plugin for ABFRL
322 lines (312 loc) • 9.79 kB
JavaScript
import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image, FlatList, Platform, Dimensions, ImageBackground } from "react-native";
import ImageButton from "./ImageButton";
import SceneUtils from "../utils/SceneUtils";
const CheckSelected = require("../assets/images/check_selected.png");
const BottomPopupSize = ({
onHeaderItemClickSize,
onCrossPress,
onSizeClicked,
data,
sizeDetails,
sizeDetailsIndex,
showSizeDetails,
firstLaunch,
goToBodyShape,
dismissPopup,
itemTypes,
itemTypeList,
itemCat,
modelSize,
selectedSizeArr,
nobodyDetailsSavedBool,
category,
onClickCart,
addToBagCallback,
available_in_bag
}) => {
const renderHeader = () => (
<>
<View style={styles.headerContainer}>
<Text
style={{
fontSize: 14,
color: nobodyDetailsSavedBool ? '#fff' : '#f7992e',
paddingTop: 18,
paddingBottom: 18,
paddingLeft: 22,
paddingRight: 12,
flex: 1,
fontWeight: 'bold'
}}>
{nobodyDetailsSavedBool ? 'Size' : 'Try different sizes to see how you look'}
</Text>
<ImageButton
imagepath={require("../assets/images/letter-x.png")}
width={15}
height={15}
marginRight={10}
marginBottom={10}
onPress={onCrossPress}
tintColor={'#fff'}
/>
</View>
<View style={{ backgroundColor: "rgba(30, 18, 0, 0.5)" }}>
{renderSeperator()}
<View style={{ flexDirection: 'row', paddingBottom: 0 }}>
{renderNewDesign()}
</View>
<TouchableOpacity style={{ width: "90%", height: 34, borderRadius: 50, marginBottom: 10, alignSelf: "center" }} onPress={() => onClickCart()}>
<ImageBackground style={{width: '100%', height: 34,borderWidth: 1, borderColor: SceneUtils.text_color_3, borderRadius: 50, justifyContent: 'center', alignItems: 'center'}}
imageStyle={{ borderRadius: 50 }}
source={require('../assets/images/button_gradient.jpg')}>
<Text style={{ fontSize: 12, fontWeight: "bold", color: "#000" }}>{'Add Monogram'}</Text>
</ImageBackground>
</TouchableOpacity>
</View>
</>
);
const renderSeperator = () => <View style={styles.seperator} />;
const renderNewDesign = () => (
<FlatList
style={{ marginLeft: 20, marginRight: 20 }}
data={sizeDetails}
renderItem={(itemMain) => {
return (
<View style={{justifyContent: 'flex-start', alignItems: 'center' }}>
<Text style={{ marginLeft: itemMain.index > 0 ? 30 : 0, marginTop: 10, marginBottom: 6, alignSelf: 'flex-start', color: '#fff', fontWeight: 'bold' }}>{itemCat ? itemCat[itemMain.index] : ''}</Text>
<View style={{ flexDirection: 'row', marginBottom: 10, marginTop: 0}}>
{itemMain.index > 0 &&
<View style={{ width: 1, height: 80, backgroundColor: '#000', marginLeft: 10, marginRight: 10 }} />
}
{itemMain.item?.split(';')?.map((item,_index) => {
return (
// item != 'NA' &&
<View style={{alignItems: 'center', marginRight: 10}}>
{(sizeDetails[itemMain.index] && (sizeDetails[itemMain.index].split(';')[1] === item)) ? <View style={styles.recommededtxtContainer}>
<Text style={styles.recommededtxt}>{item == 'NA' ? 'No Recommendation' : 'Recommended'}</Text>
</View> : <View style={{
borderRadius: 2,
width: 56,
marginBottom: 8
}}><Text style={styles.recommededtxt}></Text></View>}
<TouchableOpacity
disabled={(item == 'NA') ? true : false}
onPress={() => onSizeClicked(item, itemMain.index)}
style={{
alignItems: 'center',
backgroundColor: '#fff',
borderRadius: 12
}}
>
<Text
style={
(data.length == 0 || data.indexOf(item) > -1)
? (selectedSizeArr[itemMain.index] === item && selectedSizeArr[itemMain.index] != 'NA') || (selectedSizeArr[itemMain.index] == 'NA' && _index == 1)
? [styles.sizeText, { borderColor: '#f7992e', color: SceneUtils.text_color,
minWidth: 40,
borderRadius: 12 }]
: [styles.sizeText, {
minWidth: 40,
borderRadius: 12 }]
: [
styles.sizeText,
{
// borderColor: SceneUtils.text_color_4,
borderColor: '#fff',
color: SceneUtils.text_color,
minWidth: 40,
borderRadius: 12,
},
]
}
>{item?.replace('Short', 'Reg').replace('Long', 'Reg')}
</Text>
</TouchableOpacity>
<View style={{marginTop: 6}}>
<Text
style={{
fontSize: 12,
// color: (selectedSizeArr[itemMain.index] === item && selectedSizeArr[itemMain.index] != 'NA') || (selectedSizeArr[itemMain.index] == 'NA' && _index == 1) ? SceneUtils.primary_color : SceneUtils.text_color,
color: '#fff',
// fontWeight: selectedSizeArr[itemMain.index] === item ? 'bold' : '100'
fontWeight: 'bold'
}}
>{getBottomText(item, itemMain.index,_index)}</Text>
</View>
</View>
)
})
}
</View>
</View>
)
}}
horizontal
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
)
const getBottomText = (item, index, _index) => {
let bottomText = ''
if(category == "1"){
bottomText = "Loose"
} else {
if (sizeDetails[index] && sizeDetails[index].includes(';')) {
if (_index == 0) {
bottomText = 'Tight'
} else if (_index == 1) {
bottomText = 'Fit'
} else if (_index == 2) {
bottomText = 'Loose'
}
} else if (sizeDetails[index] === item) {
bottomText = 'Fit'
}
}
return bottomText
}
return <>
<View style={styles.container}>
{renderHeader()}
</View>
</>;
};
const styles = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: -10,
right: 0,
marginHorizontal: 10,
width: Dimensions.get('screen').width,
zIndex: 10,
},
headerContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "rgba(30, 18, 0, 0.5)",
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
borderTopColor: '#f7992e',
borderTopWidth: 1
},
seperator: {
height: 2,
backgroundColor: "#d4d5d9",
marginTop: -2,
zIndex: 1,
},
sizeText: {
fontSize: 14,
color: SceneUtils.text_color,
// borderColor: SceneUtils.text_color,
borderColor: '#fff',
borderWidth: 2,
textAlign: "center",
paddingHorizontal: 8,
paddingVertical: 8,
},
suggestionContainer: {
backgroundColor: SceneUtils.text_color,
width: '100%',
borderRadius: 5,
marginBottom: 9,
padding: 15,
paddingBottom: 21
},
suggestionText: {
fontSize: 14,
color: '#fff',
lineHeight: 19,
fontWeight: 'bold',
marginBottom: 10
},
suggestionAction: {
fontSize: 14,
color: SceneUtils.primary_color,
fontWeight: 'bold',
marginTop: 7
},
modelSizeContainer: {
flex: 1,
flexDirection: 'row',
marginTop: 5
},
sizeListTrialContainer: {
flex: 0.55,
marginLeft: 19,
marginBottom: 30,
marginTop: 14,
paddingRight: 9
},
sizeListOtherContainer: {
flex: 0.45,
marginLeft: 19,
marginBottom: 30,
marginTop: 14
},
sizeListLabel: {
fontSize: 14,
color: SceneUtils.text_color
},
recommededtxtContainer: {
borderRadius: 2,
marginBottom: 8
},
recommededtxt: {
fontSize: 12,
color: 'white',
height: 13,
fontWeight: "bold",
paddingHorizontal: 3,
textAlign: 'center'
},
sizeContainer: {
// width: '60%',
marginTop: 30,
marginBottom: 40,
flexDirection: 'row',
alignItems: 'center'
},
thumbIcon: {
width: 40,
height: 40,
resizeMode: 'contain',
},
sizeTouch: {
backgroundColor: '#d2d2d2',
width: 30,
height: 30,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center'
},
sizeTouchText: {
fontSize: 18,
color: '#000',
fontWeight: '500'
},
sizeSeperator: {
width: 80,
height: 0.6,
backgroundColor: '#000',
marginTop: 2,
marginBottom: 2
},
sizeTitleText: {
fontSize: 14,
color: '#000',
fontWeight: '500'
},
sizeNumberText: {
color: '#f7992e',
fontSize: 14,
fontWeight: '500'
},
sizeDescContainer: {
justifyContent: 'center',
alignItems: 'center'
}
});
export default BottomPopupSize;