70 lines
3.9 KiB
JavaScript
70 lines
3.9 KiB
JavaScript
import * as React from 'react';
|
|
import {useState, setState} from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image } from 'react-native';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Elements from '../../components/elements.js';
|
|
import {Icon} from 'react-native-elements';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
const LoyaltyCardDetails = (navigation) => {
|
|
|
|
const [drop1, setdrop1] = useState(false)
|
|
const [drop2, setdrop2] = useState(false)
|
|
const card = navigation.route.params
|
|
|
|
const renderDetails = () => {
|
|
return (
|
|
<View>
|
|
<View style={{flex: 0, marginTop: 5}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop1(!drop1)}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Terms & Conditions</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon color={navigation.app_theme?.theme.colors.text} name={ drop1 ? "expand-more" : "chevron-right"} color={navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : "gray"} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{drop1 ? <Text style={{fontSize: 16, height: '30%', width: '100%', marginTop: 15, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{card.terms_and_conditions}</Text> : null}
|
|
</View>
|
|
|
|
<View style={{flex: 0, marginTop: 15}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop2(!drop2)}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>FAQs</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={ drop2 ? "expand-more" : "chevron-right"} color={navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : "gray"} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{card.faqs}</Text> : null}
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title={card.name} navigation={navigation} onBackPress={() => navigation.navigation.goBack()} back={true} />
|
|
<View style={{flex: 1, width: '100%', padding: 15}}>
|
|
<Image source={{uri: card.image}} style={{width: '100%', height: Theme.screen.h / 3 - 25, borderRadius: 10, resizeMode: 'stretch'}} />
|
|
<ScrollView style={{marginTop: 10}}>
|
|
<Text style={{marginTop: 20, fontSize: 16, fontFamily: 'Arial', fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.darkGray}}>{card.name}</Text>
|
|
<Text style={{marginTop: 15, fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
|
|
{card.description}
|
|
</Text>
|
|
{renderDetails()}
|
|
</ScrollView>
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(LoyaltyCardDetails) |