152 lines
3.7 KiB
TypeScript
152 lines
3.7 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Pressable,
|
|
Linking,
|
|
Modal,
|
|
} from "react-native";
|
|
import WhatsappIcon from "../../assets/icons/whatsapp.svg";
|
|
import CallIcon from "../../assets/icons/call.svg";
|
|
import EmailIcon from "../../assets/icons/mail.svg";
|
|
import CloseIcon from "../../assets/icons/close.svg";
|
|
|
|
import { SUPPORT } from "@/constants/config";
|
|
import { StatusBar } from "expo-status-bar";
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const CustomerSupportModal: React.FC<Props> = ({ visible, onClose }) => {
|
|
const openWhatsApp = async () => {
|
|
const url = `https://wa.me/${
|
|
SUPPORT.WHATSAPP_NUMBER
|
|
}?text=${encodeURIComponent(SUPPORT.WHATSAPP_PLACEHOLDER)}`;
|
|
|
|
Linking.openURL(url).catch((err) =>
|
|
console.log("Failed to open WhatsApp:", err)
|
|
);
|
|
};
|
|
|
|
const makePhoneCall = () => {
|
|
Linking.openURL(`tel:${SUPPORT.PHONE}`);
|
|
};
|
|
|
|
const sendEmail = () => {
|
|
const url = `mailto:${SUPPORT.EMAIL}?subject=${encodeURIComponent(
|
|
SUPPORT.EMAIL_SUBJECT
|
|
)}&body=${encodeURIComponent(SUPPORT.EMAIL_BODY)}`;
|
|
Linking.openURL(url);
|
|
};
|
|
|
|
return (
|
|
<Modal visible={visible} animationType="fade" transparent>
|
|
<StatusBar style="dark" />
|
|
<View style={styles.overlay}>
|
|
<View style={styles.modalContainer}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerText}>Customer Support</Text>
|
|
<Pressable onPress={onClose} style={styles.iconButton}>
|
|
<CloseIcon />
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* Buttons */}
|
|
<View style={styles.content}>
|
|
<View style={styles.row}>
|
|
<Pressable style={styles.secondaryButton} onPress={openWhatsApp}>
|
|
<WhatsappIcon />
|
|
<Text style={styles.buttonText}>Whatsapp</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.secondaryButton} onPress={makePhoneCall}>
|
|
<CallIcon />
|
|
<Text style={styles.buttonText}>Call Us</Text>
|
|
</Pressable>
|
|
</View>
|
|
<Pressable
|
|
style={[styles.secondaryButton, styles.fullButton]}
|
|
onPress={sendEmail}
|
|
>
|
|
<EmailIcon />
|
|
<Text style={styles.buttonText}>Email</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default CustomerSupportModal;
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
flex: 1,
|
|
justifyContent: "flex-end",
|
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
},
|
|
modalContainer: {
|
|
backgroundColor: "#fff",
|
|
borderTopLeftRadius: 12,
|
|
borderTopRightRadius: 12,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
},
|
|
header: {
|
|
height: 56,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#E5E9F0",
|
|
paddingHorizontal: 16,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
headerText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#252A34",
|
|
},
|
|
iconButton: {
|
|
width: 40,
|
|
height: 40,
|
|
padding: 10,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
content: {
|
|
paddingVertical: 16,
|
|
gap: 16,
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
gap: 16,
|
|
justifyContent: "space-between",
|
|
},
|
|
secondaryButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
height: 40,
|
|
borderRadius: 4,
|
|
backgroundColor: "#F3F5F8",
|
|
borderWidth: 1,
|
|
borderColor: "#D8DDE7",
|
|
width: 156,
|
|
gap: 8,
|
|
},
|
|
fullButton: {
|
|
width: "100%",
|
|
},
|
|
buttonText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
color: "#252A34",
|
|
},
|
|
});
|