From ee9617ceeac36ebbb4ae9791d19a9d5d5dfa0084 Mon Sep 17 00:00:00 2001
From: Nhan Doan <2561973+dnhn@users.noreply.github.com>
Date: Wed, 11 Dec 2024 00:29:14 +0700
Subject: [PATCH] Website: Survey page (fixing bugs) (#971)

---
 .../[region]/survey/[recipient]/[survey]/survey.css  |  2 +-
 website/src/components/i18n-dialog.tsx               |  4 +++-
 .../components/tracking/cookie-consent-banner.tsx    |  6 ++++--
 website/src/hooks/useIsPage.ts                       | 12 ++++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 website/src/hooks/useIsPage.ts

diff --git a/website/src/app/[lang]/[region]/survey/[recipient]/[survey]/survey.css b/website/src/app/[lang]/[region]/survey/[recipient]/[survey]/survey.css
index 5a0c98047..1abea47af 100644
--- a/website/src/app/[lang]/[region]/survey/[recipient]/[survey]/survey.css
+++ b/website/src/app/[lang]/[region]/survey/[recipient]/[survey]/survey.css
@@ -1,7 +1,7 @@
 #react-survey {
 	--primary: #fbc700;
 	--background: #ffffff;
-	--background-dim: #f3f3f3;
+	--background-dim: transparent;
 	--background-dim-light: #f9f9f9;
 	--primary-foreground: #ffffff;
 	--foreground: #161616;
diff --git a/website/src/components/i18n-dialog.tsx b/website/src/components/i18n-dialog.tsx
index 0f0e62176..3fa34cfaa 100644
--- a/website/src/components/i18n-dialog.tsx
+++ b/website/src/components/i18n-dialog.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useI18n } from '@/components/providers/context-providers';
+import { useIsPage } from '@/hooks/useIsPage';
 import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion } from '@/i18n';
 import { CurrencyDollarIcon } from '@heroicons/react/24/outline';
 import { GlobeEuropeAfricaIcon, LanguageIcon } from '@heroicons/react/24/solid';
@@ -48,6 +49,7 @@ export function I18nDialog({
 	translations,
 	children,
 }: PropsWithChildren<I18nDialogProps>) {
+	const isSurveyPage = useIsPage('survey');
 	const [open, setOpen] = useState(false);
 	const { language, setLanguage, region, setRegion, currency, setCurrency } = useI18n();
 
@@ -74,7 +76,7 @@ export function I18nDialog({
 					</Select>
 				)}
 
-				{!_.isEmpty(regions) && (
+				{!_.isEmpty(regions) && !isSurveyPage && (
 					<Select value={region} onValueChange={(c: WebsiteRegion) => setRegion(c)}>
 						<SelectTrigger className="space-x-2">
 							<GlobeEuropeAfricaIcon className="h-4 w-4" />
diff --git a/website/src/components/tracking/cookie-consent-banner.tsx b/website/src/components/tracking/cookie-consent-banner.tsx
index f69a9ee96..2abd3e6c2 100644
--- a/website/src/components/tracking/cookie-consent-banner.tsx
+++ b/website/src/components/tracking/cookie-consent-banner.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useIsPage } from '@/hooks/useIsPage';
 import { Button, Card, CardContent, Typography } from '@socialincome/ui';
 import { ConsentStatusString } from 'firebase/analytics';
 import { useEffect, useState } from 'react';
@@ -13,12 +14,13 @@ type CookieConsentBannerClientProps = {
 };
 
 export function CookieConsentBanner({ translations }: CookieConsentBannerClientProps) {
+	const isSurveyPage = useIsPage('survey');
 	const [hideBanner, setHideBanner] = useState(true);
 
 	useEffect(() => {
 		const cookieConsent = localStorage.getItem('cookie_consent');
-		setHideBanner(Boolean(cookieConsent));
-	}, [setHideBanner]);
+		setHideBanner(Boolean(cookieConsent) || isSurveyPage);
+	}, [isSurveyPage, setHideBanner]);
 
 	const setCookieConsent = (mode: ConsentStatusString) => {
 		localStorage.setItem('cookie_consent', mode);
diff --git a/website/src/hooks/useIsPage.ts b/website/src/hooks/useIsPage.ts
new file mode 100644
index 000000000..76285eefe
--- /dev/null
+++ b/website/src/hooks/useIsPage.ts
@@ -0,0 +1,12 @@
+import { usePathname } from 'next/navigation';
+
+export function useIsPage(page: string) {
+	const pathname = usePathname();
+	// URL structure: /[lang]/[region]/[page]
+	const segments = pathname.split('/');
+
+	// If `page` is blank and `segments` length is less than 4, it’s the home page
+	if (!page) return segments.length < 4;
+
+	return segments.length >= 4 ? segments[3] === page : false;
+}