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.
787 lines
24 KiB
787 lines
24 KiB
import React, { useEffect } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ScrollView, |
|
} from "react-native"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import CloseIcon from "../components/CloseIcon"; |
|
import { |
|
ProductDetailParams, |
|
ProductGroupList, |
|
SkuAttribute, |
|
} from "../services/api/productApi"; |
|
import { useState } from "react"; |
|
interface ProductCardProps { |
|
onClose: () => void; |
|
product: ProductDetailParams; |
|
groupList: ProductGroupList[]; |
|
} |
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ |
|
onClose, |
|
product: localProduct, |
|
groupList: localGroupList, |
|
}: { |
|
onClose: () => void; |
|
product: ProductDetailParams; |
|
groupList: ProductGroupList[]; |
|
}) => { |
|
const [groupList, setGroupList] = |
|
useState<ProductGroupList[]>(localGroupList); |
|
const [product, setProduct] = useState<ProductDetailParams>(localProduct); |
|
const [imgTitle, setImgTitle] = useState<string>(""); |
|
|
|
useEffect(() => { |
|
const item = groupList.filter((item) => item.has_image); |
|
item.forEach((item) => { |
|
const colorItem = item.attributes.filter( |
|
(attribute) => attribute.has_color |
|
); |
|
if (colorItem.length > 0) { |
|
setImgTitle(colorItem[0].sku_image_url); |
|
} |
|
}); |
|
if (item.length === 0) { |
|
setImgTitle(product.product_image_urls[0]); |
|
} |
|
|
|
if(item.length === 1){ |
|
console.log(item); |
|
|
|
} |
|
|
|
|
|
}); |
|
const handleColorSelect = (colorId: string, index: number) => { |
|
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, |
|
}); |
|
} |
|
}; |
|
|
|
return ( |
|
<View style={styles.container}> |
|
<View style={styles.productCardContainer3}> |
|
<View style={styles.pricingCard}> |
|
<View style={styles.flexRowAlignedEndFullWidth}> |
|
<View style={styles.productCardContainer}> |
|
<View style={styles.cardContainer}> |
|
<View style={styles.flexColumnEndAlign2}> |
|
<Image |
|
source={{ uri: imgTitle }} |
|
style={styles.flexColumnImg} |
|
/> |
|
{/* SVG commented out as requested */} |
|
{/* <View style={styles.svgContainer}> |
|
<svg viewBox="0 0 24 24" x="0" y="0" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<g id="look" xmlns="http://www.w3.org/2000/svg"> |
|
<path id="Rectangle 653" d="M1,1h17c2.7614,0 5,2.239 5,5v17h-17c-2.7614,0 -5,-2.239 -5,-5z" fill="#5B5B5B" fill-opacity="0.7" /> |
|
<path id="Vector 12" d="M12,6h6v6" stroke="white" stroke-linecap="round" stroke-linejoin="round" /> |
|
<path id="Vector 13" d="M12,18h-6v-6" stroke="white" stroke-linecap="round" stroke-linejoin="round" /> |
|
</g> |
|
</svg> |
|
</View> */} |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.productCardContainer2}> |
|
<View style={styles.productCardContainer1}> |
|
<View style={styles.priceInfoContainer1}> |
|
<Text style={styles.highlightedText}>{product.price}</Text> |
|
<View style={styles.priceInfoContainer2}> |
|
<Text style={styles.orangeHeading}>FCFA</Text> |
|
<View style={styles.percentageChangeContainer}> |
|
<Text style={styles.discountPercentageTextStyle}> |
|
-5% |
|
</Text> |
|
{/* SVG commented out as requested */} |
|
{/* <View style={styles.svgContainer1}> |
|
<svg viewBox="0 0 32 32" x="0" y="0" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<defs> |
|
<linearGradient id="paint5_linear_128_1116" x1="7.443999999999988" y1="7.443999999999988" x2="12.580000000000013" y2="29.312000000000012" gradientUnits="userSpaceOnUse" xmlns="http://www.w3.org/2000/svg"> |
|
<stop stop-color="#FFE5AD" /> |
|
<stop offset="1" stop-color="#F9AE46" /> |
|
</linearGradient> |
|
<linearGradient id="paint6_linear_128_1116" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse" xmlns="http://www.w3.org/2000/svg"> |
|
<stop stop-color="white" /> |
|
<stop offset="1" stop-color="#FFD180" /> |
|
</linearGradient> |
|
</defs> |
|
<path id="Star 1_2" d="M14.621,3.313c0.772,-0.735 1.986,-0.735 2.758,0l1.401,1.334c0.439,0.418 1.043,0.615 1.644,0.534l1.917,-0.255c1.057,-0.141 2.039,0.572 2.232,1.621l0.349,1.903c0.109,0.596 0.483,1.11 1.016,1.398l1.701,0.92c0.939,0.507 1.314,1.661 0.853,2.623l-0.836,1.745c-0.262,0.546 -0.262,1.182 0,1.728l0.836,1.745c0.461,0.962 0.086,2.116 -0.853,2.623l-1.701,0.92c-0.533,0.288 -0.907,0.802 -1.016,1.398l-0.349,1.903c-0.193,1.049 -1.175,1.762 -2.232,1.621l-1.917,-0.255c-0.601,-0.081 -1.205,0.116 -1.644,0.534l-1.401,1.334c-0.772,0.735 -1.986,0.735 -2.758,0l-1.401,-1.334c-0.439,-0.418 -1.043,-0.615 -1.644,-0.534l-1.917,0.255c-1.057,0.141 -2.039,-0.572 -2.232,-1.621l-0.349,-1.903c-0.109,-0.596 -0.483,-1.11 -1.016,-1.398l-1.701,-0.92c-0.939,-0.507 -1.314,-1.661 -0.853,-2.623l0.836,-1.745c0.262,-0.546 0.262,-1.182 0,-1.728l-0.836,-1.745c-0.461,-0.962 -0.086,-2.116 0.853,-2.623l1.701,-0.92c0.533,-0.288 0.907,-0.802 1.016,-1.398l0.349,-1.903c0.193,-1.049 1.175,-1.762 2.232,-1.621l1.917,0.255c0.601,0.081 1.205,-0.116 1.644,-0.534z" fill="url(#paint5_linear_128_1116)" stroke="url(#paint6_linear_128_1116)" xmlns="http://www.w3.org/2000/svg" /> |
|
</svg> |
|
</View> */} |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.vipButtonContainer}> |
|
<View style={styles.vipButton}> |
|
<Text style={styles.italicBoldSegoeVip}>VIP</Text> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.pricingCardContainer}> |
|
<View style={styles.pricingCard}> |
|
<View style={styles.priceInfoContainer}> |
|
<Text style={styles.priceHighlightedText}>3072</Text> |
|
<Text style={styles.priceTagBold}>FCFA</Text> |
|
</View> |
|
<Text style={styles.productPriceTier}>≥2 Pièces</Text> |
|
</View> |
|
<View style={styles.pricingCard}> |
|
<View style={styles.priceInfoContainer}> |
|
<Text style={styles.priceHighlightedText}>2500</Text> |
|
<Text style={styles.priceTagBold}>FCFA</Text> |
|
</View> |
|
<Text style={styles.productPriceTier}>≥50 Pièces</Text> |
|
</View> |
|
<View style={styles.pricingCard}> |
|
<View style={styles.priceInfoContainer}> |
|
<Text style={styles.priceHighlightedText}>2099</Text> |
|
<Text style={styles.priceTagBold}>FCFA</Text> |
|
</View> |
|
<Text style={styles.productPriceTier}>≥100 Pièces</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.productDetailsContainer}> |
|
{groupList.map((item, index1) => ( |
|
<React.Fragment key={item.attribute_name + index1}> |
|
{item.has_image && groupList.length > 1 && ( |
|
<View> |
|
<Text style={styles.primaryTextHeading}>Couleur：Noir</Text> |
|
<ScrollView |
|
horizontal |
|
showsHorizontalScrollIndicator={false} |
|
key={item.attribute_name + index1} |
|
> |
|
<View |
|
style={{ flexDirection: "row", gap: 12, width: "100%" }} |
|
> |
|
{item.attributes.map((attribute, index) => ( |
|
<TouchableOpacity |
|
key={attribute.value + index} |
|
onPress={() => |
|
handleColorSelect(attribute.value, index1) |
|
} |
|
> |
|
<View |
|
style={[ |
|
styles.colorPaletteContainer1, |
|
attribute.has_color && |
|
styles.selectedColorImageContainer, |
|
]} |
|
> |
|
<View |
|
key={attribute.value} |
|
style={styles.cardContainerWithTitle} |
|
> |
|
<View style={styles.cardContainerWithImage}> |
|
<Image |
|
source={{ uri: attribute.sku_image_url }} |
|
style={styles.imageContainer} |
|
/> |
|
</View> |
|
<Text style={styles.profileCard}> |
|
{attribute.value} |
|
</Text> |
|
</View> |
|
</View> |
|
</TouchableOpacity> |
|
))} |
|
</View> |
|
</ScrollView> |
|
</View> |
|
)} |
|
{!item.has_image && ( |
|
<View style={styles.productStockInfoContainer}> |
|
<Text style={styles.primaryTextHeading}>Taille</Text> |
|
<ScrollView showsVerticalScrollIndicator={false}> |
|
{item.attributes.map((attribute) => ( |
|
<View |
|
style={styles.productStockDisplayWidget} |
|
key={attribute.value + index1} |
|
> |
|
<View style={styles.stockAvailabilityDisplayWidget}> |
|
<View |
|
style={[ |
|
styles.stockInfoDisplayContainer, |
|
styles.stockAvailabilityDisplay, |
|
]} |
|
> |
|
<View style={styles.pricingCard}> |
|
<Text |
|
style={[ |
|
styles.stockAvailabilityInfoStyle, |
|
{ fontWeight: "400" }, |
|
]} |
|
> |
|
{attribute.value} |
|
</Text> |
|
<Text style={styles.stockStatusInfoTextStyle}> |
|
En stock 231 |
|
</Text> |
|
</View> |
|
<View style={styles.stockInfoContainer}> |
|
<View |
|
style={styles.stockCountDisplayStyleContainer} |
|
></View> |
|
<Text |
|
style={ |
|
styles.stockCountDisplayStyleContainer1 |
|
} |
|
> |
|
0 |
|
</Text> |
|
<Text |
|
style={{ fontSize: 16, fontWeight: "400" }} |
|
> |
|
+ |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
)} |
|
{item.has_image && groupList.length === 1 && ( |
|
<View style={{ flex: 1, height: "100%" }}> |
|
<ScrollView style={{ flex: 1 }}> |
|
{item.attributes.map((attribute, index) => ( |
|
<View |
|
key={attribute.value + index1} |
|
style={{ |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
marginBottom: 10, |
|
}} |
|
> |
|
<View style={{ width: 50, height: 50 }}> |
|
<Image |
|
source={{ uri: attribute.sku_image_url }} |
|
style={{ |
|
width: "100%", |
|
height: "100%", |
|
borderRadius: 5, |
|
}} |
|
/> |
|
</View> |
|
<View style={{width:widthUtils(200,200).width}}> |
|
<Text |
|
style={{textAlign:'left',alignSelf:'center',width:'100%'}} |
|
numberOfLines={1} |
|
ellipsizeMode="tail" |
|
> |
|
{attribute.value} |
|
</Text> |
|
</View> |
|
<View style={styles.stockInfoContainer}> |
|
<View |
|
style={styles.stockCountDisplayStyleContainer} |
|
></View> |
|
<Text |
|
style={styles.stockCountDisplayStyleContainer1} |
|
> |
|
0 |
|
</Text> |
|
<Text style={{ fontSize: 16, fontWeight: "400" }}> |
|
+ |
|
</Text> |
|
</View> |
|
</View> |
|
))} |
|
</ScrollView> |
|
</View> |
|
)} |
|
</React.Fragment> |
|
))} |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.closeIconContainer}> |
|
<TouchableOpacity onPress={onClose}> |
|
<CloseIcon size={18} /> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
container: { |
|
width: "100%", |
|
backgroundColor: "white", |
|
}, |
|
productCardContainer3: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
paddingTop: 15, |
|
paddingRight: 17, |
|
paddingLeft: 19, |
|
}, |
|
pricingCard: { |
|
paddingTop: 5, |
|
paddingBottom: 5, |
|
}, |
|
flexRowAlignedEndFullWidth: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
}, |
|
productCardContainer: { |
|
flexBasis: widthUtils(80, 80).width, |
|
paddingTop: 5, |
|
}, |
|
cardContainer: { |
|
width: "100%", |
|
backgroundColor: "#e0e0e0", |
|
borderRadius: 5, |
|
}, |
|
flexColumnEndAlign2: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
height: widthUtils(80, 80).height, |
|
borderRadius: 5, |
|
}, |
|
flexColumnImg: { |
|
width: "100%", |
|
height: "100%", |
|
borderRadius: 5, |
|
}, |
|
svgContainer: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
}, |
|
productCardContainer2: { |
|
flexBasis: widthUtils(295, 295).width, |
|
marginLeft: 15, |
|
}, |
|
productCardContainer1: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
}, |
|
priceInfoContainer1: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
highlightedText: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "700", |
|
fontSize: fontSize(30), |
|
fontFamily: "Segoe UI", |
|
color: "#ff5100", |
|
}, |
|
priceInfoContainer2: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
marginLeft: 1, |
|
}, |
|
orangeHeading: { |
|
padding: 0, |
|
paddingBottom: 14, |
|
margin: 0, |
|
fontWeight: "700", |
|
fontSize: 14, |
|
fontFamily: "Segoe UI", |
|
color: "#ff5100", |
|
}, |
|
percentageChangeContainer: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 14.5, |
|
}, |
|
discountPercentageTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: 11, |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
svgContainer1: { |
|
width: 32, |
|
height: 32, |
|
marginTop: -26, |
|
}, |
|
vipButtonContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 1.25, |
|
}, |
|
svgContainer2: { |
|
width: 10, |
|
height: 10, |
|
color: "#3b3b3b", |
|
}, |
|
vipButton: { |
|
width: 55, |
|
minWidth: 55, |
|
height: 21, |
|
marginLeft: -2.5, |
|
backgroundColor: "#3b3b3b", |
|
borderWidth: 0, |
|
borderRadius: 5, |
|
borderBottomLeftRadius: 0, |
|
}, |
|
italicBoldSegoeVip: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: 14, |
|
fontFamily: "Segoe UI", |
|
}, |
|
royalBadge: { |
|
fontStyle: "italic", |
|
fontWeight: "900", |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
letterSpacing: -2, |
|
}, |
|
pricingCardContainer: { |
|
flexDirection: "row", |
|
gap: widthUtils(29.5, 29.5).width, |
|
alignItems: "flex-start", |
|
justifyContent: "space-between", |
|
width: "100%", |
|
paddingRight: 15, |
|
paddingBottom: 3, |
|
paddingLeft: 11, |
|
marginTop: 7, |
|
backgroundColor: "#f3f4f8", |
|
borderRadius: 5, |
|
}, |
|
priceInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
priceHighlightedText: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "700", |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#373737", |
|
}, |
|
priceTagBold: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "700", |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
color: "#373737", |
|
}, |
|
productPriceTier: { |
|
padding: 0, |
|
margin: 0, |
|
marginTop: -4, |
|
fontWeight: "400", |
|
fontSize: fontSize(12), |
|
fontFamily: "PingFang SC", |
|
color: "#373737", |
|
}, |
|
productDetailsContainer: { |
|
width: "100%", |
|
marginTop: 24, |
|
height: "100%", |
|
}, |
|
primaryTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "600", |
|
fontSize: 16, |
|
lineHeight: 20, |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
}, |
|
colorPaletteContainer1: { |
|
marginTop: 12, |
|
}, |
|
colorPaletteContainer: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
}, |
|
cardContainerWithTitleAndIcon: { |
|
flex: 1, |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingBottom: 5, |
|
backgroundColor: "#fff5f0", |
|
borderWidth: 1, |
|
borderColor: "#ff5100", |
|
borderRadius: 5, |
|
}, |
|
cardContainer1: { |
|
backgroundColor: "#e0e0e0", |
|
borderRadius: 5, |
|
}, |
|
flexColumnEndAlign: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
height: 90, |
|
borderRadius: 5, |
|
}, |
|
uniqueTextStyler: { |
|
alignSelf: "center", |
|
padding: 0, |
|
margin: 0, |
|
marginTop: 1, |
|
fontWeight: "600", |
|
fontSize: 16, |
|
lineHeight: 20, |
|
fontFamily: "Segoe UI", |
|
color: "#ff5100", |
|
}, |
|
cardContainer2: { |
|
flex: 1, |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingBottom: 5, |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
width: 90, |
|
height: 116, |
|
}, |
|
flexColumnEndAlign1: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
height: 90, |
|
borderRadius: 5, |
|
}, |
|
profileCard: { |
|
alignSelf: "center", |
|
padding: 0, |
|
margin: 0, |
|
marginTop: 1, |
|
fontWeight: "400", |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
height: 26, |
|
textAlign: "center", |
|
width: 90, |
|
fontSize: fontSize(18), |
|
}, |
|
beigeContainer: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
height: 90, |
|
backgroundColor: "#e0e0e0", |
|
borderRadius: 5, |
|
}, |
|
colorPaletteWidget: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "flex-start", |
|
height: 90, |
|
borderRadius: 5, |
|
}, |
|
cardContainerWithTitle: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: 90, |
|
height: 116, |
|
paddingBottom: 5, |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
}, |
|
cardContainerWithImage: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
borderRadius: 5, |
|
width: 90, |
|
height: 90, |
|
}, |
|
imageContainer: { |
|
width: "100%", |
|
height: "100%", |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
svgContainer3: { |
|
width: "100%", |
|
height: "100%", |
|
}, |
|
productStockInfoContainer: { |
|
marginTop: 24, |
|
}, |
|
productStockDisplayWidget: { |
|
width: "100%", |
|
marginTop: 8, |
|
}, |
|
stockAvailabilityDisplayWidget: { |
|
width: "100%", |
|
}, |
|
stockInfoDisplayContainer: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
width: "100%", |
|
}, |
|
stockAvailabilityDisplay: { |
|
marginTop: 10, |
|
}, |
|
stockAvailabilityInfoStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 16, |
|
lineHeight: 20, |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
}, |
|
stockStatusInfoTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "400", |
|
fontSize: 12, |
|
fontFamily: "Segoe UI", |
|
color: "#7c7c7c", |
|
}, |
|
stockInfoContainer: { |
|
flexDirection: "row", |
|
gap: 7.5, |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
stockCountDisplayStyleContainer: { |
|
width: 9, |
|
borderTopWidth: 1, |
|
borderTopColor: "black", |
|
}, |
|
stockCountDisplayStyleContainer1: { |
|
alignItems: "center", |
|
justifyContent: "center", |
|
height: 24, |
|
paddingHorizontal: 15, |
|
fontWeight: "400", |
|
fontSize: 14, |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
backgroundColor: "#f4f4f4", |
|
borderWidth: 0, |
|
borderRadius: 5, |
|
}, |
|
svgContainer4: { |
|
width: 8, |
|
height: 8, |
|
}, |
|
verticalFlexContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
marginTop: 10, |
|
}, |
|
numberTextContainer: { |
|
padding: 0, |
|
margin: 0, |
|
fontWeight: "400", |
|
fontSize: 16, |
|
lineHeight: 20, |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
}, |
|
verticalAlignBottom: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "center", |
|
marginTop: -4, |
|
}, |
|
verticalAlignContainer: { |
|
alignSelf: "flex-start", |
|
paddingRight: 33, |
|
paddingLeft: 322, |
|
marginTop: -4.5, |
|
}, |
|
borderBoxedWidthBlackTopLine: { |
|
width: 9, |
|
borderTopWidth: 1, |
|
borderTopColor: "black", |
|
}, |
|
closeIconContainer: { |
|
position: "absolute", |
|
top: 15, |
|
right: 15, |
|
zIndex: 1, |
|
}, |
|
selectedColorImageContainer: { |
|
borderWidth: 1, |
|
borderColor: "#ff5217", |
|
}, |
|
}); |
|
|
|
export default ProductCard;
|
|
|