related-ui-components 1.6.2 → 1.6.3

package/src/app.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   FlatList,
   Alert,
+  Modal, // Import Modal
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { RelatedProvider, useTheme } from "./theme";
@@ -15,212 +16,91 @@ import {
   Filters,
   Popup,
   RedemptionOption,
-  ScratchCard,
+  ScratchCard, // Your component
   ScratchCardContent,
   UnlockRewards,
 } from "./components";
 import { SafeAreaView } from "react-native-safe-area-context";
-import SelectAmount from "./components/SelectAmount/SelectAmount";
-import Slider from "@react-native-community/slider";
-import SummaryBar from "./components/TravelBooking/SummaryBar";
-import NumericStepper from "./components/NumericStepper/NumericStepper";
-import FlightSummaryBar from "./components/TravelBooking/FlightSummary";
-import HotelSummaryBar from "./components/TravelBooking/HotelSummary";
-import TabSelector from "./components/TravelBooking/TabSelector";
-import FlightForm from "./components/TravelBooking/FlightForm";
-import DateRangePicker from "./components/DateRangePicker/DateRangePicker";
-import HotelForm from "./components/TravelBooking/HotelForm";
-import CarRentalForm from "./components/TravelBooking/CarRentalForm";
-import TravelBooking from "./components/TravelBooking/TravelBooking";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-// import BRANDS from "./constants/BRANDS";
+// ... other imports
+import { GestureHandlerRootView } from "react-native-gesture-handler"; // Ensure import
 
 export default function App() {
   const { theme } = useTheme();
-  const [filtersVisible, setFiltersVisible] = useState(false);
-  const [mode, setMode] = useState<"flight" | "hotel">("flight");
+  // ... other state and constants
 
-  // Define some sort options for the filter
-  const sortOptions = [
-    { id: 1, name: "Price: Low to High", value: "price_asc" },
-    { id: 2, name: "Price: High to Low", value: "price_desc" },
-    { id: 3, name: "Newest", value: "newest" },
-  ];
-
-  const iconSize = 24;
-  const iconColor = theme.onSurface;
-
-  const redemptionOption = [
-    {
-      icon: (
-        <Ionicons name="bag-handle-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.onlineShopping", // Use translation key
-      orientation: "horizontal",
-      width: 150,
-    },
-    {
-      icon: (
-        <Ionicons name="ticket-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.eVouchers", // Use translation key
-      width: 105,
-    },
-    {
-      icon: <Ionicons name="cash-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.cashback", // Use translation key
-      width: 105,
-    },
-    {
-      icon: <Ionicons name="heart-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.donate", // Use translation key
-      width: 87,
-    },
-    {
-      icon: (
-        <Ionicons name="airplane-outline" size={iconSize} color={iconColor} />
-      ),
-      key: "redemptionOptions.travel", // Use translation key
-      width: 87,
-    },
-    {
-      icon: (
-        <Ionicons
-          name="swap-horizontal-outline"
-          size={iconSize}
-          color={iconColor}
-        />
-      ),
-      key: "redemptionOptions.pointsExchange", // Use translation key
-      width: 87,
-    },
-    {
-      icon: <Ionicons name="send-outline" size={iconSize} color={iconColor} />,
-      key: "redemptionOptions.transferPoints", // Use translation key
-      width: 87,
-    },
-  ];
-
-  const redemptionOptions = redemptionOption.map((item) => ({
-    ...item,
-    text: "Online shopping",
-  }));
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const rewardsData = [
-    {
-      icon: <Ionicons name="water-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="water" size={24} color={theme.primary} />,
-      title: "Aqua Guardian",
-      description:
-        "Maintain water usage below the community average for a month.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="build-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="build" size={24} color={theme.secondary} />,
-      title: "Leak Detective",
-      description: "Successfully report and fix a water leak on your property.",
-      isActive: true,
-      status: "1/1",
-      statusBackgroundColor: theme.primary,
-      statusTextColor: theme.secondary,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
-      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
-      title: "Eco-Warrior",
-      description:
-        "Implement a rainwater harvesting system or greywater recycling.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-  ];
+  // State to control modal visibility
+  const [isScratchModalVisible, setScratchModalVisible] = useState(false); // Example state
 
   return (
-    <GestureHandlerRootView>
+    // Root view for the main app
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <RelatedProvider>
         <SafeAreaView
-          style={{ padding: 10, flex: 1, backgroundColor: theme.background }}
+          style={{ flex: 1, padding: 10, backgroundColor: theme.background }}
         >
-          <ScratchCard 
-  backgroundColor="#8A2BE2"
-  text="Scratch to reveal your prize!"
-  textFontColor="#FFFFFF"
-  textFontSize={18}
-  width={300}
-  height={150}
-  // onScratched={() => alert("Congratulations! You won a prize!")}
->
-  <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
-    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
-      50% OFF COUPON
-    </Text>
-    <Text style={{ marginTop: 8, color: "#333" }}>
-      Use code: SCRATCH50
-    </Text>
-  </ScratchCardContent>
-</ScratchCard>
-    {/* <UnlockRewards
-      title="Your Rewards"
-      description="Complete tasks to unlock special benefits"
-      rewards={rewardsData}
-      // onClose={handleClose}
-      showCloseIcon={true}
-      closeIconVariant="nested"
-      topBackgroundHeight={200}
-      customCloseIcon={<Ionicons name="close-circle" size={28} color={theme.primary} />}
-    /> */}
-    {/* <Popup title="TEST" content="TEST" visible onClose={()=>{}} backgroundImage={require("@/assets/images/namshi-banner.png")} containerStyle={{height: 300}}></Popup> */}
+          {/* Example Button to open the modal */}
+          <TouchableOpacity
+            onPress={() => setScratchModalVisible(true)}
+            style={styles.testButton}
+          >
+            <Text style={styles.buttonText}>Show Scratch Card Modal</Text>
+          </TouchableOpacity>
+
+          {/* --- The Modal --- */}
+          <Modal
+            visible={isScratchModalVisible}
+            onRequestClose={() => setScratchModalVisible(false)} // Allow closing
+            transparent={true} // Example: make it transparent
+            animationType="slide" // Example animation
+          >
+            {/* Root view specifically for the modal's content */}
+            <GestureHandlerRootView style={styles.modalRootView}>
+              {/* Optional: Add a background overlay */}
+              <View style={styles.modalOverlay}>
+                {/* Center the card or position as needed */}
+                <View style={styles.modalContentContainer}>
+                  <ScratchCard
+                    backgroundColor="#8A2BE2"
+                    text="Scratch to reveal your prize!"
+                    textFontColor="#FFFFFF"
+                    textFontSize={18}
+                    width={300}
+                    height={150}
+                    onScratched={() => {
+                      Alert.alert("Congratulations!", "You won a prize!");
+                      // Optionally close modal after scratching
+                      // setTimeout(() => setScratchModalVisible(false), 500);
+                    }}
+                  >
+                    <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
+                      <Text
+                        style={{
+                          fontSize: 24,
+                          fontWeight: "bold",
+                          color: "#000",
+                        }}
+                      >
+                        50% OFF COUPON
+                      </Text>
+                      <Text style={{ marginTop: 8, color: "#333" }}>
+                        Use code: SCRATCH50
+                      </Text>
+                    </ScratchCardContent>
+                  </ScratchCard>
+
+                  {/* Button to close the modal */}
+                  <TouchableOpacity
+                    onPress={() => setScratchModalVisible(false)}
+                    style={styles.closeButton}
+                  >
+                    <Text style={styles.buttonText}>Close</Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+            </GestureHandlerRootView>
+          </Modal>
+
+          {/* Other app content can go here */}
         </SafeAreaView>
       </RelatedProvider>
     </GestureHandlerRootView>
@@ -228,17 +108,14 @@ export default function App() {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "black",
-    padding: 10,
-  },
+  // ... your existing styles
   testButton: {
     backgroundColor: "#4a90e2",
     paddingVertical: 12,
     paddingHorizontal: 30,
     borderRadius: 8,
     marginBottom: 20,
+    alignSelf: "center",
   },
   buttonText: {
     color: "#FFFFFF",
@@ -246,4 +123,28 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     textAlign: "center",
   },
+  // Styles for the Modal
+  modalRootView: {
+    flex: 1, // Important for the root view to take up space
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
+    justifyContent: "center", // Center content vertically
+    alignItems: "center", // Center content horizontally
+  },
+  modalContentContainer: {
+    // Optional: Add padding or background to the content area if needed
+    // backgroundColor: 'white',
+    // padding: 20,
+    // borderRadius: 10,
+    alignItems: "center", // Center items like the close button
+  },
+  closeButton: {
+    marginTop: 20,
+    backgroundColor: "#d9534f",
+    paddingVertical: 10,
+    paddingHorizontal: 25,
+    borderRadius: 8,
+  },
 });