From e6eba2d0c67a0b19ba107cdb2cc3faa1342def80 Mon Sep 17 00:00:00 2001 From: mortezaei Date: Wed, 19 Aug 2026 04:42:29 +0330 Subject: [PATCH] refactor: update SSR fetch timeouts, improve UI navigation styling, and add logging to profile requests --- src/app/new-match/profile/page.tsx | 128 +++++----- .../Componentes/navigation-button.tsx | 235 ++---------------- 2 files changed, 86 insertions(+), 277 deletions(-) diff --git a/src/app/new-match/profile/page.tsx b/src/app/new-match/profile/page.tsx index 6fe9571..5e1bc08 100644 --- a/src/app/new-match/profile/page.tsx +++ b/src/app/new-match/profile/page.tsx @@ -252,14 +252,12 @@ function NewMatchProfileSkeleton({
-
-
- - -
+
+ +
@@ -286,7 +284,9 @@ type NewMatchProfilePageProps = { onClose?: () => void; }; -export default function NewMatchProfilePage({ onClose }: NewMatchProfilePageProps = {}) { +export default function NewMatchProfilePage({ + onClose, +}: NewMatchProfilePageProps = {}) { const { dictionary: t, locale } = useI18n(); const router = useRouter(); const [isRequestSheetOpen, setIsRequestSheetOpen] = useState(false); @@ -672,70 +672,68 @@ export default function NewMatchProfilePage({ onClose }: NewMatchProfilePageProp
-
- {caseStatus === "payment_done" || - caseStatus === "contacted" || - caseStatus === "finalized" || - profile?.status === "matched" ? ( + {caseStatus === "payment_done" || + caseStatus === "contacted" || + caseStatus === "finalized" || + profile?.status === "matched" ? ( + + ) : ( +
- ) : ( -
- - -
- )} -
+ setIsRequestSheetOpen(true); + }} + className="inline-flex w-2/3 h-[52px] whitespace-nowrap items-center justify-center gap-1 rounded-[12px] bg-[#F0445B] px-4 text-[16px] font-semibold text-white shadow-[0_8px_16px_rgba(240,68,91,0.24)] disabled:cursor-not-allowed disabled:opacity-50" + > + {isSubmitting ? ( + + ) : ( + <> + + {t["Accept Profile"]} + + )} + +
+ )}
diff --git a/src/components/Componentes/navigation-button.tsx b/src/components/Componentes/navigation-button.tsx index 4694105..ae4e5d7 100644 --- a/src/components/Componentes/navigation-button.tsx +++ b/src/components/Componentes/navigation-button.tsx @@ -1,27 +1,14 @@ "use client"; -import { useQueryClient } from "@tanstack/react-query"; import Image from "next/image"; import { useRouter } from "next/navigation"; import type { ButtonHTMLAttributes, ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { GoArrowLeft } from "react-icons/go"; import { HiEllipsisVertical } from "react-icons/hi2"; -import { marriageQueryKeys } from "@/hooks/marriage/query-keys"; -import { useHabcoinInventoryQuery } from "@/hooks/marriage/use-habcoin-inventory"; -import { - extractHabcoinPaymentUrl, - useHabcoinPaymentMutation, -} from "@/hooks/marriage/use-habcoin-payment"; import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main"; -import { - buyHabibCoinPackages, - isInFlutterWebView, -} from "@/lib/webview-actions"; +import { isInFlutterWebView } from "@/lib/webview-actions"; import { useI18n } from "@/translations/provider"; -import { DiscountWidget } from "./discount-widget"; -import type { CheckDiscountResult } from "@/hooks/marriage/use-validate-discount"; -import ErrorToast from "./error-toast"; import HelpModal from "./help-modal"; import InformationSheet from "./information-sheet"; import { hasSupportAccess } from "./support-access"; @@ -50,6 +37,7 @@ export type NavigationButtonProps = Omit< helpDescription?: ReactNode; helpButtonText?: ReactNode; disableHelpModal?: boolean; + badge?: ReactNode; profile?: any; }; @@ -63,19 +51,20 @@ export function NavigationButton({ helpDescription, helpButtonText, disableHelpModal = false, + badge, profile: profileProp, ...props }: NavigationButtonProps) { const router = useRouter(); - const { dictionary: t } = useI18n(); + const { dictionary: t, locale } = useI18n(); + const isRtl = locale === "fa" || locale === "ar" || locale === "ur"; const [isHelpOpen, setIsHelpOpen] = useState(false); const [isSupportOpen, setIsSupportOpen] = useState(false); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isSubscriptionInfoOpen, setIsSubscriptionInfoOpen] = useState(false); const [isSubscriptionLoading, setIsSubscriptionLoading] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); - // Only fetch profile for icons that actually need profile data if not provided via prop. const needsProfile = !profileProp && (icon === "support" || @@ -88,29 +77,12 @@ export function NavigationButton({ }); const profile = profileProp !== undefined ? profileProp : queriedProfile; const refetch = refetchQuery; - const paymentMutation = useHabcoinPaymentMutation(); - const queryClient = useQueryClient(); - const [toastMessage, setToastMessage] = useState(null); - const [toastVariant, setToastVariant] = useState<"error" | "success">( - "error", - ); - const [isRenewing, setIsRenewing] = useState(false); - const [isInsufficientCoins, setIsInsufficientCoins] = useState(false); - const [appliedDiscount, setAppliedDiscount] = - useState(null); - const { data: inventory } = useHabcoinInventoryQuery({ - enabled: isSubscriptionInfoOpen, - }); - - const planPrice = Number(profile?.recommended_plan?.price) || 0; - const finalPrice = appliedDiscount?.valid - ? appliedDiscount.discountedPrice - : planPrice; - const coinBalance = inventory?.coin_balance ?? 0; - const hasEnoughCoins = - !isInsufficientCoins && - (inventory === undefined ? true : coinBalance >= finalPrice); + const isFemale = profile?.gender === "female"; + const hasActiveSubscription = + !!profile?.active_subscription && + profile.active_subscription.is_active !== false && + profile.active_subscription.is_valid !== false; const handleOpenSubscriptionModal = () => { setIsSubscriptionInfoOpen(true); @@ -128,10 +100,7 @@ export function NavigationButton({ return ( { - setIsSubscriptionInfoOpen(false); - setAppliedDiscount(null); - }} + onClose={() => setIsSubscriptionInfoOpen(false)} /> ); } @@ -165,171 +134,29 @@ export function NavigationButton({ } return hasActiveSubscription ? ( - <> - { - setIsSubscriptionInfoOpen(false); - setAppliedDiscount(null); - }} - buttons={({ close }) => ( -
- {profile?.recommended_plan?.id ? ( - setAppliedDiscount(res)} - onDiscountCleared={() => setAppliedDiscount(null)} - /> - ) : null} - -
- - - {!hasEnoughCoins ? ( - - ) : ( - - )} -
-
- )} - /> - + setIsSubscriptionInfoOpen(false)} + /> ) : ( setIsSubscriptionInfoOpen(false)} /> ); }; - const isFemale = profile?.gender === "female"; - const hasActiveSubscription = - !!profile?.active_subscription && - profile.active_subscription.is_active !== false && - profile.active_subscription.is_valid !== false; - useEffect(() => { if (!isDropdownOpen) return; const handleOutsideClick = (event: MouseEvent) => { @@ -483,14 +310,6 @@ export function NavigationButton({ /> {renderSubscriptionModal()} - - {toastMessage && ( - setToastMessage(null)} - /> - )}
); } @@ -560,14 +379,6 @@ export function NavigationButton({ /> {renderSubscriptionModal()} - - {toastMessage && ( - setToastMessage(null)} - /> - )} ); }