before merge
This commit is contained in:
Abin Toppo
@@ -0,0 +1,201 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { View, Text, Modal, ScrollView, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
|
||||
import { CheckCircle, X } from 'lucide-react-native'; // Updated icons
|
||||
import colors from '../../Constant/Color';
|
||||
type ModalProps = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onChecked: () => void
|
||||
}
|
||||
|
||||
const TermsAndConditionsModal: React.FC<ModalProps> = ({ visible, onClose, onChecked }) => {
|
||||
return (
|
||||
<Modal
|
||||
animationType="slide"
|
||||
transparent={false}
|
||||
visible={visible}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Terms & Conditions</Text>
|
||||
<Text style={styles.subtitle}>Last updated: {new Date().toLocaleDateString()}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
<Section title="1. Acceptance of Terms">
|
||||
<Text style={styles.paragraph}>
|
||||
By accessing or using our services, you agree to be bound by these Terms and Conditions.
|
||||
If you do not agree with any part of these terms, you must not use our services.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="2. User Responsibilities">
|
||||
<Text style={styles.paragraph}>
|
||||
You are responsible for maintaining the confidentiality of your account information and
|
||||
for all activities that occur under your account. You agree to notify us immediately
|
||||
of any unauthorized use of your account.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="3. Intellectual Property">
|
||||
<Text style={styles.paragraph}>
|
||||
All content included on our platform, such as text, graphics, logos, and software, is
|
||||
the property of our company and protected by intellectual property laws. You may not
|
||||
reproduce, distribute, or create derivative works without our express permission.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="4. Limitation of Liability">
|
||||
<Text style={styles.paragraph}>
|
||||
Our company shall not be liable for any indirect, incidental, special, or consequential
|
||||
damages resulting from the use or inability to use our services, even if we have been
|
||||
advised of the possibility of such damages.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="5. Privacy Policy">
|
||||
<Text style={styles.paragraph}>
|
||||
Your use of our services is also governed by our Privacy Policy, which explains how we
|
||||
collect, use, and protect your personal information. Please review our Privacy Policy
|
||||
to understand our practices.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="6. Changes to Terms">
|
||||
<Text style={styles.paragraph}>
|
||||
We reserve the right to modify these terms at any time. We will notify you of any changes
|
||||
by posting the new Terms and Conditions on this page. Your continued use of the service
|
||||
after such modifications constitutes your acceptance of the new terms.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="7. Governing Law">
|
||||
<Text style={styles.paragraph}>
|
||||
These Terms shall be governed by and construed in accordance with the laws of the
|
||||
jurisdiction in which our company is registered, without regard to its conflict of law provisions.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Text style={styles.footerText}>
|
||||
If you have any questions about these Terms, please contact us at legal@company.com.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Accept Button */}
|
||||
<TouchableOpacity
|
||||
style={styles.acceptButton}
|
||||
onPress={() => {
|
||||
onClose();
|
||||
onChecked();
|
||||
}}
|
||||
>
|
||||
<CheckCircle color={colors.white} size={28} />
|
||||
<Text style={styles.acceptButtonText}>I Accept</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// Reusable Section component
|
||||
type SectionProps = {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const Section: React.FC<SectionProps> = ({ title, children }) => (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.lightGray, // Updated with your colors
|
||||
},
|
||||
scrollContainer: {
|
||||
paddingBottom: 120, // Space for accept button
|
||||
flexGrow: 1,
|
||||
},
|
||||
header: {
|
||||
backgroundColor: colors.primary, // Orange header
|
||||
paddingVertical: 32,
|
||||
paddingHorizontal: 24,
|
||||
borderBottomLeftRadius: 24,
|
||||
borderBottomRightRadius: 24,
|
||||
marginBottom: 24,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: colors.white,
|
||||
marginBottom: 4,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
section: {
|
||||
marginBottom: 28,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: colors.darkText,
|
||||
marginBottom: 12,
|
||||
},
|
||||
paragraph: {
|
||||
fontSize: 16,
|
||||
lineHeight: 25,
|
||||
color: colors.grayText,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 15,
|
||||
fontStyle: 'italic',
|
||||
color: colors.lightText,
|
||||
marginTop: 24,
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
},
|
||||
acceptButton: {
|
||||
position: 'absolute',
|
||||
bottom: 40,
|
||||
left: 24,
|
||||
right: 24,
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 18,
|
||||
paddingHorizontal: 20,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.35,
|
||||
shadowRadius: 16,
|
||||
elevation: 12,
|
||||
},
|
||||
acceptButtonText: {
|
||||
color: colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
marginLeft: 12,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
export default TermsAndConditionsModal;
|
||||
Reference in New Issue
Block a user