'use client'; import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import { storefrontService, FooterInfo, MOCK_FOOTER_INFO, } from '@/services/api/storefrontService'; import { PaymentMethodBadges } from '@/components/PaymentMethodBadges'; function SocialIcon({ name }: { name?: string }) { const key = (name || '').toLowerCase(); const className = 'w-5 h-5 fill-current'; if (key.includes('facebook')) { return ( ); } if (key.includes('twitter') || key === 'x') { return ( ); } if (key.includes('instagram')) { return ( ); } if (key.includes('tiktok')) { return ( ); } if (key.includes('pinterest')) { return ( ); } if (key.includes('youtube')) { return ( ); } if (key.includes('linkedin')) { return ( ); } return ( ); } function FooterLink({ href, label }: { href: string; label: string }) { const to = href?.trim() || '#'; const className = 'hover:text-[#0073EC] transition-colors'; const isExternal = /^https?:\/\//i.test(to); if (isExternal) { return ( {label} ); } return ( {label} ); } function isFeedbackFooterLink(label?: string, href?: string): boolean { const text = String(label || '').toLowerCase(); const path = String(href || '').split('?')[0]; return text.includes('feedback') || /^\/feedback\/?$/i.test(path); } function isHelpCenterFooterLink(label?: string, href?: string): boolean { const text = String(label || '').toLowerCase(); const path = String(href || '').split('?')[0]; return text.includes('help') || /^\/help\/?$/i.test(path); } function isPaymentsFooterLink(label?: string, href?: string): boolean { const text = String(label || '').toLowerCase(); const path = String(href || '').split('?')[0]; return text.includes('payment') || /^\/payments\/?$/i.test(path); } function isReturnsFooterLink(label?: string, href?: string): boolean { const text = String(label || '').toLowerCase(); const path = String(href || '').split('?')[0]; return text.includes('return') || /^\/returns?\/?$/i.test(path); } type FooterColumn = { title?: string; links?: { label: string; href: string }[] }; function withRequiredFooterLinks(columns: FooterColumn[]): FooterColumn[] { let hasInformation = false; let hasOrders = false; const next = columns.map((col) => { const title = String(col.title || ''); let links = [...(col.links || [])]; if (/information/i.test(title)) { hasInformation = true; links = links.map((l) => { if (isHelpCenterFooterLink(l.label, l.href)) return { ...l, href: '/help' }; if (isFeedbackFooterLink(l.label, l.href)) return { ...l, href: '/feedback' }; return l; }); if (!links.some((l) => isHelpCenterFooterLink(l.label, l.href))) { links.unshift({ label: 'Help Center', href: '/help' }); } if (!links.some((l) => isFeedbackFooterLink(l.label, l.href))) { links.push({ label: 'Feedback', href: '/feedback' }); } if (!links.some((l) => isPaymentsFooterLink(l.label, l.href))) { links.push({ label: 'Payments', href: '/payments' }); } } if (/order/i.test(title) || /return/i.test(title)) { hasOrders = true; links = links.map((l) => isReturnsFooterLink(l.label, l.href) ? { ...l, href: '/returns' } : l ); if (!links.some((l) => isReturnsFooterLink(l.label, l.href))) { links.push({ label: 'Returns', href: '/returns' }); } } return { ...col, links }; }); if (!hasInformation) { next.push({ title: 'Information', links: [ { label: 'Help Center', href: '/help' }, { label: 'Feedback', href: '/feedback' }, { label: 'Payments', href: '/payments' }, ], }); } if (!hasOrders) { next.push({ title: 'Orders & Returns', links: [{ label: 'Returns', href: '/returns' }] }); } return next; } export const Footer: React.FC = () => { const [info, setInfo] = useState(MOCK_FOOTER_INFO); useEffect(() => { let cancelled = false; storefrontService.getFooterInfo().then((data) => { if (!cancelled && data) setInfo(data); }); return () => { cancelled = true; }; }, []); const columns = withRequiredFooterLinks( info.columns && info.columns.length > 0 ? info.columns.filter((c) => c?.title || (c.links || []).length > 0) : [ { title: 'Get to know Us', links: info.get_to_know_us || [] }, { title: 'Information', links: info.information || [] }, { title: 'Orders & Returns', links: info.orders_returns || [] }, { title: 'Our Store', links: info.our_store || [] }, ].filter((c) => c.links.length > 0) ); const socials = (info.social_links || []).filter((s) => s?.url); const payments = (info.payment_methods || []).filter((p) => p?.name || p?.icon_url); return ( ); };