|
|
@ -3,7 +3,8 @@ |
|
|
import Image from "next/image"; |
|
|
import Image from "next/image"; |
|
|
import Link from "next/link"; |
|
|
import Link from "next/link"; |
|
|
import { useRouter } from "next/navigation"; |
|
|
import { useRouter } from "next/navigation"; |
|
|
import { useState } from "react"; |
|
|
|
|
|
|
|
|
import { useEffect, useState } from "react"; |
|
|
|
|
|
import { getSubmitPath } from "@/lib/get-submit-path"; |
|
|
import { FiCopy, FiPhone } from "react-icons/fi"; |
|
|
import { FiCopy, FiPhone } from "react-icons/fi"; |
|
|
import CallResultSheet from "@/components/ui/call-result-sheet"; |
|
|
import CallResultSheet from "@/components/ui/call-result-sheet"; |
|
|
import FemaleConsentSheet from "@/components/ui/female-consent-sheet"; |
|
|
import FemaleConsentSheet from "@/components/ui/female-consent-sheet"; |
|
|
@ -68,64 +69,43 @@ function isMarriagePhoneFieldValue( |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function titleFromKey(key: string) { |
|
|
|
|
|
return key |
|
|
|
|
|
.replace(/^q\d+[_-]?/i, "") |
|
|
|
|
|
.replace(/[_-]+/g, " ") |
|
|
|
|
|
.replace(/\s+/g, " ") |
|
|
|
|
|
.trim() |
|
|
|
|
|
.replace(/\b\w/g, (letter) => letter.toUpperCase()); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function formatContactLabel(field: MarriageField) { |
|
|
|
|
|
const resolvedLabel = (field.label || titleFromKey(field.key)).trim(); |
|
|
|
|
|
|
|
|
|
|
|
return resolvedLabel.replace(/\s+Number$/i, "").trim(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getContactInfoPhoneItems(fields: MarriageField[] | null | undefined) { |
|
|
|
|
|
return (fields ?? []).flatMap((field) => { |
|
|
|
|
|
if (field.type.toLowerCase() !== "phone") { |
|
|
|
|
|
|
|
|
function getContactInfoPhoneItems( |
|
|
|
|
|
contactInfoFields: MarriageField[] | null | undefined, |
|
|
|
|
|
): ContactInfoPhoneItem[] { |
|
|
|
|
|
if (!contactInfoFields) { |
|
|
return []; |
|
|
return []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return contactInfoFields |
|
|
|
|
|
.map((field) => { |
|
|
const phoneNumber = sanitizePhoneNumber(field.value); |
|
|
const phoneNumber = sanitizePhoneNumber(field.value); |
|
|
|
|
|
|
|
|
if (!phoneNumber) { |
|
|
if (!phoneNumber) { |
|
|
return []; |
|
|
|
|
|
|
|
|
return null; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return [ |
|
|
|
|
|
{ |
|
|
|
|
|
|
|
|
return { |
|
|
key: field.key, |
|
|
key: field.key, |
|
|
label: formatContactLabel(field), |
|
|
|
|
|
|
|
|
label: field.label || field.key, |
|
|
phoneNumber, |
|
|
phoneNumber, |
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
}) |
|
|
|
|
|
.filter((item): item is ContactInfoPhoneItem => item !== null); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function ContactInfoPhoneCard({ item }: { item: ContactInfoPhoneItem }) { |
|
|
function ContactInfoPhoneCard({ item }: { item: ContactInfoPhoneItem }) { |
|
|
return ( |
|
|
return ( |
|
|
<div className="flex items-center gap-3 rounded-[15px] bg-[#F0445B]/10 p-3.5"> |
|
|
|
|
|
<div className="min-w-0 flex-1 text-left"> |
|
|
|
|
|
<p |
|
|
|
|
|
dir="ltr" |
|
|
|
|
|
className="group-16 leading-none font-semibold tracking-[0.01em] text-[#4D4D4D] tabular-nums" |
|
|
|
|
|
> |
|
|
|
|
|
{item.phoneNumber} |
|
|
|
|
|
</p> |
|
|
|
|
|
<p className="mt-2 group-10 leading-none font-semibold text-[#F0445B]"> |
|
|
|
|
|
{item.label} |
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
<div className="flex items-center justify-between rounded-[15px] border border-[#E4E4E4] bg-[#FBFBFB] px-4 py-3.5 shadow-[0_4px_12px_rgba(0,0,0,0.03)]"> |
|
|
|
|
|
<div className="text-left"> |
|
|
|
|
|
<p className="text-xs font-semibold text-[#8F8F8F]">{item.label}</p> |
|
|
|
|
|
<p className="text-base font-bold text-[#1F1F1F] dir-ltr">{item.phoneNumber}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="flex shrink-0 items-center gap-2"> |
|
|
|
|
|
|
|
|
<div className="flex items-center gap-2"> |
|
|
<button |
|
|
<button |
|
|
type="button" |
|
|
type="button" |
|
|
aria-label={`Copy ${item.label}`} |
|
|
|
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
void navigator.clipboard |
|
|
|
|
|
|
|
|
navigator.clipboard |
|
|
.writeText(item.phoneNumber) |
|
|
.writeText(item.phoneNumber) |
|
|
.catch(() => {}); |
|
|
.catch(() => {}); |
|
|
}} |
|
|
}} |
|
|
@ -136,7 +116,6 @@ function ContactInfoPhoneCard({ item }: { item: ContactInfoPhoneItem }) { |
|
|
|
|
|
|
|
|
<a |
|
|
<a |
|
|
href={`tel:${item.phoneNumber}`} |
|
|
href={`tel:${item.phoneNumber}`} |
|
|
aria-label={`Call ${item.label}`} |
|
|
|
|
|
className="inline-flex p-3 items-center justify-center rounded-[10px] bg-[#F0445B] text-white" |
|
|
className="inline-flex p-3 items-center justify-center rounded-[10px] bg-[#F0445B] text-white" |
|
|
> |
|
|
> |
|
|
<Image src={"/assets/images/Vecfdastor.svg"} width={16} height={16} alt="copy"/> |
|
|
<Image src={"/assets/images/Vecfdastor.svg"} width={16} height={16} alt="copy"/> |
|
|
@ -153,7 +132,20 @@ export default function RequestAcceptedPage() { |
|
|
const [isContactInfoSheetOpen, setIsContactInfoSheetOpen] = useState(false); |
|
|
const [isContactInfoSheetOpen, setIsContactInfoSheetOpen] = useState(false); |
|
|
const [isSubscriptionSheetOpen, setIsSubscriptionSheetOpen] = useState(false); |
|
|
const [isSubscriptionSheetOpen, setIsSubscriptionSheetOpen] = useState(false); |
|
|
const profileHref = localizePath("/new-match/profile", locale); |
|
|
const profileHref = localizePath("/new-match/profile", locale); |
|
|
const { data: profile } = useMarriageProfileQuery(); |
|
|
|
|
|
|
|
|
const { data: profile } = useMarriageProfileQuery({ |
|
|
|
|
|
refetchInterval: 3000, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
if (!profile) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
const targetPath = getSubmitPath(profile); |
|
|
|
|
|
if (targetPath !== "/request-accepted") { |
|
|
|
|
|
router.replace(localizePath(targetPath, locale)); |
|
|
|
|
|
} |
|
|
|
|
|
}, [profile, router, locale]); |
|
|
|
|
|
|
|
|
const isFemaleProfile = profile?.gender === "female"; |
|
|
const isFemaleProfile = profile?.gender === "female"; |
|
|
const caseId = profile?.active_case?.case_id; |
|
|
const caseId = profile?.active_case?.case_id; |
|
|
const caseStatus = profile?.active_case?.status; |
|
|
const caseStatus = profile?.active_case?.status; |
|
|
@ -168,12 +160,18 @@ export default function RequestAcceptedPage() { |
|
|
enabled: false, |
|
|
enabled: false, |
|
|
}); |
|
|
}); |
|
|
const titleText = isFemaleProfile |
|
|
const titleText = isFemaleProfile |
|
|
? "The selected candidate will contact your family shortly." |
|
|
|
|
|
: "REQUEST ACCEPTED"; |
|
|
|
|
|
|
|
|
? "درخواست تایید شد" |
|
|
|
|
|
: caseStatus === "payment_done" |
|
|
|
|
|
? "اطلاعات تماس آزاد شد" |
|
|
|
|
|
: "درخواست توسط خانم تایید شد!"; |
|
|
const primaryActionText = isFemaleProfile |
|
|
const primaryActionText = isFemaleProfile |
|
|
? "No contact yet?" |
|
|
|
|
|
: "Match Profile"; |
|
|
|
|
|
const secondaryActionText = isFemaleProfile ? "Contacted" : "View Contact"; |
|
|
|
|
|
|
|
|
? "اطلاعرسانی عدم تماس" |
|
|
|
|
|
: "مشاهده پروفایل"; |
|
|
|
|
|
const secondaryActionText = isFemaleProfile |
|
|
|
|
|
? "ثبت نتیجه تماس" |
|
|
|
|
|
: caseStatus === "payment_done" |
|
|
|
|
|
? "مشاهده شماره تماس" |
|
|
|
|
|
: "پرداخت و دریافت تماس"; |
|
|
const contactInfoPhoneItems = getContactInfoPhoneItems( |
|
|
const contactInfoPhoneItems = getContactInfoPhoneItems( |
|
|
contactInfoQuery.data?.contact_info, |
|
|
contactInfoQuery.data?.contact_info, |
|
|
); |
|
|
); |
|
|
@ -185,7 +183,7 @@ export default function RequestAcceptedPage() { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (caseStatus === "female_accepted" || caseStatus === "payment_pending") { |
|
|
if (caseStatus === "female_accepted" || caseStatus === "payment_pending") { |
|
|
setIsCallResultSheetOpen(true); |
|
|
|
|
|
|
|
|
setIsSubscriptionSheetOpen(true); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -280,9 +278,9 @@ export default function RequestAcceptedPage() { |
|
|
|
|
|
|
|
|
<main |
|
|
<main |
|
|
style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }} |
|
|
style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }} |
|
|
className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[calc(var(--safe-top)+28px)] text-center" |
|
|
|
|
|
|
|
|
className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] text-center" |
|
|
> |
|
|
> |
|
|
<header className="-mx-[6px] flex items-center justify-between"> |
|
|
|
|
|
|
|
|
<header className="-mx-[6px] flex items-center justify-between pb-3"> |
|
|
<NavigationButton icon="back" /> |
|
|
<NavigationButton icon="back" /> |
|
|
<h1 className="font-faminela group-16">Habib Marriage</h1> |
|
|
<h1 className="font-faminela group-16">Habib Marriage</h1> |
|
|
<NavigationButton icon="support" iconLabel="Support" /> |
|
|
<NavigationButton icon="support" iconLabel="Support" /> |
|
|
|