related-ui-components 2.0.2 → 2.0.3

package/src/components/Card/templates/SelaDealCard.tsx

@@ -1,286 +1,266 @@
 // src/components/SelaDealCard/SelaDealCard.tsx
 import React from "react";
 import {
-  ImageSourcePropType,
-  StyleProp,
-  ViewStyle,
-  View,
-  Text,
-  TextStyle,
-  DimensionValue,
-  StyleSheet,
+    ImageSourcePropType,
+    StyleProp,
+    ViewStyle,
+    View,
+    Text,
+    TextStyle,
+    DimensionValue,
+    StyleSheet,
 } from "react-native";
 import Card from "../Card"; // Adjust path to your Card component
 import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
+import { ThemeType } from "../../../theme";
+import { LockOverlay } from "../../LockOverlay";
 
 interface SelaDealCardProps {
-  variant: "horizontal" | "vertical";
-  backgroundImage: ImageSourcePropType;
-  label?: string;
-  labelStyle?: StyleProp<TextStyle>;
-  labelContainerStyle?: StyleProp<ViewStyle>;
-  providerName?: string;
-  providerNameStyle?: StyleProp<TextStyle>;
-  description?: string;
-  descriptionStyle?: StyleProp<TextStyle>;
-  price?: string;
-  priceStyle?: StyleProp<TextStyle>;
-  priceContainerStyle?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>; // Overall card style
-  width?: DimensionValue;
-  height?: DimensionValue;
-  isRTL?: boolean;
-  borderRadius?: number;
-  contentColor?: string; // For text like providerName, description on the image
-  labelBackgroundColor?: string;
-  labelTextColor?: string;
-  priceBackgroundColor?: string;
-  priceTextColor?: string;
+    variant: "horizontal" | "vertical";
+    backgroundImage: ImageSourcePropType;
+    label?: string;
+    labelStyle?: StyleProp<TextStyle>;
+    labelContainerStyle?: StyleProp<ViewStyle>;
+    providerName?: string;
+    providerNameStyle?: StyleProp<TextStyle>;
+    description?: string;
+    descriptionStyle?: StyleProp<TextStyle>;
+    price?: string;
+    priceStyle?: StyleProp<TextStyle>;
+    priceContainerStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>; // Overall card style
+    width?: DimensionValue;
+    height?: DimensionValue;
+    isRTL?: boolean;
+    borderRadius?: number;
+    contentColor?: string; // For text like providerName, description on the image
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    priceBackgroundColor?: string;
+    priceTextColor?: string;
+    darkOverlayEnabled?: boolean; // New prop
+    darkOverlayColor?: string; // New prop for custom overlay color
+    lockOverlay?: boolean
 }
 
 const SelaDealCard: React.FC<SelaDealCardProps> = ({
-  variant,
-  backgroundImage,
-  label,
-  labelStyle,
-  labelContainerStyle,
-  providerName,
-  providerNameStyle,
-  description,
-  descriptionStyle,
-  price,
-  priceStyle,
-  priceContainerStyle,
-  onPress,
-  style,
-  width = "100%",
-  height = variant === "horizontal" ? 180 : 280, // Different default heights
-  isRTL: propIsRTL,
-  borderRadius = 12, // Default based on images
-  contentColor,
-  labelBackgroundColor,
-  labelTextColor,
-  priceBackgroundColor,
-  priceTextColor,
+    variant,
+    backgroundImage,
+    label,
+    labelStyle,
+    labelContainerStyle,
+    providerName,
+    providerNameStyle,
+    description,
+    descriptionStyle,
+    price,
+    priceStyle,
+    priceContainerStyle,
+    onPress,
+    style,
+    width = "100%",
+    height = variant === "horizontal" ? 180 : 280, // Different default heights
+    isRTL: propIsRTL,
+    borderRadius = 12, // Default based on images
+    darkOverlayEnabled = true,
+    darkOverlayColor = "rgba(0, 0, 0, 0.3)",
+    lockOverlay = false
 }) => {
-  const { theme, isRTL: themeIsRTL } = useTheme();
-  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+    const { theme, isRTL: themeIsRTL } = useTheme();
+    const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
 
-  // Default color for text directly on the image (e.g., provider name, description)
-  // Provider name in images is often yellow, description white.
-  // Consumers can override with providerNameStyle/descriptionStyle.
-  const mainImageTextColor = contentColor || "#FFFFFF"; // Default to white
+    const styles = getStyles(theme, isRTL);
 
-  // --- Label Styles ---
-  // Image 1 (Horizontal "Offer"): White background, dark text.
-  // Image 2 (Vertical "Booking"): Appears to be a light text on image, no distinct bg.
-  // For consistency, let's assume label has a background.
-  const actualLabelBgColor = labelBackgroundColor || theme.surface;
-  const actualLabelTxtColor = labelTextColor || theme.onSurface;
+    const finalLabelContainerStyle: StyleProp<ViewStyle> = [
+        styles.labelContainerBase,
+        labelContainerStyle,
+    ];
+    const finalLabelStyle: StyleProp<TextStyle> = [
+        styles.labelTextBase,
+        labelStyle,
+    ];
 
-  const finalLabelContainerStyle: StyleProp<ViewStyle> = [
-    styles.labelContainerBase,
-    { backgroundColor: actualLabelBgColor },
-    labelContainerStyle,
-  ];
-  const finalLabelStyle: StyleProp<TextStyle> = [
-    styles.labelTextBase,
-    { color: actualLabelTxtColor },
-    labelStyle,
-  ];
+    const finalPriceContainerStyle: StyleProp<ViewStyle> = [
+        styles.priceContainerBase,
+        variant === "horizontal"
+            ? styles.priceContainerHorizontal
+            : styles.priceContainerVertical,
+        priceContainerStyle,
+    ];
+    const finalPriceStyle: StyleProp<TextStyle> = [
+        styles.priceTextBase,
+        priceStyle,
+    ];
 
-  // --- Price Container Styles ---
-  // Horizontal (Image 1): Bright cyan/teal background, dark text.
-  const defaultHorizontalPriceBg = priceBackgroundColor || "#17D4C6";
-  const defaultHorizontalPriceText = priceTextColor || "#000000";
-  // Vertical (Image 2): Semi-transparent dark background, white text.
-  const defaultVerticalPriceBg =
-    priceBackgroundColor || "rgba(0, 0, 0, 0.5)";
-  const defaultVerticalPriceText = priceTextColor || "#FFFFFF";
+    const providerTextStyle: StyleProp<TextStyle> = [
+        styles.providerNameBase,
+        { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
+        providerNameStyle,
+    ];
 
-  const actualPriceBgColor =
-    variant === "horizontal"
-      ? defaultHorizontalPriceBg
-      : defaultVerticalPriceBg;
-  const actualPriceTxtColor =
-    variant === "horizontal"
-      ? defaultHorizontalPriceText
-      : defaultVerticalPriceText;
-
-  const finalPriceContainerStyle: StyleProp<ViewStyle> = [
-    styles.priceContainerBase,
-    { backgroundColor: actualPriceBgColor },
-    variant === "horizontal"
-      ? styles.priceContainerHorizontal
-      : styles.priceContainerVertical,
-    priceContainerStyle,
-  ];
-  const finalPriceStyle: StyleProp<TextStyle> = [
-    styles.priceTextBase,
-    { color: actualPriceTxtColor },
-    priceStyle,
-  ];
+    const descriptionTextStyle: StyleProp<TextStyle> = [
+        styles.descriptionBase,
+        { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
+        descriptionStyle,
+    ];
 
-  // --- Text Styles for Content on Image ---
-  const providerTextStyle: StyleProp<TextStyle> = [
-    styles.providerNameBase,
-    // In images, provider name is often yellow. This can be set via providerNameStyle.
-    { color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
-    providerNameStyle,
-  ];
+    return (
+        <Card
+            onPress={onPress}
+            style={[styles.cardBase, { borderRadius, width, height }, style]}
+            backgroundImage={{
+                source: backgroundImage,
+                resizeMode: "cover",
+            }}
+        >
+            {darkOverlayEnabled && (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        { backgroundColor: darkOverlayColor },
+                        { borderRadius: borderRadius }
+                    ]}
+                />
+            )}
 
-  const descriptionTextStyle: StyleProp<TextStyle> = [
-    styles.descriptionBase,
-    { color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
-    descriptionStyle,
-  ];
+            <LockOverlay
+                visible={lockOverlay}
+                contentPosition={variant == "horizontal" ? 
+                    isRTL ? "top-left" : "top-right" : 
+                    isRTL ? "top-right" : "top-left"
+                }
+                iconSize={24}
+                text={""}
+                overlayOpacity={0.4}
+            />
 
-  return (
-    <Card
-      onPress={onPress}
-      style={[styles.cardBase, { borderRadius, width, height }, style]}
-      backgroundImage={{
-        source: backgroundImage,
-        resizeMode: "cover",
-      }}
-    >
-      <View style={styles.overlayContainer}>
-        {/* Top Section (for Label) */}
-        <View
-          style={[
-            styles.topSection,
-            // Horizontal: LTR=left, RTL=right
-            // Vertical: LTR=right, RTL=left
-            {
-              alignItems:
-                variant === "horizontal"
-                  ? isRTL
-                    ? "flex-end"
-                    : "flex-start"
-                  : isRTL
-                  ? "flex-start"
-                  : "flex-end",
-            },
-          ]}
-        >
-          {label && (
-            <View style={finalLabelContainerStyle}>
-              <Text style={finalLabelStyle}>{label}</Text>
-            </View>
-          )}
-        </View>
+            <View style={styles.overlayContainer}>
+                <View
+                    style={[
+                        styles.topSection,
+                        {
+                            alignItems:
+                                variant === "horizontal"
+                                    ? isRTL
+                                        ? "flex-end"
+                                        : "flex-start"
+                                    : isRTL
+                                        ? "flex-start"
+                                        : "flex-end",
+                        },
+                    ]}
+                >
+                    {label && (
+                        <View style={finalLabelContainerStyle}>
+                            <Text style={finalLabelStyle}>{label}</Text>
+                        </View>
+                    )}
+                </View>
 
-        {/* Bottom Section (Provider, Description, Price) */}
-        {variant === "horizontal" ? (
-          <View style={styles.bottomContentHorizontal}>
-            <View style={styles.textBlockHorizontal}>
-              {providerName && (
-                <Text style={providerTextStyle}>{providerName}</Text>
-              )}
-              {description && (
-                <Text style={descriptionTextStyle}>{description}</Text>
-              )}
+                {variant === "horizontal" ? (
+                    <View style={styles.bottomContentHorizontal}>
+                        <View style={styles.textBlockHorizontal}>
+                            {providerName && (
+                                <Text style={providerTextStyle}>{providerName}</Text>
+                            )}
+                            {description && (
+                                <Text style={descriptionTextStyle}>{description}</Text>
+                            )}
+                        </View>
+                        {price && (
+                            <View style={finalPriceContainerStyle}>
+                                <Text style={finalPriceStyle}>{price}</Text>
+                            </View>
+                        )}
+                    </View>
+                ) : (
+                    <View style={styles.bottomContentVertical}>
+                        <View style={styles.textBlockVertical}>
+                            {providerName && (
+                                <Text style={providerTextStyle}>{providerName}</Text>
+                            )}
+                            {description && (
+                                <Text style={descriptionTextStyle}>{description}</Text>
+                            )}
+                        </View>
+                        {price && (
+                            <View style={finalPriceContainerStyle}>
+                                <Text style={finalPriceStyle}>{price}</Text>
+                            </View>
+                        )}
+                    </View>
+                )}
             </View>
-            {price && (
-              <View style={finalPriceContainerStyle}>
-                <Text style={finalPriceStyle}>{price}</Text>
-              </View>
-            )}
-          </View>
-        ) : (
-          // Vertical Variant
-          <View style={styles.bottomContentVertical}>
-            <View style={styles.textBlockVertical}>
-              {providerName && (
-                <Text style={providerTextStyle}>{providerName}</Text>
-              )}
-              {description && (
-                <Text style={descriptionTextStyle}>{description}</Text>
-              )}
-            </View>
-            {price && (
-              <View style={finalPriceContainerStyle}>
-                <Text style={finalPriceStyle}>{price}</Text>
-              </View>
-            )}
-          </View>
-        )}
-      </View>
-    </Card>
-  );
+        </Card>
+    );
 };
 
-const styles = StyleSheet.create({
-  cardBase: {
-    overflow: "hidden", // Ensures content respects borderRadius
-    position: "relative",
-  },
-  overlayContainer: {
-    flex: 1,
-    padding: 16, // General padding for content from edges
-    justifyContent: "space-between", // Pushes top and bottom sections apart
-    // Optional: Add a LinearGradient here for a scrim if text readability is an issue
-  },
-  topSection: {
-    // This view ensures the label is positioned correctly (start/end)
-    // It will be at the top due to justifyContent: 'space-between' on overlayContainer
-  },
-  labelContainerBase: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderRadius: 16, // Pill shape
-    // alignSelf is determined by parent's alignItems in topSection
-  },
-  labelTextBase: {
-    fontWeight: "600",
-    fontSize: 13,
-  },
-  providerNameBase: {
-    // Example: Yellow text in images "Altanfeethi", "Riva Jeddah Yacht Club"
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 2, // Space between provider name and description
-  },
-  descriptionBase: {
-    // Example: White text in images "1 Year Membership", "2 hours Boat Trip"
-    fontSize: 14,
-  },
-  priceContainerBase: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 10, // Rounded corners for the price box
-  },
-  priceTextBase: {
-    fontWeight: "bold",
-    fontSize: 16,
-  },
-  // --- Horizontal Variant Layout ---
-  bottomContentHorizontal: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "flex-end", // Aligns text block and price box to their bottom
-  },
-  textBlockHorizontal: {
-    flex: 1, // Allows text to take available space, pushing price to the side
-    marginRight: 10, // Space between text content and price box
-  },
-  priceContainerHorizontal: {
-    // Specific styling for horizontal price box if needed (e.g., fixed width)
-    // Default is to wrap content.
-  },
-  // --- Vertical Variant Layout ---
-  bottomContentVertical: {
-    flexDirection: "column", // Stacks text block and price box vertically
-  },
-  textBlockVertical: {
-    marginBottom: 12, // Space between text content and price box
-    // Text inside will align start/end based on isRTL and individual text styles
-  },
-  priceContainerVertical: {
-    alignSelf: "stretch", // Makes the price box take the full width
-    alignItems: "center", // Centers the price text within the wide box
-  },
+const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
+    cardBase: {
+        overflow: "hidden",
+        position: "relative",
+    },
+    overlayContainer: {
+        flex: 1,
+        padding: 16,
+        justifyContent: "space-between",
+    },
+    topSection: {
+    },
+    labelContainerBase: {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        backgroundColor: theme.background
+    },
+    labelTextBase: {
+        fontWeight: "600",
+        fontSize: 13,
+        color: theme.onBackground
+    },
+    providerNameBase: {
+        fontSize: 20,
+        fontWeight: "bold",
+        marginBottom: 2,
+        color: theme.secondary
+    },
+    descriptionBase: {
+        fontSize: 14,
+        color: theme.helper
+    },
+    priceContainerBase: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        backgroundColor: theme.primary
+    },
+    priceTextBase: {
+        fontWeight: "bold",
+        fontSize: 16,
+        color: theme.onPrimary
+    },
+    bottomContentHorizontal: {
+        flexDirection: isRTL ? "row-reverse" : "row",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+    },
+    textBlockHorizontal: {
+        flex: 1,
+        marginRight: 10,
+    },
+    priceContainerHorizontal: {
+    },
+    bottomContentVertical: {
+        flexDirection: "column",
+    },
+    textBlockVertical: {
+        marginBottom: 12,
+    },
+    priceContainerVertical: {
+        alignSelf: "stretch",
+        alignItems: "center",
+    },
 });
 
 export default SelaDealCard;