69 lines
No EOL
2.1 KiB
TypeScript
69 lines
No EOL
2.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
|
import { tw, MyText, MyTouchableOpacity } from "common-ui";
|
|
|
|
interface FlashDeliveryNoteProps {
|
|
onClose?: () => void;
|
|
autoHide?: boolean;
|
|
autoHideDelay?: number;
|
|
}
|
|
|
|
const FlashDeliveryNote: React.FC<FlashDeliveryNoteProps> = ({
|
|
onClose,
|
|
autoHide = true,
|
|
autoHideDelay = 10000, // 10 seconds
|
|
}) => {
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!autoHide || !isVisible) return;
|
|
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(false);
|
|
}, autoHideDelay);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [autoHide, autoHideDelay, isVisible]);
|
|
|
|
const handleDismiss = () => {
|
|
setIsVisible(false);
|
|
onClose?.();
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<View
|
|
style={tw`mx-4 mt-4 mb-2 bg-amber-50 border border-amber-200 rounded-2xl shadow-sm overflow-hidden`}
|
|
>
|
|
<View style={tw`p-4`}>
|
|
<View style={tw`flex-row items-start justify-between`}>
|
|
<View style={tw`flex-row items-start flex-1`}>
|
|
<View style={tw`w-8 h-8 bg-amber-100 rounded-full items-center justify-center mr-3 mt-0.5`}>
|
|
<MaterialIcons name="bolt" size={18} color="#D97706" />
|
|
</View>
|
|
<View style={tw`flex-1`}>
|
|
<MyText style={tw`text-amber-900 font-bold text-sm mb-1`}>
|
|
Flash Delivery Notice
|
|
</MyText>
|
|
<MyText style={tw`text-amber-800 text-sm leading-5`}>
|
|
Prices may differ for Flash Delivery and not all products are available for flash delivery
|
|
</MyText>
|
|
</View>
|
|
</View>
|
|
|
|
<MyTouchableOpacity
|
|
onPress={handleDismiss}
|
|
style={tw`w-8 h-8 rounded-full bg-amber-100 items-center justify-center ml-2`}
|
|
activeOpacity={0.7}
|
|
>
|
|
<MaterialIcons name="close" size={16} color="#D97706" />
|
|
</MyTouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default FlashDeliveryNote; |