From 9f67fd44ef090021e4c367943f57c27736dd9a58 Mon Sep 17 00:00:00 2001 From: nguyenvanbao Date: Tue, 3 Feb 2026 10:18:53 +0700 Subject: [PATCH 1/4] feat: Add service details page with API integration --- api/servicesApi.ts | 624 ++++++++++++++++++++++ app/components/Breadcrumb.tsx | 31 ++ app/globals.css | 9 +- app/layout.tsx | 45 +- app/services/details/[slug]/not-found.tsx | 56 ++ app/services/details/[slug]/page.tsx | 170 ++++++ app/services/page.tsx | 267 ++++++--- app/utils/image.ts | 5 + 8 files changed, 1136 insertions(+), 71 deletions(-) create mode 100644 api/servicesApi.ts create mode 100644 app/components/Breadcrumb.tsx create mode 100644 app/services/details/[slug]/not-found.tsx create mode 100644 app/services/details/[slug]/page.tsx create mode 100644 app/utils/image.ts diff --git a/api/servicesApi.ts b/api/servicesApi.ts new file mode 100644 index 0000000..a3f9117 --- /dev/null +++ b/api/servicesApi.ts @@ -0,0 +1,624 @@ +/** + * Service Page API Functions + * Fetch data for Service page from external API + */ + +/* ======================= + Types +======================= */ + +export interface ServiceItem { + id: string; + slug: string; + name: string; + description: string; + image: string; + layout: "left" | "right"; + details: { + title: string; + description: string; + mainImage: string; + overviewTitle: string; + overviewDescription: string; + additionalDescription: string; + features: { + icon: string; + title: string; + description: string; + }[]; + faq: { + id: string; + question: string; + answer: string; + isExpanded: boolean; + }[]; + }; +} + +export interface ServiceSection { + title: { + subTitle: string; + mainTitle: string; + }; + items: ServiceItem[]; +} + +export interface CountryItem { + id: string; + name: string; + description: string; + image: string; + icon: string; + link: string; +} + +export interface DestinationSection { + backgroundImage: string; + title: { + subTitle: string; + mainTitle: string; + }; + items: CountryItem[]; +} + +export interface VisaItem { + id: string; + number: string; + name: string; + description: string; + buttonText: string; + buttonLink: string; +} + +export interface VisaSection { + items: VisaItem[]; +} + +export interface ClientReviewItem { + id: string; + rating: number; + content: string; + author: { + name: string; + type: string; + }; + icon: string; +} + +export interface ReviewSection { + title: { + subTitle: string; + mainTitle: string; + }; + viewAllButton: { + text: string; + icon: string; + link: string; + }; + thumb: string; + items: ClientReviewItem[]; +} + +export interface ServicePageData { + pageTitle: string; + services: ServiceSection; + destinations: DestinationSection; + visas: VisaSection; + reviews: ReviewSection; +} + +/* ======================= + Utils +======================= */ + +const getApiUrl = (): string => { + return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"; +}; + +/* ======================= + Fetch API +======================= */ + +export const fetchServicePageData = async (): Promise => { + try { + const apiUrl = getApiUrl(); + const endpoint = `${apiUrl}/api/service`; + + console.log("Fetching services from endpoint:", endpoint); + + const response = await fetch(endpoint, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + + console.log("Services API response status:", response.status); + + if (!response.ok) { + console.error("Services API failed, using fallback data"); + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = (await response.json()) as ServicePageData; + console.log("Services data received successfully"); + return data; + } catch (error) { + console.error("Error fetching service page data:", error); + console.log("Using fallback service data"); + return getFallbackServicePageData(); + } +}; + +export const fetchServiceBySlug = async (slug: string): Promise => { + console.log("=== fetchServiceBySlug called ==="); + console.log("Input slug:", slug); + console.log("Slug type:", typeof slug); + console.log("Slug length:", slug?.length); + + if (!slug || slug === "undefined") { + console.error("Invalid slug provided:", slug); + throw new Error("Invalid slug parameter"); + } + + try { + const apiUrl = getApiUrl(); + const endpoint = `${apiUrl}/api/service/${slug}`; + + console.log("Fetching service from endpoint:", endpoint); + + const response = await fetch(endpoint, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + + console.log("Response status:", response.status); + console.log("Response ok:", response.ok); + + if (!response.ok) { + const errorText = await response.text(); + console.error("Error response body:", errorText); + + // If it's a 404, try to get the service from fallback data + if (response.status === 404) { + console.log("Service not found in backend, checking fallback data"); + const fallbackData = getFallbackServicePageData(); + const service = fallbackData.services.items.find( + (item) => item.slug === slug, + ); + + if (service) { + console.log( + "Found service in fallback data, creating response structure", + ); + // Create a response structure that matches what the backend should return + return { + pageTitle: fallbackData.pageTitle, + breadcrumb: { + title: "Service Details", + items: [ + { label: "Home", href: "/" }, + { label: "Services", href: "/services" }, + { label: service.name, href: `/services/details/${slug}` }, + ], + }, + serviceDetails: { + content: service.details, + keyFeatures: { + title: "Key Features", + sideImage: + "/assets/img/inner-page/service-details/details-2.jpg", + items: service.details.features || [], + }, + faq: { + title: "Frequently Asked Questions", + sideImage: + "/assets/img/inner-page/service-details/details-3.jpg", + items: service.details.faq || [], + }, + }, + }; + } + } + + throw new Error( + `HTTP error! status: ${response.status}, body: ${errorText}`, + ); + } + + const data = await response.json(); + console.log("Service data received:", data); + return data; + } catch (error) { + console.error("Error fetching service by slug:", error); + throw error; + } +}; + +/* ======================= + Fallback Data +======================= */ + +export const getFallbackServicePageData = (): ServicePageData => ({ + pageTitle: "Visaway – Immigration & Visa Consulting HTML Template", + + services: { + title: { + subTitle: "What We Offer", + mainTitle: "Our Immigration Services", + }, + items: [ + { + id: "immigration-appeal", + slug: "immigration-appeal", + name: "Immigration Appeal & Legal Support", + description: + "Our experts provide professional guidance for immigration appeals and legal matters, helping clients overcome visa rejections with personalized strategies and strong case representation.", + image: "/assets/img/home-3/service/01.jpg", + layout: "left", + details: { + title: "Immigration Appeal & Legal Support", + description: + "Our experts provide professional guidance for immigration appeals and legal matters, helping clients overcome visa rejections with personalized strategies and strong case representation.", + mainImage: "/assets/img/inner-page/service-details/details-1.jpg", + overviewTitle: "Service Overview", + overviewDescription: + "Our Immigration Appeal & Legal Support service is designed to help clients navigate complex immigration challenges. We provide expert legal guidance, case analysis, and strategic representation to maximize your chances of success.", + additionalDescription: + "With years of experience in immigration law, our team is committed to turning your immigration challenges into success stories.", + features: [ + { + icon: "fa-solid fa-chevrons-right", + title: "Legal Case Analysis", + description: + "Thorough review and analysis of your immigration case.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Appeal Strategy Development", + description: "Custom strategies to overcome visa rejections.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Document Preparation", + description: + "Professional preparation of all required legal documents.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Court Representation", + description: "Expert legal representation in immigration courts.", + }, + ], + faq: [ + { + id: "faq-appeal-1", + question: "01. What are the chances of a successful appeal?", + answer: + "Success rates vary by case type, but our experienced legal team significantly improves your chances through thorough case analysis and strategic representation.", + isExpanded: false, + }, + { + id: "faq-appeal-2", + question: "02. How long does the appeal process take?", + answer: + "Appeal timelines vary by jurisdiction and case complexity, typically ranging from 6-18 months. We keep you informed throughout the process.", + isExpanded: true, + }, + ], + }, + }, + { + id: "scholarship-guidance", + slug: "scholarship-guidance", + name: "Scholarship & Study Grant Guidance", + description: + "We help students identify suitable scholarships and study grants, assist with applications, and provide expert guidance to maximize chances of securing financial support abroad.", + image: "/assets/img/home-3/service/02.jpg", + layout: "right", + details: { + title: "Scholarship & Study Grant Guidance", + description: + "We help students unlock opportunities to study abroad with the right financial support. Our expert advisors guide you in finding scholarships, grants, and funding options that match your academic background, chosen destination, and career goals.", + mainImage: "/assets/img/inner-page/service-details/details-1.jpg", + overviewTitle: "Service Overview", + overviewDescription: + "Our Education Visa Consultancy is dedicated to guiding students in achieving their study abroad dreams. We provide complete support including university selection, application assistance, scholarship guidance, visa documentation, and interview preparation.", + additionalDescription: + "From start to finish, we are committed to turning your education journey into a successful international experience.", + features: [ + { + icon: "fa-solid fa-chevrons-right", + title: "Scholarship Research", + description: + "Comprehensive research to find suitable funding opportunities.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Application Assistance", + description: + "Expert help with scholarship and grant applications.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Essay Writing Support", + description: + "Professional guidance for compelling scholarship essays.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Interview Preparation", + description: + "Coaching for scholarship interviews and presentations.", + }, + ], + faq: [ + { + id: "faq-scholarship-1", + question: "01. Do you help find scholarships for all countries?", + answer: + "Yes, we have extensive databases and partnerships worldwide to help you find scholarships in your preferred destination country.", + isExpanded: false, + }, + { + id: "faq-scholarship-2", + question: "02. What are the eligibility requirements?", + answer: + "Eligibility varies by scholarship type and provider. We assess your profile and match you with suitable opportunities based on your academic background and goals.", + isExpanded: true, + }, + ], + }, + }, + { + id: "permanent-residency", + slug: "permanent-residency", + name: "Permanent Residency (PR) Services", + description: + "Our PR services guide clients through every step of the residency process, including documentation, eligibility assessment, and application support, ensuring a smooth and successful approval.", + image: "/assets/img/home-3/service/03.jpg", + layout: "left", + details: { + title: "Permanent Residency (PR) Services", + description: + "Our PR services guide clients through every step of the residency process, including documentation, eligibility assessment, and application support, ensuring a smooth and successful approval.", + mainImage: "/assets/img/inner-page/service-details/details-1.jpg", + overviewTitle: "Service Overview", + overviewDescription: + "Our Permanent Residency services provide comprehensive support for individuals seeking to establish permanent residence in their chosen country. We handle all aspects of the PR application process with expertise and care.", + additionalDescription: + "Our experienced team ensures that your PR application is handled professionally and efficiently, maximizing your chances of approval.", + features: [ + { + icon: "fa-solid fa-chevrons-right", + title: "Eligibility Assessment", + description: + "Comprehensive evaluation of your PR eligibility and options.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Points Calculation", + description: + "Accurate calculation and optimization of your points score.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Document Verification", + description: + "Thorough verification and preparation of all required documents.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Application Tracking", + description: + "Regular updates and tracking of your PR application status.", + }, + ], + faq: [ + { + id: "faq-pr-1", + question: "01. How long does the PR process take?", + answer: + "Processing times vary by country and program, typically ranging from 12-24 months. We provide realistic timelines based on current processing standards.", + isExpanded: false, + }, + { + id: "faq-pr-2", + question: "02. What documents are required for PR application?", + answer: + "Document requirements vary by country but typically include educational credentials, work experience, language test results, and medical examinations. We provide a complete checklist.", + isExpanded: true, + }, + ], + }, + }, + { + id: "citizenship-naturalization", + slug: "citizenship-naturalization", + name: "Citizenship & Naturalization Guidance", + description: + "We provide expert guidance for citizenship and naturalization processes, assisting clients with documentation, eligibility, and legal procedures to achieve a smooth and successful application.", + image: "/assets/img/home-3/service/04.jpg", + layout: "right", + details: { + title: "Citizenship & Naturalization Guidance", + description: + "We provide expert guidance for citizenship and naturalization processes, assisting clients with documentation, eligibility, and legal procedures to achieve a smooth and successful application.", + mainImage: "/assets/img/inner-page/service-details/details-1.jpg", + overviewTitle: "Service Overview", + overviewDescription: + "Our Citizenship & Naturalization service helps individuals navigate the complex process of becoming a citizen. We provide step-by-step guidance, documentation support, and legal expertise throughout the entire process.", + additionalDescription: + "With our comprehensive approach, we make the path to citizenship clear, manageable, and successful for every client.", + features: [ + { + icon: "fa-solid fa-chevrons-right", + title: "Citizenship Test Preparation", + description: + "Comprehensive preparation for citizenship knowledge tests.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Language Requirements", + description: + "Guidance on meeting language proficiency requirements.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Residency Verification", + description: + "Assistance with proving residency and physical presence requirements.", + }, + { + icon: "fa-solid fa-chevrons-right", + title: "Ceremony Preparation", + description: + "Support and guidance for the citizenship ceremony process.", + }, + ], + faq: [ + { + id: "faq-citizenship-1", + question: "01. What are the basic requirements for citizenship?", + answer: + "Requirements typically include permanent residency, physical presence, language proficiency, and knowledge of the country's history and government. Specific requirements vary by country.", + isExpanded: false, + }, + { + id: "faq-citizenship-2", + question: "02. How do I prepare for the citizenship test?", + answer: + "We provide comprehensive study materials, practice tests, and coaching sessions to help you prepare for both the knowledge test and language requirements.", + isExpanded: true, + }, + ], + }, + }, + ], + }, + + destinations: { + backgroundImage: "/assets/img/home-3/choose-us/bg.png", + title: { + subTitle: "Countries we offer", + mainTitle: "Choose Your Immigration Destination", + }, + items: [ + { + id: "canada", + name: "Canada", + description: + "Canada provides quality education, rich and global opportunities", + image: "/assets/img/home-3/choose-us/01.jpg", + icon: "/assets/img/home-3/choose-us/icon-1.png", + link: "/countries/canada", + }, + { + id: "south-korea", + name: "South Korea", + description: + "South Korea offers advanced technology and cultural experiences", + image: "/assets/img/home-3/choose-us/02.jpg", + icon: "/assets/img/home-3/choose-us/icon-2.png", + link: "/countries/south-korea", + }, + { + id: "france", + name: "France", + description: "France offers unique cultural experiences and education", + image: "/assets/img/home-3/choose-us/03.jpg", + icon: "/assets/img/home-3/choose-us/icon-3.png", + link: "/countries/france", + }, + { + id: "uk", + name: "UK", + description: + "UK provides world-class education and career opportunities", + image: "/assets/img/home-3/choose-us/04.jpg", + icon: "/assets/img/home-3/choose-us/icon-2.png", + link: "/countries/uk", + }, + { + id: "germany", + name: "Germany", + description: + "Germany offers excellent education and work opportunities", + image: "/assets/img/home-3/choose-us/05.jpg", + icon: "/assets/img/home-3/choose-us/icon-3.png", + link: "/countries/germany", + }, + ], + }, + + visas: { + items: [ + { + id: "family-visa", + number: "01", + name: "Family Visa", + description: + "Our Family Visa services help reunite loved ones by providing expert guidance.", + buttonText: "service _ 02", + buttonLink: "/services/details/family-visa", + }, + { + id: "student-visa", + number: "02", + name: "Student Visa", + description: + "We provide expert guidance for student visa applications.", + buttonText: "service _ 02", + buttonLink: "/services/details/student-visa", + }, + { + id: "work-visa", + number: "03", + name: "Work Visa", + description: + "Collaboratively disintermediate one to one functionalities and long term.", + buttonText: "service _ 02", + buttonLink: "/services/details/work-visa", + }, + ], + }, + + reviews: { + title: { + subTitle: "What Our Clients Say", + mainTitle: "Immigration Success Stories", + }, + viewAllButton: { + text: "View All Review", + icon: "fa-solid fa-arrow-right", + link: "/contact", + }, + thumb: "/assets/img/home-3/test-thumb.jpg", + items: [ + { + id: "client-review-1", + rating: 5, + content: + "The team provided exceptional guidance throughout my immigration process. Their expertise, personalized support, and attention to detail ensured a smooth, stress-free experience and successful visa approval.", + author: { + name: "Mohammed Ali,", + type: "Family Visa", + }, + icon: "fa-solid fa-quote-right", + }, + { + id: "client-review-2", + rating: 5, + content: + "The team provided exceptional guidance throughout my immigration process. Their expertise, personalized support, and attention to detail ensured a smooth, stress-free experience and successful visa approval.", + author: { + name: "Mohammed Ali,", + type: "Family Visa", + }, + icon: "fa-solid fa-quote-right", + }, + ], + }, +}); diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx new file mode 100644 index 0000000..ead1dcf --- /dev/null +++ b/app/components/Breadcrumb.tsx @@ -0,0 +1,31 @@ +interface BreadcrumbProps { + title: string; + current: string; +} + +export default function Breadcrumb({ title, current }: BreadcrumbProps) { + return ( +
+
+ img +
+
+
+

{title}

+
    +
  • + Home +
    • +
  • + +
    • +
  • {current}
    • +
+
+
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index a461c50..24d681c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1 +1,8 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; +.collapse { + visibility: visible !important; +} + +.collapse.show { + visibility: visible; +} diff --git a/app/layout.tsx b/app/layout.tsx index 4619a98..58b4207 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -36,19 +36,46 @@ export default function RootLayout({
{children}