You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
682 lines
25 KiB
682 lines
25 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useHabibWebReady } from "@/hooks/use-habib-web-ready";
|
|
import { FaLock } from "react-icons/fa6";
|
|
import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
|
|
import MarriageAdvisorsOverlay, {
|
|
useMarriageAdvisorsOverlay,
|
|
} from "@/components/Componentes/marriage-advisors-overlay";
|
|
import PageHeader from "@/components/Componentes/page-header";
|
|
import { PageBackground } from "@/components/Componentes/page-background";
|
|
import { IoClose } from "react-icons/io5";
|
|
import { LoadingSkeleton } from "@/components/Componentes/loading-skeleton";
|
|
import { LoadingThreeDot } from "@/components/Componentes/loading-three-dot";
|
|
import { useHabcoinPaymentMutation } from "@/hooks/marriage/use-habcoin-payment";
|
|
import { useRespondToMarriageCaseMutation } from "@/hooks/marriage/use-case-respond";
|
|
import type {
|
|
MarriageField,
|
|
MarriageFieldValue,
|
|
MarriageMatchSummary,
|
|
MarriagePhoneFieldValue,
|
|
} from "@/hooks/marriage/types";
|
|
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
|
|
import { useViewPaddings } from "@/hooks/use-view-paddings";
|
|
import { getSubmitPath } from "@/lib/get-submit-path";
|
|
import {
|
|
buyHabibCoinPackages,
|
|
isInFlutterWebView,
|
|
} from "@/lib/webview-actions";
|
|
import { localizePath } from "@/translations/config";
|
|
import { useI18n } from "@/translations/provider";
|
|
|
|
const advisorAvatars = [
|
|
{ id: "advisor-primary", src: "/assets/images/Avatar Image.png" },
|
|
{ id: "advisor-secondary", src: "/assets/images/Ellipse 370.png" },
|
|
{ id: "advisor-tertiary", src: "/assets/images/Avatar Image.png" },
|
|
];
|
|
|
|
const fieldCandidates = {
|
|
name: ["name", "full_name", "fullname", "first_name", "display_name"],
|
|
occupation: [
|
|
"occupation",
|
|
"job",
|
|
"profession",
|
|
"career",
|
|
"work",
|
|
"education",
|
|
"highest_level_of_education",
|
|
],
|
|
age: ["age"],
|
|
city: [
|
|
"city",
|
|
"current_city",
|
|
"residence_city",
|
|
"location",
|
|
"residence",
|
|
"birth_city",
|
|
],
|
|
maritalStatus: [
|
|
"marital_status",
|
|
"maritalstatus",
|
|
"relationship_status",
|
|
"current_marital_status",
|
|
],
|
|
cityPreference: [
|
|
"city_preference",
|
|
"citypreference",
|
|
"preferred_city",
|
|
"preferred_location",
|
|
"future_residence",
|
|
],
|
|
} as const;
|
|
|
|
type DisplayField = {
|
|
id: string;
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
function normalizeFieldName(value: string) {
|
|
return value
|
|
.toLowerCase()
|
|
.replace(/^q\d+[_-]?/, "")
|
|
.replace(/[^a-z0-9]/g, "");
|
|
}
|
|
|
|
function formatFieldValue(value: MarriageFieldValue) {
|
|
if (value === null || value === "") {
|
|
return null;
|
|
}
|
|
|
|
if (isMarriagePhoneFieldValue(value)) {
|
|
return `+${value.countryCode}${value.phoneNumber}`;
|
|
}
|
|
|
|
if (typeof value === "boolean") {
|
|
return value ? "Yes" : "No";
|
|
}
|
|
|
|
return String(value);
|
|
}
|
|
|
|
function isMarriagePhoneFieldValue(
|
|
value: unknown,
|
|
): value is MarriagePhoneFieldValue {
|
|
if (!value || typeof value !== "object") {
|
|
return false;
|
|
}
|
|
|
|
const phoneValue = value as Partial<MarriagePhoneFieldValue>;
|
|
|
|
return (
|
|
typeof phoneValue.countryCode === "string" &&
|
|
typeof phoneValue.phoneNumber === "string"
|
|
);
|
|
}
|
|
|
|
function titleFromKey(key: string) {
|
|
return key
|
|
.replace(/^q\d+[_-]?/i, "")
|
|
.replace(/[_-]+/g, " ")
|
|
.replace(/\s+/g, " ")
|
|
.trim()
|
|
.replace(/\b\w/g, (letter) => letter.toUpperCase());
|
|
}
|
|
|
|
function toDisplayField(field: MarriageField): DisplayField | null {
|
|
const value = formatFieldValue(field.value);
|
|
|
|
if (!value) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
id: field.key || field.label || value,
|
|
label: field.label || titleFromKey(field.key),
|
|
value,
|
|
};
|
|
}
|
|
|
|
function pickField(
|
|
fields: MarriageField[],
|
|
candidates: readonly string[],
|
|
usedIndexes: Set<number>,
|
|
) {
|
|
const candidateSet = new Set(candidates.map(normalizeFieldName));
|
|
for (const [fieldIndex, field] of fields.entries()) {
|
|
if (usedIndexes.has(fieldIndex)) {
|
|
continue;
|
|
}
|
|
|
|
const displayField = toDisplayField(field);
|
|
|
|
if (
|
|
displayField &&
|
|
[field.key, field.label].some((value) =>
|
|
candidateSet.has(normalizeFieldName(value)),
|
|
)
|
|
) {
|
|
usedIndexes.add(fieldIndex);
|
|
return displayField;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function useMatchSummaryDisplay(matchSummary: MarriageMatchSummary | null) {
|
|
return useMemo(() => {
|
|
const fields = matchSummary?.public_info ?? [];
|
|
const usedIndexes = new Set<number>();
|
|
const name = pickField(fields, fieldCandidates.name, usedIndexes);
|
|
const occupation = pickField(
|
|
fields,
|
|
fieldCandidates.occupation,
|
|
usedIndexes,
|
|
);
|
|
const age = pickField(fields, fieldCandidates.age, usedIndexes);
|
|
const city = pickField(fields, fieldCandidates.city, usedIndexes);
|
|
const maritalStatus = pickField(
|
|
fields,
|
|
fieldCandidates.maritalStatus,
|
|
usedIndexes,
|
|
);
|
|
const cityPreference = pickField(
|
|
fields,
|
|
fieldCandidates.cityPreference,
|
|
usedIndexes,
|
|
);
|
|
const extraFields = fields
|
|
.filter((_, index) => !usedIndexes.has(index))
|
|
.map(toDisplayField)
|
|
.filter((field): field is DisplayField => Boolean(field))
|
|
.slice(0, 4);
|
|
|
|
return {
|
|
age,
|
|
city,
|
|
cityPreference,
|
|
extraFields,
|
|
maritalStatus,
|
|
name:
|
|
name?.value ??
|
|
(matchSummary?.id ? `Profile #${matchSummary.id}` : null),
|
|
occupation,
|
|
};
|
|
}, [matchSummary]);
|
|
}
|
|
|
|
function FieldLine({ field }: { field: DisplayField }) {
|
|
return (
|
|
<p className="break-words text-[10px] leading-[1.85] font-medium text-white">
|
|
<span>{field.label}: </span>
|
|
<span>{field.value}</span>
|
|
</p>
|
|
);
|
|
}
|
|
|
|
export default function NewMatchClient() {
|
|
const router = useRouter();
|
|
const { dictionary: t, locale } = useI18n();
|
|
const { top, bottom } = useViewPaddings();
|
|
const { isAdvisorOpen, openAdvisors, closeAdvisors } =
|
|
useMarriageAdvisorsOverlay();
|
|
const { data: profile, isError, isLoading } = useMarriageProfileQuery();
|
|
|
|
const [isPaymentSheetOpen, setIsPaymentSheetOpen] = useState(false);
|
|
const [paymentError, setPaymentError] = useState<string | null>(null);
|
|
const [isInsufficientCoins, setIsInsufficientCoins] = useState(false);
|
|
|
|
const paymentMutation = useHabcoinPaymentMutation();
|
|
const caseId = profile?.active_case?.case_id;
|
|
const respondMutation = useRespondToMarriageCaseMutation(caseId ?? "", {
|
|
onSuccess: () => {
|
|
router.replace(localizePath("/finding-match", locale));
|
|
},
|
|
});
|
|
|
|
const handlePayment = async () => {
|
|
const recommendedPlanId = profile?.recommended_plan?.id;
|
|
if (!recommendedPlanId) return;
|
|
|
|
try {
|
|
setPaymentError(null);
|
|
setIsInsufficientCoins(false);
|
|
await paymentMutation.mutateAsync(recommendedPlanId);
|
|
setIsPaymentSheetOpen(false);
|
|
router.push(localizePath("/new-match/profile", locale));
|
|
} catch (err: any) {
|
|
console.error("Payment failed", err);
|
|
const msg =
|
|
err?.response?.data?.error || err?.message || "Payment failed";
|
|
const modalT = (t as any).paymentModal || {};
|
|
if (msg === "Not enough coins") {
|
|
setIsInsufficientCoins(true);
|
|
setPaymentError(
|
|
modalT.insufficientCoins ||
|
|
"Insufficient coin balance. Please recharge your account.",
|
|
);
|
|
} else {
|
|
setPaymentError(msg);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDecline = async () => {
|
|
if (!caseId) return;
|
|
try {
|
|
await respondMutation.mutateAsync({ action: "reject" });
|
|
} catch (err) {
|
|
console.error("Decline failed", err);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!profile) {
|
|
return;
|
|
}
|
|
const targetPath = getSubmitPath(profile);
|
|
if (targetPath !== "/new-match") {
|
|
router.replace(localizePath(targetPath, locale));
|
|
}
|
|
}, [profile, locale, router]);
|
|
|
|
// Signal Flutter to lift its loading cover once the profile is available.
|
|
useHabibWebReady(!!profile && !isLoading);
|
|
|
|
const isRedirecting = useMemo(() => {
|
|
if (!profile) return false;
|
|
return getSubmitPath(profile) !== "/new-match";
|
|
}, [profile]);
|
|
|
|
const matchSummary = profile?.match_summary ?? null;
|
|
const matchDisplay = useMatchSummaryDisplay(matchSummary);
|
|
|
|
if (isLoading || isRedirecting) {
|
|
return (
|
|
<>
|
|
<PageBackground />
|
|
<main
|
|
style={{
|
|
paddingBottom: `${bottom + 20}px`,
|
|
paddingTop: `${Math.max(12, top + 4)}px`,
|
|
}}
|
|
className="-mx-[17px] min-h-screen h-full text-center px-4"
|
|
>
|
|
<PageHeader />
|
|
|
|
<div>
|
|
{/* Header Section Skeleton */}
|
|
<section className="flex flex-col items-center mt-9">
|
|
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
|
|
<LoadingSkeleton className="h-6 w-[220px] mt-4" />
|
|
<LoadingSkeleton className="h-4 w-[280px] mt-3" />
|
|
<LoadingSkeleton className="h-4 w-[240px] mt-1.5" />
|
|
</section>
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
{/* Match Card Skeleton */}
|
|
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
|
|
{/* Name line */}
|
|
<LoadingSkeleton className="h-5 w-[140px]" />
|
|
|
|
{/* Subtitle / Details lines */}
|
|
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
|
|
<LoadingSkeleton className="h-3 w-[180px]" />
|
|
<LoadingSkeleton className="h-3 w-[120px]" />
|
|
<LoadingSkeleton className="h-3 w-[150px]" />
|
|
</div>
|
|
|
|
{/* Button skeleton */}
|
|
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
|
|
</section>
|
|
|
|
{/* Advisor Card Skeleton */}
|
|
<section className="mt-[36px]">
|
|
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
|
|
<LoadingSkeleton className="h-[16px] w-[140px]" />
|
|
<div className="mt-2 space-y-1">
|
|
<LoadingSkeleton className="h-[10px] w-[260px]" />
|
|
<LoadingSkeleton className="h-[10px] w-[180px]" />
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center justify-between gap-3">
|
|
<div className="flex items-center pl-1">
|
|
<LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
|
|
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
|
|
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
|
|
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
|
|
</div>
|
|
|
|
<LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
const pairedFields = [matchDisplay.age, matchDisplay.city].filter(
|
|
(field): field is DisplayField => Boolean(field),
|
|
);
|
|
|
|
const isFemaleProfile = profile?.gender === "female";
|
|
const matchHeadingTitle = isFemaleProfile
|
|
? t["New Marriage Proposal"]
|
|
: t["YOU HAVE A NEW MATCH!"];
|
|
const matchHeadingDescription = isFemaleProfile
|
|
? t[
|
|
"A suitable match has been found for you. If approved, your profile will be evaluated to proceed with the introduction process."
|
|
]
|
|
: t[
|
|
"If you proceed, we will notify the other party, and upon their approval, you can view each other's contact information."
|
|
];
|
|
|
|
const isMale = profile?.gender === "male";
|
|
const hasActiveSub = !!profile?.active_subscription;
|
|
const isMatchAvailable = !!profile?.match_summary;
|
|
|
|
return (
|
|
<>
|
|
<PageBackground />
|
|
|
|
<main
|
|
style={{
|
|
paddingBottom: `${profile?.can_edit_profile === false ? 100 + bottom : 20 + bottom}px`,
|
|
paddingTop: `${Math.max(12, top + 4)}px`,
|
|
}}
|
|
className="-mx-[17px] min-h-screen h-full text-center px-4"
|
|
>
|
|
<PageHeader />
|
|
|
|
<div className="">
|
|
<section className="flex flex-col items-center mt-9">
|
|
<div
|
|
aria-hidden="true"
|
|
className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]"
|
|
>
|
|
<Image
|
|
src={"/assets/images/Ellipse 1210.svg"}
|
|
width={70}
|
|
height={70}
|
|
alt="notification"
|
|
/>
|
|
</div>
|
|
<h2 className="text-[22px] font-bold mt-3.5">
|
|
{matchHeadingTitle}
|
|
</h2>
|
|
<p className="mt-[11px] max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
|
|
{matchHeadingDescription}
|
|
</p>
|
|
</section>
|
|
<div className="flex h-full flex-col justify-between">
|
|
{isLoading ? (
|
|
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
|
|
<div className="flex flex-col items-center py-2">
|
|
{/* Name line */}
|
|
<LoadingSkeleton className="h-5 w-[140px]" />
|
|
|
|
{/* Subtitle / Details lines */}
|
|
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
|
|
<LoadingSkeleton className="h-3 w-[180px]" />
|
|
<LoadingSkeleton className="h-3 w-[120px]" />
|
|
<LoadingSkeleton className="h-3 w-[150px]" />
|
|
</div>
|
|
|
|
{/* Button skeleton */}
|
|
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
|
|
</div>
|
|
</section>
|
|
) : (
|
|
<section className="mt-[36px] rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[18px] pb-[17px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
|
|
{isError ? (
|
|
<p className="py-8 text-[13px] font-semibold">
|
|
Unable to load match summary.
|
|
</p>
|
|
) : matchSummary ? (
|
|
<>
|
|
<h2 className="break-words text-[13px] leading-[1.4] font-bold">
|
|
<span>Name: </span>
|
|
<span>{matchDisplay.name}</span>
|
|
</h2>
|
|
|
|
<div className="mt-[3px] min-h-[48px]">
|
|
{matchDisplay.occupation ? (
|
|
<FieldLine field={matchDisplay.occupation} />
|
|
) : null}
|
|
|
|
{pairedFields.length ? (
|
|
<p className="break-words text-[10px] leading-[1.85] font-medium text-white">
|
|
{pairedFields.map((field, index) => (
|
|
<span key={field.id}>
|
|
{index > 0 ? <span> | </span> : null}
|
|
<span>
|
|
{field.label}: {field.value}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</p>
|
|
) : null}
|
|
|
|
{matchDisplay.maritalStatus ? (
|
|
<FieldLine field={matchDisplay.maritalStatus} />
|
|
) : null}
|
|
{matchDisplay.cityPreference ? (
|
|
<FieldLine field={matchDisplay.cityPreference} />
|
|
) : null}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (isMale && !hasActiveSub) {
|
|
setIsPaymentSheetOpen(true);
|
|
} else {
|
|
router.push(
|
|
localizePath("/new-match/profile", locale),
|
|
);
|
|
}
|
|
}}
|
|
className="mt-[15px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
|
|
>
|
|
{t["View more details"]}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<p className="py-8 text-[13px] font-semibold">
|
|
No match summary is available yet.
|
|
</p>
|
|
)}
|
|
</section>
|
|
)}
|
|
<div className="w-full space-y-3">
|
|
<AdvisorActionsCard
|
|
className="mt-[36px]"
|
|
title={t["Get an advisor"]}
|
|
description={
|
|
t[
|
|
"Not sure what to do next? Our psychology section is here to guide you at every step."
|
|
]
|
|
}
|
|
avatars={advisorAvatars}
|
|
extraCount={7}
|
|
getAdvisorLabel={t["Get Advisor"]}
|
|
onGetAdvisor={openAdvisors}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{profile?.can_edit_profile === false && (
|
|
<div
|
|
style={{ paddingBottom: `${16 + bottom}px` }}
|
|
className="fixed inset-x-0 bottom-0 z-20 mx-auto w-full sm:max-w-[375px] bg-background/95 px-[17px] pt-3 pb-[16px] backdrop-blur-md"
|
|
>
|
|
<div
|
|
className="inline-flex w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] px-4 h-[52px] text-center text-[#747474] shadow-none"
|
|
role="status"
|
|
>
|
|
<FaLock aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="group-16 leading-none font-semibold">
|
|
{t["Profile is locked"]}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isPaymentSheetOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/50 backdrop-blur-xs p-4 animate-in fade-in duration-200">
|
|
<div
|
|
style={{ paddingBottom: `calc(20px + ${bottom}px)` }}
|
|
className="relative w-full max-w-[375px] rounded-[24px] bg-white px-5 pt-6 shadow-[0_-8px_30px_rgba(0,0,0,0.12)] border border-slate-100 animate-in slide-in-from-bottom duration-300 text-center"
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute top-4 right-4 text-[#8F8F8F] hover:text-[#5F5F5F] transition-colors"
|
|
onClick={() => {
|
|
setIsPaymentSheetOpen(false);
|
|
setPaymentError(null);
|
|
setIsInsufficientCoins(false);
|
|
}}
|
|
>
|
|
<IoClose className="text-[22px]" />
|
|
</button>
|
|
|
|
<div className="flex flex-col items-center">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#F0445B] text-white mb-4">
|
|
<Image
|
|
src="/assets/images/noun-wedding-rings-6540466 1.svg"
|
|
alt=""
|
|
width={28}
|
|
height={28}
|
|
className="text-white"
|
|
/>
|
|
</div>
|
|
|
|
<h3 className="group-16 font-bold text-gray-900 mb-2">
|
|
{t["Verification & Subscription Activation"] ||
|
|
"Verification & Subscription Activation"}
|
|
</h3>
|
|
|
|
<p className="text-xs text-gray-500 leading-relaxed mb-4 text-center">
|
|
{t[
|
|
"This payment acts as a verification process for your account and activates a 3-month subscription to receive new case introductions. The cost of this subscription is 50 Habib Coins."
|
|
] ||
|
|
"This payment acts as a verification process for your account and activates a 3-month subscription to receive new case introductions. The cost of this subscription is 50 Habib Coins."}
|
|
</p>
|
|
|
|
<div className="w-full bg-gray-50 rounded-xl p-3 mb-4 text-center">
|
|
<span className="text-[10px] text-gray-400 block mb-0.5">
|
|
{t["Valid for 3 months"] || "Valid for 3 months"}
|
|
</span>
|
|
<span className="text-base font-bold text-[#FF4E67]">
|
|
{t["50 Coins"] || "50 Habib Coins"}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-[10px] text-gray-400 leading-normal mb-6 text-center">
|
|
{t[
|
|
"Please note that there is no guarantee for a specific number of cases, and the volume of incoming cases is solely subject to profile compatibility with other users."
|
|
] ||
|
|
"Please note that there is no guarantee for a specific number of cases, and the volume of incoming cases is solely subject to profile compatibility with other users."}
|
|
</p>
|
|
|
|
{paymentError && (
|
|
<div className="w-full bg-[#FEF2F2] text-[#B91C1C] text-xs p-3 rounded-xl mb-4 text-center font-medium">
|
|
{paymentError}
|
|
</div>
|
|
)}
|
|
|
|
{isInsufficientCoins && isInFlutterWebView() && (
|
|
<button
|
|
type="button"
|
|
className="appearance-none border-0 bg-transparent p-0 text-left w-full mb-4"
|
|
onClick={() => buyHabibCoinPackages()}
|
|
>
|
|
<div className="inline-flex w-full items-center justify-center gap-2 rounded-[18px] bg-[#00AC78] px-4 h-[52px] text-[16px] font-semibold text-white shadow-[0_10px_18px_rgba(0,172,120,0.28)] transition-opacity active:opacity-90">
|
|
<Image
|
|
src="/assets/images/Inner Plugdsain Iframe.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={18}
|
|
height={18}
|
|
className="shrink-0"
|
|
/>
|
|
<span className="truncate">
|
|
{t["Buy Habib Coins"] || "Buy Habib Coins"}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
)}
|
|
|
|
<div className="grid w-full grid-cols-[33fr_67fr] gap-3">
|
|
<button
|
|
type="button"
|
|
disabled={
|
|
paymentMutation.isPending || respondMutation.isPending
|
|
}
|
|
className="appearance-none border-0 bg-transparent p-0 text-left disabled:cursor-not-allowed disabled:opacity-70 min-w-0"
|
|
onClick={handleDecline}
|
|
>
|
|
<div className="inline-flex w-full items-center justify-center rounded-[18px] border border-[#9A9A9A] bg-[#F7F7F7] px-2 h-[52px] text-[16px] font-bold text-[#8B8B8B] shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] transition-opacity active:opacity-90 min-w-0">
|
|
{respondMutation.isPending ? (
|
|
<LoadingThreeDot />
|
|
) : (
|
|
<span className="truncate">
|
|
{t["Decline"] || "Decline"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
disabled={
|
|
paymentMutation.isPending || respondMutation.isPending
|
|
}
|
|
className="appearance-none border-0 bg-transparent p-0 text-left disabled:cursor-not-allowed disabled:opacity-70 min-w-0"
|
|
onClick={handlePayment}
|
|
>
|
|
<div className="inline-flex w-full items-center justify-center gap-3 rounded-[18px] bg-[#F0445B] px-4 h-[52px] text-[16px] font-semibold text-white shadow-[0_10px_18px_rgba(240,68,91,0.28)] transition-opacity active:opacity-90 min-w-0">
|
|
{paymentMutation.isPending ? (
|
|
<LoadingThreeDot />
|
|
) : (
|
|
<>
|
|
<span className="truncate min-w-0">
|
|
{t["Pay"] || "Pay"}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-[#E43B51] p-1.5 text-xs font-semibold leading-none text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] shrink-0 min-w-0 whitespace-nowrap">
|
|
<Image
|
|
src="/assets/images/Inner Plugdsain Iframe.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={18}
|
|
height={18}
|
|
className="shrink-0"
|
|
/>
|
|
<span className="truncate">50</span>
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<MarriageAdvisorsOverlay
|
|
open={isAdvisorOpen}
|
|
onClose={closeAdvisors}
|
|
/>
|
|
</>
|
|
);
|
|
}
|