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.
788 lines
24 KiB
788 lines
24 KiB
2 months ago
|
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;
|