This commit is contained in:
Xor290
@@ -819,29 +819,44 @@ function CentralRewardSection({
|
||||
const update = (patch: Partial<PointsReward>) =>
|
||||
onChange({ ...r, ...patch });
|
||||
|
||||
const getCatConfig = (catName: string): RewardCategoryConfig =>
|
||||
r.category_configs.find((c) => c.category === catName) ??
|
||||
{ category: catName, type: "free_product", all_products: true, product_ids: [] };
|
||||
// Une catégorie peut avoir jusqu'à deux configs actives en parallèle
|
||||
// (une "free_product" et une "half_price_product"), chacune avec sa
|
||||
// propre sélection de produits — d'où la recherche par (catégorie, type).
|
||||
const getCatConfig = (catName: string, type: RewardCategoryConfig["type"]): RewardCategoryConfig =>
|
||||
r.category_configs.find((c) => c.category === catName && c.type === type) ??
|
||||
{ category: catName, type, all_products: true, product_ids: [] };
|
||||
|
||||
const isTypeEnabled = (catName: string, type: RewardCategoryConfig["type"]) =>
|
||||
r.category_configs.some((c) => c.category === catName && c.type === type);
|
||||
|
||||
const isCatSelected = (catName: string) =>
|
||||
r.category_configs.some((c) => c.category === catName);
|
||||
|
||||
const toggleCategory = (catName: string) => {
|
||||
if (isCatSelected(catName)) {
|
||||
update({ category_configs: r.category_configs.filter((c) => c.category !== catName) });
|
||||
const toggleCategoryType = (catName: string, type: RewardCategoryConfig["type"]) => {
|
||||
if (isTypeEnabled(catName, type)) {
|
||||
update({ category_configs: r.category_configs.filter((c) => !(c.category === catName && c.type === type)) });
|
||||
} else {
|
||||
update({ category_configs: [...r.category_configs, { category: catName, type: "free_product", all_products: true, product_ids: [] }] });
|
||||
update({ category_configs: [...r.category_configs, { category: catName, type, all_products: true, product_ids: [] }] });
|
||||
}
|
||||
};
|
||||
|
||||
const updateCatConfig = (cfg: RewardCategoryConfig) => {
|
||||
update({
|
||||
category_configs: r.category_configs.map((c) =>
|
||||
c.category === cfg.category ? cfg : c
|
||||
c.category === cfg.category && c.type === cfg.type ? cfg : c
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const [expandedCats, setExpandedCats] = useState<Set<string>>(new Set());
|
||||
const toggleExpanded = (catName: string) => {
|
||||
setExpandedCats((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(catName)) next.delete(catName); else next.add(catName);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const rewardBadge = (
|
||||
<View style={{
|
||||
paddingHorizontal: spacing.s, paddingVertical: 2, borderRadius: 10,
|
||||
@@ -1040,7 +1055,7 @@ function CentralRewardSection({
|
||||
<View>
|
||||
<Text style={[s.rowLabel, { marginBottom: spacing.xs }]}>Catégories éligibles</Text>
|
||||
<Text style={[s.rowDesc, { marginBottom: spacing.m }]}>
|
||||
Sélectionnez les catégories, choisissez le type de récompense pour chacune, puis tous les produits ou une sélection.
|
||||
Sélectionnez une catégorie pour activer, indépendamment, un lot de produits offerts et/ou un lot de produits à -50%, chacun avec sa propre sélection de produits.
|
||||
</Text>
|
||||
{allCategories.length === 0 ? (
|
||||
<Text style={[s.hint, { paddingHorizontal: 0 }]}>Aucune catégorie disponible</Text>
|
||||
@@ -1048,12 +1063,13 @@ function CentralRewardSection({
|
||||
<View style={{ gap: spacing.m }}>
|
||||
{allCategories.map((cat) => {
|
||||
const selected = isCatSelected(cat.name);
|
||||
const expanded = expandedCats.has(cat.name);
|
||||
const catColor = cat.color || REWARD_ACCENT;
|
||||
return (
|
||||
<View key={cat.name}>
|
||||
{/* Chip catégorie */}
|
||||
{/* Chip catégorie (couleur = au moins un type actif, clic = déplier/replier) */}
|
||||
<TouchableOpacity
|
||||
onPress={() => toggleCategory(cat.name)}
|
||||
onPress={() => toggleExpanded(cat.name)}
|
||||
style={{
|
||||
flexDirection: "row", alignItems: "center", gap: spacing.xs,
|
||||
alignSelf: "flex-start",
|
||||
@@ -1068,46 +1084,52 @@ function CentralRewardSection({
|
||||
{cat.name}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={selected ? "chevron-down" : "chevron-forward"}
|
||||
name={expanded ? "chevron-down" : "chevron-forward"}
|
||||
size={12}
|
||||
color={selected ? catColor : colors.textMuted}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Type + sélecteur produits (visible si catégorie sélectionnée) */}
|
||||
{selected && (
|
||||
<View style={{ marginTop: spacing.s, paddingLeft: spacing.m, gap: spacing.s }}>
|
||||
<View style={{ flexDirection: "row", flexWrap: "wrap", gap: spacing.xs }}>
|
||||
{REWARD_TYPES.map((rt) => {
|
||||
const cfg = getCatConfig(cat.name);
|
||||
const sel = (cfg.type || "free_product") === rt.value;
|
||||
return (
|
||||
{/* Les deux types de récompense, activables indépendamment */}
|
||||
{expanded && (
|
||||
<View style={{ marginTop: spacing.s, paddingLeft: spacing.m, gap: spacing.m }}>
|
||||
{REWARD_TYPES.map((rt) => {
|
||||
const typeEnabled = isTypeEnabled(cat.name, rt.value);
|
||||
return (
|
||||
<View key={rt.value} style={{ gap: spacing.s }}>
|
||||
<TouchableOpacity
|
||||
key={rt.value}
|
||||
onPress={() => updateCatConfig({ ...cfg, type: rt.value })}
|
||||
onPress={() => toggleCategoryType(cat.name, rt.value)}
|
||||
style={{
|
||||
flexDirection: "row", alignItems: "center", gap: 4,
|
||||
alignSelf: "flex-start",
|
||||
paddingHorizontal: spacing.s, paddingVertical: 4,
|
||||
borderRadius: borderRadius.sm, borderWidth: 1.5,
|
||||
borderColor: sel ? REWARD_ACCENT : colors.border,
|
||||
backgroundColor: sel ? REWARD_ACCENT + "22" : "transparent",
|
||||
borderColor: typeEnabled ? REWARD_ACCENT : colors.border,
|
||||
backgroundColor: typeEnabled ? REWARD_ACCENT + "22" : "transparent",
|
||||
}}
|
||||
>
|
||||
<Ionicons name={rt.icon as any} size={12} color={sel ? REWARD_ACCENT : colors.textMuted} />
|
||||
<Text style={{ fontSize: 12, fontWeight: sel ? "700" : "400", color: sel ? REWARD_ACCENT : colors.textMuted }}>
|
||||
<Ionicons
|
||||
name={typeEnabled ? "checkbox" : "square-outline"}
|
||||
size={14}
|
||||
color={typeEnabled ? REWARD_ACCENT : colors.textMuted}
|
||||
/>
|
||||
<Ionicons name={rt.icon as any} size={12} color={typeEnabled ? REWARD_ACCENT : colors.textMuted} />
|
||||
<Text style={{ fontSize: 12, fontWeight: typeEnabled ? "700" : "400", color: typeEnabled ? REWARD_ACCENT : colors.textMuted }}>
|
||||
{rt.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
<CategoryProductPicker
|
||||
catConfig={getCatConfig(cat.name)}
|
||||
products={productsByCategory[cat.name] ?? []}
|
||||
onChange={updateCatConfig}
|
||||
colors={colors}
|
||||
s={s}
|
||||
/>
|
||||
{typeEnabled && (
|
||||
<CategoryProductPicker
|
||||
catConfig={getCatConfig(cat.name, rt.value)}
|
||||
products={productsByCategory[cat.name] ?? []}
|
||||
onChange={updateCatConfig}
|
||||
colors={colors}
|
||||
s={s}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
@@ -1127,8 +1149,8 @@ function CentralRewardSection({
|
||||
{r.description !== "" && (
|
||||
<Text style={{ fontSize: 12, color: colors.textMuted, fontStyle: "italic" }}>"{r.description}"</Text>
|
||||
)}
|
||||
{r.category_configs.map((cfg) => (
|
||||
<Text key={cfg.category} style={{ fontSize: 12, color: colors.textSecondary }}>
|
||||
{r.category_configs.map((cfg, idx) => (
|
||||
<Text key={`${cfg.category}-${cfg.type}-${idx}`} style={{ fontSize: 12, color: colors.textSecondary }}>
|
||||
• {REWARD_TYPES.find((x) => x.value === (cfg.type || "free_product"))?.label} : {cfg.category} — {cfg.all_products ? "tous les produits" : `${cfg.product_ids.length} produit(s)`}
|
||||
</Text>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user