You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1464 lines
45 KiB

import React, { useEffect, useCallback } from "react";
import {
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
ScrollView,
Dimensions,
useWindowDimensions,
Animated,
BackHandler,
ActivityIndicator,
Alert,
InteractionManager,
Platform,
} from "react-native";
import fontSize from "../utils/fontsizeUtils";
import widthUtils from "../utils/widthUtils";
import DiagonalArrowIcon from "../components/DiagonalArrowIcon";
import Carousel from "react-native-reanimated-carousel";
import WhiteCircleIcon from "../components/WhiteCircleIconIcon";
import ShoppingCartIcon from "../components/ShoppingCartIcon";
import HeartIcon from "../components/HeartIcon";
import HeartRedIcon from "../components/HeartIconRed";
import ShareIcon from "../components/ShareIcon";
import { useState } from "react";
import { Image as ExpoImage } from 'expo-image';
import useUserStore from "../store/user";
import {
productApi,
ProductDetailParams,
Similars,
SkuAttribute,
ProductGroupList,
similar,
} from "../services/api/productApi";
import { useNavigation, useRoute } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RouteProp } from "@react-navigation/native";
import BackIcon from "../components/BackIcon";
import CameraIcon from "../components/CameraIcon";
import ProductCard from "./ProductCard";
import useProductCartStore from "../store/productCart";
type ProductDetailRouteParams = {
offer_id: string;
searchKeyword?: string;
price: number;
};
export const ProductDetailScreen = () => {
const {product,setProduct,groupList,setGroupList} = useProductCartStore()
const userStore = useUserStore();
const { width } = useWindowDimensions(); // 移动到组件内部
const navigation = useNavigation<NativeStackNavigationProp<any>>();
const route =
useRoute<RouteProp<Record<string, ProductDetailRouteParams>, string>>();
const [activeIndex, setActiveIndex] = useState(0);
const screenWidth = Dimensions.get("window").width;
const [expandedGroups, setExpandedGroups] = useState<{
[key: string]: boolean;
}>({});
const [isHeartRed, setIsHeartRed] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [similars, setSimilars] = useState<Similars>();
const [isSimilarsFlag, setIsSimilarsFlag] = useState(false);
const [imageUrls, setImageUrls] = useState<any[]>([]);
const [imageHeights, setImageHeights] = useState<{ [key: string]: number }>(
{}
);
const [priceSelectedSku, setPriceSelectedSku] = useState<any>();
const [showBottomSheet, setShowBottomSheet] = useState(false);
const groupData = (
res: ProductDetailParams,
priceSelectedSku: SkuAttribute[]
) => {
let result = {} as any;
// 遍历数据
res.skus.forEach((item) => {
item.attributes.forEach((attribute) => {
const { attribute_name, value } = attribute;
// 如果结果对象中没有对应的属性名,则创建一个空数组
if (!result[attribute_name]) {
result[attribute_name] = [];
}
// 如果当前属性的值(value)已经存在于该组内,跳过
if (
!result[attribute_name].some(
(existingAttribute: any) => existingAttribute.value === value
)
) {
result[attribute_name].push(attribute);
}
});
});
const list: ProductGroupList[] = [];
// Iterate over each attribute and transform the data
for (const [attributeName, attributes] of Object.entries(result)) {
const withImage: any[] = [];
const withoutImage: any[] = [];
// @ts-ignore
attributes.forEach((attribute) => {
attribute.has_color = false;
// Check if sku_image_url is not null or undefined
const hasImage =
attribute.sku_image_url !== null &&
attribute.sku_image_url !== undefined;
// Push the attribute to the appropriate array
if (hasImage) {
withImage.push(attribute);
} else {
withoutImage.push(attribute);
}
});
// Add has_image to the list item
list.push({
attribute_name: attributeName,
has_image: withImage.length > 0, // If there are any items with images, set has_image to true
attributes: [...withImage, ...withoutImage],
});
}
if (!priceSelectedSku) {
list.forEach((item) => {
item.attributes[0].has_color = true;
});
return list;
}
if (priceSelectedSku.length >= 1) {
priceSelectedSku.forEach((item) => {
list.forEach((item1) => {
item1.attributes.forEach((attribute) => {
if (attribute.value === item.value) {
attribute.has_color = true;
}
});
});
});
return list;
}
return list;
};
// 处理展开/收起
const toggleExpand = (attributeName: string) => {
setExpandedGroups((prev) => ({
...prev,
[attributeName]: !prev[attributeName],
}));
};
// 获取要显示的属性
const getDisplayAttributes = (attributes: any[], attributeName: string) => {
if (expandedGroups[attributeName]) {
return attributes;
}
return attributes.slice(0, 6);
};
// 处理尺码选择
const handleSizeSelect = (size: string, index: number) => {
setShowBottomSheet(true)
const newGroupList = [...groupList];
const attributeIndex = newGroupList[index]?.attributes.findIndex(
(item) => item.value === size
);
if (attributeIndex !== -1) {
newGroupList[index].attributes = newGroupList[index].attributes.map(
(item, i) => {
if (i === attributeIndex) {
return { ...item, has_color: true };
}
return { ...item, has_color: false };
}
);
setGroupList(newGroupList);
}
const selectedSku: SkuAttribute[] = [];
groupList.forEach((item) => {
item.attributes.forEach((attribute) => {
if (attribute.has_color) {
selectedSku.push(attribute);
}
});
});
let price = 0;
let original_price = 0;
product?.skus.forEach((item) => {
const values1 = item.attributes.map((item) => item.value).sort();
const values2 = selectedSku.map((item) => item.value).sort();
if (values1.every((val, index) => val === values2[index])) {
if (item.offer_price) {
price = item.offer_price;
original_price = item.original_price;
} else {
price =
product.sale_info.price_range_list[
product.sale_info.price_range_list.length - 1
].price;
original_price = product.sale_info.price_range_list[
product.sale_info.price_range_list.length - 1
].original_price;
}
}
});
if (product) {
setProduct({
...product,
price: price === 0 ? "无货" : price,
});
}
};
// 处理颜色选择
const handleColorSelect = (colorId: string, index: number) => {
setShowBottomSheet(true)
const newGroupList = [...groupList];
const attributeIndex = newGroupList[index]?.attributes.findIndex(
(item) => item.value === colorId
);
if (attributeIndex !== -1) {
newGroupList[index].attributes = newGroupList[index].attributes.map(
(item, i) => {
if (i === attributeIndex) {
return { ...item, has_color: true };
}
return { ...item, has_color: false };
}
);
setGroupList(newGroupList);
}
const selectedSku: SkuAttribute[] = [];
groupList.forEach((item) => {
item.attributes.forEach((attribute) => {
if (attribute.has_color) {
selectedSku.push(attribute);
}
});
});
let price = 0;
product?.skus.forEach((item) => {
const values1 = item.attributes.map((item) => item.value).sort();
const values2 = selectedSku.map((item) => item.value).sort();
if (values1.every((val, index) => val === values2[index])) {
if (item.offer_price) {
price = item.offer_price;
} else {
price =
product?.sale_info?.price_range_list[
product?.sale_info?.price_range_list?.length - 1
]?.price;
}
}
});
if (product) {
setProduct({
...product,
price: price === 0 ? "无货" : price,
});
}
};
const getProductDetail = async () => {
if (!route.params?.offer_id) return;
const startTime = Date.now();
console.log('开始时间:', startTime);
setIsLoading(true);
try {
const res = await productApi.getProductDetail(route.params.offer_id, userStore.user?.user_id);
console.log('API 请求完成');
if (res.skus != null) {
const priceSelectedSku = res.skus.find(
(item) => item.offer_price === route.params.price
);
console.log("priceSelectedSku", priceSelectedSku);
if (priceSelectedSku) {
res.price = priceSelectedSku.offer_price;
res.original_price = priceSelectedSku.original_price;
} else {
res.price =
res?.sale_info?.price_range_list[
res?.sale_info?.price_range_list?.length - 1
]?.price;
res.original_price =
res?.sale_info?.price_range_list[
res?.sale_info?.price_range_list?.length - 1
]?.original_price;
}
} else {
res.price = route.params.price;
}
if (res.skus != null) {
const priceSelectedSku = res.skus.find(
(item) => item.offer_price === route.params.price
);
if (priceSelectedSku) {
setPriceSelectedSku({
price: route.params.price,
});
}
}
setPriceSelectedSku(priceSelectedSku);
setProduct(res);
let list: ProductGroupList[] = [];
if (res.skus != null) {
list = groupData(res, priceSelectedSku?.attributes as SkuAttribute[]);
} else {
list = [];
}
const imageUrls = [];
const regex = /<img[^>]+src="([^"]+)"/g;
let match;
while ((match = regex.exec(res.description)) !== null) {
imageUrls.push(match[1]); // match[1] 是 src 属性的值
}
// 只保留前 5 张图片(如果超过 5 张)
const limitedImageUrls = imageUrls.length > 5 ? imageUrls.slice(0, 5) : imageUrls;
setImageUrls(limitedImageUrls);
setGroupList(list);
console.log('数据处理完成');
} catch (error) {
console.error("Error fetching product details:", error);
} finally {
setIsLoading(false);
const endTime = Date.now();
console.log('结束时间:', endTime);
console.log('总执行时间:', endTime - startTime, '毫秒');
}
};
const getSimilars = () => {
productApi.getSimilarProducts(route.params.offer_id, userStore.user?.user_id).then((res) => {
setSimilars(res);
setIsSimilarsFlag(true);
});
};
useEffect(() => {
getProductDetail();
getSimilars();
}, []);
useEffect(() => {
if (Platform.OS !== 'web') {
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
() => {
if (showBottomSheet) {
setShowBottomSheet(false);
return true;
}
return false;
}
);
return () => backHandler.remove();
}
}, [showBottomSheet]);
const handleImageLoad = (src: string, event: any) => {
const { width: imageWidth, height: imageHeight } = event.nativeEvent.source;
const aspectRatio = imageHeight / imageWidth;
const calculatedHeight = width * aspectRatio;
setImageHeights((prev) => ({
...prev,
[src]: calculatedHeight,
}));
};
const handleSearchPress = useCallback(() => {
InteractionManager.runAfterInteractions(() => {
navigation.navigate("Search");
});
}, [navigation]);
const handleProductPress = useCallback(
(item: similar) => {
InteractionManager.runAfterInteractions(() => {
navigation.push("ProductDetail", {
offer_id: item.offer_id,
price: item.min_price,
});
});
},
[navigation]
);
return (
<View style={{ flex: 1 }}>
{isLoading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#FF5100" />
<Text style={styles.loadingText}>Loading product details...</Text>
</View>
) : (
<>
<View style={styles.headerBox}>
<TouchableOpacity style={styles.backIcon} onPress={() => navigation.goBack()}>
<BackIcon size={fontSize(20)} />
</TouchableOpacity>
<TouchableOpacity style={styles.search} onPress={handleSearchPress}>
<Text style={styles.searchText}></Text>
<CameraIcon size={fontSize(20)} />
</TouchableOpacity>
<TouchableOpacity style={styles.searchIcon} onPress={()=> {
navigation.navigate('MainTabs', { screen: 'Cart' })
}}>
<ShoppingCartIcon size={fontSize(20)} />
<ShareIcon size={fontSize(20)} />
</TouchableOpacity>
</View>
<ScrollView
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContent}
>
<View style={styles.productDetailsContainer3}>
<View style={styles.centerColumnWithPagination}>
<View style={{ position: "relative" }}>
<Carousel
loop
width={screenWidth}
data={product?.product_image_urls as string[]}
height={widthUtils(430, 430).height}
onSnapToItem={(index) => setActiveIndex(index)}
modeConfig={{
parallaxScrollingScale: 0.9,
parallaxScrollingOffset: 50,
}}
renderItem={({ item }) => (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f2f2f2",
borderRadius: 10,
}}
>
<Image
source={{ uri: item }}
style={{ width: "100%", height: "100%" }}
/>
</View>
)}
/>
<View
style={{
position: "absolute",
top: 20,
right: 20,
width: 40,
height: 40,
backgroundColor: "#efefef",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
}}
>
<TouchableOpacity
onPress={() => {
setIsHeartRed(!isHeartRed);
Alert.alert("收藏成功", "是否我的查看收藏", [
{
text: "取消",
onPress: () => console.log("取消 pressed"),
style: "cancel",
},
{
text: "确定",
onPress: () => console.log("确定 pressed"),
},
]);
}}
>
{isHeartRed ? (
<HeartRedIcon size={20} color="red" />
) : (
<HeartIcon size={20} color="#373737" />
)}
</TouchableOpacity>
</View>
{/* 底部指示灯 - 固定在右下角 */}
<View
style={{
position: "absolute",
bottom: 20,
right: 20,
backgroundColor: "gray", // 可选,看得清楚
borderRadius: 13,
justifyContent: "center",
alignItems: "center",
}}
>
<Text style={styles.activeIndexText}>
{activeIndex + 1}/{product?.product_image_urls?.length}
</Text>
</View>
</View>
</View>
<View style={styles.productDetailsContainer2}>
<View style={styles.nightLampProductCard}>
<Text style={styles.creativeHeading}>{product?.subject}</Text>
<View style={styles.priceBox}>
<Text style={styles.priceLabel}>{product?.original_price}{userStore.user?.currency}</Text>
</View>
<View style={styles.productInfoContainer1}>
<View style={styles.productInfoContainer}>
<View style={styles.salesInfoContainer}>
<Text style={styles.highlightedText}>
{product?.price}
</Text>
<Text style={styles.orangeHighlightedText}>{userStore.user?.currency || 'FCFA'}</Text>
</View>
<Text style={styles.salesCountLabel}>
{product?.sold_out} ventes
</Text>
</View>
<View style={styles.discountInfoContainer}>
<Text style={styles.emphasizedTextWidget}>-5%</Text>
</View>
<View style={styles.vipStatusContainer}>
<View style={styles.vipBadgeContainer}>
<Text style={styles.vipStatusNumeric}>
<Text style={styles.emphasizedTextVip}>VIP</Text>
<Text style={styles.emphasizedText}> 1</Text>
</Text>
</View>
</View>
</View>
</View>
<View style={styles.productDetailsContainer}>
<View style={styles.productDetailsContainer1}>
<View style={styles.blackThemeContainer}>
{groupList.map((item, index) =>
item.has_image ? (
<View key={item.attribute_name}>
<Text style={styles.uniqueTextBlock}>
{item.attribute_name} :{" "}
{
item.attributes.find((item) => item.has_color)
?.value
}
</Text>
<View style={styles.horizontalFlexContainer}>
{getDisplayAttributes(
item.attributes,
item.attribute_name
).map((attribute) => (
<TouchableOpacity
key={attribute.value}
onPress={() =>
handleColorSelect(attribute.value, index)
}
style={[
styles.colorImageContainer,
attribute.has_color &&
styles.selectedColorImageContainer,
]}
>
<Image
source={{ uri: attribute.sku_image_url }}
style={styles.imageContainer}
/>
</TouchableOpacity>
))}
{!expandedGroups[item.attribute_name] &&
item.attributes.length > 6 && (
<TouchableOpacity
style={styles.expandButton}
onPress={() =>
toggleExpand(item.attribute_name)
}
>
<Text style={styles.expandButtonText}>
+{item.attributes.length - 6}
</Text>
</TouchableOpacity>
)}
{expandedGroups[item.attribute_name] && (
<TouchableOpacity
style={styles.expandButton}
onPress={() =>
toggleExpand(item.attribute_name)
}
>
<Text style={styles.expandButtonText}>
</Text>
</TouchableOpacity>
)}
</View>
{groupList.length > 1 && index === 0 && (
<TouchableOpacity
style={styles.svgContainer6}
onPress={() => setShowBottomSheet(true)}
>
<View style={styles.svgContainer6}>
<DiagonalArrowIcon size={fontSize(18)} />
</View>
</TouchableOpacity>
)}
{groupList.length === 1 && index === 0 && (
<TouchableOpacity
style={styles.svgContainer6}
onPress={() => setShowBottomSheet(true)}
>
<View style={styles.svgContainer6}>
<DiagonalArrowIcon size={fontSize(18)} />
</View>
</TouchableOpacity>
)}
</View>
) : (
<View key={item.attribute_name}>
<Text style={styles.uniqueTextBlock}>
{item.attribute_name}
</Text>
<View style={styles.horizontalFlexContainer}>
{getDisplayAttributes(
item.attributes,
item.attribute_name
).map((attribute) => (
<TouchableOpacity
key={attribute.value}
onPress={() =>
handleSizeSelect(attribute.value, index)
}
style={[
styles.sizeButton,
attribute.has_color &&
styles.selectedSizeButton,
]}
>
<Text
style={[
styles.sizeButtonText,
attribute.has_color &&
styles.selectedSizeText,
]}
>
{attribute.value}
</Text>
</TouchableOpacity>
))}
{!expandedGroups[item.attribute_name] &&
item.attributes.length > 6 && (
<TouchableOpacity
style={styles.expandButton}
onPress={() =>
toggleExpand(item.attribute_name)
}
>
<Text style={styles.expandButtonText}>
</Text>
</TouchableOpacity>
)}
{expandedGroups[item.attribute_name] && (
<TouchableOpacity
style={styles.expandButton}
onPress={() =>
toggleExpand(item.attribute_name)
}
>
<Text style={styles.expandButtonText}>
</Text>
</TouchableOpacity>
)}
</View>
{groupList.length === 1 && (
<TouchableOpacity
style={styles.svgContainer6}
onPress={() => setShowBottomSheet(true)}
>
<View style={styles.svgContainer6}>
<DiagonalArrowIcon size={fontSize(18)} />
</View>
</TouchableOpacity>
)}
{groupList.length === 2 && index === 0 && (
<TouchableOpacity
style={styles.svgContainer6}
onPress={() => setShowBottomSheet(true)}
>
<View style={styles.svgContainer6}>
<DiagonalArrowIcon size={fontSize(18)} />
</View>
</TouchableOpacity>
)}
</View>
)
)}
</View>
</View>
</View>
<View style={styles.storeRecommendationsContainer}>
<View style={styles.storeInfoContainer}>
<Text style={styles.storeSectionTitle}>
More from this store
</Text>
{/* <Text style={styles.storeMoreLink}>View All</Text> */}
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.productGridContainer}
>
{isSimilarsFlag &&
similars?.map((item) => (
<TouchableOpacity
style={styles.productCard}
key={item.offer_id}
onPress={() => handleProductPress(item)}
>
<View style={styles.cardContainerWithPrice}>
<Image
source={{ uri: item.product_image_urls[0] }}
style={styles.imageContainerCompact}
/>
</View>
<View style={styles.priceContainerFlex}>
<Text style={styles.highlightedText1}>
{item.max_price}
</Text>
<Text style={styles.highlightedTextWithBorder}>
FCFA
</Text>
</View>
</TouchableOpacity>
))}
</ScrollView>
</View>
<View style={{ width: "100%" }}>
{imageUrls.map((src, index) => (
<View key={index} style={{ width: "100%" }}>
<ExpoImage
style={{
width: "100%",
height: imageHeights[src] || 200,
backgroundColor: "#f5f5f5",
}}
source={{ uri: src }}
contentFit="contain"
onLoad={(event) => handleImageLoad(src, event)}
/>
</View>
))}
</View>
</View>
</View>
</ScrollView>
<View style={styles.fixedBottomBar}>
<TouchableOpacity style={styles.chatNowButton}>
<WhiteCircleIcon color="#fff" size={fontSize(20)} />
<Text style={styles.chatNowText}>chatNow</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.addToCartButton}
onPress={() => setShowBottomSheet(true)}
>
<ShoppingCartIcon color="#fff" size={fontSize(20)} />
<Text style={styles.addToCartText}>addToCart</Text>
</TouchableOpacity>
</View>
{showBottomSheet && product && (
<View style={styles.bottomSheetOverlay}>
<Animated.View style={[styles.bottomSheet]}>
<ProductCard
onClose={() => setShowBottomSheet(false)}
product={product}
groupList={groupList}
></ProductCard>
</Animated.View>
</View>
)}
</>
)}
</View>
);
};
const styles = StyleSheet.create({
scrollView: {
flex: 1,
backgroundColor: "white",
},
headerBox: {
width: "100%",
padding: 10,
justifyContent: "space-between",
flexDirection: "row",
alignItems:'center',
backgroundColor:'#fff'
},
backIcon:{
width:'5%',
alignItems:'flex-end'
},
search:{
width:'70%',
padding:15,
backgroundColor:'#f4f4f4',
borderWidth:1,
borderColor:'#eeeeee',
borderRadius:25,
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between'
},
searchText:{
fontSize:fontSize(16),
color:'#747474',
fontWeight:'600'
},
searchIcon:{
alignItems:'center',
justifyContent:'space-between',
flexDirection:'row',
width:'15%'
},
scrollViewContent: {
},
productDetailsContainer3: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
width: "100%",
backgroundColor: "white",
},
timeCardContainer: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
paddingTop: 3,
paddingBottom: 15,
paddingLeft: 18,
},
timeInfoContainer: {
flexDirection: "row",
gap: 8,
alignItems: "center",
justifyContent: "space-between",
paddingLeft: 38,
},
timeDisplay: {
width: 42,
fontWeight: "600",
fontSize: fontSize(17),
color: "black",
textAlign: "center",
},
timeDisplayContainer: {
width: widthUtils(54, 154).width,
height: widthUtils(54, 54).height,
},
searchContainer1: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginTop: 2,
width: "100%",
},
backButtonContainer: {
width: "10%",
alignItems: "flex-start",
},
searchContainer2: {
width: "70%",
flexDirection: "row",
alignItems: "center",
height: widthUtils(50, 50).height,
paddingRight: 10,
paddingLeft: 10,
backgroundColor: "#f4f4f4",
borderWidth: 1,
borderColor: "#eeeeee",
borderRadius: 25,
marginRight: 10,
},
iconsContainer: {
width: "20%",
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
},
svgContainer: {
width: widthUtils(18, 18).width,
height: widthUtils(18, 18).height,
},
svgContainer1: {
width: widthUtils(24, 24).width,
height: widthUtils(24, 24).height,
color: "#373737",
justifyContent: "center",
alignItems: "center",
},
searchTitleTextStyle: {
fontWeight: "600",
fontSize: fontSize(16),
color: "#747474",
flex: 1,
},
svgContainer2: {
width: widthUtils(24, 24).width,
height: widthUtils(24, 24).height,
marginLeft: 11,
color: "#373737",
},
productDetailsContainer2: {
backgroundColor: "#f4f4f4",
},
centerColumnWithPagination: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "center",
width: "100%",
backgroundColor: "#f4f4f4",
},
centerContentWithPaginationButton: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
},
sidebarContainer: {
paddingLeft: 350,
},
centerIconContainer: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: widthUtils(40, 40).width,
height: widthUtils(40, 40).height,
backgroundColor: "#efefef",
borderRadius: 25,
},
centerBox1: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: widthUtils(60, 60).width,
height: widthUtils(60, 60).height,
marginTop: 125,
backgroundColor: "rgba(92, 92, 92, 0.6)",
borderWidth: 1,
borderColor: "white",
borderRadius: 35,
},
svgContainer3: {
width: widthUtils(20, 20).width,
height: widthUtils(20, 20).height,
color: "#ffffff",
},
darkButton: {
alignSelf: "flex-end",
width: widthUtils(26, 50).width,
height: widthUtils(26, 50).height,
minWidth: 50,
marginTop: 147,
fontWeight: "600",
fontSize: fontSize(12),
color: "white",
backgroundColor: "rgba(44, 44, 44, 0.7)",
borderRadius: 13,
},
nightLampProductCard: {
width: "100%",
padding: 16,
paddingLeft: 19,
paddingBottom: 23,
backgroundColor: "white",
},
creativeHeading: {
width: "100%",
fontWeight: "600",
fontSize: fontSize(18),
lineHeight: 22,
color: "black",
textAlign: "left",
},
productInfoContainer1: {
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
},
productInfoContainer: {
alignSelf: "flex-start",
},
salesInfoContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
},
highlightedText: {
fontWeight: "700",
fontSize: fontSize(30),
color: "#ff5100",
},
orangeHighlightedText: {
fontWeight: "700",
fontSize: fontSize(14),
marginLeft: 1.25,
color: "#ff5100",
lineHeight: 28,
},
salesCountLabel: {
marginTop: 6.75,
fontWeight: "600",
fontSize: fontSize(14),
color: "#7c7c7c",
},
priceBox: {
marginTop: 15,
marginBottom: 5,
},
priceLabel: {
fontWeight: "600",
fontSize: fontSize(12),
color: "#9a9a9a",
textDecorationLine: 'line-through',
},
priceContainer: {
width: "100%",
marginTop: -4.75,
borderTopWidth: 1,
borderTopColor: "#9a9a9a",
},
discountInfoContainer: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
marginLeft: 10,
},
emphasizedTextWidget: {
fontStyle: "italic",
fontWeight: "900",
fontSize: fontSize(11),
color: "#4e2000",
backgroundColor: "#FFE4D6",
padding: 3,
borderRadius: 3,
},
vipStatusContainer: {
marginLeft: 10,
},
vipBadgeContainer: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "center",
paddingHorizontal: 10,
paddingVertical: 3,
backgroundColor: "#3b3b3b",
borderRadius: 5,
borderBottomLeftRadius: 0,
},
vipStatusNumeric: {
fontStyle: "italic",
fontWeight: "900",
fontSize: fontSize(14),
},
emphasizedTextVip: {
fontStyle: "italic",
fontWeight: "900",
fontSize: fontSize(14),
},
emphasizedText: {
fontStyle: "italic",
fontWeight: "900",
fontSize: fontSize(14),
letterSpacing: -2,
},
productDetailsContainer: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
width: "100%",
padding: 10,
paddingLeft: 19,
paddingBottom: 13,
marginTop: 8,
backgroundColor: "white",
},
productDetailsContainer1: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
},
blackThemeContainer: {},
uniqueTextBlock: {
fontWeight: "600",
fontSize: fontSize(16),
lineHeight: 20,
color: "black",
},
horizontalFlexContainer: {
width: "100%",
flexDirection: "row",
flexWrap: "wrap",
gap: 10,
alignItems: "center",
justifyContent: "flex-start",
marginTop: 8,
},
imageContainer: {
width: widthUtils(40, 40).width,
height: widthUtils(40, 40).height,
borderRadius: 5,
},
centerBox: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "center",
width: widthUtils(40, 40).width,
backgroundColor: "#e0e0e0",
borderRadius: 5,
},
imageContainerStyles: {
height: widthUtils(40, 40).height,
},
svgContainer6: {
alignSelf: "flex-end",
width: widthUtils(18, 18).width,
height: widthUtils(18, 18).height,
},
sizeSelector: {
marginTop: 0,
},
numericHighlightedTextContainer: {
alignItems: "center",
justifyContent: "center",
height: widthUtils(30, 30).height,
paddingHorizontal: 11,
fontWeight: "400",
fontSize: fontSize(14),
color: "#ff5100",
backgroundColor: "#fff5f0",
borderWidth: 1,
borderColor: "#ff5100",
borderRadius: 5,
},
numberBadge: {
alignItems: "center",
justifyContent: "center",
height: widthUtils(30, 40).height,
paddingHorizontal: 11,
fontWeight: "400",
fontSize: fontSize(14),
color: "#373737",
backgroundColor: "#efefef",
borderRadius: 5,
lineHeight: widthUtils(40, 40).height,
marginBottom: 10,
},
sizeButton: {
alignItems: "center",
justifyContent: "center",
height: widthUtils(30, 40).height,
paddingHorizontal: 11,
backgroundColor: "#efefef",
borderRadius: 5,
marginBottom: 10,
},
sizeButtonText: {
fontWeight: "400",
fontSize: fontSize(14),
color: "#373737",
lineHeight: widthUtils(30, 40).height,
},
selectedSizeButton: {
backgroundColor: "#fff5f0",
borderWidth: 1,
borderColor: "#ff5217",
},
selectedSizeText: {
color: "#ff5217",
fontWeight: "600",
},
expandButton: {
alignItems: "center",
justifyContent: "center",
height: widthUtils(38, 38).height,
paddingHorizontal: 11,
fontWeight: "600",
fontSize: fontSize(14),
color: "#ff5100",
borderRadius: 5,
lineHeight: widthUtils(40, 40).height,
marginBottom: 10,
backgroundColor: "#efefef",
},
expandButtonText: {
color: "#b7b7b7",
fontWeight: "600",
},
storeRecommendationsContainer: {
width: "100%",
padding: 10,
paddingLeft: 19,
paddingBottom: 19,
marginTop: 8,
backgroundColor: "white",
},
storeInfoContainer: {
flexDirection: "row",
gap: 8,
alignItems: "center",
justifyContent: "space-between",
width: "100%",
},
storeSectionTitle: {
fontWeight: "600",
fontSize: fontSize(16),
lineHeight: 20,
color: "black",
},
storeMoreLink: {
fontWeight: "600",
fontSize: fontSize(12),
color: "#747474",
},
productGridContainer: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 12,
paddingRight: 10,
},
productCard: {
width: widthUtils(115, 90).width,
height: widthUtils(115, 90).height,
marginRight: 10,
},
cardContainerWithPrice: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "center",
width: "100%",
backgroundColor: "#e0e0e0",
borderRadius: 5,
},
imageContainerCompact: {
height: widthUtils(90, 90).height,
width: widthUtils(90, 90).width,
},
priceContainerFlex: {
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
marginTop: 2,
},
highlightedText1: {
fontWeight: "700",
fontSize: fontSize(16),
lineHeight: 20,
color: "#ff5100",
},
highlightedTextWithBorder: {
fontWeight: "700",
fontSize: fontSize(10),
marginLeft: 1.25,
color: "#ff5100",
},
productImageContainer: {
width: "100%",
height: widthUtils(90, 90).height,
borderRadius: 5,
},
orangeHighlightTextStyle: {
fontWeight: "700",
fontSize: fontSize(16),
lineHeight: widthUtils(20, 20).height,
marginTop: 2,
color: "#ff5100",
},
productDetailsContainer4: {
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
width: "100%",
marginTop: 8,
backgroundColor: "white",
},
productDetailsContainer5: {
padding: 10,
paddingLeft: 19,
paddingBottom: 183,
},
productDetailsDescription: {
width: "100%",
marginTop: 8,
fontWeight: "400",
fontSize: fontSize(14),
lineHeight: widthUtils(20, 20).height,
color: "#373737",
textAlign: "left",
},
imageContainer1: {
marginTop: -165,
marginRight: 20,
marginLeft: 20,
},
imageContainerStyles1: {
width: widthUtils(229, 390).width,
height: widthUtils(229, 390).height,
},
flexCenterButtons: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: widthUtils(64, 64).height,
paddingRight: 20,
paddingLeft: 20,
marginTop: -64,
backgroundColor: "white",
},
gradientButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 4,
width: widthUtils(50, 160).width,
height: widthUtils(50, 160).height,
minWidth: 160,
fontWeight: "700",
fontSize: fontSize(18),
lineHeight: 22,
color: "white",
backgroundColor:
"linear-gradient(90deg, rgba(0, 183, 68, 1) 0%, rgba(28, 207, 95, 1) 100%)",
borderRadius: 30,
},
svgContainer7: {
width: widthUtils(24, 24).width,
height: widthUtils(24, 24).height,
color: "#ffffff",
},
orangeGradientButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 7,
width: widthUtils(50, 220).width,
height: widthUtils(50, 220).height,
minWidth: 220,
marginLeft: 10,
fontWeight: "700",
fontSize: fontSize(18),
lineHeight: 22,
color: "white",
backgroundColor:
"linear-gradient(90deg, rgba(255, 128, 0, 1) 0%, rgba(255, 81, 0, 1) 100%)",
borderRadius: 30,
},
activeIndexText: {
color: "white",
fontSize: fontSize(12),
width: widthUtils(26, 50).width,
height: widthUtils(26, 50).height,
textAlign: "center",
lineHeight: widthUtils(26, 50).height + 2,
},
colorImageContainer: {
padding: 2,
borderRadius: 5,
},
selectedColorImageContainer: {
backgroundColor: "#fff5f0",
borderWidth: 1,
borderColor: "#ff5217",
},
fixedBottomBar: {
position: "absolute",
bottom: 10,
left: 0,
right: 0,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingHorizontal: 15,
backgroundColor: "transparent",
zIndex: 100,
height: widthUtils(60, 60).height,
},
chatNowButton: {
width: "40%",
height: widthUtils(50, 50).height,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 0,
borderRadius: 30,
backgroundColor: "#4CAF50",
marginRight: 10,
elevation: 4,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 3,
},
chatNowText: {
fontSize: fontSize(18),
color: "#fff",
fontWeight: "bold",
marginLeft: 8,
},
addToCartButton: {
width: "60%",
height: widthUtils(50, 50).height,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 0,
borderRadius: 30,
backgroundColor: "#FF5722",
marginLeft: 10,
elevation: 4,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 3,
},
addToCartText: {
fontSize: fontSize(18),
color: "#fff",
fontWeight: "bold",
marginLeft: 8,
},
modalContainer: {
backgroundColor: "rgba(0, 0, 0, 0.5)",
justifyContent: "flex-end",
},
modalContent: {
height: "90%",
backgroundColor: "white",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 20,
},
closeButton: {
alignSelf: "flex-end",
padding: 10,
},
closeButtonText: {
fontSize: fontSize(16),
color: "#333",
},
bottomSheetOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "flex-end",
zIndex: 200,
},
bottomSheet: {
backgroundColor: "#fff",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
height: "85%",
zIndex: 1,
},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
},
loadingText: {
marginTop: 10,
fontSize: fontSize(16),
color: "#666",
},
});