140 lines
4.1 KiB
TypeScript
140 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import { View, Text, ScrollView, Share } from "react-native";
|
|
import { Button } from "~/components/ui/button";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { router, useLocalSearchParams } from "expo-router";
|
|
import { ROUTES } from "~/lib/routes";
|
|
import { SuccessIconNewCard } from "~/components/ui/icons";
|
|
import ScreenWrapper from "~/components/ui/ScreenWrapper";
|
|
import ModalToast from "~/components/ui/toast";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function CardAddedComp() {
|
|
const params = useLocalSearchParams<{
|
|
message?: string;
|
|
cardName?: string;
|
|
cardNumber?: string;
|
|
}>();
|
|
const { t } = useTranslation();
|
|
|
|
const [toastVisible, setToastVisible] = React.useState(false);
|
|
const [toastTitle, setToastTitle] = React.useState("");
|
|
const [toastDescription, setToastDescription] = React.useState<
|
|
string | undefined
|
|
>(undefined);
|
|
const [toastVariant, setToastVariant] = React.useState<
|
|
"success" | "error" | "warning" | "info"
|
|
>("info");
|
|
const toastTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
|
|
null
|
|
);
|
|
|
|
const showToast = (
|
|
title: string,
|
|
description?: string,
|
|
variant: "success" | "error" | "warning" | "info" = "info"
|
|
) => {
|
|
if (toastTimeoutRef.current) {
|
|
clearTimeout(toastTimeoutRef.current);
|
|
}
|
|
|
|
setToastTitle(title);
|
|
setToastDescription(description);
|
|
setToastVariant(variant);
|
|
setToastVisible(true);
|
|
|
|
toastTimeoutRef.current = setTimeout(() => {
|
|
setToastVisible(false);
|
|
toastTimeoutRef.current = null;
|
|
}, 2500);
|
|
};
|
|
|
|
const handleAddAnother = () => {
|
|
// Navigate to add card page
|
|
router.replace(ROUTES.ADD_CARD);
|
|
};
|
|
|
|
const handleGoToCards = () => {
|
|
// Navigate to list cards page
|
|
router.replace(ROUTES.LIST_CARD);
|
|
};
|
|
|
|
const handleShare = async () => {
|
|
try {
|
|
const shareMessage = params.message
|
|
? t("cardaddedcomp.shareMessageWithParam", {
|
|
message: params.message,
|
|
})
|
|
: t("cardaddedcomp.shareMessageDefault");
|
|
|
|
const result = await Share.share({
|
|
message: shareMessage,
|
|
title: t("cardaddedcomp.shareTitle"),
|
|
});
|
|
|
|
if (result.action === Share.sharedAction) {
|
|
// Content was shared
|
|
console.log("Content shared successfully");
|
|
} else if (result.action === Share.dismissedAction) {
|
|
// Share dialog was dismissed
|
|
console.log("Share dialog dismissed");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error sharing:", error);
|
|
showToast(
|
|
t("cardaddedcomp.toastErrorTitle"),
|
|
t("cardaddedcomp.toastShareError"),
|
|
"error"
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenWrapper edges={[]}>
|
|
<View className="flex-1 w-full justify-between">
|
|
{/* Center content */}
|
|
<View className="flex-1 justify-center items-center px-5">
|
|
<SuccessIconNewCard />
|
|
<View className="h-10" />
|
|
<Text className="text-primary text-3xl">
|
|
{t("cardaddedcomp.title")}
|
|
</Text>
|
|
<View className="h-4" />
|
|
<View className="mx-8">
|
|
<Text className="text-xl font-regular text-gray-400 font-dmsans text-center">
|
|
{t("cardaddedcomp.description")}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Bottom buttons */}
|
|
<View className="w-full px-5 pb-8">
|
|
<Button
|
|
className="bg-primary rounded-full"
|
|
onPress={handleAddAnother}
|
|
>
|
|
<Text className="font-dmsans text-white">
|
|
{t("cardaddedcomp.addButton")}
|
|
</Text>
|
|
</Button>
|
|
<View className="h-4" />
|
|
<Button
|
|
className="bg-white border border-dashed border-secondary rounded-full"
|
|
onPress={() => router.replace(ROUTES.HOME)}
|
|
>
|
|
<Text className="font-dmsans text-black">
|
|
{t("cardaddedcomp.goHomeButton")}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
<ModalToast
|
|
visible={toastVisible}
|
|
title={toastTitle}
|
|
description={toastDescription}
|
|
variant={toastVariant}
|
|
/>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|