feat: update multiple tomtom keys and switch tomtom key and add comming soon button

mobile/src/components/ProductCard.tsx

@@ -36,6 +36,7 @@ interface ProductCardProps {
         category: string;
         stock: number;
         unit?: string;
+        coming_soon?: boolean;
         prices?: Array<{ quantity: number; price: number; active_price?: boolean }>;
         media?: Array<{ url: string; type: string }>;
     };
@@ -48,6 +49,7 @@ export default function ProductCard({ product, onPress, categoryColor }: Product
     const { addToCart } = useCart();
     const catColor = categoryColor ?? colors.accent;
     const isSoldOut = product.stock <= 0;
+    const isComingSoon = product.coming_soon === true;
     const activePrices = product.prices?.filter((p) => p.active_price !== false) ?? [];
     const firstPrice = activePrices[0]?.price ?? null;
 
@@ -157,6 +159,11 @@ export default function ProductCard({ product, onPress, categoryColor }: Product
                         <Text style={styles.soldOutText}>SOLD OUT</Text>
                     </View>
                 )}
+                {isComingSoon && (
+                    <View style={styles.comingSoonOverlay}>
+                        <Text style={styles.comingSoonText}>À VENIR</Text>
+                    </View>
+                )}
             </View>
 
             <View
@@ -450,6 +457,31 @@ const styles = StyleSheet.create({
         textShadowOffset: { width: 2, height: 2 },
         textShadowRadius: 6,
     },
+    comingSoonOverlay: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: [
+            { translateX: -80 },
+            { translateY: -25 },
+            { rotate: "-15deg" },
+        ],
+        backgroundColor: "rgba(0,0,0,0.75)",
+        borderWidth: 4,
+        borderColor: "rgba(245,158,11,0.95)",
+        paddingHorizontal: 22,
+        paddingVertical: 12,
+    },
+    comingSoonText: {
+        color: "rgba(245,158,11,0.95)",
+        fontSize: 24,
+        fontWeight: "900",
+        letterSpacing: 2,
+        textTransform: "uppercase",
+        textShadowColor: "rgba(0,0,0,0.9)",
+        textShadowOffset: { width: 2, height: 2 },
+        textShadowRadius: 6,
+    },
     info: { padding: spacing.m, borderTopWidth: 1 },
     name: {
         fontSize: fontSize.lg,

mobile/src/screens/client/ProductDetailScreen.tsx

@@ -209,6 +209,32 @@ export default function ProductDetailScreen() {
                     textShadowOffset: { width: 2, height: 2 },
                     textShadowRadius: 12,
                 },
+                comingSoonBadge: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: [
+                        { translateX: -80 },
+                        { translateY: -30 },
+                        { rotate: "-15deg" },
+                    ],
+                    backgroundColor: "rgba(245,158,11,0.95)",
+                    borderWidth: 4,
+                    borderColor: colors.white,
+                    paddingHorizontal: 40,
+                    paddingVertical: 16,
+                    elevation: 10,
+                },
+                comingSoonText: {
+                    color: colors.white,
+                    fontSize: 28,
+                    fontWeight: "900",
+                    letterSpacing: 4,
+                    textTransform: "uppercase",
+                    textShadowColor: "rgba(0,0,0,0.9)",
+                    textShadowOffset: { width: 2, height: 2 },
+                    textShadowRadius: 12,
+                },
                 videoBtn: {
                     position: "absolute",
                     top: 16,
@@ -470,6 +496,7 @@ export default function ProductDetailScreen() {
     }
 
     const isOutOfStock = product.stock === 0;
+    const isComingSoon = product.coming_soon === true;
     const hasValidPrices = product.prices && product.prices.length > 0;
     const imageMedia = product.media?.find((m) => m.type === "image");
     const videoMedia = product.media?.find((m) => m.type === "video");
@@ -517,6 +544,11 @@ export default function ProductDetailScreen() {
                             <Text style={styles.soldOutText}>SOLD OUT</Text>
                         </View>
                     )}
+                    {isComingSoon && !isOutOfStock && (
+                        <View style={styles.comingSoonBadge}>
+                            <Text style={styles.comingSoonText}>À VENIR</Text>
+                        </View>
+                    )}
                     {videoUri && !isOutOfStock && (
                         <TouchableOpacity
                             style={[